Merge version_28_1782170080354 into main

Merge version_28_1782170080354 into main

src/App.tsx

@@ -3,12 +3,18 @@ import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
 import VorOrtServicePage from "@/pages/VorOrtServicePage";
+import AboutPage from "@/pages/AboutPage";
+import SuccessPage from "@/pages/SuccessPage";
+import ContactPage from "@/pages/ContactPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
         <Route path="/vor-ort-service" element={<VorOrtServicePage />} />
+        <Route path="/about" element={<AboutPage />} />
+        <Route path="/success" element={<SuccessPage />} />
+        <Route path="/contact" element={<ContactPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -4,6 +4,75 @@ import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
 import { Outlet } from 'react-router-dom';
 import { StyleProvider } from "@/components/ui/StyleProvider";
+import Input from "@/components/ui/Input";
+import Label from "@/components/ui/Label";
+import Textarea from "@/components/ui/Textarea";
+
+const ContactFormSection = () => (
+  <section id="anfrage" className="py-20 bg-background">
+    <div className="w-content-width mx-auto max-w-3xl">
+      <div className="card p-8 md:p-12 rounded-lg">
+        <h2 className="text-3xl font-bold text-foreground mb-2">Angebot anfordern</h2>
+        <p className="text-accent mb-8">Füllen Sie das Formular aus, um ein unverbindliches Angebot zu erhalten.</p>
+        <form name="Anfrage" method="POST" data-webild-form="true" data-email="kontakt@rojtec.de" className="space-y-6">
+          <input type="hidden" name="form-to" value="kontakt@rojtec.de" />
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-2">
+              <Label htmlFor="vorname">Vorname *</Label>
+              <Input id="vorname" name="Vorname" required placeholder="Max" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="nachname">Nachname *</Label>
+              <Input id="nachname" name="Nachname" required placeholder="Mustermann" />
+            </div>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-2">
+              <Label htmlFor="email">E-Mail *</Label>
+              <Input id="email" name="Email" type="email" required placeholder="max@beispiel.de" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="telefon">Telefonnummer *</Label>
+              <Input id="telefon" name="Telefon" type="tel" required placeholder="+49 123 456789" />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="adresse">Adresse</Label>
+            <Input id="adresse" name="Adresse" placeholder="Musterstraße 1, 12345 Stadt" />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="geraet">Gerätetyp / Handymodell</Label>
+            <Input id="geraet" name="Geraetetyp" placeholder="z.B. iPhone 13 Pro" />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="problem">Beschreibung des Problems / Fehler</Label>
+            <Textarea id="problem" name="Problem" rows={4} placeholder="Bitte beschreiben Sie das Problem..." />
+          </div>
+
+          <div className="flex items-start space-x-3">
+            <input 
+              type="checkbox" 
+              id="datenschutz" 
+              name="Datenschutz_Akzeptiert" 
+              required 
+              className="mt-1 h-4 w-4 rounded border-gray-300 text-primary-cta focus:ring-primary-cta"
+            />
+            <Label htmlFor="datenschutz" className="text-sm text-accent leading-tight">
+              Ich habe die <a href="/datenschutz" className="underline hover:text-foreground">Datenschutzerklärung</a> gelesen und stimme der Verarbeitung meiner Daten zur Bearbeitung meiner Anfrage zu. *
+            </Label>
+          </div>
+
+          <button type="submit" className="primary-button w-full py-3 rounded font-medium">Anfrage senden</button>
+        </form>
+      </div>
+    </div>
+  </section>
+);
 
 export default function Layout() {
   const navItems = [
@@ -36,6 +105,12 @@ export default function Layout() {
     "href": "#testimonials"
   },
   { name: "Vor Ort Service", href: "/vor-ort-service" },
+  { name: "About", href: "/about" },
+  { name: "Success", href: "/success" },
+  { name: "Contact", href: "/contact" },
+
+
+
 
 ];
 
@@ -47,12 +122,13 @@ export default function Layout() {
       logo="RojTec"
       ctaButton={{
         text: "Angebot anfordern",
-        href: "#contact",
+        href: "#anfrage",
       }}
      navItems={navItems} />
       </SectionErrorBoundary>
       <main className="flex-grow">
         <Outlet />
+        <ContactFormSection />
       </main>
       <SectionErrorBoundary name="footer">
         <FooterSimpleMedia

src/pages/AboutPage.tsx

@@ -0,0 +1,32 @@
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import FeaturesIconCards from "@/components/sections/features/FeaturesIconCards";
+
+export default function AboutPage() {
+  return (
+    <>
+      <div data-webild-section="AboutText"><section aria-label="About section" className=""><div className="w-content-width mx-auto flex flex-col gap-2 items-center"><TextAnimation text="Über RojTec" variant="fade" gradientText={false} tag="h2" className="text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><div className="flex flex-wrap gap-3 justify-center mt-2 md:mt-3"><Button text="Angebot anfordern" href="/kontakt" variant="primary" /><Button text="Mehr erfahren" href="#features" variant="secondary" animationDelay={0.1} /></div></div></section></div>
+      <div data-webild-section="FeaturesDetailedCards"><section aria-label="Features section" className=""><div className="flex flex-col gap-8"><div className="flex flex-col items-center w-content-width mx-auto gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Über uns</p></div><TextAnimation text="Über RojTec" variant="fade-blur" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Ihr zuverlässiger Partner für Handyreparatur in Wolfsburg, Braunschweig und Umgebung. Schnell, ehrlich und fachgerecht." variant="fade-blur" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Angebot anfordern" href="#angebot" variant="primary" /><Button text="Mehr erfahren" href="#features" variant="secondary" animationDelay={0.1} /></div></div><div className="flex flex-col w-content-width mx-auto gap-5"><ScrollReveal variant="fade-blur" key="Vor-Ort-Service" className="flex flex-col md:grid md:grid-cols-2 mx-auto gap-6 p-6 card rounded group"><div className="flex flex-col justify-between gap-2"><h3 className="text-4xl md:text-5xl font-semibold leading-[1.15] text-balance">Vor-Ort-Service</h3><div className="flex flex-col-reverse md:flex-col gap-3"><div className="flex flex-wrap gap-3"><div key="Flexibel" className="px-3 py-1 text-sm card rounded w-fit"><p>Flexibel</p></div>
+<div key="Bequem" className="px-3 py-1 text-sm card rounded w-fit"><p>Bequem</p></div>
+<div key="Schnell" className="px-3 py-1 text-sm card rounded w-fit"><p>Schnell</p></div></div><p className="text-lg md:text-xl leading-snug text-balance">Wir kommen direkt zu Ihnen nach Hause oder ins Unternehmen und reparieren Ihr Gerät vor Ort.</p></div></div><div className="aspect-square md:aspect-5/4 rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/technician-repairing-mobile-phone_1098-14152.jpg" className="transition-transform duration-500 ease-in-out group-hover:scale-105" /></div></ScrollReveal>
+<ScrollReveal variant="fade-blur" key="Einsende-Service" className="flex flex-col md:grid md:grid-cols-2 mx-auto gap-6 p-6 card rounded group"><div className="flex flex-col justify-between gap-2"><h3 className="text-4xl md:text-5xl font-semibold leading-[1.15] text-balance">Einsende-Service</h3><div className="flex flex-col-reverse md:flex-col gap-3"><div className="flex flex-wrap gap-3"><div key="Deutschlandweit" className="px-3 py-1 text-sm card rounded w-fit"><p>Deutschlandweit</p></div>
+<div key="Einfach" className="px-3 py-1 text-sm card rounded w-fit"><p>Einfach</p></div>
+<div key="Sicher" className="px-3 py-1 text-sm card rounded w-fit"><p>Sicher</p></div></div><p className="text-lg md:text-xl leading-snug text-balance">Sie senden uns Ihr Gerät bequem zu – wir reparieren es und schicken es schnell wieder zurück.</p></div></div><div className="aspect-square md:aspect-5/4 rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/delivery-man-holding-cardboard-boxes_1150-13753.jpg" className="transition-transform duration-500 ease-in-out group-hover:scale-105" /></div></ScrollReveal>
+<ScrollReveal variant="fade-blur" key="Alle Marken & Modelle" className="flex flex-col md:grid md:grid-cols-2 mx-auto gap-6 p-6 card rounded group"><div className="flex flex-col justify-between gap-2"><h3 className="text-4xl md:text-5xl font-semibold leading-[1.15] text-balance">Alle Marken & Modelle</h3><div className="flex flex-col-reverse md:flex-col gap-3"><div className="flex flex-wrap gap-3"><div key="Apple" className="px-3 py-1 text-sm card rounded w-fit"><p>Apple</p></div>
+<div key="Samsung" className="px-3 py-1 text-sm card rounded w-fit"><p>Samsung</p></div>
+<div key="Weitere" className="px-3 py-1 text-sm card rounded w-fit"><p>Weitere</p></div></div><p className="text-lg md:text-xl leading-snug text-balance">Von Displaybruch bis Akkutausch. Wir reparieren alle gängigen Smartphone-Marken und -Modelle.</p></div></div><div className="aspect-square md:aspect-5/4 rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/close-up-man-repairing-smartphone_23-2148336714.jpg" className="transition-transform duration-500 ease-in-out group-hover:scale-105" /></div></ScrollReveal>
+<ScrollReveal variant="fade-blur" key="Faire Preise" className="flex flex-col md:grid md:grid-cols-2 mx-auto gap-6 p-6 card rounded group"><div className="flex flex-col justify-between gap-2"><h3 className="text-4xl md:text-5xl font-semibold leading-[1.15] text-balance">Faire Preise</h3><div className="flex flex-col-reverse md:flex-col gap-3"><div className="flex flex-wrap gap-3"><div key="Fair" className="px-3 py-1 text-sm card rounded w-fit"><p>Fair</p></div>
+<div key="Transparent" className="px-3 py-1 text-sm card rounded w-fit"><p>Transparent</p></div>
+<div key="Persönlich" className="px-3 py-1 text-sm card rounded w-fit"><p>Persönlich</p></div></div><p className="text-lg md:text-xl leading-snug text-balance">Sie wissen vorher, woran Sie sind. Keine versteckten Kosten, ehrliche Beratung vom Fachmann.</p></div></div><div className="aspect-square md:aspect-5/4 rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/calculator-money-notepad-desk_1150-14925.jpg" className="transition-transform duration-500 ease-in-out group-hover:scale-105" /></div></ScrollReveal></div></div></section></div>
+      <div data-webild-section="FeaturesIconCards"><FeaturesIconCards
+        tag="Warum RojTec?"title="Warum Sie uns vertrauen können"
+        description="Ihr Gerät ist bei uns in guten Händen. Wir arbeiten sorgfältig, transparent und schnell – damit Sie Ihr Smartphone bald wieder nutzen können."
+        primaryButton={{"text":"Angebot anfordern","href":"#angebot"}}
+        features={[{"icon":"Smartphone","title":"Alle Marken & Modelle","description":"Von Displaybruch bis Akkutausch reparieren wir jedes Gerät fachgerecht."},{"icon":"Truck","title":"Maximale Flexibilität","description":"Wählen Sie zwischen unserem bequemen Vor-Ort-Service oder der Einsendung."},{"icon":"Banknote","title":"Transparente Preise","description":"Keine versteckten Kosten. Sie wissen immer vorher, woran Sie sind."},{"icon":"UserCheck","title":"Persönlich & zuverlässig","description":"Bei uns sprechen Sie direkt mit dem Fachmann für Ihr Anliegen."}]}
+      /></div>
+      <div data-webild-section="ContactCta"><section aria-label="Contact section" className=""><div className="w-content-width mx-auto"><ScrollReveal variant="fade-blur"><div className="flex flex-col items-center gap-8 px-8 rounded card"><div className="flex flex-col items-center gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Handy defekt?</p></div><TextAnimation text="Fordern Sie jetzt unverbindlich Ihr Angebot an. Wir reparieren Ihr Smartphone schnell, transparent und zuverlässig." variant="fade" gradientText={true} tag="h2" className="md:max-w-8/10 text-5xl 2xl:text-6xl leading-[1.15] font-semibold text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Angebot anfordern" href="/kontakt" variant="primary" /><Button text="Preise ansehen" href="/preise" variant="secondary" animationDelay={0.1} /></div></div></div></ScrollReveal></div></section></div>
+    </>
+  );
+}

src/pages/ContactPage.tsx

@@ -0,0 +1,17 @@
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+
+export default function ContactPage() {
+  return (
+    <>
+      <div data-webild-section="ContactSplitForm"><ContactSplitForm
+        tag="Kontakt"
+        title="Kontaktieren Sie RojTec"
+        description="Wir sind für Sie da! Telefon: +4917675754999 | E-Mail: kontakt@rojtec.de | Adresse: Berliner Ring, 38440 Wolfsburg. Schreiben Sie uns Ihr Anliegen."
+        inputs={[{"name":"name","type":"text","placeholder":"Ihr Name","required":true},{"name":"email","type":"email","placeholder":"E-Mail-Adresse","required":true},{"name":"phone","type":"tel","placeholder":"Telefonnummer","required":false}]}
+        textarea={{"name":"message","placeholder":"Wie können wir Ihnen helfen?","rows":5,"required":true}}
+        buttonText="Nachricht senden"
+        imageSrc="https://img.freepik.com/free-photo/contact-us-communication-support-service-resolution-concept_53876-128103.jpg"
+      /></div>
+    </>
+  );
+}

src/pages/HomePage.tsx

@@ -13,10 +13,15 @@ import TestimonialsSection from './HomePage/sections/Testimonials';
 import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage(): React.JSX.Element {
+
+import TermsOfServiceSection from './HomePage/sections/TermsOfService';
+import TrustedBySection from './HomePage/sections/TrustedBy';
+import LeadCaptureSection from './HomePage/sections/LeadCapture';export default function HomePage(): React.JSX.Element {
   return (
 <>
   <HeroSection />
+      <TrustedBySection />
+      <LeadCaptureSection />
 
   <AboutSection />
 
@@ -31,6 +36,7 @@ export default function HomePage(): React.JSX.Element {
   <FaqSection />
 
   <ContactSection />
+          <TermsOfServiceSection />
     </>
   );
 }

src/pages/HomePage/sections/Features.tsx

@@ -27,7 +27,7 @@ export default function FeaturesSection(): React.JSX.Element {
             {
               title: "Zertifizierte Expertise",
               description: "Unsere Techniker sind Experten auf ihrem Gebiet und bringen moderne Technologie zu Ihnen.",
-              imageSrc: "http://img.b2bpic.net/free-photo/standard-quality-control-concept-m_23-2150041844.jpg",
+              imageSrc: "https://storage.googleapis.com/webild/users/user_3FUxr6WN9jxiu9EZZSywo4SirfK/uploaded-1782160994693-iuvaz1lk.jpg",
             },
           ]}
         />

src/pages/HomePage/sections/LeadCapture.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import Button from "@/components/ui/Button";
+import Input from "@/components/ui/Input";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import Tag from "@/components/ui/Tag";
+
+export default function LeadCaptureSection() {
+  const [email, setEmail] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (email) {
+      setSubmitted(true);
+    }
+  };
+
+  return (
+    <section className="relative w-full py-24 bg-background" data-webild-section="lead-capture" id="lead-capture">
+      <div className="w-content-width mx-auto">
+        <ScrollReveal variant="fade">
+          <div className="card p-8 md:p-16 flex flex-col md:flex-row items-center justify-between gap-12 bg-primary-cta/5 border border-primary-cta/10">
+            <div className="flex-1 space-y-6">
+              <Tag text="Kostenloses Whitepaper" className="bg-primary-cta/10 text-primary-cta" />
+              <TextAnimation 
+                text="IT-Sicherheit im Mittelstand: Der ultimative Leitfaden" 
+                variant="slide-up" 
+                tag="h2" 
+                className="text-3xl md:text-4xl font-bold text-foreground"
+                gradientText={false}
+              />
+              <p className="text-lg text-accent max-w-xl">
+                Erfahren Sie in unserem kostenlosen Whitepaper, wie Sie Ihr Unternehmen vor den häufigsten Cyberbedrohungen schützen können. Sichern Sie sich jetzt Ihr Exemplar!
+              </p>
+            </div>
+            <div className="w-full md:w-[400px] flex-shrink-0">
+              {!submitted ? (
+                <form 
+                  className="flex flex-col gap-4"
+                  onSubmit={handleSubmit}
+                >
+                  <Input 
+                    type="email" 
+                    placeholder="Ihre E-Mail-Adresse" 
+                    required 
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="w-full bg-background"
+                  />
+                  <Button text="Jetzt herunterladen" variant="primary" className="w-full justify-center" />
+                  <p className="text-sm text-accent mt-2 text-center">
+                    Ihre Daten sind bei uns sicher.
+                  </p>
+                </form>
+              ) : (
+                <div className="flex flex-col items-center justify-center p-6 bg-background rounded-lg border border-border text-center">
+                  <h3 className="text-xl font-bold text-foreground mb-2">Vielen Dank!</h3>
+                  <p className="text-accent">
+                    Der Download-Link wurde an Ihre E-Mail-Adresse gesendet.
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+}

src/pages/HomePage/sections/Services.tsx

@@ -10,13 +10,13 @@ const items = [
   {
     title: "Vor-Ort-Service",
     description: "Wir kommen direkt zu Ihnen – schnell, zuverlässig und fachgerecht.",
-    imageSrc: "https://picsum.photos/seed/1471687373/1200/800",
+    imageSrc: "https://storage.googleapis.com/webild/users/user_3FUxr6WN9jxiu9EZZSywo4SirfK/uploaded-1782161087411-kkoeu2nh.jpg",
     href: "/vor-ort-service"
   },
   {
     title: "Smart Home Lösungen",
     description: "Integration von Beleuchtung, Sicherheit und Thermostaten.",
-    imageSrc: "http://img.b2bpic.net/free-photo/smart-application-tablet-placed-kitchen-desk-empty-house-automation-system-turning-l_482257-2747.jpg"
+    imageSrc: "https://images.pexels.com/photos/7562021/pexels-photo-7562021.jpeg?auto=compress&cs=tinysrgb&h=650&w=940&id=7562021"
   },
   {
     title: "Technische Installation",
@@ -38,11 +38,6 @@ const items = [
     description: "Büro-Support und Netzwerkkonfiguration für Firmen.",
     imageSrc: "http://img.b2bpic.net/free-photo/data-center-programmers-doing-brainstorming-setting-up-machine-learning-systems_482257-126248.jpg"
   },
-  {
-    title: "Smart Security",
-    description: "Sicherheits- und Sensor-Konfiguration.",
-    imageSrc: "http://img.b2bpic.net/free-photo/smart-home-thermostat-control_23-2152024168.jpg"
-  },
   {
     title: "Vernetzung",
     description: "Optimales WLAN-Setup und Smart-Home-Setup.",

src/pages/HomePage/sections/TermsOfService.tsx

@@ -0,0 +1,82 @@
+import { motion } from "motion/react";
+import PolicyContent from "@/components/sections/legal/PolicyContent";
+
+export default function TermsOfServiceSection() {
+  return (
+    <div data-webild-section="terms-of-service" id="terms-of-service">
+      <section className="relative w-full py-24 bg-background">
+        <div className="w-content-width mx-auto">
+          <PolicyContent
+            title="Allgemeine Geschäftsbedingungen (AGB)"
+            subtitle="Zuletzt aktualisiert: 1. Januar 2024"
+            sections={[
+              {
+                heading: "1. Geltungsbereich",
+                content: [
+                  {
+                    type: "paragraph",
+                    text: "Diese Allgemeinen Geschäftsbedingungen (AGB) gelten für alle Verträge, die zwischen RojTec und unseren Kunden über Reparaturdienstleistungen für Smartphones und andere mobile Endgeräte abgeschlossen werden."
+                  }
+                ]
+              },
+              {
+                heading: "2. Vertragsschluss",
+                content: [
+                  {
+                    type: "paragraph",
+                    text: "Der Vertrag kommt zustande, sobald der Kunde uns einen Reparaturauftrag erteilt und wir diesen annehmen. Dies kann mündlich, schriftlich oder durch Übergabe des Geräts erfolgen."
+                  }
+                ]
+              },
+              {
+                heading: "3. Leistungen",
+                content: [
+                  {
+                    type: "paragraph",
+                    text: "Wir führen Reparaturen nach bestem Wissen und Gewissen durch. Sollte sich während der Reparatur herausstellen, dass weitere, nicht vorhersehbare Arbeiten erforderlich sind, werden wir den Kunden vorab informieren und dessen Zustimmung einholen."
+                  }
+                ]
+              },
+              {
+                heading: "4. Preise und Zahlungsbedingungen",
+                content: [
+                  {
+                    type: "paragraph",
+                    text: "Alle Preise verstehen sich inklusive der gesetzlichen Mehrwertsteuer. Die Zahlung ist unmittelbar nach Abschluss der Reparatur und Rückgabe des Geräts fällig, sofern nicht anders vereinbart."
+                  }
+                ]
+              },
+              {
+                heading: "5. Gewährleistung",
+                content: [
+                  {
+                    type: "paragraph",
+                    text: "Wir gewähren auf die von uns durchgeführten Reparaturen und die verbauten Ersatzteile eine Gewährleistung von 12 Monaten. Ausgenommen sind Schäden, die durch unsachgemäße Behandlung, Sturz oder Wasserschäden nach der Reparatur entstehen."
+                  }
+                ]
+              },
+              {
+                heading: "6. Haftung",
+                content: [
+                  {
+                    type: "paragraph",
+                    text: "Wir haften nur für Vorsatz und grobe Fahrlässigkeit. Für Datenverlust übernehmen wir keine Haftung. Der Kunde ist verpflichtet, vor der Übergabe des Geräts eine Datensicherung durchzuführen."
+                  }
+                ]
+              },
+              {
+                heading: "7. Schlussbestimmungen",
+                content: [
+                  {
+                    type: "paragraph",
+                    text: "Es gilt das Recht der Bundesrepublik Deutschland. Gerichtsstand ist, soweit gesetzlich zulässig, der Sitz von RojTec."
+                  }
+                ]
+              }
+            ]}
+          />
+        </div>
+      </section>
+    </div>
+  );
+}

src/pages/HomePage/sections/TrustedBy.tsx

@@ -0,0 +1,48 @@
+import { motion } from "motion/react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Tag from "@/components/ui/Tag";
+import IconTextMarquee from "@/components/ui/IconTextMarquee";
+
+export default function TrustedBySection() {
+  return (
+    <div data-webild-section="trusted-by" id="trusted-by">
+      <section className="relative w-full py-16 bg-background overflow-hidden border-b border-border/10">
+        <div className="w-content-width mx-auto mb-10 text-center">
+          <ScrollReveal variant="fade">
+            <div className="flex justify-center mb-4">
+              <Tag text="Zertifizierte Qualität" />
+            </div>
+            <TextAnimation 
+              text="Vertraut von unseren Kunden & Partnern" 
+              variant="fade-blur" 
+              tag="h2" 
+              className="text-2xl md:text-3xl font-bold text-foreground mb-4" 
+              gradientText={false} 
+            />
+            <p className="text-accent max-w-2xl mx-auto">
+              Wir reparieren alle gängigen Marken mit höchster Präzision und Qualität.
+            </p>
+          </ScrollReveal>
+        </div>
+        
+        <div className="w-full">
+          <IconTextMarquee 
+            centerIcon="ShieldCheck" 
+            texts={[
+              "Apple", 
+              "Samsung", 
+              "Huawei", 
+              "Xiaomi", 
+              "Google Pixel", 
+              "Sony", 
+              "OnePlus",
+              "Motorola",
+              "Nokia"
+            ]} 
+          />
+        </div>
+      </section>
+    </div>
+  );
+}

src/pages/SuccessPage.tsx

@@ -0,0 +1,11 @@
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Button from "@/components/ui/Button";
+
+export default function SuccessPage() {
+  return (
+    <>
+      <div data-webild-section="ContactCta"><section aria-label="Contact section" className="py-20"><div className="w-content-width mx-auto"><ScrollReveal variant="fade-blur"><div className="flex flex-col items-center gap-8 md:gap-10 py-20 px-8 rounded card"><div className="flex flex-col items-center gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Anfrage erfolgreich</p></div><TextAnimation text="Wir haben Ihre Anfrage erfolgreich erhalten. Unser Team wird diese schnellstmöglich prüfen und sich in Kürze bei Ihnen melden. Vielen Dank für Ihr Vertrauen in RojTec. Wir freuen uns darauf, Ihnen weiterzuhelfen." variant="fade" gradientText={true} tag="h2" className="md:max-w-8/10 text-5xl 2xl:text-6xl leading-[1.15] font-semibold text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Zur Startseite" href="/" variant="primary" /><Button text="Weitere Anfrage senden" href="/kontakt" variant="secondary" animationDelay={0.1} /></div></div></div></ScrollReveal></div></section></div>
+    </>
+  );
+}

src/pages/VorOrtServicePage.tsx

@@ -1,22 +1,19 @@
-import Button from "@/components/ui/Button";
-import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
-import TextAnimation from "@/components/ui/TextAnimation";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import ScrollReveal from "@/components/ui/ScrollReveal";
-import FeaturesAlternatingSplit from "@/components/sections/features/FeaturesAlternatingSplit";
+// 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 VorOrtServicePage() {
+import React from 'react';
+import HeroSplitSection from './VorOrtServicePage/sections/HeroSplit';
+import FeaturesAlternatingSplitSection from './VorOrtServicePage/sections/FeaturesAlternatingSplit';
+import ContactCtaSection from './VorOrtServicePage/sections/ContactCta';
+
+export default function VorOrtServicePage(): React.JSX.Element {
   return (
-    <>
-      <div data-webild-section="HeroSplit"><section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0"><HeroBackgroundSlot /><div className="flex flex-col md:flex-row items-center gap-12 md:gap-20 w-content-width mx-auto"><div className="w-full md:w-1/2"><div className="flex flex-col items-center md:items-start gap-3"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Vor-Ort-Service</p></div><TextAnimation text="Ihr Vor-Ort-Service für smarte Technik" variant="slide-up" gradientText={true} tag="h1" className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance" /><TextAnimation text="Verlassen Sie sich auf deutsche Qualität und Expertise. Wir installieren, warten und reparieren Ihre Smart-Home-Systeme direkt bei Ihnen vor Ort." variant="slide-up" gradientText={false} tag="p" className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance" /><div className="flex flex-wrap max-md:justify-center gap-3 mt-2 md:mt-3"><Button text="Angebot anfordern" href="/kontakt" variant="primary" /><Button text="Mehr erfahren" href="#details" variant="secondary" animationDelay={0.1} /></div></div></div><ScrollReveal variant="fade-blur" delay={0.2} className="w-full md:w-1/2 h-100 md:h-[65vh] md:max-h-[75svh] p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/electrician-builder-work-with-tools-cable-connection_169016-5381.jpg" /></ScrollReveal></div></section></div>
-      <div data-webild-section="FeaturesAlternatingSplit"><FeaturesAlternatingSplit
-        tag="Vor-Ort-Service"
-        title="Professionelle Hilfe direkt bei Ihnen"
-        description="Unsere Experten kommen zu Ihnen nach Hause oder ins Unternehmen, um technische Probleme schnell und zuverlässig zu lösen."
-        primaryButton={{"text":"Angebot anfordern","href":"/kontakt"}}
-        items={[{"title":"Smart Home Einrichtung","description":"Wir installieren und konfigurieren Ihre Smart-Home-Systeme fachgerecht, damit alles reibungslos funktioniert.","primaryButton":{"text":"Angebot anfordern","href":"/kontakt"},"imageSrc":"https://img.freepik.com/free-photo/smart-home-control-panel-tablet-screen_53876-124628.jpg"},{"title":"Netzwerk-Optimierung","description":"Schluss mit WLAN-Abbrüchen. Wir analysieren Ihr Netzwerk und sorgen für eine stabile Verbindung im ganzen Haus.","primaryButton":{"text":"Angebot anfordern","href":"/kontakt"},"imageSrc":"https://img.freepik.com/free-photo/close-up-man-holding-router_23-2148300262.jpg"},{"title":"Wartung & Reparatur","description":"Unsere Techniker beheben Störungen an Ihren technischen Geräten schnell und zuverlässig direkt bei Ihnen vor Ort.","primaryButton":{"text":"Angebot anfordern","href":"/kontakt"},"imageSrc":"https://img.freepik.com/free-photo/male-electrician-works-with-switchboard-electrical-connecting-wiring_169016-15088.jpg"}]}
-      /></div>
-      <div data-webild-section="ContactCta"><section aria-label="Contact section" className="py-20"><div className="w-content-width mx-auto"><ScrollReveal variant="fade-blur"><div className="flex flex-col items-center gap-8 md:gap-10 py-20 px-8 rounded card"><div className="flex flex-col items-center gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Kontakt</p></div><TextAnimation text="Benötigen Sie professionelle Unterstützung direkt bei Ihnen vor Ort? Fordern Sie jetzt ein unverbindliches Angebot an." variant="fade" gradientText={true} tag="h2" className="md:max-w-8/10 text-5xl 2xl:text-6xl leading-[1.15] font-semibold text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Angebot anfordern" href="/kontakt" variant="primary" /><Button text="Rückruf vereinbaren" href="/kontakt#rueckruf" variant="secondary" animationDelay={0.1} /></div></div></div></ScrollReveal></div></section></div>
+<>
+      <HeroSplitSection />
+      <FeaturesAlternatingSplitSection />
+      <ContactCtaSection />
     </>
   );
 }

src/pages/VorOrtServicePage/sections/ContactCta.tsx

@@ -0,0 +1,13 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "ContactCta" section.
+
+import React from 'react';
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+
+export default function ContactCtaSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="ContactCta"><section aria-label="Contact section" className="py-20"><div className="w-content-width mx-auto"><ScrollReveal variant="fade-blur"><div className="flex flex-col items-center gap-8 md:gap-10 py-20 px-8 rounded card"><div className="flex flex-col items-center gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Kontakt</p></div><TextAnimation text="Benötigen Sie professionelle Unterstützung direkt bei Ihnen vor Ort? Fordern Sie jetzt ein unverbindliches Angebot an." variant="fade" gradientText={true} tag="h2" className="md:max-w-8/10 text-5xl 2xl:text-6xl leading-[1.15] font-semibold text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Angebot anfordern" href="#anfrage" variant="primary" /><Button text="Rückruf vereinbaren" href="/kontakt#rueckruf" variant="secondary" animationDelay={0.1} /></div></div></div></ScrollReveal></div></section></div>
+  );
+}

src/pages/VorOrtServicePage/sections/FeaturesAlternatingSplit.tsx

@@ -0,0 +1,17 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "FeaturesAlternatingSplit" section.
+
+import React from 'react';
+import FeaturesAlternatingSplit from "@/components/sections/features/FeaturesAlternatingSplit";
+
+export default function FeaturesAlternatingSplitSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="FeaturesAlternatingSplit"><FeaturesAlternatingSplit
+            tag="Vor-Ort-Service"
+            title="Professionelle Hilfe direkt bei Ihnen"
+            description="Unsere Experten kommen zu Ihnen nach Hause oder ins Unternehmen, um technische Probleme schnell und zuverlässig zu lösen."
+            primaryButton={{"text":"Angebot anfordern","href":"/kontakt"}}
+            items={[{"title":"Smart Home Einrichtung","description":"Wir installieren und konfigurieren Ihre Smart-Home-Systeme fachgerecht, damit alles reibungslos funktioniert.","primaryButton":{"text":"Angebot anfordern","href":"/kontakt"},"imageSrc":"https://img.freepik.com/free-photo/smart-home-control-panel-tablet-screen_53876-124628.jpg"},{"title":"Wartung & Reparatur","description":"Unsere Techniker beheben Störungen an Ihren technischen Geräten schnell und zuverlässig direkt bei Ihnen vor Ort.","primaryButton":{"text":"Angebot anfordern","href":"/kontakt"},"imageSrc":"https://img.freepik.com/free-photo/male-electrician-works-with-switchboard-electrical-connecting-wiring_169016-15088.jpg"}]}
+          /></div>
+  );
+}

src/pages/VorOrtServicePage/sections/HeroSplit.tsx

@@ -0,0 +1,15 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "HeroSplit" section.
+
+import React from 'react';
+import Button from "@/components/ui/Button";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+
+export default function HeroSplitSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="HeroSplit"><section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0"><HeroBackgroundSlot /><div className="flex flex-col md:flex-row items-center gap-12 md:gap-20 w-content-width mx-auto"><div className="w-full md:w-1/2"><div className="flex flex-col items-center md:items-start gap-3"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Vor-Ort-Service</p></div><TextAnimation text="Ihr Vor-Ort-Service für smarte Technik" variant="slide-up" gradientText={true} tag="h1" className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance" /><TextAnimation text="Verlassen Sie sich auf deutsche Qualität und Expertise. Wir installieren, warten und reparieren Ihre Smart-Home-Systeme direkt bei Ihnen vor Ort." variant="slide-up" gradientText={false} tag="p" className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance" /><div className="flex flex-wrap max-md:justify-center gap-3 mt-2 md:mt-3"><Button text="Angebot anfordern" href="/kontakt" variant="primary" /><Button text="Mehr erfahren" href="#details" variant="secondary" animationDelay={0.1} /></div></div></div><ScrollReveal variant="fade-blur" delay={0.2} className="w-full md:w-1/2 h-100 md:h-[65vh] md:max-h-[75svh] p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden"><ImageOrVideo imageSrc="https://storage.googleapis.com/webild/users/user_3FUxr6WN9jxiu9EZZSywo4SirfK/uploaded-1782166454385-3vus4d1j.jpg" /></ScrollReveal></div></section></div>
+  );
+}

src/routes.ts

@@ -7,4 +7,7 @@ export interface Route {
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
   { path: '/vor-ort-service', label: 'Vor Ort Service', pageFile: 'VorOrtServicePage' },
+  { path: '/about', label: 'About', pageFile: 'AboutPage' },
+  { path: '/success', label: 'Success', pageFile: 'SuccessPage' },
+  { path: '/contact', label: 'Contact', pageFile: 'ContactPage' },
 ];