From 5ed082631e85107e5db2c9935ce4ad0b45fe8c30 Mon Sep 17 00:00:00 2001
From: MMD <mola313002@gmail.com>
Date: Sun, 6 Sep 2026 21:57:26 +0330
Subject: [PATCH] =?UTF-8?q?=D9=81=D8=B1=D8=A7=D9=86=D8=AA=E2=80=8C=D8=A7?=
 =?UTF-8?q?=D9=86=D8=AF:=20=D9=88=DB=8C=D8=B1=D8=A7=DB=8C=D8=B4=20=D8=B2?=
 =?UTF-8?q?=D9=86=D8=AF=D9=87=20=D8=AF=D8=B1=D8=AC=D8=A7=20=E2=80=94=20?=
 =?UTF-8?q?=D8=AF=D9=88=D9=82=D9=84=D9=88=DB=8C=20=D8=AF=DB=8C=D8=AC=DB=8C?=
 =?UTF-8?q?=D8=AA=D8=A7=D9=84=20=D8=B3=D8=A7=DB=8C=D8=AA=20=D8=A8=D8=B1?=
 =?UTF-8?q?=D8=A7=DB=8C=20=D8=A7=D8=AF=D9=85=DB=8C=D9=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

- ورود ادمین از مسیر پنهان /admin/login با توکن JWT (localStorage) و
  AdminContext شامل isEditMode و وضعیت ذخیره (همگام/در حال ذخیره/خطا)
- AdminBar شناور پایین صفحه (فقط برای کاربر واردشده): کلید حالت ویرایش،
  وضعیت ذخیره، خروج — حالت ویرایش در sessionStorage می‌ماند
- InlineEdit: در حالت عادی دقیقاً همان HTML قبلی (بدون تغییر چیدمان)؛
  در حالت ویرایش کادرخط‌چین + contentEditable با ذخیره خودکار در blur
  (Enter ذخیره، Esc لغو) — وایرایش‌شده روی همه متن‌های سایت: هیرو،
  تیتر بخش‌ها، هیرو صفحات، داستان، فرم تماس، خبرنامه، فوتر، منو،
  برچسب‌های وضعیت پروژه و...
- کشوی عمومی EntityDrawer با پیکربندی متمرکز برای ۱۴ مجموعه (خدمات،
  پروژه‌ها، مقالات، نظرات، سوالات، تیم، تایم‌لاین، آمار، چرا آرامش،
  مدل‌های سرمایه‌گذاری، مراحل کار، دفاتر، گالری، منو): ویرایش چندفیلدی،
  افزودن، حذف و جابه‌جایی ترتیب (▲▼) با ذخیره خودکار هر فیلد
- دکمه‌های شناور ویرایش/حذف/ترتیب فقط در حالت ویرایش روی آیتم‌ها
- کشوهای یگانه: برند و لوگو، تنظیمات هیرو، فرم تماس، خبرنامه، فوتر،
  قبل/بعد و نقل‌قول داستان — آپلود تصویر به MinIO از همان‌جا
- به‌روزرسانی خوش‌بینانه SiteContext (updateSite) پس از هر PATCH؛
  مسیرها در حالت ویرایش کلیک نمی‌شوند؛ breadcrumb محافظ beforeunload
---
 .gitignore                                    |   3 +
 frontend/src/App.tsx                          |  31 ++-
 frontend/src/admin/AdminBar.tsx               |  64 +++++
 frontend/src/admin/AdminContext.tsx           | 157 +++++++++++
 frontend/src/admin/AdminLoginPage.tsx         |  85 ++++++
 frontend/src/admin/Editable.tsx               | 208 +++++++++++++++
 frontend/src/admin/EntityDrawer.tsx           | 250 ++++++++++++++++++
 frontend/src/admin/adminClient.ts             |  86 ++++++
 frontend/src/admin/entities.ts                | 187 +++++++++++++
 frontend/src/api.tsx                          |  24 +-
 frontend/src/components/ContactSection.tsx    |  67 +++--
 frontend/src/components/Footer.tsx            |  59 ++++-
 frontend/src/components/Header.tsx            |  31 ++-
 frontend/src/components/PageHero.tsx          |  56 +++-
 frontend/src/components/SectionHeading.tsx    |  45 +++-
 frontend/src/components/admin/ImageField.tsx  |  81 ++++++
 frontend/src/components/admin/InlineEdit.tsx  |  87 ++++++
 frontend/src/components/home/Articles.tsx     |  32 ++-
 frontend/src/components/home/BeforeAfter.tsx  |   5 +
 frontend/src/components/home/Faq.tsx          |  82 +++---
 .../src/components/home/FeaturedProjects.tsx  |  48 +++-
 frontend/src/components/home/Gallery.tsx      |  40 +--
 frontend/src/components/home/Hero.tsx         |  37 ++-
 frontend/src/components/home/Newsletter.tsx   |  22 +-
 frontend/src/components/home/Services.tsx     |  42 ++-
 frontend/src/components/home/Stats.tsx        |  31 ++-
 frontend/src/components/home/Story.tsx        |  49 +++-
 frontend/src/components/home/Team.tsx         |  36 +--
 frontend/src/components/home/Testimonials.tsx |  33 +--
 frontend/src/components/home/Timeline.tsx     |  28 +-
 frontend/src/components/home/WhyUs.tsx        |  38 ++-
 frontend/src/data/site.ts                     |   3 +
 frontend/src/pages/About.tsx                  |   6 +-
 frontend/src/pages/Blog.tsx                   |  17 +-
 frontend/src/pages/ContactPage.tsx            |  11 +-
 frontend/src/pages/FaqPage.tsx                |   6 +-
 frontend/src/pages/Investment.tsx             |  11 +-
 frontend/src/pages/Projects.tsx               |  33 ++-
 frontend/src/pages/ServicesPage.tsx           |  11 +-
 39 files changed, 1882 insertions(+), 260 deletions(-)
 create mode 100644 frontend/src/admin/AdminBar.tsx
 create mode 100644 frontend/src/admin/AdminContext.tsx
 create mode 100644 frontend/src/admin/AdminLoginPage.tsx
 create mode 100644 frontend/src/admin/Editable.tsx
 create mode 100644 frontend/src/admin/EntityDrawer.tsx
 create mode 100644 frontend/src/admin/adminClient.ts
 create mode 100644 frontend/src/admin/entities.ts
 create mode 100644 frontend/src/components/admin/ImageField.tsx
 create mode 100644 frontend/src/components/admin/InlineEdit.tsx

diff --git a/.gitignore b/.gitignore
index 073ce1d..892a7d0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,6 @@ Thumbs.db
 # Database
 *.sqlite3
 *.db
+
+# تصاویر محلی — از پنل/کنسول MinIO مدیریت می‌شوند
+frontend/public/images/
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index dce1d9a..f7e4a50 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -16,6 +16,9 @@ import { ArticleDetail } from './pages/ArticleDetail';
 import { FaqPage } from './pages/FaqPage';
 import { ContactPage } from './pages/ContactPage';
 import { SiteProvider, useSiteData } from './api';
+import { AdminProvider, useAdmin } from './admin/AdminContext';
+import { AdminBar } from './admin/AdminBar';
+import { AdminLoginPage } from './admin/AdminLoginPage';
 
 function ScrollToTop() {
   const { pathname } = useLocation();
@@ -35,8 +38,9 @@ function AnimatedRoutes() {
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
         transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}>
-        
+
         <Routes location={location}>
+          <Route path="/admin/login" element={<AdminLoginPage />} />
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
           <Route path="/services" element={<ServicesPage />} />
@@ -54,6 +58,22 @@ function AnimatedRoutes() {
 
 }
 
+function AppChrome() {
+  const { pathname } = useLocation();
+  const { isAuthenticated } = useAdmin();
+  const isLoginPage = pathname === '/admin/login';
+
+  return (
+    <>
+      {!isLoginPage && <Header />}
+      <AnimatedRoutes />
+      {!isLoginPage && <Footer />}
+      {!isLoginPage && <FloatingContact />}
+      {isAuthenticated && <AdminBar />}
+    </>
+  );
+}
+
 function AppShell() {
   const { data, error, reload } = useSiteData();
 
@@ -81,10 +101,7 @@ function AppShell() {
       ) : data ? (
         <BrowserRouter>
           <ScrollToTop />
-          <Header />
-          <AnimatedRoutes />
-          <Footer />
-          <FloatingContact />
+          <AppChrome />
         </BrowserRouter>
       ) : null}
     </div>
@@ -99,7 +116,9 @@ export function App() {
 
   return (
     <SiteProvider>
-      <AppShell />
+      <AdminProvider>
+        <AppShell />
+      </AdminProvider>
     </SiteProvider>
   );
 }
diff --git a/frontend/src/admin/AdminBar.tsx b/frontend/src/admin/AdminBar.tsx
new file mode 100644
index 0000000..a6df5be
--- /dev/null
+++ b/frontend/src/admin/AdminBar.tsx
@@ -0,0 +1,64 @@
+import { useAdmin } from './AdminContext'
+
+const STATUS_TEXT: Record<string, string> = {
+  idle: 'همگام‌سازی شد',
+  saving: 'در حال ذخیره…',
+  error: 'خطا در ذخیره',
+}
+
+const STATUS_COLOR: Record<string, string> = {
+  idle: 'bg-emerald-400',
+  saving: 'bg-copper animate-pulse',
+  error: 'bg-red-400',
+}
+
+/** نوار شناور ادمین — فقط برای کاربر واردشده رندر می‌شود */
+export function AdminBar() {
+  const { isEditMode, toggleEditMode, saveStatus, logout } = useAdmin()
+
+  return (
+    <div
+      dir="rtl"
+      className="fixed bottom-4 right-1/2 z-[90] flex translate-x-1/2 items-center gap-5 border border-ivory/15 bg-ink/95 py-2.5 pl-6 pr-5 shadow-2xl backdrop-blur-md"
+    >
+      <span className="flex items-center gap-2 text-xs font-bold text-copper">
+        <span className="flex h-2 w-2 rounded-full bg-copper" />
+        حالت مدیریت
+      </span>
+
+      <button
+        type="button"
+        role="switch"
+        aria-checked={isEditMode}
+        onClick={toggleEditMode}
+        className="group flex items-center gap-3 text-sm font-light text-ivory/80"
+      >
+        <span
+          className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition-colors duration-200 ${
+            isEditMode ? 'border-copper bg-copper/30' : 'border-ivory/25 bg-char'
+          }`}
+        >
+          <span
+            className={`absolute h-4 w-4 rounded-full transition-all duration-200 ${
+              isEditMode ? 'right-1 bg-copper' : 'right-6 bg-ivory/50'
+            }`}
+          />
+        </span>
+        {isEditMode ? 'حالت ویرایش فعال' : 'حالت ویرایش خاموش'}
+      </button>
+
+      <span className="flex items-center gap-2 border-r border-ivory/10 pr-5 text-xs font-light text-ivory/60">
+        <span className={`h-1.5 w-1.5 rounded-full ${STATUS_COLOR[saveStatus]}`} aria-hidden="true" />
+        {STATUS_TEXT[saveStatus]}
+      </span>
+
+      <button
+        type="button"
+        onClick={logout}
+        className="border border-ivory/20 px-3 py-1.5 text-xs font-light text-ivory/70 transition-colors duration-200 hover:border-copper hover:text-copper"
+      >
+        خروج
+      </button>
+    </div>
+  )
+}
diff --git a/frontend/src/admin/AdminContext.tsx b/frontend/src/admin/AdminContext.tsx
new file mode 100644
index 0000000..f57f000
--- /dev/null
+++ b/frontend/src/admin/AdminContext.tsx
@@ -0,0 +1,157 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import Swal from 'sweetalert2'
+import type { SiteData } from '../api'
+import { useSiteData } from '../api'
+import { adminApi, getToken, HttpError, setToken } from './adminClient'
+
+export type SaveStatus = 'idle' | 'saving' | 'error'
+
+interface AdminContextValue {
+  isAuthenticated: boolean
+  isEditMode: boolean
+  toggleEditMode: () => void
+  login: (username: string, password: string) => Promise<void>
+  logout: () => void
+  saveStatus: SaveStatus
+  /** اجرای یک عملیات ذخیره — وضعیت نوار ادمین را به‌روز می‌کند و خطاها را با دکمه تلاش دوباره نشان می‌دهد */
+  runSave: (action: () => Promise<void>) => Promise<boolean>
+}
+
+const AdminContext = createContext<AdminContextValue | null>(null)
+
+export function useAdmin(): AdminContextValue {
+  const ctx = useContext(AdminContext)
+  if (!ctx) throw new Error('useAdmin باید داخل AdminProvider استفاده شود')
+  return ctx
+}
+
+function showSaveError(error: unknown): void {
+  const message =
+    error instanceof HttpError ? error.message : 'ارتباط با سرور برقرار نشد — اتصال اینترنت را بررسی کنید'
+  Swal.fire({
+    icon: 'error',
+    title: 'ذخیره نشد',
+    text: message,
+    background: '#1e1a16',
+    color: '#F5F3EF',
+    iconColor: '#d5874c',
+    confirmButtonText: 'باشه',
+    timer: 4000,
+    timerProgressBar: true,
+    buttonsStyling: false,
+    customClass: {
+      popup: 'font-pinar border border-ivory/10 rounded-none',
+      title: 'font-pinar font-bold text-lg text-ivory',
+      htmlContainer: 'font-pinar font-light text-sm text-ivory/70',
+      confirmButton: 'bg-copper text-char font-bold px-8 py-2.5',
+    },
+  })
+}
+
+export function AdminProvider({ children }: { children: ReactNode }) {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(() => !!getToken())
+  const [isEditMode, setIsEditMode] = useState<boolean>(
+    () => sessionStorage.getItem('aramesh_edit_mode') === '1',
+  )
+  const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle')
+  const { reload } = useSiteData()
+
+  const toggleEditMode = useCallback(() => {
+    setIsEditMode((v) => {
+      sessionStorage.setItem('aramesh_edit_mode', v ? '0' : '1')
+      return !v
+    })
+  }, [])
+
+  const login = useCallback(async (username: string, password: string) => {
+    await adminApi.login(username, password)
+    setIsAuthenticated(true)
+  }, [])
+
+  const logout = useCallback(() => {
+    setToken(null)
+    setIsAuthenticated(false)
+    setIsEditMode(false)
+    sessionStorage.removeItem('aramesh_edit_mode')
+  }, [])
+
+  const runSave = useCallback(
+    async (action: () => Promise<void>): Promise<boolean> => {
+      setSaveStatus('saving')
+      try {
+        await action()
+        setSaveStatus('idle')
+        return true
+      } catch (error) {
+        setSaveStatus('error')
+        showSaveError(error)
+        if (error instanceof HttpError && error.status === 401) {
+          logout()
+          reload()
+        }
+        return false
+      }
+    },
+    [logout, reload],
+  )
+
+  // در حالت ویرایش، کلیک روی لینک‌ها مسیریابی نمی‌کند تا ویرایش متن ممکن باشد
+  useEffect(() => {
+    if (!isEditMode) return
+    const onClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | null
+      if (target?.closest('a')) e.preventDefault()
+    }
+    document.addEventListener('click', onClick, true)
+    return () => document.removeEventListener('click', onClick, true)
+  }, [isEditMode])
+
+  // در حین ذخیره‌سازی، از بسته‌شدن تصادفی صفحه جلوگیری می‌شود
+  useEffect(() => {
+    if (saveStatus !== 'saving') return
+    const guard = (e: BeforeUnloadEvent) => {
+      e.preventDefault()
+    }
+    window.addEventListener('beforeunload', guard)
+    return () => window.removeEventListener('beforeunload', guard)
+  }, [saveStatus])
+
+  const value = useMemo<AdminContextValue>(
+    () => ({
+      isAuthenticated,
+      isEditMode,
+      toggleEditMode,
+      login,
+      logout,
+      saveStatus,
+      runSave,
+    }),
+    [isAuthenticated, isEditMode, toggleEditMode, login, logout, saveStatus, runSave],
+  )
+
+  return <AdminContext.Provider value={value}>{children}</AdminContext.Provider>
+}
+
+/**
+ * پرکاربردترین کمک‌ساز ویرایش: یک فیلد واحد را PATCH می‌کند و پس از موفقیت
+ * همان تغییر را به‌صورت خوش‌بینانه در درخت داده سایت اعمال می‌کند.
+ */
+export function useFieldSaver() {
+  const { runSave } = useAdmin()
+  const { updateSite } = useSiteData()
+
+  return useCallback(
+    (
+      resource: string,
+      id: number,
+      changes: Record<string, unknown>,
+      apply: (data: SiteData) => void,
+    ): Promise<boolean> =>
+      runSave(async () => {
+        await adminApi.patch(resource, id, changes)
+        updateSite(apply)
+      }),
+    [runSave, updateSite],
+  )
+}
diff --git a/frontend/src/admin/AdminLoginPage.tsx b/frontend/src/admin/AdminLoginPage.tsx
new file mode 100644
index 0000000..520fc2c
--- /dev/null
+++ b/frontend/src/admin/AdminLoginPage.tsx
@@ -0,0 +1,85 @@
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+import { Navigate, useNavigate } from 'react-router-dom'
+import { useAdmin } from './AdminContext'
+
+/** صفحه ورود ادمین — مسیر پنهان /admin/login */
+export function AdminLoginPage() {
+  const { isAuthenticated, login } = useAdmin()
+  const navigate = useNavigate()
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  if (isAuthenticated) return <Navigate to="/" replace />
+
+  const submit = async (e: FormEvent) => {
+    e.preventDefault()
+    if (submitting) return
+    setError('')
+    setSubmitting(true)
+    try {
+      await login(username.trim(), password)
+      navigate('/')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'ورود ناموفق بود')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <section className="flex min-h-screen flex-col items-center justify-center bg-ink px-6" dir="rtl">
+      <div className="w-full max-w-sm border border-ivory/10 bg-char p-10">
+        <h1 className="text-xl font-bold text-ivory">ورود مدیریت</h1>
+        <p className="mt-3 text-sm font-light leading-7 text-ivory/55">
+          برای فعال‌سازی حالت ویرایش زنده سایت وارد شوید.
+        </p>
+
+        <form onSubmit={submit} className="mt-8 grid gap-5" noValidate>
+          <div>
+            <label htmlFor="admin-username" className="block text-sm font-bold text-ivory/90">
+              نام کاربری
+            </label>
+            <input
+              id="admin-username"
+              type="text"
+              dir="ltr"
+              autoComplete="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="mt-2 w-full border border-ivory/20 bg-ink/50 px-4 py-3 text-sm text-ivory transition-colors duration-200 focus:border-copper focus:outline-none"
+            />
+          </div>
+          <div>
+            <label htmlFor="admin-password" className="block text-sm font-bold text-ivory/90">
+              رمز عبور
+            </label>
+            <input
+              id="admin-password"
+              type="password"
+              dir="ltr"
+              autoComplete="current-password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="mt-2 w-full border border-ivory/20 bg-ink/50 px-4 py-3 text-sm text-ivory transition-colors duration-200 focus:border-copper focus:outline-none"
+            />
+          </div>
+
+          {error && (
+            <p className="border-r-2 border-red-400/70 pr-3 text-xs font-light leading-6 text-red-300">{error}</p>
+          )}
+
+          <button
+            type="submit"
+            disabled={submitting}
+            className="mt-2 bg-copper px-8 py-3 text-sm font-bold text-char transition-transform duration-200 hover:scale-[1.02] disabled:opacity-50"
+          >
+            {submitting ? 'در حال ورود…' : 'ورود'}
+          </button>
+        </form>
+      </div>
+    </section>
+  )
+}
diff --git a/frontend/src/admin/Editable.tsx b/frontend/src/admin/Editable.tsx
new file mode 100644
index 0000000..c861da0
--- /dev/null
+++ b/frontend/src/admin/Editable.tsx
@@ -0,0 +1,208 @@
+import { useState } from 'react'
+import type { ReactNode } from 'react'
+import { ArrowDownIcon, ArrowUpIcon, PencilIcon, PlusIcon, Trash2Icon } from 'lucide-react'
+import Swal from 'sweetalert2'
+import { useSiteData } from '../api'
+import { useAdmin } from './AdminContext'
+import { adminApi } from './adminClient'
+import { ENTITIES } from './entities'
+import { EntityDrawer } from './EntityDrawer'
+
+type ItemWithId = Record<string, unknown> & { id: number }
+
+function useEntityList(resource: string): ItemWithId[] {
+  const { data } = useSiteData()
+  const config = ENTITIES[resource]
+  if (!config) throw new Error(`منبع ناشناخته: ${resource}`)
+  return (data?.[config.dataKey as keyof NonNullable<typeof data>] ?? []) as ItemWithId[]
+}
+
+function PillButton({
+  onClick,
+  label,
+  children,
+  danger = false,
+}: {
+  onClick: () => void
+  label: string
+  children: ReactNode
+  danger?: boolean
+}) {
+  return (
+    <button
+      type="button"
+      title={label}
+      aria-label={label}
+      onClick={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        onClick()
+      }}
+      className={`flex h-7 w-7 items-center justify-center border backdrop-blur-sm transition-colors duration-150 ${
+        danger
+          ? 'border-red-400/40 bg-ink/90 text-red-300 hover:bg-red-500/20'
+          : 'border-copper/50 bg-ink/90 text-copper hover:bg-copper hover:text-char'
+      }`}
+    >
+      {children}
+    </button>
+  )
+}
+
+/**
+ * بسته‌بندی آیتم‌های مجموعه‌ها — فقط در حالت ویرایش ادمین، دکمه‌های شناور
+ * (ویرایش / بالا / پایین / حذف) روی آیتم نشان می‌دهد؛ در حالت عادی خروجی یکسان است.
+ */
+export function EditableItem({
+  resource,
+  item,
+  children,
+  className = '',
+}: {
+  resource: string
+  item: ItemWithId
+  children: ReactNode
+  className?: string
+}) {
+  const { isAuthenticated, isEditMode, runSave } = useAdmin()
+  const { reload } = useSiteData()
+  const config = ENTITIES[resource]
+  const list = useEntityList(resource)
+  const [drawerOpen, setDrawerOpen] = useState(false)
+
+  if (!config) return <>{children}</>
+  if (!isAuthenticated || !isEditMode) return <>{children}</>
+
+  const index = list.findIndex((x) => x.id === item.id)
+
+  const move = (delta: number) => {
+    const target = index + delta
+    if (target < 0 || target >= list.length) return
+    const ids = list.map((x) => x.id)
+    ;[ids[index], ids[target]] = [ids[target], ids[index]]
+    void runSave(async () => {
+      await adminApi.reorder(config.resource, ids)
+      reload()
+    })
+  }
+
+  const remove = async () => {
+    const result = await Swal.fire({
+      icon: 'warning',
+      title: 'حذف رکورد',
+      text: `«${String(item[config.titleKey] ?? '')}» برای همیشه حذف شود؟`,
+      background: '#1e1a16',
+      color: '#F5F3EF',
+      iconColor: '#d5874c',
+      showCancelButton: true,
+      confirmButtonText: 'حذف',
+      cancelButtonText: 'انصراف',
+      buttonsStyling: false,
+      customClass: {
+        popup: 'font-pinar border border-ivory/10',
+        confirmButton: 'bg-red-500 text-white font-bold px-8 py-2.5 mx-2',
+        cancelButton: 'border border-ivory/30 text-ivory font-light px-8 py-2.5 mx-2',
+      },
+    })
+    if (!result.isConfirmed) return
+    void runSave(async () => {
+      await adminApi.remove(config.resource, item.id)
+      reload()
+    })
+  }
+
+  return (
+    <div className={`relative group/editable ${className}`}>
+      <div className="absolute left-2 top-2 z-30 flex flex-col gap-1.5 opacity-0 transition-opacity duration-150 group-hover/editable:opacity-100">
+        <PillButton onClick={() => setDrawerOpen(true)} label="ویرایش">
+          <PencilIcon className="h-3.5 w-3.5" />
+        </PillButton>
+        {index > 0 && (
+          <PillButton onClick={() => move(-1)} label="انتقال به قبل">
+            <ArrowUpIcon className="h-3.5 w-3.5" />
+          </PillButton>
+        )}
+        {index < list.length - 1 && (
+          <PillButton onClick={() => move(1)} label="انتقال به بعد">
+            <ArrowDownIcon className="h-3.5 w-3.5" />
+          </PillButton>
+        )}
+        <PillButton onClick={remove} label="حذف" danger>
+          <Trash2Icon className="h-3.5 w-3.5" />
+        </PillButton>
+      </div>
+
+      {children}
+
+      {drawerOpen && (
+        <EntityDrawer config={config} item={item} deletable onClose={() => setDrawerOpen(false)} />
+      )}
+    </div>
+  )
+}
+
+/** دکمه افزودن آیتم جدید به یک مجموعه — فقط در حالت ویرایش */
+export function AddItemButton({ resource }: { resource: string }) {
+  const { isAuthenticated, isEditMode, runSave } = useAdmin()
+  const { reload } = useSiteData()
+  const config = ENTITIES[resource]
+  const [newItem, setNewItem] = useState<ItemWithId | null>(null)
+
+  if (!config || !isAuthenticated || !isEditMode) return null
+
+  const create = () => {
+    void runSave(async () => {
+      const created = await adminApi.create<ItemWithId>(config.resource, config.defaults)
+      reload()
+      setNewItem(created)
+    })
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={create}
+        className="flex min-h-40 w-full flex-col items-center justify-center gap-2 border border-dashed border-copper/40 bg-copper/5 text-copper transition-colors duration-200 hover:bg-copper/10"
+      >
+        <PlusIcon className="h-6 w-6" />
+        <span className="text-sm font-light">افزودن {config.title}</span>
+      </button>
+
+      {newItem && (
+        <EntityDrawer config={config} item={newItem} deletable onClose={() => setNewItem(null)} />
+      )}
+    </>
+  )
+}
+
+/** دکمه شناور بازکردن کشوی یک رکورد یگانه (برند، هیرو، فرم تماس و...) — فقط در حالت ویرایش */
+export function SingletonPill({
+  resource,
+  label,
+  className = '',
+}: {
+  resource: string
+  label: string
+  className?: string
+}) {
+  const { isAuthenticated, isEditMode } = useAdmin()
+  const config = ENTITIES[resource]
+  const { data } = useSiteData()
+  const [drawerOpen, setDrawerOpen] = useState(false)
+
+  if (!config || !isAuthenticated || !isEditMode) return null
+  const item = data?.[config.dataKey as keyof NonNullable<typeof data>] as ItemWithId | undefined
+  if (!item) return null
+
+  return (
+    <>
+      <span className={className}>
+        <PillButton onClick={() => setDrawerOpen(true)} label={label}>
+          <PencilIcon className="h-3.5 w-3.5" />
+        </PillButton>
+      </span>
+      {drawerOpen && <EntityDrawer config={config} item={item} onClose={() => setDrawerOpen(false)} />}
+    </>
+  )
+}
diff --git a/frontend/src/admin/EntityDrawer.tsx b/frontend/src/admin/EntityDrawer.tsx
new file mode 100644
index 0000000..7865585
--- /dev/null
+++ b/frontend/src/admin/EntityDrawer.tsx
@@ -0,0 +1,250 @@
+import { useState } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { PlusIcon, Trash2Icon, XIcon } from 'lucide-react'
+import Swal from 'sweetalert2'
+import { useSiteData } from '../api'
+import { useAdmin, useFieldSaver } from './AdminContext'
+import { adminApi } from './adminClient'
+import type { EntityConfig, FieldConfig } from './entities'
+import { ImageField } from '../components/admin/ImageField'
+
+type EntityDrawerProps = {
+  config: EntityConfig
+  /** رکورد یگانه یا آیتم مجموعه — باید id داشته باشد */
+  item: Record<string, unknown> & { id: number }
+  onClose: () => void
+  /** فقط برای مجموعه‌ها: حذف آیتم */
+  deletable?: boolean
+}
+
+export function EntityDrawer({ config, item, onClose, deletable = false }: EntityDrawerProps) {
+  const save = useFieldSaver()
+  const { runSave } = useAdmin()
+  const { reload } = useSiteData()
+  const [deleting, setDeleting] = useState(false)
+
+  const saveField = (name: string, value: unknown) =>
+    save(config.resource, item.id, { [name]: value }, (d) => {
+      const target = d[config.dataKey as keyof typeof d] as unknown
+      const node =
+        config.kind === 'singleton'
+          ? (target as Record<string, unknown>)
+          : (target as { id: number }[]).find((x) => x.id === item.id)
+      if (node) (node as Record<string, unknown>)[name] = value
+    })
+
+  const remove = async () => {
+    const result = await Swal.fire({
+      icon: 'warning',
+      title: 'حذف رکورد',
+      text: `«${String(item[config.titleKey] ?? '')}» برای همیشه حذف شود؟`,
+      background: '#1e1a16',
+      color: '#F5F3EF',
+      iconColor: '#d5874c',
+      showCancelButton: true,
+      confirmButtonText: 'حذف',
+      cancelButtonText: 'انصراف',
+      buttonsStyling: false,
+      customClass: {
+        popup: 'font-pinar border border-ivory/10',
+        confirmButton: 'bg-red-500 text-white font-bold px-8 py-2.5 mx-2',
+        cancelButton: 'border border-ivory/30 text-ivory font-light px-8 py-2.5 mx-2',
+      },
+    })
+    if (!result.isConfirmed) return
+    setDeleting(true)
+    await runSave(async () => {
+      await adminApi.remove(config.resource, item.id)
+      reload()
+      onClose()
+    })
+    setDeleting(false)
+  }
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        key="backdrop"
+        className="fixed inset-0 z-[95] bg-char/70 backdrop-blur-sm"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <motion.aside
+        key="drawer"
+        dir="rtl"
+        role="dialog"
+        aria-label={`ویرایش ${config.title}`}
+        className="fixed inset-y-0 left-0 z-[96] flex w-full max-w-md flex-col border-e border-ivory/10 bg-ink shadow-2xl"
+        initial={{ x: '-100%' }}
+        animate={{ x: 0 }}
+        exit={{ x: '-100%' }}
+        transition={{ duration: 0.25, ease: [0.23, 1, 0.32, 1] }}
+      >
+        <header className="flex items-center justify-between border-b border-ivory/10 px-6 py-4">
+          <div>
+            <p className="text-xs font-light text-copper">
+              {config.kind === 'singleton' ? 'تنظیمات بخش' : 'ویرایش رکورد'}
+            </p>
+            <h2 className="mt-1 text-lg font-bold text-ivory">{config.title}</h2>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="بستن"
+            className="flex h-9 w-9 items-center justify-center border border-ivory/20 text-ivory/70 transition-colors hover:border-copper hover:text-copper"
+          >
+            <XIcon className="h-4 w-4" />
+          </button>
+        </header>
+
+        <div className="flex-1 overflow-y-auto px-6 py-6">
+          <div className="grid gap-6">
+            {config.fields.map((field) => (
+              <FieldControl
+                key={field.name}
+                field={field}
+                value={item[field.name]}
+                onSave={(value) => saveField(field.name, value)}
+              />
+            ))}
+          </div>
+        </div>
+
+        {deletable && (
+          <footer className="border-t border-ivory/10 px-6 py-4">
+            <button
+              type="button"
+              onClick={remove}
+              disabled={deleting}
+              className="flex items-center gap-2 border border-red-400/40 px-4 py-2 text-xs font-light text-red-300 transition-colors hover:bg-red-500/10 disabled:opacity-50"
+            >
+              <Trash2Icon className="h-3.5 w-3.5" />
+              حذف این رکورد
+            </button>
+          </footer>
+        )}
+      </motion.aside>
+    </AnimatePresence>
+  )
+}
+
+function FieldControl({
+  field,
+  value,
+  onSave,
+}: {
+  field: FieldConfig
+  value: unknown
+  onSave: (value: unknown) => Promise<boolean>
+}) {
+  const [text, setText] = useState<string>(String(value ?? ''))
+
+  const commitText = async () => {
+    const next = field.type === 'number' ? Number(text) || 0 : text
+    if (String(value ?? '') === String(next)) return
+    await onSave(next)
+  }
+
+  if (field.type === 'image') {
+    return <ImageField label={field.label} value={String(value ?? '')} onSave={(url) => onSave(url)} />
+  }
+
+  if (field.type === 'list') {
+    return <ListField field={field} value={value} onSave={onSave} />
+  }
+
+  if (field.type === 'textarea') {
+    return (
+      <div>
+        <p className="text-xs font-bold text-ivory/80">{field.label}</p>
+        <textarea
+          dir="auto"
+          rows={4}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onBlur={commitText}
+          className="mt-2 w-full resize-y border border-ivory/15 bg-char px-3 py-2 text-sm font-light leading-8 text-ivory focus:border-copper focus:outline-none"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <p className="text-xs font-bold text-ivory/80">{field.label}</p>
+      {field.hint && <p className="mt-1 text-[10px] font-light text-ivory/40">{field.hint}</p>}
+      <input
+        dir={field.type === 'number' ? 'ltr' : 'auto'}
+        type={field.type === 'number' ? 'number' : 'text'}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onBlur={commitText}
+        className="mt-2 w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none"
+      />
+    </div>
+  )
+}
+
+/** ویرایش آرایه خطی (پاراگراف‌ها، گالری، نکات) — هر تغییر ذخیره می‌شود */
+function ListField({
+  field,
+  value,
+  onSave,
+}: {
+  field: FieldConfig
+  value: unknown
+  onSave: (value: unknown) => Promise<boolean>
+}) {
+  const [lines, setLines] = useState<string[]>(Array.isArray(value) ? (value as string[]) : [])
+
+  const update = (next: string[]) => {
+    setLines(next)
+    void onSave(next)
+  }
+
+  return (
+    <div>
+      <p className="text-xs font-bold text-ivory/80">{field.label}</p>
+      {field.hint && <p className="mt-1 text-[10px] font-light text-ivory/40">{field.hint}</p>}
+      <div className="mt-2 grid gap-2">
+        {lines.map((line, i) => (
+          <div key={i} className="flex items-start gap-2">
+            <textarea
+              dir="auto"
+              rows={line.length > 60 ? 3 : 1}
+              value={line}
+              onChange={(e) => {
+                const next = [...lines]
+                next[i] = e.target.value
+                setLines(next)
+              }}
+              onBlur={() => {
+                if (line !== (value as string[])[i]) update(lines)
+              }}
+              className="flex-1 resize-y border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none"
+            />
+            <button
+              type="button"
+              aria-label="حذف خط"
+              onClick={() => update(lines.filter((_, j) => j !== i))}
+              className="mt-1 text-ivory/40 transition-colors hover:text-red-300"
+            >
+              <XIcon className="h-4 w-4" />
+            </button>
+          </div>
+        ))}
+        <button
+          type="button"
+          onClick={() => update([...lines, ''])}
+          className="flex w-fit items-center gap-1.5 border border-dashed border-ivory/25 px-3 py-1.5 text-xs font-light text-ivory/60 transition-colors hover:border-copper hover:text-copper"
+        >
+          <PlusIcon className="h-3 w-3" />
+          افزودن خط
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/admin/adminClient.ts b/frontend/src/admin/adminClient.ts
new file mode 100644
index 0000000..030099a
--- /dev/null
+++ b/frontend/src/admin/adminClient.ts
@@ -0,0 +1,86 @@
+// لایه تماس ادمین — همه درخواست‌ها با توکن Bearer و مدیریت خطای یکسان
+import { API_URL } from '../config'
+
+const TOKEN_KEY = 'aramesh_admin_token'
+
+export const getToken = (): string | null => localStorage.getItem(TOKEN_KEY)
+export const setToken = (token: string | null): void => {
+  if (token) localStorage.setItem(TOKEN_KEY, token)
+  else localStorage.removeItem(TOKEN_KEY)
+}
+
+export class HttpError extends Error {
+  constructor(
+    public status: number,
+    message: string,
+  ) {
+    super(message)
+  }
+}
+
+async function authFetch<T>(path: string, options: RequestInit = {}): Promise<T> {
+  const token = getToken()
+  const isFormData = options.body instanceof FormData
+  const res = await fetch(`${API_URL}${path}`, {
+    ...options,
+    headers: {
+      ...(options.headers ?? {}),
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...(options.body && !isFormData ? { 'Content-Type': 'application/json' } : {}),
+    },
+  })
+
+  if (res.status === 401) {
+    setToken(null)
+    throw new HttpError(401, 'نشست شما منقضی شده — دوباره وارد شوید')
+  }
+  if (!res.ok) {
+    const data = (await res.json().catch(() => null)) as { detail?: unknown } | null
+    const detail =
+      typeof data?.detail === 'string'
+        ? data.detail
+        : res.status === 409
+          ? 'رکوردی با این مقدار تکراری وجود دارد'
+          : 'خطا در ذخیره‌سازی — دوباره تلاش کنید'
+    throw new HttpError(res.status, detail)
+  }
+  return res.status === 204 ? (null as T) : ((await res.json()) as T)
+}
+
+export const adminApi = {
+  login: async (username: string, password: string): Promise<string> => {
+    const res = await fetch(`${API_URL}/api/auth/login`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username, password }),
+    })
+    if (!res.ok) {
+      const data = (await res.json().catch(() => null)) as { detail?: unknown } | null
+      throw new HttpError(
+        res.status,
+        typeof data?.detail === 'string' ? data.detail : 'ورود ناموفق بود',
+      )
+    }
+    const data = (await res.json()) as { access_token: string }
+    setToken(data.access_token)
+    return data.access_token
+  },
+
+  patch: <T = unknown>(resource: string, id: number, partial: Record<string, unknown>) =>
+    authFetch<T>(`/api/admin/${resource}/${id}`, { method: 'PATCH', body: JSON.stringify(partial) }),
+
+  create: <T = unknown>(resource: string, data: Record<string, unknown>) =>
+    authFetch<T>(`/api/admin/${resource}`, { method: 'POST', body: JSON.stringify(data) }),
+
+  remove: (resource: string, id: number) =>
+    authFetch<null>(`/api/admin/${resource}/${id}`, { method: 'DELETE' }),
+
+  reorder: <T = unknown>(resource: string, ids: number[]) =>
+    authFetch<T[]>(`/api/admin/${resource}/reorder`, { method: 'POST', body: JSON.stringify({ ids }) }),
+
+  upload: async (file: File): Promise<{ url: string; key: string }> => {
+    const fd = new FormData()
+    fd.append('file', file)
+    return authFetch('/api/admin/upload', { method: 'POST', body: fd })
+  },
+}
diff --git a/frontend/src/admin/entities.ts b/frontend/src/admin/entities.ts
new file mode 100644
index 0000000..e6bdb1e
--- /dev/null
+++ b/frontend/src/admin/entities.ts
@@ -0,0 +1,187 @@
+import type { SiteData } from '../api'
+
+export type FieldType = 'text' | 'textarea' | 'number' | 'image' | 'list'
+
+export type FieldConfig = {
+  name: string
+  label: string
+  type: FieldType
+  hint?: string
+}
+
+export type EntityConfig = {
+  /** مسیر منبع در پنل مدیریت، مثل services یا why-us */
+  resource: string
+  /** کلید همان منبع در پاسخ GET /api/site */
+  dataKey: string
+  title: string
+  /** مجموعه یا رکورد یگانه */
+  kind: 'collection' | 'singleton'
+  /** فیلدی که عنوان آیتم را نشان می‌دهد */
+  titleKey: string
+  fields: FieldConfig[]
+  /** مقادیر پیش‌فرض برای «افزودن» */
+  defaults: Record<string, unknown>
+}
+
+const F = (name: string, label: string, type: FieldType = 'text', hint?: string): FieldConfig => ({
+  name,
+  label,
+  type,
+  hint,
+})
+
+/** پیکربندی همه منابع قابل ویرایش — هم مجموعه‌ها و هم رکوردهای یگانه */
+export const ENTITIES: Record<string, EntityConfig> = {
+  services: {
+    resource: 'services', dataKey: 'services', title: 'خدمات', kind: 'collection',
+    titleKey: 'title',
+    fields: [F('title', 'عنوان'), F('desc', 'توضیح', 'textarea'), F('icon', 'آیکون', 'text', 'draft / tower / mall / villa / renew / manage / invest / landscape')],
+    defaults: { title: 'خدمت جدید', desc: '', icon: 'draft' },
+  },
+  projects: {
+    resource: 'projects', dataKey: 'projects', title: 'پروژه‌ها', kind: 'collection',
+    titleKey: 'title',
+    fields: [
+      F('title', 'عنوان'), F('slug', 'نشانی (slug)'), F('location', 'موقعیت'),
+      F('year', 'سال'), F('status', 'وضعیت', 'text', 'done یا progress'),
+      F('image', 'تصویر شاخص', 'image'), F('gallery', 'گالری (هر خط یک URL)', 'list'),
+      F('area', 'زیربنا'), F('floors', 'طبقات'), F('units', 'واحدها'), F('client', 'کارفرما'),
+      F('summary', 'خلاصه', 'textarea'), F('body', 'متن پروژه (هر پاراگراف یک خط)', 'list'),
+    ],
+    defaults: { title: 'پروژه جدید', slug: `project-${Date.now()}`, location: '', year: '', status: 'done', image: '', gallery: [], area: '', floors: '', units: '', client: '', summary: '', body: [] },
+  },
+  articles: {
+    resource: 'articles', dataKey: 'articles', title: 'مقالات', kind: 'collection',
+    titleKey: 'title',
+    fields: [
+      F('title', 'عنوان'), F('slug', 'نشانی (slug)'), F('date', 'تاریخ'), F('category', 'دسته'),
+      F('image', 'تصویر شاخص', 'image'), F('read', 'زمان مطالعه'), F('excerpt', 'چکیده', 'textarea'),
+      F('body', 'متن مقاله (هر پاراگراف یک خط)', 'list'),
+    ],
+    defaults: { title: 'مقاله جدید', slug: `article-${Date.now()}`, date: '', category: '', image: '', read: '', excerpt: '', body: [] },
+  },
+  testimonials: {
+    resource: 'testimonials', dataKey: 'testimonials', title: 'نظرات مشتریان', kind: 'collection',
+    titleKey: 'name',
+    fields: [F('name', 'نام'), F('role', 'سمت'), F('quote', 'متن نظر', 'textarea')],
+    defaults: { name: 'نظر جدید', role: '', quote: '' },
+  },
+  faqs: {
+    resource: 'faqs', dataKey: 'faqs', title: 'سوالات متداول', kind: 'collection',
+    titleKey: 'question',
+    fields: [F('question', 'سوال'), F('answer', 'پاسخ', 'textarea')],
+    defaults: { question: 'سوال جدید', answer: '' },
+  },
+  team: {
+    resource: 'team', dataKey: 'team', title: 'تیم', kind: 'collection',
+    titleKey: 'name',
+    fields: [F('name', 'نام'), F('role', 'سمت'), F('bio', 'معرفی', 'textarea')],
+    defaults: { name: 'عضو جدید', role: '', bio: '' },
+  },
+  timeline: {
+    resource: 'timeline', dataKey: 'timeline', title: 'تایم‌لاین', kind: 'collection',
+    titleKey: 'title',
+    fields: [F('year', 'سال'), F('title', 'عنوان'), F('desc', 'توضیح', 'textarea'), F('image', 'تصویر', 'image')],
+    defaults: { year: '۱۴۰۰', title: 'رویداد جدید', desc: '', image: '' },
+  },
+  stats: {
+    resource: 'stats', dataKey: 'stats', title: 'آمار', kind: 'collection',
+    titleKey: 'label',
+    fields: [F('label', 'برچسب'), F('value', 'عدد', 'number'), F('suffix', 'پسوند (مثل + یا هزار)')],
+    defaults: { label: 'شاخص جدید', value: 0, suffix: '' },
+  },
+  why_us: {
+    resource: 'why-us', dataKey: 'why_us', title: 'چرا آرامش', kind: 'collection',
+    titleKey: 'title',
+    fields: [F('title', 'عنوان'), F('desc', 'توضیح', 'textarea')],
+    defaults: { title: 'مورد جدید', desc: '' },
+  },
+  investment_models: {
+    resource: 'investment-models', dataKey: 'investment_models', title: 'مدل‌های سرمایه‌گذاری', kind: 'collection',
+    titleKey: 'title',
+    fields: [F('title', 'عنوان'), F('desc', 'توضیح', 'textarea'), F('points', 'نکات (هر خط یک مورد)', 'list')],
+    defaults: { title: 'مدل جدید', desc: '', points: [] },
+  },
+  process_steps: {
+    resource: 'process-steps', dataKey: 'process_steps', title: 'مراحل فرآیند کار', kind: 'collection',
+    titleKey: 'title',
+    fields: [F('step', 'شماره مرحله'), F('title', 'عنوان'), F('desc', 'توضیح', 'textarea')],
+    defaults: { step: '۰۱', title: 'مرحله جدید', desc: '' },
+  },
+  offices: {
+    resource: 'offices', dataKey: 'offices', title: 'دفاتر', kind: 'collection',
+    titleKey: 'city',
+    fields: [F('city', 'شهر'), F('address', 'نشانی', 'textarea'), F('hours', 'ساعات کاری')],
+    defaults: { city: 'شهر جدید', address: '', hours: '' },
+  },
+  gallery: {
+    resource: 'gallery', dataKey: 'gallery', title: 'گالری تصاویر', kind: 'collection',
+    titleKey: 'alt',
+    fields: [F('src', 'تصویر', 'image'), F('alt', 'متن جایگزین')],
+    defaults: { src: '', alt: 'تصویر گالری' },
+  },
+  nav: {
+    resource: 'nav', dataKey: 'nav', title: 'منوی ناوبری', kind: 'collection',
+    titleKey: 'label',
+    fields: [F('label', 'عنوان'), F('href', 'مسیر (مثل /about)')],
+    defaults: { label: 'آیتم جدید', href: '/' },
+  },
+
+  // ---------- رکوردهای یگانه ----------
+  brand: {
+    resource: 'brand', dataKey: 'brand', title: 'برند و تماس', kind: 'singleton',
+    titleKey: 'name',
+    fields: [F('name', 'نام برند'), F('logo', 'لوگو', 'image'), F('hero', 'تصویر هیرو', 'image'), F('contact_bg', 'پس‌زمینه بخش تماس', 'image'), F('phone', 'تلفن نمایشی'), F('phone_href', 'لینک تلفن'), F('email', 'ایمیل'), F('address', 'نشانی', 'textarea')],
+    defaults: {},
+  },
+  hero: {
+    resource: 'hero', dataKey: 'hero', title: 'تنظیمات هیرو', kind: 'singleton',
+    titleKey: 'title',
+    fields: [F('title_highlight', 'واژه مسیِ تیتر'), F('badge_value', 'عدد کارت کنار'), F('badge_label', 'متن کارت کنار', 'textarea'), F('cta_primary_label', 'متن دکمه اصلی'), F('cta_primary_href', 'لینک دکمه اصلی'), F('cta_secondary_label', 'متن دکمه دوم'), F('cta_secondary_href', 'لینک دکمه دوم'), F('scroll_label', 'متن اسکرول'), F('kicker', 'متن بالای تیتر', 'textarea')],
+    defaults: {},
+  },
+  story: {
+    resource: 'story', dataKey: 'story', title: 'تصاویر بخش درباره ما', kind: 'singleton',
+    titleKey: 'title',
+    fields: [F('quote', 'نقل‌قول مدیرعامل', 'textarea'), F('quote_author', 'استناد نقل‌قول'), F('stat1_value', 'آمار ۱ — عدد'), F('stat1_label', 'آمار ۱ — برچسب'), F('stat2_value', 'آمار ۲ — عدد'), F('stat2_label', 'آمار ۲ — برچسب'), F('link_label', 'متن دکمه'), F('link_href', 'لینک دکمه')],
+    defaults: {},
+  },
+  before_after: {
+    resource: 'before-after', dataKey: 'before_after', title: 'بخش قبل/بعد', kind: 'singleton',
+    titleKey: 'title',
+    fields: [F('title', 'عنوان'), F('lead', 'توضیح', 'textarea'), F('before', 'تصویر قبل', 'image'), F('after', 'تصویر بعد', 'image'), F('before_label', 'برچسب قبل'), F('after_label', 'برچسب بعد')],
+    defaults: {},
+  },
+  contact_section: {
+    resource: 'contact-section', dataKey: 'contact_section', title: 'فرم تماس', kind: 'singleton',
+    titleKey: 'title',
+    fields: [
+      F('label', 'برچسب بالا'), F('title', 'عنوان'), F('lead', 'توضیح', 'textarea'),
+      F('address_label', 'برچسب نشانی'), F('phone_label', 'برچسب تلفن'), F('email_label', 'برچسب ایمیل'),
+      F('name_label', 'برچسب نام'), F('name_placeholder', 'جای‌نگهدار نام'),
+      F('phone_field_label', 'برچسب تلفن (فرم)'), F('phone_placeholder', 'جای‌نگهدار تلفن'),
+      F('note_label', 'برچسب توضیحات'), F('note_optional_label', 'برچسب اختیاری'), F('note_placeholder', 'جای‌نگهدار توضیحات'),
+      F('submit_label', 'متن دکمه ارسال'), F('sending_label', 'متن در حال ارسال'),
+      F('success_title', 'عنوان پیام موفقیت'), F('success_text', 'متن پیام موفقیت', 'textarea'), F('success_button_label', 'دکمه پیام موفقیت'),
+    ],
+    defaults: {},
+  },
+  newsletter: {
+    resource: 'newsletter', dataKey: 'newsletter', title: 'خبرنامه', kind: 'singleton',
+    titleKey: 'title',
+    fields: [F('title', 'عنوان'), F('lead', 'توضیح', 'textarea'), F('placeholder', 'جای‌نگهدار ایمیل'), F('button_label', 'متن دکمه'), F('sending_label', 'متن در حال ارسال'), F('success_text', 'پیام موفقیت')],
+    defaults: {},
+  },
+  footer: {
+    resource: 'footer', dataKey: 'footer', title: 'فوتر', kind: 'singleton',
+    titleKey: 'pages_heading',
+    fields: [F('about_text', 'متن معرفی', 'textarea'), F('pages_heading', 'تیتر ستون صفحات'), F('services_heading', 'تیتر ستون خدمات'), F('contact_heading', 'تیتر ستون تماس'), F('copyright', 'متن کپی‌رایت'), F('tagline', 'شعار پایین')],
+    defaults: {},
+  },
+}
+
+/** دسترسی به آرایه/شیء منبع از درخت داده سایت */
+export function getEntityData(data: SiteData, config: EntityConfig): Record<string, unknown> & { id: number }[] | (Record<string, unknown> & { id: number }) {
+  return data[config.dataKey as keyof SiteData] as never
+}
diff --git a/frontend/src/api.tsx b/frontend/src/api.tsx
index 3b6749d..270190c 100644
--- a/frontend/src/api.tsx
+++ b/frontend/src/api.tsx
@@ -159,9 +159,16 @@ interface SiteContextValue {
   data: SiteData | null
   error: boolean
   reload: () => void
+  /** به‌روزرسانی خوش‌بینانه درخت داده — پس از موفقیت PATCH استفاده می‌شود */
+  updateSite: (mutate: (data: SiteData) => void) => void
 }
 
-const SiteContext = createContext<SiteContextValue>({ data: null, error: false, reload: () => {} })
+const SiteContext = createContext<SiteContextValue>({
+  data: null,
+  error: false,
+  reload: () => {},
+  updateSite: () => {},
+})
 
 export function SiteProvider({ children }: { children: ReactNode }) {
   const [data, setData] = useState<SiteData | null>(null)
@@ -197,7 +204,20 @@ export function SiteProvider({ children }: { children: ReactNode }) {
     load()
   }, [load])
 
-  return <SiteContext.Provider value={{ data, error, reload }}>{children}</SiteContext.Provider>
+  const updateSite = useCallback((mutate: (data: SiteData) => void) => {
+    setData((prev) => {
+      if (!prev) return prev
+      const next = structuredClone(prev)
+      mutate(next)
+      return next
+    })
+  }, [])
+
+  return (
+    <SiteContext.Provider value={{ data, error, reload, updateSite }}>
+      {children}
+    </SiteContext.Provider>
+  )
 }
 
 export function useSiteData(): SiteContextValue {
diff --git a/frontend/src/components/ContactSection.tsx b/frontend/src/components/ContactSection.tsx
index fd7e10c..49688bb 100644
--- a/frontend/src/components/ContactSection.tsx
+++ b/frontend/src/components/ContactSection.tsx
@@ -4,14 +4,28 @@ import Swal from 'sweetalert2'
 import { Reveal } from './Reveal'
 import { Button } from './Button'
 import { useSite } from '../api'
+import { useFieldSaver } from '../admin/AdminContext'
+import { InlineEdit } from './admin/InlineEdit'
+import { SingletonPill } from '../admin/Editable'
 import { API_URL } from '../config'
 
 export function ContactSection() {
   const { brand, contact_section: content } = useSite()
+  const save = useFieldSaver()
   const [form, setForm] = useState({ name: '', phone: '', note: '' })
   const [sent, setSent] = useState(false)
   const [sending, setSending] = useState(false)
 
+  const saveContent = (field: string, value: string) =>
+    save('contact-section', content.id, { [field]: value }, (d) => {
+      ;(d.contact_section as unknown as Record<string, unknown>)[field] = value
+    })
+
+  const saveBrand = (field: string, value: string) =>
+    save('brand', brand.id, { [field]: value }, (d) => {
+      ;(d.brand as unknown as Record<string, unknown>)[field] = value
+    })
+
   const showErrorAlert = (title: string, text: string) => {
     Swal.fire({
       icon: 'warning',
@@ -93,15 +107,17 @@ export function ContactSection() {
 
       <div className="relative mx-auto max-w-site px-6 lg:px-10">
         <div className="mx-auto grid max-w-6xl items-stretch gap-6 lg:grid-cols-12">
-          
+
           <div className="border border-ivory/20 bg-char/45 p-8 backdrop-blur-[8px] md:p-10 lg:col-span-5">
             <Reveal>
-              <p className="text-sm font-light text-copper">{content.label}</p>
+              <p className="text-sm font-light text-copper">
+                <InlineEdit value={content.label} onSave={(v) => saveContent('label', v)} />
+              </p>
               <h2 id="contact-title" className="mt-5 text-section font-bold text-ivory">
-                {content.title}
+                <InlineEdit value={content.title} onSave={(v) => saveContent('title', v)} />
               </h2>
               <p className="mt-6 text-base font-light leading-9 text-ivory/75">
-                {content.lead}
+                <InlineEdit multiline value={content.lead} onSave={(v) => saveContent('lead', v)} />
               </p>
             </Reveal>
 
@@ -110,33 +126,41 @@ export function ContactSection() {
                 <li className="flex items-start gap-4">
                   <MapPinIcon className="mt-1 h-5 w-5 shrink-0 text-copper" />
                   <div>
-                    <p className="text-sm font-bold text-ivory">{content.address_label}</p>
-                    <p className="mt-1 text-sm font-light leading-7 text-ivory/70">{brand.address}</p>
+                    <p className="text-sm font-bold text-ivory">
+                      <InlineEdit value={content.address_label} onSave={(v) => saveContent('address_label', v)} />
+                    </p>
+                    <p className="mt-1 text-sm font-light leading-7 text-ivory/70">
+                      <InlineEdit value={brand.address} onSave={(v) => saveBrand('address', v)} />
+                    </p>
                   </div>
                 </li>
                 <li className="flex items-start gap-4">
                   <PhoneIcon className="mt-1 h-5 w-5 shrink-0 text-copper" />
                   <div>
-                    <p className="text-sm font-bold text-ivory">{content.phone_label}</p>
+                    <p className="text-sm font-bold text-ivory">
+                      <InlineEdit value={content.phone_label} onSave={(v) => saveContent('phone_label', v)} />
+                    </p>
                     <a
                       href={brand.phone_href}
                       dir="ltr"
                       className="mt-1 block text-sm font-light text-ivory/70 transition-colors hover:text-copper"
                     >
-                      {brand.phone}
+                      <InlineEdit value={brand.phone} onSave={(v) => saveBrand('phone', v)} />
                     </a>
                   </div>
                 </li>
                 <li className="flex items-start gap-4">
                   <MailIcon className="mt-1 h-5 w-5 shrink-0 text-copper" />
                   <div>
-                    <p className="text-sm font-bold text-ivory">{content.email_label}</p>
+                    <p className="text-sm font-bold text-ivory">
+                      <InlineEdit value={content.email_label} onSave={(v) => saveContent('email_label', v)} />
+                    </p>
                     <a
                       href={`mailto:${brand.email}`}
                       dir="ltr"
                       className="mt-1 block text-sm font-light text-ivory/70 transition-colors hover:text-copper"
                     >
-                      {brand.email}
+                      <InlineEdit value={brand.email} onSave={(v) => saveBrand('email', v)} />
                     </a>
                   </div>
                 </li>
@@ -144,13 +168,16 @@ export function ContactSection() {
             </Reveal>
           </div>
 
-          <div className="border border-ivory/20 bg-char/45 p-8 backdrop-blur-[9px] md:p-10 lg:col-span-7">
+          <div className="relative border border-ivory/20 bg-char/45 p-8 backdrop-blur-[9px] md:p-10 lg:col-span-7">
+            <SingletonPill resource="contact_section" label="ویرایش برچسب‌ها و متن‌های فرم" className="absolute left-4 top-4" />
             {sent ? (
               <div className="flex h-full flex-col items-center justify-center py-14 text-center">
                 <CheckCircle2Icon className="h-12 w-12 text-copper" />
-                <h3 className="mt-6 text-xl font-bold text-ivory">{content.success_title}</h3>
+                <h3 className="mt-6 text-xl font-bold text-ivory">
+                  <InlineEdit value={content.success_title} onSave={(v) => saveContent('success_title', v)} />
+                </h3>
                 <p className="mt-3 max-w-sm text-sm font-light leading-8 text-ivory/70">
-                  {content.success_text}
+                  <InlineEdit multiline value={content.success_text} onSave={(v) => saveContent('success_text', v)} />
                 </p>
                 <Button
                   type="button"
@@ -161,14 +188,14 @@ export function ContactSection() {
                     setForm({ name: '', phone: '', note: '' })
                   }}
                 >
-                  {content.success_button_label}
+                  <InlineEdit value={content.success_button_label} onSave={(v) => saveContent('success_button_label', v)} />
                 </Button>
               </div>
             ) : (
               <form onSubmit={submit} noValidate className="grid gap-6 md:grid-cols-2">
                 <div>
                   <label htmlFor="contact-name" className="block text-sm font-bold text-ivory/90">
-                    {content.name_label}
+                    <InlineEdit value={content.name_label} onSave={(v) => saveContent('name_label', v)} />
                   </label>
                   <input
                     id="contact-name"
@@ -182,7 +209,7 @@ export function ContactSection() {
 
                 <div>
                   <label htmlFor="contact-phone" className="block text-sm font-bold text-ivory/90">
-                    {content.phone_field_label} <span className="text-copper">*</span>
+                    <InlineEdit value={content.phone_field_label} onSave={(v) => saveContent('phone_field_label', v)} /> <span className="text-copper">*</span>
                   </label>
                   <input
                     id="contact-phone"
@@ -198,7 +225,7 @@ export function ContactSection() {
 
                 <div className="md:col-span-2">
                   <label htmlFor="contact-note" className="block text-sm font-bold text-ivory/90">
-                    {content.note_label} <span className="font-light text-ivory/50">{content.note_optional_label}</span>
+                    <InlineEdit value={content.note_label} onSave={(v) => saveContent('note_label', v)} /> <span className="font-light text-ivory/50">{content.note_optional_label}</span>
                   </label>
                   <textarea
                     id="contact-note"
@@ -212,7 +239,9 @@ export function ContactSection() {
 
                 <div className="md:col-span-2">
                   <Button type="submit" variant="copper" className="w-full md:w-auto md:px-12" disabled={sending}>
-                    {sending ? content.sending_label : content.submit_label}
+                    {sending ? content.sending_label : (
+                      <InlineEdit value={content.submit_label} onSave={(v) => saveContent('submit_label', v)} />
+                    )}
                   </Button>
                 </div>
               </form>
@@ -222,4 +251,4 @@ export function ContactSection() {
       </div>
     </section>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index fd831f0..c992f70 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -2,6 +2,9 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { InstagramIcon, LinkedinIcon, MailIcon, MapPinIcon, PhoneIcon, SendIcon } from 'lucide-react';
 import { useSite } from '../api';
+import { useFieldSaver } from '../admin/AdminContext';
+import { InlineEdit } from './admin/InlineEdit';
+import { AddItemButton, EditableItem, SingletonPill } from '../admin/Editable';
 
 const SOCIAL_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
   instagram: InstagramIcon,
@@ -11,14 +14,30 @@ const SOCIAL_ICONS: Record<string, React.ComponentType<{ className?: string }>>
 
 export function Footer() {
   const { brand, services, nav, footer } = useSite();
+  const save = useFieldSaver();
+
+  const saveFooter = (field: string, value: string) =>
+    save('footer', footer.id, { [field]: value }, (d) => {
+      ;(d.footer as unknown as Record<string, unknown>)[field] = value;
+    });
+
+  const saveNav = (id: number, changes: Record<string, unknown>) =>
+    save('nav', id, changes, (d) => {
+      const item = d.nav.find((n) => n.id === id);
+      if (item) Object.assign(item, changes);
+    });
+
   return (
     <footer className="border-t border-ivory/10 bg-char">
       <div className="mx-auto max-w-site px-6 py-16 lg:px-10">
         <div className="grid gap-12 lg:grid-cols-12">
           <div className="lg:col-span-4">
-            <img src={brand.logo} alt={brand.name} className="h-20 w-auto object-contain" />
+            <div className="relative w-fit">
+              <img src={brand.logo} alt={brand.name} className="h-20 w-auto object-contain" />
+              <SingletonPill resource="brand" label="ویرایش برند، لوگو و تماس" className="absolute -left-10 top-1/2 -translate-y-1/2" />
+            </div>
             <p className="mt-6 max-w-sm text-sm font-light leading-8 text-ivory/55">
-              {footer.about_text}
+              <InlineEdit multiline value={footer.about_text} onSave={(v) => saveFooter('about_text', v)} />
             </p>
             <div className="mt-6 flex gap-3">
               {footer.socials.map(({ label, href, icon }) => {
@@ -38,26 +57,38 @@ export function Footer() {
           </div>
 
           <div className="lg:col-span-2">
-            <h3 className="text-sm font-bold text-copper">{footer.pages_heading}</h3>
+            <h3 className="text-sm font-bold text-copper">
+              <InlineEdit value={footer.pages_heading} onSave={(v) => saveFooter('pages_heading', v)} />
+            </h3>
             <ul className="mt-5 space-y-3">
               {nav.map((item) =>
-              <li key={item.href}>
-                  <Link
+              <EditableItem key={item.id} resource="nav" item={item}>
+                <li>
+                    <Link
                   to={item.href}
                   className="text-sm font-light text-ivory/60 transition-colors duration-200 ease-lux hover:text-copper">
 
-                    {item.label}
+                    <InlineEdit
+                      value={item.label}
+                      onSave={(v) => saveNav(item.id, { label: v })}
+                    />
                   </Link>
                 </li>
+              </EditableItem>
               )}
             </ul>
+            <div className="mt-4">
+              <AddItemButton resource="nav" />
+            </div>
           </div>
 
           <div className="lg:col-span-3">
-            <h3 className="text-sm font-bold text-copper">{footer.services_heading}</h3>
+            <h3 className="text-sm font-bold text-copper">
+              <InlineEdit value={footer.services_heading} onSave={(v) => saveFooter('services_heading', v)} />
+            </h3>
             <ul className="mt-5 space-y-3">
               {services.map((service) =>
-              <li key={service.title} className="text-sm font-light text-ivory/60">
+              <li key={service.id} className="text-sm font-light text-ivory/60">
                   {service.title}
                 </li>
               )}
@@ -65,7 +96,9 @@ export function Footer() {
           </div>
 
           <div className="lg:col-span-3">
-            <h3 className="text-sm font-bold text-copper">{footer.contact_heading}</h3>
+            <h3 className="text-sm font-bold text-copper">
+              <InlineEdit value={footer.contact_heading} onSave={(v) => saveFooter('contact_heading', v)} />
+            </h3>
             <ul className="mt-5 space-y-4 text-sm font-light text-ivory/60">
               <li className="flex items-start gap-3">
                 <MapPinIcon className="mt-1 h-4 w-4 shrink-0 text-copper" />
@@ -88,8 +121,12 @@ export function Footer() {
         </div>
 
         <div className="mt-14 flex flex-col items-center justify-between gap-4 border-t border-ivory/10 pt-6 text-xs font-light text-ivory/40 md:flex-row">
-          <p>{footer.copyright}</p>
-          <p>{footer.tagline}</p>
+          <p>
+            <InlineEdit value={footer.copyright} onSave={(v) => saveFooter('copyright', v)} />
+          </p>
+          <p>
+            <InlineEdit value={footer.tagline} onSave={(v) => saveFooter('tagline', v)} />
+          </p>
         </div>
       </div>
     </footer>);
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 0bae11d..06ab369 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -2,9 +2,19 @@ import React, { useEffect, useState } from "react";
 import { Link, NavLink, useLocation } from "react-router-dom";
 import { MenuIcon, PhoneIcon, XIcon } from "lucide-react";
 import { useSite } from "../api";
+import { useFieldSaver } from "../admin/AdminContext";
+import { InlineEdit } from "./admin/InlineEdit";
+import { EditableItem, SingletonPill } from "../admin/Editable";
 
 export function Header() {
   const { brand, nav } = useSite();
+  const save = useFieldSaver();
+
+  const saveNav = (id: number, changes: Record<string, unknown>) =>
+    save("nav", id, changes, (d) => {
+      const item = d.nav.find((n) => n.id === id);
+      if (item) Object.assign(item, changes);
+    });
   const [scrolled, setScrolled] = useState(false);
   const [open, setOpen] = useState(false);
   const { pathname } = useLocation();
@@ -28,6 +38,7 @@ export function Header() {
       }`}
     >
       <div className="mx-auto flex max-w-site items-center justify-between gap-8 px-6 py-4 lg:px-10">
+        <div className="relative flex items-center">
         <Link
           to="/"
           className="flex items-center gap-3"
@@ -41,11 +52,14 @@ export function Header() {
             }`}
           />
         </Link>
+          <SingletonPill resource="brand" label="ویرایش برند و لوگو" className="absolute -left-10 top-1/2 -translate-y-1/2" />
+        </div>
 
         <nav aria-label="ناوبری اصلی" className="hidden xl:block">
           <ul className="flex items-center gap-7">
             {nav.map((item) => (
-              <li key={item.href}>
+              <EditableItem key={item.id} resource="nav" item={item}>
+              <li>
                 <NavLink
                   to={item.href}
                   className={({ isActive }) =>
@@ -56,7 +70,10 @@ export function Header() {
                 >
                   {({ isActive }) => (
                     <>
-                      {item.label}
+                      <InlineEdit
+                        value={item.label}
+                        onSave={(v) => saveNav(item.id, { label: v })}
+                      />
                       <span
                         className={`absolute -bottom-0.5 left-0 right-0 h-px w-full origin-center bg-copper transition-transform duration-300 ease-lux ${
                           isActive
@@ -68,6 +85,7 @@ export function Header() {
                   )}
                 </NavLink>
               </li>
+              </EditableItem>
             ))}
           </ul>
         </nav>
@@ -109,7 +127,8 @@ export function Header() {
         >
           <ul className="grid gap-1">
             {nav.map((item) => (
-              <li key={item.href}>
+              <EditableItem key={item.id} resource="nav" item={item}>
+              <li>
                 <NavLink
                   to={item.href}
                   className={({ isActive }) =>
@@ -118,9 +137,13 @@ export function Header() {
                     }`
                   }
                 >
-                  {item.label}
+                  <InlineEdit
+                    value={item.label}
+                    onSave={(v) => saveNav(item.id, { label: v })}
+                  />
                 </NavLink>
               </li>
+              </EditableItem>
             ))}
           </ul>
         </nav>
diff --git a/frontend/src/components/PageHero.tsx b/frontend/src/components/PageHero.tsx
index 50f2503..0768039 100644
--- a/frontend/src/components/PageHero.tsx
+++ b/frontend/src/components/PageHero.tsx
@@ -2,52 +2,80 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import { motion } from 'framer-motion'
 import { ChevronLeftIcon } from 'lucide-react'
+import { usePageHero } from '../api'
+import { useFieldSaver } from '../admin/AdminContext'
+import { InlineEdit } from './admin/InlineEdit'
+import { ImageField } from './admin/ImageField'
 
 type PageHeroProps = {
-  title: string
-  lead: string
-  image: string
+  /** کلید هیرو صفحه در دیتابیس — عنوان/توضیح درجا ویرایش‌پذیر می‌شوند */
+  pageKey: string
 }
 
-export function PageHero({ title, lead, image }: PageHeroProps) {
+export function PageHero({ pageKey }: PageHeroProps) {
+  const hero = usePageHero(pageKey)
+  const save = useFieldSaver()
+
+  const saveField = (field: 'title' | 'lead' | 'image', value: string) =>
+    save('page-heroes', hero.id, { [field]: value }, (d) => {
+      const h = d.page_heroes.find((p) => p.id === hero.id)
+      if (h) (h as Record<string, unknown>)[field] = value
+    })
+
   return (
     <section className="relative flex h-[58vh] min-h-[420px] items-end overflow-hidden">
-      {image && <img src={image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />}
-      
+      {hero.image && <img src={hero.image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />}
+
       <div className="absolute inset-0 bg-ink/50" aria-hidden="true" />
-      
+
       <div
         className="absolute inset-0"
         style={{ background: 'linear-gradient(to top, #27221c 6%, rgba(39,34,28,0.1) 70%)' }}
         aria-hidden="true"
       />
-      
+
       <div className="relative mx-auto w-full max-w-site px-6 pb-16 lg:px-10">
         <nav aria-label="مسیر صفحه" className="flex items-center gap-2 text-xs font-light text-ivory/50">
           <Link to="/" className="transition-colors hover:text-copper">
             صفحه اصلی
           </Link>
           <ChevronLeftIcon className="h-3.5 w-3.5" />
-          <span className="text-copper">{title}</span>
+          <span className="text-copper">{hero.title}</span>
         </nav>
         <motion.h1
           initial={{ opacity: 0, y: 24 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.7, ease: [0.23, 1, 0.32, 1] }}
-          className="mt-5 max-w-[700px] text-hero font-bold text-ivory"
+          className="mt-5 max-w-[700px]"
         >
-          {title}
+          <InlineEdit
+            as="span"
+            value={hero.title}
+            onSave={(v) => saveField('title', v)}
+            className="block text-hero font-bold text-ivory"
+          />
         </motion.h1>
         <motion.p
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.7, delay: 0.1, ease: [0.23, 1, 0.32, 1] }}
-          className="mt-5 max-w-2xl text-base font-light leading-9 text-ivory/65"
+          className="mt-5 max-w-2xl"
         >
-          {lead}
+          <InlineEdit
+            as="span"
+            multiline
+            value={hero.lead}
+            onSave={(v) => saveField('lead', v)}
+            className="block text-base font-light leading-9 text-ivory/65"
+          />
         </motion.p>
         <div className="mt-8 h-px w-28 bg-copper" />
+
+        {/* ویرایش تصویر پس‌زمینه — فقط در حالت ویرایش ادمین */}
+        <div className="mt-6 [&>div]:!mt-0">
+          <ImageField label="تصویر پس‌زمینه" value={hero.image} onSave={(url) => saveField('image', url)} />
+        </div>
       </div>
     </section>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/SectionHeading.tsx b/frontend/src/components/SectionHeading.tsx
index 8a9dc95..e1f735c 100644
--- a/frontend/src/components/SectionHeading.tsx
+++ b/frontend/src/components/SectionHeading.tsx
@@ -1,29 +1,58 @@
 import React from 'react'
 import { Reveal } from './Reveal'
+import { useSectionHeading } from '../api'
+import { useFieldSaver } from '../admin/AdminContext'
+import { InlineEdit } from './admin/InlineEdit'
 
 type SectionHeadingProps = {
-  title: string
+  /** در صورت ارسال، تیتر و توضیح از دیتابیس خوانده و به‌صورت درجا ویرایش‌پذیر می‌شوند */
+  headingKey?: string
+  title?: string
   lead?: string
   align?: 'right' | 'center'
   tone?: 'copper' | 'ivory'
 }
 
 export function SectionHeading({
+  headingKey,
   title,
   lead,
   align = 'right',
   tone = 'ivory',
 }: SectionHeadingProps) {
+  const heading = useSectionHeading(headingKey ?? '')
+  const save = useFieldSaver()
+  const isDb = !!headingKey
+  const currentTitle = isDb ? heading.title : (title ?? '')
+  const currentLead = isDb ? heading.lead : (lead ?? '')
   const isCenter = align === 'center'
+
+  const saveField = (field: 'title' | 'lead', value: string) =>
+    save('section-headings', heading.id, { [field]: value }, (d) => {
+      const h = d.section_headings.find((s) => s.id === heading.id)
+      if (h) (h as Record<string, unknown>)[field] = value
+    })
+
   return (
     <Reveal className={isCenter ? 'mx-auto max-w-2xl text-center' : 'max-w-2xl text-right'}>
-      <h2 className={`text-section font-bold ${tone === 'copper' ? 'text-copper' : 'text-ivory'}`}>
-        {title}
-      </h2>
-      
-      {lead && <p className="mt-5 text-base font-light leading-9 text-ivory/60">{lead}</p>}
-      
+      <InlineEdit
+        as="h2"
+        value={currentTitle}
+        onSave={(v) => saveField('title', v)}
+        className={`text-section font-bold ${tone === 'copper' ? 'text-copper' : 'text-ivory'}`}
+      />
+
+      {currentLead && (
+        <InlineEdit
+          as="p"
+          multiline
+          value={currentLead}
+          onSave={(v) => saveField('lead', v)}
+          className="mt-5 text-base font-light leading-9 text-ivory/60"
+        />
+      )}
+
       <div className={`mt-6 h-px w-24 bg-copper/70 ${isCenter ? 'mx-auto' : ''}`} />
     </Reveal>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/admin/ImageField.tsx b/frontend/src/components/admin/ImageField.tsx
new file mode 100644
index 0000000..4e15e9d
--- /dev/null
+++ b/frontend/src/components/admin/ImageField.tsx
@@ -0,0 +1,81 @@
+import { useRef, useState } from 'react'
+import { ImagePlusIcon, Loader2Icon } from 'lucide-react'
+import { adminApi } from '../../admin/adminClient'
+import { useAdmin } from '../../admin/AdminContext'
+
+type ImageFieldProps = {
+  label: string
+  value: string
+  onSave: (url: string) => Promise<boolean>
+}
+
+/**
+ * انتخاب و آپلود تصویر به MinIO — در کشوهای ویرایش استفاده می‌شود.
+ * پس از آپلود موفق، URL نسبی /media/... ذخیره می‌شود.
+ */
+export function ImageField({ label, value, onSave }: ImageFieldProps) {
+  const { runSave, isAuthenticated, isEditMode } = useAdmin()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [uploading, setUploading] = useState(false)
+
+  if (!isAuthenticated || !isEditMode) return null
+
+  const pick = async (file: File | undefined) => {
+    if (!file) return
+    setUploading(true)
+    try {
+      await runSave(async () => {
+        const { url } = await adminApi.upload(file)
+        const ok = await onSave(url)
+        if (!ok) throw new Error('ذخیره نشد')
+      })
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  return (
+    <div>
+      <p className="text-xs font-bold text-ivory/80">{label}</p>
+      <div className="mt-2 flex items-center gap-3">
+        {value ? (
+          <img
+            src={value}
+            alt={label}
+            className="h-16 w-24 border border-ivory/15 object-cover"
+          />
+        ) : (
+          <div className="flex h-16 w-24 items-center justify-center border border-dashed border-ivory/20 text-ivory/30">
+            —
+          </div>
+        )}
+        <div className="min-w-0 flex-1">
+          <button
+            type="button"
+            onClick={() => inputRef.current?.click()}
+            disabled={uploading}
+            className="flex items-center gap-2 border border-ivory/20 px-4 py-2 text-xs font-light text-ivory/80 transition-colors duration-200 hover:border-copper hover:text-copper disabled:opacity-50"
+          >
+            {uploading ? (
+              <Loader2Icon className="h-3.5 w-3.5 animate-spin" />
+            ) : (
+              <ImagePlusIcon className="h-3.5 w-3.5" />
+            )}
+            {uploading ? 'در حال آپلود…' : 'انتخاب تصویر'}
+          </button>
+          {value && <p className="mt-1.5 truncate text-[10px] font-light text-ivory/35" dir="ltr">{value}</p>}
+        </div>
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
+        className="hidden"
+        onChange={(e) => {
+          void pick(e.target.files?.[0])
+          e.target.value = ''
+        }}
+      />
+    </div>
+  )
+}
diff --git a/frontend/src/components/admin/InlineEdit.tsx b/frontend/src/components/admin/InlineEdit.tsx
new file mode 100644
index 0000000..3b0117a
--- /dev/null
+++ b/frontend/src/components/admin/InlineEdit.tsx
@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState } from 'react'
+import type { CSSProperties, ElementType, KeyboardEvent } from 'react'
+import { useAdmin } from '../../admin/AdminContext'
+
+type InlineEditProps = {
+  value: string
+  /** ذخیره async — در صورت خطا، متن به مقدار قبلی برمی‌گردد */
+  onSave: (value: string) => Promise<boolean> | boolean | void
+  as?: ElementType
+  /** چندخطی: Enter خط جدید می‌گذارد و فقط blur ذخیره می‌کند */
+  multiline?: boolean
+  className?: string
+  style?: CSSProperties
+  'aria-label'?: string
+}
+
+/**
+ * ویرایش درجا متن — در حالت عادی دقیقاً همان HTML قبلی را رندر می‌کند
+ * (بدون هیچ تغییر چیدمان) و فقط در Edit Mode برای ادمین قابل ویرایش می‌شود.
+ */
+export function InlineEdit({
+  value,
+  onSave,
+  as: Tag = 'span',
+  multiline = false,
+  className = '',
+  style,
+  ...rest
+}: InlineEditProps) {
+  const { isAuthenticated, isEditMode } = useAdmin()
+  const editing = isAuthenticated && isEditMode
+  const ref = useRef<HTMLElement>(null)
+  const [focused, setFocused] = useState(false)
+
+  // همگام‌سازی متن فقط وقتی المان در حال ویرایش نیست (پرش نشانگر رخ ندهد)
+  useEffect(() => {
+    const el = ref.current
+    if (el && !focused && el.innerText !== value) el.innerText = value
+  }, [value, focused])
+
+  if (!editing) {
+    return (
+      <Tag className={className} style={style} {...rest}>
+        {value}
+      </Tag>
+    )
+  }
+
+  const commit = async () => {
+    const el = ref.current
+    if (!el) return
+    setFocused(false)
+    const next = el.innerText.replace(/\u00a0/g, ' ')
+    if (next === value) return
+    el.innerText = value // بازگشت فوری به مقدار فعلی؛ در صورت موفقیت، به‌روزرسانی خوش‌بینانه متن تازه می‌آید
+    await onSave(next)
+  }
+
+  const onKeyDown = (e: KeyboardEvent<HTMLElement>) => {
+    if (!multiline && e.key === 'Enter') {
+      e.preventDefault()
+      ;(e.currentTarget as HTMLElement).blur()
+    }
+    if (e.key === 'Escape') {
+      if (ref.current) ref.current.innerText = value
+      ;(e.currentTarget as HTMLElement).blur()
+    }
+  }
+
+  return (
+    <Tag
+      ref={ref as never}
+      contentEditable
+      suppressContentEditableWarning
+      spellCheck={false}
+      data-inline-edit
+      aria-label={rest['aria-label']}
+      className={`${className} cursor-text rounded-sm transition-[outline-color,background-color] duration-150 outline-1 outline-dashed outline-transparent hover:bg-copper/5 hover:outline-copper/40 focus:bg-copper/5 focus:outline-copper focus:outline-solid`}
+      style={style}
+      onFocus={() => setFocused(true)}
+      onBlur={commit}
+      onKeyDown={onKeyDown}
+    >
+      {value}
+    </Tag>
+  )
+}
diff --git a/frontend/src/components/home/Articles.tsx b/frontend/src/components/home/Articles.tsx
index 0d68630..7280719 100644
--- a/frontend/src/components/home/Articles.tsx
+++ b/frontend/src/components/home/Articles.tsx
@@ -4,28 +4,43 @@ import { Reveal } from '../Reveal';
 import { ButtonLink } from '../Button';
 import { ArticleCard } from '../ArticleCard';
 import { useSectionHeading, useSite } from '../../api';
+import { useFieldSaver } from '../../admin/AdminContext';
+import { InlineEdit } from '../admin/InlineEdit';
+import { AddItemButton, EditableItem } from '../../admin/Editable';
 
 export function Articles() {
   const { articles } = useSite();
   const heading = useSectionHeading('articles');
+  const save = useFieldSaver();
+
+  const saveHeading = (field: 'label' | 'title' | 'lead' | 'cta_label', value: string) =>
+    save('section-headings', heading.id, { [field]: value }, (d) => {
+      const h = d.section_headings.find((s) => s.id === heading.id);
+      if (h) (h as Record<string, unknown>)[field] = value;
+    });
+
   return (
     <section className="bg-char py-24 lg:py-32" aria-labelledby="articles-title">
       <div className="mx-auto max-w-site px-6 lg:px-10">
         <Reveal className="max-w-2xl text-right">
-          <p className="text-sm font-light text-copper">{heading.label}</p>
+          <p className="text-sm font-light text-copper">
+            <InlineEdit value={heading.label} onSave={(v) => saveHeading('label', v)} />
+          </p>
           <h2 id="articles-title" className="mt-5 text-section font-bold text-ivory">
-            {heading.title}
+            <InlineEdit value={heading.title} onSave={(v) => saveHeading('title', v)} />
           </h2>
           <p className="mt-5 text-base font-light leading-9 text-ivory/60">
-            {heading.lead}
+            <InlineEdit multiline value={heading.lead} onSave={(v) => saveHeading('lead', v)} />
           </p>
           <div className="mt-6 h-px w-24 bg-copper/70" />
         </Reveal>
 
         <div className="mt-14 grid gap-6 lg:grid-cols-3">
           {articles.slice(0, 3).map((article, i) =>
-          <Reveal key={article.slug} delay={0.06 * i} className="h-full">
-              <ArticleCard article={article} />
+          <Reveal key={article.id} delay={0.06 * i} className="h-full">
+              <EditableItem resource="articles" item={article} className="h-full">
+                <ArticleCard article={article} />
+              </EditableItem>
             </Reveal>
           )}
         </div>
@@ -34,13 +49,16 @@ export function Articles() {
           <Reveal delay={0.1}>
             <div className="mt-12 flex justify-center">
               <ButtonLink to={heading.cta_href} variant="outline" className="font-light">
-                {heading.cta_label}
+                <InlineEdit value={heading.cta_label} onSave={(v) => saveHeading('cta_label', v)} />
                 <ArrowLeftIcon className="h-4 w-4" />
               </ButtonLink>
             </div>
           </Reveal>
         )}
+        <div className="mt-6">
+          <AddItemButton resource="articles" />
+        </div>
       </div>
     </section>);
 
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/home/BeforeAfter.tsx b/frontend/src/components/home/BeforeAfter.tsx
index f639eca..b7a71c9 100644
--- a/frontend/src/components/home/BeforeAfter.tsx
+++ b/frontend/src/components/home/BeforeAfter.tsx
@@ -3,6 +3,7 @@ import { MoveHorizontalIcon } from 'lucide-react'
 import { Reveal } from '../Reveal'
 import { SectionHeading } from '../SectionHeading'
 import { useSite } from '../../api'
+import { SingletonPill } from '../../admin/Editable'
 
 export function BeforeAfter() {
   const { before_after } = useSite()
@@ -54,6 +55,10 @@ export function BeforeAfter() {
           align="center"
         />
 
+        <div className="flex justify-start">
+          <SingletonPill resource="before_after" label="ویرایش تصاویر و برچسب‌های قبل/بعد" />
+        </div>
+
         <Reveal delay={0.1}>
           <div
             ref={containerRef}
diff --git a/frontend/src/components/home/Faq.tsx b/frontend/src/components/home/Faq.tsx
index 709413f..c34339e 100644
--- a/frontend/src/components/home/Faq.tsx
+++ b/frontend/src/components/home/Faq.tsx
@@ -3,7 +3,8 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { PlusIcon } from 'lucide-react'
 import { Reveal } from '../Reveal'
 import { SectionHeading } from '../SectionHeading'
-import { useSectionHeading, useSite } from '../../api'
+import { useSite } from '../../api'
+import { AddItemButton, EditableItem } from '../../admin/Editable'
 
 type FaqProps = {
   hideHeading?: boolean;
@@ -11,19 +12,19 @@ type FaqProps = {
 
 export function Faq({ hideHeading = false }: FaqProps) {
   const { faqs } = useSite()
-  const heading = useSectionHeading('faq')
   const [open, setOpen] = useState<number | null>(0)
 
   return (
     <section className="bg-ink py-24 lg:py-32" aria-labelledby="faq-title">
-    
+
       <div className={hideHeading ? "mx-auto max-w-4xl px-6 lg:px-10" : "mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10"}>
-        
+
         {!hideHeading && (
           <div className="lg:col-span-4">
             <SectionHeading
-              title={heading.title}
-              lead={heading.lead}
+              title="سوالات متداول"
+              lead="پاسخ کوتاه به پرتکرارترین پرسش‌های سرمایه‌گذاران و خریداران."
+              headingKey="faq"
             />
           </div>
         )}
@@ -33,43 +34,48 @@ export function Faq({ hideHeading = false }: FaqProps) {
             {faqs.map((faq, i) => {
               const isOpen = open === i
               return (
-                <Reveal key={faq.question} delay={0.04 * i}>
-                  <li className="border-b border-ivory/10">
-                    <button
-                      type="button"
-                      onClick={() => setOpen(isOpen ? null : i)}
-                      aria-expanded={isOpen}
-                      className="flex w-full items-center justify-between gap-6 py-6 text-right transition-colors duration-200 ease-lux hover:text-copper"
-                    >
-                      <span className={`text-base font-bold md:text-lg ${isOpen ? 'text-copper' : 'text-ivory'}`}>
-                        {faq.question}
-                      </span>
-                      <PlusIcon
-                        className={`h-5 w-5 shrink-0 text-copper transition-transform duration-300 ease-lux ${
-                          isOpen ? 'rotate-45' : ''
-                        }`}
-                      />
-                    </button>
-                    <AnimatePresence initial={false}>
-                      {isOpen && (
-                        <motion.div
-                          initial={{ height: 0, opacity: 0 }}
-                          animate={{ height: 'auto', opacity: 1 }}
-                          exit={{ height: 0, opacity: 0 }}
-                          transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}
-                          className="overflow-hidden"
-                        >
-                          <p className="pb-7 pl-10 text-sm font-light leading-9 text-ivory/60">{faq.answer}</p>
-                        </motion.div>
-                      )}
-                    </AnimatePresence>
-                  </li>
+                <Reveal key={faq.id} delay={0.04 * i}>
+                  <EditableItem resource="faqs" item={faq}>
+                    <li className="border-b border-ivory/10">
+                      <button
+                        type="button"
+                        onClick={() => setOpen(isOpen ? null : i)}
+                        aria-expanded={isOpen}
+                        className="flex w-full items-center justify-between gap-6 py-6 text-right transition-colors duration-200 ease-lux hover:text-copper"
+                      >
+                        <span className={`text-base font-bold md:text-lg ${isOpen ? 'text-copper' : 'text-ivory'}`}>
+                          {faq.question}
+                        </span>
+                        <PlusIcon
+                          className={`h-5 w-5 shrink-0 text-copper transition-transform duration-300 ease-lux ${
+                            isOpen ? 'rotate-45' : ''
+                          }`}
+                        />
+                      </button>
+                      <AnimatePresence initial={false}>
+                        {isOpen && (
+                          <motion.div
+                            initial={{ height: 0, opacity: 0 }}
+                            animate={{ height: 'auto', opacity: 1 }}
+                            exit={{ height: 0, opacity: 0 }}
+                            transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}
+                            className="overflow-hidden"
+                          >
+                            <p className="pb-7 pl-10 text-sm font-light leading-9 text-ivory/60">{faq.answer}</p>
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </li>
+                  </EditableItem>
                 </Reveal>
               )
             })}
           </ul>
+          <div className="mt-8">
+            <AddItemButton resource="faqs" />
+          </div>
         </div>
       </div>
     </section>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/home/FeaturedProjects.tsx b/frontend/src/components/home/FeaturedProjects.tsx
index 1fb9517..4af507b 100644
--- a/frontend/src/components/home/FeaturedProjects.tsx
+++ b/frontend/src/components/home/FeaturedProjects.tsx
@@ -6,16 +6,27 @@ import { ButtonLink } from '../Button'
 import { ProjectCard } from '../ProjectCard'
 import { SectionHeading } from '../SectionHeading'
 import { useSectionHeading, useSite, useStatusLabel } from '../../api'
+import { useFieldSaver } from '../../admin/AdminContext'
+import { InlineEdit } from '../admin/InlineEdit'
+import { AddItemButton, EditableItem } from '../../admin/Editable'
 import type { ProjectStatus } from '../../data/site'
 
 export function FeaturedProjects() {
-  const { projects } = useSite()
+  const { projects, status_labels } = useSite()
   const heading = useSectionHeading('featured_projects')
-  const doneLabel = useStatusLabel('done')
-  const progressLabel = useStatusLabel('progress')
+  const save = useFieldSaver()
+  const saveStatusLabel = (key: string, value: string) => {
+    const label = status_labels.find((s) => s.key === key)
+    if (!label) return
+    void save('status-labels', label.id, { label: value }, (d) => {
+      const s = d.status_labels.find((x) => x.id === label.id)
+      if (s) s.label = value
+    })
+  }
+
   const FILTERS: { key: ProjectStatus; label: string }[] = [
-    { key: 'done', label: doneLabel },
-    { key: 'progress', label: progressLabel },
+    { key: 'done', label: useStatusLabel('done') },
+    { key: 'progress', label: useStatusLabel('progress') },
   ]
   const [status, setStatus] = useState<ProjectStatus>('done')
   const list = projects.filter((p) => p.status === status).slice(0, 3)
@@ -23,7 +34,7 @@ export function FeaturedProjects() {
   return (
     <section className="bg-ink py-24 lg:py-32" aria-labelledby="projects-title">
       <div className="mx-auto max-w-site px-6 lg:px-10">
-        <SectionHeading title={heading.title} lead={heading.lead} />
+        <SectionHeading title={heading.title} lead={heading.lead} headingKey="featured_projects" />
 
         <div className="mt-10 flex flex-wrap items-center gap-3" role="tablist" aria-label="فیلتر وضعیت پروژه">
           {FILTERS.map((filter) => (
@@ -46,7 +57,10 @@ export function FeaturedProjects() {
                 />
               )}
               <span className="relative z-10 transition-colors duration-300 ease-out group-hover:text-char">
-                {filter.label}
+                <InlineEdit
+                  value={filter.label}
+                  onSave={(v) => saveStatusLabel(filter.key, v)}
+                />
               </span>
             </button>
           ))}
@@ -55,7 +69,7 @@ export function FeaturedProjects() {
         <div className="mt-10 min-h-[420px]">
           <AnimatePresence mode="wait">
             <motion.div
-              key={status} 
+              key={status}
               initial={{ opacity: 0, y: 15 }}
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: -15 }}
@@ -64,13 +78,15 @@ export function FeaturedProjects() {
             >
               {list.map((project, i) => (
                 <motion.div
-                  key={project.slug}
+                  key={project.id}
                   initial={{ opacity: 0, y: 20 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.5, delay: i * 0.1, ease: [0.23, 1, 0.32, 1] }}
                   className="h-full"
                 >
-                  <ProjectCard project={project} />
+                  <EditableItem resource="projects" item={project} className="h-full">
+                    <ProjectCard project={project} />
+                  </EditableItem>
                 </motion.div>
               ))}
             </motion.div>
@@ -81,7 +97,15 @@ export function FeaturedProjects() {
           <Reveal delay={0.1}>
             <div className="mt-12 flex justify-center">
               <ButtonLink to={heading.cta_href} variant="outline" className="font-light">
-                {heading.cta_label}
+                <InlineEdit
+                  value={heading.cta_label}
+                  onSave={(v) =>
+                    save('section-headings', heading.id, { cta_label: v }, (d) => {
+                      const h = d.section_headings.find((s) => s.id === heading.id)
+                      if (h) h.cta_label = v
+                    })
+                  }
+                />
                 <ArrowLeftIcon className="h-4 w-4" />
               </ButtonLink>
             </div>
@@ -90,4 +114,4 @@ export function FeaturedProjects() {
       </div>
     </section>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/home/Gallery.tsx b/frontend/src/components/home/Gallery.tsx
index 75bf94e..d2ee9bb 100644
--- a/frontend/src/components/home/Gallery.tsx
+++ b/frontend/src/components/home/Gallery.tsx
@@ -3,11 +3,11 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { ChevronLeftIcon, ChevronRightIcon, XIcon } from 'lucide-react'
 import { Reveal } from '../Reveal'
 import { SectionHeading } from '../SectionHeading'
-import { useSectionHeading, useSite } from '../../api'
+import { useSite } from '../../api'
+import { AddItemButton, EditableItem } from '../../admin/Editable'
 
 export function Gallery() {
   const { gallery } = useSite()
-  const heading = useSectionHeading('gallery')
   const [active, setActive] = useState<number | null>(null)
 
   const close = useCallback(() => setActive(null), [])
@@ -30,33 +30,37 @@ 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={heading.title}
-          lead={heading.lead}
+          title="گالری تصاویر"
+          lead="قاب‌هایی از کارگاه‌ها و پروژه‌های تحویل‌شده گروه ساختمانی آرامش."
+          headingKey="gallery"
           align="center"
         />
 
         <div className="mt-14 grid grid-cols-2 gap-4 lg:grid-cols-3">
           {gallery.map((image, i) => (
             <Reveal key={image.id} delay={0.04 * i}>
-              <button
-                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')}`}
-              >
-                <img
-                  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>
+              <EditableItem resource="gallery" item={image}>
+                <button
+                  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')}`}
+                >
+                  <img
+                    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>
+              </EditableItem>
             </Reveal>
           ))}
+          <AddItemButton resource="gallery" />
         </div>
       </div>
 
       <AnimatePresence>
-        {active !== null && (
+        {active !== null && gallery[active] && (
           <motion.div
             className="fixed inset-0 z-[80] flex items-center justify-center bg-char/80 backdrop-blur-lg p-6"
             initial={{ opacity: 0 }}
@@ -116,4 +120,4 @@ export function Gallery() {
       </AnimatePresence>
     </section>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/home/Hero.tsx b/frontend/src/components/home/Hero.tsx
index 8c84686..b27d9cf 100644
--- a/frontend/src/components/home/Hero.tsx
+++ b/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>
   )
 }
diff --git a/frontend/src/components/home/Newsletter.tsx b/frontend/src/components/home/Newsletter.tsx
index 91430a9..b01f7cf 100644
--- a/frontend/src/components/home/Newsletter.tsx
+++ b/frontend/src/components/home/Newsletter.tsx
@@ -4,14 +4,23 @@ import Swal from 'sweetalert2'
 import { Reveal } from '../Reveal'
 import { Button } from '../Button'
 import { useSite } from '../../api'
+import { useFieldSaver } from '../../admin/AdminContext'
+import { InlineEdit } from '../admin/InlineEdit'
+import { SingletonPill } from '../../admin/Editable'
 import { API_URL } from '../../config'
 
 export function Newsletter() {
   const { newsletter } = useSite()
+  const save = useFieldSaver()
   const [email, setEmail] = useState('')
   const [status, setStatus] = useState<'idle' | 'error' | 'done'>('idle')
   const [sending, setSending] = useState(false)
 
+  const saveContent = (field: string, value: string) =>
+    save('newsletter', newsletter.id, { [field]: value }, (d) => {
+      ;(d.newsletter as unknown as Record<string, unknown>)[field] = value
+    })
+
   const showErrorAlert = (title: string, text: string) => {
     Swal.fire({
       icon: 'warning',
@@ -87,14 +96,15 @@ export function Newsletter() {
   }
 
   return (
-    <section className="bg-copper py-16" aria-labelledby="newsletter-title">
+    <section className="relative bg-copper py-16" aria-labelledby="newsletter-title">
+      <SingletonPill resource="newsletter" label="ویرایش متن‌های خبرنامه" className="absolute left-4 top-4" />
       <div className="mx-auto grid max-w-site items-center gap-8 px-6 lg:grid-cols-2 lg:px-10">
         <Reveal>
           <h2 id="newsletter-title" className="text-2xl font-bold leading-relaxed text-char md:text-3xl">
-            {newsletter.title}
+            <InlineEdit value={newsletter.title} onSave={(v) => saveContent('title', v)} />
           </h2>
           <p className="mt-3 max-w-md text-sm font-light leading-8 text-char/75">
-            {newsletter.lead}
+            <InlineEdit multiline value={newsletter.lead} onSave={(v) => saveContent('lead', v)} />
           </p>
         </Reveal>
 
@@ -127,11 +137,13 @@ export function Newsletter() {
 
             <Button type="submit" variant="dark-ivory" disabled={sending}>
               <SendIcon className="h-4 w-4" />
-              {sending ? newsletter.sending_label : newsletter.button_label}
+              {sending ? newsletter.sending_label : (
+                <InlineEdit value={newsletter.button_label} onSave={(v) => saveContent('button_label', v)} />
+              )}
             </Button>
           </form>
         </Reveal>
       </div>
     </section>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/home/Services.tsx b/frontend/src/components/home/Services.tsx
index 9da881b..93a0e18 100644
--- a/frontend/src/components/home/Services.tsx
+++ b/frontend/src/components/home/Services.tsx
@@ -2,41 +2,55 @@ import React from 'react'
 import { Reveal } from '../Reveal'
 import { ServiceIcon } from '../ServiceIcon'
 import { useSectionHeading, useSite } from '../../api'
+import { useFieldSaver } from '../../admin/AdminContext'
+import { InlineEdit } from '../admin/InlineEdit'
+import { AddItemButton, EditableItem } from '../../admin/Editable'
 
 export function Services() {
   const { services } = useSite()
   const heading = useSectionHeading('services')
+  const save = useFieldSaver()
+
+  const saveHeading = (field: 'title' | 'lead', value: string) =>
+    save('section-headings', heading.id, { [field]: value }, (d) => {
+      const h = d.section_headings.find((s) => s.id === heading.id)
+      if (h) h[field] = value
+    })
+
   return (
     <section className="bg-ink py-24 lg:py-32" aria-labelledby="services-title">
       <div className="mx-auto max-w-site px-6 lg:px-10">
         <Reveal className="max-w-2xl text-right">
 
           <h2 id="services-title" className="text-section font-bold text-ivory">
-           {heading.title}
+            <InlineEdit value={heading.title} onSave={(v) => saveHeading('title', v)} />
           </h2>
           <p className="mt-5 text-base font-light leading-9 text-ivory/60">
-            {heading.lead}
+            <InlineEdit multiline value={heading.lead} onSave={(v) => saveHeading('lead', v)} />
           </p>
           <div className="mt-6 h-px w-24 bg-copper/70" />
         </Reveal>
 
         <div className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
           {services.map((service, i) => (
-            <Reveal key={service.title} delay={0.04 * i} className="h-full">
-              <article className="group flex h-full flex-col items-center border border-ivory/10 bg-char p-8 text-center transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
-                <ServiceIcon
-                  name={service.icon}
-                  className="h-12 w-12 text-copper/85 transition-colors duration-300 ease-out group-hover:text-copper"
-                />
-                <h3 className="mt-6 text-lg font-bold text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
-                  {service.title}
-                </h3>
-                <p className="mt-3 text-sm font-light leading-8 text-ivory/55">{service.desc}</p>
-              </article>
+            <Reveal key={service.id} delay={0.04 * i} className="h-full">
+              <EditableItem resource="services" item={service} className="h-full">
+                <article className="group flex h-full flex-col items-center border border-ivory/10 bg-char p-8 text-center transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
+                  <ServiceIcon
+                    name={service.icon}
+                    className="h-12 w-12 text-copper/85 transition-colors duration-300 ease-out group-hover:text-copper"
+                  />
+                  <h3 className="mt-6 text-lg font-bold text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
+                    {service.title}
+                  </h3>
+                  <p className="mt-3 text-sm font-light leading-8 text-ivory/55">{service.desc}</p>
+                </article>
+              </EditableItem>
             </Reveal>
           ))}
+          <AddItemButton resource="services" />
         </div>
       </div>
     </section>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/home/Stats.tsx b/frontend/src/components/home/Stats.tsx
index ea5f0e8..8007bc3 100644
--- a/frontend/src/components/home/Stats.tsx
+++ b/frontend/src/components/home/Stats.tsx
@@ -1,6 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useInView } from 'framer-motion';
 import { useSite } from '../../api';
+import { useFieldSaver } from '../../admin/AdminContext';
+import { AddItemButton, EditableItem } from '../../admin/Editable';
+import { InlineEdit } from '../admin/InlineEdit';
 
 function toFa(n: number) {
   return n.toLocaleString('fa-IR');
@@ -29,19 +32,39 @@ function Counter({ value }: {value: number;}) {
 
 export function Stats() {
   const { stats } = useSite();
+  const save = useFieldSaver();
+
   return (
     <section className="bg-char py-16" aria-label="آمار و ارقام">
       <div className="mx-auto grid max-w-site grid-cols-2 gap-y-12 px-6 lg:grid-cols-4 lg:px-10">
         {stats.map((stat) =>
-        <div key={stat.label} className="text-center">
+        <EditableItem key={stat.id} resource="stats" item={stat}>
+          <div className="text-center">
             <p className="text-4xl font-bold text-copper md:text-5xl">
               <Counter value={stat.value} />
-              {stat.suffix && <span className="mr-1 text-2xl">{stat.suffix}</span>}
+              <InlineEdit
+                value={stat.suffix}
+                onSave={(v) => save('stats', stat.id, { suffix: v }, (d) => {
+                  const s = d.stats.find((x) => x.id === stat.id);
+                  if (s) s.suffix = v;
+                })}
+                className="mr-1 text-2xl"
+              />
+            </p>
+            <p className="mt-3 text-sm font-light text-ivory/55">
+              <InlineEdit
+                value={stat.label}
+                onSave={(v) => save('stats', stat.id, { label: v }, (d) => {
+                  const s = d.stats.find((x) => x.id === stat.id);
+                  if (s) s.label = v;
+                })}
+              />
             </p>
-            <p className="mt-3 text-sm font-light text-ivory/55">{stat.label}</p>
           </div>
+        </EditableItem>
         )}
+        <AddItemButton resource="stats" />
       </div>
     </section>);
 
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/home/Story.tsx b/frontend/src/components/home/Story.tsx
index 18fef31..61cb285 100644
--- a/frontend/src/components/home/Story.tsx
+++ b/frontend/src/components/home/Story.tsx
@@ -3,6 +3,9 @@ import { ArrowLeftIcon } from 'lucide-react'
 import { Reveal } from '../Reveal'
 import { ButtonLink } from '../Button'
 import { useSite } from '../../api'
+import { useFieldSaver } from '../../admin/AdminContext'
+import { InlineEdit } from '../admin/InlineEdit'
+import { SingletonPill } from '../../admin/Editable'
 
 type StoryProps = {
   showLink?: boolean;
@@ -14,6 +17,19 @@ type StoryProps = {
 
 export function Story({ showLink = true, showLabel = true, showQuote = false, alignTop = false, children }: StoryProps) {
   const { story } = useSite()
+  const save = useFieldSaver()
+
+  const saveStory = (field: string, value: unknown) =>
+    save('story', story.id, { [field]: value }, (d) => {
+      ;(d.story as unknown as Record<string, unknown>)[field] = value
+    })
+
+  const saveParagraph = (index: number, value: string) => {
+    const paragraphs = [...story.paragraphs]
+    paragraphs[index] = value
+    void saveStory('paragraphs', paragraphs)
+  }
+
   return (
     <section id="story" className="bg-ink py-24 lg:py-32" aria-labelledby="story-title">
       <div className={`mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-2 lg:px-10 ${alignTop ? 'items-start' : 'items-center'}`}>
@@ -21,7 +37,7 @@ export function Story({ showLink = true, showLabel = true, showQuote = false, al
           {showLabel && (
             <Reveal>
               <h2 id="story-title" className="text-section font-bold text-ivory">
-                {story.title}
+                <InlineEdit value={story.title} onSave={(v) => saveStory('title', v)} />
               </h2>
               <div className="mt-6 h-px w-24 bg-copper/70" />
             </Reveal>
@@ -30,7 +46,7 @@ export function Story({ showLink = true, showLabel = true, showQuote = false, al
           <Reveal delay={0.08}>
             {story.paragraphs.map((paragraph, i) => (
               <p key={i} className={`text-base font-light leading-9 text-ivory/65 ${i === 0 ? 'mt-8' : 'mt-5'}`}>
-                {paragraph}
+                <InlineEdit multiline value={paragraph} onSave={(v) => saveParagraph(i, v)} />
               </p>
             ))}
           </Reveal>
@@ -38,12 +54,20 @@ export function Story({ showLink = true, showLabel = true, showQuote = false, al
           <Reveal delay={0.16}>
             <div className="mt-10 grid grid-cols-2 gap-8 border-t border-ivory/10 pt-8">
               <div>
-                <p className="text-2xl font-bold text-copper">{story.stat1_value}</p>
-                <p className="mt-2 text-sm font-light text-ivory/55">{story.stat1_label}</p>
+                <p className="text-2xl font-bold text-copper">
+                  <InlineEdit value={story.stat1_value} onSave={(v) => saveStory('stat1_value', v)} />
+                </p>
+                <p className="mt-2 text-sm font-light text-ivory/55">
+                  <InlineEdit value={story.stat1_label} onSave={(v) => saveStory('stat1_label', v)} />
+                </p>
               </div>
               <div>
-                <p className="text-2xl font-bold text-copper">{story.stat2_value}</p>
-                <p className="mt-2 text-sm font-light text-ivory/55">{story.stat2_label}</p>
+                <p className="text-2xl font-bold text-copper">
+                  <InlineEdit value={story.stat2_value} onSave={(v) => saveStory('stat2_value', v)} />
+                </p>
+                <p className="mt-2 text-sm font-light text-ivory/55">
+                  <InlineEdit value={story.stat2_label} onSave={(v) => saveStory('stat2_label', v)} />
+                </p>
               </div>
             </div>
           </Reveal>
@@ -51,8 +75,12 @@ export function Story({ showLink = true, showLabel = true, showQuote = false, al
           {showQuote && story.quote && (
             <Reveal delay={0.2}>
               <div className="mt-12 border-r-2 border-copper bg-char/40 p-6">
-                <p className="text-sm font-light leading-8 text-ivory/80">{story.quote}</p>
-                <p className="mt-5 text-sm font-bold text-copper">{story.quote_author}</p>
+                <p className="text-sm font-light leading-8 text-ivory/80">
+                  <InlineEdit multiline value={story.quote} onSave={(v) => saveStory('quote', v)} />
+                </p>
+                <p className="mt-5 text-sm font-bold text-copper">
+                  <InlineEdit value={story.quote_author} onSave={(v) => saveStory('quote_author', v)} />
+                </p>
               </div>
             </Reveal>
           )}
@@ -60,7 +88,7 @@ export function Story({ showLink = true, showLabel = true, showQuote = false, al
           {showLink && (
             <Reveal delay={0.22}>
               <ButtonLink to={story.link_href} variant="outline" className="mt-10 font-light">
-                {story.link_label}
+                <InlineEdit value={story.link_label} onSave={(v) => saveStory('link_label', v)} />
                 <ArrowLeftIcon className="h-4 w-4" />
               </ButtonLink>
             </Reveal>
@@ -73,7 +101,8 @@ export function Story({ showLink = true, showLabel = true, showQuote = false, al
           )}
         </div>
 
-        <div className="grid grid-cols-2 gap-4">
+        <div className="relative grid grid-cols-2 gap-4">
+          <SingletonPill resource="story" label="تصاویر و نقل‌قول بخش درباره ما" className="absolute -top-10 right-0" />
           {story.bento.map((item, i) => (
             <Reveal key={item.src + i} delay={0.06 * i}>
               <div className="overflow-hidden">
diff --git a/frontend/src/components/home/Team.tsx b/frontend/src/components/home/Team.tsx
index 3280e82..9c83293 100644
--- a/frontend/src/components/home/Team.tsx
+++ b/frontend/src/components/home/Team.tsx
@@ -1,37 +1,41 @@
 import React from 'react'
 import { Reveal } from '../Reveal'
 import { SectionHeading } from '../SectionHeading'
-import { useSectionHeading, useSite } from '../../api'
+import { useSite } from '../../api'
+import { AddItemButton, EditableItem } from '../../admin/Editable'
 
 export function Team() {
   const { team } = useSite()
-  const heading = useSectionHeading('team')
   return (
     <section className="bg-ink py-24 lg:py-32" aria-labelledby="team-title">
       <div className="mx-auto max-w-site px-6 lg:px-10">
         <SectionHeading
-          title={heading.title}
-          lead={heading.lead}
+          title="تیم ما"
+          lead="کسانی که تصمیم‌های اصلی هر پروژه را می‌گیرند و پاسخ‌گوی آن هستند."
+          headingKey="team"
           align="center"
         />
 
         <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
           {team.map((member, i) => (
-            <Reveal key={member.name} delay={0.06 * i} className="h-full">
-              <article className="group flex h-full flex-col items-center border border-ivory/10 bg-char p-10 text-center transition-[transform,box-shadow,border-color] duration-500 ease-out hover:-translate-y-3 hover:border-copper/50 hover:shadow-lift">
-                <div className="flex h-24 w-24 items-center justify-center rounded-full border border-copper/30 text-3xl font-bold text-copper transition-colors duration-500 group-hover:border-copper">
-                  {member.name.trim().charAt(0)}
-                </div>
-                <h3 className="mt-8 text-lg font-bold text-ivory">{member.name}</h3>
-                <p className="mt-2 text-sm font-light text-copper">{member.role}</p>
-                <p className="mt-6 border-t border-ivory/10 pt-6 text-sm font-light text-ivory/60">
-                  {member.bio}
-                </p>
-              </article>
+            <Reveal key={member.id} delay={0.06 * i} className="h-full">
+              <EditableItem resource="team" item={member} className="h-full">
+                <article className="group flex h-full flex-col items-center border border-ivory/10 bg-char p-10 text-center transition-[transform,box-shadow,border-color] duration-500 ease-out hover:-translate-y-3 hover:border-copper/50 hover:shadow-lift">
+                  <div className="flex h-24 w-24 items-center justify-center rounded-full border border-copper/30 text-3xl font-bold text-copper transition-colors duration-500 group-hover:border-copper">
+                    {member.name.trim().charAt(0)}
+                  </div>
+                  <h3 className="mt-8 text-lg font-bold text-ivory">{member.name}</h3>
+                  <p className="mt-2 text-sm font-light text-copper">{member.role}</p>
+                  <p className="mt-6 border-t border-ivory/10 pt-6 text-sm font-light text-ivory/60">
+                    {member.bio}
+                  </p>
+                </article>
+              </EditableItem>
             </Reveal>
           ))}
+          <AddItemButton resource="team" />
         </div>
       </div>
     </section>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/home/Testimonials.tsx b/frontend/src/components/home/Testimonials.tsx
index 5ff2d62..e554f22 100644
--- a/frontend/src/components/home/Testimonials.tsx
+++ b/frontend/src/components/home/Testimonials.tsx
@@ -2,13 +2,14 @@ import React, { useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { ChevronLeftIcon, ChevronRightIcon, QuoteIcon } from 'lucide-react';
 import { SectionHeading } from '../SectionHeading';
-import { useSectionHeading, useSite } from '../../api';
+import { useSite } from '../../api';
+import { EditableItem } from '../../admin/Editable';
 
 export function Testimonials() {
   const { testimonials } = useSite();
-  const heading = useSectionHeading('testimonials');
   const [index, setIndex] = useState(0);
-  const item = testimonials[index];
+  const current = testimonials[Math.min(index, Math.max(testimonials.length - 1, 0))];
+  if (!current) return null;
 
   const go = (dir: number) => {
     setIndex((prev) => (prev + dir + testimonials.length) % testimonials.length);
@@ -17,23 +18,25 @@ export function Testimonials() {
   return (
     <section className="border-y border-ivory/10 bg-char py-24 lg:py-32" aria-labelledby="testimonials-title">
       <div className="mx-auto max-w-site px-6 lg:px-10">
-        <SectionHeading title={heading.title} align="center" />
+        <SectionHeading headingKey="testimonials" align="center" />
 
         <div className="relative mx-auto mt-14 max-w-3xl text-center">
           <QuoteIcon className="mx-auto h-8 w-8 text-copper/60" aria-hidden="true" />
           <AnimatePresence mode="wait">
             <motion.blockquote
-              key={item.name}
+              key={current.id}
               initial={{ opacity: 0, y: 16 }}
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: -12 }}
               transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}>
-              
-              <p className="mt-8 text-lg font-light leading-[2.4rem] text-ivory/85 md:text-xl">«{item.quote}»</p>
-              <footer className="mt-8">
-                <p className="text-base font-bold text-copper">{item.name}</p>
-                <p className="mt-1 text-sm font-light text-ivory/45">{item.role}</p>
-              </footer>
+
+              <EditableItem resource="testimonials" item={current}>
+                <p className="mt-8 text-lg font-light leading-[2.4rem] text-ivory/85 md:text-xl">«{current.quote}»</p>
+                <footer className="mt-8">
+                  <p className="text-base font-bold text-copper">{current.name}</p>
+                  <p className="mt-1 text-sm font-light text-ivory/45">{current.role}</p>
+                </footer>
+              </EditableItem>
             </motion.blockquote>
           </AnimatePresence>
 
@@ -43,13 +46,13 @@ export function Testimonials() {
               onClick={() => go(1)}
               aria-label="نظر قبلی"
               className="flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory/70 transition-colors duration-200 ease-lux hover:border-copper hover:text-copper">
-              
+
               <ChevronRightIcon className="h-5 w-5" />
             </button>
             <div className="flex gap-2" role="tablist" aria-label="انتخاب نظر">
               {testimonials.map((t, i) =>
               <button
-                key={t.name}
+                key={t.id}
                 type="button"
                 role="tab"
                 aria-selected={i === index}
@@ -66,7 +69,7 @@ export function Testimonials() {
               onClick={() => go(-1)}
               aria-label="نظر بعدی"
               className="flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory/70 transition-colors duration-200 ease-lux hover:border-copper hover:text-copper">
-              
+
               <ChevronLeftIcon className="h-5 w-5" />
             </button>
           </div>
@@ -74,4 +77,4 @@ export function Testimonials() {
       </div>
     </section>);
 
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/home/Timeline.tsx b/frontend/src/components/home/Timeline.tsx
index 188cf1c..a6fe6cb 100644
--- a/frontend/src/components/home/Timeline.tsx
+++ b/frontend/src/components/home/Timeline.tsx
@@ -1,7 +1,8 @@
 import React, { useRef } from 'react'
 import { motion, useScroll, useTransform, useInView } from 'framer-motion'
-import { useSectionHeading, useSite, type TimelineItem } from '../../api'
+import { useSite, type TimelineItem } from '../../api'
 import { SectionHeading } from '../SectionHeading'
+import { AddItemButton, EditableItem } from '../../admin/Editable'
 
 const ease = [0.23, 1, 0.32, 1] as const
 
@@ -31,11 +32,13 @@ function Item({ item, index }: { item: Milestone; index: number }) {
         animate={active ? { opacity: 1, y: 0 } : { opacity: 0, y: 24 }}
         transition={{ duration: 0.55, ease }}
       >
-        <div className="border border-ivory/10 bg-ink p-6 md:p-7">
-          <span className="text-sm font-light text-copper">{item.year}</span>
-          <h3 className="mt-3 text-lg font-bold text-ivory">{item.title}</h3>
-          <p className="mt-3 text-sm font-light leading-8 text-ivory/60">{item.desc}</p>
-        </div>
+        <EditableItem resource="timeline" item={item}>
+          <div className="border border-ivory/10 bg-ink p-6 md:p-7">
+            <span className="text-sm font-light text-copper">{item.year}</span>
+            <h3 className="mt-3 text-lg font-bold text-ivory">{item.title}</h3>
+            <p className="mt-3 text-sm font-light leading-8 text-ivory/60">{item.desc}</p>
+          </div>
+        </EditableItem>
       </motion.div>
     </li>
   )
@@ -43,7 +46,6 @@ function Item({ item, index }: { item: Milestone; index: number }) {
 
 export function Timeline() {
   const { timeline } = useSite()
-  const heading = useSectionHeading('timeline')
   const ref = useRef<HTMLDivElement>(null)
   const { scrollYProgress } = useScroll({
     target: ref,
@@ -54,11 +56,12 @@ export function Timeline() {
   return (
     <section className="bg-char py-24 md:py-32" aria-labelledby="timeline-title">
       <div className="mx-auto w-full max-w-site px-6 lg:px-10">
-        
+
         <div className="mb-16">
           <SectionHeading
-            title={heading.title}
-            lead={heading.lead}
+            title="مسیر ما"
+            lead="از یک دفتر چهارنفره تا ۴۷ پروژه. خط زمان پروژه‌های ما را ببینید."
+            headingKey="timeline"
             align="center"
           />
         </div>
@@ -76,9 +79,12 @@ export function Timeline() {
 
           <ol className="flex flex-col gap-12 md:gap-16">
             {timeline.map((item, i) => (
-              <Item key={item.year} item={item} index={i} />
+              <Item key={item.id} item={item} index={i} />
             ))}
           </ol>
+          <div className="mt-12">
+            <AddItemButton resource="timeline" />
+          </div>
         </div>
       </div>
     </section>
diff --git a/frontend/src/components/home/WhyUs.tsx b/frontend/src/components/home/WhyUs.tsx
index 85338ef..0331908 100644
--- a/frontend/src/components/home/WhyUs.tsx
+++ b/frontend/src/components/home/WhyUs.tsx
@@ -2,17 +2,29 @@ import React from 'react';
 import { Reveal } from '../Reveal';
 import { SectionHeading } from '../SectionHeading';
 import { useSectionHeading, useSite } from '../../api';
+import { AddItemButton, EditableItem, SingletonPill } from '../../admin/Editable';
+import { InlineEdit } from '../admin/InlineEdit';
+import { useFieldSaver } from '../../admin/AdminContext';
 
 export function WhyUs() {
   const { why_us } = useSite();
   const heading = useSectionHeading('why_us');
+  const save = useFieldSaver();
+
+  const saveItem = (id: number, changes: Record<string, unknown>) =>
+    save('why-us', id, changes, (d) => {
+      const it = d.why_us.find((x) => x.id === id);
+      if (it) Object.assign(it, changes);
+    });
+
   return (
     <section className="bg-ink py-24 lg:py-32" aria-labelledby="why-title">
       <div className="mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10">
         <div className="lg:col-span-5">
           <SectionHeading
             title={heading.title}
-            lead={heading.lead} />
+            lead={heading.lead}
+            headingKey="why_us" />
 
           {heading.image && (
             <Reveal delay={0.12}>
@@ -28,17 +40,33 @@ export function WhyUs() {
         <div className="lg:col-span-7">
           <div className="grid gap-x-10 gap-y-px sm:grid-cols-2">
             {why_us.map((item, i) =>
-            <Reveal key={item.title} delay={0.05 * i}>
+            <Reveal key={item.id} delay={0.05 * i}>
+              <EditableItem resource="why_us" item={item}>
                 <div className="flex h-full flex-col border-t border-ivory/10 py-8">
                   <span className="text-xs font-light text-copper">۰{(i + 1).toLocaleString('fa-IR')}</span>
-                  <h3 className="mt-4 text-lg font-bold text-ivory">{item.title}</h3>
-                  <p className="mt-3 text-sm font-light leading-8 text-ivory/55">{item.desc}</p>
+                  <h3 className="mt-4 text-lg font-bold text-ivory">
+                    <InlineEdit
+                      value={item.title}
+                      onSave={(v) => saveItem(item.id, { title: v })}
+                    />
+                  </h3>
+                  <p className="mt-3 text-sm font-light leading-8 text-ivory/55">
+                    <InlineEdit
+                      multiline
+                      value={item.desc}
+                      onSave={(v) => saveItem(item.id, { desc: v })}
+                    />
+                  </p>
                 </div>
+              </EditableItem>
               </Reveal>
             )}
           </div>
+          <div className="mt-8">
+            <AddItemButton resource="why_us" />
+          </div>
         </div>
       </div>
     </section>);
 
-}
\ No newline at end of file
+}
diff --git a/frontend/src/data/site.ts b/frontend/src/data/site.ts
index b623e44..753c1ff 100644
--- a/frontend/src/data/site.ts
+++ b/frontend/src/data/site.ts
@@ -1,6 +1,7 @@
 // انواع مشترک داده‌ها — همه محتوای متنی سایت از بک‌اند (GET /api/site) بارگذاری می‌شود.
 
 export type Service = {
+  id: number;
   title: string;
   desc: string;
   icon: 'draft' | 'tower' | 'mall' | 'villa' | 'renew' | 'manage' | 'invest' | 'landscape';
@@ -9,6 +10,7 @@ export type Service = {
 export type ProjectStatus = 'done' | 'progress';
 
 export type Project = {
+  id: number;
   slug: string;
   title: string;
   location: string;
@@ -25,5 +27,6 @@ export type Project = {
 };
 
 export type Article = {
+  id: number;
   slug: string; title: string; date: string; category: string; image: string; read: string; excerpt: string; body: string[];
 };
diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index 0887491..60e21fa 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -6,13 +6,11 @@ import { Timeline } from '../components/home/Timeline'
 import { WhyUs } from '../components/home/WhyUs'
 import { Team } from '../components/home/Team'
 import { ContactSection } from '../components/ContactSection'
-import { usePageHero } from '../api'
 
 export function About() {
-  const hero = usePageHero('about')
-  return (
+    return (
     <>
-      <PageHero title={hero.title} lead={hero.lead} image={hero.image} />
+      <PageHero pageKey="about" />
 
       <Story showLink={false} showLabel={false} showQuote={true} alignTop={true} />
 
diff --git a/frontend/src/pages/Blog.tsx b/frontend/src/pages/Blog.tsx
index b97492e..e27c2c3 100644
--- a/frontend/src/pages/Blog.tsx
+++ b/frontend/src/pages/Blog.tsx
@@ -5,20 +5,21 @@ import { PageHero } from '../components/PageHero'
 import { Reveal } from '../components/Reveal'
 import { ArticleCard } from '../components/ArticleCard'
 import { Newsletter } from '../components/home/Newsletter'
-import { usePageHero, useSite } from '../api'
+import { useSite } from '../api'
+import { AddItemButton, EditableItem } from '../admin/Editable'
 
 export function Blog() {
   const { articles } = useSite()
-  const hero = usePageHero('blog')
-  const [featured, ...rest] = articles
+    const [featured, ...rest] = articles
 
   return (
     <>
-      <PageHero title={hero.title} lead={hero.lead} image={hero.image} />
+      <PageHero pageKey="blog" />
 
       <section className="bg-ink py-24 lg:py-32" aria-label="مقالات">
         <div className="mx-auto max-w-site px-6 lg:px-10">
           <Reveal>
+            <EditableItem resource="articles" item={featured}>
             <Link
               to={`/blog/${featured.slug}`}
               className="group grid items-stretch border border-ivory/10 bg-char transition-[transform,box-shadow,border-color] duration-300 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift lg:grid-cols-2"
@@ -52,14 +53,18 @@ export function Blog() {
                 </div>
               </div>
             </Link>
+            </EditableItem>
           </Reveal>
 
           <div className="mt-12 grid gap-6 lg:grid-cols-3">
             {rest.map((article, i) => (
-              <Reveal key={article.slug} delay={0.05 * i} className="h-full">
-                <ArticleCard article={article} />
+              <Reveal key={article.id} delay={0.05 * i} className="h-full">
+                <EditableItem resource="articles" item={article} className="h-full">
+                  <ArticleCard article={article} />
+                </EditableItem>
               </Reveal>
             ))}
+            <AddItemButton resource="articles" />
           </div>
         </div>
       </section>
diff --git a/frontend/src/pages/ContactPage.tsx b/frontend/src/pages/ContactPage.tsx
index 9a6505c..f7cfe9e 100644
--- a/frontend/src/pages/ContactPage.tsx
+++ b/frontend/src/pages/ContactPage.tsx
@@ -2,20 +2,21 @@ import React from 'react'
 import { PageHero } from '../components/PageHero'
 import { ContactSection } from '../components/ContactSection'
 import { Reveal } from '../components/Reveal'
-import { usePageHero, useSite } from '../api'
+import { useSite } from '../api'
+import { AddItemButton, EditableItem } from '../admin/Editable'
 
 export function ContactPage() {
   const { offices } = useSite()
-  const hero = usePageHero('contact')
-
+  
   return (
     <>
-      <PageHero title={hero.title} lead={hero.lead} image={hero.image} />
+      <PageHero pageKey="contact" />
 
       <section className="bg-ink py-24" aria-label="دفاتر ما">
         <div className="mx-auto grid max-w-site gap-6 px-6 md:grid-cols-3 lg:px-10">
           {offices.map((office, i) => (
             <Reveal key={office.id} delay={0.06 * i} className="h-full">
+              <EditableItem resource="offices" item={office} className="h-full">
               <article className="flex h-full flex-col border border-ivory/10 bg-char px-8 py-12 text-center transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
                 <h2 className="text-2xl font-bold text-copper">{office.city}</h2>
                 <p className="mt-6 text-sm font-light leading-9 text-ivory/70">{office.address}</p>
@@ -25,8 +26,10 @@ export function ContactPage() {
                   </p>
                 </div>
               </article>
+              </EditableItem>
             </Reveal>
           ))}
+          <AddItemButton resource="offices" />
         </div>
       </section>
 
diff --git a/frontend/src/pages/FaqPage.tsx b/frontend/src/pages/FaqPage.tsx
index a750c5e..c2849db 100644
--- a/frontend/src/pages/FaqPage.tsx
+++ b/frontend/src/pages/FaqPage.tsx
@@ -2,13 +2,11 @@ import React from 'react'
 import { PageHero } from '../components/PageHero'
 import { Faq } from '../components/home/Faq'
 import { ContactSection } from '../components/ContactSection'
-import { usePageHero } from '../api'
 
 export function FaqPage() {
-  const hero = usePageHero('faq')
-  return (
+    return (
     <>
-      <PageHero title={hero.title} lead={hero.lead} image={hero.image} />
+      <PageHero pageKey="faq" />
 
       <Faq hideHeading={true} />
 
diff --git a/frontend/src/pages/Investment.tsx b/frontend/src/pages/Investment.tsx
index 79cf2b6..36786ae 100644
--- a/frontend/src/pages/Investment.tsx
+++ b/frontend/src/pages/Investment.tsx
@@ -4,16 +4,16 @@ import { Reveal } from '../components/Reveal'
 import { SectionHeading } from '../components/SectionHeading'
 import { Stats } from '../components/home/Stats'
 import { ContactSection } from '../components/ContactSection'
-import { usePageHero, useSectionHeading, useSite } from '../api'
+import { useSectionHeading, useSite } from '../api'
+import { AddItemButton, EditableItem } from '../admin/Editable'
 
 export function Investment() {
   const { investment_models } = useSite()
-  const hero = usePageHero('investment')
-  const heading = useSectionHeading('investment_models')
+    const heading = useSectionHeading('investment_models')
 
   return (
     <>
-      <PageHero title={hero.title} lead={hero.lead} image={hero.image} />
+      <PageHero pageKey="investment" />
 
       <section className="bg-ink py-24 lg:py-32" aria-labelledby="models-title">
         <div className="mx-auto max-w-site px-6 lg:px-10">
@@ -21,6 +21,7 @@ export function Investment() {
           <div className="mt-14 grid gap-6 lg:grid-cols-3">
             {investment_models.map((model, i) => (
               <Reveal key={model.id} delay={0.06 * i} className="h-full">
+                <EditableItem resource="investment_models" item={model} className="h-full">
                 <article className="group flex h-full flex-col border border-ivory/10 bg-char p-10 transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
                   <p className="text-sm font-bold text-copper/80">۰{(i + 1).toLocaleString('fa-IR')}</p>
 
@@ -41,8 +42,10 @@ export function Investment() {
                     </ul>
                   </div>
                 </article>
+                </EditableItem>
               </Reveal>
             ))}
+            <AddItemButton resource="investment_models" />
           </div>
         </div>
       </section>
diff --git a/frontend/src/pages/Projects.tsx b/frontend/src/pages/Projects.tsx
index 4fd2010..c492aa8 100644
--- a/frontend/src/pages/Projects.tsx
+++ b/frontend/src/pages/Projects.tsx
@@ -5,11 +5,24 @@ import { ProjectCard } from '../components/ProjectCard';
 import { Gallery } from '../components/home/Gallery';
 import { ContactSection } from '../components/ContactSection';
 import type { ProjectStatus } from '../data/site';
-import { usePageHero, useSite, useStatusLabel } from '../api';
+import { useSite, useStatusLabel } from '../api';
+import { useFieldSaver } from '../admin/AdminContext';
+import { InlineEdit } from '../components/admin/InlineEdit';
+import { AddItemButton, EditableItem } from '../admin/Editable';
 
 export function Projects() {
-  const { projects } = useSite();
-  const hero = usePageHero('projects');
+  const { projects, status_labels } = useSite();
+  const save = useFieldSaver();
+
+  const saveStatusLabel = (key: string, value: string) => {
+    const label = status_labels.find((s) => s.key === key);
+    if (!label) return;
+    void save('status-labels', label.id, { label: value }, (d) => {
+      const s = d.status_labels.find((x) => x.id === label.id);
+      if (s) s.label = value;
+    });
+  };
+
   const doneLabel = useStatusLabel('done');
   const progressLabel = useStatusLabel('progress');
   const FILTERS: {key: ProjectStatus;label: string;}[] = [
@@ -20,7 +33,7 @@ export function Projects() {
 
   return (
     <>
-      <PageHero title={hero.title} lead={hero.lead} image={hero.image} />
+      <PageHero pageKey="projects" />
       
 
       <section className="bg-ink py-24 lg:py-32" aria-label="فهرست پروژه‌ها">
@@ -46,7 +59,10 @@ export function Projects() {
 
               }
                 <span className="relative z-10 transition-colors duration-300 ease-lux group-hover:text-char">
-                  {filter.label}
+                  <InlineEdit
+                    value={filter.label}
+                    onSave={(v) => saveStatusLabel(filter.key, v)}
+                  />
                 </span>
               </button>
             )}
@@ -54,10 +70,13 @@ export function Projects() {
 
           <div className="mt-12 grid gap-6 lg:grid-cols-3">
             {list.map((project, i) =>
-            <Reveal key={project.slug} delay={0.05 * i} className="h-full">
-                <ProjectCard project={project} imageClass="h-80" />
+            <Reveal key={project.id} delay={0.05 * i} className="h-full">
+                <EditableItem resource="projects" item={project} className="h-full">
+                  <ProjectCard project={project} imageClass="h-80" />
+                </EditableItem>
               </Reveal>
             )}
+            <AddItemButton resource="projects" />
           </div>
         </div>
       </section>
diff --git a/frontend/src/pages/ServicesPage.tsx b/frontend/src/pages/ServicesPage.tsx
index b5aebda..acdeed5 100644
--- a/frontend/src/pages/ServicesPage.tsx
+++ b/frontend/src/pages/ServicesPage.tsx
@@ -5,16 +5,16 @@ import { Faq } from '../components/home/Faq'
 import { ContactSection } from '../components/ContactSection'
 import { Reveal } from '../components/Reveal'
 import { SectionHeading } from '../components/SectionHeading'
-import { usePageHero, useSectionHeading, useSite } from '../api'
+import { useSectionHeading, useSite } from '../api'
+import { AddItemButton, EditableItem } from '../admin/Editable'
 
 export function ServicesPage() {
   const { process_steps } = useSite()
-  const hero = usePageHero('services')
-  const heading = useSectionHeading('process')
+    const heading = useSectionHeading('process')
 
   return (
     <>
-      <PageHero title={hero.title} lead={hero.lead} image={hero.image} />
+      <PageHero pageKey="services" />
 
       <Services />
 
@@ -24,13 +24,16 @@ export function ServicesPage() {
           <div className="mt-14 grid gap-px bg-ivory/10 md:grid-cols-2 lg:grid-cols-4">
             {process_steps.map((item, i) => (
               <Reveal key={item.id} delay={0.06 * i} className="h-full">
+                <EditableItem resource="process_steps" item={item} className="h-full">
                 <div className="flex h-full flex-col justify-center bg-char px-6 py-14 text-center">
                   <p className="text-4xl font-bold text-copper">{item.step}</p>
                   <h3 className="mt-6 text-xl font-bold text-ivory">{item.title}</h3>
                   <p className="mt-4 text-base font-light leading-9 text-ivory/60">{item.desc}</p>
                 </div>
+                </EditableItem>
               </Reveal>
             ))}
+            <AddItemButton resource="process_steps" />
           </div>
         </div>
       </section>