252 lines
16 KiB
TypeScript
252 lines
16 KiB
TypeScript
"use client";
|
||
|
||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import { Star } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="expand-hover"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="rounded"
|
||
contentWidth="compact"
|
||
sizing="mediumLarge"
|
||
background="grid"
|
||
cardStyle="glass-elevated"
|
||
primaryButtonStyle="gradient"
|
||
secondaryButtonStyle="layered"
|
||
headingFontWeight="bold"
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleApple
|
||
brandName="HZ Performance"
|
||
navItems={[
|
||
{ name: "Startseite", id: "hero" },
|
||
{ name: "Über Uns", id: "about" },
|
||
{ name: "Dienstleistungen", id: "features" },
|
||
{ name: "Projekte", id: "products" },
|
||
{ name: "Erfolge", id: "metrics" },
|
||
{ name: "Referenzen", id: "testimonials" },
|
||
{ name: "FAQ", id: "faq" },
|
||
{ name: "Kontakt", id: "contact" },
|
||
]}
|
||
/>
|
||
</div>
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplitKpi
|
||
title="Perfektion für Ihre Leidenschaft"
|
||
description="Meisterhafte Reparatur und Wartung für Fahrzeuge, die mehr verdienen. Expertise, Präzision und Leidenschaft in jeder Werkstatt-Stunde."
|
||
background={{ variant: "radial-gradient" }}
|
||
kpis={[
|
||
{ value: "25+", label: "Jahre Erfahrung" },
|
||
{ value: "100%", label: "Kundenzufriedenheit" },
|
||
{ value: "Luxus", label: "Service Garantiert" },
|
||
]}
|
||
enableKpiAnimation={true}
|
||
buttons={[{ text: "Termin vereinbaren", href: "#contact" }]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/woman-choosing-car-car-showroom_1303-15211.jpg"
|
||
imageAlt="Luxus-Sportwagen in einer HZ Performance Werkstatt"
|
||
mediaAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
<div id="about" data-section="about">
|
||
<InlineImageSplitTextAbout
|
||
heading={[
|
||
{ type: "text", content: "Über HZ Performance: Wo Präzision auf Leidenschaft trifft" },
|
||
]}
|
||
buttons={[{ text: "Unsere Geschichte", href: "#" }]}
|
||
useInvertedBackground={false}
|
||
imageSrc="http://img.b2bpic.net/free-photo/handsome-man-blue-uniform-checks-car_1157-31690.jpg"
|
||
imageAlt="Innenansicht einer modernen Automobilwerkstatt von HZ Performance"
|
||
/>
|
||
</div>
|
||
<div id="features" data-section="features">
|
||
<FeatureCardNine
|
||
features={[
|
||
{
|
||
title: "Motor-Optimierung", description: "Leistungssteigerung und Effizienzverbesserung durch modernste Diagnosetechnik.", phoneOne: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-engine_1232-1707.jpg", imageAlt: "Hochleistungsautomotor Nahaufnahme"},
|
||
phoneTwo: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/employee-checks-car-with-mockup-laptop_482257-91166.jpg", imageAlt: "Mechaniker bei der Motordiagnose"},
|
||
},
|
||
{
|
||
title: "Luxus-Fahrzeugwartung", description: "Exklusive Wartungspakete nach Herstellervorgaben, um die Langlebigkeit zu sichern.", phoneOne: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-checking-car_23-2150171235.jpg", imageAlt: "Luxusauto auf der Hebebühne für Service"},
|
||
phoneTwo: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-mechanic-working-with-car-tire-auto-repair-shop_637285-7618.jpg", imageAlt: "Radwechsel an einem Sportwagen"},
|
||
},
|
||
{
|
||
title: "Karosserie & Lackierung", description: "Makellose Instandsetzung und Veredelung mit höchster Handwerkskunst.", phoneOne: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/male-painter-hazmat-suit-inside-car-shop_23-2149750039.jpg", imageAlt: "Karosserie in der Lackierkabine"},
|
||
phoneTwo: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/man-polishing-car-with-orbital-applicator_1303-30572.jpg", imageAlt: "Feinpolitur einer frisch lackierten Karosserie"},
|
||
},
|
||
]}
|
||
showStepNumbers={true}
|
||
title="Unsere Meisterhaften Dienstleistungen"
|
||
description="Umfassende Pflege und Reparatur, die den Wert und die Leistung Ihres Fahrzeugs steigert."
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
/>
|
||
</div>
|
||
<div id="products" data-section="products">
|
||
<ProductCardOne
|
||
products={[
|
||
{
|
||
id: "p1", name: "Porsche 911 Restauration", price: "Auf Anfrage", imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_74190-1955.jpg", imageAlt: "Restaurierter klassischer Porsche 911"},
|
||
{
|
||
id: "p2", name: "Mercedes-AMG Leistungsupgrade", price: "Auf Anfrage", imageSrc: "http://img.b2bpic.net/free-photo/add-details-car-body-robotic-equipment-makes-assembly-car-modern-car-assembly-factory_645730-656.jpg", imageAlt: "Mercedes-AMG mit Leistungssteigerung"},
|
||
{
|
||
id: "p3", name: "Audi R8 Individualisierung", price: "Auf Anfrage", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138944.jpg", imageAlt: "Individualisierter Audi R8 Sportwagen"},
|
||
{
|
||
id: "p4", name: "BMW M Karosseriepflege", price: "Auf Anfrage", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-left-headlight-white-sports-car_181624-12947.jpg", imageAlt: "BMW M Serie nach der Karosseriepflege"},
|
||
{
|
||
id: "p5", name: "Ferrari Wartungsprogramm", price: "Auf Anfrage", imageSrc: "http://img.b2bpic.net/free-photo/car-repair-business-composition_23-2147881882.jpg", imageAlt: "Ferrari in Wartung"},
|
||
{
|
||
id: "p6", name: "Lamborghini Lackschutz", price: "Auf Anfrage", imageSrc: "http://img.b2bpic.net/free-photo/black-sport-car-back-vire-motor-gas-pipes-blank-space-registration-number_114579-1167.jpg", imageAlt: "Lamborghini mit Lackschutz"},
|
||
]}
|
||
gridVariant="bento-grid"
|
||
animationType="slide-up"
|
||
title="Exklusive Projekte & Veredelungen"
|
||
description="Ein Blick auf ausgewählte Fahrzeuge, denen wir zu neuem Glanz und optimierter Performance verholfen haben."
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
<div id="metrics" data-section="metrics">
|
||
<MetricCardSeven
|
||
metrics={[
|
||
{
|
||
id: "m1", value: "25+", title: "Jahre Expertise", items: [
|
||
"Seit 1998 im Geschäft", "Über 1000 Fahrzeuge betreut", "Familiengeführtes Unternehmen"],
|
||
},
|
||
{
|
||
id: "m2", value: "98%", title: "Kundenbindung", items: [
|
||
"Wiederkehrende Kunden", "Erstklassiger Service", "Vertrauenswürdiger Partner"],
|
||
},
|
||
{
|
||
id: "m3", value: "500+", title: "Veredelungs-Projekte", items: [
|
||
"Maßgeschneiderte Lösungen", "Individuelle Umbauten", "Einzigartige Ergebnisse"],
|
||
},
|
||
]}
|
||
animationType="slide-up"
|
||
title="Unsere Erfolge in Zahlen"
|
||
description="Jahre der Erfahrung und unzählige zufriedene Kunden – Zahlen, die für sich sprechen."
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
/>
|
||
</div>
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardSix
|
||
testimonials={[
|
||
{
|
||
id: "t1", name: "Dr. Klaus Schmidt", handle: "@klaus.s", testimonial: "HZ Performance hat meinen Oldtimer wieder in einen makellosen Zustand gebracht. Die Liebe zum Detail ist unvergleichlich.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-business-man-choosing-car-car-showroom_1303-27537.jpg", imageAlt: "Dr. Klaus Schmidt", icon: Star,
|
||
},
|
||
{
|
||
id: "t2", name: "Anna Müller", handle: "@anna.m", testimonial: "Der Service ist einfach hervorragend. Ich schätze die Transparenz und die ehrliche Beratung. Mein AMG fährt sich wie neu!", imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-pajamas-while-sitting-bed_273609-13213.jpg", imageAlt: "Anna Müller", icon: Star,
|
||
},
|
||
{
|
||
id: "t3", name: "Herr J. Weber", handle: "@j.weber", testimonial: "Als Flottenmanager vertraue ich nur HZ Performance. Ihre Effizienz und Professionalität sind unübertroffen.", imageSrc: "http://img.b2bpic.net/free-photo/elderly-businesswoman-coat-sitting-outside-cafe-reading-magazine_1303-19470.jpg", imageAlt: "Herr J. Weber", icon: Star,
|
||
},
|
||
{
|
||
id: "t4", name: "Sophie Lehmann", handle: "@sophie.l", testimonial: "Mein Sportwagen war noch nie in besseren Händen. Die Performance-Optimierung hat meine Erwartungen übertroffen.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-fashionable-woman-stylish-clothes-glasses-standing-against-skyscraper_613910-20972.jpg", imageAlt: "Sophie Lehmann", icon: Star,
|
||
},
|
||
{
|
||
id: "t5", name: "Thomas Richter", handle: "@thomas.r", testimonial: "HZ Performance versteht Leidenschaft. Jede Reparatur wird mit äußerster Sorgfalt und Expertise durchgeführt.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-car-dealership_23-2148332985.jpg", imageAlt: "Thomas Richter", icon: Star,
|
||
},
|
||
{
|
||
id: "t6", name: "Lena Becker", handle: "@lena.b", testimonial: "Absolut top Service! Mein Fahrzeug wurde nicht nur repariert, sondern in einen besseren Zustand versetzt als zuvor.", imageSrc: "http://img.b2bpic.net/free-photo/smiley-tattoo-artist-indoors-side-view_23-2149445974.jpg", imageAlt: "Lena Becker", icon: Star,
|
||
},
|
||
]}
|
||
animationType="slide-up"
|
||
title="Was unsere Kunden sagen"
|
||
description="Die Stimmen unserer anspruchsvollen Kunden, die Vertrauen in unsere Arbeit setzen."
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
topMarqueeDirection="left"
|
||
/>
|
||
</div>
|
||
<div id="faq" data-section="faq">
|
||
<FaqSplitMedia
|
||
faqs={[
|
||
{
|
||
id: "faq1", title: "Welche Marken werden bei HZ Performance gewartet?", content: "Wir sind spezialisiert auf Luxus- und Hochleistungsfahrzeuge führender europäischer Hersteller wie Porsche, Mercedes-AMG, BMW M, Audi RS, Ferrari und Lamborghini."},
|
||
{
|
||
id: "faq2", title: "Bieten Sie Garantie auf Ihre Reparaturen?", content: "Ja, wir stehen voll hinter der Qualität unserer Arbeit und bieten eine umfassende Garantie auf alle durchgeführten Reparaturen und verwendeten Ersatzteile."},
|
||
{
|
||
id: "faq3", title: "Wie kann ich einen Termin vereinbaren?", content: "Sie können uns telefonisch kontaktieren, eine E-Mail senden oder das Kontaktformular auf unserer Website nutzen, um einen persönlichen Beratungstermin zu vereinbaren."},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/different-type-tools-especially-wrenches-are-hanging-wall-workshop_613910-15268.jpg"
|
||
imageAlt="Saubere Werkbank mit Werkzeugen"
|
||
mediaAnimation="slide-up"
|
||
mediaPosition="left"
|
||
title="Häufig gestellte Fragen"
|
||
description="Antworten auf die wichtigsten Fragen rund um unsere Dienstleistungen und Ihren Fahrzeugservice."
|
||
faqsAnimation="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
/>
|
||
</div>
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplit
|
||
tag="Kontakt"
|
||
title="Ihr Weg zu erstklassigem Service"
|
||
description="Vereinbaren Sie noch heute einen Termin und erleben Sie den Unterschied, den HZ Performance macht."
|
||
background={{ variant: "plain" }}
|
||
imageSrc="http://img.b2bpic.net/free-photo/woman-enjoying-her-financially-independence-while-buying-car_23-2149434345.jpg"
|
||
imageAlt="Luxuriöser Empfangsbereich in einer Kfz-Werkstatt"
|
||
mediaAnimation="slide-up"
|
||
mediaPosition="right"
|
||
inputPlaceholder="Ihre E-Mail-Adresse"
|
||
buttonText="Termin anfragen"
|
||
termsText="Mit dem Absenden stimmen Sie unseren Geschäftsbedingungen zu."
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
<div id="footer" data-section="footer">
|
||
<FooterBase
|
||
columns={[
|
||
{
|
||
title: "Dienstleistungen", items: [
|
||
{ label: "Reparatur", href: "#features" },
|
||
{ label: "Wartung", href: "#features" },
|
||
{ label: "Motor-Optimierung", href: "#features" },
|
||
{ label: "Karosserie & Lackierung", href: "#features" },
|
||
],
|
||
},
|
||
{
|
||
title: "Unternehmen", items: [
|
||
{ label: "Über Uns", href: "#about" },
|
||
{ label: "Projekte", href: "#products" },
|
||
{ label: "Referenzen", href: "#testimonials" },
|
||
{ label: "Karriere", href: "#" },
|
||
],
|
||
},
|
||
{
|
||
title: "Support", items: [
|
||
{ label: "FAQ", href: "#faq" },
|
||
{ label: "Kontakt", href: "#contact" },
|
||
{ label: "Impressum", href: "#" },
|
||
{ label: "Datenschutz", href: "#" },
|
||
],
|
||
},
|
||
]}
|
||
logoText="HZ Performance"
|
||
copyrightText="© 2024 HZ Performance | Alle Rechte vorbehalten."
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
}
|