Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -14,16 +14,16 @@ import { Mail, Palette, Sparkles, Star, Zap } from 'lucide-react';
 export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="shift-hover"
-      defaultTextAnimation="entrance-slide"
-      borderRadius="rounded"
-      contentWidth="medium"
-      sizing="mediumLarge"
-      background="blurBottom"
-      cardStyle="solid"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="layered"
-      headingFontWeight="semibold"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="largeSizeMediumTitles"
+      background="aurora"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
@@ -48,12 +48,12 @@ export default function LandingPage() {
             { text: "View Portfolio", href: "#portfolio" },
             { text: "Get In Touch", href: "#contact" }
           ]}
-          buttonAnimation="slide-up"
-          background={{ variant: "radial-gradient" }}
+          buttonAnimation="blur-reveal"
+          background={{ variant: "sparkles-gradient" }}
           imageSrc="http://img.b2bpic.net/free-photo/code-testing-quality-assurance-done-computers-startup-workplace_482257-118649.jpg"
           imageAlt="Graphic design workspace"
-          mediaAnimation="slide-up"
-          frameStyle="card"
+          mediaAnimation="blur-reveal"
+          frameStyle="browser"
         />
       </div>
 
@@ -61,15 +61,15 @@ export default function LandingPage() {
         <TestimonialAboutCard
           tag="About Me"
           tagIcon={Sparkles}
-          tagAnimation="slide-up"
+          tagAnimation="blur-reveal"
           title="Creative Design Excellence"
           description="I'm a passionate graphic designer and video editor dedicated to bringing your brand to life with compelling visuals and engaging animations."
           subdescription="With years of experience in design and video production, I create custom solutions tailored to your unique needs and vision."
           icon={Palette}
           imageSrc="http://img.b2bpic.net/free-photo/chroma-key-pc-display-brick-wall-loft-room_482257-118699.jpg"
           imageAlt="Professional designer at work"
-          mediaAnimation="slide-up"
-          useInvertedBackground={false}
+          mediaAnimation="blur-reveal"
+          useInvertedBackground={true}
         />
       </div>
 
@@ -77,7 +77,7 @@ export default function LandingPage() {
         <FeatureCardTwentySeven
           tag="Services"
           tagIcon={Zap}
-          tagAnimation="slide-up"
+          tagAnimation="blur-reveal"
           title="What I Offer"
           description="Comprehensive design and editing solutions to elevate your brand and content"
           features={[
@@ -101,9 +101,9 @@ export default function LandingPage() {
             }
           ]}
           gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
+          animationType="blur-reveal"
           textboxLayout="default"
-          useInvertedBackground={false}
+          useInvertedBackground={true}
           buttons={[
             { text: "Explore Services", href: "#contact" }
           ]}
@@ -126,9 +126,9 @@ export default function LandingPage() {
             }
           ]}
           gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
+          animationType="blur-reveal"
           textboxLayout="default"
-          useInvertedBackground={false}
+          useInvertedBackground={true}
           carouselMode="buttons"
         />
       </div>
@@ -139,10 +139,10 @@ export default function LandingPage() {
           description="What my clients have to say about working with me"
           tag="Testimonials"
           tagIcon={Star}
-          tagAnimation="slide-up"
-          animationType="slide-up"
+          tagAnimation="blur-reveal"
+          animationType="depth-3d"
           textboxLayout="default"
-          useInvertedBackground={false}
+          useInvertedBackground={true}
           testimonials={[
             {
               id: "1",              name: "Sarah Johnson",              role: "Marketing Director",              company: "Creative Agency",              rating: 5,
@@ -177,14 +177,14 @@ export default function LandingPage() {
         <ContactSplit
           tag="Get In Touch"
           tagIcon={Mail}
-          tagAnimation="slide-up"
+          tagAnimation="blur-reveal"
           title="Ready to Create Something Amazing?"
           description="Let's discuss your next design or editing project. Get in touch today!"
-          background={{ variant: "animated-grid" }}
-          useInvertedBackground={false}
+          background={{ variant: "downward-rays-animated-grid" }}
+          useInvertedBackground={true}
           imageSrc="http://img.b2bpic.net/free-photo/close-up-young-business-team-working_23-2149153865.jpg"
           imageAlt="Contact workspace"
-          mediaAnimation="slide-up"
+          mediaAnimation="blur-reveal"
           mediaPosition="right"
           inputPlaceholder="Enter your email"
           buttonText="Send Message"
@@ -201,4 +201,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
-  --card: #ffffff;
-  --foreground: #0c1325;
-  --primary-cta: #0b07ff;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffff;
+  --primary-cta: #e34400;
   --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #0a0a0a;
   --secondary-cta-text: #0c1325;
-  --accent: #93b7ff;
-  --background-accent: #a8bae8;
+  --accent: #ff7b05;
+  --background-accent: #b8541e;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);