From 904a802ff1f8902a11693dd5c3fe34aa3c422973 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 27 Feb 2026 14:07:19 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 86 ++++++++++++++----------------------------------
 1 file changed, 24 insertions(+), 62 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 069c636..26efdce 100644
--- a/src/app/page.tsx
+++ b/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"
+          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,12 +88,12 @@ 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={[
             {
               id: 1,
-              title: "Coding Bootcamps",              description: "Intensive learning sessions covering web development, mobile apps, and backend systems. Expert instructors guide members through practical projects with real-world applications.",              imageSrc: "http://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg?_wi=2"
+              title: "Coding Bootcamps",              description: "Intensive learning sessions covering web development, mobile apps, and backend systems. Expert instructors guide members through practical projects with real-world applications.",              imageSrc: "http://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg"
             },
             {
               id: 2,
@@ -156,25 +118,25 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           members={[
             {
-              id: "1",              name: "Alex Kumar",              role: "President",              description: "Full-stack developer with 4 years of experience. Passionate about open-source and building scalable applications.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1",              socialLinks: [
+              id: "1",              name: "Alex Kumar",              role: "President",              description: "Full-stack developer with 4 years of experience. Passionate about open-source and building scalable applications.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              socialLinks: [
                 { icon: Github, url: "https://github.com" },
                 { icon: Linkedin, url: "https://linkedin.com" }
               ]
             },
             {
-              id: "2",              name: "Maria Chen",              role: "Vice President",              description: "Web designer and UX enthusiast. Loves mentoring new members and organizing community events.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2",              socialLinks: [
+              id: "2",              name: "Maria Chen",              role: "Vice President",              description: "Web designer and UX enthusiast. Loves mentoring new members and organizing community events.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              socialLinks: [
                 { icon: Github, url: "https://github.com" },
                 { icon: Linkedin, url: "https://linkedin.com" }
               ]
             },
             {
-              id: "3",              name: "James Rodriguez",              role: "Treasurer",              description: "Backend developer and DevOps specialist. Leads our infrastructure and deployment initiatives.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3",              socialLinks: [
+              id: "3",              name: "James Rodriguez",              role: "Treasurer",              description: "Backend developer and DevOps specialist. Leads our infrastructure and deployment initiatives.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              socialLinks: [
                 { icon: Github, url: "https://github.com" },
                 { icon: Linkedin, url: "https://linkedin.com" }
               ]
             },
             {
-              id: "4",              name: "Sarah Park",              role: "Events Coordinator",              description: "Data scientist passionate about AI/ML. Organizes workshops and hackathon competitions.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4",              socialLinks: [
+              id: "4",              name: "Sarah Park",              role: "Events Coordinator",              description: "Data scientist passionate about AI/ML. Organizes workshops and hackathon competitions.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              socialLinks: [
                 { icon: Github, url: "https://github.com" },
                 { icon: Linkedin, url: "https://linkedin.com" }
               ]
@@ -194,13 +156,13 @@ export default function LandingPage() {
               id: "1",              name: "Emily Rodriguez",              imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg",              imageAlt: "Emily Rodriguez"
             },
             {
-              id: "2",              name: "David Wong",              imageSrc: "http://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186124.jpg?_wi=1",              imageAlt: "David Wong"
+              id: "2",              name: "David Wong",              imageSrc: "http://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186124.jpg",              imageAlt: "David Wong"
             },
             {
-              id: "3",              name: "Priya Sharma",              imageSrc: "http://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186124.jpg?_wi=2",              imageAlt: "Priya Sharma"
+              id: "3",              name: "Priya Sharma",              imageSrc: "http://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186124.jpg",              imageAlt: "Priya Sharma"
             },
             {
-              id: "4",              name: "Marcus Johnson",              imageSrc: "http://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186124.jpg?_wi=3",              imageAlt: "Marcus Johnson"
+              id: "4",              name: "Marcus Johnson",              imageSrc: "http://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186124.jpg",              imageAlt: "Marcus Johnson"
             }
           ]}
           cardTitle="Hundreds of members have transformed their tech careers through our community"
-- 
2.49.1