Update src/app/page.tsx
This commit is contained in:
485
src/app/page.tsx
485
src/app/page.tsx
@@ -11,10 +11,12 @@ import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleAp
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import { Sparkles } from "lucide-react";
|
||||
import AgeVerificationModal from "@/app/components/AgeVerificationModal";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
<AgeVerificationModal>
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
@@ -25,306 +27,199 @@ 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="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: "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="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="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="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="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="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="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="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="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="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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user