Initial commit

2025-10-10 13:10:51 +03:00
commit bfd28b7fff
61 changed files with 6234 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.npm-cache/_update-notifier-last-checked
+++ b/.npm-cache/_update-notifier-last-checked
--- a/README.md
+++ b/README.md
@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>geomind2</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "geomind2",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "framer-motion": "^12.23.23",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-router-dom": "^7.9.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@types/node": "^24.6.0",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.4",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.22",
+    "globals": "^16.4.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.7"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/images/computing.svg
+++ b/public/images/computing.svg
@@ -0,0 +1,3 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" width="24"  height="24" >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 2.25A.75.75 0 0 1 9 3v.75h2.25V3a.75.75 0 0 1 1.5 0v.75H15V3a.75.75 0 0 1 1.5 0v.75h.75a3 3 0 0 1 3 3v.75H21A.75.75 0 0 1 21 9h-.75v2.25H21a.75.75 0 0 1 0 1.5h-.75V15H21a.75.75 0 0 1 0 1.5h-.75v.75a3 3 0 0 1-3 3h-.75V21a.75.75 0 0 1-1.5 0v-.75h-2.25V21a.75.75 0 0 1-1.5 0v-.75H9V21a.75.75 0 0 1-1.5 0v-.75h-.75a3 3 0 0 1-3-3v-.75H3A.75.75 0 0 1 3 15h.75v-2.25H3a.75.75 0 0 1 0-1.5h.75V9H3a.75.75 0 0 1 0-1.5h.75v-.75a3 3 0 0 1 3-3h.75V3a.75.75 0 0 1 .75-.75ZM6 6.75A.75.75 0 0 1 6.75 6h10.5a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75H6.75a.75.75 0 0 1-.75-.75V6.75Z" stroke="#FFFFFF" fill="none" stroke-width="1.5px"></path>
+                </svg>
--- a/public/images/coop.jpeg
+++ b/public/images/coop.jpeg
--- a/public/images/countries.jpeg
+++ b/public/images/countries.jpeg
--- a/public/images/decentralized.svg
+++ b/public/images/decentralized.svg
@@ -0,0 +1,3 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" width="24"  height="24" >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M11.622 1.602a.75.75 0 0 1 .756 0l2.25 1.313a.75.75 0 0 1-.756 1.295L12 3.118 10.128 4.21a.75.75 0 1 1-.756-1.295l2.25-1.313ZM5.898 5.81a.75.75 0 0 1-.27 1.025l-1.14.665 1.14.665a.75.75 0 1 1-.756 1.295L3.75 8.806v.944a.75.75 0 0 1-1.5 0V7.5a.75.75 0 0 1 .372-.648l2.25-1.312a.75.75 0 0 1 1.026.27Zm12.204 0a.75.75 0 0 1 1.026-.27l2.25 1.312a.75.75 0 0 1 .372.648v2.25a.75.75 0 0 1-1.5 0v-.944l-1.122.654a.75.75 0 1 1-.756-1.295l1.14-.665-1.14-.665a.75.75 0 0 1-.27-1.025Zm-9 5.25a.75.75 0 0 1 1.026-.27L12 11.882l1.872-1.092a.75.75 0 1 1 .756 1.295l-1.878 1.096V15a.75.75 0 0 1-1.5 0v-1.82l-1.878-1.095a.75.75 0 0 1-.27-1.025ZM3 13.5a.75.75 0 0 1 .75.75v1.82l1.878 1.095a.75.75 0 1 1-.756 1.295l-2.25-1.312a.75.75 0 0 1-.372-.648v-2.25A.75.75 0 0 1 3 13.5Zm18 0a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-.372.648l-2.25 1.312a.75.75 0 1 1-.756-1.295l1.878-1.096V14.25a.75.75 0 0 1 .75-.75Zm-9 5.25a.75.75 0 0 1 .75.75v.944l1.122-.654a.75.75 0 1 1 .756 1.295l-2.25 1.313a.75.75 0 0 1-.756 0l-2.25-1.313a.75.75 0 1 1 .756-1.295l1.122.654V19.5a.75.75 0 0 1 .75-.75Z" stroke="#FFFFFF" fill="none" stroke-width="1.5px"></path>
+                </svg>
--- a/public/images/freezone.jpeg
+++ b/public/images/freezone.jpeg
--- a/public/images/geomind_logo.png
+++ b/public/images/geomind_logo.png
--- a/public/images/hometech.jpg
+++ b/public/images/hometech.jpg
--- a/public/images/hometech2.jpg
+++ b/public/images/hometech2.jpg
--- a/public/images/mesh2.gif
+++ b/public/images/mesh2.gif
--- a/public/images/mycelium.jpeg
+++ b/public/images/mycelium.jpeg
--- a/public/images/performance.svg
+++ b/public/images/performance.svg
@@ -0,0 +1,3 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" width="24"  height="24" >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 3.75a6 6 0 0 0-5.98 6.496A5.25 5.25 0 0 0 6.75 20.25H18a4.5 4.5 0 0 0 2.206-8.423 3.75 3.75 0 0 0-4.133-4.303A6.001 6.001 0 0 0 10.5 3.75Zm2.03 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v4.94a.75.75 0 0 0 1.5 0v-4.94l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" stroke="#FFFFFF" fill="none" stroke-width="1.5px"></path>
+                </svg>
--- a/public/images/security.svg
+++ b/public/images/security.svg
@@ -0,0 +1,3 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" width="24"  height="24" >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 1.5a5.25 5.25 0 0 0-5.25 5.25v3a3 3 0 0 0-3 3v6.75a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3v-6.75a3 3 0 0 0-3-3v-3c0-2.9-2.35-5.25-5.25-5.25Zm3.75 8.25v-3a3.75 3.75 0 1 0-7.5 0v3h7.5Z" stroke="#FFFFFF" fill="none" stroke-width="1.5px"></path>
+                </svg>
--- a/public/images/sovereignty.svg
+++ b/public/images/sovereignty.svg
@@ -0,0 +1,3 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" width="24"  height="24" >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 2.25a.75.75 0 0 1 .75.75v.54l1.838-.46a9.75 9.75 0 0 1 6.725.738l.108.054A8.25 8.25 0 0 0 18 4.524l3.11-.732a.75.75 0 0 1 .917.81 47.784 47.784 0 0 0 .005 10.337.75.75 0 0 1-.574.812l-3.114.733a9.75 9.75 0 0 1-6.594-.77l-.108-.054a8.25 8.25 0 0 0-5.69-.625l-2.202.55V21a.75.75 0 0 1-1.5 0V3A.75.75 0 0 1 3 2.25Z" stroke="#FFFFFF" fill="none" stroke-width="1.5px"></path>
+                </svg>
--- a/public/images/tier-h.jpeg
+++ b/public/images/tier-h.jpeg
--- a/public/images/tier-s.jpeg
+++ b/public/images/tier-s.jpeg
--- a/public/images/tierh.png
+++ b/public/images/tierh.png
--- a/public/images/tiers.png
+++ b/public/images/tiers.png
--- a/public/images/uscase_BG.png
+++ b/public/images/uscase_BG.png
--- a/public/videos/hero.mp4
+++ b/public/videos/hero.mp4
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,22 @@
+import { Routes, Route } from 'react-router-dom';
+import { Layout } from './components/layout/Layout';
+import { HomePage } from './pages/home/HomePage';
+import { AboutPage } from './pages/about/AboutPage';
+import { TechnologyPage } from './pages/technology/TechnologyPage';
+import { UseCasesPage } from './pages/usecases/UseCasesPage';
+
+const App = () => {
+  return (
+    <Layout>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/about" element={<AboutPage />} />
+        <Route path="/technology" element={<TechnologyPage />} />
+        <Route path="/usecases" element={<UseCasesPage />} />
+        <Route path="*" element={<HomePage />} />
+      </Routes>
+    </Layout>
+  );
+};
+
+export default App;
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,111 @@
+import { motion } from 'framer-motion';
+
+type FooterLink = {
+  label: string;
+  href: string;
+  target?: '_blank' | '_self';
+};
+
+type FooterColumn = {
+  title: string;
+  links: FooterLink[];
+};
+
+const footerColumns: FooterColumn[] = [
+  {
+    title: 'Affiliate Projects',
+    links: [
+      { label: 'Project Mycelium', href: 'https://project.mycelium.tf', target: '_blank' },
+    ],
+  },
+  {
+    title: 'Company',
+    links: [
+      { label: 'Manual', href: 'https://manual.grid.tf/', target: '_blank' },
+      { label: 'Support', href: 'mailto:support@threefold.tech', target: '_blank' },
+    ],
+  },
+  {
+    title: 'GeoMind',
+    links: [
+      { label: 'Technology', href: '/technology' },
+      { label: 'Use Cases', href: '/usecases' },
+    ],
+  },
+];
+
+export const Footer = () => {
+  return (
+    <footer className="border-t border-slate-200 bg-white">
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.2 }}
+        transition={{ duration: 0.6, ease: 'easeOut' }}
+        className="mx-auto flex max-w-6xl flex-col gap-8 px-6 py-12 lg:flex-row lg:items-start lg:justify-between lg:px-8"
+      >
+        <div className="flex items-center gap-3">
+          <img
+            src="/images/geomind_logo.png"
+            alt="Geomind logo"
+            className="h-12 w-12 rounded-full object-contain shadow-subtle"
+          />
+          <div>
+            <p className="text-sm font-semibold tracking-[0.35em] text-slate-500">
+              GEOMIND
+            </p>
+            <p className="mt-2 max-w-xs text-sm text-slate-500">
+              The datacenter standard for the next era of cloud and AI.
+            </p>
+          </div>
+        </div>
+        <div className="grid flex-1 grid-cols-1 gap-8 text-sm sm:grid-cols-2 lg:grid-cols-3">
+          {footerColumns.map((column) => (
+            <div key={column.title}>
+              <p className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">
+                {column.title}
+              </p>
+              <ul className="mt-3 space-y-3 text-sm font-medium text-slate-600">
+                {column.links.map((link) => (
+                  <li key={link.label}>
+                    <a
+                      href={link.href}
+                      target={link.target}
+                      rel={link.target === '_blank' ? 'noopener noreferrer' : undefined}
+                      className="transition-colors duration-300 hover:text-brand-600"
+                    >
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </motion.div>
+      <div className="bg-mist py-4">
+        <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-2 px-6 text-xs text-slate-500 sm:flex-row lg:px-8">
+          <span>Copyright {new Date().getFullYear()} GeoMind. All rights reserved.</span>
+          <div className="flex gap-4">
+            <a
+              href="https://www.linkedin.com/company/tf9/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-brand-600"
+            >
+              LinkedIn
+            </a>
+            <a
+              href="https://github.com/threefoldtech"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-brand-600"
+            >
+              GitHub
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -0,0 +1,136 @@
+import { useEffect, useState } from 'react';
+import { Link, NavLink, useLocation } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { cn } from '../../lib/cn';
+
+const navItems = [
+  { label: 'Home', to: '/' },
+  { label: 'About', to: '/about' },
+  { label: 'Technology', to: '/technology' },
+  { label: 'Use Cases', to: '/usecases' },
+];
+
+export const Header = () => {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const location = useLocation();
+
+  useEffect(() => {
+    const onScroll = () => setIsScrolled(window.scrollY > 12);
+    onScroll();
+    window.addEventListener('scroll', onScroll);
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  useEffect(() => {
+    setIsMenuOpen(false);
+  }, [location.pathname]);
+
+  return (
+    <motion.header
+      initial={{ opacity: 0, y: -12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.6, ease: 'easeOut' }}
+      className={cn(
+        'fixed inset-x-0 top-0 z-50 transition-all duration-500',
+        isScrolled ? 'bg-white/95 shadow-lg backdrop-blur-sm' : 'bg-transparent',
+      )}
+    >
+      <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4 lg:px-8">
+        <Link to="/" className="flex items-center gap-2">
+          <img
+            src="/images/geomind_logo.png"
+            alt="Geomind logo"
+            className="h-10 w-10 rounded-full object-contain shadow-subtle"
+          />
+          <span className="text-base font-semibold tracking-wider text-ink">
+            GEOMIND
+          </span>
+        </Link>
+        <nav className="hidden items-center gap-8 md:flex">
+          {navItems.map(({ label, to }) => (
+            <NavLink
+              key={to}
+              to={to}
+              className={({ isActive }) =>
+                cn(
+                  'text-sm font-medium uppercase tracking-wide text-slate-500 transition-colors duration-300',
+                  isActive && 'text-brand-600',
+                )
+              }
+            >
+              {label}
+            </NavLink>
+          ))}
+          <a
+            href="mailto:support@threefold.tech"
+            className="rounded-full border border-brand-200 bg-white px-4 py-2 text-sm font-semibold text-brand-700 shadow-subtle transition-all duration-300 hover:-translate-y-0.5 hover:bg-brand-600 hover:text-white"
+          >
+            Contact
+          </a>
+        </nav>
+        <button
+          type="button"
+          aria-label="Toggle navigation"
+          className="md:hidden"
+          onClick={() => setIsMenuOpen((prev) => !prev)}
+        >
+          <span className="relative block h-5 w-6">
+            <span
+              className={cn(
+                'absolute left-0 top-1 h-0.5 w-full bg-ink transition-all duration-300',
+                isMenuOpen && 'translate-y-2 rotate-45',
+              )}
+            />
+            <span
+              className={cn(
+                'absolute left-0 top-3 h-0.5 w-full bg-ink transition-all duration-300',
+                isMenuOpen && 'opacity-0',
+              )}
+            />
+            <span
+              className={cn(
+                'absolute left-0 top-5 h-0.5 w-4 bg-ink transition-all duration-300',
+                isMenuOpen && 'left-0 top-3 w-full -rotate-45',
+              )}
+            />
+          </span>
+        </button>
+      </div>
+      <AnimatePresence>
+        {isMenuOpen && (
+          <motion.nav
+            initial={{ opacity: 0, y: -12 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -16 }}
+            transition={{ duration: 0.25, ease: 'easeOut' }}
+            className="border-t border-slate-100 bg-white/95 px-6 py-4 shadow-lg md:hidden"
+          >
+            <div className="mx-auto flex max-w-6xl flex-col gap-4">
+              {navItems.map(({ label, to }) => (
+                <NavLink
+                  key={to}
+                  to={to}
+                  className={({ isActive }) =>
+                    cn(
+                      'text-base font-medium uppercase tracking-wide text-slate-600',
+                      isActive && 'text-brand-700',
+                    )
+                  }
+                >
+                  {label}
+                </NavLink>
+              ))}
+              <a
+                href="mailto:support@threefold.tech"
+                className="rounded-full border border-brand-200 bg-brand-600 px-4 py-2 text-center text-sm font-semibold text-white shadow-subtle"
+              >
+                Contact
+              </a>
+            </div>
+          </motion.nav>
+        )}
+      </AnimatePresence>
+    </motion.header>
+  );
+};
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import { Header } from './Header';
+import { Footer } from './Footer';
+
+type LayoutProps = {
+  children: ReactNode;
+};
+
+export const Layout = ({ children }: LayoutProps) => {
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-white via-mist to-white">
+      <Header />
+      <main className="mx-auto max-w-6xl px-6 pb-24 pt-28 lg:px-8 lg:pt-32">{children}</main>
+      <Footer />
+    </div>
+  );
+};
--- a/src/components/ui/PrimaryButton.tsx
+++ b/src/components/ui/PrimaryButton.tsx
@@ -0,0 +1,55 @@
+import { type ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import { cn } from '../../lib/cn';
+
+type PrimaryButtonProps = {
+  to?: string;
+  href?: string;
+  children: ReactNode;
+  variant?: 'solid' | 'outline' | 'ghost';
+  className?: string;
+  target?: string;
+};
+
+const styles: Record<
+  NonNullable<PrimaryButtonProps['variant']>,
+  string
+> = {
+  solid:
+    'bg-brand-600 text-white shadow-subtle hover:bg-brand-500 hover:-translate-y-0.5',
+  outline:
+    'border border-brand-200 bg-white text-brand-700 hover:border-brand-400 hover:-translate-y-0.5',
+  ghost:
+    'bg-transparent text-brand-600 hover:text-brand-500',
+};
+
+export const PrimaryButton = ({
+  to,
+  href,
+  children,
+  variant = 'solid',
+  className,
+  target,
+}: PrimaryButtonProps) => {
+  const baseClasses =
+    'inline-flex items-center justify-center rounded-full px-5 py-2 text-sm font-semibold transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2';
+
+  if (to) {
+    return (
+      <Link to={to} className={cn(baseClasses, styles[variant], className)}>
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <a
+      href={href}
+      target={target}
+      rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+      className={cn(baseClasses, styles[variant], className)}
+    >
+      {children}
+    </a>
+  );
+};
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,27 @@
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color: #111827;
+  background-color: #f6f8fb;
+}
+
+html,
+body {
+  @apply bg-mist text-ink antialiased;
+}
+
+body {
+  @apply min-h-screen scroll-smooth;
+}
+
+a {
+  @apply text-brand-600 transition-colors duration-300 hover:text-brand-500;
+}
+
+::selection {
+  background-color: rgba(90, 107, 240, 0.2);
+}
--- a/src/lib/cn.ts
+++ b/src/lib/cn.ts
@@ -0,0 +1,2 @@
+export const cn = (...classes: Array<string | false | null | undefined>) =>
+  classes.filter(Boolean).join(' ');
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import './index.css';
+import App from './App.tsx';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>,
+);
--- a/src/pages/about/AboutPage.tsx
+++ b/src/pages/about/AboutPage.tsx
@@ -0,0 +1,13 @@
+import { AboutHero } from './components/AboutHero';
+import { MissionVision } from './components/MissionVision';
+import { TrackRecord } from './components/TrackRecord';
+
+export const AboutPage = () => {
+  return (
+    <div className="space-y-12 lg:space-y-16">
+      <AboutHero />
+      <MissionVision />
+      <TrackRecord />
+    </div>
+  );
+};
--- a/src/pages/about/components/AboutHero.tsx
+++ b/src/pages/about/components/AboutHero.tsx
@@ -0,0 +1,34 @@
+import { motion } from 'framer-motion';
+
+export const AboutHero = () => {
+  return (
+    <section className="relative overflow-hidden rounded-3xl text-white">
+      <img
+        src="/images/hometech2.jpg"
+        alt=""
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+      <div className="absolute inset-0 bg-gradient-to-br from-[#0f172a]/80 via-[#1e1b4b]/70 to-[#312e81]/80" />
+      <motion.div
+        initial={{ opacity: 0, y: 32 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.3 }}
+        transition={{ duration: 0.6, ease: 'easeOut' }}
+        className="relative z-10 px-6 py-20 sm:px-10 lg:px-16 lg:py-24"
+      >
+        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white/70">
+          About GeoMind
+        </p>
+        <h1 className="mt-6 text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl">
+          We Know a Thing or Two About Datacenters
+        </h1>
+        <p className="mt-6 max-w-3xl text-base text-white/75 sm:text-lg">
+          For decades, we've built the technologies that power the internet, from record-breaking
+          web hosting to unbreakable cloud systems. Now, we're redefining what datacenters stand
+          for: secure, sovereign, and profitable infrastructure designed for people, the planet,
+          and the AI-powered future.
+        </p>
+      </motion.div>
+    </section>
+  );
+};
--- a/src/pages/about/components/MissionVision.tsx
+++ b/src/pages/about/components/MissionVision.tsx
@@ -0,0 +1,45 @@
+import { motion } from 'framer-motion';
+
+export const MissionVision = () => {
+  return (
+    <section className="py-16 lg:py-24">
+      <div className="relative overflow-hidden rounded-3xl border border-slate-100 bg-white/80 p-8 shadow-subtle backdrop-blur lg:p-16">
+        <div className="pointer-events-none absolute -top-36 right-10 h-72 w-72 rounded-full bg-brand-100 opacity-50 blur-3xl" />
+        <motion.div
+          initial={{ opacity: 0, y: 24 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.35 }}
+          transition={{ duration: 0.6, ease: 'easeOut' }}
+          className="relative z-10 space-y-12 lg:grid lg:grid-cols-2 lg:gap-16 lg:space-y-0"
+        >
+          <div>
+            <h2 className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
+              Our Mission
+            </h2>
+            <h3 className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
+              Building Inclusive Digital Infrastructure as a Fundamental Human Right
+            </h3>
+            <p className="mt-6 text-base text-slate-600 sm:text-lg">
+              GeoMind is committed to placing people and the planet at the forefront of our mission.
+              We believe that access to computing resources is a basic human right. By integrating
+              sustainable practices and innovative technologies, we aim to create an inclusive digital
+              infrastructure that empowers communities and fosters global equity.
+            </p>
+          </div>
+          <div className="flex flex-col justify-between text-right">
+            <h2 className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
+              Our Journey
+            </h2>
+            <p className="mt-4 text-base text-slate-600 sm:text-lg">
+              We began by building the backbone of modern digital infrastructure. Over the years, we've
+              pioneered cloud computing, advanced storage systems, and scalable, secure datacenter
+              technologies. We're now creating the next generation of datacenters, a new standard built
+              for the demands of the AI era, offering efficiency, sovereignty, and profitability that
+              traditional datacenters simply can't deliver.
+            </p>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
--- a/src/pages/about/components/TrackRecord.tsx
+++ b/src/pages/about/components/TrackRecord.tsx
@@ -0,0 +1,68 @@
+import { motion } from 'framer-motion';
+
+const records = [
+  {
+    title: 'World Records for Web Hosting (1997-2002)',
+    description:
+      'Our team started the Internet hosting and data center business in Europe. We hosted some of the largest websites in the world including UEFA, NASA, World Cup.',
+  },
+  {
+    title: 'The FIRST Backup Data Duplication system in the world (2005)',
+    description:
+      'Our advancements in this field brought up to 100x benefit compared to the status quo running in data centers at the time.',
+  },
+  {
+    title: 'One of the FIRST Cloud Systems (2008)',
+    description:
+      'We were one of the pioneers of cloud computing in general. Terms like Virtual Private Data Center were invented by us.',
+  },
+  {
+    title: 'The FIRST multi-site consistent database (2010)',
+    description:
+      'We invented a method to store data in a database over multiple sites in such a way data could never be lost, corrupted, or order of updates changed.',
+  },
+  {
+    title: 'The FIRST unbreakable and distributed storage system (2012)',
+    description:
+      'Not only incorruptible, our system also boasts 10x energy efficiency compared to alternative solutions, marking a significant technological leap.',
+  },
+  {
+    title: 'Probably the FIRST proof of block stake blockchain (2017)',
+    description:
+      'This blockchain was sustainable and scalable and allowed people to transact their stake as well as their digital currency in the same transaction, which still to date is novel.',
+  },
+];
+
+export const TrackRecord = () => {
+  return (
+    <section className="py-16 lg:py-24">
+      <div className="mx-auto max-w-3xl text-center">
+        <h2 className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
+          Our Track Record
+        </h2>
+        <p className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
+          Our team has been at the forefront of datacenter and cloud innovation for decades,
+          building systems that were faster, safer, and more scalable than anything before.
+        </p>
+      </div>
+      <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {records.map((record, index) => (
+          <motion.div
+            key={record.title}
+            initial={{ opacity: 0, y: 24 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, amount: 0.25 }}
+            transition={{ duration: 0.5, delay: index * 0.05 }}
+            className="flex h-full flex-col rounded-3xl border border-slate-100 bg-white/90 p-8 shadow-subtle backdrop-blur"
+          >
+            <div className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-brand-50 font-semibold text-brand-600">
+              {index + 1}
+            </div>
+            <h3 className="mt-6 text-lg font-semibold text-ink">{record.title}</h3>
+            <p className="mt-3 text-sm leading-6 text-slate-600">{record.description}</p>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+};
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -0,0 +1,17 @@
+import { HomeHero } from './components/HomeHero';
+import { CoreTechnology } from './components/CoreTechnology';
+import { ImpactBanner } from './components/ImpactBanner';
+import { WhyGeomind } from './components/WhyGeomind';
+import { FinalCallToAction } from './components/FinalCallToAction';
+
+export const HomePage = () => {
+  return (
+    <div className="space-y-12 lg:space-y-16">
+      <HomeHero />
+      <CoreTechnology />
+      <ImpactBanner />
+      <WhyGeomind />
+      <FinalCallToAction />
+    </div>
+  );
+};
--- a/src/pages/home/components/CoreTechnology.tsx
+++ b/src/pages/home/components/CoreTechnology.tsx
@@ -0,0 +1,57 @@
+import { motion } from 'framer-motion';
+
+const features = [
+  {
+    title: 'Self Healing & Prederministic Deployments',
+    description:
+      "GeoMind nodes detect and fix issues automatically with zero downtime. Every deployment is verifiable and runs exactly the same anywhere, fully autonomous, resilient, and predictable.",
+  },
+  {
+    title: 'Unbreakable Storage',
+    description:
+      'Data is encrypted and encoded using forward-error-correction codes, not replication. Even if parts of the network fail, data can always be rebuilt, making it unhackable, permanent, and loss-proof.',
+  },
+  {
+    title: 'Unbreakable Network',
+    description:
+      'Runs on top of the internet, finding the fastest path for data. With end-to-end quantum-safe encryption and self-optimizing routing, it creates a layer that cannot be hacked or shut down.',
+  },
+];
+
+export const CoreTechnology = () => {
+  return (
+    <section className="py-16 lg:py-24">
+      <div className="mx-auto max-w-4xl text-center">
+        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
+          Core Technology
+        </p>
+        <h2 className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
+          The Foundation of a New Datacenter Standard
+        </h2>
+        <p className="mt-5 text-base text-slate-600 sm:text-lg">
+          GeoMind is built on a modular, self-healing datacenter architecture designed for unmatched
+          efficiency, reliability, and sovereignty. Every component works autonomously yet integrates
+          seamlessly into a global, planet-scale infrastructure.
+        </p>
+      </div>
+      <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {features.map((feature, index) => (
+          <motion.div
+            key={feature.title}
+            initial={{ opacity: 0, y: 24 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, amount: 0.2 }}
+            transition={{ duration: 0.5, delay: index * 0.1 }}
+            className="flex flex-col rounded-3xl border border-slate-100 bg-white/80 p-8 shadow-subtle backdrop-blur"
+          >
+            <span className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-brand-50 text-sm font-semibold text-brand-600">
+              {index + 1}
+            </span>
+            <h3 className="mt-6 text-lg font-semibold text-ink">{feature.title}</h3>
+            <p className="mt-4 text-sm leading-6 text-slate-600">{feature.description}</p>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+};
--- a/src/pages/home/components/FinalCallToAction.tsx
+++ b/src/pages/home/components/FinalCallToAction.tsx
@@ -0,0 +1,26 @@
+import { motion } from 'framer-motion';
+import { PrimaryButton } from '../../../components/ui/PrimaryButton';
+
+export const FinalCallToAction = () => {
+  return (
+    <section className="pt-16 lg:pt-24">
+      <motion.div
+        initial={{ opacity: 0, scale: 0.98 }}
+        whileInView={{ opacity: 1, scale: 1 }}
+        viewport={{ once: true, amount: 0.3 }}
+        transition={{ duration: 0.6, ease: 'easeOut' }}
+        className="rounded-3xl border border-brand-100 bg-white/80 p-10 text-center shadow-subtle backdrop-blur lg:p-16"
+      >
+        <p className="text-xs font-semibold uppercase tracking-[0.45em] text-brand-500">
+          GeoMind
+        </p>
+        <h2 className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
+          The datacenter standard for the next era of cloud and AI.
+        </h2>
+        <div className="mt-8 flex justify-center">
+          <PrimaryButton to="/technology">Discover Technology</PrimaryButton>
+        </div>
+      </motion.div>
+    </section>
+  );
+};
--- a/src/pages/home/components/HomeHero.tsx
+++ b/src/pages/home/components/HomeHero.tsx
@@ -0,0 +1,63 @@
+import { motion } from 'framer-motion';
+import { PrimaryButton } from '../../../components/ui/PrimaryButton';
+
+export const HomeHero = () => {
+  return (
+    <section className="relative overflow-hidden rounded-3xl bg-ink text-white">
+      <video
+        className="absolute inset-0 h-full w-full object-cover opacity-60"
+        autoPlay
+        muted
+        loop
+        playsInline
+        poster="/images/hometech.jpg"
+      >
+        <source src="/videos/hero.mp4" type="video/mp4" />
+      </video>
+      <div className="absolute inset-0 bg-gradient-to-br from-[#0f172a]/70 via-[#1e1b4b]/60 to-[#312e81]/80" />
+      <div className="relative z-10 px-6 py-20 sm:px-10 lg:px-16">
+        <motion.p
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1, duration: 0.6 }}
+          className="text-xs font-semibold uppercase tracking-[0.4em] text-white/70"
+        >
+          The Planet's Sovereign Agentic Cloud
+        </motion.p>
+        <motion.h1
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2, duration: 0.6 }}
+          className="mt-6 text-4xl font-semibold leading-tight sm:text-5xl lg:text-6xl"
+        >
+          GeoMind
+        </motion.h1>
+        <motion.p
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3, duration: 0.6 }}
+          className="mt-6 max-w-3xl text-base text-white/70 sm:text-lg"
+        >
+          A new generation of decentralized cloud and AI infrastructure,
+          secure, scalable, efficient, and sovereign by design. Deploy your own
+          datacenter, scale globally, and turn infrastructure into profit.
+        </motion.p>
+        <motion.div
+          className="mt-10 flex flex-wrap gap-4"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4, duration: 0.6 }}
+        >
+          <PrimaryButton to="/technology">Technologies</PrimaryButton>
+          <PrimaryButton
+            to="/usecases"
+            variant="ghost"
+            className="border border-white/40 text-white hover:bg-white/15"
+          >
+            Use Cases
+          </PrimaryButton>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
--- a/src/pages/home/components/ImpactBanner.tsx
+++ b/src/pages/home/components/ImpactBanner.tsx
@@ -0,0 +1,33 @@
+import { motion } from 'framer-motion';
+import { PrimaryButton } from '../../../components/ui/PrimaryButton';
+
+export const ImpactBanner = () => {
+  return (
+    <section className="relative overflow-hidden rounded-3xl bg-white shadow-subtle">
+      <div className="absolute inset-0 -z-10">
+        <img
+          src="/images/mesh2.gif"
+          alt=""
+          className="h-full w-full object-cover opacity-50"
+        />
+        <div className="absolute inset-0 bg-gradient-to-br from-white via-white/80 to-white/40 backdrop-blur" />
+      </div>
+      <motion.div
+        initial={{ opacity: 0, y: 28 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.3 }}
+        transition={{ duration: 0.6, ease: 'easeOut' }}
+        className="px-6 py-12 text-center sm:px-10 lg:px-16 lg:py-16"
+      >
+        <h2 className="text-3xl font-semibold text-ink sm:text-4xl">Designed for Real-World Impact</h2>
+        <p className="mx-auto mt-5 max-w-3xl text-base text-slate-600 sm:text-lg">
+          GeoMind enables enterprises and infrastructure providers to run secure, profitable,
+          efficient, and sovereign clouds anywhere.
+        </p>
+        <div className="mt-8 flex justify-center">
+          <PrimaryButton to="/usecases">Use Cases</PrimaryButton>
+        </div>
+      </motion.div>
+    </section>
+  );
+};
--- a/src/pages/home/components/WhyGeomind.tsx
+++ b/src/pages/home/components/WhyGeomind.tsx
@@ -0,0 +1,80 @@
+import { motion } from 'framer-motion';
+
+const pillars = [
+  {
+    title: 'Sovereign by Design',
+    points: [
+      'Stay compliant with in-country data requirements.',
+      'Each node operates independently or as part of a global, trusted network.',
+      'Maintain total ownership of your infrastructure and data.',
+    ],
+  },
+  {
+    title: 'Efficient and Sustainable',
+    points: [
+      'Up to 10x less energy for specific workloads.',
+      'Removes layers of legacy software overhead.',
+      'Lower operational cost and carbon footprint.',
+    ],
+  },
+  {
+    title: 'Profitable Infrastructure',
+    points: [
+      'Turn existing datacenters, offices, or parking lots into productive assets.',
+      'Use capacity for your workloads and sell the excess to the network.',
+      'ROI can be 3x higher than traditional models.',
+    ],
+  },
+];
+
+export const WhyGeomind = () => {
+  return (
+    <section className="relative overflow-hidden rounded-3xl">
+      <img
+        src="/images/hometech.jpg"
+        alt=""
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+      <div className="absolute inset-0 bg-gradient-to-br from-[#0f172a]/80 via-[#111827]/85 to-[#020617]/80" />
+      <div className="relative z-10 px-6 py-16 text-white sm:px-10 lg:px-16 lg:py-24">
+        <motion.div
+          initial={{ opacity: 0, y: 24 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.3 }}
+          transition={{ duration: 0.6, ease: 'easeOut' }}
+          className="max-w-3xl"
+        >
+          <h2 className="text-3xl font-semibold sm:text-4xl">Why GeoMind</h2>
+          <p className="mt-5 text-base text-white/70 sm:text-lg">
+            Traditional datacenters are increasingly limited by geopolitics, inefficiency, and
+            energy waste. GeoMind eliminates those constraints with a resilient, autonomous
+            infrastructure that delivers planetary scalability and sovereign performance anywhere
+            in the world.
+          </p>
+        </motion.div>
+        <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {pillars.map((pillar, index) => (
+            <motion.div
+              key={pillar.title}
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, amount: 0.25 }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              className="rounded-3xl bg-white/10 p-6 backdrop-blur-lg"
+            >
+              <h3 className="text-lg font-semibold text-white">{pillar.title}</h3>
+              <ul className="mt-4 space-y-3 text-sm text-white/70">
+                {pillar.points.map((point) => (
+                  <li key={point} className="flex gap-3">
+                    <span className="mt-1 inline-block h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-300" />
+                    <span>{point}</span>
+                  </li>
+                ))}
+              </ul>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
--- a/src/pages/technology/TechnologyPage.tsx
+++ b/src/pages/technology/TechnologyPage.tsx
@@ -0,0 +1,15 @@
+import { TechnologyHero } from './components/TechnologyHero';
+import { TechnologyArchitecture } from './components/TechnologyArchitecture';
+import { TechnologyStack } from './components/TechnologyStack';
+import { TechnologicalBenefits } from './components/TechnologicalBenefits';
+
+export const TechnologyPage = () => {
+  return (
+    <div className="space-y-12 lg:space-y-16">
+      <TechnologyHero />
+      <TechnologyStack />
+      <TechnologyArchitecture />
+      <TechnologicalBenefits />
+    </div>
+  );
+};
--- a/src/pages/technology/components/TechnologicalBenefits.tsx
+++ b/src/pages/technology/components/TechnologicalBenefits.tsx
@@ -0,0 +1,69 @@
+import { motion } from 'framer-motion';
+
+const benefits = [
+  {
+    title: 'Ultra-Secure',
+    description: 'Protect sensitive workloads with end-to-end security.',
+    icon: '/images/performance.svg',
+  },
+  {
+    title: 'Scales Globally',
+    description: 'Supports workloads anywhere, from local nodes to planetary scale.',
+    icon: '/images/security.svg',
+  },
+  {
+    title: 'Energy Efficient',
+    description: 'Up to 10x less energy for specific workloads.',
+    icon: '/images/sovereignty.svg',
+  },
+  {
+    title: 'Profitable',
+    description: 'Monetize idle capacity; achieve ROI up to 3x higher.',
+    icon: '/images/computing.svg',
+  },
+  {
+    title: 'Flexible',
+    description: 'Compatible with existing infrastructure and hyperscaler requirements.',
+    icon: '/images/decentralized.svg',
+  },
+];
+
+export const TechnologicalBenefits = () => {
+  return (
+    <section className="py-16 lg:py-24">
+      <div className="mx-auto max-w-3xl text-center">
+        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
+          Technological Benefits
+        </p>
+        <h2 className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
+          Infrastructure that Pays for Itself
+        </h2>
+        <p className="mt-5 text-base text-slate-600 sm:text-lg">
+          GeoMind doesn't just deliver advanced datacenter capabilities, it turns your existing
+          infrastructure into a strategic asset. Run your own workloads securely and efficiently,
+          while selling unused capacity to the network. With up to 10x lower energy consumption for
+          specific workloads and ROI up to 3x higher than traditional models, our platform works for
+          businesses, hyperscalers, and AI applications alike.
+        </p>
+      </div>
+      <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {benefits.map((benefit, index) => (
+          <motion.div
+            key={benefit.title}
+            initial={{ opacity: 0, y: 24 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, amount: 0.25 }}
+            transition={{ duration: 0.5, delay: index * 0.05 }}
+            className="flex h-full flex-col rounded-3xl border border-slate-100 bg-white/80 p-6 shadow-subtle backdrop-blur"
+          >
+            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-brand-50">
+              <img src={benefit.icon} alt="" className="h-7 w-7" />
+            </div>
+            <h3 className="mt-6 text-lg font-semibold text-ink">{benefit.title}</h3>
+            <p className="mt-3 text-sm leading-6 text-slate-600">{benefit.description}</p>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+};
--- a/src/pages/technology/components/TechnologyArchitecture.tsx
+++ b/src/pages/technology/components/TechnologyArchitecture.tsx
@@ -0,0 +1,178 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+type Bullet = {
+  heading: string;
+  body: string;
+  subpoints?: string[];
+};
+
+type Tab = {
+  id: 'compute' | 'data' | 'network';
+  label: string;
+  title: string;
+  description: string;
+  bullets: Bullet[];
+};
+
+const tabs: Tab[] = [
+  {
+    id: 'compute',
+    label: 'Compute',
+    title: 'Compute',
+    description: 'A self-healing compute fabric designed for resilience, decentralization, and scale.',
+    bullets: [
+      {
+        heading: 'Autonomous Workload Management',
+        body: 'Workloads automatically migrate to healthy nodes to ensure fault tolerance and high availability.',
+      },
+      {
+        heading: 'P2P Compute Marketplace',
+        body: 'Individuals and enterprises can monetize spare compute and GPU resources through a decentralized network.',
+      },
+      {
+        heading: 'AI & Web3 Ready',
+        body: 'Run LLMs, autonomous agents, blockchain nodes, and immersive metaverse apps at the edge.',
+      },
+      {
+        heading: 'Zero-OS (ZOS)',
+        body: 'Our custom-built, stateless, immutable OS that powers:',
+        subpoints: [
+          'MicroVMs & containerized environments (Kubernetes, Docker, Firecracker).',
+          'AI inference and training workloads.',
+          'Web3 infrastructure and federated learning models.',
+        ],
+      },
+      {
+        heading: 'No Hyperscalers',
+        body: 'Fully independent infrastructure managed by intelligent agents on bare metal.',
+      },
+    ],
+  },
+  {
+    id: 'data',
+    label: 'Data',
+    title: 'Data',
+    description: 'Private, distributed, and AI-native storage with user sovereignty at its core.',
+    bullets: [
+      {
+        heading: 'Privacy-First',
+        body: 'End-to-end encryption and redundancy, with no central control.',
+      },
+      {
+        heading: '10x Efficient',
+        body: 'Optimized for performance and sustainability, far surpassing traditional cloud.',
+      },
+      {
+        heading: 'Geo-Aware & Compliant',
+        body: "Data stays where it's supposed to, satisfying regional policies and privacy standards.",
+      },
+    ],
+  },
+  {
+    id: 'network',
+    label: 'Network',
+    title: 'Network',
+    description:
+      'A secure, peer-to-peer internet backbone, self-sustaining, censorship-resistant, and optimized for performance.',
+    bullets: [
+      {
+        heading: 'End-to-End Encryption',
+        body: 'All communications are secured by design.',
+      },
+      {
+        heading: 'Shortest-Path Routing',
+        body: 'Dynamically finds the most efficient path across the network, reducing latency and cost.',
+      },
+      {
+        heading: 'No Middlemen',
+        body: 'Fully peer-to-peer, removing reliance on centralized ISPs or DNS providers.',
+      },
+      {
+        heading: 'Censorship Resistance',
+        body: 'Built to thrive under pressure, even in restricted or controlled regions.',
+      },
+    ],
+  },
+];
+
+export const TechnologyArchitecture = () => {
+  const [activeTab, setActiveTab] = useState<Tab['id']>('compute');
+  const current = tabs.find((tab) => tab.id === activeTab) ?? tabs[0];
+
+  return (
+    <section className="py-16 lg:py-24">
+      <div className="mx-auto max-w-4xl text-center">
+        <h2 className="text-3xl font-semibold text-ink sm:text-4xl">Technology Architecture</h2>
+        <p className="mt-4 text-base text-slate-600 sm:text-lg">
+          Seamlessly integrating compute, storage, and networking, GeoMind's architecture delivers secure,
+          scalable, and efficient infrastructure for AI, cloud, and next-generation workloads from edge to
+          planetary scale.
+        </p>
+      </div>
+      <div className="mt-12 rounded-3xl border border-slate-200 bg-white/80 p-6 shadow-subtle backdrop-blur lg:p-10">
+        <div className="flex flex-wrap gap-3 border-b border-slate-200 pb-4">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => setActiveTab(tab.id)}
+              className={`rounded-full px-4 py-2 text-sm font-semibold transition-all duration-300 ${
+                activeTab === tab.id
+                  ? 'bg-brand-600 text-white shadow-subtle'
+                  : 'bg-white text-slate-500 hover:text-brand-600'
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+        <div className="mt-8">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={current.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.4, ease: 'easeOut' }}
+              className="grid gap-8 lg:grid-cols-[2fr,1fr]"
+            >
+              <div>
+                <h3 className="text-xl font-semibold text-brand-600">{current.title}</h3>
+                <p className="mt-2 text-base text-slate-600">{current.description}</p>
+                <ul className="mt-6 space-y-4 text-sm text-slate-600">
+                  {current.bullets.map((bullet) => (
+                    <li key={bullet.heading} className="rounded-2xl border border-slate-100 bg-white/70 p-4">
+                      <p className="text-base font-semibold text-ink">{bullet.heading}</p>
+                      <p className="mt-2 text-sm text-slate-600">{bullet.body}</p>
+                      {bullet.subpoints && (
+                        <ul className="mt-3 space-y-2 text-sm text-slate-500">
+                          {bullet.subpoints.map((point) => (
+                            <li key={point} className="flex gap-3">
+                              <span className="mt-1 inline-block h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-300" />
+                              <span>{point}</span>
+                            </li>
+                          ))}
+                        </ul>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div className="hidden h-full rounded-3xl border border-dashed border-brand-100 bg-brand-50/50 p-6 lg:flex lg:flex-col lg:items-start lg:justify-between">
+                <p className="text-sm font-semibold uppercase tracking-[0.35em] text-brand-500">
+                  {current.label}
+                </p>
+                <p className="mt-6 text-sm text-brand-700">
+                  Intelligent agents orchestrate infrastructure layers to guarantee sovereignty and
+                  resilience while maintaining the elegance of a single control plane.
+                </p>
+                <div className="mt-6 h-40 w-full rounded-2xl bg-gradient-to-br from-brand-100 via-white to-brand-200 opacity-80" />
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </div>
+    </section>
+  );
+};
--- a/src/pages/technology/components/TechnologyHero.tsx
+++ b/src/pages/technology/components/TechnologyHero.tsx
@@ -0,0 +1,38 @@
+import { motion } from 'framer-motion';
+import { PrimaryButton } from '../../../components/ui/PrimaryButton';
+
+export const TechnologyHero = () => {
+  return (
+    <section className="relative overflow-hidden rounded-3xl text-white">
+      <img
+        src="/images/hometech.jpg"
+        alt=""
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+      <div className="absolute inset-0 bg-gradient-to-br from-[#0f172a]/80 via-[#1e1b4b]/70 to-[#312e81]/75" />
+      <motion.div
+        initial={{ opacity: 0, y: 32 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.3 }}
+        transition={{ duration: 0.6, ease: 'easeOut' }}
+        className="relative z-10 px-6 py-20 sm:px-10 lg:px-16 lg:py-24"
+      >
+        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white/70">
+          Technology
+        </p>
+        <h1 className="mt-6 text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl">
+          The Foundation of the Next-Generation Datacenter
+        </h1>
+        <p className="mt-6 max-w-3xl text-base text-white/75 sm:text-lg">
+          GeoMind combines hardware and revolutionary software to deliver secure, scalable, and
+          sovereign cloud and AI infrastructure. Built for efficiency, sustainability, and
+          profitability, it empowers organizations to run workloads, scale globally, and monetize
+          excess capacity.
+        </p>
+        <div className="mt-10">
+          <PrimaryButton to="/usecases">Use Cases</PrimaryButton>
+        </div>
+      </motion.div>
+    </section>
+  );
+};
--- a/src/pages/technology/components/TechnologyStack.tsx
+++ b/src/pages/technology/components/TechnologyStack.tsx
@@ -0,0 +1,60 @@
+import { motion } from 'framer-motion';
+
+const stackItems = [
+  {
+    title: 'Tier S Datacenters',
+    image: '/images/tiers.png',
+    description:
+      'Strategically deployed, containerized datacenters built for autonomy and resilience. Self-healing infrastructure that runs AI & cloud workloads at the edge while delivering up to 3x lower energy use, improved security, and significantly higher ROI.',
+  },
+  {
+    title: 'Tier H Datacenters',
+    image: '/images/tierh.png',
+    description:
+      'Lightweight edge nodes for homes, offices, and campuses that turn properties into secure, reward-earning contributors to global infrastructure. Easy to deploy and manage, designed for planetary-scale rollout without requiring specialist technical skills.',
+  },
+];
+
+export const TechnologyStack = () => {
+  return (
+    <section className="relative overflow-hidden rounded-3xl text-white">
+      <img
+        src="/images/hometech.jpg"
+        alt=""
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+      <div className="absolute inset-0 bg-gradient-to-br from-[#0f172a]/85 via-[#312e81]/70 to-[#020617]/85" />
+      <div className="relative z-10 px-6 py-16 sm:px-10 lg:px-16 lg:py-24">
+        <div className="mx-auto max-w-3xl text-center">
+          <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white/60">
+            Technology Stack
+          </p>
+          <h2 className="mt-4 text-3xl font-semibold sm:text-4xl">An Infrastructure Built for the AI Era</h2>
+          <p className="mt-5 text-base text-white/70 sm:text-lg">
+            Our unique technology stack delivers unmatched security, scalability, and flexibility,
+            preparing you for the AI workforce of the future.
+          </p>
+        </div>
+        <div className="mt-12 grid gap-6 lg:grid-cols-2">
+          {stackItems.map((item, index) => (
+            <motion.div
+              key={item.title}
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              className="overflow-hidden rounded-3xl bg-white/10 backdrop-blur"
+            >
+              <div className="relative h-56 overflow-hidden">
+                <img src={item.image} alt={item.title} className="h-full w-full object-cover" />
+                <div className="absolute inset-0 bg-gradient-to-t from-[#020617]/70 via-transparent to-transparent" />
+                <h3 className="absolute bottom-6 left-6 text-xl font-semibold">{item.title}</h3>
+              </div>
+              <p className="p-6 text-sm leading-6 text-white/75">{item.description}</p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
--- a/src/pages/usecases/UseCasesPage.tsx
+++ b/src/pages/usecases/UseCasesPage.tsx
@@ -0,0 +1,11 @@
+import { UseCasesHero } from './components/UseCasesHero';
+import { UseCasesGrid } from './components/UseCasesGrid';
+
+export const UseCasesPage = () => {
+  return (
+    <div className="space-y-12 lg:space-y-16">
+      <UseCasesHero />
+      <UseCasesGrid />
+    </div>
+  );
+};
--- a/src/pages/usecases/components/UseCasesGrid.tsx
+++ b/src/pages/usecases/components/UseCasesGrid.tsx
@@ -0,0 +1,89 @@
+import { motion } from 'framer-motion';
+
+const useCases = [
+  {
+    title: 'Tier-S Datacenters',
+    description:
+      "GeoMind's datacenters are 60% more efficient, disaster-resistant, highly secure, fully private, and can be deployed in weeks rather than years, offering a faster, safer, and smarter solution for modern data needs.",
+    image: '/images/tier-s.jpeg',
+  },
+  {
+    title: 'Tier-H Datacenters',
+    description:
+      "GeoMind's distributed datacenter architecture extends from core to edge, seamlessly scaling into homes, offices, and communities. Its ultra-efficient AI, compute, and storage nodes deliver unmatched cost efficiency, performance, and scalability.",
+    image: '/images/tier-h.jpeg',
+  },
+  {
+    title: 'Project Mycelium',
+    description:
+      'Project Mycelium is a core use case of our ecosystem, providing a decentralized, scalable, and secure infrastructure. Built on a global network of independent nodes, it allows individuals and businesses to participate in a more open, distributed, and participatory cloud and Internet model.',
+    image: '/images/mycelium.jpeg',
+  },
+  {
+    title: 'Zanzibar Digital Free Zone',
+    description:
+      'Zanzibar Digital Free Zone offers a sovereign jurisdiction for digital innovation, allowing businesses to operate with regulatory clarity and independent dispute resolution. It supports the emerging Real World Assets (RWA) economy, enabling compliant management of digital and physical assets.',
+    image: '/images/freezone.jpeg',
+  },
+  {
+    title: 'COOP Cloud',
+    description:
+      'COOP Cloud is a global cooperative where every user is a member with one vote. Offering a decentralized alternative to centralized cloud providers, it empowers users to deploy nodes worldwide, aiming to create Augmented Collective Intelligence with over one million nodes globally.',
+    image: '/images/coop.jpeg',
+  },
+  {
+    title: 'Sovereign Cloud & Internet for Countries',
+    description:
+      'Most countries lack independent Internet infrastructure and rely on foreign operators. GeoMind enables countries to deploy their own sovereign Cloud & Internet, ensuring economic benefits, data sovereignty, and local control. Several governments are already exploring this.',
+    image: '/images/countries.jpeg',
+  },
+];
+
+export const UseCasesGrid = () => {
+  return (
+    <section className="py-16 lg:py-24">
+      <div className="relative overflow-hidden rounded-3xl border border-slate-100 bg-white/80 p-8 shadow-subtle backdrop-blur lg:p-16">
+        <div className="pointer-events-none absolute -bottom-20 -left-32 h-72 w-72 rounded-full bg-brand-100 opacity-50 blur-3xl" />
+        <div className="pointer-events-none absolute -top-24 right-12 h-48 w-48 rounded-full bg-brand-200 opacity-40 blur-3xl" />
+        <motion.div
+          initial={{ opacity: 0, y: 24 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.3 }}
+          transition={{ duration: 0.6, ease: 'easeOut' }}
+          className="relative z-10"
+        >
+          <h2 className="text-3xl font-semibold text-ink sm:text-4xl">Use Cases</h2>
+          <p className="mt-5 max-w-4xl text-base text-slate-600 sm:text-lg">
+            GeoMind's next-generation datacenter architecture extends from core to edge, seamlessly
+            connecting Tier S hyperscale facilities with Tier H local nodes to create a unified,
+            sovereign infrastructure. Up to 60% more energy-efficient and built for resilience, privacy,
+            and quantum-safe security, it can be deployed in weeks rather than years. These capabilities
+            power the transformative use cases below, driving a more secure, efficient, and autonomous
+            digital future.
+          </p>
+          <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            {useCases.map((useCase, index) => (
+              <motion.article
+                key={useCase.title}
+                initial={{ opacity: 0, y: 24 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, amount: 0.25 }}
+                transition={{ duration: 0.5, delay: index * 0.05 }}
+                className="overflow-hidden rounded-3xl border border-slate-100 bg-white/90 shadow-subtle"
+              >
+                <div className="relative h-48 overflow-hidden">
+                  <img src={useCase.image} alt={useCase.title} className="h-full w-full object-cover" />
+                  <div className="absolute inset-0 bg-gradient-to-t from-ink/70 via-transparent to-transparent" />
+                  <h3 className="absolute bottom-4 left-4 text-lg font-semibold text-white">
+                    {useCase.title}
+                  </h3>
+                </div>
+                <p className="p-6 text-sm leading-6 text-slate-600">{useCase.description}</p>
+              </motion.article>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
--- a/src/pages/usecases/components/UseCasesHero.tsx
+++ b/src/pages/usecases/components/UseCasesHero.tsx
@@ -0,0 +1,34 @@
+import { motion } from 'framer-motion';
+
+export const UseCasesHero = () => {
+  return (
+    <section className="relative overflow-hidden rounded-3xl text-white">
+      <img
+        src="/images/uscase_BG.png"
+        alt=""
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+      <div className="absolute inset-0 bg-gradient-to-br from-[#0f172a]/80 via-[#1e1b4b]/70 to-[#312e81]/80" />
+      <motion.div
+        initial={{ opacity: 0, y: 32 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.3 }}
+        transition={{ duration: 0.6, ease: 'easeOut' }}
+        className="relative z-10 px-6 py-20 sm:px-10 lg:px-16 lg:py-24"
+      >
+        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white/70">
+          Real World Applications
+        </p>
+        <h1 className="mt-6 text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl">
+          Designed for Real-World Impact
+        </h1>
+        <p className="mt-6 max-w-3xl text-base text-white/75 sm:text-lg">
+          GeoMind empowers organizations to deploy secure, efficient, and sovereign cloud and AI
+          infrastructure anywhere. From enterprises to governments, our use cases demonstrate how
+          next-generation datacenters generate value, ensure sovereignty, and support modern AI,
+          cloud, and edge workloads.
+        </p>
+      </motion.div>
+    </section>
+  );
+};
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,32 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{ts,tsx,js,jsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['"Plus Jakarta Sans"', 'Inter', 'system-ui', 'sans-serif'],
+        display: ['"Plus Jakarta Sans"', 'Inter', 'system-ui', 'sans-serif'],
+      },
+      colors: {
+        brand: {
+          50: '#f5f7ff',
+          100: '#e9edff',
+          200: '#cdd7ff',
+          300: '#a5b6ff',
+          400: '#7a8df9',
+          500: '#5a6bf0',
+          600: '#4350d7',
+          700: '#4149b3',
+          800: '#343b8a',
+          900: '#2d336c',
+        },
+        ink: '#111827',
+        mist: '#f6f8fb',
+      },
+      boxShadow: {
+        subtle: '0 20px 45px -25px rgba(18, 28, 132, 0.35)',
+      },
+    },
+  },
+  plugins: [],
+};
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>