Add src/app/products/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -32,26 +32,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Home",
-          id: "#hero",
-        },
-        {
-          name: "About",
-          id: "#about",
-        },
-        {
-          name: "Services",
-          id: "#features",
-        },
-        {
-          name: "Products",
-          id: "#products",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
+        { name: "Home", id: "/#hero" },
+        { name: "About", id: "/#about" },
+        { name: "Services", id: "/#features" },
+        { name: "Products", id: "/products" },
+        { name: "Contact", id: "/#contact" },
       ]}
       brandName="Cabro City"
     />
@@ -59,17 +44,10 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroLogoBillboard
-      background={{
-        variant: "sparkles-gradient",
-      }}
+      background={{ variant: "sparkles-gradient" }}
       logoText="Cabro City"
       description="Discover Cabro: Where Community Thrives. Explore vibrant neighborhoods, local events, and everything that makes Cabro home. From hidden gems to essential services—your complete city guide awaits."
-      buttons={[
-        {
-          text: "Explore Cabro",
-          href: "#about",
-        },
-      ]}
+      buttons={[{ text: "Explore Cabro", href: "#about" }]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779203440325-40kww0xf.jpg"
       imageAlt="modern city urban center"
       mediaAnimation="slide-up"
@@ -97,109 +75,24 @@ export default function LandingPage() {
       gridVariant="two-columns-alternating-heights"
       useInvertedBackground={true}
       features={[
-        {
-          title: "Infrastructure",
-          description: "High-quality, durable paved streets and walkways.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779203557324-o77xyp2t.jpg",
-          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q7tr9c",
-          buttonText: "View Infrastructure",
-        },
-        {
-          title: "Installation",
-          description: "Professional team providing expert installation.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779203589817-t7ss1i3a.jpg",
-          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=azxppd",
-          buttonText: "View Installation",
-        },
-        {
-          title: "Varieties",
-          description: "Your cabro.Your choice",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779203736749-8twtwg41.jpg",
-          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3jg2k7",
-          buttonText: "View Variety",
-        },
+        { title: "Infrastructure", description: "High-quality, durable paved streets and walkways.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779203557324-o77xyp2t.jpg", titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q7tr9c", buttonText: "View Infrastructure" },
+        { title: "Installation", description: "Professional team providing expert installation.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779203589817-t7ss1i3a.jpg", titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=azxppd", buttonText: "View Installation" },
+        { title: "Varieties", description: "Your cabro.Your choice", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779203736749-8twtwg41.jpg", titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3jg2k7", buttonText: "View Variety" }
       ]}
       title="City Services & Living"
       description="Comprehensive resources for every resident and visitor."
     />
   </div>
 
-  <div id="products" data-section="products">
-      <ProductCardFour
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          name: "Standard Block",
-          price: "$12.00",
-          variant: "Durable",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779202279236-n9y3ic3n.jpg",
-        },
-        {
-          id: "p2",
-          name: "Industrial Paver",
-          price: "$15.00",
-          variant: "Heavy-duty",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779202522535-7x14u3zd.jpg",
-        },
-        {
-          id: "p3",
-          name: "Garden Block",
-          price: "$10.00",
-          variant: "Aesthetic",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779202245175-vsbjy6it.jpg",
-        },
-        {
-          id: "p4",
-          name: "Drainage Paver",
-          price: "$18.00",
-          variant: "Permeable",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779202474424-30177oda.jpg",
-        },
-        {
-          id: "p5",
-          name: "Culverts ",
-          price: "$22.00",
-          variant: "Classic",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779204755631-v35tjswt.jpg",
-        },
-        {
-          id: "p6",
-          name: "Large Tile",
-          price: "$25.00",
-          variant: "Commercial",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779204790107-oaybuzsu.jpg",
-        },
-      ]}
-      title="Our Paving Solutions"
-      description="Browse our catalog of premium cabro bricks and paving solutions."
-    />
-  </div>
-
   <div id="metrics" data-section="metrics">
       <MetricCardFourteen
       useInvertedBackground={true}
       title="Our City Impact"
       tag="City Growth"
       metrics={[
-        {
-          id: "m1",
-          value: "150+",
-          description: "Projects Completed",
-        },
-        {
-          id: "m2",
-          value: "5k+",
-          description: "Happy Residents",
-        },
-        {
-          id: "m3",
-          value: "20+",
-          description: "City Parks",
-        },
+        { id: "m1", value: "150+", description: "Projects Completed" },
+        { id: "m2", value: "5k+", description: "Happy Residents" },
+        { id: "m3", value: "20+", description: "City Parks" },
       ]}
       metricsAnimation="slide-up"
     />
@@ -210,61 +103,8 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",
-          name: "Alice Green",
-          date: "2023-10",
-          title: "Local Resident",
-          quote: "Cabro City transformed our neighborhood. The pavements are beautiful and durable.",
-          tag: "Resident",
-          avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c2016h",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779203887708-8ctajwl3.jpg",
-          imageAlt: "happy city resident portrait",
-        },
-        {
-          id: "t2",
-          name: "Mark Smith",
-          date: "2023-11",
-          title: "Business Owner",
-          quote: "Reliable manufacturing and prompt delivery. Couldn't ask for a better partner.",
-          tag: "Partner",
-          avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fxzysa",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779203921020-k1tmig1j.jpg",
-          imageAlt: "happy city resident portrait",
-        },
-        {
-          id: "t3",
-          name: "Sarah Miller",
-          date: "2023-12",
-          title: "Proud Mom",
-          quote: "The new parks and paths make our city feel so welcoming for the kids.",
-          tag: "Resident",
-          avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=a8oet9",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779203973690-srxy0xxu.jpg",
-          imageAlt: "happy city resident portrait",
-        },
-        {
-          id: "t4",
-          name: "John Davis",
-          date: "2024-01",
-          title: "Religious Centre ",
-          quote: "Cabro City sets the gold standard for urban paving excellence in our region.",
-          tag: "Leader",
-          avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ojpjlo",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779203901909-xtl3ayjk.jpg",
-          imageAlt: "happy city resident portrait",
-        },
-        {
-          id: "t5",
-          name: "Linda White",
-          date: "2024-02",
-          title: "Senior Citizen",
-          quote: "Everything is accessible and clean. Thank you for our safe city.",
-          tag: "Resident",
-          avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3vmw9d",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779203949055-i7nv65k0.jpg",
-          imageAlt: "happy city resident portrait",
-        },
+        { id: "t1", name: "Alice Green", date: "2023-10", title: "Local Resident", quote: "Cabro City transformed our neighborhood. The pavements are beautiful and durable.", tag: "Resident", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c2016h", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779203887708-8ctajwl3.jpg", imageAlt: "happy city resident portrait" },
+        { id: "t2", name: "Mark Smith", date: "2023-11", title: "Business Owner", quote: "Reliable manufacturing and prompt delivery. Couldn't ask for a better partner.", tag: "Partner", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fxzysa", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779203921020-k1tmig1j.jpg", imageAlt: "happy city resident portrait" },
       ]}
       title="Stories from Our Community"
       description="Residents and partners share their experience with Cabro City infrastructure and services."
@@ -275,21 +115,8 @@ export default function LandingPage() {
       <FaqSplitText
       useInvertedBackground={true}
       faqs={[
-        {
-          id: "f1",
-          title: "How do I request paving services?",
-          content: "Simply fill out our contact form or call our municipal office directly.",
-        },
-        {
-          id: "f2",
-          title: "Is Cabro environmentally friendly?",
-          content: "Yes, our paving blocks are designed for durability and many are permeable.",
-        },
-        {
-          id: "f3",
-          title: "Are there deliveries? ",
-          content: "Instant deliveries.",
-        },
+        { id: "f1", title: "How do I request paving services?", content: "Simply fill out our contact form or call our municipal office directly." },
+        { id: "f2", title: "Is Cabro environmentally friendly?", content: "Yes, our paving blocks are designed for durability and many are permeable." }
       ]}
       sideTitle="Frequently Asked Questions"
       sideDescription="Need answers? Here are some of the most common queries from residents."
@@ -300,32 +127,19 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
+      background={{ variant: "sparkles-gradient" }}
       tag="Get in Touch"
       title="Ready to Build Together?"
       description="Whether it's a new installation project or you just need information about the city, we are here to help."
-      buttons={[
-        {
-          text: "Contact Us",
-          href: "#",
-        },
-      ]}
+      buttons={[{ text: "Contact Us", href: "#" }]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="Cabro City"
-      leftLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Terms of Service",
-        href: "#",
-      }}
+      leftLink={{ text: "Privacy Policy", href: "#" }}
+      rightLink={{ text: "Terms of Service", href: "#" }}
     />
   </div>
       </ReactLenis>

src/app/products/page.tsx

@@ -0,0 +1,62 @@
+"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 FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="soft"
+        contentWidth="mediumSmall"
+        sizing="medium"
+        background="fluid"
+        cardStyle="outline"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/#hero" },
+              { name: "About", id: "/#about" },
+              { name: "Services", id: "/#features" },
+              { name: "Products", id: "/products" },
+              { name: "Contact", id: "/#contact" },
+            ]}
+            brandName="Cabro City"
+        />
+        
+        <div className="pt-32 pb-16">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="split"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={[
+              { id: "p1", name: "Standard Block", price: "$12.00", variant: "Durable", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779202279236-n9y3ic3n.jpg" },
+              { id: "p2", name: "Industrial Paver", price: "$15.00", variant: "Heavy-duty", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779202522535-7x14u3zd.jpg" },
+              { id: "p3", name: "Garden Block", price: "$10.00", variant: "Aesthetic", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779202245175-vsbjy6it.jpg" },
+              { id: "p4", name: "Drainage Paver", price: "$18.00", variant: "Permeable", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779202474424-30177oda.jpg" },
+              { id: "p5", name: "Culverts", price: "$22.00", variant: "Classic", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779204755631-v35tjswt.jpg" },
+              { id: "p6", name: "Large Tile", price: "$25.00", variant: "Commercial", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DwlKwXSyxYxfRkpE6BVKvnENKh/uploaded-1779204790107-oaybuzsu.jpg" },
+            ]}
+            title="Our Paving Solutions"
+            description="Browse our catalog of premium cabro bricks and paving solutions."
+          />
+        </div>
+
+        <FooterLogoReveal
+          logoText="Cabro City"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}