Merge version_4 into main
Merge version_4 into main
This commit was merged in pull request #5.
This commit is contained in:
@@ -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: "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-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: "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-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: "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-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: "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"},
|
||||
]}
|
||||
/>
|
||||
</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#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"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -3,75 +3,56 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
const AgeVerificationModal: React.FC<{ children: React.ReactNode }> = ({
|
||||
children,
|
||||
}) => {
|
||||
const [isVerified, setIsVerified] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [mounted, setMounted] = useState(false); // To handle client-side rendering for portal
|
||||
interface AgeVerificationModalProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const AgeVerificationModal: React.FC<AgeVerificationModalProps> = ({ children }) => {
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true); // Component is mounted on client
|
||||
const verified = localStorage.getItem("ageVerified");
|
||||
if (verified === "true") {
|
||||
setIsVerified(true);
|
||||
} else {
|
||||
setIsVerified(false);
|
||||
setIsModalOpen(true); // Open modal if not verified
|
||||
const ageVerified = localStorage.getItem("ageVerified");
|
||||
if (ageVerified !== "true") {
|
||||
setShowModal(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleVerify = () => {
|
||||
localStorage.setItem("ageVerified", "true");
|
||||
setIsVerified(true);
|
||||
setIsModalOpen(false); // Close modal
|
||||
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 (isVerified) {
|
||||
if (!showModal) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
// Render null on server, or if not mounted yet
|
||||
if (!mounted || !isModalOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Render modal only on client when mounted and if it needs to be open
|
||||
// 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/70 backdrop-blur-sm
|
||||
transition-opacity duration-300 ease-out ${isModalOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
aria-labelledby="age-verification-title"
|
||||
aria-describedby="age-verification-description"
|
||||
>
|
||||
<div
|
||||
className={`relative max-w-md w-full mx-4 p-8 bg-card text-foreground rounded-lg shadow-2xl
|
||||
transform transition-all duration-500 ease-out-back
|
||||
${isModalOpen ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'}`}
|
||||
style={{
|
||||
transitionProperty: 'transform, opacity',
|
||||
transitionTimingFunction: 'cubic-bezier(0.34, 1.56, 0.64, 1)'
|
||||
}}
|
||||
>
|
||||
<h2 id="age-verification-title" className="text-2xl font-bold mb-4 text-center">
|
||||
Leeftijdsverificatie
|
||||
<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>
|
||||
<p id="age-verification-description" className="text-center mb-6">
|
||||
U moet 18 jaar of ouder zijn om deze website te bezoeken.
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<div className="flex justify-center gap-4">
|
||||
<button
|
||||
onClick={handleVerify}
|
||||
className="px-6 py-3 bg-primary-cta text-primary-cta-text rounded-md hover:opacity-80 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-cta focus:ring-opacity-50"
|
||||
onClick={() => handleVerify(true)}
|
||||
className="px-6 py-3 bg-[var(--primary-cta)] text-[var(--primary-cta-text)] rounded-md hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Ik ben 18 jaar of ouder
|
||||
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>
|
||||
<p className="text-xs text-gray-500 mt-4 text-center">
|
||||
Door te klikken bevestigt u uw leeftijd en gaat u akkoord met onze gebruiksvoorwaarden.
|
||||
</p>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
|
||||
@@ -123,11 +123,11 @@ export default function LandingPage() {
|
||||
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-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: "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-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: "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"},
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user