Merge version_10 into main

Merge version_10 into main

src/app/blog/page.tsx

@@ -26,33 +26,19 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "Home",
-          id: "/",
-        },
+          name: "Home",          id: "/"},
         {
-          name: "Over Pyk",
-          id: "/over-pyk",
-        },
+          name: "Over Pyk",          id: "/over-pyk"},
         {
-          name: "Webshop",
-          id: "/shop",
-        },
+          name: "Webshop",          id: "/shop"},
         {
-          name: "Events",
-          id: "/events",
-        },
+          name: "Events",          id: "/events"},
         {
-          name: "Blog",
-          id: "/blog",
-        },
+          name: "Blog",          id: "/blog"},
         {
-          name: "Relatiegeschenken",
-          id: "/relatiegeschenken",
-        },
+          name: "Relatiegeschenken",          id: "/relatiegeschenken"},
         {
-          name: "Contact",
-          id: "/contact",
-        },
+          name: "Contact",          id: "/contact"},
       ]}
       brandName="Pyk Slyterij"
     />
@@ -67,49 +53,13 @@ export default function LandingPage() {
       description="Verdiep u in onze wereld van dranken en delicatessen met alle artikelen van Pyk Slyterij Deventer."
       blogs={[
         {
-          id: "blog-full-1",
-          category: "Wijn",
-          title: "De Perfecte Wijn voor het Seizoen",
-          excerpt: "Ontdek welke wijnen het beste passen bij de smaken en stemmingen van elk seizoen. Van lichte zomerwijnen tot rijke herfstdranken.",
-          imageSrc: "http://img.b2bpic.net/free-photo/senior-man-working-field-with-fruits_329181-12479.jpg",
-          imageAlt: "Wijngaard tijdens de oogst",
-          authorName: "Pyk Slyterij",
-          authorAvatar: "asset://avatar-1",
-          date: "15 maart 2024",
-        },
+          id: "blog-full-1",          category: "WIJN VAN DE MAAND",          title: "De Perfecte Wijn voor het Seizoen",          excerpt: "Ontdek welke wijnen het beste passen bij de smaken en stemmingen van elk seizoen. Van lichte zomerwijnen tot rijke herfstdranken.",          imageSrc: "https://via.placeholder.com/800x600/CCCCCC/FFFFFF?text=Blog+Article+1",          imageAlt: "Wijngaard tijdens de oogst",          authorName: "Pyk Slyterij",          authorAvatar: "asset://avatar-1",          date: "15 maart 2024"},
         {
-          id: "blog-full-2",
-          category: "Sterke Drank",
-          title: "Cocktails maken als een Pro: Tips & Tricks",
-          excerpt: "Verbaas uw gasten met deze eenvoudige maar indrukwekkende cocktailrecepten. Van klassiekers tot moderne twists.",
-          imageSrc: "http://img.b2bpic.net/free-photo/beach-cocktails-ai-generated_268835-11089.jpg",
-          imageAlt: "Vers gemaakte cocktail",
-          authorName: "Pyk Slyterij",
-          authorAvatar: "asset://avatar-2",
-          date: "8 maart 2024",
-        },
+          id: "blog-full-2",          category: "DRANK ONTDEKKING",          title: "Cocktails maken als een Pro: Tips & Tricks",          excerpt: "Verbaas uw gasten met deze eenvoudige maar indrukwekkende cocktailrecepten. Van klassiekers tot moderne twists.",          imageSrc: "https://via.placeholder.com/800x600/CCCCCC/FFFFFF?text=Blog+Article+2",          imageAlt: "Vers gemaakte cocktail",          authorName: "Pyk Slyterij",          authorAvatar: "asset://avatar-2",          date: "8 maart 2024"},
         {
-          id: "blog-full-3",
-          category: "Delicatessen",
-          title: "De Kunst van Spijs-Wijn Combinatie",
-          excerpt: "Leer hoe u de ideale wijn combineert met verschillende delicatessen voor een onvergetelijke culinaire ervaring.",
-          imageSrc: "http://img.b2bpic.net/free-photo/cheese-set-with-red-wine-wooden-board_140725-4525.jpg",
-          imageAlt: "Kaas en wijn pairing",
-          authorName: "Pyk Slyterij",
-          authorAvatar: "asset://avatar-3",
-          date: "1 maart 2024",
-        },
+          id: "blog-full-3",          category: "PYK PICKS",          title: "De Kunst van Spijs-Wijn Combinatie",          excerpt: "Leer hoe u de ideale wijn combineert met verschillende delicatessen voor een onvergetelijke culinaire ervaring.",          imageSrc: "https://via.placeholder.com/800x600/CCCCCC/FFFFFF?text=Blog+Article+3",          imageAlt: "Kaas en wijn pairing",          authorName: "Pyk Slyterij",          authorAvatar: "asset://avatar-3",          date: "1 maart 2024"},
         {
-          id: "blog-full-4",
-          category: "Wijn",
-          title: "Natuurwijn: De Pure Expressie",
-          excerpt: "Ontdek de fascinerende wereld van natuurwijnen: puur, onbewerkt en vol karakter.",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-bottle-champagne-with-little-presents-light-gift-xmas-photo-new-year-color-alcohol_140725-93496.jpg",
-          imageAlt: "Fles natuurwijn",
-          authorName: "Pyk Slyterij",
-          authorAvatar: "asset://avatar-4",
-          date: "25 februari 2024",
-        },
+          id: "blog-full-4",          category: "BELEVING",          title: "Natuurwijn: De Pure Expressie",          excerpt: "Ontdek de fascinerende wereld van natuurwijnen: puur, onbewerkt en vol karakter.",          imageSrc: "https://via.placeholder.com/800x600/CCCCCC/FFFFFF?text=Blog+Article+4",          imageAlt: "Fles natuurwijn",          authorName: "Pyk Slyterij",          authorAvatar: "asset://avatar-4",          date: "25 februari 2024"},
       ]}
     />
   </div>
@@ -118,8 +68,7 @@ export default function LandingPage() {
       <ContactCenter
       useInvertedBackground={true}
       background={{
-        variant: "rotated-rays-static",
-      }}
+        variant: "rotated-rays-static"}}
       tag="Blijf Geïnspireerd"
       title="Mis geen Enkel Blogbericht"
       description="Meld u aan voor onze blog-nieuwsbrief en ontvang de nieuwste artikelen en verhalen direct in uw inbox."
@@ -135,69 +84,43 @@ export default function LandingPage() {
         {
           items: [
             {
-              label: "Over Pyk",
-              href: "/over-pyk",
-            },
+              label: "Over Pyk",              href: "/over-pyk"},
             {
-              label: "Ons Team",
-              href: "/over-pyk#team",
-            },
+              label: "Ons Team",              href: "/over-pyk#our-team"},
             {
-              label: "De Wynkantine",
-              href: "/wynkantine",
-            },
+              label: "De Wynkantine",              href: "/wynkantine"},
           ],
         },
         {
           items: [
             {
-              label: "Webshop",
-              href: "/shop",
-            },
+              label: "Webshop",              href: "/shop"},
             {
-              label: "Wijnen",
-              href: "/shop?category=wijn",
-            },
+              label: "Wijnen",              href: "/shop?category=wijn"},
             {
-              label: "Sterke Dranken",
-              href: "/shop?category=sterkedranken",
-            },
+              label: "Sterke Dranken",              href: "/shop?category=sterkedranken"},
             {
-              label: "Delicatessen",
-              href: "/shop?category=delicatessen",
-            },
+              label: "Delicatessen",              href: "/shop?category=delicatessen"},
           ],
         },
         {
           items: [
             {
-              label: "Evenementen",
-              href: "/events",
-            },
+              label: "Evenementen",              href: "/events"},
             {
-              label: "Blog",
-              href: "/blog",
-            },
+              label: "Blog",              href: "/blog"},
             {
-              label: "Relatiegeschenken",
-              href: "/relatiegeschenken",
-            },
+              label: "Relatiegeschenken",              href: "/relatiegeschenken"},
             {
-              label: "Contact",
-              href: "/contact",
-            },
+              label: "Contact",              href: "/contact"},
           ],
         },
         {
           items: [
             {
-              label: "Instagram",
-              href: "https://instagram.com/pykslyterij",
-            },
+              label: "Instagram",              href: "https://instagram.com/pykslyterij"},
             {
-              label: "Facebook",
-              href: "https://facebook.com/pykslyterij",
-            },
+              label: "Facebook",              href: "https://facebook.com/pykslyterij"},
           ],
         },
       ]}
@@ -207,4 +130,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/components/AgeVerificationModal.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+
+interface AgeVerificationModalProps {
+  children: React.ReactNode;
+}
+
+const AgeVerificationModal: React.FC<AgeVerificationModalProps> = ({ children }) => {
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => {
+    const ageVerified = localStorage.getItem("ageVerified");
+    if (ageVerified !== "true") {
+      setShowModal(true);
+    }
+  }, []);
+
+  const handleVerify = (isAdult: boolean) => {
+    if (isAdult) {
+      localStorage.setItem("ageVerified", "true");
+      setShowModal(false);
+    } else {
+      alert("Helaas, je moet 18+ zijn om deze website te bezoeken.");
+      // Optionally redirect or close the tab
+      window.location.href = "about:blank"; // Example: closes the tab or redirects
+    }
+  };
+
+  if (!showModal) {
+    return <>{children}</>;
+  }
+
+  // Render modal using createPortal to ensure it's at the top level
+  return createPortal(
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black bg-opacity-70">
+      <div className="bg-white p-8 rounded-lg shadow-xl text-center max-w-sm mx-auto">
+        <h2 className="text-xl font-bold mb-4 text-black">
+          OEPS, EVEN CHECKEN. PYK is een tikkeltje anders... net als onze check. Stel jezelf de vraag: ben je 18+? Eerlijk antwoord, graag! 😉
+        </h2>
+        <div className="flex justify-center gap-4">
+          <button
+            onClick={() => handleVerify(true)}
+            className="px-6 py-3 bg-[var(--primary-cta)] text-[var(--primary-cta-text)] rounded-md hover:opacity-90 transition-opacity"
+          >
+            JA
+          </button>
+          <button
+            onClick={() => handleVerify(false)}
+            className="px-6 py-3 bg-[var(--secondary-cta)] text-[var(--secondary-cta-text)] border border-[var(--secondary-cta)] rounded-md hover:bg-[var(--secondary-cta)]/90 transition-colors"
+          >
+            NEE
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default AgeVerificationModal;

src/app/contact/page.tsx

@@ -2,130 +2,318 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FaqSplitText from "@/components/sections/faq/FaqSplitText";
+import { AtSign, Phone } from "lucide-react";
+import Textarea from "@/components/form/Textarea";
+import { useState } from "react";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+
+export default function ContactPage() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Contact form submitted:", { name, email, message });
+    alert("Bedankt voor uw bericht! We nemen spoedig contact met u op.");
+    setName("");
+    setEmail("");
+    setMessage("");
+  };
+
+  const navItems = [
+    {
+      name: "Home",      id: "/"
+    },
+    {
+      name: "Over Pyk",      id: "/over-pyk"
+    },
+    {
+      name: "Webshop",      id: "/shop"
+    },
+    {
+      name: "Events",      id: "/events"
+    },
+    {
+      name: "Blog",      id: "/blog"
+    },
+    {
+      name: "Relatiegeschenken",      id: "/relatiegeschenken"
+    },
+    {
+      name: "Contact",      id: "/contact"
+    }
+  ];
 
-export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="text-stagger"
-        defaultTextAnimation="background-highlight"
-        borderRadius="soft"
-        contentWidth="smallMedium"
-        sizing="mediumLargeSizeMediumTitles"
-        background="fluid"
-        cardStyle="subtle-shadow"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="solid"
-        headingFontWeight="semibold"
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeMediumTitles"
+      background="fluid"
+      cardStyle="subtle-shadow"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Home",          id: "/"},
-        {
-          name: "Over Pyk",          id: "/over-pyk"},
-        {
-          name: "Webshop",          id: "/shop"},
-        {
-          name: "Events",          id: "/events"},
-        {
-          name: "Blog",          id: "/blog"},
-        {
-          name: "Relatiegeschenken",          id: "/relatiegeschenken"},
-        {
-          name: "Contact",          id: "/contact"},
-      ]}
-      brandName="Pyk Slyterij"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple navItems={navItems} brandName="Pyk Slyterij" />
+        </div>
 
-  <div id="contact-page" data-section="contact-page">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "downward-rays-static"}}
-      tag="Neem Contact Op"
-      title="Bezoek Ons of Bel"
-      description="Wij staan klaar om u te helpen met al uw vragen. U vindt ons op de Houtmarkt in Deventer. \n\n**Adres:** Houtmarkt 14, 7411 CG Deventer\n**Telefoon (Regulier):** 06-25273263\n**Telefoon (Horeca):** 06-83978031\n**E-mail:** info@pykslyterij.nl\n\n**Openingstijden:**\nDi-Vr: 10:00-18:30\nZa: 10:00-17:00"
-      inputPlaceholder="Uw naam"
-      buttonText="Verzenden"
-      termsText="Wij respecteren uw privacy. Uw gegevens worden niet gedeeld met derden."
-    />
-  </div>
+        <div id="contact-intro" data-section="contact-intro">
+          <ContactCTA
+            tag="Contact"
+            title="Kom langs, bel of mail ons!"
+            description="We staan klaar om u te helpen met al uw vragen over onze producten, evenementen of De Wynkantine. U kunt ook het onderstaande contactformulier invullen."
+            buttons={[
+              {
+                text: "Instagram",                href: "https://instagram.com/pykslyterij",                onClick: () =>
+                  window.open("https://instagram.com/pykslyterij", "_blank"),
+              },
+              {
+                text: "Facebook",                href: "https://facebook.com/pykslyterij",                onClick: () =>
+                  window.open("https://facebook.com/pykslyterij", "_blank"),
+              },
+            ]}
+            background={{
+              variant: "radial-gradient"
+            }}
+            useInvertedBackground={true}
+          />
+        </div>
 
-  <div id="general-faq" data-section="general-faq">
-      <FaqDouble
-      textboxLayout="default"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "faq-general-1",          title: "Wat is de levertijd van webshop bestellingen?",          content: "Bestellingen geplaatst voor 15:00 uur worden doorgaans de volgende werkdag geleverd binnen Nederland."},
-        {
-          id: "faq-general-2",          title: "Kan ik een product retourneren?",          content: "Ja, onbeschadigde en ongeopende producten kunnen binnen 14 dagen na aankoop worden geretourneerd. Zie onze retourvoorwaarden voor details."},
-        {
-          id: "faq-general-3",          title: "Bieden jullie cadeaubonnen aan?",          content: "Jazeker! Cadeaubonnen zijn verkrijgbaar in onze winkel en online te bestellen. Een perfect cadeau voor elke drankliefhebber."},
-      ]}
-      title="Algemene Veelgestelde Vragen"
-      description="Antwoorden op de meest voorkomende vragen over Pyk Slyterij, onze producten en services."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div
+          id="contact-details"
+          data-section="contact-details"
+          className="py-16 md:py-24 lg:py-32 px-4 sm:px-6 lg:px-8 bg-background"
+        >
+          <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
+            <div>
+              <h3 className="text-2xl font-semibold mb-4 text-foreground">
+                Algemene Contactgegevens
+              </h3>
+              <p className="flex items-center gap-2 text-foreground/80 mb-2">
+                <AtSign className="h-5 w-5 text-accent" />
+                <span>info@pykslyterij.nl</span>
+              </p>
+              <p className="flex items-center gap-2 text-foreground/80 mb-2">
+                <Phone className="h-5 w-5 text-accent" />
+                <span>Regulier: +31 570 123456</span>
+              </p>
+              <p className="flex items-center gap-2 text-foreground/80 mb-4">
+                <Phone className="h-5 w-5 text-accent" />
+                <span>Horeca: +31 570 654321</span>
+              </p>
+              <h3 className="text-2xl font-semibold mb-4 text-foreground">
+                Adres
+              </h3>
+              <p className="text-foreground/80">Hoofdstraat 123</p>
+              <p className="text-foreground/80">7411 AB Deventer</p>
+            </div>
 
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Over Pyk",              href: "/over-pyk"},
-            {
-              label: "Ons Team",              href: "/over-pyk#team"},
-            {
-              label: "De Wynkantine",              href: "/wynkantine"},
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Webshop",              href: "/shop"},
-            {
-              label: "Wijnen",              href: "/shop?category=wijn"},
-            {
-              label: "Sterke Dranken",              href: "/shop?category=sterkedranken"},
-            {
-              label: "Delicatessen",              href: "/shop?category=delicatessen"},
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Evenementen",              href: "/events"},
-            {
-              label: "Blog",              href: "/blog"},
-            {
-              label: "Relatiegeschenken",              href: "/relatiegeschenken"},
-            {
-              label: "Contact",              href: "/contact"},
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Instagram",              href: "https://instagram.com/pykslyterij"},
-            {
-              label: "Facebook",              href: "https://facebook.com/pykslyterij"},
-          ],
-        },
-      ]}
-      logoText="Pyk Slyterij"
-    />
-  </div>
+            <div>
+              <h3 className="text-2xl font-semibold mb-4 text-foreground">
+                Openingstijden Pyk Slyterij
+              </h3>
+              <ul className="list-none space-y-2 text-foreground/80">
+                <li>Maandag: Gesloten</li>
+                <li>Dinsdag - Vrijdag: 10:00 - 18:00</li>
+                <li>Zaterdag: 10:00 - 17:00</li>
+                <li>Zondag: Gesloten</li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 className="text-2xl font-semibold mb-4 text-foreground">
+                Openingstijden De Wynkantine
+              </h3>
+              <ul className="list-none space-y-2 text-foreground/80">
+                <li>Maandag: Gesloten</li>
+                <li>Dinsdag - Donderdag: 16:00 - 22:00</li>
+                <li>Vrijdag - Zaterdag: 16:00 - 00:00</li>
+                <li>Zondag: Gesloten</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div
+          id="contact-form-map"
+          data-section="contact-form-map"
+          className="py-16 md:py-24 lg:py-32 px-4 sm:px-6 lg:px-8 bg-background-accent"
+        >
+          <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12">
+            <div>
+              <h3 className="text-3xl font-bold mb-6 text-foreground">
+                Stuur ons een bericht
+              </h3>
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div>
+                  <label
+                    htmlFor="name"
+                    className="block text-sm font-medium text-foreground mb-2"
+                  >
+                    Naam
+                  </label>
+                  <input
+                    type="text"
+                    id="name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    className="block w-full rounded-md border-0 py-2 text-foreground shadow-sm ring-1 ring-inset ring-card placeholder:text-foreground/50 focus:ring-2 focus:ring-inset focus:ring-primary-cta sm:text-sm sm:leading-6 bg-card"
+                    placeholder="Uw naam"
+                    required
+                  />
+                </div>
+                <div>
+                  <label
+                    htmlFor="email"
+                    className="block text-sm font-medium text-foreground mb-2"
+                  >
+                    E-mailadres
+                  </label>
+                  <input
+                    type="email"
+                    id="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="block w-full rounded-md border-0 py-2 text-foreground shadow-sm ring-1 ring-inset ring-card placeholder:text-foreground/50 focus:ring-2 focus:ring-inset focus:ring-primary-cta sm:text-sm sm:leading-6 bg-card"
+                    placeholder="Uw e-mailadres"
+                    required
+                  />
+                </div>
+                <div>
+                  <label
+                    htmlFor="message"
+                    className="block text-sm font-medium text-foreground mb-2"
+                  >
+                    Bericht
+                  </label>
+                  <Textarea
+                    value={message}
+                    onChange={setMessage}
+                    placeholder="Uw bericht"
+                    rows={5}
+                    required
+                    className="block w-full rounded-md border-0 py-2 text-foreground shadow-sm ring-1 ring-inset ring-card placeholder:text-foreground/50 focus:ring-2 focus:ring-inset focus:ring-primary-cta sm:text-sm sm:leading-6 bg-card"
+                  />
+                </div>
+                <button
+                  type="submit"
+                  className="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none data-[state=open]:bg-primary-cta h-10 px-4 py-2 bg-primary-cta text-primary-cta-foreground hover:bg-primary-cta/90"
+                >
+                  Verzenden
+                </button>
+              </form>
+            </div>
+            <div className="w-full h-96 rounded-lg overflow-hidden shadow-lg">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2449.610547701389!2d6.155705315998634!3d52.25301397976865!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b86b4a2e5d7633%3A0x6a0c0b8b0e8b0e8b!2sDeventer!5e0!3m2!1sen!2snl!4v1678891234567!5m2!1sen!2snl"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen={true}
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                title="Locatie van Pyk Slyterij in Deventer"
+              ></iframe>
+            </div>
+          </div>
+        </div>
+
+        <div id="faq" data-section="faq">
+          <FaqSplitText
+            sideTitle="Veelgestelde Vragen"
+            sideDescription="Heeft u nog vragen? Bekijk onze veelgestelde vragen hieronder of neem direct contact met ons op."
+            faqsAnimation="slide-up"
+            useInvertedBackground={true}
+            faqs={[
+              {
+                id: "faq-1",                title: "Waar kan ik jullie producten online kopen?",                content:
+                  "U kunt onze uitgebreide selectie wijnen, sterke dranken en delicatessen vinden in onze webshop op /shop."},
+              {
+                id: "faq-2",                title: "Organiseren jullie proeverijen of evenementen?",                content:
+                  "Jazeker! We organiseren regelmatig proeverijen en masterclasses. Bekijk onze evenementenkalender op /events voor meer informatie."},
+              {
+                id: "faq-3",                title: "Wat is De Wynkantine?",                content:
+                  "De Wynkantine is onze sfeervolle bar waar u kunt genieten van een zorgvuldig samengestelde selectie wijnen, bieren en cocktails, perfect te combineren met kleine gerechtjes. Ideaal voor een gezellige avond uit!"},
+              {
+                id: "faq-4",                title:
+                  "Bieden jullie zakelijke diensten aan, zoals relatiegeschenken?",                content:
+                  "Absoluut! Wij helpen u graag met unieke relatiegeschenken op maat voor uw zakelijke partners of evenementen. Meer informatie vindt u op /relatiegeschenken."},
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            columns={[
+              {
+                items: [
+                  {
+                    label: "Over Pyk",                    href: "/over-pyk"
+                  },
+                  {
+                    label: "Ons Team",                    href: "/over-pyk#our-team"
+                  },
+                  {
+                    label: "De Wynkantine",                    href: "/wynkantine"
+                  },
+                ],
+              },
+              {
+                items: [
+                  {
+                    label: "Webshop",                    href: "/shop"
+                  },
+                  {
+                    label: "Wijnen",                    href: "/shop?category=wijn"
+                  },
+                  {
+                    label: "Sterke Dranken",                    href: "/shop?category=sterkedranken"
+                  },
+                  {
+                    label: "Delicatessen",                    href: "/shop?category=delicatessen"
+                  },
+                ],
+              },
+              {
+                items: [
+                  {
+                    label: "Evenementen",                    href: "/events"
+                  },
+                  {
+                    label: "Blog",                    href: "/blog"
+                  },
+                  {
+                    label: "Relatiegeschenken",                    href: "/relatiegeschenken"
+                  },
+                  {
+                    label: "Contact",                    href: "/contact"
+                  },
+                ],
+              },
+              {
+                items: [
+                  {
+                    label: "Instagram",                    href: "https://instagram.com/pykslyterij"
+                  },
+                  {
+                    label: "Facebook",                    href: "https://facebook.com/pykslyterij"
+                  },
+                ],
+              },
+            ]}
+            logoText="Pyk Slyterij"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/events/page.tsx

@@ -26,33 +26,19 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "Home",
-          id: "/",
-        },
+          name: "Home",          id: "/"},
         {
-          name: "Over Pyk",
-          id: "/over-pyk",
-        },
+          name: "Over Pyk",          id: "/over-pyk"},
         {
-          name: "Webshop",
-          id: "/shop",
-        },
+          name: "Webshop",          id: "/shop"},
         {
-          name: "Events",
-          id: "/events",
-        },
+          name: "Events",          id: "/events"},
         {
-          name: "Blog",
-          id: "/blog",
-        },
+          name: "Blog",          id: "/blog"},
         {
-          name: "Relatiegeschenken",
-          id: "/relatiegeschenken",
-        },
+          name: "Relatiegeschenken",          id: "/relatiegeschenken"},
         {
-          name: "Contact",
-          id: "/contact",
-        },
+          name: "Contact",          id: "/contact"},
       ]}
       brandName="Pyk Slyterij"
     />
@@ -67,38 +53,11 @@ export default function LandingPage() {
       description="Bekijk hier alle aankomende proeverijen, masterclasses en speciale evenementen bij Pyk Slyterij Deventer."
       blogs={[
         {
-          id: "event-1",
-          category: "Proeverij",
-          title: "Lente Wijnproeverij",
-          excerpt: "Ontdek de frisse smaken van lentewijnen uit verschillende regio's. Met lichte hapjes.",
-          imageSrc: "http://img.b2bpic.net/free-photo/martini-glasses-make-pyramid-glass-table_8353-552.jpg",
-          imageAlt: "Wijnproeverij",
-          authorName: "Pyk Slyterij",
-          authorAvatar: "asset://avatar-1",
-          date: "20 april 2024",
-        },
+          id: "event-1",          category: "Proeverij",          title: "Lente Wijnproeverij",          excerpt: "Ontdek de frisse smaken van lentewijnen uit verschillende regio's. Met lichte hapjes.",          imageSrc: "https://via.placeholder.com/800x600/CCCCCC/FFFFFF?text=Event+Image+1",          imageAlt: "Wijnproeverij",          authorName: "Pyk Slyterij",          authorAvatar: "asset://avatar-1",          date: "20 april 2024"},
         {
-          id: "event-2",
-          category: "Masterclass",
-          title: "Gin & Tonic Masterclass",
-          excerpt: "Leer de fijne kneepjes van het perfecte Gin & Tonic recept van onze sterke dranken specialist.",
-          imageSrc: "http://img.b2bpic.net/free-photo/preparing-refreshing-cocktail-bar_23-2148176757.jpg",
-          imageAlt: "Gin & Tonic maken",
-          authorName: "Pyk Slyterij",
-          authorAvatar: "asset://avatar-2",
-          date: "10 mei 2024",
-        },
+          id: "event-2",          category: "Masterclass",          title: "Gin & Tonic Masterclass",          excerpt: "Leer de fijne kneepjes van het perfecte Gin & Tonic recept van onze sterke dranken specialist.",          imageSrc: "https://via.placeholder.com/800x600/CCCCCC/FFFFFF?text=Event+Image+2",          imageAlt: "Gin & Tonic maken",          authorName: "Pyk Slyterij",          authorAvatar: "asset://avatar-2",          date: "10 mei 2024"},
         {
-          id: "event-3",
-          category: "Workshop",
-          title: "Delicatessen & Port Workshop",
-          excerpt: "Een unieke workshop over het combineren van fijne delicatessen met bijpassende portwijnen.",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-variety-fine-cheese-with-wine_23-2148430106.jpg",
-          imageAlt: "Port en delicatessen",
-          authorName: "Pyk Slyterij",
-          authorAvatar: "asset://avatar-3",
-          date: "15 juni 2024",
-        },
+          id: "event-3",          category: "Workshop",          title: "Delicatessen & Port Workshop",          excerpt: "Een unieke workshop over het combineren van fijne delicatessen met bijpassende portwijnen.",          imageSrc: "https://via.placeholder.com/800x600/CCCCCC/FFFFFF?text=Event+Image+3",          imageAlt: "Port en delicatessen",          authorName: "Pyk Slyterij",          authorAvatar: "asset://avatar-3",          date: "15 juni 2024"},
       ]}
     />
   </div>
@@ -109,20 +68,11 @@ export default function LandingPage() {
       useInvertedBackground={true}
       faqs={[
         {
-          id: "faq-events-1",
-          title: "Hoe kan ik mij aanmelden voor een evenement?",
-          content: "U kunt zich eenvoudig aanmelden via de evenementenpagina op onze website. Selecteer het gewenste evenement en volg de instructies.",
-        },
+          id: "faq-events-1",          title: "Hoe kan ik mij aanmelden voor een evenement?",          content: "U kunt zich eenvoudig aanmelden via de evenementenpagina op onze website. Selecteer het gewenste evenement en volg de instructies."},
         {
-          id: "faq-events-2",
-          title: "Wat zijn de kosten voor deelname?",
-          content: "De kosten variëren per evenement. Gedetailleerde prijsinformatie vindt u op de specifieke evenementenpagina.",
-        },
+          id: "faq-events-2",          title: "Wat zijn de kosten voor deelname?",          content: "De kosten variëren per evenement. Gedetailleerde prijsinformatie vindt u op de specifieke evenementenpagina."},
         {
-          id: "faq-events-3",
-          title: "Moet ik van tevoren reserveren?",
-          content: "Ja, reserveren is noodzakelijk, aangezien het aantal plaatsen beperkt is om een intieme en kwalitatieve ervaring te garanderen.",
-        },
+          id: "faq-events-3",          title: "Moet ik van tevoren reserveren?",          content: "Ja, reserveren is noodzakelijk, aangezien het aantal plaatsen beperkt is om een intieme en kwalitatieve ervaring te garanderen."},
       ]}
       title="Veelgestelde Vragen over Evenementen"
       description="Heeft u vragen over onze proeverijen, masterclasses of workshops? Hier vindt u de antwoorden."
@@ -136,69 +86,43 @@ export default function LandingPage() {
         {
           items: [
             {
-              label: "Over Pyk",
-              href: "/over-pyk",
-            },
+              label: "Over Pyk",              href: "/over-pyk"},
             {
-              label: "Ons Team",
-              href: "/over-pyk#team",
-            },
+              label: "Ons Team",              href: "/over-pyk#our-team"},
             {
-              label: "De Wynkantine",
-              href: "/wynkantine",
-            },
+              label: "De Wynkantine",              href: "/wynkantine"},
           ],
         },
         {
           items: [
             {
-              label: "Webshop",
-              href: "/shop",
-            },
+              label: "Webshop",              href: "/shop"},
             {
-              label: "Wijnen",
-              href: "/shop?category=wijn",
-            },
+              label: "Wijnen",              href: "/shop?category=wijn"},
             {
-              label: "Sterke Dranken",
-              href: "/shop?category=sterkedranken",
-            },
+              label: "Sterke Dranken",              href: "/shop?category=sterkedranken"},
             {
-              label: "Delicatessen",
-              href: "/shop?category=delicatessen",
-            },
+              label: "Delicatessen",              href: "/shop?category=delicatessen"},
           ],
         },
         {
           items: [
             {
-              label: "Evenementen",
-              href: "/events",
-            },
+              label: "Evenementen",              href: "/events"},
             {
-              label: "Blog",
-              href: "/blog",
-            },
+              label: "Blog",              href: "/blog"},
             {
-              label: "Relatiegeschenken",
-              href: "/relatiegeschenken",
-            },
+              label: "Relatiegeschenken",              href: "/relatiegeschenken"},
             {
-              label: "Contact",
-              href: "/contact",
-            },
+              label: "Contact",              href: "/contact"},
           ],
         },
         {
           items: [
             {
-              label: "Instagram",
-              href: "https://instagram.com/pykslyterij",
-            },
+              label: "Instagram",              href: "https://instagram.com/pykslyterij"},
             {
-              label: "Facebook",
-              href: "https://facebook.com/pykslyterij",
-            },
+              label: "Facebook",              href: "https://facebook.com/pykslyterij"},
           ],
         },
       ]}
@@ -208,4 +132,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/layout.tsx

@@ -4,7 +4,6 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import "@/lib/gsap-setup";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { DM_Sans } from "next/font/google";
 
@@ -55,7 +54,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
         <body className={`${dmSans.variable} antialiased`}>
-          <Tag />
+          
           {children}
           <script
               dangerouslySetInnerHTML={{

src/app/over-pyk/page.tsx

@@ -27,33 +27,19 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "Home",
-          id: "/",
-        },
+          name: "Home",          id: "/"},
         {
-          name: "Over Pyk",
-          id: "/over-pyk",
-        },
+          name: "Over Pyk",          id: "/over-pyk"},
         {
-          name: "Webshop",
-          id: "/shop",
-        },
+          name: "Webshop",          id: "/shop"},
         {
-          name: "Events",
-          id: "/events",
-        },
+          name: "Events",          id: "/events"},
         {
-          name: "Blog",
-          id: "/blog",
-        },
+          name: "Blog",          id: "/blog"},
         {
-          name: "Relatiegeschenken",
-          id: "/relatiegeschenken",
-        },
+          name: "Relatiegeschenken",          id: "/relatiegeschenken"},
         {
-          name: "Contact",
-          id: "/contact",
-        },
+          name: "Contact",          id: "/contact"},
       ]}
       brandName="Pyk Slyterij"
     />
@@ -67,7 +53,7 @@ export default function LandingPage() {
       description="Bij Pyk Slyterij Deventer staat passie voor ambachtelijke dranken en delicatessen centraal. Wij geloven in het vertellen van het verhaal achter elk product en het creëren van een unieke beleving voor onze klanten."
       subdescription="Al jaren zijn wij een begrip in Deventer en ver daarbuiten. Met zorg selecteren we ons assortiment, waarbij kwaliteit, authenticiteit en een eigenzinnig karakter voorop staan. We nodigen u uit om de wereld van Pyk te ontdekken."
       icon={Lightbulb}
-      imageSrc="http://img.b2bpic.net/free-photo/glassblower-examining-glassware-while-colleagues-working_107420-74274.jpg"
+      imageSrc="https://via.placeholder.com/1200x800/CCCCCC/FFFFFF?text=Our+Story+Image"
       imageAlt="Interieur van Pyk Slyterij"
       mediaAnimation="opacity"
     />
@@ -81,33 +67,13 @@ export default function LandingPage() {
       useInvertedBackground={true}
       members={[
         {
-          id: "team-1",
-          name: "Pieter Jansen",
-          role: "Wijnkenner & Eigenaar",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-portrait-handsome-young-man-sitting-bar_23-2148096477.jpg",
-          imageAlt: "Portret Pieter Jansen",
-        },
+          id: "team-1",          name: "Pieter Jansen",          role: "Wijnkenner & Eigenaar",          imageSrc: "https://via.placeholder.com/150/CCCCCC/FFFFFF?text=Pieter+Jansen",          imageAlt: "Portret Pieter Jansen"},
         {
-          id: "team-2",
-          name: "Yasmin Koppers",
-          role: "Sterke Dranken Specialist",
-          imageSrc: "http://img.b2bpic.net/free-photo/copy-space-woman-with-champagne-bottle_23-2148326585.jpg",
-          imageAlt: "Portret Yasmin Koppers",
-        },
+          id: "team-2",          name: "Yasmin Koppers",          role: "Sterke Dranken Specialist",          imageSrc: "https://via.placeholder.com/150/CCCCCC/FFFFFF?text=Yasmin+Koppers",          imageAlt: "Portret Yasmin Koppers"},
         {
-          id: "team-3",
-          name: "Karel van Dijk",
-          role: "Delicatessen Expert",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-beautiful-woman-hairdresser-apron-holding-gold-trophy-spray-bottle-with-trimmer-looking-front-smiling-standing-white-wall_141793-64647.jpg",
-          imageAlt: "Portret Karel van Dijk",
-        },
+          id: "team-3",          name: "Karel van Dijk",          role: "Delicatessen Expert",          imageSrc: "https://via.placeholder.com/150/CCCCCC/FFFFFF?text=Karel+van+Dijk",          imageAlt: "Portret Karel van Dijk"},
         {
-          id: "team-4",
-          name: "Sanne de Boer",
-          role: "Klantenservice & Events",
-          imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3816.jpg",
-          imageAlt: "Portret Sanne de Boer",
-        },
+          id: "team-4",          name: "Sanne de Boer",          role: "Klantenservice & Events",          imageSrc: "https://via.placeholder.com/150/CCCCCC/FFFFFF?text=Sanne+de+Boer",          imageAlt: "Portret Sanne de Boer"},
       ]}
       title="Ons Team van Experts"
       description="Maak kennis met de gezichten achter Pyk Slyterij. Onze deskundige teamleden delen graag hun kennis en passie voor wijnen, dranken en delicatessen."
@@ -120,69 +86,43 @@ export default function LandingPage() {
         {
           items: [
             {
-              label: "Over Pyk",
-              href: "/over-pyk",
-            },
+              label: "Over Pyk",              href: "/over-pyk"},
             {
-              label: "Ons Team",
-              href: "/over-pyk#team",
-            },
+              label: "Ons Team",              href: "/over-pyk#our-team"},
             {
-              label: "De Wynkantine",
-              href: "/wynkantine",
-            },
+              label: "De Wynkantine",              href: "/wynkantine"},
           ],
         },
         {
           items: [
             {
-              label: "Webshop",
-              href: "/shop",
-            },
+              label: "Webshop",              href: "/shop"},
             {
-              label: "Wijnen",
-              href: "/shop?category=wijn",
-            },
+              label: "Wijnen",              href: "/shop?category=wijn"},
             {
-              label: "Sterke Dranken",
-              href: "/shop?category=sterkedranken",
-            },
+              label: "Sterke Dranken",              href: "/shop?category=sterkedranken"},
             {
-              label: "Delicatessen",
-              href: "/shop?category=delicatessen",
-            },
+              label: "Delicatessen",              href: "/shop?category=delicatessen"},
           ],
         },
         {
           items: [
             {
-              label: "Evenementen",
-              href: "/events",
-            },
+              label: "Evenementen",              href: "/events"},
             {
-              label: "Blog",
-              href: "/blog",
-            },
+              label: "Blog",              href: "/blog"},
             {
-              label: "Relatiegeschenken",
-              href: "/relatiegeschenken",
-            },
+              label: "Relatiegeschenken",              href: "/relatiegeschenken"},
             {
-              label: "Contact",
-              href: "/contact",
-            },
+              label: "Contact",              href: "/contact"},
           ],
         },
         {
           items: [
             {
-              label: "Instagram",
-              href: "https://instagram.com/pykslyterij",
-            },
+              label: "Instagram",              href: "https://instagram.com/pykslyterij"},
             {
-              label: "Facebook",
-              href: "https://facebook.com/pykslyterij",
-            },
+              label: "Facebook",              href: "https://facebook.com/pykslyterij"},
           ],
         },
       ]}
@@ -192,4 +132,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -15,315 +15,246 @@ import { Sparkles } from "lucide-react";
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="text-stagger"
-        defaultTextAnimation="background-highlight"
-        borderRadius="soft"
-        contentWidth="smallMedium"
-        sizing="mediumLargeSizeMediumTitles"
-        background="fluid"
-        cardStyle="subtle-shadow"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="solid"
-        headingFontWeight="semibold"
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeMediumTitles"
+      background="fluid"
+      cardStyle="subtle-shadow"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Over Pyk",
-          id: "/over-pyk",
-        },
-        {
-          name: "Webshop",
-          id: "/shop",
-        },
-        {
-          name: "Events",
-          id: "/events",
-        },
-        {
-          name: "Blog",
-          id: "/blog",
-        },
-        {
-          name: "Relatiegeschenken",
-          id: "/relatiegeschenken",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      brandName="Pyk Slyterij"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              {
+                name: "Home",                id: "/"
+              },
+              {
+                name: "Over Pyk",                id: "#usps"
+              },
+              {
+                name: "Webshop",                id: "/shop"
+              },
+              {
+                name: "Winkelwagen",                id: "/cart"
+              },
+              {
+                name: "Events",                id: "/events"
+              },
+              {
+                name: "Blog",                id: "/blog"
+              },
+              {
+                name: "Relatiegeschenken",                id: "/relatiegeschenken"
+              },
+              {
+                name: "Contact",                id: "/contact"
+              }
+            ]}
+            brandName="Pyk Slyterij"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogo
-      logoText="PYK"
-      description="Eigenwijs in Slijterijen. Ontdek onze unieke selectie wijnen, sterke dranken en delicatessen."
-      buttons={[
-        {
-          text: "Bekijk Webshop",
-          href: "/shop",
-        },
-        {
-          text: "Ontdek Pyk",
-          href: "/over-pyk",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/selective-focus-shot-alcoholic-drinks-bar_181624-58203.jpg"
-      imageAlt="Interieur van Pyk Slyterij Deventer"
-      showDimOverlay={true}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroLogo
+            logoText="PYK"
+            description="Eigenwijs in Slijterijen. Ontdek onze unieke selectie wijnen, sterke dranken en delicatessen."
+            buttons={[
+              {
+                text: "Ontdek Producten van Waarde",                href: "/shop"
+              },
+              {
+                text: "Onze Pure Waarden",                href: "#usps"
+              },
+              {
+                text: "Reserveer Tasting Ervaring",                href: "/events"
+              },
+              {
+                text: "Zakelijke Samenwerkingen",                href: "/relatiegeschenken"
+              },
+              {
+                text: "Verrijk Uw Kennis (Blog)",                href: "/blog"
+              }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/selective-focus-shot-alcoholic-drinks-bar_181624-58203.jpg"
+            imageAlt="Interieur van Pyk Slyterij Deventer"
+            showDimOverlay={true}
+          />
+        </div>
 
-  <div id="usps" data-section="usps">
-      <TestimonialAboutCard
-      useInvertedBackground={true}
-      tag="Onze Passie"
-      title="Waarom Pyk?"
-      description="Bij Pyk Slyterij draait alles om een unieke ervaring, deskundig advies en een buitengewone selectie."
-      subdescription="Ontdek de diepte van 'Beleving' met onze proeverijen en sfeervolle winkel. Profiteer van persoonlijk 'Advies' van onze experts die u begeleiden bij elke keuze. En laat u verrassen door onze 'Selectie' van zeldzame wijnen, sterke dranken en heerlijke delicatessen."
-      icon={Sparkles}
-      imageSrc="http://img.b2bpic.net/free-photo/top-view-hands-holding-food_23-2149410425.jpg"
-      imageAlt="Man die een wijnfles kiest in een kelder"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="usps" data-section="usps">
+          <TestimonialAboutCard
+            useInvertedBackground={true}
+            tag="Ons Verhaal"
+            title="Over Pyk Slyterij"
+            description="Pyk Slyterij is het resultaat van de gedeelde passie van Willem, Sjoerd en Brett. Wat begon als een droom om een unieke plek te creëren voor liefhebbers van bijzondere dranken, is uitgegroeid tot een slijterij waar authenticiteit en persoonlijke aandacht centraal staan. Samen brengen zij hun kennis, enthousiasme en liefde voor het vak tot leven."
+            subdescription="Onze filosofie rust op drie onwrikbare pijlers: **Beleving** – laat u meevoeren op een ontdekkingsreis door smaken met onze proeverijen en sfeervolle winkel; **Advies** – onze experts staan klaar om u met persoonlijke begeleiding en diepgaande kennis te helpen bij elke keuze; en **Enthousiasme** – de pure vreugde en toewijding die wij voelen voor elk product dat we aanbieden, en die we graag met u delen."
+            icon={Sparkles}
+            imageSrc="http://img.b2bpic.net/free-photo/top-view-hands-holding-food_23-2149410425.jpg"
+            imageAlt="Man die een wijnfles kiest in een kelder"
+            mediaAnimation="blur-reveal"
+          />
+        </div>
 
-  <div id="recommended-products" data-section="recommended-products">
-      <ProductCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "prod-1",
-          name: "Exclusieve Rode Wijn",
-          price: "€34,95",
-          imageSrc: "http://img.b2bpic.net/free-photo/carafe-glass-wine-white-table_52683-96526.jpg",
-          imageAlt: "Fles rode wijn",
-          rating: 5,
-        },
-        {
-          id: "prod-2",
-          name: "Frisse Witte Wijn",
-          price: "€19,50",
-          imageSrc: "http://img.b2bpic.net/free-photo/message-bottle-beach_1204-107.jpg",
-          imageAlt: "Fles witte wijn",
-          rating: 4,
-        },
-        {
-          id: "prod-3",
-          name: "Ambachtelijke Gin",
-          price: "€49,00",
-          imageSrc: "http://img.b2bpic.net/free-photo/wine-bottle-with-goblet-hookah-tubes-ashtray_176474-6111.jpg",
-          imageAlt: "Fles gin",
-          rating: 5,
-        },
-        {
-          id: "prod-4",
-          name: "Premium Single Malt Whisky",
-          price: "€75,00",
-          imageSrc: "http://img.b2bpic.net/free-photo/scotch-whiskey-glass-wooden-table_123827-22162.jpg",
-          imageAlt: "Glas whisky met fles",
-          rating: 5,
-        },
-        {
-          id: "prod-5",
-          name: "Gourmet Kaasplank",
-          price: "€28,75",
-          imageSrc: "http://img.b2bpic.net/free-photo/delicious-gourmet-snacks-board_23-2148325932.jpg",
-          imageAlt: "Kaasplank met delicatessen",
-          rating: 4,
-        },
-        {
-          id: "prod-6",
-          name: "Feestelijke Mousserende Wijn",
-          price: "€22,95",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-champagne-dark-table_140725-99998.jpg",
-          imageAlt: "Fles mousserende wijn",
-          rating: 4,
-        },
-      ]}
-      title="Aanbevolen Producten"
-      description="Een zorgvuldige selectie van onze favoriete wijnen, sterke dranken en delicatessen. Perfect om te proeven of cadeau te geven."
-    />
-  </div>
+        <div id="recommended-products" data-section="recommended-products">
+          <ProductCardThree
+            animationType="blur-reveal"
+            textboxLayout="default"
+            gridVariant="four-items-2x2-equal-grid"
+            useInvertedBackground={false}
+            products={[
+              {
+                id: "prod-1",                name: "Exclusieve Rode Wijn",                price: "€34,95",                imageSrc: "http://img.b2bpic.net/free-photo/carafe-glass-wine-white-table_52683-96526.jpg?_wi=1",                imageAlt: "Fles rode wijn",                rating: 5
+              },
+              {
+                id: "prod-2",                name: "Frisse Witte Wijn",                price: "€19,50",                imageSrc: "http://img.b2bpic.net/free-photo/message-bottle-beach_1204-107.jpg?_wi=1",                imageAlt: "Fles witte wijn",                rating: 4
+              },
+              {
+                id: "prod-3",                name: "Ambachtelijke Gin",                price: "€49,00",                imageSrc: "http://img.b2bpic.net/free-photo/wine-bottle-with-goblet-hookah-tubes-ashtray_176474-6111.jpg?_wi=1",                imageAlt: "Fles gin",                rating: 5
+              },
+              {
+                id: "prod-4",                name: "Premium Single Malt Whisky",                price: "€75,00",                imageSrc: "http://img.b2bpic.net/free-photo/scotch-whiskey-glass-wooden-table_123827-22162.jpg?_wi=1",                imageAlt: "Glas whisky met fles",                rating: 5
+              },
+              {
+                id: "prod-5",                name: "Gourmet Kaasplank",                price: "€28,75",                imageSrc: "http://img.b2bpic.net/free-photo/delicious-gourmet-snacks-board_23-2148325932.jpg?_wi=1",                imageAlt: "Kaasplank met delicatessen",                rating: 4
+              },
+              {
+                id: "prod-6",                name: "Feestelijke Mousserende Wijn",                price: "€22,95",                imageSrc: "http://img.b2bpic.net/free-photo/top-view-champagne-dark-table_140725-99998.jpg?_wi=1",                imageAlt: "Fles mousserende wijn",                rating: 4
+              }
+            ]}
+            title="Aanbevolen Producten"
+            description="Een zorgvuldige selectie van onze favoriete wijnen, sterke dranken en delicatessen. Perfect om te proeven of cadeau te geven."
+          />
+        </div>
 
-  <div id="blog-preview" data-section="blog-preview">
-      <BlogCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      title="Laatste Nieuws & Blogs"
-      description="Blijf op de hoogte van de nieuwste trends, diepgaande artikelen en verhalen uit de wereld van Pyk."
-      blogs={[
-        {
-          id: "blog-1",
-          category: "Wijn",
-          title: "De Perfecte Wijn voor het Seizoen",
-          excerpt: "Ontdek welke wijnen het beste passen bij de smaken en stemmingen van elk seizoen.",
-          imageSrc: "http://img.b2bpic.net/free-photo/person-collecting-grapes-from-vineyard_1268-15030.jpg",
-          imageAlt: "Wijngaard tijdens de oogst",
-          authorName: "Pyk Slyterij",
-          authorAvatar: "asset://avatar-1",
-          date: "15 maart 2024",
-        },
-        {
-          id: "blog-2",
-          category: "Sterke Drank",
-          title: "Cocktails maken als een Pro: Tips & Tricks",
-          excerpt: "Verbaas uw gasten met deze eenvoudige maar indrukwekkende cocktailrecepten.",
-          imageSrc: "http://img.b2bpic.net/free-photo/tasty-daiquiri-cocktail-with-orange-high-angle_23-2149418284.jpg",
-          imageAlt: "Vers gemaakte cocktail",
-          authorName: "Pyk Slyterij",
-          authorAvatar: "asset://avatar-2",
-          date: "8 maart 2024",
-        },
-        {
-          id: "blog-3",
-          category: "Delicatessen",
-          title: "De Kunst van Spijs-Wijn Combinatie",
-          excerpt: "Leer hoe u de ideale wijn combineert met verschillende delicatessen voor een culinaire ervaring.",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-cheese-platter-with-grapes-nuts-honey-tray_176474-3034.jpg",
-          imageAlt: "Kaas en wijn pairing",
-          authorName: "Pyk Slyterij",
-          authorAvatar: "asset://avatar-3",
-          date: "1 maart 2024",
-        },
-      ]}
-    />
-  </div>
+        <div id="blog-preview" data-section="blog-preview">
+          <BlogCardTwo
+            animationType="blur-reveal"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            title="Laatste Nieuws & Blogs"
+            description="Blijf op de hoogte van de nieuwste trends, diepgaande artikelen en verhalen uit de wereld van Pyk."
+            blogs={[
+              {
+                id: "blog-1",                category: "PAIRING INSPO",                title: "De Perfecte Wijn voor het Seizoen",                excerpt: "Ontdek welke wijnen het beste passen bij de smaken en stemmingen van elk seizoen.",                imageSrc: "http://img.b2bpic.net/free-photo/person-collecting-grapes-from-vineyard_1268-15030.jpg",                imageAlt: "Wijngaard tijdens de oogst",                authorName: "Pyk Slyterij",                authorAvatar: "asset://avatar-1",                date: "15 maart 2024"
+              },
+              {
+                id: "blog-2",                category: "EIGENWIJSHEID",                title: "Cocktails maken als een Pro: Tips & Tricks",                excerpt: "Verbaas uw gasten met deze eenvoudige maar indrukwekkende cocktailrecepten.",                imageSrc: "http://img.b2bpic.net/free-photo/tasty-daiquiri-cocktail-with-orange-high-angle_23-2149418284.jpg",                imageAlt: "Vers gemaakte cocktail",                authorName: "Pyk Slyterij",                authorAvatar: "asset://avatar-2",                date: "8 maart 2024"
+              },
+              {
+                id: "blog-3",                category: "DE WYNKANTINE MOMENTS",                title: "De Kunst van Spijs-Wijn Combinatie",                excerpt: "Leer hoe u de ideale wijn combineert met verschillende delicatessen voor een culinaire ervaring.",                imageSrc: "http://img.b2bpic.net/free-photo/side-view-cheese-platter-with-grapes-nuts-honey-tray_176474-3034.jpg",                imageAlt: "Kaas en wijn pairing",                authorName: "Pyk Slyterij",                authorAvatar: "asset://avatar-3",                date: "1 maart 2024"
+              }
+            ]}
+          />
+        </div>
 
-  <div id="events-preview" data-section="events-preview">
-      <FeatureCardSixteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      negativeCard={{
-        items: [
-          "Exclusieve Wijnproeverijen",
-          "Masterclasses Sterke Dranken",
-          "Delicatessen Workshops",
-        ],
-      }}
-      positiveCard={{
-        items: [
-          "Leer van de Experts",
-          "Ontdek Nieuwe Smaken",
-          "Ontmoet gelijkgestemden",
-        ],
-      }}
-      title="Ervaar Meer bij Pyk"
-      description="Duik dieper in de wereld van wijnen en dranken met onze exclusieve proeverijen en evenementen. Een unieke kans om te leren en te genieten."
-      tag="Komende Evenementen"
-      buttons={[
-        {
-          text: "Bekijk Evenementenkalender",
-          href: "/events",
-        },
-      ]}
-    />
-  </div>
+        <div id="events-preview" data-section="events-preview">
+          <FeatureCardSixteen
+            animationType="blur-reveal"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            negativeCard={{
+              items: [
+                "Exclusieve Wijnproeverijen",                "Masterclasses Sterke Dranken",                "Delicatessen Workshops"
+              ]
+            }}
+            positiveCard={{
+              items: [
+                "Leer van de Experts",                "Ontdek Nieuwe Smaken",                "Ontmoet gelijkgestemden"
+              ]
+            }}
+            title="Ervaar Meer bij Pyk"
+            description="Duik dieper in de wereld van wijnen en dranken met onze exclusieve proeverijen en evenementen. Een unieke kans om te leren en te genieten."
+            tag="Komende Evenementen"
+            buttons={[
+              {
+                text: "Bekijk Evenementenkalender",                href: "/events"
+              }
+            ]}
+          />
+        </div>
 
-  <div id="newsletter" data-section="newsletter">
-      <ContactCenter
-      useInvertedBackground={true}
-      background={{
-        variant: "radial-gradient",
-      }}
-      tag="Blijf Geïnformeerd"
-      title="Meld u aan voor onze Nieuwsbrief"
-      description="Ontvang exclusieve aanbiedingen, uitnodigingen voor proeverijen en het laatste nieuws direct in uw inbox."
-      inputPlaceholder="Voer uw e-mailadres in"
-      buttonText="Aanmelden"
-      termsText="Door aan te melden, gaat u akkoord met ons privacybeleid."
-    />
-  </div>
+        <div id="newsletter" data-section="newsletter">
+          <ContactCenter
+            useInvertedBackground={true}
+            background={{
+              variant: "radial-gradient"
+            }}
+            tag="Blijf Geïnformeerd"
+            title="Meld u aan voor onze Nieuwsbrief"
+            description="Ontvang exclusieve aanbiedingen, uitnodigingen voor proeverijen en het laatste nieuws direct in uw inbox."
+            inputPlaceholder="Voer uw e-mailadres in"
+            buttonText="Aanmelden"
+            termsText="Door aan te melden, gaat u akkoord met ons privacybeleid."
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Over Pyk",
-              href: "/over-pyk",
-            },
-            {
-              label: "Ons Team",
-              href: "/over-pyk#team",
-            },
-            {
-              label: "De Wynkantine",
-              href: "/wynkantine",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Webshop",
-              href: "/shop",
-            },
-            {
-              label: "Wijnen",
-              href: "/shop?category=wijn",
-            },
-            {
-              label: "Sterke Dranken",
-              href: "/shop?category=sterkedranken",
-            },
-            {
-              label: "Delicatessen",
-              href: "/shop?category=delicatessen",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Evenementen",
-              href: "/events",
-            },
-            {
-              label: "Blog",
-              href: "/blog",
-            },
-            {
-              label: "Relatiegeschenken",
-              href: "/relatiegeschenken",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Instagram",
-              href: "https://instagram.com/pykslyterij",
-            },
-            {
-              label: "Facebook",
-              href: "https://facebook.com/pykslyterij",
-            },
-          ],
-        },
-      ]}
-      logoText="Pyk Slyterij"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            columns={[
+              {
+                items: [
+                  {
+                    label: "Over Pyk",                    href: "#usps"
+                  },
+                  {
+                    label: "Ons Team",                    href: "#usps"
+                  },
+                  {
+                    label: "De Wynkantine",                    href: "/wynkantine"
+                  }
+                ]
+              },
+              {
+                items: [
+                  {
+                    label: "Webshop",                    href: "/shop"
+                  },
+                  {
+                    label: "Wijnen",                    href: "/shop?category=wijn"
+                  },
+                  {
+                    label: "Sterke Dranken",                    href: "/shop?category=sterkedranken"
+                  },
+                  {
+                    label: "Delicatessen",                    href: "/shop?category=delicatessen"
+                  }
+                ]
+              },
+              {
+                items: [
+                  {
+                    label: "Evenementen",                    href: "/events"
+                  },
+                  {
+                    label: "Blog",                    href: "/blog"
+                  },
+                  {
+                    label: "Relatiegeschenken",                    href: "/relatiegeschenken"
+                  },
+                  {
+                    label: "Contact",                    href: "/contact"
+                  }
+                ]
+              },
+              {
+                items: [
+                  {
+                    label: "Instagram",                    href: "https://instagram.com/pykslyterij"
+                  },
+                  {
+                    label: "Facebook",                    href: "https://facebook.com/pykslyterij"
+                  }
+                ]
+              }
+            ]}
+            logoText="Pyk Slyterij"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/shop/page.tsx

@@ -2,242 +2,164 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
 
-export default function LandingPage() {
+export default function ShopPage() {
+  const products = [
+    {
+      id: "prod-1",      name: "Exclusieve Rode Wijn",      price: "€34,95",      imageSrc: "http://img.b2bpic.net/free-photo/carafe-glass-wine-white-table_52683-96526.jpg?_wi=2",      imageAlt: "Fles rode wijn",      onProductClick: () => (window.location.href = "/shop/prod-1"),
+    },
+    {
+      id: "prod-2",      name: "Frisse Witte Wijn",      price: "€19,50",      imageSrc: "http://img.b2bpic.net/free-photo/message-bottle-beach_1204-107.jpg?_wi=2",      imageAlt: "Fles witte wijn",      onProductClick: () => (window.location.href = "/shop/prod-2"),
+    },
+    {
+      id: "prod-3",      name: "Ambachtelijke Gin",      price: "€49,00",      imageSrc: "http://img.b2bpic.net/free-photo/wine-bottle-with-goblet-hookah-tubes-ashtray_176474-6111.jpg?_wi=2",      imageAlt: "Fles gin",      onProductClick: () => (window.location.href = "/shop/prod-3"),
+    },
+    {
+      id: "prod-4",      name: "Premium Single Malt Whisky",      price: "€75,00",      imageSrc: "http://img.b2bpic.net/free-photo/scotch-whiskey-glass-wooden-table_123827-22162.jpg?_wi=2",      imageAlt: "Glas whisky met fles",      onProductClick: () => (window.location.href = "/shop/prod-4"),
+    },
+    {
+      id: "prod-5",      name: "Gourmet Kaasplank",      price: "€28,75",      imageSrc: "http://img.b2bpic.net/free-photo/delicious-gourmet-snacks-board_23-2148325932.jpg?_wi=2",      imageAlt: "Kaasplank met delicatessen",      onProductClick: () => (window.location.href = "/shop/prod-5"),
+    },
+    {
+      id: "prod-6",      name: "Feestelijke Mousserende Wijn",      price: "€22,95",      imageSrc: "http://img.b2bpic.net/free-photo/top-view-champagne-dark-table_140725-99998.jpg?_wi=2",      imageAlt: "Fles mousserende wijn",      onProductClick: () => (window.location.href = "/shop/prod-6"),
+    },
+    {
+      id: "prod-7",      name: "Italiaanse Olijfolie",      price: "€12,99",      imageSrc: "http://img.b2bpic.net/free-photo/olive-oil-with-black-olives-glass-bowl_140725-10368.jpg",      imageAlt: "Fles olijfolie",      onProductClick: () => (window.location.href = "/shop/prod-7"),
+    },
+    {
+      id: "prod-8",      name: "Luxueuze Chocolade Truffels",      price: "€15,00",      imageSrc: "http://img.b2bpic.net/free-photo/assortment-chocolate-truffles_23-2147779268.jpg",      imageAlt: "Chocolade truffels",      onProductClick: () => (window.location.href = "/shop/prod-8"),
+    },
+    {
+      id: "prod-9",      name: "Biologisch Bier Pakket",      price: "€25,00",      imageSrc: "http://img.b2bpic.net/free-photo/assortment-beer-bottles_23-2147910100.jpg",      imageAlt: "Bierpakket",      onProductClick: () => (window.location.href = "/shop/prod-9"),
+    },
+    {
+      id: "prod-10",      name: "Vintage Port",      price: "€89,00",      imageSrc: "http://img.b2bpic.net/free-photo/vintage-port-wine-bottle_140725-72439.jpg",      imageAlt: "Vintage Port fles",      onProductClick: () => (window.location.href = "/shop/prod-10"),
+    },
+  ];
+
   return (
     <ThemeProvider
-        defaultButtonVariant="text-stagger"
-        defaultTextAnimation="background-highlight"
-        borderRadius="soft"
-        contentWidth="smallMedium"
-        sizing="mediumLargeSizeMediumTitles"
-        background="fluid"
-        cardStyle="subtle-shadow"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="solid"
-        headingFontWeight="semibold"
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeMediumTitles"
+      background="fluid"
+      cardStyle="subtle-shadow"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Over Pyk",
-          id: "/over-pyk",
-        },
-        {
-          name: "Webshop",
-          id: "/shop",
-        },
-        {
-          name: "Events",
-          id: "/events",
-        },
-        {
-          name: "Blog",
-          id: "/blog",
-        },
-        {
-          name: "Relatiegeschenken",
-          id: "/relatiegeschenken",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      brandName="Pyk Slyterij"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              {
+                name: "Home",                id: "/"
+              },
+              {
+                name: "Over Pyk",                id: "/over-pyk"
+              },
+              {
+                name: "Webshop",                id: "/shop"
+              },
+              {
+                name: "Winkelwagen",                id: "/cart"
+              },
+              {
+                name: "Events",                id: "/events"
+              },
+              {
+                name: "Blog",                id: "/blog"
+              },
+              {
+                name: "Relatiegeschenken",                id: "/relatiegeschenken"
+              },
+              {
+                name: "Contact",                id: "/contact"
+              },
+            ]}
+            brandName="Pyk Slyterij"
+          />
+        </div>
 
-  <div id="shop-catalog" data-section="shop-catalog">
-      <ProductCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "shop-prod-1",
-          name: "Château Margaux Grand Cru",
-          price: "€250,00",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-empty-wine-glasses-with-bottle-wine-dark-background_140725-131823.jpg",
-          imageAlt: "Château Margaux fles",
-          rating: 5,
-        },
-        {
-          id: "shop-prod-2",
-          name: "Sauvignon Blanc Nieuw-Zeeland",
-          price: "€18,95",
-          imageSrc: "http://img.b2bpic.net/free-photo/elegant-champagne-glasses-with-champagne-bottle-wooden-table_23-2148253165.jpg",
-          imageAlt: "Sauvignon Blanc fles",
-          rating: 4,
-        },
-        {
-          id: "shop-prod-3",
-          name: "Local Deventer Gin",
-          price: "€45,00",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-iced-cocktail-fresh-icing-inside-long-glass-dark-dark-surface-with-drink-juice-cocktail-bar_140725-26176.jpg",
-          imageAlt: "Deventer Gin fles",
-          rating: 5,
-        },
-        {
-          id: "shop-prod-4",
-          name: "Schotse Single Malt 12jr",
-          price: "€68,50",
-          imageSrc: "http://img.b2bpic.net/free-photo/old-fashioned-cocktail-garnished-with-orange-isolated-grey-background_123827-35473.jpg",
-          imageAlt: "Schotse whisky fles",
-          rating: 5,
-        },
-        {
-          id: "shop-prod-5",
-          name: "Italiaanse Truffel Salami",
-          price: "€12,95",
-          imageSrc: "http://img.b2bpic.net/free-photo/sausage-slices-with-cheese-cubes-olives-crackers-wooden-board-with-dry-fish_114579-8804.jpg",
-          imageAlt: "Truffel salami",
-          rating: 4,
-        },
-        {
-          id: "shop-prod-6",
-          name: "Prosecco Rosé Spumante",
-          price: "€24,95",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-half-view-champagne-alc_140725-99776.jpg",
-          imageAlt: "Prosecco Rosé fles",
-          rating: 4,
-        },
-        {
-          id: "shop-prod-7",
-          name: "Portugese Port Tawny",
-          price: "€32,00",
-          imageSrc: "http://img.b2bpic.net/free-photo/red-grapes-vineyard-cinematic-style_23-2151599779.jpg",
-          imageAlt: "Portfles",
-          rating: 5,
-        },
-        {
-          id: "shop-prod-8",
-          name: "Mexicaanse Tequila Blanco",
-          price: "€38,00",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-bartender-cocktail-shaker_23-2149132158.jpg",
-          imageAlt: "Tequila fles",
-          rating: 4,
-        },
-      ]}
-      title="Onze Webshop"
-      description="Ontdek ons complete assortiment wijnen, sterke dranken en delicatessen. Gebruik de filters om uw perfecte keuze te vinden."
-    />
-  </div>
+        <div id="product-catalog" data-section="product-catalog">
+          <ProductCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="four-items-2x2-equal-grid"
+            useInvertedBackground={false}
+            products={products}
+            title="Onze Webshop"
+            description="Ontdek ons uitgebreide assortiment van wijnen, sterke dranken en delicatessen."
+          />
+        </div>
 
-  <div id="shop-metrics" data-section="shop-metrics">
-      <MetricCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "metric-1",
-          value: "250+",
-          description: "Unieke Wijnen in assortiment",
-        },
-        {
-          id: "metric-2",
-          value: "100+",
-          description: "Soorten Sterke Dranken",
-        },
-        {
-          id: "metric-3",
-          value: "9.2",
-          description: "Gemiddelde Klantbeoordeling",
-        },
-      ]}
-      title="Webshop in Cijfers"
-      description="Onze toewijding aan kwaliteit en service, samengevat in indrukwekkende cijfers."
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Over Pyk",
-              href: "/over-pyk",
-            },
-            {
-              label: "Ons Team",
-              href: "/over-pyk#team",
-            },
-            {
-              label: "De Wynkantine",
-              href: "/wynkantine",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Webshop",
-              href: "/shop",
-            },
-            {
-              label: "Wijnen",
-              href: "/shop?category=wijn",
-            },
-            {
-              label: "Sterke Dranken",
-              href: "/shop?category=sterkedranken",
-            },
-            {
-              label: "Delicatessen",
-              href: "/shop?category=delicatessen",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Evenementen",
-              href: "/events",
-            },
-            {
-              label: "Blog",
-              href: "/blog",
-            },
-            {
-              label: "Relatiegeschenken",
-              href: "/relatiegeschenken",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Instagram",
-              href: "https://instagram.com/pykslyterij",
-            },
-            {
-              label: "Facebook",
-              href: "https://facebook.com/pykslyterij",
-            },
-          ],
-        },
-      ]}
-      logoText="Pyk Slyterij"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            columns={[
+              {
+                items: [
+                  {
+                    label: "Over Pyk",                    href: "/over-pyk"
+                  },
+                  {
+                    label: "Ons Team",                    href: "/over-pyk#team"
+                  },
+                  {
+                    label: "De Wynkantine",                    href: "/wynkantine"
+                  },
+                ],
+              },
+              {
+                items: [
+                  {
+                    label: "Webshop",                    href: "/shop"
+                  },
+                  {
+                    label: "Wijnen",                    href: "/shop?category=wijn"
+                  },
+                  {
+                    label: "Sterke Dranken",                    href: "/shop?category=sterkedranken"
+                  },
+                  {
+                    label: "Delicatessen",                    href: "/shop?category=delicatessen"
+                  },
+                ],
+              },
+              {
+                items: [
+                  {
+                    label: "Evenementen",                    href: "/events"
+                  },
+                  {
+                    label: "Blog",                    href: "/blog"
+                  },
+                  {
+                    label: "Relatiegeschenken",                    href: "/relatiegeschenken"
+                  },
+                  {
+                    label: "Contact",                    href: "/contact"
+                  },
+                ],
+              },
+              {
+                items: [
+                  {
+                    label: "Instagram",                    href: "https://instagram.com/pykslyterij"
+                  },
+                  {
+                    label: "Facebook",                    href: "https://facebook.com/pykslyterij"
+                  },
+                ],
+              },
+            ]}
+            logoText="Pyk Slyterij"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-dm-sans), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-dm-sans), sans-serif;
+  font-family: var(--font-playfair-display), serif;
 }

src/app/styles/variables.css

@@ -12,13 +12,13 @@
 
   --background: #f5f3f0;
   --card: #ffffff;
-  --foreground: #262626;
+  --foreground: #2a2a2a;
   --primary-cta: #b8860b;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #262626;
+  --secondary-cta: #6b4423;
   --secondary-cta-text: #f5f3f0;
   --accent: #e0ac10;
-  --background-accent: #e8e8e8;
+  --background-accent: #a8b5a0;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);