Switch to version 1: modified src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -5,10 +5,12 @@ import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleAp
 import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
 import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
 import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
+import MediaAbout from "@/components/sections/about/MediaAbout";
+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 { Sparkles, Users, Phone, Clock, FileText, CheckCircle } from "lucide-react";
+import { AlertCircle, Sparkles, Zap, HelpCircle, Users, Phone } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -29,8 +31,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"
@@ -44,15 +46,45 @@ export default function LandingPage() {
           tag="KI-Agenten speziell für Solarunternehmen"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
-          background={{ variant: "plain" }}
-          testimonials={[]}
-          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">
+      <div id="stats" data-section="stats" className="bg-gradient-to-r from-orange-500/10 to-transparent py-16">
         <MetricCardTwo
           title=""
           description=""
@@ -69,60 +101,230 @@ 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={[
+      <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"
+          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={[
             {
-              title: "1-2 Wochen",              description: "Bis zur vollständigen Integration in deinen laufenden Betrieb.",              bentoComponent: "reveal-icon",              icon: Clock
+              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"
             },
             {
-              title: "120+ Stunden",              description: "An monatlicher Entlastung für dein Team durch Automatisierung.",              bentoComponent: "reveal-icon",              icon: FileText
+              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"
             },
             {
-              title: "100% Anrufe",              description: "Jede Anfrage wird qualifiziert, gebucht oder beantwortet.",              bentoComponent: "reveal-icon",              icon: CheckCircle
+              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="problems" data-section="problems">
+      <div id="live-test" data-section="live-test" className="bg-gradient-to-b from-transparent to-orange-500/5 py-24">
+        <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"
+          }}
+          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="Was dich täglich Kapazität und Nerven kostet."
-          description="Die Probleme, die jedes Solarunternehmen kennt."
-          negativeCard={{ items: ["Telefonate", "Termine", "Leads", "Dokumentation"] }}
-          positiveCard={{ items: ["Routine", "Automatisierung", "Umsatz", "Effizienz"] }}
+          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="live-test" data-section="live-test">
-        <ContactFaq
-          ctaTitle="Ruf jetzt unseren KI-Agenten live an."
-          ctaDescription="Testen statt nur lesen."
-          ctaButton={{ text: "Anrufen", href: "tel:+49" }}
-          ctaIcon={Phone}
+      <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}
-          animationType="slide-up"
-          faqs={[]}
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterBaseCard
           logoText="VoiceLink.AI"
-          columns={[{ title: "Navigation", items: [{ label: "Start", href: "#" }] }]}
+          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"
         />
       </div>
     </ThemeProvider>
   );
-}
+}