فرانت‌اند: ویرایش زنده درجا — دوقلوی دیجیتال سایت برای ادمین

لایه ویرایش بصری روی سایت واقعی (بدون داشبورد جدا):

- ورود ادمین از مسیر پنهان /admin/login با توکن JWT (localStorage) و
  AdminContext شامل isEditMode و وضعیت ذخیره (همگام/در حال ذخیره/خطا)
- AdminBar شناور پایین صفحه (فقط برای کاربر واردشده): کلید حالت ویرایش،
  وضعیت ذخیره، خروج — حالت ویرایش در sessionStorage می‌ماند
- InlineEdit: در حالت عادی دقیقاً همان HTML قبلی (بدون تغییر چیدمان)؛
  در حالت ویرایش کادرخط‌چین + contentEditable با ذخیره خودکار در blur
  (Enter ذخیره، Esc لغو) — وایرایش‌شده روی همه متن‌های سایت: هیرو،
  تیتر بخش‌ها، هیرو صفحات، داستان، فرم تماس، خبرنامه، فوتر، منو،
  برچسب‌های وضعیت پروژه و...
- کشوی عمومی EntityDrawer با پیکربندی متمرکز برای ۱۴ مجموعه (خدمات،
  پروژه‌ها، مقالات، نظرات، سوالات، تیم، تایم‌لاین، آمار، چرا آرامش،
  مدل‌های سرمایه‌گذاری، مراحل کار، دفاتر، گالری، منو): ویرایش چندفیلدی،
  افزودن، حذف و جابه‌جایی ترتیب (▲▼) با ذخیره خودکار هر فیلد
- دکمه‌های شناور ویرایش/حذف/ترتیب فقط در حالت ویرایش روی آیتم‌ها
- کشوهای یگانه: برند و لوگو، تنظیمات هیرو، فرم تماس، خبرنامه، فوتر،
  قبل/بعد و نقل‌قول داستان — آپلود تصویر به MinIO از همان‌جا
- به‌روزرسانی خوش‌بینانه SiteContext (updateSite) پس از هر PATCH؛
  مسیرها در حالت ویرایش کلیک نمی‌شوند؛ breadcrumb محافظ beforeunload

frontend/src/components/home/Hero.tsx

@@ -3,14 +3,23 @@ import { motion, useScroll, useTransform } from 'framer-motion'
 import { ArrowLeftIcon, ChevronDownIcon } from 'lucide-react'
 import { ButtonLink } from '../Button'
 import { useSite } from '../../api'
+import { useFieldSaver } from '../../admin/AdminContext'
+import { InlineEdit } from '../admin/InlineEdit'
+import { SingletonPill } from '../../admin/Editable'
 
 export function Hero() {
   const { brand, hero } = useSite()
+  const save = useFieldSaver()
   const { scrollY } = useScroll()
   const imageY = useTransform(scrollY, [0, 700], [0, 110])
   const contentY = useTransform(scrollY, [0, 700], [0, -55])
   const overlay = useTransform(scrollY, [0, 600], [0.5, 0.78])
 
+  const saveHero = (field: string, value: unknown) =>
+    save('hero', hero.id, { [field]: value }, (d) => {
+      ;(d.hero as unknown as Record<string, unknown>)[field] = value
+    })
+
   // واژه highlight در میانه تیتر با رنگ مسی رندر می‌شود
   const renderTitle = () => {
     if (hero.title_highlight && hero.title.includes(hero.title_highlight)) {
@@ -55,7 +64,7 @@ export function Hero() {
             transition={{ duration: 0.7, delay: 2.1, ease: [0.23, 1, 0.32, 1] }}
             className="text-sm font-light text-copper"
           >
-            {hero.kicker}
+            <InlineEdit value={hero.kicker} onSave={(v) => saveHero('kicker', v)} />
           </motion.p>
 
           <motion.h1
@@ -64,7 +73,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"
           >
-            {renderTitle()}
+            <InlineEdit value={hero.title} onSave={(v) => saveHero('title', v)} aria-label="تیتر اصلی صفحه" />
           </motion.h1>
 
           <motion.p
@@ -73,7 +82,7 @@ export function Hero() {
             transition={{ duration: 0.85, delay: 2.32, ease: [0.23, 1, 0.32, 1] }}
             className="mt-7 max-w-xl text-base font-light leading-9 text-ivory/70"
           >
-            {hero.subtitle}
+            <InlineEdit multiline value={hero.subtitle} onSave={(v) => saveHero('subtitle', v)} />
           </motion.p>
 
           <motion.div
@@ -83,11 +92,11 @@ export function Hero() {
             className="mt-10 flex flex-wrap items-center gap-4"
           >
             <ButtonLink to={hero.cta_primary_href} variant="copper">
-              {hero.cta_primary_label}
+              <InlineEdit value={hero.cta_primary_label} onSave={(v) => saveHero('cta_primary_label', v)} />
               <ArrowLeftIcon className="h-4 w-4" />
             </ButtonLink>
             <ButtonLink to={hero.cta_secondary_href} variant="outline" className="font-light">
-              {hero.cta_secondary_label}
+              <InlineEdit value={hero.cta_secondary_label} onSave={(v) => saveHero('cta_secondary_label', v)} />
             </ButtonLink>
           </motion.div>
         </div>
@@ -98,8 +107,12 @@ export function Hero() {
           transition={{ duration: 0.9, delay: 2.6, ease: [0.23, 1, 0.32, 1] }}
           className="absolute bottom-28 left-6 hidden w-60 border border-ivory/15 bg-char/60 p-6 backdrop-blur-md lg:block lg:left-10"
         >
-          <p className="text-3xl font-bold text-copper">{hero.badge_value}</p>
-          <p className="mt-2 text-sm font-light leading-7 text-ivory/70">{hero.badge_label}</p>
+          <p className="text-3xl font-bold text-copper">
+            <InlineEdit value={hero.badge_value} onSave={(v) => saveHero('badge_value', v)} />
+          </p>
+          <p className="mt-2 text-sm font-light leading-7 text-ivory/70">
+            <InlineEdit multiline value={hero.badge_label} onSave={(v) => saveHero('badge_label', v)} />
+          </p>
         </motion.div>
       </motion.div>
 
@@ -108,9 +121,17 @@ export function Hero() {
         aria-label="رفتن به بخش بعدی"
         className="absolute bottom-8 right-1/2 z-10 flex translate-x-1/2 flex-col items-center gap-2 text-ivory/50 transition-colors duration-200 ease-lux hover:text-copper"
       >
-        <span className="text-xs font-light">{hero.scroll_label}</span>
+        <span className="text-xs font-light">
+          <InlineEdit value={hero.scroll_label} onSave={(v) => saveHero('scroll_label', v)} />
+        </span>
         <ChevronDownIcon className="h-4 w-4 animate-bounce" />
       </a>
+
+      <SingletonPill
+        resource="hero"
+        label="تنظیمات هیرو (واژه مسی، دکمه‌ها)"
+        className="absolute left-6 top-24 z-20 lg:left-10"
+      />
     </section>
   )
 }