Merge version_3 into main

Merge version_3 into main

src/app/admin/page.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
+import ProductCardFour from "@/components/sections/product/ProductCardFour";
+import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { House, MessageSquareText, Settings, Sparkles, CircleDollarSign, ArrowLeftRight, Send, Package, ShoppingCart, BarChart3, TrendingUp } from "lucide-react";
+
+export default function AdminDashboard() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="grid"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="ADMIN"
+          navItems={[
+            { name: "Dashboard", id: "hero" },
+            { name: "Products", id: "products" },
+            { name: "Orders", id: "orders" },
+            { name: "Inventory", id: "inventory" },
+            { name: "Analytics", id: "analytics" }
+          ]}
+          button={{ text: "Logout", href: "#" }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardDashboard
+          title="Real-Time Admin Dashboard"
+          description="Monitor product inventory, orders, and sales analytics in one unified view"
+          background={{ variant: "radial-gradient" }}
+          tag="Live Dashboard"
+          tagIcon={Sparkles}
+          buttons={[
+            { text: "Export Report", href: "#" },
+            { text: "View Settings", href: "#" }
+          ]}
+          dashboard={{
+            title: "Dashboard Metrics Hub",            logoIcon: House,
+            imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-posing-near-office-building_1262-21023.jpg",            buttons: [
+              { text: "Dashboard", href: "#" },
+              { text: "Export CSV", href: "#" }
+            ],
+            sidebarItems: [
+              { icon: House, active: true },
+              { icon: Package, active: false },
+              { icon: ShoppingCart, active: false },
+              { icon: BarChart3, active: false },
+              { icon: Settings, active: false }
+            ],
+            stats: [
+              { title: "Total Revenue", values: [48250, 65890, 82750], valuePrefix: "$", description: "Monthly revenue" },
+              { title: "Active Orders", values: [1240, 1568, 1345], description: "Pending fulfillment" },
+              { title: "Inventory Value", values: [156000, 178900, 195430], valuePrefix: "$", description: "Current stock value" }
+            ],
+            chartTitle: "Sales Trend",            chartData: [
+              { value: 45 },
+              { value: 62 },
+              { value: 58 },
+              { value: 78 },
+              { value: 85 },
+              { value: 92 }
+            ],
+            listTitle: "Recent Orders",            listItems: [
+              { icon: ShoppingCart, title: "Order #12345", status: "Shipped" },
+              { icon: CircleDollarSign, title: "Payment: $450.00", status: "Confirmed" },
+              { icon: Package, title: "Stock Update: +250 units", status: "Processed" }
+            ]
+          }}
+        />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardFour
+          products={[
+            {
+              id: "1",              name: "Premium Leather Tote",              price: "$285",              variant: "Black • 3 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-ornamental-plants-home-decor-female-hand-shop-window_169016-50350.jpg?_wi=2",              imageAlt: "premium luxury product shot professional",              isFavorited: false
+            },
+            {
+              id: "2",              name: "Elegant Silk Scarf",              price: "$165",              variant: "Ivory • 5 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/queen-crown-still-life_23-2150409245.jpg?_wi=2",              imageAlt: "luxury retail product on display",              isFavorited: false
+            },
+            {
+              id: "3",              name: "Luxury Timepiece",              price: "$425",              variant: "Stainless Steel • Leather Strap",              imageSrc: "http://img.b2bpic.net/free-photo/make-up-concept-with-pink-nail-polish_23-2149030370.jpg?_wi=2",              imageAlt: "premium luxury store product display",              isFavorited: false
+            },
+            {
+              id: "4",              name: "Gold Pendant Necklace",              price: "$345",              variant: "Gold • 2 Styles",              imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg?_wi=1",              imageAlt: "premium luxury jewelry product display",              isFavorited: false
+            }
+          ]}
+          title="Product Management"
+          description="View and manage all products in your inventory with real-time status updates"
+          tag="Active Products"
+          tagIcon={Package}
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="orders" data-section="orders">
+        <MetricCardTwo
+          metrics={[
+            { id: "1", value: "127", description: "Orders This Month" },
+            { id: "2", value: "45", description: "Pending Fulfillment" },
+            { id: "3", value: "2.4", description: "Average Days to Ship" },
+            { id: "4", value: "$58K", description: "Total Order Value" }
+          ]}
+          title="Order Management"
+          description="Monitor order status, fulfillment metrics, and customer activity"
+          tag="Order Analytics"
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="inventory" data-section="inventory">
+        <ProductCardFour
+          products={[
+            {
+              id: "5",              name: "Stock Level A",              price: "1,250 units",              variant: "In Stock • Ready",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-with-folded-arms-looking-camera_23-2147955314.jpg",              imageAlt: "inventory stock management",              isFavorited: false
+            },
+            {
+              id: "6",              name: "Stock Level B",              price: "890 units",              variant: "Low Stock • Order Soon",              imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg?_wi=2",              imageAlt: "low inventory alert",              isFavorited: false
+            },
+            {
+              id: "7",              name: "Stock Level C",              price: "2,340 units",              variant: "High Stock • Optimal",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-grey-haired-businessman-standing_74855-10324.jpg",              imageAlt: "healthy inventory levels",              isFavorited: false
+            }
+          ]}
+          title="Inventory Tracking"
+          description="Real-time inventory levels and stock status across all product categories"
+          tag="Stock Status"
+          tagIcon={Package}
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="analytics" data-section="analytics">
+        <MetricCardTwo
+          metrics={[
+            { id: "1", value: "$185.4K", description: "Revenue This Month" },
+            { id: "2", value: "3.2%", description: "Growth Rate" },
+            { id: "3", value: "8,450", description: "Unique Visitors" },
+            { id: "4", value: "2.8%", description: "Conversion Rate" }
+          ]}
+          title="Analytics & Insights"
+          description="Comprehensive analytics dashboard showing sales trends and customer behavior"
+          tag="Performance Metrics"
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Admin",              items: [
+                { label: "Dashboard", href: "#hero" },
+                { label: "Products", href: "#products" },
+                { label: "Orders", href: "#orders" },
+                { label: "Inventory", href: "#inventory" }
+              ]
+            },
+            {
+              title: "Management",              items: [
+                { label: "Analytics", href: "#analytics" },
+                { label: "Reports", href: "#" },
+                { label: "Settings", href: "#" },
+                { label: "Users", href: "#" }
+              ]
+            },
+            {
+              title: "Support",              items: [
+                { label: "Documentation", href: "#" },
+                { label: "Help Center", href: "#" },
+                { label: "Contact Support", href: "#" },
+                { label: "API Docs", href: "#" }
+              ]
+            },
+            {
+              title: "Account",              items: [
+                { label: "Profile", href: "#" },
+                { label: "Preferences", href: "#" },
+                { label: "Security", href: "#" },
+                { label: "Logout", href: "#" }
+              ]
+            }
+          ]}
+          bottomLeftText="© 2025 Admin Dashboard. All rights reserved."
+          bottomRightText="Admin Portal v1.0"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -10,9 +10,68 @@ import TestimonialCardFifteen from "@/components/sections/testimonial/Testimonia
 import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
 import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Mail, Sparkles } from "lucide-react";
+import { Mail, Sparkles, Palette, Maximize2 } from "lucide-react";
+import { useState } from "react";
+
+interface ProductCustomization {
+  id: string;
+  colors: string[];
+  sizes: string[];
+}
 
 export default function LandingPage() {
+  const [selectedCustomizations, setSelectedCustomizations] = useState<{
+    [key: string]: { color: string; size: string };
+  }>({
+    "1": { color: "Black", size: "Medium" },
+    "2": { color: "Ivory", size: "One Size" },
+    "3": { color: "Stainless Steel", size: "Standard" }
+  });
+
+  const productCustomizations: { [key: string]: ProductCustomization } = {
+    "1": {
+      id: "1",      colors: ["Black", "Cognac", "Navy", "Taupe"],
+      sizes: ["Small", "Medium", "Large", "Extra Large"]
+    },
+    "2": {
+      id: "2",      colors: ["Ivory", "Charcoal", "Sage", "Burgundy", "Gold"],
+      sizes: ["One Size"]
+    },
+    "3": {
+      id: "3",      colors: ["Stainless Steel", "Rose Gold", "White Gold"],
+      sizes: ["Standard"]
+    }
+  };
+
+  const handleColorChange = (productId: string, color: string) => {
+    setSelectedCustomizations((prev) => ({
+      ...prev,
+      [productId]: { ...prev[productId], color }
+    }));
+  };
+
+  const handleSizeChange = (productId: string, size: string) => {
+    setSelectedCustomizations((prev) => ({
+      ...prev,
+      [productId]: { ...prev[productId], size }
+    }));
+  };
+
+  const enhancedProducts = [
+    {
+      id: "1",      name: "Premium Leather Tote",      price: "$285",      variant: `${selectedCustomizations["1"].color} • ${selectedCustomizations["1"].size}`,
+      imageSrc: "http://img.b2bpic.net/free-photo/closeup-ornamental-plants-home-decor-female-hand-shop-window_169016-50350.jpg?_wi=1",      imageAlt: "premium luxury product shot professional",      isFavorited: false
+    },
+    {
+      id: "2",      name: "Elegant Silk Scarf",      price: "$165",      variant: `${selectedCustomizations["2"].color}`,
+      imageSrc: "http://img.b2bpic.net/free-photo/queen-crown-still-life_23-2150409245.jpg?_wi=1",      imageAlt: "luxury retail product on display",      isFavorited: false
+    },
+    {
+      id: "3",      name: "Luxury Timepiece",      price: "$425",      variant: `${selectedCustomizations["3"].color}`,
+      imageSrc: "http://img.b2bpic.net/free-photo/make-up-concept-with-pink-nail-polish_23-2149030370.jpg?_wi=1",      imageAlt: "premium luxury store product display",      isFavorited: false
+    }
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-bubble"
@@ -43,7 +102,7 @@ export default function LandingPage() {
       <div id="hero" data-section="hero">
         <HeroLogo
           logoText="SHOP"
-          description="Experience curated luxury and premium craftsmanship in every item we offer"
+          description="Discover handpicked luxury pieces customized to your style. Elevate your wardrobe with premium craftsmanship designed for the discerning eye."
           buttons={[
             { text: "Explore Collection", href: "#products" },
             { text: "Learn More", href: "#about" }
@@ -55,27 +114,147 @@ export default function LandingPage() {
       </div>
 
       <div id="products" data-section="products">
-        <ProductCardFour
+        <div className="w-full">
-          products={[
+          <ProductCardFour
-            {
+            products={enhancedProducts}
-              id: "1",              name: "Premium Leather Tote",              price: "$285",              variant: "Black • 3 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-ornamental-plants-home-decor-female-hand-shop-window_169016-50350.jpg",              imageAlt: "premium luxury product shot professional",              isFavorited: false
+            title="Featured Collection"
-            },
+            description="Handpicked premium items selected for their exceptional quality and design. Customize your selections with available colors and sizes."
-            {
+            tag="New Arrivals"
-              id: "2",              name: "Elegant Silk Scarf",              price: "$165",              variant: "Ivory • 5 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/queen-crown-still-life_23-2150409245.jpg",              imageAlt: "luxury retail product on display",              isFavorited: false
+            tagIcon={Sparkles}
-            },
+            gridVariant="uniform-all-items-equal"
-            {
+            animationType="slide-up"
-              id: "3",              name: "Luxury Timepiece",              price: "$425",              variant: "Stainless Steel • Leather Strap",              imageSrc: "http://img.b2bpic.net/free-photo/make-up-concept-with-pink-nail-polish_23-2149030370.jpg",              imageAlt: "premium luxury store product display",              isFavorited: false
+            textboxLayout="default"
-            }
+            useInvertedBackground={false}
-          ]}
+          />
-          title="Featured Collection"
+
-          description="Handpicked premium items selected for their exceptional quality and design"
+          {/* Customization UI Section */}
-          tag="New Arrivals"
+          <div className="w-full bg-gradient-to-b from-transparent to-var(--background-accent) py-12 md:py-16 px-4 md:px-6">
-          tagIcon={Sparkles}
+            <div className="max-w-6xl mx-auto">
-          gridVariant="uniform-all-items-equal"
+              <div className="flex items-center justify-center gap-2 mb-8">
-          animationType="slide-up"
+                <Palette className="w-5 h-5 md:w-6 md:h-6" />
-          textboxLayout="default"
+                <h3 className="text-xl md:text-2xl font-semibold">Customize Your Selection</h3>
-          useInvertedBackground={false}
+              </div>
-        />
+
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
+                {/* Product 1 - Tote Bag */}
+                <div className="bg-var(--card) rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow">
+                  <h4 className="font-semibold text-lg mb-4">Premium Leather Tote</h4>
+
+                  <div className="mb-6">
+                    <label className="block text-sm font-medium mb-3 flex items-center gap-2">
+                      <Palette className="w-4 h-4" />
+                      Color Options
+                    </label>
+                    <div className="grid grid-cols-2 gap-2">
+                      {productCustomizations["1"].colors.map((color) => (
+                        <button
+                          key={color}
+                          onClick={() => handleColorChange("1", color)}
+                          className={`py-2 px-3 rounded-md text-sm font-medium transition-all ${
+                            selectedCustomizations["1"].color === color
+                              ? "bg-var(--primary-cta) text-var(--primary-cta-text) ring-2 ring-offset-2 ring-var(--primary-cta)"
+                              : "bg-var(--background) text-var(--foreground) border border-var(--accent) hover:border-var(--primary-cta)"
+                          }`}
+                        >
+                          {color}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium mb-3 flex items-center gap-2">
+                      <Maximize2 className="w-4 h-4" />
+                      Size Options
+                    </label>
+                    <div className="grid grid-cols-2 gap-2">
+                      {productCustomizations["1"].sizes.map((size) => (
+                        <button
+                          key={size}
+                          onClick={() => handleSizeChange("1", size)}
+                          className={`py-2 px-3 rounded-md text-sm font-medium transition-all ${
+                            selectedCustomizations["1"].size === size
+                              ? "bg-var(--primary-cta) text-var(--primary-cta-text) ring-2 ring-offset-2 ring-var(--primary-cta)"
+                              : "bg-var(--background) text-var(--foreground) border border-var(--accent) hover:border-var(--primary-cta)"
+                          }`}
+                        >
+                          {size}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Product 2 - Scarf */}
+                <div className="bg-var(--card) rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow">
+                  <h4 className="font-semibold text-lg mb-4">Elegant Silk Scarf</h4>
+
+                  <div className="mb-6">
+                    <label className="block text-sm font-medium mb-3 flex items-center gap-2">
+                      <Palette className="w-4 h-4" />
+                      Color Options
+                    </label>
+                    <div className="grid grid-cols-2 gap-2">
+                      {productCustomizations["2"].colors.map((color) => (
+                        <button
+                          key={color}
+                          onClick={() => handleColorChange("2", color)}
+                          className={`py-2 px-3 rounded-md text-sm font-medium transition-all ${
+                            selectedCustomizations["2"].color === color
+                              ? "bg-var(--primary-cta) text-var(--primary-cta-text) ring-2 ring-offset-2 ring-var(--primary-cta)"
+                              : "bg-var(--background) text-var(--foreground) border border-var(--accent) hover:border-var(--primary-cta)"
+                          }`}
+                        >
+                          {color}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="text-sm text-var(--foreground) opacity-75">
+                    One Size Fits All
+                  </div>
+                </div>
+
+                {/* Product 3 - Timepiece */}
+                <div className="bg-var(--card) rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow">
+                  <h4 className="font-semibold text-lg mb-4">Luxury Timepiece</h4>
+
+                  <div className="mb-6">
+                    <label className="block text-sm font-medium mb-3 flex items-center gap-2">
+                      <Palette className="w-4 h-4" />
+                      Metal Options
+                    </label>
+                    <div className="grid grid-cols-2 gap-2">
+                      {productCustomizations["3"].colors.map((color) => (
+                        <button
+                          key={color}
+                          onClick={() => handleColorChange("3", color)}
+                          className={`py-2 px-3 rounded-md text-sm font-medium transition-all ${
+                            selectedCustomizations["3"].color === color
+                              ? "bg-var(--primary-cta) text-var(--primary-cta-text) ring-2 ring-offset-2 ring-var(--primary-cta)"
+                              : "bg-var(--background) text-var(--foreground) border border-var(--accent) hover:border-var(--primary-cta)"
+                          }`}
+                        >
+                          {color}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="text-sm text-var(--foreground) opacity-75">
+                    Standard Size
+                  </div>
+                </div>
+              </div>
+
+              {/* Responsive Notice */}
+              <div className="mt-8 text-center text-sm text-var(--foreground) opacity-75">
+                <p>Customization options are displayed responsively. On mobile devices, scroll horizontally to view all options.</p>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="about" data-section="about">
@@ -194,4 +373,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #efebe5;
+  --background: #ffffff;
-  --card: #f7f2ea;
+  --card: #f5f5f5;
   --foreground: #000000;
   --primary-cta: #000000;
   --primary-cta-text: #efebe5;
   --secondary-cta: #ffffff;
   --secondary-cta-text: #000000;
-  --accent: #ffffff;
+  --accent: #e0e0e0;
-  --background-accent: #e1b875;
+  --background-accent: #d0d0d0;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);