Merge version_2 into main

Merge version_2 into main

src/app/cart/page.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductCart from '@/components/ecommerce/cart/ProductCart';
+
+export default function CartPage() {
+  const [isOpen, setIsOpen] = useState(true);
+  const [items, setItems] = useState([{ id: "1", name: "Frietjes", price: "3.00€", quantity: 1, imageSrc: "" }]);
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <NavbarStyleFullscreen 
+        navItems={[{name: "Home", id: "/"}, {name: "Producten", id: "/products"}]} 
+        brandName="Frituur Op Den Hoek" 
+      />
+      <div className="pt-32 px-4">
+        <ProductCart 
+          isOpen={isOpen} 
+          onClose={() => setIsOpen(false)} 
+          items={items} 
+          total="3.00€"
+          onRemove={(id) => setItems(items.filter(i => i.id !== id))}
+          buttons={[]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/checkout/page.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+
+export default function CheckoutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="small"
+        sizing="largeSizeMediumTitles"
+        background="noise"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "Shop", id: "/checkout" },
+                { name: "Contact", id: "/contact" }
+            ]}
+            brandName="Frituur Op Den Hoek"
+          />
+        </div>
+        <div className="py-24 px-6 text-center">
+           <h1 className="text-4xl font-bold mb-8">Checkout</h1>
+           <p className="mb-12">Betaal uw bestelling veilig via onze integratie.</p>
+           <ContactSplitForm 
+             title="Betalingsgegevens"
+             description="Vul uw gegevens in om de bestelling af te ronden."
+             inputs={[
+                { name: "naam", type: "text", placeholder: "Naam" },
+                { name: "email", type: "email", placeholder: "Email" }
+             ]}
+             useInvertedBackground={false}
+           />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -35,6 +35,8 @@ export default function LandingPage() {
           name: "Onze Troeven",          id: "troeven"},
         {
           name: "Galerij",          id: "galerij"},
+        {
+          name: "Shop",          id: "/checkout"},
         {
           name: "Contact",          id: "contact"},
       ]}
@@ -228,4 +230,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/products/page.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+
+export default function ProductDetailPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
+      <NavbarStyleFullscreen navItems={[{name: "Home", id: "/"}, {name: "Winkelwagen", id: "/cart"}]} brandName="Frituur Op Den Hoek" />
+      <ProductCardFour
+        title="Onze Producten"
+        description="Onze heerlijke selectie"
+        gridVariant="uniform-all-items-equal"
+        animationType="slide-up"
+        textboxLayout="default"
+        useInvertedBackground={false}
+        products={[
+          { id: "1", name: "Frietjes", price: "3.00€", variant: "Regular", imageSrc: "" },
+          { id: "2", name: "Frikandel", price: "2.00€", variant: "Regular", imageSrc: "" },
+          { id: "3", name: "Kroket", price: "1.50€", variant: "Regular", imageSrc: "" }
+        ]}
+      />
+    </ThemeProvider>
+  );
+}

src/app/shop/page.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+
+export default function ShopPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="small"
+        sizing="largeSizeMediumTitles"
+        background="noise"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "hero" },
+            { name: "Onze Troeven", id: "troeven" },
+            { name: "Shop", id: "/shop" },
+            { name: "Galerij", id: "galerij" },
+            { name: "Contact", id: "contact" },
+          ]}
+          brandName="Frituur Op Den Hoek"
+        />
+        
+        <div className="pt-32 pb-20">
+          <ProductCardFour
+            title="Shop Onze Accessoires"
+            description="Bekijk onze collectie kwalitatieve accessoires en telefoonhoesjes."
+            gridVariant="four-items-2x2-equal-grid"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            products={[
+              { id: "a1", name: "Siliconen Hoesje - Zwart", price: "19.99€", variant: "Accessory", imageSrc: "http://img.b2bpic.net/free-photo/silicone-phone-case-black_123.jpg" },
+              { id: "a2", name: "Screen Protector - Glas", price: "14.99€", variant: "Accessory", imageSrc: "http://img.b2bpic.net/free-photo/glass-screen-protector_456.jpg" },
+              { id: "a3", name: "Lader", price: "25.00€", variant: "Accessory", imageSrc: "http://img.b2bpic.net/free-photo/charger.jpg" },
+            ]}
+          />
+        </div>
+
+        <FooterMedia
+          imageSrc="http://img.b2bpic.net/free-photo/young-woman-with-dyed-hair-near-shop_23-2149488667.jpg"
+          logoText="Frituur Op Den Hoek"
+          columns={[]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}