Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,226 +2,147 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
+import ContactText from '@/components/sections/contact/ContactText';
-import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import FooterCard from '@/components/sections/footer/FooterCard';
-import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
+import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
+import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import { Sparkles, Star, User, Zap } from "lucide-react";
 
-export default function LandingPage() {
+export default function LuxurySalonPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="directional-hover"
+        defaultButtonVariant="elastic-effect"
         defaultTextAnimation="reveal-blur"
         borderRadius="pill"
-        contentWidth="mediumSmall"
+        contentWidth="mediumLarge"
         sizing="largeSizeMediumTitles"
         background="noiseDiagonalGradient"
         cardStyle="glass-depth"
-        primaryButtonStyle="flat"
+        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="layered"
+        secondaryButtonStyle="glass"
-        headingFontWeight="bold"
+        headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarStyleApple
+          <NavbarStyleFullscreen
-      navItems={[
+            navItems={[
-        { name: "Home", id: "hero" },
+              { name: "Home", id: "hero" },
-        { name: "Services", id: "services" },
+              { name: "Services", id: "services" },
-        { name: "About", id: "about" },
+              { name: "About", id: "about" },
-        { name: "Booking", id: "contact" },
+              { name: "Contact", id: "contact" }
-      ]}
+            ]}
-      brandName="Aura Luxury"
+            brandName="AURA LUXURY"
-    />
+          />
-  </div>
+        </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroSplitDualMedia
+          <HeroSplitDoubleCarousel
-      background={{ variant: "sparkles-gradient" }}
+            title="Transcendent Beauty"
-      title="Premium Beauty Experience"
+            description="A sanctuary of refined elegance where artistry meets serenity. Experience the pinnacle of modern luxury."
-      description="Indulge in unparalleled elegance and sophisticated care. Our team of world-class stylists and aestheticians create moments of pure luxury designed specifically for you."
+            background={{ variant: "sparkles-gradient" }}
-      tag="EXCLUSIVITY REDEFINED"
+            leftCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/sensual-glamour-portrait-beautiful-woman-model-with-fresh-daily-makeup-with-dark-red-lips-color-clean-healthy-skin-face-studio-lights_158538-14321.jpg" }]}
-      buttons={[
+            rightCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-spa-massage-wellness-hotel-suite-with-bathtub_105762-2027.jpg" }]}
-        { text: "Jetzt Termin buchen", href: "#contact" },
+            tag="AURA SIGNATURE"
-      ]}
+            tagIcon={Sparkles}
-      mediaItems={[
+          />
-        {
+        </div>
-          imageSrc: "http://img.b2bpic.net/free-photo/sensual-glamour-portrait-beautiful-woman-model-with-fresh-daily-makeup-with-dark-red-lips-color-clean-healthy-skin-face-studio-lights_158538-14321.jpg",          imageAlt: "Luxury Salon Hero"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-spa-massage-wellness-hotel-suite-with-bathtub_105762-2027.jpg",          imageAlt: "Luxury Salon Interior"}
-      ]}
-      mediaAnimation="blur-reveal"
-      rating={5}
-      ratingText="Top-rated by our elite clientele"
-    />
-  </div>
 
-  <div id="about" data-section="about">
+        <div id="about" data-section="about">
-      <MetricSplitMediaAbout
+          <InlineImageSplitTextAbout
-      useInvertedBackground={true}
+            heading={[{ type: "text", content: "The Aura Distinction" }]}
-      title="Our Signature Philosophy"
+            useInvertedBackground={true}
-      description="With over two decades of excellence, Aura Luxury blends precision artistry with soulful relaxation. We treat every client as a masterpiece, ensuring an environment where beauty transcends aesthetics."
+          />
-      metrics={[
+        </div>
-        { value: "15+", title: "Years of Prestige" },
-        { value: "20k", title: "Happy Clients" },
-        { value: "100%", title: "Pure Quality" },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/professional-female-hairdresser-drying-woman-s-hair-styling-using-blow-dryer-hairdressing-saloon-salon_231208-10714.jpg"
-      imageAlt="Our Stylists"
-      mediaAnimation="slide-up"
-      metricsAnimation="slide-up"
-    />
-  </div>
 
-  <div id="services" data-section="services">
+        <div id="services" data-section="services">
-      <FeatureCardTwelve
+          <FeatureCardTwentySeven
-      animationType="slide-up"
+            title="Curated Rituals"
-      textboxLayout="split"
+            description="Elite services tailored to your aesthetic aspirations."
-      useInvertedBackground={false}
+            animationType="blur-reveal"
-      features={[
+            textboxLayout="split"
-        {
+            useInvertedBackground={false}
-          id: "1",          label: "Luxury Styling",          title: "Hair & Scalp Care",          items: [
+            features={[
-            "Executive Cut & Style",            "Bespoke Coloring",            "Keratin Therapy"],
+              { id: "s1", title: "Bespoke Styling", descriptions: ["Precision cut and tailored texture."] },
-        },
+              { id: "s2", title: "Rejuvenation Therapy", descriptions: ["Deep hydrating scalp treatments."] }
-        {
+            ]}
-          id: "2",          label: "Junior VIP",          title: "Kids Services",          items: [
+          />
-            "First Haircut Experience",            "Trend Styling",            "Gentle Care"],
+        </div>
-        },
-        {
-          id: "3",          label: "Skin Glow",          title: "Facial & Makeup",          items: [
-            "Glow Enhancing Facials",            "Red Carpet Makeup",            "Skincare Consultations"],
-        },
-      ]}
-      title="Exquisite Salon Services"
-      description="Discover our curated collection of professional treatments designed for the modern lifestyle."
-    />
-  </div>
 
-  <div id="products" data-section="products">
+        <div id="products" data-section="products">
-      <ProductCardTwo
+           <ProductCardFour
-      animationType="slide-up"
+             gridVariant="uniform-all-items-equal"
-      textboxLayout="default"
+             animationType="blur-reveal"
-      gridVariant="uniform-all-items-equal"
+             textboxLayout="split"
-      useInvertedBackground={true}
+             useInvertedBackground={false}
-      products={[
+             title="Aura Elixir"
-        {
+             description="Our most potent, gold-infused radiance serum."
-          id: "p1",          brand: "Aura",          name: "Signature Serum",          price: "€89",          rating: 5,
+             products={[
-          reviewCount: "1.2k",          imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-pump-bottle-mockup-white_187299-48006.jpg"},
+               { id: "p1", name: "Aura Elixir", price: "€180", variant: "Standard", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-pump-bottle-mockup-white_187299-48006.jpg?_wi=1" },
-        {
+               { id: "p2", name: "Radiance Oil", price: "€120", variant: "Standard", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-pump-bottle-mockup-white_187299-48006.jpg?_wi=2" },
-          id: "p2",          brand: "Aura",          name: "Radiance Oil",          price: "€75",          rating: 5,
+               { id: "p3", name: "Hydra Serum", price: "€140", variant: "Standard", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-pump-bottle-mockup-white_187299-48006.jpg?_wi=3" }
-          reviewCount: "840",          imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-tube-product-with-gift-box-balloons-black-background_187299-46830.jpg"},
+             ]}
-        {
+           />
-          id: "p3",          brand: "Aura",          name: "Deep Hydrate Cream",          price: "€120",          rating: 5,
+        </div>
-          reviewCount: "2.1k",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-natural-cosmetics-concept_23-2148578623.jpg"},
-      ]}
-      title="Premium Rituals"
-      description="Extend your salon glow with our hand-selected professional care line."
-    />
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
+        <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
+          <TestimonialCardSix
-      useInvertedBackground={false}
+            title="Client Echoes"
-      testimonials={[
+            description="What our elite clients say."
-        { id: "1", name: "Sophie Müller", imageSrc: "http://img.b2bpic.net/free-photo/stylish-businesswoman-posing-with-cup-coffee_23-2147670333.jpg" },
+            animationType="slide-up"
-        { id: "2", name: "Elena Rossi", imageSrc: "http://img.b2bpic.net/free-photo/portrait-lovely-glamorous-lady_23-2148398559.jpg" },
+            textboxLayout="split"
-        { id: "3", name: "Marcus Schmidt", imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-woman-smiling-looking-mirror-beauty-salon_176420-4473.jpg" },
+            useInvertedBackground={false}
-        { id: "4", name: "Julia Weber", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-done-beauty-salon_23-2149167393.jpg" },
+            testimonials={[{ id: "t1", name: "Elena V.", handle: "@elena_v", testimonial: "Pure perfection in every detail." }]}
-        { id: "5", name: "Sarah Klein", imageSrc: "http://img.b2bpic.net/free-photo/two-fashionable-attractive-models-with-stylish-makeup-luxury-coiffure-having-fun-together-haidresser-salon_197531-3688.jpg" },
+          />
-      ]}
+        </div>
-      cardTitle="Client Elegance"
-      cardTag="LOVE FROM CLIENTS"
-      cardAnimation="slide-up"
-    />
-  </div>
 
-  <div id="pricing" data-section="pricing">
+        <div id="pricing" data-section="pricing">
-      <PricingCardFive
+          <PricingCardNine
-      animationType="slide-up"
+            title="Investment in Aura"
-      textboxLayout="split"
+            description="Tailored pricing for bespoke experiences."
-      useInvertedBackground={true}
+            animationType="scale-rotate"
-      plans={[
+            textboxLayout="split"
-        {
+            useInvertedBackground={false}
-          id: "plan1",          tag: "Essentials",          price: "€85",          period: "Session",          description: "Classic hair care refresh.",          button: { text: "Book Now" },
+            plans={[
-          featuresTitle: "Included",          features: ["Consultation", "Cut & Blowdry", "Scalp Massage"],
+              { id: "p1", title: "Essence", price: "€150", period: "/session", features: ["Styling", "Hydration"], button: { text: "Reserve" } }
-        },
+            ]}
-        {
+          />
-          id: "plan2",          tag: "Premium",          price: "€160",          period: "Session",          description: "The ultimate transformation.",          button: { text: "Book Now" },
+        </div>
-          featuresTitle: "Included",          features: ["Coloring", "Gloss Treatment", "Repair Mask"],
-        },
-        {
-          id: "plan3",          tag: "Elite",          price: "€280",          period: "Package",          description: "Total beauty immersion.",          button: { text: "Book Now" },
-          featuresTitle: "Included",          features: ["Full Color", "Facial Treatment", "Luxury Blowdry"],
-        },
-      ]}
-      title="Investment in Yourself"
-      description="Standard pricing for our most requested signature experiences."
-    />
-  </div>
 
-  <div id="metrics" data-section="metrics">
+        <div id="metrics" data-section="metrics">
-      <MetricCardSeven
+          <MetricCardThree
-      animationType="depth-3d"
+            title="Salon Impact"
-      textboxLayout="default"
+            description="Measurable excellence in luxury care."
-      useInvertedBackground={false}
+            animationType="depth-3d"
-      metrics={[
+            textboxLayout="split"
-        { id: "m1", value: "98%", title: "Client Satisfaction", items: ["Consistent luxury reviews", "Repeat booking rate"] },
+            useInvertedBackground={false}
-        { id: "m2", value: "12k", title: "Styles Created", items: ["Professional hair styling", "Makeover experts"] },
+            metrics={[
-        { id: "m3", value: "45+", title: "Awards Won", items: ["Local salon honors", "International style awards"] },
+              { id: "m1", icon: Star, title: "Excellence Rating", value: "5.0" },
-      ]}
+              { id: "m2", icon: User, title: "Elite Clients", value: "10k+" }
-      title="Achievements"
+            ]}
-      description="Reflecting on our standard of excellence."
+          />
-    />
+        </div>
-  </div>
 
-  <div id="contact" data-section="contact">
+        <div id="contact" data-section="contact">
-      <ContactSplit
+          <ContactText
-      useInvertedBackground={true}
+            text="Join our exclusive mailing list for private booking access."
-      background={{ variant: "sparkles-gradient" }}
+            background={{ variant: "sparkles-gradient" }}
-      tag="CONTACT US"
+            useInvertedBackground={false}
-      title="Book Your Visit"
+          />
-      description="Ready to experience the Aura? Secure your slot today."
+        </div>
-      imageSrc="http://img.b2bpic.net/free-photo/home-interior-design-composition_23-2148986633.jpg"
-      mediaPosition="right"
-      inputPlaceholder="Enter your email for appointment"
-      buttonText="Jetzt Termin buchen"
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterMedia
+          <FooterCard
-      imageSrc="http://img.b2bpic.net/free-photo/rendering-elegant-neoclassical-interior_23-2151059693.jpg"
+            logoText="AURA LUXURY"
-      logoText="AURA LUXURY"
+            socialLinks={[{ icon: Zap, href: "#", ariaLabel: "Instagram" }]}
-      columns={[
+          />
-        {
+        </div>
-          title: "Services",          items: [
-            { label: "Hair Styling", href: "#services" },
-            { label: "Kids Salon", href: "#services" },
-            { label: "Facial Care", href: "#services" },
-          ],
-        },
-        {
-          title: "Company",          items: [
-            { label: "About Us", href: "#about" },
-            { label: "Careers", href: "#" },
-            { label: "Privacy", href: "#" },
-          ],
-        },
-        {
-          title: "Legal",          items: [
-            { label: "Terms", href: "#" },
-            { label: "Imprint", href: "#" },
-          ],
-        },
-      ]}
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}