add get involved

add stripe
add proje
2025-06-12 15:59:12 +02:00 · 2025-06-12 15:06:38 +02:00 · 2025-06-12 14:23:09 +02:00
75 changed files with 1510 additions and 105 deletions
--- a/.env.local
+++ b/.env.local
@ -1,2 +1,7 @@
 NEXT_PUBLIC_SANITY_PROJECT_ID="52bw4362"
 NEXT_PUBLIC_SANITY_DATASET="production"
+
+STRIPE_SECRET_KEY=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
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_51MCkZTC7LG8OeRdIRFrRUKWKhAieVcRd7qfov3pihJmVkjWs0auwf8N90tnmbBvkeTcU1eGcy94dfP7QVvuyPkAK00IcInuXj9
+
+NEXT_PUBLIC_BASE_URL=http://localhost:3000
--- a/.next/app-build-manifest.json
+++ b/.next/app-build-manifest.json
@ -35,6 +35,11 @@
      "static/chunks/webpack.js",
      "static/chunks/main-app.js",
      "static/chunks/app/projects/page.js"
+    ],
+    "/participate/page": [
+      "static/chunks/webpack.js",
+      "static/chunks/main-app.js",
+      "static/chunks/app/participate/page.js"
    ]
  }
 }
--- a/.next/cache/webpack/client-development-fallback/0.pack.gz
+++ b/.next/cache/webpack/client-development-fallback/0.pack.gz
--- a/.next/cache/webpack/client-development-fallback/index.pack.gz
+++ b/.next/cache/webpack/client-development-fallback/index.pack.gz
--- a/.next/cache/webpack/client-development-fallback/index.pack.gz.old
+++ b/.next/cache/webpack/client-development-fallback/index.pack.gz.old
--- a/.next/cache/webpack/client-development/0.pack.gz
+++ b/.next/cache/webpack/client-development/0.pack.gz
--- a/.next/cache/webpack/client-development/1.pack.gz
+++ b/.next/cache/webpack/client-development/1.pack.gz
--- a/.next/cache/webpack/client-development/10.pack.gz
+++ b/.next/cache/webpack/client-development/10.pack.gz
--- a/.next/cache/webpack/client-development/11.pack.gz
+++ b/.next/cache/webpack/client-development/11.pack.gz
--- a/.next/cache/webpack/client-development/12.pack.gz
+++ b/.next/cache/webpack/client-development/12.pack.gz
--- a/.next/cache/webpack/client-development/13.pack.gz
+++ b/.next/cache/webpack/client-development/13.pack.gz
--- a/.next/cache/webpack/client-development/14.pack.gz
+++ b/.next/cache/webpack/client-development/14.pack.gz
--- a/.next/cache/webpack/client-development/15.pack.gz
+++ b/.next/cache/webpack/client-development/15.pack.gz
--- a/.next/cache/webpack/client-development/16.pack.gz
+++ b/.next/cache/webpack/client-development/16.pack.gz
--- a/.next/cache/webpack/client-development/17.pack.gz
+++ b/.next/cache/webpack/client-development/17.pack.gz
--- a/.next/cache/webpack/client-development/18.pack.gz
+++ b/.next/cache/webpack/client-development/18.pack.gz
--- a/.next/cache/webpack/client-development/19.pack.gz
+++ b/.next/cache/webpack/client-development/19.pack.gz
--- a/.next/cache/webpack/client-development/2.pack.gz
+++ b/.next/cache/webpack/client-development/2.pack.gz
--- a/.next/cache/webpack/client-development/20.pack.gz
+++ b/.next/cache/webpack/client-development/20.pack.gz
--- a/.next/cache/webpack/client-development/3.pack.gz
+++ b/.next/cache/webpack/client-development/3.pack.gz
--- a/.next/cache/webpack/client-development/4.pack.gz
+++ b/.next/cache/webpack/client-development/4.pack.gz
--- a/.next/cache/webpack/client-development/5.pack.gz
+++ b/.next/cache/webpack/client-development/5.pack.gz
--- a/.next/cache/webpack/client-development/6.pack.gz
+++ b/.next/cache/webpack/client-development/6.pack.gz
--- a/.next/cache/webpack/client-development/8.pack.gz
+++ b/.next/cache/webpack/client-development/8.pack.gz
--- a/.next/cache/webpack/client-development/9.pack.gz
+++ b/.next/cache/webpack/client-development/9.pack.gz
--- a/.next/cache/webpack/client-development/index.pack.gz
+++ b/.next/cache/webpack/client-development/index.pack.gz
--- a/.next/cache/webpack/client-development/index.pack.gz.old
+++ b/.next/cache/webpack/client-development/index.pack.gz.old
--- a/.next/cache/webpack/server-development/0.pack.gz
+++ b/.next/cache/webpack/server-development/0.pack.gz
--- a/.next/cache/webpack/server-development/1.pack.gz
+++ b/.next/cache/webpack/server-development/1.pack.gz
--- a/.next/cache/webpack/server-development/10.pack.gz
+++ b/.next/cache/webpack/server-development/10.pack.gz
--- a/.next/cache/webpack/server-development/11.pack.gz
+++ b/.next/cache/webpack/server-development/11.pack.gz
--- a/.next/cache/webpack/server-development/12.pack.gz
+++ b/.next/cache/webpack/server-development/12.pack.gz
--- a/.next/cache/webpack/server-development/13.pack.gz
+++ b/.next/cache/webpack/server-development/13.pack.gz
--- a/.next/cache/webpack/server-development/14.pack.gz
+++ b/.next/cache/webpack/server-development/14.pack.gz
--- a/.next/cache/webpack/server-development/15.pack.gz
+++ b/.next/cache/webpack/server-development/15.pack.gz
--- a/.next/cache/webpack/server-development/16.pack.gz
+++ b/.next/cache/webpack/server-development/16.pack.gz
--- a/.next/cache/webpack/server-development/2.pack.gz
+++ b/.next/cache/webpack/server-development/2.pack.gz
--- a/.next/cache/webpack/server-development/4.pack.gz
+++ b/.next/cache/webpack/server-development/4.pack.gz
--- a/.next/cache/webpack/server-development/5.pack.gz
+++ b/.next/cache/webpack/server-development/5.pack.gz
--- a/.next/cache/webpack/server-development/6.pack.gz
+++ b/.next/cache/webpack/server-development/6.pack.gz
--- a/.next/cache/webpack/server-development/7.pack.gz
+++ b/.next/cache/webpack/server-development/7.pack.gz
--- a/.next/cache/webpack/server-development/8.pack.gz
+++ b/.next/cache/webpack/server-development/8.pack.gz
--- a/.next/cache/webpack/server-development/9.pack.gz
+++ b/.next/cache/webpack/server-development/9.pack.gz
--- a/.next/cache/webpack/server-development/index.pack.gz
+++ b/.next/cache/webpack/server-development/index.pack.gz
--- a/.next/cache/webpack/server-development/index.pack.gz.old
+++ b/.next/cache/webpack/server-development/index.pack.gz.old
--- a/.next/server/app-paths-manifest.json
+++ b/.next/server/app-paths-manifest.json
@ -1,8 +1,8 @@
 {
  "/page": "app/page.js",
-  "/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"
+  "/favicon.ico/route": "app/favicon.ico/route.js",
+  "/participate/page": "app/participate/page.js"
 }
--- a/.next/server/app/_not-found/page_client-reference-manifest.js
+++ b/.next/server/app/_not-found/page_client-reference-manifest.js
--- a/.next/server/app/page.js
+++ b/.next/server/app/page.js
--- a/.next/server/app/page_client-reference-manifest.js
+++ b/.next/server/app/page_client-reference-manifest.js
--- a/.next/server/vendor-chunks/@heroicons.js
+++ b/.next/server/vendor-chunks/@heroicons.js
@ -81,16 +81,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac

 /***/ }),

-/***/ "(rsc)/./node_modules/@heroicons/react/16/solid/esm/MinusIcon.js":
-/*!*****************************************************************!*\
-  !*** ./node_modules/@heroicons/react/16/solid/esm/MinusIcon.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 */ \"(rsc)/./node_modules/next/dist/server/future/route-modules/app-page/vendored/rsc/react.js\");\n\nfunction MinusIcon({\n  title,\n  titleId,\n  ...props\n}, 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 16 16\",\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    d: \"M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z\"\n  }));\n}\nconst ForwardRef = /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(MinusIcon);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ForwardRef);//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKHJzYykvLi9ub2RlX21vZHVsZXMvQGhlcm9pY29ucy9yZWFjdC8xNi9zb2xpZC9lc20vTWludXNJY29uLmpzIiwibWFwcGluZ3MiOiI7Ozs7O0FBQStCO0FBQy9CO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsQ0FBQztBQUNELHNCQUFzQixnREFBbUI7QUFDekM7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxHQUFHLCtCQUErQixnREFBbUI7QUFDckQ7QUFDQSxHQUFHLDhCQUE4QixnREFBbUI7QUFDcEQ7QUFDQSxHQUFHO0FBQ0g7QUFDQSxpQ0FBaUMsNkNBQWdCO0FBQ2pELGlFQUFlLFVBQVUiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9yYWRpYW50Ly4vbm9kZV9tb2R1bGVzL0BoZXJvaWNvbnMvcmVhY3QvMTYvc29saWQvZXNtL01pbnVzSWNvbi5qcz9iMzcwIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuZnVuY3Rpb24gTWludXNJY29uKHtcbiAgdGl0bGUsXG4gIHRpdGxlSWQsXG4gIC4uLnByb3BzXG59LCBzdmdSZWYpIHtcbiAgcmV0dXJuIC8qI19fUFVSRV9fKi9SZWFjdC5jcmVhdGVFbGVtZW50KFwic3ZnXCIsIE9iamVjdC5hc3NpZ24oe1xuICAgIHhtbG5zOiBcImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIsXG4gICAgdmlld0JveDogXCIwIDAgMTYgMTZcIixcbiAgICBmaWxsOiBcImN1cnJlbnRDb2xvclwiLFxuICAgIFwiYXJpYS1oaWRkZW5cIjogXCJ0cnVlXCIsXG4gICAgXCJkYXRhLXNsb3RcIjogXCJpY29uXCIsXG4gICAgcmVmOiBzdmdSZWYsXG4gICAgXCJhcmlhLWxhYmVsbGVkYnlcIjogdGl0bGVJZFxuICB9LCBwcm9wcyksIHRpdGxlID8gLyojX19QVVJFX18qL1JlYWN0LmNyZWF0ZUVsZW1lbnQoXCJ0aXRsZVwiLCB7XG4gICAgaWQ6IHRpdGxlSWRcbiAgfSwgdGl0bGUpIDogbnVsbCwgLyojX19QVVJFX18qL1JlYWN0LmNyZWF0ZUVsZW1lbnQoXCJwYXRoXCIsIHtcbiAgICBkOiBcIk0zLjc1IDcuMjVhLjc1Ljc1IDAgMCAwIDAgMS41aDguNWEuNzUuNzUgMCAwIDAgMC0xLjVoLTguNVpcIlxuICB9KSk7XG59XG5jb25zdCBGb3J3YXJkUmVmID0gLyojX19QVVJFX18qLyBSZWFjdC5mb3J3YXJkUmVmKE1pbnVzSWNvbik7XG5leHBvcnQgZGVmYXVsdCBGb3J3YXJkUmVmOyJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///(rsc)/./node_modules/@heroicons/react/16/solid/esm/MinusIcon.js\n");
-
-/***/ }),
-
 /***/ "(rsc)/./node_modules/@heroicons/react/16/solid/esm/RssIcon.js":
 /*!***************************************************************!*\
  !*** ./node_modules/@heroicons/react/16/solid/esm/RssIcon.js ***!
--- a/.next/server/webpack-runtime.js
+++ b/.next/server/webpack-runtime.js
@ -130,7 +130,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("d78dfb4d5bc33823")
+/******/ 		__webpack_require__.h = () => ("8d1cca70236eb5e9")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
--- a/.next/static/chunks/app/layout.js
+++ b/.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\"] = (\"c8fca2e32337\");\nif (true) { module.hot.accept() }\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKGFwcC1wYWdlcy1icm93c2VyKS8uL3NyYy9zdHlsZXMvdGFpbHdpbmQuY3NzIiwibWFwcGluZ3MiOiI7QUFBQSwrREFBZSxjQUFjO0FBQzdCLElBQUksSUFBVSxJQUFJLGlCQUFpQiIsInNvdXJjZXMiOlsid2VicGFjazovL19OX0UvLi9zcmMvc3R5bGVzL3RhaWx3aW5kLmNzcz83NTBkIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IFwiYzhmY2EyZTMyMzM3XCJcbmlmIChtb2R1bGUuaG90KSB7IG1vZHVsZS5ob3QuYWNjZXB0KCkgfVxuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9\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\"] = (\"1d2992a8823b\");\nif (true) { module.hot.accept() }\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiKGFwcC1wYWdlcy1icm93c2VyKS8uL3NyYy9zdHlsZXMvdGFpbHdpbmQuY3NzIiwibWFwcGluZ3MiOiI7QUFBQSwrREFBZSxjQUFjO0FBQzdCLElBQUksSUFBVSxJQUFJLGlCQUFpQiIsInNvdXJjZXMiOlsid2VicGFjazovL19OX0UvLi9zcmMvc3R5bGVzL3RhaWx3aW5kLmNzcz83NTBkIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IFwiMWQyOTkyYTg4MjNiXCJcbmlmIChtb2R1bGUuaG90KSB7IG1vZHVsZS5ob3QuYWNjZXB0KCkgfVxuIl0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///(app-pages-browser)/./src/styles/tailwind.css\n"));

 /***/ })

--- a/.next/static/chunks/app/page.js
+++ b/.next/static/chunks/app/page.js
--- a/.next/static/chunks/webpack.js
+++ b/.next/static/chunks/webpack.js
@ -192,7 +192,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	!function() {
-/******/ 		__webpack_require__.h = function() { return "0d2cb1503b82df35"; }
+/******/ 		__webpack_require__.h = function() { return "618bf6ca7801d4a0"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/global */
--- a/.next/static/css/app/layout.css
+++ b/.next/static/css/app/layout.css
@ -43,10 +43,12 @@
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
+    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
@ -85,8 +87,10 @@
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;
+    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
    --blur-md: 12px;
    --blur-3xl: 64px;
+    --aspect-video: 16 / 9;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
@ -448,6 +452,9 @@
  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }
+  .my-4 {
+    margin-block: calc(var(--spacing) * 4);
+  }
  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }
@ -511,6 +518,9 @@
  .mt-auto {
    margin-top: auto;
  }
+  .-mr-2 {
+    margin-right: calc(var(--spacing) * -2);
+  }
  .mr-8 {
    margin-right: calc(var(--spacing) * 8);
  }
@ -520,6 +530,9 @@
  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * 0.5);
  }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
@ -556,6 +569,12 @@
  .ml-auto {
    margin-left: auto;
  }
+  .line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
  .block {
    display: block;
  }
@ -595,6 +614,15 @@
  .aspect-1313\/771 {
    aspect-ratio: 1313/771;
  }
+  .aspect-\[2\/3\] {
+    aspect-ratio: 2/3;
+  }
+  .aspect-\[3\/4\] {
+    aspect-ratio: 3/4;
+  }
+  .aspect-\[4\/3\] {
+    aspect-ratio: 4/3;
+  }
  .aspect-\[4\/5\] {
    aspect-ratio: 4/5;
  }
@ -610,6 +638,9 @@
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
+  .aspect-video {
+    aspect-ratio: var(--aspect-video);
+  }
  .size-0\.5 {
    width: calc(var(--spacing) * 0.5);
    height: calc(var(--spacing) * 0.5);
@ -757,6 +788,9 @@
  .w-72 {
    width: calc(var(--spacing) * 72);
  }
+  .w-91\.5 {
+    width: calc(var(--spacing) * 91.5);
+  }
  .w-104 {
    width: calc(var(--spacing) * 104);
  }
@ -778,6 +812,9 @@
  .w-full {
    width: 100%;
  }
+  .w-px {
+    width: 1px;
+  }
  .w-screen {
    width: 100vw;
  }
@ -790,6 +827,9 @@
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
+  .max-w-4xl {
+    max-width: var(--container-4xl);
+  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
@ -805,6 +845,9 @@
  .max-w-\[800px\] {
    max-width: 800px;
  }
+  .max-w-full {
+    max-width: 100%;
+  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
@ -989,6 +1032,9 @@
      margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
+  .gap-x-1 {
+    column-gap: calc(var(--spacing) * 1);
+  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
@ -1037,6 +1083,9 @@
  .overflow-hidden {
    overflow: hidden;
  }
+  .overflow-visible {
+    overflow: visible;
+  }
  .overflow-x-auto {
    overflow-x: auto;
  }
@ -1111,6 +1160,10 @@
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
@ -1140,6 +1193,9 @@
      border-color: color-mix(in oklab, var(--color-gray-900) 10%, transparent);
    }
  }
+  .border-indigo-500 {
+    border-color: var(--color-indigo-500);
+  }
  .border-transparent {
    border-color: transparent;
  }
@ -1176,9 +1232,18 @@
  .bg-gray-900 {
    background-color: var(--color-gray-900);
  }
+  .bg-gray-900\/10 {
+    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-900) 10%, transparent);
+    }
+  }
  .bg-indigo-50 {
    background-color: var(--color-indigo-50);
  }
+  .bg-indigo-100 {
+    background-color: var(--color-indigo-100);
+  }
  .bg-indigo-200\/70 {
    background-color: color-mix(in srgb, oklch(87% 0.065 274.039) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
@ -1322,6 +1387,10 @@
    --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-\[\#a680ff\] {
+    --tw-gradient-from: #a680ff;
+    --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));
@ -1330,6 +1399,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-\[\#bda2fd\] {
+    --tw-gradient-from: #bda2fd;
+    --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));
@ -1469,6 +1542,14 @@
    --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-black\/20 {
+    --tw-gradient-via: color-mix(in srgb, #000 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-via: color-mix(in oklab, var(--color-black) 20%, transparent);
+    }
+    --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-black\/30 {
    --tw-gradient-via: color-mix(in srgb, #000 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
@ -1531,6 +1612,10 @@
    --tw-gradient-to: #a8a2f9;
    --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-\[\#a59ff8\] {
+    --tw-gradient-to: #a59ff8;
+    --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-\[\#a983fb\] {
    --tw-gradient-to: #a983fb;
    --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));
@ -1602,6 +1687,9 @@
  .mask-\[linear-gradient\(to_bottom\,black_90\%\,transparent\)\,radial-gradient\(circle\,rgba\(0\,0\,0\,1\)_0\%\,rgba\(0\,0\,0\,0\)_100\%\)\] {
    mask-image: linear-gradient(to bottom,black 90%,transparent),radial-gradient(circle,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
  }
+  .mask-\[radial-gradient\(100\%_100\%_at_top_right\,white\,transparent\)\] {
+    mask-image: radial-gradient(100% 100% at top right,white,transparent);
+  }
  .bg-size-\[12px_100\%\] {
    background-size: 12px 100%;
  }
@ -1647,6 +1735,9 @@
      fill: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }
+  .fill-gray-50 {
+    fill: var(--color-gray-50);
+  }
  .fill-gray-400 {
    fill: var(--color-gray-400);
  }
@ -1674,6 +1765,9 @@
      fill: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
+  .stroke-gray-200 {
+    stroke: var(--color-gray-200);
+  }
  .stroke-white {
    stroke: var(--color-white);
  }
@ -1761,6 +1855,9 @@
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
+  .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
@ -1770,6 +1867,9 @@
  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }
+  .py-32 {
+    padding-block: calc(var(--spacing) * 32);
+  }
  .py-242 {
    padding-block: calc(var(--spacing) * 242);
  }
@ -1800,6 +1900,9 @@
  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }
+  .pt-14 {
+    padding-top: calc(var(--spacing) * 14);
+  }
  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }
@ -1978,6 +2081,10 @@
    font-size: var(--text-xl);
    line-height: calc(var(--spacing) * 8);
  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
  .text-xs\/5 {
    font-size: var(--text-xs);
    line-height: calc(var(--spacing) * 5);
@ -2047,6 +2154,9 @@
  .text-gray-300 {
    color: var(--color-gray-300);
  }
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
@ -2056,6 +2166,9 @@
  .text-gray-700 {
    color: var(--color-gray-700);
  }
+  .text-gray-800 {
+    color: var(--color-gray-800);
+  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
@ -2077,6 +2190,9 @@
  .text-indigo-600 {
    color: var(--color-indigo-600);
  }
+  .text-indigo-700 {
+    color: var(--color-indigo-700);
+  }
  .text-indigo-900 {
    color: var(--color-indigo-900);
  }
@ -2108,6 +2224,11 @@
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
+  .placeholder-gray-500 {
+    &::placeholder {
+      color: var(--color-gray-500);
+    }
+  }
  .opacity-0 {
    opacity: 0%;
  }
@ -2261,6 +2382,11 @@
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
+  .drop-shadow-xl {
+    --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1)));
+    --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl));
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
@ -2408,6 +2534,13 @@
      padding-top: calc(var(--spacing) * 5);
    }
  }
+  .group-hover\:text-gray-600 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-gray-600);
+      }
+    }
+  }
  .group-hover\:\[animation-play-state\:running\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
@ -2572,6 +2705,13 @@
      padding-bottom: calc(calc(var(--spacing) * 2) + 1px);
    }
  }
+  .hover\:bg-gray-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-100);
+      }
+    }
+  }
  .hover\:bg-gray-200 {
    &:hover {
      @media (hover: hover) {
@ -2593,6 +2733,13 @@
      }
    }
  }
+  .hover\:bg-indigo-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-indigo-700);
+      }
+    }
+  }
  .hover\:text-gray-600 {
    &:hover {
      @media (hover: hover) {
@ -2624,6 +2771,23 @@
      }
    }
  }
+  .focus\:ring-2 {
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus\:ring-indigo-500 {
+    &:focus {
+      --tw-ring-color: var(--color-indigo-500);
+    }
+  }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
  .focus-visible\:outline {
    &:focus-visible {
      outline-style: var(--tw-outline-style);
@ -2982,11 +3146,31 @@
      margin-top: calc(var(--spacing) * 20);
    }
  }
+  .sm\:mt-24 {
+    @media (width >= 40rem) {
+      margin-top: calc(var(--spacing) * 24);
+    }
+  }
+  .sm\:mb-8 {
+    @media (width >= 40rem) {
+      margin-bottom: calc(var(--spacing) * 8);
+    }
+  }
+  .sm\:flex {
+    @media (width >= 40rem) {
+      display: flex;
+    }
+  }
  .sm\:hidden {
    @media (width >= 40rem) {
      display: none;
    }
  }
+  .sm\:aspect-2\/1 {
+    @media (width >= 40rem) {
+      aspect-ratio: 2/1;
+    }
+  }
  .sm\:aspect-3\/4 {
    @media (width >= 40rem) {
      aspect-ratio: 3/4;
@ -3077,6 +3261,11 @@
      flex-wrap: nowrap;
    }
  }
+  .sm\:justify-center {
+    @media (width >= 40rem) {
+      justify-content: center;
+    }
+  }
  .sm\:gap-y-20 {
    @media (width >= 40rem) {
      row-gap: calc(var(--spacing) * 20);
@ -3107,6 +3296,11 @@
      padding-block: calc(var(--spacing) * 32);
    }
  }
+  .sm\:py-48 {
+    @media (width >= 40rem) {
+      padding-block: calc(var(--spacing) * 48);
+    }
+  }
  .sm\:pt-16 {
    @media (width >= 40rem) {
      padding-top: calc(var(--spacing) * 16);
@ -3134,6 +3328,12 @@
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
+  .sm\:text-7xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-7xl);
+      line-height: var(--tw-leading, var(--text-7xl--line-height));
+    }
+  }
  .sm\:text-sm\/6 {
    @media (width >= 40rem) {
      font-size: var(--text-sm);
@ -3202,6 +3402,11 @@
      margin-top: calc(var(--spacing) * -52);
    }
  }
+  .lg\:mt-0 {
+    @media (width >= 64rem) {
+      margin-top: calc(var(--spacing) * 0);
+    }
+  }
  .lg\:-mr-16 {
    @media (width >= 64rem) {
      margin-right: calc(var(--spacing) * -16);
@ -3287,6 +3492,21 @@
      max-width: var(--container-xl);
    }
  }
+  .lg\:flex-auto {
+    @media (width >= 64rem) {
+      flex: auto;
+    }
+  }
+  .lg\:shrink-0 {
+    @media (width >= 64rem) {
+      flex-shrink: 0;
+    }
+  }
+  .lg\:grow {
+    @media (width >= 64rem) {
+      flex-grow: 1;
+    }
+  }
  .lg\:basis-5\/12 {
    @media (width >= 64rem) {
      flex-basis: calc(5/12 * 100%);
@ -3357,6 +3577,11 @@
      flex-direction: row;
    }
  }
+  .lg\:items-center {
+    @media (width >= 64rem) {
+      align-items: center;
+    }
+  }
  .lg\:items-start {
    @media (width >= 64rem) {
      align-items: flex-start;
@ -3377,11 +3602,21 @@
      gap: calc(var(--spacing) * 12);
    }
  }
+  .lg\:gap-x-10 {
+    @media (width >= 64rem) {
+      column-gap: calc(var(--spacing) * 10);
+    }
+  }
  .lg\:gap-x-12 {
    @media (width >= 64rem) {
      column-gap: calc(var(--spacing) * 12);
    }
  }
+  .lg\:gap-x-14 {
+    @media (width >= 64rem) {
+      column-gap: calc(var(--spacing) * 14);
+    }
+  }
  .lg\:rounded-3xl {
    @media (width >= 64rem) {
      border-radius: var(--radius-3xl);
@ -3452,6 +3687,11 @@
      padding-block: calc(var(--spacing) * 32);
    }
  }
+  .lg\:py-40 {
+    @media (width >= 64rem) {
+      padding-block: calc(var(--spacing) * 40);
+    }
+  }
  .lg\:py-45 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 45);
--- a/.next/trace
+++ b/.next/trace
--- a/package-lock.json
+++ b/package-lock.json
@ -13,6 +13,7 @@
        "@sanity/icons": "^3.7.0",
        "@sanity/image-url": "^1.1.0",
        "@sanity/vision": "^3.91.0",
+        "@stripe/stripe-js": "^7.3.1",
        "clsx": "^2.1.1",
        "dayjs": "^1.11.12",
        "feed": "^4.2.2",
@ -23,6 +24,7 @@
        "react-dom": "^18",
        "react-use-measure": "^2.1.1",
        "sanity": "^3.91.0",
+        "stripe": "^18.2.1",
        "styled-components": "^6.1.18"
      },
      "devDependencies": {
@ -4180,9 +4182,9 @@
      }
    },
    "node_modules/@sanity/client": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/@sanity/client/-/client-7.4.1.tgz",
-      "integrity": "sha512-felqNJ+X3L/wpQYY8ZoOWZZRle0jHjbwJLDZF/S8qZMPRV74/HW4Ks9hUzSpLRdBozMrRwGjG0OlFqcwdtfJ+g==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@sanity/client/-/client-7.5.0.tgz",
+      "integrity": "sha512-Hy5jru/ePBlwTjc6dDxq8kqwiDbHb1l01WOQxRDITyqF8/ksa5fDcfmwjfhIBcFKkC222POd5UZ2vBsS4PSu/w==",
      "license": "MIT",
      "dependencies": {
        "@sanity/eventsource": "^5.0.2",
@ -5667,6 +5669,15 @@
        "react": "^16.14.0 || 17.x || 18.x || 19.x"
      }
    },
+    "node_modules/@stripe/stripe-js": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-7.3.1.tgz",
+      "integrity": "sha512-pTzb864TQWDRQBPLgSPFRoyjSDUqpCkbEgTzpsjiTjGz1Z5SxZNXJek28w1s6Dyry4CyW4/Izj5jHE/J9hCJYQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.16"
+      }
+    },
    "node_modules/@swc/counter": {
      "version": "0.1.3",
      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@ -6681,6 +6692,18 @@
        "node": ">= 8"
      }
    },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
    "node_modules/archiver": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/archiver/-/archiver-7.0.1.tgz",
@ -7262,6 +7285,35 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/callsites": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@ -8415,7 +8467,7 @@
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
-      "dev": true,
+      "devOptional": true,
      "license": "Apache-2.0",
      "engines": {
        "node": ">=8"
@ -8547,6 +8599,20 @@
        "node": ">=8"
      }
    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/duplexify": {
      "version": "4.1.3",
      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.3.tgz",
@ -8707,13 +8773,10 @@
      }
    },
    "node_modules/es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dev": true,
-      "dependencies": {
-        "get-intrinsic": "^1.2.4"
-      },
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
      }
@ -8722,7 +8785,6 @@
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
      "engines": {
        "node": ">= 0.4"
      }
@ -8773,10 +8835,10 @@
      }
    },
    "node_modules/es-object-atoms": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
-      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
-      "dev": true,
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
      "dependencies": {
        "es-errors": "^1.3.0"
      },
@ -10110,16 +10172,21 @@
      }
    },
    "node_modules/get-intrinsic": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-      "dev": true,
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
        "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
      },
      "engines": {
        "node": ">= 0.4"
@ -10154,6 +10221,19 @@
        "node": ">=8.0.0"
      }
    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/get-random-values": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/get-random-values/-/get-random-values-1.2.2.tgz",
@ -10404,12 +10484,12 @@
      "license": "MIT"
    },
    "node_modules/gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
      },
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
@ -10561,10 +10641,10 @@
      }
    },
    "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
      },
@ -11630,7 +11710,7 @@
      "version": "2.4.2",
      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "bin": {
        "jiti": "lib/jiti-cli.mjs"
@ -11900,7 +11980,7 @@
      "version": "1.30.1",
      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MPL-2.0",
      "dependencies": {
        "detect-libc": "^2.0.3"
@ -12386,6 +12466,15 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/md5-o-matic": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/md5-o-matic/-/md5-o-matic-0.1.1.tgz",
@ -12467,6 +12556,18 @@
        "node": ">=8.6"
      }
    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
    "node_modules/mime-db": {
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@ -12940,9 +13041,10 @@
      }
    },
    "node_modules/object-inspect": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
-      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
      },
@ -13530,11 +13632,12 @@
      "license": "ISC"
    },
    "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "license": "MIT",
      "engines": {
-        "node": ">=8.6"
+        "node": ">=12"
      },
      "funding": {
        "url": "https://github.com/sponsors/jonschlinkert"
@ -13946,6 +14049,21 @@
        "node": ">=6"
      }
    },
+    "node_modules/qs": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
+      "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/querystringify": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@ -14356,6 +14474,18 @@
        "node": ">=8.10.0"
      }
    },
+    "node_modules/readdirp/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
    "node_modules/redent": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@ -15168,15 +15298,69 @@
      }
    },
    "node_modules/side-channel": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
-      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
-      "dev": true,
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
      "dependencies": {
-        "call-bind": "^1.0.7",
        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.4",
-        "object-inspect": "^1.13.1"
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
      },
      "engines": {
        "node": ">= 0.4"
@ -15675,6 +15859,26 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/stripe": {
+      "version": "18.2.1",
+      "resolved": "https://registry.npmjs.org/stripe/-/stripe-18.2.1.tgz",
+      "integrity": "sha512-GwB1B7WSwEBzW4dilgyJruUYhbGMscrwuyHsPUmSRKrGHZ5poSh2oU9XKdii5BFVJzXHn35geRvGJ6R8bYcp8w==",
+      "license": "MIT",
+      "dependencies": {
+        "qs": "^6.11.0"
+      },
+      "engines": {
+        "node": ">=12.*"
+      },
+      "peerDependencies": {
+        "@types/node": ">=12.x.x"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/style-mod": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
@ -15963,18 +16167,6 @@
        "url": "https://github.com/sponsors/SuperchupuDev"
      }
    },
-    "node_modules/tinyglobby/node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
    "node_modules/tldts": {
      "version": "6.1.86",
      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz",
@ -16268,7 +16460,7 @@
      "version": "5.6.2",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
-      "dev": true,
+      "devOptional": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@ -16722,18 +16914,6 @@
        }
      }
    },
-    "node_modules/vite/node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
    "node_modules/void-elements": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
--- a/package.json
+++ b/package.json
@ -15,6 +15,7 @@
    "@sanity/icons": "^3.7.0",
    "@sanity/image-url": "^1.1.0",
    "@sanity/vision": "^3.91.0",
+    "@stripe/stripe-js": "^7.3.1",
    "clsx": "^2.1.1",
    "dayjs": "^1.11.12",
    "feed": "^4.2.2",
@ -25,6 +26,7 @@
    "react-dom": "^18",
    "react-use-measure": "^2.1.1",
    "sanity": "^3.91.0",
+    "stripe": "^18.2.1",
    "styled-components": "^6.1.18"
  },
  "devDependencies": {
--- a/public/participate/ambassador.jpg
+++ b/public/participate/ambassador.jpg
--- a/public/participate/choose.jpg
+++ b/public/participate/choose.jpg
--- a/public/participate/member.jpg
+++ b/public/participate/member.jpg
--- a/public/participate/patron.jpg
+++ b/public/participate/patron.jpg
--- a/public/participate/project.jpg
+++ b/public/participate/project.jpg
--- a/public/participate/volunteer.jpg
+++ b/public/participate/volunteer.jpg
--- a/public/projects/durban.jpg
+++ b/public/projects/durban.jpg
--- a/public/projects/kayamandi.jpg
+++ b/public/projects/kayamandi.jpg
--- a/public/projects/southern.jpg
+++ b/public/projects/southern.jpg
--- a/public/projects/township.jpg
+++ b/public/projects/township.jpg
--- a/src/app/api/create-checkout-session/route.ts
+++ b/src/app/api/create-checkout-session/route.ts
@ -0,0 +1,36 @@
+// src/app/api/create-checkout-session/route.ts
+import { NextResponse } from 'next/server'
+import Stripe from 'stripe'
+
+const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
+  apiVersion: '2023-08-16',
+})
+
+export async function POST(req: Request) {
+  const { amount } = await req.json()
+
+  try {
+    const session = await stripe.checkout.sessions.create({
+      payment_method_types: ['card'],
+      line_items: [
+        {
+          price_data: {
+            currency: 'usd',
+            product_data: {
+              name: 'Indaba Donation',
+            },
+            unit_amount: amount * 100,
+          },
+          quantity: 1,
+        },
+      ],
+      mode: 'payment',
+      success_url: `${process.env.NEXT_PUBLIC_BASE_URL}/success`,
+      cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}/cancel`,
+    })
+
+    return NextResponse.json({ url: session.url })
+  } catch (error) {
+    return NextResponse.json({ error: 'Stripe checkout failed' }, { status: 500 })
+  }
+}
--- a/src/app/participate/page.tsx
+++ b/src/app/participate/page.tsx
@ -0,0 +1,162 @@
+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'
+import { RocketLaunchIcon } from '@heroicons/react/20/solid'
+import Portfolio from '@/components/portfolio'
+import { Testimonials } from '@/components/testimonials'
+import { CompanyTestimonial } from '@/components/companytestimonial'
+import { CTA } from '@/components/cta'
+import { ChevronRightIcon } from '@heroicons/react/24/outline'
+import DonateButton from '@/components/donatebutton'
+import Participate from '@/components/participate'
+
+
+export const metadata: Metadata = {
+  title: 'Get Involved',
+  description:
+    'Together, we can transform education and empower future generations.',
+}
+
+function Header() {
+  return (
+      <div className="relative isolate">
+        <svg
+          aria-hidden="true"
+          className="absolute inset-0 -z-10 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-200"
+        >
+          <defs>
+            <pattern
+              x="50%"
+              y={-1}
+              id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527"
+              width={200}
+              height={200}
+              patternUnits="userSpaceOnUse"
+            >
+              <path d="M100 200V.5M.5 .5H200" fill="none" />
+            </pattern>
+          </defs>
+          <svg x="50%" y={-1} className="overflow-visible fill-gray-50">
+            <path
+              d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M-300.5 600h201v201h-201Z"
+              strokeWidth={0}
+            />
+          </svg>
+          <rect fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" width="100%" height="100%" strokeWidth={0} />
+        </svg>
+        <div className="mx-auto max-w-7xl px-6 py-24 lg:flex lg:items-center lg:gap-x-14 lg:px-8 lg:py-24">
+          <div className="mx-auto max-w-2xl lg:mx-0 lg:flex-auto ">
+            <Heading as="h1" className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
+              Your support makes transformation possible.
+            </Heading>
+            <p className="mt-8 text-lg font-light text-pretty text-gray-900 sm:text-xl/8">
+              When you give to Indaba, you’re not just donating; you’re helping rewrite the future of education, opportunity, and community resilience.</p>
+              <p className="mt-4 text-lg font-light text-pretty text-gray-900 sm:text-xl/8">
+              Whether it’s $10 or $100, every contribution fuels locally-led programs that empower young people, uplift families, and regenerate entire ecosystems.</p>
+              <p className="mt-4 text-lg font-light text-pretty text-gray-900 sm:text-xl/8">
+              Join a movement that believes in long-term change, radical transparency, and collective impact. Together, we’re building something beautiful — and you're invited.
+            </p>
+          </div>
+          <div className="mt-16 sm:mt-24 lg:mt-0 lg:shrink-0 lg:grow">
+            <DonateButton />
+          </div>
+        </div>
+      </div>
+  )
+}
+
+const posts = [
+  {
+    id: 1,
+    title: 'Volunteer Your Skills',
+    href: '#',
+    description:
+      'Lend your time, talent, or expertise — from storytelling to tech, training, or logistics. Work directly with communities or help us scale digitally.',
+    imageUrl:
+      '/participate/volunteer.jpg',
+  },
+    {
+    id: 2,
+    title: 'Become an Ambassador',
+    href: '#',
+    description:
+      'Use your platform to spread the word. We work with local champions, creators, and change agents who amplify our mission.',
+    imageUrl:
+      '/participate/ambassador.jpg',
+  },
+      {
+    id: 3,
+    title: 'Become a Patron',
+    href: '#',
+    description:
+      'Invest long-term in systems that uplift generations. Our patron circle supports multi-year goals with strategic vision and heart.',
+    imageUrl:
+      '/participate/patron.jpg',
+  },
+
+]
+
+function Involvement() {
+  return (
+    <div className="bg-white">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          {posts.map((post) => (
+            <article key={post.id} className="flex flex-col items-start justify-between">
+              <div className="relative w-full">
+                <img
+                  alt=""
+                  src={post.imageUrl}
+                  className="aspect-video w-full rounded-2xl bg-gray-100 object-cover sm:aspect-2/1 lg:aspect-3/2"
+                />
+                <div className="absolute inset-0 rounded-2xl ring-1 ring-gray-900/10 ring-inset" />
+              </div>
+              <div className="max-w-xl">
+                <div className="group relative">
+                  <h3 className="mt-4 text-2xl font-semibold text-gray-900 group-hover:text-gray-600">
+                    <a href={post.href}>
+                      <span className="absolute inset-0" />
+                      {post.title}
+                    </a>
+                  </h3>
+                  <p className="my-4 line-clamp-3 text-sm/6 text-gray-600">{post.description}</p>
+                   <a href={post.href}  className="mt-8 text-sm font-semibold text-indigo-600 group-hover:text-gray-600">Learn More</a>
+                </div>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+
+
+
+
+
+
+
+
+export default function GetInvolved() {
+  return (
+    <main className="overflow-hidden">
+      <GradientLight />
+      <Container>
+        <Navbar color="black" />
+      </Container>
+      <Header />
+      <Participate/>
+      <Involvement/>
+      <CTA />
+      <Footer />
+    </main>
+  )
+}
--- a/src/components/donatebutton.tsx
+++ b/src/components/donatebutton.tsx
@ -0,0 +1,110 @@
+'use client'
+
+import { useState } from 'react'
+
+const PRESETS = [10, 20, 40, 100]
+
+export default function DonateButton() {
+  const [amount, setAmount] = useState<number | null>(40)
+  const [customAmount, setCustomAmount] = useState('')
+  const [interval, setInterval] = useState<'once' | 'monthly'>('monthly')
+
+  const handleDonate = async () => {
+    const donation = amount ?? parseFloat(customAmount)
+    if (!donation || donation <= 0) return alert('Please enter a valid amount')
+
+    const res = await fetch('/api/create-checkout-session', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ amount: donation }),
+    })
+
+    const data = await res.json()
+    if (data.url) {
+      window.location.href = data.url
+    } else {
+      alert('Something went wrong.')
+    }
+  }
+
+  return (
+    <div className="max-w-md mx-auto bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
+      <div className="flex">
+        <button
+          className={`flex-1 py-3 text-center font-semibold ${
+            interval === 'once'
+              ? 'bg-indigo-100 text-indigo-700'
+              : 'bg-white text-gray-600'
+          } border-b-2 border-indigo-500`}
+          onClick={() => setInterval('once')}
+        >
+          GIVE ONCE
+        </button>
+        <button
+          className={`flex-1 py-3 text-center font-semibold ${
+            interval === 'monthly'
+              ? 'bg-indigo-500 text-white'
+              : 'bg-white text-gray-600'
+          } border-b-2 border-indigo-500`}
+          onClick={() => setInterval('monthly')}
+        >
+          MONTHLY
+        </button>
+      </div>
+
+      <div className="px-6 py-6 bg-gray-50">
+        <h3 className="text-center text-lg font-semibold text-gray-800">
+          Choose an amount to give {interval === 'monthly' ? 'per month' : 'today'}
+        </h3>
+
+        <div className="mt-6 grid grid-cols-2 gap-4">
+          {PRESETS.map((preset) => (
+            <button
+              key={preset}
+              onClick={() => {
+                setAmount(preset)
+                setCustomAmount('')
+              }}
+              className={`rounded-md px-4 py-3 text-sm font-medium border ${
+                amount === preset
+                  ? 'bg-indigo-500 text-white border-indigo-500'
+                  : 'bg-white text-gray-700 border-gray-300'
+              }`}
+            >
+              ${preset} USD{interval === 'monthly' ? '/mo' : ''}
+            </button>
+          ))}
+          <input
+            type="number"
+            placeholder="Other amount"
+            value={customAmount}
+            onChange={(e) => {
+              setCustomAmount(e.target.value)
+              setAmount(null)
+            }}
+            className="col-span-2 rounded-md border border-gray-300 px-4 py-3 text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          />
+        </div>
+
+        <button
+          onClick={handleDonate}
+          className="mt-6 w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 rounded-md"
+        >
+          DONATE {interval === 'monthly' ? 'MONTHLY' : 'NOW'}
+        </button>
+
+        {amount || customAmount ? (
+          <p className="mt-4 text-center text-sm text-gray-600">
+            Your <span className="font-semibold text-indigo-600">${amount ?? customAmount}.00</span>{' '}
+            {interval === 'monthly' ? 'monthly donation' : 'one-time donation'} can support vital
+            education and community impact through Indaba.
+          </p>
+        ) : null}
+      </div>
+
+      <div className="px-6 pb-4 text-center text-xs text-gray-500 border-t border-gray-200">
+        🔒 Secure payment • Powered by Stripe
+      </div>
+    </div>
+  )
+}
--- a/src/components/faq.tsx
+++ b/src/components/faq.tsx
@ -0,0 +1,5 @@
+'use client'
+import { Button } from './button'
+import { Heading, Subheading } from './text'
+import { clsx } from 'clsx'
+import { ChevronRightIcon } from '@heroicons/react/20/solid'  
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@ -14,8 +14,7 @@ import { PlusGrid, PlusGridItem, PlusGridRow } from './plus-grid'
 const links = [
  { href: '/company', label: 'About' },
  { href: '/projects', label: 'Projects' },
-  { href: '/blog', label: 'Blog' },
-  { href: '/login', label: 'Get Involved' },
+  { href: '/participate', label: 'Get Involved' },
 ]

 function DesktopNav({ color = "white" }: { color?: "white" | "black" }) {
--- a/src/components/participate.tsx
+++ b/src/components/participate.tsx
@ -0,0 +1,47 @@
+'use client'
+
+import { ChevronRightIcon } from '@heroicons/react/20/solid'
+import { Button } from './button'
+import { Heading } from './text'
+
+const projects = [
+  {
+    id: 1,
+    title: 'Become a Member',
+    imageUrl: '/participate/member.jpg',
+    impactGoal: 'Support our movement with monthly or one-time contributions.',
+    location: 'You’ll receive exclusive updates, event invites, and the knowledge you’re fueling systemic change from the ground up.',
+    href: '#',
+  },
+  {
+    id: 2,
+    title: 'Back a Project',
+    imageUrl: '/participate/choose.jpg',
+    impactGoal: 'Choose a cause that speaks to you and help bring it to life.',
+    location: 'Track its progress, meet the team, and celebrate impact milestones.',
+    href: '#',
+  },
+]
+
+export default function Participate() {
+  return (
+    <div className="bg-white pt-12 pb-6">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        {/* Cards */}
+        <div className=" grid grid-cols-1 lg:grid-cols-2 gap-8">
+          {projects.map((project) => (
+            <div key={project.id} className="relative rounded-2xl overflow-hidden bg-gray-900 text-white shadow-lg aspect-[4/3]">
+              <img src={project.imageUrl} alt={project.title} className="absolute inset-0 w-full h-full object-cover opacity-50" />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+              <div className="relative p-6 flex flex-col justify-end h-full">
+                <h3 className="text-2xl lg:text-4xl font-light mt-2">{project.title}</h3>
+                <div className="text-sm mt-2 text-indigo-300 font-semibold">{project.impactGoal}</div>
+                <p className="text-sm mt-4 pb-8">{project.location}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/components/projectcards.tsx
+++ b/src/components/projectcards.tsx
@ -4,6 +4,7 @@ import { useState } from 'react'
 import { ChevronRightIcon } from '@heroicons/react/20/solid'
 import { clsx } from 'clsx'
 import { Button } from './button'
+import { Subheading, Heading, Lead } from './text'

 const filters = {
  category: ['All', 'Education', 'Health', 'Climate', 'Infrastructure'],
@ -16,7 +17,7 @@ const projects = [
  {
    id: 1,
    title: 'Zanzibar Schools',
-    imageUrl: '/portfolio/zanzibar.jpg',
+    imageUrl: '/projects/zanzibar.jpg',
    impactGoal: 'Build 10 sustainable classrooms',
    location: 'Zanzibar, Tanzania',
    category: 'Education',
@ -31,7 +32,7 @@ const projects = [
  {
    id: 2,
    title: 'Kayamandi Health Hub',
-    imageUrl: '/portfolio/kayamandi.jpg',
+    imageUrl: '/projects/kayamandi.jpg',
    impactGoal: 'Provide care to 500 families',
    location: 'Stellenbosch, South Africa',
    category: 'Health',
@ -46,7 +47,7 @@ const projects = [
  {
    id: 3,
    title: 'Southern Cape Solar',
-    imageUrl: '/portfolio/southern.jpg',
+    imageUrl: '/projects/southern.jpg',
    impactGoal: 'Power 200 homes with clean energy',
    location: 'Southern Cape, South Africa',
    category: 'Climate',
@ -61,7 +62,7 @@ const projects = [
  {
    id: 4,
    title: 'Township WiFi Project',
-    imageUrl: '/portfolio/township.jpg',
+    imageUrl: '/projects/township.jpg',
    impactGoal: 'Free internet for 1,000 students',
    location: 'Johannesburg, South Africa',
    category: 'Infrastructure',
@ -76,7 +77,7 @@ const projects = [
  {
    id: 5,
    title: 'Durban Climate Garden',
-    imageUrl: '/portfolio/durban.jpg',
+    imageUrl: '/projects/durban.jpg',
    impactGoal: 'Grow 5 community food forests',
    location: 'Durban, South Africa',
    category: 'Climate',
@ -91,7 +92,7 @@ const projects = [
  {
    id: 6,
    title: 'Rio Digital Youth Labs',
-    imageUrl: '/portfolio/rio.jpg',
+    imageUrl: '/projects/rio.jpg',
    impactGoal: 'Train 1,000 young coders',
    location: 'Rio de Janeiro, Brazil',
    category: 'Education',
@ -130,7 +131,7 @@ export default function ProjectCard() {
    <div className="bg-white py-24">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="text-center max-w-2xl mx-auto">
-          <h2 className="text-4xl font-semibold text-gray-900 sm:text-5xl">Explore Impact Projects</h2>
+          <Heading as="h1">Explore Impact Projects</Heading>
          <p className="mt-2 text-lg text-gray-600">Back causes that shape a better future.</p>
        </div>

@ -155,7 +156,7 @@ export default function ProjectCard() {
          {filteredProjects.map(project => (
            <div key={project.id} className="relative rounded-2xl overflow-hidden bg-gray-900 text-white shadow-lg aspect-[4/5]">
              <img src={project.imageUrl} alt={project.title} className="absolute inset-0 w-full h-full object-cover opacity-50" />
-              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/50 to-transparent" />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
              <div className="relative p-6 flex flex-col justify-end h-full">
                <div className="text-sm text-indigo-300 font-semibold">{project.impactGoal}</div>
                <h3 className="text-2xl font-bold mt-2">{project.title}</h3>
@ -169,8 +170,8 @@ export default function ProjectCard() {
                  <a href={project.href} className="text-indigo-400 hover:text-indigo-300 font-semibold flex items-center">
                    Learn More <ChevronRightIcon className="ml-1 h-4 w-4" />
                  </a>
-                  <Button variant="secondary" className="text-sm bg-indigo-500 hover:bg-indigo-600 text-white px-3 py-1 rounded-md">
-                    Support
+                  <Button variant="secondary" className="text-sm bg-indigo-500 hover:bg-indigo-600 text-white px-3 py-1 ">
+                    Supports
                  </Button>
                </div>
              </div>
Author	SHA1	Message	Date
sasha-astiadi	259d512ad9	add get involved	2025-06-12 15:59:12 +02:00
sasha-astiadi	bac53f8089	add stripe	2025-06-12 15:06:38 +02:00
sasha-astiadi	4bb4fd6121	add proje	2025-06-12 14:23:09 +02:00