Update src/app/page.tsx

src/app/page.tsx

@@ -9,7 +9,7 @@ import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
-import { Award, Star, Users } from "lucide-react";
+import { Award, Star, Users, MessageCircle } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -17,34 +17,22 @@ export default function LandingPage() {
         defaultButtonVariant="hover-magnetic"
         defaultTextAnimation="entrance-slide"
         borderRadius="pill"
-        contentWidth="compact"
+        contentWidth="medium"
-        sizing="largeSmallSizeMediumTitles"
+        sizing="largeSizeMediumTitles"
-        background="floatingGradient"
+        background="noiseDiagonalGradient"
-        cardStyle="inset"
+        cardStyle="glass-elevated"
-        primaryButtonStyle="shadow"
+        primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="layered"
+        secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        headingFontWeight="bold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Preise", id: "pricing" },
-          name: "Preise",
+        { name: "Academy", id: "academy" },
-          id: "pricing",
+        { name: "Über uns", id: "about" },
-        },
+        { name: "Kontakt", id: "contact" },
-        {
-          name: "Academy",
-          id: "academy",
-        },
-        {
-          name: "Über uns",
-          id: "about",
-        },
-        {
-          name: "Kontakt",
-          id: "contact",
-        },
       ]}
       brandName="Casablanca Cosmetics"
     />
@@ -52,208 +40,104 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroLogoBillboard
-      background={{
+      background={{ variant: "glowing-orb" }}
-        variant: "glowing-orb",
-      }}
       logoText="CASABLANCA COSMETICS"
-      description="Gelsenkirchens exklusivstes Atelier für Ästhetik & Glow. Wo High-End Expertise auf herzliche Gastfreundschaft trifft."
+      description="Cinematische Ästhetik in Gelsenkirchen. Wir veredeln Ihre natürliche Schönheit mit flüssigem Gold & High-End Präzision."
       buttons={[
-        {
+        { text: "Termin Buchen", href: "#contact" },
-          text: "TERMIN BUCHEN",
+        { text: "Preisliste", href: "#pricing" },
-          href: "#contact",
-        },
-        {
-          text: "PREISLISTE ANSEHEN",
-          href: "#pricing",
-        },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/abstract-white-fog-darkness_23-2148101927.jpg"
+      imageSrc="https://images.unsplash.com/photo-1596462502278-27bfdc403348?q=80&w=1200&auto=format&fit=crop"
-      mediaAnimation="slide-up"
+      mediaAnimation="blur-reveal"
     />
   </div>
 
   <div id="pricing" data-section="pricing">
       <PricingCardThree
-      animationType="slide-up"
+      animationType="blur-reveal"
-      textboxLayout="split"
+      textboxLayout="split-description"
+      title="Exklusive Beauty Services"
+      description="Liquid Gold Standard für Ihre Hautpflege & Permanent Make-Up."
       useInvertedBackground={false}
       plans={[
         {
-          id: "pm",
+          id: "pm", badge: "Signature", name: "Permanent Make-Up", price: "ab 170€", buttons: [{ text: "Buchen", href: "#contact" }],
-          name: "Permanent Make-Up",
+          features: ["Microblading", "Powderbrows", "Kombibrows", "Lippen Pigmentierung", "Lidstrich"]
-          price: "ab 170€",
-          buttons: [
-            {
-              text: "Anfragen",
-              href: "#contact",
-            },
-          ],
-          features: [
-            "Microblading: 199€",
-            "Powderbrows: 199€",
-            "Kombibrows: 299€",
-            "Lippen: 299€",
-            "Lidstrich: 170€-300€",
-          ],
         },
         {
-          id: "skin",
+          id: "skin", badge: "Gold Tier", name: "Skin Clinic", price: "ab 60€", buttons: [{ text: "Buchen", href: "#contact" }],
-          name: "Skin Clinic",
+          features: ["Hydrafacial", "Microneedling RF", "BioRePeel", "Tiefenreinigung"]
-          price: "ab 60€",
-          buttons: [
-            {
-              text: "Anfragen",
-              href: "#contact",
-            },
-          ],
-          features: [
-            "Hydrafacial: 120€",
-            "Microneedling RF: 200€",
-            "Green Peel: 80€-150€",
-            "BioRePeel: 145€",
-            "Basis: 60€",
-          ],
         },
         {
-          id: "laser",
+          id: "laser", badge: "Pro", name: "Laser Studio", price: "ab 50€", buttons: [{ text: "Buchen", href: "#contact" }],
-          name: "Laser (Haarentfernung)",
+          features: ["Ganzkörper", "Beine & Rücken", "Gesicht", "Präzisions-Laser"]
-          price: "ab 50€",
+        }
-          buttons: [
-            {
-              text: "Anfragen",
-              href: "#contact",
-            },
-          ],
-          features: [
-            "Ganzkörper: 250€",
-            "Beine: 99€",
-            "Rücken: 99€",
-            "Brust/Bauch: 110€",
-            "Gesicht: 50€-60€",
-          ],
-        },
       ]}
-      title="Unsere Dienstleistungen"
-      description="Premium Behandlungen in Gelsenkirchen"
     />
   </div>
 
   <div id="academy" data-section="academy">
       <FeatureCardTwentyOne
-      useInvertedBackground={false}
+      title="Casablanca Pro Academy"
-      title="Pro Academy"
+      description="Lernen Sie die Kunst der High-End Ästhetik. Zertifizierte Masterclasses für Microblading, Lash-Art & PMU direkt in Gelsenkirchen."
-      description="Werde selbst zum Beauty-Experten. Lerne von den Besten in NRW mit offizieller Zertifizierung in Microblading, Lashes und PMU."
       accordionItems={[
-        {
+        { id: "a1", title: "PMU Masterclass", content: "Von den Grundlagen bis zur High-End Pigmentierung." },
-          id: "a1",
+        { id: "a2", title: "Laser Zertifizierung", content: "Sichere Anwendung modernster Laser-Technologien." },
-          title: "Microblading Masterclass",
+        { id: "a3", title: "Business-Setup", content: "Wie Sie ein profitables Beauty-Atelier aufbauen." }
-          content: "Lerne die Kunst des manuellen Härchenzeichnens.",
-        },
-        {
-          id: "a2",
-          title: "Lash Lifting Training",
-          content: "Perfekte Schwünge und professionelle Färbetechniken.",
-        },
-        {
-          id: "a3",
-          title: "PMU Zertifizierung",
-          content: "Sicherheit und Präzision in der Pigmentierung.",
-        },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/outdoor-portrait-woman-white-wedding-dress-sitting-near-blue-swimming-pool-with-flowers-orchid_343596-191.jpg"
+      imageSrc="https://images.unsplash.com/photo-1560066984-138dadb4c035?q=80&w=800&auto=format&fit=crop"
-      mediaAnimation="slide-up"
+      mediaPosition="right"
+      mediaAnimation="blur-reveal"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="about" data-section="about">
       <AboutMetric
-      useInvertedBackground={false}
+      title="Vertrauen in Qualität"
-      title="Expertise mit Herzlichkeit"
       metrics={[
-        {
+        { icon: Star, label: "Google Reviews", value: "5.0 ★" },
-          icon: Star,
+        { icon: Users, label: "Zufriedene Kunden", value: "500+" },
-          label: "Google Reviews",
+        { icon: Award, label: "Zertifikate", value: "Expert" }
-          value: "5.0 ★",
-        },
-        {
-          icon: Users,
-          label: "Zufriedene Kunden",
-          value: "133+",
-        },
-        {
-          icon: Award,
-          label: "Professionalität",
-          value: "Top",
-        },
       ]}
       metricsAnimation="slide-up"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactSplitForm
-      useInvertedBackground={false}
+      title="Ihre Beratung"
-      title="JETZT TERMIN BUCHEN"
+      description="Bismarckstraße 57, Gelsenkirchen. Kontaktieren Sie uns für Ihr exklusives Treatment."
-      description="Bismarckstraße 57, 45881 Gelsenkirchen. Kontaktieren Sie uns für Ihr individuelles Beratungsgespräch."
       inputs={[
-        {
+        { name: "name", type: "text", placeholder: "Ihr Name", required: true },
-          name: "name",
+        { name: "email", type: "email", placeholder: "Ihre E-Mail", required: true }
-          type: "text",
-          placeholder: "Ihr Name",
-        },
-        {
-          name: "phone",
-          type: "tel",
-          placeholder: "Ihre Telefonnummer",
-        },
       ]}
-      textarea={{
+      textarea={{ name: "message", placeholder: "Ihr Anliegen", rows: 4 }}
-        name: "message",
+      buttonText="Anfrage absenden"
-        placeholder: "Ihr Wunschtermin oder Fragen",
+      imageSrc="https://images.unsplash.com/photo-1612287230202-1ff6d8536bdf?q=80&w=800&auto=format&fit=crop"
-      }}
+      useInvertedBackground={false}
-      imageSrc="http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-with-colorful-face-make-up_23-2149580853.jpg"
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterSimple
       columns={[
-        {
+        { title: "Navigation", items: [{ label: "Preise", href: "#pricing" }, { label: "Academy", href: "#academy" }] },
-          title: "Casablanca Cosmetics",
+        { title: "Standort", items: [{ label: "Bismarckstraße 57, Gelsenkirchen" }, { label: "Tel: 0176 61853287" }] }
-          items: [
-            {
-              label: "Bismarckstraße 57",
-              href: "#",
-            },
-            {
-              label: "45881 Gelsenkirchen",
-              href: "#",
-            },
-            {
-              label: "Tel: 0176 61853287",
-              href: "tel:+4917661853287",
-            },
-          ],
-        },
-        {
-          title: "Öffnungszeiten",
-          items: [
-            {
-              label: "Mo–Fr: 10:00 – 18:00",
-              href: "#",
-            },
-            {
-              label: "Sa: 10:00 – 15:00",
-              href: "#",
-            },
-          ],
-        },
       ]}
-      bottomLeftText="© 2024 Casablanca Cosmetics"
+      bottomLeftText="© 2025 Casablanca Cosmetics"
       bottomRightText="Datenschutz | Impressum"
     />
   </div>
+
+  <a 
+    href="https://wa.me/4917661853287" 
+    className="fixed bottom-8 right-8 z-50 bg-[#25D366] text-white p-4 rounded-full shadow-2xl flex items-center justify-center hover:scale-110 transition-transform"
+  >
+    <MessageCircle size={28} />
+  </a>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
+  --background: #000000;
-  --card: #1a1a1a;
+  --card: #0a0a0a;
-  --foreground: #ffffff;
+  --foreground: #f5f5f5;
   --primary-cta: #D4AF37;
   --primary-cta-text: #000000;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #2a220a;
   --secondary-cta-text: #ffffff;
   --accent: #D4AF37;
-  --background-accent: #2a220a;
+  --background-accent: #1a1a1a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);