Bob AI: i dont like this hero section

Merge version_2 into main

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import TextAbout from '@/components/sections/about/TextAbout';
 import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
@@ -53,32 +53,27 @@ export default function HomePage() {
       </div>
 
       <div id="hero-section" data-section="hero-section">
-        <HeroCentered
-          title="Welcome to the Computer Club"
-          description="Join a vibrant community of tech enthusiasts and innovators. Together, we explore cutting-edge technologies, collaborate on exciting projects, and grow as developers and creators."
-          background={{ variant: "sparkles-gradient" }}
-          avatars={[
-            { src: "http://img.b2bpic.net/free-photo/portrait-young-handsome-business-man_1303-19609.jpg", alt: "Club member 1" },
-            { src: "http://img.b2bpic.net/free-photo/close-up-smiley-man-library_23-2149204750.jpg", alt: "Club member 2" },
-            { src: "http://img.b2bpic.net/free-photo/portrait-exhausted-workaholic-man-manager-typing-financial-strategy-using-laptop-computer-while-sitting-desk-table-business-company-office_482257-2321.jpg", alt: "Club member 3" },
-            { src: "http://img.b2bpic.net/free-photo/vertical-shot-happy-smiling-woman-sitting-cafe-with-laptop_197531-22982.jpg", alt: "Club member 4" }
+        <HeroSplitKpi
+          title="Tech Club by the Numbers"
+          description="A thriving community of developers, designers, and innovators pushing the boundaries of technology."
+          background={{ variant: "grid-gradient" }}
+          kpiItems={[
+            { label: "Active Members", value: "150+" },
+            { label: "Projects Completed", value: "45" },
+            { label: "Events Hosted", value: "32" },
+            { label: "Years Running", value: "8" }
           ]}
-          avatarText="Join 150+ members"
+          mediaContent={{
+            type: "image",
+            src: "http://img.b2bpic.net/free-photo/side-view-friends-winning-videogame_23-2149349984.jpg",
+            alt: "Tech Club members collaborating"
+          }}
           buttons={[
-            { text: "Get Started", href: "/contact" },
-            { text: "Learn More", href: "/about" }
+            { label: "Join Us Today", href: "/contact", dataWebildId: "hero_join_btn" },
+            { label: "View Projects", href: "/projects", dataWebildId: "hero_projects_btn" }
           ]}
           buttonAnimation="slide-up"
-          marqueeItems={[
-            { type: "text-icon", text: "Web Development", icon: Code },
-            { type: "text-icon", text: "AI & Machine Learning", icon: Brain },
-            { type: "text-icon", text: "Mobile Apps", icon: Smartphone },
-            { type: "text-icon", text: "Cloud Computing", icon: Cloud },
-            { type: "text-icon", text: "Cybersecurity", icon: Shield },
-            { type: "text-icon", text: "Game Development", icon: Gamepad2 }
-          ]}
-          marqueeSpeed={25}
-          showMarqueeCard={true}
+          enableKpiAnimation={true}
         />
       </div>
 

src/app/styles/variables.css

@@ -3,22 +3,22 @@
   /* --vw is set by ThemeProvider */
 
   /* --background: #ffffff;;
-  --card: #f9f9f9;;
-  --foreground: #000f06e6;;
-  --primary-cta: #0a7039;;
-  --secondary-cta: #f9f9f9;;
-  --accent: #e2e2e2;;
-  --background-accent: #c4c4c4;; */
+  --card: #2d2d2d;;
+  --foreground: #e8e8e8;;
+  --primary-cta: #4ade80;;
+  --secondary-cta: #2d2d2d;;
+  --accent: #404040;;
+  --background-accent: #3a3a3a;; */
 
-  --background: #ffffff;;
-  --card: #f9f9f9;;
-  --foreground: #000f06e6;;
-  --primary-cta: #0a7039;;
+  --background: #1a1a1a;;
+  --card: #2d2d2d;;
+  --foreground: #e8e8e8;;
+  --primary-cta: #4ade80;;
   --primary-cta-text: #ffffff;;
-  --secondary-cta: #f9f9f9;;
+  --secondary-cta: #2d2d2d;;
   --secondary-cta-text: #000f06e6;;
-  --accent: #e2e2e2;;
-  --background-accent: #c4c4c4;;
+  --accent: #404040;;
+  --background-accent: #3a3a3a;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);