طراحی سایت خدمات ساخت انواع تابلو تبلیغاتی

---

شرح پروژه

یک سایت نیازمندیم جهت گرفتن سفارشات انواع تابلوهای تبلیغاتی از قبیل چنلیوم، نیونی و... 

دارای پنل ادمین و پنل همکاران جهت همکاری

سئوی مجزا برای هرنوع سبک تابلو 

قسمت معرفی، نمونه کارها، فرم سفارش تابلو به همراه تخمین قیمت 

سند کامل: 

**مستندات جامع نیازمندی‌های فنی و طراحی پروژه وب‌سایت داتیس (DATIS)**
**تاریخ به‌روزرسانی:** ۱۴۰۵/۰۴/۰۱

این سند شامل تمامی جزئیات فنی، معماری سیستم، طراحی رابط/تجربه کاربری و نیازمندی‌های سئو جهت توسعه وب‌سایت «داتیس» است. هدف اصلی این پلتفرم، جذب مشتریان نهایی (B2C) و همکاران (B2B) برای سفارش طراحی و ساخت انواع تابلوهای تبلیغاتی (۳ بعدی، نئون، چلنیوم و...) با ارائه یک تجربه کاربری لوکس و تعاملی است.

---

### ۱. هویت برند و استایل بصری (UI/UX)
*   **تم کلی:** مدرن، لوکس، آینده‌نگر (تداعی‌کننده حس تابلوهای روشن شهری در شب).
*   **پالت رنگی:**
    *   پس‌زمینه: گرادینت تیره (`#0a0a0f` تا `#0d1117`).
    *   رنگ اصلی: فیروزه‌ای درخشان (`#22d3ee` تا `#06b6d4`).
    *   رنگ‌های مکمل و لهجه: سفید، نقره‌ای، طلایی ملایم و بنفش نئونی (به عنوان رنگ هشدار یا CTA).
*   **تایپوگرافی:** فونت فارسی Vazirmatn، فونت لاتین و اعداد Poppins.
*   **افکت‌های بصری الزامی:** Neon Glow، Soft Shadow، Glassmorphism (شیشه‌ای)، بافت Grid کم‌رنگ در پس‌زمینه، انیمیشن‌های نرم (Micro-interactions).

### ۲. معماری صفحات و ساختار کلی
*   **هدر (Header):** ثابت، نیمه‌شفاف (Glassmorphism)، شامل لوگو، منو، دکمه ثبت سفارش برجسته.
*   **صفحه اصلی (Home):**
    *   بخش Hero: تایپوگرافی ۳ بعدی، دکمه‌های CTA، کارت‌های شناور.
    *   خدمات: کارت‌های شیشه‌ای با افکت Glow و آیکون‌های اختصاصی.
    *   تخمین قیمت و شبیه‌ساز (بخش کلیدی - توضیحات در بخش ۳).
    *   افتخارات و اعتماد: لوگوی شهرداری‌ها (تهران، ورامین، قرچک)، نظرات مشتریان، اینماد.
*   **پشتیبان هوشمند (AI Chat):** ویجت شناور در تمام صفحات برای مشاوره خودکار در زمینه رنگ، فونت و استایل تابلو.

### ۳. امکانات هسته سیستم (Core Features)

#### ۳.۱. سیستم پیکربندی گرافیکی و تخمین قیمت زنده (Live Visual Builder)
این بخش نیازمند پیاده‌سازی یک فرم چندمرحله‌ای تعاملی با یک بوم (Canvas) گرافیکی است.
*   **منطق رابط کاربری:** استفاده از Layered SVG. یک تصویر/گرافیک پایه (مثلاً زیرساز کامپوزیت) وجود دارد. با انتخاب هر آپشن (مثل لامپ هالوژن، حروف برجسته، نوار نئون)، لایه گرافیکی مربوط به آن روی بوم فعال (Render) می‌شود.
*   **مدیریت وضعیت (State):** استفاده از Zustand یا Redux جهت همگام‌سازی لحظه‌ای گرافیک و قیمت.
*   **ساختار دیتابیس (تعرفه‌ها):**
    جدول خدمات با فیلدهای: `id`, `title`, `category`, `unit_type` (شامل `sqm`, `pm`, `sqcm`, `qty`), `base_price`, `is_addon`.
*   **فرمول محاسبه زنده در فرانت‌اند:**
    $$Total = (Area \times BaseRate) + \sum_{i=1}^{n} (ExtraItem_i \times Quantity_i)$$
    *(نکته امنیتی: این محاسبه صرفاً برای نمایش زنده است. در زمان ثبت سفارش، کل مبلغ باید در بک‌اند با واکشی مجدد تعرفه‌ها از دیتابیس اعتبارسنجی (Validate) شود.)*

#### ۳.۲. شبیه‌سازی محیطی با هوش مصنوعی (AI Environment Simulation)
پس از پیکربندی تابلو، کاربر می‌تواند عکس سردر فروشگاه خود را آپلود کند تا خروجی نهایی را روی مغازه خود ببیند.
*   **روند کار (Workflow):**
    1. کاربر محدوده نصب تابلو را روی عکس خود مشخص می‌کند (Crop/Select).
    2. استیت (State) نهایی پیکربندی کاربر در بک‌اند به یک Prompt متنی تبدیل می‌شود.
    3. ارسال تصویر و پرامپت به API هوش مصنوعی (مدل‌های Inpainting مثل ControlNet/Stable Diffusion).
*   **نمونه پرامپت پایه برای معماری:**
    ```text
    Architectural exterior photography of a modern commercial storefront at dusk. Wide shot from street level in a normal city street. The main signboard is a dark grey aluminum composite panel with visible realistic textures... [Dynamic User Choices Inserted Here] ... glowing from the inside with cyan and white LED light. Photorealistic, unedited street photography, 8k. --ar 16:9 --style raw
    ```

#### ۳.۳. پورتال همکاران (B2B)
*   فرم ثبت‌نام اختصاصی با قابلیت آپلود مدارک هویتی و شغلی.
*   نقش کاربری مجزا (`role: partner`).
*   پس از تأیید ادمین، همکاران در پنل خود قیمت‌ها را با کسر درصد تخفیف همکاری (محاسبه شده در سمت سرور) مشاهده می‌کنند و می‌توانند سفارشات انبوه ثبت کنند.

#### ۳.۴. سئو و صفحات داینامیک نمونه‌کارها
*   پیاده‌سازی Dynamic Routing در Next.js (مسیر `/portfolio/[slug]/`).
*   هر پروژه باید صفحه مجزا با قابلیت SSR برای Meta Title/Description داشته باشد.
*   تولید خودکار Schema Markup (از نوع Product یا CreativeWork).
*   ساختار صفحه: عنوان، توضیحات متنی بلند (سئو محور)، متریال استفاده شده، ابعاد، گالری تصاویر، Breadcrumbs.

### ۴. پنل مدیریت (Admin Panel)
مدیریت کامل سیستم بدون نیاز به تغییر در کد:
*   مدیریت تعرفه‌ها و فرمول‌های قیمت‌گذاری (به‌روزرسانی قیمت پایه واحدها).
*   بررسی، تأیید یا رد مدارک همکاران.
*   مدیریت سفارشات دریافتی (تغییر وضعیت سفارش: در انتظار، در حال ساخت، نصب، تکمیل).
*   مدیریت محتوای سایت (نمونه‌کارها، افزودن/حذف خدمات).

### ۵. معماری فنی و امنیت (Tech Stack & Security)
*   **تکنولوژی‌های اصلی:** Next.js (استفاده از App Router و Route Handlers)، پایگاه داده PostgreSQL، ORM Prisma.
*   **احراز هویت:** پیاده‌سازی NextAuth.js با تفکیک نقش‌ها (Guest, User, Partner, Admin).
*   **مدیریت فایل‌ها:** سیستم آپلود امن برای تصاویر کاربران و مدارک. محدودیت نوع فایل (MIME type checking)، محدودیت حجم، تغییر نام رندوم فایل‌ها در سرور، و جلوگیری از دسترسی مستقیم (Direct Access) به پوشه مدارک هویتی همکاران.
*   **جلوگیری از دستکاری:** تمام قیمت‌ها، تخفیف‌ها و نقش‌ها باید سمت سرور اعتبارسنجی شوند و به مقادیر ارسالی از سمت کلاینت اعتمادی نشود.

مهارت ها و تخصص های مورد نیاز

---

---