368 lines
11 KiB
TypeScript
368 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="floatingGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "#home",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "#about",
|
|
},
|
|
{
|
|
name: "Menu",
|
|
id: "#menu",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "#contact",
|
|
},
|
|
]}
|
|
brandName="Mila Cafe"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
title="Welcome to Mila Cafe"
|
|
description="Discover a place where every cup tells a story. Freshly roasted coffee, handmade pastries, and a warm community await you."
|
|
buttons={[
|
|
{
|
|
text: "Visit Us",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-sitting-table_23-2148773522.jpg",
|
|
imageAlt: "cozy cafe interior warm lighting",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/delicious-coffee-cup-plate_23-2149703763.jpg",
|
|
imageAlt: "barista preparing artisanal coffee",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/croissants-with-chocolate-filling-wooden-board_114579-77537.jpg",
|
|
imageAlt: "pastries display in cafe",
|
|
},
|
|
]}
|
|
mediaAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
useInvertedBackground={false}
|
|
title="Our Passion for Coffee"
|
|
description="At Mila Cafe, we believe that coffee is more than just a drink; it's a bridge that connects people. We source only the finest beans from sustainable farms, roasting them to perfection to bring out unique, nuanced profiles in every brew."
|
|
imageSrc="http://img.b2bpic.net/free-photo/table-chairs-bar_107420-65857.jpg"
|
|
imageAlt="friendly barista greeting customer"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
id: "1",
|
|
title: "Ethically Sourced",
|
|
tags: [
|
|
"Sustainable",
|
|
"Premium",
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-coffee-beans-black-pan-dark-surface_176474-554.jpg",
|
|
imageAlt: "Top view coffee beans in black pan",
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Handcrafted Pastries",
|
|
tags: [
|
|
"Baked Daily",
|
|
"Fresh",
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/croissants-with-coffee-beans-honey-dipper-plaster-cutting-board-flat-lay_176474-8231.jpg",
|
|
imageAlt: "Croissants with coffee and beans",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Cozy Atmosphere",
|
|
tags: [
|
|
"Community",
|
|
"Relax",
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/interior-modern-cafe-with-sofas-chairs-tables_169016-36774.jpg",
|
|
imageAlt: "Interior of a modern cafe",
|
|
},
|
|
]}
|
|
title="The Mila Experience"
|
|
description="Experience the difference of artisanal quality."
|
|
/>
|
|
</div>
|
|
|
|
<div id="menu" data-section="menu">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1",
|
|
brand: "Mila",
|
|
name: "Signature Espresso",
|
|
price: "$4.50",
|
|
rating: 5,
|
|
reviewCount: "120",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-friends-drinking-coffee_23-2148395430.jpg",
|
|
},
|
|
{
|
|
id: "2",
|
|
brand: "Mila",
|
|
name: "Lavender Latte",
|
|
price: "$5.50",
|
|
rating: 5,
|
|
reviewCount: "85",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-entrepreneur-working_23-2148366585.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
brand: "Mila",
|
|
name: "Cold Brew",
|
|
price: "$5.00",
|
|
rating: 4,
|
|
reviewCount: "210",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/buffet-breakfast-with-sweets_116348-94.jpg",
|
|
},
|
|
{
|
|
id: "4",
|
|
brand: "Mila",
|
|
name: "Almond Croissant",
|
|
price: "$4.00",
|
|
rating: 5,
|
|
reviewCount: "95",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-drinking-coffee_52683-119034.jpg",
|
|
},
|
|
{
|
|
id: "5",
|
|
brand: "Mila",
|
|
name: "Avocado Toast",
|
|
price: "$9.00",
|
|
rating: 5,
|
|
reviewCount: "150",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/roasted-coffee-beans-table-closeup_250435-1137.jpg",
|
|
},
|
|
{
|
|
id: "6",
|
|
brand: "Mila",
|
|
name: "Morning Muffin",
|
|
price: "$3.50",
|
|
rating: 4,
|
|
reviewCount: "70",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/white-coffee-cup-with-eyeglasses-book-wooden-table_23-2147892948.jpg",
|
|
},
|
|
]}
|
|
title="Our Menu Favorites"
|
|
description="Hand-picked favorites for your daily ritual."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Sarah J.",
|
|
handle: "@sarahj",
|
|
testimonial: "The best coffee in town. Mila Cafe is my home away from home.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/laughing-woman-drinking-cafe_23-2147785363.jpg",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Mike R.",
|
|
handle: "@miker",
|
|
testimonial: "Consistently excellent coffee and the friendliest baristas!",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-making-coffee_23-2150354576.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Emily C.",
|
|
handle: "@emilyc",
|
|
testimonial: "Their almond croissant is a game changer. Highly recommend.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/charming-woman-drinking-hot-beverage-cafe_23-2147785358.jpg",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "David L.",
|
|
handle: "@davidl",
|
|
testimonial: "Perfect spot to work or catch up with friends. Love the vibe.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/stylish-caucasian-bearded-student-headwear-drinking-cappuccino-alone-modern-outdoor-coffee-shop-sunny-day-waiting-his-girlfriend-join-him_273609-1750.jpg",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Jessica B.",
|
|
handle: "@jessb",
|
|
testimonial: "A truly artisanal experience in every cup.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/lovely-woman-smelling-drink-cafe_23-2147785362.jpg",
|
|
},
|
|
]}
|
|
title="Loved by Our Community"
|
|
description="What our patrons have to say."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "Do you offer oat milk?",
|
|
content: "Yes, we offer oat, almond, and soy milk alternatives.",
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Is your coffee organic?",
|
|
content: "We prioritize organic and fair-trade beans whenever possible.",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Do you have Wi-Fi?",
|
|
content: "Yes, we offer free high-speed Wi-Fi for all our customers.",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/nice-female-barista-making-raf-coffee-smiling-cheerfully-looking-happy_176420-7876.jpg"
|
|
title="Commonly Asked"
|
|
description="Questions you might have."
|
|
faqsAnimation="slide-up"
|
|
imageAlt="coffee expert consulting customer"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"The Daily Grind",
|
|
"Bean Magazine",
|
|
"Coffee Connoisseur",
|
|
"Urban Eats",
|
|
"Morning Brew Weekly",
|
|
"Cafe Trends",
|
|
"Local Flavor Guides",
|
|
]}
|
|
title="Proudly Supported By"
|
|
description="Trusted by local experts and partners."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Get in Touch"
|
|
description="Questions? Feedback? Say hello!"
|
|
inputs={[
|
|
{
|
|
name: "name",
|
|
type: "text",
|
|
placeholder: "Your Name",
|
|
required: true,
|
|
},
|
|
{
|
|
name: "email",
|
|
type: "email",
|
|
placeholder: "Email Address",
|
|
required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message",
|
|
placeholder: "How can we help?",
|
|
rows: 4,
|
|
required: true,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/trendy-bakery-shop_53876-23440.jpg"
|
|
imageAlt="coffee shop exterior facade"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Our Menu",
|
|
href: "#menu",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Terms of Service",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
logoText="Mila Cafe"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|