add proiect page

.next/app-build-manifest.json

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

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

@@ -3,5 +3,6 @@
   "/pricing/page": "app/pricing/page.js",
   "/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"
 }

.next/server/webpack-runtime.js

@@ -130,7 +130,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("1939d4096b1f2a53")
+/******/ 		__webpack_require__.h = () => ("d48305e944df72bf")
 /******/ 	})();
 /******/ 	
 /******/ 	/* 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\"] = (\"6b75327ec027\");\nif (true) { module.hot.accept() }\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKGFwcC1wYWdlcy1icm93c2VyKS8uL3NyYy9zdHlsZXMvdGFpbHdpbmQuY3NzIiwibWFwcGluZ3MiOiI7QUFBQSwrREFBZSxjQUFjO0FBQzdCLElBQUksSUFBVSxJQUFJLGlCQUFpQiIsInNvdXJjZXMiOlsid2VicGFjazovL19OX0UvLi9zcmMvc3R5bGVzL3RhaWx3aW5kLmNzcz83NTBkIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IFwiNmI3NTMyN2VjMDI3XCJcbmlmIChtb2R1bGUuaG90KSB7IG1vZHVsZS5ob3QuYWNjZXB0KCkgfVxuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9\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\"] = (\"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"));
 
 /***/ })
 

.next/static/chunks/webpack.js

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

src/app/projects/page.tsx

@@ -0,0 +1,273 @@
+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'
+
+export const metadata: Metadata = {
+  title: 'Projects',
+  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">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-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>
+  )
+}
+
+function Person({
+  name,
+  description,
+  img,
+}: {
+  name: string
+  description: string
+  img: string
+}) {
+  return (
+    <li className="flex items-center gap-6">
+      <img alt="" src={img} className="size-16 rounded-full" />
+      <div className="text-base/7">
+        <h3 className="font-medium text-lg">{name}</h3>
+        <p className="text-gray-500 text-base">{description}</p>
+      </div>
+    </li>
+  )
+}
+
+import { CompanyTestimonial } from '@/components/companytestimonial'
+import { CTA } from '@/components/cta'
+
+function Team() {
+  return (
+    <Container className="mt-24">
+      <Subheading>Meet the team</Subheading>
+      <Heading as="h3" className="mt-2">
+        Founded by educators, activists, and systems changers.
+      </Heading>
+      <Lead className="mt-6 max-w-2xl">
+        Indaba is founded by community leaders and backed by investors who believe in the power of meaningful participation.
+      </Lead>
+      <div className="mt-8 grid grid-cols-1 gap-12 lg:grid-cols-2">
+        <div className="max-w-lg">
+          <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-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-12">
+            <Button className="w-full sm:w-auto" href="#">
+              Get Involved
+            </Button>
+          </div>
+        </div>
+        <div className="max-lg:order-first max-lg:max-w-lg">
+          <CompanyTestimonial />
+        </div>
+      </div>
+      <Subheading as="h3" className="mt-24">
+        Team Members
+      </Subheading>
+      <Heading as="h3" className="mt-2">
+        An experienced and purpose-driven team
+      </Heading>
+      <hr className="mt-6 border-t border-gray-200" />
+      <ul
+        role="list"
+        className="mx-auto mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"
+      >
+        <Person
+          name="Gregory Flipo"
+          description="Co-Founder & CEO"
+          img="/team/gregory-flipo.jpg"
+        />
+        <Person
+          name="Layal Fayad"
+          description="Head of Learning and Development"
+          img="/team/layal-fayad.jpg"
+        />
+        <Person
+          name="Thijs Westerveld"
+          description="CTO – AI Leader"
+          img="/team/thijs-westerveld.jpg"
+        />
+        <Person
+          name="Sacha Obeegadoo"
+          description="COO"
+          img="/team/sacha-obeegadoo.jpg"
+        />
+        <Person
+          name="Gerben de Vries"
+          description="AI Research Engineer"
+          img="/team/gerben-de-vries.jpg"
+        />
+        <Person
+          name=""
+          description="Plus over +100 engineers, business developers, advisors and other team members."
+          img="/team/team.jpg"
+        />
+      </ul>
+    </Container>
+  )
+}
+
+function Investors() {
+  return (
+    <Container className="my-32">
+      <Subheading>Board Members</Subheading>
+      <Heading as="h3" className="mt-2">
+        Benefit from experts of various ventures
+      </Heading>
+      <Lead className="mt-6 max-w-3xl">
+        Backed by top-tier board members, mentors and industry leaders who bring deep insights, networks, and execution power.
+      </Lead>
+      <hr className="mt-6 border-t border-gray-200" />
+      <ul
+        role="list"
+        className="mx-auto mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"
+      >
+        <Person
+          name="Ahmer Inam"
+          description="CEO of Cognisese"
+          img="/team/ahmer-inam.jpg"
+        />
+        <Person
+          name="Florian Fournier"
+          description="Co-Founder of Ourworld"
+          img="/team/florian-fournier.jpg"
+        />
+        <Person
+          name="André Shearer"
+          description="Co-Founder and CEO, Indaba"
+          img="/team/andre-shearer.jpg"
+        />
+        <Person
+          name="Kristof de Spiegeleer"
+          description="CEO of Ourworld"
+          img="/team/kristof-de-spiegeleer.jpg"
+        />
+        <Person
+          name="Thomas Becker"
+          description="Serial Innovator"
+          img="/team/thomas-becker.jpg"
+        />
+
+      </ul>
+    </Container>
+  )
+}
+
+
+
+
+
+export default function Company() {
+  return (
+    <main className="overflow-hidden">
+      <GradientLight />
+      <Container>
+        <Navbar color="black" />
+      </Container>
+      <Header />
+       <Ecosystem />
+      <Team />
+      <Investors />
+      <CTA />
+      <Footer />
+    </main>
+  )
+}

src/components/navbar.tsx

@@ -13,7 +13,7 @@ import { PlusGrid, PlusGridItem, PlusGridRow } from './plus-grid'
 
 const links = [
   { href: '/company', label: 'About' },
-  { href: '/pricing', label: 'Projects' },
+  { href: '/projects', label: 'Projects' },
   { href: '/blog', label: 'Blog' },
   { href: '/login', label: 'Get Involved' },
 ]