add about

src/app/company/page.tsx

@@ -6,37 +6,39 @@ 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'
 
 export const metadata: Metadata = {
   title: 'Company',
   description:
-    'We’re on a mission to transform revenue organizations by harnessing vast amounts of illegally acquired customer data.',
+    'An Ecosystem to accelerate the transition toward quality education for all.',
 }
 
 function Header() {
   return (
     <Container className="mt-16">
-      <Heading as="h1">Helping companies generate revenue.</Heading>
-      <Lead className="mt-6 max-w-3xl">
-        We’re on a mission to transform revenue organizations by harnessing vast
-        amounts of illegally acquired customer data.
-      </Lead>
+      <div className='lg:max-w-6xl'>
+        <Heading as="h1">An Ecosystem to accelerate the transition toward quality education for all.</Heading>
+          <Lead className="mt-8 max-w-3xl">
+           Our youth needs access to complementary education in order to flourish in a rapidly changing world. We are building that platform - one that offers high quality, impactful content, affordably and at scale on- and off-line.
+          </Lead>
+      </div>
       <section className="mt-16 grid grid-cols-1 lg:grid-cols-2 lg:gap-12">
         <div className="max-w-lg">
-          <h2 className="text-2xl font-medium tracking-tight">Our mission</h2>
-          <p className="mt-6 text-sm/6 text-gray-600">
-            At Indaba, we are dedicated to transforming the way communities engage and collaborate. Our mission is to provide our
-            customers with an unfair advantage over both their competitors and
-            potential customers through insight and analysis. We’ll stop at
-            nothing to get you the data you need to close a deal.
+          <h2 className="text-2xl font-medium tracking-tight">Our Mission</h2>
+          <p className="mt-6 text-md/6 text-gray-600">
+            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.
           </p>
-          <p className="mt-8 text-sm/6 text-gray-600">
-            We’re customer-obsessed — putting the time in to build a detailed
-            financial picture of every one of our customers so that we know more
-            about your business than you do. We are in this together, mostly
-            because we are all implicated in large-scale financial crime. In our
-            history as a company, we’ve never lost a customer, because if any
-            one of us talks, we all go down.
+          <p className="mt-8 text-md/6 text-gray-600">
+            Our focus is laser-sharp across three priority areas:
+          </p>
+          <p className="mt-4 text-md/6 font-medium bg-linear-145 from-[#8b62f3] from-10% via-[#9592ff] via-50% to-[#f0e7ff] to-90% bg-clip-text text-transparent">
+            Early Childhood Development<br></br>
+            Afterschool & Extracurricular Empowerment<br></br>
+            Vocational & Regenerative Career Training.
+          </p>
+           <p className="mt-4 text-md/6 text-gray-600">
+            Through these pillars, we create holistic pathways for young people to grow, explore, and thrive.
           </p>
         </div>
         <div className="pt-20 lg:row-span-2 lg:-mr-16 xl:mr-auto">
@@ -44,28 +46,28 @@ function Header() {
             <div className="aspect-square overflow-hidden rounded-xl shadow-xl outline-1 -outline-offset-1 outline-black/10">
               <img
                 alt=""
-                src="/company/1.jpg"
+                src="/company/1.webp"
                 className="block size-full object-cover"
               />
             </div>
             <div className="-mt-8 aspect-square overflow-hidden rounded-xl shadow-xl outline-1 -outline-offset-1 outline-black/10 lg:-mt-32">
               <img
                 alt=""
-                src="/company/2.jpg"
+                src="/company/2.webp"
                 className="block size-full object-cover"
               />
             </div>
             <div className="aspect-square overflow-hidden rounded-xl shadow-xl outline-1 -outline-offset-1 outline-black/10">
               <img
                 alt=""
-                src="/company/3.jpg"
+                src="/company/3.webp"
                 className="block size-full object-cover"
               />
             </div>
             <div className="-mt-8 aspect-square overflow-hidden rounded-xl shadow-xl outline-1 -outline-offset-1 outline-black/10 lg:-mt-32">
               <img
                 alt=""
-                src="/company/4.jpg"
+                src="/company/4.webp"
                 className="block size-full object-cover"
               />
             </div>
@@ -76,27 +78,27 @@ function Header() {
           <hr className="mt-6 border-t border-gray-200" />
           <dl className="mt-6 grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-2">
             <div className="flex flex-col gap-y-2 border-b border-dotted border-gray-200 pb-4">
-              <dt className="text-sm/6 text-gray-600">Raised</dt>
+              <dt className="text-sm/6 text-gray-600">Lessons</dt>
               <dd className="order-first text-6xl font-medium tracking-tight">
-                $<AnimatedNumber start={100} end={150} />M
+                $<AnimatedNumber start={100} end={400} />M
               </dd>
             </div>
             <div className="flex flex-col gap-y-2 border-b border-dotted border-gray-200 pb-4">
-              <dt className="text-sm/6 text-gray-600">Companies</dt>
+              <dt className="text-sm/6 text-gray-600">Resources</dt>
               <dd className="order-first text-6xl font-medium tracking-tight">
-                <AnimatedNumber start={15} end={30} />K
+                <AnimatedNumber start={10} end={90} />K
               </dd>
             </div>
             <div className="flex flex-col gap-y-2 max-sm:border-b max-sm:border-dotted max-sm:border-gray-200 max-sm:pb-4">
-              <dt className="text-sm/6 text-gray-600">Deals Closed</dt>
+              <dt className="text-sm/6 text-gray-600">Users</dt>
               <dd className="order-first text-6xl font-medium tracking-tight">
-                <AnimatedNumber start={0.9} end={1.5} decimals={1} />M
+                <AnimatedNumber start={0.2} end={1.5} decimals={1} />M
               </dd>
             </div>
             <div className="flex flex-col gap-y-2">
-              <dt className="text-sm/6 text-gray-600">Leads Generated</dt>
+              <dt className="text-sm/6 text-gray-600">Stipendum</dt>
               <dd className="order-first text-6xl font-medium tracking-tight">
-                <AnimatedNumber start={150} end={200} />M
+                <AnimatedNumber start={10} end={60} />M
               </dd>
             </div>
           </dl>
@@ -126,33 +128,25 @@ function Person({
   )
 }
 
+import { CompanyTestimonial } from '@/components/companytestimonial'
+
 function Team() {
   return (
-    <Container className="mt-32">
+    <Container className="mt-24">
       <Subheading>Meet the team</Subheading>
       <Heading as="h3" className="mt-2">
-        Founded by an all-star team.
+        Founded by educators, activists, and systems changers.
       </Heading>
       <Lead className="mt-6 max-w-3xl">
         Indaba is founded by community leaders and backed by investors who believe in the power of meaningful participation.
       </Lead>
       <div className="mt-12 grid grid-cols-1 gap-12 lg:grid-cols-2">
         <div className="max-w-lg">
-          <p className="text-sm/6 text-gray-600">
-            Years ago, while working as sales associates at rival companies,
-            Thomas, Ben, and Natalie were discussing a big client they had all
-            been competing for. Joking about seeing the terms of each other’s
-            offers, they had an idea: what if they shared data to win deals and
-            split the commission behind their companies’ backs? It turned out to
-            be an incredible success, and that idea became the kernel for
-            Indaba.
+          <p className="text-md/6 text-gray-600">
+            Years ago, while working on separate community projects across Africa and beyond, our founding team kept encountering the same problem: fragmented systems, siloed resources, and a lack of tools built for those doing the real work on the ground. Frustrated but inspired, they came together to design a new kind of platform — one that centers people, culture, and purpose.
           </p>
-          <p className="mt-8 text-sm/6 text-gray-600">
-            Today, Indaba transforms communities by harnessing
-            collective wisdom and collaborative action, using it to create
-            meaningful change. More than 30,000 communities rely on Indaba
-            to engage their members and drive positive impact, all
-            through a single integrated platform.
+          <p className="mt-8 text-md/6 text-gray-600">
+            Today, Indaba empowers communities through a unified ecosystem that supports education, collaboration, and regenerative action. From early childhood learning to vocational training, over 30,000 people across the globe engage with Indaba to reimagine what’s possible — and to build it, together.
           </p>
           <div className="mt-6">
             <Button className="w-full sm:w-auto" href="#">
@@ -161,13 +155,7 @@ function Team() {
           </div>
         </div>
         <div className="max-lg:order-first max-lg:max-w-lg">
-          <div className="aspect-3/2 overflow-hidden rounded-xl shadow-xl outline-1 -outline-offset-1 outline-black/10">
-            <img
-              alt=""
-              src="/company/5.jpg"
-              className="block size-full object-cover"
-            />
-          </div>
+          <CompanyTestimonial />
         </div>
       </div>
       <Subheading as="h3" className="mt-24">
@@ -230,7 +218,7 @@ function Team() {
 
 function Investors() {
   return (
-    <Container className="mt-32">
+    <Container className="my-32">
       <Subheading>Investors</Subheading>
       <Heading as="h3" className="mt-2">
         Funded by industry-leaders.
@@ -315,156 +303,21 @@ function Investors() {
   )
 }
 
-function Testimonial() {
-  return (
-    <div className="relative flex aspect-square flex-col justify-end overflow-hidden rounded-3xl sm:aspect-5/4 lg:aspect-3/4">
-      <img
-        alt=""
-        src="/testimonials/veronica-winton.jpg"
-        className="absolute inset-0 object-cover"
-      />
-      <div
-        aria-hidden="true"
-        className="absolute inset-0 rounded-3xl bg-linear-to-t from-black from-10% to-75% ring-1 ring-gray-950/10 ring-inset lg:from-25%"
-      />
-      <figure className="relative p-10">
-        <blockquote>
-          <p className="relative text-xl/7 text-white before:absolute before:-translate-x-full before:content-['“'] after:absolute after:content-['”']">
-            We&apos;ve managed to put two of our main competitors out of
-            business in 6 months.
-          </p>
-        </blockquote>
-        <figcaption className="mt-6 border-t border-white/20 pt-6">
-          <p className="text-sm/6 font-medium text-white">Veronica Winton</p>
-          <p className="text-sm/6 font-medium">
-            <span className="bg-linear-to-r from-[#fff1be] from-28% via-[#ee87cb] via-70% to-[#b060ff] bg-clip-text text-transparent">
-              CSO, Planeteria
-            </span>
-          </p>
-        </figcaption>
-      </figure>
-    </div>
-  )
-}
 
-function Careers() {
-  return (
-    <Container className="my-32">
-      <Subheading>Careers</Subheading>
-      <Heading as="h3" className="mt-2">
-        Join our fully remote team.
-      </Heading>
-      <Lead className="mt-6 max-w-3xl">
-        We work together from all over the world, mainly from locations without
-        extradition agreements.
-      </Lead>
-      <div className="mt-24 grid grid-cols-1 gap-16 lg:grid-cols-[1fr_24rem]">
-        <div className="lg:max-w-2xl">
-          <Subheading as="h3">Open positions</Subheading>
-          <div>
-            <table className="w-full text-left">
-              <colgroup>
-                <col className="w-2/3" />
-                <col className="w-1/3" />
-                <col className="w-0" />
-              </colgroup>
-              <thead className="sr-only">
-                <tr>
-                  <th scope="col">Title</th>
-                  <th scope="col">Location</th>
-                  <th scope="col">Read more</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <th scope="colgroup" colSpan={3} className="px-0 pt-10 pb-0">
-                    <div className="-mx-4 rounded-lg bg-gray-50 px-4 py-3 text-sm/6 font-semibold">
-                      Engineering
-                    </div>
-                  </th>
-                </tr>
-                <tr className="border-b border-dotted border-gray-200 text-sm/6 font-normal">
-                  <td className="px-0 py-4">iOS Developer</td>
-                  <td className="px-0 py-4 text-gray-600">Remote</td>
-                  <td className="px-0 py-4 text-right">
-                    <Button variant="outline" href="#">
-                      View listing
-                    </Button>
-                  </td>
-                </tr>
-                <tr className="border-b border-dotted border-gray-200 text-sm/6 font-normal">
-                  <td className="px-0 py-4">Backend Engineer</td>
-                  <td className="px-0 py-4 text-gray-600">Remote</td>
-                  <td className="px-0 py-4 text-right">
-                    <Button variant="outline" href="#">
-                      View listing
-                    </Button>
-                  </td>
-                </tr>
-                <tr className="text-sm/6 font-normal">
-                  <td className="px-0 py-4">Product Engineer</td>
-                  <td className="px-0 py-4 text-gray-600">Remote</td>
-                  <td className="px-0 py-4 text-right">
-                    <Button variant="outline" href="#">
-                      View listing
-                    </Button>
-                  </td>
-                </tr>
-                <tr>
-                  <th scope="colgroup" colSpan={3} className="px-0 pt-5 pb-0">
-                    <div className="-mx-4 rounded-lg bg-gray-50 px-4 py-3 text-sm/6 font-semibold">
-                      Design
-                    </div>
-                  </th>
-                </tr>
-                <tr className="border-b border-dotted border-gray-200 text-sm/6 font-normal">
-                  <td className="px-0 py-4">Principal Designer</td>
-                  <td className="px-0 py-4 text-gray-600">Remote</td>
-                  <td className="px-0 py-4 text-right">
-                    <Button variant="outline" href="#">
-                      View listing
-                    </Button>
-                  </td>
-                </tr>
-                <tr className="border-b border-dotted border-gray-200 text-sm/6 font-normal">
-                  <td className="px-0 py-4">Designer</td>
-                  <td className="px-0 py-4 text-gray-600">Remote</td>
-                  <td className="px-0 py-4 text-right">
-                    <Button variant="outline" href="#">
-                      View listing
-                    </Button>
-                  </td>
-                </tr>
-                <tr className="text-sm/6 font-normal">
-                  <td className="px-0 py-4">Senior Designer</td>
-                  <td className="px-0 py-4 text-gray-600">Remote</td>
-                  <td className="px-0 py-4 text-right">
-                    <Button variant="outline" href="#">
-                      View listing
-                    </Button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <Testimonial />
-      </div>
-    </Container>
-  )
-}
+
+
 
 export default function Company() {
   return (
     <main className="overflow-hidden">
       <GradientLight />
       <Container>
-        <Navbar />
+        <Navbar color="black" />
       </Container>
       <Header />
+       <Ecosystem />
       <Team />
       <Investors />
-      <Careers />
       <Footer />
     </main>
   )

src/components/blacklogo.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { Logo } from './logo'
+
+export function BlackLogo({ className }: { className?: string }) {
+  return <Logo className={className} color="black" />
+}

src/components/careers.tsx

@@ -0,0 +1,147 @@
+‘use client’
+import { Button } from '@/components/button'
+import { Container } from '@/components/container'
+import { Heading, Lead, Subheading } from '@/components/text'
+import { Testimonial } from '@/components/testimonial'
+import { ChevronRightIcon } from '@heroicons/react/20/solid'
+import { Metadata } from 'next'
+
+
+function Testimonial() {
+  return (
+    <div className="relative flex aspect-square flex-col justify-end overflow-hidden rounded-3xl sm:aspect-5/4 lg:aspect-3/4">
+      <img
+        alt=""
+        src="/testimonials/veronica-winton.jpg"
+        className="absolute inset-0 object-cover"
+      />
+      <div
+        aria-hidden="true"
+        className="absolute inset-0 rounded-3xl bg-linear-to-t from-black from-10% to-75% ring-1 ring-gray-950/10 ring-inset lg:from-25%"
+      />
+      <figure className="relative p-10">
+        <blockquote>
+          <p className="relative text-xl/7 text-white before:absolute before:-translate-x-full before:content-['“'] after:absolute after:content-['”']">
+            We&apos;ve managed to put two of our main competitors out of
+            business in 6 months.
+          </p>
+        </blockquote>
+        <figcaption className="mt-6 border-t border-white/20 pt-6">
+          <p className="text-sm/6 font-medium text-white">Veronica Winton</p>
+          <p className="text-sm/6 font-medium">
+            <span className="bg-linear-to-r from-[#fff1be] from-28% via-[#ee87cb] via-70% to-[#b060ff] bg-clip-text text-transparent">
+              CSO, Planeteria
+            </span>
+          </p>
+        </figcaption>
+      </figure>
+    </div>
+  )
+}
+
+function Careers() {
+  return (
+    <Container className="my-32">
+      <Subheading>Careers</Subheading>
+      <Heading as="h3" className="mt-2">
+        Join our fully remote team.
+      </Heading>
+      <Lead className="mt-6 max-w-3xl">
+        We work together from all over the world, mainly from locations without
+        extradition agreements.
+      </Lead>
+      <div className="mt-24 grid grid-cols-1 gap-16 lg:grid-cols-[1fr_24rem]">
+        <div className="lg:max-w-2xl">
+          <Subheading as="h3">Open positions</Subheading>
+          <div>
+            <table className="w-full text-left">
+              <colgroup>
+                <col className="w-2/3" />
+                <col className="w-1/3" />
+                <col className="w-0" />
+              </colgroup>
+              <thead className="sr-only">
+                <tr>
+                  <th scope="col">Title</th>
+                  <th scope="col">Location</th>
+                  <th scope="col">Read more</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th scope="colgroup" colSpan={3} className="px-0 pt-10 pb-0">
+                    <div className="-mx-4 rounded-lg bg-gray-50 px-4 py-3 text-sm/6 font-semibold">
+                      Engineering
+                    </div>
+                  </th>
+                </tr>
+                <tr className="border-b border-dotted border-gray-200 text-sm/6 font-normal">
+                  <td className="px-0 py-4">iOS Developer</td>
+                  <td className="px-0 py-4 text-gray-600">Remote</td>
+                  <td className="px-0 py-4 text-right">
+                    <Button variant="outline" href="#">
+                      View listing
+                    </Button>
+                  </td>
+                </tr>
+                <tr className="border-b border-dotted border-gray-200 text-sm/6 font-normal">
+                  <td className="px-0 py-4">Backend Engineer</td>
+                  <td className="px-0 py-4 text-gray-600">Remote</td>
+                  <td className="px-0 py-4 text-right">
+                    <Button variant="outline" href="#">
+                      View listing
+                    </Button>
+                  </td>
+                </tr>
+                <tr className="text-sm/6 font-normal">
+                  <td className="px-0 py-4">Product Engineer</td>
+                  <td className="px-0 py-4 text-gray-600">Remote</td>
+                  <td className="px-0 py-4 text-right">
+                    <Button variant="outline" href="#">
+                      View listing
+                    </Button>
+                  </td>
+                </tr>
+                <tr>
+                  <th scope="colgroup" colSpan={3} className="px-0 pt-5 pb-0">
+                    <div className="-mx-4 rounded-lg bg-gray-50 px-4 py-3 text-sm/6 font-semibold">
+                      Design
+                    </div>
+                  </th>
+                </tr>
+                <tr className="border-b border-dotted border-gray-200 text-sm/6 font-normal">
+                  <td className="px-0 py-4">Principal Designer</td>
+                  <td className="px-0 py-4 text-gray-600">Remote</td>
+                  <td className="px-0 py-4 text-right">
+                    <Button variant="outline" href="#">
+                      View listing
+                    </Button>
+                  </td>
+                </tr>
+                <tr className="border-b border-dotted border-gray-200 text-sm/6 font-normal">
+                  <td className="px-0 py-4">Designer</td>
+                  <td className="px-0 py-4 text-gray-600">Remote</td>
+                  <td className="px-0 py-4 text-right">
+                    <Button variant="outline" href="#">
+                      View listing
+                    </Button>
+                  </td>
+                </tr>
+                <tr className="text-sm/6 font-normal">
+                  <td className="px-0 py-4">Senior Designer</td>
+                  <td className="px-0 py-4 text-gray-600">Remote</td>
+                  <td className="px-0 py-4 text-right">
+                    <Button variant="outline" href="#">
+                      View listing
+                    </Button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <Testimonial />
+      </div>
+    </Container>
+  )
+}

src/components/companytestimonial.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+export function CompanyTestimonial() {
+  return (
+    <div className="relative flex aspect-square flex-col justify-end overflow-hidden rounded-3xl lg:aspect-4/3">
+      <img
+        alt=""
+        src="/company/jimmy.webp"
+        className="absolute inset-0 object-cover"
+      />
+      <div
+        aria-hidden="true"
+        className="absolute inset-0 rounded-3xl bg-linear-to-t from-black from-10% to-50% ring-1 ring-gray-950/10 ring-inset lg:from-25%"
+      />
+      <figure className="relative p-10 mt-8">
+        <blockquote>
+          <p className="relative text-xl/7 text-white before:absolute before:-translate-x-full">
+            I'm impressed with the speed and efficiency of the Indaba team, and what have been accomplished so far.
+          </p>
+        </blockquote>
+        <figcaption className="border-t border-white/20 pt-6">
+          <p className="text-sm/6 font-medium text-white">Jimmy Wales</p>
+          <p className="text-sm/6 font-medium">
+            <span className="bg-linear-to-r from-[#cfbeff] from-28% via-[#ba87ee] via-70% to-[#b060ff] bg-clip-text text-transparent">
+              Founder of Wikipedia
+            </span>
+          </p>
+        </figcaption>
+      </figure>
+    </div>
+  )
+}

src/components/ecosystem.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import { clsx } from 'clsx'
+import { ChevronRightIcon } from '@heroicons/react/20/solid'    
+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'
+
+
+export default function Ecosystem() {
+  return (
+    <div className="bg-white py-24 mt-12">
+      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-4">
+        <Subheading>Ecosystem Overview</Subheading>
+       <Heading as="h1" className=' mt-8'>
+          Building Blocks of Transformation
+        </Heading>
+
+        <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:auto-rows-fr">
+          {/* Left 3 columns */}
+          <div className="relative lg:col-span-3">
+            <div className="absolute inset-px rounded-lg bg-indigo-50 max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
+              <img
+                alt=""
+                src="/company/studio.jpg"
+                className="h-80 object-cover object-left"
+              />
+              <div className="p-10 pt-4">
+                <p className="mt-2 text-2xl font-medium tracking-tight">Indaba Studios</p>
+                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                  A global engagement platform empowering people everywhere to contribute to the integral development of young people — so they can grow in dignity, flourish fully, and serve the common good.
+                </p>
+                <a href="https://indaba.world" className="mt-4 inline-flex items-center text-indigo-600 hover:text-indigo-700">
+                  Visit Indaba Studios
+                  <ChevronRightIcon className="ml-2 h-5 w-5" />
+                </a>
+              </div>
+            </div>
+          </div>
+
+          {/* Top right: 2 equally sized columns */}
+          <div className="lg:col-span-3 grid grid-cols-2 gap-4">
+            <div className="relative">
+              <div className="absolute inset-px rounded-lg bg-indigo-50" />
+              <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
+                <img
+                  alt=""
+                  src="/company/os.jpg"
+                  className="h-80 object-cover object-left"
+                />
+                <div className="p-10 pt-4">
+                  <p className="mt-2 text-2xl font-medium tracking-tight text-gray-950">IndabaOS</p>
+                  <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                    The tech infrastructure that invites the world to accelerate the transition toward high quality youth development.
+                  </p>
+                  <a href="https://indaba.world" className="mt-4 inline-flex items-center text-indigo-600 hover:text-indigo-700">
+                  Learn More
+                  <ChevronRightIcon className="ml-2 h-5 w-5" />
+                </a>
+                </div>
+              </div>
+            </div>
+
+            <div className="relative">
+              <div className="absolute inset-px rounded-lg bg-indigo-50" />
+              <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
+                <img
+                  alt=""
+                  src="/company/certification.jpg"
+                  className="h-80 object-cover object-left"
+                />
+                <div className="p-10 pt-4">
+                  <p className="mt-2 text-2xl font-medium tracking-tight text-gray-950">Certifications</p>
+                  <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                    Recognition frameworks that validate skills, experiences, and contributions across the Indaba ecosystem.
+                  </p>
+                  <a href="https://indaba.world" className="mt-4 inline-flex items-center text-indigo-600 hover:text-indigo-700">
+                  Learn More
+                  <ChevronRightIcon className="ml-2 h-5 w-5" />
+                </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom row: 3 columns */}
+          <div className="relative lg:col-span-2">
+            <div className="absolute inset-px rounded-lg bg-indigo-50" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
+              <img
+                alt=""
+                src="/company/foundation.jpg"
+                className="h-80 object-cover"
+              />
+              <div className="p-10 pt-4">
+                <p className="mt-2 text-2xl font-medium tracking-tight text-gray-950">Indaba Foundation</p>
+                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                 A lighthouse to empower nannies, teachers, caregivers and school operators to reshape the landscape and trajectory of education in africa and then expand to other region. 
+                </p>
+                <a href="https://indaba.world" className="mt-4 inline-flex items-center text-indigo-600 hover:text-indigo-700">
+                  Learn More
+                  <ChevronRightIcon className="ml-2 h-5 w-5" />
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <div className="relative lg:col-span-2">
+            <div className="absolute inset-px rounded-lg bg-indigo-50" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
+              <img
+                alt=""
+                src="/company/schools.jpg"
+                className="h-80 object-cover"
+              />
+              <div className="p-10 pt-4">
+                <p className="mt-2 text-2xl font-medium tracking-tight text-gray-950">Indaba Institute </p>
+                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                  A global collaborative effort to build a purpose driven wikipidia, Spotify of youth development.
+                </p>
+                <a href="https://indaba.world" className="mt-4 inline-flex items-center text-indigo-600 hover:text-indigo-700">
+                  Learn More
+                  <ChevronRightIcon className="ml-2 h-5 w-5" />
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <div className="relative lg:col-span-2">
+            <div className="absolute inset-px rounded-lg bg-indigo-50" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
+              <img
+                alt=""
+                src="/company/patronages.jpg"
+                className="h-80 object-cover"
+              />
+              <div className="p-10 pt-4">
+                <p className="mt-2 text-2xl font-medium tracking-tight text-gray-950">ECD Teachers</p>
+                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                  A giving model that invites aligned individuals and organizations to invest in systemic, community-led transformation.
+                </p>
+                <a href="https://indaba.world" className="mt-4 inline-flex items-center text-indigo-600 hover:text-indigo-700">
+                  Learn More
+                  <ChevronRightIcon className="ml-2 h-5 w-5" />
+                </a>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/text.tsx

@@ -49,7 +49,7 @@ export function Lead({
 }: React.ComponentPropsWithoutRef<'p'>) {
   return (
     <p
-      className={clsx(className, 'text-2xl font-medium text-gray-500')}
+      className={clsx(className, 'text-2xl font-light text-gray-600')}
       {...props}
     />
   )