251 lines
15 KiB
TypeScript
251 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
|
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { Sparkles, Mountain, Flame, Heart, Star, Mail, Instagram, Heart as HeartIcon } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="floatingGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="The Swiss Waffle Co."
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Story", id: "story" },
|
|
{ name: "Menu", id: "menu" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Order Now", href: "#menu" }}
|
|
className="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
title="Layered Swissfully"
|
|
description="Swissful Delight in Every Bite"
|
|
background={{ variant: "radial-gradient" }}
|
|
tag="Premium Swiss Craftsmanship"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "Taste the Swaffle", href: "#menu" }]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/marshmallows-drink-with-pie-slices_23-2148243577.jpg", imageAlt: "Premium Swiss waffle texture background"
|
|
}]}
|
|
className="relative min-h-screen flex items-center justify-center overflow-hidden"
|
|
containerClassName="max-w-7xl mx-auto px-6 py-20 text-center"
|
|
titleClassName="text-6xl md:text-7xl lg:text-8xl font-extrabold mb-4 text-foreground drop-shadow-lg"
|
|
descriptionClassName="text-xl md:text-2xl text-foreground/80 mb-8 italic font-light"
|
|
tagClassName="inline-flex items-center gap-2 px-4 py-2 bg-accent/20 rounded-full text-primary-cta mb-8"
|
|
buttonContainerClassName="flex justify-center gap-4 flex-wrap"
|
|
buttonClassName="px-8 py-4 bg-primary-cta hover:bg-primary-cta/90 text-primary-cta-text rounded-full font-semibold transition-all duration-300 transform hover:scale-105"
|
|
mediaWrapperClassName="absolute inset-0 opacity-30 z-0"
|
|
/>
|
|
</div>
|
|
|
|
<div id="brand-story" data-section="brand-story">
|
|
<AboutMetric
|
|
title="Not just a waffle. A Swaffle."
|
|
metrics={[
|
|
{ icon: Mountain, label: "Swiss Alps Inspiration", value: "Handpicked Premium Ingredients" },
|
|
{ icon: Flame, label: "Pressed Fresh", value: "Luxury That Feels Like A Hug" },
|
|
{ icon: Heart, label: "Every Bite Matters", value: "Because every bite should melt hearts, not just chocolate." }
|
|
]}
|
|
metricsAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
containerClassName="max-w-5xl mx-auto px-6 py-20 text-center bg-white"
|
|
titleClassName="text-5xl md:text-6xl font-extrabold mb-12 text-foreground"
|
|
metricsContainerClassName="grid grid-cols-1 md:grid-cols-3 gap-8"
|
|
metricCardClassName="p-8 bg-card rounded-2xl shadow-md hover:shadow-lg transition-shadow duration-300 border border-accent/20"
|
|
metricIconClassName="w-12 h-12 text-primary-cta mb-4 mx-auto"
|
|
metricLabelClassName="text-lg font-semibold text-primary-cta mb-2"
|
|
metricValueClassName="text-sm text-foreground/70 italic"
|
|
/>
|
|
</div>
|
|
|
|
<div id="menu" data-section="menu">
|
|
<ProductCardTwo
|
|
title="The Swaffle Menu"
|
|
description="Handcrafted flavors inspired by Swiss tradition and global elegance"
|
|
tag="Six Signature Flavors"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "flavor-chocolate", brand: "Premium", name: "Dark Chocolate Dream", price: "$12.50", rating: 5,
|
|
reviewCount: "142", imageSrc: "http://img.b2bpic.net/free-photo/top-view-yummy-waffle-cakes-with-chocolate-bars-brown-background_140725-80327.jpg", imageAlt: "Dark Chocolate Dream waffle"
|
|
},
|
|
{
|
|
id: "flavor-strawberry", brand: "Seasonal", name: "Berry Bliss", price: "$13.00", rating: 5,
|
|
reviewCount: "128", imageSrc: "http://img.b2bpic.net/free-photo/delicious-homemade-strawberry-cake-slices-with-cream-fresh-strawberries-top-view_114579-8267.jpg", imageAlt: "Berry Bliss waffle"
|
|
},
|
|
{
|
|
id: "flavor-hazelnut", brand: "Premium", name: "Alpine Hazelnut", price: "$13.50", rating: 5,
|
|
reviewCount: "156", imageSrc: "http://img.b2bpic.net/free-photo/almond-banana-pancake_1339-8354.jpg", imageAlt: "Alpine Hazelnut waffle"
|
|
},
|
|
{
|
|
id: "flavor-maple", brand: "Classic", name: "Golden Maple", price: "$11.50", rating: 5,
|
|
reviewCount: "187", imageSrc: "http://img.b2bpic.net/free-photo/delicious-french-breakfast-with-waffles-top-view_23-2150408541.jpg", imageAlt: "Golden Maple waffle"
|
|
},
|
|
{
|
|
id: "flavor-pistachio", brand: "Luxury", name: "Pistachio Paradise", price: "$14.00", rating: 5,
|
|
reviewCount: "94", imageSrc: "http://img.b2bpic.net/free-photo/tray-with-belgian-waffle-cup-milk-scarf_23-2148031687.jpg", imageAlt: "Pistachio Paradise waffle"
|
|
},
|
|
{
|
|
id: "flavor-lavender", brand: "Artisan", name: "Honey Lavender", price: "$13.75", rating: 5,
|
|
reviewCount: "112", imageSrc: "http://img.b2bpic.net/free-photo/elevated-view-healthy-breakfast-wooden-surface_23-2148188966.jpg", imageAlt: "Honey Lavender waffle"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="blur-reveal"
|
|
carouselMode="buttons"
|
|
containerClassName="max-w-7xl mx-auto px-6 py-20"
|
|
titleClassName="text-5xl md:text-6xl font-extrabold mb-4 text-white text-center"
|
|
descriptionClassName="text-center text-white/80 mb-12 text-lg"
|
|
gridClassName="gap-6"
|
|
cardClassName="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-shadow duration-300 transform hover:scale-105"
|
|
imageClassName="w-full h-64 object-cover"
|
|
cardBrandClassName="text-xs uppercase tracking-widest text-accent font-semibold px-4 pt-4"
|
|
cardNameClassName="text-xl font-bold text-foreground px-4 pt-2"
|
|
cardPriceClassName="text-2xl font-bold text-primary-cta px-4 py-2"
|
|
cardRatingClassName="text-sm text-accent px-4 pb-4"
|
|
/>
|
|
</div>
|
|
|
|
<div id="how-to-enjoy" data-section="how-to-enjoy">
|
|
<FeatureCardSixteen
|
|
title="How to Enjoy Your Swaffle"
|
|
description="The perfect Swaffle experience, prepared with intention and care"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
animationType="blur-reveal"
|
|
negativeCard={{
|
|
items: ["Skip the microwave", "Don't rush the crunch", "Swaffles don't like shortcuts"]
|
|
}}
|
|
positiveCard={{
|
|
items: ["Heat both sides on a tawa/pan", "Watch for the golden crisp", "Serve immediately for perfection", "Pair with your favorite toppings"]
|
|
}}
|
|
containerClassName="max-w-7xl mx-auto px-6 py-20"
|
|
titleClassName="text-5xl md:text-6xl font-extrabold mb-4 text-foreground text-center"
|
|
descriptionClassName="text-center text-foreground/70 mb-12 text-lg"
|
|
gridClassName="grid grid-cols-1 md:grid-cols-2 gap-12"
|
|
cardClassName="p-8 rounded-2xl shadow-lg"
|
|
itemsListClassName="space-y-4"
|
|
itemClassName="flex items-start gap-3"
|
|
itemIconClassName="w-6 h-6 flex-shrink-0 mt-1"
|
|
itemTextClassName="text-lg font-semibold text-foreground"
|
|
/>
|
|
</div>
|
|
|
|
<div id="brand-promise" data-section="brand-promise">
|
|
<MetricCardFourteen
|
|
title="A luxury that's all heart and never out of reach."
|
|
tag="Brand Promise"
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{ id: "tradition", value: "Tradition", description: "Without the rules" },
|
|
{ id: "indulgence", value: "Indulgence", description: "That feels like a hug" },
|
|
{ id: "quality", value: "Quality", description: "In every bite" }
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
containerClassName="max-w-7xl mx-auto px-6 py-20 text-center bg-primary-cta rounded-3xl"
|
|
titleClassName="text-4xl md:text-5xl font-extrabold mb-12 text-white"
|
|
tagClassName="inline-flex items-center gap-2 px-4 py-2 bg-white/20 rounded-full text-white mb-8 text-sm uppercase tracking-widest"
|
|
metricsContainerClassName="grid grid-cols-1 md:grid-cols-3 gap-8"
|
|
metricClassName="p-6"
|
|
valueClassName="text-3xl md:text-4xl font-extrabold text-white mb-2"
|
|
descriptionClassName="text-lg text-white/90 italic"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Tiny hints of Swaffle bites left behind — find them all."
|
|
description="Join our community on Instagram and discover daily moments of Swaffle joy"
|
|
names={["@theswisswaffleco", "Premium Swiss Waffles", "Handcrafted Luxury", "Alpine Traditions", "Swaffle Stories", "Taste the Magic", "Swiss Excellence"]}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-photo/cup-coffee-arrangement-with-stroopwafle_23-2148623256.jpg", "http://img.b2bpic.net/free-photo/high-angle-wafer-surface_23-2148422753.jpg", "http://img.b2bpic.net/free-photo/top-view-breakfast-meal-arrangement_23-2148930398.jpg", "http://img.b2bpic.net/free-photo/delicious-cake-served-white-plate_1304-5543.jpg", "http://img.b2bpic.net/free-photo/close-up-view-delicious-waffers-concept_23-2148694985.jpg", "http://img.b2bpic.net/free-photo/lonely-male-lying-down-sunbathing-meadow-with-mountains_181624-30235.jpg"
|
|
]}
|
|
tag="Follow Us"
|
|
tagIcon={HeartIcon}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={50}
|
|
showCard={true}
|
|
containerClassName="max-w-7xl mx-auto px-6 py-20"
|
|
titleClassName="text-5xl md:text-6xl font-extrabold mb-4 text-foreground text-center"
|
|
descriptionClassName="text-center text-foreground/70 mb-12 text-lg"
|
|
contentClassName="flex justify-center items-center gap-4 mb-12 flex-wrap"
|
|
logoCardClassName="p-4 bg-white rounded-xl shadow-md border border-accent/20 hover:shadow-lg transition-shadow"
|
|
logoImageClassName="w-32 h-32 object-cover rounded-lg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Your words flip our Swaffles into perfection!"
|
|
ctaDescription="We'd love to hear from you. Reach out with any questions, feedback, or special requests."
|
|
ctaButton={{ text: "Send us a message", href: "mailto:info@theswisswaffle.co" }}
|
|
ctaIcon={Mail}
|
|
useInvertedBackground={true}
|
|
animationType="blur-reveal"
|
|
faqs={[
|
|
{ id: "faq-1", title: "Are your waffles gluten-free?", content: "We offer both traditional and gluten-free versions. Please inquire when ordering." },
|
|
{ id: "faq-2", title: "Do you offer catering?", content: "Yes! We cater for special events. Contact us at info@theswisswaffle.co for details." },
|
|
{ id: "faq-3", title: "What's the best way to reheat a Swaffle?", content: "Heat both sides on a tawa or skillet for 1-2 minutes per side. Avoid the microwave!" },
|
|
{ id: "faq-4", title: "Can I pre-order?", content: "Absolutely! Pre-orders are available. Contact us for bulk or special occasion orders." }
|
|
]}
|
|
containerClassName="max-w-7xl mx-auto px-6 py-20"
|
|
ctaPanelClassName="bg-primary-cta rounded-3xl p-12 text-center mb-12"
|
|
ctaTitleClassName="text-3xl md:text-4xl font-extrabold text-white mb-4"
|
|
ctaDescriptionClassName="text-white/90 mb-8 text-lg"
|
|
ctaButtonClassName="px-8 py-4 bg-white text-primary-cta font-semibold rounded-full hover:bg-accent transition-colors duration-300"
|
|
ctaIconClassName="w-8 h-8 text-white mb-4 mx-auto"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="The Swiss Waffle Co."
|
|
copyrightText="© 2025 The Swiss Waffle Co. All rights reserved. Layered Swissfully."
|
|
socialLinks={[
|
|
{ icon: Instagram, href: "https://instagram.com/theswisswaffleco", ariaLabel: "Follow us on Instagram" },
|
|
{ icon: Mail, href: "mailto:info@theswisswaffle.co", ariaLabel: "Email us" },
|
|
{ icon: HeartIcon, href: "#", ariaLabel: "Made with love" }
|
|
]}
|
|
containerClassName="bg-primary-cta text-white"
|
|
cardClassName="max-w-7xl mx-auto px-6 py-12 flex justify-between items-center flex-col md:flex-row gap-8"
|
|
logoClassName="text-2xl font-extrabold"
|
|
copyrightTextClassName="text-white/80 text-sm"
|
|
socialContainerClassName="flex gap-4"
|
|
socialIconClassName="w-5 h-5 hover:text-accent transition-colors duration-300 cursor-pointer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |