add gitignore

.gitignore

@@ -1 +1,56 @@
-node_modules
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+.env.development
+.env.test
+.env.production
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# Logs
+logs
+*.log
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Sanity
+/dist

.next/app-build-manifest.json

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

.next/build-manifest.json

@@ -2,7 +2,9 @@
   "polyfillFiles": [
     "static/chunks/polyfills.js"
   ],
-  "devFiles": [],
+  "devFiles": [
+    "static/chunks/react-refresh.js"
+  ],
   "ampDevFiles": [],
   "lowPriorityFiles": [
     "static/development/_buildManifest.js",
@@ -13,7 +15,16 @@
     "static/chunks/main-app.js"
   ],
   "pages": {
-    "/_app": []
+    "/_app": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_app.js"
+    ],
+    "/_error": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_error.js"
+    ]
   },
   "ampFirstPages": []
 }

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

@@ -1,5 +1,4 @@
 {
-  "/_not-found/page": "app/_not-found/page.js",
+  "/page": "app/page.js",
-  "/favicon.ico/route": "app/favicon.ico/route.js",
+  "/favicon.ico/route": "app/favicon.ico/route.js"
-  "/page": "app/page.js"
 }

.next/server/middleware-build-manifest.js

@@ -2,7 +2,9 @@ self.__BUILD_MANIFEST = {
   "polyfillFiles": [
     "static/chunks/polyfills.js"
   ],
-  "devFiles": [],
+  "devFiles": [
+    "static/chunks/react-refresh.js"
+  ],
   "ampDevFiles": [],
   "lowPriorityFiles": [],
   "rootMainFiles": [
@@ -10,7 +12,16 @@ self.__BUILD_MANIFEST = {
     "static/chunks/main-app.js"
   ],
   "pages": {
-    "/_app": []
+    "/_app": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_app.js"
+    ],
+    "/_error": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_error.js"
+    ]
   },
   "ampFirstPages": []
 };

.next/server/pages-manifest.json

@@ -1 +1,5 @@
-{}
+{
+  "/_error": "pages/_error.js",
+  "/_app": "pages/_app.js",
+  "/_document": "pages/_document.js"
+}

.next/server/webpack-runtime.js

@@ -130,7 +130,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("56c9b2cc61f04024")
+/******/ 		__webpack_require__.h = () => ("6323d4b4a98ea250")
 /******/ 	})();
 /******/ 	
 /******/ 	/* 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\"] = (\"edb9e1afdba2\");\nif (true) { module.hot.accept() }\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKGFwcC1wYWdlcy1icm93c2VyKS8uL3NyYy9zdHlsZXMvdGFpbHdpbmQuY3NzIiwibWFwcGluZ3MiOiI7QUFBQSwrREFBZSxjQUFjO0FBQzdCLElBQUksSUFBVSxJQUFJLGlCQUFpQiIsInNvdXJjZXMiOlsid2VicGFjazovL19OX0UvLi9zcmMvc3R5bGVzL3RhaWx3aW5kLmNzcz83NTBkIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IFwiZWRiOWUxYWZkYmEyXCJcbmlmIChtb2R1bGUuaG90KSB7IG1vZHVsZS5ob3QuYWNjZXB0KCkgfVxuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9\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\"] = (\"d8d001526ad3\");\nif (true) { module.hot.accept() }\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKGFwcC1wYWdlcy1icm93c2VyKS8uL3NyYy9zdHlsZXMvdGFpbHdpbmQuY3NzIiwibWFwcGluZ3MiOiI7QUFBQSwrREFBZSxjQUFjO0FBQzdCLElBQUksSUFBVSxJQUFJLGlCQUFpQiIsInNvdXJjZXMiOlsid2VicGFjazovL19OX0UvLi9zcmMvc3R5bGVzL3RhaWx3aW5kLmNzcz83NTBkIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IFwiZDhkMDAxNTI2YWQzXCJcbmlmIChtb2R1bGUuaG90KSB7IG1vZHVsZS5ob3QuYWNjZXB0KCkgfVxuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9\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 "4c594765be1ca7b3"; }
+/******/ 		__webpack_require__.h = function() { return "b0ff53148ab83c56"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

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

@@ -349,15 +349,24 @@
   .-z-10 {
     z-index: calc(10 * -1);
   }
+  .-z-15 {
+    z-index: calc(15 * -1);
+  }
   .z-0 {
     z-index: 0;
   }
   .z-10 {
     z-index: 10;
   }
+  .z-15 {
+    z-index: 15;
+  }
   .z-20 {
     z-index: 20;
   }
+  .z-30 {
+    z-index: 30;
+  }
   .order-first {
     order: -9999;
   }
@@ -1051,6 +1060,9 @@
   .bg-indigo-500 {
     background-color: var(--color-indigo-500);
   }
+  .bg-indigo-600 {
+    background-color: var(--color-indigo-600);
+  }
   .bg-indigo-800\/35 {
     background-color: color-mix(in srgb, oklch(39.8% 0.195 277.366) 35%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1428,6 +1440,9 @@
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
+  .px-3\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -1446,6 +1461,9 @@
   .py-1\.5 {
     padding-block: calc(var(--spacing) * 1.5);
   }
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
@@ -1455,6 +1473,9 @@
   .py-10 {
     padding-block: calc(var(--spacing) * 10);
   }
+  .py-12 {
+    padding-block: calc(var(--spacing) * 12);
+  }
   .py-24 {
     padding-block: calc(var(--spacing) * 24);
   }
@@ -1527,6 +1548,9 @@
   .pb-24 {
     padding-bottom: calc(var(--spacing) * 24);
   }
+  .pb-32 {
+    padding-bottom: calc(var(--spacing) * 32);
+  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -1603,6 +1627,10 @@
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
   }
+  .text-lg\/8 {
+    font-size: var(--text-lg);
+    line-height: calc(var(--spacing) * 8);
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -2162,6 +2190,13 @@
       padding-bottom: calc(calc(var(--spacing) * 2) + 1px);
     }
   }
+  .hover\:bg-indigo-500 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-indigo-500);
+      }
+    }
+  }
   .hover\:text-gray-600 {
     &:hover {
       @media (hover: hover) {
@@ -2169,6 +2204,22 @@
       }
     }
   }
+  .focus-visible\:outline-2 {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+  .focus-visible\:outline-offset-2 {
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+  }
+  .focus-visible\:outline-indigo-600 {
+    &:focus-visible {
+      outline-color: var(--color-indigo-600);
+    }
+  }
   .has-\[br\]\:mb-8 {
     &:has(*:is(br)) {
       margin-bottom: calc(var(--spacing) * 8);
@@ -2575,6 +2626,16 @@
       padding: calc(var(--spacing) * 12);
     }
   }
+  .sm\:px-6 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
+  .sm\:py-32 {
+    @media (width >= 40rem) {
+      padding-block: calc(var(--spacing) * 32);
+    }
+  }
   .sm\:pt-16 {
     @media (width >= 40rem) {
       padding-top: calc(var(--spacing) * 16);
@@ -2835,6 +2896,21 @@
       padding-inline: calc(var(--spacing) * 16);
     }
   }
+  .lg\:py-24 {
+    @media (width >= 64rem) {
+      padding-block: calc(var(--spacing) * 24);
+    }
+  }
+  .lg\:py-32 {
+    @media (width >= 64rem) {
+      padding-block: calc(var(--spacing) * 32);
+    }
+  }
+  .lg\:py-45 {
+    @media (width >= 64rem) {
+      padding-block: calc(var(--spacing) * 45);
+    }
+  }
   .lg\:py-56 {
     @media (width >= 64rem) {
       padding-block: calc(var(--spacing) * 56);

.next/static/development/_buildManifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST = {__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},sortedPages:["\u002F_app"]};self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()
+self.__BUILD_MANIFEST = {__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/_error":["static\u002Fchunks\u002Fpages\u002F_error.js"],sortedPages:["\u002F_app","\u002F_error"]};self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()

src/app/page.tsx

@@ -197,6 +197,30 @@ function DarkBentoSection() {
   )
 }
 
+function CTA() {
+  return (
+    <div className="bg-white ">
+      <div className="px-6 pt-24 pb-32 sm:px-6 lg:px-8 ">
+        <div className="mx-auto max-w-3xl text-center">
+          <h2 className="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">
+            Empower a Generation. Join the Movement.
+          </h2>
+          <p className="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-600">
+            Help build a future where every young person can thrive — through holistic education, cultural connection, and community-led innovation.
+          </p>
+          <div className="mt-10 flex items-center justify-center gap-x-6">
+            <Button href="/get-involved">Get Involved</Button>
+            <Button variant="secondary" href="/contact">
+              Contact Us
+            </Button> 
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+
 
 export default function Home() {
   return (
@@ -213,6 +237,7 @@ export default function Home() {
         <Portfolio />
         <IndabaOs />
         <FeaturedTestimonial />
+        <CTA />
       </main>
       <Footer />
     </div>

src/components/featuredtestimonial.tsx

@@ -1,64 +1,66 @@
+import { clsx } from 'clsx'
+
 const featuredTestimonial = {
-  body: 'Integer id nunc sit semper purus. Bibendum at lacus ut arcu blandit montes vitae auctor libero. Hac condimentum dignissim nibh vulputate ut nunc. Amet nibh orci mi venenatis blandit vel et proin. Non hendrerit in vel ac diam.',
+  body: 'Indaba changed the way I look at education. It made me realize that learning isn\'t about memorization, it\'s about becoming a better version of myself every day.',
   author: {
-    name: 'Brenna Goyette',
+    name: 'Thando Mokoena',
-    handle: 'brennagoyette',
+    handle: 'thando.m',
-    imageUrl:
+    imageUrl: 'https://randomuser.me/api/portraits/women/44.jpg',
-      'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=1024&h=1024&q=80',
+    logoUrl: '/logo-cloud/transistor.svg',
-    logoUrl: 'https://tailwindcss.com/plus-assets/img/logos/savvycal-logo-gray-900.svg',
   },
 }
+
 const testimonials = [
   [
     [
       {
-        body: 'Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.',
+        body: 'Before Indaba, I felt lost about my future. Now, I\'m running a local business and mentoring others in my community.',
         author: {
-          name: 'Leslie Alexander',
+          name: 'Ayanda Dlamini',
-          handle: 'lesliealexander',
+          handle: 'ayanda_d',
-          imageUrl:
+          imageUrl: 'https://randomuser.me/api/portraits/men/12.jpg',
-            'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+        },
+      },
+      {
+        body: 'Indaba opened doors for me that I never thought existed. I learned more in a few weeks than in years of school.',
+        author: {
+          name: 'Naledi K.',
+          handle: 'naledi_edu',
+          imageUrl: 'https://randomuser.me/api/portraits/women/22.jpg',
         },
       },
-      // More testimonials...
     ],
     [
       {
-        body: 'Aut reprehenderit voluptatem eum asperiores beatae id. Iure molestiae ipsam ut officia rem nulla blanditiis.',
+        body: 'I didn\'t just gain skills — I gained confidence. Indaba is like having a community that believes in you.',
         author: {
-          name: 'Lindsay Walton',
+          name: 'Kgosi Molefe',
-          handle: 'lindsaywalton',
+          handle: 'kgosi.dev',
-          imageUrl:
+          imageUrl: 'https://randomuser.me/api/portraits/men/33.jpg',
-            'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
         },
       },
-      // More testimonials...
     ],
   ],
   [
     [
       {
-        body: 'Voluptas quos itaque ipsam in voluptatem est. Iste eos blanditiis repudiandae. Earum deserunt enim molestiae ipsum perferendis recusandae saepe corrupti.',
+        body: 'This is what learning should be — inclusive, exciting, and deeply personal.',
         author: {
-          name: 'Tom Cook',
+          name: 'Samir Patel',
-          handle: 'tomcook',
+          handle: 'samirlearns',
-          imageUrl:
+          imageUrl: 'https://randomuser.me/api/portraits/men/45.jpg',
-            'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
         },
       },
-      // More testimonials...
     ],
     [
       {
-        body: 'Molestias ea earum quos nostrum doloremque sed. Quaerat quasi aut velit incidunt excepturi rerum voluptatem minus harum.',
+        body: 'I used to think tech was only for others. Now I build and share things that make a difference. Indaba did that.',
         author: {
-          name: 'Leonard Krasner',
+          name: 'Katlego M.',
-          handle: 'leonardkrasner',
+          handle: 'katcode',
-          imageUrl:
+          imageUrl: 'https://randomuser.me/api/portraits/men/71.jpg',
-            'https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
         },
       },
-      // More testimonials...
     ],
   ],
 ]
@@ -82,23 +84,11 @@ export default function Example() {
           className="ml-[max(50%,38rem)] aspect-1313/771 w-328.25 bg-linear-to-tr from-[#ff80b5] to-[#9089fc]"
         />
       </div>
-      <div
-        aria-hidden="true"
-        className="absolute inset-x-0 top-0 -z-10 flex transform-gpu overflow-hidden pt-32 opacity-25 blur-3xl sm:pt-40 xl:justify-end"
-      >
-        <div
-          style={{
-            clipPath:
-              'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-          }}
-          className="ml-[-22rem] aspect-1313/771 w-328.25 flex-none origin-top-right rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] xl:mr-[calc(50%-12rem)] xl:ml-0"
-        />
-      </div>
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl text-center">
           <h2 className="text-base/7 font-semibold text-indigo-600">Testimonials</h2>
           <p className="mt-2 text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">
-            We have worked with thousands of amazing people
+            Voices from Our Community
           </p>
         </div>
         <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 grid-rows-1 gap-8 text-sm/6 text-gray-900 sm:mt-20 sm:grid-cols-2 xl:mx-0 xl:max-w-none xl:grid-flow-col xl:grid-cols-4">
@@ -114,7 +104,7 @@ export default function Example() {
               />
               <div className="flex-auto">
                 <div className="font-semibold">{featuredTestimonial.author.name}</div>
-                <div className="text-gray-600">{`@${featuredTestimonial.author.handle}`}</div>
+                <div className="text-gray-600">@{featuredTestimonial.author.handle}</div>
               </div>
               <img alt="" src={featuredTestimonial.author.logoUrl} className="h-10 w-auto flex-none" />
             </figcaption>
@@ -144,7 +134,7 @@ export default function Example() {
                         <img alt="" src={testimonial.author.imageUrl} className="size-10 rounded-full bg-gray-50" />
                         <div>
                           <div className="font-semibold">{testimonial.author.name}</div>
-                          <div className="text-gray-600">{`@${testimonial.author.handle}`}</div>
+                          <div className="text-gray-600">@{testimonial.author.handle}</div>
                         </div>
                       </figcaption>
                     </figure>

src/components/footer.tsx

@@ -126,7 +126,7 @@ function SocialLinks() {
 function Copyright() {
   return (
     <div className="text-sm/6 text-white">
-      &copy; {new Date().getFullYear()} Radiant Inc.
+      &copy; {new Date().getFullYear()} Indaba Inc.
     </div>
   )
 }

src/components/indabaos.tsx

@@ -15,12 +15,12 @@ export function IndabaOs() {
   return (
     <div className="pt-24 pb-24">
       <div className="mx-auto max-w-7xl h-3/4 px-6 lg:px-8">
-        <div className="relative isolate overflow-hidden bg-white px-6 py-24 lg:py-56 lg:px-8 rounded-2xl min-h-[700px]">
+        <div className="relative isolate overflow-hidden bg-white px-6 py-24 lg:py-45 lg:px-8 rounded-2xl min-h-[700px]">
           {/* Background image */}
           <img
             alt=""
             src="/indabaos/earth.png"
-            className="absolute inset-0 -z-10 size-full w-full object-cover"
+            className="absolute inset-0 -z-15 size-full w-full object-cover"
           />
 
           {/* Dark overlay on image */}
@@ -36,18 +36,18 @@ export function IndabaOs() {
           </div>
 
           {/* Text content */}
-          <div className="relative z-10 mx-auto max-w-2xl text-center">
+          <div className="relative z-10 mx-auto max-w-2xl mt-10 text-center">
             <h2 className="text-4xl font-medium tracking-tight text-white sm:text-5xl">
               IndabaOS
             </h2>
-            <p className="mt-8 text-lg font-light text-pretty text-white sm:text-xl/8">
+            <p className="mt-4 text-lg font-light text-pretty text-white sm:text-xl/8">
               Introducing the tech infrastructure that invites the world to accelerate the transition toward high quality youth development.
             </p>
           </div>
 
           {/* Stats integrated into background */}
-          <div className="relative z-10 mt-10">
+          <div className="relative z-10 mt-16">
-            <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 text-center max-w-5xl mx-auto">
+            <dl className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 text-center max-w-5xl mx-auto">
               {stats.map((stat) => (
                 <div key={stat.id} className="flex flex-col items-center bg-white/10 rounded-xl p-6 backdrop-blur-md shadow-md">
                   <img