Merge version_1 into main #2
440
src/app/page.tsx
440
src/app/page.tsx
@@ -15,313 +15,157 @@ import { Wrench } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Leistungen",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Über uns",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Bewertungen",
|
||||
id: "#testimonials",
|
||||
},
|
||||
{
|
||||
name: "Kontakt",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="KFZ Kremer"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Leistungen", id: "services" },
|
||||
{ name: "Über uns", id: "about" },
|
||||
{ name: "Bewertungen", id: "testimonials" },
|
||||
{ name: "Kontakt", id: "contact" },
|
||||
]}
|
||||
brandName="KFZ Kremer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Ihr Vertrauenswürdiger KFZ-Meisterbetrieb"
|
||||
description="Über 20 Jahre Erfahrung für Ihr Fahrzeug. Wir sorgen für Sicherheit auf der Straße."
|
||||
kpis={[
|
||||
{
|
||||
value: "5,0/5,0",
|
||||
label: "Bewertungen",
|
||||
},
|
||||
{
|
||||
value: "Schnell",
|
||||
label: "Termine",
|
||||
},
|
||||
{
|
||||
value: "Meister",
|
||||
label: "Betrieb",
|
||||
},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Termin anfragen",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Leistungen",
|
||||
href: "#services",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/construction-hammers-still-life_23-2150563134.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/top-view-metal-keys_23-2148796580.jpg",
|
||||
alt: "precision tool set",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/tools-repairing-shop_23-2148138424.jpg",
|
||||
alt: "repair shop tools",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/vintage-objects-arrangement-still-life_23-2150348577.jpg",
|
||||
alt: "vintage workshop gear",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/construction-hammers-still-life_23-2150563136.jpg",
|
||||
alt: "construction hammers",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/red-head-bearded-bicycle-mechanic-holds-screwdriver-bike-tools-stand-workshop_613910-14341.jpg",
|
||||
alt: "bike repair station",
|
||||
},
|
||||
]}
|
||||
avatarText="Über 500+ zufriedene Stammkunden"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Meisterbetrieb",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Alle Marken",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Faire Preise",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Schneller Service",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "TÜV vor Ort",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "plain" }}
|
||||
title="Ihr Vertrauenswürdiger KFZ-Meisterbetrieb"
|
||||
description="Über 20 Jahre Erfahrung für Ihr Fahrzeug. Wir sorgen für Sicherheit auf der Straße."
|
||||
kpis={[
|
||||
{ value: "5,0/5,0", label: "Bewertungen" },
|
||||
{ value: "Schnell", label: "Termine" },
|
||||
{ value: "Meister", label: "Betrieb" }
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[{ text: "Termin anfragen", href: "#contact" }, { text: "Leistungen", href: "#services" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/construction-hammers-still-life_23-2150563134.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/top-view-metal-keys_23-2148796580.jpg", alt: "precision tool set" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/tools-repairing-shop_23-2148138424.jpg", alt: "repair shop tools" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/vintage-objects-arrangement-still-life_23-2150348577.jpg", alt: "vintage workshop gear" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/construction-hammers-still-life_23-2150563136.jpg", alt: "construction hammers" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/red-head-bearded-bicycle-mechanic-holds-screwdriver-bike-tools-stand-workshop_613910-14341.jpg", alt: "bike repair station" }
|
||||
]}
|
||||
avatarText="Über 500+ zufriedene Stammkunden"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Meisterbetrieb" },
|
||||
{ type: "text", text: "Alle Marken" },
|
||||
{ type: "text", text: "Faire Preise" },
|
||||
{ type: "text", text: "Schneller Service" },
|
||||
{ type: "text", text: "TÜV vor Ort" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Inspektion & Wartung",
|
||||
description: "Wartung nach Herstellervorgaben für alle Marken.",
|
||||
items: [],
|
||||
reverse: false,
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-construction-hammers-still-life_23-2150563143.jpg",
|
||||
imageAlt: "Inspection service",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/construction-hammers-still-life_23-2150563134.jpg?_wi=2",
|
||||
imageAlt: "industrial workshop tools dark aesthetic",
|
||||
},
|
||||
{
|
||||
title: "TÜV / HU & AU",
|
||||
description: "Vorbereitung und Abnahme direkt vor Ort.",
|
||||
items: [],
|
||||
reverse: true,
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-tools_23-2148932612.jpg",
|
||||
imageAlt: "TÜV inspection",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-repairing-bicycle_23-2148138530.jpg?_wi=1",
|
||||
imageAlt: "industrial workshop tools dark aesthetic",
|
||||
},
|
||||
{
|
||||
title: "Reparaturen",
|
||||
description: "Bremsen, Auspuff, Kupplung, Motor – alt und neu.",
|
||||
items: [],
|
||||
reverse: false,
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tools-tool-tray-repairing-cars_1150-18951.jpg",
|
||||
imageAlt: "General repair",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/client-vehicle-distributor-checkup_482257-115279.jpg?_wi=1",
|
||||
imageAlt: "industrial workshop tools dark aesthetic",
|
||||
},
|
||||
]}
|
||||
title="Unsere Leistungen"
|
||||
description="Umfassender Service für alle Automarken."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Inspektion & Wartung", description: "Wartung nach Herstellervorgaben für alle Marken.", items: [],
|
||||
reverse: false,
|
||||
media: { imageSrc: "http://img.b2bpic.net/free-photo/top-view-construction-hammers-still-life_23-2150563143.jpg", imageAlt: "Inspection service" }
|
||||
},
|
||||
{
|
||||
title: "TÜV / HU & AU", description: "Vorbereitung und Abnahme direkt vor Ort.", items: [],
|
||||
reverse: true,
|
||||
media: { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-tools_23-2148932612.jpg", imageAlt: "TÜV inspection" }
|
||||
},
|
||||
{
|
||||
title: "Reparaturen", description: "Bremsen, Auspuff, Kupplung, Motor – alt und neu.", items: [],
|
||||
reverse: false,
|
||||
media: { imageSrc: "http://img.b2bpic.net/free-photo/tools-tool-tray-repairing-cars_1150-18951.jpg", imageAlt: "General repair" }
|
||||
}
|
||||
]}
|
||||
title="Unsere Leistungen"
|
||||
description="Umfassender Service für alle Automarken."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="Über uns"
|
||||
title="Meisterhafte Erfahrung"
|
||||
description="Seit über 20 Jahren setzen wir auf Qualität und Zuverlässigkeit. Wir beraten Sie persönlich und individuell."
|
||||
subdescription="Wir stehen für Kompetenz – auch bei Oldtimern und seltenen Fahrzeugen."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mechanic-repairing-bicycle_23-2148138530.jpg?_wi=2"
|
||||
mediaAnimation="slide-up"
|
||||
icon={Wrench}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="Über uns"
|
||||
title="Meisterhafte Erfahrung"
|
||||
description="Seit über 20 Jahren setzen wir auf Qualität und Zuverlässigkeit. Wir beraten Sie persönlich und individuell."
|
||||
subdescription="Wir stehen für Kompetenz – auch bei Oldtimern und seltenen Fahrzeugen."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mechanic-repairing-bicycle_23-2148138530.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
icon={Wrench}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Gast",
|
||||
role: "Kunde",
|
||||
testimonial: "Gute Leistung bei gutem Preis. Zuverlässig und freundlich.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/client-vehicle-distributor-checkup_482257-115279.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Gast",
|
||||
role: "Kunde",
|
||||
testimonial: "Schnell, sehr gute Qualität, kostengünstig.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-shaking-hands-with-car-mechanic-while-greeting-repair-shop_637285-7726.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Gast",
|
||||
role: "Kunde",
|
||||
testimonial: "Einfach sehr gut und absolut zufrieden.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-customer-with-business-person-car-dealership_23-2149117151.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Gast",
|
||||
role: "Kunde",
|
||||
testimonial: "Bin seit Jahren Kundin und war bis jetzt immer sehr zufrieden.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/satisfied-couple-signing-documents-while-talking-their-mechanic-auto-repair-shop_637285-7722.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Gast",
|
||||
role: "Kunde",
|
||||
testimonial: "Dieser Mann versteht wirklich was von Autos. Immer zuverlässig.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-blonde-woman-looking-away_23-2148384924.jpg",
|
||||
},
|
||||
]}
|
||||
title="Was Kunden sagen"
|
||||
description="5,0 von 5 Sternen – wir schätzen das Vertrauen unserer Kunden."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Gast", role: "Kunde", testimonial: "Gute Leistung bei gutem Preis. Zuverlässig und freundlich.", imageSrc: "http://img.b2bpic.net/free-photo/client-vehicle-distributor-checkup_482257-115279.jpg" },
|
||||
{ id: "2", name: "Gast", role: "Kunde", testimonial: "Schnell, sehr gute Qualität, kostengünstig.", imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-shaking-hands-with-car-mechanic-while-greeting-repair-shop_637285-7726.jpg" },
|
||||
{ id: "3", name: "Gast", role: "Kunde", testimonial: "Einfach sehr gut und absolut zufrieden.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-customer-with-business-person-car-dealership_23-2149117151.jpg" },
|
||||
{ id: "4", name: "Gast", role: "Kunde", testimonial: "Bin seit Jahren Kundin und war bis jetzt immer sehr zufrieden.", imageSrc: "http://img.b2bpic.net/free-photo/satisfied-couple-signing-documents-while-talking-their-mechanic-auto-repair-shop_637285-7722.jpg" },
|
||||
{ id: "5", name: "Gast", role: "Kunde", testimonial: "Dieser Mann versteht wirklich was von Autos. Immer zuverlässig.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-blonde-woman-looking-away_23-2148384924.jpg" }
|
||||
]}
|
||||
title="Was Kunden sagen"
|
||||
description="5,0 von 5 Sternen – wir schätzen das Vertrauen unserer Kunden."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Bieten Sie auch Notfallhilfe an?",
|
||||
content: "Ja, wir bieten schnelle Hilfe in Notfällen und bei dringenden Terminsachen.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Reparieren Sie auch Oldtimer?",
|
||||
content: "Wir verfügen über fachliche Kompetenz auch bei älteren Fahrzeugen.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Wie vereinbare ich einen Termin?",
|
||||
content: "Sie können uns einfach anrufen oder per WhatsApp eine Nachricht schreiben.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Häufige Fragen"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "1", title: "Bieten Sie auch Notfallhilfe an?", content: "Ja, wir bieten schnelle Hilfe in Notfällen und bei dringenden Terminsachen." },
|
||||
{ id: "2", title: "Reparieren Sie auch Oldtimer?", content: "Wir verfügen über fachliche Kompetenz auch bei älteren Fahrzeugen." },
|
||||
{ id: "3", title: "Wie vereinbare ich einen Termin?", content: "Sie können uns einfach anrufen oder per WhatsApp eine Nachricht schreiben." }
|
||||
]}
|
||||
sideTitle="Häufige Fragen"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Jetzt Termin anfragen"
|
||||
description="Haben Sie ein Anliegen? Schreiben Sie uns oder rufen Sie direkt an."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/car-mechanic-choosing-spanners_23-2147897824.jpg"
|
||||
buttonText="Anfrage senden"
|
||||
tag="Kontakt"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
title="Jetzt Termin anfragen"
|
||||
description="Haben Sie ein Anliegen? Schreiben Sie uns oder rufen Sie direkt an."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/car-mechanic-choosing-spanners_23-2147897824.jpg"
|
||||
buttonText="Anfrage senden"
|
||||
tag="Kontakt"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/dark-metal-texture_1048-4658.jpg"
|
||||
logoText="KFZ Kremer"
|
||||
columns={[
|
||||
{
|
||||
title: "Service",
|
||||
items: [
|
||||
{
|
||||
label: "Leistungen",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Über uns",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Kontakt",
|
||||
items: [
|
||||
{
|
||||
label: "Anrufen",
|
||||
href: "tel:+49123456789",
|
||||
},
|
||||
{
|
||||
label: "WhatsApp",
|
||||
href: "https://wa.me/4912345678900",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Rechtliches",
|
||||
items: [
|
||||
{
|
||||
label: "Impressum",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Datenschutz",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2026 KFZ Kremer"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/dark-metal-texture_1048-4658.jpg"
|
||||
logoText="KFZ Kremer"
|
||||
columns={[
|
||||
{ title: "Service", items: [{ label: "Leistungen", href: "#services" }, { label: "Über uns", href: "#about" }] },
|
||||
{ title: "Kontakt", items: [{ label: "Anrufen", href: "tel:+49123456789" }, { label: "WhatsApp", href: "https://wa.me/4912345678900" }] },
|
||||
{ title: "Rechtliches", items: [{ label: "Impressum", href: "#" }, { label: "Datenschutz", href: "#" }] }
|
||||
]}
|
||||
copyrightText="© 2026 KFZ Kremer"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user