From 7e801178a937fbc37eaa6cecc572d58b581dfddc Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 28 May 2026 10:10:32 +0000
Subject: [PATCH] Update src/app/shop/page.tsx

---
 src/app/shop/page.tsx | 348 +++++++++++++++---------------------------
 1 file changed, 126 insertions(+), 222 deletions(-)

diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index ee023d0..78bd114 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -2,14 +2,48 @@
 
 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';
+import AgeVerificationModal from "@/app/components/AgeVerificationModal";
+
+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",      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",      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",      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",      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",      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",      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"
+    }
+  ];
 
-export default function LandingPage() {
   return (
-    <ThemeProvider
+    <AgeVerificationModal>
+      <ThemeProvider
         defaultButtonVariant="text-stagger"
         defaultTextAnimation="background-highlight"
         borderRadius="soft"
@@ -20,225 +54,95 @@ export default function LandingPage() {
         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>
+      >
+        <ReactLenis root>
+          <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>
-      </ReactLenis>
-    </ThemeProvider>
+          <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>
+    </AgeVerificationModal>
   );
 }