228 lines
12 KiB
TypeScript
228 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
|
|
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
|
import TestimonialCardNine from '@/components/sections/testimonial/TestimonialCardNine';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterSocial from '@/components/sections/footer/FooterSocial';
|
|
import { Coffee, Leaf, Flame, Instagram, Facebook, Twitter, Youtube, Mail, Star } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="largeSizeMediumTitles"
|
|
background="grid"
|
|
cardStyle="elevated-accent"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Bean Haven"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Menu", id: "products" },
|
|
{ name: "Why Us", id: "features" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Order Now", href: "#products"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="Bean Haven"
|
|
description="Artisan coffee roasted to perfection. Discover our single-origin blends and signature espresso drinks crafted with passion and precision."
|
|
imageSrc="https://img.b2bpic.net/free-photo/portrait-beautiful-smiling-model-dressed-summer-hipster-jeans-jacket_158538-17794.jpg?id=16768175"
|
|
imageAlt="Premium specialty coffee"
|
|
frameStyle="card"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="Our Coffee Story"
|
|
description="We believe that great coffee starts with great beans. For over a decade, we've sourced the finest coffee from sustainable farms across Ethiopia, Colombia, and Indonesia."
|
|
tag="Our Mission"
|
|
imagePosition="right"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
imageSrc="https://img.b2bpic.net/free-photo/coffee-preparation-concept-still-life_23-2150354588.jpg"
|
|
imageAlt="Coffee farm and beans"
|
|
bulletPoints={[
|
|
{
|
|
title: "Single-Origin Selection", description: "We carefully curate beans from specific regions to highlight unique flavor profiles and terroir characteristics.", icon: Coffee
|
|
},
|
|
{
|
|
title: "Sustainable Sourcing", description: "Direct relationships with farmers ensure fair prices and environmentally responsible practices.", icon: Leaf
|
|
},
|
|
{
|
|
title: "Expert Roasting", description: "Our roasters bring 20+ years of experience to craft the perfect roast for each origin.", icon: Flame
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardSeven
|
|
title="Featured Coffees"
|
|
description="Explore our hand-selected collection of premium coffee blends and single-origin roasts."
|
|
tag="Menu"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
products={[
|
|
{
|
|
id: "1", name: "Ethiopian Yirgacheffe", price: "$16/lb", imageSrc: "https://img.b2bpic.net/free-photo/close-up-milk-poured-coffee-cup_23-2148366658.jpg", imageAlt: "Ethiopian Yirgacheffe coffee beans"
|
|
},
|
|
{
|
|
id: "2", name: "Colombian Dark Roast", price: "$14/lb", imageSrc: "https://img.b2bpic.net/free-photo/male-barista-brewing-coffee-alternative-method-pour_176420-14715.jpg", imageAlt: "Colombian dark roast coffee"
|
|
},
|
|
{
|
|
id: "3", name: "House Blend Espresso", price: "$15/lb", imageSrc: "https://img.b2bpic.net/free-photo/high-angle-coffee-making-with-machine_23-2148865579.jpg", imageAlt: "House blend espresso roast"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardEight
|
|
title="Our Coffee Journey"
|
|
description="From farm to cup, experience the meticulous process behind every perfect brew."
|
|
tag="Process"
|
|
textboxLayout="split-actions"
|
|
useInvertedBackground="invertDefault"
|
|
buttons={[
|
|
{
|
|
text: "Shop Now", href: "#products"
|
|
}
|
|
]}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Sourcing", description: "We partner directly with ethical coffee farmers to source the finest beans from around the world.", imageSrc: "https://img.b2bpic.net/free-photo/coffee-preparation-concept-still-life_23-2150354580.jpg"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Roasting", description: "Our expert roasters carefully monitor each batch to achieve the perfect balance of flavor and aroma.", imageSrc: "https://img.b2bpic.net/free-photo/tool-used-coffee-machine-coffee-making-process_23-2150187524.jpg"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Grinding", description: "Freshly ground for maximum flavor release, our precise grinding process preserves coffee quality.", imageSrc: "https://img.b2bpic.net/free-photo/coffee-preparation-concept-still-life_23-2150354581.jpg"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Brewing", description: "Using premium brewing techniques, we extract the perfect cup tailored to your preferences.", imageSrc: "https://img.b2bpic.net/free-photo/barista-pours-freshly-made-turkish-coffee-into-cup-closeup-professional-barista-prepares-coffee-by-hand-traditional-way-sand-selective-focus-space-text_166373-2978.jpg"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardNine
|
|
title="What Our Customers Love"
|
|
description="Join thousands of coffee enthusiasts who've made Bean Haven their go-to roaster."
|
|
tag="Reviews"
|
|
textboxLayout="split-actions"
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{
|
|
text: "Start Your Subscription", href: "#contact"
|
|
},
|
|
{
|
|
text: "Shop Coffee Beans", href: "#products"
|
|
}
|
|
]}
|
|
testimonials={[
|
|
{
|
|
id: "1", quote: "★★★★★ The quality and freshness of these beans is exceptional. My mornings have completely transformed since I switched to Bean Haven.", name: "Sarah Mitchell", role: "Coffee Enthusiast", imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Sarah Mitchell"
|
|
},
|
|
{
|
|
id: "2", quote: "★★★★★ I've tried countless coffee brands, and Bean Haven stands out for their commitment to sustainability and incredible taste.", name: "Marcus Chen", role: "Barista & Trainer", imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", imageAlt: "Marcus Chen"
|
|
},
|
|
{
|
|
id: "3", quote: "★★★★★ The subscription service is perfect for my office. Fresh coffee delivered monthly, no hassle, amazing value.", name: "Jessica Lopez", role: "Office Manager", imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg", imageAlt: "Jessica Lopez"
|
|
},
|
|
{
|
|
id: "4", quote: "★★★★★ Finally found a roaster that truly understands single-origin coffees. The Ethiopian blend is my new favorite.", name: "David Park", role: "Home Roasting Hobbyist", imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", imageAlt: "David Park"
|
|
},
|
|
{
|
|
id: "5", quote: "★★★★★ Bean Haven's customer service is outstanding. They genuinely care about helping you find your perfect cup.", name: "Emma Richardson", role: "Coffee Shop Owner", imageSrc: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", imageAlt: "Emma Richardson"
|
|
},
|
|
{
|
|
id: "6", quote: "★★★★★ The tasting notes are spot-on. I feel like I'm tasting coffee at a completely new level now.", name: "Robert Thompson", role: "Coffee Connoisseur", imageSrc: "https://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg", imageAlt: "Robert Thompson"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Stay Connected"
|
|
tagIcon={Mail}
|
|
title="Join Our Coffee Club"
|
|
description="Subscribe to receive exclusive blends, brewing tips, and special discounts delivered to your inbox."
|
|
useInvertedBackground="invertDefault"
|
|
imageSrc="https://img.b2bpic.net/free-photo/aerial-view-person-making-drip-coffee_53876-20644.jpg"
|
|
imageAlt="Freshly brewed coffee"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Subscribe"
|
|
termsText="We respect your privacy. Unsubscribe anytime."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSocial
|
|
logoText="Bean Haven"
|
|
copyrightText="© Bean Haven, Inc. 2025. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Shop", items: [
|
|
{ label: "Coffee Blends", href: "#products" },
|
|
{ label: "Subscriptions", href: "#products" },
|
|
{ label: "Brewing Equipment", href: "#products" },
|
|
{ label: "Gift Cards", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Story", href: "#about" },
|
|
{ label: "Sustainability", href: "#about" },
|
|
{ label: "Careers", href: "https://beanhaven.com/careers" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "Brewing Guide", href: "#features" },
|
|
{ label: "FAQ", href: "https://beanhaven.com/faq" },
|
|
{ label: "Returns", href: "https://beanhaven.com/returns" }
|
|
]
|
|
}
|
|
]}
|
|
socialLinks={[
|
|
{ icon: Instagram, href: "https://instagram.com/beanhaven", ariaLabel: "Instagram" },
|
|
{ icon: Facebook, href: "https://facebook.com/beanhaven", ariaLabel: "Facebook" },
|
|
{ icon: Twitter, href: "https://twitter.com/beanhaven", ariaLabel: "Twitter" },
|
|
{ icon: Youtube, href: "https://youtube.com/beanhaven", ariaLabel: "YouTube" }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |