Merge version_28_1782170080354 into main

Merge version_28_1782170080354 into main

src/App.tsx

@@ -5,6 +5,7 @@ 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>
@@ -13,6 +14,7 @@ export default function App() {
         <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

@@ -107,6 +107,8 @@ export default function Layout() {
   { name: "Vor Ort Service", href: "/vor-ort-service" },
   { name: "About", href: "/about" },
   { name: "Success", href: "/success" },
+  { name: "Contact", href: "/contact" },
+
 
 
 

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/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

@@ -16,7 +16,7 @@ const items = [
   {
     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",

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/VorOrtServicePage/sections/FeaturesAlternatingSplit.tsx

@@ -11,7 +11,7 @@ export default function FeaturesAlternatingSplitSection(): React.JSX.Element {
             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"}]}
+            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

@@ -10,6 +10,6 @@ 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://img.freepik.com/free-photo/electrician-builder-work-with-tools-cable-connection_169016-5381.jpg" /></ScrollReveal></div></section></div>
+    <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

@@ -9,4 +9,5 @@ export const routes: Route[] = [
   { 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' },
 ];