Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -16,16 +16,16 @@ import { Sparkles } from "lucide-react";
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="shift-hover"
+        defaultButtonVariant="hover-magnetic"
         defaultTextAnimation="reveal-blur"
-        borderRadius="rounded"
-        contentWidth="medium"
-        sizing="large"
-        background="fluid"
-        cardStyle="gradient-bordered"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="mediumLargeSizeLargeTitles"
+        background="noise"
+        cardStyle="glass-depth"
         primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="layered"
-        headingFontWeight="light"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
@@ -42,7 +42,7 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitDualMedia
-      background={{ variant: "plain" }}
+      background={{ variant: "sparkles-gradient" }}
       title="Cinematic Car Edits, Reimagined."
       description="Level up your brand with high-octane, professional video edits that command attention."
       tag="Trusted by 100+ car creators"
@@ -51,7 +51,7 @@ export default function LandingPage() {
         { imageSrc: "http://img.b2bpic.net/free-photo/people-driving-cars-city-street_23-2149092002.jpg", imageAlt: "Widebody car neon night" },
         { imageSrc: "http://img.b2bpic.net/free-photo/luxury-architecture-exterior-design_23-2151920950.jpg", imageAlt: "Luxury car silhouette" }
       ]}
-      mediaAnimation="slide-up"
+      mediaAnimation="blur-reveal"
       rating={5}
       ratingText="Based on 150+ stellar reviews"
       tagIcon={Sparkles}
@@ -71,7 +71,7 @@ export default function LandingPage() {
 
   <div id="portfolio" data-section="portfolio">
       <ProductCardTwo
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
@@ -87,7 +87,7 @@ export default function LandingPage() {
 
   <div id="features" data-section="features">
       <FeatureCardSeven
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
       useInvertedBackground={true}
       features={[
@@ -102,7 +102,7 @@ export default function LandingPage() {
 
   <div id="metrics" data-section="metrics">
       <MetricCardEleven
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
@@ -117,7 +117,7 @@ export default function LandingPage() {
 
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardOne
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={true}
@@ -134,12 +134,12 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactSplit
       useInvertedBackground={false}
-      background={{ variant: "plain" }}
+      background={{ variant: "sparkles-gradient" }}
       tag="Let's talk"
       title="Start Your Project"
       description="Ready to get edited? Send us your footage and let's make magic."
       imageSrc="http://img.b2bpic.net/free-photo/beautiful-shot-tree-reflected-car-s-side-mirror_181624-2966.jpg"
-      mediaAnimation="slide-up"
+      mediaAnimation="blur-reveal"
     />
   </div>
 
@@ -168,4 +168,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #020617;
-  --card: #0f172a;
-  --foreground: #e2e8f0;
-  --primary-cta: #c4d8f9;
+  --background: #000000;
+  --card: #0c0c0c;
+  --foreground: #ffffff;
+  --primary-cta: #106EFB;
   --primary-cta-text: #020617;
-  --secondary-cta: #041633;
+  --secondary-cta: #000000;
   --secondary-cta-text: #e2e8f0;
-  --accent: #2d30f3;
-  --background-accent: #1d4ed8;
+  --accent: #535353;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);