Update src/app/seller-dashboard/page.tsx

Merge version_2 into main

src/app/admin/products/edit/page.tsx

@@ -0,0 +1,335 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { ArrowLeft, Save, X } from "lucide-react";
+import Link from "next/link";
+
+interface ProductFormData {
+  id: string;
+  brand: string;
+  name: string;
+  price: string;
+  rating: number;
+  reviewCount: string;
+  imageSrc: string;
+  imageAlt: string;
+  description: string;
+  sku: string;
+  stock: number;
+  category: string;
+}
+
+const initialFormData: ProductFormData = {
+  id: "1",  brand: "TechVault",  name: "Pro Wireless Earbuds",  price: "$249.99",  rating: 5,
+  reviewCount: "2.8k",  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-premium-tech-gadget-product-shot-sleek-1773085532843-b5a0598a.png",  imageAlt: "Premium wireless earbuds",  description: "High-quality wireless earbuds with active noise cancellation and 24-hour battery life",  sku: "TWE-PRO-001",  stock: 245,
+  category: "Audio"
+};
+
+export default function EditProductPage() {
+  const [formData, setFormData] = useState<ProductFormData>(initialFormData);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: name === "rating" || name === "stock" ? parseInt(value) : value
+    }));
+  };
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      console.log("Product saved:", formData);
+      alert("Product updated successfully!");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleReset = () => {
+    setFormData(initialFormData);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="outline"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="TechVault"
+          navItems={[
+            { name: "Shop", id: "products" },
+            { name: "Features", id: "features" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Support", id: "contact" },
+            { name: "Admin", id: "https://techvault.io/admin" }
+          ]}
+          button={{ text: "Back to Home", href: "/" }}
+          className="backdrop-blur-md bg-opacity-80"
+          buttonClassName="bg-gradient-to-r from-[#80da9b] to-[#a8e8ba] text-black font-semibold"
+        />
+      </div>
+
+      <div className="min-h-screen bg-background pt-20 pb-20">
+        <div className="max-w-4xl mx-auto px-4">
+          {/* Header */}
+          <div className="mb-8">
+            <Link href="/" className="inline-flex items-center gap-2 text-primary-cta hover:opacity-80 transition-opacity mb-6">
+              <ArrowLeft size={20} />
+              <span>Back to Home</span>
+            </Link>
+            <h1 className="text-4xl font-bold text-foreground mb-2">Edit Product</h1>
+            <p className="text-foreground/70">Modify product details, pricing, and inventory information</p>
+          </div>
+
+          {/* Form Container */}
+          <div className="bg-card rounded-lg border border-accent/20 p-8 shadow-lg">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {/* Product Image Preview */}
+              <div className="flex flex-col gap-4">
+                <div className="aspect-square rounded-lg overflow-hidden bg-background border border-accent/20 flex items-center justify-center">
+                  <img 
+                    src={formData.imageSrc} 
+                    alt={formData.imageAlt}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-semibold text-foreground mb-2">Image URL</label>
+                  <input
+                    type="text"
+                    name="imageSrc"
+                    value={formData.imageSrc}
+                    onChange={handleInputChange}
+                    className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    placeholder="https://..."
+                  />
+                </div>
+              </div>
+
+              {/* Product Details Form */}
+              <div className="flex flex-col gap-6">
+                {/* Brand & Name */}
+                <div>
+                  <label className="block text-sm font-semibold text-foreground mb-2">Brand</label>
+                  <input
+                    type="text"
+                    name="brand"
+                    value={formData.brand}
+                    onChange={handleInputChange}
+                    className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-semibold text-foreground mb-2">Product Name</label>
+                  <input
+                    type="text"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleInputChange}
+                    className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  />
+                </div>
+
+                {/* SKU & Category */}
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-semibold text-foreground mb-2">SKU</label>
+                    <input
+                      type="text"
+                      name="sku"
+                      value={formData.sku}
+                      onChange={handleInputChange}
+                      className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-semibold text-foreground mb-2">Category</label>
+                    <select
+                      name="category"
+                      value={formData.category}
+                      onChange={handleInputChange}
+                      className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    >
+                      <option>Audio</option>
+                      <option>Wearables</option>
+                      <option>Chargers</option>
+                      <option>Accessories</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Pricing & Inventory Section */}
+            <div className="mt-8 pt-8 border-t border-accent/20">
+              <h2 className="text-2xl font-bold text-foreground mb-6">Pricing & Inventory</h2>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div>
+                  <label className="block text-sm font-semibold text-foreground mb-2">Price</label>
+                  <input
+                    type="text"
+                    name="price"
+                    value={formData.price}
+                    onChange={handleInputChange}
+                    className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    placeholder="$0.00"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-semibold text-foreground mb-2">Stock Quantity</label>
+                  <input
+                    type="number"
+                    name="stock"
+                    value={formData.stock}
+                    onChange={handleInputChange}
+                    className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    min="0"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-semibold text-foreground mb-2">Rating</label>
+                  <select
+                    name="rating"
+                    value={formData.rating}
+                    onChange={handleInputChange}
+                    className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  >
+                    <option value="1">1 Star</option>
+                    <option value="2">2 Stars</option>
+                    <option value="3">3 Stars</option>
+                    <option value="4">4 Stars</option>
+                    <option value="5">5 Stars</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+
+            {/* Description & Review Count */}
+            <div className="mt-8 pt-8 border-t border-accent/20">
+              <h2 className="text-2xl font-bold text-foreground mb-6">Additional Details</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <label className="block text-sm font-semibold text-foreground mb-2">Review Count</label>
+                  <input
+                    type="text"
+                    name="reviewCount"
+                    value={formData.reviewCount}
+                    onChange={handleInputChange}
+                    className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    placeholder="e.g., 2.8k"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-semibold text-foreground mb-2">Image Alt Text</label>
+                  <input
+                    type="text"
+                    name="imageAlt"
+                    value={formData.imageAlt}
+                    onChange={handleInputChange}
+                    className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  />
+                </div>
+              </div>
+
+              <div className="mt-6">
+                <label className="block text-sm font-semibold text-foreground mb-2">Product Description</label>
+                <textarea
+                  name="description"
+                  value={formData.description}
+                  onChange={handleInputChange}
+                  rows={4}
+                  className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta resize-none"
+                  placeholder="Enter product description..."
+                />
+              </div>
+            </div>
+
+            {/* Action Buttons */}
+            <div className="mt-8 pt-8 border-t border-accent/20 flex gap-4">
+              <button
+                onClick={handleSave}
+                disabled={isSaving}
+                className="flex-1 flex items-center justify-center gap-2 bg-primary-cta hover:bg-primary-cta/90 disabled:opacity-50 text-foreground font-semibold py-3 px-6 rounded-lg transition-all"
+              >
+                <Save size={20} />
+                {isSaving ? "Saving..." : "Save Changes"}
+              </button>
+
+              <button
+                onClick={handleReset}
+                className="flex-1 flex items-center justify-center gap-2 border border-accent/20 hover:bg-background/50 text-foreground font-semibold py-3 px-6 rounded-lg transition-all"
+              >
+                <X size={20} />
+                Reset Form
+              </button>
+            </div>
+          </div>
+
+          {/* Info Section */}
+          <div className="mt-8 bg-background-accent/30 border border-accent/20 rounded-lg p-6">
+            <h3 className="font-semibold text-foreground mb-2">💡 Tip</h3>
+            <p className="text-foreground/70 text-sm">
+              Changes to product details, pricing, and inventory are saved immediately and reflected across all sales channels. Product images update within 5 minutes.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/abstract-dark-tech-background-with-flowi-1773085532519-883f666b.png"
+          imageAlt="Tech abstract background"
+          logoText="TechVault"
+          copyrightText="© 2025 TechVault | Powering Tech E-Commerce"
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "Features", href: "#features" },
+                { label: "Pricing", href: "#pricing" },
+                { label: "Security", href: "#" },
+                { label: "Updates", href: "#" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "#contact" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" },
+                { label: "Compliance", href: "#" }
+              ]
+            }
+          ]}
+          containerClassName="max-w-7xl mx-auto"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -10,7 +10,7 @@ import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import { Zap, Star, Award, DollarSign, Mail, Hexagon, House, ShoppingCart, BarChart3, Settings, CircleDollarSign, ShoppingBag, TrendingUp, CreditCard, Lock, CheckCircle, Gauge, Package, Bell, MoreVertical, Smartphone, Globe, Store, Users, HelpCircle } from "lucide-react";
+import { Zap, Star, Award, DollarSign, Mail, Hexagon, House, ShoppingCart, BarChart3, Settings, CircleDollarSign, ShoppingBag, TrendingUp, CreditCard, Lock, CheckCircle, Gauge, Package, Bell, MoreVertical, Smartphone, Globe, Store, Users, HelpCircle, AlertCircle, TrendingDown, Activity, Box } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -44,39 +44,39 @@ export default function LandingPage() {
 
       <div id="hero" data-section="hero">
         <HeroBillboardDashboard
-          title="Next-Gen Tech Commerce"
-          description="Premium e-commerce platform for cutting-edge technology. Seamless checkout, real-time inventory tracking, and elite customer experience."
+          title="Next-Gen Tech Commerce with Inventory Management"
+          description="Premium e-commerce platform with advanced stock management, real-time inventory tracking, and automated reorder systems. Seamless checkout, intelligent stock alerts, and elite customer experience."
           tag="Premium Tech Store"
           tagIcon={Zap}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Browse Products", href: "#products" },
+            { text: "Start Shopping Free", href: "#products" },
             { text: "View Dashboard", href: "https://techvault.io/admin" }
           ]}
           buttonAnimation="blur-reveal"
           background={{ variant: "plain" }}
           dashboard={{
-            title: "Real-Time Commerce Hub",            logoIcon: Hexagon,
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-sleek-dark-tech-dashboard-interface-sh-1773085533392-c7e92339.png?_wi=1",            searchPlaceholder: "Search products...",            buttons: [
-              { text: "Dashboard", href: "https://techvault.io/admin" },
-              { text: "Export Reports", href: "#" }
+            title: "Real-Time Inventory Hub",            logoIcon: Box,
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-sleek-dark-tech-dashboard-interface-sh-1773085533392-c7e92339.png?_wi=1",            searchPlaceholder: "Search products or SKU...",            buttons: [
+              { text: "Inventory Dashboard", href: "https://techvault.io/admin" },
+              { text: "Export Stock Report", href: "#" }
             ],
             sidebarItems: [
               { icon: House, active: true },
-              { icon: ShoppingCart },
-              { icon: BarChart3 },
+              { icon: Box },
+              { icon: Activity },
               { icon: Settings }
             ],
             stats: [
-              { title: "Total Sales", values: [24580, 38920, 52450], valuePrefix: "$", description: "Revenue this month" },
-              { title: "Orders", values: [125, 189, 234], description: "Active transactions" },
-              { title: "Stock Items", values: [450, 425, 410], description: "Available products" }
+              { title: "Total Stock Value", values: [24580, 38920, 52450], valuePrefix: "$", description: "Inventory worth this month" },
+              { title: "Stock Levels", values: [125, 189, 234], description: "Active SKUs monitored" },
+              { title: "Low Stock Alerts", values: [12, 8, 3], description: "Items needing reorder" }
             ],
-            chartTitle: "Sales Performance",            chartData: [{ value: 45 }, { value: 60 }, { value: 75 }, { value: 90 }, { value: 85 }],
-            listTitle: "Recent Transactions",            listItems: [
-              { icon: CircleDollarSign, title: "$1,250 Premium Headphones", status: "Confirmed" },
-              { icon: ShoppingBag, title: "Order #2847 Shipped", status: "In Transit" },
-              { icon: TrendingUp, title: "Stock Alert: Low Inventory", status: "Alert" }
+            chartTitle: "Stock Level Trends",            chartData: [{ value: 95 }, { value: 88 }, { value: 76 }, { value: 82 }, { value: 91 }],
+            listTitle: "Inventory Updates",            listItems: [
+              { icon: AlertCircle, title: "Stock Alert: Pro Earbuds", status: "Critical" },
+              { icon: TrendingDown, title: "Smart Watch - 34 units sold", status: "Updated" },
+              { icon: Package, title: "New shipment received - 500 items", status: "Confirmed" }
             ]
           }}
           className="min-h-screen"
@@ -88,8 +88,8 @@ export default function LandingPage() {
 
       <div id="products" data-section="products">
         <ProductCardTwo
-          title="Featured Tech Collection"
-          description="Curated selection of premium technology products with verified 5-star ratings from verified customers."
+          title="Featured Tech Collection with Stock Tracking"
+          description="Curated selection of premium technology products with real-time stock levels, verified ratings, and automated inventory updates. View availability and reserve items instantly."
           tag="Top Sellers"
           tagIcon={Star}
           tagAnimation="slide-up"
@@ -102,15 +102,15 @@ export default function LandingPage() {
           products={[
             {
               id: "1",              brand: "TechVault",              name: "Pro Wireless Earbuds",              price: "$249.99",              rating: 5,
-              reviewCount: "2.8k",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-premium-tech-gadget-product-shot-sleek-1773085532843-b5a0598a.png",              imageAlt: "Premium wireless earbuds"
+              reviewCount: "2.8k",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-premium-tech-gadget-product-shot-sleek-1773085532843-b5a0598a.png",              imageAlt: "Premium wireless earbuds - Stock: 156 units"
             },
             {
               id: "2",              brand: "TechVault",              name: "Smart Watch Pro",              price: "$399.99",              rating: 5,
-              reviewCount: "4.2k",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-professional-tech-device-modern-smartp-1773085532582-d0d141fe.png",              imageAlt: "Advanced smartwatch device"
+              reviewCount: "4.2k",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-professional-tech-device-modern-smartp-1773085532582-d0d141fe.png",              imageAlt: "Advanced smartwatch device - Stock: 89 units"
             },
             {
               id: "3",              brand: "TechVault",              name: "Portable Charger Elite",              price: "$129.99",              rating: 5,
-              reviewCount: "1.9k",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-cutting-edge-tech-accessory-or-wearabl-1773085532779-cc3fe295.png",              imageAlt: "High-capacity portable charger"
+              reviewCount: "1.9k",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-cutting-edge-tech-accessory-or-wearabl-1773085532779-cc3fe295.png",              imageAlt: "High-capacity portable charger - Stock: 342 units"
             }
           ]}
           containerClassName="max-w-7xl mx-auto"
@@ -120,8 +120,8 @@ export default function LandingPage() {
 
       <div id="features" data-section="features">
         <FeatureBento
-          title="Powerful Commerce Features"
-          description="Everything you need to run a successful tech e-commerce business with intelligent inventory management and seamless payment processing."
+          title="Powerful Inventory Management Features"
+          description="Everything you need to run a successful tech e-commerce business with intelligent stock management, automated reorder points, supply chain visibility, and real-time stock synchronization across all channels."
           tag="Platform Capabilities"
           tagIcon={Zap}
           tagAnimation="slide-up"
@@ -132,44 +132,44 @@ export default function LandingPage() {
           animationType="slide-up"
           features={[
             {
-              title: "Real-Time Inventory",              description: "Track stock levels instantly across all channels",              bentoComponent: "animated-bar-chart"
+              title: "Real-Time Stock Tracking",              description: "Monitor inventory levels across all warehouses and channels instantly",              bentoComponent: "animated-bar-chart"
             },
             {
-              title: "Smart Pricing Engine",              description: "Automated discount management and promotional campaigns",              bentoComponent: "line-chart"
+              title: "Automated Reorder Management",              description: "Set minimum stock levels and auto-trigger purchase orders",              bentoComponent: "line-chart"
             },
             {
-              title: "Payment Integration",              description: "Stripe and PayPal integration for secure transactions",              bentoComponent: "icon-info-cards",              items: [
-                { icon: CreditCard, label: "Payment Methods", value: "12+" },
-                { icon: Lock, label: "Security Level", value: "SSL" },
-                { icon: CheckCircle, label: "Transactions", value: "100%" }
+              title: "Stock Analytics & Insights",              description: "Track inventory turnover, forecast demand, and optimize stock allocation",              bentoComponent: "icon-info-cards",              items: [
+                { icon: Activity, label: "Turnover Rate", value: "8.5x" },
+                { icon: TrendingUp, label: "Forecast", value: "92%" },
+                { icon: Box, label: "SKU Count", value: "2,847" }
               ]
             },
             {
-              title: "Admin Tasks",              description: "Comprehensive sales and customer behavior insights",              bentoComponent: "3d-task-list",              items: [
-                { icon: ShoppingCart, label: "Process Orders", time: "2 min" },
-                { icon: Package, label: "Update Stock", time: "5 min" },
-                { icon: TrendingUp, label: "Review Analytics", time: "10 min" }
+              title: "Inventory Tasks",              description: "Manage stock updates, reconciliation, and audits",              bentoComponent: "3d-task-list",              items: [
+                { icon: Package, label: "Count Inventory", time: "2 hrs" },
+                { icon: AlertCircle, label: "Reorder Stock", time: "30 min" },
+                { icon: Activity, label: "Audit Records", time: "1 hr" }
               ]
             },
             {
-              title: "Multi-Channel Sync",              description: "Unified product catalog across platforms",              bentoComponent: "orbiting-icons",              centerIcon: Globe,
+              title: "Multi-Channel Sync",              description: "Unified inventory catalog across all sales channels",              bentoComponent: "orbiting-icons",              centerIcon: Box,
               items: [
-                { icon: ShoppingBag, ring: 1 },
-                { icon: Store, ring: 2 },
-                { icon: Users, ring: 3 }
+                { icon: Store, ring: 1 },
+                { icon: Globe, ring: 2 },
+                { icon: ShoppingBag, ring: 3 }
               ]
             },
             {
-              title: "Admin Dashboard",              description: "One-click product and pricing modifications",              bentoComponent: "phone",              statusIcon: Smartphone,
-              alertIcon: Bell,
-              alertTitle: "Stock Alert",              alertMessage: "Inventory low for Product ID #247",              apps: [
-                { name: "Dashboard", icon: Gauge },
-                { name: "Products", icon: Package },
+              title: "Mobile Inventory App",              description: "Update stock levels and check availability on the go",              bentoComponent: "phone",              statusIcon: Box,
+              alertIcon: AlertCircle,
+              alertTitle: "Stock Alert",              alertMessage: "Earbuds inventory below threshold",              apps: [
+                { name: "Stock Count", icon: Package },
+                { name: "Locations", icon: Globe },
+                { name: "Shipments", icon: TrendingUp },
                 { name: "Orders", icon: ShoppingCart },
-                { name: "Analytics", icon: BarChart3 },
-                { name: "Settings", icon: Settings },
-                { name: "Wallet", icon: CreditCard },
-                { name: "Support", icon: HelpCircle },
+                { name: "Analytics", icon: Activity },
+                { name: "Alerts", icon: AlertCircle },
+                { name: "Reports", icon: BarChart3 },
                 { name: "More", icon: MoreVertical }
               ]
             }
@@ -180,8 +180,8 @@ export default function LandingPage() {
 
       <div id="metrics" data-section="metrics">
         <MetricCardSeven
-          title="Proven Business Impact"
-          description="Real results from successful tech e-commerce stores using our platform"
+          title="Proven Inventory Impact"
+          description="Real results from successful tech e-commerce stores using our advanced stock management platform"
           tag="Success Stories"
           tagIcon={Award}
           tagAnimation="slide-up"
@@ -190,16 +190,16 @@ export default function LandingPage() {
           animationType="slide-up"
           metrics={[
             {
-              id: "1",              value: "45%",              title: "Average Revenue Growth",              items: ["Within first 90 days", "Optimized checkout flow", "Real-time analytics"]
+              id: "1",              value: "68%",              title: "Stock Accuracy Improvement",              items: ["Reduced shrinkage", "Real-time tracking", "Automated reconciliation"]
             },
             {
-              id: "2",              value: "99.9%",              title: "Uptime Guarantee",              items: ["Reliable infrastructure", "24/7 support team", "Automatic backups"]
+              id: "2",              value: "42%",              title: "Inventory Cost Reduction",              items: ["Optimized stock levels", "Reduced overstock", "Better forecasting"]
             },
             {
-              id: "3",              value: "2.3s",              title: "Average Page Load",              items: ["Optimized performance", "CDN integrated", "Fast checkout"]
+              id: "3",              value: "3.2s",              title: "Stock Update Latency",              items: ["Real-time synchronization", "Instant availability checks", "Live dashboards"]
             },
             {
-              id: "4",              value: "$0",              title: "Setup Fees",              items: ["Transparent pricing", "No hidden costs", "Pay only commissions"]
+              id: "4",              value: "99.7%",              title: "Order Fulfillment Rate",              items: ["Accurate stock data", "Reduced backorders", "Customer satisfaction"]
             }
           ]}
           containerClassName="max-w-7xl mx-auto"
@@ -209,7 +209,7 @@ export default function LandingPage() {
       <div id="pricing" data-section="pricing">
         <PricingCardFive
           title="Transparent Pricing Plans"
-          description="Choose the plan that fits your business needs. All plans include core features with transparent commission rates."
+          description="Choose the plan that fits your business needs. All plans include inventory management with transparent pricing and no hidden fees."
           tag="Flexible Options"
           tagIcon={DollarSign}
           tagAnimation="slide-up"
@@ -219,15 +219,15 @@ export default function LandingPage() {
           plans={[
             {
               id: "starter",              tag: "Starter Plan",              price: "Free",              period: "forever",              description: "Perfect for small tech shops getting started.",              button: { text: "Get Started", href: "#" },
-              featuresTitle: "What's Included:",              features: ["Up to 50 products", "Basic analytics", "Email support", "Payment processing", "1 admin account"]
+              featuresTitle: "What's Included:",              features: ["Up to 50 products", "Basic inventory tracking", "Email support", "Payment processing", "1 admin account", "Stock alerts"]
             },
             {
               id: "professional",              tag: "Professional Plan",              price: "$49",              period: "/month",              description: "Ideal for growing tech e-commerce businesses.",              button: { text: "Start Free Trial", href: "#" },
-              featuresTitle: "What's Included:",              features: ["Unlimited products", "Advanced analytics", "Priority support", "Stripe integration", "5 admin accounts", "Marketing tools", "API access"]
+              featuresTitle: "What's Included:",              features: ["Unlimited products", "Advanced inventory management", "Multi-warehouse support", "Priority support", "5 admin accounts", "Automated reorder systems", "API access", "Stock forecasting"]
             },
             {
               id: "enterprise",              tag: "Enterprise Plan",              price: "$199",              period: "/month",              description: "For large-scale tech retailers with custom needs.",              button: { text: "Schedule Demo", href: "#" },
-              featuresTitle: "What's Included:",              features: ["Everything in Professional", "White-label solution", "Dedicated account manager", "Custom integrations", "Unlimited admin accounts", "Advanced security", "99.9% SLA", "Phone support"]
+              featuresTitle: "What's Included:",              features: ["Everything in Professional", "Custom inventory workflows", "Dedicated account manager", "Real-time analytics", "Unlimited admin accounts", "Advanced security", "99.9% SLA", "Phone support"]
             }
           ]}
           containerClassName="max-w-7xl mx-auto"
@@ -237,7 +237,7 @@ export default function LandingPage() {
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardOne
           title="Trusted by Tech Leaders"
-          description="Hear from successful e-commerce merchants who transformed their businesses with our platform."
+          description="Hear from successful e-commerce merchants who transformed their businesses with our inventory management platform."
           tag="Customer Reviews"
           tagIcon={Star}
           tagAnimation="slide-up"
@@ -271,7 +271,7 @@ export default function LandingPage() {
         <ContactSplit
           tag="Stay Connected"
           title="Join Our Tech Community"
-          description="Subscribe to receive exclusive product launches, special discounts, and insider tips for maximizing your e-commerce success."
+          description="Subscribe to receive exclusive product launches, inventory management tips, stock optimization strategies, and insider insights for maximizing your e-commerce success."
           tagIcon={Mail}
           tagAnimation="slide-up"
           background={{ variant: "sparkles-gradient" }}
@@ -297,7 +297,7 @@ export default function LandingPage() {
               title: "Product",              items: [
                 { label: "Features", href: "#features" },
                 { label: "Pricing", href: "#pricing" },
-                { label: "Security", href: "#" },
+                { label: "Inventory", href: "#" },
                 { label: "Updates", href: "#" }
               ]
             },

src/app/seller-dashboard/page.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
+import { Hexagon, House, ShoppingCart, BarChart3, Settings, CircleDollarSign, ShoppingBag, TrendingUp, Package, Bell, MoreVertical, Gauge, HelpCircle, Smartphone } from "lucide-react";
+
+export default function SellerDashboardPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="outline"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="TechVault"
+          navItems={[
+            { name: "Shop", id: "/" },
+            { name: "Features", id: "#features" },
+            { name: "Pricing", id: "#pricing" },
+            { name: "Support", id: "#contact" },
+            { name: "Dashboard", id: "/seller-dashboard" }
+          ]}
+          button={{ text: "Go to Store", href: "/" }}
+          className="backdrop-blur-md bg-opacity-80"
+          buttonClassName="bg-gradient-to-r from-[#80da9b] to-[#a8e8ba] text-black font-semibold"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardDashboard
+          title="Seller Dashboard"
+          description="Manage your entire e-commerce business from one powerful dashboard. Track inventory, monitor sales, and optimize performance in real-time."
+          tag="Seller Control Center"
+          tagIcon={Hexagon}
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "View Products", href: "#" },
+            { text: "Export Reports", href: "#" }
+          ]}
+          buttonAnimation="blur-reveal"
+          background={{ variant: "plain" }}
+          dashboard={{
+            title: "Seller Management Hub",            logoIcon: Hexagon,
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-sleek-dark-tech-dashboard-interface-sh-1773085533392-c7e92339.png?_wi=1",            searchPlaceholder: "Search products, orders, discounts...",            buttons: [
+              { text: "Add Product", href: "#" },
+              { text: "View Analytics", href: "#" }
+            ],
+            sidebarItems: [
+              { icon: House, active: true },
+              { icon: ShoppingCart },
+              { icon: CircleDollarSign },
+              { icon: Package },
+              { icon: BarChart3 },
+              { icon: Bell },
+              { icon: Settings }
+            ],
+            stats: [
+              { title: "Total Revenue", values: [24580, 38920, 52450], valuePrefix: "$", description: "This month" },
+              { title: "Active Products", values: [85, 92, 105], description: "Listed items" },
+              { title: "Pending Orders", values: [12, 8, 5], description: "To process" }
+            ],
+            chartTitle: "Sales Trend",            chartData: [{ value: 45 }, { value: 60 }, { value: 75 }, { value: 90 }, { value: 85 }],
+            listTitle: "Quick Actions",            listItems: [
+              { icon: ShoppingCart, title: "Manage Products", status: "Active" },
+              { icon: CircleDollarSign, title: "Create Discount Campaign", status: "Ready" },
+              { icon: Package, title: "Update Inventory Levels", status: "Pending" }
+            ]
+          }}
+          className="min-h-screen"
+          containerClassName="max-w-7xl mx-auto"
+          titleClassName="text-5xl md:text-7xl font-bold"
+          descriptionClassName="text-lg md:text-xl text-opacity-80"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/seller-login/page.tsx

@@ -0,0 +1,388 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { Mail, Lock, CheckCircle, AlertCircle, Eye, EyeOff, ArrowRight } from "lucide-react";
+
+export default function SellerLoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [loginStep, setLoginStep] = useState<"email" | "password" | "verify" | "success">("email");
+  const [error, setError] = useState("");
+  const [verificationCode, setVerificationCode] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleEmailSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    if (!email) {
+      setError("Please enter your email address");
+      setIsLoading(false);
+      return;
+    }
+
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setError("Please enter a valid email address");
+      setIsLoading(false);
+      return;
+    }
+
+    // Simulate API call
+    setTimeout(() => {
+      setLoginStep("verify");
+      setIsLoading(false);
+    }, 1500);
+  };
+
+  const handleVerificationSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    if (!verificationCode) {
+      setError("Please enter the verification code");
+      setIsLoading(false);
+      return;
+    }
+
+    if (verificationCode.length !== 6) {
+      setError("Verification code must be 6 digits");
+      setIsLoading(false);
+      return;
+    }
+
+    // Simulate API call
+    setTimeout(() => {
+      setLoginStep("password");
+      setIsLoading(false);
+    }, 1500);
+  };
+
+  const handlePasswordSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    if (!password) {
+      setError("Please enter your password");
+      setIsLoading(false);
+      return;
+    }
+
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters");
+      setIsLoading(false);
+      return;
+    }
+
+    // Simulate API call
+    setTimeout(() => {
+      setLoginStep("success");
+      setIsLoading(false);
+      // Redirect to dashboard after 2 seconds
+      setTimeout(() => {
+        window.location.href = "https://techvault.io/admin";
+      }, 2000);
+    }, 1500);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="outline"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="TechVault"
+          navItems={[
+            { name: "Shop", id: "/" },
+            { name: "Features", id: "/#features" },
+            { name: "Pricing", id: "/#pricing" },
+            { name: "Support", id: "/#contact" }
+          ]}
+          button={{ text: "Back to Store", href: "/" }}
+          className="backdrop-blur-md bg-opacity-80"
+          buttonClassName="bg-gradient-to-r from-[#80da9b] to-[#a8e8ba] text-black font-semibold"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplit
+          title="Seller Authentication"
+          description="Secure login portal for Prime Re Stock sellers. Manage your inventory, track orders, and grow your business."
+          background={{ variant: "plain" }}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/a-sleek-dark-tech-dashboard-interface-sh-1773085533392-c7e92339.png?_wi=1"
+          imageAlt="Seller dashboard preview"
+          mediaAnimation="blur-reveal"
+          fixedMediaHeight={true}
+          className="min-h-screen"
+          containerClassName="max-w-7xl mx-auto"
+        />
+      </div>
+
+      <div id="contact" data-section="contact" className="py-20">
+        <div className="max-w-7xl mx-auto px-4">
+          <div className="bg-white dark:bg-slate-900 rounded-2xl shadow-2xl p-8 md:p-12 max-w-md mx-auto border border-slate-200 dark:border-slate-700">
+            {/* Email Step */}
+            {loginStep === "email" && (
+              <form onSubmit={handleEmailSubmit} className="space-y-6">
+                <div className="text-center mb-8">
+                  <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
+                    Seller Login
+                  </h2>
+                  <p className="text-slate-600 dark:text-slate-400">
+                    Step 1: Enter your email
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
+                    Email Address
+                  </label>
+                  <div className="relative">
+                    <Mail className="absolute left-3 top-3 text-slate-400" size={18} />
+                    <input
+                      type="email"
+                      value={email}
+                      onChange={(e) => {
+                        setEmail(e.target.value);
+                        setError("");
+                      }}
+                      placeholder="seller@example.com"
+                      className="w-full pl-10 pr-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-green-500"
+                    />
+                  </div>
+                </div>
+
+                {error && (
+                  <div className="flex items-center gap-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+                    <AlertCircle size={18} className="text-red-600 dark:text-red-400" />
+                    <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+                  </div>
+                )}
+
+                <button
+                  type="submit"
+                  disabled={isLoading}
+                  className="w-full bg-gradient-to-r from-[#80da9b] to-[#a8e8ba] text-black font-semibold py-2 px-4 rounded-lg hover:shadow-lg transition-all duration-300 disabled:opacity-50 flex items-center justify-center gap-2"
+                >
+                  {isLoading ? "Sending..." : "Continue with Email"}
+                  {!isLoading && <ArrowRight size={18} />}
+                </button>
+
+                <p className="text-center text-sm text-slate-600 dark:text-slate-400">
+                  New seller?{" "}
+                  <a href="#" className="text-green-600 dark:text-green-400 font-semibold hover:underline">
+                    Create account
+                  </a>
+                </p>
+              </form>
+            )}
+
+            {/* Verification Step */}
+            {loginStep === "verify" && (
+              <form onSubmit={handleVerificationSubmit} className="space-y-6">
+                <div className="text-center mb-8">
+                  <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
+                    Verify Email
+                  </h2>
+                  <p className="text-slate-600 dark:text-slate-400">
+                    Step 2: Enter verification code
+                  </p>
+                  <p className="text-sm text-slate-500 dark:text-slate-500 mt-2">
+                    Check your email for a 6-digit code
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
+                    Verification Code
+                  </label>
+                  <input
+                    type="text"
+                    value={verificationCode}
+                    onChange={(e) => {
+                      const val = e.target.value.replace(/\D/g, "").slice(0, 6);
+                      setVerificationCode(val);
+                      setError("");
+                    }}
+                    placeholder="000000"
+                    maxLength={6}
+                    className="w-full px-4 py-3 text-center text-2xl tracking-widest border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-green-500 font-mono"
+                  />
+                </div>
+
+                {error && (
+                  <div className="flex items-center gap-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+                    <AlertCircle size={18} className="text-red-600 dark:text-red-400" />
+                    <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+                  </div>
+                )}
+
+                <button
+                  type="submit"
+                  disabled={isLoading || verificationCode.length !== 6}
+                  className="w-full bg-gradient-to-r from-[#80da9b] to-[#a8e8ba] text-black font-semibold py-2 px-4 rounded-lg hover:shadow-lg transition-all duration-300 disabled:opacity-50 flex items-center justify-center gap-2"
+                >
+                  {isLoading ? "Verifying..." : "Verify Email"}
+                  {!isLoading && <ArrowRight size={18} />}
+                </button>
+
+                <button
+                  type="button"
+                  onClick={() => {
+                    setLoginStep("email");
+                    setVerificationCode("");
+                    setError("");
+                  }}
+                  className="w-full text-slate-600 dark:text-slate-400 text-sm hover:text-slate-900 dark:hover:text-white font-medium"
+                >
+                  ← Back to email
+                </button>
+              </form>
+            )}
+
+            {/* Password Step */}
+            {loginStep === "password" && (
+              <form onSubmit={handlePasswordSubmit} className="space-y-6">
+                <div className="text-center mb-8">
+                  <div className="flex justify-center mb-4">
+                    <CheckCircle size={32} className="text-green-600 dark:text-green-400" />
+                  </div>
+                  <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
+                    Email Verified
+                  </h2>
+                  <p className="text-slate-600 dark:text-slate-400">
+                    Step 3: Set your password
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
+                    Password
+                  </label>
+                  <div className="relative">
+                    <Lock className="absolute left-3 top-3 text-slate-400" size={18} />
+                    <input
+                      type={showPassword ? "text" : "password"}
+                      value={password}
+                      onChange={(e) => {
+                        setPassword(e.target.value);
+                        setError("");
+                      }}
+                      placeholder="••••••••"
+                      className="w-full pl-10 pr-10 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-green-500"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute right-3 top-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"
+                    >
+                      {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                    </button>
+                  </div>
+                  <p className="text-xs text-slate-500 dark:text-slate-400">
+                    Minimum 8 characters
+                  </p>
+                </div>
+
+                {error && (
+                  <div className="flex items-center gap-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+                    <AlertCircle size={18} className="text-red-600 dark:text-red-400" />
+                    <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+                  </div>
+                )}
+
+                <button
+                  type="submit"
+                  disabled={isLoading}
+                  className="w-full bg-gradient-to-r from-[#80da9b] to-[#a8e8ba] text-black font-semibold py-2 px-4 rounded-lg hover:shadow-lg transition-all duration-300 disabled:opacity-50 flex items-center justify-center gap-2"
+                >
+                  {isLoading ? "Setting up..." : "Complete Login"}
+                  {!isLoading && <ArrowRight size={18} />}
+                </button>
+              </form>
+            )}
+
+            {/* Success Step */}
+            {loginStep === "success" && (
+              <div className="space-y-6 text-center">
+                <div className="flex justify-center">
+                  <div className="relative">
+                    <div className="absolute inset-0 bg-green-500/20 rounded-full blur-lg"></div>
+                    <CheckCircle size={48} className="text-green-600 dark:text-green-400 relative" />
+                  </div>
+                </div>
+                <div>
+                  <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
+                    Welcome Back!
+                  </h2>
+                  <p className="text-slate-600 dark:text-slate-400">
+                    Your account has been authenticated successfully.
+                  </p>
+                </div>
+                <p className="text-sm text-slate-500 dark:text-slate-500">
+                  Redirecting to dashboard...
+                </p>
+                <div className="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-1 overflow-hidden">
+                  <div className="bg-green-600 h-full animate-pulse"></div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiptcO4QrzBpwIQbUIl2kal97h/abstract-dark-tech-background-with-flowi-1773085532519-883f666b.png"
+          imageAlt="Tech abstract background"
+          logoText="TechVault"
+          copyrightText="© 2025 TechVault | Powering Tech E-Commerce"
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "Features", href: "/#features" },
+                { label: "Pricing", href: "/#pricing" },
+                { label: "Security", href: "#" },
+                { label: "Updates", href: "#" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "/#contact" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" },
+                { label: "Compliance", href: "#" }
+              ]
+            }
+          ]}
+          containerClassName="max-w-7xl mx-auto"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}