src/app/dashboard/page.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
+import { LayoutDashboard, Package, BarChart3, Settings, UserCircle, Menu, X } from "lucide-react";
+
+export default function DashboardPage() {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+  const menuItems = [
+    { name: "Overview", icon: LayoutDashboard },
+    { name: "Inventory", icon: Package },
+    { name: "Analytics", icon: BarChart3 },
+    { name: "Settings", icon: Settings },
+  ];
+
+  return (
+    <ThemeProvider>
+      <div className="min-h-screen flex bg-gray-50">
+        {/* Sidebar */}
+        <aside className={`${isSidebarOpen ? "w-64" : "w-20"} bg-white border-r transition-all duration-300 hidden md:block`}>
+          <div className="p-6 flex items-center justify-between">
+            {isSidebarOpen && <span className="text-xl font-bold">MangaPOS</span>}
+            <button onClick={() => setIsSidebarOpen(!isSidebarOpen)} className="p-2 rounded-lg hover:bg-gray-100">
+              <Menu className="w-5 h-5" />
+            </button>
+          </div>
+          <nav className="mt-6">
+            {menuItems.map((item) => (
+              <a key={item.name} href="#" className="flex items-center gap-4 px-6 py-3 hover:bg-gray-100">
+                <item.icon className="w-5 h-5" />
+                {isSidebarOpen && <span>{item.name}</span>}
+              </a>
+            ))}
+          </nav>
+        </aside>
+
+        {/* Main Content */}
+        <div className="flex-1">
+          <header className="bg-white border-b h-16 flex items-center justify-between px-8">
+            <h1 className="text-lg font-semibold">Dashboard</h1>
+            <div className="flex items-center gap-3">
+              <UserCircle className="w-8 h-8 text-gray-400" />
+              <span className="text-sm font-medium">Admin User</span>
+            </div>
+          </header>
+
+          <main className="p-8">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="bg-white p-6 rounded-xl border shadow-sm">
+                  <h2 className="text-sm font-medium text-gray-500">Metric {i}</h2>
+                  <p className="text-2xl font-bold mt-2">1,234</p>
+                </div>
+              ))}
+            </div>
+          </main>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/login/page.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
+import Input from '@/components/form/Input';
+import ButtonExpandHover from '@/components/button/ButtonExpandHover';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = async () => {
+    const response = await fetch("/api/auth/login/", {
+      method: "POST",      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, password }),
+    });
+    if (response.ok) window.location.href = "/dashboard";
+  };
+
+  return (
+    <ThemeProvider>
+      <main className="flex min-h-screen flex-col items-center justify-center p-8">
+        <div className="w-full max-w-md space-y-6">
+          <h1 className="text-3xl font-bold">Login</h1>
+          <Input value={email} onChange={setEmail} placeholder="Email" />
+          <Input value={password} onChange={setPassword} placeholder="Password" type="password" />
+          <ButtonExpandHover text="Sign In" onClick={handleLogin} />
+          <a href="/register" className="text-sm text-gray-500">Don't have an account? Register</a>
+          <a href="/password-reset" className="block text-sm text-gray-500">Forgot password?</a>
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -2,14 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
-import FooterBase from '@/components/sections/footer/FooterBase';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import { Cpu, BarChart3, Users, Zap } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -17,342 +18,109 @@ export default function LandingPage() {
         defaultButtonVariant="text-stagger"
         defaultTextAnimation="background-highlight"
         borderRadius="rounded"
-        contentWidth="small"
-        sizing="mediumLargeSizeMediumTitles"
-        background="noiseDiagonalGradient"
-        cardStyle="gradient-mesh"
+        contentWidth="medium"
+        sizing="mediumLargeSizeLargeTitles"
+        background="fluid"
+        cardStyle="glass-elevated"
         primaryButtonStyle="primary-glow"
         secondaryButtonStyle="layered"
-        headingFontWeight="medium"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "Features",
-          id: "#features",
-        },
-        {
-          name: "Catalog",
-          id: "#catalog",
-        },
-        {
-          name: "Metrics",
-          id: "#metrics",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
-      ]}
-      brandName="MangaPOS"
-      button={{
-        text: "Get Started",
-      }}
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarStyleApple
+              navItems={[
+                { name: "Features", id: "#features" },
+                { name: "Catalog", id: "#catalog" },
+                { name: "Metrics", id: "#metrics" },
+                { name: "Contact", id: "#contact" },
+              ]}
+              brandName="Quantum Kassa"
+            />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroSplit
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Revolutionize Your Manga Shop"
-      description="The ultimate POS system designed for manga retailers. Manage inventory, process sales, and track analytics with ease."
-      buttons={[
-        {
-          text: "Get Started",
-          href: "#contact",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/futuristic-store-with-abstract-concept-architecture_23-2150862080.jpg"
-      mediaAnimation="slide-up"
-      avatarText="Trusted by 500+ shops worldwide"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-man-wearing-apron_23-2149007469.jpg",
-          alt: "Hiroshi Tanaka",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/smart-girl-taking-book-from-shelf_1098-1054.jpg",
-          alt: "Sarah Miller",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-smiling-young-male-florist-with-colorful-flowers-shop_23-2148075323.jpg",
-          alt: "Chen Wei",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/cheerful-teen-schoolgirl-holding-books-head_23-2148204258.jpg",
-          alt: "Elena Rossi",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit_1298-185.jpg",
-          alt: "Kenji Sato",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Instant Inventory",
-        },
-        {
-          type: "text",
-          text: "Barcode Scanning",
-        },
-        {
-          type: "text",
-          text: "Sales Analytics",
-        },
-        {
-          type: "text",
-          text: "Customer Insights",
-        },
-        {
-          type: "text",
-          text: "Secure Payments",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+            <HeroBillboardScroll
+              background={{ variant: "gradient-bars" }}
+              title="Quantum Kassa"
+              description="Next-generation POS infrastructure engineered for modern retail efficiency. Experience the future of transaction management."
+              buttons={[{ text: "Get Started", href: "#contact" }]}
+              imageSrc="http://img.b2bpic.net/free-photo/futuristic-store-with-abstract-concept-architecture_23-2150862080.jpg"
+            />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardNineteen
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          tag: "Speed",
-          title: "Rapid Scanning",
-          subtitle: "Scan manga volumes instantly",
-          description: "High-speed barcode scanning to keep lines moving.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-manager-working-with-report-data_1262-3723.jpg",
-        },
-        {
-          tag: "Data",
-          title: "Inventory Tracking",
-          subtitle: "Know your stock levels",
-          description: "Automated stock alerts for popular series.",
-          imageSrc: "http://img.b2bpic.net/free-photo/packaging-engineer-looking-tablet-with-greenscreen-depot_482257-82403.jpg",
-        },
-        {
-          tag: "Analytics",
-          title: "Customer Insights",
-          subtitle: "Understand your readers",
-          description: "See which series are trending this month.",
-          imageSrc: "http://img.b2bpic.net/free-photo/friends-shopping-second-hand-market_23-2149353711.jpg",
-        },
-      ]}
-      title="Designed for Manga Retail"
-      description="Powerful features to keep your store running smooth."
-    />
-  </div>
+        <div id="features" data-section="features">
+            <FeatureCardThree
+              title="Enterprise Power"
+              description="Robust features for scalable retail performance."
+              textboxLayout="split"
+              gridVariant="bento-grid"
+              animationType="slide-up"
+              features={[
+                { title: "Smart Analytics", description: "AI-driven insights for inventory forecasting.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-manager-working-with-report-data_1262-3723.jpg" },
+                { title: "Instant Sync", description: "Real-time data synchronization across all nodes.", imageSrc: "http://img.b2bpic.net/free-photo/packaging-engineer-looking-tablet-with-greenscreen-depot_482257-82403.jpg" },
+                { title: "Secure Transactions", description: "End-to-end encrypted payment processing.", imageSrc: "http://img.b2bpic.net/free-photo/friends-shopping-second-hand-market_23-2149353711.jpg" }
+              ]}
+            />
+        </div>
 
-  <div id="catalog" data-section="catalog">
-      <ProductCardTwo
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "p1",
-          brand: "POS",
-          name: "Pro Retail Tablet",
-          price: "$799",
-          rating: 5,
-          reviewCount: "120",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-blur-book-bookshelves-bookstore_1232-4957.jpg",
-        },
-        {
-          id: "p2",
-          brand: "POS",
-          name: "Barcode Scanner",
-          price: "$199",
-          rating: 5,
-          reviewCount: "85",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-reading-comics-library_23-2150347302.jpg",
-        },
-        {
-          id: "p3",
-          brand: "POS",
-          name: "Receipt Printer",
-          price: "$129",
-          rating: 4,
-          reviewCount: "92",
-          imageSrc: "http://img.b2bpic.net/free-photo/stack-old-coming-book-strips-wooden-desk_23-2150256455.jpg",
-        },
-        {
-          id: "p4",
-          brand: "POS",
-          name: "Cash Drawer",
-          price: "$99",
-          rating: 5,
-          reviewCount: "45",
-          imageSrc: "http://img.b2bpic.net/free-photo/comic-book-everyday-lifestyle-scene_23-2151133790.jpg",
-        },
-        {
-          id: "p5",
-          brand: "POS",
-          name: "Inventory Software",
-          price: "$49/mo",
-          rating: 5,
-          reviewCount: "200",
-          imageSrc: "http://img.b2bpic.net/free-photo/retro-vhs-packaging-arrangement_23-2149854375.jpg",
-        },
-        {
-          id: "p6",
-          brand: "POS",
-          name: "Customer Display",
-          price: "$149",
-          rating: 4,
-          reviewCount: "60",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-people-eating-japanese-street-food-shop_23-2149288405.jpg",
-        },
-      ]}
-      title="System Overview"
-      description="Explore our specialized POS hardware and software solutions."
-    />
-  </div>
+        <div id="catalog" data-section="catalog">
+            <ProductCardThree
+              title="Core Hardware"
+              description="Precision-engineered peripherals for the Quantum ecosystem."
+              textboxLayout="split"
+              gridVariant="bento-grid"
+              animationType="slide-up"
+              products={[
+                { id: "1", name: "Quantum Tablet Gen 2", price: "$899", imageSrc: "http://img.b2bpic.net/free-photo/abstract-blur-book-bookshelves-bookstore_1232-4957.jpg" },
+                { id: "2", name: "Quantum Scanner", price: "$249", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-reading-comics-library_23-2150347302.jpg" },
+                { id: "3", name: "Thermal Dock", price: "$159", imageSrc: "http://img.b2bpic.net/free-photo/stack-old-coming-book-strips-wooden-desk_23-2150256455.jpg" }
+              ]}
+            />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardSeven
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          value: "500+",
-          title: "Shops Using MangaPOS",
-          items: [
-            "Retailers globally",
-            "High volume shops",
-          ],
-        },
-        {
-          id: "m2",
-          value: "1M+",
-          title: "Volumes Scanned",
-          items: [
-            "Daily processing",
-            "Highly accurate data",
-          ],
-        },
-        {
-          id: "m3",
-          value: "25%",
-          title: "Growth Increase",
-          items: [
-            "Avg sales growth",
-            "Improved turnover",
-          ],
-        },
-      ]}
-      title="Proven Performance"
-      description="Empowering retailers globally."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+            <MetricCardOne
+              title="System Efficiency"
+              description="Driving retail excellence through data."
+              textboxLayout="split"
+              gridVariant="uniform-all-items-equal"
+              animationType="depth-3d"
+              metrics={[
+                { id: "1", value: "99.9%", title: "Uptime", description: "Global server availability", icon: Cpu },
+                { id: "2", value: "40%", title: "Faster", description: "Transaction speed improvement", icon: Zap },
+                { id: "3", value: "2M+", title: "Transactions", description: "Total volume processed", icon: BarChart3 }
+              ]}
+            />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Hiroshi Tanaka",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-wearing-apron_23-2149007469.jpg",
-        },
-        {
-          id: "t2",
-          name: "Sarah Miller",
-          imageSrc: "http://img.b2bpic.net/free-photo/smart-girl-taking-book-from-shelf_1098-1054.jpg",
-        },
-        {
-          id: "t3",
-          name: "Chen Wei",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-male-florist-with-colorful-flowers-shop_23-2148075323.jpg",
-        },
-        {
-          id: "t4",
-          name: "Elena Rossi",
-          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-teen-schoolgirl-holding-books-head_23-2148204258.jpg",
-        },
-        {
-          id: "t5",
-          name: "Kenji Sato",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit_1298-185.jpg",
-        },
-      ]}
-      cardTitle="Join Our Community"
-      cardTag="Testimonials"
-      cardAnimation="slide-up"
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+            <TestimonialCardFifteen
+              testimonial="Quantum Kassa transformed our entire workflow. The efficiency gains are unmatched in the current market."
+              rating={5}
+              author="Alex Rivera, CTO RetailFlow"
+              avatars={[{ src: "http://img.b2bpic.net/free-photo/medium-shot-man-wearing-apron_23-2149007469.jpg", alt: "Alex" }]}
+              ratingAnimation="slide-up"
+              avatarsAnimation="slide-up"
+            />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      text="Ready to modernize your manga store? Let's get started."
-      buttons={[
-        {
-          text: "Contact Us",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+            <ContactSplit
+              tag="Get Started"
+              title="Join the Quantum Network"
+              description="Contact our sales team for a custom integration plan."
+              background={{ variant: "sparkles-gradient" }}
+            />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Product",
-          items: [
-            {
-              label: "Features",
-              href: "#features",
-            },
-            {
-              label: "Catalog",
-              href: "#catalog",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#",
-            },
-            {
-              label: "Careers",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "FAQ",
-              href: "#",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-      ]}
-      logoText="MangaPOS"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+            <FooterCard
+              logoText="Quantum Kassa"
+              socialLinks={[{ icon: Users, href: "#", ariaLabel: "Social" }]}
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/password-reset/page.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
+import Input from '@/components/form/Input';
+import ButtonExpandHover from '@/components/button/ButtonExpandHover';
+
+export default function PasswordResetPage() {
+  const [email, setEmail] = useState("");
+
+  const handleReset = async () => {
+    await fetch("/api/auth/password-reset/", {
+      method: "POST",      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email }),
+    });
+  };
+
+  return (
+    <ThemeProvider>
+      <main className="flex min-h-screen flex-col items-center justify-center p-8">
+        <div className="w-full max-w-md space-y-6">
+          <h1 className="text-3xl font-bold">Reset Password</h1>
+          <Input value={email} onChange={setEmail} placeholder="Email" />
+          <ButtonExpandHover text="Send Reset Link" onClick={handleReset} />
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/register/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
+import Input from '@/components/form/Input';
+import ButtonExpandHover from '@/components/button/ButtonExpandHover';
+
+export default function RegisterPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleRegister = async () => {
+    await fetch("/api/auth/register/", {
+      method: "POST",      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, password }),
+    });
+    window.location.href = "/login";
+  };
+
+  return (
+    <ThemeProvider>
+      <main className="flex min-h-screen flex-col items-center justify-center p-8">
+        <div className="w-full max-w-md space-y-6">
+          <h1 className="text-3xl font-bold">Create Account</h1>
+          <Input value={email} onChange={setEmail} placeholder="Email" />
+          <Input value={password} onChange={setPassword} placeholder="Password" type="password" />
+          <ButtonExpandHover text="Register" onClick={handleRegister} />
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #e3deea;
-  --card: #ffffff;
-  --foreground: #27231f;
-  --primary-cta: #27231f;
+  --background: #050012;
+  --card: #101030;
+  --foreground: #f0e6ff;
+  --primary-cta: #8b5cf6;
   --primary-cta-text: #e3deea;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #1d123b;
   --secondary-cta-text: #27231f;
-  --accent: #c68a62;
-  --background-accent: #c68a62;
+  --accent: #c89bff;
+  --background-accent: #312e81;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);