کدنویسی وردپرس براساس طرح فیگما + توسعه و بازطراحی فنی لندینگ

عنوان پروژه

کدنویسی وردپرس براساس طرح فیگما + توسعه و بازطراحی فنی لندینگ 

📝 خلاصه پروژه

ن یک صفحه لندینگ موجود است که پیش‌تر کدنویسی شده، اما نیاز به بازبینی و بهبود فنی، تغییرات جزئی در ساختار Front/Back-end و پیاده‌سازی فرم سه‌مرحله‌ای با ذخیره داده در هر مرحله دارد.

تمام صفحات باید فول‌داینامیک، مبتنی بر وردپرس و متصل به سایت اصلی باشند.

🎯 اهداف پروژه

اهداف اصلی

• پیاده‌سازی دقیق و وفادار به فیگما (Pixel-perfect)
• داینامیک بودن کامل بلاک‌ها، سکشن‌ها و کانتنت
• بهبود عملکرد لندینگ موجود و اصلاح ساختار کدنویسی
• پیاده‌سازی فرم چندمرحله‌ای با ذخیره دیتا در هر مرحله

اهداف فنی تکمیلی

• اتصال لندینگ و ساختار دیتابیس به سایت اصلی
• امکان اتصال به CRM در آینده (در صورت نیاز)
• آماده بودن برای توسعه نسخه‌های بعدی

دامنه و محدوده کار (Scope of Work)

1️⃣ کدنویسی سایت طبق طرح فیگما

• پیاده‌سازی UI دقیق مطابق فیگما
• رعایت Grids، فاصله‌ها، تایپوگرافی، رنگ‌ها و کامپوننت‌ها
• پیاده‌سازی به‌صورت:
  • ریسپانسیو کامل (Mobile / Tablet / Desktop)
  • سازگار با مرورگرهای اصلی

2️⃣ فول داینامیک بودن صفحات

تمام بخش‌ها باید از طریق پنل وردپرس قابل مدیریت باشند:

• بنرها و تصاویر
• متن‌ها و هدلاین‌ها
• لیست‌ها، کارت‌ها و بخش‌های اطلاعاتی
• اسلایدرها و CTAها
• فرم‌ها و پیام‌های وضعیت

 هیچ بخشی نباید به‌صورت Hard-code و ثابت نوشته شود.

3️⃣ توسعه لندینگ موجود (Refactor + Update)

یک لندینگ از قبل کدنویسی شده و اکنون:

• ساختار کدنویسی بررسی و بهبود داده شود
• برخی المان‌ها مطابق فیگمای جدید اصلاح شوند
• در صورت نیاز تغییر در ساختار سکشن‌ها اعمال شود
• سرعت و عملکرد صفحه بهینه شود

4️⃣ فرم سه‌مرحله‌ای با ذخیره اطلاعات مرحله‌ای

• بعد از هر مرحله داده‌ها باید در دیتابیس ذخیره شوند
• حتی اگر کاربر ثبت نهایی انجام ندهد، داده‌ها محفوظ بماند
• امکان Tracking و مشاهده رکوردهای نیمه‌کامل
• ذخیره هشدار خطاها و وضعیت تکمیل فرم
• قابلیت اتصال به CRM در آینده

🔗 اتصال به سایت اصلی

• اجرای پروژه بر بستر وردپرس
• اتصال به سایت اصلی یا ساب‌دامین
• اشتراک ساختار دیتابیس در صورت نیاز
• هماهنگی روی مسیر URL و ساختار Routing

⚙️ ملاحظات فنی و کیفیت اجرا

• کدنویسی تمیز و ماژولار
• عدم وابستگی به Page Builderهای سنگین
• امکان توسعه آتی بدون بازنویسی کامل
• نگهداری ساختار منطبق بر فیگما

بهینه‌سازی پایه:

• سرعت و Performance
• ساختار SEO-friendly
• استفاده از Lazy load برای تصاویر

📂 ورودی‌های موردنیاز از کارفرما (Inputs)

• دسترسی کامل به فایل‌های فیگما
• دسترسی هاست / وردپرس / staging