185 lines
9.6 KiB
TypeScript
185 lines
9.6 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||
import { Award, Clock, Shield, Sparkles, Brush, Instagram, Mail, Phone, MapPin } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="expand-hover"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="soft"
|
||
contentWidth="mediumSmall"
|
||
sizing="large"
|
||
background="none"
|
||
cardStyle="gradient-radial"
|
||
primaryButtonStyle="shadow"
|
||
secondaryButtonStyle="layered"
|
||
headingFontWeight="medium"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleApple
|
||
navItems={[
|
||
{ name: "Home", id: "home" },
|
||
{ name: "Über uns", id: "about" },
|
||
{ name: "Services", id: "services" },
|
||
{ name: "Preise", id: "pricing" },
|
||
{ name: "Portfolio", id: "products" },
|
||
{ name: "Referenzen", id: "testimonials" },
|
||
{ name: "FAQ", id: "faq" },
|
||
{ name: "Kontakt", id: "contact" },
|
||
]}
|
||
brandName="Black Horse Detailing"
|
||
/>
|
||
</div>
|
||
|
||
<div id="home" data-section="home">
|
||
<HeroBillboardRotatedCarousel
|
||
background={{ variant: "gradient-bars" }}
|
||
title="Professionelle Fahrzeugaufbereitung in Dieburg"
|
||
description="Bei Black Horse Detailing bringen wir Ihren Wagen zurück in den Neuzustand. Erstklassige Pflege, Premium-Produkte und absolute Präzision."
|
||
buttons={[{ text: "Termin vereinbaren", href: "#contact" }]}
|
||
carouselItems={[
|
||
{ id: "h1", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-headlight-silver-car_181624-22638.jpg", imageAlt: "Luxus-Detailing" },
|
||
{ id: "h2", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-exterior_23-2148194141.jpg", imageAlt: "Experten-Reinigung" },
|
||
{ id: "h3", imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-mechanic-examining-vehicle-hood-while-working-auto-repair-shop_637285-7664.jpg", imageAlt: "Präzisions-Politur" },
|
||
{ id: "h4", imageSrc: "http://img.b2bpic.net/free-photo/reflection-sky_181624-9195.jpg", imageAlt: "Innenraumpflege" },
|
||
{ id: "h5", imageSrc: "http://img.b2bpic.net/free-photo/man-doing-repairs-car-engine_23-2148254112.jpg?_wi=1", imageAlt: "Motorraumreinigung" },
|
||
{ id: "h6", imageSrc: "http://img.b2bpic.net/free-photo/close-up-bubbles-splashing-water_23-2147798199.jpg", imageAlt: "Detailarbeit" },
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<AboutMetric
|
||
useInvertedBackground={true}
|
||
title="Warum Black Horse Detailing?"
|
||
metrics={[
|
||
{ icon: Award, label: "Fahrzeuge betreut", value: "1500+" },
|
||
{ icon: Shield, label: "Kundenzufriedenheit", value: "99%" },
|
||
{ icon: Clock, label: "Jahre Erfahrung", value: "8" },
|
||
]}
|
||
metricsAnimation="blur-reveal"
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardNine
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
showStepNumbers={true}
|
||
title="Unsere Premium Dienstleistungen"
|
||
description="Von der äußeren Schutzversiegelung bis zur intensiven Innenraumaufbereitung – wir behandeln Ihr Fahrzeug mit maximaler Sorgfalt."
|
||
features={[
|
||
{
|
||
title: "Keramikversiegelung", description: "Langzeitschutz mit brillantem Glanzfinish.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-exterior-details-modern-black-car_181624-25346.jpg?_wi=1" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194085.jpg?_wi=1" }
|
||
},
|
||
{
|
||
title: "Intensive Innenreinigung", description: "Komplette Verjüngung für Sitze, Polster und Cockpit.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/man-vacuuming-car-seats_23-2149316438.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/set-cosmetic-brushes_23-2147710658.jpg" }
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="pricing" data-section="pricing">
|
||
<PricingCardEight
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
plans={[
|
||
{ id: "basic", badge: "Essential", price: "149€", subtitle: "Ideal für die regelmäßige Wartung", buttons: [{ text: "Wählen", href: "#contact" }], features: ["Handwäsche außen", "Reifenpflege", "Glasreinigung"] },
|
||
{ id: "pro", badge: "Premium", price: "299€", subtitle: "Umfassender Service", buttons: [{ text: "Wählen", href: "#contact" }], features: ["Komplettes Außendetailing", "Innenraum-Tiefenreinigung", "Lederpflege"] },
|
||
{ id: "max", badge: "Elite", price: "499€", subtitle: "Die Komplettbehandlung", buttons: [{ text: "Wählen", href: "#contact" }], features: ["Lackkorrektur", "Keramikversiegelung", "Motorreinigung", "Ozonbehandlung"] },
|
||
]}
|
||
title="Individuelle Detailings-Pakete"
|
||
description="Wählen Sie die Stufe der Pflege, die Ihr Fahrzeug verdient."
|
||
/>
|
||
</div>
|
||
|
||
<div id="products" data-section="products">
|
||
<ProductCardFour
|
||
animationType="scale-rotate"
|
||
textboxLayout="default"
|
||
gridVariant="two-columns-alternating-heights"
|
||
useInvertedBackground={false}
|
||
title="Instagram Portfolio & Ergebnisse"
|
||
description="Ein Einblick in unsere aktuellen Projekte und die Qualität unserer Arbeit direkt aus unserer Werkstatt."
|
||
products={[
|
||
{ id: "p1", name: "Ceramic Finish", price: "Portfolio", variant: "Glanz", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-exterior-details-modern-black-car_181624-25346.jpg?_wi=2" },
|
||
{ id: "p2", name: "Interieur Deep Clean", price: "Portfolio", variant: "Sauberkeit", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194085.jpg?_wi=2" },
|
||
{ id: "p3", name: "Paint Restoration", price: "Portfolio", variant: "Korrektur", imageSrc: "http://img.b2bpic.net/free-photo/man-doing-repairs-car-engine_23-2148254112.jpg?_wi=2" },
|
||
{ id: "p4", name: "Leder Rejuvenation", price: "Portfolio", variant: "Pflege", imageSrc: "http://img.b2bpic.net/free-photo/hand-with-microfiber-cloth-cleaning-car_93675-128713.jpg" },
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardTwo
|
||
animationType="depth-3d"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
testimonials={[
|
||
{ id: "1", name: "Mark S.", role: "BMW Fahrer", testimonial: "Mein Auto sieht besser aus als am Tag des Kaufs!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-looking-away_23-2147892778.jpg" },
|
||
{ id: "2", name: "Julia M.", role: "SUV Besitzerin", testimonial: "Super professionell. Der Innenraum ist makellos.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg" },
|
||
]}
|
||
title="Kundenstimmen"
|
||
description="Was unsere Kunden über unsere Arbeit sagen."
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqSplitText
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{ id: "q1", title: "Wie lange dauert ein Full-Detailing?", content: "Normalerweise zwischen 4-8 Stunden, je nach Zustand." },
|
||
{ id: "q2", title: "Wo befindet sich die Werkstatt?", content: "In der Industriestraße 16, 64807 Dieburg." },
|
||
{ id: "q3", title: "Wie buche ich einen Termin?", content: "Nutzen Sie einfach unser Kontaktformular weiter unten, um schnell und unkompliziert Ihren Wunschtermin anzufragen." },
|
||
]}
|
||
sideTitle="Häufige Fragen"
|
||
faqsAnimation="blur-reveal"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplitForm
|
||
useInvertedBackground={true}
|
||
title="Kontakt & Standort"
|
||
description="Besuchen Sie uns direkt in Dieburg. Wir freuen uns auf Ihr Fahrzeug."
|
||
inputs={[
|
||
{ name: "name", type: "text", placeholder: "Name", required: true },
|
||
{ name: "email", type: "email", placeholder: "E-Mail", required: true },
|
||
{ name: "phone", type: "tel", placeholder: "Telefonnummer" },
|
||
]}
|
||
textarea={{ name: "message", placeholder: "Was können wir für Ihren Wagen tun?", rows: 4 }}
|
||
imageSrc="http://img.b2bpic.net/free-photo/barber-shop-desk-with-copy-space_23-2148256978.jpg"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterCard
|
||
logoText="Black Horse Detailing"
|
||
copyrightText="© 2025 Black Horse Detailing | Industriestraße 16, 64807 Dieburg"
|
||
socialLinks={[
|
||
{ icon: Instagram, href: "https://instagram.com/blackhorsedetailing", ariaLabel: "Instagram" },
|
||
{ icon: Mail, href: "mailto:info@blackhorsedetailing.de", ariaLabel: "E-Mail" },
|
||
{ icon: Phone, href: "tel:+491637039840", ariaLabel: "Telefon" },
|
||
]}
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
} |