114 lines
5.3 KiB
TypeScript
114 lines
5.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
|
|
const navItems = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "About", id: "/about" },
|
|
{ name: "Menu", id: "/menu" },
|
|
{ name: "Contact", id: "/contact" },
|
|
];
|
|
|
|
const Footer = () => (
|
|
<footer className="py-8 bg-card border-t">
|
|
<div className="container mx-auto px-4 md:px-6 flex flex-col md:flex-row justify-between items-center">
|
|
<p className="text-foreground/80 text-sm mb-4 md:mb-0">{`© ${new Date().getFullYear()} Brew Haven. All rights reserved.`}</p>
|
|
<nav className="flex gap-4">
|
|
{navItems.map((item) => (
|
|
<Link key={item.name} href={item.id} className="text-sm text-foreground hover:text-[var(--primary-cta)] transition-colors">
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</footer>
|
|
);
|
|
|
|
export default function ContactPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="mediumLarge"
|
|
background="grid"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Brew Haven"
|
|
navItems={navItems}
|
|
button={{ text: "Order Now", href: "/menu" }}
|
|
buttonClassName="shadow-md"
|
|
logoHref="/"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Reach Out to Us"
|
|
description="Whether it's a question, feedback, or just to say hello, we'd love to hear from you."
|
|
inputs={[{ name: "name", type: "text", placeholder: "Your Name", required: true }, { name: "email", type: "email", placeholder: "Your Email", required: true }]}
|
|
textarea={{ name: "message", placeholder: "Your Message", rows: 5, required: true }}
|
|
buttonText="Send Message"
|
|
imageSrc="https://img.b2bpic.net/free-photo/parisian-coffee-shop-style-with-tasty-coffee-served-wooden-table-coffee-shop-design_482257-18283.jpg"
|
|
imageAlt="A modern, inviting coffee shop interior"
|
|
mediaPosition="right"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
className="py-16 md:py-24 lg:py-32"
|
|
formCardClassName="p-6 md:p-8 rounded-lg shadow-lg"
|
|
titleClassName="text-3xl font-semibold"
|
|
descriptionClassName="text-[var(--foreground)]/80 mb-6"
|
|
buttonClassName="mt-4 shadow-md"
|
|
mediaWrapperClassName="rounded-lg overflow-hidden shadow-lg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Got questions? We've got answers. Find more information about Brew Haven here."
|
|
tag="Q&A"
|
|
faqs={[{ id: "1", title: "Do you offer dairy-free milk options?", content: "Yes, we proudly offer a selection of dairy-free milk alternatives including oat, almond, and soy milk for all our beverages." }, { id: "2", title: "Can I order online for pickup?", content: "Absolutely! You can place your order directly through our website or mobile app for quick and convenient in-store pickup." }, { id: "4", title: "What are your opening hours?", content: "We are open Monday to Friday from 7 AM to 6 PM, and Saturday to Sunday from 8 AM to 5 PM." }]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/young-barista-eyeglasses-cap-standing-bar-counter-preparing-pour-coffee-while-working-cafe_574295-3460.jpg"
|
|
imageAlt="People discussing around a coffee table, suggesting a Q&A session"
|
|
mediaPosition="left"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqsAnimation="slide-up"
|
|
mediaAnimation="slide-up"
|
|
className="py-16 md:py-24 lg:py-32"
|
|
containerClassName="max-w-7xl mx-auto"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="Visit Our Haven"
|
|
description="Located in the heart of the city, Brew Haven is your local getaway. We are passionate about creating a welcoming space for everyone in our community."
|
|
tag="Our Location"
|
|
bulletPoints={[{ title: "Community Hub", description: "A place to connect, work, and relax." }, { title: "Local Events", description: "Join us for open mic nights and coffee tastings." }]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/woman-works-cafe-evening_1153-3549.jpg"
|
|
imageAlt="A cozy coffee shop interior in the evening"
|
|
imagePosition="right"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
className="py-16 md:py-24 lg:py-32"
|
|
/>
|
|
</div>
|
|
|
|
<Footer />
|
|
</ThemeProvider>
|
|
);
|
|
} |