انتقال تمام محتوای متنی سایت به دیتابیس — همه متن‌های فرانت‌اند از GET /api/site خوانده می‌شوند

frontend/src/components/home/Gallery.tsx

@@ -3,17 +3,17 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { ChevronLeftIcon, ChevronRightIcon, XIcon } from 'lucide-react'
 import { Reveal } from '../Reveal'
 import { SectionHeading } from '../SectionHeading'
-import { IMAGES } from '../../data/site'
-
-const GRID = [IMAGES[0], IMAGES[1], IMAGES[2], IMAGES[3], IMAGES[4], IMAGES[1]]
+import { useSectionHeading, useSite } from '../../api'
 
 export function Gallery() {
+  const { gallery } = useSite()
+  const heading = useSectionHeading('gallery')
   const [active, setActive] = useState<number | null>(null)
 
   const close = useCallback(() => setActive(null), [])
   const step = useCallback((dir: number) => {
-    setActive((prev) => (prev === null ? prev : (prev + dir + GRID.length) % GRID.length))
-  }, [])
+    setActive((prev) => (prev === null ? prev : (prev + dir + gallery.length) % gallery.length))
+  }, [gallery.length])
 
   useEffect(() => {
     if (active === null) return
@@ -30,14 +30,14 @@ export function Gallery() {
     <section className="bg-ink py-24 lg:py-32" aria-labelledby="gallery-title">
       <div className="mx-auto max-w-site px-6 lg:px-10">
         <SectionHeading
-          title="گالری تصاویر"
-          lead="قاب‌هایی از کارگاه‌ها و پروژه‌های تحویل‌شده گروه ساختمانی آرامش."
+          title={heading.title}
+          lead={heading.lead}
           align="center"
         />
 
         <div className="mt-14 grid grid-cols-2 gap-4 lg:grid-cols-3">
-          {GRID.map((src, i) => (
-            <Reveal key={`${src}-${i}`} delay={0.04 * i}>
+          {gallery.map((image, i) => (
+            <Reveal key={image.id} delay={0.04 * i}>
               <button
                 type="button"
                 onClick={() => setActive(i)}
@@ -45,8 +45,8 @@ export function Gallery() {
                 aria-label={`بزرگ‌نمایی تصویر شماره ${(i + 1).toLocaleString('fa-IR')}`}
               >
                 <img
-                  src={src}
-                  alt={`تصویری از پروژه‌های گروه ساختمانی آرامش، شماره ${(i + 1).toLocaleString('fa-IR')}`}
+                  src={image.src}
+                  alt={image.alt}
                   className="aspect-[4/3] w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105"
                 />
               </button>
@@ -102,7 +102,7 @@ export function Gallery() {
 
             <motion.img
               key={active}
-              src={GRID[active]}
+              src={gallery[active].src}
               alt=""
               initial={{ opacity: 0, scale: 0.95 }}
               animate={{ opacity: 1, scale: 1 }}