284 lines
13 KiB
TypeScript
284 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { Coffee, MapPin } from "lucide-react";
|
|
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
|
|
|
|
export default function CafeMadridPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="none"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Café Madrid"
|
|
navItems={[
|
|
{ name: "Menu", id: "features" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Community", id: "testimonials" },
|
|
{ name: "Visit", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Find Your Spot", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
tag="Welcome to Café Madrid"
|
|
tagIcon={Coffee}
|
|
title="Sip the Madrid Moment"
|
|
description="A cozy corner in the heart of the city, where coffee meets calm. Join us for quality espresso, comfortable seating, and the perfect atmosphere to work, meet friends, or simply unwind."
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/attractive-young-blond-dreamy-digital-nomad-sitting-drink-coffee-cafe-urban-co-working-space-look-outside-window-smiling-dreamy-thoughtful-enjoy-break-working-project-freelance-gig-economy-concept_197531-22195.jpg", imageAlt: "Modern café workspace with coffee"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/blurred-businessman-working-cafe_23-2147689247.jpg", imageAlt: "Specialty latte art at Café Madrid"
|
|
}
|
|
]}
|
|
rating={5}
|
|
ratingText="Loved by Madrid's young professionals"
|
|
buttons={[
|
|
{
|
|
text: "Find Your Spot", href: "#contact"
|
|
}
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Our Story"
|
|
title="More Than Coffee—It's a Meeting Place"
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{
|
|
text: "Learn More", href: "#features"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyOne
|
|
tag="What We Offer"
|
|
title="Everything You Need for the Perfect Café Experience"
|
|
description="From specialty coffee crafted by skilled baristas to comfortable seating perfect for work or socializing, we've designed every detail with you in mind."
|
|
imageSrc="https://img.b2bpic.net/free-photo/woman-works-cafe-evening_1153-3549.jpg"
|
|
imageAlt="Café Madrid interior ambiance"
|
|
mediaPosition="left"
|
|
useInvertedBackground="invertDefault"
|
|
accordionItems={[
|
|
{
|
|
id: "1", title: "Specialty Coffee & Craftsmanship", content: "Our baristas prepare each drink with precision and passion. From single-origin espresso to creamy cappuccinos, every cup is a moment of perfection."
|
|
},
|
|
{
|
|
id: "2", title: "Comfortable Workspace", content: "High-speed WiFi, plenty of seating, and natural lighting make it ideal for working professionals and digital nomads seeking an inspiring environment."
|
|
},
|
|
{
|
|
id: "3", title: "Community & Connection", content: "A welcoming space where professionals network, friends meet, and tourists discover authentic Madrid vibes. Your second home awaits."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
title="Our Impact in Madrid"
|
|
description="Growing daily as the go-to café for quality coffee and community"
|
|
tag="Community Metrics"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "500+", title: "Daily Visitors", description: "Professionals and tourists choosing Café Madrid", imageSrc: "https://img.b2bpic.net/free-photo/best-friends-are-chatting-laughing-with-tasty-snacks-terrace_8353-10306.jpg", imageAlt: "Busy café with happy customers"
|
|
},
|
|
{
|
|
id: "2", value: "2K+", title: "Monthly Guests", description: "Building a vibrant community around quality coffee", imageSrc: "https://img.b2bpic.net/free-photo/sincere-laugh-showing-picture-smartphone-casual-meeting-with-best-friends-restaurant-terrace_8353-10272.jpg", imageAlt: "Community members enjoying café"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="What Our Community Says"
|
|
description="Real voices from professionals and travelers who've made Café Madrid part of their Madrid experience"
|
|
tag="Testimonials"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sofia Martínez", role: "Marketing Manager", company: "Tech Startup", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/young-smiling-woman-cafe-drinking-coffee-date-looking-camera_197531-22708.jpg", imageAlt: "Sofia Martínez testimonial"
|
|
},
|
|
{
|
|
id: "2", name: "Carlos López", role: "Freelance Designer", company: "Creative Agency", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/young-beautiful-smiling-stylish-woman-coat-joyfully-looking-camera-walking-through-city-street_574295-2122.jpg", imageAlt: "Carlos López testimonial"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Thompson", role: "Travel Blogger", company: "Global Wanderer", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/closeup-attractive-woman-motion-with-takeaway-coffee-business-building-portrait-blonde-girl-holding-paper-cup-with-hot-drink-outdoor_158595-6701.jpg", imageAlt: "Emma Thompson testimonial"
|
|
},
|
|
{
|
|
id: "4", name: "Miguel Fernández", role: "Business Consultant", company: "Independent", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/woman-standing-clean-urban-space_23-2149015676.jpg", imageAlt: "Miguel Fernández testimonial"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about visiting Café Madrid"
|
|
tag="Help & Info"
|
|
imageSrc="https://img.b2bpic.net/free-photo/unrecognizable-young-woman-sitting-table-cafe-working-laptop_1098-20175.jpg"
|
|
imageAlt="Café Madrid community atmosphere"
|
|
mediaPosition="right"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="smooth"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What are your opening hours?", content: "We're open Monday to Friday from 7:00 AM to 8:00 PM, and Saturday-Sunday from 9:00 AM to 10:00 PM. Perfect for morning coffee, lunch breaks, or evening gatherings."
|
|
},
|
|
{
|
|
id: "2", title: "Do you have WiFi for remote work?", content: "Absolutely! High-speed WiFi is complimentary for all guests. We have ample seating, outlets, and a quiet zone for focused work sessions."
|
|
},
|
|
{
|
|
id: "3", title: "What payment methods do you accept?", content: "We accept cash, card payments, and all major mobile payment options including Apple Pay and Google Pay. Quick and convenient for everyone."
|
|
},
|
|
{
|
|
id: "4", title: "Can I host a private event?", content: "Yes! We offer semi-private spaces for small gatherings, team meetings, or celebrations. Contact us for details and availability."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Ready to Visit?"
|
|
tagIcon={MapPin}
|
|
title="Find Your Spot at Café Madrid"
|
|
description="Located in the heart of Madrid. Drop by for a coffee, bring your laptop, or just enjoy the moment. We're waiting for you."
|
|
buttons={[
|
|
{
|
|
text: "Get Directions", href: "https://maps.google.com/?q=Café+Madrid"
|
|
},
|
|
{
|
|
text: "Contact Us", href: "mailto:info@cafemadrid.es"
|
|
}
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="ecommerce" data-section="ecommerce">
|
|
<ProductCatalog
|
|
layout="section"
|
|
products={[
|
|
{
|
|
id: "1",
|
|
name: "Espresso",
|
|
price: 2.5,
|
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
|
imageAlt: "Espresso",
|
|
rating: 4.8,
|
|
reviewCount: 120,
|
|
category: "Coffee",
|
|
onProductClick: () => {}
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Café Latte",
|
|
price: 3.5,
|
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
|
imageAlt: "Café Latte",
|
|
rating: 4.7,
|
|
reviewCount: 95,
|
|
category: "Coffee",
|
|
onProductClick: () => {}
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Churros",
|
|
price: 4.0,
|
|
imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
|
|
imageAlt: "Churros",
|
|
rating: 4.9,
|
|
reviewCount: 150,
|
|
category: "Dessert",
|
|
onProductClick: () => {}
|
|
}
|
|
]}
|
|
searchPlaceholder="Search our menu..."
|
|
emptyMessage="No items found"
|
|
className="mt-10"
|
|
gridClassName="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"
|
|
cardClassName="bg-white rounded-lg shadow-md overflow-hidden"
|
|
imageClassName="w-full h-48 object-cover"
|
|
searchClassName="mb-4"
|
|
filterClassName="mb-4"
|
|
toolbarClassName="mb-4"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Navigate", items: [
|
|
{ label: "Menu", href: "#features" },
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Community", href: "#testimonials" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Instagram", href: "https://instagram.com/cafemadrid" },
|
|
{ label: "Contact", href: "mailto:info@cafemadrid.es" },
|
|
{ label: "Location", href: "https://maps.google.com" }
|
|
]
|
|
},
|
|
{
|
|
title: "Info", items: [
|
|
{ label: "Hours", href: "#faq" },
|
|
{ label: "Privacy", href: "#" },
|
|
{ label: "Terms", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2025 Café Madrid. All rights reserved."
|
|
bottomRightText="Quality coffee, where Madrid meets calm."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |