bender/b2af384d-86f6-412b-be8f-5a75e268c105
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update src/app/shop/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-28 10:10:32 +00:00
parent d8696d5648
commit 7e801178a9
1 changed files with 126 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

348
src/app/shop/page.tsx
View File

@@ -2,14 +2,48 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react"; 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 NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import ProductCardThree from '@/components/sections/product/ProductCardThree'; 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 ( return (
<ThemeProvider <AgeVerificationModal>
<ThemeProvider
defaultButtonVariant="text-stagger" defaultButtonVariant="text-stagger"
defaultTextAnimation="background-highlight" defaultTextAnimation="background-highlight"
borderRadius="soft" borderRadius="soft"
@@ -20,225 +54,95 @@ export default function LandingPage() {
primaryButtonStyle="shadow" primaryButtonStyle="shadow"
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
headingFontWeight="semibold" headingFontWeight="semibold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleApple <NavbarStyleApple
navItems={[ navItems={[
{ {
name: "Home", name: "Home", id: "/"},
id: "/", {
}, name: "Over Pyk", id: "/over-pyk"},
{ {
name: "Over Pyk", name: "Webshop", id: "/shop"},
id: "/over-pyk", {
}, name: "Winkelwagen", id: "/cart"},
{ {
name: "Webshop", name: "Events", id: "/events"},
id: "/shop", {
}, name: "Blog", id: "/blog"},
{ {
name: "Events", name: "Relatiegeschenken", id: "/relatiegeschenken"},
id: "/events", {
}, name: "Contact", id: "/contact"},
{ ]}
name: "Blog", brandName="Pyk Slyterij"
id: "/blog", />
}, </div>
{
name: "Relatiegeschenken",
id: "/relatiegeschenken",
},
{
name: "Contact",
id: "/contact",
},
]}
brandName="Pyk Slyterij"
/>
</div>
<div id="shop-catalog" data-section="shop-catalog"> <div id="product-catalog" data-section="product-catalog">
<ProductCardThree <ProductCardThree
animationType="slide-up" animationType="slide-up"
textboxLayout="default" textboxLayout="default"
gridVariant="uniform-all-items-equal" gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false} useInvertedBackground={false}
products={[ products={products}
{ title="Onze Webshop"
id: "shop-prod-1", description="Ontdek ons uitgebreide assortiment van wijnen, sterke dranken en delicatessen."
name: "Château Margaux Grand Cru", />
price: "€250,00", </div>
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="shop-metrics" data-section="shop-metrics"> <div id="footer" data-section="footer">
<MetricCardTwo <FooterLogoEmphasis
animationType="slide-up" columns={[
textboxLayout="default" {
gridVariant="uniform-all-items-equal" items: [
useInvertedBackground={true} {
metrics={[ label: "Over Pyk", href: "/over-pyk"},
{ {
id: "metric-1", label: "Ons Team", href: "/over-pyk#team"},
value: "250+", {
description: "Unieke Wijnen in assortiment", label: "De Wynkantine", href: "/wynkantine"},
}, ],
{ },
id: "metric-2", {
value: "100+", items: [
description: "Soorten Sterke Dranken", {
}, label: "Webshop", href: "/shop"},
{ {
id: "metric-3", label: "Wijnen", href: "/shop?category=wijn"},
value: "9.2", {
description: "Gemiddelde Klantbeoordeling", label: "Sterke Dranken", href: "/shop?category=sterkedranken"},
}, {
]} label: "Delicatessen", href: "/shop?category=delicatessen"},
title="Webshop in Cijfers" ],
description="Onze toewijding aan kwaliteit en service, samengevat in indrukwekkende cijfers." },
/> {
</div> items: [
{
<div id="footer" data-section="footer"> label: "Evenementen", href: "/events"},
<FooterLogoEmphasis {
columns={[ label: "Blog", href: "/blog"},
{ {
items: [ label: "Relatiegeschenken", href: "/relatiegeschenken"},
{ {
label: "Over Pyk", label: "Contact", href: "/contact"},
href: "/over-pyk", ],
}, },
{ {
label: "Ons Team", items: [
href: "/over-pyk#team", {
}, label: "Instagram", href: "https://instagram.com/pykslyterij"},
{ {
label: "De Wynkantine", label: "Facebook", href: "https://facebook.com/pykslyterij"},
href: "/wynkantine", ],
}, },
], ]}
}, logoText="Pyk Slyterij"
{ />
items: [ </div>
{ </ReactLenis>
label: "Webshop", </ThemeProvider>
href: "/shop", </AgeVerificationModal>
},
{
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>
); );
} }