Update src/app/products/page.tsx

Merge version_1 into main

src/app/about/page.tsx

@@ -8,6 +8,46 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import { Lightbulb, ShieldCheck, Leaf } from "lucide-react";
 
+const commonNavItems = [
+  { name: "Home", id: "/" },
+  { name: "Products", id: "/products" },
+  { name: "Features", id: "/#features" },
+  { name: "About Us", id: "/about" },
+  { name: "FAQs", id: "/faqs" },
+  { name: "Contact", id: "/contact" }
+];
+
+const commonNavbarButton = {
+  text: "Get Your Case",  href: "/products"
+};
+
+const commonFooterColumns = [
+  {
+    title: "Shop",    items: [
+      { label: "iPhone Cases", href: "/products#iphone" },
+      { label: "Samsung Cases", href: "/products#samsung" },
+      { label: "Pixel Cases", href: "/products#pixel" },
+      { label: "Accessories", href: "/products#accessories" }
+    ]
+  },
+  {
+    title: "Company",    items: [
+      { label: "About Us", href: "/about" },
+      { label: "Features", href: "/#features" },
+      { label: "Testimonials", href: "/#testimonials" },
+      { label: "FAQs", href: "/faqs" }
+    ]
+  },
+  {
+    title: "Support",    items: [
+      { label: "Contact Us", href: "/contact" },
+      { label: "Shipping & Returns", href: "/shipping" },
+      { label: "Warranty", href: "/warranty" },
+      { label: "Privacy Policy", href: "/privacy" }
+    ]
+  }
+];
+
 export default function LandingPage() {
   return (
     <ThemeProvider
@@ -25,30 +65,9 @@ export default function LandingPage() {
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Home",          id: "home"
-        },
-        {
-          name: "Shop",          id: "shop"
-        },
-        {
-          name: "Features",          id: "features"
-        },
-        {
-          name: "About Us",          id: "about"
-        },
-        {
-          name: "FAQs",          id: "faqs"
-        },
-        {
-          name: "Contact",          id: "contact"
-        }
-      ]}
+      navItems={commonNavItems}
       brandName="CaseBuddy"
-      button={{
-        text: "Get Your Case",        href: "/shop"
-      }}
+      button={commonNavbarButton}
     />
   </div>
 
@@ -100,50 +119,7 @@ export default function LandingPage() {
 
   <div id="footer" data-section="footer">
       <FooterBase
-      columns={[
-        {
-          title: "Shop",          items: [
-            {
-              label: "iPhone Cases",              href: "/shop/iphone"
-            },
-            {
-              label: "Samsung Cases",              href: "/shop/samsung"
-            },
-            {
-              label: "Pixel Cases",              href: "/shop/pixel"
-            },
-            {
-              label: "Accessories",              href: "/shop/accessories"
-            }
-          ]
-        },
-        {
-          title: "Company",          items: [
-            {
-              label: "About Us",              href: "/about"
-            },
-            {
-              label: "Blog",              href: "/blog"
-            },
-            {
-              label: "Careers",              href: "/careers"
-            }
-          ]
-        },
-        {
-          title: "Support",          items: [
-            {
-              label: "FAQs",              href: "/faqs"
-            },
-            {
-              label: "Contact Us",              href: "/contact"
-            },
-            {
-              label: "Shipping & Returns",              href: "/shipping"
-            }
-          ]
-        }
-      ]}
+      columns={commonFooterColumns}
       copyrightText="© 2024 CaseBuddy. All rights reserved."
     />
   </div>

src/app/products/page.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+const commonNavItems = [
+  { name: "Home", id: "/" },
+  { name: "Products", id: "/products" },
+  { name: "Features", id: "/#features" },
+  { name: "About Us", id: "/about" },
+  { name: "FAQs", id: "/faqs" },
+  { name: "Contact", id: "/contact" }
+];
+
+const commonNavbarButton = {
+  text: "Get Your Case",  href: "/products"
+};
+
+const commonFooterColumns = [
+  {
+    title: "Shop",    items: [
+      { label: "iPhone Cases", href: "/products#iphone" },
+      { label: "Samsung Cases", href: "/products#samsung" },
+      { label: "Pixel Cases", href: "/products#pixel" },
+      { label: "Accessories", href: "/products#accessories" }
+    ]
+  },
+  {
+    title: "Company",    items: [
+      { label: "About Us", href: "/about" },
+      { label: "Features", href: "/#features" },
+      { label: "Testimonials", href: "/#testimonials" },
+      { label: "FAQs", href: "/faqs" }
+    ]
+  },
+  {
+    title: "Support",    items: [
+      { label: "Contact Us", href: "/contact" },
+      { label: "Shipping & Returns", href: "/shipping" },
+      { label: "Warranty", href: "/warranty" },
+      { label: "Privacy Policy", href: "/privacy" }
+    ]
+  }
+];
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="medium"
+      background="aurora"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={commonNavItems}
+            brandName="CaseBuddy"
+            button={commonNavbarButton}
+          />
+        </div>
+
+        <div id="all-products" data-section="all-products">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="uniform-all-items-equal"
+            useInvertedBackground={false}
+            title="Explore Our Full Range of Cases"
+            description="Discover the perfect protection and style for your device from our extensive collection of premium phone cases."
+            products={[
+              {
+                id: "iphone-15-rugged",                name: "Rugged Shield Case",                price: "$34.99",                variant: "iPhone 15",                imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-phone-outdoors_23-2150171220.jpg",                imageAlt: "Rugged iPhone 15 case"
+              },
+              {
+                id: "galaxy-s24-clear",                name: "Ultra Clear Protection",                price: "$27.99",                variant: "Galaxy S24",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-phone-case_23-2149791404.jpg",                imageAlt: "Clear Galaxy S24 case"
+              },
+              {
+                id: "pixel-8-slim",                name: "Slim Fit Matte Black",                price: "$22.99",                variant: "Pixel 8",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-phone-case_23-2149791390.jpg",                imageAlt: "Matte black Pixel 8 case"
+              },
+              {
+                id: "universal-leather",                name: "Premium Leather Wallet",                price: "$54.99",                variant: "Universal",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-phone-case_23-2149791409.jpg",                imageAlt: "Leather wallet case"
+              },
+              {
+                id: "iphone-14-gradient",                name: "Gradient Sunset Case",                price: "$29.99",                variant: "iPhone 14",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-phone-case_23-2149791414.jpg",                imageAlt: "Gradient iPhone 14 case"
+              },
+              {
+                id: "galaxy-s23-floral",                name: "Floral Blossom Case",                price: "$26.99",                variant: "Galaxy S23",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-phone-case_23-2149791422.jpg",                imageAlt: "Floral Galaxy S23 case"
+              },
+              {
+                id: "pixel-7-geometric",                name: "Geometric Pattern",                price: "$25.99",                variant: "Pixel 7",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-phone-case_23-2149791428.jpg",                imageAlt: "Geometric Pixel 7 case"
+              },
+              {
+                id: "universal-silicone",                name: "Soft Touch Silicone",                price: "$19.99",                variant: "Universal",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-phone-case_23-2149791435.jpg",                imageAlt: "Silicone universal case"
+              }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal columns={commonFooterColumns} copyrightText="© 2024 CaseBuddy. All rights reserved." />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}