236 lines
10 KiB
TypeScript
236 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import { Coffee, Users, Heart, Star, MapPin } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="sharp"
|
|
contentWidth="medium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Midnight Cafe"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Why Us", id: "features" },
|
|
{ name: "Community", id: "testimonials" },
|
|
{ name: "Questions", id: "faq" },
|
|
{ name: "Visit", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Visit Us Today", href: "contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCentered
|
|
title="Midnight Cafe"
|
|
description="Coffee Worth Planning Your Day Around"
|
|
background={{ variant: "downward-rays-static" }}
|
|
avatarText="Small-batch roasted. Perfectly balanced. Always worth the stop."
|
|
avatars={[
|
|
{
|
|
src: "https://img.b2bpic.net/free-photo/beautiful-fresh-relax-morning-coffee-cup-set_1150-7041.jpg", alt: "Midnight Cafe premium coffee experience"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Visit Us Today", href: "contact"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{
|
|
type: "text", content: "A beloved neighborhood hub where quality coffee meets"
|
|
},
|
|
{
|
|
type: "image", src: "https://img.b2bpic.net/free-photo/group-friends-meeting-restaurant_23-2148395317.jpg", alt: "Midnight Cafe warm community space"
|
|
},
|
|
{
|
|
type: "text", content: "genuine connection"
|
|
}
|
|
]}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{
|
|
text: "Our Story", href: "#"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSix
|
|
title="Why Midnight Cafe"
|
|
description="Discover what makes us Iowa City's most beloved coffee destination"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Small-Batch Roasted Excellence", description: "Hand-selected beans roasted with precision to bring out the perfect balance of flavor, complexity, and smoothness in every cup", imageSrc: "https://img.b2bpic.net/free-photo/steaming-cup-masala-chai-with-spices-coffee-beans-dark-surface_9975-124574.jpg"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Natural Light & Comfort", description: "Thoughtfully designed space flooded with natural light, creating an inviting atmosphere perfect for working, studying, or simply pausing to recharge", imageSrc: "https://img.b2bpic.net/free-photo/close-up-woman-with-laptop-table-restaurant_23-2147871263.jpg"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Community First Philosophy", description: "More than coffee—we're a gathering place where professionals, students, and neighbors connect, collaborate, and build lasting relationships", imageSrc: "https://img.b2bpic.net/free-photo/friends-doing-toast-outdoors_53876-144772.jpg"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
title="Trusted by Our Community"
|
|
description="Join thousands of daily visitors who have made Midnight Cafe their favorite neighborhood spot"
|
|
metrics={[
|
|
{
|
|
id: "1", icon: Coffee,
|
|
title: "Years of Excellence", value: "8+"
|
|
},
|
|
{
|
|
id: "2", icon: Users,
|
|
title: "Daily Visitors", value: "500+"
|
|
},
|
|
{
|
|
id: "3", icon: Heart,
|
|
title: "Loyal Members", value: "2000+"
|
|
},
|
|
{
|
|
id: "4", icon: Star,
|
|
title: "Average Rating", value: "4.9★"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Mitchell", imageSrc: "https://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg"
|
|
},
|
|
{
|
|
id: "2", name: "James Chen", imageSrc: "https://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Rodriguez", imageSrc: "https://img.b2bpic.net/free-photo/confident-attractive-asian-businesswoman-looking-camera-head-shot-portrait_1163-4734.jpg"
|
|
},
|
|
{
|
|
id: "4", name: "David Thompson", imageSrc: "https://img.b2bpic.net/free-photo/closeup-portrait-young-asian-businesswoman_1262-1510.jpg"
|
|
}
|
|
]}
|
|
cardTitle="Over 2000 coffee lovers trust Midnight Cafe as their daily destination for quality, comfort, and community"
|
|
cardTag="Join Our Community"
|
|
cardAnimation="opacity"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Everything you need to know about Midnight Cafe"
|
|
textPosition="left"
|
|
faqsAnimation="smooth"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What makes your coffee special?", content: "We source small-batch, specialty-grade beans from sustainable farms and roast them in-house to achieve the perfect balance. Every cup is crafted with precision to highlight the unique characteristics of each bean."
|
|
},
|
|
{
|
|
id: "2", title: "Is Midnight Cafe a good workspace?", content: "Absolutely! Our space is designed specifically for productivity with plenty of natural light, comfortable seating, reliable wifi, and a quiet, focused atmosphere. Whether you're studying or working, you'll find the perfect environment here."
|
|
},
|
|
{
|
|
id: "3", title: "Do you have loyalty or membership programs?", content: "Yes! Our membership program offers exclusive perks including discounted coffee, priority seating, special event access, and member-only blends. Join our community today and start earning rewards."
|
|
},
|
|
{
|
|
id: "4", title: "What are your hours?", content: "We're open Monday through Friday from 6:30 AM to 9 PM, Saturday from 7 AM to 10 PM, and Sunday from 7 AM to 8 PM. We're always here when you need your perfect pause."
|
|
},
|
|
{
|
|
id: "5", title: "Can we host private events?", content: "We'd love to host your gathering! We offer space for book clubs, team meetings, and small celebrations. Contact us directly to discuss your event needs and availability."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Visit Us Today"
|
|
tagIcon={MapPin}
|
|
title="Ready to Experience Midnight Cafe?"
|
|
description="Join thousands of coffee lovers who have made us their favorite neighborhood hub. Stop by today for coffee worth planning your day around."
|
|
buttons={[
|
|
{
|
|
text: "Get Directions", href: "#"
|
|
},
|
|
{
|
|
text: "Contact Us", href: "#"
|
|
}
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Midnight Cafe"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "About", href: "about" },
|
|
{ label: "Why Us", href: "features" },
|
|
{ label: "Community", href: "testimonials" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Hours", href: "#" },
|
|
{ label: "Location", href: "#" },
|
|
{ label: "Contact", href: "contact" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Membership", href: "#" },
|
|
{ label: "Events", href: "#" },
|
|
{ label: "Instagram", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |