Update src/app/contact/page.tsx
This commit is contained in:
@@ -2,129 +2,320 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
||||
import { AtSign, Phone } from "lucide-react";
|
||||
import Textarea from "@/components/form/Textarea";
|
||||
import { useState } from "react";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
|
||||
export default function ContactPage() {
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [message, setMessage] = useState("");
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Contact form submitted:", { name, email, message });
|
||||
alert("Bedankt voor uw bericht! We nemen spoedig contact met u op.");
|
||||
setName("");
|
||||
setEmail("");
|
||||
setMessage("");
|
||||
};
|
||||
|
||||
const 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"
|
||||
}
|
||||
];
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="fluid"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="fluid"
|
||||
cardStyle="subtle-shadow"
|
||||
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>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="Pyk Slyterij" />
|
||||
</div>
|
||||
|
||||
<div id="contact-page" data-section="contact-page">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "downward-rays-static"}}
|
||||
tag="Neem Contact Op"
|
||||
title="Bezoek Ons of Bel"
|
||||
description="Wij staan klaar om u te helpen met al uw vragen. U vindt ons op de Houtmarkt in Deventer. \n\n**Adres:** Houtmarkt 14, 7411 CG Deventer\n**Telefoon (Regulier):** 06-25273263\n**Telefoon (Horeca):** 06-83978031\n**E-mail:** info@pykslyterij.nl\n\n**Openingstijden:**\nDi-Vr: 10:00-18:30\nZa: 10:00-17:00"
|
||||
inputPlaceholder="Uw naam"
|
||||
buttonText="Verzenden"
|
||||
termsText="Wij respecteren uw privacy. Uw gegevens worden niet gedeeld met derden."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact-intro" data-section="contact-intro">
|
||||
<ContactCTA
|
||||
tag="Contact"
|
||||
title="Kom langs, bel of mail ons!"
|
||||
description="We staan klaar om u te helpen met al uw vragen over onze producten, evenementen of De Wynkantine. U kunt ook het onderstaande contactformulier invullen."
|
||||
buttons={[
|
||||
{
|
||||
text: "Instagram", href: "https://instagram.com/pykslyterij", onClick: () =>
|
||||
window.open("https://instagram.com/pykslyterij", "_blank"),
|
||||
},
|
||||
{
|
||||
text: "Facebook", href: "https://facebook.com/pykslyterij", onClick: () =>
|
||||
window.open("https://facebook.com/pykslyterij", "_blank"),
|
||||
},
|
||||
]}
|
||||
background={{
|
||||
variant: "radial-gradient"
|
||||
}}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="general-faq" data-section="general-faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq-general-1", title: "Wat is de levertijd van webshop bestellingen?", content: "Bestellingen geplaatst voor 15:00 uur worden doorgaans de volgende werkdag geleverd binnen Nederland."},
|
||||
{
|
||||
id: "faq-general-2", title: "Kan ik een product retourneren?", content: "Ja, onbeschadigde en ongeopende producten kunnen binnen 14 dagen na aankoop worden geretourneerd. Zie onze retourvoorwaarden voor details."},
|
||||
{
|
||||
id: "faq-general-3", title: "Bieden jullie cadeaubonnen aan?", content: "Jazeker! Cadeaubonnen zijn verkrijgbaar in onze winkel en online te bestellen. Een perfect cadeau voor elke drankliefhebber."},
|
||||
]}
|
||||
title="Algemene Veelgestelde Vragen"
|
||||
description="Antwoorden op de meest voorkomende vragen over Pyk Slyterij, onze producten en services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
id="contact-details"
|
||||
data-section="contact-details"
|
||||
className="py-16 md:py-24 lg:py-32 px-4 sm:px-6 lg:px-8 bg-background"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold mb-4 text-foreground">
|
||||
Algemene Contactgegevens
|
||||
</h3>
|
||||
<p className="flex items-center gap-2 text-foreground/80 mb-2">
|
||||
<AtSign className="h-5 w-5 text-accent" />
|
||||
<span>info@pykslyterij.nl</span>
|
||||
</p>
|
||||
<p className="flex items-center gap-2 text-foreground/80 mb-2">
|
||||
<Phone className="h-5 w-5 text-accent" />
|
||||
<span>Regulier: +31 570 123456</span>
|
||||
</p>
|
||||
<p className="flex items-center gap-2 text-foreground/80 mb-4">
|
||||
<Phone className="h-5 w-5 text-accent" />
|
||||
<span>Horeca: +31 570 654321</span>
|
||||
</p>
|
||||
<h3 className="text-2xl font-semibold mb-4 text-foreground">
|
||||
Adres
|
||||
</h3>
|
||||
<p className="text-foreground/80">Hoofdstraat 123</p>
|
||||
<p className="text-foreground/80">7411 AB Deventer</p>
|
||||
</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>
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold mb-4 text-foreground">
|
||||
Openingstijden Pyk Slyterij
|
||||
</h3>
|
||||
<ul className="list-none space-y-2 text-foreground/80">
|
||||
<li>Maandag: Gesloten</li>
|
||||
<li>Dinsdag - Vrijdag: 10:00 - 18:00</li>
|
||||
<li>Zaterdag: 10:00 - 17:00</li>
|
||||
<li>Zondag: Gesloten</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold mb-4 text-foreground">
|
||||
Openingstijden De Wynkantine
|
||||
</h3>
|
||||
<ul className="list-none space-y-2 text-foreground/80">
|
||||
<li>Maandag: Gesloten</li>
|
||||
<li>Dinsdag - Donderdag: 16:00 - 22:00</li>
|
||||
<li>Vrijdag - Zaterdag: 16:00 - 00:00</li>
|
||||
<li>Zondag: Gesloten</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="contact-form-map"
|
||||
data-section="contact-form-map"
|
||||
className="py-16 md:py-24 lg:py-32 px-4 sm:px-6 lg:px-8 bg-background-accent"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<div>
|
||||
<h3 className="text-3xl font-bold mb-6 text-foreground">
|
||||
Stuur ons een bericht
|
||||
</h3>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="block text-sm font-medium text-foreground mb-2"
|
||||
>
|
||||
Naam
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="block w-full rounded-md border-0 py-2 text-foreground shadow-sm ring-1 ring-inset ring-card placeholder:text-foreground/50 focus:ring-2 focus:ring-inset focus:ring-primary-cta sm:text-sm sm:leading-6 bg-card"
|
||||
placeholder="Uw naam"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium text-foreground mb-2"
|
||||
>
|
||||
E-mailadres
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="block w-full rounded-md border-0 py-2 text-foreground shadow-sm ring-1 ring-inset ring-card placeholder:text-foreground/50 focus:ring-2 focus:ring-inset focus:ring-primary-cta sm:text-sm sm:leading-6 bg-card"
|
||||
placeholder="Uw e-mailadres"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="message"
|
||||
className="block text-sm font-medium text-foreground mb-2"
|
||||
>
|
||||
Bericht
|
||||
</label>
|
||||
<Textarea
|
||||
value={message}
|
||||
onChange={setMessage}
|
||||
placeholder="Uw bericht"
|
||||
rows={5}
|
||||
required
|
||||
className="block w-full rounded-md border-0 py-2 text-foreground shadow-sm ring-1 ring-inset ring-card placeholder:text-foreground/50 focus:ring-2 focus:ring-inset focus:ring-primary-cta sm:text-sm sm:leading-6 bg-card"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none data-[state=open]:bg-primary-cta h-10 px-4 py-2 bg-primary-cta text-primary-cta-foreground hover:bg-primary-cta/90"
|
||||
>
|
||||
Verzenden
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div className="w-full h-96 rounded-lg overflow-hidden shadow-lg">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2449.610547701389!2d6.155705315998634!3d52.25301397976865!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b86b4a2e5d7633%3A0x6a0c0b8b0e8b0e8b!2sDeventer!5e0!3m2!1sen!2snl!4v1678891234567!5m2!1sen!2snl"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen={true}
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
title="Locatie van Pyk Slyterij in Deventer"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
sideTitle="Veelgestelde Vragen"
|
||||
sideDescription="Heeft u nog vragen? Bekijk onze veelgestelde vragen hieronder of neem direct contact met ons op."
|
||||
faqsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq-1", title: "Waar kan ik jullie producten online kopen?", content:
|
||||
"U kunt onze uitgebreide selectie wijnen, sterke dranken en delicatessen vinden in onze webshop op /shop."},
|
||||
{
|
||||
id: "faq-2", title: "Organiseren jullie proeverijen of evenementen?", content:
|
||||
"Jazeker! We organiseren regelmatig proeverijen en masterclasses. Bekijk onze evenementenkalender op /events voor meer informatie."},
|
||||
{
|
||||
id: "faq-3", title: "Wat is De Wynkantine?", content:
|
||||
"De Wynkantine is onze sfeervolle bar waar u kunt genieten van een zorgvuldig samengestelde selectie wijnen, bieren en cocktails, perfect te combineren met kleine gerechtjes. Ideaal voor een gezellige avond uit!"},
|
||||
{
|
||||
id: "faq-4", title:
|
||||
"Bieden jullie zakelijke diensten aan, zoals relatiegeschenken?", content:
|
||||
"Absoluut! Wij helpen u graag met unieke relatiegeschenken op maat voor uw zakelijke partners of evenementen. Meer informatie vindt u op /relatiegeschenken."},
|
||||
]}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user