276 lines
14 KiB
TypeScript
276 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import { Coffee } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="medium"
|
|
sizing="largeSizeMediumTitles"
|
|
background="floatingGradient"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#home"},
|
|
{
|
|
name: "Services", id: "#services"},
|
|
{
|
|
name: "Menu", id: "#menu"},
|
|
{
|
|
name: "Testimonials", id: "#testimonials"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
brandName="Milk + Honey"
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroBillboardScroll
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Milk + Honey Espresso Bar"
|
|
description="Elevate your event with a premium mobile coffee experience. Serving DC, Maryland, and Virginia."
|
|
buttons={[
|
|
{
|
|
text: "Book Your Event", href: "#contact"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/fresh-lemonade-with-straws-table_23-2148245023.jpg"
|
|
imageAlt="Mobile espresso cart serving coffee at an event"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
useInvertedBackground={true}
|
|
tag="Our Story"
|
|
title="Experience the Milk + Honey Difference"
|
|
description="Milk + Honey is a family-owned mobile espresso cart dedicated to serving exceptional coffee at events across the DMV area. We bring the full cafe experience to you."
|
|
subdescription="With over 200 five-star reviews, our passion for quality coffee and outstanding service shines through every cup. We pride ourselves on crafting memorable moments for your guests."
|
|
icon={Coffee}
|
|
imageSrc="http://img.b2bpic.net/free-photo/woman-pouring-sugar-into-coffee_23-2147765328.jpg"
|
|
imageAlt="Close-up of a barista preparing coffee on the mobile cart"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyOne
|
|
useInvertedBackground={false}
|
|
title="Customizable Espresso Experiences"
|
|
description="From corporate gatherings to elegant weddings, we tailor our mobile espresso bar to perfectly complement your event. Enjoy a bespoke menu and professional, friendly baristas."
|
|
tag="Our Services"
|
|
accordionItems={[
|
|
{
|
|
id: "1", title: "Customized Menu Options", content: "Work with us to create a unique beverage menu, including classic espresso drinks, specialty lattes, and premium teas, perfectly suited for your event's theme and guests' preferences."},
|
|
{
|
|
id: "2", title: "Professional & Engaging Baristas", content: "Our experienced baristas are not only skilled in crafting delicious drinks but also in providing warm, friendly service that enhances your guests' experience and adds a touch of charm to your event."},
|
|
{
|
|
id: "3", title: "Seamless Setup & Operation", content: "We handle everything from transportation and setup to break-down, ensuring a hassle-free experience for you. Our compact cart integrates smoothly into any venue, indoors or outdoors."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/small-glasses-with-drinks-plate-with-sliced-limes_8353-10646.jpg"
|
|
imageAlt="Barista making latte art at a mobile coffee cart"
|
|
mediaAnimation="opacity"
|
|
mediaPosition="right"
|
|
/>
|
|
</div>
|
|
|
|
<div id="menu" data-section="menu">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "latte", name: "Latte", price: "", variant: "Creamy espresso with steamed milk and a thin layer of foam.", imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-tasty-chocolate-milkshake_181624-58437.jpg", imageAlt: "Latte with latte art"},
|
|
{
|
|
id: "cappuccino", name: "Cappuccino", price: "", variant: "Espresso with equal parts steamed milk and frothy foam.", imageSrc: "http://img.b2bpic.net/free-photo/glass-caramel-smoothie-brown-piece-clothing-white-surface_181624-22779.jpg", imageAlt: "Cappuccino with a sprinkle of cocoa"},
|
|
{
|
|
id: "mocha", name: "Mocha", price: "", variant: "Rich chocolate, espresso, and steamed milk, topped with whipped cream.", imageSrc: "http://img.b2bpic.net/free-photo/cup-chocolate-with-cream-two-cinnamon-sticks_1220-521.jpg", imageAlt: "Mocha with whipped cream and chocolate drizzle"},
|
|
{
|
|
id: "americano", name: "Americano", price: "", variant: "Espresso shots diluted with hot water, offering a bold coffee flavor.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-aromatic-coffee-plate_23-2148349623.jpg", imageAlt: "Simple black Americano in a white cup"},
|
|
{
|
|
id: "cold-brew", name: "Espresso ", price: "", variant: "Smooth, low-acid coffee steeped for hours, served over ice.", imageSrc: "http://img.b2bpic.net/free-photo/cold-summer-coffee-drink-with-ice-orange-juice_169016-21399.jpg", imageAlt: "Cold brew coffee in a glass with ice"},
|
|
{
|
|
id: "hot-tea", name: "Hot Tea", price: "", variant: "A selection of premium loose-leaf teas, steeped to perfection.", imageSrc: "http://img.b2bpic.net/free-photo/cozy-home-composition-with-teapot-cup-tea-candles-knitted-element_169016-49183.jpg", imageAlt: "Hot tea in a elegant white cup"},
|
|
]}
|
|
title="Artisan Coffee Creations"
|
|
description="Explore a selection of expertly crafted espresso drinks, teas, and specialty beverages. Our menu is designed to delight every palate at your event."
|
|
tag="Our Menu"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "rating", value: "5.0", description: "Average Star Rating"},
|
|
{
|
|
id: "reviews", value: "221+", description: "Verified Customer Reviews"},
|
|
{
|
|
id: "events", value: "100s", description: "Successful Events Catered"},
|
|
]}
|
|
title="Trusted for Quality & Service"
|
|
description="Our commitment to excellence has earned us rave reviews and a loyal clientele across the DC, Maryland, and Virginia area."
|
|
tag="By the Numbers"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"Washington D.C.", "Montgomery County", "Fairfax County", "Arlington", "Prince George's County", "Alexandria", "Howard County", "Loudoun County"]}
|
|
title="Where We Bring the Coffee"
|
|
description="Proudly serving a diverse range of clients and events throughout Washington D.C., Maryland, and Virginia. We're ready to travel to you!"
|
|
tag="Serving the DMV"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Stephanie Villatoro", role: "Local Guide", company: "Event Host", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/business-woman_1303-3880.jpg", imageAlt: "Stephanie Villatoro"},
|
|
{
|
|
id: "2", name: "Christie Grewe", role: "Church Member", company: "Church Event Organizer", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-posing-near-wall_23-2148718039.jpg", imageAlt: "Christie Grewe"},
|
|
{
|
|
id: "3", name: "Shaqkia Curmon", role: "Event Guest", company: "Private Party", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/team-collaboration-meeting_23-2151944856.jpg", imageAlt: "Shaqkia Curmon"},
|
|
{
|
|
id: "4", name: "Emily Rodriguez", role: "Marketing Director", company: "GrowthCo", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/authentic-book-club-scene_23-2150104578.jpg", imageAlt: "Emily Rodriguez"},
|
|
{
|
|
id: "5", name: "David Kim", role: "Product Manager", company: "StartupXYZ", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-showing-thumb-up_1187-5092.jpg", imageAlt: "David Kim"},
|
|
]}
|
|
kpiItems={[
|
|
{
|
|
value: "5.0", label: "Star Rating"},
|
|
{
|
|
value: "221+", label: "Verified Reviews"},
|
|
{
|
|
value: "100%", label: "Client Satisfaction"},
|
|
]}
|
|
title="Exceptional Experiences, Every Time"
|
|
description="Our clients consistently praise our professional service, delicious coffee, and friendly baristas. Read what they have to say about Milk + Honey."
|
|
tag="Hear From Our Clients"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "how-to-book", title: "How do I book Milk + Honey for my event?", content: "Simply fill out our contact form with your event details, preferred date, and estimated guest count. We'll get back to you promptly to discuss customization and availability."},
|
|
{
|
|
id: "areas-served", title: "What areas do you serve?", content: "We proudly serve events across Washington D.C., Maryland, and Northern Virginia. Contact us to confirm service availability for your specific location."},
|
|
{
|
|
id: "what-is-included", title: "What is included in your mobile espresso bar service?", content: "Our service includes a full espresso bar setup, a customized menu of drinks, professional baristas, and all necessary cups, lids, and condiments. We handle setup and breakdown so you can enjoy your event."},
|
|
]}
|
|
sideTitle="Common Questions"
|
|
sideDescription="Find quick answers to frequently asked questions about booking, services, and event details with Milk + Honey."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Book Your Espresso Experience"
|
|
description="Ready to add a touch of artisan coffee to your next event? Fill out the form below and we'll get back to you to discuss your custom needs and provide a quote."
|
|
inputs={[
|
|
{
|
|
name: "fullName", type: "text", placeholder: "Full Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Email Address", required: true,
|
|
},
|
|
{
|
|
name: "phone", type: "tel", placeholder: "Phone Number"},
|
|
{
|
|
name: "eventDate", type: "date", placeholder: "Event Date", required: true,
|
|
},
|
|
{
|
|
name: "eventType", type: "text", placeholder: "Type of Event (e.g., Wedding, Corporate, Birthday)", required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "eventDetails", placeholder: "Tell us more about your event and specific coffee needs...", rows: 4,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/crop-hand-filling-portafilter-with-coffee_23-2147830576.jpg"
|
|
imageAlt="Mobile espresso cart serving coffee at an outdoor event"
|
|
mediaAnimation="opacity"
|
|
mediaPosition="right"
|
|
buttonText="Send Inquiry"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Services", href: "#services"},
|
|
{
|
|
label: "Menu", href: "#menu"},
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
{
|
|
label: "Contact Us", href: "#contact"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="Milk + Honey"
|
|
copyrightText="© 2024 Milk + Honey. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|