Update src/app/page.tsx

src/app/page.tsx

@@ -2,17 +2,13 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
-import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
-import FooterCard from '@/components/sections/footer/FooterCard';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
-import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
+import AboutMetric from '@/components/sections/about/AboutMetric';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import { Scissors, Sparkles, User, MapPin } from 'lucide-react';
-import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 
 export default function LandingPage() {
   return (
@@ -30,439 +26,81 @@ export default function LandingPage() {
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
+            <NavbarStyleCentered
                 navItems={[
-        {
+                    { name: "Home", id: "#hero" },
-          name: "About",
+                    { name: "Über uns", id: "#about" },
-          id: "#about",
+                    { name: "Services", id: "#features" },
-        },
+                    { name: "Kontakt", id: "#contact" },
-        {
-          name: "Services",
-          id: "#features",
-        },
-        {
-          name: "Prices",
-          id: "#pricing",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
                 ]}
                 brandName="Haarzeit"
-      button={{
+                button={{ text: "Termin buchen", href: "#contact" }}
-        text: "Book Now",
-        href: "#contact",
-      }}
             />
         </div>
 
         <div id="hero" data-section="hero">
-      <HeroSplitTestimonial
+            <HeroBillboard
-      background={{
+                title="Haarzeit, der Friseur"
-        variant: "plain",
+                description="Exzellente Frisierkunst im Herzen von Murr. Wir verwandeln deinen Besuch in einen Wohlfühlmoment."
-      }}
+                background={{ variant: "sparkles-gradient" }}
-      title="Dein Haar in unseren Händen"
+                buttons={[{ text: "Jetzt anfragen", href: "#contact" }]}
-      description="Erlebe exzellente Frisierkunst im Herzen der Stadt. Bei Haarzeit verbinden wir handwerkliche Präzision mit einer persönlichen Wohlfühlatmosphäre."
+                imageSrc="http://img.b2bpic.net/free-photo/hairdresser-customer-talking-hair-salon_329181-1940.jpg"
-      testimonials={[
-        {
-          name: "Julia M.",
-          handle: "@juliam",
-          testimonial: "Bester Salon in der Stadt! Super Beratung und tolles Ergebnis.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/photo-two-black-ceramical-hair-sinks-standing-beaty-salon_651396-960.jpg?_wi=1",
-          imageAlt: "elegant hair salon interior",
-        },
-        {
-          name: "Markus K.",
-          handle: "@mk",
-          testimonial: "Sehr professionell, ich komme immer gerne wieder.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182536.jpg",
-          imageAlt: "elegant hair salon interior",
-        },
-        {
-          name: "Laura S.",
-          handle: "@lauras",
-          testimonial: "Wundervoller Service, ich fühle mich wie neu.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-shaving-client-s-beard_23-2148353434.jpg",
-          imageAlt: "elegant hair salon interior",
-        },
-        {
-          name: "Tim P.",
-          handle: "@timp",
-          testimonial: "Schnell, präzise und sehr freundlich.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313063.jpg?_wi=1",
-          imageAlt: "elegant hair salon interior",
-        },
-        {
-          name: "Sarah W.",
-          handle: "@sw",
-          testimonial: "Meine erste Wahl für Farbe!",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-owner-hairdresser-salon_329181-1953.jpg?_wi=1",
-          imageAlt: "elegant hair salon interior",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Jetzt Termin vereinbaren",
-          href: "#contact",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/photo-two-black-ceramical-hair-sinks-standing-beaty-salon_651396-960.jpg?_wi=2"
-      mediaAnimation="blur-reveal"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/hairdresser-customer-talking-hair-salon_329181-1940.jpg",
-          alt: "Kunde 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg",
-          alt: "Kunde 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/family-car-salon-woman-buying-thecar-seat-little-african-girl-with-mther_1157-45043.jpg",
-          alt: "Kunde 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/female-hairdresser-styling-clients-hair_107420-94690.jpg",
-          alt: "Kunde 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-businesswoman-black-suit-putting-her-head-looks-tired_114579-15835.jpg",
-          alt: "Kunde 5",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Meisterhandwerk",
-        },
-        {
-          type: "text",
-          text: "Premium-Produkte",
-        },
-        {
-          type: "text",
-          text: "Wohlfühlmoment",
-        },
-        {
-          type: "text",
-          text: "Modernes Design",
-        },
-        {
-          type: "text",
-          text: "Individuelle Beratung",
-        },
-      ]}
             />
         </div>
 
         <div id="about" data-section="about">
-      <TextSplitAbout
+            <AboutMetric
-      useInvertedBackground={false}
+                title="Dein Friseur in Murr"
-      title="Über Haarzeit"
+                metrics={[
-      description={[
+                    { icon: MapPin, label: "Standort", value: "Hindenburgstr. 70" },
-        "Unsere Mission ist es, Deine natürliche Schönheit hervorzuheben.",
+                    { icon: User, label: "Erfahrung", value: "Meisterbetrieb" },
-        "Wir nutzen ausschließlich hochwertige Pflegeprodukte und nehmen uns Zeit für jeden Kunden.",
+                    { icon: Sparkles, label: "Service", value: "Premium-Pflege" }
-        "Dein Besuch bei uns soll eine Auszeit vom Alltag sein.",
                 ]}
+                metricsAnimation="slide-up"
+                useInvertedBackground={true}
             />
         </div>
 
         <div id="features" data-section="features">
-      <FeatureCardTwentyEight
+            <FeatureBorderGlow
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
                 features={[
-        {
+                    { icon: Scissors, title: "Haarschnitt", description: "Präzise Schnitte für jeden Typ." },
-          id: "1",
+                    { icon: Sparkles, title: "Farbe", description: "Moderne Färbetechniken & Balayage." },
-          title: "Haarschnitt",
+                    { icon: User, title: "Styling", description: "Perfektes Finish für jeden Anlass." }
-          subtitle: "Damen & Herren",
-          category: "Styling",
-          value: "Klassisch bis modern",
-        },
-        {
-          id: "2",
-          title: "Farbtechnik",
-          subtitle: "Balayage & Highlights",
-          category: "Farbe",
-          value: "Schonend & individuell",
-        },
-        {
-          id: "3",
-          title: "Pflegekur",
-          subtitle: "Intensivpflege",
-          category: "Gesundheit",
-          value: "Für gesundes Haar",
-        },
                 ]}
-      title="Unsere Services"
-      description="Von modernen Schnitten bis hin zu schonenden Färbetechniken bieten wir alles für Dein Haar."
-    />
-  </div>
-
-  <div id="products" data-section="products">
-      <ProductCardOne
                 animationType="slide-up"
-      textboxLayout="default"
+                title="Unsere Leistungen"
-      gridVariant="uniform-all-items-equal"
+                description="Wir nehmen uns Zeit für eine ausführliche Beratung, damit dein Haar deine Persönlichkeit unterstreicht."
+                textboxLayout="split"
                 useInvertedBackground={false}
-      products={[
-        {
-          id: "1",
-          name: "Shampoo Feuchtigkeit",
-          price: "24,90€",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313063.jpg?_wi=2",
-        },
-        {
-          id: "2",
-          name: "Conditioner Glanz",
-          price: "26,90€",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-cream-colored-bottle-plastic-shampoo-can-with-black-cap-isolated-pink-yellow-background-cosmetics-beauty-hair_140725-18102.jpg",
-        },
-        {
-          id: "3",
-          name: "Hitzeschutz Spray",
-          price: "19,90€",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-toilet-bag-still-life_23-2149879584.jpg",
-        },
-        {
-          id: "4",
-          name: "Haaröl Argan",
-          price: "29,90€",
-          imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-product-container-with-art-nouveau-inspired-sun-relief-background_23-2151420666.jpg",
-        },
-        {
-          id: "5",
-          name: "Styling Wax",
-          price: "18,90€",
-          imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-tube-product-with-gift-box-balloons-black-background_187299-46830.jpg",
-        },
-        {
-          id: "6",
-          name: "Locken-Creme",
-          price: "22,90€",
-          imageSrc: "http://img.b2bpic.net/free-photo/product-branding-packaging_23-2150965841.jpg",
-        },
-      ]}
-      title="Salon-Produkte"
-      description="Pflege Dein Haar auch zu Hause mit unseren exklusiven Produkten."
-    />
-  </div>
-
-  <div id="pricing" data-section="pricing">
-      <PricingCardEight
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "basis",
-          badge: "Basics",
-          price: "ab 45€",
-          subtitle: "Schnitt & Styling",
-          buttons: [
-            {
-              text: "Buchen",
-            },
-          ],
-          features: [
-            "Waschen",
-            "Schnitt",
-            "Finish",
-          ],
-        },
-        {
-          id: "farbe",
-          badge: "Farbe",
-          price: "ab 89€",
-          subtitle: "Haarschnitt & Farbe",
-          buttons: [
-            {
-              text: "Buchen",
-            },
-          ],
-          features: [
-            "Farbe",
-            "Schnitt",
-            "Pflege",
-          ],
-        },
-        {
-          id: "premium",
-          badge: "Premium",
-          price: "ab 149€",
-          subtitle: "Komplettpaket",
-          buttons: [
-            {
-              text: "Buchen",
-            },
-          ],
-          features: [
-            "Balayage",
-            "Schnitt",
-            "Intensivkur",
-          ],
-        },
-      ]}
-      title="Unsere Preise"
-      description="Transparente Preisgestaltung für erstklassige Qualität."
-    />
-  </div>
-
-  <div id="metrics" data-section="metrics">
-      <MetricCardSeven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "1",
-          value: "15+",
-          title: "Jahre Erfahrung",
-          items: [
-            "Profis",
-            "Handwerk",
-          ],
-        },
-        {
-          id: "2",
-          value: "5000+",
-          title: "Glückliche Kunden",
-          items: [
-            "Stammkunden",
-            "Vertrauen",
-          ],
-        },
-        {
-          id: "3",
-          value: "100%",
-          title: "Zufriedenheit",
-          items: [
-            "Qualität",
-            "Service",
-          ],
-        },
-      ]}
-      title="Haarzeit in Zahlen"
-      description="Erfahrung, die man sieht."
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Sarah",
-          role: "Kundin",
-          testimonial: "Immer ein tolles Erlebnis, sehr herzlich.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-owner-hairdresser-salon_329181-1953.jpg?_wi=2",
-        },
-        {
-          id: "2",
-          name: "Thomas",
-          role: "Stammkunde",
-          testimonial: "Der beste Schnitt seit langem.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-businesswoman-standing-white_114579-77666.jpg",
-        },
-        {
-          id: "3",
-          name: "Elena",
-          role: "Kundin",
-          testimonial: "Super Farbe und sehr entspannt.",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-attractive-young-man-showing-thumbup-praising-good-work-standing-light-blue-backgrou_1258-161401.jpg",
-        },
-        {
-          id: "4",
-          name: "Max",
-          role: "Kunde",
-          testimonial: "Schnell, sauber, kompetent.",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-bride-getting-ready_23-2149722037.jpg",
-        },
-        {
-          id: "5",
-          name: "Katja",
-          role: "Kundin",
-          testimonial: "Wunderschönes Ambiente, toller Service.",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229812.jpg",
-        },
-      ]}
-      title="Das sagen unsere Kunden"
-      description="Deine Zufriedenheit ist unsere beste Werbung."
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "1",
-          title: "Wie buche ich einen Termin?",
-          content: "Online über unser Kontaktformular oder telefonisch.",
-        },
-        {
-          id: "2",
-          title: "Bietet ihr Beratungsgespräche an?",
-          content: "Ja, wir beraten dich individuell vor jedem Schnitt.",
-        },
-        {
-          id: "3",
-          title: "Ist Kartenzahlung möglich?",
-          content: "Ja, wir akzeptieren alle gängigen Karten.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/young-business-owners-preparing-their-store_23-2149300882.jpg"
-      mediaAnimation="slide-up"
-      title="Häufige Fragen"
-      description="Hier findest du Antworten auf deine Fragen."
-      faqsAnimation="slide-up"
             />
         </div>
 
         <div id="contact" data-section="contact">
-      <ContactSplitForm
+            <ContactSplit
-      useInvertedBackground={false}
+                tag="Termin"
-      title="Buche deinen Termin"
+                title="Hindenburgstraße 70, Murr"
-      description="Lass uns zusammen deinen Look kreieren."
+                description="Komm vorbei oder schreib uns eine Nachricht. Wir freuen uns darauf, dich in der Hindenburgstraße 70 begrüßen zu dürfen!"
-      inputs={[
+                buttonText="Anfrage senden"
-        {
+                mediaPosition="right"
-          name: "name",
+                useInvertedBackground={true}
-          type: "text",
-          placeholder: "Dein Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "E-Mail",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "Was hast du geplant?",
-        rows: 4,
-        required: true,
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/china-stairs-stone-tiles-old-water_1417-577.jpg"
             />
         </div>
 
         <div id="footer" data-section="footer">
-      <FooterCard
+            <FooterSimple
-      logoText="Haarzeit"
+                columns={[
-      copyrightText="© 2025 Haarzeit der Friseur"
+                    { 
+                        title: "Adresse", 
+                        items: [{ label: "Hindenburgstraße 70, 71711 Murr" }] 
+                    },
+                    { 
+                        title: "Öffnungszeiten", 
+                        items: [{ label: "Nach Vereinbarung" }] 
+                    }
+                ]}
+                bottomLeftText="© 2025 Haarzeit, der Friseur"
+                bottomRightText="Alle Rechte vorbehalten"
             />
         </div>
       </ReactLenis>