Update src/app/page.tsx

Merge version_5 into main

src/app/page.tsx

@@ -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" }
@@ -113,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"
@@ -265,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" }
               ]
             },
             {

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #ffee00;;;;
+  /* --background: #0f1419;;;;
-  --card: #ff0900;;;;
+  --card: #1a202c;;;;
-  --foreground: #00fff4;;;;
+  --foreground: #e0f7ff;;;;
-  --primary-cta: #003362;;;;
+  --primary-cta: #00d9ff;;;;
-  --secondary-cta: #a9ffab;;;;
+  --secondary-cta: #2d3748;;;;
-  --accent: #ff0000;;;;
+  --accent: #ff006e;;;;
-  --background-accent: #239400;;;; */
+  --background-accent: #00d9ff;;;; */
 
-  --background: #ffee00;;;;
+  --background: #0f1419;;;;
-  --card: #ff0900;;;;
+  --card: #1a202c;;;;
-  --foreground: #00fff4;;;;
+  --foreground: #e0f7ff;;;;
-  --primary-cta: #003362;;;;
+  --primary-cta: #00d9ff;;;;
   --primary-cta-text: #ff00ff;;;;
-  --secondary-cta: #a9ffab;;;;
+  --secondary-cta: #2d3748;;;;
   --secondary-cta-text: #ff9100;;;;
-  --accent: #ff0000;;;;
+  --accent: #ff006e;;;;
-  --background-accent: #239400;;;;
+  --background-accent: #00d9ff;;;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);