diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1581457..af93174 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,388 +2,145 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
-import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import TextAbout from '@/components/sections/about/TextAbout';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import { CheckCircle, Zap, Shield, Target } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="directional-hover"
-        defaultTextAnimation="background-highlight"
-        borderRadius="pill"
-        contentWidth="small"
-        sizing="mediumLarge"
-        background="noiseDiagonalGradient"
-        cardStyle="inset"
-        primaryButtonStyle="radial-glow"
-        secondaryButtonStyle="layered"
-        headingFontWeight="semibold"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="large"
+        background="noise"
+        cardStyle="glass-depth"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="NovaSocial"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Services", id: "services" },
+              { name: "About", id: "about" },
+              { name: "Pricing", id: "pricing" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="NovaSocial"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardRotatedCarousel
-      background={{
-        variant: "rotated-rays-animated",
-      }}
-      title="Social Media Marketing auf Premium-Level"
-      description="Wir skalieren Marken mit datengetriebenem Content, Ads & Strategie. Mehr Reichweite. Mehr Kunden. Mehr Umsatz."
-      buttons={[
-        {
-          text: "Kostenlos beraten lassen",
-          href: "#contact",
-        },
-        {
-          text: "Unsere Cases",
-          href: "#about",
-        },
-      ]}
-      carouselItems={[
-        {
-          id: "h1",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-coloured-background-with-variety-transparent-raindrops_23-2148290158.jpg",
-          imageAlt: "digital tech lines",
-        },
-        {
-          id: "h2",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-ceo-taking-break-from-work-answering-text-messages_482257-122664.jpg",
-          imageAlt: "office social media",
-        },
-        {
-          id: "h3",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-futuristic-sci-fi-background_35913-2150.jpg",
-          imageAlt: "smartphone social media",
-        },
-        {
-          id: "h4",
-          imageSrc: "http://img.b2bpic.net/free-photo/vivid-abstract-psychedelic-octagon-corridor-pattern-background-with-blue-purple-colors_181624-32831.jpg",
-          imageAlt: "abstract geometry blue",
-        },
-        {
-          id: "h5",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-people-looking-pictures-camera_23-2148532589.jpg",
-          imageAlt: "creative team camera",
-        },
-        {
-          id: "h6",
-          imageSrc: "http://img.b2bpic.net/free-photo/speed-motion-urban-highway-road-tunnel_1112-1142.jpg",
-          imageAlt: "city night long exposure",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroCarouselLogo
+            logoText="NovaSocial"
+            description="Premium Social Media Marketing für datengetriebene Marken. Wir skalieren Ihren Erfolg durch Content-Exzellenz und Performance Ads."
+            buttons={[{ text: "Beratung vereinbaren", href: "#contact" }]}
+            slides={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/abstract-coloured-background-with-variety-transparent-raindrops_23-2148290158.jpg", imageAlt: "Hero 1" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/female-ceo-taking-break-from-work-answering-text-messages_482257-122664.jpg", imageAlt: "Hero 2" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/modern-futuristic-sci-fi-background_35913-2150.jpg", imageAlt: "Hero 3" }
+            ]}
+          />
+        </div>
 
-  <div id="services" data-section="services">
-      <FeatureCardTwentySeven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        {
-          id: "f1",
-          title: "Content Creation",
-          descriptions: [
-            "Virale Kurzvideos für TikTok & Reels",
-            "High-End Fotografie",
-            "Copywriting, das konvertiert",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/ideas-creative-mission-strategy-vision-concept_53876-124143.jpg",
-          imageAlt: "studio setup photography",
-        },
-        {
-          id: "f2",
-          title: "Performance Ads",
-          descriptions: [
-            "Meta Ads für E-Commerce",
-            "TikTok Performance Kampagnen",
-            "Google Ads Skalierung",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/graphic-concept-with-colorful-wood-blocks-high-angle_23-2148950364.jpg",
-          imageAlt: "bar graphs upward",
-        },
-        {
-          id: "f3",
-          title: "Brand Strategy",
-          descriptions: [
-            "Markenidentität definieren",
-            "Zielgruppen-Analyse",
-            "Wachstums-Roadmap",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/employees-preparing-business-presentation_482257-124560.jpg",
-          imageAlt: "strategy planning brainstorming",
-        },
-      ]}
-      title="Unsere Leistungen"
-      description="Exzellenz in allen digitalen Disziplinen."
-    />
-  </div>
+        <div id="services" data-section="services">
+          <FeatureCardTen
+            title="Unsere Kernkompetenzen"
+            description="Alles was Sie für digitales Wachstum benötigen."
+            animationType="slide-up"
+            textboxLayout="split"
+            features={[
+              {
+                title: "Performance Marketing",                description: "Datengetriebene Kampagnen mit Fokus auf messbaren ROI.",                media: { imageSrc: "http://img.b2bpic.net/free-photo/graphic-concept-with-colorful-wood-blocks-high-angle_23-2148950364.jpg" },
+                items: [{ icon: Target, text: "Conversion Tracking" }, { icon: Zap, text: "Schnelle Skalierung" }],
+                reverse: false
+              }
+            ]}
+          />
+        </div>
 
-  <div id="social-proof" data-section="social-proof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "TechCorp",
-        "InnovateLab",
-        "GrowthCo",
-        "StartupXYZ",
-        "DigitalVision",
-        "FutureGrowth",
-        "WebAgency",
-      ]}
-      title="Unsere Partner"
-      description="Erfolgsgeschichten, die wir gemeinsam geschrieben haben."
-    />
-  </div>
+        <div id="social-proof" data-section="social-proof">
+          <SocialProofOne
+            names={["TechCorp", "InnovateLab", "GrowthCo", "StartupXYZ"]}
+            title="Vertraut von Branchenführern"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TextAbout
-      useInvertedBackground={true}
-      title="Warum NovaSocial?"
-      buttons={[
-        {
-          text: "Erfahre mehr",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
+        <div id="about" data-section="about">
+          <InlineImageSplitTextAbout
+            heading={[{ type: "text", content: "Warum NovaSocial?" }]}
+            buttons={[{ text: "Mehr erfahren" }]}
+          />
+        </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardFive
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "p1",
-          tag: "Starter",
-          price: "1.999€",
-          period: "/monat",
-          description: "Für den initialen Boost.",
-          button: {
-            text: "Starten",
-          },
-          featuresTitle: "Was drin ist:",
-          features: [
-            "Content Setup",
-            "Monatlich 4 Reels",
-            "Ads Management",
-          ],
-        },
-        {
-          id: "p2",
-          tag: "Growth",
-          price: "3.999€",
-          period: "/monat",
-          description: "Volle Skalierung.",
-          button: {
-            text: "Jetzt buchen",
-          },
-          featuresTitle: "Was drin ist:",
-          features: [
-            "Content Creation",
-            "Werbebudget-Management",
-            "Conversion Optimierung",
-          ],
-        },
-        {
-          id: "p3",
-          tag: "Scale",
-          price: "7.499€",
-          period: "/monat",
-          description: "Maximale Performance.",
-          button: {
-            text: "Anfragen",
-          },
-          featuresTitle: "Was drin ist:",
-          features: [
-            "VIP Support",
-            "360° Ads & Content",
-            "Strategie-Beratung",
-          ],
-        },
-      ]}
-      title="Unsere Packages"
-      description="Skalierbare Lösungen für jedes Level."
-    />
-  </div>
+        <div id="pricing" data-section="pricing">
+          <PricingCardOne
+            title="Transparente Preise"
+            animationType="depth-3d"
+            textboxLayout="default"
+            plans={[
+              { id: "p1", badge: "Essential", price: "1.999€", subtitle: "Für Startups", features: ["Social Ads", "Content Strategy"] }
+            ]}
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardEleven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",
-          value: "2.4M+",
-          title: "Reichweite",
-          description: "Organisch & bezahlt",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-dark-earth-space_23-2151051317.jpg",
-          imageAlt: "global network lines",
-        },
-        {
-          id: "m2",
-          value: "150+",
-          title: "Kundenprojekte",
-          description: "Erfolgreich abgeschlossen",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-notebook-with-checklist-desk_23-2148938756.jpg",
-          imageAlt: "task complete digital",
-        },
-        {
-          id: "m3",
-          value: "4.2x",
-          title: "ROI",
-          description: "Durchschnitt für Kunden",
-          imageSrc: "http://img.b2bpic.net/free-photo/graphic-concept-with-red-arrow_23-2148950368.jpg",
-          imageAlt: "growth chart arrow",
-        },
-      ]}
-      title="Unsere KPIs"
-      description="Daten sprechen lauter als Worte."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardOne
+            title="Unsere Wirkung"
+            gridVariant="bento-grid"
+            animationType="slide-up"
+            metrics={[
+              { id: "m1", value: "2.4M", title: "Reichweite", description: "Monatlich", icon: CheckCircle }
+            ]}
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
-      useInvertedBackground={false}
-      testimonial="NovaSocial hat unser komplettes Branding auf das nächste Level gehoben. Wahnsinns Arbeit!"
-      rating={5}
-      author="Sarah M., CEO"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg",
-          alt: "professional headshot man",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/high-angle-beautiful-business-female_23-2148411859.jpg",
-          alt: "professional headshot woman",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-man-correcting-grammar-mistakes_23-2150171372.jpg",
-          alt: "professional headshot smiling man",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/indoor-picture-cheerful-handsome-young-man-having-folded-hands-looking-directly-smiling-sincerely-wearing-casual-clothes_176532-10257.jpg",
-          alt: "professional headshot young woman",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg",
-          alt: "Portrait of optimistic businessman in formalwear",
-        },
-      ]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="slide-up"
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardTwelve
+            cardTitle="Erfolgsgeschichten"
+            cardAnimation="slide-up"
+            testimonials={[
+              { id: "t1", name: "Sarah M.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg" }
+            ]}
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "q1",
-          title: "Wie lange dauert ein Onboarding?",
-          content: "Meistens etwa 3-5 Werktage.",
-        },
-        {
-          id: "q2",
-          title: "Arbeitet ihr auch international?",
-          content: "Ja, wir betreuen Kampagnen weltweit.",
-        },
-        {
-          id: "q3",
-          title: "Welche Plattformen nutzt ihr?",
-          content: "Meta, TikTok, Pinterest & LinkedIn.",
-        },
-      ]}
-      faqsAnimation="blur-reveal"
-      sideTitle="Häufige Fragen"
-      sideDescription="Alles, was Sie wissen müssen."
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            title="Häufige Fragen"
+            faqsAnimation="slide-up"
+            faqs={[{ id: "f1", title: "Wie starten wir?", content: "Kontaktieren Sie uns für ein Erstgespräch." }]}
+            imageSrc="http://img.b2bpic.net/free-photo/employees-preparing-business-presentation_482257-124560.jpg"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      tag="Kontakt"
-      title="Bereit für den Durchbruch?"
-      description="Lass uns dein Social Media Marketing auf das nächste Level heben."
-      buttons={[
-        {
-          text: "Jetzt kostenloses Erstgespräch vereinbaren",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            title="Starten Sie Ihr Projekt"
+            description="Schreiben Sie uns für ein individuelles Angebot."
+            inputs={[{ name: "name", type: "text", placeholder: "Ihr Name" }, { name: "email", type: "email", placeholder: "Email" }]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="NovaSocial"
-      columns={[
-        {
-          title: "Quick Links",
-          items: [
-            {
-              label: "Services",
-              href: "#services",
-            },
-            {
-              label: "About",
-              href: "#about",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Impressum",
-              href: "#",
-            },
-            {
-              label: "Datenschutz",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
+            bottomLeftText="© 2025 NovaSocial"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index 018e8e2..89125f7 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,12 +10,12 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #000000;
-  --card: #0c0c0c;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
   --foreground: #ffffff;
   --primary-cta: #106EFB;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #000000;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #ffffff;
   --accent: #535353;
   --background-accent: #106EFB;