Update src/app/styles/variables.css

Merge version_2 into main

src/app/layout.tsx

@@ -1411,4 +1411,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
-import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
 import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
 import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
 import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
@@ -10,7 +10,7 @@ import TestimonialCardTwelve from "@/components/sections/testimonial/Testimonial
 import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
 import ContactSplit from "@/components/sections/contact/ContactSplit";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Zap, Code, Lightbulb, Users, Trophy, Users as UsersIcon, Sparkles, Award, Github, Linkedin, Heart, TrendingUp, Calendar, Smile, Mail } from "lucide-react";
+import { Zap, Code, Lightbulb, Users, Trophy, Award, Github, Linkedin, Heart, TrendingUp, Calendar, Smile, Mail } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -40,9 +40,9 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardDashboard
+        <HeroSplitKpi
           title="Join Our Computer Club Community"
-          description="Connect with passionate developers, learn cutting-edge technologies, and build amazing projects together. From beginners to experts, everyone is welcome."
+          description="Connect with passionate developers, learn cutting-edge technologies, and build amazing projects together."
           tag="Tech Community"
           tagIcon={Zap}
           tagAnimation="slide-up"
@@ -52,60 +52,22 @@ export default function LandingPage() {
           ]}
           buttonAnimation="slide-up"
           background={{ variant: "sparkles-gradient" }}
-          dashboard={{
-            title: "Club Highlights",            logoIcon: Code,
-            imageSrc: "http://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg?_wi=1",            searchPlaceholder: "Search our programs...",            sidebarItems: [
-              { icon: Code, active: true },
-              { icon: Lightbulb },
-              { icon: Users }
-            ],
-            buttons: [
-              { text: "Members", href: "team" },
-              { text: "Projects", href: "features" }
-            ],
-            stats: [
-              {
-                title: "Active Members",                values: [45, 52, 68],
-                description: "Growing community"
-              },
-              {
-                title: "Projects",                values: [12, 18, 24],
-                description: "Completed & ongoing"
-              },
-              {
-                title: "Events",                values: [8, 15, 22],
-                description: "Workshops & meetups"
-              }
-            ],
-            chartTitle: "Member Growth",            chartData: [
-              { value: 30 },
-              { value: 45 },
-              { value: 52 },
-              { value: 68 },
-              { value: 75 }
-            ],
-            listTitle: "Recent Activities",            listItems: [
-              {
-                icon: Trophy,
-                title: "Won Regional Hackathon",                status: "Celebrated"
-              },
-              {
-                icon: Code,
-                title: "AI Workshop Series",                status: "In Progress"
-              },
-              {
-                icon: Users,
-                title: "New Member Orientation",                status: "Scheduled"
-              }
-            ]
-          }}
+          imageSrc="http://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg?_wi=1"
+          imageAlt="Computer Club workspace"
+          mediaAnimation="slide-up"
+          enableKpiAnimation={true}
+          kpis={[
+            { value: "68", label: "Active Members" },
+            { value: "24", label: "Projects Completed" },
+            { value: "22", label: "Events Held" }
+          ]}
         />
       </div>
 
       <div id="about" data-section="about">
         <MetricSplitMediaAbout
           tag="Who We Are"
-          tagIcon={UsersIcon}
+          tagIcon={Users}
           tagAnimation="slide-up"
           title="Fostering Tech Excellence & Innovation"
           description="Our Computer Club is a dynamic community of developers, designers, and tech enthusiasts dedicated to learning, sharing knowledge, and creating innovative solutions together. We organize workshops, hackathons, and collaborative projects to help members grow their skills and network with peers."
@@ -126,7 +88,7 @@ export default function LandingPage() {
           title="Our Programs & Activities"
           description="Discover the diverse opportunities available to our members"
           tag="What We Offer"
-          tagIcon={Sparkles}
+          tagIcon={Zap}
           tagAnimation="slide-up"
           features={[
             {
@@ -292,4 +254,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #f7f6f7;;
-  --card: #ffffff;;
-  --foreground: #032419;;
-  --primary-cta: #2bb889;;
-  --secondary-cta: #ffffff;;
-  --accent: #09b97e;;
-  --background-accent: #a8e8c3;; */
+  /* --background: #020617;;
+  --card: #0f172a;;
+  --foreground: #e2e8f0;;
+  --primary-cta: #c4d8f9;;
+  --secondary-cta: #041633;;
+  --accent: #2d30f3;;
+  --background-accent: #1d4ed8;; */
 
-  --background: #f7f6f7;;
-  --card: #ffffff;;
-  --foreground: #032419;;
-  --primary-cta: #2bb889;;
+  --background: #020617;;
+  --card: #0f172a;;
+  --foreground: #e2e8f0;;
+  --primary-cta: #c4d8f9;;
   --primary-cta-text: #f7f6f7;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #041633;;
   --secondary-cta-text: #032419;;
-  --accent: #09b97e;;
-  --background-accent: #a8e8c3;;
+  --accent: #2d30f3;;
+  --background-accent: #1d4ed8;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);