add get involved

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>
+  )
+}