add about

.next/app-build-manifest.json

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

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

@@ -1,4 +1,5 @@
 {
+  "/_not-found/page": "app/_not-found/page.js",
   "/page": "app/page.js",
   "/pricing/page": "app/pricing/page.js",
   "/company/page": "app/company/page.js",

.next/server/vendor-chunks/@heroicons.js

@@ -21,6 +21,16 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "(ssr)/./node_modules/@heroicons/react/20/solid/esm/ChevronRightIcon.js":
+/*!************************************************************************!*\
+  !*** ./node_modules/@heroicons/react/20/solid/esm/ChevronRightIcon.js ***!
+  \************************************************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"(ssr)/./node_modules/next/dist/server/future/route-modules/app-page/vendored/ssr/react.js\");\n\nfunction ChevronRightIcon({ title, titleId, ...props }, svgRef) {\n    return /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"svg\", Object.assign({\n        xmlns: \"http://www.w3.org/2000/svg\",\n        viewBox: \"0 0 20 20\",\n        fill: \"currentColor\",\n        \"aria-hidden\": \"true\",\n        \"data-slot\": \"icon\",\n        ref: svgRef,\n        \"aria-labelledby\": titleId\n    }, props), title ? /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"title\", {\n        id: titleId\n    }, title) : null, /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"path\", {\n        fillRule: \"evenodd\",\n        d: \"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\",\n        clipRule: \"evenodd\"\n    }));\n}\nconst ForwardRef = /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(ChevronRightIcon);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ForwardRef);\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKHNzcikvLi9ub2RlX21vZHVsZXMvQGhlcm9pY29ucy9yZWFjdC8yMC9zb2xpZC9lc20vQ2hldnJvblJpZ2h0SWNvbi5qcyIsIm1hcHBpbmdzIjoiOzs7OztBQUErQjtBQUMvQixTQUFTQyxpQkFBaUIsRUFDeEJDLEtBQUssRUFDTEMsT0FBTyxFQUNQLEdBQUdDLE9BQ0osRUFBRUMsTUFBTTtJQUNQLE9BQU8sV0FBVyxHQUFFTCxnREFBbUIsQ0FBQyxPQUFPTyxPQUFPQyxNQUFNLENBQUM7UUFDM0RDLE9BQU87UUFDUEMsU0FBUztRQUNUQyxNQUFNO1FBQ04sZUFBZTtRQUNmLGFBQWE7UUFDYkMsS0FBS1A7UUFDTCxtQkFBbUJGO0lBQ3JCLEdBQUdDLFFBQVFGLFFBQVEsV0FBVyxHQUFFRixnREFBbUIsQ0FBQyxTQUFTO1FBQzNEYSxJQUFJVjtJQUNOLEdBQUdELFNBQVMsTUFBTSxXQUFXLEdBQUVGLGdEQUFtQixDQUFDLFFBQVE7UUFDekRjLFVBQVU7UUFDVkMsR0FBRztRQUNIQyxVQUFVO0lBQ1o7QUFDRjtBQUNBLE1BQU1DLGFBQWEsV0FBVyxHQUFHakIsNkNBQWdCLENBQUNDO0FBQ2xELGlFQUFlZ0IsVUFBVUEsRUFBQyIsInNvdXJjZXMiOlsid2VicGFjazovL3JhZGlhbnQvLi9ub2RlX21vZHVsZXMvQGhlcm9pY29ucy9yZWFjdC8yMC9zb2xpZC9lc20vQ2hldnJvblJpZ2h0SWNvbi5qcz8zMmQ3Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuZnVuY3Rpb24gQ2hldnJvblJpZ2h0SWNvbih7XG4gIHRpdGxlLFxuICB0aXRsZUlkLFxuICAuLi5wcm9wc1xufSwgc3ZnUmVmKSB7XG4gIHJldHVybiAvKiNfX1BVUkVfXyovUmVhY3QuY3JlYXRlRWxlbWVudChcInN2Z1wiLCBPYmplY3QuYXNzaWduKHtcbiAgICB4bWxuczogXCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiLFxuICAgIHZpZXdCb3g6IFwiMCAwIDIwIDIwXCIsXG4gICAgZmlsbDogXCJjdXJyZW50Q29sb3JcIixcbiAgICBcImFyaWEtaGlkZGVuXCI6IFwidHJ1ZVwiLFxuICAgIFwiZGF0YS1zbG90XCI6IFwiaWNvblwiLFxuICAgIHJlZjogc3ZnUmVmLFxuICAgIFwiYXJpYS1sYWJlbGxlZGJ5XCI6IHRpdGxlSWRcbiAgfSwgcHJvcHMpLCB0aXRsZSA/IC8qI19fUFVSRV9fKi9SZWFjdC5jcmVhdGVFbGVtZW50KFwidGl0bGVcIiwge1xuICAgIGlkOiB0aXRsZUlkXG4gIH0sIHRpdGxlKSA6IG51bGwsIC8qI19fUFVSRV9fKi9SZWFjdC5jcmVhdGVFbGVtZW50KFwicGF0aFwiLCB7XG4gICAgZmlsbFJ1bGU6IFwiZXZlbm9kZFwiLFxuICAgIGQ6IFwiTTguMjIgNS4yMmEuNzUuNzUgMCAwIDEgMS4wNiAwbDQuMjUgNC4yNWEuNzUuNzUgMCAwIDEgMCAxLjA2bC00LjI1IDQuMjVhLjc1Ljc1IDAgMCAxLTEuMDYtMS4wNkwxMS45NCAxMCA4LjIyIDYuMjhhLjc1Ljc1IDAgMCAxIDAtMS4wNlpcIixcbiAgICBjbGlwUnVsZTogXCJldmVub2RkXCJcbiAgfSkpO1xufVxuY29uc3QgRm9yd2FyZFJlZiA9IC8qI19fUFVSRV9fKi8gUmVhY3QuZm9yd2FyZFJlZihDaGV2cm9uUmlnaHRJY29uKTtcbmV4cG9ydCBkZWZhdWx0IEZvcndhcmRSZWY7Il0sIm5hbWVzIjpbIlJlYWN0IiwiQ2hldnJvblJpZ2h0SWNvbiIsInRpdGxlIiwidGl0bGVJZCIsInByb3BzIiwic3ZnUmVmIiwiY3JlYXRlRWxlbWVudCIsIk9iamVjdCIsImFzc2lnbiIsInhtbG5zIiwidmlld0JveCIsImZpbGwiLCJyZWYiLCJpZCIsImZpbGxSdWxlIiwiZCIsImNsaXBSdWxlIiwiRm9yd2FyZFJlZiIsImZvcndhcmRSZWYiXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///(ssr)/./node_modules/@heroicons/react/20/solid/esm/ChevronRightIcon.js\n");
+
+/***/ }),
+
 /***/ "(ssr)/./node_modules/@heroicons/react/24/solid/esm/Bars2Icon.js":
 /*!*****************************************************************!*\
   !*** ./node_modules/@heroicons/react/24/solid/esm/Bars2Icon.js ***!

.next/server/webpack-runtime.js

@@ -130,7 +130,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("8c9009fed6ce7989")
+/******/ 		__webpack_require__.h = () => ("5c6bfc62d660e98c")
 /******/ 	})();
 /******/ 	
 /******/ 	/* 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\"] = (\"658b83bbb048\");\nif (true) { module.hot.accept() }\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKGFwcC1wYWdlcy1icm93c2VyKS8uL3NyYy9zdHlsZXMvdGFpbHdpbmQuY3NzIiwibWFwcGluZ3MiOiI7QUFBQSwrREFBZSxjQUFjO0FBQzdCLElBQUksSUFBVSxJQUFJLGlCQUFpQiIsInNvdXJjZXMiOlsid2VicGFjazovL19OX0UvLi9zcmMvc3R5bGVzL3RhaWx3aW5kLmNzcz83NTBkIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IFwiNjU4YjgzYmJiMDQ4XCJcbmlmIChtb2R1bGUuaG90KSB7IG1vZHVsZS5ob3QuYWNjZXB0KCkgfVxuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9\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\"] = (\"fb112017315c\");\nif (true) { module.hot.accept() }\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKGFwcC1wYWdlcy1icm93c2VyKS8uL3NyYy9zdHlsZXMvdGFpbHdpbmQuY3NzIiwibWFwcGluZ3MiOiI7QUFBQSwrREFBZSxjQUFjO0FBQzdCLElBQUksSUFBVSxJQUFJLGlCQUFpQiIsInNvdXJjZXMiOlsid2VicGFjazovL19OX0UvLi9zcmMvc3R5bGVzL3RhaWx3aW5kLmNzcz83NTBkIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IFwiZmIxMTIwMTczMTVjXCJcbmlmIChtb2R1bGUuaG90KSB7IG1vZHVsZS5ob3QuYWNjZXB0KCkgfVxuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9\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 "1f0397ddc1b92e85"; }
+/******/ 		__webpack_require__.h = function() { return "e7cbea1b671cb413"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

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

@@ -20,6 +20,7 @@
     --color-indigo-400: oklch(67.3% 0.182 276.935);
     --color-indigo-500: oklch(58.5% 0.233 277.117);
     --color-indigo-600: oklch(51.1% 0.262 276.966);
+    --color-indigo-700: oklch(45.7% 0.24 277.023);
     --color-indigo-800: oklch(39.8% 0.195 277.366);
     --color-indigo-900: oklch(35.9% 0.144 278.697);
     --color-gray-50: oklch(98.5% 0.002 247.839);
@@ -43,6 +44,7 @@
     --container-2xl: 42rem;
     --container-3xl: 48rem;
     --container-5xl: 64rem;
+    --container-6xl: 72rem;
     --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-sm: 0.875rem;
@@ -268,6 +270,9 @@
   .inset-2 {
     inset: calc(var(--spacing) * 2);
   }
+  .inset-px {
+    inset: 1px;
+  }
   .inset-x-0 {
     inset-inline: calc(var(--spacing) * 0);
   }
@@ -502,6 +507,9 @@
   .mb-0\.5 {
     margin-bottom: calc(var(--spacing) * 0.5);
   }
+  .mb-8 {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
   .mb-10 {
     margin-bottom: calc(var(--spacing) * 10);
   }
@@ -514,6 +522,9 @@
   .ml-0\.5 {
     margin-left: calc(var(--spacing) * 0.5);
   }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
   .ml-\[-22rem\] {
     margin-left: -22rem;
   }
@@ -629,6 +640,9 @@
   .h-3\/4 {
     height: calc(3/4 * 100%);
   }
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
@@ -689,6 +703,9 @@
   .w-3\/5 {
     width: calc(3/5 * 100%);
   }
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
   .w-45 {
     width: calc(var(--spacing) * 45);
   }
@@ -731,6 +748,9 @@
   .max-w-5xl {
     max-width: var(--container-5xl);
   }
+  .max-w-6xl {
+    max-width: var(--container-6xl);
+  }
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
@@ -770,6 +790,9 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .grow {
+    flex-grow: 1;
+  }
   .origin-top-right {
     transform-origin: top right;
   }
@@ -978,6 +1001,9 @@
   .rounded-\[calc\(var\(--radius\)\+var\(--padding\)\)\] {
     border-radius: calc(var(--radius) + var(--padding));
   }
+  .rounded-\[calc\(var\(--radius-lg\)\+1px\)\] {
+    border-radius: calc(var(--radius-lg) + 1px);
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -1213,6 +1239,10 @@
     --tw-gradient-from: #7d59ff;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .from-\[\#8b62f3\] {
+    --tw-gradient-from: #8b62f3;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .from-\[\#8d80ff\] {
     --tw-gradient-from: #8d80ff;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1221,6 +1251,10 @@
     --tw-gradient-from: #490ae7;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .from-\[\#7848f3\] {
+    --tw-gradient-from: #7848f3;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .from-\[\#ac97f7\] {
     --tw-gradient-from: #ac97f7;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1229,6 +1263,10 @@
     --tw-gradient-from: #b79fff;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .from-\[\#cfbeff\] {
+    --tw-gradient-from: #cfbeff;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .from-\[\#e6d7ff\] {
     --tw-gradient-from: #e6d7ff;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1343,6 +1381,11 @@
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
+  .via-\[\#ba87ee\] {
+    --tw-gradient-via: #ba87ee;
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
   .via-\[\#ee87cb\] {
     --tw-gradient-via: #ee87cb;
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
@@ -1441,6 +1484,9 @@
     }
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .to-30\% {
+    --tw-gradient-to-position: 30%;
+  }
   .to-35\% {
     --tw-gradient-to-position: 35%;
   }
@@ -1537,6 +1583,9 @@
   .object-cover {
     object-fit: cover;
   }
+  .object-left {
+    object-position: left;
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -1615,6 +1664,9 @@
   .py-24 {
     padding-block: calc(var(--spacing) * 24);
   }
+  .py-242 {
+    padding-block: calc(var(--spacing) * 242);
+  }
   .py-\[calc\(--spacing\(1\.5\)-1px\)\] {
     padding-block: calc(calc(var(--spacing) * 1.5) - 1px);
   }
@@ -1763,6 +1815,10 @@
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
   }
+  .text-lg\/6 {
+    font-size: var(--text-lg);
+    line-height: calc(var(--spacing) * 6);
+  }
   .text-lg\/8 {
     font-size: var(--text-lg);
     line-height: calc(var(--spacing) * 8);
@@ -1771,6 +1827,10 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-sm\/4 {
+    font-size: var(--text-sm);
+    line-height: calc(var(--spacing) * 4);
+  }
   .text-sm\/5 {
     font-size: var(--text-sm);
     line-height: calc(var(--spacing) * 5);
@@ -1858,6 +1918,9 @@
   .text-gray-100 {
     color: var(--color-gray-100);
   }
+  .text-gray-200 {
+    color: var(--color-gray-200);
+  }
   .text-gray-500 {
     color: var(--color-gray-500);
   }
@@ -2258,6 +2321,20 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .before\:content-\[\'\"\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '"';
+      content: var(--tw-content);
+    }
+  }
+  .before\:content-\[\'\\u0022\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '\u0022';
+      content: var(--tw-content);
+    }
+  }
   .before\:content-\[\'“\'\] {
     &::before {
       content: var(--tw-content);
@@ -2290,6 +2367,20 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .after\:content-\[\'\"\'\] {
+    &::after {
+      content: var(--tw-content);
+      --tw-content: '"';
+      content: var(--tw-content);
+    }
+  }
+  .after\:content-\[\'\\u0022\'\] {
+    &::after {
+      content: var(--tw-content);
+      --tw-content: '\u0022';
+      content: var(--tw-content);
+    }
+  }
   .after\:content-\[\'”\'\] {
     &::after {
       content: var(--tw-content);
@@ -2343,6 +2434,13 @@
       }
     }
   }
+  .hover\:text-indigo-700 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-indigo-700);
+      }
+    }
+  }
   .focus-visible\:outline-2 {
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -2915,6 +3013,16 @@
       aspect-ratio: 3/4;
     }
   }
+  .lg\:aspect-4\/3 {
+    @media (width >= 64rem) {
+      aspect-ratio: 4/3;
+    }
+  }
+  .lg\:aspect-5\/4 {
+    @media (width >= 64rem) {
+      aspect-ratio: 5/4;
+    }
+  }
   .lg\:max-w-2xl {
     @media (width >= 64rem) {
       max-width: var(--container-2xl);
@@ -2930,6 +3038,11 @@
       max-width: var(--container-5xl);
     }
   }
+  .lg\:max-w-6xl {
+    @media (width >= 64rem) {
+      max-width: var(--container-6xl);
+    }
+  }
   .lg\:max-w-7xl {
     @media (width >= 64rem) {
       max-width: var(--container-7xl);
@@ -2945,6 +3058,11 @@
       flex-basis: calc(7/12 * 100%);
     }
   }
+  .lg\:auto-rows-fr {
+    @media (width >= 64rem) {
+      grid-auto-rows: minmax(0, 1fr);
+    }
+  }
   .lg\:grid-cols-2 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3060,6 +3178,16 @@
       padding: calc(var(--spacing) * 8);
     }
   }
+  .lg\:px-4 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+  }
+  .lg\:px-6 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
   .lg\:px-8 {
     @media (width >= 64rem) {
       padding-inline: calc(var(--spacing) * 8);

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>
+      <div className='lg:max-w-6xl'>
-      <Lead className="mt-6 max-w-3xl">
+        <Heading as="h1">An Ecosystem to accelerate the transition toward quality education for all.</Heading>
-        We’re on a mission to transform revenue organizations by harnessing vast
+          <Lead className="mt-8 max-w-3xl">
-        amounts of illegally acquired customer data.
+           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>
+          </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>
+          <h2 className="text-2xl font-medium tracking-tight">Our Mission</h2>
-          <p className="mt-6 text-sm/6 text-gray-600">
+          <p className="mt-6 text-md/6 text-gray-600">
-            At Indaba, we are dedicated to transforming the way communities engage and collaborate. Our mission is to provide our
+            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.
-            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.
           </p>
-          <p className="mt-8 text-sm/6 text-gray-600">
+          <p className="mt-8 text-md/6 text-gray-600">
-            We’re customer-obsessed — putting the time in to build a detailed
+            Our focus is laser-sharp across three priority areas:
-            financial picture of every one of our customers so that we know more
+          </p>
-            about your business than you do. We are in this together, mostly
+          <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">
-            because we are all implicated in large-scale financial crime. In our
+            Early Childhood Development<br></br>
-            history as a company, we’ve never lost a customer, because if any
+            Afterschool & Extracurricular Empowerment<br></br>
-            one of us talks, we all go down.
+            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">
+          <p className="text-md/6 text-gray-600">
-            Years ago, while working as sales associates at rival companies,
+            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.
-            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>
-          <p className="mt-8 text-sm/6 text-gray-600">
+          <p className="mt-8 text-md/6 text-gray-600">
-            Today, Indaba transforms communities by harnessing
+            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.
-            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>
           <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">
+          <CompanyTestimonial />
-            <img
-              alt=""
-              src="/company/5.jpg"
-              className="block size-full object-cover"
-            />
-          </div>
         </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}
     />
   )