Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,162 +2,157 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import { Sparkles, CheckCircle, Target, Briefcase, Zap, Star, MessageCircle, Mail } from "lucide-react";
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import MediaAbout from '@/components/sections/about/MediaAbout';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="text-shift"
+        defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="entrance-slide"
+        defaultTextAnimation="reveal-blur"
-        borderRadius="pill"
+        borderRadius="rounded"
-        contentWidth="compact"
+        contentWidth="mediumLarge"
-        sizing="large"
+        sizing="largeSizeMediumTitles"
-        background="grid"
+        background="noise"
-        cardStyle="glass-elevated"
+        cardStyle="glass-depth"
-        primaryButtonStyle="shadow"
+        primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="layered"
+        secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
+          <NavbarStyleFullscreen
-      navItems={[
+            navItems={[
-        { name: "Leistungen", id: "#services" },
+              { name: "Leistungen", id: "#services" },
-        { name: "Preise", id: "#pricing" },
+              { name: "Preise", id: "#pricing" },
-        { name: "Über mich", id: "#about" },
+              { name: "Über mich", id: "#about" },
-        { name: "Bewertungen", id: "#testimonials" }
+              { name: "Referenzen", id: "#testimonials" }
-      ]}
+            ]}
-      brandName="Creative Studio"
+            brandName="Creative Studio"
-      button={{
+            button={{ text: "Kontakt", href: "#contact" }}
-        text: "Kontakt aufnehmen",        href: "#contact"}}
+          />
-    />
+        </div>
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroOverlay
+          <HeroBillboardCarousel
-      title="Kreative Visionen, die begeistern"
+            title="Kreative Visionen, die begeistern"
-      description="Ich helfe Marken dabei, durch kreatives Design und durchdachte Konzepte sichtbar zu werden. Lass uns gemeinsam dein nächstes Projekt verwirklichen."
+            description="Ich helfe Marken dabei, durch maßgeschneidertes Design und eine klare Strategie aus der Masse herauszustechen."
-      buttons={[
+            background={{ variant: "sparkles-gradient" }}
-        { text: "Projekte ansehen", href: "#services" },
+            mediaItems={[
-        { text: "Kontaktieren", href: "#contact" }
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E67zmxnnLDB7GpBzRqelkFR3hh/uploaded-1779487651730-sg1h51w0.jpg", imageAlt: "Creative Studio Workspace" }
-      ]}
+            ]}
-      imageSrc="https://images.unsplash.com/photo-1542744094-24638752d529?q=80&w=2000"
+            buttons={[{ text: "Projekt starten", href: "#contact" }]}
-      imageAlt="Kreatives Studio Portfolio"
+          />
-      avatarText="Kreative Zusammenarbeit für Marken & Einzelpersonen"
+        </div>
-    />
-  </div>
 
-  <div id="features" data-section="features">
+        <div id="features" data-section="features">
-      <FeatureCardSixteen
+          <FeatureCardNineteen
-      animationType="slide-up"
+            title="Mein kreativer Prozess"
-      textboxLayout="default"
+            description="Design ist mehr als nur Optik – es ist das Fundament deiner Markenidentität."
-      useInvertedBackground={false}
+            textboxLayout="split"
-      negativeCard={{
+            useInvertedBackground={false}
-        items: ["Keine standardisierten 08/15 Designs", "Keine fehlende Markenidentität", "Keine mangelnde Kommunikation"],
+            features={[
-      }}
+              { tag: "Analyse", title: "Strategische Planung", subtitle: "Fundierte Analyse", description: "Wir identifizieren deine Zielgruppe und definieren deine Kernbotschaft.", imageSrc: "https://images.unsplash.com/photo-1542744094-24638752d529?q=80&w=600" },
-      positiveCard={{
+              { tag: "Kreation", title: "Visuelle Umsetzung", subtitle: "Design-Entwicklung", description: "Ich entwerfe eine einzigartige visuelle Welt, die deine Kunden überzeugt.", imageSrc: "https://images.unsplash.com/photo-1626785774573-4b799315347d?q=80&w=600" }
-        items: ["Individuelles Design-Konzept", "Strategischer Aufbau", "Klare visuelle Kommunikation"],
+            ]}
-      }}
+          />
-      title="Mein Arbeitsansatz"
+        </div>
-      description="Design bedeutet für mich nicht nur Ästhetik, sondern eine funktionale Lösung für deine Ziele."
-    />
-  </div>
 
-  <div id="services" data-section="services">
+        <div id="services" data-section="services">
-      <ProductCardTwo
+          <ProductCardFour
-      animationType="slide-up"
+            title="Meine Services"
-      textboxLayout="split"
+            description="Leistungen, die deine Marke nach vorne bringen."
-      gridVariant="three-columns-all-equal-width"
+            gridVariant="one-large-left-three-stacked-right"
-      useInvertedBackground={true}
+            animationType="slide-up"
-      products={[
+            useInvertedBackground={true}
-        { id: "s1", brand: "Design", name: "Branding & CI", price: "ab 500€", rating: 5, reviewCount: "15+", imageSrc: "https://images.unsplash.com/photo-1626785774573-4b799315347d?q=80&w=800" },
+            textboxLayout="split"
-        { id: "s2", brand: "Digital", name: "Webdesign", price: "ab 800€", rating: 5, reviewCount: "20+", imageSrc: "https://images.unsplash.com/photo-1547658719-da2b51169165?q=80&w=800" },
+            products={[
-        { id: "s3", brand: "Print", name: "Printmedien", price: "ab 300€", rating: 5, reviewCount: "10+", imageSrc: "https://images.unsplash.com/photo-1586717791821-3f44a563daae?q=80&w=800" }
+              { id: "1", name: "Branding & Identity", price: "Individuell", variant: "Premium", imageSrc: "https://images.unsplash.com/photo-1547658719-da2b51169165?q=80&w=600" },
-      ]}
+              { id: "2", name: "Web Design", price: "Individuell", variant: "Digital", imageSrc: "https://images.unsplash.com/photo-1586717791821-3f44a563daae?q=80&w=600" },
-      title="Leistungsspektrum"
+              { id: "3", name: "Print Media", price: "Individuell", variant: "Klassisch", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=600" }
-      description="Ich unterstütze dich von der Konzeption bis zur finalen Umsetzung deiner kreativen Projekte."
+            ]}
-    />
+          />
-  </div>
+        </div>
 
-  <div id="pricing" data-section="pricing">
+        <div id="pricing" data-section="pricing">
-      <PricingCardTwo
+          <PricingCardEight
-      animationType="slide-up"
+            title="Investition in Qualität"
-      textboxLayout="split-description"
+            description="Klare Strukturen für dein nächstes Projekt."
-      useInvertedBackground={false}
+            animationType="slide-up"
-      plans={[
+            textboxLayout="split-description"
-        { id: "starter", badge: "Start", price: "Ab 500€", subtitle: "Kleine Projekte", buttons: [{ text: "Starten", href: "#contact" }], features: ["Individuelle Analyse", "3 Designvorschläge", "Quelldaten inklusive"] },
+            useInvertedBackground={false}
-        { id: "pro", badge: "Premium", price: "Ab 1500€", subtitle: "Vollumfängliche Markenarbeit", buttons: [{ text: "Starten", href: "#contact" }], features: ["Umfassendes Branding", "Social Media Assets", "Priority Support"] }
+            plans={[
-      ]}
+              { id: "starter", badge: "Essential", price: "ab 500€", subtitle: "Für kleine Vorhaben", buttons: [{ text: "Starten", href: "#contact" }], features: ["Individuelle Analyse", "3 Design-Konzepte", "Quelldaten inklusive"] },
-      title="Investition in deine Marke"
+              { id: "pro", badge: "Full Service", price: "ab 1500€", subtitle: "Vollumfängliche Beratung", buttons: [{ text: "Starten", href: "#contact" }], features: ["Umfassendes Branding", "Social Media Assets", "Priority Support"] }
-      description="Transparente Pakete für deinen kreativen Erfolg."
+            ]}
-    />
+          />
-  </div>
+        </div>
 
-  <div id="about" data-section="about">
+        <div id="about" data-section="about">
-      <MediaAbout
+          <InlineImageSplitTextAbout
-      useInvertedBackground={true}
+            heading={[{ type: "text", content: "Über mich & meine Vision" }]}
-      title="Wer steckt hinter dem Studio?"
+            useInvertedBackground={true}
-      description="Ich bin ein kreativer Kopf mit Leidenschaft für Ästhetik und Funktion. Nach Jahren der Erfahrung im Designbereich habe ich mein eigenes Studio gegründet, um Menschen wie dir zu helfen, sich authentisch zu präsentieren."
+          />
-      imageSrc="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1200"
+        </div>
-      imageAlt="Über mich"
-    />
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
+        <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSix
+          <TestimonialCardTwo
-      animationType="slide-up"
+            title="Kundenstimmen"
-      textboxLayout="default"
+            description="Was Kunden über die Zusammenarbeit sagen."
-      useInvertedBackground={false}
+            animationType="slide-up"
-      testimonials={[
+            useInvertedBackground={false}
-        { id: "t1", name: "Sarah M.", handle: "@sarah", testimonial: "Die Arbeit mit diesem Studio war eine absolute Bereicherung. Sehr professionell und kreativ!", imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400" },
+            textboxLayout="default"
-        { id: "t2", name: "Markus W.", handle: "@markus", testimonial: "Endlich ein Design, das perfekt zu meiner Marke passt.", imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400" }
+            testimonials={[
-      ]}
+              { id: "t1", name: "Sarah M.", role: "Unternehmerin", testimonial: "Hervorragende Zusammenarbeit und exzellente Ergebnisse!", icon: Star },
-      title="Stimmen meiner Partner"
+              { id: "t2", name: "Markus W.", role: "Founder", testimonial: "Endlich ein Studio, das meine Anforderungen perfekt verstanden hat.", icon: Star }
-      description="Kunden, die auf Qualität und Kreativität setzen."
+            ]}
-    />
+          />
-  </div>
+        </div>
 
-  <div id="faq" data-section="faq">
+        <div id="faq" data-section="faq">
-      <FaqSplitMedia
+          <FaqDouble
-      textboxLayout="default"
+            title="Häufige Fragen"
-      useInvertedBackground={true}
+            description="Hier findest du alle Antworten für einen schnellen Start."
-      faqs={[
+            faqsAnimation="slide-up"
-        { id: "f1", title: "Wie läuft der Prozess ab?", content: "Wir beginnen mit einem kostenlosen Erstgespräch, danach folgt die Konzeption und Umsetzung." },
+            useInvertedBackground={true}
-        { id: "f2", title: "Wie lange dauert ein Projekt?", content: "Je nach Umfang planen wir etwa 2 bis 6 Wochen ein." }
+            textboxLayout="split"
-      ]}
+            faqs={[
-      imageSrc="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=1000"
+              { id: "1", title: "Wie lange dauert ein Prozess?", content: "In der Regel ca. 2-6 Wochen, abhängig vom Umfang." },
-      mediaAnimation="slide-up"
+              { id: "2", title: "Wie starte ich?", content: "Schreib mir einfach eine Mail oder kontaktiere mich über das Formular." }
-      title="Fragen & Antworten"
+            ]}
-      description="Hier findest du alle wichtigen Informationen vorab."
+          />
-      faqsAnimation="slide-up"
+        </div>
-    />
-  </div>
 
-  <div id="contact" data-section="contact">
+        <div id="contact" data-section="contact">
-      <ContactText
+          <ContactSplit
-      useInvertedBackground={false}
+            tag="Kontakt"
-      background={{ variant: "gradient-bars" }}
+            title="Lass uns starten"
-      text="Lass uns gemeinsam Großes erschaffen. Kontaktiere mich für eine unverbindliche Anfrage."
+            description="Bereit, deine Marke auf das nächste Level zu heben?"
-      buttons={[{ text: "E-Mail schreiben", href: "mailto:hallo@studio.de" }]}
+            background={{ variant: "gradient-bars" }}
-    />
+            useInvertedBackground={false}
-  </div>
+            buttonText="Absenden"
+            imageSrc="https://images.unsplash.com/photo-1596524430615-b46618392176?q=80&w=800"
+            imageAlt="Kontakt aufnehmen"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterLogoReveal
+          <FooterBaseReveal
-      logoText="Creative Studio"
+            logoText="Creative Studio"
-      leftLink={{ text: "Impressum", href: "#" }}
+            columns={[
-      rightLink={{ text: "Datenschutz", href: "#" }}
+              { title: "Navigation", items: [{ label: "Leistungen", href: "#services" }, { label: "Preise", href: "#pricing" }] }
-    />
+            ]}
-  </div>
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );