add get involved

.next/server/webpack-runtime.js

@@ -130,7 +130,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("d8f869810fc3d25f")
+/******/ 		__webpack_require__.h = () => ("8d1cca70236eb5e9")
 /******/ 	})();
 /******/ 	
 /******/ 	/* 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\"] = (\"95a7539da324\");\nif (true) { module.hot.accept() }\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKGFwcC1wYWdlcy1icm93c2VyKS8uL3NyYy9zdHlsZXMvdGFpbHdpbmQuY3NzIiwibWFwcGluZ3MiOiI7QUFBQSwrREFBZSxjQUFjO0FBQzdCLElBQUksSUFBVSxJQUFJLGlCQUFpQiIsInNvdXJjZXMiOlsid2VicGFjazovL19OX0UvLi9zcmMvc3R5bGVzL3RhaWx3aW5kLmNzcz83NTBkIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IFwiOTVhNzUzOWRhMzI0XCJcbmlmIChtb2R1bGUuaG90KSB7IG1vZHVsZS5ob3QuYWNjZXB0KCkgfVxuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9\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\"] = (\"1d2992a8823b\");\nif (true) { module.hot.accept() }\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKGFwcC1wYWdlcy1icm93c2VyKS8uL3NyYy9zdHlsZXMvdGFpbHdpbmQuY3NzIiwibWFwcGluZ3MiOiI7QUFBQSwrREFBZSxjQUFjO0FBQzdCLElBQUksSUFBVSxJQUFJLGlCQUFpQiIsInNvdXJjZXMiOlsid2VicGFjazovL19OX0UvLi9zcmMvc3R5bGVzL3RhaWx3aW5kLmNzcz83NTBkIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IFwiMWQyOTkyYTg4MjNiXCJcbmlmIChtb2R1bGUuaG90KSB7IG1vZHVsZS5ob3QuYWNjZXB0KCkgfVxuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9\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 "b0121ed294c3981e"; }
+/******/ 		__webpack_require__.h = function() { return "618bf6ca7801d4a0"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

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

@@ -90,6 +90,7 @@
     --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
     --blur-md: 12px;
     --blur-3xl: 64px;
+    --aspect-video: 16 / 9;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -451,6 +452,9 @@
   .my-2 {
     margin-block: calc(var(--spacing) * 2);
   }
+  .my-4 {
+    margin-block: calc(var(--spacing) * 4);
+  }
   .my-8 {
     margin-block: calc(var(--spacing) * 8);
   }
@@ -526,6 +530,9 @@
   .mb-0\.5 {
     margin-bottom: calc(var(--spacing) * 0.5);
   }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
@@ -562,6 +569,12 @@
   .ml-auto {
     margin-left: auto;
   }
+  .line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
   .block {
     display: block;
   }
@@ -601,6 +614,15 @@
   .aspect-1313\/771 {
     aspect-ratio: 1313/771;
   }
+  .aspect-\[2\/3\] {
+    aspect-ratio: 2/3;
+  }
+  .aspect-\[3\/4\] {
+    aspect-ratio: 3/4;
+  }
+  .aspect-\[4\/3\] {
+    aspect-ratio: 4/3;
+  }
   .aspect-\[4\/5\] {
     aspect-ratio: 4/5;
   }
@@ -616,6 +638,9 @@
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
+  .aspect-video {
+    aspect-ratio: var(--aspect-video);
+  }
   .size-0\.5 {
     width: calc(var(--spacing) * 0.5);
     height: calc(var(--spacing) * 0.5);
@@ -2509,6 +2534,13 @@
       padding-top: calc(var(--spacing) * 5);
     }
   }
+  .group-hover\:text-gray-600 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-gray-600);
+      }
+    }
+  }
   .group-hover\:\[animation-play-state\:running\] {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2673,6 +2705,13 @@
       padding-bottom: calc(calc(var(--spacing) * 2) + 1px);
     }
   }
+  .hover\:bg-gray-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-100);
+      }
+    }
+  }
   .hover\:bg-gray-200 {
     &:hover {
       @media (hover: hover) {
@@ -3127,6 +3166,11 @@
       display: none;
     }
   }
+  .sm\:aspect-2\/1 {
+    @media (width >= 40rem) {
+      aspect-ratio: 2/1;
+    }
+  }
   .sm\:aspect-3\/4 {
     @media (width >= 40rem) {
       aspect-ratio: 3/4;
@@ -3568,6 +3612,11 @@
       column-gap: calc(var(--spacing) * 12);
     }
   }
+  .lg\:gap-x-14 {
+    @media (width >= 64rem) {
+      column-gap: calc(var(--spacing) * 14);
+    }
+  }
   .lg\:rounded-3xl {
     @media (width >= 64rem) {
       border-radius: var(--radius-3xl);

src/app/participate/page.tsx

@@ -10,11 +10,11 @@ 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'
 import { CompanyTestimonial } from '@/components/companytestimonial'
 import { CTA } from '@/components/cta'
 import { ChevronRightIcon } from '@heroicons/react/24/outline'
 import DonateButton from '@/components/donatebutton'
+import Participate from '@/components/participate'
 
 
 export const metadata: Metadata = {
@@ -50,14 +50,17 @@ function Header() {
           </svg>
           <rect fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" width="100%" height="100%" strokeWidth={0} />
         </svg>
-        <div className="mx-auto max-w-7xl px-6 py-24 lg:flex lg:items-center lg:gap-x-10 lg:px-8 lg:py-40">
-          <div className="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
+        <div className="mx-auto max-w-7xl px-6 py-24 lg:flex lg:items-center lg:gap-x-14 lg:px-8 lg:py-24">
+          <div className="mx-auto max-w-2xl lg:mx-0 lg:flex-auto ">
             <Heading as="h1" className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
-              Get Involved
+              Your support makes transformation possible.
             </Heading>
-            <p className="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">
-              Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet
-              fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt.
+            <p className="mt-8 text-lg font-light text-pretty text-gray-900 sm:text-xl/8">
+              When you give to Indaba, you’re not just donating; you’re helping rewrite the future of education, opportunity, and community resilience.</p>
+              <p className="mt-4 text-lg font-light text-pretty text-gray-900 sm:text-xl/8">
+              Whether it’s $10 or $100, every contribution fuels locally-led programs that empower young people, uplift families, and regenerate entire ecosystems.</p>
+              <p className="mt-4 text-lg font-light text-pretty text-gray-900 sm:text-xl/8">
+              Join a movement that believes in long-term change, radical transparency, and collective impact. Together, we’re building something beautiful — and you're invited.
             </p>
           </div>
           <div className="mt-16 sm:mt-24 lg:mt-0 lg:shrink-0 lg:grow">
@@ -68,6 +71,71 @@ function Header() {
   )
 }
 
+const posts = [
+  {
+    id: 1,
+    title: 'Volunteer Your Skills',
+    href: '#',
+    description:
+      'Lend your time, talent, or expertise — from storytelling to tech, training, or logistics. Work directly with communities or help us scale digitally.',
+    imageUrl:
+      '/participate/volunteer.jpg',
+  },
+    {
+    id: 2,
+    title: 'Become an Ambassador',
+    href: '#',
+    description:
+      'Use your platform to spread the word. We work with local champions, creators, and change agents who amplify our mission.',
+    imageUrl:
+      '/participate/ambassador.jpg',
+  },
+      {
+    id: 3,
+    title: 'Become a Patron',
+    href: '#',
+    description:
+      'Invest long-term in systems that uplift generations. Our patron circle supports multi-year goals with strategic vision and heart.',
+    imageUrl:
+      '/participate/patron.jpg',
+  },
+
+]
+
+function Involvement() {
+  return (
+    <div className="bg-white">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          {posts.map((post) => (
+            <article key={post.id} className="flex flex-col items-start justify-between">
+              <div className="relative w-full">
+                <img
+                  alt=""
+                  src={post.imageUrl}
+                  className="aspect-video w-full rounded-2xl bg-gray-100 object-cover sm:aspect-2/1 lg:aspect-3/2"
+                />
+                <div className="absolute inset-0 rounded-2xl ring-1 ring-gray-900/10 ring-inset" />
+              </div>
+              <div className="max-w-xl">
+                <div className="group relative">
+                  <h3 className="mt-4 text-2xl font-semibold text-gray-900 group-hover:text-gray-600">
+                    <a href={post.href}>
+                      <span className="absolute inset-0" />
+                      {post.title}
+                    </a>
+                  </h3>
+                  <p className="my-4 line-clamp-3 text-sm/6 text-gray-600">{post.description}</p>
+                   <a href={post.href}  className="mt-8 text-sm font-semibold text-indigo-600 group-hover:text-gray-600">Learn More</a>
+                </div>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
 
 
 
@@ -85,6 +153,8 @@ export default function GetInvolved() {
         <Navbar color="black" />
       </Container>
       <Header />
+      <Participate/>
+      <Involvement/>
       <CTA />
       <Footer />
     </main>

src/components/faq.tsx

@@ -0,0 +1,5 @@
+'use client'
+import { Button } from './button'
+import { Heading, Subheading } from './text'
+import { clsx } from 'clsx'
+import { ChevronRightIcon } from '@heroicons/react/20/solid'  

src/components/participate.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { ChevronRightIcon } from '@heroicons/react/20/solid'
+import { Button } from './button'
+import { Heading } from './text'
+
+const projects = [
+  {
+    id: 1,
+    title: 'Become a Member',
+    imageUrl: '/participate/member.jpg',
+    impactGoal: 'Support our movement with monthly or one-time contributions.',
+    location: 'You’ll receive exclusive updates, event invites, and the knowledge you’re fueling systemic change from the ground up.',
+    href: '#',
+  },
+  {
+    id: 2,
+    title: 'Back a Project',
+    imageUrl: '/participate/choose.jpg',
+    impactGoal: 'Choose a cause that speaks to you and help bring it to life.',
+    location: 'Track its progress, meet the team, and celebrate impact milestones.',
+    href: '#',
+  },
+]
+
+export default function Participate() {
+  return (
+    <div className="bg-white pt-12 pb-6">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        {/* Cards */}
+        <div className=" grid grid-cols-1 lg:grid-cols-2 gap-8">
+          {projects.map((project) => (
+            <div key={project.id} className="relative rounded-2xl overflow-hidden bg-gray-900 text-white shadow-lg aspect-[4/3]">
+              <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/20 to-transparent" />
+              <div className="relative p-6 flex flex-col justify-end h-full">
+                <h3 className="text-2xl lg:text-4xl font-light mt-2">{project.title}</h3>
+                <div className="text-sm mt-2 text-indigo-300 font-semibold">{project.impactGoal}</div>
+                <p className="text-sm mt-4 pb-8">{project.location}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}