روبات مارکت — Vending Machine Showcase
صفحه معرفی دستگاه‌های وندینگ روبات مارکت، ساخته‌شده با Next.js، React و Ant Design.
اجرا
npm install
npm run dev
سایت در http://localhost:3000 در دسترس است.
ساخت نسخه نهایی
npm run build
npm start
خروجی standalone برای اجرای Docker تنظیم شده است.
ساختار و بخش‌های فعال
app/page.jsx: صفحه اصلی شامل هدر، سبد خرید، هیرو، ویترین دستگاه‌ها، مزایا، درباره ما، محل‌های مناسب نصب و فوتر.components/HeroSection.jsx: اسلایدر تصاویر دستگاه‌ها.components/ShowcaseSection.jsx: انتخاب نمایش موبایل یا ویترین افقی دسکتاپ.components/HorizontalShowcase.jsx: ویترین افقی با GSAP و ویدیوی پس‌زمینه وابسته به اسکرول.components/MobileShowcase.jsx: فهرست دستگاه‌ها در موبایل.components/VendingCard.jsxوcomponents/FloatingItems.jsx: نمایش دستگاه و جلوه‌های تصویری.components/CartDrawer.jsxوstore/: سبد خرید و مدیریت تعداد دستگاه‌ها با Redux.data/content.js: محتوای فارسی و انگلیسی، مشخصات و قیمت دستگاه‌ها و مسیر رسانه‌ها.app/context/وapp/providers.jsx: زبان، جهت صفحه، تم و تنظیمات Ant Design.app/globals.css: رنگ‌ها و استایل‌های مشترک.public/: تصاویر دستگاه‌ها، اقلام شناور، گیف‌ها و ویدیوی ویترین.
زبان و تم
زبان فارسی/انگلیسی و حالت روشن/تیره از هدر تغییر می‌کنند و ترجیح کاربر در localStorage ذخیره می‌شود. ویترین افقی برای محاسبات اسکرول همیشه جهت LTR دارد، اما متن کارت‌ها جهت زبان فعال را رعایت می‌کند.
ورود و سبد خرید
دکمه ورود به https://panel.my-rm.com متصل است.
سبد خرید در حافظه نگه‌داری می‌شود و با بارگذاری مجدد صفحه پاک می‌شود.
پرداخت هنوز متصل نیست؛ دکمه پرداخت در CartDrawer.jsx پیام نمایشی نشان می‌دهد.
تنظیم API
برای تعیین آدرس بک‌اند، از .env.local.example یک فایل .env.local بسازید و
NEXT_PUBLIC_API_BASE_URL را تنظیم کنید. کلاینت مشترک API در lib/axios.js قرار دارد.
جایگزینی رسانه‌ها
فایل‌های واقعی را با مسیرهای موجود در data/content.js جایگزین کنید یا مسیرها را در همان فایل تغییر دهید.
ویدیوی پس‌زمینه ویترین از public/video/showcase-placeholder.mp4 خوانده می‌شود.