232 lines
10 KiB
TypeScript
232 lines
10 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import { Award, Leaf, Users, Coffee, Heart, UtensilsCrossed, Star } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLarge"
|
|
background="circleGradient"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="BrewHaven"
|
|
navItems={[
|
|
{ name: "Menu", id: "menu" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Locations", id: "locations" },
|
|
{ name: "Community", id: "community" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
title="Discover Your Perfect Cup"
|
|
description="Experience exceptional specialty coffee crafted with precision. From single-origin espresso to signature blends, every cup tells a story of quality and passion."
|
|
tag="Premium Coffee"
|
|
tagIcon={Coffee}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "floatingGradient" }}
|
|
buttons={[
|
|
{ text: "Explore Menu", href: "#menu" },
|
|
{ text: "Visit Us", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=iv9b3j", imageAlt: "Premium latte with latte art"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=uav4m8", imageAlt: "Freshly roasted coffee beans"
|
|
}
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="Loved by 2000+ coffee enthusiasts"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
title="Why Choose BrewHaven"
|
|
metrics={[
|
|
{
|
|
icon: Leaf,
|
|
label: "Ethically Sourced", value: "100%"
|
|
},
|
|
{
|
|
icon: Award,
|
|
label: "Award-Winning Baristas", value: "12+"
|
|
},
|
|
{
|
|
icon: Users,
|
|
label: "Daily Visitors", value: "500+"
|
|
}
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="menu" data-section="menu">
|
|
<FeatureCardThree
|
|
title="Signature Drinks"
|
|
description="Our carefully curated menu features expertly crafted beverages made with the finest beans from around the world."
|
|
tag="Menu"
|
|
tagIcon={UtensilsCrossed}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "espresso", title: "Classic Espresso", description: "Bold, smooth, and perfectly balanced single-origin espresso shots", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5f2cn4", imageAlt: "Espresso shot with rich crema"
|
|
},
|
|
{
|
|
id: "cappuccino", title: "Velvety Cappuccino", description: "Creamy milk foam paired with our signature espresso blend", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oseku6", imageAlt: "Cappuccino with latte art"
|
|
},
|
|
{
|
|
id: "cold-brew", title: "Cold Brew", description: "Smooth, refreshing cold brew perfect for warm days", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l1monh", imageAlt: "Iced cold brew coffee"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "View Full Menu", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="community" data-section="community">
|
|
<FeatureCardThree
|
|
title="Our Coffee Community"
|
|
description="BrewHaven is more than just a café—it's a gathering place for coffee lovers, creatives, and community members."
|
|
tag="Community"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "socializing", title: "Connect & Socialize", description: "Meet fellow coffee enthusiasts and make meaningful connections over quality coffee", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0d17hd", imageAlt: "People enjoying coffee together"
|
|
},
|
|
{
|
|
id: "events", title: "Regular Events", description: "From barista workshops to art showcases, we host events that celebrate coffee culture", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hlpoy9", imageAlt: "Cafe interior with welcoming ambiance"
|
|
},
|
|
{
|
|
id: "sustainable", title: "Sustainable Practices", description: "We're committed to environmental responsibility through eco-friendly sourcing and practices", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=uav4m8", imageAlt: "Sustainable coffee beans"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="What Our Customers Say"
|
|
description="Join thousands of satisfied coffee lovers who have made BrewHaven their favorite spot"
|
|
tag="Reviews"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Mitchell", role: "Designer", company: "Creative Studio", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0svfbh"
|
|
},
|
|
{
|
|
id: "2", name: "James Chen", role: "Entrepreneur", company: "Tech Startup", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7uqkq3"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Rodriguez", role: "Artist", company: "Independent", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f5s8ux"
|
|
},
|
|
{
|
|
id: "4", name: "Marcus Thompson", role: "Writer", company: "Publications", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kkhnyg"
|
|
}
|
|
]}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Visit BrewHaven Today"
|
|
description="Stop by for your favorite cup of coffee. We'd love to see you!"
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us about your visit or ask a question", rows: 4
|
|
}}
|
|
useInvertedBackground={false}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w8n45z"
|
|
imageAlt="BrewHaven coffee shop storefront"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
buttonText="Get in Touch"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="BrewHaven"
|
|
copyrightText="© 2025 BrewHaven Coffee. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Menu", items: [
|
|
{ label: "Espresso", href: "#menu" },
|
|
{ label: "Cappuccino", href: "#menu" },
|
|
{ label: "Cold Brew", href: "#menu" }
|
|
]
|
|
},
|
|
{
|
|
title: "About", items: [
|
|
{ label: "Our Story", href: "#about" },
|
|
{ label: "Sustainability", href: "#community" },
|
|
{ label: "Careers", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Community", items: [
|
|
{ label: "Events", href: "#community" },
|
|
{ label: "Reviews", href: "#testimonials" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|