Update src/app/products/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -29,10 +29,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        { name: "Men", id: "#men" },
+        { name: "Men", id: "/products" },
-        { name: "Women", id: "#women" },
+        { name: "Women", id: "/products" },
-        { name: "New Arrivals", id: "#new-arrivals" },
+        { name: "New Arrivals", id: "/products" },
-        { name: "Trending", id: "#trending" },
+        { name: "Trending", id: "/products" },
       ]}
       brandName="VOXE"
     />
@@ -59,7 +59,7 @@ export default function LandingPage() {
         { imageSrc: "http://img.b2bpic.net/free-photo/view-young-man-smiling-camera_197531-33438.jpg?_wi=11", imageAlt: "Model in inclusive fashion 5" },
         { imageSrc: "http://img.b2bpic.net/free-photo/view-young-man-smiling-camera_197531-33438.jpg?_wi=12", imageAlt: "Model in inclusive fashion 6" },
       ]}
-      buttons={[{ text: "Shop Men", href: "#men" }, { text: "Shop Women", href: "#women" }]}
+      buttons={[{ text: "Shop Men", href: "/products" }, { text: "Shop Women", href: "/products" }]}
       avatars={[
         { src: "http://img.b2bpic.net/free-photo/young-woman-blue-suit-posing-with-mirror-outdoors_23-2149445026.jpg", alt: "User 1" },
         { src: "http://img.b2bpic.net/free-photo/elegant-female-model-posing-window-elegant-waistcoat-new-feminity-concept_23-2148951061.jpg", alt: "User 2" },
@@ -158,8 +158,8 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
       columns={[
-        { items: [{ label: "Men", href: "#men" }, { label: "Women", href: "#women" }] },
+        { items: [{ label: "Men", href: "/products" }, { label: "Women", href: "/products" }] },
-        { items: [{ label: "Contact Us", href: "#contact" }, { label: "Privacy Policy", href: "#" }] },
+        { items: [{ label: "Contact Us", href: "/products" }, { label: "Privacy Policy", href: "#" }] },
         { items: [{ label: "Instagram", href: "#" }, { label: "Twitter", href: "#" }] },
       ]}
       logoText="VOXE"

src/app/products/page.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { ChevronRight, Filter, SlidersHorizontal } from "lucide-react";
+
+export default function ProductListingPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="mediumSizeLargeTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Men", id: "/products" },
+              { name: "Women", id: "/products" },
+              { name: "Shop All", id: "/products" },
+            ]}
+            brandName="VOXE"
+          />
+        </div>
+
+        <main className="pt-24 pb-16 px-4 md:px-8 max-w-7xl mx-auto flex gap-8">
+          <aside className="hidden md:block w-64 space-y-8">
+            <div className="flex items-center gap-2 font-semibold text-lg border-b pb-4 mb-4">
+              <SlidersHorizontal className="w-5 h-5" />
+              Filters
+            </div>
+            {['Category', 'Type', 'Size', 'Color', 'Price Range'].map((filter) => (
+              <div key={filter} className="space-y-3">
+                <h4 className="font-medium">{filter}</h4>
+                <div className="space-y-1.5">
+                    {['Option 1', 'Option 2', 'Option 3'].map(opt => (
+                        <label key={opt} className="flex items-center gap-2 text-sm cursor-pointer hover:text-amber-600">
+                            <input type="checkbox" className="accent-amber-500" /> {opt}
+                        </label>
+                    ))}
+                </div>
+              </div>
+            ))}
+          </aside>
+
+          <div className="flex-1">
+            <div className="flex justify-between items-center mb-6 text-sm text-gray-500">
+                <div className="flex items-center gap-2">
+                    <span>Home</span> <ChevronRight className="w-4 h-4" /> <span>Shop All</span>
+                </div>
+                <span>Showing 124 products</span>
+            </div>
+
+            <div id="products" data-section="products">
+                <ProductCardTwo
+                    animationType="slide-up"
+                    gridVariant="four-items-2x2-equal-grid"
+                    textboxLayout="default"
+                    title=""
+                    description=""
+                    useInvertedBackground={false}
+                    products={[
+                        { id: "p1", brand: "VOXE", name: "Signature Blazer", price: "$185", rating: 5, reviewCount: "24", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-blue-suit-posing-with-mirror-outdoors_23-2149445026.jpg" },
+                        { id: "p2", brand: "VOXE", name: "Essential Loafer", price: "$140", rating: 4, reviewCount: "42", imageSrc: "http://img.b2bpic.net/free-photo/elegant-female-model-posing-window-elegant-waistcoat-new-feminity-concept_23-2148951061.jpg" },
+                        { id: "p3", brand: "VOXE", name: "Urban Tee", price: "$55", rating: 5, reviewCount: "89", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2718.jpg" },
+                        { id: "p4", brand: "VOXE", name: "Classic Trouser", price: "$125", rating: 4, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-linens_23-2148817547.jpg" }
+                    ]}
+                />
+            </div>
+          </div>
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            columns={[
+              { items: [{ label: "Shop All", href: "/products" }, { label: "Help", href: "#" }] },
+              { items: [{ label: "Contact Us", href: "#" }, { label: "Terms", href: "#" }] },
+            ]}
+            logoText="VOXE"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}