Update src/app/styles/variables.css

src/app/page.tsx

@@ -16,16 +16,16 @@ import { Award, Sparkles, Zap, BarChart3, Users, MessageSquare, HelpCircle, Star
 export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="icon-arrow"
+      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="reveal-blur"
+      defaultTextAnimation="background-highlight"
-      borderRadius="soft"
+      borderRadius="rounded"
-      contentWidth="compact"
+      contentWidth="medium"
-      sizing="mediumSizeLargeTitles"
+      sizing="largeSizeMediumTitles"
-      background="floatingGradient"
+      background="aurora"
-      cardStyle="outline"
+      cardStyle="glass-elevated"
-      primaryButtonStyle="shadow"
+      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
+      secondaryButtonStyle="glass"
-      headingFontWeight="medium"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarStyleApple
@@ -48,11 +48,11 @@ export default function LandingPage() {
             { text: "Explore Services", href: "#services" }
           ]}
           buttonAnimation="slide-up"
-          background={{ variant: "sparkles-gradient" }}
+          background={{ variant: "radial-gradient" }}
           imageSrc="http://img.b2bpic.net/free-photo/front-view-hairstilyst-giving-haircut_23-2148506295.jpg"
           imageAlt="LABA Barbershop Interior"
           mediaAnimation="blur-reveal"
-          frameStyle="card"
+          frameStyle="browser"
           ariaLabel="LABA Barbershop Hero Section"
         />
       </div>
@@ -236,7 +236,7 @@ export default function LandingPage() {
             { text: "Email: info@lababarbershop.com", href: "mailto:info@lababarbershop.com" },
             { text: "Visit Us", href: "#" }
           ]}
-          background={{ variant: "gradient-bars" }}
+          background={{ variant: "downward-rays-animated" }}
           useInvertedBackground={false}
           ariaLabel="LABA Barbershop Contact Section"
         />

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
+  --background: #0a0f1a;
-  --card: #ffffff;
+  --card: #131820;
-  --foreground: #1b0c25;
+  --foreground: #e6f0ff;
-  --primary-cta: #1b0c25;
+  --primary-cta: #d4af37;
   --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #1a2234;
   --secondary-cta-text: #1b0c25;
-  --accent: #ff93e4;
+  --accent: #c9a961;
-  --background-accent: #e8a8c3;
+  --background-accent: #2d5a8c;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);