Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
 import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
@@ -43,26 +43,20 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroCarouselLogo
-          logoText="CODECLUB"
-          description="Welcome to the ultimate hub for computer enthusiasts, developers, and tech innovators. Connect, learn, and build amazing projects together."
+        <HeroSplit
+          title="Empower Your Tech Journey"
+          description="Join a vibrant community of developers and tech innovators. Learn cutting-edge technologies, collaborate on exciting projects, and grow together with passionate people who share your vision."
+          background={{ variant: "sparkles-gradient" }}
+          tag="Welcome to CodeClub"
+          tagIcon={Sparkles}
           buttons={[
             { text: "Join Today", href: "contact" },
             { text: "Learn More", href: "about" }
           ]}
-          slides={[
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/programming-software-code-application-technology-concept_53876-123931.jpg",              imageAlt: "Coding and programming"
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/side-view-friends-winning-videogame_23-2149349984.jpg",              imageAlt: "Tech community collaboration"
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18941.jpg",              imageAlt: "Innovation and technology"
-            }
-          ]}
-          autoplayDelay={5000}
-          showDimOverlay={true}
+          imageSrc="http://img.b2bpic.net/free-photo/programming-software-code-application-technology-concept_53876-123931.jpg"
+          imageAlt="Coding and programming"
+          mediaAnimation="slide-up"
+          imagePosition="right"
         />
       </div>
 
@@ -107,6 +101,8 @@ export default function LandingPage() {
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={true}
+          cardClassName="group perspective cursor-pointer h-full"
+          containerClassName="[&_.card-inner]:group-hover:transition-transform [&_.card-inner]:group-hover:duration-500 [&_.card-inner]:group-hover:[transform-style:preserve-3d] [&_.card-inner]:group-hover:[transform:rotateY(180deg)]"
         />
       </div>
 

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #fafffb;;
-  --card: #f7fffa;;
-  --foreground: #001a0a;;
-  --primary-cta: #0a7039;;
-  --secondary-cta: #ffffff;;
-  --accent: #a8d9be;;
-  --background-accent: #6bbf8e;; */
+  /* --background: #010912;;
+  --card: #152840;;
+  --foreground: #e6f0ff;;
+  --primary-cta: #cee7ff;;
+  --secondary-cta: #0e1a29;;
+  --accent: #3f5c79;;
+  --background-accent: #004a93;; */
 
-  --background: #fafffb;;
-  --card: #f7fffa;;
-  --foreground: #001a0a;;
-  --primary-cta: #0a7039;;
+  --background: #010912;;
+  --card: #152840;;
+  --foreground: #e6f0ff;;
+  --primary-cta: #cee7ff;;
   --primary-cta-text: #fafffb;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #0e1a29;;
   --secondary-cta-text: #001a0a;;
-  --accent: #a8d9be;;
-  --background-accent: #6bbf8e;;
+  --accent: #3f5c79;;
+  --background-accent: #004a93;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);