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

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

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

README.md

@@ -2,18 +2,33 @@
 
 مونوریپوی سایت گروه ساختمانی آرامش شامل:
 
-- **`frontend/`** — سایت React + Vite + Tailwind (همه محتوا از API خوانده می‌شود)
-- **`backend/`** — بک‌اند FastAPI + SQLAlchemy 2 + PostgreSQL + JWT
+- **`frontend/`** — سایت React + Vite + Tailwind (تمام متن‌ها و تصاویر از API خوانده می‌شود)
+- **`backend/`** — بک‌اند FastAPI + SQLAlchemy 2 + PostgreSQL + JWT + MinIO
+
+## معماری
+
+```
+Traefik (پورت ۵۱۷۳ — تنها نقطه ورود)
+├── /         →  Caddy (فایل‌های استاتیک SPA)
+├── /api      →  FastAPI (بک‌اند)
+└── /media    →  MinIO (باکت aramesh-media — تصاویر آپلودی)
+```
+
+- **همه محتوای متنی سایت در PostgreSQL است** — هیچ متنی در کد فرانت‌اند هاردکد نشده؛
+  با یک درخواست `GET /api/site` بارگذاری و از پنل مدیریت ویرایش می‌شود
+- **تصاویر آپلودی در MinIO** (Object Storage سازگار با S3) ذخیره می‌شوند و با مسیر نسبی
+  `/media/...` برگردانده می‌شوند — بک‌اند ذخیره‌سازی بدون تغییر محتوای دیتابیس قابل تعویض است
+- مسیریابی همه‌چیز روی **Traefik** است (با Docker labels) — nginx در پروژه وجود ندارد
 
 ## ساختار
 
 ```
 ├── frontend/             # سایت React
 │   ├── src/              # کد منبع (api.tsx = لایه اتصال به بک‌اند)
-│   ├── Dockerfile        # بیلد Node + سرو با nginx
-│   └── nginx.conf        # پروکسی /api به بک‌اند
+│   ├── Dockerfile        # بیلد Node + سرو استاتیک با Caddy
+│   └── Caddyfile         # فقط سرو فایل‌های استاتیک (مسیریابی روی Traefik است)
 ├── backend/              # بک‌اند FastAPI
-│   ├── app/              # کد منبع
+│   ├── app/              # کد منبع (آپلود تصویر: app/api/admin.py)
 │   ├── requirements.txt
 │   ├── Dockerfile
 │   └── .env.example
@@ -26,11 +41,13 @@
 docker compose up --build
 ```
 
-- سایت: http://localhost:5173
-- مستندات API: http://localhost:8000/docs
-- دیتابیس PostgreSQL در کانتینر جدا (داده‌ها در volume ذخیره می‌شوند)
-- بک‌اند هنگام شروع، خودش جداول و داده‌های اولیه سایت را seed می‌کند
-- nginx درخواست‌های `/api` را خودش به بک‌اند پروکسی می‌کند — نیازی به تنظیم CORS نیست
+- سایت: http://localhost:5173 (از طریق Traefik)
+- مستندات API: http://localhost:8001/docs (با `docker-compose.override.yml` محلی)
+- کنسول MinIO: http://localhost:9001 — کاربر/رمز از متغیرهای `MINIO_ROOT_*` در compose
+- دیتابیس PostgreSQL و آبجکت‌استور MinIO هر دو در کانتینر جدا با volume دائمی
+- بک‌اند هنگام شروع، خودش جداول را می‌سازد و **فقط جدول‌های خالی** را seed می‌کند —
+  ارتقای نسخه داده‌های فعلی را از بین نمی‌برد
+- در اولین اجرا، سرویس `minio-setup` باکت `aramesh-media` را می‌سازد و خواندن عمومی را فعال می‌کند
 
 ## اجرای محلی (توسعه)
 
@@ -52,23 +69,29 @@ uvicorn app.main:app --reload
 ```bash
 cd frontend
 npm install
-npm run dev                   # http://localhost:5173
+npm run dev
 ```
 
-آدرس بک‌اند در `frontend/src/config.ts` از `VITE_API_URL` خوانده می‌شود؛
-اگر تنظیم نشود پیش‌فرض `http://localhost:8000` است.
+در حالت توسعه، Vite درخواست‌های `/api` و `/media` را به Traefik (پورت ۵۱۷۳) پروکسی می‌کند؛
+پس استک Docker باید در حال اجرا باشد. آدرس بک‌اند در `frontend/src/config.ts` از
+`VITE_API_URL` خوانده می‌شود — پیش‌فرض خالی یعنی درخواست‌های هم‌مبدأ.
 
 ## امکانات بک‌اند
 
-- **API عمومی**: برند، خدمات، پروژه‌ها، مقالات، نظرات، سوالات متداول، تیم، تایم‌لاین، آمار و...
+- **API عمومی**: برند، منو، هیرو، خدمات، پروژه‌ها، مقالات، نظرات، سوالات متداول، تیم،
+  تایم‌لاین، آمار، دفاتر، مدل‌های سرمایه‌گذاری و... — همه در دیتابیس
 - **فرم تماس** `POST /api/contact` و **خبرنامه** `POST /api/newsletter`
-- **پنل مدیریت** با JWT: ورود `POST /api/auth/login` (پیش‌فرض: `admin` / `aramesh123`) و سپس CRUD کامل همه محتواها در `/api/admin/...`
+- **پنل مدیریت** با JWT: ورود `POST /api/auth/login` (پیش‌فرض: `admin` / `aramesh123`)
+  و سپس CRUD کامل همه محتواها در `/api/admin/...`
+- **آپلود تصویر** `POST /api/admin/upload` (فقط توکن ادمین، حداکثر ۱۰MB) — فایل در MinIO
+  ذخیره و URL نسبی `/media/...` برمی‌گردد
 - همه محتوا در یک درخواست: `GET /api/site`
 
-> در محیط واقعی حتماً `SECRET_KEY` و `ADMIN_PASSWORD` را تغییر دهید.
+> در محیط واقعی حتماً `SECRET_KEY`، `ADMIN_PASSWORD` و `MINIO_ROOT_PASSWORD` را تغییر دهید.
 
 ## نکات امنیتی
 
 - فایل `.env` هرگز commit نمی‌شود (در `.gitignore` است)
 - رمز عبور ادمین با bcrypt هش می‌شود
 - توکن‌های JWT امضا دارند و مدت اعتبارشان قابل تنظیم است
+- تصاویر باکت MinIO عمومی (فقط خواندن) هستند؛ آپلود فقط با توکن ادمین ممکن است

backend/.env.example

@@ -15,3 +15,15 @@ CORS_ORIGINS=["http://localhost:5173","http://127.0.0.1:5173"]
 # مشخصات ادمین پیش‌فرض که هنگام seed ساخته می‌شود
 ADMIN_USERNAME=admin
 ADMIN_PASSWORD=aramesh123
+
+# Object Storage (MinIO) برای آپلود تصاویر پنل مدیریت
+S3_ENDPOINT=http://localhost:9000
+S3_ACCESS_KEY=aramesh
+S3_SECRET_KEY=change-me-minio-secret
+S3_BUCKET=aramesh-media
+
+# پیشوند عمومی مسیر تصاویر — پروکسی Reverse باید آن را به باکت برساند
+MEDIA_PUBLIC_BASE=/media
+
+# حداکثر حجم آپلود تصویر (مگابایت)
+MEDIA_MAX_UPLOAD_MB=10

backend/README.md

@@ -1,14 +1,15 @@
 # بک‌اند گروه ساختمانی آرامش (Aramesh Building Group API)
 
-بک‌اند سایت گروه ساختمانی آرامش — ساخته‌شده با **FastAPI** + **PostgreSQL** + **SQLAlchemy 2** + **JWT**.
+بک‌اند سایت گروه ساختمانی آرامش — ساخته‌شده با **FastAPI** + **PostgreSQL** + **SQLAlchemy 2** + **JWT** + **MinIO** (ذخیره تصاویر) + **Traefik** (مسیریابی).
 
 ## امکانات
 
-- **API عمومی محتوا**: برند، خدمات، پروژه‌ها، مقالات، نظرات مشتریان، سوالات متداول، تیم، تایم‌لاین، آمار، چرا آرامش، و بخش قبل/بعد
+- **API عمومی محتوا**: برند، منو، هیرو، داستان، تیتر بخش‌ها، هیرو صفحات، خدمات، پروژه‌ها، مقالات، نظرات مشتریان، سوالات متداول، تیم، تایم‌لاین، آمار، چرا آرامش، قبل/بعد، مدل‌های سرمایه‌گذاری، مراحل کار، دفاتر، گالری، فرم تماس، خبرنامه و فوتر — **تمام متن‌های سایت در دیتابیس است**
 - **فرم تماس**: ثبت پیام مشتریان از سایت (`POST /api/contact`)
 - **خبرنامه**: عضویت و مدیریت مشترکین (`POST /api/newsletter`)
 - **پنل مدیریت**: ورود با نام کاربری/رمز عبور و دریافت توکن JWT، سپس CRUD کامل همه محتواها، مدیریت پیام‌های تماس و مشترکین
-- **Seed خودکار**: همه محتوای فعلی سایت با یک دستور در دیتابیس قرار می‌گیرد
+- **آپلود تصویر**: `POST /api/admin/upload` — فایل در MinIO ذخیره و URL نسبی `/media/...` برمی‌گردد
+- **Seed خودکار**: همه محتوای فعلی سایت با یک دستور در دیتابیس قرار می‌گیرد (فقط جدول‌های خالی پر می‌شوند — ارتقا بدون از دست رفتن داده)
 - مستندات تعاملی Swagger در مسیر `/docs`
 
 ## راه‌اندازی
@@ -124,6 +125,14 @@ Authorization: Bearer <access_token>
 | DELETE | `/api/admin/messages/{id}` | حذف پیام |
 | GET | `/api/admin/subscribers` | مشترکین خبرنامه |
 | DELETE | `/api/admin/subscribers/{id}` | حذف مشترک |
+| POST | `/api/admin/upload` | آپلود تصویر (multipart، حداکثر ۱۰MB — jpg/png/webp/gif/avif) → `{"url": "/media/..."}` |
+
+### تصاویر و MinIO
+
+فایل‌های آپلودشده در باکت `aramesh-media` روی MinIO ذخیره می‌شوند و با مسیر نسبی `/media/<سال>/<ماه>/<فایل>` برگردانده می‌شوند. Traefik مسیر `/media` را به MinIO می‌برد، پس URLها مستقل از بک‌اند ذخیره‌سازی هستند — بعداً برای مهاجرت به R2/S3 فقط تنظیمات را عوض کنید، نه محتوای دیتابیس را.
+
+- کنسول MinIO: `http://localhost:9001` (کاربر/رمز از `MINIO_ROOT_USER` / `MINIO_ROOT_PASSWORD` در compose)
+- تصاویر عمومی و قابل نمایش‌اند؛ آپلود فقط با توکن ادمین انجام می‌شود.
 
 ## اتصال به فرانت‌اند
 

backend/app/api/admin.py

@@ -1,40 +1,97 @@
 """انتهای پنل مدیریت — همه مسیرها نیازمند توکن JWT معتبر هستند."""
 
-from fastapi import APIRouter, Depends, HTTPException, status
+import uuid
+from datetime import datetime, timezone
+
+import boto3
+from fastapi import APIRouter, Depends, File, HTTPException, UploadFile, status
+from sqlalchemy import func
 from sqlalchemy.exc import IntegrityError
 from sqlalchemy.orm import Session
 
 from .. import models, schemas
 from ..auth import create_access_token, get_current_admin, verify_password
+from ..config import settings
 from ..database import get_db
 from ..schemas import (
     ArticleIn,
     ArticleOut,
+    ArticlePatch,
     BeforeAfterIn,
     BeforeAfterOut,
+    BeforeAfterPatch,
     BrandIn,
     BrandOut,
+    BrandPatch,
+    ContactSectionIn,
+    ContactSectionOut,
+    ContactSectionPatch,
     ContactMessageOut,
     FaqIn,
     FaqOut,
+    FaqPatch,
+    FooterIn,
+    FooterOut,
+    FooterPatch,
+    GalleryImageIn,
+    GalleryImageOut,
+    GalleryImagePatch,
+    HeroIn,
+    HeroOut,
+    HeroPatch,
+    InvestmentModelIn,
+    InvestmentModelOut,
+    InvestmentModelPatch,
     LoginIn,
     MessageReadIn,
+    NavItemIn,
+    NavItemOut,
+    NavItemPatch,
+    NewsletterSectionIn,
+    NewsletterOut,
+    NewsletterSectionPatch,
+    OfficeIn,
+    OfficeOut,
+    OfficePatch,
+    PageHeroIn,
+    PageHeroOut,
+    PageHeroPatch,
+    ProcessStepIn,
+    ProcessStepOut,
+    ProcessStepPatch,
     ProjectIn,
     ProjectOut,
+    ProjectPatch,
+    ReorderIn,
+    SectionHeadingIn,
+    SectionHeadingOut,
+    SectionHeadingPatch,
     ServiceIn,
     ServiceOut,
+    ServicePatch,
     StatIn,
     StatOut,
+    StatPatch,
+    StatusLabelIn,
+    StatusLabelOut,
+    StatusLabelPatch,
+    StoryIn,
+    StoryOut,
+    StoryPatch,
     SubscriberOut,
     TeamMemberIn,
     TeamMemberOut,
+    TeamMemberPatch,
     TestimonialIn,
     TestimonialOut,
+    TestimonialPatch,
     TimelineItemIn,
     TimelineItemOut,
+    TimelineItemPatch,
     TokenOut,
     WhyUsItemIn,
     WhyUsItemOut,
+    WhyUsItemPatch,
 )
 
 # روتر عمومی برای ورود — بدون نیاز به توکن
@@ -55,16 +112,25 @@ def login(payload: LoginIn, db: Session = Depends(get_db)):
     return TokenOut(access_token=create_access_token(user.username))
 
 
-def register_crud(path: str, model, out_schema, create_schema) -> None:
-    """ثبت پنج مسیر CRUD استاندارد (لیست، ساخت، دریافت، ویرایش، حذف) روی روتر مدیریت."""
+def register_crud(path: str, model, out_schema, create_schema, patch_schema=None) -> None:
+    """ثبت مسیرهای استاندارد CRUD (لیست، ساخت، دریافت، ویرایش کامل، ویرایش جزئی،
+    حذف و ترتیب‌بندی) روی روتر مدیریت."""
 
     @router.get(f"/{path}", response_model=list[out_schema])
     def list_items(db: Session = Depends(get_db)):
-        return db.query(model).order_by(model.id).all()
+        query = db.query(model)
+        if hasattr(model, "position"):
+            query = query.order_by(model.position, model.id)
+        else:
+            query = query.order_by(model.id)
+        return query.all()
 
     @router.post(f"/{path}", response_model=out_schema, status_code=201)
     def create_item(payload: create_schema, db: Session = Depends(get_db)):
         item = model(**payload.model_dump())
+        if hasattr(model, "position"):
+            # آیتم جدید در انتهای لیست قرار می‌گیرد
+            item.position = (db.query(func.max(model.position)).scalar() or 0) + 1
         db.add(item)
         try:
             db.commit()
@@ -96,6 +162,38 @@ def register_crud(path: str, model, out_schema, create_schema) -> None:
         db.refresh(item)
         return item
 
+    if patch_schema is not None:
+
+        @router.patch(f"/{path}/{{item_id}}", response_model=out_schema)
+        def patch_item(item_id: int, payload: patch_schema, db: Session = Depends(get_db)):
+            """ویرایش جزئی — فقط فیلدهای ارسال‌شده به‌روزرسانی می‌شوند (برای ویرایش زنده)."""
+            item = db.get(model, item_id)
+            if item is None:
+                raise HTTPException(status_code=404, detail="رکورد یافت نشد")
+            for key, value in payload.model_dump(exclude_unset=True).items():
+                setattr(item, key, value)
+            try:
+                db.commit()
+            except IntegrityError:
+                db.rollback()
+                raise HTTPException(status_code=409, detail="رکوردی با این مقدار تکراری وجود دارد (مثلاً slug یا ایمیل)")
+            db.refresh(item)
+            return item
+
+    @router.post(f"/{path}/reorder", response_model=list[out_schema])
+    def reorder_items(payload: ReorderIn, db: Session = Depends(get_db)):
+        """ذخیره ترتیب جدید آیتم‌ها بر اساس لیست idهای ارسالی."""
+        if not hasattr(model, "position"):
+            raise HTTPException(status_code=400, detail="این منبع از ترتیب‌بندی پشتیبانی نمی‌کند")
+        items = db.query(model).filter(model.id.in_(payload.ids)).all()
+        if len(items) != len(payload.ids):
+            raise HTTPException(status_code=404, detail="برخی رکوردها یافت نشدند")
+        by_id = {item.id: item for item in items}
+        for pos, item_id in enumerate(payload.ids):
+            by_id[item_id].position = pos
+        db.commit()
+        return db.query(model).order_by(model.position, model.id).all()
+
     @router.delete(f"/{path}/{{item_id}}", status_code=204)
     def delete_item(item_id: int, db: Session = Depends(get_db)):
         item = db.get(model, item_id)
@@ -106,17 +204,86 @@ def register_crud(path: str, model, out_schema, create_schema) -> None:
 
 
 # CRUD محتوا
-register_crud("brand", models.Brand, BrandOut, BrandIn)
-register_crud("services", models.Service, ServiceOut, ServiceIn)
-register_crud("projects", models.Project, ProjectOut, ProjectIn)
-register_crud("articles", models.Article, ArticleOut, ArticleIn)
-register_crud("testimonials", models.Testimonial, TestimonialOut, TestimonialIn)
-register_crud("faqs", models.Faq, FaqOut, FaqIn)
-register_crud("team", models.TeamMember, TeamMemberOut, TeamMemberIn)
-register_crud("timeline", models.TimelineItem, TimelineItemOut, TimelineItemIn)
-register_crud("stats", models.Stat, StatOut, StatIn)
-register_crud("why-us", models.WhyUsItem, WhyUsItemOut, WhyUsItemIn)
-register_crud("before-after", models.BeforeAfter, BeforeAfterOut, BeforeAfterIn)
+register_crud("brand", models.Brand, BrandOut, BrandIn, BrandPatch)
+register_crud("nav", models.NavItem, NavItemOut, NavItemIn, NavItemPatch)
+register_crud("hero", models.Hero, HeroOut, HeroIn, HeroPatch)
+register_crud("story", models.StorySection, StoryOut, StoryIn, StoryPatch)
+register_crud("section-headings", models.SectionHeadingContent, SectionHeadingOut, SectionHeadingIn, SectionHeadingPatch)
+register_crud("page-heroes", models.PageHeroContent, PageHeroOut, PageHeroIn, PageHeroPatch)
+register_crud("services", models.Service, ServiceOut, ServiceIn, ServicePatch)
+register_crud("projects", models.Project, ProjectOut, ProjectIn, ProjectPatch)
+register_crud("articles", models.Article, ArticleOut, ArticleIn, ArticlePatch)
+register_crud("testimonials", models.Testimonial, TestimonialOut, TestimonialIn, TestimonialPatch)
+register_crud("faqs", models.Faq, FaqOut, FaqIn, FaqPatch)
+register_crud("team", models.TeamMember, TeamMemberOut, TeamMemberIn, TeamMemberPatch)
+register_crud("timeline", models.TimelineItem, TimelineItemOut, TimelineItemIn, TimelineItemPatch)
+register_crud("stats", models.Stat, StatOut, StatIn, StatPatch)
+register_crud("why-us", models.WhyUsItem, WhyUsItemOut, WhyUsItemIn, WhyUsItemPatch)
+register_crud("before-after", models.BeforeAfter, BeforeAfterOut, BeforeAfterIn, BeforeAfterPatch)
+register_crud("investment-models", models.InvestmentModel, InvestmentModelOut, InvestmentModelIn, InvestmentModelPatch)
+register_crud("process-steps", models.ProcessStep, ProcessStepOut, ProcessStepIn, ProcessStepPatch)
+register_crud("offices", models.Office, OfficeOut, OfficeIn, OfficePatch)
+register_crud("gallery", models.GalleryImage, GalleryImageOut, GalleryImageIn, GalleryImagePatch)
+register_crud("status-labels", models.StatusLabel, StatusLabelOut, StatusLabelIn, StatusLabelPatch)
+register_crud("contact-section", models.ContactSectionContent, ContactSectionOut, ContactSectionIn, ContactSectionPatch)
+register_crud("newsletter", models.NewsletterSectionContent, NewsletterOut, NewsletterSectionIn, NewsletterSectionPatch)
+register_crud("footer", models.FooterContent, FooterOut, FooterIn, FooterPatch)
+
+
+# آپلود تصویر به Object Storage (MinIO) — URL نسبی برمی‌گرداند تا بک‌اند ذخیره‌سازی قابل تعویض باشد
+ALLOWED_IMAGE_TYPES = {
+    "image/jpeg": "jpg",
+    "image/png": "png",
+    "image/webp": "webp",
+    "image/gif": "gif",
+    "image/avif": "avif",
+}
+
+
+@router.post("/upload")
+async def upload_media(
+    file: UploadFile = File(...),
+    _admin: models.AdminUser = Depends(get_current_admin),
+):
+    content_type = (file.content_type or "").lower()
+    ext = ALLOWED_IMAGE_TYPES.get(content_type)
+    if ext is None:
+        raise HTTPException(
+            status_code=415,
+            detail="فرمت فایل پشتیبانی نمی‌شود (مجاز: jpg، png، webp، gif، avif)",
+        )
+
+    max_bytes = settings.media_max_upload_mb * 1024 * 1024
+    data = await file.read()
+    if len(data) == 0:
+        raise HTTPException(status_code=400, detail="فایل خالی است")
+    if len(data) > max_bytes:
+        raise HTTPException(
+            status_code=413,
+            detail=f"حجم فایل بیش از {settings.media_max_upload_mb} مگابایت است",
+        )
+
+    now = datetime.now(timezone.utc)
+    key = f"{now:%Y/%m}/{uuid.uuid4().hex}.{ext}"
+
+    s3 = boto3.client(
+        "s3",
+        endpoint_url=settings.s3_endpoint,
+        aws_access_key_id=settings.s3_access_key,
+        aws_secret_access_key=settings.s3_secret_key,
+        region_name="us-east-1",
+    )
+    try:
+        s3.put_object(Bucket=settings.s3_bucket, Key=key, Body=data, ContentType=content_type)
+    except Exception:
+        raise HTTPException(status_code=502, detail="ذخیره فایل در Object Storage ناموفق بود")
+
+    return {
+        "url": f"{settings.media_public_base}/{key}",
+        "key": key,
+        "size": len(data),
+        "content_type": content_type,
+    }
 
 
 # پیام‌های تماس

backend/app/api/public.py

@@ -37,12 +37,12 @@ def get_brand(db: Session = Depends(get_db)):
 
 @router.get("/services", response_model=list[ServiceOut])
 def get_services(db: Session = Depends(get_db)):
-    return db.query(models.Service).all()
+    return db.query(models.Service).order_by(models.Service.position, models.Service.id).all()
 
 
 @router.get("/projects", response_model=list[ProjectOut])
 def get_projects(db: Session = Depends(get_db)):
-    return db.query(models.Project).order_by(models.Project.id).all()
+    return db.query(models.Project).order_by(models.Project.position, models.Project.id).all()
 
 
 @router.get("/projects/{slug}", response_model=ProjectOut)
@@ -55,7 +55,7 @@ def get_project(slug: str, db: Session = Depends(get_db)):
 
 @router.get("/articles", response_model=list[ArticleOut])
 def get_articles(db: Session = Depends(get_db)):
-    return db.query(models.Article).order_by(models.Article.id).all()
+    return db.query(models.Article).order_by(models.Article.position, models.Article.id).all()
 
 
 @router.get("/articles/{slug}", response_model=ArticleOut)
@@ -68,32 +68,32 @@ def get_article(slug: str, db: Session = Depends(get_db)):
 
 @router.get("/testimonials", response_model=list[TestimonialOut])
 def get_testimonials(db: Session = Depends(get_db)):
-    return db.query(models.Testimonial).all()
+    return db.query(models.Testimonial).order_by(models.Testimonial.position, models.Testimonial.id).all()
 
 
 @router.get("/faqs", response_model=list[FaqOut])
 def get_faqs(db: Session = Depends(get_db)):
-    return db.query(models.Faq).all()
+    return db.query(models.Faq).order_by(models.Faq.position, models.Faq.id).all()
 
 
 @router.get("/team", response_model=list[TeamMemberOut])
 def get_team(db: Session = Depends(get_db)):
-    return db.query(models.TeamMember).all()
+    return db.query(models.TeamMember).order_by(models.TeamMember.position, models.TeamMember.id).all()
 
 
 @router.get("/timeline", response_model=list[TimelineItemOut])
 def get_timeline(db: Session = Depends(get_db)):
-    return db.query(models.TimelineItem).order_by(models.TimelineItem.id).all()
+    return db.query(models.TimelineItem).order_by(models.TimelineItem.position, models.TimelineItem.id).all()
 
 
 @router.get("/stats", response_model=list[StatOut])
 def get_stats(db: Session = Depends(get_db)):
-    return db.query(models.Stat).all()
+    return db.query(models.Stat).order_by(models.Stat.position, models.Stat.id).all()
 
 
 @router.get("/why-us", response_model=list[WhyUsItemOut])
 def get_why_us(db: Session = Depends(get_db)):
-    return db.query(models.WhyUsItem).all()
+    return db.query(models.WhyUsItem).order_by(models.WhyUsItem.position, models.WhyUsItem.id).all()
 
 
 @router.get("/before-after", response_model=BeforeAfterOut)
@@ -109,14 +109,27 @@ def get_site(db: Session = Depends(get_db)):
     """همه محتوای سایت در یک درخواست — مناسب برای بارگذاری اولیه فرانت‌اند."""
     return {
         "brand": db.query(models.Brand).first(),
-        "services": db.query(models.Service).all(),
-        "projects": db.query(models.Project).order_by(models.Project.id).all(),
-        "articles": db.query(models.Article).order_by(models.Article.id).all(),
-        "testimonials": db.query(models.Testimonial).all(),
-        "faqs": db.query(models.Faq).all(),
-        "team": db.query(models.TeamMember).all(),
-        "timeline": db.query(models.TimelineItem).order_by(models.TimelineItem.id).all(),
-        "stats": db.query(models.Stat).all(),
-        "why_us": db.query(models.WhyUsItem).all(),
+        "nav": db.query(models.NavItem).order_by(models.NavItem.position, models.NavItem.id).all(),
+        "hero": db.query(models.Hero).first(),
+        "story": db.query(models.StorySection).first(),
+        "section_headings": db.query(models.SectionHeadingContent).order_by(models.SectionHeadingContent.id).all(),
+        "page_heroes": db.query(models.PageHeroContent).order_by(models.PageHeroContent.id).all(),
+        "services": db.query(models.Service).order_by(models.Service.position, models.Service.id).all(),
+        "projects": db.query(models.Project).order_by(models.Project.position, models.Project.id).all(),
+        "articles": db.query(models.Article).order_by(models.Article.position, models.Article.id).all(),
+        "testimonials": db.query(models.Testimonial).order_by(models.Testimonial.position, models.Testimonial.id).all(),
+        "faqs": db.query(models.Faq).order_by(models.Faq.position, models.Faq.id).all(),
+        "team": db.query(models.TeamMember).order_by(models.TeamMember.position, models.TeamMember.id).all(),
+        "timeline": db.query(models.TimelineItem).order_by(models.TimelineItem.position, models.TimelineItem.id).all(),
+        "stats": db.query(models.Stat).order_by(models.Stat.position, models.Stat.id).all(),
+        "why_us": db.query(models.WhyUsItem).order_by(models.WhyUsItem.position, models.WhyUsItem.id).all(),
         "before_after": db.query(models.BeforeAfter).first(),
+        "investment_models": db.query(models.InvestmentModel).order_by(models.InvestmentModel.position, models.InvestmentModel.id).all(),
+        "process_steps": db.query(models.ProcessStep).order_by(models.ProcessStep.position, models.ProcessStep.id).all(),
+        "offices": db.query(models.Office).order_by(models.Office.position, models.Office.id).all(),
+        "gallery": db.query(models.GalleryImage).order_by(models.GalleryImage.position, models.GalleryImage.id).all(),
+        "status_labels": db.query(models.StatusLabel).order_by(models.StatusLabel.id).all(),
+        "contact_section": db.query(models.ContactSectionContent).first(),
+        "newsletter": db.query(models.NewsletterSectionContent).first(),
+        "footer": db.query(models.FooterContent).first(),
     }

backend/app/config.py

@@ -18,5 +18,14 @@ class Settings(BaseSettings):
     admin_username: str = "admin"
     admin_password: str = "aramesh123"
 
+    # Object Storage (MinIO / هر S3 سازگار) برای آپلود تصاویر
+    s3_endpoint: str = "http://localhost:9000"
+    s3_access_key: str = "aramesh"
+    s3_secret_key: str = "aramesh-minio-secret"
+    s3_bucket: str = "aramesh-media"
+    # پیشوند عمومی مسیر تصاویر — nginx آن را به باکت پروکسی می‌کند
+    media_public_base: str = "/media"
+    media_max_upload_mb: int = 10
+
 
 settings = Settings()

backend/app/database.py

@@ -1,4 +1,4 @@
-from sqlalchemy import create_engine
+from sqlalchemy import create_engine, text
 from sqlalchemy.orm import DeclarativeBase, sessionmaker
 
 from .config import settings
@@ -18,3 +18,23 @@ def get_db():
         yield db
     finally:
         db.close()
+
+
+# جدول‌های مجموعه‌ای که ستون position دارند
+POSITION_TABLES = [
+    "services", "projects", "articles", "testimonials", "faqs", "team",
+    "timeline", "stats", "why_us", "investment_models", "process_steps",
+    "offices", "gallery_images", "nav_items",
+]
+
+
+def run_light_migrations() -> None:
+    """مهاجرت‌های سبک idempotent — برای دیتابیس‌های موجود که create_all آن‌ها را
+    به‌روز نمی‌کند اجرا می‌شود (seed و startup هر دو آن را صدا می‌زنند)."""
+    if engine.dialect.name != "postgresql":
+        return
+    with engine.begin() as conn:
+        for table in POSITION_TABLES:
+            conn.execute(
+                text(f"ALTER TABLE {table} ADD COLUMN IF NOT EXISTS position INTEGER NOT NULL DEFAULT 0")
+            )

backend/app/main.py

@@ -4,9 +4,10 @@ from fastapi.middleware.cors import CORSMiddleware
 from . import models  # noqa: F401 — ثبت مدل‌ها پیش از ساخت جداول
 from .api import admin, forms, public
 from .config import settings
-from .database import Base, engine
+from .database import Base, engine, run_light_migrations
 
 Base.metadata.create_all(bind=engine)
+run_light_migrations()
 
 app = FastAPI(
     title="Aramesh Building Group API",

backend/app/models.py

@@ -35,6 +35,8 @@ class Brand(Base):
 class Service(Base):
     __tablename__ = "services"
 
+    position: Mapped[int] = mapped_column(Integer, default=0)
+
     id: Mapped[int] = mapped_column(primary_key=True)
     title: Mapped[str] = mapped_column(String(256))
     desc: Mapped[str] = mapped_column(Text, default="")
@@ -44,6 +46,8 @@ class Service(Base):
 class Project(Base):
     __tablename__ = "projects"
 
+    position: Mapped[int] = mapped_column(Integer, default=0)
+
     id: Mapped[int] = mapped_column(primary_key=True)
     slug: Mapped[str] = mapped_column(String(128), unique=True, index=True)
     title: Mapped[str] = mapped_column(String(256))
@@ -63,6 +67,8 @@ class Project(Base):
 class Article(Base):
     __tablename__ = "articles"
 
+    position: Mapped[int] = mapped_column(Integer, default=0)
+
     id: Mapped[int] = mapped_column(primary_key=True)
     slug: Mapped[str] = mapped_column(String(128), unique=True, index=True)
     title: Mapped[str] = mapped_column(String(256))
@@ -77,6 +83,8 @@ class Article(Base):
 class Testimonial(Base):
     __tablename__ = "testimonials"
 
+    position: Mapped[int] = mapped_column(Integer, default=0)
+
     id: Mapped[int] = mapped_column(primary_key=True)
     name: Mapped[str] = mapped_column(String(128))
     role: Mapped[str] = mapped_column(String(128), default="")
@@ -86,6 +94,8 @@ class Testimonial(Base):
 class Faq(Base):
     __tablename__ = "faqs"
 
+    position: Mapped[int] = mapped_column(Integer, default=0)
+
     id: Mapped[int] = mapped_column(primary_key=True)
     question: Mapped[str] = mapped_column(Text)
     answer: Mapped[str] = mapped_column(Text, default="")
@@ -94,6 +104,8 @@ class Faq(Base):
 class TeamMember(Base):
     __tablename__ = "team"
 
+    position: Mapped[int] = mapped_column(Integer, default=0)
+
     id: Mapped[int] = mapped_column(primary_key=True)
     name: Mapped[str] = mapped_column(String(128))
     role: Mapped[str] = mapped_column(String(128), default="")
@@ -103,6 +115,8 @@ class TeamMember(Base):
 class TimelineItem(Base):
     __tablename__ = "timeline"
 
+    position: Mapped[int] = mapped_column(Integer, default=0)
+
     id: Mapped[int] = mapped_column(primary_key=True)
     year: Mapped[str] = mapped_column(String(32))
     title: Mapped[str] = mapped_column(String(256))
@@ -113,6 +127,8 @@ class TimelineItem(Base):
 class Stat(Base):
     __tablename__ = "stats"
 
+    position: Mapped[int] = mapped_column(Integer, default=0)
+
     id: Mapped[int] = mapped_column(primary_key=True)
     value: Mapped[int] = mapped_column(Integer)
     suffix: Mapped[str] = mapped_column(String(16), default="")
@@ -122,6 +138,8 @@ class Stat(Base):
 class WhyUsItem(Base):
     __tablename__ = "why_us"
 
+    position: Mapped[int] = mapped_column(Integer, default=0)
+
     id: Mapped[int] = mapped_column(primary_key=True)
     title: Mapped[str] = mapped_column(String(256))
     desc: Mapped[str] = mapped_column(Text, default="")
@@ -139,6 +157,189 @@ class BeforeAfter(Base):
     after_label: Mapped[str] = mapped_column(String(128), default="")
 
 
+class NavItem(Base):
+    __tablename__ = "nav_items"
+
+    position: Mapped[int] = mapped_column(Integer, default=0)
+
+    id: Mapped[int] = mapped_column(primary_key=True)
+    label: Mapped[str] = mapped_column(String(64))
+    href: Mapped[str] = mapped_column(String(128))
+
+
+class Hero(Base):
+    """محتوای هیرو صفحه اصلی — رکورد یگانه."""
+
+    __tablename__ = "hero"
+
+    id: Mapped[int] = mapped_column(primary_key=True)
+    kicker: Mapped[str] = mapped_column(Text, default="")
+    title: Mapped[str] = mapped_column(Text, default="")
+    title_highlight: Mapped[str] = mapped_column(String(128), default="")
+    subtitle: Mapped[str] = mapped_column(Text, default="")
+    badge_value: Mapped[str] = mapped_column(String(32), default="")
+    badge_label: Mapped[str] = mapped_column(Text, default="")
+    cta_primary_label: Mapped[str] = mapped_column(String(128), default="")
+    cta_primary_href: Mapped[str] = mapped_column(String(128), default="")
+    cta_secondary_label: Mapped[str] = mapped_column(String(128), default="")
+    cta_secondary_href: Mapped[str] = mapped_column(String(128), default="")
+    scroll_label: Mapped[str] = mapped_column(String(64), default="")
+
+
+class StorySection(Base):
+    """بخش «درباره ما» در خانه و صفحه درباره — رکورد یگانه."""
+
+    __tablename__ = "story"
+
+    id: Mapped[int] = mapped_column(primary_key=True)
+    title: Mapped[str] = mapped_column(String(256), default="")
+    paragraphs: Mapped[list] = mapped_column(JSON, default=list)
+    quote: Mapped[str] = mapped_column(Text, default="")
+    quote_author: Mapped[str] = mapped_column(Text, default="")
+    stat1_value: Mapped[str] = mapped_column(String(32), default="")
+    stat1_label: Mapped[str] = mapped_column(String(128), default="")
+    stat2_value: Mapped[str] = mapped_column(String(32), default="")
+    stat2_label: Mapped[str] = mapped_column(String(128), default="")
+    link_label: Mapped[str] = mapped_column(String(128), default="")
+    link_href: Mapped[str] = mapped_column(String(128), default="")
+    bento: Mapped[list] = mapped_column(JSON, default=list)  # [{src, alt}]
+
+
+class SectionHeadingContent(Base):
+    """تیتر و توضیح بخش‌ها — فرانت‌اند بر اساس key آن را پیدا می‌کند."""
+
+    __tablename__ = "section_headings"
+
+    id: Mapped[int] = mapped_column(primary_key=True)
+    key: Mapped[str] = mapped_column(String(64), unique=True, index=True)
+    label: Mapped[str] = mapped_column(String(64), default="")
+    title: Mapped[str] = mapped_column(String(256), default="")
+    lead: Mapped[str] = mapped_column(Text, default="")
+    image: Mapped[str] = mapped_column(Text, default="")
+    cta_label: Mapped[str] = mapped_column(String(128), default="")
+    cta_href: Mapped[str] = mapped_column(String(128), default="")
+
+
+class PageHeroContent(Base):
+    """هیرو بالای هر صفحه — key: about | services | projects | investment | blog | faq | contact."""
+
+    __tablename__ = "page_heroes"
+
+    id: Mapped[int] = mapped_column(primary_key=True)
+    key: Mapped[str] = mapped_column(String(32), unique=True, index=True)
+    title: Mapped[str] = mapped_column(String(256), default="")
+    lead: Mapped[str] = mapped_column(Text, default="")
+    image: Mapped[str] = mapped_column(Text, default="")
+
+
+class InvestmentModel(Base):
+    __tablename__ = "investment_models"
+
+    position: Mapped[int] = mapped_column(Integer, default=0)
+
+    id: Mapped[int] = mapped_column(primary_key=True)
+    title: Mapped[str] = mapped_column(String(256))
+    desc: Mapped[str] = mapped_column(Text, default="")
+    points: Mapped[list] = mapped_column(JSON, default=list)
+
+
+class ProcessStep(Base):
+    __tablename__ = "process_steps"
+
+    position: Mapped[int] = mapped_column(Integer, default=0)
+
+    id: Mapped[int] = mapped_column(primary_key=True)
+    step: Mapped[str] = mapped_column(String(16), default="")
+    title: Mapped[str] = mapped_column(String(256))
+    desc: Mapped[str] = mapped_column(Text, default="")
+
+
+class Office(Base):
+    __tablename__ = "offices"
+
+    position: Mapped[int] = mapped_column(Integer, default=0)
+
+    id: Mapped[int] = mapped_column(primary_key=True)
+    city: Mapped[str] = mapped_column(String(64))
+    address: Mapped[str] = mapped_column(Text, default="")
+    hours: Mapped[str] = mapped_column(String(128), default="")
+
+
+class GalleryImage(Base):
+    __tablename__ = "gallery_images"
+
+    position: Mapped[int] = mapped_column(Integer, default=0)
+
+    id: Mapped[int] = mapped_column(primary_key=True)
+    src: Mapped[str] = mapped_column(Text, default="")
+    alt: Mapped[str] = mapped_column(Text, default="")
+
+
+class StatusLabel(Base):
+    """برچسب فارسی وضعیت پروژه — key: done | progress."""
+
+    __tablename__ = "status_labels"
+
+    id: Mapped[int] = mapped_column(primary_key=True)
+    key: Mapped[str] = mapped_column(String(16), unique=True, index=True)
+    label: Mapped[str] = mapped_column(String(64))
+
+
+class ContactSectionContent(Base):
+    """بخش فرم تماس — رکورد یگانه."""
+
+    __tablename__ = "contact_section"
+
+    id: Mapped[int] = mapped_column(primary_key=True)
+    label: Mapped[str] = mapped_column(String(64), default="")
+    title: Mapped[str] = mapped_column(String(256), default="")
+    lead: Mapped[str] = mapped_column(Text, default="")
+    address_label: Mapped[str] = mapped_column(String(64), default="")
+    phone_label: Mapped[str] = mapped_column(String(64), default="")
+    email_label: Mapped[str] = mapped_column(String(64), default="")
+    name_label: Mapped[str] = mapped_column(String(64), default="")
+    name_placeholder: Mapped[str] = mapped_column(String(128), default="")
+    phone_field_label: Mapped[str] = mapped_column(String(64), default="")
+    phone_placeholder: Mapped[str] = mapped_column(String(64), default="")
+    note_label: Mapped[str] = mapped_column(String(64), default="")
+    note_optional_label: Mapped[str] = mapped_column(String(64), default="")
+    note_placeholder: Mapped[str] = mapped_column(String(256), default="")
+    submit_label: Mapped[str] = mapped_column(String(128), default="")
+    sending_label: Mapped[str] = mapped_column(String(64), default="")
+    success_title: Mapped[str] = mapped_column(String(256), default="")
+    success_text: Mapped[str] = mapped_column(Text, default="")
+    success_button_label: Mapped[str] = mapped_column(String(128), default="")
+
+
+class NewsletterSectionContent(Base):
+    """بخش خبرنامه — رکورد یگانه."""
+
+    __tablename__ = "newsletter"
+
+    id: Mapped[int] = mapped_column(primary_key=True)
+    title: Mapped[str] = mapped_column(String(256), default="")
+    lead: Mapped[str] = mapped_column(Text, default="")
+    placeholder: Mapped[str] = mapped_column(String(128), default="")
+    button_label: Mapped[str] = mapped_column(String(64), default="")
+    sending_label: Mapped[str] = mapped_column(String(64), default="")
+    success_text: Mapped[str] = mapped_column(String(256), default="")
+
+
+class FooterContent(Base):
+    """متن‌های فوتر — رکورد یگانه."""
+
+    __tablename__ = "footer"
+
+    id: Mapped[int] = mapped_column(primary_key=True)
+    about_text: Mapped[str] = mapped_column(Text, default="")
+    pages_heading: Mapped[str] = mapped_column(String(64), default="")
+    services_heading: Mapped[str] = mapped_column(String(64), default="")
+    contact_heading: Mapped[str] = mapped_column(String(64), default="")
+    copyright: Mapped[str] = mapped_column(String(256), default="")
+    tagline: Mapped[str] = mapped_column(String(256), default="")
+    socials: Mapped[list] = mapped_column(JSON, default=list)  # [{label, href, icon}]
+
+
 class ContactMessage(Base):
     __tablename__ = "contact_messages"
 

backend/app/schemas.py

@@ -1,7 +1,7 @@
 from datetime import datetime
-from typing import Literal
+from typing import Literal, Optional
 
-from pydantic import BaseModel, ConfigDict, EmailStr, Field
+from pydantic import BaseModel, ConfigDict, EmailStr, Field, create_model
 
 # ---------- پایه ----------
 
@@ -112,6 +112,137 @@ class BeforeAfterOut(ORMModel):
     after_label: str
 
 
+class NavItemOut(ORMModel):
+    id: int
+    label: str
+    href: str
+
+
+class HeroOut(ORMModel):
+    id: int
+    kicker: str
+    title: str
+    title_highlight: str
+    subtitle: str
+    badge_value: str
+    badge_label: str
+    cta_primary_label: str
+    cta_primary_href: str
+    cta_secondary_label: str
+    cta_secondary_href: str
+    scroll_label: str
+
+
+class StoryOut(ORMModel):
+    id: int
+    title: str
+    paragraphs: list[str]
+    quote: str
+    quote_author: str
+    stat1_value: str
+    stat1_label: str
+    stat2_value: str
+    stat2_label: str
+    link_label: str
+    link_href: str
+    bento: list[dict]
+
+
+class SectionHeadingOut(ORMModel):
+    id: int
+    key: str
+    label: str
+    title: str
+    lead: str
+    image: str
+    cta_label: str
+    cta_href: str
+
+
+class PageHeroOut(ORMModel):
+    id: int
+    key: str
+    title: str
+    lead: str
+    image: str
+
+
+class InvestmentModelOut(ORMModel):
+    id: int
+    title: str
+    desc: str
+    points: list[str]
+
+
+class ProcessStepOut(ORMModel):
+    id: int
+    step: str
+    title: str
+    desc: str
+
+
+class OfficeOut(ORMModel):
+    id: int
+    city: str
+    address: str
+    hours: str
+
+
+class GalleryImageOut(ORMModel):
+    id: int
+    src: str
+    alt: str
+
+
+class StatusLabelOut(ORMModel):
+    id: int
+    key: str
+    label: str
+
+
+class ContactSectionOut(ORMModel):
+    id: int
+    label: str
+    title: str
+    lead: str
+    address_label: str
+    phone_label: str
+    email_label: str
+    name_label: str
+    name_placeholder: str
+    phone_field_label: str
+    phone_placeholder: str
+    note_label: str
+    note_optional_label: str
+    note_placeholder: str
+    submit_label: str
+    sending_label: str
+    success_title: str
+    success_text: str
+    success_button_label: str
+
+
+class NewsletterOut(ORMModel):
+    id: int
+    title: str
+    lead: str
+    placeholder: str
+    button_label: str
+    sending_label: str
+    success_text: str
+
+
+class FooterOut(ORMModel):
+    id: int
+    about_text: str
+    pages_heading: str
+    services_heading: str
+    contact_heading: str
+    copyright: str
+    tagline: str
+    socials: list[dict]
+
+
 class ContactMessageOut(ORMModel):
     id: int
     name: str
@@ -242,5 +373,164 @@ class BeforeAfterIn(BaseModel):
     after_label: str = ""
 
 
+class NavItemIn(BaseModel):
+    label: str = Field(min_length=1, max_length=64)
+    href: str = Field(min_length=1, max_length=128)
+
+
+class HeroIn(BaseModel):
+    kicker: str = ""
+    title: str = ""
+    title_highlight: str = ""
+    subtitle: str = ""
+    badge_value: str = ""
+    badge_label: str = ""
+    cta_primary_label: str = ""
+    cta_primary_href: str = ""
+    cta_secondary_label: str = ""
+    cta_secondary_href: str = ""
+    scroll_label: str = ""
+
+
+class StoryIn(BaseModel):
+    title: str = ""
+    paragraphs: list[str] = []
+    quote: str = ""
+    quote_author: str = ""
+    stat1_value: str = ""
+    stat1_label: str = ""
+    stat2_value: str = ""
+    stat2_label: str = ""
+    link_label: str = ""
+    link_href: str = ""
+    bento: list[dict] = []
+
+
+class SectionHeadingIn(BaseModel):
+    key: str = Field(min_length=1, max_length=64)
+    label: str = ""
+    title: str = ""
+    lead: str = ""
+    image: str = ""
+    cta_label: str = ""
+    cta_href: str = ""
+
+
+class PageHeroIn(BaseModel):
+    key: str = Field(min_length=1, max_length=32)
+    title: str = ""
+    lead: str = ""
+    image: str = ""
+
+
+class InvestmentModelIn(BaseModel):
+    title: str = Field(min_length=1, max_length=256)
+    desc: str = ""
+    points: list[str] = []
+
+
+class ProcessStepIn(BaseModel):
+    step: str = ""
+    title: str = Field(min_length=1, max_length=256)
+    desc: str = ""
+
+
+class OfficeIn(BaseModel):
+    city: str = Field(min_length=1, max_length=64)
+    address: str = ""
+    hours: str = ""
+
+
+class GalleryImageIn(BaseModel):
+    src: str = ""
+    alt: str = ""
+
+
+class StatusLabelIn(BaseModel):
+    key: str = Field(min_length=1, max_length=16)
+    label: str = Field(min_length=1, max_length=64)
+
+
+class ContactSectionIn(BaseModel):
+    label: str = ""
+    title: str = ""
+    lead: str = ""
+    address_label: str = ""
+    phone_label: str = ""
+    email_label: str = ""
+    name_label: str = ""
+    name_placeholder: str = ""
+    phone_field_label: str = ""
+    phone_placeholder: str = ""
+    note_label: str = ""
+    note_optional_label: str = ""
+    note_placeholder: str = ""
+    submit_label: str = ""
+    sending_label: str = ""
+    success_title: str = ""
+    success_text: str = ""
+    success_button_label: str = ""
+
+
+class NewsletterSectionIn(BaseModel):
+    title: str = ""
+    lead: str = ""
+    placeholder: str = ""
+    button_label: str = ""
+    sending_label: str = ""
+    success_text: str = ""
+
+
+class FooterIn(BaseModel):
+    about_text: str = ""
+    pages_heading: str = ""
+    services_heading: str = ""
+    contact_heading: str = ""
+    copyright: str = ""
+    tagline: str = ""
+    socials: list[dict] = []
+
+
 class MessageReadIn(BaseModel):
     is_read: bool = True
+
+
+# ---------- اسکیماهای PATCH (ویرایش جزئی — همه فیلدها اختیاری) ----------
+
+
+def _make_patch(name: str, model_cls: type[BaseModel]) -> type[BaseModel]:
+    """از اسکیمای ورودی، اسکیمای PATCH می‌سازد؛ فیلدهای ارسال‌نشده دست‌نخورده می‌مانند."""
+    fields = {fname: (Optional[f.annotation], None) for fname, f in model_cls.model_fields.items()}
+    return create_model(name, **fields)
+
+
+BrandPatch = _make_patch("BrandPatch", BrandIn)
+ServicePatch = _make_patch("ServicePatch", ServiceIn)
+ProjectPatch = _make_patch("ProjectPatch", ProjectIn)
+ArticlePatch = _make_patch("ArticlePatch", ArticleIn)
+TestimonialPatch = _make_patch("TestimonialPatch", TestimonialIn)
+FaqPatch = _make_patch("FaqPatch", FaqIn)
+TeamMemberPatch = _make_patch("TeamMemberPatch", TeamMemberIn)
+TimelineItemPatch = _make_patch("TimelineItemPatch", TimelineItemIn)
+StatPatch = _make_patch("StatPatch", StatIn)
+WhyUsItemPatch = _make_patch("WhyUsItemPatch", WhyUsItemIn)
+BeforeAfterPatch = _make_patch("BeforeAfterPatch", BeforeAfterIn)
+NavItemPatch = _make_patch("NavItemPatch", NavItemIn)
+HeroPatch = _make_patch("HeroPatch", HeroIn)
+StoryPatch = _make_patch("StoryPatch", StoryIn)
+SectionHeadingPatch = _make_patch("SectionHeadingPatch", SectionHeadingIn)
+PageHeroPatch = _make_patch("PageHeroPatch", PageHeroIn)
+InvestmentModelPatch = _make_patch("InvestmentModelPatch", InvestmentModelIn)
+ProcessStepPatch = _make_patch("ProcessStepPatch", ProcessStepIn)
+OfficePatch = _make_patch("OfficePatch", OfficeIn)
+GalleryImagePatch = _make_patch("GalleryImagePatch", GalleryImageIn)
+StatusLabelPatch = _make_patch("StatusLabelPatch", StatusLabelIn)
+ContactSectionPatch = _make_patch("ContactSectionPatch", ContactSectionIn)
+NewsletterSectionPatch = _make_patch("NewsletterSectionPatch", NewsletterSectionIn)
+FooterPatch = _make_patch("FooterPatch", FooterIn)
+
+
+class ReorderIn(BaseModel):
+    """ترتیب جدید آیتم‌های یک مجموعه بر اساس id."""
+
+    ids: list[int]

backend/app/seed.py

@@ -1,16 +1,48 @@
 """اسکریپت seed دیتابیس.
 
 اجرا:
-    python -m app.seed          # فقط اگر دیتابیس خالی باشد
+    python -m app.seed          # فقط جدول‌های خالی پر می‌شوند
     python -m app.seed --force  # حذف کامل داده‌ها و ساخت مجدد
+
+پر کردن هر جدول مستقل است: روی یک دیتابیس موجود، فقط جدول‌های جدید یا خالی
+seed می‌شوند و داده‌های قبلی دست‌نخورده می‌مانند.
 """
 
 import argparse
+from typing import Any
 
 from . import models, seed_data
 from .auth import hash_password
 from .config import settings
-from .database import Base, SessionLocal, engine
+from .database import Base, SessionLocal, engine, run_light_migrations
+
+# (مدل، داده‌های اولیه، برچسب گزارش)
+CONTENT: list[tuple[Any, list[dict], str]] = [
+    (models.Brand, [seed_data.BRAND], "برند"),
+    (models.Hero, [seed_data.HERO], "هیرو صفحه اصلی"),
+    (models.StorySection, [seed_data.STORY], "داستان ما"),
+    (models.SectionHeadingContent, seed_data.SECTION_HEADINGS, "تیتر بخش‌ها"),
+    (models.PageHeroContent, seed_data.PAGE_HEROES, "هیرو صفحات"),
+    (models.NavItem, seed_data.NAV_ITEMS, "منوی ناوبری"),
+    (models.InvestmentModel, seed_data.INVESTMENT_MODELS, "مدل‌های سرمایه‌گذاری"),
+    (models.ProcessStep, seed_data.PROCESS_STEPS, "مراحل فرآیند کار"),
+    (models.Office, seed_data.OFFICES, "دفاتر"),
+    (models.GalleryImage, seed_data.GALLERY_IMAGES, "گالری تصاویر"),
+    (models.StatusLabel, seed_data.STATUS_LABELS, "برچسب وضعیت پروژه"),
+    (models.ContactSectionContent, [seed_data.CONTACT_SECTION], "بخش تماس"),
+    (models.NewsletterSectionContent, [seed_data.NEWSLETTER], "خبرنامه"),
+    (models.FooterContent, [seed_data.FOOTER], "فوتر"),
+    (models.Service, seed_data.SERVICES, "خدمات"),
+    (models.Stat, seed_data.STATS, "آمار"),
+    (models.Project, seed_data.PROJECTS, "پروژه‌ها"),
+    (models.Article, seed_data.ARTICLES, "مقالات"),
+    (models.Testimonial, seed_data.TESTIMONIALS, "نظرات"),
+    (models.Faq, seed_data.FAQS, "سوالات متداول"),
+    (models.TeamMember, seed_data.TEAM, "تیم"),
+    (models.TimelineItem, seed_data.TIMELINE, "تایم‌لاین"),
+    (models.WhyUsItem, seed_data.WHY, "چرا آرامش"),
+    (models.BeforeAfter, [seed_data.BEFORE_AFTER], "قبل/بعد"),
+]
 
 
 def seed(force: bool = False) -> None:
@@ -21,32 +53,16 @@ def seed(force: bool = False) -> None:
             print("جداول قبلی حذف شدند.")
 
         Base.metadata.create_all(bind=engine)
+        run_light_migrations()
 
-        if not force and db.query(models.Service).count() > 0:
-            print("دیتابیس قبلاً seed شده است. برای بازنشانی کامل: python -m app.seed --force")
-            return
-
-        db.add(models.Brand(**seed_data.BRAND))
-
-        for item in seed_data.SERVICES:
-            db.add(models.Service(**item))
-        for item in seed_data.STATS:
-            db.add(models.Stat(**item))
-        for item in seed_data.PROJECTS:
-            db.add(models.Project(**item))
-        for item in seed_data.ARTICLES:
-            db.add(models.Article(**item))
-        for item in seed_data.TESTIMONIALS:
-            db.add(models.Testimonial(**item))
-        for item in seed_data.FAQS:
-            db.add(models.Faq(**item))
-        for item in seed_data.TEAM:
-            db.add(models.TeamMember(**item))
-        for item in seed_data.TIMELINE:
-            db.add(models.TimelineItem(**item))
-        for item in seed_data.WHY:
-            db.add(models.WhyUsItem(**item))
-        db.add(models.BeforeAfter(**seed_data.BEFORE_AFTER))
+        for model, rows, label in CONTENT:
+            if db.query(model).count() > 0:
+                continue
+            for idx, row in enumerate(rows):
+                payload = dict(row)
+                if hasattr(model, "position") and "position" not in payload:
+                    payload["position"] = idx
+                db.add(model(**payload))
 
         if db.query(models.AdminUser).count() == 0:
             db.add(
@@ -59,19 +75,8 @@ def seed(force: bool = False) -> None:
 
         db.commit()
 
-        counts = {
-            "خدمات": db.query(models.Service).count(),
-            "پروژه‌ها": db.query(models.Project).count(),
-            "مقالات": db.query(models.Article).count(),
-            "نظرات": db.query(models.Testimonial).count(),
-            "سوالات متداول": db.query(models.Faq).count(),
-            "تیم": db.query(models.TeamMember).count(),
-            "تایم‌لاین": db.query(models.TimelineItem).count(),
-            "آمار": db.query(models.Stat).count(),
-            "چرا آرامش": db.query(models.WhyUsItem).count(),
-        }
-        for label, count in counts.items():
-            print(f"  {label}: {count} رکورد")
+        for model, _, label in CONTENT:
+            print(f"  {label}: {db.query(model).count()} رکورد")
         print("✔ seed با موفقیت انجام شد.")
     finally:
         db.close()

backend/app/seed_data.py

@@ -289,3 +289,165 @@ FAQS = [
     {"question": "خدمات پس از تحویل شامل چه مواردی می‌شود؟", "answer": "پنج سال پشتیبانی فنی تأسیسات مکانیکی و برقی، بازدید دوره‌ای سالانه و تضمین اجرای نما و عایق‌کاری."},
     {"question": "پروژه‌ها در چه شهرهایی اجرا می‌شوند؟", "answer": "در حال حاضر تهران، اصفهان و سواحل شمالی کشور مناطق اصلی فعالیت ما هستند و پروژه‌ای نیز در جزیره کیش در دست ساخت است."},
 ]
+
+# ---------- محتوای قبلاً هاردکد‌شده در فرانت‌اند (الان در دیتابیس) ----------
+
+NAV_ITEMS = [
+    {"label": "صفحه اصلی", "href": "/"},
+    {"label": "درباره ما", "href": "/about"},
+    {"label": "خدمات", "href": "/services"},
+    {"label": "پروژه‌ها", "href": "/projects"},
+    {"label": "سرمایه‌گذاری", "href": "/investment"},
+    {"label": "وبلاگ", "href": "/blog"},
+    {"label": "سوالات متداول", "href": "/faq"},
+    {"label": "تماس با ما", "href": "/contact"},
+]
+
+HERO = {
+    "kicker": "از سال ۱۳۸۳ — تهران، اصفهان، سواحل شمال",
+    "title": "ساختمانی که آرامش را معماری می‌کند",
+    "title_highlight": "معماری",
+    "subtitle": "طراحی، ساخت و سرمایه‌گذاری در پروژه‌های مسکونی و تجاری لوکس؛ با استانداردی که در جزئیات دیده می‌شود و در سال‌ها دوام می‌آورد.",
+    "badge_value": "۴۷",
+    "badge_label": "پروژه تحویل‌شده در بیست‌ویک سال فعالیت حرفه‌ای",
+    "cta_primary_label": "مشاهده پروژه‌ها",
+    "cta_primary_href": "/projects",
+    "cta_secondary_label": "مشاوره سرمایه‌گذاری",
+    "cta_secondary_href": "/contact",
+    "scroll_label": "اسکرول کنید",
+}
+
+STORY = {
+    "title": "درباره ی ما",
+    "paragraphs": [
+        "گروه ساختمانی آرامش با یک دفتر کوچک معماری آغاز شد و امروز یکی از مجموعه‌های شناخته‌شده ساخت‌وساز لوکس در ایران است. در تمام این سال‌ها یک اصل تغییر نکرده است: ساختمان باید برای زندگی ساخته شود، نه برای فروش سریع.",
+        "هر پروژه با مطالعه زمین، نور، اقلیم و الگوی زندگی ساکنان آغاز می‌شود؛ سپس تیم طراحی، سازه و اجرا در یک فرآیند واحد آن را تا تحویل کلید پیش می‌برند.",
+    ],
+    "quote": "«ساختمان برای ما فقط آجر و بتن نیست؛ بلکه تعهدی است به کیفیت زندگی ساکنان. ما فضاهایی می‌سازیم که در گذر زمان ارزش و هویت خود را حفظ کنند.»",
+    "quote_author": "کامران آرامش — مدیرعامل شرکت ساختمانی آرامش",
+    "stat1_value": "۹۴٪",
+    "stat1_label": "تحویل به‌موقع پروژه‌ها",
+    "stat2_value": "۵ سال",
+    "stat2_label": "پشتیبانی پس از تحویل",
+    "link_label": "داستان کامل ما",
+    "link_href": "/about",
+    "bento": [
+        {"src": IMAGES[0], "alt": "نمای برج مسکونی آرامش در تهران"},
+        {"src": IMAGES[1], "alt": "آتریوم مرکزی مجتمع تجاری پارسه"},
+        {"src": IMAGES[2], "alt": "ویلاهای ساخته‌شده در سواحل شمال"},
+        {"src": IMAGES[3], "alt": "نمای شبانه برج دوقلوی نیاوران"},
+    ],
+}
+
+SECTION_HEADINGS = [
+    {"key": "services", "title": "خدمات", "lead": "از نخستین خط روی کاغذ تا تحویل کلید، مدیریت سرمایه و طراحی محوطه؛ همه مراحل در یک مجموعه و زیر یک نظام کنترل کیفیت."},
+    {"key": "featured_projects", "title": "پروژه‌های شاخص", "lead": "کارهایی که بیشترین چیز را درباره استاندارد ما می‌گویند؛ چه آن‌هایی که تحویل شده‌اند و چه آن‌هایی که همین امروز در حال ساخت‌اند.", "cta_label": "همه پروژه‌ها", "cta_href": "/projects"},
+    {"key": "gallery", "title": "گالری تصاویر", "lead": "قاب‌هایی از کارگاه‌ها و پروژه‌های تحویل‌شده گروه ساختمانی آرامش."},
+    {"key": "timeline", "title": "مسیر ما", "lead": "از یک دفتر چهارنفره تا ۴۷ پروژه. خط زمان پروژه‌های ما را ببینید."},
+    {"key": "why_us", "title": "چرا گروه ساختمانی آرامش", "lead": "شش دلیلی که کارفرمایان و سرمایه‌گذاران بار دوم هم به ما برمی‌گردند.", "image": IMAGES[3]},
+    {"key": "testimonials", "title": "نظرات مشتریان"},
+    {"key": "team", "title": "تیم ما", "lead": "کسانی که تصمیم‌های اصلی هر پروژه را می‌گیرند و پاسخ‌گوی آن هستند."},
+    {"key": "articles", "label": "وبلاگ", "title": "آخرین مقالات", "lead": "یادداشت‌های تیم معماری، اجرا و سرمایه‌گذاری گروه ساختمانی آرامش درباره آنچه در کارگاه و بازار می‌گذرد.", "cta_label": "همه مقالات", "cta_href": "/blog"},
+    {"key": "faq", "title": "سوالات متداول", "lead": "پاسخ کوتاه به پرتکرارترین پرسش‌های سرمایه‌گذاران و خریداران."},
+    {"key": "investment_models", "title": "مدل‌های همکاری", "lead": "بسته به میزان سرمایه، افق زمانی و سطح ریسکی که می‌پذیرید، یکی از این سه مسیر مناسب شماست."},
+    {"key": "process", "title": "فرآیند کار ما", "lead": "چهار مرحله شفاف، از نخستین جلسه تا تحویل کلید."},
+]
+
+PAGE_HEROES = [
+    {"key": "about", "title": "درباره ما", "lead": "گروه ساختمانی آرامش مجموعه‌ای از معماران، مهندسان سازه و مدیران پروژه است که از سال ۱۳۸۳ در حوزه ساخت‌وساز لوکس فعالیت می‌کند.", "image": IMAGES[3]},
+    {"key": "services", "title": "خدمات", "lead": "هشت حوزه تخصصی که چرخه کامل یک پروژه ساختمانی را از ایده تا بهره‌برداری پوشش می‌دهند.", "image": IMAGES[1]},
+    {"key": "projects", "title": "پروژه‌ها", "lead": "مجموعه‌ای از برج‌های مسکونی، مراکز تجاری و ویلاهای اختصاصی؛ از پروژه‌های تحویل‌شده تا کارگاه‌های فعال امروز.", "image": IMAGES[0]},
+    {"key": "investment", "title": "سرمایه‌گذاری", "lead": "سه مسیر روشن برای ورود به بازار ساخت‌وساز لوکس، با ساختار مالی شفاف و گزارش‌دهی منظم.", "image": IMAGES[4]},
+    {"key": "blog", "title": "وبلاگ", "lead": "یادداشت‌های تیم معماری، اجرا و سرمایه‌گذاری گروه ساختمانی آرامش درباره آنچه در کارگاه و بازار می‌گذرد.", "image": IMAGES[2]},
+    {"key": "faq", "title": "سوالات متداول", "lead": "پیش از تماس، شاید پاسخ پرسش شما همین‌جا باشد. اگر نبود، خوشحال می‌شویم مستقیم صحبت کنیم.", "image": IMAGES[1]},
+    {"key": "contact", "title": "تماس با ما", "lead": "برای مشاوره ساخت، سرمایه‌گذاری یا بازدید از پروژه‌ها، تیم ما در سه شهر آماده پاسخ‌گویی است.", "image": IMAGES[1]},
+]
+
+INVESTMENT_MODELS = [
+    {
+        "title": "مشارکت در ساخت",
+        "desc": "مالک زمین و گروه ساختمانی آرامش در سود پروژه شریک می‌شوند؛ اجرا، مجوزها و فروش بر عهده ماست.",
+        "points": ["ارزیابی رایگان زمین", "قرارداد شفاف با ضمانت اجرا", "گزارش ماهانه پیشرفت"],
+    },
+    {
+        "title": "صندوق پروژه‌محور",
+        "desc": "سرمایه‌گذاری روی یک پروژه مشخص با واحدهای قابل خرید و بازدهی محاسبه‌شده در پایان دوره.",
+        "points": ["حداقل دوره ۲۴ ماه", "گزارش ارزش‌گذاری فصلی", "امکان انتقال واحد سرمایه"],
+    },
+    {
+        "title": "پیش‌خرید واحد",
+        "desc": "خرید واحد مسکونی یا تجاری در مراحل ابتدایی ساخت با قیمت پیش از تکمیل و پرداخت مرحله‌ای.",
+        "points": ["پرداخت مرحله‌ای متناسب با پیشرفت", "امکان شخصی‌سازی پلان", "تضمین زمان تحویل"],
+    },
+]
+
+PROCESS_STEPS = [
+    {"step": "۰۱", "title": "مطالعه و امکان‌سنجی", "desc": "بررسی زمین، ضوابط شهری و تحلیل بازدهی اقتصادی پروژه."},
+    {"step": "۰۲", "title": "طراحی و فاز اجرایی", "desc": "کانسپت معماری، طراحی سازه و تأسیسات و تهیه نقشه‌های اجرایی."},
+    {"step": "۰۳", "title": "اجرا و کنترل کیفیت", "desc": "ساخت با نظارت مستمر، گزارش ماهانه پیشرفت و کنترل هزینه."},
+    {"step": "۰۴", "title": "تحویل و پشتیبانی", "desc": "تحویل کلید، آموزش بهره‌برداری و پنج سال پشتیبانی فنی."},
+]
+
+OFFICES = [
+    {"city": "تهران", "address": "خیابان ولیعصر، برج آرامش، طبقه هجدهم", "hours": "شنبه تا چهارشنبه، ۹ تا ۱۸"},
+    {"city": "اصفهان", "address": "خیابان چهارباغ بالا، مجتمع پارسه، طبقه ششم", "hours": "شنبه تا چهارشنبه، ۹ تا ۱۷"},
+    {"city": "نوشهر", "address": "بلوار دریا، دفتر پروژه دریاکنار", "hours": "شنبه تا پنجشنبه، ۱۰ تا ۱۶"},
+]
+
+GALLERY_IMAGES = [
+    {"src": IMAGES[0], "alt": "تصویری از پروژه‌های گروه ساختمانی آرامش، شماره ۱"},
+    {"src": IMAGES[1], "alt": "تصویری از پروژه‌های گروه ساختمانی آرامش، شماره ۲"},
+    {"src": IMAGES[2], "alt": "تصویری از پروژه‌های گروه ساختمانی آرامش، شماره ۳"},
+    {"src": IMAGES[3], "alt": "تصویری از پروژه‌های گروه ساختمانی آرامش، شماره ۴"},
+    {"src": IMAGES[4], "alt": "تصویری از پروژه‌های گروه ساختمانی آرامش، شماره ۵"},
+    {"src": IMAGES[1], "alt": "تصویری از پروژه‌های گروه ساختمانی آرامش، شماره ۶"},
+]
+
+STATUS_LABELS = [
+    {"key": "done", "label": "انجام شده"},
+    {"key": "progress", "label": "در حال انجام"},
+]
+
+CONTACT_SECTION = {
+    "label": "تماس با ما",
+    "title": "پروژه‌تان را با ما در میان بگذارید",
+    "lead": "شماره‌تان را بگذارید؛ کارشناس ما در کمتر از یک روز کاری برای یک جلسه مشاوره رایگان تماس می‌گیرد.",
+    "address_label": "دفتر مرکزی",
+    "phone_label": "تلفن",
+    "email_label": "ایمیل",
+    "name_label": "نام",
+    "name_placeholder": "نام و نام خانوادگی",
+    "phone_field_label": "شماره تلفن",
+    "phone_placeholder": "09xx xxx xxxx",
+    "note_label": "توضیحات",
+    "note_optional_label": "(اختیاری)",
+    "note_placeholder": "درباره پروژه یا درخواست خود بنویسید…",
+    "submit_label": "ارسال درخواست مشاوره",
+    "sending_label": "در حال ارسال…",
+    "success_title": "درخواست شما ثبت شد",
+    "success_text": "از اعتماد شما سپاسگزاریم. کارشناسان ما به‌زودی با شما تماس می‌گیرند.",
+    "success_button_label": "ثبت درخواست جدید",
+}
+
+NEWSLETTER = {
+    "title": "خبرنامه گروه ساختمانی آرامش",
+    "lead": "هر ماه یک ایمیل: پروژه‌های جدید، فرصت‌های سرمایه‌گذاری و یادداشت‌های تیم معماری.",
+    "placeholder": "نشانی ایمیل شما",
+    "button_label": "عضویت",
+    "sending_label": "در حال ارسال…",
+    "success_text": "عضویت شما ثبت شد.",
+}
+
+FOOTER = {
+    "about_text": "گروه ساختمانی آرامش از سال ۱۳۸۳ ساختمان‌هایی می‌سازد که قرار است چند نسل در آن‌ها زندگی کنند؛ معماری آرام، اجرای دقیق و سرمایه‌گذاری شفاف.",
+    "pages_heading": "صفحات",
+    "services_heading": "خدمات",
+    "contact_heading": "ارتباط با ما",
+    "copyright": "© ۱۴۰۳ گروه ساختمانی آرامش — تمامی حقوق محفوظ است.",
+    "tagline": "طراحی و ساخت با دقتِ معماری",
+    "socials": [
+        {"label": "اینستاگرام", "href": "#", "icon": "instagram"},
+        {"label": "لینکدین", "href": "#", "icon": "linkedin"},
+        {"label": "تلگرام", "href": "#", "icon": "telegram"},
+    ],
+}

backend/requirements.txt

@@ -7,3 +7,5 @@ pydantic-settings>=2.6.1
 PyJWT>=2.10.1
 bcrypt>=4.2.1
 email-validator>=2.2.0
+boto3>=1.35.0
+python-multipart>=0.0.18

docker-compose.yml

@@ -1,4 +1,17 @@
 services:
+  # نقطه ورود واحد — مسیریابی / (سایت استاتیک)، /api (بک‌اند) و /media (MinIO)
+  traefik:
+    image: traefik:v3
+    restart: unless-stopped
+    command:
+      - --providers.docker=true
+      - --providers.docker.exposedbydefault=false
+      - --entrypoints.web.address=:80
+    ports:
+      - "5173:80"
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+
   db:
     image: postgres:17-alpine
     restart: unless-stopped
@@ -14,6 +27,51 @@ services:
       timeout: 5s
       retries: 12
 
+  minio:
+    image: minio/minio:latest
+    restart: unless-stopped
+    command: server /data --console-address ":9001"
+    environment:
+      MINIO_ROOT_USER: aramesh
+      MINIO_ROOT_PASSWORD: aramesh-minio-secret
+    volumes:
+      - minio_data:/data
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:9000/minio/health/live"]
+      interval: 5s
+      timeout: 5s
+      retries: 12
+    ports:
+      - "9001:9001" # کنسول MinIO
+    labels:
+      - traefik.enable=true
+      - traefik.http.routers.media.rule=PathPrefix(`/media`)
+      - traefik.http.routers.media.entrypoints=web
+      - traefik.http.routers.media.priority=100
+      - traefik.http.routers.media.middlewares=media-rewrite
+      - traefik.http.middlewares.media-rewrite.replacepathregex.regex=^/media/(.*)
+      - traefik.http.middlewares.media-rewrite.replacepathregex.replacement=/aramesh-media/$$1
+      - traefik.http.services.media.loadbalancer.server.port=9000
+
+  # یک‌بار اجرا می‌شود: ساخت باکت و بازگذاشتن خواندن عمومی برای سرو تصاویر
+  minio-setup:
+    image: minio/mc:latest
+    depends_on:
+      minio:
+        condition: service_healthy
+    environment:
+      MINIO_ROOT_USER: aramesh
+      MINIO_ROOT_PASSWORD: aramesh-minio-secret
+      MINIO_BUCKET: aramesh-media
+    restart: "no"
+    entrypoint: >
+      /bin/sh -c "
+      mc alias set local http://minio:9000 $$MINIO_ROOT_USER $$MINIO_ROOT_PASSWORD &&
+      mc mb --ignore-existing local/$$MINIO_BUCKET &&
+      mc anonymous set download local/$$MINIO_BUCKET &&
+      echo 'minio-setup: bucket ready'
+      "
+
   backend:
     build: ./backend
     restart: unless-stopped
@@ -23,12 +81,24 @@ services:
       CORS_ORIGINS: '["http://localhost:5173","http://127.0.0.1:5173"]'
       ADMIN_USERNAME: admin
       ADMIN_PASSWORD: aramesh123
+      S3_ENDPOINT: http://minio:9000
+      S3_ACCESS_KEY: aramesh
+      S3_SECRET_KEY: aramesh-minio-secret
+      S3_BUCKET: aramesh-media
+      MEDIA_PUBLIC_BASE: /media
     depends_on:
       db:
         condition: service_healthy
-    ports:
-      - "8000:8000"
+      minio:
+        condition: service_healthy
+    labels:
+      - traefik.enable=true
+      - traefik.http.routers.api.rule=PathPrefix(`/api`)
+      - traefik.http.routers.api.entrypoints=web
+      - traefik.http.routers.api.priority=100
+      - traefik.http.services.api.loadbalancer.server.port=8000
 
+  # فقط سرو فایل‌های استاتیک SPA — همه مسیریابی‌ها روی Traefik است
   frontend:
     build:
       context: ./frontend
@@ -37,8 +107,14 @@ services:
     restart: unless-stopped
     depends_on:
       - backend
-    ports:
-      - "5173:80"
+      - minio
+    labels:
+      - traefik.enable=true
+      - traefik.http.routers.web.rule=PathPrefix(`/`)
+      - traefik.http.routers.web.entrypoints=web
+      - traefik.http.routers.web.priority=1
+      - traefik.http.services.web.loadbalancer.server.port=80
 
 volumes:
   db_data:
+  minio_data:

frontend/Caddyfile

@@ -0,0 +1,12 @@
+:80 {
+	root * /srv
+	encode gzip
+
+	# مسیریابی SPA — مسیرهای ناشناخته به index.html برمی‌گردند
+	try_files {path} /index.html
+	file_server
+
+	# کش بلندمدت برای فایل‌های هش‌دار بیلد
+	@assets path /assets/*
+	header @assets Cache-Control "public, immutable, max-age=31536000"
+}

frontend/Dockerfile

@@ -8,16 +8,17 @@ RUN npm ci
 
 COPY . .
 
-# آدرس API در زمان بیلد؛ پیش‌فرض خالی یعنی درخواست‌های نسبی (/api) که nginx آن‌ها را به بک‌اند پروکسی می‌کند
+# آدرس API در زمان بیلد؛ پیش‌فرض خالی یعنی درخواست‌های نسبی (/api) که Traefik مسیریابی می‌کند
 ARG VITE_API_URL=""
 ENV VITE_API_URL=$VITE_API_URL
 
 RUN npm run build
 
 # ---------- مرحله سرو ----------
-FROM nginx:alpine
+# Caddy فقط فایل‌های استاتیک SPA را سرو می‌کند؛ مسیریابی /api و /media روی Traefik است
+FROM caddy:2-alpine
 
-COPY --from=build /app/dist /usr/share/nginx/html
-COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY Caddyfile /etc/caddy/Caddyfile
+COPY --from=build /app/dist /srv
 
 EXPOSE 80

frontend/index.html

@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html lang="fa" dir="rtl">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Aramesh Building Group Luxury Website</title>
+    <title>گروه ساختمانی آرامش</title>
   </head>
   <body>
     <div id="root"></div>

frontend/nginx.conf

@@ -1,28 +0,0 @@
-server {
-    listen 80;
-    server_name _;
-
-    root /usr/share/nginx/html;
-    index index.html;
-
-    # مسیریابی SPA — همه مسیرها به index.html برمی‌گردند
-    location / {
-        try_files $uri $uri/ /index.html;
-    }
-
-    # پروکسی درخواست‌های API به سرویس بک‌اند
-    location /api/ {
-        proxy_pass http://backend:8000;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-    }
-
-    # کش استاتیک
-    location ~* \.(js|css|png|jpg|jpeg|gif|svg|woff2?)$ {
-        expires 30d;
-        add_header Cache-Control "public, immutable";
-        try_files $uri =404;
-    }
-}

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,9 +58,29 @@ 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();
 
+  useEffect(() => {
+    if (data?.brand.name) document.title = data.brand.name;
+  }, [data?.brand.name]);
+
   return (
     <div dir="rtl" lang="fa" className="min-h-screen w-full overflow-x-hidden bg-ink font-pinar text-ivory">
       <Preloader />
@@ -77,10 +101,7 @@ function AppShell() {
       ) : data ? (
         <BrowserRouter>
           <ScrollToTop />
-          <Header />
-          <AnimatedRoutes />
-          <Footer />
-          <FloatingContact />
+          <AppChrome />
         </BrowserRouter>
       ) : null}
     </div>
@@ -95,7 +116,9 @@ export function App() {
 
   return (
     <SiteProvider>
-      <AppShell />
+      <AdminProvider>
+        <AppShell />
+      </AdminProvider>
     </SiteProvider>
   );
 }

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>
+  )
+}

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],
+  )
+}

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>
+  )
+}

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)} />}
+    </>
+  )
+}

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>
+  )
+}

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 })
+  },
+}

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
+}

frontend/src/api.tsx

@@ -32,8 +32,109 @@ export type BeforeAfterInfo = {
   after_label: string
 }
 
+export type NavItem = { id: number; label: string; href: string }
+
+export type HeroContent = {
+  id: number
+  kicker: string
+  title: string
+  title_highlight: string
+  subtitle: string
+  badge_value: string
+  badge_label: string
+  cta_primary_label: string
+  cta_primary_href: string
+  cta_secondary_label: string
+  cta_secondary_href: string
+  scroll_label: string
+}
+
+export type StoryContent = {
+  id: number
+  title: string
+  paragraphs: string[]
+  quote: string
+  quote_author: string
+  stat1_value: string
+  stat1_label: string
+  stat2_value: string
+  stat2_label: string
+  link_label: string
+  link_href: string
+  bento: { src: string; alt: string }[]
+}
+
+export type SectionHeadingContent = {
+  id: number
+  key: string
+  label: string
+  title: string
+  lead: string
+  image: string
+  cta_label: string
+  cta_href: string
+}
+
+export type PageHeroContent = { id: number; key: string; title: string; lead: string; image: string }
+
+export type InvestmentModelItem = { id: number; title: string; desc: string; points: string[] }
+export type ProcessStepItem = { id: number; step: string; title: string; desc: string }
+export type OfficeItem = { id: number; city: string; address: string; hours: string }
+export type GalleryImageItem = { id: number; src: string; alt: string }
+export type StatusLabelItem = { id: number; key: string; label: string }
+
+export type ContactSectionContent = {
+  id: number
+  label: string
+  title: string
+  lead: string
+  address_label: string
+  phone_label: string
+  email_label: string
+  name_label: string
+  name_placeholder: string
+  phone_field_label: string
+  phone_placeholder: string
+  note_label: string
+  note_optional_label: string
+  note_placeholder: string
+  submit_label: string
+  sending_label: string
+  success_title: string
+  success_text: string
+  success_button_label: string
+}
+
+export type NewsletterContent = {
+  id: number
+  title: string
+  lead: string
+  placeholder: string
+  button_label: string
+  sending_label: string
+  success_text: string
+}
+
+export type SocialItem = { label: string; href: string; icon: string }
+
+export type FooterContent = {
+  id: number
+  about_text: string
+  pages_heading: string
+  services_heading: string
+  contact_heading: string
+  copyright: string
+  tagline: string
+  socials: SocialItem[]
+}
+
 export interface SiteData {
   brand: BrandInfo
+  nav: NavItem[]
+  hero: HeroContent
+  story: StoryContent
+  section_headings: SectionHeadingContent[]
+  page_heroes: PageHeroContent[]
   services: Service[]
   projects: Project[]
   articles: Article[]
@@ -44,15 +145,30 @@ export interface SiteData {
   stats: StatItem[]
   why_us: WhyUsItem[]
   before_after: BeforeAfterInfo
+  investment_models: InvestmentModelItem[]
+  process_steps: ProcessStepItem[]
+  offices: OfficeItem[]
+  gallery: GalleryImageItem[]
+  status_labels: StatusLabelItem[]
+  contact_section: ContactSectionContent
+  newsletter: NewsletterContent
+  footer: FooterContent
 }
 
 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)
@@ -68,7 +184,7 @@ export function SiteProvider({ children }: { children: ReactNode }) {
       })
       .then((json) => {
         if (!cancelled) {
-          if (json.brand && json.before_after) setData(json)
+          if (json.brand && json.hero && json.footer && json.nav) setData(json)
           else setError(true)
         }
       })
@@ -88,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 {
@@ -103,3 +232,34 @@ export function useSite(): SiteData {
   }
   return data
 }
+
+const EMPTY_HEADING: SectionHeadingContent = {
+  id: 0,
+  key: '',
+  label: '',
+  title: '',
+  lead: '',
+  image: '',
+  cta_label: '',
+  cta_href: '',
+}
+
+/** تیتر و توضیح یک بخش بر اساس key تعریف‌شده در پنل مدیریت */
+export function useSectionHeading(key: string): SectionHeadingContent {
+  const { data } = useContext(SiteContext)
+  return data?.section_headings.find((s) => s.key === key) ?? { ...EMPTY_HEADING, key }
+}
+
+/** هیرو بالای صفحه بر اساس key تعریف‌شده در پنل مدیریت */
+export function usePageHero(key: string): PageHeroContent {
+  const { data } = useContext(SiteContext)
+  return (
+    data?.page_heroes.find((p) => p.key === key) ?? { id: 0, key, title: '', lead: '', image: '' }
+  )
+}
+
+/** برچسب فارسی وضعیت پروژه (done | progress) از پنل مدیریت */
+export function useStatusLabel(key: string): string {
+  const { data } = useContext(SiteContext)
+  return data?.status_labels.find((s) => s.key === key)?.label ?? key
+}

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 } = useSite()
+  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">تماس با ما</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">
-                پروژه‌تان را با ما در میان بگذارید
+                <InlineEdit value={content.title} onSave={(v) => saveContent('title', v)} />
               </h2>
               <p className="mt-6 text-base font-light leading-9 text-ivory/75">
-                شماره‌تان را بگذارید؛ کارشناس ما در کمتر از یک روز کاری برای یک جلسه مشاوره رایگان تماس می‌گیرد.
+                <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">دفتر مرکزی</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">تلفن</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">ایمیل</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">درخواست شما ثبت شد</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">
-                  از اعتماد شما سپاسگزاریم. کارشناسان ما به‌زودی با شما تماس می‌گیرند.
+                  <InlineEdit multiline value={content.success_text} onSave={(v) => saveContent('success_text', v)} />
                 </p>
                 <Button
                   type="button"
@@ -161,28 +188,28 @@ export function ContactSection() {
                     setForm({ name: '', phone: '', note: '' })
                   }}
                 >
-                  ثبت درخواست جدید
+                  <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">
-                    نام
+                    <InlineEdit value={content.name_label} onSave={(v) => saveContent('name_label', v)} />
                   </label>
                   <input
                     id="contact-name"
                     type="text"
                     value={form.name}
                     onChange={(e) => setForm({ ...form, name: e.target.value })}
-                    placeholder="نام و نام خانوادگی"
+                    placeholder={content.name_placeholder}
                     className="mt-3 w-full border border-ivory/20 bg-ink/45 px-5 py-4 text-sm font-light text-ivory placeholder:text-ivory/40 transition-colors duration-200 ease-lux focus:border-copper focus:outline-none"
                   />
                 </div>
 
                 <div>
                   <label htmlFor="contact-phone" className="block text-sm font-bold text-ivory/90">
-                    شماره تلفن <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"
@@ -191,28 +218,30 @@ export function ContactSection() {
                     required
                     value={form.phone}
                     onChange={(e) => setForm({ ...form, phone: e.target.value })}
-                    placeholder="09xx xxx xxxx"
+                    placeholder={content.phone_placeholder}
                     className="mt-3 w-full border border-ivory/20 bg-ink/45 px-5 py-4 text-right text-sm font-light text-ivory placeholder:text-ivory/40 transition-colors duration-200 ease-lux focus:border-copper focus:outline-none"
                   />
                 </div>
 
                 <div className="md:col-span-2">
                   <label htmlFor="contact-note" className="block text-sm font-bold text-ivory/90">
-                    توضیحات <span className="font-light text-ivory/50">(اختیاری)</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"
                     rows={6}
                     value={form.note}
                     onChange={(e) => setForm({ ...form, note: e.target.value })}
-                    placeholder="درباره پروژه یا درخواست خود بنویسید…"
+                    placeholder={content.note_placeholder}
                     className="mt-3 w-full resize-none border border-ivory/20 bg-ink/45 px-5 py-4 text-sm font-light leading-8 text-ivory placeholder:text-ivory/40 transition-colors duration-200 ease-lux focus:border-copper focus:outline-none"
                   />
                 </div>
 
                 <div className="md:col-span-2">
                   <Button type="submit" variant="copper" className="w-full md:w-auto md:px-12" disabled={sending}>
-                    {sending ? 'در حال ارسال…' : 'ارسال درخواست مشاوره'}
+                    {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>
   )
-}
+}

frontend/src/components/Footer.tsx

@@ -1,60 +1,94 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { InstagramIcon, LinkedinIcon, MailIcon, MapPinIcon, PhoneIcon, SendIcon } from 'lucide-react';
-import { NAV } from '../data/site';
 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,
+  linkedin: LinkedinIcon,
+  telegram: SendIcon,
+};
 
 export function Footer() {
-  const { brand, services } = useSite();
+  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">
-              گروه ساختمانی آرامش از سال ۱۳۸۳ ساختمان‌هایی می‌سازد که قرار است چند نسل در آن‌ها زندگی کنند؛ معماری آرام،
-              اجرای دقیق و سرمایه‌گذاری شفاف.
+              <InlineEdit multiline value={footer.about_text} onSave={(v) => saveFooter('about_text', v)} />
             </p>
             <div className="mt-6 flex gap-3">
-              {[
-              { Icon: InstagramIcon, label: 'اینستاگرام' },
-              { Icon: LinkedinIcon, label: 'لینکدین' },
-              { Icon: SendIcon, label: 'تلگرام' }].
-              map(({ Icon, label }) =>
-              <a
-                key={label}
-                href="#"
-                aria-label={label}
-                className="flex h-10 w-10 items-center justify-center border border-ivory/15 text-ivory/70 transition-colors duration-200 ease-lux hover:border-copper hover:text-copper">
-                
-                  <Icon className="h-4 w-4" />
-                </a>
-              )}
+              {footer.socials.map(({ label, href, icon }) => {
+                const Icon = SOCIAL_ICONS[icon] ?? InstagramIcon;
+                return (
+                  <a
+                    key={label}
+                    href={href}
+                    aria-label={label}
+                    className="flex h-10 w-10 items-center justify-center border border-ivory/15 text-ivory/70 transition-colors duration-200 ease-lux hover:border-copper hover:text-copper">
+
+                    <Icon className="h-4 w-4" />
+                  </a>
+                );
+              })}
             </div>
           </div>
 
           <div className="lg:col-span-2">
-            <h3 className="text-sm font-bold text-copper">صفحات</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.to}>
-                  <Link
-                  to={item.to}
+              {nav.map((item) =>
+              <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">خدمات</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>
               )}
@@ -62,7 +96,9 @@ export function Footer() {
           </div>
 
           <div className="lg:col-span-3">
-            <h3 className="text-sm font-bold text-copper">ارتباط با ما</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" />
@@ -85,10 +121,14 @@ 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>© ۱۴۰۳ گروه ساختمانی آرامش — تمامی حقوق محفوظ است.</p>
-          <p>طراحی و ساخت با دقتِ معماری</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>);
 
-}
+}

frontend/src/components/Header.tsx

@@ -1,12 +1,20 @@
 import React, { useEffect, useState } from "react";
 import { Link, NavLink, useLocation } from "react-router-dom";
 import { MenuIcon, PhoneIcon, XIcon } from "lucide-react";
-import { NAV } from "../data/site";
 import { useSite } from "../api";
-import { use } from "framer-motion/m";
+import { useFieldSaver } from "../admin/AdminContext";
+import { InlineEdit } from "./admin/InlineEdit";
+import { EditableItem, SingletonPill } from "../admin/Editable";
 
 export function Header() {
-  const { brand } = useSite();
+  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();
@@ -30,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"
@@ -43,13 +52,16 @@ 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.to}>
+            {nav.map((item) => (
+              <EditableItem key={item.id} resource="nav" item={item}>
+              <li>
                 <NavLink
-                  to={item.to}
+                  to={item.href}
                   className={({ isActive }) =>
                     `group relative py-2 text-[0.95rem] font-light transition-colors duration-200 ease-lux hover:text-copper [text-shadow:_0_2px_4px_rgba(0,0,0,0.6)] ${
                       isActive ? "text-copper" : "text-ivory/80"
@@ -58,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
@@ -70,6 +85,7 @@ export function Header() {
                   )}
                 </NavLink>
               </li>
+              </EditableItem>
             ))}
           </ul>
         </nav>
@@ -110,19 +126,24 @@ export function Header() {
           className="border-t border-ivory/10 bg-ink/98 px-6 py-4 xl:hidden"
         >
           <ul className="grid gap-1">
-            {NAV.map((item) => (
-              <li key={item.to}>
+            {nav.map((item) => (
+              <EditableItem key={item.id} resource="nav" item={item}>
+              <li>
                 <NavLink
-                  to={item.to}
+                  to={item.href}
                   className={({ isActive }) =>
                     `block border-b border-ivory/5 py-3 text-base font-light transition-colors duration-200 ease-lux ${
                       isActive ? "text-copper" : "text-ivory/80"
                     }`
                   }
                 >
-                  {item.label}
+                  <InlineEdit
+                    value={item.label}
+                    onSave={(v) => saveNav(item.id, { label: v })}
+                  />
                 </NavLink>
               </li>
+              </EditableItem>
             ))}
           </ul>
         </nav>

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">
-      <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>
   )
-}
+}

frontend/src/components/Preloader.tsx

@@ -1,11 +1,19 @@
 import React, { useEffect, useState } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
-import { BRAND } from '../data/site'
+import { useSiteData } from '../api'
+
+// برندینگ پیش از رسیدن پاسخ سرور — پس از بارگذاری داده‌ها از دیتابیس استفاده می‌شود
+const FALLBACK_LOGO = '/images/logo.png'
+const FALLBACK_NAME = 'گروه ساختمانی آرامش'
 
 export function Preloader() {
+  const { data } = useSiteData()
   const [done, setDone] = useState(false)
   const [progress, setProgress] = useState(0)
 
+  const logo = data?.brand.logo || FALLBACK_LOGO
+  const name = data?.brand.name || FALLBACK_NAME
+
   useEffect(() => {
     const start = Date.now()
     const total = 1800
@@ -39,13 +47,13 @@ export function Preloader() {
         >
           <div className="relative h-36 w-36">
             <img
-              src={BRAND.logo}
+              src={logo}
               alt=""
               aria-hidden="true"
               className="absolute inset-0 h-full w-full object-contain opacity-[0.12]"
             />
             <div className="absolute inset-0 overflow-hidden" style={{ clipPath: `inset(${100 - progress}% 0 0 0)` }}>
-              <img src={BRAND.logo} alt="" aria-hidden="true" className="h-full w-full object-contain" />
+              <img src={logo} alt="" aria-hidden="true" className="h-full w-full object-contain" />
             </div>
             <div
               className="absolute inset-x-0 h-px bg-copper"
@@ -64,10 +72,10 @@ export function Preloader() {
             transition={{ duration: 0.5, delay: 0.2 }}
             className="mt-4 text-sm font-light tracking-widest text-copper font-pinar"
           >
-            {BRAND.name}
+            {name}
           </motion.p>
         </motion.div>
       )}
     </AnimatePresence>
   )
-}
+}

frontend/src/components/ProjectCard.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
+import { useStatusLabel } from '../api'
 
 export function ProjectCard({ project }: any) {
   const isOngoing = project.status === 'progress'
-  
-  const statusText = isOngoing ? 'در حال انجام' : 'انجام شده'
+
+  const statusText = useStatusLabel(project.status)
   
   const dotColor = isOngoing ? 'bg-copper animate-pulse' : 'bg-ivory/60'
   const textColor = isOngoing ? 'text-copper' : 'text-ivory/90'

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>
   )
-}
+}

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>
+  )
+}

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>
+  )
+}

frontend/src/components/home/Articles.tsx

@@ -3,41 +3,62 @@ import { ArrowLeftIcon } from 'lucide-react';
 import { Reveal } from '../Reveal';
 import { ButtonLink } from '../Button';
 import { ArticleCard } from '../ArticleCard';
-import { useSite } from '../../api';
+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">وبلاگ</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">
-            آخرین مقالات
+            <InlineEdit value={heading.title} onSave={(v) => saveHeading('title', v)} />
           </h2>
           <p className="mt-5 text-base font-light leading-9 text-ivory/60">
-            یادداشت‌های تیم معماری، اجرا و سرمایه‌گذاری گروه ساختمانی آرامش درباره آنچه در کارگاه و بازار می‌گذرد.
+            <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>
 
-        <Reveal delay={0.1}>
-          <div className="mt-12 flex justify-center">
-            <ButtonLink to="/blog" variant="outline" className="font-light">
-              همه مقالات
-              <ArrowLeftIcon className="h-4 w-4" />
-            </ButtonLink>
-          </div>
-        </Reveal>
+        {heading.cta_label && heading.cta_href && (
+          <Reveal delay={0.1}>
+            <div className="mt-12 flex justify-center">
+              <ButtonLink to={heading.cta_href} variant="outline" className="font-light">
+                <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>);
 
-}
+}

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}

frontend/src/components/home/Faq.tsx

@@ -4,6 +4,7 @@ import { PlusIcon } from 'lucide-react'
 import { Reveal } from '../Reveal'
 import { SectionHeading } from '../SectionHeading'
 import { useSite } from '../../api'
+import { AddItemButton, EditableItem } from '../../admin/Editable'
 
 type FaqProps = {
   hideHeading?: boolean;
@@ -15,14 +16,15 @@ export function Faq({ hideHeading = false }: FaqProps) {
 
   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="سوالات متداول"
               lead="پاسخ کوتاه به پرتکرارترین پرسش‌های سرمایه‌گذاران و خریداران."
+              headingKey="faq"
             />
           </div>
         )}
@@ -32,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>
   )
-}
+}

frontend/src/components/home/FeaturedProjects.tsx

@@ -5,26 +5,36 @@ import { Reveal } from '../Reveal'
 import { ButtonLink } from '../Button'
 import { ProjectCard } from '../ProjectCard'
 import { SectionHeading } from '../SectionHeading'
-import { useSite } from '../../api'
+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'
 
-const FILTERS: { key: ProjectStatus; label: string }[] = [
-  { key: 'done', label: 'انجام شده' },
-  { key: 'progress', label: 'در حال انجام' },
-]
-
 export function FeaturedProjects() {
-  const { projects } = useSite()
+  const { projects, status_labels } = useSite()
+  const heading = useSectionHeading('featured_projects')
+  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: useStatusLabel('done') },
+    { key: 'progress', label: useStatusLabel('progress') },
+  ]
   const [status, setStatus] = useState<ProjectStatus>('done')
   const list = projects.filter((p) => p.status === status).slice(0, 3)
 
   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="پروژه‌های شاخص"
-          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) => (
@@ -47,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>
           ))}
@@ -56,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 }}
@@ -65,28 +78,40 @@ 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>
           </AnimatePresence>
         </div>
 
-        <Reveal delay={0.1}>
-          <div className="mt-12 flex justify-center">
-            <ButtonLink to="/projects" variant="outline" className="font-light">
-              همه پروژه‌ها
-              <ArrowLeftIcon className="h-4 w-4" />
-            </ButtonLink>
-          </div>
-        </Reveal>
+        {heading.cta_label && heading.cta_href && (
+          <Reveal delay={0.1}>
+            <div className="mt-12 flex justify-center">
+              <ButtonLink to={heading.cta_href} variant="outline" className="font-light">
+                <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>
+          </Reveal>
+        )}
       </div>
     </section>
   )
-}
+}

frontend/src/components/home/Gallery.tsx

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

frontend/src/components/home/Hero.tsx

@@ -3,14 +3,38 @@ 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 } = useSite()
+  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)) {
+      const [before, ...rest] = hero.title.split(hero.title_highlight)
+      return (
+        <>
+          {before}
+          <span className="text-copper">{hero.title_highlight}</span>
+          {rest.join(hero.title_highlight)}
+        </>
+      )
+    }
+    return hero.title
+  }
+
   return (
     <section className="relative h-screen min-h-[640px] w-full overflow-hidden" aria-label="معرفی گروه ساختمانی آرامش">
       <motion.img
@@ -40,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"
           >
-            از سال ۱۳۸۳ — تهران، اصفهان، سواحل شمال
+            <InlineEdit value={hero.kicker} onSave={(v) => saveHero('kicker', v)} />
           </motion.p>
 
           <motion.h1
@@ -49,9 +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"
           >
-            ساختمانی که آرامش را
-            <span className="text-copper"> معماری </span>
-            می‌کند
+            <InlineEdit value={hero.title} onSave={(v) => saveHero('title', v)} aria-label="تیتر اصلی صفحه" />
           </motion.h1>
 
           <motion.p
@@ -60,8 +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"
           >
-            طراحی، ساخت و سرمایه‌گذاری در پروژه‌های مسکونی و تجاری لوکس؛ با استانداردی که در جزئیات دیده می‌شود و در
-            سال‌ها دوام می‌آورد.
+            <InlineEdit multiline value={hero.subtitle} onSave={(v) => saveHero('subtitle', v)} />
           </motion.p>
 
           <motion.div
@@ -70,12 +91,12 @@ export function Hero() {
             transition={{ duration: 0.85, delay: 2.44, ease: [0.23, 1, 0.32, 1] }}
             className="mt-10 flex flex-wrap items-center gap-4"
           >
-            <ButtonLink to="/projects" variant="copper">
-              مشاهده پروژه‌ها
+            <ButtonLink to={hero.cta_primary_href} variant="copper">
+              <InlineEdit value={hero.cta_primary_label} onSave={(v) => saveHero('cta_primary_label', v)} />
               <ArrowLeftIcon className="h-4 w-4" />
             </ButtonLink>
-            <ButtonLink to="/contact" variant="outline" className="font-light">
-              مشاوره سرمایه‌گذاری
+            <ButtonLink to={hero.cta_secondary_href} variant="outline" className="font-light">
+              <InlineEdit value={hero.cta_secondary_label} onSave={(v) => saveHero('cta_secondary_label', v)} />
             </ButtonLink>
           </motion.div>
         </div>
@@ -86,9 +107,11 @@ 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">۴۷</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>
@@ -98,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">اسکرول کنید</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>
   )
 }

frontend/src/components/home/Newsletter.tsx

@@ -3,13 +3,24 @@ import { CheckIcon, SendIcon } from 'lucide-react'
 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',
@@ -85,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">
-            خبرنامه گروه ساختمانی آرامش
+            <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">
-            هر ماه یک ایمیل: پروژه‌های جدید، فرصت‌های سرمایه‌گذاری و یادداشت‌های تیم معماری.
+            <InlineEdit multiline value={newsletter.lead} onSave={(v) => saveContent('lead', v)} />
           </p>
         </Reveal>
 
@@ -100,7 +112,7 @@ export function Newsletter() {
           <form onSubmit={submit} className="flex flex-col gap-3 sm:flex-row" noValidate>
             <div className="flex-1">
               <label htmlFor="newsletter-email" className="sr-only">
-                نشانی ایمیل
+                {newsletter.placeholder}
               </label>
               <input
                 id="newsletter-email"
@@ -111,25 +123,27 @@ export function Newsletter() {
                   setEmail(e.target.value)
                   if (status !== 'idle') setStatus('idle')
                 }}
-                placeholder="نشانی ایمیل شما"
+                placeholder={newsletter.placeholder}
                 className="w-full border border-transparent bg-char px-5 py-4 text-left text-sm font-light text-ivory placeholder:text-ivory/40 transition-all duration-300 ease-lux focus:border-ivory focus:outline-none"
                 aria-invalid={status === 'error'}
               />
               {status === 'done' && (
                 <p className="mt-2 flex items-center gap-1.5 text-xs font-light text-char" role="status">
                   <CheckIcon className="h-3.5 w-3.5" />
-                  عضویت شما ثبت شد.
+                  {newsletter.success_text}
                 </p>
               )}
             </div>
-            
+
             <Button type="submit" variant="dark-ivory" disabled={sending}>
               <SendIcon className="h-4 w-4" />
-              {sending ? 'در حال ارسال…' : 'عضویت'}
+              {sending ? newsletter.sending_label : (
+                <InlineEdit value={newsletter.button_label} onSave={(v) => saveContent('button_label', v)} />
+              )}
             </Button>
           </form>
         </Reveal>
       </div>
     </section>
   )
-}
+}

frontend/src/components/home/Services.tsx

@@ -1,42 +1,56 @@
 import React from 'react'
 import { Reveal } from '../Reveal'
 import { ServiceIcon } from '../ServiceIcon'
-import { useSite } from '../../api'
+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">
-           خدمات
+            <InlineEdit value={heading.title} onSave={(v) => saveHeading('title', v)} />
           </h2>
           <p className="mt-5 text-base font-light leading-9 text-ivory/60">
-            از نخستین خط روی کاغذ تا تحویل کلید، مدیریت سرمایه و طراحی محوطه؛ همه مراحل در یک مجموعه و زیر یک نظام
-            کنترل کیفیت.
+            <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>
   )
-}
+}

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>);
 
-}
+}

frontend/src/components/home/Story.tsx

@@ -2,23 +2,34 @@ import React from 'react'
 import { ArrowLeftIcon } from 'lucide-react'
 import { Reveal } from '../Reveal'
 import { ButtonLink } from '../Button'
-import { IMAGES } from '../../data/site'
-
-const BENTO = [
-  { src: IMAGES[0], alt: 'نمای برج مسکونی آرامش در تهران' },
-  { src: IMAGES[1], alt: 'آتریوم مرکزی مجتمع تجاری پارسه' },
-  { src: IMAGES[2], alt: 'ویلاهای ساخته‌شده در سواحل شمال' },
-  { src: IMAGES[3], alt: 'نمای شبانه برج دوقلوی نیاوران' },
-]
+import { useSite } from '../../api'
+import { useFieldSaver } from '../../admin/AdminContext'
+import { InlineEdit } from '../admin/InlineEdit'
+import { SingletonPill } from '../../admin/Editable'
 
 type StoryProps = {
   showLink?: boolean;
   showLabel?: boolean;
+  showQuote?: boolean;
   alignTop?: boolean;
   children?: React.ReactNode;
 }
 
-export function Story({ showLink = true, showLabel = true, alignTop = false, children }: 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'}`}>
@@ -26,40 +37,58 @@ export function Story({ showLink = true, showLabel = true, alignTop = false, chi
           {showLabel && (
             <Reveal>
               <h2 id="story-title" className="text-section font-bold text-ivory">
-                درباره ی ما
+                <InlineEdit value={story.title} onSave={(v) => saveStory('title', v)} />
               </h2>
               <div className="mt-6 h-px w-24 bg-copper/70" />
             </Reveal>
           )}
 
           <Reveal delay={0.08}>
-            <p className="mt-8 text-base font-light leading-9 text-ivory/65">
-              گروه ساختمانی آرامش با یک دفتر کوچک معماری آغاز شد و امروز یکی از مجموعه‌های شناخته‌شده ساخت‌وساز لوکس در ایران
-              است. در تمام این سال‌ها یک اصل تغییر نکرده است: ساختمان باید برای زندگی ساخته شود، نه برای فروش سریع.
-            </p>
-            <p className="mt-5 text-base font-light leading-9 text-ivory/65">
-              هر پروژه با مطالعه زمین، نور، اقلیم و الگوی زندگی ساکنان آغاز می‌شود؛ سپس تیم طراحی، سازه و اجرا در یک
-              فرآیند واحد آن را تا تحویل کلید پیش می‌برند.
-            </p>
+            {story.paragraphs.map((paragraph, i) => (
+              <p key={i} className={`text-base font-light leading-9 text-ivory/65 ${i === 0 ? 'mt-8' : 'mt-5'}`}>
+                <InlineEdit multiline value={paragraph} onSave={(v) => saveParagraph(i, v)} />
+              </p>
+            ))}
           </Reveal>
 
           <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">۹۴٪</p>
-                <p className="mt-2 text-sm font-light text-ivory/55">تحویل به‌موقع پروژه‌ها</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">۵ سال</p>
-                <p className="mt-2 text-sm font-light text-ivory/55">پشتیبانی پس از تحویل</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>
 
+          {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">
+                  <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>
+          )}
+
           {showLink && (
             <Reveal delay={0.22}>
-              <ButtonLink to="/about" variant="outline" className="mt-10 font-light">
-                داستان کامل ما
+              <ButtonLink to={story.link_href} variant="outline" className="mt-10 font-light">
+                <InlineEdit value={story.link_label} onSave={(v) => saveStory('link_label', v)} />
                 <ArrowLeftIcon className="h-4 w-4" />
               </ButtonLink>
             </Reveal>
@@ -72,8 +101,9 @@ export function Story({ showLink = true, showLabel = true, alignTop = false, chi
           )}
         </div>
 
-        <div className="grid grid-cols-2 gap-4">
-          {BENTO.map((item, i) => (
+        <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">
                 <img
@@ -88,4 +118,4 @@ export function Story({ showLink = true, showLabel = true, alignTop = false, chi
       </div>
     </section>
   )
-}
+}

frontend/src/components/home/Team.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Reveal } from '../Reveal'
 import { SectionHeading } from '../SectionHeading'
 import { useSite } from '../../api'
+import { AddItemButton, EditableItem } from '../../admin/Editable'
 
 export function Team() {
   const { team } = useSite()
@@ -11,26 +12,30 @@ export function Team() {
         <SectionHeading
           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>
   )
-}
+}

frontend/src/components/home/Testimonials.tsx

@@ -3,11 +3,13 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { ChevronLeftIcon, ChevronRightIcon, QuoteIcon } from 'lucide-react';
 import { SectionHeading } from '../SectionHeading';
 import { useSite } from '../../api';
+import { EditableItem } from '../../admin/Editable';
 
 export function Testimonials() {
   const { testimonials } = useSite();
   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);
@@ -16,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="نظرات مشتریان" 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>
 
@@ -42,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}
@@ -65,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>
@@ -73,4 +77,4 @@ export function Testimonials() {
       </div>
     </section>);
 
-}
+}

frontend/src/components/home/Timeline.tsx

@@ -2,6 +2,7 @@ import React, { useRef } from 'react'
 import { motion, useScroll, useTransform, useInView } from 'framer-motion'
 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>
   )
@@ -53,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="مسیر ما"
             lead="از یک دفتر چهارنفره تا ۴۷ پروژه. خط زمان پروژه‌های ما را ببینید."
+            headingKey="timeline"
             align="center"
           />
         </div>
@@ -75,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>

frontend/src/components/home/WhyUs.tsx

@@ -1,42 +1,72 @@
 import React from 'react';
 import { Reveal } from '../Reveal';
 import { SectionHeading } from '../SectionHeading';
-import { IMAGES } from '../../data/site';
-import { useSite } from '../../api';
+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="چرا گروه ساختمانی آرامش"
-            lead="شش دلیلی که کارفرمایان و سرمایه‌گذاران بار دوم هم به ما برمی‌گردند." />
-          
-          <Reveal delay={0.12}>
-            <img
-              src={IMAGES[3]}
-              alt="نمای شبانه برج دوقلوی نیاوران"
-              className="mt-10 h-80 w-full object-cover" />
-            
-          </Reveal>
+            title={heading.title}
+            lead={heading.lead}
+            headingKey="why_us" />
+
+          {heading.image && (
+            <Reveal delay={0.12}>
+              <img
+                src={heading.image}
+                alt={heading.title}
+                className="mt-10 h-80 w-full object-cover" />
+
+            </Reveal>
+          )}
         </div>
 
         <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>);
 
-}
+}

frontend/src/data/site.ts

@@ -1,60 +1,16 @@
-export const BRAND = {
-  name: 'گروه ساختمانی آرامش',
-  logo: 'https://i.postimg.cc/XYNrsHsM/Chat-GPT-Image-Aug-6-2026-04-34-46-PM.png',
-  hero: 'https://i.postimg.cc/J0bKgQVg/Gemini-Generated-Image-mdh969mdh969mdh9.png',
-  contactBg: 'https://i.postimg.cc/BbccNQHr/Gemini-Generated-Image-dafc2hdafc2hdafc.png',
-  phone: '۰۲۱ ۸۸ ۷۴ ۲۲ ۱۰',
-  phoneHref: 'tel:+982188742210',
-  email: 'info@arameshbuildinggroup.com',
-  address: 'تهران، خیابان ولیعصر، برج آرامش، طبقه هجدهم'
-};
-
-export const IMAGES = [
-  'https://i.postimg.cc/wTQ0QFkG/Gemini-Generated-Image-1tjszd1tjszd1tjs.png',
-  'https://i.postimg.cc/1zfBPS1G/Gemini-Generated-Image-at69yhat69yhat69.png',
-  'https://i.postimg.cc/BbccNQHr/Gemini-Generated-Image-dafc2hdafc2hdafc.png',
-  'https://i.postimg.cc/4xFvW0HX/Gemini-Generated-Image-n7mhonn7mhonn7mh.png',
-  'https://i.postimg.cc/N036cr4s/Gemini-Generated-Image-ytbhvvytbhvvytbh.png'
-];
-
-export const NAV = [
-  { label: 'صفحه اصلی', to: '/' },
-  { label: 'درباره ما', to: '/about' },
-  { label: 'خدمات', to: '/services' },
-  { label: 'پروژه‌ها', to: '/projects' },
-  { label: 'سرمایه‌گذاری', to: '/investment' },
-  { label: 'وبلاگ', to: '/blog' },
-  { label: 'سوالات متداول', to: '/faq' },
-  { label: 'تماس با ما', to: '/contact' }
-];
+// انواع مشترک داده‌ها — همه محتوای متنی سایت از بک‌اند (GET /api/site) بارگذاری می‌شود.
 
 export type Service = {
+  id: number;
   title: string;
   desc: string;
   icon: 'draft' | 'tower' | 'mall' | 'villa' | 'renew' | 'manage' | 'invest' | 'landscape';
 };
 
-export const SERVICES: Service[] = [
-  { title: 'طراحی معماری', desc: 'خلق فرم‌های معاصر با نگاه ایرانی؛ از کانسپت اولیه تا نقشه‌های اجرایی و جزئیات نما.', icon: 'draft' },
-  { title: 'ساخت برج‌های مسکونی', desc: 'اجرای برج‌های بلندمرتبه با استانداردهای سازه‌ای بین‌المللی و کیفیت تحویل بی‌نقص.', icon: 'tower' },
-  { title: 'مجتمع‌های تجاری', desc: 'طراحی و ساخت مراکز تجاری با مطالعه دقیق جریان مخاطب و بازدهی بلندمدت سرمایه.', icon: 'mall' },
-  { title: 'ویلاسازی', desc: 'ویلاهای اختصاصی هم‌نشین با طبیعت؛ محرمانگی، نور طبیعی و مصالح ماندگار.', icon: 'villa' },
-  { title: 'بازسازی', desc: 'بازآفرینی ساختمان‌های موجود با ارتقای سازه، نما و تجربه زندگی در فضا.', icon: 'renew' },
-  { title: 'مدیریت پروژه', desc: 'کنترل هم‌زمان زمان، هزینه و کیفیت با گزارش‌دهی شفاف در تمام مراحل ساخت.', icon: 'manage' },
-  { title: 'سرمایه‌گذاری ساختمانی', desc: 'ساختارهای مشارکت شفاف، ارزیابی ریسک و طراحی سبد ملکی متناسب با سرمایه شما.', icon: 'invest' },
-  { title: 'محوطه‌سازی و لنداسکیپ', desc: 'طراحی حیاط، بام سبز و مسیرهای دسترسی؛ ادامه معماری در فضای باز پروژه.', icon: 'landscape' }
-];
-
-export const STATS = [
-  { value: 21, suffix: '+', label: 'سال تجربه ساخت' },
-  { value: 47, suffix: '', label: 'پروژه تحویل‌شده' },
-  { value: 860, suffix: 'هزار', label: 'مترمربع زیربنا' },
-  { value: 1200, suffix: '+', label: 'خانواده ساکن' }
-];
-
 export type ProjectStatus = 'done' | 'progress';
 
 export type Project = {
+  id: number;
   slug: string;
   title: string;
   location: string;
@@ -70,77 +26,7 @@ export type Project = {
   body: string[];
 };
 
-export const STATUS_LABEL: Record<ProjectStatus, string> = {
-  done: 'انجام شده',
-  progress: 'در حال انجام'
-};
-
-export const PROJECTS: Project[] = [
-  { slug: 'aramesh-elahieh', title: 'برج آرامش الهیه', location: 'تهران، الهیه', year: '۱۴۰۲', status: 'done', image: IMAGES[0], gallery: [IMAGES[0], IMAGES[3], IMAGES[1]], area: '۲۴٬۰۰۰ متر مربع', floors: '۱۸ طبقه', units: '۵۶ واحد', client: 'سرمایه‌گذاری خصوصی', summary: 'یک برج مسکونی لوکس با نمای سنگ تراورتن و پوسته دوپوسته‌ای که مصرف انرژی را تا ۳۵ درصد کاهش داده است.', body: ['برج آرامش الهیه روی زمینی با شیب طبیعی شمالی طراحی شد؛ همین شیب فرصت داد تا لابی، استخر و فضاهای مشترک در سه تراز مختلف بنشینند و همه واحدها دید بی‌واسطه به شهر داشته باشند.', 'پوسته بیرونی ترکیبی از سنگ تراورتن روشن و پنجره‌های قدی با شیشه سه‌جداره است. سایه‌بان‌های عمودی مسی‌رنگ، نور مستقیم تابستان را می‌شکنند و در زمستان اجازه ورود کامل نور را می‌دهند.', 'اجرای پروژه در سی‌ودو ماه به پایان رسید و تمام واحدها پیش از تحویل کلید به فروش رسیدند.'] },
-  { slug: 'parseh-mall', title: 'مجتمع تجاری پارسه', location: 'اصفهان، مرکز شهر', year: '۱۴۰۱', status: 'done', image: IMAGES[1], gallery: [IMAGES[1], IMAGES[2], IMAGES[4]], area: '۳۸٬۵۰۰ متر مربع', floors: '۷ طبقه', units: '۱۴۰ واحد تجاری', client: 'گروه سرمایه‌گذاری پارسه', summary: 'مرکز تجاری با آتریوم مرکزی و نورگیر سقفی که جریان مخاطب را به‌صورت طبیعی در همه ترازها توزیع می‌کند.', body: ['مطالعه رفتار مخاطب پیش از طراحی نشان داد کوتاه‌ترین مسیر عمودی، کلید موفقیت تجاری این مجموعه است؛ بنابراین آتریوم مرکزی با پله‌برقی‌های قطری در قلب پلان قرار گرفت.', 'نورگیر سقفی با شیشه لو-ای، روشنایی روز را تا تراز منفی دو می‌رساند و مصرف روشنایی مصنوعی را به‌طور محسوس کاهش می‌دهد.', 'مجموعه دو ماه پیش از موعد قراردادی به بهره‌برداری رسید.'] },
-  { slug: 'daryakenar-villas', title: 'ویلاهای دریاکنار', location: 'مازندران، نوشهر', year: '۱۴۰۰', status: 'done', image: IMAGES[2], gallery: [IMAGES[2], IMAGES[4], IMAGES[0]], area: '۹٬۲۰۰ متر مربع', floors: '۲ طبقه', units: '۱۲ ویلا', client: 'مجموعه خصوصی دریاکنار', summary: 'دوازده ویلای اختصاصی با چیدمان شانه‌ای که برای هر واحد، دید مستقیم به دریا و محرمانگی کامل فراهم می‌کند.', body: ['چیدمان شانه‌ای ویلاها نتیجه ده‌ها بررسی زاویه دید بود؛ هیچ ویلایی در دید ویلای دیگر نیست و همه به دریا باز می‌شوند.', 'مصالح، پاسخی به اقلیم مرطوب شمال است: چوب ترموود، بتن اکسپوز و پوشش‌های ضد نمک برای فلزات نما.', 'محوطه با گیاهان بومی طراحی شد تا نیاز آبیاری در طول سال حداقل باشد.'] },
-  { slug: 'niavaran-twins', title: 'برج دوقلوی نیاوران', location: 'تهران، نیاوران', year: '۱۳۹۹', status: 'done', image: IMAGES[3], gallery: [IMAGES[3], IMAGES[0], IMAGES[2]], area: '۳۱٬۷۰۰ متر مربع', floors: '۲۰ طبقه', units: '۸۰ واحد', client: 'مشارکت با مالکان زمین', summary: 'دو برج همسان با پادست مشترک که فضاهای رفاهی و پارکینگ‌ها را در یک تراز واحد ادغام می‌کند.', body: ['دو برج روی یک پادست مشترک نشسته‌اند؛ این تصمیم اجازه داد فضاهای رفاهی، سالن اجتماعات و پارکینگ‌ها بین دو ساختمان مشترک شوند و سطح اشغال باغ کاهش یابد.', 'سازه با سیستم دیوار برشی و دال پس‌کشیده اجرا شد تا دهانه‌های داخلی آزاد و پلان‌ها قابل شخصی‌سازی باشند.'] },
-  { slug: 'kish-garden-tower', title: 'باغ‌برج کیش', location: 'کیش، مروارید', year: '۱۴۰۵ (پیش‌بینی)', status: 'progress', image: IMAGES[4], gallery: [IMAGES[4], IMAGES[1], IMAGES[3]], area: '۱۸٬۴۰۰ متر مربع', floors: '۱۴ طبقه', units: '۶۲ واحد اقامتی', client: 'صندوق پروژه‌محور آرامش', summary: 'باغ‌برجی اقامتی با تراس‌های سبز پیوسته که در حال ساخت است؛ پیشرفت فیزیکی پروژه ۴۸ درصد.', body: ['تراس‌های سبز پیوسته، پوسته‌ای زنده برای ساختمان می‌سازند که در اقلیم گرم جزیره، دمای سطح نما را به‌طور محسوس پایین می‌آورد.', 'در حال حاضر سازه تا تراز طبقه نهم اجرا شده و نصب نما از ضلع جنوبی آغاز شده است.'] },
-  { slug: 'aramesh-business-center', title: 'مرکز تجاری آرامش تهران', location: 'تهران، سعادت‌آباد', year: '۱۴۰۶ (پیش‌بینی)', status: 'progress', image: IMAGES[1], gallery: [IMAGES[1], IMAGES[3], IMAGES[4]], area: '۲۷٬۳۰۰ متر مربع', floors: '۱۲ طبقه', units: '۹۰ دفتر اداری', client: 'مشارکت با هلدینگ آرامش', summary: 'مجتمع اداری-تجاری با هسته مرکزی شفاف و لابی دوبلکس؛ در مرحله اجرای سفت‌کاری.', body: ['برنامه‌ریزی فضایی این مجموعه بر اساس دفاتر انعطاف‌پذیر انجام شد؛ هر تراز می‌تواند به دو، سه یا شش دفتر مستقل تقسیم شود.', 'اجرای تأسیسات مکانیکی به‌صورت هم‌زمان با سفت‌کاری پیش می‌رود تا زمان کل پروژه کوتاه‌تر شود.'] }
-];
-
-export const BEFORE_AFTER = {
-  title: 'از کانسپت تا خلق واقعیت',
-  lead: 'دستگیره را بکشید و ببینید نمای ساختمانی چگونه از حالت اولیه به فرم مدرن تبدیل می‌شود.',
-  before: 'https://cdn.housedesign.ai/se/housedesign/assets/housedesign-home/compare/1_before.webp',
-  after: 'https://cdn.housedesign.ai/se/housedesign/assets/housedesign-home/compare/1_after.webp',
-  beforeLabel: 'کانسپت اولیه',
-  afterLabel: 'پروژه تکمیل‌شده',
-};
-
-export const TIMELINE = [
-  { year: '۱۳۸۳', title: 'آغاز مسیر', desc: 'تأسیس دفتر معماری آرامش با تیمی چهارنفره و نخستین پروژه بازسازی در تهران.', image: IMAGES[2] },
-  { year: '۱۳۸۵', title: 'نخستین ساخت مستقل', desc: 'تحویل اولین ساختمان مسکونی هفت‌طبقه؛ آغاز همکاری با پیمانکاران سازه‌ای بزرگ.', image: IMAGES[0] },
-  { year: '۱۳۸۷', title: 'ورود به بازار تجاری', desc: 'طراحی و اجرای اولین مجتمع تجاری با رویکرد بازدهی سرمایه و جریان مخاطب.', image: IMAGES[1] },
-  { year: '۱۳۸۹', title: 'استاندارد بین‌المللی', desc: 'استقرار نظام کنترل کیفیت و دریافت گواهی‌نامه‌های مدیریت پروژه.', image: IMAGES[4] },
-  { year: '۱۳۹۵', title: 'بلندمرتبه‌سازی', desc: 'آغاز ساخت نخستین برج بیست‌طبقه شرکت در شمال تهران.', image: IMAGES[3] },
-  { year: '۱۴۰۳', title: 'گروه ساختمانی آرامش امروز', desc: 'پرتفوی ۴۷ پروژه، دفاتر در سه شهر و صندوق سرمایه‌گذاری ساختمانی اختصاصی.', image: IMAGES[0] }
-];
-
-export const WHY = [
-  { title: 'کیفیت بدون مصالحه', desc: 'انتخاب مصالح و مجریان بر اساس ماندگاری چنددهه‌ای، نه سریع‌ترین تحویل.' },
-  { title: 'شفافیت مالی کامل', desc: 'گزارش ماهانه هزینه‌ها و پیشرفت فیزیکی برای همه شرکای پروژه.' },
-  { title: 'تحویل به‌موقع', desc: '۹۴٪ پروژه‌های ما در بازه زمانی قراردادی یا زودتر تحویل داده شده‌اند.' },
-  { title: 'طراحی اختصاصی', desc: 'هیچ نقشه‌ای دو بار اجرا نمی‌شود؛ هر پروژه هویت معماری خودش را دارد.' },
-  { title: 'خدمات پس از تحویل', desc: 'پنج سال پشتیبانی فنی و نگهداری تأسیسات پس از تحویل کلید.' },
-  { title: 'پایداری و انرژی', desc: 'طراحی پوسته و تأسیسات با هدف کاهش مصرف انرژی تا ۳۵ درصد.' }
-];
-
-export const TESTIMONIALS = [
-  { name: 'مهندس سارا کیانی', role: 'سرمایه‌گذار پروژه پارسه', quote: 'گزارش‌های ماهانه گروه ساختمانی آرامش آن‌قدر دقیق بود که هیچ‌وقت نیاز نشد نگران سرمایه‌ام باشم. پروژه دو ماه زودتر از موعد به بهره‌برداری رسید.' },
-  { name: 'دکتر امیرحسین راد', role: 'ساکن برج الهیه', quote: 'کیفیت اجرا در جزئیاتی دیده می‌شود که معمولاً کسی به آن‌ها فکر نمی‌کند؛ از عایق صوتی پنجره‌ها تا نور غیرمستقیم راهروها.' },
-  { name: 'مریم دلاور', role: 'مدیر مجموعه ویلاهای دریاکنار', quote: 'همکاری با تیم طراحی، تجربه‌ای واقعاً حرفه‌ای بود. ایده‌های ما را شنیدند و به زبان معماری ترجمه کردند.' }
-];
-
-export const TEAM = [
-  { name: 'کامران آرامش', role: 'بنیان‌گذار و مدیرعامل', bio: 'بیش از سه دهه تجربه در ساخت بلندمرتبه.' },
-  { name: 'نگار شریفی', role: 'مدیر ارشد طراحی', bio: 'معمار ارشد، فارغ‌التحصیل دانشگاه تهران و میلان.' },
-  { name: 'بهزاد مرادی', role: 'مدیر اجرایی پروژه‌ها', bio: 'مسئول کنترل کیفیت و زمان‌بندی همه کارگاه‌ها.' },
-  { name: 'الهام نیک‌آیین', role: 'مدیر سرمایه‌گذاری', bio: 'طراح ساختارهای مشارکت و تحلیل بازدهی ملکی.' }
-];
-
 export type Article = {
+  id: number;
   slug: string; title: string; date: string; category: string; image: string; read: string; excerpt: string; body: string[];
 };
-
-export const ARTICLES: Article[] = [
-  { slug: 'natural-light', title: 'معماری آرام: چرا نور طبیعی گران‌ترین مصالح ساختمان است؟', date: '۲۴ مرداد ۱۴۰۳', category: 'معماری', image: IMAGES[1], read: '۶ دقیقه', excerpt: 'نور طبیعی نه‌تنها کیفیت زندگی در فضا را تعیین می‌کند، بلکه مستقیماً بر مصرف انرژی و ارزش بلندمدت ملک اثر می‌گذارد.', body: ['در بازار ساخت‌وساز، ارزش یک واحد اغلب با متراژ سنجیده می‌شود؛ اما تجربه ما در بیست سال گذشته نشان داده کیفیت نور، تعیین‌کننده‌تر از چند متر اضافه است.', 'جهت‌گیری ساختمان، عمق دهانه و ارتفاع کف تا سقف، سه متغیر اصلی نور طبیعی هستند. تصمیم درباره هر سه، پیش از ترسیم اولین پلان گرفته می‌شود و بعد از آن تقریباً برگشت‌پذیر نیست.', 'در برج آرامش الهیه، چرخش ۱۲ درجه‌ای توده ساختمان نسبت به شمال، دو ساعت نور مفید بیشتر در روزهای زمستان به واحدها اضافه کرد؛ تصمیمی بی‌هزینه با اثری چنددهه‌ای.', 'برای انتخاب یک واحد، پیشنهاد ما ساده است: بازدید را در ساعت‌های میانی صبح و اواخر بعدازظهر انجام دهید و کیفیت نور را در همان ساعت‌هایی بسنجید که واقعاً در خانه هستید.'] },
-  { slug: 'real-estate-portfolio', title: 'راهنمای انتخاب سبد سرمایه‌گذاری ملکی در بازار امروز', date: '۱۰ مرداد ۱۴۰۳', category: 'سرمایه‌گذاری', image: IMAGES[3], read: '۹ دقیقه', excerpt: 'سه معیار کلیدی برای تشکیل سبدی متعادل از دارایی ملکی، بر اساس افق زمانی و سطح ریسک شما.', body: ['سبد ملکی متعادل، ترکیبی از دارایی‌های با نقدشوندگی متفاوت است؛ نه همه سرمایه در یک پروژه بلندمدت، نه همه در واحدهای آماده.', 'افق زمانی، نخستین معیار است. اگر برنامه شما کمتر از دو سال است، پیش‌خرید در پروژه‌ای که تازه شروع شده انتخاب پرریسکی خواهد بود.', 'معیار دوم شفافیت گزارش‌دهی است. بدون گزارش ماهانه پیشرفت فیزیکی و مالی، ارزیابی وضعیت سرمایه شما عملاً غیرممکن است.', 'معیار سوم، تنوع کاربری است. ترکیب مسکونی و تجاری، نوسان بازدهی سبد را در دوره‌های رکود محسوس کاهش می‌دهد.'] },
-  { slug: 'facade-quality', title: 'پنج نکته فنی که کیفیت نما را پس از ده سال مشخص می‌کند', date: '۲۸ تیر ۱۴۰۳', category: 'اجرا', image: IMAGES[4], read: '۵ دقیقه', excerpt: 'نمای ساختمان در سال اول زیبا به نظر می‌رسد؛ تفاوت کیفیت اجرا در سال دهم آشکار می‌شود.', body: ['اتصالات مکانیکی سنگ نما، مهم‌تر از خود سنگ است. اتصال چسبی در اقلیم سردوگرم ایران عمر کوتاهی دارد.', 'درزهای انقباضی باید در نقشه دیده شوند، نه در کارگاه تصمیم‌گیری شوند؛ نبودشان اولین دلیل ترک‌های افقی نما است.', 'آب‌بندی دور پنجره، پرتکرارترین نقطه شکست است. اجرای نوار آب‌بند پیش از نصب قرنیز، این ریسک را حذف می‌کند.', 'زیرسازی گالوانیزه گرم، در برابر زیرسازی رنگ‌شده، تفاوت قیمت اندکی دارد و تفاوت عمر بسیار زیادی.', 'در پایان، برنامه بازدید دوره‌ای سالانه نما را جدی بگیرید؛ ترمیم یک درز، هزینه‌ای در حد هیچ در برابر بازسازی کل نما است.'] },
-  { slug: 'commercial-yield', title: 'چگونه بازدهی یک پروژه تجاری را پیش از ساخت تخمین بزنیم؟', date: '۱۵ تیر ۱۴۰۳', category: 'سرمایه‌گذاری', image: IMAGES[2], read: '۷ دقیقه', excerpt: 'مدل ساده‌ای برای برآورد بازدهی، بر پایه جریان مخاطب، ترکیب واحدها و نرخ اجاره منطقه.', body: ['برآورد بازدهی تجاری با سه عدد آغاز می‌شود: جریان روزانه مخاطب، نرخ اجاره هر مترمربع در منطقه و نسبت سطح مفید به کل.', 'خطای رایج، نادیده‌گرفتن ترازهای بالاتر است. بدون طراحی درست مسیر عمودی، ترازهای سه به بالا معمولاً نیمی از نرخ تراز همکف را هم به‌دست نمی‌آورند.', 'در نهایت، سناریوی محافظه‌کارانه را هم بنویسید؛ اگر پروژه در سناریوی بدبینانه هم توجیه داشت، سرمایه‌گذاری منطقی است.'] },
-  { slug: 'facade-materials', title: 'مصالح نما: مقایسه سنگ، کامپوزیت و ترموود در اقلیم ایران', date: '۲ تیر ۱۴۰۳', category: 'اجرا', image: IMAGES[0], read: '۸ دقیقه', excerpt: 'هر مصالح نما در اقلیم متفاوتی درست کار می‌کند؛ انتخاب اشتباه، هزینه نگهداری را چند برابر می‌کند.', body: ['سنگ در اقلیم خشک، بهترین ماندگاری را دارد؛ اما وزن آن نیازمند زیرسازی دقیق و محاسبه سازه‌ای است.', 'کامپوزیت انتخاب سریع و سبکی است، مشروط بر انتخاب گرید ضد آتش و درنظرگرفتن انقباض حرارتی در طول ورق.', 'ترموود در اقلیم مرطوب شمال، بهترین پاسخ زیبایی‌شناسانه است، ولی برنامه نگهداری دوسالانه دارد.'] },
-  { slug: 'renovate-or-rebuild', title: 'بازسازی یا نوسازی؟ معیارهای تصمیم‌گیری برای مالکان', date: '۲۰ خرداد ۱۴۰۳', category: 'معماری', image: IMAGES[1], read: '۶ دقیقه', excerpt: 'اگر عمر سازه و ضوابط شهری اجازه دهند، بازسازی می‌تواند بازدهی بالاتری از تخریب کامل داشته باشد.', body: ['نخست وضعیت سازه ارزیابی می‌شود؛ اگر مقاوم‌سازی هزینه‌ای بیش از ۴۰ درصد ساخت نو دارد، نوسازی منطقی‌تر است.', 'دومین معیار، ضوابط شهری روز است. گاهی تخریب، سطح زیربنای مجاز کمتری به شما می‌دهد و این تصمیم را کاملاً تغییر می‌دهد.', 'در بازسازی، بیشترین ارزش افزوده از سه جا می‌آید: نما، ورودی و بازآرایی پلان داخلی.'] }
-];
-
-export const FAQS = [
-  { q: 'حداقل سرمایه برای مشارکت در پروژه‌های گروه ساختمانی آرامش چقدر است؟', a: 'ساختار مشارکت هر پروژه متفاوت است، اما معمولاً واحدهای سرمایه‌گذاری از سطح مشخصی آغاز می‌شوند و جزئیات دقیق در جلسه ارزیابی اولیه ارائه می‌شود.' },
-  { q: 'مدت زمان معمول ساخت یک برج مسکونی چقدر است؟', a: 'بسته به تعداد طبقات و شرایط زمین، میانگین اجرای یک برج مسکونی بین ۲۸ تا ۴۲ ماه از زمان صدور پروانه تا تحویل کلید است.' },
-  { q: 'آیا امکان تغییر نقشه داخلی واحد وجود دارد؟', a: 'بله. تا پیش از پایان مرحله سفت‌کاری، امکان شخصی‌سازی پلان داخلی با هماهنگی تیم طراحی و تأیید سازه فراهم است.' },
-  { q: 'خدمات پس از تحویل شامل چه مواردی می‌شود؟', a: 'پنج سال پشتیبانی فنی تأسیسات مکانیکی و برقی، بازدید دوره‌ای سالانه و تضمین اجرای نما و عایق‌کاری.' },
-  { q: 'پروژه‌ها در چه شهرهایی اجرا می‌شوند؟', a: 'در حال حاضر تهران، اصفهان و سواحل شمالی کشور مناطق اصلی فعالیت ما هستند و پروژه‌ای نیز در جزیره کیش در دست ساخت است.' }
-];

frontend/src/pages/About.tsx

@@ -6,25 +6,13 @@ import { Timeline } from '../components/home/Timeline'
 import { WhyUs } from '../components/home/WhyUs'
 import { Team } from '../components/home/Team'
 import { ContactSection } from '../components/ContactSection'
-import { IMAGES } from '../data/site'
 
 export function About() {
-  return (
+    return (
     <>
-      <PageHero
-        title="درباره ما"
-        lead="گروه ساختمانی آرامش مجموعه‌ای از معماران، مهندسان سازه و مدیران پروژه است که از سال ۱۳۸۳ در حوزه ساخت‌وساز لوکس فعالیت می‌کند."
-        image={IMAGES[3]}
-      />
-      
-      <Story showLink={false} showLabel={false} alignTop={true}>
-        <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">
-            «ساختمان برای ما فقط آجر و بتن نیست؛ بلکه تعهدی است به کیفیت زندگی ساکنان. ما فضاهایی می‌سازیم که در گذر زمان ارزش و هویت خود را حفظ کنند.»
-          </p>
-          <p className="mt-5 text-sm font-bold text-copper">کامران آرامش — مدیرعامل شرکت ساختمانی آرامش</p>
-        </div>
-      </Story>
+      <PageHero pageKey="about" />
+
+      <Story showLink={false} showLabel={false} showQuote={true} alignTop={true} />
 
       <Stats />
       <Timeline />
@@ -33,4 +21,4 @@ export function About() {
       <ContactSection />
     </>
   )
-}
+}

frontend/src/pages/Blog.tsx

@@ -5,24 +5,21 @@ import { PageHero } from '../components/PageHero'
 import { Reveal } from '../components/Reveal'
 import { ArticleCard } from '../components/ArticleCard'
 import { Newsletter } from '../components/home/Newsletter'
-import { IMAGES } from '../data/site'
 import { useSite } from '../api'
+import { AddItemButton, EditableItem } from '../admin/Editable'
 
 export function Blog() {
   const { articles } = useSite()
-  const [featured, ...rest] = articles
+    const [featured, ...rest] = articles
 
   return (
     <>
-      <PageHero
-        title="وبلاگ"
-        lead="یادداشت‌های تیم معماری، اجرا و سرمایه‌گذاری گروه ساختمانی آرامش درباره آنچه در کارگاه و بازار می‌گذرد."
-        image={IMAGES[2]}
-      />
+      <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"
@@ -56,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>

frontend/src/pages/ContactPage.tsx

@@ -2,28 +2,21 @@ import React from 'react'
 import { PageHero } from '../components/PageHero'
 import { ContactSection } from '../components/ContactSection'
 import { Reveal } from '../components/Reveal'
-import { IMAGES } from '../data/site'
-
-const OFFICES = [
-  { city: 'تهران', address: 'خیابان ولیعصر، برج آرامش، طبقه هجدهم', hours: 'شنبه تا چهارشنبه، ۹ تا ۱۸' },
-  { city: 'اصفهان', address: 'خیابان چهارباغ بالا، مجتمع پارسه، طبقه ششم', hours: 'شنبه تا چهارشنبه، ۹ تا ۱۷' },
-  { city: 'نوشهر', address: 'بلوار دریا، دفتر پروژه دریاکنار', hours: 'شنبه تا پنجشنبه، ۱۰ تا ۱۶' },
-]
+import { useSite } from '../api'
+import { AddItemButton, EditableItem } from '../admin/Editable'
 
 export function ContactPage() {
+  const { offices } = useSite()
+  
   return (
     <>
-      <PageHero
-        title="تماس با ما"
-        lead="برای مشاوره ساخت، سرمایه‌گذاری یا بازدید از پروژه‌ها، تیم ما در سه شهر آماده پاسخ‌گویی است."
-        image={IMAGES[1]} 
-      />
+      <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.city} delay={0.06 * i} className="h-full">
-              {/* اعمال فرمول برای نرم شدن بالا آمدن کارت، بدون هیچ تغییری روی متن‌ها */}
+          {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>
@@ -33,12 +26,14 @@ export function ContactPage() {
                   </p>
                 </div>
               </article>
+              </EditableItem>
             </Reveal>
           ))}
+          <AddItemButton resource="offices" />
         </div>
       </section>
 
       <ContactSection />
     </>
   )
-}
+}

frontend/src/pages/FaqPage.tsx

@@ -2,19 +2,14 @@ import React from 'react'
 import { PageHero } from '../components/PageHero'
 import { Faq } from '../components/home/Faq'
 import { ContactSection } from '../components/ContactSection'
-import { IMAGES } from '../data/site'
 
 export function FaqPage() {
-  return (
+    return (
     <>
-      <PageHero
-        title="سوالات متداول"
-        lead="پیش از تماس، شاید پاسخ پرسش شما همین‌جا باشد. اگر نبود، خوشحال می‌شویم مستقیم صحبت کنیم."
-        image={IMAGES[1]}
-      />
-      
+      <PageHero pageKey="faq" />
+
       <Faq hideHeading={true} />
-      
+
       <ContactSection />
     </>
   )

frontend/src/pages/Investment.tsx

@@ -4,53 +4,33 @@ import { Reveal } from '../components/Reveal'
 import { SectionHeading } from '../components/SectionHeading'
 import { Stats } from '../components/home/Stats'
 import { ContactSection } from '../components/ContactSection'
-import { IMAGES } from '../data/site'
-
-const MODELS = [
-  {
-    title: 'مشارکت در ساخت',
-    desc: 'مالک زمین و گروه ساختمانی آرامش در سود پروژه شریک می‌شوند؛ اجرا، مجوزها و فروش بر عهده ماست.',
-    points: ['ارزیابی رایگان زمین', 'قرارداد شفاف با ضمانت اجرا', 'گزارش ماهانه پیشرفت'],
-  },
-  {
-    title: 'صندوق پروژه‌محور',
-    desc: 'سرمایه‌گذاری روی یک پروژه مشخص با واحدهای قابل خرید و بازدهی محاسبه‌شده در پایان دوره.',
-    points: ['حداقل دوره ۲۴ ماه', 'گزارش ارزش‌گذاری فصلی', 'امکان انتقال واحد سرمایه'],
-  },
-  {
-    title: 'پیش‌خرید واحد',
-    desc: 'خرید واحد مسکونی یا تجاری در مراحل ابتدایی ساخت با قیمت پیش از تکمیل و پرداخت مرحله‌ای.',
-    points: ['پرداخت مرحله‌ای متناسب با پیشرفت', 'امکان شخصی‌سازی پلان', 'تضمین زمان تحویل'],
-  },
-]
+import { useSectionHeading, useSite } from '../api'
+import { AddItemButton, EditableItem } from '../admin/Editable'
 
 export function Investment() {
+  const { investment_models } = useSite()
+    const heading = useSectionHeading('investment_models')
+
   return (
     <>
-      <PageHero
-        title="سرمایه‌گذاری"
-        lead="سه مسیر روشن برای ورود به بازار ساخت‌وساز لوکس، با ساختار مالی شفاف و گزارش‌دهی منظم."
-        image={IMAGES[4]}
-      />
+      <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">
-          <SectionHeading
-            title="مدل‌های همکاری"
-            lead="بسته به میزان سرمایه، افق زمانی و سطح ریسکی که می‌پذیرید، یکی از این سه مسیر مناسب شماست."
-          />
+          <SectionHeading title={heading.title} lead={heading.lead} />
           <div className="mt-14 grid gap-6 lg:grid-cols-3">
-            {MODELS.map((model, i) => (
-              <Reveal key={model.title} delay={0.06 * i} className="h-full">
+            {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>
-                  
+
                   <h3 className="mt-6 text-2xl font-bold text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
                     {model.title}
                   </h3>
-                  
+
                   <p className="mt-5 text-sm font-light leading-9 text-ivory/65">{model.desc}</p>
-                  
+
                   <div className="mt-auto pt-10">
                     <ul className="space-y-4 border-t border-ivory/10 pt-8">
                       {model.points.map((point) => (
@@ -62,8 +42,10 @@ export function Investment() {
                     </ul>
                   </div>
                 </article>
+                </EditableItem>
               </Reveal>
             ))}
+            <AddItemButton resource="investment_models" />
           </div>
         </div>
       </section>
@@ -72,4 +54,4 @@ export function Investment() {
       <ContactSection />
     </>
   )
-}
+}

frontend/src/pages/ProjectDetail.tsx

@@ -6,13 +6,13 @@ import { ButtonLink } from '../components/Button'
 import { ProjectCard } from '../components/ProjectCard'
 import { ContactSection } from '../components/ContactSection'
 import { Lightbox } from '../components/Lightbox'
-import { STATUS_LABEL } from '../data/site'
-import { useSite } from '../api'
+import { useSite, useStatusLabel } from '../api'
 
 export function ProjectDetail() {
   const { slug } = useParams<{ slug: string }>()
   const { projects } = useSite()
   const project = projects.find((p) => p.slug === slug)
+  const statusLabel = useStatusLabel(project?.status ?? '')
   const [lightbox, setLightbox] = useState<number | null>(null)
 
   if (!project) {
@@ -74,7 +74,7 @@ export function ProjectDetail() {
           <Reveal className="order-1">
             <span className="flex items-center gap-3 text-sm font-light text-copper">
               <span aria-hidden="true" className="h-px w-8 bg-copper" />
-              {STATUS_LABEL[project.status]}
+              {statusLabel}
             </span>
             <h2 className="mt-4 text-3xl font-bold text-ivory">درباره پروژه</h2>
             

frontend/src/pages/Projects.tsx

@@ -4,25 +4,36 @@ import { Reveal } from '../components/Reveal';
 import { ProjectCard } from '../components/ProjectCard';
 import { Gallery } from '../components/home/Gallery';
 import { ContactSection } from '../components/ContactSection';
-import { IMAGES, type ProjectStatus } from '../data/site';
-import { useSite } from '../api';
-
-const FILTERS: {key: ProjectStatus;label: string;}[] = [
-{ key: 'done', label: 'انجام شده' },
-{ key: 'progress', label: 'در حال انجام' }];
-
+import type { ProjectStatus } from '../data/site';
+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 { 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;}[] = [
+  { key: 'done', label: doneLabel },
+  { key: 'progress', label: progressLabel }];
   const [status, setStatus] = useState<ProjectStatus>('done');
   const list = projects.filter((p) => p.status === status);
 
   return (
     <>
-      <PageHero
-        title="پروژه‌ها"
-        lead="مجموعه‌ای از برج‌های مسکونی، مراکز تجاری و ویلاهای اختصاصی؛ از پروژه‌های تحویل‌شده تا کارگاه‌های فعال امروز."
-        image={IMAGES[0]} />
+      <PageHero pageKey="projects" />
       
 
       <section className="bg-ink py-24 lg:py-32" aria-label="فهرست پروژه‌ها">
@@ -48,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>
             )}
@@ -56,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>

frontend/src/pages/ServicesPage.tsx

@@ -5,39 +5,35 @@ import { Faq } from '../components/home/Faq'
 import { ContactSection } from '../components/ContactSection'
 import { Reveal } from '../components/Reveal'
 import { SectionHeading } from '../components/SectionHeading'
-import { IMAGES } from '../data/site'
-
-const PROCESS = [
-  { step: '۰۱', title: 'مطالعه و امکان‌سنجی', desc: 'بررسی زمین، ضوابط شهری و تحلیل بازدهی اقتصادی پروژه.' },
-  { step: '۰۲', title: 'طراحی و فاز اجرایی', desc: 'کانسپت معماری، طراحی سازه و تأسیسات و تهیه نقشه‌های اجرایی.' },
-  { step: '۰۳', title: 'اجرا و کنترل کیفیت', desc: 'ساخت با نظارت مستمر، گزارش ماهانه پیشرفت و کنترل هزینه.' },
-  { step: '۰۴', title: 'تحویل و پشتیبانی', desc: 'تحویل کلید، آموزش بهره‌برداری و پنج سال پشتیبانی فنی.' },
-]
+import { useSectionHeading, useSite } from '../api'
+import { AddItemButton, EditableItem } from '../admin/Editable'
 
 export function ServicesPage() {
+  const { process_steps } = useSite()
+    const heading = useSectionHeading('process')
+
   return (
     <>
-      <PageHero
-        title="خدمات"
-        lead="هشت حوزه تخصصی که چرخه کامل یک پروژه ساختمانی را از ایده تا بهره‌برداری پوشش می‌دهند."
-        image={IMAGES[1]}
-      />
-      
+      <PageHero pageKey="services" />
+
       <Services />
 
       <section className="bg-char py-24 lg:py-32" aria-labelledby="process-title">
         <div className="mx-auto max-w-site px-6 lg:px-10">
-          <SectionHeading title="فرآیند کار ما" lead="چهار مرحله شفاف، از نخستین جلسه تا تحویل کلید." align="center" />
+          <SectionHeading title={heading.title} lead={heading.lead} align="center" />
           <div className="mt-14 grid gap-px bg-ivory/10 md:grid-cols-2 lg:grid-cols-4">
-            {PROCESS.map((item, i) => (
-              <Reveal key={item.step} delay={0.06 * i} className="h-full">
+            {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>
@@ -46,4 +42,4 @@ export function ServicesPage() {
       <ContactSection />
     </>
   )
-}
+}

frontend/vite.config.ts

@@ -4,4 +4,11 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    // در حالت توسعه، /api و /media به Traefik پروکسی می‌شوند (پورت ۵۱۷۳ روی هاست)
+    proxy: {
+      '/api': 'http://localhost:5173',
+      '/media': 'http://localhost:5173',
+    },
+  },
 })