Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -54,30 +54,27 @@ export default function HomePage() {
 
       <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" }}
+          title="Welcome to Tech Club"
+          description="Join a thriving community of developers, designers, and innovators pushing the boundaries of technology together."
+          background={{ variant: "radial-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" }
+            { src: "http://img.b2bpic.net/free-photo/side-view-friends-winning-videogame_23-2149349984.jpg", alt: "Member 1" },
+            { src: "http://img.b2bpic.net/free-photo/teen-smiling-boy-vr-headset-playing-video-games-video-game-club-with-blue-illumination-using-gamepad_1268-24604.jpg", alt: "Member 2" },
+            { src: "http://img.b2bpic.net/free-photo/young-adult-listening-study-music-writing-ideas-bachelor-paper_482257-126990.jpg", alt: "Member 3" }
           ]}
           avatarText="Join 150+ members"
           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 }
+            { type: "image", src: "http://img.b2bpic.net/free-photo/finger-touching-numeric-keypad_1134-136.jpg", alt: "Tech" },
+            { type: "image", src: "http://img.b2bpic.net/free-photo/mystical-numerology-scene_52683-107763.jpg", alt: "Innovation" },
+            { type: "image", src: "http://img.b2bpic.net/free-photo/relaxed-company-ceo-enjoying-successful-business_482257-76955.jpg", alt: "Collaboration" },
+            { type: "image", src: "http://img.b2bpic.net/free-photo/time-smartphone-screen_53876-16162.jpg", alt: "Development" }
           ]}
-          marqueeSpeed={25}
+          marqueeSpeed={30}
           showMarqueeCard={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);