add proje

.next/app-build-manifest.json

@@ -35,6 +35,11 @@
       "static/chunks/webpack.js",
       "static/chunks/main-app.js",
       "static/chunks/app/projects/page.js"
+    ],
+    "/participate/page": [
+      "static/chunks/webpack.js",
+      "static/chunks/main-app.js",
+      "static/chunks/app/participate/page.js"
     ]
   }
 }

.next/server/app-paths-manifest.json

@@ -4,5 +4,5 @@
   "/company/page": "app/company/page.js",
   "/blog/page": "app/blog/page.js",
   "/projects/page": "app/projects/page.js",
-  "/favicon.ico/route": "app/favicon.ico/route.js"
+  "/participate/page": "app/participate/page.js"
 }

.next/server/webpack-runtime.js

@@ -47,11 +47,6 @@
 /******/ 	__webpack_require__.m = __webpack_modules__;
 /******/ 	
 /************************************************************************/
-/******/ 	/* webpack/runtime/amd options */
-/******/ 	(() => {
-/******/ 		__webpack_require__.amdO = {};
-/******/ 	})();
-/******/ 	
 /******/ 	/* webpack/runtime/compat get default export */
 /******/ 	(() => {
 /******/ 		// getDefaultExport function for compatibility with non-harmony modules
@@ -130,7 +125,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("d78dfb4d5bc33823")
+/******/ 		__webpack_require__.h = () => ("7c2dbd3a1d648f79")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */

.next/static/chunks/app/layout.js

@@ -25,7 +25,7 @@ eval(__webpack_require__.ts("Promise.resolve(/*! import() eager */).then(__webpa
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval(__webpack_require__.ts("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__[\"default\"] = (\"c8fca2e32337\");\nif (true) { module.hot.accept() }\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKGFwcC1wYWdlcy1icm93c2VyKS8uL3NyYy9zdHlsZXMvdGFpbHdpbmQuY3NzIiwibWFwcGluZ3MiOiI7QUFBQSwrREFBZSxjQUFjO0FBQzdCLElBQUksSUFBVSxJQUFJLGlCQUFpQiIsInNvdXJjZXMiOlsid2VicGFjazovL19OX0UvLi9zcmMvc3R5bGVzL3RhaWx3aW5kLmNzcz83NTBkIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IFwiYzhmY2EyZTMyMzM3XCJcbmlmIChtb2R1bGUuaG90KSB7IG1vZHVsZS5ob3QuYWNjZXB0KCkgfVxuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///(app-pages-browser)/./src/styles/tailwind.css\n"));
+eval(__webpack_require__.ts("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__[\"default\"] = (\"4205d1db4d33\");\nif (true) { module.hot.accept() }\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKGFwcC1wYWdlcy1icm93c2VyKS8uL3NyYy9zdHlsZXMvdGFpbHdpbmQuY3NzIiwibWFwcGluZ3MiOiI7QUFBQSwrREFBZSxjQUFjO0FBQzdCLElBQUksSUFBVSxJQUFJLGlCQUFpQiIsInNvdXJjZXMiOlsid2VicGFjazovL19OX0UvLi9zcmMvc3R5bGVzL3RhaWx3aW5kLmNzcz83NTBkIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IFwiNDIwNWQxZGI0ZDMzXCJcbmlmIChtb2R1bGUuaG90KSB7IG1vZHVsZS5ob3QuYWNjZXB0KCkgfVxuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///(app-pages-browser)/./src/styles/tailwind.css\n"));
 
 /***/ })
 

.next/static/chunks/webpack.js

@@ -192,7 +192,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	!function() {
-/******/ 		__webpack_require__.h = function() { return "0d2cb1503b82df35"; }
+/******/ 		__webpack_require__.h = function() { return "daae1031be3864b5"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

.next/static/css/app/layout.css

@@ -1469,6 +1469,14 @@
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
+  .via-black\/20 {
+    --tw-gradient-via: color-mix(in srgb, #000 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-via: color-mix(in oklab, var(--color-black) 20%, transparent);
+    }
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
   .via-black\/30 {
     --tw-gradient-via: color-mix(in srgb, #000 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {

src/app/participate/page.tsx

@@ -0,0 +1,117 @@
+import { AnimatedNumber } from '@/components/animated-number'
+import { Button } from '@/components/button'
+import { Container } from '@/components/container'
+import { Footer } from '@/components/footer'
+import { GradientLight } from '@/components/gradient'
+import { Navbar } from '@/components/navbar'
+import { Heading, Lead, Subheading } from '@/components/text'
+import type { Metadata } from 'next'
+import Ecosystem from '@/components/ecosystem'
+import { RocketLaunchIcon } from '@heroicons/react/20/solid'
+import Portfolio from '@/components/portfolio'
+import { Testimonials } from '@/components/testimonials'
+import ProjectCard from '@/components/projectcards'
+
+export const metadata: Metadata = {
+  title: 'Get Involved',
+  description:
+    'Indaba is a Social Business with a mission to empower young people to be resilient, develop their full potential and serve the common good by developing a better educational system powered by world-class technological, collaborative and educational solutions accessible online and offline, affordable to the many.',
+}
+
+function Header() {
+  return (
+    <Container className="mt-16">
+      <div className='lg:max-w-6xl'>
+        <Heading as="h1">Deliver Transformational Learning – Anywhere.</Heading>
+          <Lead className="mt-8 max-w-3xl">
+           From early childhood to vocational skills and lifelong learning, Indaba brings transformative education directly to the communities that need it most. 
+          </Lead>
+      </div>
+    </Container>
+  )
+}
+
+
+
+const features = [
+  {
+    name: 'Reached 8,000+ young learners',
+    description:
+      "Indaba's ECD initiatives have already empowered thousands of children across underserved communities in Africa and Latin America, offering early access to essential learning tools.",
+    icon: RocketLaunchIcon,
+  },
+  {
+    name: ' Localized curriculum across 4 regions.',
+    description: 'Each program is co-developed with local educators and elders, ensuring cultural alignment and deep community ownership.',
+    icon: RocketLaunchIcon,
+  },
+  {
+    name: '99.9% parent satisfaction rate.',
+    description: 'Parents consistently report increased confidence, stronger engagement with their children, and a desire to expand the program in their communities.',
+    icon: RocketLaunchIcon,
+  },
+]
+
+ function Overview() {
+  return (
+    <div className="overflow-hidden bg-white pb-24 pt-8">
+      <div className="mx-auto max-w-7xl px-6 lg:px-0">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
+          <div className="lg:pt-4 lg:pr-8">
+            <div className="lg:max-w-2xl">
+              <p className="text-lg/9 text-gray-600 leading-normal">
+                500 million children globally lack access to foundational education during the most critical years of brain development. Indaba addresses this urgent need by delivering culturally grounded Early Childhood Development (ECD) programs. 
+              </p>
+               <p className="mt-6 text-lg/9 text-gray-600 leading-normal">
+                 Through a blend of online and offline tools, local storytelling, and community hubs, we equip parents and caregivers to nurture children’s cognitive, emotional, and social growth — starting from birth.
+              </p>
+              <dl className="mt-10 max-w-xl space-y-8 text-base/7 text-gray-600 lg:max-w-none">
+                {features.map((feature) => (
+                  <div key={feature.name} className="relative pl-9">
+                    <dt className="inline font-semibold text-gray-900">
+                      <feature.icon aria-hidden="true" className="absolute top-1 left-1 size-5 text-indigo-600" />
+                      {feature.name}
+                    </dt>{' '}
+                    <dd className="inline">{feature.description}</dd>
+                  </div>
+                ))}
+              </dl>
+            </div>
+          </div>
+          <img
+            alt="Product screenshot"
+            src="/projects/projects.jpg"
+            width={2432}
+            height={1442}
+            className="w-2xl max-w-none  sm:w-228 md:-ml-4 lg:-ml-0"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+
+import { CompanyTestimonial } from '@/components/companytestimonial'
+import { CTA } from '@/components/cta'
+
+
+
+
+
+
+export default function GetInvolved() {
+  return (
+    <main className="overflow-hidden">
+      <GradientLight />
+      <Container>
+        <Navbar color="black" />
+      </Container>
+      <Header />
+      <Overview />
+      <ProjectCard />
+      <CTA />
+      <Footer />
+    </main>
+  )
+}

src/components/navbar.tsx

@@ -14,8 +14,7 @@ import { PlusGrid, PlusGridItem, PlusGridRow } from './plus-grid'
 const links = [
   { href: '/company', label: 'About' },
   { href: '/projects', label: 'Projects' },
-  { href: '/blog', label: 'Blog' },
-  { href: '/login', label: 'Get Involved' },
+  { href: '/participate', label: 'Get Involved' },
 ]
 
 function DesktopNav({ color = "white" }: { color?: "white" | "black" }) {

src/components/projectcards.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { ChevronRightIcon } from '@heroicons/react/20/solid'
 import { clsx } from 'clsx'
 import { Button } from './button'
+import { Subheading, Heading, Lead } from './text'
 
 const filters = {
   category: ['All', 'Education', 'Health', 'Climate', 'Infrastructure'],
@@ -16,7 +17,7 @@ const projects = [
   {
     id: 1,
     title: 'Zanzibar Schools',
-    imageUrl: '/portfolio/zanzibar.jpg',
+    imageUrl: '/projects/zanzibar.jpg',
     impactGoal: 'Build 10 sustainable classrooms',
     location: 'Zanzibar, Tanzania',
     category: 'Education',
@@ -31,7 +32,7 @@ const projects = [
   {
     id: 2,
     title: 'Kayamandi Health Hub',
-    imageUrl: '/portfolio/kayamandi.jpg',
+    imageUrl: '/projects/kayamandi.jpg',
     impactGoal: 'Provide care to 500 families',
     location: 'Stellenbosch, South Africa',
     category: 'Health',
@@ -46,7 +47,7 @@ const projects = [
   {
     id: 3,
     title: 'Southern Cape Solar',
-    imageUrl: '/portfolio/southern.jpg',
+    imageUrl: '/projects/southern.jpg',
     impactGoal: 'Power 200 homes with clean energy',
     location: 'Southern Cape, South Africa',
     category: 'Climate',
@@ -61,7 +62,7 @@ const projects = [
   {
     id: 4,
     title: 'Township WiFi Project',
-    imageUrl: '/portfolio/township.jpg',
+    imageUrl: '/projects/township.jpg',
     impactGoal: 'Free internet for 1,000 students',
     location: 'Johannesburg, South Africa',
     category: 'Infrastructure',
@@ -76,7 +77,7 @@ const projects = [
   {
     id: 5,
     title: 'Durban Climate Garden',
-    imageUrl: '/portfolio/durban.jpg',
+    imageUrl: '/projects/durban.jpg',
     impactGoal: 'Grow 5 community food forests',
     location: 'Durban, South Africa',
     category: 'Climate',
@@ -91,7 +92,7 @@ const projects = [
   {
     id: 6,
     title: 'Rio Digital Youth Labs',
-    imageUrl: '/portfolio/rio.jpg',
+    imageUrl: '/projects/rio.jpg',
     impactGoal: 'Train 1,000 young coders',
     location: 'Rio de Janeiro, Brazil',
     category: 'Education',
@@ -130,7 +131,7 @@ export default function ProjectCard() {
     <div className="bg-white py-24">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="text-center max-w-2xl mx-auto">
-          <h2 className="text-4xl font-semibold text-gray-900 sm:text-5xl">Explore Impact Projects</h2>
+          <Heading as="h1">Explore Impact Projects</Heading>
           <p className="mt-2 text-lg text-gray-600">Back causes that shape a better future.</p>
         </div>
 
@@ -155,7 +156,7 @@ export default function ProjectCard() {
           {filteredProjects.map(project => (
             <div key={project.id} className="relative rounded-2xl overflow-hidden bg-gray-900 text-white shadow-lg aspect-[4/5]">
               <img src={project.imageUrl} alt={project.title} className="absolute inset-0 w-full h-full object-cover opacity-50" />
-              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/50 to-transparent" />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
               <div className="relative p-6 flex flex-col justify-end h-full">
                 <div className="text-sm text-indigo-300 font-semibold">{project.impactGoal}</div>
                 <h3 className="text-2xl font-bold mt-2">{project.title}</h3>
@@ -169,8 +170,8 @@ export default function ProjectCard() {
                   <a href={project.href} className="text-indigo-400 hover:text-indigo-300 font-semibold flex items-center">
                     Learn More <ChevronRightIcon className="ml-1 h-4 w-4" />
                   </a>
-                  <Button variant="secondary" className="text-sm bg-indigo-500 hover:bg-indigo-600 text-white px-3 py-1 rounded-md">
-                    Support
+                  <Button variant="secondary" className="text-sm bg-indigo-500 hover:bg-indigo-600 text-white px-3 py-1 ">
+                    Supports
                   </Button>
                 </div>
               </div>