254 lines
13 KiB
TypeScript
254 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { ArrowLeftRight, CircleDollarSign, Coffee, Facebook, Flame, Globe, Heart, Home, House, Instagram, Leaf, Linkedin, Mail, MessageSquareText, Send, Settings, TrendingUp, Twitter, Users, Zap } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="sharp"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="floatingGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Drink with Us"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Menu", id: "products" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardDashboard
|
|
title="Welcome to Drink with Us"
|
|
description="Experience the finest specialty coffee crafted by passionate baristas. From locally roasted beans to signature blends, every cup tells a story."
|
|
tag="Premium Coffee Experience"
|
|
tagIcon={Coffee}
|
|
background={{ variant: "radial-gradient" }}
|
|
buttons={[
|
|
{ text: "Explore Our Menu", href: "#products" },
|
|
{ text: "Visit Us Today", href: "#contact" }
|
|
]}
|
|
dashboard={{
|
|
title: "Coffee Quality Metrics", logoIcon: Coffee,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/table-chairs-bar_107420-65857.jpg", imageAlt: "Drink with Us Coffeeshop Interior", searchPlaceholder: "Search our menu...", buttons: [
|
|
{ text: "View Menu", href: "#products" },
|
|
{ text: "Reserve Table", href: "#contact" }
|
|
],
|
|
sidebarItems: [
|
|
{ icon: Home, active: true },
|
|
{ icon: Coffee },
|
|
{ icon: Users }
|
|
],
|
|
stats: [
|
|
{
|
|
title: "Roasting Since", values: [2015, 2016, 2017],
|
|
description: "Years of excellence"
|
|
},
|
|
{
|
|
title: "Premium Blends", values: [12, 18, 24],
|
|
description: "Available varieties"
|
|
},
|
|
{
|
|
title: "Happy Customers", values: [5000, 7500, 10000],
|
|
description: "Served monthly"
|
|
}
|
|
],
|
|
chartTitle: "Monthly Customer Growth", chartData: [
|
|
{ value: 45 },
|
|
{ value: 60 },
|
|
{ value: 75 },
|
|
{ value: 85 },
|
|
{ value: 90 }
|
|
],
|
|
listTitle: "Today's Special Orders", listItems: [
|
|
{ icon: Coffee, title: "Ethiopian Yirgacheffe", status: "Available" },
|
|
{ icon: Zap, title: "Double Shot Espresso", status: "Popular" },
|
|
{ icon: Heart, title: "Signature Caramel Latte", status: "Limited" }
|
|
]
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="Our Coffee Story"
|
|
description="Since 2015, Drink with Us has been dedicated to bringing the world's finest specialty coffee to your neighborhood. We believe in sustainability, quality, and community."
|
|
tag="About Our Brand"
|
|
tagIcon={Heart}
|
|
imageSrc="https://img.b2bpic.net/free-photo/cookies-fresh-coffee-made-from-coffee-beans_23-2148326705.jpg"
|
|
imageAlt="Premium Coffee Beans"
|
|
imagePosition="right"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
bulletPoints={[
|
|
{
|
|
title: "Direct Trade Sourcing", description: "We partner directly with coffee farmers to ensure quality and fair compensation.", icon: Globe
|
|
},
|
|
{
|
|
title: "Expert Roasting", description: "Our in-house roastery uses traditional methods to bring out unique flavor profiles.", icon: Flame
|
|
},
|
|
{
|
|
title: "Community Focused", description: "Every cup sold supports local artists and community initiatives.", icon: Users
|
|
},
|
|
{
|
|
title: "Sustainable Practices", description: "We're committed to reducing our environmental impact through eco-friendly packaging.", icon: Leaf
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Learn More", href: "#team" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
title="Featured Coffee Selection"
|
|
description="Discover our handpicked collection of premium coffee blends, each with unique characteristics and flavor profiles."
|
|
tag="Our Menu"
|
|
tagIcon={Coffee}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
products={[
|
|
{
|
|
id: "1", name: "Ethiopian Yirgacheffe", price: "$16.99/lb", imageSrc: "https://img.b2bpic.net/free-photo/delicious-coffee-with-milk_23-2147985001.jpg", imageAlt: "Ethiopian Yirgacheffe Coffee"
|
|
},
|
|
{
|
|
id: "2", name: "Colombian Huila Reserve", price: "$17.99/lb", imageSrc: "https://img.b2bpic.net/free-photo/cappuccino-coffee-glass-with-croissant-wooden-tray_23-2147908384.jpg", imageAlt: "Colombian Huila Reserve Coffee"
|
|
},
|
|
{
|
|
id: "3", name: "Signature House Blend", price: "$14.99/lb", imageSrc: "https://img.b2bpic.net/free-photo/caramel-latte-table_140725-4503.jpg", imageAlt: "Signature House Blend Coffee"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Drink with Us has become my daily sanctuary. The coffee is exceptional, the baristas are incredibly knowledgeable, and the atmosphere makes you feel like you're part of a community, not just a customer."
|
|
rating={5}
|
|
author="Maria Chen, Coffee Enthusiast"
|
|
useInvertedBackground="invertDefault"
|
|
avatars={[
|
|
{ src: "https://img.b2bpic.net/free-photo/professional-barista-pouring-latte-foam-coffee-caf_23-2148209229.jpg", alt: "Maria Chen" },
|
|
{ src: "https://img.b2bpic.net/free-photo/close-up-hand-pouring-milk-cup_23-2148865607.jpg", alt: "Customer 2" },
|
|
{ src: "https://img.b2bpic.net/free-photo/male-barista-preparing-cappuccino-coffee-shop_1303-29343.jpg", alt: "Customer 3" },
|
|
{ src: "https://img.b2bpic.net/free-photo/coffee-business-concept-handsome-bearded-man-apron-making-coffee-while-standing-cafe_1258-104246.jpg", alt: "Customer 4" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
title="Drink with Us By Numbers"
|
|
description="Our impact and commitment to excellence, reflected in our growth and customer satisfaction."
|
|
tag="Our Achievements"
|
|
tagIcon={TrendingUp}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "9+", title: "Years of Excellence", items: ["Consistent quality", "Industry recognition", "Customer loyalty"]
|
|
},
|
|
{
|
|
id: "2", value: "50+", title: "Coffee Varieties", items: ["Single-origin selections", "Seasonal blends", "Direct trade partnerships"]
|
|
},
|
|
{
|
|
id: "3", value: "15K+", title: "Monthly Customers", items: ["Growing community", "Repeat customers", "Online orders"]
|
|
},
|
|
{
|
|
id: "4", value: "100%", title: "Sustainable Sourcing", items: ["Ethical practices", "Fair trade certified", "Eco-friendly packaging"]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardTwo
|
|
title="Meet Our Team"
|
|
description="Passionate coffee experts dedicated to delivering the perfect cup every time."
|
|
tag="Our Baristas"
|
|
tagIcon={Users}
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
animationType="slide-up"
|
|
gridVariant="three-columns-all-equal-width"
|
|
members={[
|
|
{
|
|
id: "1", name: "Alex Rivera", role: "Head Barista", description: "Certified specialty coffee expert with 8 years of experience in third-wave coffee culture. Alex crafts every shot with precision and passion.", imageSrc: "https://img.b2bpic.net/free-photo/barista-preparing-beverage_23-2149458036.jpg", imageAlt: "Alex Rivera, Head Barista", socialLinks: [
|
|
{ icon: Instagram, url: "https://instagram.com" },
|
|
{ icon: Twitter, url: "https://twitter.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "2", name: "Sofia Nguyen", role: "Coffee Roaster", description: "Master roaster bringing out the unique character of each bean. Sofia's roasting profiles have won multiple awards and delighted coffee lovers worldwide.", imageSrc: "https://img.b2bpic.net/free-photo/male-barista-preparing-coffee_23-2148824432.jpg", imageAlt: "Sofia Nguyen, Coffee Roaster", socialLinks: [
|
|
{ icon: Linkedin, url: "https://linkedin.com" },
|
|
{ icon: Globe, url: "https://example.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "3", name: "Marcus Johnson", role: "Community Manager", description: "Creating meaningful connections between coffee lovers and our cafe. Marcus organizes cupping events, workshops, and community outreach programs.", imageSrc: "https://img.b2bpic.net/free-photo/bar-concept-with-barman-putting-milk-coffee_23-2147798051.jpg", imageAlt: "Marcus Johnson, Community Manager", socialLinks: [
|
|
{ icon: Twitter, url: "https://twitter.com" },
|
|
{ icon: Linkedin, url: "https://linkedin.com" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Get In Touch"
|
|
title="Join Our Coffee Community"
|
|
description="Subscribe to our newsletter for exclusive blends, brewing tips, and special events. Or visit us at our cafe to experience the magic firsthand."
|
|
tagIcon={Mail}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground="noInvert"
|
|
imageSrc="https://img.b2bpic.net/free-photo/boy-eating-restaurant_23-2148172673.jpg"
|
|
imageAlt="Drink with Us Cafe"
|
|
mediaPosition="right"
|
|
inputPlaceholder="your@email.com"
|
|
buttonText="Subscribe"
|
|
termsText="We respect your privacy. Unsubscribe anytime. Check out our privacy policy."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Drink with Us"
|
|
copyrightText="© 2025 Drink with Us Coffee. All rights reserved."
|
|
socialLinks={[
|
|
{ icon: Instagram, href: "https://instagram.com/drinkwithus", ariaLabel: "Instagram" },
|
|
{ icon: Twitter, href: "https://twitter.com/drinkwithus", ariaLabel: "Twitter" },
|
|
{ icon: Facebook, href: "https://facebook.com/drinkwithus", ariaLabel: "Facebook" },
|
|
{ icon: Linkedin, href: "https://linkedin.com/company/drinkwithus", ariaLabel: "LinkedIn" }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |