276 lines
12 KiB
TypeScript
276 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroSplitKPI from '@/components/sections/hero/HeroSplitKPI';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import {
|
|
Coffee,
|
|
BookOpen,
|
|
Heart,
|
|
Sparkles,
|
|
Smartphone,
|
|
Zap,
|
|
Droplet,
|
|
Wind,
|
|
Flame,
|
|
Beaker,
|
|
Thermometer,
|
|
Airplay,
|
|
Users,
|
|
MessageSquare,
|
|
TrendingUp,
|
|
Calendar,
|
|
Globe,
|
|
Leaf,
|
|
Award,
|
|
MapPin,
|
|
Home,
|
|
Star
|
|
} from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="grid"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Barakuda"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Menu", id: "features" },
|
|
{ name: "Stories", id: "testimonial" },
|
|
{ name: "Community", id: "metric" }
|
|
]}
|
|
button={{
|
|
text: "Visit Us", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKPI
|
|
title="Barakuda"
|
|
description="Experience the finest specialty coffee crafted with precision and passion."
|
|
background={{ variant: "plain" }}
|
|
kpiItems={[
|
|
{
|
|
value: "9", label: "Years"
|
|
},
|
|
{
|
|
value: "48", label: "Origins"
|
|
},
|
|
{
|
|
value: "5000", label: "Community"
|
|
}
|
|
]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/cafe-interior-with-orange-sofa-three-tables-three-black-chairs_181624-8624.jpg"
|
|
imageAlt="Barakuda coffee shop interior"
|
|
buttons={[
|
|
{ text: "Explore Our Menu", href: "#features" },
|
|
{ text: "Book a Table", href: "#contact" }
|
|
]}
|
|
ariaLabel="Barakuda coffee showcase"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="Our Story"
|
|
tagIcon={BookOpen}
|
|
title="Barakuda is more than coffee. It's a gathering place where passion meets craftsmanship."
|
|
description="Founded in 2015"
|
|
subdescription="Specialty Coffee Roastery & Cafe"
|
|
icon={Heart}
|
|
imageSrc="https://img.b2bpic.net/free-photo/cafe-interior-with-orange-sofa-three-tables-three-black-chairs_181624-8624.jpg"
|
|
imageAlt="Barakuda coffeeshop interior"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
title="Our Coffee Excellence"
|
|
description="Every cup tells a story of quality, craftsmanship, and dedication to the perfect brew."
|
|
tag="What Makes Us Special"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
title: "Ethically Sourced Beans", description: "Direct relationships with coffee farmers worldwide ensuring premium quality and fair trade practices.", bentoComponent: "globe"
|
|
},
|
|
{
|
|
title: "Expert Roasting", description: "Small-batch roasting perfected through years of experience and precision.", bentoComponent: "animated-bar-chart"
|
|
},
|
|
{
|
|
title: "Craft Brewing Methods", description: "From pour-over to espresso, each method mastered for optimal flavor extraction.", bentoComponent: "phone", statusIcon: Smartphone,
|
|
alertIcon: Coffee,
|
|
alertTitle: "Brew Ready", alertMessage: "Your perfect coffee awaits", apps: [
|
|
{ name: "Espresso", icon: Zap },
|
|
{ name: "Pour Over", icon: Droplet },
|
|
{ name: "Aeropress", icon: Wind },
|
|
{ name: "French Press", icon: Flame },
|
|
{ name: "Chemex", icon: Beaker },
|
|
{ name: "Turkish", icon: Thermometer },
|
|
{ name: "Cold Brew", icon: Thermometer },
|
|
{ name: "Nitro", icon: Airplay }
|
|
]
|
|
},
|
|
{
|
|
title: "Community Connection", description: "A welcoming space where coffee enthusiasts gather, learn, and celebrate shared passion.", bentoComponent: "marquee", centerIcon: Users,
|
|
variant: "text", texts: ["Coffee Lovers", "Local Artists", "Remote Workers", "Friends & Family"]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardTen
|
|
title="Loved by Our Community"
|
|
description="Discover what our regular guests and coffee enthusiasts say about their Barakuda experience."
|
|
tag="Customer Stories"
|
|
tagIcon={MessageSquare}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "The Best Coffee in Town", quote: "Every visit to Barakuda is a ritual I look forward to. The coffee is exceptional, but it's the warmth and expertise of the team that keeps me coming back.", name: "Sarah Mitchell", role: "Coffee Enthusiast", imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-smiling-pretty-girl-plaid-shirt-posing_114579-70643.jpg", imageAlt: "Sarah Mitchell"
|
|
},
|
|
{
|
|
id: "2", title: "A Second Home", quote: "Barakuda feels like home. Great coffee, wonderful atmosphere, and genuine people who care about creating a space where everyone belongs.", name: "Marcus Chen", role: "Regular Guest & Artist", imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", imageAlt: "Marcus Chen"
|
|
},
|
|
{
|
|
id: "3", title: "Perfect Workspace", quote: "As a remote worker, I've tried many cafes, but Barakuda stands out. Reliable wifi, comfortable seating, and coffee that inspires creativity.", name: "Emma Rodriguez", role: "Freelance Designer", imageSrc: "https://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg", imageAlt: "Emma Rodriguez"
|
|
},
|
|
{
|
|
id: "4", title: "Passion in Every Cup", quote: "You can taste the care and expertise in every single drink. The baristas are true craftspeople, and it shows in the quality they deliver.", name: "James Patterson", role: "Coffee Connoisseur", imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", imageAlt: "James Patterson"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metric" data-section="metric">
|
|
<MetricCardOne
|
|
title="By the Numbers"
|
|
description="The impact and reach of Barakuda's coffee passion and community commitment."
|
|
tag="Our Journey"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "9", title: "Years", description: "Serving exceptional coffee since 2015", icon: Calendar
|
|
},
|
|
{
|
|
id: "2", value: "48", title: "Origins", description: "Specialty coffee varieties from around the world", icon: Globe
|
|
},
|
|
{
|
|
id: "3", value: "5000", title: "Community", description: "Regular guests and coffee lovers in our circle", icon: Users
|
|
},
|
|
{
|
|
id: "4", value: "100", title: "Percent", description: "Commitment to ethical sourcing and sustainability", icon: Leaf
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialproof" data-section="socialproof">
|
|
<SocialProofOne
|
|
title="Recognized & Celebrated"
|
|
description="Featured in publications and endorsed by coffee industry leaders who recognize our commitment to excellence."
|
|
tag="Press & Recognition"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
names={[
|
|
"Coffee Magazine", "Specialty Coffee Review", "Urban Cafe Guide", "Local Business Journal", "Barista Excellence", "Roasters Association", "Food & Travel", "Community Awards"
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Get in Touch"
|
|
tagIcon={MapPin}
|
|
tagAnimation="slide-up"
|
|
title="Visit Barakuda"
|
|
description="Stop by our coffeeshop to experience the aroma, warmth, and community that makes Barakuda special. We're open daily, ready to serve you the perfect cup."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="https://img.b2bpic.net/free-photo/barista-work-coffee-shop_158595-2328.jpg"
|
|
imageAlt="Barakuda coffee experience"
|
|
mediaPosition="right"
|
|
mediaAnimation="slide-up"
|
|
inputPlaceholder="Your email address"
|
|
buttonText="Subscribe to Our Newsletter"
|
|
termsText="Join our community for coffee tips, new roasts, and special events. We respect your inbox."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Barakuda"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Coffee", href: "#features" },
|
|
{ label: "Community", href: "#metric" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Stories", href: "#testimonial" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Visit Us", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|