323 lines
13 KiB
TypeScript
323 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
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"
|
|
}
|
|
];
|
|
|
|
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"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple navItems={navItems} brandName="Pyk Slyterij" />
|
|
</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="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>
|
|
<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>
|
|
);
|
|
}
|