update

app/context/LanguageContext.jsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState } from 'react';
+import { content } from '@/data/content';
+
+const LanguageContext = createContext(null);
+
+export function LanguageProvider({ children }) {
+  const [locale, setLocale] = useState('fa');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const saved = window.localStorage.getItem('rm-locale');
+    if (saved === 'fa' || saved === 'en') setLocale(saved);
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.lang = locale;
+    root.dir = content[locale].dir;
+    window.localStorage.setItem('rm-locale', locale);
+  }, [locale]);
+
+  const toggleLocale = () => setLocale((l) => (l === 'fa' ? 'en' : 'fa'));
+
+  return (
+    <LanguageContext.Provider
+      value={{ locale, setLocale, toggleLocale, t: content[locale], dir: content[locale].dir, mounted }}
+    >
+      {children}
+    </LanguageContext.Provider>
+  );
+}
+
+export function useLanguage() {
+  const ctx = useContext(LanguageContext);
+  if (!ctx) throw new Error('useLanguage must be used within LanguageProvider');
+  return ctx;
+}

app/context/ThemeContext.jsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState } from 'react';
+
+const ThemeContext = createContext(null);
+
+export function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState('dark');
+  const [mounted, setMounted] = useState(false);
+
+  // On mount: read saved preference, else fall back to system preference.
+  useEffect(() => {
+    const saved = window.localStorage.getItem('rm-theme');
+    if (saved === 'light' || saved === 'dark') {
+      setTheme(saved);
+    } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+      setTheme('light');
+    }
+    setMounted(true);
+  }, []);
+
+  // Reflect theme on <html> class + persist.
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.remove('light', 'dark');
+    root.classList.add(theme);
+    window.localStorage.setItem('rm-theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'));
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme, mounted }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
+  return ctx;
+}

app/globals.css

@@ -0,0 +1,228 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ------------------------------------------------------------------ */
+/* Theme tokens — dark is the default; .light overrides on <html>      */
+/* ------------------------------------------------------------------ */
+:root {
+    --brand: #00a693;
+    --color-bg-page: #04120f;
+    --color-bg-elevated: #0c2b24;
+    --color-bg-surface: rgba(255, 255, 255, 0.045);
+    --color-bg-surface-strong: rgba(255, 255, 255, 0.08);
+    --color-border: rgba(0, 166, 147, 0.28);
+    --color-text-primary: #ffffff;
+    --color-text-secondary: rgba(230, 247, 244, 0.72);
+    --color-scrollbar-track: #071e19;
+    --color-scrollbar-thumb: #0b5c50;
+    color-scheme: dark;
+}
+
+html.light {
+    --color-bg-page: #f5fbf9;
+    --color-bg-elevated: #ffffff;
+    --color-bg-surface: rgba(0, 89, 79, 0.045);
+    --color-bg-surface-strong: rgba(0, 89, 79, 0.08);
+    --color-border: rgba(0, 166, 147, 0.25);
+    --color-text-primary: #04231f;
+    --color-text-secondary: rgba(4, 35, 31, 0.68);
+    --color-scrollbar-track: #e1f3ef;
+    --color-scrollbar-thumb: #8fdccc;
+    color-scheme: light;
+}
+
+html,
+body {
+    padding: 0;
+    margin: 0;
+    scroll-behavior: smooth;
+}
+
+html[dir='rtl'] body {
+    font-family: var(--font-vazirmatn), Tahoma, sans-serif;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+::selection {
+    background: rgba(0, 166, 147, 0.35);
+    color: var(--color-text-primary);
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--color-scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--color-scrollbar-thumb);
+    border-radius: 999px;
+}
+
+/* Semantic surface/text utilities — read the theme variables above so every
+   component that uses them automatically supports dark + light mode. */
+.bg-page {
+    background-color: var(--color-bg-page);
+}
+
+.bg-elevated {
+    background-color: var(--color-bg-elevated);
+}
+
+.bg-surface {
+    background-color: var(--color-bg-surface);
+}
+
+.bg-surface-strong {
+    background-color: var(--color-bg-surface-strong);
+}
+
+.border-subtle {
+    border-color: var(--color-border);
+}
+
+.text-primary {
+    color: var(--color-text-primary);
+}
+
+.text-secondary {
+    color: var(--color-text-secondary);
+}
+
+/* Opacity variants of the tokens above (Tailwind's /NN modifier only works on
+   Tailwind-generated utilities, not these hand-written classes). */
+.bg-page-60 {
+    background-color: color-mix(in srgb, var(--color-bg-page) 60%, transparent);
+}
+
+.bg-page-85 {
+    background-color: color-mix(in srgb, var(--color-bg-page) 85%, transparent);
+}
+
+.bg-elevated-95 {
+    background-color: color-mix(in srgb, var(--color-bg-elevated) 95%, transparent);
+}
+
+.text-primary-90 {
+    color: color-mix(in srgb, var(--color-text-primary) 90%, transparent);
+}
+
+/* ------------------------------------------------------------------ */
+/* Horizontal scroll showcase (pinned via GSAP ScrollTrigger)          */
+/* ------------------------------------------------------------------ */
+.horizontal-track {
+    display: flex;
+    height: 100vh;
+    /*width: 100vw;*/
+    will-change: transform;
+}
+
+.horizontal-panel {
+    height: 100vh;
+    width: 100vw;
+    flex-shrink: 0;
+    position: relative;
+    overflow: hidden;
+}
+
+/* ------------------------------------------------------------------ */
+/* Cursor spotlight / lens reveal effect over the vending machine       */
+/* ------------------------------------------------------------------ */
+.spotlight-stage {
+    position: relative;
+    cursor: none;
+    isolation: isolate;
+}
+
+.spotlight-stage .base-layer,
+.spotlight-stage .reveal-layer {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    pointer-events: none;
+    user-select: none;
+}
+
+.spotlight-stage .reveal-layer {
+    clip-path: circle(0px at 50% 50%);
+    transition: clip-path 0.05s linear;
+}
+
+.spotlight-lens {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 190px;
+    height: 190px;
+    border-radius: 999px;
+    border: 2px solid rgba(0, 166, 147, 0.9);
+    box-shadow: 0 0 0 4px rgba(0, 166, 147, 0.15),
+    0 0 40px 6px rgba(0, 166, 147, 0.45);
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    z-index: 30;
+}
+
+.spotlight-stage:hover .spotlight-lens {
+    opacity: 1;
+}
+
+/* Utility: hide native scrollbar but keep scroll functionality */
+.no-scrollbar::-webkit-scrollbar {
+    display: none;
+}
+
+.no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+/* Gradient text helper for headings */
+.brand-gradient-text {
+    background: linear-gradient(90deg, #6fe0c9 0%, #00a693 55%, #017065 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* ------------------------------------------------------------------ */
+/* Typewriter caret for the hero headline                              */
+/* ------------------------------------------------------------------ */
+.typewriter-caret {
+    display: inline-block;
+    width: 3px;
+    margin-inline-start: 4px;
+    background-color: var(--brand);
+    animation: caretBlink 0.9s steps(1) infinite;
+}
+
+@keyframes caretBlink {
+    0%, 49% {
+        opacity: 1;
+    }
+    50%, 100% {
+        opacity: 0;
+    }
+}
+
+/* ------------------------------------------------------------------ */
+/* Chat widget                                                          */
+/* ------------------------------------------------------------------ */
+.chat-bubble {
+    max-width: 80%;
+    padding: 10px 14px;
+    border-radius: 14px;
+    font-size: 0.875rem;
+    line-height: 1.6;
+}

app/layout.jsx

@@ -0,0 +1,28 @@
+import { Vazirmatn } from 'next/font/google';
+import './globals.css';
+import Providers from './providers';
+
+const vazirmatn = Vazirmatn({
+  subsets: ['arabic'],
+  variable: '--font-vazirmatn',
+  display: 'swap',
+});
+
+export const metadata = {
+  title: 'روبات مارکت | دستگاه‌های وندینگ هوشمند',
+  description:
+    'روبات مارکت؛ دستگاه‌های فروش خودکار هوشمند با مدیریت آنلاین، تحویل نرم و طراحی مدرن.',
+};
+
+export default function RootLayout({ children }) {
+  // Default server-rendered shell: Persian + dark. ThemeProvider/LanguageProvider
+  // read localStorage on mount and correct lang/dir/class client-side if needed —
+  // suppressHydrationWarning avoids a noisy (harmless) mismatch warning for that swap.
+  return (
+    <html lang="fa" dir="rtl" className={`${vazirmatn.variable} dark`} suppressHydrationWarning>
+      <body className="bg-page text-primary antialiased transition-colors duration-300">
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

app/page.jsx

@@ -0,0 +1,47 @@
+import Header from '@/components/Header';
+import HeroSection from '@/components/HeroSection';
+import HorizontalShowcase from '@/components/HorizontalShowcase';
+import FeaturesSection from '@/components/FeaturesSection';
+import AboutSection from '@/components/AboutSection';
+import CatalogSection from '@/components/CatalogSection';
+import LocationsSection from '@/components/LocationsSection';
+import IntroVideoSection from '@/components/IntroVideoSection';
+import MapSection from '@/components/MapSection';
+import TicketForm from '@/components/TicketForm';
+import Footer from '@/components/Footer';
+import CartDrawer from '@/components/CartDrawer';
+import ChatWidget from '@/components/ChatWidget';
+
+export default function HomePage() {
+    return (
+        <main className="relative bg-page">
+
+            <Header/>
+
+            <CartDrawer/>
+
+            <ChatWidget/>
+
+            <HeroSection/>
+
+            <HorizontalShowcase/>
+
+            <FeaturesSection/>
+
+            <AboutSection/>
+
+            <CatalogSection/>
+
+            <LocationsSection/>
+
+            <IntroVideoSection/>
+
+            <MapSection/>
+
+            <TicketForm/>
+
+            <Footer/>
+                
+        </main>
+    );
+}

app/providers.jsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { Provider as ReduxProvider } from 'react-redux';
+import { ConfigProvider, theme as antdThemeApi } from 'antd';
+import faIR from 'antd/locale/fa_IR';
+import enUS from 'antd/locale/en_US';
+import { store } from '@/store/store';
+import { ThemeProvider, useTheme } from './context/ThemeContext';
+import { LanguageProvider, useLanguage } from './context/LanguageContext';
+
+function AntdBridge({ children }) {
+  const { theme } = useTheme();
+  const { locale, dir } = useLanguage();
+
+  const antdTheme = {
+    algorithm: theme === 'dark' ? antdThemeApi.darkAlgorithm : antdThemeApi.defaultAlgorithm,
+    token: {
+      colorPrimary: '#00a693',
+      colorInfo: '#00a693',
+      borderRadius: 10,
+      fontFamily: 'var(--font-vazirmatn), Tahoma, sans-serif',
+      colorBgContainer: theme === 'dark' ? '#0c2b24' : '#ffffff',
+      colorBgElevated: theme === 'dark' ? '#0f332b' : '#ffffff',
+      colorBorder: theme === 'dark' ? '#0b3d38' : '#c0ebe3',
+      colorText: theme === 'dark' ? '#e6f7f4' : '#04231f',
+      colorTextSecondary: theme === 'dark' ? 'rgba(230,247,244,0.7)' : 'rgba(4,35,31,0.65)',
+    },
+    components: {
+      Button: { controlHeight: 44, fontWeight: 600 },
+      Badge: { colorError: '#ff6b57' },
+      Modal: {
+        contentBg: theme === 'dark' ? '#0c2b24' : '#ffffff',
+        headerBg: theme === 'dark' ? '#0c2b24' : '#ffffff',
+        titleColor: theme === 'dark' ? '#e6f7f4' : '#04231f',
+      },
+      Drawer: {
+        colorBgElevated: theme === 'dark' ? '#0c2b24' : '#ffffff',
+      },
+    },
+  };
+
+  return (
+    <ConfigProvider direction={dir} locale={locale === 'fa' ? faIR : enUS} theme={antdTheme}>
+      {children}
+    </ConfigProvider>
+  );
+}
+
+export default function Providers({ children }) {
+  return (
+    <ReduxProvider store={store}>
+      <ThemeProvider>
+        <LanguageProvider>
+          <AntdBridge>{children}</AntdBridge>
+        </LanguageProvider>
+      </ThemeProvider>
+    </ReduxProvider>
+  );
+}