تجربه: 2

سن: 18 الی 40

محدوده حقوق و دستمزد: قابل مذاکره

جای خالی: 1

طبیعت شغلی : پیمانی

تاریخ ارسال : 2025.10.20

آخرین تاریخ : 2025.11.08

عنوان تسک

کدنویسی صفحه اول مقالات و دسته بندی ها (Article Main Page) با حالت‌های لایت و دارک

---

شرح تسک

در این تسک باید صفحه اصلی مقالات و دسته بندی ها مطابق طراحی ارائه‌شده در فیگما (Figma) پیاده‌سازی و توسعه داده شود.

صفحه باید شامل تمامی بخش‌های مشخص‌شده در طراحی باشد و به‌صورت کامل از سیستم دیزاین سامانه استفاده کند.

---

ویژگی‌ها و الزامات

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

   • رعایت فاصله‌ها، سایز فونت‌ها، رنگ‌ها و ساختار کارت‌ها.

   • استفاده از کامپوننت‌ها و استایل‌های موجود در سیستم دیزاین.

2. حالت‌های لایت و دارک (Light / Dark Mode)

   • پیاده‌سازی سوئیچ بین دو حالت.

   • رنگ‌بندی مطابق راهنمای طراحی هر حالت.

3. اتصال ترنسلیت (i18n)

   • اضافه‌کردن ترجمه‌ها برای زبان‌های فارسی و انگلیسی.

   • بررسی تمام متون استاتیک و اتصال آن‌ها به سیستم ترجمه (i18next یا سیستم مشابه).

4. اجزای صفحه طبق طراحی:

   • کادر جستجو

   • بخش نویسندگان برتر

   • دسته‌بندی‌های مقالات

   • کارت‌های مقالات (با تصویر، عنوان، نویسنده، تاریخ و خلاصه محتوا)

5. واکنش‌گرایی کامل (Responsive Design)

   • سازگاری کامل با نمایشگرهای دسکتاپ، تبلت و موبایل.

   • بررسی در مرورگرهای اصلی (Chrome, Safari, Edge).

---

جزئیات فنی پیشنهادی

• مدیریت ترجمه: react-i18next یا سیستم ترجمه فعلی پروژه

• استفاده از کامپوننت‌های آماده سیستم دیزاین سامانه

• رعایت اصول بهینه‌سازی (Lazy Loading برای تصاویر و کارت‌ها)

---

معیار پذیرش (Acceptance Criteria)

• طراحی و ساختار صفحه دقیقاً مطابق فیگما باشد.

• حالت‌های لایت و دارک به‌درستی و بدون باگ کار کنند.

• ترجمه‌ها برای هر دو زبان فارسی و انگلیسی فعال و بدون خطا باشند.

• صفحه به‌صورت کامل واکنش‌گرا و تست‌شده روی همه سایزها باشد.

• کد تمیز، بهینه و هماهنگ با معماری فعلی پروژه نوشته شود.

• انجام کامل سئو و اسکیما صفحات اول مقالات و دسته بندی ها

• 
  

---

تحویل‌دادنی‌ها (Deliverables)

• سورس‌کد کامل صفحه مقالات

• فایل ترجمه (fa.json و en.json) با مقادیر مرتبط

• ویدیو یا اسکرین‌شات از عملکرد حالت‌های لایت، دارک و زبان‌ها

• لینک پیش‌نمایش در محیط staging یا توسعه

---

اولویت

بالا — این صفحه از بخش‌های اصلی محتوایی سامانه است و در نسخه اولیه وب‌سایت متاورس رنگ منتشر می‌شود.
------------------------------------------------------------------------------------------------------------
منابع لازمه تسک:

لینک فیگما:
https://www.figma.com/design/sMuoKrJG3vFwXDChULYUXk/Metaverse-RGB-beta-v?node-id=2973-3354&t=bqiF9khlqRQ73ukM-0

دسترسی به ریپازیتوری پروژه نکست خارجی متارنگ :

https://github.com/iranpsc/Metaverse-Rang-Front-NextJS

لینک فیگما بخش های خارجی متارنگ :

https://www.figma.com/design/qyvJ4Sjw4h5gRIrE9KotBY/ui-next?node-id=1957-4055&t=43QGHNIE6h4i1O8I-1

لینک سایت رسمی پروژه :

https://rgb.irpsc.com/fa

دسترسی به سامانه مدیریت بر مدیران :

https://crm.irpsc.com