Merge version_2 into main

Merge version_2 into main

src/app/checkout/page.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ReactLenis from "lenis/react";
+
+export default function CheckoutPage() {
+  return (
+    <ThemeProvider 
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay 
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Shop", id: "/shop" },
+              { name: "Checkout", id: "/checkout" }
+            ]} 
+            brandName="SSW" 
+          />
+        </div>
+        <div className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
+          <h1 className="text-4xl font-bold mb-8">Checkout</h1>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+            <div>
+              <h2 className="text-xl font-semibold mb-4">Verzendgegevens</h2>
+              <ContactCTA 
+                tag="Bestellen"
+                title="Vul uw gegevens in"
+                description="Wij bezorgen uw modulaire keuken direct aan huis."
+                buttons={[{ text: "Bevestigen" }]}
+                background={{ variant: "plain" }}
+                useInvertedBackground={false}
+              />
+            </div>
+            <div className="bg-gray-50 p-6 rounded-xl">
+              <h2 className="text-xl font-semibold mb-4">Orderoverzicht</h2>
+              <div className="space-y-4">
+                <div className="flex justify-between"><span>The Foundation - Walnoot</span><span>€149.00</span></div>
+                <div className="border-t pt-4 flex justify-between font-bold"><span>Totaal</span><span>€149.00</span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard 
+            logoText="SSW"
+            columns={[
+              { title: "Ecosysteem", items: [{ label: "Home", href: "/" }, { label: "Shop", href: "/shop" }] }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -194,4 +194,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/product/[id]/page.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Star } from "lucide-react";
+
+export default function ProductDetailPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="mediumLargeSizeLargeTitles"
+        background="none"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingOverlay
+              navItems={[
+                { name: "Home", id: "/" },
+                { name: "Shop", id: "/#shop" },
+              ]}
+              brandName="SSW"
+            />
+        </div>
+
+        <div className="pt-32 pb-16">
+          <ProductDetailCard
+            layout="page"
+            name="The Foundation - Walnoot"
+            price="€149.00"
+            showRating={true}
+            rating={5}
+            ratingIcon={Star}
+            description="Onze meest populaire plank. Handvervaardigd van premium Amerikaans walnoothout met ingebouwde N52 magnetische kracht."
+            images={[
+              { src: "http://img.b2bpic.net/free-photo/top-view-from-afar-limes-board-green-yellow-limes-cutting-board-tree-branches-cones_140725-118715.jpg", alt: "Product Main" },
+              { src: "http://img.b2bpic.net/free-photo/medium-shot-artisan-doing-woodcutting_23-2150104839.jpg", alt: "Detail" }
+            ]}
+            buttons={[
+              { text: "Voeg toe aan mandje" }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="SSW"
+            columns={[
+              { title: "Ecosysteem", items: [{ label: "Shop", href: "/#shop" }, { label: "Over ons", href: "/#about" }] },
+              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }] },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}