Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -2,358 +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",
+              { name: "Preise", id: "#pricing" },
-          id: "#services",
+              { name: "Über mich", id: "#about" },
-        },
+              { name: "Referenzen", id: "#testimonials" }
-        {
+            ]}
-          name: "Preise",
+            brandName="Creative Studio"
-          id: "#pricing",
+            button={{ text: "Kontakt", href: "#contact" }}
-        },
+          />
-        {
+        </div>
-          name: "Galerie",
-          id: "#gallery",
-        },
-        {
-          name: "Bewertungen",
-          id: "#testimonials",
-        },
-      ]}
-      brandName="Crocus Beauty"
-      button={{
-        text: "Online Termin",
-        href: "#contact",
-      }}
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroOverlay
+          <HeroBillboardCarousel
-      title="Nagelstudio in Göppingen – Perfektion bei Crocus Beauty"
+            title="Kreative Visionen, die begeistern"
-      description="Russische Maniküre, Pediküre & Wimpern – präzise Handarbeit, sterile Instrumente und Ergebnisse, die 3–4 Wochen halten."
+            description="Ich helfe Marken dabei, durch maßgeschneidertes Design und eine klare Strategie aus der Masse herauszustechen."
-      buttons={[
+            background={{ variant: "sparkles-gradient" }}
-        {
+            mediaItems={[
-          text: "Jetzt Termin buchen",
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E67zmxnnLDB7GpBzRqelkFR3hh/uploaded-1779487651730-sg1h51w0.jpg", imageAlt: "Creative Studio Workspace" }
-          href: "#contact",
+            ]}
-        },
+            buttons={[{ text: "Projekt starten", href: "#contact" }]}
-        {
+          />
-          text: "Gutschein kaufen",
+        </div>
-          href: "#",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/winter-season-lodging-entrance_482257-103218.jpg"
-      imageAlt="Nagelstudio Göppingen Crocus Beauty"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-nail-care-treatment_23-2149262902.jpg",
-          alt: "Happy customer smiling",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/woman-s-arms-posing-with-peach_23-2149640614.jpg",
-          alt: "Happy customer smiling",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/nail-art-professional-working-client-nails_23-2149265951.jpg",
-          alt: "Happy customer smiling",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/nail-art-professional-working-client-nails_23-2149265937.jpg",
-          alt: "Happy customer smiling",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/cute-model-holding-fairy-wand_23-2148376683.jpg",
-          alt: "Happy customer smiling",
-        },
-      ]}
-      avatarText="Über 500+ zufriedene Kundinnen"
-    />
-  </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: [
+            features={[
-          "Keine Stresssituationen",
+              { 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" },
-          "Keine Kompromisse bei der Hygiene",
+              { 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" }
-          "Keine unsauberen Ergebnisse",
+            ]}
-        ],
+          />
-      }}
+        </div>
-      positiveCard={{
-        items: [
-          "Sterile Instrumente (Heißluftsterilisation)",
-          "Präzise Trockenmaniküre",
-          "Langanhaltende Gel-Beschichtung",
-        ],
-      }}
-      title="Warum Crocus Beauty"
-      description="Wir sorgen dafür, dass du strahlend wiederkommst. Kein Stress, keine langen Wartezeiten – nur erstklassige Ergebnisse."
-    />
-  </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}
-        {
+            textboxLayout="split"
-          id: "p1",
+            products={[
-          brand: "Maniküre",
+              { id: "1", name: "Branding & Identity", price: "Individuell", variant: "Premium", imageSrc: "https://images.unsplash.com/photo-1547658719-da2b51169165?q=80&w=600" },
-          name: "Russische Maniküre",
+              { id: "2", name: "Web Design", price: "Individuell", variant: "Digital", imageSrc: "https://images.unsplash.com/photo-1586717791821-3f44a563daae?q=80&w=600" },
-          price: "ab 35€",
+              { id: "3", name: "Print Media", price: "Individuell", variant: "Klassisch", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=600" }
-          rating: 5,
+            ]}
-          reviewCount: "120+",
+          />
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-nail-care-treatment_23-2149262929.jpg",
+        </div>
-        },
-        {
-          id: "p2",
-          brand: "Nägel",
-          name: "Gel-Beschichtung",
-          price: "ab 45€",
-          rating: 5,
-          reviewCount: "100+",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-doctor-posing_23-2148497197.jpg",
-        },
-        {
-          id: "p3",
-          brand: "Wimpern",
-          name: "Classic Set",
-          price: "ab 60€",
-          rating: 5,
-          reviewCount: "80+",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-testing-lipstick-product_23-2148398614.jpg",
-        },
-        {
-          id: "p4",
-          brand: "Wimpern",
-          name: "Volumen-Look",
-          price: "ab 85€",
-          rating: 5,
-          reviewCount: "90+",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-woman-holding-hands-together-joyfully-looking-camera-modern-clothes-store_574295-2021.jpg",
-        },
-        {
-          id: "p5",
-          brand: "Pflege",
-          name: "Pediküre mit Massage",
-          price: "ab 40€",
-          rating: 5,
-          reviewCount: "50+",
-          imageSrc: "http://img.b2bpic.net/free-photo/perfume-bottles-woman-s-dressing-table_53876-94360.jpg",
-        },
-        {
-          id: "p6",
-          brand: "Design",
-          name: "French-Finish",
-          price: "ab 10€",
-          rating: 5,
-          reviewCount: "70+",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-caucasian-young-woman-is-sitting-table-with-moisturizing-cosmetic-skin-care-product-brunette-green-shirt-looks-into-camera-while-room-natural-cosmetics-concept_197531-32260.jpg",
-        },
-      ]}
-      title="Unsere Leistungen"
-      description="Vom eleganten Nageldesign bis zur professionellen Wimpernverlängerung – individuell abgestimmt auf deine Wünsche."
-    />
-  </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"
-        {
+            useInvertedBackground={false}
-          id: "loyalty",
+            plans={[
-          badge: "Treue",
+              { 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"] },
-          price: "50% Rabatt",
+              { 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"] }
-          subtitle: "Nach dem 5. Besuch",
+            ]}
-          buttons: [
+          />
-            {
+        </div>
-              text: "Mehr erfahren",
-              href: "#",
-            },
-          ],
-          features: [
-            "Kein Code",
-            "Automatische Zählung",
-            "50% auf 6. Termin",
-          ],
-        },
-        {
-          id: "vip",
-          badge: "Gratis",
-          price: "11. Besuch",
-          subtitle: "Vollständig gratis",
-          buttons: [
-            {
-              text: "Mehr erfahren",
-              href: "#",
-            },
-          ],
-          features: [
-            "Treue belohnt",
-            "Kein Antrag nötig",
-            "Nach 10 Besuchen",
-          ],
-        },
-      ]}
-      title="Treue zahlt sich aus"
-      description="Unsere Treueprogramme für zufriedene Kundinnen."
-    />
-  </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="Über Crocus Beauty"
+            useInvertedBackground={true}
-      description="Crocus Beauty steht für Präzision, Hygiene und ästhetische Ergebnisse. Als Expertin für russische Maniküre und Wimpernverlängerungen lege ich Wert auf Qualität, die nicht nur kurzzeitig glänzt, sondern Wochen hält."
+          />
-      imageSrc="http://img.b2bpic.net/free-photo/young-woman-model-holding-book-red-wall_114579-56021.jpg"
+        </div>
-      imageAlt="Inhaberin Crocus Beauty"
-    />
-  </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}
-        {
+            textboxLayout="default"
-          id: "t1",
+            testimonials={[
-          name: "Sophie Krämer",
+              { id: "t1", name: "Sarah M.", role: "Unternehmerin", testimonial: "Hervorragende Zusammenarbeit und exzellente Ergebnisse!", icon: Star },
-          handle: "@sophie",
+              { id: "t2", name: "Markus W.", role: "Founder", testimonial: "Endlich ein Studio, das meine Anforderungen perfekt verstanden hat.", icon: Star }
-          testimonial: "Sehr saubere und präzise Arbeit. Meine Nägel sehen natürlich aus und halten wirklich lange.",
+            ]}
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-friends-holding-hands_23-2148238253.jpg",
+          />
-        },
+        </div>
-        {
-          id: "t2",
-          name: "Marlene Vogt",
-          handle: "@marlene",
-          testimonial: "Die Pediküre war angenehm und hygienisch. Besonders die Fußmassage war ein echtes Highlight.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-by-yellow-wall_1303-22991.jpg",
-        },
-        {
-          id: "t3",
-          name: "Leonie H.",
-          handle: "@leonie",
-          testimonial: "Sehr schönes Ergebnis – nicht zu künstlich, genau wie ich es wollte.",
-          imageSrc: "http://img.b2bpic.net/free-photo/model-is-sitting-high-chair-professional-make-up-procedure_231208-3562.jpg",
-        },
-        {
-          id: "t4",
-          name: "Anna S.",
-          handle: "@anna",
-          testimonial: "Habe mich vom ersten Moment an wohlgefühlt. Top Studio!",
-          imageSrc: "http://img.b2bpic.net/free-photo/women-talking-cafe_23-2147785301.jpg",
-        },
-        {
-          id: "t5",
-          name: "Julia P.",
-          handle: "@julia",
-          testimonial: "Immer wieder gerne, die Wimpern sind perfekt.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-woman-black-jacket_176474-101183.jpg",
-        },
-      ]}
-      title="Was unsere Kundinnen sagen"
-      description="Über 500 zufriedene Kundinnen vertrauen auf unsere Technik."
-    />
-  </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"
-        {
+            useInvertedBackground={true}
-          id: "f1",
+            textboxLayout="split"
-          title: "Wie lange halten die Nägel?",
+            faqs={[
-          content: "Die Ergebnisse halten bei guter Pflege etwa 3–4 Wochen.",
+              { id: "1", title: "Wie lange dauert ein Prozess?", content: "In der Regel ca. 2-6 Wochen, abhängig vom Umfang." },
-        },
+              { id: "2", title: "Wie starte ich?", content: "Schreib mir einfach eine Mail oder kontaktiere mich über das Formular." }
-        {
+            ]}
-          id: "f2",
+          />
-          title: "Wie hygienisch sind die Instrumente?",
+        </div>
-          content: "Wir nutzen ausschließlich Heißluftsterilisation bei 180°C nach jedem Kunden.",
-        },
-        {
-          id: "f3",
-          title: "Bieten Sie auch Gutscheine an?",
-          content: "Ja, Gutscheine ab 30€ sind online oder im Studio erhältlich.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-smiley-friend-surprising-woman_23-2149315322.jpg"
-      mediaAnimation="slide-up"
-      title="Häufige Fragen"
-      description="Alles Wichtige für deinen Studiobesuch."
-      faqsAnimation="slide-up"
-    />
-  </div>
 
-  <div id="contact" data-section="contact">
+        <div id="contact" data-section="contact">
-      <ContactText
+          <ContactSplit
-      useInvertedBackground={false}
+            tag="Kontakt"
-      background={{
+            title="Lass uns starten"
-        variant: "gradient-bars",
+            description="Bereit, deine Marke auf das nächste Level zu heben?"
-      }}
+            background={{ variant: "gradient-bars" }}
-      text="Bereit für strahlende Nägel? Buche jetzt deinen Termin bei Crocus Beauty."
+            useInvertedBackground={false}
-      buttons={[
+            buttonText="Absenden"
-        {
+            imageSrc="https://images.unsplash.com/photo-1596524430615-b46618392176?q=80&w=800"
-          text: "Termin online buchen",
+            imageAlt="Kontakt aufnehmen"
-          href: "#",
+          />
-        },
+        </div>
-        {
-          text: "WhatsApp Kontakt",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterLogoReveal
+          <FooterBaseReveal
-      logoText="Crocus Beauty Studio"
+            logoText="Creative Studio"
-      leftLink={{
+            columns={[
-        text: "Impressum",
+              { title: "Navigation", items: [{ label: "Leistungen", href: "#services" }, { label: "Preise", href: "#pricing" }] }
-        href: "#",
+            ]}
-      }}
+          />
-      rightLink={{
+        </div>
-        text: "Datenschutz",
-        href: "#",
-      }}
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );