c305906f-ea2f-4ec4-bf7f-826ad28b75dc/src/app/page.tsx

"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MediaAbout from '@/components/sections/about/MediaAbout';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="compact"
        sizing="large"
        background="grid"
        cardStyle="glass-elevated"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        { name: "Leistungen", id: "#services" },
        { name: "Preise", id: "#pricing" },
        { name: "Über mich", id: "#about" },
        { name: "Bewertungen", id: "#testimonials" }
      ]}
      brandName="Creative Studio"
      button={{
        text: "Kontakt aufnehmen",        href: "#contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      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."
      buttons={[
        { text: "Projekte ansehen", href: "#services" },
        { text: "Kontaktieren", href: "#contact" }
      ]}
      imageSrc="https://images.unsplash.com/photo-1542744094-24638752d529?q=80&w=2000"
      imageAlt="Kreatives Studio Portfolio"
      avatarText="Kreative Zusammenarbeit für Marken & Einzelpersonen"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      negativeCard={{
        items: ["Keine standardisierten 08/15 Designs", "Keine fehlende Markenidentität", "Keine mangelnde Kommunikation"],
      }}
      positiveCard={{
        items: ["Individuelles Design-Konzept", "Strategischer Aufbau", "Klare visuelle Kommunikation"],
      }}
      title="Mein Arbeitsansatz"
      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">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        { 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" },
        { 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" },
        { 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" }
      ]}
      title="Leistungsspektrum"
      description="Ich unterstütze dich von der Konzeption bis zur finalen Umsetzung deiner kreativen Projekte."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardTwo
      animationType="slide-up"
      textboxLayout="split-description"
      useInvertedBackground={false}
      plans={[
        { id: "starter", badge: "Start", price: "Ab 500€", subtitle: "Kleine Projekte", buttons: [{ text: "Starten", href: "#contact" }], features: ["Individuelle Analyse", "3 Designvorschläge", "Quelldaten inklusive"] },
        { id: "pro", badge: "Premium", price: "Ab 1500€", subtitle: "Vollumfängliche Markenarbeit", buttons: [{ text: "Starten", href: "#contact" }], features: ["Umfassendes Branding", "Social Media Assets", "Priority Support"] }
      ]}
      title="Investition in deine Marke"
      description="Transparente Pakete für deinen kreativen Erfolg."
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="Wer steckt hinter dem Studio?"
      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"
      imageAlt="Über mich"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        { 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" },
        { 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" }
      ]}
      title="Stimmen meiner Partner"
      description="Kunden, die auf Qualität und Kreativität setzen."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        { id: "f1", title: "Wie läuft der Prozess ab?", content: "Wir beginnen mit einem kostenlosen Erstgespräch, danach folgt die Konzeption und Umsetzung." },
        { id: "f2", title: "Wie lange dauert ein Projekt?", content: "Je nach Umfang planen wir etwa 2 bis 6 Wochen ein." }
      ]}
      imageSrc="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=1000"
      mediaAnimation="slide-up"
      title="Fragen & Antworten"
      description="Hier findest du alle wichtigen Informationen vorab."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{ variant: "gradient-bars" }}
      text="Lass uns gemeinsam Großes erschaffen. Kontaktiere mich für eine unverbindliche Anfrage."
      buttons={[{ text: "E-Mail schreiben", href: "mailto:hallo@studio.de" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="Creative Studio"
      leftLink={{ text: "Impressum", href: "#" }}
      rightLink={{ text: "Datenschutz", href: "#" }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}