203 lines
9.3 KiB
TypeScript
203 lines
9.3 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import { ArrowRight, Coffee, Heart, Mail, Sparkles, Star } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
const handleEmailSignup = (email: string) => {
|
|
console.log('Email signup:', email);
|
|
};
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLarge"
|
|
background="floatingGradient"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Midnight"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Experience", id: "experience" },
|
|
{ name: "Reviews", id: "testimonial" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Visit Us", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboardSplit
|
|
logoText="MIDNIGHT"
|
|
description="The best coffee you've ever had. Plan your day around it. Stay for the atmosphere. Come back for the people."
|
|
buttons={[
|
|
{ text: "View Menu", href: "#experience" },
|
|
{ text: "Visit Us Today", href: "#contact" }
|
|
]}
|
|
layoutOrder="default"
|
|
imageSrc="https://img.b2bpic.net/free-photo/espresso-details-close-up-pouring-coffee-into-white-cup-from-coffee-pot-selective-focus-concept-making-coffee-bar-pub-restaurant-brewing-coffee-cezve_166373-2016.jpg"
|
|
imageAlt="Espresso pour with professional moody lighting"
|
|
mediaAnimation="opacity"
|
|
frameStyle="card"
|
|
background={{ variant: "radial-gradient" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialproof" data-section="socialproof">
|
|
<SocialProofOne
|
|
title="Loved by Our Community"
|
|
description="Join the people who plan their day around Midnight Cafe"
|
|
tag="Reviews"
|
|
tagIcon={Star}
|
|
tagAnimation="blur-reveal"
|
|
names={[
|
|
"Iowa City Locals", "Study Groups", "Coffee Enthusiasts", "Late-Night Learners", "Friend Groups", "Remote Workers", "Neighborhood Favorites"
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={35}
|
|
showCard={true}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="Our Story"
|
|
tagIcon={Coffee}
|
|
tagAnimation="slide-up"
|
|
title="More Than Coffee. It's a Mood."
|
|
description="Midnight Cafe is where natural light meets late-night energy."
|
|
subdescription="Where you study for hours, meet friends, fall in love with espresso, and stay longer than you planned."
|
|
icon={Heart}
|
|
imageSrc="https://img.b2bpic.net/free-photo/coffee-maker-machine-table_23-2148937228.jpg"
|
|
imageAlt="Coffee craft and artisan preparation"
|
|
mediaAnimation="blur-reveal"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="experience" data-section="experience">
|
|
<FeatureCardTwentySix
|
|
title="Why People Drive Out of Their Way"
|
|
description="Every element is obsessively crafted for your perfect moment"
|
|
tag="Experience"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
title: "The Atmosphere", description: "Natural light by day. Intimate glow by night. Your perfect backdrop.", imageSrc: "https://img.b2bpic.net/free-photo/woman-works-cafe-evening_1153-3549.jpg", imageAlt: "Warm cafe interior with natural light", buttonIcon: ArrowRight
|
|
},
|
|
{
|
|
title: "Perfect Every Time", description: "Consistency you can count on. Coffee crafted with obsessive precision.", imageSrc: "https://img.b2bpic.net/free-photo/man-enjoying-cup-hot-coffee-cafe_53876-88441.jpg", imageAlt: "Professional latte art", buttonIcon: ArrowRight
|
|
},
|
|
{
|
|
title: "The People", description: "Friendly, responsive, real. We remember you and we care.", imageSrc: "https://img.b2bpic.net/free-photo/handsome-barista-serving-coffee-bring-cup-standing-black-apron-with-friendly-smile_1258-41034.jpg", imageAlt: "Smiling barista in professional setting", buttonIcon: ArrowRight
|
|
},
|
|
{
|
|
title: "The Intention", description: "We're here because we love this. Passion shows in every cup.", imageSrc: "https://img.b2bpic.net/free-photo/cozy-home-composition-with-cup-coffee-candle-decorative-details_169016-23101.jpg", imageAlt: "Midnight cafe glowing with warm light", buttonIcon: ArrowRight
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Reserve Your Spot", href: "#contact" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardFifteen
|
|
testimonial="Without a doubt the best coffee I've ever had. I plan my day around a stop to Midnight. My favorite coffee shop in Iowa City. Perfect and consistent every time."
|
|
rating={5}
|
|
author="Lisa & Meredith, Loyal Customers"
|
|
avatars={[
|
|
{
|
|
src: "https://img.b2bpic.net/free-photo/handsome-barista-serving-coffee-bring-cup-standing-black-apron-with-friendly-smile_1258-41034.jpg", alt: "Customer testimonial avatar 1"
|
|
},
|
|
{
|
|
src: "https://img.b2bpic.net/free-photo/croissant-coffee-food-photography_53876-104492.jpg", alt: "Customer testimonial avatar 2"
|
|
},
|
|
{
|
|
src: "https://img.b2bpic.net/free-photo/brewing-coffee-coffee-is-poured-into-glass-cup-from-copper-coffee-maker-lunch-old-cafe-vertical-shot-selective-focus_166373-2509.jpg", alt: "Customer testimonial avatar 3"
|
|
},
|
|
{
|
|
src: "https://img.b2bpic.net/free-photo/woman-works-cafe-evening_1153-3549.jpg", alt: "Customer testimonial avatar 4"
|
|
}
|
|
]}
|
|
ratingAnimation="blur-reveal"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get Connected"
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
title="Join the Midnight List"
|
|
description="Secret drinks. Early releases. Exclusive offers. Plan your day around our best moments."
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Sign Me Up"
|
|
termsText="We respect your inbox. Unsubscribe anytime. You're in good hands."
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
onSubmit={handleEmailSignup}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Cafe", items: [
|
|
{ label: "Home", href: "#hero" },
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Experience", href: "#experience" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "Email", href: "mailto:hello@midnightcafe.local" },
|
|
{ label: "Directions", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Hours", items: [
|
|
{ label: "Monday - Sunday", href: "#" },
|
|
{ label: "6:30 AM - 10:00 PM", href: "#" },
|
|
{ label: "Iowa City, Iowa", href: "#" },
|
|
{ label: "Come By", href: "#contact" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Midnight Cafe | Plan Your Day Around Us"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |