From b2e09febac0cb48efba5d6da82c409f7c29dca19 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 15 Apr 2026 13:46:40 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 349 ++++++++++++++++-------------------------------
 1 file changed, 116 insertions(+), 233 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6d835f9..277a02b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -19,249 +19,132 @@ export default function LandingPage() {
         defaultButtonVariant="expand-hover"
         defaultTextAnimation="background-highlight"
         borderRadius="pill"
+        contentWidth="medium"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "Über uns",
-          id: "about",
-        },
-        {
-          name: "Leistungen",
-          id: "features",
-        },
-        {
-          name: "Kontakt",
-          id: "contact",
-        },
-      ]}
-      brandName="TTL Studio"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Über uns", id: "about" },
+              { name: "Leistungen", id: "features" },
+              { name: "Kontakt", id: "contact" }
+            ]}
+            brandName="TTL Studio"
+            button={{ text: "Kontakt", href: "#contact" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardRotatedCarousel
-      background={{
-        variant: "rotated-rays-animated",
-      }}
-      title="TTL Studio: Ihre Digitale Präsenz, Neu Definiert."
-      description="Wir entwickeln maßgeschneiderte digitale Lösungen, die Ihr Unternehmen in der modernen Welt skalieren. Professionell, präzise, zukunftsorientiert."
-      buttons={[
-        {
-          text: "Jetzt Erstgespräch buchen",
-          href: "#contact",
-        },
-      ]}
-      carouselItems={[
-        {
-          id: "1",
-          imageSrc: "http://img.b2bpic.net/free-photo/notepad-near-mouse-coffee-with-copy-space_23-2148291145.jpg",
-          imageAlt: "TTL Studio - Digitale Lösungen",
-        },
-        {
-          id: "2",
-          imageSrc: "http://img.b2bpic.net/free-photo/male-staring-cellphone-his-hands_259150-57825.jpg",
-          imageAlt: "Technologie & Strategie",
-        },
-        {
-          id: "3",
-          imageSrc: "http://img.b2bpic.net/free-photo/women-working-hard-innovation_23-2148776732.jpg",
-          imageAlt: "Kreatives Design",
-        },
-        {
-          id: "4",
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-executive-manager-briefing-her-collegues-explaning-company-strategy-brainstorming-multiethnical-businesspeople-working-professional-startup-financial-office-conference_482257-13735.jpg",
-          imageAlt: "Unternehmensberatung",
-        },
-        {
-          id: "5",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-cyber-lines_1048-14148.jpg",
-          imageAlt: "Innovation & Zukunft",
-        },
-        {
-          id: "6",
-          imageSrc: "http://img.b2bpic.net/free-photo/colorful-light-prisms-effect_23-2148898155.jpg",
-          imageAlt: "Digitale Transformation",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroBillboardRotatedCarousel
+            background={{ variant: "rotated-rays-animated" }}
+            title="TTL Studio: Ihre Digitale Präsenz, Neu Definiert."
+            description="Wir entwickeln maßgeschneiderte digitale Lösungen, die Ihr Unternehmen in der modernen Welt skalieren. Professionell, präzise, zukunftsorientiert."
+            buttons={[{ text: "Jetzt Erstgespräch buchen", href: "#contact" }]}
+            carouselItems={[
+              { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/notepad-near-mouse-coffee-with-copy-space_23-2148291145.jpg", imageAlt: "TTL Studio - Digitale Lösungen" },
+              { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/male-staring-cellphone-his-hands_259150-57825.jpg", imageAlt: "Technologie & Strategie" },
+              { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/women-working-hard-innovation_23-2148776732.jpg", imageAlt: "Kreatives Design" },
+              { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/professional-executive-manager-briefing-her-collegues-explaning-company-strategy-brainstorming-multiethnical-businesspeople-working-professional-startup-financial-office-conference_482257-13735.jpg", imageAlt: "Unternehmensberatung" },
+              { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-cyber-lines_1048-14148.jpg", imageAlt: "Innovation & Zukunft" },
+              { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/colorful-light-prisms-effect_23-2148898155.jpg", imageAlt: "Digitale Transformation" }
+            ]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <InlineImageSplitTextAbout
-      useInvertedBackground={true}
-      heading={[
-        {
-          type: "text",
-          content: "Über TTL Studio",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/businessman-working-with-his-colleagues_1098-21578.jpg",
-          alt: "TTL Teamarbeit",
-        },
-        {
-          type: "text",
-          content: "Wir sind mehr als eine Agentur. Wir sind Ihr strategischer Partner für digitales Wachstum. TTL Studio steht für Professionalität, Transparenz und erstklassige Ergebnisse. Wir unterstützen Unternehmen dabei, ihre Visionen in die digitale Realität umzusetzen.",
-        },
-      ]}
-    />
-  </div>
+        <div id="about" data-section="about">
+          <InlineImageSplitTextAbout
+            useInvertedBackground={true}
+            heading={[
+              { type: "text", content: "Über TTL Studio" },
+              { type: "image", src: "http://img.b2bpic.net/free-photo/businessman-working-with-his-colleagues_1098-21578.jpg", alt: "TTL Teamarbeit" },
+              { type: "text", content: "Wir sind mehr als eine Agentur. Wir sind Ihr strategischer Partner für digitales Wachstum. TTL Studio steht für Professionalität, Transparenz und erstklassige Ergebnisse. Wir unterstützen Unternehmen dabei, ihre Visionen in die digitale Realität umzusetzen." }
+            ]}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureHoverPattern
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          icon: Zap,
-          title: "Web-Entwicklung",
-          description: "Hochperformante, skalierbare Web-Applikationen und Websites.",
-        },
-        {
-          icon: Shield,
-          title: "Digitale Strategie",
-          description: "Fundierte Beratung für Ihre nachhaltige digitale Transformation.",
-        },
-        {
-          icon: Award,
-          title: "UX/UI Design",
-          description: "Benutzerzentrierte Designs, die Vertrauen schaffen und Konvertierung fördern.",
-        },
-      ]}
-      title="Unsere Leistungen"
-      description="Profitieren Sie von unseren spezialisierten Dienstleistungen für Ihren Unternehmenserfolg."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureHoverPattern
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              { icon: Zap, title: "Web-Entwicklung", description: "Hochperformante, skalierbare Web-Applikationen und Websites." },
+              { icon: Shield, title: "Digitale Strategie", description: "Fundierte Beratung für Ihre nachhaltige digitale Transformation." },
+              { icon: Award, title: "UX/UI Design", description: "Benutzerzentrierte Designs, die Vertrauen schaffen und Konvertierung fördern." }
+            ]}
+            title="Unsere Leistungen"
+            description="Profitieren Sie von unseren spezialisierten Dienstleistungen für Ihren Unternehmenserfolg."
+          />
+        </div>
 
-  <div id="capabilities" data-section="capabilities">
-      <MetricCardTwo
-      animationType="scale-rotate"
-      textboxLayout="default"
-      gridVariant="bento-grid"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",
-          value: "100%",
-          description: "Kundenorientierung",
-        },
-        {
-          id: "m2",
-          value: "24/7",
-          description: "Servicebereitschaft",
-        },
-        {
-          id: "m3",
-          value: "Fokus",
-          description: "Qualität vor Quantität",
-        },
-      ]}
-      title="Unser Anspruch"
-      description="Wir setzen Standards durch Präzision und Innovationskraft."
-    />
-  </div>
+        <div id="capabilities" data-section="capabilities">
+          <MetricCardTwo
+            animationType="scale-rotate"
+            textboxLayout="default"
+            gridVariant="bento-grid"
+            useInvertedBackground={true}
+            metrics={[
+              { id: "m1", value: "100%", description: "Kundenorientierung" },
+              { id: "m2", value: "24/7", description: "Servicebereitschaft" },
+              { id: "m3", value: "Fokus", description: "Qualität vor Quantität" }
+            ]}
+            title="Unser Anspruch"
+            description="Wir setzen Standards durch Präzision und Innovationskraft."
+          />
+        </div>
 
-  <div id="proof" data-section="proof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Alpha Corp",
-        "Beta Tech",
-        "Gamma Ventures",
-        "Delta Innovations",
-        "Epsilon Systems",
-        "Zeta Labs",
-        "Theta Partners",
-      ]}
-      title="Vertrauen durch Professionalität"
-      description="Ihr Erfolg ist unser Erfolg. Wir arbeiten diskret und ergebnisorientiert für anspruchsvolle Kunden."
-    />
-  </div>
+        <div id="proof" data-section="proof">
+          <SocialProofOne
+            textboxLayout="default"
+            useInvertedBackground={false}
+            names={["Alpha Corp", "Beta Tech", "Gamma Ventures", "Delta Innovations", "Epsilon Systems", "Zeta Labs", "Theta Partners"]}
+            title="Vertrauen durch Professionalität"
+            description="Ihr Erfolg ist unser Erfolg. Wir arbeiten diskret und ergebnisorientiert für anspruchsvolle Kunden."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="default"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "f1",
-          title: "Wie arbeitet TTL Studio?",
-          content: "Wir folgen einem strukturierten Prozess aus Analyse, Strategie, Umsetzung und Qualitätssicherung.",
-        },
-        {
-          id: "f2",
-          title: "Warum TTL Studio?",
-          content: "Professionalität, Zuverlässigkeit und ein unbedingter Fokus auf Ihren wirtschaftlichen Mehrwert.",
-        },
-        {
-          id: "f3",
-          title: "Was kostet die Zusammenarbeit?",
-          content: "Individuelle Projekte erfordern individuelle Angebote. Lassen Sie uns in einem unverbindlichen Gespräch die Details klären.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/diversity-inclusion-quote-black-fabric_23-2148699738.jpg"
-      mediaAnimation="slide-up"
-      title="Häufige Fragen"
-      description="Alles, was Sie über unsere Arbeitsweise wissen müssen."
-      faqsAnimation="blur-reveal"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            textboxLayout="default"
+            useInvertedBackground={true}
+            faqs={[
+              { id: "f1", title: "Wie arbeitet TTL Studio?", content: "Wir folgen einem strukturierten Prozess aus Analyse, Strategie, Umsetzung und Qualitätssicherung." },
+              { id: "f2", title: "Warum TTL Studio?", content: "Professionalität, Zuverlässigkeit und ein unbedingter Fokus auf Ihren wirtschaftlichen Mehrwert." },
+              { id: "f3", title: "Was kostet die Zusammenarbeit?", content: "Individuelle Projekte erfordern individuelle Angebote. Lassen Sie uns in einem unverbindlichen Gespräch die Details klären." }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/diversity-inclusion-quote-black-fabric_23-2148699738.jpg"
+            mediaAnimation="slide-up"
+            title="Häufige Fragen"
+            description="Alles, was Sie über unsere Arbeitsweise wissen müssen."
+            faqsAnimation="blur-reveal"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      text="Bereit für Ihr nächstes digitales Projekt? Kontaktieren Sie uns für ein unverbindliches Erstgespräch."
-      buttons={[
-        {
-          text: "Jetzt anfragen",
-          href: "mailto:hello@ttl-studio.de",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactText
+            useInvertedBackground={false}
+            background={{ variant: "sparkles-gradient" }}
+            text="Bereit für Ihr nächstes digitales Projekt? Kontaktieren Sie uns für ein unverbindliches Erstgespräch."
+            buttons={[{ text: "Jetzt anfragen", href: "mailto:hello@ttl-studio.de" }]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Agentur",
-          items: [
-            {
-              label: "Über uns",
-              href: "#about",
-            },
-            {
-              label: "Leistungen",
-              href: "#features",
-            },
-          ],
-        },
-        {
-          title: "Rechtliches",
-          items: [
-            {
-              label: "Impressum",
-              href: "#",
-            },
-            {
-              label: "Datenschutz",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="TTL Studio"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              { title: "Agentur", items: [{ label: "Über uns", href: "#about" }, { label: "Leistungen", href: "#features" }] },
+              { title: "Rechtliches", items: [{ label: "Impressum", href: "#" }, { label: "Datenschutz", href: "#" }] }
+            ]}
+            logoText="TTL Studio"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1