فرانت‌اند: نسخه انگلیسی با مسیر /en/ — مسیریابی دوزبانه، دیکشنری رابط، بومی‌سازی داده، تغییر زبان در هدر، ویرایش انگلیسی در پنل و پشتیبانی LTR

frontend/src/components/home/Gallery.tsx

@@ -4,10 +4,12 @@ import { ChevronLeftIcon, ChevronRightIcon, XIcon } from 'lucide-react'
 import { Reveal } from '../Reveal'
 import { SectionHeading } from '../SectionHeading'
 import { useSite } from '../../api'
+import { useLang, formatNumber } from '../../i18n/lang'
 import { AddItemButton, EditableItem } from '../../admin/Editable'
 
 export function Gallery() {
   const { gallery } = useSite()
+  const { t, lang } = useLang()
   const [active, setActive] = useState<number | null>(null)
 
   const close = useCallback(() => setActive(null), [])
@@ -30,8 +32,8 @@ 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={t('fallbackGalleryTitle')}
+          lead={t('fallbackGalleryLead')}
           headingKey="gallery"
           align="center"
         />
@@ -44,7 +46,7 @@ export function Gallery() {
                   type="button"
                   onClick={() => setActive(i)}
                   className="group block w-full overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
-                  aria-label={`بزرگ‌نمایی تصویر شماره ${(i + 1).toLocaleString('fa-IR')}`}
+                  aria-label={`${t('zoomImagePrefix')} ${formatNumber(i + 1, lang)}`}
                 >
                   <img
                     src={image.src}
@@ -69,14 +71,14 @@ export function Gallery() {
             transition={{ duration: 0.5, ease: [0.23, 1, 0.32, 1] }}
             role="dialog"
             aria-modal="true"
-            aria-label="نمایش تصویر"
+            aria-label={t('viewImage')}
             onClick={close}
           >
             <button
               type="button"
               onClick={close}
-              className="absolute left-8 top-8 flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory transition-colors duration-200 ease-lux hover:border-copper hover:text-copper"
-              aria-label="بستن"
+              className="absolute top-8 ltr:right-8 rtl:left-8 flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory transition-colors duration-200 ease-lux hover:border-copper hover:text-copper"
+              aria-label={t('close')}
             >
               <XIcon className="h-5 w-5" />
             </button>
@@ -87,10 +89,10 @@ export function Gallery() {
                 e.stopPropagation()
                 step(-1)
               }}
-              className="absolute right-6 flex h-12 w-12 items-center justify-center border border-ivory/20 text-ivory transition-colors duration-200 ease-lux hover:border-copper hover:text-copper md:right-10"
-              aria-label="تصویر قبلی"
+              className="absolute flex h-12 w-12 items-center justify-center border border-ivory/20 text-ivory transition-colors duration-200 ease-lux hover:border-copper hover:text-copper rtl:right-6 md:rtl:right-10 ltr:left-6 md:ltr:left-10"
+              aria-label={t('prevImage')}
             >
-              <ChevronRightIcon className="h-6 w-6" />
+              <ChevronRightIcon className="h-6 w-6 ltr:rotate-180" />
             </button>
             <button
               type="button"
@@ -98,10 +100,10 @@ export function Gallery() {
                 e.stopPropagation()
                 step(1)
               }}
-              className="absolute left-6 flex h-12 w-12 items-center justify-center border border-ivory/20 text-ivory transition-colors duration-200 ease-lux hover:border-copper hover:text-copper md:left-10"
-              aria-label="تصویر بعدی"
+              className="absolute flex h-12 w-12 items-center justify-center border border-ivory/20 text-ivory transition-colors duration-200 ease-lux hover:border-copper hover:text-copper rtl:left-6 md:rtl:left-10 ltr:right-6 md:ltr:right-10"
+              aria-label={t('nextImage')}
             >
-              <ChevronLeftIcon className="h-6 w-6" />
+              <ChevronLeftIcon className="h-6 w-6 ltr:rotate-180" />
             </button>
 
             <motion.img