Add src/app/products/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -10,7 +10,6 @@ import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTe
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 import { Headphones, ShieldCheck, Truck } from "lucide-react";
@@ -34,13 +33,13 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Home",          id: "#hero"},
+          name: "Home",          id: "/"},
         {
           name: "About",          id: "#about"},
         {
           name: "Features",          id: "#features"},
         {
-          name: "Products",          id: "#products"},
+          name: "Products",          id: "/products"},
         {
           name: "Services",          id: "#services"},
         {
@@ -80,7 +79,7 @@ export default function LandingPage() {
       ]}
       buttons={[
         {
-          text: "Explore Collections",          href: "#products"},
+          text: "Explore Collections",          href: "/products"},
         {
           text: "Learn More",          href: "#about"},
       ]}
@@ -158,31 +157,6 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="products" data-section="products">
-      <ProductCardFour
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="two-columns-alternating-heights"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "prod-1",          name: "Zenith Chronograph",          price: "$7,500",          variant: "Rose Gold Edition",          imageSrc: "http://img.b2bpic.net/free-photo/metal-pieces-close-up-background_23-2148882603.jpg",          imageAlt: "Luxury Automatic Watch"},
-        {
-          id: "prod-2",          name: "Aura X Pro",          price: "$1,199",          variant: "Midnight Black",          imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-with-live-abstract-wallpaper-coming-out-screen_23-2151033610.jpg",          imageAlt: "Premium Smartphone Aura X Pro"},
-        {
-          id: "prod-3",          name: "Opulence Silk Gown",          price: "$2,200",          variant: "Emerald Green",          imageSrc: "http://img.b2bpic.net/free-photo/elegant-mannequin-standing-modern-boutique-window-generated-by-ai_188544-34107.jpg",          imageAlt: "Designer Silk Gown"},
-        {
-          id: "prod-4",          name: "Harmonia Smart Hub",          price: "$349",          variant: "Lunar Silver",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-holding-tablet_23-2148994134.jpg",          imageAlt: "Smart Home Hub"},
-        {
-          id: "prod-5",          name: "Minimalist Horizon",          price: "$450",          variant: "Leather Strap",          imageSrc: "http://img.b2bpic.net/free-photo/man-looking-time-his-wrist-watch_78826-2326.jpg",          imageAlt: "Minimalist Wristwatch"},
-        {
-          id: "prod-6",          name: "Sonic Aura Elite",          price: "$599",          variant: "Graphite Grey",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-woman-with-headphones-outdoor_624325-1848.jpg",          imageAlt: "Premium Wireless Headphones"},
-      ]}
-      title="Our Exclusive Product Range"
-      description="Explore a diverse selection of premium items, from luxury watches to smart home devices, all crafted for discerning tastes and a sophisticated lifestyle."
-    />
-  </div>
-
   <div id="services" data-section="services">
       <PricingCardNine
       animationType="slide-up"
@@ -297,13 +271,13 @@ export default function LandingPage() {
         {
           title: "Shop",          items: [
             {
-              label: "Watches",              href: "#products"},
+              label: "Watches",              href: "/products"},
             {
-              label: "Phones",              href: "#products"},
+              label: "Phones",              href: "/products"},
             {
-              label: "Clothing",              href: "#products"},
+              label: "Clothing",              href: "/products"},
             {
-              label: "Electronics",              href: "#products"},
+              label: "Electronics",              href: "/products"},
           ],
         },
         {
@@ -338,4 +312,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/products/page.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSmallSizeMediumTitles"
+        background="fluid"
+        cardStyle="outline"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="solid"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              {
+                name: "Home",          id: "/"},
+              {
+                name: "About",          id: "#about"},
+              {
+                name: "Features",          id: "#features"},
+              {
+                name: "Products",          id: "/products"},
+              {
+                name: "Services",          id: "#services"},
+              {
+                name: "Testimonials",          id: "#testimonials"},
+              {
+                name: "Contact",          id: "#contact"},
+            ]}
+            logoSrc="http://img.b2bpic.net/free-vector/20-onsolid-glyph-shopping-solid-glyph-icon-pack-like-shopping-online-shop-shop-ecommerce_1142-24155.jpg"
+            logoAlt="Luxuria Bazaar Logo"
+            brandName="Luxuria Bazaar"
+          />
+        </div>
+
+        <div id="products" data-section="products">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="two-columns-alternating-heights"
+            useInvertedBackground={true}
+            products={[
+              {
+                id: "prod-1",          name: "Zenith Chronograph",          price: "$7,500",          variant: "Rose Gold Edition",          imageSrc: "http://img.b2bpic.net/free-photo/metal-pieces-close-up-background_23-2148882603.jpg",          imageAlt: "Luxury Automatic Watch"},
+              {
+                id: "prod-2",          name: "Aura X Pro",          price: "$1,199",          variant: "Midnight Black",          imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-with-live-abstract-wallpaper-coming-out-screen_23-2151033610.jpg",          imageAlt: "Premium Smartphone Aura X Pro"},
+              {
+                id: "prod-3",          name: "Opulence Silk Gown",          price: "$2,200",          variant: "Emerald Green",          imageSrc: "http://img.b2bpic.net/free-photo/elegant-mannequin-standing-modern-boutique-window-generated-by-ai_188544-34107.jpg",          imageAlt: "Designer Silk Gown"},
+              {
+                id: "prod-4",          name: "Harmonia Smart Hub",          price: "$349",          variant: "Lunar Silver",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-holding-tablet_23-2148994134.jpg",          imageAlt: "Smart Home Hub"},
+              {
+                id: "prod-5",          name: "Minimalist Horizon",          price: "$450",          variant: "Leather Strap",          imageSrc: "http://img.b2bpic.net/free-photo/man-looking-time-his-wrist-watch_78826-2326.jpg",          imageAlt: "Minimalist Wristwatch"},
+              {
+                id: "prod-6",          name: "Sonic Aura Elite",          price: "$599",          variant: "Graphite Grey",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-woman-with-headphones-outdoor_624325-1848.jpg",          imageAlt: "Premium Wireless Headphones"},
+            ]}
+            title="Our Exclusive Product Range"
+            description="Explore a diverse selection of premium items, from luxury watches to smart home devices, all crafted for discerning tastes and a sophisticated lifestyle."
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              {
+                title: "Shop",          items: [
+                  {
+                    label: "Watches",              href: "/products"},
+                  {
+                    label: "Phones",              href: "/products"},
+                  {
+                    label: "Clothing",              href: "/products"},
+                  {
+                    label: "Electronics",              href: "/products"},
+                ],
+              },
+              {
+                title: "Company",          items: [
+                  {
+                    label: "About Us",              href: "#about"},
+                  {
+                    label: "Services",              href: "#services"},
+                  {
+                    label: "Testimonials",              href: "#testimonials"},
+                  {
+                    label: "FAQ",              href: "#faq"},
+                ],
+              },
+              {
+                title: "Support",          items: [
+                  {
+                    label: "Contact Us",              href: "#contact"},
+                  {
+                    label: "Shipping & Returns",              href: "#"},
+                  {
+                    label: "Privacy Policy",              href: "#"},
+                  {
+                    label: "Terms of Service",              href: "#"},
+                ],
+              },
+            ]}
+            bottomLeftText="© 2024 Luxuria Bazaar. All rights reserved."
+            bottomRightText="Crafted for the Discerning."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}