Update src/app/page.tsx

Update src/app/layout.tsx
2026-03-01 16:48:33 +00:00 · 2026-03-01 16:46:33 +00:00 · 2026-03-01 16:46:32 +00:00 · 2026-03-01 16:32:29 +00:00 · 2026-03-01 16:32:25 +00:00 · 2026-03-01 16:32:24 +00:00
4 changed files with 62 additions and 41 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,12 +1,12 @@
 import type { Metadata } from "next";
-import { Inter_Tight } from "next/font/google";
+import { IBM_Plex_Sans } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";

-const interTight = Inter_Tight({
-  variable: "--font-inter-tight",  subsets: ["latin"],
-  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+const ibmPlexSans = IBM_Plex_Sans({
+  variable: "--font-ibm-plex-sans",  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700"],
 });

 export const metadata: Metadata = {
@@ -28,7 +28,7 @@ export default function RootLayout({
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
        <body
-          className={`${interTight.variable} antialiased`}
+          className={`${ibmPlexSans.variable} antialiased`}
        >
          <Tag />
          {children}
@@ -1403,4 +1403,4 @@ export default function RootLayout({
      </ServiceWrapper>
    </html>
  );
-}
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,7 @@
 "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';
@@ -32,6 +32,7 @@ export default function LandingPage() {
          navItems={[
            { name: "About", id: "about" },
            { name: "Features", id: "features" },
+            { name: "Products", id: "products" },
            { name: "Team", id: "team" },
            { name: "Join Us", id: "contact" },
            { name: "FAQ", id: "faq" }
@@ -40,29 +41,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>

@@ -123,6 +114,35 @@ export default function LandingPage() {
        />
      </div>

+      <div id="products" data-section="products">
+        <div className="py-16">
+          <h2 className="text-3xl font-bold text-center mb-4">Our Product Offerings</h2>
+          <p className="text-center mb-12">Explore the tools and resources we've built for our community</p>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto px-6">
+            <div className="bg-white rounded-lg shadow-md p-6">
+              <img src="http://img.b2bpic.net/free-photo/sales-analysis_1098-14925.jpg?_wi=1" alt="CompClub Platform dashboard" className="w-full h-48 object-cover rounded mb-4" />
+              <h3 className="text-xl font-semibold mb-2">CompClub Platform</h3>
+              <p className="text-lg font-bold text-green-600">Free</p>
+            </div>
+            <div className="bg-white rounded-lg shadow-md p-6">
+              <img src="http://img.b2bpic.net/free-photo/sales-analysis_1098-14925.jpg?_wi=2" alt="Code Learning Kit" className="w-full h-48 object-cover rounded mb-4" />
+              <h3 className="text-xl font-semibold mb-2">Code Learning Kit</h3>
+              <p className="text-lg font-bold text-green-600">$49</p>
+            </div>
+            <div className="bg-white rounded-lg shadow-md p-6">
+              <img src="http://img.b2bpic.net/free-photo/sales-analysis_1098-14925.jpg?_wi=3" alt="Hackathon Toolkit" className="w-full h-48 object-cover rounded mb-4" />
+              <h3 className="text-xl font-semibold mb-2">Hackathon Toolkit</h3>
+              <p className="text-lg font-bold text-green-600">$29</p>
+            </div>
+            <div className="bg-white rounded-lg shadow-md p-6">
+              <img src="http://img.b2bpic.net/free-photo/sales-analysis_1098-14925.jpg?_wi=4" alt="Mentorship Program" className="w-full h-48 object-cover rounded mb-4" />
+              <h3 className="text-xl font-semibold mb-2">Mentorship Program</h3>
+              <p className="text-lg font-bold text-green-600">$99</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Our Impact"
@@ -275,7 +295,8 @@ export default function LandingPage() {
              items: [
                { label: "About", href: "#about" },
                { label: "Team", href: "#team" },
-                { label: "Features", href: "#features" }
+                { label: "Features", href: "#features" },
+                { label: "Products", href: "#products" }
              ]
            },
            {
@@ -304,4 +325,4 @@ export default function LandingPage() {
      </div>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-ibm-plex-sans), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-ibm-plex-sans), sans-serif;
 }
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -2,23 +2,23 @@
  /* Base units */
  /* --vw is set by ThemeProvider */

-  /* --background: #ffee00;;;;
-  --card: #ff0900;;;;
-  --foreground: #00fff4;;;;
-  --primary-cta: #003362;;;;
-  --secondary-cta: #a9ffab;;;;
-  --accent: #ff0000;;;;
-  --background-accent: #239400;;;; */
+  /* --background: #0f1419;;;;
+  --card: #1a202c;;;;
+  --foreground: #e0f7ff;;;;
+  --primary-cta: #00d9ff;;;;
+  --secondary-cta: #2d3748;;;;
+  --accent: #ff006e;;;;
+  --background-accent: #00d9ff;;;; */

-  --background: #ffee00;;;;
-  --card: #ff0900;;;;
-  --foreground: #00fff4;;;;
-  --primary-cta: #003362;;;;
+  --background: #0f1419;;;;
+  --card: #1a202c;;;;
+  --foreground: #e0f7ff;;;;
+  --primary-cta: #00d9ff;;;;
  --primary-cta-text: #ff00ff;;;;
-  --secondary-cta: #a9ffab;;;;
+  --secondary-cta: #2d3748;;;;
  --secondary-cta-text: #ff9100;;;;
-  --accent: #ff0000;;;;
-  --background-accent: #239400;;;;
+  --accent: #ff006e;;;;
+  --background-accent: #00d9ff;;;;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
Author	SHA1	Message	Date
bender	b2f3b7effe	Update src/app/page.tsx	2026-03-01 16:48:33 +00:00
bender	a8f9538631	Update src/app/page.tsx	2026-03-01 16:46:33 +00:00
bender	41dc6603a0	Update src/app/layout.tsx	2026-03-01 16:46:32 +00:00
bender	01b3953ae2	Merge version_5 into main Merge version_5 into main	2026-03-01 16:32:29 +00:00
bender	62837f1ef9	Update src/app/styles/variables.css	2026-03-01 16:32:25 +00:00
bender	8b7bd43da2	Update src/app/page.tsx	2026-03-01 16:32:24 +00:00
bender	2100dfcd74	Update src/app/layout.tsx	2026-03-01 16:32:23 +00:00
bender	20a41c06d3	Merge version_4 into main Merge version_4 into main	2026-03-01 16:19:28 +00:00
bender	95d3c1af0f	Update src/app/styles/base.css	2026-03-01 16:19:24 +00:00
bender	efc39f0539	Update src/app/layout.tsx	2026-03-01 16:19:23 +00:00
bender	bce3805ae2	Merge version_3 into main Merge version_3 into main	2026-03-01 16:16:04 +00:00
bender	5ae66c0b24	Update src/app/page.tsx	2026-03-01 16:16:00 +00:00
bender	b1d8567eb1	Update src/app/layout.tsx	2026-03-01 16:15:59 +00:00
bender	33a545a17f	Merge version_2 into main Merge version_2 into main	2026-03-01 16:13:05 +00:00
bender	452706960a	Merge version_2 into main Merge version_2 into main	2026-03-01 16:12:12 +00:00
bender	f36ab44f3c	Merge version_2 into main Merge version_2 into main	2026-03-01 16:10:50 +00:00