Update src/app/page.tsx

Merge version_6 into main

src/app/layout.tsx

@@ -1403,4 +1403,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

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" }
@@ -49,7 +50,7 @@ export default function LandingPage() {
           ]}
           buttonAnimation="slide-up"
           background={{ variant: "sparkles-gradient" }}
-          imageSrc="http://img.b2bpic.net/free-photo/binary-code-digits-technology-software-concept_53876-120040.jpg"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/uploaded-1772384372359-ap8t998v.jpg"
           imageAlt="Computer workstation with development setup"
           mediaAnimation="slide-up"
           frameStyle="card"
@@ -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" }
               ]
             },
             {
@@ -294,4 +325,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}