add projects

.next/server/webpack-runtime.js

@@ -130,7 +130,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("d48305e944df72bf")
+/******/ 		__webpack_require__.h = () => ("a667c6158f1911e7")
 /******/ 	})();
 /******/ 	
 /******/ 	/* 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\"] = (\"84929442ba99\");\nif (true) { module.hot.accept() }\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKGFwcC1wYWdlcy1icm93c2VyKS8uL3NyYy9zdHlsZXMvdGFpbHdpbmQuY3NzIiwibWFwcGluZ3MiOiI7QUFBQSwrREFBZSxjQUFjO0FBQzdCLElBQUksSUFBVSxJQUFJLGlCQUFpQiIsInNvdXJjZXMiOlsid2VicGFjazovL19OX0UvLi9zcmMvc3R5bGVzL3RhaWx3aW5kLmNzcz83NTBkIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IFwiODQ5Mjk0NDJiYTk5XCJcbmlmIChtb2R1bGUuaG90KSB7IG1vZHVsZS5ob3QuYWNjZXB0KCkgfVxuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9\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\"] = (\"c6d264bb68a0\");\nif (true) { module.hot.accept() }\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKGFwcC1wYWdlcy1icm93c2VyKS8uL3NyYy9zdHlsZXMvdGFpbHdpbmQuY3NzIiwibWFwcGluZ3MiOiI7QUFBQSwrREFBZSxjQUFjO0FBQzdCLElBQUksSUFBVSxJQUFJLGlCQUFpQiIsInNvdXJjZXMiOlsid2VicGFjazovL19OX0UvLi9zcmMvc3R5bGVzL3RhaWx3aW5kLmNzcz83NTBkIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IFwiYzZkMjY0YmI2OGEwXCJcbmlmIChtb2R1bGUuaG90KSB7IG1vZHVsZS5ob3QuYWNjZXB0KCkgfVxuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9\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 "a31a2c8549f07b3f"; }
+/******/ 		__webpack_require__.h = function() { return "209bc45e80e27d6b"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

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

@@ -76,6 +76,7 @@
     --tracking-tighter: -0.05em;
     --tracking-tight: -0.025em;
     --tracking-widest: 0.1em;
+    --leading-tight: 1.25;
     --leading-normal: 1.5;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -297,6 +298,9 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1 {
+    top: calc(var(--spacing) * 1);
+  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
@@ -342,6 +346,9 @@
   .-left-2 {
     left: calc(var(--spacing) * -2);
   }
+  .left-1 {
+    left: calc(var(--spacing) * 1);
+  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -703,6 +710,9 @@
   .w-3\/5 {
     width: calc(3/5 * 100%);
   }
+  .w-3xl {
+    width: var(--container-3xl);
+  }
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
@@ -968,6 +978,9 @@
   .gap-y-12 {
     row-gap: calc(var(--spacing) * 12);
   }
+  .gap-y-16 {
+    row-gap: calc(var(--spacing) * 16);
+  }
   .gap-y-20 {
     row-gap: calc(var(--spacing) * 20);
   }
@@ -1748,6 +1761,9 @@
   .pl-6 {
     padding-left: calc(var(--spacing) * 6);
   }
+  .pl-9 {
+    padding-left: calc(var(--spacing) * 9);
+  }
   .pl-10 {
     padding-left: calc(var(--spacing) * 10);
   }
@@ -1823,6 +1839,10 @@
     font-size: var(--text-lg);
     line-height: calc(var(--spacing) * 8);
   }
+  .text-lg\/9 {
+    font-size: var(--text-lg);
+    line-height: calc(var(--spacing) * 9);
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -1871,6 +1891,10 @@
     --tw-leading: var(--leading-normal);
     line-height: var(--leading-normal);
   }
+  .leading-tight {
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -2064,6 +2088,12 @@
   .ring-gray-200 {
     --tw-ring-color: var(--color-gray-200);
   }
+  .ring-gray-400\/10 {
+    --tw-ring-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-gray-400) 10%, transparent);
+    }
+  }
   .ring-gray-900\/5 {
     --tw-ring-color: color-mix(in srgb, oklch(21% 0.034 264.665) 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2828,6 +2858,11 @@
       width: calc(var(--spacing) * 216);
     }
   }
+  .sm\:w-228 {
+    @media (width >= 40rem) {
+      width: calc(var(--spacing) * 228);
+    }
+  }
   .sm\:w-288\.75 {
     @media (width >= 40rem) {
       width: calc(var(--spacing) * 288.75);
@@ -2878,6 +2913,11 @@
       flex-wrap: nowrap;
     }
   }
+  .sm\:gap-y-20 {
+    @media (width >= 40rem) {
+      row-gap: calc(var(--spacing) * 20);
+    }
+  }
   .sm\:from-25\% {
     @media (width >= 40rem) {
       --tw-gradient-from-position: 25%;
@@ -2948,6 +2988,11 @@
       right: calc(var(--spacing) * 0);
     }
   }
+  .md\:-ml-4 {
+    @media (width >= 48rem) {
+      margin-left: calc(var(--spacing) * -4);
+    }
+  }
   .lg\:col-span-1 {
     @media (width >= 64rem) {
       grid-column: span 1 / span 1;
@@ -2993,6 +3038,11 @@
       margin-right: calc(var(--spacing) * -16);
     }
   }
+  .lg\:-ml-0 {
+    @media (width >= 64rem) {
+      margin-left: calc(var(--spacing) * -0);
+    }
+  }
   .lg\:ml-24 {
     @media (width >= 64rem) {
       margin-left: calc(var(--spacing) * 24);
@@ -3053,6 +3103,21 @@
       max-width: var(--container-7xl);
     }
   }
+  .lg\:max-w-lg {
+    @media (width >= 64rem) {
+      max-width: var(--container-lg);
+    }
+  }
+  .lg\:max-w-none {
+    @media (width >= 64rem) {
+      max-width: none;
+    }
+  }
+  .lg\:max-w-xl {
+    @media (width >= 64rem) {
+      max-width: var(--container-xl);
+    }
+  }
   .lg\:basis-5\/12 {
     @media (width >= 64rem) {
       flex-basis: calc(5/12 * 100%);
@@ -3183,6 +3248,11 @@
       padding: calc(var(--spacing) * 8);
     }
   }
+  .lg\:px-0 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 0);
+    }
+  }
   .lg\:px-4 {
     @media (width >= 64rem) {
       padding-inline: calc(var(--spacing) * 4);
@@ -3223,6 +3293,11 @@
       padding-block: calc(var(--spacing) * 56);
     }
   }
+  .lg\:pt-4 {
+    @media (width >= 64rem) {
+      padding-top: calc(var(--spacing) * 4);
+    }
+  }
   .lg\:pt-6 {
     @media (width >= 64rem) {
       padding-top: calc(var(--spacing) * 6);
@@ -3243,6 +3318,11 @@
       padding-top: calc(var(--spacing) * 45);
     }
   }
+  .lg\:pr-8 {
+    @media (width >= 64rem) {
+      padding-right: calc(var(--spacing) * 8);
+    }
+  }
   .lg\:pb-6 {
     @media (width >= 64rem) {
       padding-bottom: calc(var(--spacing) * 6);

src/app/projects/page.tsx

@@ -7,6 +7,7 @@ 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'
 
 export const metadata: Metadata = {
   title: 'Projects',
@@ -18,96 +19,76 @@ function Header() {
   return (
     <Container className="mt-16">
       <div className='lg:max-w-6xl'>
-        <Heading as="h1">An Ecosystem to accelerate the transition toward quality education for all.</Heading>
+        <Heading as="h1">Deliver Transformational Learning – Anywhere.</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.
+           From early childhood to vocational skills and lifelong learning, Indaba brings transformative education directly to the communities that need it most. 
           </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-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-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">
-          <div className="-mx-8 grid grid-cols-2 gap-4 sm:-mx-16 sm:grid-cols-4 lg:mx-0 lg:grid-cols-2 lg:gap-4">
-            <div className="aspect-square overflow-hidden rounded-xl shadow-xl outline-1 -outline-offset-1 outline-black/10">
-              <img
-                alt=""
-                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.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.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.webp"
-                className="block size-full object-cover"
-              />
-            </div>
-          </div>
-        </div>
-        <div className="max-lg:mt-16 lg:col-span-1">
-          <Subheading>The Numbers</Subheading>
-          <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">Lessons</dt>
-              <dd className="order-first text-6xl font-medium tracking-tight">
-                $<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">Resources</dt>
-              <dd className="order-first text-6xl font-medium tracking-tight">
-                <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">Users</dt>
-              <dd className="order-first text-6xl font-medium tracking-tight">
-                <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">Stipendum</dt>
-              <dd className="order-first text-6xl font-medium tracking-tight">
-                <AnimatedNumber start={10} end={60} />M
-              </dd>
-            </div>
-          </dl>
-        </div>
-      </section>
     </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>
+  )
+}
+
+
 function Person({
   name,
   description,
@@ -263,6 +244,7 @@ export default function Company() {
         <Navbar color="black" />
       </Container>
       <Header />
+      <Overview />
        <Ecosystem />
       <Team />
       <Investors />