Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -5,14 +5,14 @@ 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 FeatureBento from '@/components/sections/feature/FeatureBento';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+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 } from "lucide-react";
+import { Award, Clock, Shield, Sparkles, Brush, Instagram, Mail, Phone, MapPin } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -33,13 +33,13 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         { name: "Home", id: "home" },
-        { name: "About", id: "about" },
+        { name: "Über uns", id: "about" },
         { name: "Services", id: "services" },
-        { name: "Pricing", id: "pricing" },
-        { name: "Products", id: "products" },
-        { name: "Testimonials", id: "testimonials" },
+        { name: "Preise", id: "pricing" },
+        { name: "Portfolio", id: "products" },
+        { name: "Referenzen", id: "testimonials" },
         { name: "FAQ", id: "faq" },
-        { name: "Contact", id: "contact" },
+        { name: "Kontakt", id: "contact" },
       ]}
       brandName="Black Horse Detailing"
     />
@@ -48,16 +48,16 @@ export default function LandingPage() {
   <div id="home" data-section="home">
       <HeroBillboardRotatedCarousel
       background={{ variant: "gradient-bars" }}
-      title="Professional Car Care in Dieburg"
-      description="At Black Horse Detailing, we restore your vehicle to showroom quality. Expert care, premium products, and absolute precision."
-      buttons={[{ text: "Book Appointment", href: "#contact" }]}
+      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: "Luxury detailing" },
-        { id: "h2", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-exterior_23-2148194141.jpg", imageAlt: "Expert cleaning" },
-        { id: "h3", imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-mechanic-examining-vehicle-hood-while-working-auto-repair-shop_637285-7664.jpg", imageAlt: "Precision polish" },
-        { id: "h4", imageSrc: "http://img.b2bpic.net/free-photo/reflection-sky_181624-9195.jpg", imageAlt: "Interior care" },
-        { id: "h5", imageSrc: "http://img.b2bpic.net/free-photo/man-doing-repairs-car-engine_23-2148254112.jpg", imageAlt: "Engine cleaning" },
-        { id: "h6", imageSrc: "http://img.b2bpic.net/free-photo/close-up-bubbles-splashing-water_23-2147798199.jpg", imageAlt: "Detail work" },
+        { 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>
@@ -65,34 +65,32 @@ export default function LandingPage() {
   <div id="about" data-section="about">
       <AboutMetric
       useInvertedBackground={true}
-      title="Why Black Horse Detailing?"
+      title="Warum Black Horse Detailing?"
       metrics={[
-        { icon: Award, label: "Vehicles Served", value: "1500+" },
-        { icon: Shield, label: "Satisfaction Rate", value: "99%" },
-        { icon: Clock, label: "Years Experience", value: "8" },
+        { 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">
-      <FeatureBento
+      <FeatureCardNine
       animationType="slide-up"
-      textboxLayout="split"
+      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: "Ceramic Coating",          description: "Long-term protection with high-gloss finish.",          bentoComponent: "reveal-icon", icon: Shield,
+          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: "Deep Interior Cleaning",          description: "Complete rejuvenation for seats, carpets, and trim.",          bentoComponent: "reveal-icon", icon: Brush,
-        },
-        {
-          title: "Exterior Polish",          description: "Removal of swirl marks and deep surface scratches.",          bentoComponent: "reveal-icon", icon: Sparkles,
+          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" }
         },
       ]}
-      title="Premium Detailing Services"
-      description="From exterior protection to deep interior restoration, we handle your vehicle with specialized care."
     />
   </div>
 
@@ -102,21 +100,12 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       plans={[
-        {
-          id: "basic",          badge: "Essential",          price: "€149",          subtitle: "Perfect for maintenance",          buttons: [{ text: "Select", href: "#contact" }],
-          features: ["Exterior hand wash", "Tire shine", "Glass cleaning"],
-        },
-        {
-          id: "pro",          badge: "Premium",          price: "€299",          subtitle: "Comprehensive service",          buttons: [{ text: "Select", href: "#contact" }],
-          features: ["Full exterior detail", "Full interior deep clean", "Leather conditioning"],
-        },
-        {
-          id: "max",          badge: "Elite",          price: "€499",          subtitle: "The complete treatment",          buttons: [{ text: "Select", href: "#contact" }],
-          features: ["Paint correction", "Ceramic coating", "Engine detail", "Ozone treatment"],
-        },
+        { 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="Tailored Detailing Packages"
-      description="Choose the level of care your vehicle deserves."
+      title="Individuelle Detailings-Pakete"
+      description="Wählen Sie die Stufe der Pflege, die Ihr Fahrzeug verdient."
     />
   </div>
 
@@ -126,16 +115,14 @@ export default function LandingPage() {
       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: "Premium Polish", price: "€29", variant: "500ml", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-exterior-details-modern-black-car_181624-25346.jpg" },
-        { id: "p2", name: "Tire Shine Gel", price: "€19", variant: "250ml", imageSrc: "http://img.b2bpic.net/free-photo/set-cosmetic-brushes_23-2147710658.jpg" },
-        { id: "p3", name: "Ultra-Soft Towel", price: "€12", variant: "Set of 3", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194085.jpg" },
-        { id: "p4", name: "Leather Cream", price: "€25", variant: "300ml", imageSrc: "http://img.b2bpic.net/free-photo/hand-with-microfiber-cloth-cleaning-car_93675-128713.jpg" },
-        { id: "p5", name: "Pro Shop Vac", price: "€199", variant: "Industrial", imageSrc: "http://img.b2bpic.net/free-photo/man-vacuuming-car-seats_23-2149316438.jpg" },
-        { id: "p6", name: "Ceramic Kit", price: "€89", variant: "Full Pack", imageSrc: "http://img.b2bpic.net/free-photo/close-up-different-color-eye-shadows_23-2147878860.jpg" },
+        { 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" },
       ]}
-      title="Professional Care Supplies"
-      description="Shop the professional-grade products we use at our workshop."
     />
   </div>
 
@@ -145,14 +132,11 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       testimonials={[
-        { id: "1", name: "Mark S.", role: "BMW Driver", testimonial: "My car looks better than the day I bought it. Amazing service!", imageSrc: "http://img.b2bpic.net/free-photo/distraught-man-feeling-sad-while-showing-his-mechanic-car-breakdown-auto-repair-shop_637285-7708.jpg" },
-        { id: "2", name: "Julia M.", role: "SUV Owner", testimonial: "Super professional. The interior is spotless and the smell is fresh.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-looking-away_23-2147892778.jpg" },
-        { id: "3", name: "Thomas R.", role: "Car Collector", testimonial: "I trust them with my vintage car every single time. Absolutely brilliant.", imageSrc: "http://img.b2bpic.net/free-photo/happy-senior-man-white-tee-portrait_53876-105233.jpg" },
-        { id: "4", name: "Sarah K.", role: "Daily Commuter", testimonial: "Fast, friendly, and very high quality work. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/expert-informs-woman-car-motor-costs_482257-96392.jpg" },
-        { id: "5", name: "Daniel P.", role: "Sports Car Enthusiast", testimonial: "The ceramic coating is holding up perfectly. Very happy with the result.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg" },
+        { 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="Trusted by Car Enthusiasts"
-      description="See what our customers say about our professional detailing services."
+      title="Kundenstimmen"
+      description="Was unsere Kunden über unsere Arbeit sagen."
     />
   </div>
 
@@ -160,11 +144,10 @@ export default function LandingPage() {
       <FaqSplitText
       useInvertedBackground={false}
       faqs={[
-        { id: "q1", title: "How long does a full detail take?", content: "A full detail typically takes between 4-8 hours depending on the condition and size of your vehicle." },
-        { id: "q2", title: "Do you offer mobile services?", content: "Currently, we operate out of our fully equipped workshop in Industriestraße 16, Dieburg." },
-        { id: "q3", title: "How often should I detail my car?", content: "We recommend a professional detailing every 6 months to maintain your car's value and appearance." },
+        { 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." },
       ]}
-      sideTitle="Questions? We have answers."
+      sideTitle="Häufige Fragen"
       faqsAnimation="blur-reveal"
     />
   </div>
@@ -172,25 +155,27 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactSplitForm
       useInvertedBackground={true}
-      title="Ready to get started?"
-      description="Drop us a message and we'll be in touch to schedule your car's transformation."
+      title="Kontakt & Standort"
+      description="Besuchen Sie uns direkt in Dieburg. Wir freuen uns auf Ihr Fahrzeug."
       inputs={[
-        { name: "name", type: "text", placeholder: "Your Name", required: true },
-        { name: "email", type: "email", placeholder: "Your Email", required: true },
-        { name: "phone", type: "tel", placeholder: "Phone Number" },
+        { 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: "Tell us about your vehicle and needs", rows: 4 }}
+      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">
-      <FooterLogoEmphasis
-      columns={[
-        { items: [{ label: "Industriestraße 16" }, { label: "64807 Dieburg" }, { label: "0163 7039840", href: "tel:01637039840" }] },
-        { items: [{ label: "Home", href: "#home" }, { label: "Services", href: "#services" }, { label: "Contact", href: "#contact" }] },
-      ]}
+      <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>