Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,14 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import { Dribbble, Instagram, Linkedin, Mail, Palette } from "lucide-react";
+import { Dribbble, Instagram, Linkedin, Mail, Palette, TrendingUp } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -41,15 +41,20 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroOverlay
+        <HeroSplitKpi
           title="Visual Design That Moves People"
           description="Crafting bold, meaningful designs that elevate brands and create lasting impressions"
           tag="Creative Studio"
+          background={{ variant: "plain" }}
+          kpis={[
+            { value: "8+", label: "Years Experience" },
+            { value: "150+", label: "Projects Completed" },
+            { value: "100%", label: "Client Satisfaction" }
+          ]}
+          enableKpiAnimation={true}
           imageSrc="http://img.b2bpic.net/free-photo/workplace-with-laptop_23-2147651756.jpg"
           imageAlt="Creative workspace with design tools"
-          textPosition="bottom-left"
+          mediaAnimation="slide-up"
-          showBlur={true}
-          showDimOverlay={true}
           buttons={[
             { text: "View Portfolio", href: "#portfolio" },
             { text: "Get in Touch", href: "#contact" }

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #e3deea;;
+  /* --background: #060000;;
-  --card: #ffffff;;
+  --card: #1d0d0d;;
-  --foreground: #1f2027;;
+  --foreground: #ffe6e6;;
-  --primary-cta: #627dc6;;
+  --primary-cta: #ff3d4a;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #1f0a0a;;
-  --accent: #627dc6;;
+  --accent: #7b2d2d;;
-  --background-accent: #627dc6;; */
+  --background-accent: #b8111f;; */
 
-  --background: #e3deea;;
+  --background: #060000;;
-  --card: #ffffff;;
+  --card: #1d0d0d;;
-  --foreground: #1f2027;;
+  --foreground: #ffe6e6;;
-  --primary-cta: #627dc6;;
+  --primary-cta: #ff3d4a;;
   --primary-cta-text: #e3deea;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #1f0a0a;;
   --secondary-cta-text: #1f2027;;
-  --accent: #627dc6;;
+  --accent: #7b2d2d;;
-  --background-accent: #627dc6;;
+  --background-accent: #b8111f;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);