Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -7,7 +7,7 @@ import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
@@ -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,18 +42,21 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitDualMedia
-      background={{ variant: "plain" }}
-      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"
-      buttons={[{ text: "View Portfolio", href: "#portfolio" }]}
-      mediaItems={[
-        { 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" }
+      background={{ variant: "sparkles-gradient" }}
+      title="Cinematic Car Edits That Turn Machines Into Art"
+      description="High-quality automotive edits, reels, and visual storytelling built for car lovers and performance enthusiasts"
+      tag="Professional Automotive Storytelling"
+      buttons={[
+        { text: "View My Edits", href: "#portfolio" },
+        { text: "Contact Me", href: "#contact" }
       ]}
-      mediaAnimation="slide-up"
+      mediaItems={[
+        { videoSrc: "https://www.w3schools.com/howto/rain.mp4?_wi=1", imageAlt: "Looping car montage drift" },
+        { videoSrc: "https://www.w3schools.com/howto/rain.mp4?_wi=2", imageAlt: "Cinematic night car shots" }
+      ]}
+      mediaAnimation="blur-reveal"
       rating={5}
-      ratingText="Based on 150+ stellar reviews"
+      ratingText="Trusted by performance enthusiasts"
       tagIcon={Sparkles}
     />
   </div>
@@ -62,16 +65,14 @@ export default function LandingPage() {
       <InlineImageSplitTextAbout
       useInvertedBackground={true}
       heading={[
-        { type: "text", content: "Turning Raw Footage into " },
-        { type: "image", src: "http://img.b2bpic.net/free-photo/professional-editor-using-retouching-software-photos-design-studio-with-photography-equipment-technology-media-artist-editing-pictures-with-computer-touch-screen-monitor_482257-34109.jpg", alt: "Edit workspace" },
-        { type: "text", content: " High-Velocity Art." },
+        { type: "text", content: "About SxprxEditz Edits: Transforming raw car footage into cinematic masterpieces." },
       ]}
     />
   </div>
 
   <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 +88,7 @@ export default function LandingPage() {
 
   <div id="features" data-section="features">
       <FeatureCardSeven
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
       useInvertedBackground={true}
       features={[
@@ -101,23 +102,23 @@ export default function LandingPage() {
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardEleven
-      animationType="slide-up"
+      <MetricCardSeven
+      animationType="blur-reveal"
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
-        { id: "m1", value: "1.2M+", title: "Combined Followers", description: "Across all client channels.", imageSrc: "http://img.b2bpic.net/free-psd/followers-notification-icon-with-number-320_314999-3870.jpg" },
-        { id: "m2", value: "500+", title: "Satisfied Clients", description: "Trusted globally.", imageSrc: "http://img.b2bpic.net/free-photo/rag-doll-word-success_1156-188.jpg" },
-        { id: "m3", value: "2000+", title: "Projects Completed", description: "Countless hours of editing.", imageSrc: "http://img.b2bpic.net/free-photo/paper-clips-keyboard-laptop-labels-wooden-desk_23-2148042069.jpg" },
+        { id: "m1", value: "50", title: "Followers", items: [] },
+        { id: "m2", value: "33", title: "Videos Uploaded", items: [] },
+        { id: "m3", value: "8", title: "Followed", items: [] },
       ]}
-      title="Our Impact"
-      description="Proven results for growing car channels."
+      title="My Stats"
+      description="Follow the growth journey of SxprxEditz."
     />
   </div>
 
   <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 +135,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 +169,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);