272 lines
17 KiB
TypeScript
272 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
|
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import { Coffee, Heart, Sparkles, Mail, Linkedin, Instagram, Twitter, Globe } from "lucide-react";
|
|
|
|
export default function CafeNoir() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="large"
|
|
background="circleGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Menu", id: "products" },
|
|
{ name: "Ambiance", id: "features" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Reserve Now", href: "contact" }}
|
|
brandName="Café Noir"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
title="Welcome to Café Noir"
|
|
description="Discover the perfect blend of artisan coffee, cozy ambiance, and exceptional service. Your sanctuary for quality moments."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Premium Coffee Experience"
|
|
tagIcon={Coffee}
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/cup-coffee-with-saucer-table-with-defocus-cafe-background_23-2148209262.jpg", imageAlt: "Artisan latte with latte art" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-couple-summer-terrace_496169-2514.jpg", imageAlt: "Cozy café interior with warm lighting" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/delicious-vegan-baked-products-arrangement_23-2150251787.jpg", imageAlt: "Coffee and pastry pairing" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/smiley-male-employee-coffee-shop_23-2148366554.jpg", imageAlt: "Professional barista preparing coffee" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-reading-sitting-cafe_176420-5935.jpg", imageAlt: "Outdoor café seating urban street" }
|
|
]}
|
|
buttons={[
|
|
{ text: "View Menu", href: "products" },
|
|
{ text: "Reserve Table", href: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
tag="Our Story"
|
|
tagIcon={Heart}
|
|
title="Crafted with Passion Since 2015"
|
|
description="Café Noir began as a dream to create a sanctuary where coffee lovers could gather, work, and connect. We source only the finest single-origin beans, roasted fresh daily by our expert baristas. Every cup tells a story of craftsmanship and dedication."
|
|
metrics={[
|
|
{ value: "5,000+", title: "Happy Customers Monthly" },
|
|
{ value: "12", title: "Years of Excellence" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/modern-sauna-with-panoramic-windows-wooden-design_169016-70021.jpg?_wi=1"
|
|
imageAlt="Our café interior with warm ambiance"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="none"
|
|
metricsAnimation="none"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
title="Our Signature Coffees"
|
|
description="Handcrafted beverages made with premium beans and expert technique. Experience the perfect cup."
|
|
tag="Specialty Menu"
|
|
tagIcon={Sparkles}
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", brand: "Café Noir", name: "Classic Espresso", price: "$3.50", rating: 5,
|
|
reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/layered-espresso-drink_23-2151961365.jpg", imageAlt: "Double shot espresso"
|
|
},
|
|
{
|
|
id: "2", brand: "Café Noir", name: "Silky Cappuccino", price: "$4.50", rating: 5,
|
|
reviewCount: "2.8k", imageSrc: "http://img.b2bpic.net/free-photo/elevated-view-coffee-cup-latte-near-people-studying-caf_23-2148209279.jpg", imageAlt: "Cappuccino with latte art"
|
|
},
|
|
{
|
|
id: "3", brand: "Café Noir", name: "Bold Macchiato", price: "$4.00", rating: 5,
|
|
reviewCount: "1.5k", imageSrc: "http://img.b2bpic.net/free-photo/front-view-coffee-cocktail-with-ice-coffee-seeds-grey-desk-drink-juice-cocktail_140725-25965.jpg", imageAlt: "Marked espresso with foam"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNineteen
|
|
title="Why Choose Café Noir"
|
|
description="Discover the unique experiences that make our café special"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
tag: "Digital Sanctuary", title: "High-Speed WiFi", subtitle: "Work and connect seamlessly", description: "Fast, reliable internet perfect for remote workers, students, and creators. Free for all our guests.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-sitting-table_23-2148968931.jpg", imageAlt: "Laptop workspace in café"
|
|
},
|
|
{
|
|
id: 2,
|
|
tag: "Atmosphere", title: "Curated Ambiance", subtitle: "Experience tranquility and culture", description: "Warm lighting, carefully selected music, and artistic décor create the perfect environment for conversation and creation.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-people-making-music_23-2151169650.jpg", imageAlt: "Café warm lighting and ambiance"
|
|
},
|
|
{
|
|
id: 3,
|
|
tag: "Culinary", title: "Fresh Pastries Daily", subtitle: "Baked fresh every morning", description: "Our pastry chef creates delicious croissants, pain au chocolat, and seasonal treats using premium ingredients.", imageSrc: "http://img.b2bpic.net/free-photo/tasty-breakfast-server_23-2147666219.jpg", imageAlt: "Fresh pastries display"
|
|
},
|
|
{
|
|
id: 4,
|
|
tag: "Community", title: "Private Events", subtitle: "Your space for gatherings", description: "Host your meetings, celebrations, and events in our dedicated space with full café amenities and catering options.", imageSrc: "http://img.b2bpic.net/free-photo/wedding-reception-room-with-decorated-table-setting-sea-view-through-window_637285-984.jpg", imageAlt: "Café event space gathering"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardTwo
|
|
title="Meet Our Passionate Team"
|
|
description="The heart and soul behind every perfect cup"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={true}
|
|
members={[
|
|
{
|
|
id: "1", name: "Marco Rossi", role: "Head Barista", description: "Passionate coffee expert with 8 years of barista experience. Specializes in latte art and espresso extraction.", imageSrc: "http://img.b2bpic.net/free-photo/classy-bellboy-smiling-camera_482257-109699.jpg", imageAlt: "Marco Rossi, Head Barista", socialLinks: [
|
|
{ icon: Linkedin, url: "https://linkedin.com" },
|
|
{ icon: Instagram, url: "https://instagram.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "2", name: "Sophie Laurent", role: "Master Barista", description: "Dedicated to the craft of coffee. Known for her innovative flavor combinations and customer service excellence.", imageSrc: "http://img.b2bpic.net/free-photo/man-placing-tray-cups-coffee-cookies_23-2148326723.jpg", imageAlt: "Sophie Laurent, Master Barista", socialLinks: [
|
|
{ icon: Linkedin, url: "https://linkedin.com" },
|
|
{ icon: Twitter, url: "https://twitter.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "3", name: "Giovanni Espresso", role: "Founder & Owner", description: "Visionary entrepreneur with a lifelong love for exceptional coffee. Built Café Noir on principles of quality and community.", imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1613.jpg", imageAlt: "Giovanni Espresso, Founder & Owner", socialLinks: [
|
|
{ icon: Linkedin, url: "https://linkedin.com" },
|
|
{ icon: Globe, url: "https://example.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "4", name: "Elena Dolce", role: "Pastry Chef", description: "Artisan baker creating daily delights. Brings French baking traditions to every croissant and pastry.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-baker_23-2149233681.jpg", imageAlt: "Elena Dolce, Pastry Chef", socialLinks: [
|
|
{ icon: Instagram, url: "https://instagram.com" },
|
|
{ icon: Globe, url: "https://example.com" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="Loved by Our Community"
|
|
description="Real stories from our valued customers"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Thompson", handle: "@sarahdesigns", testimonial: "Café Noir is my creative sanctuary. The coffee is exceptional, and the atmosphere inspires my best work. Highly recommended!", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-feedback-concept_23-2148958049.jpg", imageAlt: "Sarah Thompson"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen", handle: "@miketech", testimonial: "Best espresso in town! The baristas truly know their craft. I've been coming here daily for over a year.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-woman_23-2147823623.jpg", imageAlt: "Michael Chen"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Rodriguez", handle: "@emmawrites", testimonial: "The ambiance, the service, the pastries—everything is perfect. Café Noir feels like home to me.", imageSrc: "http://img.b2bpic.net/free-photo/happy-beautiful-young-woman-standing-posing-co-working-coffee-shop-interior-looking-camera-smiling_74855-9955.jpg", imageAlt: "Emma Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "David Park", handle: "@davidphoto", testimonial: "Fantastic place to hang out with friends or work alone. The staff is always welcoming and attentive.", imageSrc: "http://img.b2bpic.net/free-photo/happy-caucasian-adult-brunette-woman-smiles-puts-her-thumb-forefinger-together-showing-that-everything-is-ok_197531-31190.jpg", imageAlt: "David Park"
|
|
},
|
|
{
|
|
id: "5", name: "Lisa Anderson", handle: "@lisabreads", testimonial: "The fresh pastries here are absolutely delicious. Paired with their cappuccino, pure heaven!", imageSrc: "http://img.b2bpic.net/free-photo/person-paying-with-nfc-technology-restaurant_23-2150039475.jpg", imageAlt: "Lisa Anderson"
|
|
},
|
|
{
|
|
id: "6", name: "James Wilson", handle: "@jamescoffee", testimonial: "A true coffee lover's paradise. Every visit is a masterclass in quality and hospitality.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-blonde-woman_273609-12060.jpg", imageAlt: "James Wilson"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about Café Noir"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
mediaPosition="left"
|
|
faqs={[
|
|
{ id: "1", title: "What hours are you open?", content: "We're open Monday to Friday from 7 AM to 8 PM, Saturday 8 AM to 9 PM, and Sunday 8 AM to 7 PM. Closed on major holidays." },
|
|
{ id: "2", title: "Do you offer WiFi?", content: "Yes! High-speed WiFi is free for all guests. Perfect for working, studying, or browsing. No password needed on our main network." },
|
|
{ id: "3", title: "Can I reserve a table or space?", content: "Absolutely! Contact us for table reservations or inquire about our private event space. We accommodate groups of any size." },
|
|
{ id: "4", title: "What coffee beans do you use?", content: "We source premium single-origin beans from ethical suppliers worldwide. Our beans are roasted fresh daily in-house." },
|
|
{ id: "5", title: "Do you have dietary options?", content: "Yes, we offer vegan pastries, lactose-free milk alternatives, and gluten-free options. Ask our staff for recommendations." },
|
|
{ id: "6", title: "Can I host an event here?", content: "Our dedicated event space is perfect for meetings, celebrations, and gatherings. We offer catering and full café amenities." }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/modern-sauna-with-panoramic-windows-wooden-design_169016-70021.jpg?_wi=2"
|
|
imageAlt="Café interior FAQ"
|
|
mediaAnimation="none"
|
|
faqsAnimation="none"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Stay Connected"
|
|
tagIcon={Mail}
|
|
title="Join Our Coffee Lovers Community"
|
|
description="Subscribe to our newsletter for exclusive offers, new menu items, and café stories delivered straight to your inbox."
|
|
background={{ variant: "rotated-rays-animated" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Subscribe Now"
|
|
termsText="We respect your privacy. Unsubscribe anytime."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="Café Noir"
|
|
columns={[
|
|
{
|
|
title: "Menu", items: [
|
|
{ label: "Beverages", href: "products" },
|
|
{ label: "Pastries", href: "products" },
|
|
{ label: "Seasonal Specials", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "About", items: [
|
|
{ label: "Our Story", href: "about" },
|
|
{ label: "Team", href: "team" },
|
|
{ label: "Events", href: "features" }
|
|
]
|
|
},
|
|
{
|
|
title: "Visit Us", items: [
|
|
{ label: "Contact", href: "contact" },
|
|
{ label: "Hours", href: "#" },
|
|
{ label: "Reservations", href: "contact" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Café Noir. Crafted with passion. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|