Bob AI: Implement premium design for Auto Fix Lörrach with gallery s

2026-06-18 07:27:00 +00:00
13 changed files with 411 additions and 254 deletions
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -59,25 +59,25 @@ export default function Layout() {
        {
          items: [
            {
-              label: "Startseite",
-              href: "#hero",
+              label: "Impressum",
+              href: "#",
            },
            {
-              label: "Über uns",
-              href: "#about",
+              label: "Datenschutz",
+              href: "#",
            },
          ],
        },
        {
          items: [
-            {
-              label: "Kontakt",
-              href: "#contact",
-            },
            {
              label: "Instagram",
              href: "https://instagram.com/autofix_loerrach",
            },
+            {
+              label: "WhatsApp",
+              href: "https://wa.me/4915129747192",
+            },
          ],
        },
      ]}
--- a/src/index.css
+++ b/src/index.css
@@ -6,13 +6,13 @@
 :root {
  /* @colorThemes/lightTheme/grayNavyBlue */
  --background: #ffffff;
-  --card: #f8f9fa;
-  --foreground: #001122;
-  --primary-cta: #15479c;
+  --card: rgba(255, 255, 255, 0.7);
+  --foreground: #0B1F3A;
+  --primary-cta: #0066FF;
  --primary-cta-text: #ffffff;
-  --secondary-cta: #a8cce8;
-  --secondary-cta-text: #001122;
-  --accent: #15479c;
+  --secondary-cta: #0B1F3A;
+  --secondary-cta-text: #ffffff;
+  --accent: #0066FF;
  --background-accent: #f5faff;

  /* @layout/border-radius/rounded */
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,252 +1,40 @@
-import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
-import FeaturesArrowCards from '@/components/sections/features/FeaturesArrowCards';
-import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
-import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
-import PricingSimpleCards from '@/components/sections/pricing/PricingSimpleCards';
-import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
-import { Clock, MapPin, ShieldCheck } from "lucide-react";
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.

-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import FeaturesSection from './HomePage/sections/Features';
+import PricingSection from './HomePage/sections/Pricing';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import MetricsSection from './HomePage/sections/Metrics';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+
+import TrustBadgesSection from './HomePage/sections/TrustBadges';
+import GallerySection from './HomePage/sections/Gallery';export default function HomePage(): React.JSX.Element {
  return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroSplitMediaGrid
-      tag="Mobile Profis"
-      title="Professionelle Fahrzeugaufbereitung in Lörrach & Umgebung"
-      description="Wir bringen Ihr Fahrzeug wieder in Bestform – bequem bei Ihnen vor Ort."
-      primaryButton={{
-        text: "Jetzt Termin buchen",
-        href: "#contact",
-      }}
-      secondaryButton={{
-        text: "WhatsApp kontaktieren",
-        href: "https://wa.me/4915129747192",
-      }}
-      items={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/dark-vip-cinema-studio-still-life_23-2149500615.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193587.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
+      <TrustBadgesSection />

-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutFeaturesSplit
-      tag="Über uns"
-      title="Ihre Experten für Fahrzeugpflege"
-      description="AUTO FIX LÖRRACH steht für professionelle Fahrzeugpflege mit Liebe zum Detail. Unser Ziel ist es, jedem Kunden ein sauberes und gepflegtes Fahrzeug zu übergeben – direkt vor Ort und ohne Stress."
-      items={[
-        {
-          icon: MapPin,
-          title: "Vor Ort Service",
-          description: "Wir kommen direkt zu Ihnen, egal ob zu Hause oder auf die Arbeit.",
-        },
-        {
-          icon: Clock,
-          title: "Flexible Termine",
-          description: "Wir richten uns zeitlich ganz nach Ihren individuellen Bedürfnissen.",
-        },
-        {
-          icon: ShieldCheck,
-          title: "Zufriedenheitsgarantie",
-          description: "Hochwertige Ergebnisse durch professionelle Reinigungsprodukte.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194068.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
+      <GallerySection />

-  <div id="features" data-section="features">
-    <SectionErrorBoundary name="features">
-          <FeaturesArrowCards
-      tag="Warum wir?"
-      title="Ihre Vorteile mit Auto Fix Lörrach"
-      description="Warum Sie sich für uns entscheiden sollten."
-      items={[
-        {
-          title: "Mobile Aufbereitung",
-          tags: [
-            "Flexibel",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193589.jpg",
-        },
-        {
-          title: "Professionelle Reinigung",
-          tags: [
-            "Qualität",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/man-washing-his-car-garage_1157-26071.jpg",
-        },
-        {
-          title: "Faire Festpreise",
-          tags: [
-            "Transparent",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/man-car-clean-vacuuming-car-inside_1303-30580.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturesSection />

-  <div id="pricing" data-section="pricing">
-    <SectionErrorBoundary name="pricing">
-          <PricingSimpleCards
-      tag="Pakete"
-      title="Transparente Preisgestaltung"
-      description="Wählen Sie das passende Paket für Ihr Fahrzeug."
-      plans={[
-        {
-          tag: "Basic",
-          price: "ab 49 €",
-          description: "Gründliche Basisreinigung",
-          features: [
-            "Innenraum aussaugen",
-            "Fußmatten Reinigung",
-            "Armaturen Reinigung",
-            "Scheibenreinigung",
-            "Kofferraum",
-          ],
-        },
-        {
-          tag: "Premium",
-          price: "ab 79 €",
-          description: "Deep-Care für Ihr Auto",
-          features: [
-            "Alle Basis-Leistungen",
-            "Tiefenreinigung Polster",
-            "Lederpflege",
-            "Geruchsneutralisierung",
-            "Detailreinigung",
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <PricingSection />

-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialOverlayCards
-      tag="Referenzen"
-      title="Was unsere Kunden sagen"
-      description="Zufriedene Kunden aus ganz Lörrach."
-      testimonials={[
-        {
-          name: "Sarah Müller",
-          role: "Kunden",
-          company: "Lörrach",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/muslim-couple-traveling-together_23-2149305596.jpg",
-        },
-        {
-          name: "Markus Weber",
-          role: "Kunden",
-          company: "Weil am Rhein",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/saleswoman-car-showroom-selling-cars_1303-25484.jpg",
-        },
-        {
-          name: "Julia Schneider",
-          role: "Kunden",
-          company: "Rheinfelden",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-car-repairman-greeting-with-male-customer-auto-repair-shop_637285-2425.jpg",
-        },
-        {
-          name: "Thomas Fischer",
-          role: "Kunden",
-          company: "Lörrach",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-salesman-talking-with-clients-showcasing-dealership-vehicle_482257-124599.jpg",
-        },
-        {
-          name: "Elena Wagner",
-          role: "Kunden",
-          company: "Lörrach",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/stunning-young-woman-waring-dress-posing-front-her-car-outdoors-ownership-driver_158595-6804.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />

-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsSimpleCards
-      tag="Erfolge"
-      title="Unsere Zahlen"
-      description="Fahrzeugpflege mit Leidenschaft."
-      metrics={[
-        {
-          value: "250+",
-          description: "Fahrzeuge aufbereitet",
-        },
-        {
-          value: "100%",
-          description: "Zufriedene Kunden",
-        },
-        {
-          value: "24/7",
-          description: "Support für Termine",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MetricsSection />

-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqTabbedAccordion
-      tag="Fragen?"
-      title="Häufig gestellte Fragen"
-      description="Alles was Sie über unseren Service wissen müssen."
-      categories={[
-        {
-          name: "Service",
-          items: [
-            {
-              question: "Wie buche ich einen Termin?",
-              answer: "Einfach per WhatsApp oder Telefon.",
-            },
-            {
-              question: "Wo reinigen Sie das Auto?",
-              answer: "Direkt bei Ihnen vor Ort.",
-            },
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />

-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Kontakt"
-      text="Bereit für ein strahlendes Fahrzeug? Kontaktieren Sie uns noch heute!"
-      primaryButton={{
-        text: "Jetzt anrufen",
-        href: "tel:+4915129747192",
-      }}
-      secondaryButton={{
-        text: "WhatsApp",
-        href: "https://wa.me/4915129747192",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
    </>
  );
 }
--- a/src/pages/HomePage/sections/About.tsx
+++ b/src/pages/HomePage/sections/About.tsx
@@ -0,0 +1,23 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
+import { Clock, MapPin, ShieldCheck } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutFeaturesSplit
+        tag="ÜBER UNS"
+        title="Premium Fahrzeugpflege mit Liebe zum Detail"
+        description="AUTO FIX LÖRRACH steht für professionelle Fahrzeugpflege mit höchsten Qualitätsansprüchen. Unser Ziel ist es, jedes Fahrzeug wieder in einen gepflegten und hochwertigen Zustand zu bringen – direkt bei unseren Kunden vor Ort. Qualität, Zuverlässigkeit und Liebe zum Detail stehen bei uns an erster Stelle."
+        items={[{"description":"Wir kommen direkt zu Ihnen, egal ob zu Hause oder auf die Arbeit.","title":"Vor Ort Service","icon":"MapPin"},{"icon":"Clock","description":"Wir richten uns zeitlich ganz nach Ihren individuellen Bedürfnissen.","title":"Flexible Termine"},{"title":"Zufriedenheitsgarantie","description":"Hochwertige Ergebnisse durch professionelle Reinigungsprodukte.","icon":"ShieldCheck"}]}
+        imageSrc="http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194068.jpg"
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Contact.tsx
+++ b/src/pages/HomePage/sections/Contact.tsx
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+              <ContactCta
+        tag="KONTAKT"
+        text="AUTO FIX LÖRRACH | 📞 0151 297 471 92 | 📧 kontakt@autofix-loerrach.com | 📍 Lörrach & Umgebung | Instagram: @autofix_loerrach"
+        primaryButton={{"text":"Jetzt anrufen","href":"tel:+4915129747192"}}
+        secondaryButton={{"text":"WhatsApp","href":"https://wa.me/4915129747192"}}
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Faq.tsx
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -0,0 +1,35 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqTabbedAccordion
+          tag="Fragen?"
+          title="Häufig gestellte Fragen"
+          description="Alles was Sie über unseren Service wissen müssen."
+          categories={[
+            {
+              name: "Service",
+              items: [
+                {
+                  question: "Wie buche ich einen Termin?",
+                  answer: "Einfach per WhatsApp oder Telefon.",
+                },
+                {
+                  question: "Wo reinigen Sie das Auto?",
+                  answer: "Direkt bei Ihnen vor Ort.",
+                },
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Features.tsx
+++ b/src/pages/HomePage/sections/Features.tsx
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "features" section.
+
+import React from 'react';
+import FeaturesArrowCards from '@/components/sections/features/FeaturesArrowCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <div id="features" data-section="features">
+        <SectionErrorBoundary name="features">
+              <FeaturesArrowCards
+        tag="WARUM AUTO FIX LÖRRACH?"
+        title="Ihre Vorteile auf einen Blick"
+        description="Vier große Premium-Karten für Ihre Entscheidung."
+        items={[{"imageSrc":"http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193589.jpg","tags":["Flexibel","Vor Ort"],"title":"🚗 Mobile Fahrzeugaufbereitung"},{"tags":["Qualität","Markenprodukte"],"title":"⭐ Hochwertige Premium-Produkte","imageSrc":"http://img.b2bpic.net/free-photo/man-washing-his-car-garage_1157-26071.jpg"},{"tags":["Erfahrung","Garantie"],"title":"🛡️ Zuverlässig & Professionell","imageSrc":"http://img.b2bpic.net/free-photo/man-car-clean-vacuuming-car-inside_1303-30580.jpg"},{"imageSrc":"http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194068.jpg","tags":["Schnell","Einfach"],"title":"⚡ Flexible Terminvergabe"}]}
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Gallery.tsx
+++ b/src/pages/HomePage/sections/Gallery.tsx
@@ -0,0 +1,153 @@
+import { useState, useRef } from 'react';
+import { motion } from 'motion/react';
+import TextAnimation from '@/components/ui/TextAnimation';
+import ScrollReveal from '@/components/ui/ScrollReveal';
+import ImageOrVideo from '@/components/ui/ImageOrVideo';
+import Tag from '@/components/ui/Tag';
+
+export default function GallerySection() {
+  const [sliderPosition1, setSliderPosition1] = useState(50);
+  const [sliderPosition2, setSliderPosition2] = useState(50);
+  const containerRef1 = useRef<HTMLDivElement>(null);
+  const containerRef2 = useRef<HTMLDivElement>(null);
+
+  const handleMove1 = (event: React.MouseEvent | React.TouchEvent) => {
+    if (!containerRef1.current) return;
+    const rect = containerRef1.current.getBoundingClientRect();
+    const x = 'touches' in event ? event.touches[0].clientX - rect.left : (event as React.MouseEvent).clientX - rect.left;
+    const position = Math.max(0, Math.min(100, (x / rect.width) * 100));
+    setSliderPosition1(position);
+  };
+
+  const handleMove2 = (event: React.MouseEvent | React.TouchEvent) => {
+    if (!containerRef2.current) return;
+    const rect = containerRef2.current.getBoundingClientRect();
+    const x = 'touches' in event ? event.touches[0].clientX - rect.left : (event as React.MouseEvent).clientX - rect.left;
+    const position = Math.max(0, Math.min(100, (x / rect.width) * 100));
+    setSliderPosition2(position);
+  };
+
+  return (
+    <section id="gallery" data-webild-section="gallery" className="relative w-full py-24 bg-background">
+      <div className="w-content-width mx-auto px-6">
+        <div className="text-center mb-16">
+          <Tag text="GALERIE" className="mb-4" />
+          <TextAnimation
+            text="Vorher / Nachher Ergebnisse"
+            variant="slide-up"
+            tag="h2"
+            gradientText={false}
+            className="text-4xl md:text-5xl font-bold text-foreground mb-6"
+          />
+          <TextAnimation
+            text="Überzeugen Sie sich selbst von unserer Arbeit. Schieben Sie den Regler, um den Unterschied zu sehen."
+            variant="fade"
+            tag="p"
+            gradientText={false}
+            className="text-lg text-muted-foreground max-w-2xl mx-auto"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <ScrollReveal variant="slide-up" delay={0.1}>
+            <div className="card rounded-theme overflow-hidden relative group">
+              <div 
+                className="relative h-[400px] w-full cursor-ew-resize select-none"
+                ref={containerRef1}
+                onMouseMove={handleMove1}
+                onTouchMove={handleMove1}
+              >
+                {/* After Image (Base) */}
+                <ImageOrVideo
+                  imageSrc="http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193587.jpg"
+                  className="absolute inset-0 w-full h-full object-cover pointer-events-none"
+                />
+                
+                {/* Before Image (Overlay with clip-path) */}
+                <div 
+                  className="absolute inset-0 w-full h-full overflow-hidden pointer-events-none"
+                  style={{ clipPath: `polygon(0 0, ${sliderPosition1}% 0, ${sliderPosition1}% 100%, 0 100%)` }}
+                >
+                  <ImageOrVideo
+                    imageSrc="http://img.b2bpic.net/free-photo/dirty-car-interior_1157-26071.jpg"
+                    className="absolute inset-0 w-full h-full object-cover"
+                  />
+                </div>
+
+                {/* Slider Handle */}
+                <div 
+                  className="absolute inset-y-0 w-1 bg-white pointer-events-none flex items-center justify-center"
+                  style={{ left: `${sliderPosition1}%`, transform: 'translateX(-50%)' }}
+                >
+                  <div className="w-8 h-8 bg-white rounded-full shadow-lg flex items-center justify-center">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-primary-cta">
+                      <path d="M15 18l-6-6 6-6" />
+                      <path d="M9 18l6-6-6-6" />
+                    </svg>
+                  </div>
+                </div>
+                
+                {/* Labels */}
+                <div className="absolute top-4 left-4 bg-black/50 backdrop-blur-sm text-white px-3 py-1 rounded-full text-sm font-medium pointer-events-none">Vorher</div>
+                <div className="absolute top-4 right-4 bg-black/50 backdrop-blur-sm text-white px-3 py-1 rounded-full text-sm font-medium pointer-events-none">Nachher</div>
+              </div>
+              <div className="p-6 bg-card">
+                <h3 className="text-xl font-bold text-foreground mb-2">Innenraumreinigung</h3>
+                <p className="text-muted-foreground">Tiefenreinigung von Sitzen und Polstern.</p>
+              </div>
+            </div>
+          </ScrollReveal>
+
+          <ScrollReveal variant="slide-up" delay={0.2}>
+            <div className="card rounded-theme overflow-hidden relative group">
+              <div 
+                className="relative h-[400px] w-full cursor-ew-resize select-none"
+                ref={containerRef2}
+                onMouseMove={handleMove2}
+                onTouchMove={handleMove2}
+              >
+                {/* After Image (Base) */}
+                <ImageOrVideo
+                  imageSrc="http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194068.jpg"
+                  className="absolute inset-0 w-full h-full object-cover pointer-events-none"
+                />
+                
+                {/* Before Image (Overlay with clip-path) */}
+                <div 
+                  className="absolute inset-0 w-full h-full overflow-hidden pointer-events-none"
+                  style={{ clipPath: `polygon(0 0, ${sliderPosition2}% 0, ${sliderPosition2}% 100%, 0 100%)` }}
+                >
+                  <ImageOrVideo
+                    imageSrc="http://img.b2bpic.net/free-photo/dirty-car-dashboard_1303-30580.jpg"
+                    className="absolute inset-0 w-full h-full object-cover"
+                  />
+                </div>
+
+                {/* Slider Handle */}
+                <div 
+                  className="absolute inset-y-0 w-1 bg-white pointer-events-none flex items-center justify-center"
+                  style={{ left: `${sliderPosition2}%`, transform: 'translateX(-50%)' }}
+                >
+                  <div className="w-8 h-8 bg-white rounded-full shadow-lg flex items-center justify-center">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-primary-cta">
+                      <path d="M15 18l-6-6 6-6" />
+                      <path d="M9 18l6-6-6-6" />
+                    </svg>
+                  </div>
+                </div>
+                
+                {/* Labels */}
+                <div className="absolute top-4 left-4 bg-black/50 backdrop-blur-sm text-white px-3 py-1 rounded-full text-sm font-medium pointer-events-none">Vorher</div>
+                <div className="absolute top-4 right-4 bg-black/50 backdrop-blur-sm text-white px-3 py-1 rounded-full text-sm font-medium pointer-events-none">Nachher</div>
+              </div>
+              <div className="p-6 bg-card">
+                <h3 className="text-xl font-bold text-foreground mb-2">Armaturenbrett</h3>
+                <p className="text-muted-foreground">Pflege und Aufbereitung aller Kunststoffteile.</p>
+              </div>
+            </div>
+          </ScrollReveal>
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/pages/HomePage/sections/Hero.tsx
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,23 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroSplitMediaGrid
+        tag="MOBILE FAHRZEUGAUFBEREITUNG AUF PREMIUM-NIVEAU"
+        title="MOBILE FAHRZEUGAUFBEREITUNG AUF PREMIUM-NIVEAU"
+        description="Professionelle Innenraumaufbereitung direkt bei Ihnen vor Ort – für Privat- und Geschäftskunden in Lörrach & Umgebung."
+        primaryButton={{"text":"🔵 Termin vereinbaren","href":"#contact"}}
+        secondaryButton={{"text":"⚪ WhatsApp kontaktieren","href":"https://wa.me/4915129747192"}}
+        items={[{"imageSrc":"http://img.b2bpic.net/free-photo/dark-vip-cinema-studio-still-life_23-2149500615.jpg"},{"imageSrc":"http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193587.jpg"}]}
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Metrics.tsx
+++ b/src/pages/HomePage/sections/Metrics.tsx
@@ -0,0 +1,34 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
+import React from 'react';
+import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsSimpleCards
+          tag="Erfolge"
+          title="Unsere Zahlen"
+          description="Fahrzeugpflege mit Leidenschaft."
+          metrics={[
+            {
+              value: "250+",
+              description: "Fahrzeuge aufbereitet",
+            },
+            {
+              value: "100%",
+              description: "Zufriedene Kunden",
+            },
+            {
+              value: "24/7",
+              description: "Support für Termine",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Pricing.tsx
+++ b/src/pages/HomePage/sections/Pricing.tsx
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "pricing" section.
+
+import React from 'react';
+import PricingSimpleCards from '@/components/sections/pricing/PricingSimpleCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function PricingSection(): React.JSX.Element {
+  return (
+    <div id="pricing" data-section="pricing">
+        <SectionErrorBoundary name="pricing">
+              <PricingSimpleCards
+        tag="LEISTUNGEN"
+        title="Unsere Premium Pakete"
+        description="Wählen Sie das passende Paket für Ihr Fahrzeug. Wir bieten individuelle Fahrzeugaufbereitung ganz nach Ihren Wünschen."
+        plans={[{"tag":"SILBER PAKET","description":"Für regelmäßig gepflegte Fahrzeuge. Kleinwagen 49€ | SUV 59€ | Van 69€","features":["Innenraum saugen","Armaturen reinigen","Kunststoffpflege","Scheiben innen","Fußmatten reinigen","Kofferraum reinigen"],"price":"ab 49 €"},{"tag":"PREMIUM CARE","description":"Für Fahrzeuge mit höherem Reinigungsbedarf. Kleinwagen 79€ | SUV 89€ | Van 99€","features":["Alles aus dem Silber Paket","Tiefenreinigung der Sitze","Polsterreinigung","Lederpflege","Intensive Detailreinigung","Geruchsneutralisierung","Kunststoffpflege Premium"],"price":"ab 79 €"},{"tag":"DETAILING NACH WUNSCH","description":"Sie bestimmen den Umfang. Ob einzelne Bereiche oder eine komplette Fahrzeugaufbereitung – wir erstellen Ihnen ein individuelles Angebot.","features":["Individuelle Beratung","Maßgeschneiderte Reinigung","Spezialbehandlungen","Lackaufbereitung (optional)","Keramikversiegelung (optional)"],"price":"Auf Anfrage"}]}
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Testimonials.tsx
+++ b/src/pages/HomePage/sections/Testimonials.tsx
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonials" section.
+
+import React from 'react';
+import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialOverlayCards
+        tag="KUNDENBEWERTUNGEN"
+        title="⭐⭐⭐⭐⭐"
+        description="Was unsere Kunden über unsere Premium-Aufbereitung sagen."
+        testimonials={[{"imageSrc":"http://img.b2bpic.net/free-photo/muslim-couple-traveling-together_23-2149305596.jpg","name":"Sarah Müller","rating":5,"role":"\"Top Arbeit!\"","company":"Lörrach"},{"company":"Weil am Rhein","role":"\"Mein Auto sieht aus wie neu.\"","imageSrc":"http://img.b2bpic.net/free-photo/saleswoman-car-showroom-selling-cars_1303-25484.jpg","name":"Markus Weber","rating":5},{"name":"Julia Schneider","rating":5,"imageSrc":"http://img.b2bpic.net/free-photo/happy-african-american-car-repairman-greeting-with-male-customer-auto-repair-shop_637285-2425.jpg","role":"\"Sehr professionell.\"","company":"Rheinfelden"}]}
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/TrustBadges.tsx
+++ b/src/pages/HomePage/sections/TrustBadges.tsx
@@ -0,0 +1,17 @@
+// Created by add_section_from_catalog (SocialProofMarquee).
+
+import React from 'react';
+import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
+
+export default function TrustBadgesSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="trust-badges" id="trust-badges">
+      <SocialProofMarquee
+        tag="Qualität"
+        description="Vertrauen Sie auf unsere Expertise."
+        title="Warum AUTO FIX LÖRRACH?"
+        names={["✓ Mobile Fahrzeugaufbereitung","✓ Premium Produkte","✓ Flexible Termine","✓ Professionelle Fahrzeugpflege"]}
+      />
+    </div>
+  );
+}