Update src/app/products/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -5,7 +5,7 @@ import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
@@ -30,38 +30,23 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Home",          id: "#hero"},
-        {
-          name: "Shop",          id: "#products"},
-        {
-          name: "Classes",          id: "#classes"},
-        {
-          name: "Contact",          id: "#contact"},
+        { name: "Home", id: "/" },
+        { name: "Products", id: "/products" },
+        { name: "Shop", id: "/products" },
+        { name: "Classes", id: "#classes" },
+        { name: "Contact", id: "#contact" },
       ]}
       brandName="Lakeside Cookie Co."
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardGallery
-      background={{
-        variant: "plain"}}
+      <HeroBillboard
+      background={{ variant: "plain" }}
       title="Welcome to Lakeside Cookie Co."
       description="Custom-decorated cookies, decadent bakery, cookie decorating classes and party supply."
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-appetizing-homemade-chocolate-cookies-metal-tray_181624-57715.jpg",          imageAlt: "gourmet artisan cookies bakery"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-female-confectioner-hands-decorating-stars_1163-2856.jpg",          imageAlt: "decorated cookies close up"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/homemade-cookies-female-hands-christmas-baking-top-view_169016-46602.jpg",          imageAlt: "celebration party supplies display"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-cookies-biscuits-anises-cinnamon-sticks-round-wood-board-dark-table-copy-place_140725-85357.jpg",          imageAlt: "gourmet artisan cookies bakery"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/jar-granola-cornflakes-chocolate-chips-near-dry-fruits-wooden-surface_23-2147956796.jpg",          imageAlt: "decorated cookies close up"},
-      ]}
-      mediaAnimation="slide-up"
+      imageSrc="http://img.b2bpic.net/free-photo/selective-focus-shot-appetizing-homemade-chocolate-cookies-metal-tray_181624-57715.jpg"
+      imageAlt="gourmet artisan cookies bakery"
     />
   </div>
 
@@ -71,12 +56,9 @@ export default function LandingPage() {
       title="Our Passion for Baking"
       description="We specialize in crafting custom-decorated cookies and decadent treats that bring joy to every occasion. Beyond our bakery, we share our craft through engaging decorating classes and curate high-end party supplies."
       metrics={[
-        {
-          value: "10k+",          title: "Cookies Baked"},
-        {
-          value: "500+",          title: "Classes Hosted"},
-        {
-          value: "100%",          title: "Love Involved"},
+        { value: "10k+", title: "Cookies Baked" },
+        { value: "500+", title: "Classes Hosted" },
+        { value: "100%", title: "Love Involved" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/close-up-person-with-dough-kitchen-utensils_23-2148296878.jpg"
       mediaAnimation="blur-reveal"
@@ -91,18 +73,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          id: "f1",          title: "Decadent Cookies",          descriptions: [
-            "Freshly baked cookies with premium ingredients."],
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-valentine-s-day-concept-with-copy-space_23-2148804183.jpg",          imageAlt: "decorated cookie selection set"},
-        {
-          id: "f2",          title: "Decorating Classes",          descriptions: [
-            "Learn the art of sugar cookie decorating."],
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-preparing-melt-chocolate-glass-with-cupcakes_23-2147906749.jpg",          imageAlt: "baking class workshop studio"},
-        {
-          id: "f3",          title: "Party Supplies",          descriptions: [
-            "Shop our curated Meri Meri party collection."],
-          imageSrc: "http://img.b2bpic.net/free-photo/party-suplies-white_23-2147773236.jpg",          imageAlt: "party supplies birthday decor"},
+        { id: "f1", title: "Decadent Cookies", descriptions: ["Freshly baked cookies with premium ingredients."], imageSrc: "http://img.b2bpic.net/free-photo/beautiful-valentine-s-day-concept-with-copy-space_23-2148804183.jpg", imageAlt: "decorated cookie selection set" },
+        { id: "f2", title: "Decorating Classes", descriptions: ["Learn the art of sugar cookie decorating."], imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-preparing-melt-chocolate-glass-with-cupcakes_23-2147906749.jpg", imageAlt: "baking class workshop studio" },
+        { id: "f3", title: "Party Supplies", descriptions: ["Shop our curated Meri Meri party collection."], imageSrc: "http://img.b2bpic.net/free-photo/party-suplies-white_23-2147773236.jpg", imageAlt: "party supplies birthday decor" },
       ]}
       title="What We Offer"
       description="From custom sweet treats to festive event supplies, we elevate your celebrations."
@@ -116,24 +89,9 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       products={[
-        {
-          id: "p1",          brand: "Bakery",          name: "Chocolate Chip Cookie",          price: "$4.00",          rating: 5,
-          reviewCount: "120",          imageSrc: "http://img.b2bpic.net/free-photo/top-distant-view-delicious-cake-with-cream-candies-along-with-berries-cookie-cakes-light_140725-32719.jpg",          imageAlt: "decadent chocolate chip cookie"},
-        {
-          id: "p2",          brand: "Decorated",          name: "Custom Heart Cookie",          price: "$6.00",          rating: 5,
-          reviewCount: "85",          imageSrc: "http://img.b2bpic.net/free-photo/heart-shaped-cakes-valentine-s-day_114579-57275.jpg",          imageAlt: "decorated sugar cookie heart"},
-        {
-          id: "p3",          brand: "Seasonal",          name: "Holiday Treat Box",          price: "$35.00",          rating: 4,
-          reviewCount: "42",          imageSrc: "http://img.b2bpic.net/free-photo/vertical-view-small-cupcakes-christmas-gifts-with-red-ribbon-candy-fir-branches-ice-table_140725-102464.jpg",          imageAlt: "festive holiday cookie box"},
-        {
-          id: "p4",          brand: "Party",          name: "Meri Meri Party Decor",          price: "$12.00",          rating: 5,
-          reviewCount: "90",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-pink-party-ornaments-arrangement_23-2148698090.jpg",          imageAlt: "Meri Meri party supply item"},
-        {
-          id: "p5",          brand: "Bulk",          name: "Assorted Cookie Tin",          price: "$25.00",          rating: 5,
-          reviewCount: "65",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-cookie-making-hanukkah_23-2148704564.jpg",          imageAlt: "bakery fresh cookie tin"},
-        {
-          id: "p6",          brand: "Class",          name: "DIY Decorating Kit",          price: "$30.00",          rating: 5,
-          reviewCount: "110",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-hand-cutting-dough-with-shapes_23-2148695524.jpg",          imageAlt: "artisan cookie decoration kit"},
+        { id: "p1", brand: "Bakery", name: "Chocolate Chip Cookie", price: "$4.00", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/top-distant-view-delicious-cake-with-cream-candies-along-with-berries-cookie-cakes-light_140725-32719.jpg?_wi=1", imageAlt: "decadent chocolate chip cookie" },
+        { id: "p2", brand: "Decorated", name: "Custom Heart Cookie", price: "$6.00", rating: 5, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/heart-shaped-cakes-valentine-s-day_114579-57275.jpg", imageAlt: "decorated sugar cookie heart" },
+        { id: "p3", brand: "Seasonal", name: "Holiday Treat Box", price: "$35.00", rating: 4, reviewCount: "42", imageSrc: "http://img.b2bpic.net/free-photo/vertical-view-small-cupcakes-christmas-gifts-with-red-ribbon-candy-fir-branches-ice-table_140725-102464.jpg", imageAlt: "festive holiday cookie box" },
       ]}
       title="Shop Our Favorites"
       description="Explore our delicious range of treats and festive items."
@@ -144,8 +102,7 @@ export default function LandingPage() {
       <SocialProofOne
       textboxLayout="split"
       useInvertedBackground={false}
-      names={[
-        "Corporate Partners",        "Event Planners",        "Local Schools",        "Family Gatherings",        "Wedding Planners"]}
+      names={["Corporate Partners", "Event Planners", "Local Schools", "Family Gatherings", "Wedding Planners"]}
       title="Trusted by Families & Events"
       description="Proudly supporting celebrations across the community."
     />
@@ -158,16 +115,8 @@ export default function LandingPage() {
       rating={5}
       author="Sarah M."
       avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/top-view-oatmeal-cookies-with-chocolate-purple-wooden-background-with-copy-space_141793-6437.jpg",          alt: "happy customer eating cookie"},
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-cookies_23-2150379172.jpg",          alt: "smiling customer bakery studio"},
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-smiling-interracial-young-couple-having-breakfast-together-home_23-2148151763.jpg",          alt: "bakery shop customer portrait"},
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-asian-woman-cooking-homemade-bakery-home-start-up-sme-small-business-concept_640221-601.jpg",          alt: "satisfied parent cookie party"},
-        {
-          src: "http://img.b2bpic.net/free-photo/young-adult-having-fun-white-party_23-2149575173.jpg",          alt: "happy customer portrait bakery"},
+        { src: "http://img.b2bpic.net/free-photo/top-view-oatmeal-cookies-with-chocolate-purple-wooden-background-with-copy-space_141793-6437.jpg", alt: "happy customer eating cookie" },
+        { src: "http://img.b2bpic.net/medium-shot-woman-holding-cookies_23-2150379172.jpg", alt: "smiling customer bakery studio" },
       ]}
       ratingAnimation="slide-up"
       avatarsAnimation="slide-up"
@@ -180,17 +129,10 @@ export default function LandingPage() {
       title="Corporate Bulk Inquiries"
       description="Need a large order for your next corporate event or client gift? Let's discuss your requirements."
       inputs={[
-        {
-          name: "company",          type: "text",          placeholder: "Company Name",          required: true,
-        },
-        {
-          name: "email",          type: "email",          placeholder: "Work Email",          required: true,
-        },
+        { name: "company", type: "text", placeholder: "Company Name", required: true },
+        { name: "email", type: "email", placeholder: "Work Email", required: true },
       ]}
-      textarea={{
-        name: "message",        placeholder: "Tell us about your event details and quantity needed.",        rows: 4,
-        required: true
-      }}
+      textarea={{ name: "message", placeholder: "Tell us about your event details and quantity needed.", rows: 4, required: true }}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E0jl5troFme2sZ6boV72NF0xYc/uploaded-1779332829234-selc6nbn.png"
       buttonText="Submit Inquiry"
       imageAlt="corporate cookie gift presentation"
@@ -202,14 +144,8 @@ export default function LandingPage() {
       columns={[
         {
           items: [
-            {
-              label: "Corporate Sales: corporate@lakesidecookie.com",              href: "mailto:corporate@lakesidecookie.com"},
-            {
-              label: "Inquiries: hello@lakesidecookie.com",              href: "mailto:hello@lakesidecookie.com"},
-            {
-              label: "Facebook",              href: "#"},
-            {
-              label: "Instagram",              href: "#"},
+            { label: "Corporate Sales: corporate@lakesidecookie.com", href: "mailto:corporate@lakesidecookie.com" },
+            { label: "Inquiries: hello@lakesidecookie.com", href: "mailto:hello@lakesidecookie.com" },
           ],
         },
       ]}

src/app/products/page.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+
+export default function ProductsPage() {
+  const products = [
+    "Dumpster Fire", "Oreo Explosion", "Oatmeal Soctchy", "Andes Mint", 
+    "Snickerdoodle", "Slim Shady", "Nutella Smash", "White Chocolate Macadamia Nut", 
+    "Chocolate Chunk", "Peanut Butter Cup", "Red Velvet", "Salted Caramel", 
+    "Caramel Apple Crisp", "Penthouse", "Butter Finger", "Party Animal"
+  ].map((name, i) => ({
+    id: `prod-${i}`,
+    brand: "Signature",    
+    name,
+    price: "$4.50",    
+    rating: 5,
+    reviewCount: "50",    
+    imageSrc: "http://img.b2bpic.net/free-photo/top-distant-view-delicious-cake-with-cream-candies-along-with-berries-cookie-cakes-light_140725-32719.jpg?_wi=2",    
+    imageAlt: name
+  }));
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="largeSmallSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Products", id: "/products" },
+              { name: "Shop", id: "/products" },
+              { name: "Contact", id: "/#contact" },
+            ]}
+            brandName="Lakeside Cookie Co."
+          />
+        </div>
+
+        <div id="products" data-section="products" className="pt-24">
+          <ProductCardTwo
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="four-items-2x2-equal-grid"
+            title="Our Decadent Cookies"
+            description="Discover our entire range of signature cookies, baked to perfection."
+            products={products}
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            columns={[
+              {
+                items: [
+                  { label: "Corporate Sales: corporate@lakesidecookie.com", href: "mailto:corporate@lakesidecookie.com" },
+                  { label: "Inquiries: hello@lakesidecookie.com", href: "mailto:hello@lakesidecookie.com" },
+                ],
+              },
+            ]}
+            logoText="Lakeside Cookie Co."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,7 +10,7 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
+  --background: #96e5f6;
   --card: #dad6cd;
   --foreground: #2a2928;
   --primary-cta: #2a2928;