Update src/app/page.tsx

Merge version_2 into main

src/app/layout.tsx

@@ -15,7 +15,8 @@ export const metadata: Metadata = {
     follow: true,
   },
   openGraph: {
-    title: "CompClub - Where Tech Enthusiasts Connect",    description: "Join our vibrant community of 200+ members. Learn, code, and grow together.",    type: "website",    siteName: "CompClub",    url: "https://compclub.com"},
+    title: "CompClub - Where Tech Enthusiasts Connect",    description: "Join our vibrant community of 200+ members. Learn, code, and grow together.",    type: "website",    siteName: "CompClub",    url: "https://compclub.com"
+  },
 };
 
 export default function RootLayout({
@@ -1402,4 +1403,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,7 +1,7 @@
-"use client"
+"use client";
 
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
@@ -40,29 +40,19 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplitDualMedia
-          title="Connect. Code. Create. Together."
+        <HeroLogoBillboard
+          logoText="Connect. Code. Create."
           description="Join our thriving computer club where students collaborate on innovative projects, sharpen their coding skills, and build lasting connections with fellow tech enthusiasts."
-          tag="Welcome to CompClub"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          background={{ variant: "sparkles-gradient" }}
           buttons={[
             { text: "Join Our Club", href: "#contact" },
             { text: "Learn More", href: "#about" }
           ]}
           buttonAnimation="slide-up"
-          mediaItems={[
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/binary-code-digits-technology-software-concept_53876-120040.jpg",              imageAlt: "Computer workstation with development setup"
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-it-professional-using-tablet-building-ai-algorithms_482257-92639.jpg",              imageAlt: "Collaborative coding session"
-            }
-          ]}
+          background={{ variant: "sparkles-gradient" }}
+          imageSrc="http://img.b2bpic.net/free-photo/binary-code-digits-technology-software-concept_53876-120040.jpg"
+          imageAlt="Computer workstation with development setup"
           mediaAnimation="slide-up"
-          rating={5}
-          ratingText="Trusted by 200+ members"
+          frameStyle="card"
         />
       </div>
 
@@ -304,4 +294,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: #251a0c;;
-  --primary-cta: #f4c408;;
-  --secondary-cta: #ffffff;;
-  --accent: #f4ca26;;
-  --background-accent: #e8daa8;; */
+  /* --background: #ffee00;;;;
+  --card: #ff0900;;;;
+  --foreground: #00fff4;;;;
+  --primary-cta: #003362;;;;
+  --secondary-cta: #a9ffab;;;;
+  --accent: #ff0000;;;;
+  --background-accent: #239400;;;; */
 
-  --background: #f7f6f7;;
-  --card: #ffffff;;
-  --foreground: #251a0c;;
-  --primary-cta: #f4c408;;
-  --primary-cta-text: #f7f6f7;;
-  --secondary-cta: #ffffff;;
-  --secondary-cta-text: #251a0c;;
-  --accent: #f4ca26;;
-  --background-accent: #e8daa8;;
+  --background: #ffee00;;;;
+  --card: #ff0900;;;;
+  --foreground: #00fff4;;;;
+  --primary-cta: #003362;;;;
+  --primary-cta-text: #ff00ff;;;;
+  --secondary-cta: #a9ffab;;;;
+  --secondary-cta-text: #ff9100;;;;
+  --accent: #ff0000;;;;
+  --background-accent: #239400;;;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);