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

frontend/src/components/home/Hero.tsx

@@ -3,12 +3,14 @@ import { motion, useScroll, useTransform } from 'framer-motion'
 import { ArrowLeftIcon, ChevronDownIcon } from 'lucide-react'
 import { ButtonLink } from '../Button'
 import { useSite } from '../../api'
+import { useLang } from '../../i18n/lang'
 import { useFieldSaver } from '../../admin/AdminContext'
 import { InlineEdit } from '../admin/InlineEdit'
 import { SingletonPill } from '../../admin/Editable'
 
 export function Hero() {
   const { brand, hero } = useSite()
+  const { t, href } = useLang()
   const save = useFieldSaver()
   const { scrollY } = useScroll()
   const imageY = useTransform(scrollY, [0, 700], [0, 110])
@@ -21,11 +23,11 @@ export function Hero() {
     })
 
   return (
-    <section className="relative h-screen min-h-[640px] w-full overflow-hidden" aria-label="معرفی گروه ساختمانی آرامش">
+    <section className="relative h-screen min-h-[640px] w-full overflow-hidden" aria-label={t('heroAria')}>
       {/* تصویر پس‌زمینه */}
       <motion.img
         src={brand.hero}
-        alt="نمای شبانه برج مسکونی ساخته‌شده توسط گروه ساختمانی آرامش"
+        alt={t('heroImageAlt')}
         style={{ y: imageY }}
         className="absolute inset-0 h-[114%] w-full object-cover"
       />
@@ -62,7 +64,7 @@ export function Hero() {
             transition={{ duration: 0.85, delay: 2.2, ease: [0.23, 1, 0.32, 1] }}
             className="mt-6 text-hero font-bold text-ivory leading-[1.3]"
           >
-            <InlineEdit value={hero.title} onSave={(v) => saveHero('title', v)} aria-label="تیتر اصلی صفحه" />
+            <InlineEdit value={hero.title} onSave={(v) => saveHero('title', v)} aria-label={t('heroTitleAria')} />
           </motion.h1>
 
           {/* زیرتیتر */}
@@ -84,21 +86,21 @@ export function Hero() {
           >
             {/* دکمه اصلی: کپسولی شیشه‌ای دودی با دایره کهربایی اختصاصی برای آیکون */}
             <ButtonLink
-              to={hero.cta_primary_href}
+              to={href(hero.cta_primary_href)}
               variant="copper"
               className="!p-1.5 !pr-7 !rounded-full shadow-lg shadow-black/40 hover:shadow-copper/25 transition-all duration-300"
             >
               <span className="text-sm font-medium tracking-wide text-ivory">
                 <InlineEdit value={hero.cta_primary_label} onSave={(v) => saveHero('cta_primary_label', v)} />
               </span>
-              <span className="flex h-9 w-9 items-center justify-center rounded-full bg-copper text-char shadow-md transition-all duration-300 group-hover:scale-110 group-hover:-translate-x-1">
-                <ArrowLeftIcon className="h-4 w-4 stroke-[2.5]" />
+              <span className="flex h-9 w-9 items-center justify-center rounded-full bg-copper text-char shadow-md transition-all duration-300 group-hover:scale-110 rtl:group-hover:-translate-x-1 ltr:group-hover:translate-x-1">
+                <ArrowLeftIcon className="h-4 w-4 stroke-[2.5] ltr:-scale-x-100" />
               </span>
             </ButtonLink>
 
             {/* دکمه ثانویه: شیشه دودی مات (Smoked Glass) با کادر ظریف */}
             <ButtonLink
-              to={hero.cta_secondary_href}
+              to={href(hero.cta_secondary_href)}
               variant="outline"
               className="!rounded-full !px-8 !py-3.5 bg-char/40 backdrop-blur-md border border-ivory/20 text-ivory hover:border-copper/70 hover:text-copper transition-all duration-300 shadow-sm"
             >
@@ -112,7 +114,7 @@ export function Hero() {
           initial={{ opacity: 0, x: -24 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.9, delay: 2.6, ease: [0.23, 1, 0.32, 1] }}
-          className="absolute bottom-28 left-6 hidden w-64 rounded-2xl border border-ivory/15 bg-char/70 p-6 backdrop-blur-xl shadow-2xl shadow-black/40 lg:block lg:left-10"
+          className="absolute bottom-28 ltr:right-6 rtl:left-6 hidden w-64 rounded-2xl border border-ivory/15 bg-char/70 p-6 backdrop-blur-xl shadow-2xl shadow-black/40 lg:block lg:ltr:right-10 lg:rtl:left-10"
         >
           <p className="text-3xl font-bold text-copper font-mono">
             <InlineEdit value={hero.badge_value} onSave={(v) => saveHero('badge_value', v)} />
@@ -126,7 +128,7 @@ export function Hero() {
       {/* دکمه اسکرول پایین: تبدیل‌شده به یک گوی شیشه‌ای دایره‌ای */}
       <a
         href="#story"
-        aria-label="رفتن به بخش بعدی"
+        aria-label={t('scrollDown')}
         className="group absolute bottom-7 right-1/2 z-10 flex translate-x-1/2 flex-col items-center gap-2 text-ivory/60 transition-colors duration-300 hover:text-copper"
       >
         <span className="text-[11px] font-light tracking-widest opacity-80 group-hover:opacity-100">