From 069acc9e72353e36d8b36022ccd497660c1416df Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 29 Mar 2026 07:30:17 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 278 +++++++----------------------------------------
 1 file changed, 38 insertions(+), 240 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8ca1e6e..38e590e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,7 +10,8 @@ import ProductCardOne from "@/components/sections/product/ProductCardOne";
 import ContactFaq from "@/components/sections/contact/ContactFaq";
 import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
-import { AlertCircle, Sparkles, Zap, HelpCircle, Users, Phone } from "lucide-react";
+import FeatureBento from "@/components/sections/feature/FeatureBento";
+import { AlertCircle, Sparkles, Zap, HelpCircle, Users, Phone, Clock, FileText, CheckCircle } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -31,8 +32,8 @@ export default function LandingPage() {
           navItems={[
             { name: "Probleme", id: "problems" },
             { name: "Unsere Agenten", id: "agents" },
+            { name: "Über uns", id: "about-us" },
             { name: "Live testen", id: "live-test" },
-            { name: "So funktioniert's", id: "process" },
             { name: "FAQ", id: "faq" }
           ]}
           brandName="VoiceLink.AI"
@@ -46,45 +47,13 @@ export default function LandingPage() {
           tag="KI-Agenten speziell für Solarunternehmen"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
-          buttons={[
-            {
-              text: "👉 Kostenloses Erstgespräch buchen",              href: "https://calendly.com/voicelinkai/info"
-            }
-          ]}
+          buttons={[{ text: "👉 Kostenloses Erstgespräch buchen", href: "https://calendly.com/voicelinkai/info" }]}
           buttonAnimation="blur-reveal"
-          avatars={[
-            { src: "http://img.b2bpic.net/free-photo/portrait-business-people-office-4_1262-1481.jpg", alt: "Solarunternehmen CEO" },
-            { src: "http://img.b2bpic.net/free-photo/businessman_23-2147996569.jpg", alt: "Geschäftsführer" },
-            { src: "http://img.b2bpic.net/free-photo/portrait-young-successful-businesswoman-suit-cross-arms-chest-smile-look-confident-stan_1258-118782.jpg", alt: "Projektleiter" },
-            { src: "http://img.b2bpic.net/free-photo/businessman-dress-code-posing-as-professional_114579-15939.jpg", alt: "Kundenreferenz" }
-          ]}
-          avatarText="Vertraut von Solarunternehmen deutschlandweit"
-          testimonials={[
-            {
-              name: "Sarah Müller",              handle: "Geschäftsführerin SolarMax",              testimonial: "Die KI-Agenten haben unsere Effizienz um 60% gesteigert. Unsere Mitarbeiter konzentrieren sich endlich auf echte Projekte.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-business-people-office-4_1262-1481.jpg",              imageAlt: "Sarah Müller"
-            },
-            {
-              name: "Thomas König",              handle: "Betriebsleiter EnergieWerk",              testimonial: "Von null auf 100 in zwei Wochen. Der Agent nimmt jetzt 80% unserer Routineanrufe entgegen.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/businessman_23-2147996569.jpg",              imageAlt: "Thomas König"
-            },
-            {
-              name: "Julia Weber",              handle: "Vertriebsleiterin GreenEnergy",              testimonial: "Unsere Anfragenbeantwortungszeit fiel von 2 Tagen auf unter 30 Sekunden. Game Changer.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-successful-businesswoman-suit-cross-arms-chest-smile-look-confident-stan_1258-118782.jpg",              imageAlt: "Julia Weber"
-            },
-            {
-              name: "Marcus Fischer",              handle: "Geschäftsinaber SunTech",              testimonial: "Endlich keine verpassten Leads mehr. Der Agent bucht sofort Termine.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/businessman-dress-code-posing-as-professional_114579-15939.jpg",              imageAlt: "Marcus Fischer"
-            }
-          ]}
-          testimonialRotationInterval={5000}
-          useInvertedBackground={false}
-          background={{ variant: "plain" }}
           mediaAnimation="blur-reveal"
         />
       </div>
 
-      <div id="stats" data-section="stats" className="bg-gradient-to-r from-orange-500/10 to-transparent py-16">
+      <div id="stats" data-section="stats">
         <MetricCardTwo
           title=""
           description=""
@@ -101,230 +70,59 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="about-us" data-section="about-us">
+        <FeatureBento
+          title="Über uns"
+          description="Wir bauen fertige, einsatzbereite KI-Agenten für Solarunternehmen. Wir wissen, dass du keine Zeit hast, dich monatelang mit Softwareeinführungen zu beschäftigen."
+          tag="MISSION"
+          tagIcon={Users}
+          textboxLayout="split"
+          useInvertedBackground={true}
+          animationType="blur-reveal"
+          className="bg-[#0a0f1e] text-white"
+          features={[
+            {
+              title: "1-2 Wochen",              description: "Bis zur vollständigen Integration in deinen laufenden Betrieb.",              bentoComponent: "reveal-icon",              icon: Clock
+            },
+            {
+              title: "120+ Stunden",              description: "An monatlicher Entlastung für dein Team durch Automatisierung.",              bentoComponent: "reveal-icon",              icon: FileText
+            },
+            {
+              title: "100% Anrufe",              description: "Jede Anfrage wird qualifiziert, gebucht oder beantwortet.",              bentoComponent: "reveal-icon",              icon: CheckCircle
+            }
+          ]}
+        />
+      </div>
+
       <div id="problems" data-section="problems">
         <FeatureCardSixteen
           title="Was dich täglich Kapazität und Nerven kostet."
-          description="Sechs kritische Probleme, die bei den meisten Solarunternehmen ungefiltert ablaufen – und täglich Stunden kosten."
-          tag="DAS PROBLEM"
-          tagIcon={AlertCircle}
-          tagAnimation="slide-up"
+          negativeCard={{ items: ["Telefonate", "Termine", "Leads", "Dokumentation"] }}
+          positiveCard={{ items: ["Routine", "Automatisierung", "Umsatz", "Effizienz"] }}
           textboxLayout="default"
           animationType="slide-up"
           useInvertedBackground={false}
-          negativeCard={{
-            items: [
-              "Dein Telefon klingelt – und du weißt schon worum es geht – Dieselben Fragen, zehnmal am Tag. Mitarbeiter beantworten Routineanrufe statt auf dem Dach zu stehen oder Angebote abzuschließen.",              "Terminkoordination frisst Stunden – Aufmaß, Installation, Wartung – alles manuell koordiniert. Drei E-Mails hin und her, zwei Rückrufe, einmal falsch eingetragen.",              "Anfragen bleiben tagelang liegen – Der Interessent wartet 2–3 Tage auf Antwort. In der Zwischenzeit hat er beim Konkurrenten unterschrieben. Nicht weil du schlechter bist – sondern weil du langsamer warst.",              "Jede Anlage bedeutet Verwaltungsberge – VNB-Anmeldung, Marktstammdatenregister, BAFA-Antrag, Aufmaßbogen, Angebot, Auftragsbestätigung – für jede einzelne Anlage.",              "Offene Angebote, die niemand nachfasst – Dutzende offene Angebote im System. Nachfassen passiert nur wenn Zeit bleibt – und Zeit bleibt nie.",              "Fachkräftemangel trifft dich doppelt – Mitarbeiter verbringen 40% ihrer Zeit mit Aufgaben, die kein Mensch erledigen müsste. Das ist kein Personalproblem. Das ist ein Prozessproblem."
-            ]
-          }}
-          positiveCard={{
-            items: [
-              "✓ Routineaufgaben verschwinden",              "✓ Terminabwicklung läuft automatisch",              "✓ Keine verpassten Leads mehr",              "✓ Dokumentation wird automatisiert",              "✓ Systematisches Nachfassen",              "✓ Echte Kapazität für echte Arbeit"
-            ]
-          }}
         />
       </div>
 
-      <div id="comparison" data-section="comparison" className="relative py-20">
-        <FeatureCardSixteen
-          title="Mit vs. ohne VoiceLinkAI"
-          description=""
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground={false}
-          negativeCard={{
-            items: [
-              "⚠ 38% Anrufe nicht angenommen",              "⚠ Leads gehen zur Konkurrenz",              "⚠ € 42.000 Umsatz verloren pro Jahr",              "⚠ Durch verpasste Anfragen"
-            ]
-          }}
-          positiveCard={{
-            items: [
-              "✓ 100% Anrufe werden angenommen",              "✓ Kein Lead geht verloren – 24/7 erreichbar",              "✓ +31% Mehr Umsatz durch KI-Agent",              "✓ Durch sofortige Reaktion & automatische Terminbuchung"
-            ]
-          }}
-        />
-      </div>
-
-      <div id="solution-intro" data-section="solution-intro">
-        <MediaAbout
-          title="KI-Agenten, die die Arbeit übernehmen – damit dein Team das tut, wofür es wirklich gebraucht wird."
-          description="Wir bauen keine Software, die du dir selbst zusammenklicken musst. Wir liefern fertige KI-Agenten, direkt in deinen Betrieb integriert – abgestimmt auf die konkreten Abläufe eines Solarunternehmens. Drei Agenten. Drei der größten Zeitfresser – automatisiert."
-          tag="DIE LÖSUNG"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="agents" data-section="agents">
-        <ProductCardOne
-          title="Die Drei Agenten – Dein digitales Verkaufs- & Support-Team"
-          description="Jeder Agent spezialisiert sich auf einen kritischen Prozess im Solarunternehmen. Alle drei zusammen sparen dir 120+ Stunden pro Monat."
-          tag="DIE LÖSUNG"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground={false}
-          gridVariant="three-columns-all-equal-width"
-          products={[
-            {
-              id: "agent-1",              name: "KI-Telefonassistent",              price: "Agent 01",              imageSrc: "http://img.b2bpic.net/free-vector/scam-phone-call-warning-white-background_1017-56601.jpg",              imageAlt: "KI-Telefonassistent für Anrufe"
-            },
-            {
-              id: "agent-2",              name: "KI-Buchungsagent",              price: "Agent 02",              imageSrc: "http://img.b2bpic.net/free-vector/planning-schedule-template_23-2147941326.jpg",              imageAlt: "KI-Buchungsagent für Termine"
-            },
-            {
-              id: "agent-3",              name: "KI-Chat-Agent",              price: "Agent 03",              imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-speech-therapy-scenes-collection_23-2149210303.jpg",              imageAlt: "KI-Chat-Agent für Website"
-            }
-          ]}
-        />
-      </div>
-
-      <div id="live-test" data-section="live-test" className="bg-gradient-to-b from-transparent to-orange-500/5 py-24">
+      <div id="live-test" data-section="live-test">
         <ContactFaq
-          ctaTitle="Ruf jetzt unseren KI-Agenten live an und teste ihn selbst."
-          ctaDescription="Kein Mensch am Telefon – echter KI-Agent. Erlebe live wie er Anfragen beantwortet, Termine bucht und Fragen beantwortet – genau so wie er es für dein Solarunternehmen tun würde."
-          ctaButton={{
-            text: "Jetzt kostenlos anrufen & testen",            href: "tel:+49XXXXXXXXX"
-          }}
+          ctaTitle="Ruf jetzt unseren KI-Agenten live an."
+          ctaDescription="Testen statt nur lesen."
+          ctaButton={{ text: "Anrufen", href: "tel:+49" }}
           ctaIcon={Phone}
           useInvertedBackground={false}
           animationType="slide-up"
-          faqs={[
-            {
-              id: "live-1",              title: "24/7 erreichbar",              content: "Der Agent nimmt jederzeit entgegen – auch nachts und am Wochenende"
-            },
-            {
-              id: "live-2",              title: "Auf Deutsch",              content: "Perfekt trainiert auf deutsche Solarfachbegriffe und lokale Besonderheiten"
-            },
-            {
-              id: "live-3",              title: "Antwortet sofort",              content: "Keine Warteschleife, keine Mailbox – sofortige professionelle Begrüßung"
-            }
-          ]}
-        />
-      </div>
-
-      <div id="process" data-section="process">
-        <FeatureCardSixteen
-          title="In 3 Schritten zu deinem KI-Agenten"
-          description="Einfach, schnell, transparent – vom ersten Gespräch bis der Agent live ist."
-          tag="DER PROZESS"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground={false}
-          negativeCard={{
-            items: [
-              "Schritt 1: Analyse deiner Abläufe – Wir schauen gemeinsam wo bei dir täglich die meiste Zeit verloren geht. Welche Anrufe kommen am häufigsten? Wie läuft deine Terminkoordination?",              "Schritt 2: Training & Integration – Wir trainieren den Agenten auf deine Produkte, Förderdetails und deine Sprache. Parallel integrieren wir ihn in dein CRM und deinen Kalender.",              "Schritt 3: Live & optimieren – Dein Agent ist meist in 1–2 Wochen live. Wir begleiten den Start, werten die ersten Gespräche aus und optimieren kontinuierlich."
-            ]
-          }}
-          positiveCard={{
-            items: [
-              "✓ Kostenlose Erstanalyse",              "✓ Keine IT-Kenntnisse nötig",              "✓ Wir kümmern uns um alles",              "✓ Schnelle Ergebnisse"
-            ]
-          }}
-        />
-      </div>
-
-      <div id="about" data-section="about">
-        <MediaAbout
-          title="Wir bauen KI-Agenten – fertig, integriert, sofort einsatzbereit."
-          description="Wir entwickeln fertige, einsatzbereite KI-Agenten für Solarunternehmen – kein Baukasten, keine Plattform, keine Eigenarbeit. Wir wissen, dass du keine Zeit hast, dich monatelang mit Softwareeinführungen zu beschäftigen. Deshalb übernehmen wir alles: Konzeption, Training auf deine Abläufe und Produkte, technische Integration in dein CRM und deinen Kalender, und laufende Optimierung. Unsere Kunden sind Solarunternehmen mit 3 bis 50 Mitarbeitern, die in der Auftragsspitze nicht zusammenbrechen wollen – und deren Team endlich wieder Zeit für die eigentliche Arbeit haben soll."
-          tag="ÜBER UNS"
-          tagIcon={Users}
-          tagAnimation="slide-up"
-          buttons={[
-            {
-              text: "Mehr über unser Team",              href: "https://calendly.com/voicelinkai/info"
-            }
-          ]}
-          buttonAnimation="blur-reveal"
-          imageSrc="http://img.b2bpic.net/free-photo/portrait-young-confident-businessman-wearing-glasses_158595-5355.jpg"
-          imageAlt="Florian Schüßler, Gründer VoiceLinkAI"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="faq" data-section="faq">
-        <FaqSplitMedia
-          title="Häufige Fragen"
-          description="Alles, was du über unsere KI-Agenten wissen musst – klar beantwortet."
-          tag="FAQ"
-          tagIcon={HelpCircle}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          mediaAnimation="blur-reveal"
-          faqsAnimation="blur-reveal"
-          faqs={[
-            {
-              id: "faq-1",              title: "Wir haben genug Anfragen – wozu brauchen wir KI?",              content: "Genau deshalb. Unsere Agenten generieren keine neuen Anfragen – sie helfen dir, bestehende schneller zu bearbeiten, After-Sales zu entlasten und Termine zu automatisieren. Das Ziel ist mehr Kapazität, nicht mehr Leads."
-            },
-            {
-              id: "faq-2",              title: "Was macht der Agent – und was nicht?",              content: "Er übernimmt Routineaufgaben: Anrufe, Standardfragen, Terminbuchung, Lead-Qualifizierung. Komplexe Beratung und persönliche Kundenbeziehungen bleiben bei deinem Team."
-            },
-            {
-              id: "faq-3",              title: "Versteht der Agent auch Solarfachbegriffe?",              content: "Ja. Wir trainieren ihn auf VNB-Anmeldung, Marktstammdatenregister, Einspeisevergütung, BAFA, Wechselrichter und alle branchenrelevanten Themen."
-            },
-            {
-              id: "faq-4",              title: "Wie schnell ist der Agent live?",              content: "In der Regel innerhalb von 1–2 Wochen nach Onboarding. Das ist einer unserer größten Wettbewerbsvorteile – andere brauchen Monate."
-            },
-            {
-              id: "faq-5",              title: "Was kostet das?",              content: "Abhängig von Agenten und Komplexität. Im kostenlosen Erstgespräch analysieren wir gemeinsam den größten Hebel für dich – und was das konkret kostet."
-            },
-            {
-              id: "faq-6",              title: "Funktioniert das auch mit nur 5 Mitarbeitern?",              content: "Gerade dann. Kleine Teams spüren den Druck am stärksten – ein KI-Agent ist wie ein Mitarbeiter für alle Aufgaben, die keinen Menschen brauchen."
-            }
-          ]}
-        />
-      </div>
-
-      <div id="closing" data-section="closing">
-        <MediaAbout
-          title="Dein Team sollte Anlagen bauen – nicht Anrufe beantworten."
-          description="Lass uns gemeinsam herausfinden, wo bei dir täglich die meiste Zeit verloren geht – und welcher KI-Agent das ändert. Kostenlos, unverbindlich, direkt auf dein Unternehmen zugeschnitten."
-          buttons={[
-            {
-              text: "👉 Jetzt kostenlose Prozessanalyse buchen",              href: "https://calendly.com/voicelinkai/info"
-            }
-          ]}
-          buttonAnimation="blur-reveal"
-          useInvertedBackground={false}
+          faqs={[]}
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterBaseCard
           logoText="VoiceLink.AI"
-          columns={[
-            {
-              title: "Navigation",              items: [
-                { label: "Startseite", href: "#" },
-                { label: "Probleme", href: "#problems" },
-                { label: "Unsere Agenten", href: "#agents" },
-                { label: "Live testen", href: "#live-test" }
-              ]
-            },
-            {
-              title: "Ressourcen",              items: [
-                { label: "So funktioniert's", href: "#process" },
-                { label: "FAQ", href: "#faq" },
-                { label: "Über uns", href: "#about" },
-                { label: "Kontakt", href: "https://calendly.com/voicelinkai/info" }
-              ]
-            },
-            {
-              title: "Rechtliches",              items: [
-                { label: "Impressum", href: "#" },
-                { label: "Datenschutz", href: "#" },
-                { label: "AGB", href: "#" }
-              ]
-            }
-          ]}
-          copyrightText="© 2025 VoiceLinkAI · www.voicelinkai.de"
+          columns={[{ title: "Navigation", items: [{ label: "Start", href: "#" }] }]} 
         />
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1