330 lines
19 KiB
TypeScript
330 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
|
|
import MediaAbout from "@/components/sections/about/MediaAbout";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
|
|
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
|
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
|
import { Sparkles, Award, Star, Mail, TrendingUp } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="BrewHaven"
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Menu", id: "menu" },
|
|
{ name: "Reviews", id: "reviews" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Order Now", href: "#contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
title="Craft Coffee. Real Community."
|
|
description="Welcome to BrewHaven, where every cup tells a story. We source the finest specialty coffee beans from sustainable farms around the world, roast them fresh, and serve them with genuine care. Join us for an experience beyond great coffee."
|
|
tag="Premium Coffee Roastery"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Explore Our Menu", href: "#menu" },
|
|
{ text: "Visit Us", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "radial-gradient" }}
|
|
mediaItems={[
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rol2zj&_wi=1", imageAlt: "latte art cappuccino coffee cup aesthetic" },
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gm8q56&_wi=1", imageAlt: "coffee brewing pour over barista technique" }
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="Rated 5 stars by 2,847 happy customers"
|
|
ariaLabel="Coffee shop hero section"
|
|
containerClassName="max-w-6xl"
|
|
titleClassName="text-5xl md:text-6xl font-bold"
|
|
descriptionClassName="text-lg md:text-xl max-w-2xl"
|
|
tagClassName="inline-flex items-center gap-2"
|
|
buttonContainerClassName="flex gap-4"
|
|
buttonClassName="px-6 py-3 rounded-lg font-semibold"
|
|
mediaWrapperClassName="grid grid-cols-2 gap-4"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
title="Our Story of Coffee Excellence"
|
|
description="Founded in 2015, BrewHaven began as a passion project in a small corner shop. Today, we're a thriving community gathering space where coffee enthusiasts, remote workers, and friends come together. Our commitment to quality, sustainability, and exceptional service has become the heart of everything we do."
|
|
tag="Since 2015"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "Learn More About Our Beans", href: "#menu" }]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ezdx60&_wi=1"
|
|
imageAlt="modern cozy coffee shop interior warm lighting"
|
|
useInvertedBackground={false}
|
|
ariaLabel="About BrewHaven coffee shop"
|
|
textBoxClassName="max-w-2xl"
|
|
titleClassName="text-4xl md:text-5xl font-bold mb-6"
|
|
descriptionClassName="text-lg leading-relaxed"
|
|
tagClassName="inline-flex items-center gap-2 mb-4"
|
|
buttonContainerClassName="mt-8"
|
|
buttonClassName="px-6 py-3 rounded-lg font-semibold"
|
|
mediaWrapperClassName="rounded-2xl overflow-hidden"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
title="Featured Coffee Selection"
|
|
description="Discover our handpicked collection of specialty coffee blends and single-origin beans. Each offering is carefully selected for its unique flavor profile and ethical sourcing."
|
|
tag="Our Menu"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "View Full Menu", href: "#" }]}
|
|
buttonAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "morning-blend", name: "Morning Glory Blend", price: "$14.99", variant: "Medium Roast", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q72lbl&_wi=1", imageAlt: "coffee beans in white ceramic cup display"
|
|
},
|
|
{
|
|
id: "midnight-espresso", name: "Midnight Espresso", price: "$15.99", variant: "Dark Roast", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zpmkvf", imageAlt: "dark roast espresso coffee beans close-up"
|
|
},
|
|
{
|
|
id: "highland-single", name: "Highland Single Origin", price: "$16.99", variant: "Light Roast", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=plhqlj", imageAlt: "light roast single origin coffee beans premium"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Featured coffee products"
|
|
containerClassName="max-w-6xl"
|
|
cardClassName="rounded-xl shadow-lg hover:shadow-xl transition-shadow"
|
|
imageClassName="w-full h-64 object-cover rounded-t-xl"
|
|
textBoxTitleClassName="text-3xl md:text-4xl font-bold mb-4"
|
|
textBoxDescriptionClassName="text-lg mb-8 max-w-2xl"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardEight
|
|
title="Why BrewHaven Stands Apart"
|
|
description="We believe in more than just coffee. We believe in quality, community, and creating moments that matter."
|
|
tag="Our Values"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "Visit Us Today", href: "#contact" }]}
|
|
buttonAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Ethically Sourced", description: "Direct relationships with coffee farmers ensure fair pricing and sustainable practices for every bean we serve.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yf4z8d", imageAlt: "coffee farmer harvesting fair trade beans"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Freshly Roasted", description: "Our in-house roastery roasts small batches daily, guaranteeing peak freshness and optimal flavor in every cup.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lcuxfg", imageAlt: "artisanal coffee roaster in action industrial"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Community Focused", description: "Beyond coffee, BrewHaven is a gathering place for local artists, makers, and dreamers to connect and collaborate.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m09y3b", imageAlt: "coffee shop community gathering people diverse"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Why choose BrewHaven features"
|
|
containerClassName="max-w-6xl"
|
|
textBoxTitleClassName="text-4xl md:text-5xl font-bold mb-4"
|
|
textBoxDescriptionClassName="text-lg mb-12 max-w-2xl"
|
|
cardClassName="rounded-xl p-8 border border-accent hover:border-background-accent transition-colors"
|
|
cardTitleClassName="text-2xl font-bold mb-3"
|
|
cardDescriptionClassName="text-base leading-relaxed"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="What Our Coffee Lovers Say"
|
|
description="Real stories from our community of coffee enthusiasts and everyday visitors."
|
|
tag="Customer Reviews"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "testimonial-1", title: "Best Coffee in Town", quote: "BrewHaven has become my second office. The coffee is exceptional, the vibe is perfect, and the staff genuinely cares about getting your order right.", name: "Sarah Mitchell", role: "Freelance Writer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zuen7r", imageAlt: "young professional woman coffee shop laptop"
|
|
},
|
|
{
|
|
id: "testimonial-2", title: "Truly Sustainable", quote: "I love supporting a coffee shop that walks the walk on sustainability. You can taste the quality and feel good knowing where your money goes.", name: "Marcus Chen", role: "Environmental Consultant", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zy36xf", imageAlt: "professional man coffee cup outdoor portrait"
|
|
},
|
|
{
|
|
id: "testimonial-3", title: "Community Heart", quote: "The espresso is art, but what really keeps me coming back is the community. BrewHaven feels like home.", name: "Elena Rodriguez", role: "Local Artist", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=za0vfd", imageAlt: "creative artist woman coffee shop portrait"
|
|
},
|
|
{
|
|
id: "testimonial-4", title: "Perfect for Meetings", quote: "I meet clients here regularly. The WiFi is reliable, the seating is comfortable, and the coffee never disappoints.", name: "David Thompson", role: "Business Owner", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vy9ey7", imageAlt: "business owner professional man suit portrait"
|
|
},
|
|
{
|
|
id: "testimonial-5", title: "A Morning Ritual", quote: "My day doesn't start without a visit to BrewHaven. The consistency in quality and service is unmatched.", name: "Jamie Lewis", role: "Marketing Manager", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fg2f3y", imageAlt: "marketing professional woman coffee portrait"
|
|
},
|
|
{
|
|
id: "testimonial-6", title: "Worth Every Penny", quote: "Premium quality at fair prices. The beans are fresh, the preparation is meticulous, and the experience is always welcoming.", name: "Alex Kumar", role: "Coffee Enthusiast", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wvzh58", imageAlt: "coffee enthusiast person portrait casual smile"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Customer testimonials for BrewHaven"
|
|
containerClassName="max-w-6xl"
|
|
textBoxTitleClassName="text-4xl md:text-5xl font-bold mb-4"
|
|
textBoxDescriptionClassName="text-lg mb-12 max-w-2xl"
|
|
quoteCardClassName="rounded-xl p-8 border border-accent hover:border-background-accent transition-colors"
|
|
quoteClassName="text-lg italic mb-6 leading-relaxed"
|
|
nameClassName="font-bold text-base"
|
|
roleClassName="text-sm text-accent"
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialproof" data-section="socialproof">
|
|
<SocialProofOne
|
|
title="Featured In"
|
|
description="BrewHaven has been recognized by leading publications and community organizations for excellence in coffee and community service."
|
|
names={[
|
|
"Local Business Weekly", "Coffee Culture Magazine", "Sustainability Leaders", "Community Excellence Awards", "Best of the City", "Independent Coffee Alliance", "Urban Wellness Collective", "Heritage Businesses Network"
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Featured recognitions and awards"
|
|
containerClassName="max-w-6xl"
|
|
textBoxTitleClassName="text-3xl md:text-4xl font-bold mb-2"
|
|
textBoxDescriptionClassName="text-lg mb-12 max-w-2xl"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
title="By The Numbers"
|
|
description="Nine years of brewing excellence and community impact."
|
|
tag="Our Growth"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "metric-1", value: "50K+", title: "Happy Customers", description: "Served annually with care and precision", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rol2zj&_wi=2", imageAlt: "Happy customers at coffee shop"
|
|
},
|
|
{
|
|
id: "metric-2", value: "200+", title: "Specialty Blends", description: "Unique combinations to discover", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gm8q56&_wi=2", imageAlt: "Specialty coffee blends collection"
|
|
},
|
|
{
|
|
id: "metric-3", value: "12", title: "Local Partnerships", description: "Supporting community businesses", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ezdx60&_wi=2", imageAlt: "Local partnerships collaboration"
|
|
},
|
|
{
|
|
id: "metric-4", value: "98%", title: "Return Rate", description: "Of customers visit us again", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q72lbl&_wi=2", imageAlt: "Customer return rate statistics"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="BrewHaven metrics and achievements"
|
|
containerClassName="max-w-6xl"
|
|
textBoxTitleClassName="text-4xl md:text-5xl font-bold mb-4"
|
|
textBoxDescriptionClassName="text-lg mb-12 max-w-2xl"
|
|
gridClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
|
|
cardClassName="rounded-xl p-8 border border-accent text-center"
|
|
valueClassName="text-5xl font-bold text-primary-cta mb-2"
|
|
cardTitleClassName="text-xl font-bold mb-2"
|
|
cardDescriptionClassName="text-sm text-accent"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get In Touch"
|
|
title="Join Our Coffee Community"
|
|
description="Subscribe to our newsletter for exclusive blends, brewing tips, and community updates delivered straight to your inbox."
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Subscribe"
|
|
termsText="By subscribing, you agree to receive emails about our latest coffee releases and community events. We respect your privacy."
|
|
ariaLabel="Email signup contact section"
|
|
containerClassName="max-w-2xl mx-auto"
|
|
contentClassName="text-center"
|
|
titleClassName="text-4xl md:text-5xl font-bold mb-4"
|
|
descriptionClassName="text-lg mb-8 max-w-xl mx-auto"
|
|
formClassName="flex flex-col md:flex-row gap-3 mb-4"
|
|
inputClassName="flex-1 px-4 py-3 rounded-lg border border-accent focus:outline-none focus:border-primary-cta"
|
|
buttonClassName="px-8 py-3 rounded-lg font-semibold whitespace-nowrap"
|
|
termsClassName="text-sm text-accent"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "About", items: [
|
|
{ label: "Our Story", href: "#about" },
|
|
{ label: "Sustainability", href: "#" },
|
|
{ label: "Farm Partners", href: "#" },
|
|
{ label: "Careers", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Experience", items: [
|
|
{ label: "Our Menu", href: "#menu" },
|
|
{ label: "Reserve a Table", href: "#" },
|
|
{ label: "Events", href: "#" },
|
|
{ label: "Gift Cards", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "Instagram", href: "#" },
|
|
{ label: "Newsletter", href: "#" },
|
|
{ label: "Blog", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Accessibility", href: "#" },
|
|
{ label: "Cookie Settings", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2024 BrewHaven Coffee. All rights reserved. Crafted with care for coffee lovers everywhere."
|
|
ariaLabel="Footer navigation"
|
|
containerClassName="max-w-6xl mx-auto"
|
|
columnsClassName="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8"
|
|
columnTitleClassName="font-bold text-lg mb-4"
|
|
columnItemClassName="hover:text-primary-cta transition-colors"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|