From 87b518cf4e728687de5202423b4cac64aa0805e8 Mon Sep 17 00:00:00 2001 From: Hamed Date: Sat, 1 Aug 2026 14:48:50 +0400 Subject: [PATCH] update --- .env.example | 2 - .eslintrc.json | 3 - .gitignore | 10 +- .idea/workspace.xml | 89 +- README.md | 222 +- jsconfig.json | 12 +- next.config.mjs | 13 - package-lock.json | 4913 +---------------- package.json | 14 +- public/icons/icon-maskable.svg | 11 - public/icons/icon.svg | 11 - public/icons/og-placeholder.svg | 12 - public/svg/floating/chip.svg | 5 - public/svg/floating/cola.svg | 4 - public/svg/floating/cookie.svg | 7 - public/svg/floating/drink.svg | 4 - public/svg/floating/juice.svg | 5 - public/svg/floating/snack.svg | 4 - public/svg/floating/water.svg | 5 - public/svg/machines/machine35/base.svg | 4 - public/svg/machines/machine35/body.svg | 4 - public/svg/machines/machine35/door.svg | 4 - public/svg/machines/machine35/panel.svg | 9 - public/svg/machines/machine35/screen.svg | 4 - public/svg/machines/machine35/shelves.svg | 1 - public/svg/machines/machine48/base.svg | 4 - public/svg/machines/machine48/body.svg | 4 - public/svg/machines/machine48/door.svg | 4 - public/svg/machines/machine48/panel.svg | 9 - public/svg/machines/machine48/screen.svg | 4 - public/svg/machines/machine48/shelves.svg | 1 - public/svg/machines/machine60/base.svg | 4 - public/svg/machines/machine60/body.svg | 4 - public/svg/machines/machine60/door.svg | 4 - public/svg/machines/machine60/panel.svg | 9 - public/svg/machines/machine60/screen.svg | 4 - public/svg/machines/machine60/shelves.svg | 1 - src/app/dashboard/page.js | 49 - src/app/globals.css | 71 - src/app/layout.js | 101 - src/app/loading.js | 11 - src/app/manifest.js | 22 - src/app/not-found.js | 23 - src/app/page.js | 28 - src/app/robots.js | 10 - src/app/sitemap.js | 30 - src/components/animations/ScrollReveal.jsx | 65 - src/components/common/Container.jsx | 13 - src/components/common/GlassCard.jsx | 41 - src/components/common/MagneticButton.jsx | 129 - src/components/common/Section.jsx | 17 - src/components/hero/FloatingProducts.jsx | 113 - src/components/hero/Hero.jsx | 63 - src/components/hero/HeroBackground.jsx | 87 - src/components/hero/MachineAssembly.jsx | 141 - src/components/layout/About.jsx | 70 - src/components/layout/ContactCta.jsx | 33 - src/components/layout/Footer.jsx | 85 - src/components/layout/Navbar.jsx | 127 - src/components/products/MachineVisual.jsx | 57 - src/components/products/ProductSection.jsx | 134 - src/components/products/ProductsShowcase.jsx | 190 - .../products/SectionFloatingItems.jsx | 86 - src/components/ui/AntThemeProvider.jsx | 38 - src/constants/motion.js | 9 - src/constants/nav.js | 12 - src/constants/theme.js | 26 - src/data/floatingProducts.json | 9 - src/data/products.json | 79 - src/hooks/useIsomorphicLayoutEffect.js | 11 - src/hooks/useReducedMotion.js | 24 - src/redux/provider.jsx | 19 - src/redux/slices/authSlice.js | 45 - src/redux/slices/productsSlice.js | 44 - src/redux/slices/uiSlice.js | 44 - src/redux/store.js | 20 - src/services/auth.service.js | 31 - src/services/axios.js | 45 - src/services/dashboard.service.js | 23 - src/services/product.service.js | 30 - src/utils/breakpoints.js | 13 - src/utils/cn.js | 9 - src/utils/formatPrice.js | 10 - src/utils/gsapConfig.js | 16 - tailwind.config.js | 71 +- 85 files changed, 261 insertions(+), 7587 deletions(-) delete mode 100644 .env.example delete mode 100644 .eslintrc.json delete mode 100644 next.config.mjs delete mode 100644 public/icons/icon-maskable.svg delete mode 100644 public/icons/icon.svg delete mode 100644 public/icons/og-placeholder.svg delete mode 100644 public/svg/floating/chip.svg delete mode 100644 public/svg/floating/cola.svg delete mode 100644 public/svg/floating/cookie.svg delete mode 100644 public/svg/floating/drink.svg delete mode 100644 public/svg/floating/juice.svg delete mode 100644 public/svg/floating/snack.svg delete mode 100644 public/svg/floating/water.svg delete mode 100644 public/svg/machines/machine35/base.svg delete mode 100644 public/svg/machines/machine35/body.svg delete mode 100644 public/svg/machines/machine35/door.svg delete mode 100644 public/svg/machines/machine35/panel.svg delete mode 100644 public/svg/machines/machine35/screen.svg delete mode 100644 public/svg/machines/machine35/shelves.svg delete mode 100644 public/svg/machines/machine48/base.svg delete mode 100644 public/svg/machines/machine48/body.svg delete mode 100644 public/svg/machines/machine48/door.svg delete mode 100644 public/svg/machines/machine48/panel.svg delete mode 100644 public/svg/machines/machine48/screen.svg delete mode 100644 public/svg/machines/machine48/shelves.svg delete mode 100644 public/svg/machines/machine60/base.svg delete mode 100644 public/svg/machines/machine60/body.svg delete mode 100644 public/svg/machines/machine60/door.svg delete mode 100644 public/svg/machines/machine60/panel.svg delete mode 100644 public/svg/machines/machine60/screen.svg delete mode 100644 public/svg/machines/machine60/shelves.svg delete mode 100644 src/app/dashboard/page.js delete mode 100644 src/app/globals.css delete mode 100644 src/app/layout.js delete mode 100644 src/app/loading.js delete mode 100644 src/app/manifest.js delete mode 100644 src/app/not-found.js delete mode 100644 src/app/page.js delete mode 100644 src/app/robots.js delete mode 100644 src/app/sitemap.js delete mode 100644 src/components/animations/ScrollReveal.jsx delete mode 100644 src/components/common/Container.jsx delete mode 100644 src/components/common/GlassCard.jsx delete mode 100644 src/components/common/MagneticButton.jsx delete mode 100644 src/components/common/Section.jsx delete mode 100644 src/components/hero/FloatingProducts.jsx delete mode 100644 src/components/hero/Hero.jsx delete mode 100644 src/components/hero/HeroBackground.jsx delete mode 100644 src/components/hero/MachineAssembly.jsx delete mode 100644 src/components/layout/About.jsx delete mode 100644 src/components/layout/ContactCta.jsx delete mode 100644 src/components/layout/Footer.jsx delete mode 100644 src/components/layout/Navbar.jsx delete mode 100644 src/components/products/MachineVisual.jsx delete mode 100644 src/components/products/ProductSection.jsx delete mode 100644 src/components/products/ProductsShowcase.jsx delete mode 100644 src/components/products/SectionFloatingItems.jsx delete mode 100644 src/components/ui/AntThemeProvider.jsx delete mode 100644 src/constants/motion.js delete mode 100644 src/constants/nav.js delete mode 100644 src/constants/theme.js delete mode 100644 src/data/floatingProducts.json delete mode 100644 src/data/products.json delete mode 100644 src/hooks/useIsomorphicLayoutEffect.js delete mode 100644 src/hooks/useReducedMotion.js delete mode 100644 src/redux/provider.jsx delete mode 100644 src/redux/slices/authSlice.js delete mode 100644 src/redux/slices/productsSlice.js delete mode 100644 src/redux/slices/uiSlice.js delete mode 100644 src/redux/store.js delete mode 100644 src/services/auth.service.js delete mode 100644 src/services/axios.js delete mode 100644 src/services/dashboard.service.js delete mode 100644 src/services/product.service.js delete mode 100644 src/utils/breakpoints.js delete mode 100644 src/utils/cn.js delete mode 100644 src/utils/formatPrice.js delete mode 100644 src/utils/gsapConfig.js diff --git a/.env.example b/.env.example deleted file mode 100644 index 123f66c..0000000 --- a/.env.example +++ /dev/null @@ -1,2 +0,0 @@ -# Base URL for the future backend API -NEXT_PUBLIC_API_BASE_URL=https://api.robotmarket.example.com diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index bffb357..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "next/core-web-vitals" -} diff --git a/.gitignore b/.gitignore index 18d2aec..95ac1a8 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,6 @@ -node_modules -.next -out -.env* +node_modules/ +.next/ +out/ +.env*.local .DS_Store -*.log +npm-debug.log* diff --git a/.idea/workspace.xml b/.idea/workspace.xml index d7fe5dc..a9a9e75 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -1,6 +1,58 @@ - {} + + + + + + + + + + + + + + + + + + + + + { + "customColor": "", + "associatedIndex": 2 +} + + + + { + "keyToString": { + "ModuleVcsDetector.initialDetectionPerformed": "true", + "RunOnceActivity.ShowReadmeOnStart": "true", + "RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252": "true", + "RunOnceActivity.git.unshallow": "true", + "RunOnceActivity.typescript.service.memoryLimit.init": "true", + "codeWithMe.voiceChat.enabledByDefault": "false", + "git-widget-placeholder": "main", + "js.debugger.nextJs.config.created.client": "true", + "js.debugger.nextJs.config.created.server": "true", + "node.js.detected.package.eslint": "true", + "node.js.selected.package.eslint": "(autodetect)", + "nodejs_package_manager_path": "npm", + "settings.editor.selected.configurable": "editor.preferences.fonts.default", + "ts.external.directory.path": "C:\\Program Files\\JetBrains\\WebStorm 2026.1.1\\plugins\\javascript-plugin\\jsLanguageServicesImpl\\external", + "vue.rearranger.settings.migration": "true" + } +} @@ -16,4 +68,39 @@ + + + + + + + + + + 1785394346997 + + + + + + + + + \ No newline at end of file diff --git a/README.md b/README.md index 9865636..fa688e3 100644 --- a/README.md +++ b/README.md @@ -1,138 +1,132 @@ -# روبات مارکت — Robot Market Landing +# روبات مارکت — Vending Machine Showcase -A cinematic, RTL, Persian-language landing page for **Robot Market**, a -smart refrigerated vending-machine brand. Built with Next.js (App Router), -Tailwind CSS, Ant Design, Redux Toolkit, Axios and GSAP + ScrollTrigger. +پروژه Next.js (App Router) صفحه معرفی محصولات «روبات مارکت»، با انیمیشن‌های GSAP/ScrollTrigger، +مدیریت سبد خرید با Redux Toolkit، حالت تیره/روشن، دو زبانه (فارسی/انگلیسی)، نقشه، فرم تیکت +پشتیبانی، و ویجت چت. -The centerpiece of the page is a scroll-driven hero animation: scattered -SVG pieces fly together into a fully assembled vending machine as the user -scrolls, followed by a three-act "scroll story" introducing each of the -three product models. - -## Getting started +## اجرای پروژه ```bash npm install npm run dev ``` -Open http://localhost:3000. +سپس `http://localhost:3000` را باز کنید. -```bash -npm run build # production build -npm run start # serve the production build -npm run lint # eslint -``` - -## Tech stack - -| Concern | Library | -| ------------------- | -------------------------------- | -| Framework | Next.js 14 (App Router, JS only) | -| Styling | Tailwind CSS | -| Component library | Ant Design (RTL-configured) | -| State management | Redux Toolkit | -| HTTP client | Axios | -| Animation | GSAP + ScrollTrigger + @gsap/react | -| Icons | react-icons | -| Font | Vazirmatn (next/font/google) | - -## Project structure +## ساختار پروژه ``` -src/ - app/ Routes (App Router): layout, page, dashboard, - robots.js, sitemap.js, manifest.js, loading, 404 - components/ - common/ Container, Section, GlassCard, MagneticButton - layout/ Navbar, Footer, About, ContactCta - hero/ Hero, HeroBackground, MachineAssembly, FloatingProducts - products/ ProductsShowcase, ProductSection, MachineVisual - animations/ ScrollReveal (shared scroll-in wrapper) - ui/ AntThemeProvider (Ant Design RTL + token bridge) - redux/ - store.js Store factory (per-request, App-Router-safe) - provider.jsx Client - slices/ auth, products, ui - services/ - axios.js Shared Axios instance + interceptors - auth.service.js // TODO: Connect Login API - product.service.js // TODO: Connect Product API - dashboard.service.js // TODO: Connect Dashboard API - hooks/ useReducedMotion, useIsomorphicLayoutEffect - utils/ cn, formatPrice, gsapConfig, breakpoints - constants/ theme tokens, nav links - data/ products.json, floatingProducts.json (mock data) +app/ + layout.jsx # پوسته HTML، فونت وزیرمتن + page.jsx # چیدمان کامل صفحه + providers.jsx # Redux + Theme + Language + AntD ConfigProvider + globals.css # توکن‌های رنگ دارک/لایت، جلوه اسپات‌لایت، تایپ‌رایتر + context/ + ThemeContext.jsx # حالت دارک/لایت (ذخیره در localStorage) + LanguageContext.jsx # زبان فا/en (ذخیره در localStorage + جهت صفحه) +store/ # Redux (سبد خرید) +data/ + content.js # منبع واحد محتوای دوزبانه (fa/en) — همه‌ی متن‌ها اینجاست +components/ + Header.jsx # هدر + سوییچ زبان/تم + دکمه ورود به پنل کاربری + ThemeToggle.jsx / LanguageToggle.jsx + HeroSection.jsx # هدلاین تایپ‌شونده + پس‌زمینه رنگی در حال چرخش + HorizontalShowcase.jsx # اسکرول افقی پین‌شده + ویدیوی پس‌زمینه + VendingCard.jsx # کارت دستگاه + جلوه اسپات‌لایت + FloatingItems.jsx + FeaturesSection.jsx + AboutSection.jsx + LocationsSection.jsx + MapSection.jsx # نقشه Neshan (کلید API را خودتان اضافه می‌کنید) + CatalogSection.jsx # کاتالوگ محصولات قابل سفارش + IntroVideoSection.jsx # ویدیوی معرفی شرکت + TicketForm.jsx # فرم تیکت پشتیبانی + ChatWidget.jsx # آیکون شناور چت + مودال گفتگو + CartDrawer.jsx + Footer.jsx public/ - svg/machines/machine35|48|60/ Assembly pieces: base, body, door, panel, screen, shelves - svg/floating/ chip, cola, drink, cookie, snack, juice - icons/ Brand icon + OG image placeholders (SVG) + images/, gifs/, video/ # دارایی‌های placeholder — در پیام قبلی توضیح داده شده ``` -## Replacing placeholder assets +## ویژگی‌های اضافه‌شده در این نسخه -Every visual asset in `public/svg` is a deliberately simple placeholder — -swap the files in place (same filenames) and nothing else needs to change: +### نقشه (Neshan) +`components/MapSection.jsx` از **Neshan Static Map API** استفاده می‌کند (یک تصویر ساده، بدون نیاز +به اسکریپت/SDK جاوااسکریپت). کلید API را اینجا وارد کنید: -- `public/svg/machines//*.svg` — the 6 pieces GSAP assembles/positions. - Keep the same `viewBox="0 0 400 700"` coordinate space so pieces still - line up when assembled, or update the piece list in `src/data/products.json`. -- `public/svg/floating/*.svg` — the floating product icons around the hero. -- `public/icons/*.svg` — brand icon and Open Graph placeholder. Replace the - OG placeholder with a real 1200×630 raster (`.png`/`.jpg`) before launch - and update the reference in `src/app/layout.js`. +1. یک فایل `.env.local` در ریشه پروژه بسازید (از روی `.env.local.example` کپی کنید) +2. مقدار `NEXT_PUBLIC_NESHAN_API_KEY` را با کلید واقعی خودتان از + [platform.neshan.org](https://platform.neshan.org) پر کنید -## Connecting the real API +تا وقتی کلید خالی باشد، به‌جای نقشه یک پیام راهنما («برای فعال شدن نقشه، کلید API نشان را در +تنظیمات پروژه قرار دهید») نمایش داده می‌شود — سایت خراب نمی‌شود. نقشه در حالت تیره/روشن هم استایل +متفاوتی می‌گیرد (`standard-night` / `standard-day`). لینک «مشاهده در نشان» کنار هر آدرس به نقشه +تعاملی neshan.org می‌رود و نیازی به کلید ندارد. مختصات فعلی در `data/content.js` +(`mapLocations`) تقریبی هستند — با پین دقیق جایگزین کنید. -Nothing here talks to a real backend yet. Each service method already has -the exact call commented out — uncomment and remove the mock `Promise.resolve`: +### کاتالوگ محصولات +`components/CatalogSection.jsx` — گرید محصولاتی (زعفران، تنقلات، نوشیدنی، قهوه، چای و ...) که +مشتریان دستگاه می‌توانند با قیمت کمتر از بازار سفارش دهند. هر آیتم قیمت بازار (خط‌خورده) و قیمت +ویژه را نشان می‌دهد و دکمه «افزودن به سفارش» آن را به همان سبد خرید Redux اضافه می‌کند (در کنار +دستگاه‌ها). لیست محصولات، قیمت‌ها و تصاویر در `data/content.js` (کلید `catalog`) قابل ویرایش است؛ +تصاویر placeholder در `public/images/catalog/` قرار دارند. -```js -// src/services/product.service.js -async getAll() { - // TODO: Connect Product API - return apiClient.get("/products").then((res) => res.data); -} -``` +### سکشن ویدیوی معرفی شرکت +`components/IntroVideoSection.jsx` — یک پلیر ویدیوی مستقل (جدا از ویدیوی پس‌زمینه اسکرول افقی) با +پوستر و دکمه پخش استاندارد مرورگر. برای جایگزینی، فایل واقعی را در +`public/video/company-intro-placeholder.mp4` بگذارید (یا مسیر `introVideoSrc` را در +`data/content.js` عوض کنید)؛ پوستر هم از `public/images/video-poster.svg` می‌آید. -Set `NEXT_PUBLIC_API_BASE_URL` in `.env.local` (see `.env.example`). +### رنگ‌بندی متناوب سکشن‌ها +هر سکشن اصلی صفحه (به‌جز هیرو و بخش اسکرول افقی که پس‌زمینه مخصوص خودشان را دارند) به‌ترتیب بین سه +تن رنگی برند می‌چرخد: `bg-page` → `bg-surface` → `bg-elevated` → ... به‌همراه یک خط جداکننده ظریف +بالای هر بخش. این‌ها همان توکن‌های دارک/لایت هستند، پس با تغییر تم هم هماهنگ می‌مانند. برای تغییر +ترتیب یا اضافه کردن سکشن جدید، کافی‌ست یکی از این سه کلاس را روی `
` بگذارید. -## Motion & accessibility notes +### حالت دارک/لایت +دکمه سوییچ در هدر (آیکون خورشید/ماه). ترجیح در `localStorage` ذخیره می‌شود و در اولین بار بر اساس +تنظیمات سیستم کاربر تعیین می‌شود. رنگ‌بندی از طریق متغیرهای CSS در `app/globals.css` +(`--color-bg-page`, `--color-text-primary`, ...) و کلاس‌های کمکی `bg-page` / `bg-surface` / +`text-primary` / `text-secondary` / `border-subtle` مدیریت می‌شود؛ برای هر رنگ جدید فقط همین‌جا را +ویرایش کنید. تم Ant Design هم به‌صورت خودکار (`darkAlgorithm` / `defaultAlgorithm`) هماهنگ می‌شود. -- **Scroll-locked product story.** Each `ProductSection` reports its DOM - nodes up to `ProductsShowcase`, which builds and pins all three - machines' `ScrollTrigger` timelines together in one place (fixing a bug - where wide/desktop viewports could fail to reveal machines after the - first one — see the comment at the top of `ProductsShowcase.jsx`), then - calls `ScrollTrigger.refresh()` once every measurement has settled. - Scrolling literally cannot advance past a pinned section until its - reveal finishes — only then does the next machine begin. -- **Vivid, temperature-coded background per machine.** Each product - carries its own `bgColor` in `src/data/products.json`, and - `ProductsShowcase` cross-fades a single fixed color layer to that color - over the *exact same* scroll range the section uses to pin — so the - backdrop finishes changing exactly as the machine settles into place. - The three models deliberately alternate cool → warm → cool: a vivid icy - cyan-blue (`#12C4E0`) for the entry model, a warm coral-orange - (`#FF7A45`) for the mid-tier, and a cool emerald-teal (`#12D6A8`) for - the flagship — all bright, cheerful tones rather than muted brand - neutrals, chosen specifically for this section. -- **Floating drinks/snacks per section.** `SectionFloatingItems.jsx` - places a small set of product icons (soda, mineral water, juice, - snacks) drifting gently around each machine — which items appear is - configurable per product via `floatingItemIds` in `products.json`. -- All GSAP animations check `prefers-reduced-motion` and degrade to simple - opacity fades (or skip entirely) when it's set. -- `gsap.matchMedia()` is used in both `MachineAssembly` (hero) and - `ProductSection` to give desktop/tablet/mobile different scroll - distances/intensity. -- Focus states, semantic landmarks (`
`, `
`, `