Update src/app/admin/page.tsx

Merge version_5 into main

src/app/admin/page.tsx

@@ -0,0 +1,362 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import TextBox from "@/components/Textbox";
+import { BarChart3, TrendingUp, Package, DollarSign, Percent, AlertCircle } from "lucide-react";
+import { useState } from "react";
+
+interface Order {
+  id: string;
+  orderNumber: string;
+  customer: string;
+  date: string;
+  total: number;
+  status: "pending" | "shipped" | "delivered" | "cancelled";
+  items: number;
+}
+
+interface Discount {
+  id: string;
+  code: string;
+  description: string;
+  discountPercentage: number;
+  expiryDate: string;
+  active: boolean;
+  usageCount: number;
+}
+
+export default function AdminDashboard() {
+  const navItems = [
+    { name: "Dashboard", id: "dashboard" },
+    { name: "Orders", id: "orders" },
+    { name: "Revenue", id: "revenue" },
+    { name: "Discounts", id: "discounts" },
+    { name: "Products", id: "products" },
+  ];
+
+  const [orders, setOrders] = useState<Order[]>([
+    {
+      id: "1",      orderNumber: "ORD-001",      customer: "John Doe",      date: "2025-01-15",      total: 249.99,
+      status: "delivered",      items: 3,
+    },
+    {
+      id: "2",      orderNumber: "ORD-002",      customer: "Jane Smith",      date: "2025-01-14",      total: 179.50,
+      status: "shipped",      items: 2,
+    },
+    {
+      id: "3",      orderNumber: "ORD-003",      customer: "Mike Johnson",      date: "2025-01-13",      total: 89.99,
+      status: "pending",      items: 1,
+    },
+    {
+      id: "4",      orderNumber: "ORD-004",      customer: "Sarah Williams",      date: "2025-01-12",      total: 599.99,
+      status: "delivered",      items: 5,
+    },
+    {
+      id: "5",      orderNumber: "ORD-005",      customer: "Alex Brown",      date: "2025-01-11",      total: 129.99,
+      status: "cancelled",      items: 1,
+    },
+  ]);
+
+  const [discounts, setDiscounts] = useState<Discount[]>([
+    {
+      id: "1",      code: "WELCOME10",      description: "10% off first purchase",      discountPercentage: 10,
+      expiryDate: "2025-12-31",      active: true,
+      usageCount: 245,
+    },
+    {
+      id: "2",      code: "SUMMER20",      description: "20% off summer collection",      discountPercentage: 20,
+      expiryDate: "2025-08-31",      active: true,
+      usageCount: 128,
+    },
+    {
+      id: "3",      code: "FLASH15",      description: "15% flash sale",      discountPercentage: 15,
+      expiryDate: "2025-01-20",      active: true,
+      usageCount: 567,
+    },
+    {
+      id: "4",      code: "OLDCODE5",      description: "Expired promotional code",      discountPercentage: 5,
+      expiryDate: "2024-12-31",      active: false,
+      usageCount: 89,
+    },
+  ]);
+
+  const totalRevenue = orders.reduce((sum, order) => sum + order.total, 0);
+  const totalOrders = orders.length;
+  const deliveredOrders = orders.filter((o) => o.status === "delivered").length;
+  const pendingOrders = orders.filter((o) => o.status === "pending").length;
+  const totalDiscountUsage = discounts.reduce((sum, d) => sum + d.usageCount, 0);
+  const activeDiscounts = discounts.filter((d) => d.active).length;
+
+  const getStatusColor = (status: Order["status"]): string => {
+    switch (status) {
+      case "delivered":
+        return "bg-green-100 text-green-800";
+      case "shipped":
+        return "bg-blue-100 text-blue-800";
+      case "pending":
+        return "bg-yellow-100 text-yellow-800";
+      case "cancelled":
+        return "bg-red-100 text-red-800";
+      default:
+        return "bg-gray-100 text-gray-800";
+    }
+  };
+
+  const handleToggleDiscount = (id: string) => {
+    setDiscounts(
+      discounts.map((d) => (d.id === id ? { ...d, active: !d.active } : d))
+    );
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="mediumSizeLargeTitles"
+      background="aurora"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={navItems}
+          brandName="Admin Dashboard"
+          button={{
+            text: "Logout",            href: "/"}}
+          animateOnLoad={true}
+          className="bg-opacity-95"
+          navItemClassName="text-sm font-medium"
+          buttonClassName="bg-red-500 hover:bg-red-600"
+          buttonTextClassName="text-white font-semibold"
+        />
+      </div>
+
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-8">
+        <div className="max-w-7xl mx-auto">
+          {/* Dashboard Header */}
+          <div id="dashboard" data-section="dashboard" className="mb-12">
+            <TextBox
+              title="Admin Dashboard"
+              description="Track orders, monitor revenue, and manage promotional discounts"
+              type="entrance-slide"
+              textboxLayout="default"
+              center={false}
+            />
+          </div>
+
+          {/* KPI Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+            <div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-blue-500">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm text-gray-600 font-medium">Total Orders</p>
+                  <p className="text-3xl font-bold text-gray-900 mt-2">
+                    {totalOrders}
+                  </p>
+                </div>
+                <Package className="h-8 w-8 text-blue-500" />
+              </div>
+              <p className="text-xs text-gray-500 mt-4">
+                {deliveredOrders} delivered, {pendingOrders} pending
+              </p>
+            </div>
+
+            <div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-green-500">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm text-gray-600 font-medium">Total Revenue</p>
+                  <p className="text-3xl font-bold text-gray-900 mt-2">
+                    ${totalRevenue.toFixed(2)}
+                  </p>
+                </div>
+                <DollarSign className="h-8 w-8 text-green-500" />
+              </div>
+              <p className="text-xs text-gray-500 mt-4">From {totalOrders} orders</p>
+            </div>
+
+            <div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-purple-500">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm text-gray-600 font-medium">Active Discounts</p>
+                  <p className="text-3xl font-bold text-gray-900 mt-2">
+                    {activeDiscounts}
+                  </p>
+                </div>
+                <Percent className="h-8 w-8 text-purple-500" />
+              </div>
+              <p className="text-xs text-gray-500 mt-4">
+                {totalDiscountUsage} total uses
+              </p>
+            </div>
+
+            <div className="bg-white rounded-lg shadow-md p-6 border-l-4 border-orange-500">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm text-gray-600 font-medium">Avg Order Value</p>
+                  <p className="text-3xl font-bold text-gray-900 mt-2">
+                    ${(totalRevenue / totalOrders).toFixed(2)}
+                  </p>
+                </div>
+                <TrendingUp className="h-8 w-8 text-orange-500" />
+              </div>
+              <p className="text-xs text-gray-500 mt-4">Per transaction</p>
+            </div>
+          </div>
+
+          {/* Orders Section */}
+          <div id="orders" data-section="orders" className="mb-12">
+            <div className="bg-white rounded-lg shadow-md p-8">
+              <h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
+                <BarChart3 className="h-6 w-6 text-blue-500" />
+                Recent Orders
+              </h2>
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead className="border-b border-gray-200">
+                    <tr>
+                      <th className="text-left py-3 px-4 font-semibold text-gray-700">
+                        Order #
+                      </th>
+                      <th className="text-left py-3 px-4 font-semibold text-gray-700">
+                        Customer
+                      </th>
+                      <th className="text-left py-3 px-4 font-semibold text-gray-700">
+                        Date
+                      </th>
+                      <th className="text-left py-3 px-4 font-semibold text-gray-700">
+                        Items
+                      </th>
+                      <th className="text-left py-3 px-4 font-semibold text-gray-700">
+                        Total
+                      </th>
+                      <th className="text-left py-3 px-4 font-semibold text-gray-700">
+                        Status
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {orders.map((order) => (
+                      <tr key={order.id} className="border-b border-gray-100 hover:bg-gray-50">
+                        <td className="py-4 px-4 font-medium text-gray-900">
+                          {order.orderNumber}
+                        </td>
+                        <td className="py-4 px-4 text-gray-700">{order.customer}</td>
+                        <td className="py-4 px-4 text-gray-700">{order.date}</td>
+                        <td className="py-4 px-4 text-gray-700">{order.items}</td>
+                        <td className="py-4 px-4 font-semibold text-gray-900">
+                          ${order.total.toFixed(2)}
+                        </td>
+                        <td className="py-4 px-4">
+                          <span
+                            className={`inline-block px-3 py-1 rounded-full text-xs font-medium capitalize ${
+                              getStatusColor(order.status)
+                            }`}
+                          >
+                            {order.status}
+                          </span>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          {/* Revenue Section */}
+          <div id="revenue" data-section="revenue" className="mb-12">
+            <div className="bg-white rounded-lg shadow-md p-8">
+              <h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
+                <DollarSign className="h-6 w-6 text-green-500" />
+                Revenue Summary
+              </h2>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div className="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-6">
+                  <p className="text-sm text-gray-600 font-medium">Total Revenue</p>
+                  <p className="text-2xl font-bold text-green-600 mt-2">
+                    ${totalRevenue.toFixed(2)}
+                  </p>
+                </div>
+                <div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-6">
+                  <p className="text-sm text-gray-600 font-medium">Delivered Orders</p>
+                  <p className="text-2xl font-bold text-blue-600 mt-2">
+                    ${orders
+                      .filter((o) => o.status === "delivered")
+                      .reduce((sum, o) => sum + o.total, 0)
+                      .toFixed(2)}
+                  </p>
+                </div>
+                <div className="bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-lg p-6">
+                  <p className="text-sm text-gray-600 font-medium">Pending Orders</p>
+                  <p className="text-2xl font-bold text-yellow-600 mt-2">
+                    ${orders
+                      .filter((o) => o.status === "pending")
+                      .reduce((sum, o) => sum + o.total, 0)
+                      .toFixed(2)}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Discounts Section */}
+          <div id="discounts" data-section="discounts">
+            <div className="bg-white rounded-lg shadow-md p-8">
+              <h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
+                <Percent className="h-6 w-6 text-purple-500" />
+                Promotional Discounts
+              </h2>
+              <div className="space-y-4">
+                {discounts.map((discount) => (
+                  <div
+                    key={discount.id}
+                    className="border border-gray-200 rounded-lg p-6 flex items-center justify-between hover:shadow-md transition-shadow"
+                  >
+                    <div className="flex-1">
+                      <div className="flex items-center gap-3 mb-2">
+                        <h3 className="text-lg font-bold text-gray-900">
+                          {discount.code}
+                        </h3>
+                        <span
+                          className={`inline-block px-2 py-1 rounded text-xs font-medium ${
+                            discount.active
+                              ? "bg-green-100 text-green-800"
+                              : "bg-red-100 text-red-800"
+                          }`}
+                        >
+                          {discount.active ? "Active" : "Inactive"}
+                        </span>
+                        {!discount.active && <AlertCircle className="h-4 w-4 text-red-500" />}
+                      </div>
+                      <p className="text-sm text-gray-600 mb-2">{discount.description}</p>
+                      <div className="flex gap-6 text-sm text-gray-500">
+                        <span>Discount: {discount.discountPercentage}%</span>
+                        <span>Expires: {discount.expiryDate}</span>
+                        <span>Used: {discount.usageCount} times</span>
+                      </div>
+                    </div>
+                    <button
+                      onClick={() => handleToggleDiscount(discount.id)}
+                      className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                        discount.active
+                          ? "bg-red-100 text-red-700 hover:bg-red-200"
+                          : "bg-green-100 text-green-700 hover:bg-green-200"
+                      }`}
+                    >
+                      {discount.active ? "Deactivate" : "Activate"}
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -10,9 +10,24 @@ import TestimonialCardFifteen from "@/components/sections/testimonial/Testimonia
 import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FaqDouble from "@/components/sections/faq/FaqDouble";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
-import { Sparkles, Zap, Award, Star, HelpCircle, Mail } from "lucide-react";
+import { Sparkles, Zap, Award, Star, HelpCircle, Mail, Heart } from "lucide-react";
+import { useState } from "react";
 
 export default function HomePage() {
+  const [wishlist, setWishlist] = useState<Set<string>>(new Set());
+
+  const toggleWishlist = (productId: string) => {
+    setWishlist((prev) => {
+      const updated = new Set(prev);
+      if (updated.has(productId)) {
+        updated.delete(productId);
+      } else {
+        updated.add(productId);
+      }
+      return updated;
+    });
+  };
+
   const navItems = [
     { name: "Home", id: "home" },
     { name: "Shop", id: "shop" },
@@ -25,8 +40,7 @@ export default function HomePage() {
 
   const footerColumns = [
     {
-      title: "Shop",
-      items: [
+      title: "Shop",      items: [
         { label: "All Products", href: "/shop" },
         { label: "New Arrivals", href: "/shop" },
         { label: "Best Sellers", href: "/shop" },
@@ -34,8 +48,7 @@ export default function HomePage() {
       ],
     },
     {
-      title: "Company",
-      items: [
+      title: "Company",      items: [
         { label: "About Us", href: "/" },
         { label: "Contact", href: "/" },
         { label: "Blog", href: "/" },
@@ -43,8 +56,7 @@ export default function HomePage() {
       ],
     },
     {
-      title: "Support",
-      items: [
+      title: "Support",      items: [
         { label: "Shipping & Returns", href: "/" },
         { label: "FAQ", href: "/" },
         { label: "Size Guide", href: "#" },
@@ -52,8 +64,7 @@ export default function HomePage() {
       ],
     },
     {
-      title: "Legal",
-      items: [
+      title: "Legal",      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms & Conditions", href: "#" },
         { label: "Cookie Policy", href: "#" },
@@ -62,6 +73,80 @@ export default function HomePage() {
     },
   ];
 
+  const featuredProducts = [
+    {
+      id: "prod-001",      brand: "Nike",      name: "Air Max 90 Classic",      price: "$129.99",      rating: 4.8,
+      reviewCount: "342",      imageSrc: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2",      imageAlt: "Nike Air Max 90 sneaker in white and grey",      isFavorited: wishlist.has("prod-001"),
+      onFavorite: () => toggleWishlist("prod-001"),
+    },
+    {
+      id: "prod-002",      brand: "Supreme",      name: "Box Logo Hoodie",      price: "$345.00",      rating: 4.9,
+      reviewCount: "521",      imageSrc: "http://img.b2bpic.net/free-photo/afro-hair-style-doing-okay-gesture_140725-36572.jpg?_wi=2",      imageAlt: "Supreme black box logo hoodie",      isFavorited: wishlist.has("prod-002"),
+      onFavorite: () => toggleWishlist("prod-002"),
+    },
+    {
+      id: "prod-003",      brand: "Carhartt WIP",      name: "Detroit Jacket",      price: "$159.99",      rating: 4.7,
+      reviewCount: "189",      imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-jacket-jeans-clothes_158538-1617.jpg?_wi=2",      imageAlt: "Carhartt WIP brown Detroit work jacket",      isFavorited: wishlist.has("prod-003"),
+      onFavorite: () => toggleWishlist("prod-003"),
+    },
+    {
+      id: "prod-004",      brand: "Stüssy",      name: "Classic T-Shirt",      price: "$48.00",      rating: 4.6,
+      reviewCount: "276",      imageSrc: "http://img.b2bpic.net/free-photo/t-shirt-painting-indoors-still-life_23-2150572721.jpg?_wi=2",      imageAlt: "Stüssy white classic logo t-shirt",      isFavorited: wishlist.has("prod-004"),
+      onFavorite: () => toggleWishlist("prod-004"),
+    },
+    {
+      id: "prod-005",      brand: "Adidas",      name: "Ultra Boost 22",      price: "$189.99",      rating: 4.8,
+      reviewCount: "437",      imageSrc: "http://img.b2bpic.net/free-photo/side-view-sports-shoes_23-2147618070.jpg",      imageAlt: "Adidas Ultra Boost 22 in black",      isFavorited: wishlist.has("prod-005"),
+      onFavorite: () => toggleWishlist("prod-005"),
+    },
+    {
+      id: "prod-006",      brand: "The North Face",      name: "Nuptse Jacket",      price: "$229.99",      rating: 4.9,
+      reviewCount: "654",      imageSrc: "http://img.b2bpic.net/free-photo/young-man-listening-music-headphones-close-up_23-2148381737.jpg?_wi=2",      imageAlt: "The North Face Nuptse puffer jacket in black",      isFavorited: wishlist.has("prod-006"),
+      onFavorite: () => toggleWishlist("prod-006"),
+    },
+  ];
+
+  const newArrivalsProducts = [
+    {
+      id: "prod-007",      brand: "Nike",      name: "Jordan 1 Low OG",      price: "$99.99",      rating: 4.7,
+      reviewCount: "128",      imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-legs-keds-going-down-stairs_176420-55081.jpg",      imageAlt: "Jordan 1 Low OG sneaker",      isFavorited: wishlist.has("prod-007"),
+      onFavorite: () => toggleWishlist("prod-007"),
+    },
+    {
+      id: "prod-008",      brand: "Supreme",      name: "Arc Logo Cap",      price: "$68.00",      rating: 4.5,
+      reviewCount: "95",      imageSrc: "http://img.b2bpic.net/free-photo/young-man-putting-hand-cap-white-t-shirt-jacket-gray-cap-looking-serious-front-view_176474-84297.jpg",      imageAlt: "Supreme arc logo baseball cap",      isFavorited: wishlist.has("prod-008"),
+      onFavorite: () => toggleWishlist("prod-008"),
+    },
+    {
+      id: "prod-009",      brand: "Stüssy",      name: "Fleece Pullover",      price: "$98.00",      rating: 4.8,
+      reviewCount: "203",      imageSrc: "http://img.b2bpic.net/free-photo/beautiful-smiling-woman-stands-by-tree_8353-9397.jpg",      imageAlt: "Stüssy fleece pullover in grey",      isFavorited: wishlist.has("prod-009"),
+      onFavorite: () => toggleWishlist("prod-009"),
+    },
+  ];
+
+  const bestSellersProducts = [
+    {
+      id: "prod-010",      brand: "Adidas",      name: "Stan Smith Classic",      price: "$89.99",      rating: 4.9,
+      reviewCount: "1,240",      imageSrc: "http://img.b2bpic.net/free-photo/new-pair-white-sneakers-isolated-white_93675-130969.jpg?_wi=2",      imageAlt: "Adidas Stan Smith white leather sneaker",      isFavorited: wishlist.has("prod-010"),
+      onFavorite: () => toggleWishlist("prod-010"),
+    },
+    {
+      id: "prod-011",      brand: "The North Face",      name: "Denali Fleece",      price: "$99.99",      rating: 4.8,
+      reviewCount: "856",      imageSrc: "http://img.b2bpic.net/free-photo/young-hipster-man-hiking-mountains-winter-vacation-traveling_285396-1955.jpg",      imageAlt: "The North Face Denali fleece jacket",      isFavorited: wishlist.has("prod-011"),
+      onFavorite: () => toggleWishlist("prod-011"),
+    },
+    {
+      id: "prod-012",      brand: "Carhartt WIP",      name: "Simple Pant",      price: "$54.99",      rating: 4.7,
+      reviewCount: "742",      imageSrc: "http://img.b2bpic.net/free-photo/cropped-stock-photo-unrecognizable-woman-white-shirt-formal-black-straight-trousers-black-leather-heels-standing-street-fashion-model-dresscode-concept_132075-9150.jpg",      imageAlt: "Carhartt WIP simple pant in black",      isFavorited: wishlist.has("prod-012"),
+      onFavorite: () => toggleWishlist("prod-012"),
+    },
+    {
+      id: "prod-013",      brand: "Vans",      name: "Old Skool",      price: "$65.00",      rating: 4.9,
+      reviewCount: "1,567",      imageSrc: "http://img.b2bpic.net/free-photo/people-80s-aesthetic-summer-clothing_23-2151016254.jpg",      imageAlt: "Vans Old Skool classic skateboard shoe",      isFavorited: wishlist.has("prod-013"),
+      onFavorite: () => toggleWishlist("prod-013"),
+    },
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
@@ -75,18 +160,178 @@ export default function HomePage() {
       secondaryButtonStyle="solid"
       headingFontWeight="bold"
     >
+      <style>{`
+        /* Micro-interactions & smooth transitions */
+        * {
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        /* Button hover effects */
+        button, a[role="button"] {
+          position: relative;
+          overflow: hidden;
+        }
+
+        button:hover, a[role="button"]:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
+        }
+
+        button:active, a[role="button"]:active {
+          transform: translateY(0);
+        }
+
+        /* Product card hover effects */
+        [data-product-card] {
+          position: relative;
+          border-radius: inherit;
+          overflow: hidden;
+        }
+
+        [data-product-card]:hover {
+          transform: translateY(-8px);
+          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        }
+
+        [data-product-image] {
+          position: relative;
+          overflow: hidden;
+        }
+
+        [data-product-image] img {
+          transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        [data-product-card]:hover [data-product-image] img {
+          transform: scale(1.08);
+        }
+
+        /* Wishlist button animation */
+        [data-wishlist-button] {
+          position: relative;
+          width: 44px;
+          height: 44px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.9);
+          border: 1px solid rgba(0, 0, 0, 0.1);
+          cursor: pointer;
+          backdrop-filter: blur(4px);
+        }
+
+        [data-wishlist-button]:hover {
+          background: rgba(255, 255, 255, 1);
+          transform: scale(1.1) rotate(5deg);
+          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
+        }
+
+        [data-wishlist-button] svg {
+          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        [data-wishlist-button].favorited svg {
+          fill: currentColor;
+          color: #ff1744;
+          animation: heartPulse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        @keyframes heartPulse {
+          0% { transform: scale(1); }
+          50% { transform: scale(1.2); }
+          100% { transform: scale(1); }
+        }
+
+        /* Mobile-first wishlist styles */
+        @media (max-width: 768px) {
+          [data-wishlist-button] {
+            width: 40px;
+            height: 40px;
+          }
+
+          [data-product-card]:hover {
+            transform: translateY(-4px);
+          }
+        }
+
+        /* Smooth link transitions */
+        a {
+          position: relative;
+        }
+
+        a::after {
+          content: '';
+          position: absolute;
+          bottom: -2px;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: currentColor;
+          transition: width 0.3s ease;
+        }
+
+        a:hover::after {
+          width: 100%;
+        }
+
+        /* Navbar smooth transitions */
+        nav {
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        nav a {
+          transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        nav a:hover {
+          color: var(--primary-cta, #3b82f6);
+        }
+
+        /* Form input focus states */
+        input[type="text"],
+        input[type="email"],
+        textarea {
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          border-color: rgba(0, 0, 0, 0.1);
+        }
+
+        input[type="text"]:focus,
+        input[type="email"]:focus,
+        textarea:focus {
+          outline: none;
+          border-color: var(--primary-cta, #3b82f6);
+          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+          transform: translateY(-1px);
+        }
+
+        /* Accordion smooth transitions */
+        [data-accordion-button] {
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        [data-accordion-button]:hover {
+          background: rgba(0, 0, 0, 0.02);
+          padding-left: 1.5rem;
+        }
+
+        [data-accordion-content] {
+          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+          overflow: hidden;
+        }
+      `}</style>
+
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingInline
           navItems={navItems}
           brandName="garraagarmzz"
           button={{
-            text: "Shop Now",
-            href: "/shop",
+            text: "Shop Now",            href: "/shop"
           }}
           animateOnLoad={true}
-          className="bg-opacity-95"
-          navItemClassName="text-sm font-medium"
-          buttonClassName="bg-blue-500 hover:bg-blue-600"
+          className="bg-opacity-95 transition-all duration-300 hover:bg-opacity-100"
+          navItemClassName="text-sm font-medium transition-colors duration-300 hover:text-blue-500"
+          buttonClassName="bg-blue-500 hover:bg-blue-600 transition-all duration-300 transform hover:-translate-y-0.5 hover:shadow-lg"
           buttonTextClassName="text-white font-semibold"
         />
       </div>
@@ -101,22 +346,18 @@ export default function HomePage() {
           background={{ variant: "plain" }}
           leftCarouselItems={[
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-woman-dressed-white-dress-sitting-summer-open-air-theatre-chair-alone-spring-street-style-fashion-trend-accessories-traveling-with-backpack-skinny-legs-sandals_285396-4543.jpg?_wi=2",
-              imageAlt: "luxury premium sneakers white grey leather",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-woman-dressed-white-dress-sitting-summer-open-air-theatre-chair-alone-spring-street-style-fashion-trend-accessories-traveling-with-backpack-skinny-legs-sandals_285396-4543.jpg?_wi=2",              imageAlt: "luxury premium sneakers white grey leather"
             },
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/top-view-accessoires-travel-with-man-clothing-concept-shirt-jean-mobile-phone-wooden-background-watch-sunglasses-shoes-wood-table_1921-79.jpg?_wi=2",
-              imageAlt: "luxury fashion accessories collection display",
+              imageSrc: "http://img.b2bpic.net/free-photo/top-view-accessoires-travel-with-man-clothing-concept-shirt-jean-mobile-phone-wooden-background-watch-sunglasses-shoes-wood-table_1921-79.jpg?_wi=2",              imageAlt: "luxury fashion accessories collection display"
             },
           ]}
           rightCarouselItems={[
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432326.jpg?_wi=2",
-              imageAlt: "streetwear clothing collection hoodies jackets",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trucker-hat_23-2149432326.jpg?_wi=2",              imageAlt: "streetwear clothing collection hoodies jackets"
             },
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/pleased-well-dressed-male-model-sitting-stairs-fashionable-african-guy-enjoying-photoshoot-steps_197531-22070.jpg?_wi=2",
-              imageAlt: "designer clothing collection luxury brands",
+              imageSrc: "http://img.b2bpic.net/free-photo/pleased-well-dressed-male-model-sitting-stairs-fashionable-african-guy-enjoying-photoshoot-steps_197531-22070.jpg?_wi=2",              imageAlt: "designer clothing collection luxury brands"
             },
           ]}
           buttons={[
@@ -138,6 +379,7 @@ export default function HomePage() {
           marqueeSpeed={35}
           showMarqueeCard={true}
           ariaLabel="Hero section featuring garraagarmzz brand identity and featured products"
+          className="transition-all duration-500 hover:scale-105"
         />
       </div>
 
@@ -152,78 +394,13 @@ export default function HomePage() {
           useInvertedBackground={false}
           gridVariant="bento-grid"
           animationType="slide-up"
-          products={[
-            {
-              id: "prod-001",
-              brand: "Nike",
-              name: "Air Max 90 Classic",
-              price: "$129.99",
-              rating: 4.8,
-              reviewCount: "342",
-              imageSrc: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2",
-              imageAlt: "Nike Air Max 90 sneaker in white and grey",
-              isFavorited: false,
-            },
-            {
-              id: "prod-002",
-              brand: "Supreme",
-              name: "Box Logo Hoodie",
-              price: "$345.00",
-              rating: 4.9,
-              reviewCount: "521",
-              imageSrc: "http://img.b2bpic.net/free-photo/afro-hair-style-doing-okay-gesture_140725-36572.jpg?_wi=2",
-              imageAlt: "Supreme black box logo hoodie",
-              isFavorited: false,
-            },
-            {
-              id: "prod-003",
-              brand: "Carhartt WIP",
-              name: "Detroit Jacket",
-              price: "$159.99",
-              rating: 4.7,
-              reviewCount: "189",
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-jacket-jeans-clothes_158538-1617.jpg?_wi=2",
-              imageAlt: "Carhartt WIP brown Detroit work jacket",
-              isFavorited: false,
-            },
-            {
-              id: "prod-004",
-              brand: "Stüssy",
-              name: "Classic T-Shirt",
-              price: "$48.00",
-              rating: 4.6,
-              reviewCount: "276",
-              imageSrc: "http://img.b2bpic.net/free-photo/t-shirt-painting-indoors-still-life_23-2150572721.jpg?_wi=2",
-              imageAlt: "Stüssy white classic logo t-shirt",
-              isFavorited: false,
-            },
-            {
-              id: "prod-005",
-              brand: "Adidas",
-              name: "Ultra Boost 22",
-              price: "$189.99",
-              rating: 4.8,
-              reviewCount: "437",
-              imageSrc: "http://img.b2bpic.net/free-photo/side-view-sports-shoes_23-2147618070.jpg",
-              imageAlt: "Adidas Ultra Boost 22 in black",
-              isFavorited: false,
-            },
-            {
-              id: "prod-006",
-              brand: "The North Face",
-              name: "Nuptse Jacket",
-              price: "$229.99",
-              rating: 4.9,
-              reviewCount: "654",
-              imageSrc: "http://img.b2bpic.net/free-photo/young-man-listening-music-headphones-close-up_23-2148381737.jpg?_wi=2",
-              imageAlt: "The North Face Nuptse puffer jacket in black",
-              isFavorited: false,
-            },
-          ]}
+          products={featuredProducts}
           buttons={[{ text: "View All", href: "/shop" }]}
           buttonAnimation="slide-up"
           carouselMode="buttons"
           ariaLabel="Featured products carousel"
+          cardClassName="transition-all duration-300 hover:shadow-xl hover:-translate-y-2"
+          imageClassName="transition-transform duration-500 hover:scale-110"
         />
       </div>
 
@@ -237,34 +414,17 @@ export default function HomePage() {
           textboxLayout="default"
           useInvertedBackground={true}
           names={[
-            "Nike",
-            "Adidas",
-            "Supreme",
-            "Stüssy",
-            "Carhartt WIP",
-            "The North Face",
-            "Balenciaga",
-            "Dickies",
-            "Vans",
-            "Converse",
+            "Nike",            "Adidas",            "Supreme",            "Stüssy",            "Carhartt WIP",            "The North Face",            "Balenciaga",            "Dickies",            "Vans",            "Converse"
           ]}
           logos={[
-            "http://img.b2bpic.net/free-vector/ballet-studio-logo-template-design_742173-17939.jpg",
-            "http://img.b2bpic.net/free-vector/flat-design-outlet-stamp-collection_23-2149752880.jpg",
-            "http://img.b2bpic.net/free-vector/flat-design-gratis-label-collection_23-2149889390.jpg",
-            "http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition_1284-52940.jpg",
-            "http://img.b2bpic.net/free-vector/labor-day-badge-collection_23-2148094629.jpg",
-            "http://img.b2bpic.net/free-vector/hand-drawn-adventure-badges-nature_23-2147543057.jpg",
-            "http://img.b2bpic.net/free-vector/luxury-logo-design-template_23-2150881456.jpg",
-            "http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition-dark_1284-44291.jpg",
-            "http://img.b2bpic.net/free-vector/set-drawings_1284-45834.jpg",
-            "http://img.b2bpic.net/free-photo/view-skateboard-with-retro-memorabilia_23-2150583922.jpg",
+            "http://img.b2bpic.net/free-vector/ballet-studio-logo-template-design_742173-17939.jpg",            "http://img.b2bpic.net/free-vector/flat-design-outlet-stamp-collection_23-2149752880.jpg",            "http://img.b2bpic.net/free-vector/flat-design-gratis-label-collection_23-2149889390.jpg",            "http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition_1284-52940.jpg",            "http://img.b2bpic.net/free-vector/labor-day-badge-collection_23-2148094629.jpg",            "http://img.b2bpic.net/free-vector/hand-drawn-adventure-badges-nature_23-2147543057.jpg",            "http://img.b2bpic.net/free-vector/luxury-logo-design-template_23-2150881456.jpg",            "http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition-dark_1284-44291.jpg",            "http://img.b2bpic.net/free-vector/set-drawings_1284-45834.jpg",            "http://img.b2bpic.net/free-photo/view-skateboard-with-retro-memorabilia_23-2150583922.jpg"
           ]}
           buttons={[{ text: "Explore All Brands", href: "/shop" }]}
           buttonAnimation="slide-up"
           speed={40}
           showCard={true}
           ariaLabel="Partner brands marquee"
+          logoItemClassName="transition-all duration-300 hover:scale-110 hover:shadow-lg"
         />
       </div>
 
@@ -279,45 +439,13 @@ export default function HomePage() {
           useInvertedBackground={false}
           gridVariant="three-columns-all-equal-width"
           animationType="blur-reveal"
-          products={[
-            {
-              id: "prod-007",
-              brand: "Nike",
-              name: "Jordan 1 Low OG",
-              price: "$99.99",
-              rating: 4.7,
-              reviewCount: "128",
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-legs-keds-going-down-stairs_176420-55081.jpg",
-              imageAlt: "Jordan 1 Low OG sneaker",
-              isFavorited: false,
-            },
-            {
-              id: "prod-008",
-              brand: "Supreme",
-              name: "Arc Logo Cap",
-              price: "$68.00",
-              rating: 4.5,
-              reviewCount: "95",
-              imageSrc: "http://img.b2bpic.net/free-photo/young-man-putting-hand-cap-white-t-shirt-jacket-gray-cap-looking-serious-front-view_176474-84297.jpg",
-              imageAlt: "Supreme arc logo baseball cap",
-              isFavorited: false,
-            },
-            {
-              id: "prod-009",
-              brand: "Stüssy",
-              name: "Fleece Pullover",
-              price: "$98.00",
-              rating: 4.8,
-              reviewCount: "203",
-              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-smiling-woman-stands-by-tree_8353-9397.jpg",
-              imageAlt: "Stüssy fleece pullover in grey",
-              isFavorited: false,
-            },
-          ]}
+          products={newArrivalsProducts}
           buttons={[{ text: "See All New Items", href: "/shop" }]}
           buttonAnimation="slide-up"
           carouselMode="buttons"
           ariaLabel="New arrivals section"
+          cardClassName="transition-all duration-300 hover:shadow-xl hover:-translate-y-2"
+          imageClassName="transition-transform duration-500 hover:scale-110"
         />
       </div>
 
@@ -332,56 +460,13 @@ export default function HomePage() {
           useInvertedBackground={true}
           gridVariant="four-items-2x2-equal-grid"
           animationType="scale-rotate"
-          products={[
-            {
-              id: "prod-010",
-              brand: "Adidas",
-              name: "Stan Smith Classic",
-              price: "$89.99",
-              rating: 4.9,
-              reviewCount: "1,240",
-              imageSrc: "http://img.b2bpic.net/free-photo/new-pair-white-sneakers-isolated-white_93675-130969.jpg?_wi=2",
-              imageAlt: "Adidas Stan Smith white leather sneaker",
-              isFavorited: false,
-            },
-            {
-              id: "prod-011",
-              brand: "The North Face",
-              name: "Denali Fleece",
-              price: "$99.99",
-              rating: 4.8,
-              reviewCount: "856",
-              imageSrc: "http://img.b2bpic.net/free-photo/young-hipster-man-hiking-mountains-winter-vacation-traveling_285396-1955.jpg",
-              imageAlt: "The North Face Denali fleece jacket",
-              isFavorited: false,
-            },
-            {
-              id: "prod-012",
-              brand: "Carhartt WIP",
-              name: "Simple Pant",
-              price: "$54.99",
-              rating: 4.7,
-              reviewCount: "742",
-              imageSrc: "http://img.b2bpic.net/free-photo/cropped-stock-photo-unrecognizable-woman-white-shirt-formal-black-straight-trousers-black-leather-heels-standing-street-fashion-model-dresscode-concept_132075-9150.jpg",
-              imageAlt: "Carhartt WIP simple pant in black",
-              isFavorited: false,
-            },
-            {
-              id: "prod-013",
-              brand: "Vans",
-              name: "Old Skool",
-              price: "$65.00",
-              rating: 4.9,
-              reviewCount: "1,567",
-              imageSrc: "http://img.b2bpic.net/free-photo/people-80s-aesthetic-summer-clothing_23-2151016254.jpg",
-              imageAlt: "Vans Old Skool classic skateboard shoe",
-              isFavorited: false,
-            },
-          ]}
+          products={bestSellersProducts}
           buttons={[{ text: "Shop Best Sellers", href: "/shop" }]}
           buttonAnimation="slide-up"
           carouselMode="buttons"
           ariaLabel="Best sellers collection"
+          cardClassName="transition-all duration-300 hover:shadow-xl hover:-translate-y-2"
+          imageClassName="transition-transform duration-500 hover:scale-110"
         />
       </div>
 
@@ -392,22 +477,22 @@ export default function HomePage() {
           author="Jordan Mitchell"
           avatars={[
             {
-              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
-              alt: "Jordan Mitchell",
+              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Jordan Mitchell"
             },
           ]}
           ratingAnimation="slide-up"
           avatarsAnimation="slide-up"
           useInvertedBackground={false}
           ariaLabel="Customer testimonial section"
+          className="transition-all duration-500 hover:shadow-xl"
         />
       </div>
 
       <div id="newsletter-contact" data-section="newsletter-contact">
         <ContactCenter
           tag="Stay Connected"
-          title="Join Our Community"
-          description="Subscribe to our newsletter for exclusive drops, early access to new collections, and special offers."
+          title="Get 10% Off + VIP Access"
+          description="Unlock 10% off your first order, early access to drops, and insider pricing—available only to subscribers."
           tagIcon={Mail}
           tagAnimation="slide-up"
           background={{ variant: "animated-grid" }}
@@ -416,6 +501,9 @@ export default function HomePage() {
           buttonText="Subscribe"
           termsText="By subscribing, you agree to receive marketing emails. Unsubscribe at any time."
           ariaLabel="Newsletter signup section"
+          formClassName="transition-all duration-300"
+          inputClassName="transition-all duration-300 focus:shadow-lg focus:scale-105"
+          buttonClassName="transition-all duration-300 hover:shadow-lg hover:-translate-y-1 active:translate-y-0"
         />
       </div>
 
@@ -431,39 +519,28 @@ export default function HomePage() {
           faqsAnimation="slide-up"
           faqs={[
             {
-              id: "faq-001",
-              title: "Are all products authentic?",
-              content: "Yes, we guarantee 100% authenticity for all items sold on garraagarmzz. We source directly from authorized retailers and brand partnerships. Each item undergoes quality verification before being listed.",
+              id: "faq-001",              title: "Are all products authentic?",              content: "Yes, we guarantee 100% authenticity for all items sold on garraagarmzz. We source directly from authorized retailers and brand partnerships. Each item undergoes quality verification before being listed."
             },
             {
-              id: "faq-002",
-              title: "What is your return policy?",
-              content: "We offer a 30-day return policy on all items. Products must be unworn, unwashed, and in original packaging with all tags attached. Returns are free within the US.",
+              id: "faq-002",              title: "What is your return policy?",              content: "We offer a 30-day return policy on all items. Products must be unworn, unwashed, and in original packaging with all tags attached. Returns are free within the US."
             },
             {
-              id: "faq-003",
-              title: "How long does shipping take?",
-              content: "Standard shipping takes 5-7 business days. Express shipping (2-3 business days) and overnight shipping options are available at checkout. Orders are processed within 24 hours.",
+              id: "faq-003",              title: "How long does shipping take?",              content: "Standard shipping takes 5-7 business days. Express shipping (2-3 business days) and overnight shipping options are available at checkout. Orders are processed within 24 hours."
             },
             {
-              id: "faq-004",
-              title: "Do you ship internationally?",
-              content: "Yes, we ship to most countries worldwide. International shipping rates and delivery times vary by location. Customs duties may apply depending on your country.",
+              id: "faq-004",              title: "Do you ship internationally?",              content: "Yes, we ship to most countries worldwide. International shipping rates and delivery times vary by location. Customs duties may apply depending on your country."
             },
             {
-              id: "faq-005",
-              title: "What payment methods do you accept?",
-              content: "We accept all major credit cards, PayPal, Apple Pay, Google Pay, and Klarna. All payments are secured with SSL encryption.",
+              id: "faq-005",              title: "What payment methods do you accept?",              content: "We accept all major credit cards, PayPal, Apple Pay, Google Pay, and Klarna. All payments are secured with SSL encryption. We also support Stripe for additional payment processing options."
             },
             {
-              id: "faq-006",
-              title: "Can I track my order?",
-              content: "Yes, tracking information is sent to your email immediately after your order ships. You can also track your order in your account dashboard.",
+              id: "faq-006",              title: "Can I track my order?",              content: "Yes, tracking information is sent to your email immediately after your order ships. You can also track your order in your account dashboard."
             },
           ]}
           buttons={[{ text: "View Full Policy", href: "/shop" }]}
           buttonAnimation="slide-up"
           ariaLabel="FAQ section"
+          accordionClassName="transition-all duration-300 hover:bg-opacity-50"
         />
       </div>
 
@@ -473,8 +550,10 @@ export default function HomePage() {
           copyrightText="© 2025 garraagarmzz. All rights reserved. Curated Fashion From The Best Brands."
           columns={footerColumns}
           ariaLabel="Site footer with navigation and company information"
+          className="transition-all duration-300"
+          columnItemClassName="transition-colors duration-300 hover:text-blue-500"
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/products/page.tsx

@@ -0,0 +1,313 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { Sparkles, Search, Filter, X, Eye, Heart, ShoppingCart } from "lucide-react";
+
+export default function ProductsPage() {
+  const [selectedProduct, setSelectedProduct] = useState<string | null>(null);
+  const [isMobileFilterOpen, setIsMobileFilterOpen] = useState(false);
+
+  const navItems = [
+    { name: "Home", id: "home" },
+    { name: "Shop", id: "shop" },
+    { name: "Brands", id: "brands" },
+    { name: "New Arrivals", id: "new-arrivals" },
+    { name: "Best Sellers", id: "best-sellers" },
+    { name: "About", id: "about" },
+    { name: "Contact", id: "contact" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Shop",      items: [
+        { label: "All Products", href: "/shop" },
+        { label: "New Arrivals", href: "/products" },
+        { label: "Best Sellers", href: "/products" },
+        { label: "Brands", href: "/products" },
+      ],
+    },
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "/" },
+        { label: "Contact", href: "/" },
+        { label: "Blog", href: "/" },
+        { label: "Careers", href: "#" },
+      ],
+    },
+    {
+      title: "Support",      items: [
+        { label: "Shipping & Returns", href: "/" },
+        { label: "FAQ", href: "/" },
+        { label: "Size Guide", href: "#" },
+        { label: "Track Order", href: "#" },
+      ],
+    },
+    {
+      title: "Legal",      items: [
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms & Conditions", href: "#" },
+        { label: "Cookie Policy", href: "#" },
+        { label: "Accessibility", href: "#" },
+      ],
+    },
+  ];
+
+  const allProducts = [
+    {
+      id: "prod-001",      brand: "Nike",      name: "Air Max 90 Classic",      price: "$129.99",      rating: 4.8,
+      reviewCount: "342",      imageSrc: "http://img.b2bpic.net/free-photo/athletic-girl-standing-stairs-tying-shoelaces_23-2148264960.jpg?_wi=2",      imageAlt: "Nike Air Max 90 sneaker in white and grey",      isFavorited: false,
+    },
+    {
+      id: "prod-002",      brand: "Supreme",      name: "Box Logo Hoodie",      price: "$345.00",      rating: 4.9,
+      reviewCount: "521",      imageSrc: "http://img.b2bpic.net/free-photo/afro-hair-style-doing-okay-gesture_140725-36572.jpg?_wi=2",      imageAlt: "Supreme black box logo hoodie",      isFavorited: false,
+    },
+    {
+      id: "prod-003",      brand: "Carhartt WIP",      name: "Detroit Jacket",      price: "$159.99",      rating: 4.7,
+      reviewCount: "189",      imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-jacket-jeans-clothes_158538-1617.jpg?_wi=2",      imageAlt: "Carhartt WIP brown Detroit work jacket",      isFavorited: false,
+    },
+    {
+      id: "prod-004",      brand: "Stüssy",      name: "Classic T-Shirt",      price: "$48.00",      rating: 4.6,
+      reviewCount: "276",      imageSrc: "http://img.b2bpic.net/free-photo/t-shirt-painting-indoors-still-life_23-2150572721.jpg?_wi=2",      imageAlt: "Stüssy white classic logo t-shirt",      isFavorited: false,
+    },
+    {
+      id: "prod-005",      brand: "Adidas",      name: "Ultra Boost 22",      price: "$189.99",      rating: 4.8,
+      reviewCount: "437",      imageSrc: "http://img.b2bpic.net/free-photo/side-view-sports-shoes_23-2147618070.jpg",      imageAlt: "Adidas Ultra Boost 22 in black",      isFavorited: false,
+    },
+    {
+      id: "prod-006",      brand: "The North Face",      name: "Nuptse Jacket",      price: "$229.99",      rating: 4.9,
+      reviewCount: "654",      imageSrc: "http://img.b2bpic.net/free-photo/young-man-listening-music-headphones-close-up_23-2148381737.jpg?_wi=2",      imageAlt: "The North Face Nuptse puffer jacket in black",      isFavorited: false,
+    },
+    {
+      id: "prod-007",      brand: "Nike",      name: "Jordan 1 Low OG",      price: "$99.99",      rating: 4.7,
+      reviewCount: "128",      imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-legs-keds-going-down-stairs_176420-55081.jpg",      imageAlt: "Jordan 1 Low OG sneaker",      isFavorited: false,
+    },
+    {
+      id: "prod-008",      brand: "Supreme",      name: "Arc Logo Cap",      price: "$68.00",      rating: 4.5,
+      reviewCount: "95",      imageSrc: "http://img.b2bpic.net/free-photo/young-man-putting-hand-cap-white-t-shirt-jacket-gray-cap-looking-serious-front-view_176474-84297.jpg",      imageAlt: "Supreme arc logo baseball cap",      isFavorited: false,
+    },
+    {
+      id: "prod-009",      brand: "Stüssy",      name: "Fleece Pullover",      price: "$98.00",      rating: 4.8,
+      reviewCount: "203",      imageSrc: "http://img.b2bpic.net/free-photo/beautiful-smiling-woman-stands-by-tree_8353-9397.jpg",      imageAlt: "Stüssy fleece pullover in grey",      isFavorited: false,
+    },
+    {
+      id: "prod-010",      brand: "Adidas",      name: "Stan Smith Classic",      price: "$89.99",      rating: 4.9,
+      reviewCount: "1,240",      imageSrc: "http://img.b2bpic.net/free-photo/new-pair-white-sneakers-isolated-white_93675-130969.jpg?_wi=2",      imageAlt: "Adidas Stan Smith white leather sneaker",      isFavorited: false,
+    },
+    {
+      id: "prod-011",      brand: "The North Face",      name: "Denali Fleece",      price: "$99.99",      rating: 4.8,
+      reviewCount: "856",      imageSrc: "http://img.b2bpic.net/free-photo/young-hipster-man-hiking-mountains-winter-vacation-traveling_285396-1955.jpg",      imageAlt: "The North Face Denali fleece jacket",      isFavorited: false,
+    },
+    {
+      id: "prod-012",      brand: "Carhartt WIP",      name: "Simple Pant",      price: "$54.99",      rating: 4.7,
+      reviewCount: "742",      imageSrc: "http://img.b2bpic.net/free-photo/cropped-stock-photo-unrecognizable-woman-white-shirt-formal-black-straight-trousers-black-leather-heels-standing-street-fashion-model-dresscode-concept_132075-9150.jpg",      imageAlt: "Carhartt WIP simple pant in black",      isFavorited: false,
+    },
+    {
+      id: "prod-013",      brand: "Vans",      name: "Old Skool",      price: "$65.00",      rating: 4.9,
+      reviewCount: "1,567",      imageSrc: "http://img.b2bpic.net/free-photo/people-80s-aesthetic-summer-clothing_23-2151016254.jpg",      imageAlt: "Vans Old Skool classic skateboard shoe",      isFavorited: false,
+    },
+  ];
+
+  const selectedProductData = selectedProduct
+    ? allProducts.find((p) => p.id === selectedProduct)
+    : null;
+
+  const renderStars = (rating: number) => {
+    return (
+      <div className="flex items-center gap-1">
+        {[...Array(5)].map((_, i) => (
+          <svg
+            key={i}
+            className={`w-4 h-4 ${
+              i < Math.floor(rating)
+                ? "fill-yellow-400 text-yellow-400"
+                : "fill-gray-300 text-gray-300"
+            }`}
+            viewBox="0 0 20 20"
+          >
+            <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
+          </svg>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="mediumSizeLargeTitles"
+      background="aurora"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={navItems}
+          brandName="garraagarmzz"
+          button={{
+            text: "Cart",            href: "/products"}}
+          animateOnLoad={true}
+          className="bg-opacity-95"
+          navItemClassName="text-sm font-medium"
+          buttonClassName="bg-blue-500 hover:bg-blue-600"
+          buttonTextClassName="text-white font-semibold"
+        />
+      </div>
+
+      {/* Mobile Filter Toggle */}
+      <div className="md:hidden sticky top-20 z-40 bg-opacity-95 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800">
+        <div className="flex gap-2 p-4 justify-center">
+          <button
+            onClick={() => setIsMobileFilterOpen(!isMobileFilterOpen)}
+            className="flex-1 flex items-center justify-center gap-2 py-2 px-4 rounded-lg bg-gray-100 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors"
+          >
+            <Filter className="w-4 h-4" />
+            <span className="text-sm font-medium">Filter</span>
+          </button>
+          <button className="flex-1 flex items-center justify-center gap-2 py-2 px-4 rounded-lg bg-gray-100 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors">
+            <Search className="w-4 h-4" />
+            <span className="text-sm font-medium">Search</span>
+          </button>
+        </div>
+      </div>
+
+      {/* Main Product Grid Section */}
+      <div id="products-grid" data-section="products-grid" className="w-full">
+        <ProductCardTwo
+          title="All Products"
+          description="Browse our complete collection of premium fashion items. Use filters to refine your search."
+          tag="Complete Collection"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          products={allProducts}
+          buttons={[]}
+          carouselMode="buttons"
+          ariaLabel="Complete products catalog with mobile-first design"
+        />
+      </div>
+
+      {/* Quick View Popup Modal */}
+      {selectedProductData && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm p-4"
+          onClick={() => setSelectedProduct(null)}
+        >
+          <div
+            className="bg-white dark:bg-gray-900 rounded-lg shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Close Button */}
+            <button
+              onClick={() => setSelectedProduct(null)}
+              className="sticky top-0 right-0 z-10 p-4 float-right bg-white dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors"
+              aria-label="Close quick view"
+            >
+              <X className="w-5 h-5" />
+            </button>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6">
+              {/* Product Image */}
+              <div className="flex items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg min-h-80 md:min-h-96">
+                <img
+                  src={selectedProductData.imageSrc}
+                  alt={selectedProductData.imageAlt}
+                  className="w-full h-full object-cover rounded-lg"
+                />
+              </div>
+
+              {/* Product Details */}
+              <div className="flex flex-col justify-between py-2">
+                <div>
+                  <p className="text-sm font-semibold text-blue-600 dark:text-blue-400 mb-1">
+                    {selectedProductData.brand}
+                  </p>
+                  <h2 className="text-2xl md:text-3xl font-bold mb-2">
+                    {selectedProductData.name}
+                  </h2>
+
+                  {/* Rating */}
+                  <div className="flex items-center gap-3 mb-4">
+                    {renderStars(selectedProductData.rating)}
+                    <span className="text-sm text-gray-600 dark:text-gray-400">
+                      {selectedProductData.rating} ({selectedProductData.reviewCount} reviews)
+                    </span>
+                  </div>
+
+                  {/* Price */}
+                  <div className="mb-6">
+                    <p className="text-4xl font-bold text-gray-900 dark:text-white">
+                      {selectedProductData.price}
+                    </p>
+                  </div>
+
+                  {/* Placeholder for Image Upload Section */}
+                  <div className="mb-6 p-4 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg text-center">
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
+                      📷 Additional product images
+                    </p>
+                    <div className="flex gap-2 justify-center">
+                      <div className="w-16 h-16 bg-gray-200 dark:bg-gray-800 rounded-lg flex items-center justify-center">
+                        <span className="text-gray-400 text-xs">Click to add</span>
+                      </div>
+                      <div className="w-16 h-16 bg-gray-200 dark:bg-gray-800 rounded-lg flex items-center justify-center">
+                        <span className="text-gray-400 text-xs">Click to add</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Action Buttons */}
+                <div className="flex flex-col gap-3">
+                  <button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors">
+                    <ShoppingCart className="w-5 h-5" />
+                    Add to Cart
+                  </button>
+                  <button className="w-full border-2 border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 font-semibold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors">
+                    <Heart className="w-5 h-5" />
+                    Save for Later
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Product Card Click Handler - Overlay for Quick View Trigger */}
+      <div className="hidden" id="quick-view-trigger">
+        {allProducts.map((product) => (
+          <button
+            key={product.id}
+            onClick={() => setSelectedProduct(product.id)}
+            className="quick-view-btn"
+            data-product-id={product.id}
+            aria-label={`Quick view ${product.name}`}
+          >
+            <Eye className="w-5 h-5" />
+          </button>
+        ))}
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="garraagarmzz"
+          copyrightText="© 2025 garraagarmzz. All rights reserved. Curated Fashion From The Best Brands."
+          columns={footerColumns}
+          ariaLabel="Site footer with navigation and company information"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #f0f8ffe6;
-  --primary-cta: #cee7ff;
+  --background: #000000;
+  --card: #0c0c0c;
+  --foreground: #ffffff;
+  --primary-cta: #106EFB;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #000000;
   --secondary-cta-text: #f0f8ffe6;
-  --accent: #737373;
-  --background-accent: #737373;
+  --accent: #535353;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);