Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 0359b550c4 | |||
| fd734d0b91 | |||
| f4e821229f | |||
| 6439c77151 | |||
| 4491b65b92 | |||
| c83fa4f29a | |||
| 04bfd09f27 | |||
| 0b1a8c1bf5 | |||
| 5ee0a0bdb8 | |||
| 2dfb0a44e9 | |||
| a2b4475d54 | |||
| ff2e3f7005 |
439
src/app/page.tsx
439
src/app/page.tsx
@@ -11,218 +11,251 @@ import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleAp
|
|||||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||||
import { Sparkles } from "lucide-react";
|
import { Sparkles } from "lucide-react";
|
||||||
import AgeVerificationModal from "@/app/components/AgeVerificationModal";
|
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
<AgeVerificationModal>
|
<ThemeProvider
|
||||||
<ThemeProvider
|
defaultButtonVariant="text-stagger"
|
||||||
defaultButtonVariant="text-stagger"
|
defaultTextAnimation="background-highlight"
|
||||||
defaultTextAnimation="background-highlight"
|
borderRadius="soft"
|
||||||
borderRadius="soft"
|
contentWidth="smallMedium"
|
||||||
contentWidth="smallMedium"
|
sizing="mediumLargeSizeMediumTitles"
|
||||||
sizing="mediumLargeSizeMediumTitles"
|
background="fluid"
|
||||||
background="fluid"
|
cardStyle="subtle-shadow"
|
||||||
cardStyle="subtle-shadow"
|
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", id: "/"
|
||||||
name: "Home", id: "/"},
|
},
|
||||||
{
|
{
|
||||||
name: "Over Pyk", id: "#usps"},
|
name: "Over Pyk", id: "#usps"
|
||||||
{
|
},
|
||||||
name: "Webshop", id: "/shop"},
|
{
|
||||||
{
|
name: "Webshop", id: "/shop"
|
||||||
name: "Winkelwagen", id: "/cart"},
|
},
|
||||||
{
|
{
|
||||||
name: "Events", id: "/events"},
|
name: "Winkelwagen", id: "/cart"
|
||||||
{
|
},
|
||||||
name: "Blog", id: "/blog"},
|
{
|
||||||
{
|
name: "Events", id: "/events"
|
||||||
name: "Relatiegeschenken", id: "/relatiegeschenken"},
|
},
|
||||||
{
|
{
|
||||||
name: "Contact", id: "/contact"},
|
name: "Blog", id: "/blog"
|
||||||
]}
|
},
|
||||||
brandName="Pyk Slyterij"
|
{
|
||||||
/>
|
name: "Relatiegeschenken", id: "/relatiegeschenken"
|
||||||
</div>
|
},
|
||||||
|
{
|
||||||
|
name: "Contact", id: "/contact"
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
brandName="Pyk Slyterij"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroLogo
|
<HeroLogo
|
||||||
logoText="PYK"
|
logoText="PYK"
|
||||||
description="Eigenwijs in Slijterijen. Ontdek onze unieke selectie wijnen, sterke dranken en delicatessen."
|
description="Eigenwijs in Slijterijen. Ontdek onze unieke selectie wijnen, sterke dranken en delicatessen."
|
||||||
buttons={[
|
buttons={[
|
||||||
{
|
{
|
||||||
text: "Bekijk Webshop", href: "/shop"},
|
text: "Ontdek Producten van Waarde", href: "/shop"
|
||||||
{
|
},
|
||||||
text: "Ontdek Pyk", href: "#usps"},
|
{
|
||||||
]}
|
text: "Onze Pure Waarden", href: "#usps"
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/selective-focus-shot-alcoholic-drinks-bar_181624-58203.jpg"
|
},
|
||||||
imageAlt="Interieur van Pyk Slyterij Deventer"
|
{
|
||||||
showDimOverlay={true}
|
text: "Reserveer Tasting Ervaring", href: "/events"
|
||||||
/>
|
},
|
||||||
</div>
|
{
|
||||||
|
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">
|
<div id="usps" data-section="usps">
|
||||||
<TestimonialAboutCard
|
<TestimonialAboutCard
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
tag="Ons Verhaal"
|
tag="Ons Verhaal"
|
||||||
title="Over Pyk Slyterij"
|
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."
|
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."
|
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}
|
icon={Sparkles}
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-hands-holding-food_23-2149410425.jpg"
|
imageSrc="http://img.b2bpic.net/free-photo/top-view-hands-holding-food_23-2149410425.jpg"
|
||||||
imageAlt="Man die een wijnfles kiest in een kelder"
|
imageAlt="Man die een wijnfles kiest in een kelder"
|
||||||
mediaAnimation="slide-up"
|
mediaAnimation="blur-reveal"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="recommended-products" data-section="recommended-products">
|
<div id="recommended-products" data-section="recommended-products">
|
||||||
<ProductCardThree
|
<ProductCardThree
|
||||||
animationType="slide-up"
|
animationType="blur-reveal"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
gridVariant="four-items-2x2-equal-grid"
|
gridVariant="four-items-2x2-equal-grid"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
products={[
|
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-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-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-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-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-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
|
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"
|
title="Aanbevolen Producten"
|
||||||
description="Een zorgvuldige selectie van onze favoriete wijnen, sterke dranken en delicatessen. Perfect om te proeven of cadeau te geven."
|
description="Een zorgvuldige selectie van onze favoriete wijnen, sterke dranken en delicatessen. Perfect om te proeven of cadeau te geven."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="blog-preview" data-section="blog-preview">
|
<div id="blog-preview" data-section="blog-preview">
|
||||||
<BlogCardTwo
|
<BlogCardTwo
|
||||||
animationType="slide-up"
|
animationType="blur-reveal"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
title="Laatste Nieuws & Blogs"
|
title="Laatste Nieuws & Blogs"
|
||||||
description="Blijf op de hoogte van de nieuwste trends, diepgaande artikelen en verhalen uit de wereld van Pyk."
|
description="Blijf op de hoogte van de nieuwste trends, diepgaande artikelen en verhalen uit de wereld van Pyk."
|
||||||
blogs={[
|
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-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-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"
|
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>
|
||||||
|
|
||||||
<div id="events-preview" data-section="events-preview">
|
<div id="events-preview" data-section="events-preview">
|
||||||
<FeatureCardSixteen
|
<FeatureCardSixteen
|
||||||
animationType="slide-up"
|
animationType="blur-reveal"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
negativeCard={{
|
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="footer" data-section="footer">
|
||||||
|
<FooterLogoEmphasis
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
items: [
|
items: [
|
||||||
"Exclusieve Wijnproeverijen", "Masterclasses Sterke Dranken", "Delicatessen Workshops"]
|
{
|
||||||
}}
|
label: "Over Pyk", href: "#usps"
|
||||||
positiveCard={{
|
},
|
||||||
|
{
|
||||||
|
label: "Ons Team", href: "#usps"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "De Wynkantine", href: "/wynkantine"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
items: [
|
items: [
|
||||||
"Leer van de Experts", "Ontdek Nieuwe Smaken", "Ontmoet gelijkgestemden"]
|
{
|
||||||
}}
|
label: "Webshop", href: "/shop"
|
||||||
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"
|
label: "Wijnen", href: "/shop?category=wijn"
|
||||||
buttons={[
|
},
|
||||||
{
|
{
|
||||||
text: "Bekijk Evenementenkalender", href: "/events"}
|
label: "Sterke Dranken", href: "/shop?category=sterkedranken"
|
||||||
]}
|
},
|
||||||
/>
|
{
|
||||||
</div>
|
label: "Delicatessen", href: "/shop?category=delicatessen"
|
||||||
|
}
|
||||||
<div id="newsletter" data-section="newsletter">
|
]
|
||||||
<ContactCenter
|
},
|
||||||
useInvertedBackground={true}
|
{
|
||||||
background={{
|
items: [
|
||||||
variant: "radial-gradient"}}
|
{
|
||||||
tag="Blijf Geïnformeerd"
|
label: "Evenementen", href: "/events"
|
||||||
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"
|
label: "Blog", href: "/blog"
|
||||||
buttonText="Aanmelden"
|
},
|
||||||
termsText="Door aan te melden, gaat u akkoord met ons privacybeleid."
|
{
|
||||||
/>
|
label: "Relatiegeschenken", href: "/relatiegeschenken"
|
||||||
</div>
|
},
|
||||||
|
{
|
||||||
<div id="footer" data-section="footer">
|
label: "Contact", href: "/contact"
|
||||||
<FooterLogoEmphasis
|
}
|
||||||
columns={[
|
]
|
||||||
{
|
},
|
||||||
items: [
|
{
|
||||||
{
|
items: [
|
||||||
label: "Over Pyk", href: "#usps"},
|
{
|
||||||
{
|
label: "Instagram", href: "https://instagram.com/pykslyterij"
|
||||||
label: "Ons Team", href: "#usps"},
|
},
|
||||||
{
|
{
|
||||||
label: "De Wynkantine", href: "/wynkantine"}
|
label: "Facebook", href: "https://facebook.com/pykslyterij"
|
||||||
]
|
}
|
||||||
},
|
]
|
||||||
{
|
}
|
||||||
items: [
|
]}
|
||||||
{
|
logoText="Pyk Slyterij"
|
||||||
label: "Webshop", href: "/shop"},
|
/>
|
||||||
{
|
</div>
|
||||||
label: "Wijnen", href: "/shop?category=wijn"},
|
</ReactLenis>
|
||||||
{
|
</ThemeProvider>
|
||||||
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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,144 +5,162 @@ import ReactLenis from "lenis/react";
|
|||||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
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() {
|
export default function ShopPage() {
|
||||||
const products = [
|
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-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-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-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-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-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-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-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-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-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"
|
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 (
|
return (
|
||||||
<AgeVerificationModal>
|
<ThemeProvider
|
||||||
<ThemeProvider
|
defaultButtonVariant="text-stagger"
|
||||||
defaultButtonVariant="text-stagger"
|
defaultTextAnimation="background-highlight"
|
||||||
defaultTextAnimation="background-highlight"
|
borderRadius="soft"
|
||||||
borderRadius="soft"
|
contentWidth="smallMedium"
|
||||||
contentWidth="smallMedium"
|
sizing="mediumLargeSizeMediumTitles"
|
||||||
sizing="mediumLargeSizeMediumTitles"
|
background="fluid"
|
||||||
background="fluid"
|
cardStyle="subtle-shadow"
|
||||||
cardStyle="subtle-shadow"
|
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", 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: "Winkelwagen", id: "/cart"},
|
},
|
||||||
{
|
{
|
||||||
name: "Events", id: "/events"},
|
name: "Winkelwagen", id: "/cart"
|
||||||
{
|
},
|
||||||
name: "Blog", id: "/blog"},
|
{
|
||||||
{
|
name: "Events", id: "/events"
|
||||||
name: "Relatiegeschenken", id: "/relatiegeschenken"},
|
},
|
||||||
{
|
{
|
||||||
name: "Contact", id: "/contact"},
|
name: "Blog", id: "/blog"
|
||||||
]}
|
},
|
||||||
brandName="Pyk Slyterij"
|
{
|
||||||
/>
|
name: "Relatiegeschenken", id: "/relatiegeschenken"
|
||||||
</div>
|
},
|
||||||
|
{
|
||||||
|
name: "Contact", id: "/contact"
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
brandName="Pyk Slyterij"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="product-catalog" data-section="product-catalog">
|
<div id="product-catalog" data-section="product-catalog">
|
||||||
<ProductCardThree
|
<ProductCardThree
|
||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
gridVariant="four-items-2x2-equal-grid"
|
gridVariant="four-items-2x2-equal-grid"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
products={products}
|
products={products}
|
||||||
title="Onze Webshop"
|
title="Onze Webshop"
|
||||||
description="Ontdek ons uitgebreide assortiment van wijnen, sterke dranken en delicatessen."
|
description="Ontdek ons uitgebreide assortiment van wijnen, sterke dranken en delicatessen."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterLogoEmphasis
|
<FooterLogoEmphasis
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
items: [
|
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#team"
|
||||||
label: "De Wynkantine", href: "/wynkantine"},
|
},
|
||||||
],
|
{
|
||||||
},
|
label: "De Wynkantine", href: "/wynkantine"
|
||||||
{
|
},
|
||||||
items: [
|
],
|
||||||
{
|
},
|
||||||
label: "Webshop", href: "/shop"},
|
{
|
||||||
{
|
items: [
|
||||||
label: "Wijnen", href: "/shop?category=wijn"},
|
{
|
||||||
{
|
label: "Webshop", href: "/shop"
|
||||||
label: "Sterke Dranken", href: "/shop?category=sterkedranken"},
|
},
|
||||||
{
|
{
|
||||||
label: "Delicatessen", href: "/shop?category=delicatessen"},
|
label: "Wijnen", href: "/shop?category=wijn"
|
||||||
],
|
},
|
||||||
},
|
{
|
||||||
{
|
label: "Sterke Dranken", href: "/shop?category=sterkedranken"
|
||||||
items: [
|
},
|
||||||
{
|
{
|
||||||
label: "Evenementen", href: "/events"},
|
label: "Delicatessen", href: "/shop?category=delicatessen"
|
||||||
{
|
},
|
||||||
label: "Blog", href: "/blog"},
|
],
|
||||||
{
|
},
|
||||||
label: "Relatiegeschenken", href: "/relatiegeschenken"},
|
{
|
||||||
{
|
items: [
|
||||||
label: "Contact", href: "/contact"},
|
{
|
||||||
],
|
label: "Evenementen", href: "/events"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
items: [
|
label: "Blog", href: "/blog"
|
||||||
{
|
},
|
||||||
label: "Instagram", href: "https://instagram.com/pykslyterij"},
|
{
|
||||||
{
|
label: "Relatiegeschenken", href: "/relatiegeschenken"
|
||||||
label: "Facebook", href: "https://facebook.com/pykslyterij"},
|
},
|
||||||
],
|
{
|
||||||
},
|
label: "Contact", href: "/contact"
|
||||||
]}
|
},
|
||||||
logoText="Pyk Slyterij"
|
],
|
||||||
/>
|
},
|
||||||
</div>
|
{
|
||||||
</ReactLenis>
|
items: [
|
||||||
</ThemeProvider>
|
{
|
||||||
</AgeVerificationModal>
|
label: "Instagram", href: "https://instagram.com/pykslyterij"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Facebook", href: "https://facebook.com/pykslyterij"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
logoText="Pyk Slyterij"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ReactLenis>
|
||||||
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ html {
|
|||||||
body {
|
body {
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-family: var(--font-dm-sans), sans-serif;
|
font-family: var(--font-inter), sans-serif;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overscroll-behavior: none;
|
overscroll-behavior: none;
|
||||||
@@ -24,5 +24,5 @@ h3,
|
|||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-family: var(--font-dm-sans), sans-serif;
|
font-family: var(--font-playfair-display), serif;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,13 +12,13 @@
|
|||||||
|
|
||||||
--background: #f5f3f0;
|
--background: #f5f3f0;
|
||||||
--card: #ffffff;
|
--card: #ffffff;
|
||||||
--foreground: #262626;
|
--foreground: #2a2a2a;
|
||||||
--primary-cta: #b8860b;
|
--primary-cta: #b8860b;
|
||||||
--primary-cta-text: #ffffff;
|
--primary-cta-text: #ffffff;
|
||||||
--secondary-cta: #262626;
|
--secondary-cta: #6b4423;
|
||||||
--secondary-cta-text: #f5f3f0;
|
--secondary-cta-text: #f5f3f0;
|
||||||
--accent: #e0ac10;
|
--accent: #e0ac10;
|
||||||
--background-accent: #e8e8e8;
|
--background-accent: #a8b5a0;
|
||||||
|
|
||||||
/* text sizing - set by ThemeProvider */
|
/* text sizing - set by ThemeProvider */
|
||||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||||
|
|||||||
Reference in New Issue
Block a user