Update src/app/products/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -32,6 +32,7 @@ export default function LandingPage() {
           brandName="ItemStore"
           navItems={[
             { name: "Shop", id: "products" },
+            { name: "Products", id: "/products" },
             { name: "About", id: "about" },
             { name: "Reviews", id: "testimonials" },
             { name: "Contact", id: "contact" },
@@ -51,7 +52,7 @@ export default function LandingPage() {
             { text: "Learn More", href: "#about" },
           ]}
           layoutOrder="default"
-          imageSrc="http://img.b2bpic.net/free-photo/creative-black-friday-composition-black-background_23-2148666964.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/creative-black-friday-composition-black-background_23-2148666964.jpg?_wi=1"
           imageAlt="Premium online store showcase"
           frameStyle="card"
           mediaAnimation="slide-up"
@@ -63,13 +64,13 @@ export default function LandingPage() {
         <ProductCardFour
           products={[
             {
-              id: "product-001",              name: "Premium Leather Briefcase",              price: "$249.99",              variant: "Black | 2 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-christmas-gift-concept_23-2148706280.jpg",              imageAlt: "Premium leather briefcase",              isFavorited: false,
+              id: "product-001",              name: "Premium Leather Briefcase",              price: "$249.99",              variant: "Black | 2 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-christmas-gift-concept_23-2148706280.jpg?_wi=1",              imageAlt: "Premium leather briefcase",              isFavorited: false,
             },
             {
-              id: "product-002",              name: "Minimalist Wallet Collection",              price: "$89.99",              variant: "Red | 5 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/abstract-minimal-kitchen-objects_23-2148835348.jpg",              imageAlt: "Minimalist wallet collection",              isFavorited: false,
+              id: "product-002",              name: "Minimalist Wallet Collection",              price: "$89.99",              variant: "Red | 5 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/abstract-minimal-kitchen-objects_23-2148835348.jpg?_wi=1",              imageAlt: "Minimalist wallet collection",              isFavorited: false,
             },
             {
-              id: "product-003",              name: "Designer Sunglasses",              price: "$199.99",              variant: "Gold Frame | 3 Options",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-arrangement-modern-vases_23-2149646528.jpg",              imageAlt: "Designer sunglasses",              isFavorited: false,
+              id: "product-003",              name: "Designer Sunglasses",              price: "$199.99",              variant: "Gold Frame | 3 Options",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-arrangement-modern-vases_23-2149646528.jpg?_wi=1",              imageAlt: "Designer sunglasses",              isFavorited: false,
             },
           ]}
           title="Featured Products"
@@ -193,15 +194,15 @@ export default function LandingPage() {
 
       <div id="footer" data-section="footer">
         <FooterMedia
-          imageSrc="http://img.b2bpic.net/free-photo/warehouse-workers-with-helmets-reflective-jackets-carrying-boxes-large-distribution-center_342744-1540.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/warehouse-workers-with-helmets-reflective-jackets-carrying-boxes-large-distribution-center_342744-1540.jpg?_wi=1"
           imageAlt="ItemStore warehouse facility"
           columns={[
             {
               title: "Shop",              items: [
-                { label: "All Products", href: "#products" },
+                { label: "All Products", href: "/products" },
-                { label: "New Arrivals", href: "#products" },
+                { label: "New Arrivals", href: "/products" },
-                { label: "Collections", href: "#products" },
+                { label: "Collections", href: "/products" },
-                { label: "Sale Items", href: "#products" },
+                { label: "Sale Items", href: "/products" },
               ],
             },
             {

src/app/products/page.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroOverlay from "@/components/sections/hero/HeroOverlay";
+import ProductCardFour from "@/components/sections/product/ProductCardFour";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="small"
+      sizing="large"
+      background="noiseDiagonalGradient"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="ItemStore"
+          navItems={[
+            { name: "Shop", id: "products" },
+            { name: "Products", id: "/products" },
+            { name: "About", id: "about" },
+            { name: "Reviews", id: "testimonials" },
+            { name: "Contact", id: "contact" },
+          ]}
+          button={{ text: "Shop Now", href: "/products" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Browse Our Full Collection"
+          description="Explore our complete range of premium items selected for quality, style, and value."
+          tag="All Products"
+          imageSrc="http://img.b2bpic.net/free-photo/creative-black-friday-composition-black-background_23-2148666964.jpg?_wi=2"
+          imageAlt="Products collection"
+          textPosition="bottom-left"
+          showBlur={true}
+          showDimOverlay={false}
+          buttons={[
+            { text: "Shop All", href: "#products" },
+            { text: "Back Home", href: "/" },
+          ]}
+        />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardFour
+          products={[
+            {
+              id: "product-001",              name: "Premium Leather Briefcase",              price: "$249.99",              variant: "Black | 2 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-christmas-gift-concept_23-2148706280.jpg?_wi=2",              imageAlt: "Premium leather briefcase",              isFavorited: false,
+            },
+            {
+              id: "product-002",              name: "Minimalist Wallet Collection",              price: "$89.99",              variant: "Red | 5 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/abstract-minimal-kitchen-objects_23-2148835348.jpg?_wi=2",              imageAlt: "Minimalist wallet collection",              isFavorited: false,
+            },
+            {
+              id: "product-003",              name: "Designer Sunglasses",              price: "$199.99",              variant: "Gold Frame | 3 Options",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-arrangement-modern-vases_23-2149646528.jpg?_wi=2",              imageAlt: "Designer sunglasses",              isFavorited: false,
+            },
+            {
+              id: "product-004",              name: "Premium Watch Collection",              price: "$349.99",              variant: "Silver | 4 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-christmas-gift-concept_23-2148706280.jpg?_wi=3",              imageAlt: "Premium watch collection",              isFavorited: false,
+            },
+            {
+              id: "product-005",              name: "Luxury Headphones",              price: "$299.99",              variant: "Black | 3 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/abstract-minimal-kitchen-objects_23-2148835348.jpg?_wi=3",              imageAlt: "Luxury headphones",              isFavorited: false,
+            },
+            {
+              id: "product-006",              name: "Executive Pen Set",              price: "$129.99",              variant: "Gold | 2 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-arrangement-modern-vases_23-2149646528.jpg?_wi=3",              imageAlt: "Executive pen set",              isFavorited: false,
+            },
+          ]}
+          title="Our Complete Collection"
+          description="Discover all our premium products."
+          tag="Featured Collection"
+          textboxLayout="default"
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="http://img.b2bpic.net/free-photo/warehouse-workers-with-helmets-reflective-jackets-carrying-boxes-large-distribution-center_342744-1540.jpg?_wi=2"
+          imageAlt="ItemStore warehouse facility"
+          columns={[
+            {
+              title: "Shop",              items: [
+                { label: "All Products", href: "/products" },
+                { label: "New Arrivals", href: "/products" },
+                { label: "Collections", href: "/products" },
+                { label: "Sale Items", href: "/products" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#about" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Press", href: "#" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "Contact Us", href: "#contact" },
+                { label: "FAQ", href: "#faq" },
+                { label: "Shipping Info", href: "#" },
+                { label: "Privacy Policy", href: "#" },
+              ],
+            },
+          ]}
+          logoText="ItemStore"
+          copyrightText="© 2025 ItemStore. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}