src/app/products/page.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+import TextAbout from '@/components/sections/about/TextAbout';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { ShoppingCart, MessageCircle, Star, Award, Facebook, Instagram } from "lucide-react";
+
+export default function ProductPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-bubble"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="large"
+        background="floatingGradient"
+        cardStyle="outline"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Shop", id: "/shop" },
+              { name: "Products", id: "/products" },
+              { name: "Our Story", id: "/story" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="VB the Bakery"
+            button={{ text: "Order Online", href: "/shop" }}
+          />
+        </div>
+
+        <div id="hero" data-section="hero">
+          <HeroSplit
+            background={{ variant: "plain" }}
+            title="Artisanal Cacao, Hand-Tempered."
+            description="Discover our signature 70% single-origin dark chocolate, infused with Yercaud coffee beans for an unparalleled finish."
+            imageSrc="http://img.b2bpic.net/free-photo/chocolate-roll-with-coffee-beans-pinecones-high-quality-photo_114579-26596.jpg"
+            imagePosition="right"
+          />
+        </div>
+
+        <div id="story-about" data-section="story-about">
+          <TextAbout
+            title="Our Visual Story: The Bean to Bar Journey"
+            tag="The Process"
+          />
+        </div>
+
+        <div id="gifting" data-section="gifting">
+          <TextAbout
+            title="The Boutique Gifting Experience"
+            tag="Boutique"
+            useInvertedBackground={true}
+          />
+        </div>
+
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            title="Product Details"
+            textboxLayout="default"
+            faqs={[
+              { id: "p1", title: "Sourcing", content: "Single origin cacao sourced directly from high-altitude estates." },
+              { id: "p2", title: "Crafting", content: "Small batch, 48-hour stone grinding process for silky texture." },
+              { id: "p3", title: "Storage", content: "Store in a cool, dry place away from direct sunlight." }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="VB the Bakery"
+            socialLinks={[
+              { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+              { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+            ]}
+          />
+        </div>
+
+        <div className="fixed bottom-0 left-0 right-0 z-50 p-4 border-t bg-background shadow-lg md:hidden">
+          <div className="flex items-center justify-between gap-4">
+            <div className="font-bold text-lg">₹550</div>
+            <div className="flex gap-2">
+              <button className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-full text-sm font-semibold">
+                <ShoppingCart size={16} /> Add to Cart
+              </button>
+              <button className="flex items-center gap-2 px-4 py-2 border rounded-full text-sm font-semibold">
+                <MessageCircle size={16} /> WhatsApp
+              </button>
+            </div>
+          </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}