From 2c3d87808a8411d54b8af3396c747249281c7f1c Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 22 Jun 2026 22:07:14 +0000
Subject: [PATCH] Bob AI: Added a lead capture banner section for a
 downloadable white

---
 src/pages/HomePage.tsx                      |  4 +-
 src/pages/HomePage/sections/LeadCapture.tsx | 70 +++++++++++++++++++++
 2 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/HomePage/sections/LeadCapture.tsx

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 4b2f8bc..5ae3be5 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -15,11 +15,13 @@ import ContactSection from './HomePage/sections/Contact';
 
 
 import TermsOfServiceSection from './HomePage/sections/TermsOfService';
-import TrustedBySection from './HomePage/sections/TrustedBy';export default function HomePage(): React.JSX.Element {
+import TrustedBySection from './HomePage/sections/TrustedBy';
+import LeadCaptureSection from './HomePage/sections/LeadCapture';export default function HomePage(): React.JSX.Element {
   return (
 <>
   <HeroSection />
       <TrustedBySection />
+      <LeadCaptureSection />
 
   <AboutSection />
 
diff --git a/src/pages/HomePage/sections/LeadCapture.tsx b/src/pages/HomePage/sections/LeadCapture.tsx
new file mode 100644
index 0000000..997db89
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
-- 
2.49.1