بازگشت به پروژه‌ها

NOIR & GOLD — Luxury Coffee E-commerce

یک فروشگاه اینترنتی قهوه لوکس با تجربه بصری سینمایی: صفحه‌ی لودینگ سینمایی، صحنه‌ی سه‌بعدی واقعی در هیرو با فنجان قهوه و بخار متحرک (React Three Fiber)، اسکرول نرم با GSAP و Lenis، رابط شیشه‌ای، فروشگاه با فیلتر و صفحه‌بندی، نمایش ۳۶۰ درجه محصول، سبد خرید/علاقه‌مندی/تسویه‌حساب و احراز هویت دمو — کاملاً ریسپانسیو.

Next.jsReactThree.jsGSAPTailwind CSS
01معرفی کلی

نقش

نقش خودت در این پروژه رو اینجا اضافه کن.

بازه‌ی زمانی

بازه‌ی زمانی پروژه رو اینجا اضافه کن.

تیم

اندازه‌ی تیم یا همکاران رو اینجا اضافه کن.

02چالش

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

03رویکرد

روی یک پایه‌ی سریع Next.js/React، یک صحنه‌ی سه‌بعدی واقعی (React Three Fiber) با فنجان قهوه‌ی متحرک ساخته شد، حرکت صفحه با GSAP و Lenis هدایت شد تا ریتم سینمایی و نرمی داشته باشه، و رابط کاربری با سبک شیشه‌ای (glassmorphism) طراحی شد.

04راه‌حل

یک جریان کامل فروشگاهی شامل فیلتر و صفحه‌بندی محصولات، نمایشگر ۳۶۰ درجه‌ی محصول، سبد خرید، علاقه‌مندی‌ها، تسویه‌حساب و احراز هویت دمو، به‌صورت کاملاً ریسپانسیو در تمام سایزها.

05معماری
کلاینت (مرورگر)
Next.js / React
React Three Fiber (صحنه‌ی سه‌بعدی)
GSAP + Lenis (اسکرول و حرکت)
Tailwind CSS (رابط کاربری)
06ویژگی‌های کلیدی
  • صحنه‌ی سه‌بعدی زنده در هیرو با فنجان قهوه‌ی بخاردار
  • اسکرول نرم با GSAP و Lenis
  • نمایشگر ۳۶۰ درجه‌ی محصول
  • سبد خرید، علاقه‌مندی، تسویه‌حساب و احراز هویت دمو
07عملکرد

معیارهای واقعی عملکرد (مثل امتیاز Lighthouse) رو بعد از اندازه‌گیری اینجا اضافه کن.

08نتیجه

نتیجه‌ی واقعی این پروژه رو اینجا اضافه کن.

بازگشت به پروژه‌ها