Update src/app/products/page.tsx

src/app/page.tsx

@@ -32,30 +32,18 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Features",
+          name: "Features",          id: "features"},
-          id: "features",
-        },
         {
-          name: "Products",
+          name: "Products",          id: "/products"},
-          id: "products",
-        },
         {
-          name: "Testimonials",
+          name: "Testimonials",          id: "testimonials"},
-          id: "testimonials",
-        },
         {
-          name: "FAQ",
+          name: "FAQ",          id: "faq"},
-          id: "faq",
-        },
         {
-          name: "Contact",
+          name: "Contact",          id: "contact"},
-          id: "contact",
-        },
       ]}
       button={{
-        text: "Shop Now",
+        text: "Shop Now",        href: "/products"}}
-        href: "#products",
-      }}
       brandName="AquaPaint 3D"
     />
   </div>
@@ -63,33 +51,22 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroCentered
       background={{
-        variant: "sparkles-gradient",
+        variant: "sparkles-gradient"}}
-      }}
       title="Water Paint That Transforms Spaces Beautifully"
       description="Ecofriendly, professional-grade waterbased paint with vibrant colors and lasting durability. See your vision come to life in stunning 3D."
       avatars={[
         {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-professional-painter-diverse-ethnicity-1774359613790-a71ea3fb.png",
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-professional-painter-diverse-ethnicity-1774359613790-a71ea3fb.png",          alt: "Professional Painter"},
-          alt: "Professional Painter",
-        },
         {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/an-interior-designer-modern-style-lookin-1774359613928-89822c38.png",
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/an-interior-designer-modern-style-lookin-1774359613928-89822c38.png",          alt: "Interior Designer"},
-          alt: "Interior Designer",
-        },
         {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-homeowner-casual-and-friendly-envision-1774359613892-1303d4c6.png",
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-homeowner-casual-and-friendly-envision-1774359613892-1303d4c6.png",          alt: "Homeowner"},
-          alt: "Homeowner",
-        },
         {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/an-architect-serious-and-professional-re-1774359613879-003fb5b1.png",
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/an-architect-serious-and-professional-re-1774359613879-003fb5b1.png",          alt: "Architect"},
-          alt: "Architect",
-        },
       ]}
       buttons={[
         {
-          text: "Explore Our Colors",
+          text: "Explore Our Colors",          href: "/products"},
-          href: "#products",
-        },
       ]}
     />
   </div>
@@ -109,35 +86,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "1",
+          id: "1",          title: "Immersive 3D Visualization",          tags: [
-          title: "Immersive 3D Visualization",
+            "Innovation",            "Visualize"],
-          tags: [
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-hand-holding-a-tablet-displaying-a-liv-1774359614432-61f74705.png",          imageAlt: "Tablet displaying 3D paint visualization"},
-            "Innovation",
-            "Visualize",
-          ],
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-hand-holding-a-tablet-displaying-a-liv-1774359614432-61f74705.png",
-          imageAlt: "Tablet displaying 3D paint visualization",
-        },
         {
-          id: "2",
+          id: "2",          title: "Eco-Friendly Formulation",          tags: [
-          title: "Eco-Friendly Formulation",
+            "Sustainable",            "Green"],
-          tags: [
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-green-leaf-with-a-drop-of-water-based--1774359613548-5fce8e9b.png",          imageAlt: "Green leaf with paint drop"},
-            "Sustainable",
-            "Green",
-          ],
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-green-leaf-with-a-drop-of-water-based--1774359613548-5fce8e9b.png",
-          imageAlt: "Green leaf with paint drop",
-        },
         {
-          id: "3",
+          id: "3",          title: "Unmatched Durability & Coverage",          tags: [
-          title: "Unmatched Durability & Coverage",
+            "Lasting",            "Quality"],
-          tags: [
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-painted-wall-segment-showing-extreme-d-1774359614397-c2103c73.png",          imageAlt: "Durable painted wall"},
-            "Lasting",
-            "Quality",
-          ],
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-painted-wall-segment-showing-extreme-d-1774359614397-c2103c73.png",
-          imageAlt: "Durable painted wall",
-        },
       ]}
       title="Experience Paint Like Never Before"
       description="Discover why AquaPaint 3D is the preferred choice for those who demand excellence and sustainability. Visualize colors in real environments and trust in lasting quality."
@@ -153,26 +112,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "1",
+          id: "1",          name: "Blue Ocean",          price: "$45.00",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-can-of-blue-ocean-water-paint-with-a-s-1774359613568-221f773c.png?_wi=1",          imageAlt: "Blue Ocean paint can"},
-          name: "Blue Ocean",
-          price: "$45.00",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-can-of-blue-ocean-water-paint-with-a-s-1774359613568-221f773c.png",
-          imageAlt: "Blue Ocean paint can",
-        },
         {
-          id: "2",
+          id: "2",          name: "Emerald Forest",          price: "$45.00",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-can-of-emerald-forest-water-paint-feat-1774359614300-4f91757a.png?_wi=1",          imageAlt: "Emerald Forest paint can"},
-          name: "Emerald Forest",
-          price: "$45.00",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-can-of-emerald-forest-water-paint-feat-1774359614300-4f91757a.png",
-          imageAlt: "Emerald Forest paint can",
-        },
         {
-          id: "3",
+          id: "3",          name: "Sunny Yellow",          price: "$45.00",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-can-of-sunny-yellow-water-paint-a-brig-1774359614621-bb0b1a74.png?_wi=1",          imageAlt: "Sunny Yellow paint can"},
-          name: "Sunny Yellow",
-          price: "$45.00",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-can-of-sunny-yellow-water-paint-a-brig-1774359614621-bb0b1a74.png",
-          imageAlt: "Sunny Yellow paint can",
-        },
       ]}
       title="Vibrant Hues, Endless Possibilities"
       description="Browse our extensive collection of water-based paints, crafted for superior coverage and breathtaking finish. Find the perfect shade to bring your design vision to life."
@@ -186,33 +130,13 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
+          id: "1",          name: "Sarah J.",          role: "Professional Painter",          testimonial: "AquaPaint 3D's colors are incredibly vibrant and the coverage is excellent. My clients love the finish, and I appreciate the eco-friendly formula.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-professional-painter-woman-mid-30s-smi-1774359613375-21634c14.png"},
-          name: "Sarah J.",
-          role: "Professional Painter",
-          testimonial: "AquaPaint 3D's colors are incredibly vibrant and the coverage is excellent. My clients love the finish, and I appreciate the eco-friendly formula.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-professional-painter-woman-mid-30s-smi-1774359613375-21634c14.png",
-        },
         {
-          id: "2",
+          id: "2",          name: "Michael C.",          role: "Interior Designer",          testimonial: "The 3D visualization feature is a game-changer for my projects. It helps clients truly envision the space, and the durability of the paint is exceptional.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/an-interior-designer-man-early-40s-thoug-1774359613950-1ec7ae0f.png"},
-          name: "Michael C.",
-          role: "Interior Designer",
-          testimonial: "The 3D visualization feature is a game-changer for my projects. It helps clients truly envision the space, and the durability of the paint is exceptional.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/an-interior-designer-man-early-40s-thoug-1774359613950-1ec7ae0f.png",
-        },
         {
-          id: "3",
+          id: "3",          name: "Emily R.",          role: "Homeowner",          testimonial: "I used AquaPaint 3D for my living room, and I couldn't be happier. The color is beautiful, it was easy to apply, and it's reassuring to know it's safe for my family.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-homeowner-woman-late-20s-excited-and-s-1774359613403-ae8263d9.png"},
-          name: "Emily R.",
-          role: "Homeowner",
-          testimonial: "I used AquaPaint 3D for my living room, and I couldn't be happier. The color is beautiful, it was easy to apply, and it's reassuring to know it's safe for my family.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-homeowner-woman-late-20s-excited-and-s-1774359613403-ae8263d9.png",
-        },
         {
-          id: "4",
+          id: "4",          name: "David K.",          role: "Construction Manager",          testimonial: "For large-scale projects, AquaPaint 3D provides consistent quality and superior environmental standards. It's a reliable choice for sustainable construction.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-construction-company-manager-man-late--1774359614417-f033321e.png"},
-          name: "David K.",
-          role: "Construction Manager",
-          testimonial: "For large-scale projects, AquaPaint 3D provides consistent quality and superior environmental standards. It's a reliable choice for sustainable construction.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-construction-company-manager-man-late--1774359614417-f033321e.png",
-        },
       ]}
       title="What Our Customers Say"
       description="Hear from professional painters, interior designers, and homeowners who have transformed their spaces with AquaPaint 3D."
@@ -224,20 +148,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "1",
+          id: "1",          title: "What makes AquaPaint 3D eco-friendly?",          content: "Our paints are water-based, low-VOC (Volatile Organic Compounds), and free from harmful chemicals, ensuring a healthier environment during and after application. We prioritize sustainable sourcing for all our ingredients."},
-          title: "What makes AquaPaint 3D eco-friendly?",
-          content: "Our paints are water-based, low-VOC (Volatile Organic Compounds), and free from harmful chemicals, ensuring a healthier environment during and after application. We prioritize sustainable sourcing for all our ingredients.",
-        },
         {
-          id: "2",
+          id: "2",          title: "How does 3D visualization work?",          content: "Our innovative platform allows you to upload a photo of your space and virtually 'paint' it with our colors. This provides a realistic preview of how different shades will look in your unique environment, minimizing uncertainty."},
-          title: "How does 3D visualization work?",
-          content: "Our innovative platform allows you to upload a photo of your space and virtually 'paint' it with our colors. This provides a realistic preview of how different shades will look in your unique environment, minimizing uncertainty.",
-        },
         {
-          id: "3",
+          id: "3",          title: "What about durability and coverage?",          content: "AquaPaint 3D is formulated for exceptional durability, resisting scuffs, fading, and moisture. Our advanced pigments ensure superior coverage, often requiring fewer coats than traditional paints, saving you time and money."},
-          title: "What about durability and coverage?",
-          content: "AquaPaint 3D is formulated for exceptional durability, resisting scuffs, fading, and moisture. Our advanced pigments ensure superior coverage, often requiring fewer coats than traditional paints, saving you time and money.",
-        },
       ]}
       sideTitle="Common Questions"
       sideDescription="Find answers to your most pressing questions about AquaPaint 3D products, application, and benefits."
@@ -252,27 +167,16 @@ export default function LandingPage() {
       description="Reach out to our team for product inquiries, bulk orders, or expert advice. We're here to help you bring your vision to life."
       inputs={[
         {
-          name: "name",
+          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
         },
         {
-          name: "email",
+          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
-          type: "email",
-          placeholder: "Your Email",
-          required: true,
         },
         {
-          name: "subject",
+          name: "subject",          type: "text",          placeholder: "Subject"},
-          type: "text",
-          placeholder: "Subject",
-        },
       ]}
       textarea={{
-        name: "message",
+        name: "message",        placeholder: "Your Message",        rows: 4,
-        placeholder: "Your Message",
-        rows: 4,
         required: true,
       }}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-vibrant-flowing-abstract-background-wi-1774359615713-733e39e7.png"
@@ -290,19 +194,13 @@ export default function LandingPage() {
       socialLinks={[
         {
           icon: Twitter,
-          href: "https://twitter.com",
+          href: "https://twitter.com",          ariaLabel: "Twitter"},
-          ariaLabel: "Twitter",
-        },
         {
           icon: Instagram,
-          href: "https://instagram.com",
+          href: "https://instagram.com",          ariaLabel: "Instagram"},
-          ariaLabel: "Instagram",
-        },
         {
           icon: Linkedin,
-          href: "https://linkedin.com",
+          href: "https://linkedin.com",          ariaLabel: "LinkedIn"},
-          ariaLabel: "LinkedIn",
-        },
       ]}
     />
   </div>

src/app/products/page.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Instagram, Linkedin, Twitter } from "lucide-react";
+
+export default function ProductsPage() {
+  const navItems = [
+    { name: "Features", id: "/#features" },
+    { name: "Products", id: "/products" },
+    { name: "Testimonials", id: "/#testimonials" },
+    { name: "FAQ", id: "/#faq" },
+    { name: "Contact", id: "/#contact" }
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-bubble"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="largeSmall"
+        background="none"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={navItems}
+            button={{
+              text: "Shop Now",              href: "/products"}}
+            brandName="AquaPaint 3D"
+          />
+        </div>
+
+        <div id="products-content" data-section="products-content">
+          <ProductCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            title="Our Full Range of Vibrant Water Paints"
+            description="Explore our complete catalog of eco-friendly, high-quality water-based paints. Find the perfect shade and finish for any project, from professional applications to home DIY."
+            products={[
+              {
+                id: "1",                name: "Blue Ocean",                price: "$45.00",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-can-of-blue-ocean-water-paint-with-a-s-1774359613568-221f773c.png?_wi=2",                imageAlt: "Blue Ocean paint can"},
+              {
+                id: "2",                name: "Emerald Forest",                price: "$45.00",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-can-of-emerald-forest-water-paint-feat-1774359614300-4f91757a.png?_wi=2",                imageAlt: "Emerald Forest paint can"},
+              {
+                id: "3",                name: "Sunny Yellow",                price: "$45.00",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-can-of-sunny-yellow-water-paint-a-brig-1774359614621-bb0b1a74.png?_wi=2",                imageAlt: "Sunny Yellow paint can"},
+              {
+                id: "4",                name: "Ruby Red",                price: "$45.00",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-can-of-blue-ocean-water-paint-with-a-s-1774359613568-221f773c.png?_wi=3", 
+                imageAlt: "Ruby Red paint can"},
+              {
+                id: "5",                name: "Violet Bloom",                price: "$45.00",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-can-of-emerald-forest-water-paint-feat-1774359614300-4f91757a.png?_wi=3", 
+                imageAlt: "Violet Bloom paint can"},
+              {
+                id: "6",                name: "Pure White",                price: "$40.00",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BOUFo7Q0y4A7yE6eGG5YTyQlwv/a-can-of-sunny-yellow-water-paint-a-brig-1774359614621-bb0b1a74.png?_wi=3", 
+                imageAlt: "Pure White paint can"},
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="AquaPaint 3D"
+            copyrightText="© 2024 AquaPaint 3D. All rights reserved."
+            socialLinks={[
+              { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
+              { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
+              { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}