Update src/app/products/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -34,6 +34,7 @@ export default function LandingPage() {
             { name: "Products", id: "products" },
             { name: "Custom Cakes", id: "custom" },
             { name: "Gallery", id: "gallery" },
+            { name: "Shop", id: "shop" },
             { name: "Contact", id: "contact" }
           ]}
           button={{
@@ -52,7 +53,7 @@ export default function LandingPage() {
           ]}
           slides={[
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/delicious-cake-with-fruits_23-2150727767.jpg",              imageAlt: "Beautiful chocolate cake"
+              imageSrc: "http://img.b2bpic.net/free-photo/delicious-cake-with-fruits_23-2150727767.jpg?_wi=1",              imageAlt: "Beautiful chocolate cake"
             },
             {
               imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-delicious-panettone_23-2149173072.jpg?_wi=1",              imageAlt: "Colorful birthday cake"
@@ -99,22 +100,22 @@ export default function LandingPage() {
           animationType="blur-reveal"
           products={[
             {
-              id: "chocolate-truffle",              name: "Chocolate Truffle Cake",              price: "₹500",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-hand-slicing-black-white-chocolate_176474-3268.jpg",              imageAlt: "Chocolate Truffle Cake"
+              id: "chocolate-truffle",              name: "Chocolate Truffle Cake",              price: "₹500",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-hand-slicing-black-white-chocolate_176474-3268.jpg?_wi=1",              imageAlt: "Chocolate Truffle Cake"
             },
             {
-              id: "butterscotch",              name: "Butterscotch Cake",              price: "₹450",              imageSrc: "http://img.b2bpic.net/free-photo/carrot-cake-with-2020-candles-cup-tea-grey-concrete_114579-4863.jpg",              imageAlt: "Butterscotch Cake"
+              id: "butterscotch",              name: "Butterscotch Cake",              price: "₹450",              imageSrc: "http://img.b2bpic.net/free-photo/carrot-cake-with-2020-candles-cup-tea-grey-concrete_114579-4863.jpg?_wi=1",              imageAlt: "Butterscotch Cake"
             },
             {
-              id: "red-velvet",              name: "Red Velvet Cake",              price: "₹700",              imageSrc: "http://img.b2bpic.net/free-photo/delicious-cake-with-fruits_23-2150727664.jpg",              imageAlt: "Red Velvet Cake"
+              id: "red-velvet",              name: "Red Velvet Cake",              price: "₹700",              imageSrc: "http://img.b2bpic.net/free-photo/delicious-cake-with-fruits_23-2150727664.jpg?_wi=1",              imageAlt: "Red Velvet Cake"
             },
             {
-              id: "black-forest",              name: "Black Forest Cake",              price: "₹550",              imageSrc: "http://img.b2bpic.net/free-photo/christmas-cake-decorated-with-red-berries_1303-13007.jpg",              imageAlt: "Black Forest Cake"
+              id: "black-forest",              name: "Black Forest Cake",              price: "₹550",              imageSrc: "http://img.b2bpic.net/free-photo/christmas-cake-decorated-with-red-berries_1303-13007.jpg?_wi=1",              imageAlt: "Black Forest Cake"
             },
             {
-              id: "pineapple",              name: "Pineapple Cake",              price: "₹400",              imageSrc: "http://img.b2bpic.net/free-photo/half-shot-fresh-orange-slices-chopped-cake-slices-dark-table_140725-86751.jpg",              imageAlt: "Pineapple Cake"
+              id: "pineapple",              name: "Pineapple Cake",              price: "₹400",              imageSrc: "http://img.b2bpic.net/free-photo/half-shot-fresh-orange-slices-chopped-cake-slices-dark-table_140725-86751.jpg?_wi=1",              imageAlt: "Pineapple Cake"
             },
             {
-              id: "cupcakes",              name: "Cupcake Box (6 pcs)",              price: "₹300",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-muffins-glaze_23-2148425788.jpg",              imageAlt: "Cupcake Box"
+              id: "cupcakes",              name: "Cupcake Box (6 pcs)",              price: "₹300",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-muffins-glaze_23-2148425788.jpg?_wi=1",              imageAlt: "Cupcake Box"
             }
           ]}
           ariaLabel="Product showcase section"
@@ -209,7 +210,7 @@ export default function LandingPage() {
         <ContactSplitForm
           title="Get in Touch"
           description="Have questions about our cakes or want to place a custom order? Reach out to us!"
-          imageSrc="http://img.b2bpic.net/free-photo/male-worker-examines-social-media-software-phone_482257-75353.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/male-worker-examines-social-media-software-phone_482257-75353.jpg?_wi=1"
           imageAlt="Contact us image"
           mediaAnimation="opacity"
           mediaPosition="right"
@@ -236,7 +237,8 @@ export default function LandingPage() {
                 { label: "Home", href: "#hero" },
                 { label: "About", href: "#about" },
                 { label: "Products", href: "#products" },
-                { label: "Gallery", href: "#gallery" }
+                { label: "Gallery", href: "#gallery" },
+                { label: "Shop", href: "/products" }
               ]
             },
             {
@@ -262,4 +264,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/products/page.tsx

@@ -0,0 +1,147 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import { Sparkles } from 'lucide-react';
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="mediumLargeSizeMediumTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="solid"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="solid"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Tiyasa's Bakery Bites"
+          navItems={[
+            { name: "Home", id: "hero" },
+            { name: "About", id: "about" },
+            { name: "Products", id: "products" },
+            { name: "Custom Cakes", id: "custom" },
+            { name: "Gallery", id: "gallery" },
+            { name: "Shop", id: "shop" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Order Now",            href: "https://wa.me/8348285377"
+          }}
+        />
+      </div>
+
+      <div id="shop" data-section="shop">
+        <ProductCardThree
+          title="Our Complete Product Range"
+          description="Browse our full selection of freshly baked cakes, pastries, and custom desserts. All made with premium ingredients and crafted to perfection."
+          tag="All Products"
+          tagIcon={Sparkles}
+          tagAnimation="opacity"
+          buttons={[
+            { text: "Back to Home", href: "/" }
+          ]}
+          buttonAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          gridVariant="three-columns-all-equal-width"
+          animationType="blur-reveal"
+          products={[
+            {
+              id: "chocolate-truffle",              name: "Chocolate Truffle Cake",              price: "₹500",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-hand-slicing-black-white-chocolate_176474-3268.jpg?_wi=2",              imageAlt: "Chocolate Truffle Cake"
+            },
+            {
+              id: "butterscotch",              name: "Butterscotch Cake",              price: "₹450",              imageSrc: "http://img.b2bpic.net/free-photo/carrot-cake-with-2020-candles-cup-tea-grey-concrete_114579-4863.jpg?_wi=2",              imageAlt: "Butterscotch Cake"
+            },
+            {
+              id: "red-velvet",              name: "Red Velvet Cake",              price: "₹700",              imageSrc: "http://img.b2bpic.net/free-photo/delicious-cake-with-fruits_23-2150727664.jpg?_wi=2",              imageAlt: "Red Velvet Cake"
+            },
+            {
+              id: "black-forest",              name: "Black Forest Cake",              price: "₹550",              imageSrc: "http://img.b2bpic.net/free-photo/christmas-cake-decorated-with-red-berries_1303-13007.jpg?_wi=2",              imageAlt: "Black Forest Cake"
+            },
+            {
+              id: "pineapple",              name: "Pineapple Cake",              price: "₹400",              imageSrc: "http://img.b2bpic.net/free-photo/half-shot-fresh-orange-slices-chopped-cake-slices-dark-table_140725-86751.jpg?_wi=2",              imageAlt: "Pineapple Cake"
+            },
+            {
+              id: "cupcakes",              name: "Cupcake Box (6 pcs)",              price: "₹300",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-muffins-glaze_23-2148425788.jpg?_wi=2",              imageAlt: "Cupcake Box"
+            },
+            {
+              id: "vanilla-dream",              name: "Vanilla Dream Cake",              price: "₹480",              imageSrc: "http://img.b2bpic.net/free-photo/delicious-cake-with-fruits_23-2150727767.jpg?_wi=2",              imageAlt: "Vanilla Dream Cake"
+            },
+            {
+              id: "strawberry-bliss",              name: "Strawberry Bliss",              price: "₹520",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-strawberry-pie-with-macarons-cup-tea-light-white_140725-78197.jpg",              imageAlt: "Strawberry Bliss Cake"
+            },
+            {
+              id: "mango-tango",              name: "Mango Tango",              price: "₹460",              imageSrc: "http://img.b2bpic.net/free-photo/half-shot-fresh-orange-slices-chopped-cake-slices-dark-table_140725-86751.jpg?_wi=3",              imageAlt: "Mango Tango Cake"
+            }
+          ]}
+          ariaLabel="Complete product catalog"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactSplitForm
+          title="Interested in Custom Orders?"
+          description="Let us know what you're looking for and we'll create something special just for you!"
+          imageSrc="http://img.b2bpic.net/free-photo/male-worker-examines-social-media-software-phone_482257-75353.jpg?_wi=2"
+          imageAlt="Contact us image"
+          mediaAnimation="opacity"
+          mediaPosition="right"
+          useInvertedBackground={true}
+          inputs={[
+            { name: "name", type: "text", placeholder: "Your Name", required: true },
+            { name: "email", type: "email", placeholder: "Your Email", required: true },
+            { name: "phone", type: "tel", placeholder: "Your Phone Number", required: true }
+          ]}
+          textarea={{
+            name: "message",            placeholder: "Tell us about your custom cake requirements...",            rows: 5,
+            required: true
+          }}
+          buttonText="Send Inquiry"
+          ariaLabel="Custom order inquiry form"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={[
+            {
+              title: "Quick Links",              items: [
+                { label: "Home", href: "/" },
+                { label: "About", href: "/#about" },
+                { label: "Gallery", href: "/#gallery" },
+                { label: "Products", href: "/products" }
+              ]
+            },
+            {
+              title: "Contact",              items: [
+                { label: "Phone: 8348285377", href: "tel:8348285377" },
+                { label: "WhatsApp", href: "https://wa.me/8348285377" },
+                { label: "Email Us", href: "/#contact" },
+                { label: "Get Directions", href: "#" }
+              ]
+            },
+            {
+              title: "Hours",              items: [
+                { label: "Mon - Fri: 10 AM - 8 PM", href: "#" },
+                { label: "Saturday: 10 AM - 9 PM", href: "#" },
+                { label: "Sunday: 11 AM - 7 PM", href: "#" },
+                { label: "Closed on Public Holidays", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="Made with love by Tiyasa's Bakery Bites © 2024. All rights reserved."
+          ariaLabel="Footer section"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}