تجربه: 3

سن: 18 الی 30

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

جای خالی: 1

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

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

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

در طراحی صفحه اول، پیش از رسیدن به نسخه نهایی، نیاز است مجموعه‌ای از کارت‌های کوچک و شکیل برای معرفی آدرس‌ها، گیت‌ها و ریپازیتوری‌های مرتبط با متاورس رنگ در صفحه قرار داده شود.

در این بخش، ریپازیتوری‌های موجود از لیست مربوطه استخراج شده و موارد مرتبط با متاورس رنگ، عنوان هایی مانند نسخه فارسی: متاورس رنگ ,میکروسرویس متاورس رنگ NPC های نیمه هوشمند,  متاورس رنگ فرانت نکست,  متاورس رنگ فرانت ریکت,
 نسخه انگلیسی:  Metaverse Rang Microservice,  Metaverse Rang-Semi intelligent NPC Metaverse Rang Front NextJS,  Metaverse Rang Front ReactJS  نمایش داده شوند.

برای هر مورد، یک آیکون متناسب با آن در نظر گرفته شود و کارت‌ها از نظر ظاهر و ساختار با سیستم دیزاین فعلی صفحه اول و گروه‌های کاری موجود هماهنگ باشند.

تعداد ریپازیتوری‌ها حدود ۱۵ مورد است و کارت‌ها باید به‌صورت منظم و شکیل، به شکل دوتایی زیر یکدیگر قرار بگیرند. در صورت زیاد بودن تعداد کارت‌ها، بخشی از کارت‌ها نمایش داده شده و گزینه «مشاهده بیشتر» در همین بخش قرار گیرد تا با کلیک روی آن، ادامه کارت‌ها به سمت پایین باز شده و قابل مشاهده باشند.

روی هر کارت علاوه بر نام، وضعیت Public / Open Source نیز لحاظ شود؛ به این صورت که مشخص باشد ریپازیتوری موردنظر Open Source و Public است.

همچنین برای هر کارت، آیکون GitHub و آیکون مربوط به گروه موردنظر قرار گیرد تا کاربر با کلیک روی هر آیکون، مستقیماً وارد گروه مربوطه شود. آدرس GitHub نیز در محل تعیین‌شده وارد شود.

الزامات تسک

• طراحی کارت‌ها در ابعاد کوچک و متناسب با فضای صفحه اول انجام شود و کارت‌ها بیش از حد درشت نباشند.
• کارت‌ها باید با سیستم دیزاین فعلی صفحه اول کاملاً هماهنگ باشند.
• ظاهر کارت‌ها باید شکیل و منظم باشد.
• برای هر ریپازیتوری یا گروه، آیکون متناسب در نظر گرفته شود.
• نام ریپازیتوری‌ها از لیست موجود استخراج و در کارت‌ها درج شود.
• موارد مرتبط با متاورس رنگ با عنوان مناسب، مانند «متاورس رنگ» و «میکروسرویس»، در کارت‌ها نمایش داده شوند.
• تعداد کارت‌ها با توجه به تعداد ریپازیتوری‌های موجود، حدود ۱۵ مورد در نظر گرفته شود.
• کارت‌ها به‌صورت دوتایی زیر یکدیگر چیدمان شوند.
• در صورت زیاد بودن تعداد کارت‌ها، تعداد مناسبی از کارت‌ها در ابتدا نمایش داده شود.
• گزینه «مشاهده بیشتر» در همین بخش قرار گیرد.
• با کلیک روی «مشاهده بیشتر»، سایر کارت‌ها به سمت پایین باز شده و قابل مشاهده باشند.
• روی کارت‌ها وضعیت Public / Open Source درج شود.
• برای هر کارت آیکون GitHub قرار داده شود.
• آیکون مربوط به گروه نیز روی کارت قرار گیرد.
• با کلیک روی آیکون گروه، کاربر به گروه مربوطه هدایت شود.
• با کلیک روی آیکون GitHub، کاربر وارد گروه GitHub مربوطه شود.
• آدرس GitHub مربوط به هر مورد در کارت و لینک آن لحاظ شود.
• کارت‌ها در صفحه اول اعمال شوند.
• پیاده‌سازی نهایی مطابق ساختار و استاندارد سیستم دیزاین موجود انجام شود.

وظایف اجرایی

• بررسی طراحی فعلی صفحه اول و سیستم دیزاین موجود.
• بررسی لیست ریپازیتوری‌ها و استخراج نام موارد مرتبط با متاورس رنگ.
• طراحی ساختار کارت‌های کوچک معرفی ریپازیتوری‌ها و گروه‌های کاری.
• اختصاص آیکون مناسب برای هر مورد.
• درج نام هر ریپازیتوری یا گروه روی کارت.
• درج وضعیت Public / Open Source روی کارت‌ها.
• قرار دادن آیکون GitHub و آیکون گروه روی هر کارت.
• اتصال آیکون GitHub به آدرس مربوط به همان گروه.
• اتصال آیکون گروه به گروه مربوطه.
• طراحی چیدمان کارت‌ها به‌صورت دوتایی زیر یکدیگر.
• پیاده‌سازی نمایش تعداد اولیه‌ای از کارت‌ها.
• اضافه کردن گزینه «مشاهده بیشتر».
• پیاده‌سازی باز شدن ادامه کارت‌ها به سمت پایین پس از انتخاب «مشاهده بیشتر».
• اعمال کامل این بخش در طراحی و پیاده‌سازی صفحه اول.
• بررسی نهایی هماهنگی کارت‌ها با سیستم دیزاین صفحه اول.

خروجی نهایی

• پیاده‌سازی بخش کارت‌های معرفی ریپازیتوری‌ها و گروه‌های کاری در صفحه اول.
• نمایش حدود ۱۵ ریپازیتوری و گروه مرتبط با متاورس رنگ.
• کارت‌های کوچک، شکیل و هماهنگ با سیستم دیزاین.
• نمایش نام ریپازیتوری‌ها و گروه‌ها.
• نمایش وضعیت Public / Open Source.
• نمایش آیکون اختصاصی هر مورد.
• نمایش آیکون GitHub و آیکون گروه.
• فعال بودن لینک ورود به گروه GitHub و گروه مربوطه.
• پیاده‌سازی چیدمان دوتایی کارت‌ها.
• پیاده‌سازی گزینه «مشاهده بیشتر» و نمایش ادامه کارت‌ها در همان بخش.
• اعمال کامل تغییرات در صفحه اول.
• طراحی با سیستم دیزاین هماهنگ باشد  و حتما پس از اتمام تسک سیستم دیزاین با کارت و طراحی صورت گرفته بروز شود

لینک فیگمای خارجی نکست که سیستم دیزاین مجموعه در ان
https://www.figma.com/file/qyvJ4Sjw4h5gRIrE9KotBY/ui-next-mobile?type=design&node-id=1279-258&mode=design&t=EEC5Ob4kYhuECyM3-0