Files
ab87f568-9761-49ee-8961-eaa…/src/app/page.tsx
2026-03-12 11:08:43 +00:00

243 lines
13 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Instagram, Facebook, MapPin, Phone, Mail, Clock } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="mediumSmall"
sizing="largeSmall"
background="noiseDiagonalGradient"
cardStyle="solid"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Cafe Gusto"
navItems={[
{ name: "Frühstück & Menü", id: "menu" },
{ name: "Dein Frühstück", id: "custom" },
{ name: "Über uns", id: "about" },
{ name: "Galerie", id: "gallery" },
{ name: "Kontakt", id: "contact" }
]}
button={{ text: "Reservieren", href: "#contact" }}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
title="Café Gusto"
description="Dein perfekter Genussmoment. Frisches Frühstück, hochwertiger Kaffee und ein Service, der dich willkommen heißt."
background={{ variant: "plain" }}
kpis={[
{ value: "4.7", label: "★ Bewertung" },
{ value: "100%", label: "Frische Zutaten" },
{ value: "Dein Style", label: "Individuell kombiniert" }
]}
enableKpiAnimation={true}
tag="Boutique Café Experience"
buttons={[
{ text: "Tisch reservieren", href: "#contact" },
{ text: "Menü ansehen", href: "#menu" }
]}
imageSrc="http://img.b2bpic.net/free-photo/cup-coffee-with-decorations-plant-wooden-surface_181624-60401.jpg?_wi=1"
imageAlt="Premium Cappuccino mit Croissant"
mediaAnimation="blur-reveal"
imagePosition="right"
/>
</div>
<div id="socialproof" data-section="socialproof">
<SocialProofOne
title="Vertraut von Kaffee-Liebhabern"
description="Bei Cafe Gusto beginnt der Tag mit einem Lächeln. Unser Team sorgt dafür, dass jeder Besuch persönlich und besonders wird."
tag="Bekannt für freundlichen Service"
textboxLayout="default"
useInvertedBackground={false}
names={[
"Sehr freundliche Bedienung", "Hochwertige Zutaten", "Individuelle Zusammenstellung", "Gemütliche Atmosphäre", "Frischer Kaffee täglich", "Persönlicher Service"
]}
speed={35}
showCard={true}
/>
</div>
<div id="custom" data-section="custom">
<ProductCardFour
title="Stell dir dein perfektes Frühstück zusammen"
description="Wähle aus hochwertigen Komponenten und kreiere deinen persönlichen Genussmoment. Kein starres Menü nur deine Auswahl."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
gridVariant="uniform-all-items-equal"
products={[
{
id: "bakery", name: "Gebäck", price: "ab €3,50", variant: "Croissant • Brioche • Vollkornbrot", imageSrc: "http://img.b2bpic.net/free-photo/delicious-french-breakfast-with-croissant_23-2150408577.jpg?_wi=1", imageAlt: "Gebäck Auswahl"
},
{
id: "spreads", name: "Aufstriche & Beläge", price: "ab €2,00", variant: "Marmelade • Honig • Avocado • Käse", imageSrc: "http://img.b2bpic.net/free-photo/brown-coffee-beans-black-basket-scattered-beans-high-angle-view_176474-5002.jpg", imageAlt: "Aufstriche Auswahl"
},
{
id: "extras", name: "Extras", price: "ab €2,50", variant: "Ei • Lachs • Obst • Joghurt", imageSrc: "http://img.b2bpic.net/free-photo/top-view-lunch-packed-different-boxes-fresh-healthy-eating-wooden-background_482257-31547.jpg", imageAlt: "Extras Auswahl"
},
{
id: "coffee", name: "Getränk", price: "ab €3,00", variant: "Espresso • Cappuccino • Latte • Tee", imageSrc: "http://img.b2bpic.net/free-photo/cup-coffee-with-decorations-plant-wooden-surface_181624-60401.jpg?_wi=2", imageAlt: "Getränk Auswahl"
}
]}
/>
</div>
<div id="quality" data-section="quality">
<FeatureCardSixteen
title="Warum unsere Qualität unvergesslich ist"
description="Jede Komponente ist sorgfältig ausgewählt. Wir verwenden nur das Beste für deine Genussmomente."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
tag="Premium Qualität"
negativeCard={{
items: [
"Industrielle Massenproduktion", "Minderwertiger Kaffee", "Begrenzte Auswahl", "Impersonaler Service"
]
}}
positiveCard={{
items: [
"Frisch gerösteter Kaffee täglich", "Regionale und saisonale Produkte", "Täglich frische Backwaren", "Herzlich und persönlich", "Hochwertige Zutaten"
]
}}
/>
</div>
<div id="ambiance" data-section="ambiance">
<TextSplitAbout
title="Die richtige Atmosphäre für dein Ritual"
description={[
"Cafe Gusto ist nicht nur ein Café es ist ein Ort des Wohlbefindens. Mit gemütlichen Ecken, eleganter Einrichtung und wärmender Beleuchtung schaffen wir eine Atmosphäre, die dich sofort willkommen heißt.", "Unsere sorgfältig gestaltete Umgebung lädt dich ein, es dir gemütlich zu machen. Ob du allein in Ruhe einen Moment genießen möchtest, mit Freunden frühstückst oder einfach Zeit mit deinen Liebsten verbringst jede Ecke unseres Cafés ist perfekt dafür gestaltet.", "Der Duft von frischem Kaffee, das sanfte Licht, die liebevollen Details bei Cafe Gusto entsteht nicht nur ein kulinarisches Erlebnis, sondern ein echtes Lebensgefühl. Das ist der Ort, an den du immer wieder gerne zurückkehrst."
]}
useInvertedBackground={false}
showBorder={false}
buttons={[
{ text: "Jetzt reservieren", href: "#contact" }
]}
/>
</div>
<div id="gallery" data-section="gallery">
<ProductCardFour
title="Unsere Café-Galerie"
description="Erlebe die Wärme und Eleganz von Cafe Gusto. Jeder Moment, jeder Winkel erzählt eine Geschichte von Leidenschaft und Kunstfertigkeit."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
gridVariant="bento-grid"
products={[
{
id: "gallery1", name: "Gemütliche Ecken", price: "Dein Ort der Ruhe", variant: "Entspannen & Genießen", imageSrc: "http://img.b2bpic.net/free-photo/cafe-interior-with-orange-sofa-three-tables-three-black-chairs_181624-8624.jpg?_wi=1", imageAlt: "Gemütliche Cafésitze mit orangem Sofa"
},
{
id: "gallery2", name: "Kulinarische Kunstwerke", price: "Handmade mit Liebe", variant: "Jedes Detail perfekt", imageSrc: "http://img.b2bpic.net/free-photo/delicious-french-breakfast-with-croissant_23-2150408577.jpg?_wi=2", imageAlt: "Französisches Frühstück mit Croissants"
},
{
id: "gallery3", name: "Espresso-Meisterschaft", price: "Perfekt gebrüht", variant: "Jede Tasse ein Kunstwerk", imageSrc: "http://img.b2bpic.net/free-photo/cup-coffee-with-decorations-plant-wooden-surface_181624-60401.jpg", imageAlt: "Cappuccino mit eleganter Dekoration"
},
{
id: "gallery4", name: "Gesellige Momente", price: "Zusammen genießen", variant: "Freunde & Familie willkommen", imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-talking-while-drinking-coffee-cafe_637285-12501.jpg?_wi=1", imageAlt: "Glückliches Paar beim Kaffee im Café"
}
]}
/>
</div>
<div id="about" data-section="about">
<TestimonialCardTwelve
cardTitle="Unsere Geschichte Liebe zum Detail"
cardTag="Die Café Gusto Geschichte"
useInvertedBackground={false}
cardAnimation="slide-up"
testimonials={[
{
id: "1", name: "Gegründet mit Passion", imageSrc: "http://img.b2bpic.net/free-photo/watching-funny-video-internet-with-coworkers-cafe-terrace-with-tasty-food_8353-10265.jpg", imageAlt: "Café mit freudiger Atmosphäre"
},
{
id: "2", name: "Gemeinschaft im Fokus", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-friends-restaurant_23-2148395434.jpg", imageAlt: "Freunde genießen zusammen"
},
{
id: "3", name: "Qualität an erster Stelle", imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-talking-while-drinking-coffee-cafe_637285-12501.jpg?_wi=2", imageAlt: "Genussmoment mit hochwertigen Produkten"
},
{
id: "4", name: "Jeder Gast ist Familie", imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-showing-thumbs-up-posing-camera-park_1262-20571.jpg", imageAlt: "Glückliche Gäste im Café"
},
{
id: "5", name: "Handwerk & Tradition", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-with-mask-pouring-beer_23-2148872416.jpg", imageAlt: "Perfekte Zubereitung des Getränks"
},
{
id: "6", name: "Ein Zuhause für alle", imageSrc: "http://img.b2bpic.net/free-photo/cafe-interior-with-orange-sofa-three-tables-three-black-chairs_181624-8624.jpg?_wi=2", imageAlt: "Wärmende Café-Inneneinrichtung"
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Erlebe Kaffee und Frühstück auf einem neuen Level. Reserviere deinen Tisch und lass dich willkommen heißen."
animationType="entrance-slide"
background={{ variant: "plain" }}
useInvertedBackground={false}
buttons={[
{ text: "Jetzt reservieren", href: "tel:+4912345678" },
{ text: "Zum Menü", href: "#custom" }
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="Cafe Gusto"
copyrightText="© 2025 Cafe Gusto. Alle Rechte vorbehalten."
columns={[
{
title: "Navigation", items: [
{ label: "Frühstück & Menü", href: "#menu" },
{ label: "Dein Frühstück", href: "#custom" },
{ label: "Über uns", href: "#about" },
{ label: "Galerie", href: "#gallery" },
{ label: "Kontakt", href: "#contact" }
]
},
{
title: "Kontaktiere uns", items: [
{ label: "📞 +49 (0) 123 45678", href: "tel:+4912345678" },
{ label: "✉️ hallo@cafegusto.de", href: "mailto:hallo@cafegusto.de" },
{ label: "🕐 Mo-Fr 7-18h | Sa-So 8-18h", href: "#" }
]
},
{
title: "Folge uns", items: [
{ label: "Instagram", href: "https://instagram.com/cafegusto" },
{ label: "Facebook", href: "https://facebook.com/cafegusto" },
{ label: "Google Maps", href: "https://maps.google.com/?q=cafegusto" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}