216 lines
11 KiB
TypeScript
216 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import Link from "next/link";
|
|
import { Calendar, Zap, DollarSign, ShoppingCart } from "lucide-react";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
|
|
import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
|
|
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="largeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Pajo's Zapfbar"
|
|
navItems={[
|
|
{ name: "Reservieren", id: "/booking" },
|
|
{ name: "Shop", id: "/shop" },
|
|
{ name: "Über uns", id: "#about" },
|
|
{ name: "Preise", id: "#pricing" },
|
|
{ name: "Kontakt", id: "#contact" },
|
|
{ name: "Admin", id: "/admin" },
|
|
]}
|
|
button={{
|
|
text: "Jetzt buchen", href: "/booking"
|
|
}}
|
|
className="z-50"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
title="Reservieren Sie Ihren Tisch bei Pajo's Zapfbar"
|
|
description="Einfach, schnell und unkompliziert - buchen Sie Ihren perfekten Platz an unserem Zapftisch oder an einem unserer gemütlichen Tische. Für Gruppen bis 12 Personen buchen wir automatisch mehrere Tische nebeneinander."
|
|
background={{ variant: "plain" }}
|
|
tag="Online Reservierungssystem"
|
|
tagIcon={Calendar}
|
|
tagAnimation="blur-reveal"
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-male-s-hand-holding-glass-drinks-using-mobile-phone_23-2147861952.jpg?_wi=1"
|
|
imageAlt="Pajo's Zapfbar Reservierungssystem"
|
|
mediaAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
name: "Marco Pajo", handle: "Geschäftsführer, Pajo's Zapfbar", testimonial:
|
|
"Das Reservierungssystem hat unser Geschäft transformiert. Wir können jetzt viel effizienter planen und unsere Gäste sind zufriedener.", rating: 5,
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/portrait-restaurant-waiter-wearing-professional-uniform-apron_482257-95100.jpg?_wi=1", imageAlt: "Marco Pajo Porträt"
|
|
},
|
|
{
|
|
name: "Sarah Wagner", handle: "Event Managerin", testimonial:
|
|
"Perfekt für große Gruppen! Die automatische Tischkombination spart uns so viel Zeit bei der Planung.", rating: 5,
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/mid-adult-barista-cleaning-drinking-glass-after-working-hours-pub_637285-3394.jpg?_wi=1", imageAlt: "Sarah Wagner Porträt"
|
|
},
|
|
{
|
|
name: "Thomas Becker", handle: "Stammgast", testimonial:
|
|
"Ich buche jetzt regelmäßig online. Viel bequemer als anzurufen und ich bekomme sofort eine Bestätigung.", rating: 5,
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/portrait-smiling-owner-standing-bakery-shop_1170-2075.jpg?_wi=1", imageAlt: "Thomas Becker Porträt"
|
|
},
|
|
{
|
|
name: "Lisa Meyer", handle: "Restaurant Manager", testimonial:
|
|
"Die Admin-Dashboard ist intuitiv zu bedienen. Alle Reservierungen auf einen Blick - genau das haben wir gebraucht.", rating: 5,
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/close-up-volunteer-smiling_23-2149134458.jpg?_wi=1", imageAlt: "Lisa Meyer Porträt"
|
|
},
|
|
]}
|
|
buttons={[
|
|
{ text: "Tisch jetzt buchen", href: "/booking" },
|
|
{ text: "Mehr erfahren", href: "#features" },
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardEight
|
|
title="Wie funktioniert das Reservierungssystem?"
|
|
description="Ein einfacher 4-Schritte-Prozess für die perfekte Buchung Ihres Tisches"
|
|
tag="Unser Prozess"
|
|
tagIcon={Zap}
|
|
tagAnimation="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Tischtyp wählen", description:
|
|
"Wählen Sie zwischen unserem großzügigen Zapftisch oder einem gemütlichen normalen Tisch. Beide Optionen bieten ein großartiges Erlebnis.", imageSrc:
|
|
"http://img.b2bpic.net/free-vector/travel-booking-app-screens_52683-42533.jpg?_wi=1", imageAlt: "Tischtyp Auswahl Interface"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Gästezahl eingeben", description:
|
|
"Teilen Sie uns mit, wie viele Personen kommen. Unser System findet automatisch die besten verfügbaren Tische für Sie.", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/busy-man-using-telephone-computer-simultaneously_329181-10363.jpg?_wi=1", imageAlt: "Gästezahl Eingabe"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Zeitpunkt wählen", description:
|
|
"Wählen Sie Ihr bevorzugtes Datum und Ihre Uhrzeit. Unser Kalender zeigt Ihnen sofort die Verfügbarkeit.", imageSrc:
|
|
"http://img.b2bpic.net/free-vector/travel-booking-app-screens_52683-42533.jpg?_wi=2", imageAlt: "Datum und Uhrzeit Auswahl"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Bestätigung erhalten", description:
|
|
"Nach Ihrer Reservierung erhalten Sie eine sofortige Bestätigung per E-Mail und SMS. Der Admin wird benachrichtigt.", imageSrc:
|
|
"http://img.b2bpic.net/free-vector/school-timetable-template-with-flat-design_23-2147848898.jpg?_wi=1", imageAlt: "Bestätigungsschirm"
|
|
},
|
|
]}
|
|
buttons={[{ text: "Reservieren Sie jetzt", href: "/booking" }]}
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
title="Einfache Preisgestaltung"
|
|
description="Nutzen Sie unser Reservierungssystem kostenlos oder wählen Sie ein Premium-Abo mit erweiterten Funktionen"
|
|
tag="Preise"
|
|
tagIcon={DollarSign}
|
|
tagAnimation="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
plans={[
|
|
{
|
|
id: "basic", title: "Kostenloses System", price: "€0", period: "für immer", imageSrc:
|
|
"http://img.b2bpic.net/free-vector/travel-booking-app-screens_52683-42533.jpg?_wi=3", imageAlt: "Kostenloses System Plan", button: { text: "Kostenlos starten", href: "/booking" },
|
|
features: [
|
|
"Online Tischreservierung", "Automatische Tischkombination", "E-Mail Benachrichtigungen", "Basis Admin-Dashboard", "Bis zu 50 Reservierungen/Monat"
|
|
],
|
|
},
|
|
{
|
|
id: "pro", title: "Professional", price: "€29", period: "/Monat", imageSrc:
|
|
"http://img.b2bpic.net/free-vector/school-timetable-template-with-flat-design_23-2147848898.jpg?_wi=2", imageAlt: "Professional Plan", button: { text: "Jetzt upgraden", href: "#contact" },
|
|
features: [
|
|
"Alles aus dem kostenlosen Plan", "SMS Benachrichtigungen", "Erweiterte Admin-Funktionen", "Reservierungshistorie", "Unbegrenzte Reservierungen", "E-Mail Support"
|
|
],
|
|
},
|
|
{
|
|
id: "enterprise", title: "Enterprise", price: "€99", period: "/Monat", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/busy-man-using-telephone-computer-simultaneously_329181-10363.jpg?_wi=2", imageAlt: "Enterprise Plan", button: { text: "Kontaktieren Sie uns", href: "#contact" },
|
|
features: [
|
|
"Alles aus dem Professional Plan", "Prioritäts-Support", "API-Zugriff", "Custom Branding", "Multiple Benutzer", "Erweiterte Analysen"
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Haben Sie Fragen zu unserem Reservierungssystem? Wir helfen Ihnen gerne weiter! Kontaktieren Sie uns für ein kostenloses Beratungsgespräch oder wenn Sie weitere Informationen benötigen."
|
|
animationType="entrance-slide"
|
|
buttons={[
|
|
{ text: "Kontakt aufnehmen", href: "#footer" },
|
|
{ text: "Demo anfordern", href: "/booking" },
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="Pajo's Zapfbar"
|
|
copyrightText="© 2025 Pajo's Zapfbar. Alle Rechte vorbehalten."
|
|
columns={[
|
|
{
|
|
title: "Produkt", items: [
|
|
{ label: "Reservieren", href: "/booking" },
|
|
{ label: "Shop", href: "/shop" },
|
|
{ label: "Admin Dashboard", href: "/admin" },
|
|
{ label: "Preise", href: "#pricing" },
|
|
{ label: "Features", href: "#features" },
|
|
],
|
|
},
|
|
{
|
|
title: "Unternehmen", items: [
|
|
{ label: "Über uns", href: "#" },
|
|
{ label: "Kontakt", href: "#contact" },
|
|
{ label: "Impressum", href: "#" },
|
|
{ label: "Datenschutz", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Rechtliches", items: [
|
|
{ label: "Nutzungsbedingungen", href: "#" },
|
|
{ label: "Datenschutzerklärung", href: "#" },
|
|
{ label: "Impressum", href: "#" },
|
|
{ label: "Kontakt", href: "#contact" },
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |