338 lines
22 KiB
TypeScript
338 lines
22 KiB
TypeScript
"use client";
|
|
|
|
import { Coffee, Heart, Star, UtensilsCrossed, Flower, Sparkles, Home, Users, Mail, Utensils } from "lucide-react";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
|
|
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
|
|
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Butter & Cup"
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Menu", id: "menu" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Gallery", id: "gallery" }
|
|
]}
|
|
button={{ text: "Reserve a Table", href: "#contact" }}
|
|
className="backdrop-blur-md"
|
|
buttonClassName="bg-gradient-to-r from-[#d4a574] to-[#e6b88a] hover:shadow-lg transition-all"
|
|
buttonTextClassName="text-white font-semibold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero" className="bg-gradient-to-b from-[#fdf8f3] via-[#fde8dc] to-[#f0e6dc]">
|
|
<HeroBillboardTestimonial
|
|
title="Welcome to Butter & Cup Café & Tea House"
|
|
description="Experience cozy elegance with specialty coffee, matcha drinks, high tea experiences, and fresh pastries in our Instagram-worthy vintage-inspired space. Perfect for dates, celebrations, studying, or simply unwinding with friends."
|
|
background={{ variant: "plain" }}
|
|
tag="✨ Est. with Love"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "View Our Menu", href: "#products" },
|
|
{ text: "Reserve a Table", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
name: "Sarah M.", handle: "@cozyseeker", testimonial: "The most beautiful café I've ever visited. Every corner is Instagram-perfect!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-smiling-hipster-girl-trendy-summer-clothes-carefree-woman-sitting-veranda-terrace-cafe-drinking-coffee-positive-model-having-fun-dreams_158538-15946.jpg", imageAlt: "happy customer portrait café setting"
|
|
},
|
|
{
|
|
name: "Emma L.", handle: "@tealovers", testimonial: "Their high tea experience is absolutely divine. Worth every penny.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/girl-casualwear_1098-13407.jpg", imageAlt: "young woman café date romantic"
|
|
},
|
|
{
|
|
name: "Jessica T.", handle: "@cafeaddict", testimonial: "Caramel macchiatos here are perfection. The ambiance makes me want to stay all day.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-sitting-with-coffee-cup_23-2148095736.jpg", imageAlt: "woman with tea cup smiling"
|
|
},
|
|
{
|
|
name: "Mia R.", handle: "@pastrygoals", testimonial: "Fresh croissants and brownies that melt in your mouth. Pure heaven!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg", imageAlt: "woman enjoying pastry café"
|
|
}
|
|
]}
|
|
testimonialRotationInterval={5000}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/beautiful-tea-party-composition-table_23-2149064408.jpg"
|
|
imageAlt="Cozy café interior with soft lighting and vintage decor"
|
|
mediaAnimation="opacity"
|
|
ariaLabel="Butter & Cup Café hero section with testimonials"
|
|
className="py-16 md:py-24"
|
|
containerClassName="mx-auto max-w-6xl px-4"
|
|
titleClassName="text-4xl md:text-5xl font-bold text-center mb-4"
|
|
descriptionClassName="text-lg md:text-xl text-center mb-8 max-w-2xl mx-auto"
|
|
buttonContainerClassName="flex gap-4 justify-center flex-wrap"
|
|
buttonClassName="px-6 py-3 rounded-full font-semibold"
|
|
tagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-opacity-10 mb-4"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about" className="bg-[#fdf8f3]">
|
|
<TestimonialAboutCard
|
|
tag="Our Story"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
title="Crafted with Care & Passion"
|
|
description="Butter & Cup is more than a café—it's a sanctuary of warmth and elegance. Founded with a love for specialty beverages and fresh-baked goodness, we've created a space where memories are made, one cup at a time."
|
|
subdescription="Every element, from our vintage furniture to our floral decorations and soft lighting, is carefully curated to provide you with the most inviting and Instagram-worthy experience possible."
|
|
icon={Coffee}
|
|
imageSrc="http://img.b2bpic.net/free-photo/friends-cheering-with-cups-tea_23-2148693107.jpg"
|
|
imageAlt="vintage café interior story aesthetic"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
ariaLabel="About Butter & Cup Café section"
|
|
className="py-16 md:py-24"
|
|
containerClassName="mx-auto max-w-5xl px-4"
|
|
cardClassName="bg-gradient-radial backdrop-blur-sm rounded-3xl p-8 md:p-12"
|
|
contentClassName="grid grid-cols-1 md:grid-cols-2 gap-8 items-center"
|
|
tagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-opacity-10 mb-4"
|
|
titleClassName="text-3xl md:text-4xl font-bold mb-4"
|
|
descriptionClassName="text-base md:text-lg mb-4 leading-relaxed"
|
|
subdescriptionClassName="text-sm md:text-base opacity-90 leading-relaxed"
|
|
iconBoxClassName="flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-r from-[#d4a574] to-[#e6b88a]"
|
|
iconClassName="w-8 h-8 text-white"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features" className="bg-gradient-to-b from-[#fdf8f3] to-[#fde8dc]">
|
|
<FeatureHoverPattern
|
|
title="Why Choose Butter & Cup?"
|
|
description="Every visit is designed to delight your senses and create unforgettable moments in our warm, welcoming café."
|
|
tag="✨ Specialty Café Experience"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Visit Us Today", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="blur-reveal"
|
|
features={[
|
|
{
|
|
icon: Coffee,
|
|
title: "Specialty Coffee & Matcha", description: "Handcrafted caramel macchiatos, iced matcha lattes, and specialty teas prepared with precision and love.", button: { text: "Learn More", href: "#menu" }
|
|
},
|
|
{
|
|
icon: UtensilsCrossed,
|
|
title: "Fresh Baked Goods", description: "Golden croissants, delicate scones, decadent brownies, and artisan cookies baked fresh daily. Beautifully displayed in glass cases.", button: { text: "View Pastries", href: "#products" }
|
|
},
|
|
{
|
|
icon: Flower,
|
|
title: "High Tea Experiences", description: "Elegant tiered trays with premium teas, pastries, and petit fours. Perfect for special celebrations and leisurely afternoons.", button: { text: "Book High Tea", href: "#contact" }
|
|
},
|
|
{
|
|
icon: Sparkles,
|
|
title: "Instagram-Worthy Spaces", description: "Every corner designed for the perfect photo. From our floral wallpaper to our dedicated photo corner with artistic backdrops.", button: { text: "See Photos", href: "#gallery" }
|
|
},
|
|
{
|
|
icon: Home,
|
|
title: "Cozy Atmosphere", description: "Vintage furniture, comfortable seating, soft lighting, hanging plants, and relaxing music create the perfect sanctuary.", button: { text: "Reserve", href: "#contact" }
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Warm Community", description: "Friendly, attentive staff dedicated to making every guest feel welcomed, valued, and part of our café family.", button: { text: "Connect", href: "#contact" }
|
|
}
|
|
]}
|
|
ariaLabel="Features section for Butter & Cup Café"
|
|
className="py-16 md:py-24"
|
|
containerClassName="mx-auto max-w-6xl px-4"
|
|
titleClassName="text-3xl md:text-4xl font-bold text-center mb-4"
|
|
descriptionClassName="text-base md:text-lg text-center mb-12 max-w-2xl mx-auto"
|
|
tagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-opacity-10 mb-4"
|
|
gridClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
|
|
cardClassName="p-6 rounded-2xl backdrop-blur-sm hover:shadow-lg transition-all"
|
|
iconContainerClassName="w-12 h-12 rounded-full bg-gradient-to-r from-[#d4a574] to-[#e6b88a] flex items-center justify-center mb-4"
|
|
iconClassName="w-6 h-6 text-white"
|
|
cardTitleClassName="text-xl font-semibold mb-2"
|
|
cardDescriptionClassName="text-sm opacity-90 mb-4"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products" className="bg-[#fdf8f3]">
|
|
<ProductCardOne
|
|
title="Our Menu & Offerings"
|
|
description="Curated selections of specialty beverages and fresh pastries, each crafted for perfection and Instagram-worthy presentation."
|
|
tag="🍰 Featured Items"
|
|
tagIcon={Utensils}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="bento-grid"
|
|
animationType="blur-reveal"
|
|
products={[
|
|
{
|
|
id: "1", name: "Caramel Macchiato", price: "$6.50", imageSrc: "http://img.b2bpic.net/free-photo/breakfast-composition_23-2148104773.jpg", imageAlt: "caramel macchiato latte art presentation"
|
|
},
|
|
{
|
|
id: "2", name: "Croissants & Scones", price: "$4.50 - $5.50", imageSrc: "http://img.b2bpic.net/free-photo/various-cakes-board-blue-background-high-quality-photo_114579-75376.jpg?_wi=1", imageAlt: "fresh croissants scones glass case bakery"
|
|
},
|
|
{
|
|
id: "3", name: "High Tea Experience", price: "$28.00", imageSrc: "http://img.b2bpic.net/free-photo/top-view-tea-cup-teapot_23-2148786599.jpg?_wi=1", imageAlt: "high tea service tiered stand pastry"
|
|
},
|
|
{
|
|
id: "4", name: "Iced Matcha Latte", price: "$7.00", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-pouring-tea-teacup-using-strainer_23-2148567573.jpg", imageAlt: "iced matcha latte green tea presentation"
|
|
},
|
|
{
|
|
id: "5", name: "Fresh Brownies & Cookies", price: "$3.50 - $4.50", imageSrc: "http://img.b2bpic.net/free-photo/various-cakes-board-blue-background-high-quality-photo_114579-75376.jpg?_wi=2", imageAlt: "fresh croissants scones glass case bakery"
|
|
},
|
|
{
|
|
id: "6", name: "Specialty Tea Service", price: "$8.00 - $12.00", imageSrc: "http://img.b2bpic.net/free-photo/top-view-tea-cup-teapot_23-2148786599.jpg?_wi=2", imageAlt: "high tea service tiered stand pastry"
|
|
}
|
|
]}
|
|
ariaLabel="Products section showcasing Butter & Cup menu"
|
|
className="py-16 md:py-24"
|
|
containerClassName="mx-auto max-w-6xl px-4"
|
|
titleClassName="text-3xl md:text-4xl font-bold text-center mb-4"
|
|
descriptionClassName="text-base md:text-lg text-center mb-12 max-w-2xl mx-auto"
|
|
tagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-opacity-10 mb-4"
|
|
gridClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-max"
|
|
cardClassName="rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all backdrop-blur-sm"
|
|
imageClassName="w-full h-64 object-cover rounded-t-2xl"
|
|
cardNameClassName="text-xl font-semibold mt-4 px-4"
|
|
cardPriceClassName="text-lg font-bold text-[#d4a574] px-4 pb-4"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials" className="bg-gradient-to-b from-[#fde8dc] to-[#f0e6dc]">
|
|
<TestimonialCardFive
|
|
title="Loved by Our Guests"
|
|
description="Read what our customers have to say about their Butter & Cup experience. From perfect date nights to cozy study sessions, every moment matters."
|
|
tag="⭐ Guest Stories"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Mitchell", date: "2 weeks ago", title: "Date Night Heaven", quote: "We came here for our anniversary and it was absolutely magical. The ambiance, the service, and those caramel macchiatos... perfection!", tag: "Anniversary", avatarSrc: "http://img.b2bpic.net/free-photo/young-beautiful-smiling-hipster-girl-trendy-summer-clothes-carefree-woman-sitting-veranda-terrace-cafe-drinking-coffee-positive-model-having-fun-dreams_158538-15946.jpg", avatarAlt: "happy customer portrait café setting"
|
|
},
|
|
{
|
|
id: "2", name: "Emma Johnson", date: "1 week ago", title: "High Tea is a Must", quote: "The high tea experience was the highlight of my birthday celebration. Every detail was elegant and the food was exquisite.", tag: "Birthday", avatarSrc: "http://img.b2bpic.net/free-photo/girl-casualwear_1098-13407.jpg", avatarAlt: "young woman café date romantic"
|
|
},
|
|
{
|
|
id: "3", name: "Jessica Torres", date: "3 days ago", title: "My Study Sanctuary", quote: "I've been coming here every day this week to study. The quiet, cozy atmosphere and perfect WiFi make it my favorite spot.", tag: "Studying", avatarSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-sitting-with-coffee-cup_23-2148095736.jpg", avatarAlt: "woman with tea cup smiling"
|
|
},
|
|
{
|
|
id: "4", name: "Mia Rodriguez", date: "1 day ago", title: "Instagram Dreams", quote: "Every corner of this place is Instagram-worthy! The photo corner is adorable and my followers loved every single shot.", tag: "Photography", avatarSrc: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg", avatarAlt: "woman enjoying pastry café"
|
|
},
|
|
{
|
|
id: "5", name: "Rachel Chen", date: "3 days ago", title: "Perfect for Group Hangouts", quote: "Met my girls here for matcha drinks and pastries. The seating is comfortable, the vibe is perfect, and the staff is so friendly!", tag: "Friends", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-women-celebrating-birthday_23-2149182639.jpg", avatarAlt: "couple celebration café vintage aesthetic"
|
|
},
|
|
{
|
|
id: "6", name: "Lisa Anderson", date: "1 week ago", title: "Best Croissants in Town", quote: "The fresh pastries are incredible. I get their croissants and brownies every time I visit. Pure quality and craftsmanship.", tag: "Pastries", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-girl-with-curly-hair-listening-music-sitting-restaurant_651396-865.jpg", avatarAlt: "studying student café relaxed"
|
|
}
|
|
]}
|
|
ariaLabel="Testimonials section for Butter & Cup Café"
|
|
className="py-16 md:py-24"
|
|
containerClassName="mx-auto max-w-6xl px-4"
|
|
titleClassName="text-3xl md:text-4xl font-bold text-center mb-4"
|
|
descriptionClassName="text-base md:text-lg text-center mb-12 max-w-2xl mx-auto"
|
|
tagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-opacity-10 mb-4"
|
|
cardClassName="p-6 rounded-2xl backdrop-blur-sm hover:shadow-lg transition-all"
|
|
cardTagClassName="inline-block px-3 py-1 text-xs font-semibold rounded-full bg-opacity-20 mb-3"
|
|
cardTitleClassName="text-lg font-bold mb-2"
|
|
cardQuoteClassName="text-sm mb-4 leading-relaxed italic"
|
|
cardAuthorClassName="flex items-center gap-3"
|
|
cardAvatarClassName="w-10 h-10 rounded-full object-cover"
|
|
cardNameClassName="font-semibold text-sm"
|
|
cardDateClassName="text-xs opacity-70"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact" className="bg-[#fdf8f3]">
|
|
<ContactCTA
|
|
tag="Get in Touch"
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
title="Reserve Your Table or Get More Information"
|
|
description="Visit us for a cozy coffee, celebrate with high tea, or simply relax with friends. We can't wait to welcome you to Butter & Cup!"
|
|
buttons={[
|
|
{ text: "Call Us", href: "tel:+1-555-0123" },
|
|
{ text: "Email Us", href: "mailto:hello@butterandcup.com" },
|
|
{ text: "Find Us", href: "https://maps.google.com" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
ariaLabel="Contact section for Butter & Cup Café"
|
|
className="py-16 md:py-24"
|
|
containerClassName="mx-auto max-w-4xl px-4"
|
|
contentClassName="backdrop-blur-sm rounded-3xl p-8 md:p-12"
|
|
titleClassName="text-3xl md:text-4xl font-bold text-center mb-4"
|
|
descriptionClassName="text-base md:text-lg text-center mb-8 max-w-2xl mx-auto"
|
|
tagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-opacity-10 mb-4"
|
|
buttonContainerClassName="flex gap-4 justify-center flex-wrap"
|
|
buttonClassName="px-6 py-3 rounded-full font-semibold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer" className="bg-gradient-to-b from-[#f0e6dc] to-[#fde8dc]">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Location", items: [
|
|
{ label: "123 Garden Street, Café District", href: "https://maps.google.com" },
|
|
{ label: "Open Daily 8am - 8pm", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Hours", items: [
|
|
{ label: "Weekdays: 8am - 8pm", href: "#" },
|
|
{ label: "Weekends: 9am - 9pm", href: "#" },
|
|
{ label: "Special Hours on Holidays", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Contact", items: [
|
|
{ label: "+1 (555) 0123", href: "tel:+1-555-0123" },
|
|
{ label: "hello@butterandcup.com", href: "mailto:hello@butterandcup.com" },
|
|
{ label: "@butterandcupcafe", href: "https://instagram.com" }
|
|
]
|
|
},
|
|
{
|
|
title: "Follow Us", items: [
|
|
{ label: "Instagram", href: "https://instagram.com/butterandcupcafe" },
|
|
{ label: "Facebook", href: "https://facebook.com/butterandcupcafe" },
|
|
{ label: "TikTok", href: "https://tiktok.com/@butterandcupcafe" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2024 Butter & Cup Café & Tea House. All rights reserved."
|
|
bottomRightText="Crafted with ☕ and 🫖 | Privacy Policy"
|
|
ariaLabel="Footer for Butter & Cup Café"
|
|
className="bg-gradient-to-b from-[#f0e6dc] to-[#fde8dc]"
|
|
containerClassName="mx-auto max-w-6xl px-4 py-12"
|
|
columnsClassName="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"
|
|
columnClassName="flex flex-col"
|
|
columnTitleClassName="font-semibold text-lg mb-4 text-[#3d2817]"
|
|
columnItemClassName="text-sm mb-2 hover:text-[#d4a574] transition-colors"
|
|
bottomContainerClassName="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-[#ffc0cb]"
|
|
bottomLeftTextClassName="text-xs opacity-75 mb-4 md:mb-0"
|
|
bottomRightTextClassName="text-xs opacity-75"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |