ok

refactor: consolidate navigation links into reusable NavLinks component with dynamic styling
feat: add email links and update navigation structure
2025-09-19 14:14:04 +02:00 · 2025-09-19 14:08:46 +02:00 · 2025-09-19 14:01:47 +02:00 · 2025-09-19 01:21:11 +02:00 · 2025-09-19 01:09:08 +02:00 · 2025-09-19 01:02:53 +02:00
116 changed files with 3073 additions and 3251 deletions
--- a/README.md
+++ b/README.md
@@ -1,35 +1,83 @@
-# Mycelium
+# Mycelium Cloud Website

-Mycelium is a [Tailwind Plus](https://tailwindcss.com/plus) site template built using [Tailwind CSS](https://tailwindcss.com) and [Next.js](https://nextjs.org).
+This is the official website for Mycelium Cloud, built using Next.js and Tailwind CSS.

-## Getting started
+## Getting Started

-To get started with this template, first install the npm dependencies:
+Follow these instructions to get a local copy up and running for development and testing purposes.

-```bash
-npm install
-```
+### Prerequisites

-Next, run the development server:
+Make sure you have Node.js and npm installed on your machine. You can download them from [nodejs.org](https://nodejs.org/).
+
+### Installation
+
+1.  Clone the repository to your local machine.
+2.  Install the NPM packages:
+    ```bash
+    npm install
+    ```
+
+### Running the Application
+
+To run the development server:

 ```bash
 npm run dev
 ```

-Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
+Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.

-## Customizing
+## Git Workflow

-You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
+We follow a branching model to ensure code quality and a stable production environment. All new work should be done on a feature branch.
+
+1.  **Switch to the `development` branch** and make sure it's up to date:
+    ```bash
+    git checkout development
+    git pull origin development
+    ```
+
+2.  **Create a new feature branch** for your changes:
+    ```bash
+    git checkout -b your-feature-name
+    ```
+
+3.  **Make your changes and commit them**.
+
+4.  **Push your feature branch** to the remote repository:
+    ```bash
+    git push origin your-feature-name
+    ```
+
+5.  **Create a Pull Request** on GitHub from your feature branch to the `development` branch.
+
+6.  After the pull request is reviewed and merged, the changes will be on the `development` branch. To deploy to production, the `development` branch will be merged into `main`.
+
+## Project Structure
+
+Here is an overview of the key directories in the project:
+
+-   `src/app/(main)/page.tsx`
+    This is the main entry point for the homepage.
+
+-   `src/components/`
+    This directory contains all the reusable React components used throughout the site. The main components rendered on the homepage (`src/app/(main)/page.tsx`) are:
+    - `HomeHero.tsx`
+    - `StackSection.tsx` (as `StackSectionPreview`)
+    - `BentoReviews.tsx`
+    - `WorldMap.tsx`
+    - `Steps.tsx`
+    - `Companies.tsx`
+    - `ClickableGallery.tsx`
+    - `CallToAction.tsx`
+
+-   `public/images/`
+    All static images are stored here. You can find logos, gallery images, and other visual assets in this folder.
+
+-   `public/videos/`
+    This folder contains video assets used on the site.

 ## License

 This site template is a commercial product and is licensed under the [Tailwind Plus license](https://tailwindcss.com/plus/license).
-
-## Learn more
-
-To learn more about the technologies used in this site template, see the following resources:
-
- [Tailwind CSS](https://tailwindcss.com/docs) - the official Tailwind CSS documentation
- [Next.js](https://nextjs.org/docs) - the official Next.js documentation
- [Headless UI](https://headlessui.dev) - the official Headless UI documentation
--- a/components.json
+++ b/components.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/tailwind.css",
+    "baseColor": "gray",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@magicui": "https://magicui.design/r/{name}.json"
+  }
+}
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />

 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    output: 'export',
+    images: {
+        unoptimized: true,
+    },
+}

 module.exports = nextConfig
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,14 +9,19 @@
      "version": "0.1.0",
      "dependencies": {
        "@headlessui/react": "^2.1.0",
+        "@heroicons/react": "^2.2.0",
        "@lobehub/icons": "^1.97.2",
+        "@tabler/icons-react": "^3.35.0",
        "@tailwindcss/forms": "^0.5.3",
-        "@tailwindcss/postcss": "^4.1.7",
        "@types/node": "^20.10.8",
        "@types/react": "^18.2.55",
        "@types/react-dom": "^18.2.18",
-        "clsx": "^2.1.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "cobe": "^0.6.4",
        "framer-motion": "^10.15.0",
+        "lucide-react": "^0.544.0",
+        "motion": "^12.23.12",
        "next": "^14.0.4",
        "popmotion": "^11.0.5",
        "react": "^18.2.0",
@@ -30,17 +35,20 @@
        "use-debounce": "^10.0.0"
      },
      "devDependencies": {
+        "@tailwindcss/postcss": "^4.1.13",
        "eslint": "^8.56.0",
        "eslint-config-next": "^14.0.4",
        "prettier": "^3.3.2",
        "prettier-plugin-tailwindcss": "^0.6.11",
-        "sharp": "0.33.1"
+        "sharp": "0.33.1",
+        "tw-animate-css": "^1.3.8"
      }
    },
    "node_modules/@alloc/quick-lru": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=10"
@@ -634,6 +642,7 @@
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.5.0.tgz",
      "integrity": "sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==",
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "dependencies": {
@@ -645,6 +654,7 @@
      "version": "0.44.0",
      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-0.44.0.tgz",
      "integrity": "sha512-ZX/etZEZw8DR7zAB1eVQT40lNo0jeqpb6dCgOvctB6FIQ5PoXfMuNY8+ayQfu8tNQbAB8gQWSSJupR8NxeiZXw==",
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "dependencies": {
@@ -655,6 +665,7 @@
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
      "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "dependencies": {
@@ -1020,6 +1031,15 @@
        "react-dom": "^18 || ^19 || ^19.0.0-rc"
      }
    },
+    "node_modules/@heroicons/react": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
+      "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16 || ^19.0.0-rc"
+      }
+    },
    "node_modules/@humanwhocodes/config-array": {
      "version": "0.13.0",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -1612,6 +1632,7 @@
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "dev": true,
      "license": "ISC",
      "dependencies": {
        "minipass": "^7.0.4"
@@ -1713,6 +1734,15 @@
      "integrity": "sha512-lb49vf1Xzfx080OKA0o6l8DQQpV+6Vg95zyCJX9VB/BqKYlhG7N4wgROUUHRA+ZPUefLnteQOad7z1kT2bV7bg==",
      "license": "MIT"
    },
+    "node_modules/@lobehub/fluent-emoji/node_modules/lucide-react": {
+      "version": "0.469.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz",
+      "integrity": "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/@lobehub/icons": {
      "version": "1.97.2",
      "resolved": "https://registry.npmjs.org/@lobehub/icons/-/icons-1.97.2.tgz",
@@ -1731,6 +1761,15 @@
        "react-dom": "^18.0.0 || ^19.0.0"
      }
    },
+    "node_modules/@lobehub/icons/node_modules/lucide-react": {
+      "version": "0.469.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz",
+      "integrity": "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/@lobehub/ui": {
      "version": "1.171.0",
      "resolved": "https://registry.npmjs.org/@lobehub/ui/-/ui-1.171.0.tgz",
@@ -1916,6 +1955,7 @@
      "version": "0.2.12",
      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
      "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "dependencies": {
@@ -1928,6 +1968,7 @@
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.5.0.tgz",
      "integrity": "sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==",
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "dependencies": {
@@ -2936,6 +2977,32 @@
        "tslib": "^2.8.0"
      }
    },
+    "node_modules/@tabler/icons": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.35.0.tgz",
+      "integrity": "sha512-yYXe+gJ56xlZFiXwV9zVoe3FWCGuZ/D7/G4ZIlDtGxSx5CGQK110wrnT29gUj52kEZoxqF7oURTk97GQxELOFQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.35.0.tgz",
+      "integrity": "sha512-XG7t2DYf3DyHT5jxFNp5xyLVbL4hMJYJhiSdHADzAjLRYfL7AnjlRfiHDHeXxkb2N103rEIvTsBRazxXtAUz2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@tabler/icons": "3.35.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
    "node_modules/@tailwindcss/forms": {
      "version": "0.5.10",
      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.10.tgz",
@@ -2952,6 +3019,7 @@
      "version": "4.1.13",
      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.13.tgz",
      "integrity": "sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@jridgewell/remapping": "^2.3.4",
@@ -2967,6 +3035,7 @@
      "version": "4.1.13",
      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.13.tgz",
      "integrity": "sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==",
+      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
      "dependencies": {
@@ -2998,6 +3067,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -3014,6 +3084,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -3030,6 +3101,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -3046,6 +3118,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -3062,6 +3135,7 @@
      "cpu": [
        "arm"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -3078,6 +3152,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -3094,6 +3169,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -3110,6 +3186,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -3126,6 +3203,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -3150,6 +3228,7 @@
      "cpu": [
        "wasm32"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "dependencies": {
@@ -3171,6 +3250,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -3187,6 +3267,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -3200,6 +3281,7 @@
      "version": "4.1.13",
      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.13.tgz",
      "integrity": "sha512-HLgx6YSFKJT7rJqh9oJs/TkBFhxuMOfUKSBEPYwV+t78POOBsdQ7crhZLzwcH3T0UyUuOzU/GK5pk5eKr3wCiQ==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@alloc/quick-lru": "^5.2.0",
@@ -3240,6 +3322,7 @@
      "version": "0.10.1",
      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "dependencies": {
@@ -4959,6 +5042,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "dev": true,
      "license": "BlueOak-1.0.0",
      "engines": {
        "node": ">=18"
@@ -5003,6 +5087,15 @@
        "node": ">=6"
      }
    },
+    "node_modules/cobe": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/cobe/-/cobe-0.6.4.tgz",
+      "integrity": "sha512-huuGFnDoXLy/tsCZYYa/H35BBRs9cxsS0XKJ3BXjRp699cQKuoEVrvKlAQMx0DKXG7+VUv4jsHVrS7yPbkLSkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "phenomenon": "^1.6.0"
+      }
+    },
    "node_modules/collapse-white-space": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-2.1.0.tgz",
@@ -5854,6 +5947,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,
      "license": "Apache-2.0",
      "engines": {
        "node": ">=8"
@@ -5939,6 +6033,7 @@
      "version": "5.18.3",
      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "graceful-fs": "^4.2.4",
@@ -8370,6 +8465,7 @@
      "version": "2.5.1",
      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz",
      "integrity": "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==",
+      "dev": true,
      "license": "MIT",
      "bin": {
        "jiti": "lib/jiti-cli.mjs"
@@ -8610,6 +8706,7 @@
      "version": "1.30.1",
      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "dev": true,
      "license": "MPL-2.0",
      "dependencies": {
        "detect-libc": "^2.0.3"
@@ -8641,6 +8738,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
@@ -8661,6 +8759,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
@@ -8681,6 +8780,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
@@ -8701,6 +8801,7 @@
      "cpu": [
        "arm"
      ],
+      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
@@ -8721,6 +8822,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
@@ -8741,6 +8843,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
@@ -8761,6 +8864,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
@@ -8781,6 +8885,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
@@ -8801,6 +8906,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
@@ -8821,6 +8927,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
@@ -8959,9 +9066,9 @@
      "license": "ISC"
    },
    "node_modules/lucide-react": {
-      "version": "0.469.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz",
-      "integrity": "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==",
+      "version": "0.544.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.544.0.tgz",
+      "integrity": "sha512-t5tS44bqd825zAW45UQxpG2CvcC4urOwn2TrwSH8u+MjeE+1NnWl6QqeQ/6NdjMqdOygyiT9p3Ev0p1NJykxjw==",
      "license": "ISC",
      "peerDependencies": {
        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -8971,6 +9078,7 @@
      "version": "0.30.19",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -10191,6 +10299,7 @@
      "version": "7.1.2",
      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
      "license": "ISC",
      "engines": {
        "node": ">=16 || 14 >=14.17"
@@ -10200,6 +10309,7 @@
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "minipass": "^7.1.2"
@@ -10225,6 +10335,7 @@
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "dev": true,
      "license": "MIT",
      "bin": {
        "mkdirp": "dist/cjs/src/bin.js"
@@ -10265,6 +10376,32 @@
        "pathe": "^2.0.1"
      }
    },
+    "node_modules/motion": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.12.tgz",
+      "integrity": "sha512-8jCD8uW5GD1csOoqh1WhH1A6j5APHVE15nuBkFeRiMzYBdRwyAHmSP/oXSuW0WJPZRXTFdBoG4hY9TFWNhhwng==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.23.12",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/motion-dom": {
      "version": "11.18.1",
      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz",
@@ -10280,6 +10417,48 @@
      "integrity": "sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==",
      "license": "MIT"
    },
+    "node_modules/motion/node_modules/framer-motion": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
+      "integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.12",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion/node_modules/motion-dom": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz",
+      "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion/node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
    "node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -10806,6 +10985,12 @@
      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
      "license": "MIT"
    },
+    "node_modules/phenomenon": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/phenomenon/-/phenomenon-1.6.0.tgz",
+      "integrity": "sha512-7h9/fjPD3qNlgggzm88cY58l9sudZ6Ey+UmZsizfhtawO6E3srZQXywaNm2lBwT72TbpHYRPy7ytIHeBUD/G0A==",
+      "license": "MIT"
+    },
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -10896,6 +11081,7 @@
      "version": "8.5.6",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@@ -13304,6 +13490,7 @@
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.3.tgz",
      "integrity": "sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=6"
@@ -13317,6 +13504,7 @@
      "version": "7.4.3",
      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+      "dev": true,
      "license": "ISC",
      "dependencies": {
        "@isaacs/fs-minipass": "^4.0.0",
@@ -13491,6 +13679,16 @@
      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
      "license": "0BSD"
    },
+    "node_modules/tw-animate-css": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.3.8.tgz",
+      "integrity": "sha512-Qrk3PZ7l7wUcGYhwZloqfkWCmaXZAoqjkdbIDvzfGshwGtexa/DAs9koXxIkrpEasyevandomzCBAV1Yyop5rw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Wombosvideo"
+      }
+    },
    "node_modules/type-check": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -14242,6 +14440,7 @@
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "dev": true,
      "license": "BlueOak-1.0.0",
      "engines": {
        "node": ">=18"
--- a/package.json
+++ b/package.json
@@ -11,14 +11,19 @@
  "browserslist": "defaults, not ie <= 11",
  "dependencies": {
    "@headlessui/react": "^2.1.0",
+    "@heroicons/react": "^2.2.0",
    "@lobehub/icons": "^1.97.2",
+    "@tabler/icons-react": "^3.35.0",
    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/postcss": "^4.1.7",
    "@types/node": "^20.10.8",
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.18",
-    "clsx": "^2.1.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cobe": "^0.6.4",
    "framer-motion": "^10.15.0",
+    "lucide-react": "^0.544.0",
+    "motion": "^12.23.12",
    "next": "^14.0.4",
    "popmotion": "^11.0.5",
    "react": "^18.2.0",
@@ -32,10 +37,12 @@
    "use-debounce": "^10.0.0"
  },
  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.13",
    "eslint": "^8.56.0",
    "eslint-config-next": "^14.0.4",
    "prettier": "^3.3.2",
    "prettier-plugin-tailwindcss": "^0.6.11",
-    "sharp": "0.33.1"
+    "sharp": "0.33.1",
+    "tw-animate-css": "^1.3.8"
  }
 }
--- a/public/images/benefits.webp
+++ b/public/images/benefits.webp
--- a/public/images/deployment.webp
+++ b/public/images/deployment.webp
--- a/public/images/gallery/branding.jpg
+++ b/public/images/gallery/branding.jpg
--- a/public/images/gallery/calendar.jpg
+++ b/public/images/gallery/calendar.jpg
--- a/public/images/gallery/code.jpg
+++ b/public/images/gallery/code.jpg
--- a/public/images/gallery/data.jpg
+++ b/public/images/gallery/data.jpg
--- a/public/images/gallery/datasets.jpg
+++ b/public/images/gallery/datasets.jpg
--- a/public/images/gallery/docs.jpg
+++ b/public/images/gallery/docs.jpg
--- a/public/images/gallery/flow.jpg
+++ b/public/images/gallery/flow.jpg
--- a/public/images/gallery/interface.jpg
+++ b/public/images/gallery/interface.jpg
--- a/public/images/gallery/market.jpg
+++ b/public/images/gallery/market.jpg
--- a/public/images/gallery/structure.jpg
+++ b/public/images/gallery/structure.jpg
--- a/public/images/gallery/translate.jpg
+++ b/public/images/gallery/translate.jpg
--- a/public/images/getstarted.webp
+++ b/public/images/getstarted.webp
--- a/public/images/logo.png
+++ b/public/images/logo.png
--- a/public/images/logo.svg
+++ b/public/images/logo.svg
--- a/public/images/logomark.png
+++ b/public/images/logomark.png
--- a/public/images/logomark.svg
+++ b/public/images/logomark.svg
--- a/public/images/m.png
+++ b/public/images/m.png
--- a/public/images/placeholder.png
+++ b/public/images/placeholder.png
--- a/public/images/stars.webp
+++ b/public/images/stars.webp
--- a/public/videos/agent.mp4
+++ b/public/videos/agent.mp4
--- a/public/videos/benefits.jpg
+++ b/public/videos/benefits.jpg
--- a/public/videos/benefits.mp4
+++ b/public/videos/benefits.mp4
--- a/public/videos/cta.mp4
+++ b/public/videos/cta.mp4
--- a/public/videos/deterministic.mp4
+++ b/public/videos/deterministic.mp4
--- a/public/videos/fungistor.mp4
+++ b/public/videos/fungistor.mp4
--- a/public/videos/herodb.mp4
+++ b/public/videos/herodb.mp4
--- a/public/videos/mesh.mp4
+++ b/public/videos/mesh.mp4
--- a/public/videos/mycelium.mp4
+++ b/public/videos/mycelium.mp4
--- a/public/videos/mycelium2.mp4
+++ b/public/videos/mycelium2.mp4
--- a/public/videos/sandbox.mp4
+++ b/public/videos/sandbox.mp4
--- a/public/videos/universal.mp4
+++ b/public/videos/universal.mp4
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -1,49 +0,0 @@
-import { type Metadata } from 'next'
-import Link from 'next/link'
-
-import { AuthLayout } from '@/components/AuthLayout'
-import { Button } from '@/components/Button'
-import { TextField } from '@/components/Fields'
-
-export const metadata: Metadata = {
-  title: 'Sign In',
-}
-
-export default function Login() {
-  return (
-    <AuthLayout
-      title="Sign in to account"
-      subtitle={
-        <>
-          Don’t have an account?{' '}
-          <Link href="/register" className="text-cyan-600">
-            Sign up
-          </Link>{' '}
-          for a free trial.
-        </>
-      }
-    >
-      <form>
-        <div className="space-y-6">
-          <TextField
-            label="Email address"
-            name="email"
-            type="email"
-            autoComplete="email"
-            required
-          />
-          <TextField
-            label="Password"
-            name="password"
-            type="password"
-            autoComplete="current-password"
-            required
-          />
-        </div>
-        <Button type="submit" color="cyan" className="mt-8 w-full">
-          Sign in to account
-        </Button>
-      </form>
-    </AuthLayout>
-  )
-}
--- a/src/app/(auth)/register/page.tsx
+++ b/src/app/(auth)/register/page.tsx
@@ -1,75 +0,0 @@
-import { type Metadata } from 'next'
-import Link from 'next/link'
-
-import { AuthLayout } from '@/components/AuthLayout'
-import { Button } from '@/components/Button'
-import { SelectField, TextField } from '@/components/Fields'
-
-export const metadata: Metadata = {
-  title: 'Sign Up',
-}
-
-export default function Register() {
-  return (
-    <AuthLayout
-      title="Sign up for an account"
-      subtitle={
-        <>
-          Already registered?{' '}
-          <Link href="/login" className="text-cyan-600">
-            Sign in
-          </Link>{' '}
-          to your account.
-        </>
-      }
-    >
-      <form>
-        <div className="grid grid-cols-2 gap-6">
-          <TextField
-            label="First name"
-            name="first_name"
-            type="text"
-            autoComplete="given-name"
-            required
-          />
-          <TextField
-            label="Last name"
-            name="last_name"
-            type="text"
-            autoComplete="family-name"
-            required
-          />
-          <TextField
-            className="col-span-full"
-            label="Email address"
-            name="email"
-            type="email"
-            autoComplete="email"
-            required
-          />
-          <TextField
-            className="col-span-full"
-            label="Password"
-            name="password"
-            type="password"
-            autoComplete="new-password"
-            required
-          />
-          <SelectField
-            className="col-span-full"
-            label="How did you hear about us?"
-            name="referral_source"
-          >
-            <option>AltaVista search</option>
-            <option>Super Bowl commercial</option>
-            <option>Our route 34 city bus ad</option>
-            <option>The “Never Use This” podcast</option>
-          </SelectField>
-        </div>
-        <Button type="submit" color="cyan" className="mt-8 w-full">
-          Get started today
-        </Button>
-      </form>
-    </AuthLayout>
-  )
-}
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -7,10 +7,13 @@ import { HomeAbout } from '@/components/HomeAbout'
 import { ClickableGallery } from '@/components/ClickableGallery'
 import { StackSectionPreview } from '@/components/StackSection'
 import { Companies } from '@/components/Companies'
-import { CallTo } from '@/components/CallTo'
+import { CallToAction } from '@/components/CallToAction'
 import { ScrollDown } from '@/components/ui/ScrollDown'
 import { ScrollUp } from '@/components/ui/ScrollUp'
 import { GridStats } from '@/components/GridStats'
+import { WorldMap } from '@/components/WorldMap'
+import { GetStarted } from '@/components/GetStarted'
+import { BentoReviews } from '@/components/BentoReviews'

 export default function Home() {
  return (
@@ -18,35 +21,27 @@ export default function Home() {
      <section id="home-hero">
        <HomeHero />
      </section>
-      <section id="home-about">
-        <HomeAbout />
-      </section>
-      <section id="grid-stats">
-        <GridStats />
-      </section>
-      <section id="companies">
-        <Companies />
-      </section>
-      <section id="stack-section">
+      <section id="technologies">
        <StackSectionPreview />
      </section>
-      <section id="steps">
+      <section id="bento-reviews">
+        <BentoReviews />
+      </section>
+      <section id="network">
+        <WorldMap />
+      </section>
+      <section id="deploy">
        <Steps />
      </section>
+      <section id="llms">
+        <Companies />
+      </section>
      <section id="clickable-gallery">
        <ClickableGallery />
      </section>
-      <section id="use-cases">
-        <UseCases />
-      </section>
      <section id="call-to-action">
-        <CallTo />
+        <CallToAction />
      </section>
-      <section id="faqs">
-        <Faqs />
-      </section>
-      <ScrollDown />
-      <ScrollUp />
    </>
  )
 }
--- a/src/app/.DS_Store
+++ b/src/app/.DS_Store
--- a/src/app/favicon.ico
+++ b/src/app/favicon.ico
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -25,8 +25,8 @@ export default function RootLayout({
  children: React.ReactNode
 }) {
  return (
-    <html lang="en" className={clsx('bg-white antialiased', mulish.variable)}>
-      <body>{children}</body>
+    <html lang="en" className={clsx('antialiased', mulish.variable)}>
+      <body className="bg-black text-white">{children}</body>
    </html>
  )
 }
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -1,32 +0,0 @@
-import { AppStoreLink } from '@/components/AppStoreLink'
-import { CircleBackground } from '@/components/CircleBackground'
-import { Container } from '@/components/Container'
-
-export function About() {
-  return (
-    <section
-      id="about"
-      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
-    >
-      <div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
-        <CircleBackground color="#fff" className="animate-spin-slower" />
-      </div>
-      <Container className="relative">
-        <div className="mx-auto max-w-3xl sm:text-center">
-          <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
-            Discover Mycelium
-          </h2>
-          <p className="mt-6 text-lg text-gray-300">
-            Mycelium is an unbreakable network, always finding the shortest path and providing 100% secure, peer-to-peer communication. But this is just the beginning.
-          </p>
-          <p className="mt-6 text-lg text-gray-300">
-            Our mission is to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.
-          </p>
-          <div className="mt-8 flex justify-center">
-            <AppStoreLink color="white" />
-          </div>
-        </div>
-      </Container>
-    </section>
-  )
-}
--- a/src/components/AndroidLink.tsx
+++ b/src/components/AndroidLink.tsx
@@ -1,71 +0,0 @@
-import Link from 'next/link'
-import clsx from 'clsx'
-
-export function AndroidLink({
-  color = 'black',
-}: {
-  color?: 'black' | 'white'
-}) {
-  return (
-    <Link
-      href="#"
-      aria-label="Download for Android"
-      className={clsx(
-        'flex items-center rounded-lg transition-colors px-4 py-2',
-        color === 'black'
-          ? 'bg-gray-800 text-white hover:bg-gray-900'
-          : 'bg-white text-gray-900 hover:bg-gray-50',
-      )}
-    >
-      {/* Android SVG (converted for JSX) */}
-      <svg
-        viewBox="0 0 60 60"
-        aria-hidden="true"
-        className="h-5 w-5 mr-3"
-      >
-        <defs>
-          <clipPath id="android_clip_a">
-            <path d="M 1.566406 25 L 8 25 L 8 43 L 1.566406 43 Z M 1.566406 25 " clipRule="nonzero" />
-          </clipPath>
-          <clipPath id="android_clip_b">
-            <path d="M 10 25 L 34 25 L 34 53.640625 L 10 53.640625 Z M 10 25 " clipRule="nonzero" />
-          </clipPath>
-        </defs>
-        <g clipPath="url(#android_clip_a)">
-          <path
-            fill="currentColor"
-            d="M 4.445312 25.296875 C 2.855469 25.296875 1.5625 26.582031 1.5625 28.164062 L 1.5625 39.636719 C 1.5625 41.21875 2.855469 42.503906 4.445312 42.503906 C 6.035156 42.503906 7.324219 41.21875 7.324219 39.636719 L 7.324219 28.164062 C 7.324219 26.582031 6.035156 25.296875 4.445312 25.296875 Z M 4.445312 25.296875 "
-            fillOpacity="1"
-            fillRule="nonzero"
-          />
-        </g>
-        <path
-          fill="currentColor"
-          d="M 39.015625 25.296875 C 37.425781 25.296875 36.132812 26.582031 36.132812 28.164062 L 36.132812 39.636719 C 36.132812 41.21875 37.425781 42.503906 39.015625 42.503906 C 40.605469 42.503906 41.894531 41.21875 41.894531 39.636719 L 41.894531 28.164062 C 41.894531 26.582031 40.605469 25.296875 39.015625 25.296875 Z M 39.015625 25.296875 "
-          fillOpacity="1"
-          fillRule="nonzero"
-        />
-        <g clipPath="url(#android_clip_b)">
-          <path
-            fill="currentColor"
-            d="M 10.207031 42.667969 C 10.207031 44.253906 11.496094 45.535156 13.085938 45.535156 L 13.085938 51.105469 C 13.085938 52.6875 14.378906 53.972656 15.96875 53.972656 C 17.558594 53.972656 18.847656 52.6875 18.847656 51.105469 L 18.847656 45.535156 L 24.609375 45.535156 L 24.609375 51.105469 C 24.609375 52.6875 25.902344 53.972656 27.492188 53.972656 C 29.082031 53.972656 30.371094 52.6875 30.371094 51.105469 L 30.371094 45.535156 C 31.960938 45.535156 33.253906 44.253906 33.253906 42.667969 L 33.253906 25.464844 L 10.207031 25.464844 Z M 10.207031 42.667969 "
-            fillOpacity="1"
-            fillRule="nonzero"
-          />
-        </g>
-        <path
-          fill="currentColor"
-          d="M 28.921875 13.53125 L 31.484375 10.4375 C 31.992188 9.824219 31.90625 8.921875 31.292969 8.417969 C 30.675781 7.914062 29.769531 8 29.261719 8.609375 L 26.460938 11.992188 C 25.015625 11.339844 23.421875 10.957031 21.730469 10.957031 C 20.015625 10.957031 18.402344 11.355469 16.941406 12.023438 L 14.214844 8.628906 C 13.714844 8.011719 12.808594 7.910156 12.1875 8.40625 C 11.570312 8.902344 11.46875 9.804688 11.964844 10.421875 L 14.492188 13.570312 C 11.898438 15.671875 10.207031 18.839844 10.207031 22.429688 L 33.253906 22.429688 C 33.253906 18.816406 31.542969 15.632812 28.921875 13.53125 Z M 18.847656 18.128906 C 18.054688 18.128906 17.410156 17.484375 17.410156 16.695312 C 17.410156 15.902344 18.054688 15.261719 18.847656 15.261719 C 19.644531 15.261719 20.289062 15.902344 20.289062 16.695312 C 20.289062 17.484375 19.644531 18.128906 18.847656 18.128906 Z M 24.609375 18.128906 C 23.816406 18.128906 23.171875 17.484375 23.171875 16.695312 C 23.171875 15.902344 23.816406 15.261719 24.609375 15.261719 C 25.40625 15.261719 26.050781 15.902344 26.050781 16.695312 C 26.050781 17.484375 25.40625 18.128906 24.609375 18.128906 Z M 24.609375 18.128906 "
-          fillOpacity="1"
-          fillRule="nonzero"
-        />
-      </svg>
-
-      {/* Text */}
-      <div className="flex flex-col text-left leading-tight">
-        <span className="text-[9px] mt-0">Download for</span>
-        <span className="text-sm font-semibold -mt-1.5">Android</span>
-      </div>
-    </Link>
-  )
-}
--- a/src/components/AppDemo.tsx
+++ b/src/components/AppDemo.tsx
@@ -1,250 +0,0 @@
-'use client'
-
-import { useId, useRef, useState } from 'react'
-import clsx from 'clsx'
-import { motion, useInView, useMotionValue } from 'framer-motion'
-
-import { AppScreen } from '@/components/AppScreen'
-
-const prices = [
-  997.56, 944.34, 972.25, 832.4, 888.76, 834.8, 805.56, 767.38, 861.21, 669.6,
-  694.39, 721.32, 694.03, 610.1, 502.2, 549.56, 611.03, 583.4, 610.14, 660.6,
-  752.11, 721.19, 638.89, 661.7, 694.51, 580.3, 638.0, 613.3, 651.64, 560.51,
-  611.45, 670.68, 752.56,
-]
-const maxPrice = Math.max(...prices)
-const minPrice = Math.min(...prices)
-
-function Chart({
-  className,
-  activePointIndex,
-  onChangeActivePointIndex,
-  width: totalWidth,
-  height: totalHeight,
-  paddingX = 0,
-  paddingY = 0,
-  gridLines = 6,
-  ...props
-}: React.ComponentPropsWithoutRef<'svg'> & {
-  activePointIndex: number | null
-  onChangeActivePointIndex: (index: number | null) => void
-  width: number
-  height: number
-  paddingX?: number
-  paddingY?: number
-  gridLines?: number
-}) {
-  let width = totalWidth - paddingX * 2
-  let height = totalHeight - paddingY * 2
-
-  let id = useId()
-  let svgRef = useRef<React.ElementRef<'svg'>>(null)
-  let pathRef = useRef<React.ElementRef<'path'>>(null)
-  let isInView = useInView(svgRef as React.RefObject<Element>, { amount: 0.5, once: true })
-  let pathWidth = useMotionValue(0)
-  let [interactionEnabled, setInteractionEnabled] = useState(false)
-
-  let path = ''
-  let points: Array<{ x: number; y: number }> = []
-
-  for (let index = 0; index < prices.length; index++) {
-    let x = paddingX + (index / (prices.length - 1)) * width
-    let y =
-      paddingY +
-      (1 - (prices[index] - minPrice) / (maxPrice - minPrice)) * height
-    points.push({ x, y })
-    path += `${index === 0 ? 'M' : 'L'} ${x.toFixed(4)} ${y.toFixed(4)}`
-  }
-
-  return (
-    <svg
-      ref={svgRef}
-      viewBox={`0 0 ${totalWidth} ${totalHeight}`}
-      className={clsx(className, 'overflow-visible')}
-      {...(interactionEnabled
-        ? {
-            onPointerLeave: () => onChangeActivePointIndex(null),
-            onPointerMove: (event) => {
-              let x = event.nativeEvent.offsetX
-              let closestPointIndex: number | null = null
-              let closestDistance = Infinity
-              for (
-                let pointIndex = 0;
-                pointIndex < points.length;
-                pointIndex++
-              ) {
-                let point = points[pointIndex]
-                let distance = Math.abs(point.x - x)
-                if (distance < closestDistance) {
-                  closestDistance = distance
-                  closestPointIndex = pointIndex
-                } else {
-                  break
-                }
-              }
-              onChangeActivePointIndex(closestPointIndex)
-            },
-          }
-        : {})}
-      {...props}
-    >
-      <defs>
-        <clipPath id={`${id}-clip`}>
-          <path d={`${path} V ${height + paddingY} H ${paddingX} Z`} />
-        </clipPath>
-        <linearGradient id={`${id}-gradient`} x1="0" x2="0" y1="0" y2="1">
-          <stop offset="0%" stopColor="#13B5C8" />
-          <stop offset="100%" stopColor="#13B5C8" stopOpacity="0" />
-        </linearGradient>
-      </defs>
-      {[...Array(gridLines - 1).keys()].map((index) => (
-        <line
-          key={index}
-          stroke="#a3a3a3"
-          opacity="0.1"
-          x1="0"
-          y1={(totalHeight / gridLines) * (index + 1)}
-          x2={totalWidth}
-          y2={(totalHeight / gridLines) * (index + 1)}
-        />
-      ))}
-      <motion.rect
-        y={paddingY}
-        width={pathWidth}
-        height={height}
-        fill={`url(#${id}-gradient)`}
-        clipPath={`url(#${id}-clip)`}
-        opacity="0.5"
-      />
-      <motion.path
-        ref={pathRef}
-        d={path}
-        fill="none"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        initial={{ pathLength: 0 }}
-        transition={{ duration: 1 }}
-        {...(isInView ? { stroke: '#06b6d4', animate: { pathLength: 1 } } : {})}
-        onUpdate={({ pathLength }) => {
-          if (pathRef.current && typeof pathLength === 'number') {
-            pathWidth.set(
-              pathRef.current.getPointAtLength(
-                pathLength * pathRef.current.getTotalLength(),
-              ).x,
-            )
-          }
-        }}
-        onAnimationComplete={() => setInteractionEnabled(true)}
-      />
-      {activePointIndex !== null && (
-        <>
-          <line
-            x1="0"
-            y1={points[activePointIndex].y}
-            x2={totalWidth}
-            y2={points[activePointIndex].y}
-            stroke="#06b6d4"
-            strokeDasharray="1 3"
-          />
-          <circle
-            r="4"
-            cx={points[activePointIndex].x}
-            cy={points[activePointIndex].y}
-            fill="#fff"
-            strokeWidth="2"
-            stroke="#06b6d4"
-          />
-        </>
-      )}
-    </svg>
-  )
-}
-
-export function AppDemo() {
-  let [activePointIndex, setActivePointIndex] = useState<number | null>(null)
-  let activePriceIndex = activePointIndex ?? prices.length - 1
-  let activeValue = prices[activePriceIndex]
-  let previousValue = prices[activePriceIndex - 1]
-  let percentageChange =
-    activePriceIndex === 0
-      ? null
-      : ((activeValue - previousValue) / previousValue) * 100
-
-  return (
-    <AppScreen>
-      <AppScreen.Body>
-        <div className="p-4">
-          <div className="flex gap-2">
-            <div className="text-xs/6 text-gray-500">Tailwind Labs, Inc.</div>
-            <div className="text-sm text-gray-900">$CSS</div>
-            <svg viewBox="0 0 24 24" className="ml-auto h-6 w-6" fill="none">
-              <path
-                d="M5 12a7 7 0 1 1 14 0 7 7 0 0 1-14 0ZM12 9v6M15 12H9"
-                stroke="#171717"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </div>
-          <div className="mt-3 border-t border-gray-200 pt-5">
-            <div className="flex items-baseline gap-2">
-              <div className="text-2xl tracking-tight text-gray-900 tabular-nums">
-                {activeValue.toFixed(2)}
-              </div>
-              <div className="text-sm text-gray-900">USD</div>
-              {percentageChange && (
-                <div
-                  className={clsx(
-                    'ml-auto text-sm tracking-tight tabular-nums',
-                    percentageChange >= 0 ? 'text-cyan-500' : 'text-gray-500',
-                  )}
-                >
-                  {`${
-                    percentageChange >= 0 ? '+' : ''
-                  }${percentageChange.toFixed(2)}%`}
-                </div>
-              )}
-            </div>
-            <div className="mt-6 flex gap-4 text-xs text-gray-500">
-              <div>1D</div>
-              <div>5D</div>
-              <div className="font-semibold text-cyan-600">1M</div>
-              <div>6M</div>
-              <div>1Y</div>
-              <div>5Y</div>
-            </div>
-            <div className="mt-3 rounded-lg bg-gray-50 ring-1 ring-black/5 ring-inset">
-              <Chart
-                width={286}
-                height={208}
-                paddingX={16}
-                paddingY={32}
-                activePointIndex={activePointIndex}
-                onChangeActivePointIndex={setActivePointIndex}
-              />
-            </div>
-            <div className="mt-4 rounded-lg bg-cyan-500 px-4 py-2 text-center text-sm font-semibold text-white">
-              Trade
-            </div>
-            <div className="mt-3 divide-y divide-gray-100 text-sm">
-              <div className="flex justify-between py-1">
-                <div className="text-gray-500">Open</div>
-                <div className="font-medium text-gray-900">6,387.55</div>
-              </div>
-              <div className="flex justify-between py-1">
-                <div className="text-gray-500">Closed</div>
-                <div className="font-medium text-gray-900">6,487.09</div>
-              </div>
-              <div className="flex justify-between py-1">
-                <div className="text-gray-500">Low</div>
-                <div className="font-medium text-gray-900">6,322.01</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </AppScreen.Body>
-    </AppScreen>
-  )
-}
--- a/src/components/AppScreen.tsx
+++ b/src/components/AppScreen.tsx
@@ -1,109 +0,0 @@
-import { forwardRef } from 'react'
-import clsx from 'clsx'
-
-function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 79 24" fill="none" aria-hidden="true" {...props}>
-      <path
-        d="M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12ZM2.4 12a9.004 9.004 0 0 0 6.055 8.507c1.565.542 2.945-.85 2.945-2.507V6c0-1.657-1.38-3.049-2.945-2.507A9.004 9.004 0 0 0 2.4 12Z"
-        fill="#06B6D4"
-      />
-      <path
-        d="M33.004 17V6.818h3.818c.783 0 1.439.146 1.97.438.533.291.935.692 1.207 1.203.275.507.413 1.084.413 1.73 0 .653-.138 1.233-.413 1.74a2.948 2.948 0 0 1-1.218 1.198c-.537.288-1.198.433-1.983.433h-2.531v-1.517h2.282c.457 0 .832-.08 1.124-.238.291-.16.507-.378.646-.657.142-.278.214-.598.214-.96 0-.36-.072-.679-.214-.954a1.452 1.452 0 0 0-.651-.641c-.292-.156-.668-.234-1.129-.234h-1.69V17h-1.845Zm12.152.15c-.746 0-1.392-.165-1.939-.493a3.343 3.343 0 0 1-1.273-1.377c-.298-.59-.447-1.28-.447-2.068 0-.79.15-1.48.447-2.073a3.335 3.335 0 0 1 1.273-1.383c.547-.328 1.193-.492 1.94-.492.745 0 1.391.164 1.938.492.547.329.97.79 1.268 1.383.301.593.452 1.284.452 2.073 0 .789-.15 1.478-.452 2.068a3.309 3.309 0 0 1-1.268 1.377c-.547.328-1.193.492-1.939.492Zm.01-1.443c.404 0 .742-.11 1.014-.333.272-.225.474-.527.607-.905.136-.377.204-.798.204-1.262 0-.468-.068-.89-.204-1.268a2.007 2.007 0 0 0-.607-.91c-.272-.225-.61-.338-1.014-.338-.414 0-.759.113-1.034.338a2.041 2.041 0 0 0-.612.91 3.81 3.81 0 0 0-.198 1.268c0 .464.066.885.198 1.262.136.378.34.68.612.905.275.222.62.333 1.034.333Zm8.508 1.442c-.763 0-1.417-.167-1.964-.502a3.352 3.352 0 0 1-1.258-1.387c-.292-.593-.437-1.276-.437-2.048 0-.776.149-1.46.447-2.054a3.34 3.34 0 0 1 1.263-1.392c.547-.334 1.193-.502 1.939-.502.62 0 1.168.115 1.645.343.48.226.864.546 1.149.96.285.41.447.891.487 1.441h-1.72a1.644 1.644 0 0 0-.497-.92c-.259-.248-.605-.372-1.04-.372-.367 0-.69.1-.969.298-.278.196-.495.478-.651.845-.153.368-.229.81-.229 1.323 0 .52.076.968.229 1.342.152.371.366.658.641.86.279.2.605.298.98.298.265 0 .502-.05.71-.149.213-.102.39-.25.532-.442.143-.192.24-.426.294-.701h1.72a2.999 2.999 0 0 1-.477 1.437c-.275.414-.65.739-1.124.974-.474.232-1.03.348-1.67.348Zm6.39-2.545-.006-2.173h.289l2.744-3.067h2.103l-3.376 3.758h-.372l-1.383 1.482ZM58.422 17V6.818h1.8V17h-1.8Zm4.792 0-2.485-3.475 1.213-1.268L65.368 17h-2.153Zm6.245.15c-.766 0-1.427-.16-1.984-.478a3.233 3.233 0 0 1-1.278-1.362c-.298-.59-.447-1.285-.447-2.083 0-.786.149-1.475.447-2.069a3.384 3.384 0 0 1 1.263-1.392c.54-.334 1.175-.502 1.904-.502.47 0 .915.076 1.333.229.42.149.792.381 1.113.696.325.315.58.716.766 1.203.186.484.278 1.06.278 1.73v.552h-6.259v-1.213h4.534a1.935 1.935 0 0 0-.224-.92 1.625 1.625 0 0 0-.611-.641 1.719 1.719 0 0 0-.905-.234c-.368 0-.691.09-.97.269a1.848 1.848 0 0 0-.65.696c-.153.285-.231.598-.234.94v1.058c0 .444.08.825.243 1.144.163.315.39.556.681.726.292.165.634.248 1.025.248.261 0 .498-.036.71-.11.213-.075.397-.187.552-.332.156-.146.274-.327.353-.542l1.68.189a2.62 2.62 0 0 1-.606 1.163 2.958 2.958 0 0 1-1.133.766c-.461.179-.988.268-1.581.268Zm8.731-7.786v1.392h-4.39V9.364h4.39Zm-3.306-1.83h1.8v7.17c0 .241.036.427.109.556a.59.59 0 0 0 .298.258c.123.047.259.07.408.07.113 0 .215-.008.308-.025.096-.016.17-.031.219-.045l.303 1.407c-.096.034-.233.07-.412.11-.176.04-.392.063-.647.07a2.934 2.934 0 0 1-1.218-.204 1.895 1.895 0 0 1-.86-.706c-.209-.319-.311-.716-.308-1.194V7.534Z"
-        fill="#fff"
-      />
-    </svg>
-  )
-}
-
-function MenuIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
-      <path
-        d="M5 6h14M5 18h14M5 12h14"
-        stroke="#fff"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-function UserIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
-      <path
-        d="M15 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.696 19h10.608c1.175 0 2.08-.935 1.532-1.897C18.028 15.69 16.187 14 12 14s-6.028 1.689-6.836 3.103C4.616 18.065 5.521 19 6.696 19Z"
-        stroke="#fff"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-export function AppScreen({
-  children,
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<'div'>) {
-  return (
-    <div className={clsx('flex flex-col', className)} {...props}>
-      <div className="flex justify-between px-4 pt-4">
-        <MenuIcon className="h-6 w-6 flex-none" />
-        <Logo className="h-6 flex-none" />
-        <UserIcon className="h-6 w-6 flex-none" />
-      </div>
-      {children}
-    </div>
-  )
-}
-
-AppScreen.Header = forwardRef<
-  React.ElementRef<'div'>,
-  { children: React.ReactNode }
->(function AppScreenHeader({ children }, ref) {
-  return (
-    <div ref={ref} className="mt-6 px-4 text-white">
-      {children}
-    </div>
-  )
-})
-
-AppScreen.Title = forwardRef<
-  React.ElementRef<'div'>,
-  { children: React.ReactNode }
->(function AppScreenTitle({ children }, ref) {
-  return (
-    <div ref={ref} className="text-2xl text-white">
-      {children}
-    </div>
-  )
-})
-
-AppScreen.Subtitle = forwardRef<
-  React.ElementRef<'div'>,
-  { children: React.ReactNode }
->(function AppScreenSubtitle({ children }, ref) {
-  return (
-    <div ref={ref} className="text-sm text-gray-500">
-      {children}
-    </div>
-  )
-})
-
-AppScreen.Body = forwardRef<
-  React.ElementRef<'div'>,
-  { className?: string; children: React.ReactNode }
->(function AppScreenBody({ children, className }, ref) {
-  return (
-    <div
-      ref={ref}
-      className={clsx('mt-6 flex-auto rounded-t-2xl bg-white', className)}
-    >
-      {children}
-    </div>
-  )
-})
--- a/src/components/AppStoreLink.tsx
+++ b/src/components/AppStoreLink.tsx
--- a/src/components/Archives/1UseCases.tsx
+++ b/src/components/Archives/1UseCases.tsx
@@ -0,0 +1,263 @@
+'use client'
+
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import clsx from 'clsx'
+import {
+  ArchiveBoxIcon,
+  CodeBracketIcon,
+  CpuChipIcon,
+  GlobeAltIcon,
+  MagnifyingGlassIcon,
+  ShareIcon,
+  UserGroupIcon,
+  CheckBadgeIcon,
+} from '@heroicons/react/24/solid'
+
+import { Container } from '@/components/Container'
+import { H2, P, CT, CP } from '@/components/Texts'
+import { motion, useInView } from 'framer-motion'
+
+interface Review {
+  title: string
+  body: string
+}
+
+const reviews: Array<Review> = [
+  {
+    title: 'FungiStor: Long-Term AI Memory',
+    body: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.',
+  },
+  {
+    title: 'HeroDB: Active AI Memory',
+    body: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.',
+  },
+  {
+    title: 'MOS Sandboxes: Secure Agent Workspaces',
+    body: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.',
+  },
+  {
+    title: 'Mycelium Mesh: Secure Communication Network',
+    body: 'Peer-to-peer overlay network with end-to-end encryption. Self-healing shortest-path routing creates resilient agentic communication.',
+  },
+  {
+    title: 'Deterministic Deployment: Verifiable Code Execution',
+    body: 'Cryptographic guarantee system ensuring deployed code matches specifications. Prevents supply-chain attacks with immutable trails.',
+  },
+  {
+    title: 'Agent Coordination: Sovereign Workflow Management',
+    body: 'User-centric orchestration where HERO agents coordinate worker fleets. Planetary-scale coordination with instant spawning.',
+  },
+  {
+    title: 'Universal Interface Layer: AI Service Gateway',
+    body: 'Unified broker connecting agents to LLMs, APIs, and services. Integrated micropayments simplify development.',
+  },
+  {
+    title: 'Semantic Index & Search: Navigable Knowledge Fabric',
+    body: 'Transforms data chaos into unified knowledge graphs. Goes beyond keywords to understand meaning and context.',
+  },
+]
+
+
+function getReviewIcon(title: string) {
+  if (title.startsWith('FungiStor')) return ArchiveBoxIcon;
+  if (title.startsWith('HeroDB')) return CpuChipIcon;
+  if (title.startsWith('MOS Sandboxes')) return CodeBracketIcon;
+  if (title.startsWith('Mycelium Mesh')) return ShareIcon;
+  if (title.startsWith('Deterministic Deployment')) return CheckBadgeIcon;
+  if (title.startsWith('Agent Coordination')) return UserGroupIcon;
+  if (title.startsWith('Universal Interface Layer')) return GlobeAltIcon;
+  if (title.startsWith('Semantic Index & Search')) return MagnifyingGlassIcon;
+  return GlobeAltIcon; // default
+}
+
+function Review({
+  title,
+  body,
+  className,
+  ...props
+}: Omit<React.ComponentPropsWithoutRef<'figure'>, keyof Review> & Review) {
+  let animationDelay = useMemo(() => {
+    let possibleAnimationDelays = ['0s', '0.1s', '0.2s', '0.3s', '0.4s', '0.5s']
+    return possibleAnimationDelays[
+      Math.floor(Math.random() * possibleAnimationDelays.length)
+    ]
+  }, [])
+
+  return (
+    <figure
+      className={clsx(
+        'animate-fade-in rounded-3xl bg-gray-900/50 p-6 opacity-0 shadow-md shadow-gray-900/5',
+        className,
+      )}
+      style={{ animationDelay }}
+      {...props}
+    >
+      <blockquote className="text-white">
+        {React.createElement(getReviewIcon(title), { className: "h-6 w-6 text-white mb-2" })}
+        <CT color="light" className="mt-4 text-lg/6 font-semibold">
+          {title}
+        </CT>
+        <CP color="light" className="mt-3 text-sm">{body}</CP>
+      </blockquote>
+
+    </figure>
+  )
+}
+
+function splitArray<T>(array: Array<T>, numParts: number) {
+  let result: Array<Array<T>> = []
+  for (let i = 0; i < array.length; i++) {
+    let index = i % numParts
+    if (!result[index]) {
+      result[index] = []
+    }
+    result[index].push(array[i])
+  }
+  return result
+}
+
+function ReviewColumn({
+  reviews,
+  className,
+  reviewClassName,
+  msPerPixel = 0,
+}: {
+  reviews: Array<Review>
+  className?: string
+  reviewClassName?: (reviewIndex: number) => string
+  msPerPixel?: number
+}) {
+  let columnRef = useRef<React.ElementRef<'div'>>(null)
+  let [columnHeight, setColumnHeight] = useState(0)
+  let duration = `${columnHeight * msPerPixel}ms`
+
+  useEffect(() => {
+    if (!columnRef.current) {
+      return
+    }
+
+    let resizeObserver = new window.ResizeObserver(() => {
+      setColumnHeight(columnRef.current?.offsetHeight ?? 0)
+    })
+
+    resizeObserver.observe(columnRef.current)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [])
+
+  return (
+    <div
+      ref={columnRef}
+      className={clsx('animate-marquee space-y-8 py-4', className)}
+      style={{ '--marquee-duration': duration } as React.CSSProperties}
+    >
+      {reviews.concat(reviews).map((review, reviewIndex) => (
+        <Review
+          key={reviewIndex}
+          aria-hidden={reviewIndex >= reviews.length}
+          className={reviewClassName?.(reviewIndex % reviews.length)}
+          {...review}
+        />
+      ))}
+    </div>
+  )
+}
+
+function ReviewGrid() {
+  let containerRef = useRef<React.ElementRef<'div'>>(null)
+  let isInView = useInView(containerRef, { once: true, amount: 0.4 })
+  let columns = splitArray(reviews, 3)
+  let column1 = columns[0]
+  let column2 = columns[1]
+  let column3 = splitArray(columns[2], 2)
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative -mx-4 mt-0 grid h-196 max-h-[150vh] grid-cols-1 items-start gap-8 overflow-hidden px-4  md:grid-cols-2 lg:grid-cols-3"
+    >
+      {isInView && (
+        <>
+          <ReviewColumn
+            reviews={[...column1, ...column3.flat(), ...column2]}
+            reviewClassName={(reviewIndex) =>
+              clsx(
+                reviewIndex >= column1.length + column3[0].length &&
+                  'md:hidden',
+                reviewIndex >= column1.length && 'lg:hidden',
+              )
+            }
+            msPerPixel={10}
+          />
+          <ReviewColumn
+            reviews={[...column2, ...column3[1]]}
+            className="hidden md:block"
+            reviewClassName={(reviewIndex) =>
+              reviewIndex >= column2.length ? 'lg:hidden' : ''
+            }
+            msPerPixel={15}
+          />
+          <ReviewColumn
+            reviews={column3.flat()}
+            className="hidden lg:block"
+            msPerPixel={10}
+          />
+        </>
+      )}
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-black" />
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-linear-to-t from-black" />
+    </div>
+  )
+}
+
+export function UseCases() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+
+  return (
+    <section
+      id="usecases"
+      ref={ref}
+      aria-labelledby="usecases-title"
+      className="bg-black py-24"
+    >
+      <Container className=''>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+          transition={{ duration: 0.8, delay: 0.1 }}
+          className="mx-auto max-w-2xl  lg:max-w-5xl"
+        >
+          <H2
+            id="usecases-title" 
+            color="light"
+            className="text-center"
+          >
+            Coming Soon: The Future of Mycelium
+          </H2>
+          <P className="mt-6 text-center" color="light">
+          Mycelium Cloud is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
+          </P>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+          transition={{ duration: 1, delay: 0.2 }}
+          aria-hidden="true"
+          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+        >
+          <div
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+            className="relative left-[calc(50%-30rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-30 sm:left-[calc(50%-36rem)] sm:w-[72.1875rem]"
+          />
+        </motion.div>
+        <ReviewGrid />
+      </Container>
+    </section>
+  )
+}
--- a/src/components/Archives/Companies
+++ b/src/components/Archives/Companies
@@ -0,0 +1,92 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+import { H2, P } from '@/components/Texts';
+
+
+
+import Ai21 from '@/components/logos/Ai21';
+import Claude from '@/components/logos/Claude';
+import BaiduCloud from '@/components/logos/BaiduCloud';
+import ByteDance from '@/components/logos/ByteDance';
+import DeepSeek from '@/components/logos/DeepSeek';
+import DeepMind from '@/components/logos/DeepMind';
+import Minimax from '@/components/logos/Minimax';
+import Mistral from '@/components/logos/Mistral';
+import Moonshot from '@/components/logos/Moonshot';
+import AlibabaCloud from '@/components/logos/AlibabaCloud';
+import TencentCloud from '@/components/logos/TencentCloud';
+import OpenAI from '@/components/logos/OpenAI';
+import XAI from '@/components/logos/XAI';
+
+const row1 = [Ai21, Claude, BaiduCloud, ByteDance];
+const row2 = [DeepSeek, DeepMind, Minimax, Mistral];
+const row3 = [Moonshot, AlibabaCloud];
+const row4 = [TencentCloud, OpenAI, XAI];
+
+export function Companies() {
+  return (
+    <div id="companies" className="relative flex h-screen w-full overflow-hidden rounded-md bg-transparent antialiased md:items-center md:justify-center">
+      <div className="relative z-10 mx-auto w-full max-w-6xl p-4 py-12">
+
+        {/* Heading */}
+        <motion.div
+          className="flex flex-col justify-center max-w-4xl items-center mb-6 mx-auto"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 1 }}
+        >
+          <H2 className="text-center pb-6">
+            Deploy the World’s Leading AI Models 
+          </H2>
+          <P className="pb-8 text-center" color="custom">
+            Deploy and scale AI from top global providers on a decentralized, privacy-first infrastructure.
+          </P>
+        </motion.div>
+
+        {/* Animated Line */}
+        <motion.div
+          className="h-[2px] bg-neutral-400 rounded-full mx-auto mb-12"
+          initial={{ width: 0 }}
+          animate={{ width: "100%" }}
+          transition={{ duration: 2, delay: 1 }}
+        />
+
+        {/* Logos grid */}
+        <div className="flex flex-col items-center gap-y-10">
+          {[row1, row2, row3, row4].map((row, rowIndex) => (
+            <motion.div
+              key={rowIndex}
+              className="flex flex-wrap justify-center items-center gap-x-8 sm:gap-x-10"
+              initial="hidden"
+              animate="visible"
+              variants={{
+                visible: {
+                  transition: {
+                    staggerChildren: 0.15,
+                    delayChildren: 2.8 + rowIndex * 0.5, // Stagger rows
+                  },
+                },
+              }}
+            >
+              {row.map((Logo, i) => (
+                <motion.div
+                  key={i}
+                  className="flex justify-center"
+                  variants={{
+                    hidden: { opacity: 0, y: 30 },
+                    visible: { opacity: 1, y: 0 },
+                  }}
+                  transition={{ duration: 0.6, ease: "easeOut" }}
+                >
+                  <div className="text-[#2F3178]"><Logo /></div>
+                </motion.div>
+              ))}
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/Archives/Cubec.tsx
+++ b/src/components/Archives/Cubec.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { CT, CP } from '@/components/Texts';
+
+interface CubeProps {
+  title: string;
+  descriptionTitle: string;
+  description: string;
+  isActive: boolean;
+  index: number;
+  onHover: () => void;
+  onLeave: () => void;
+}
+
+
+export function Cube({ title, descriptionTitle, description, isActive, index, onHover, onLeave }: CubeProps) {
+  return (
+    <div className="relative flex flex-col items-center">
+      <motion.div
+        className="relative cursor-pointer pointer-events-none"
+        onMouseEnter={onHover}
+        onMouseLeave={onLeave}
+        style={{
+          zIndex: 10 - index,
+        }}
+        animate={{
+          scale: isActive ? 1.05 : 1,
+        }}
+        transition={{
+          duration: 0.3,
+          ease: "easeOut",
+        }}
+      >
+        {/* Image Cube */}
+        <Image
+          src="/images/cube.png"
+          alt="Cube"
+          width={507}
+          height={234}
+          className="w-60 sm:w-80 lg:w-96 h-auto drop-shadow-lg pointer-events-auto"
+          style={{
+            filter: isActive
+              ? 'brightness(1.1) drop-shadow(0 25px 25px rgba(144, 137, 252, 0.4))'
+              : 'brightness(0.9) drop-shadow(0 10px 15px rgba(144, 137, 252, 0.2))',
+          }}
+        />
+        
+        {/* Title overlay */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <CT as="h3" className="px-4 drop-shadow-lg" style={{ transform: 'rotate(0deg) skewX(0deg)', transformOrigin: 'center' }}>
+            {title}
+          </CT>
+        </div>
+
+        {/* Description with arrow line - Desktop */}
+        {isActive && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+            className="hidden lg:block absolute left-full top-1/2 -translate-y-1/2 z-50"
+          >
+            {/* Arrow line */}
+            <svg
+              className="absolute left-0 top-1/2 -translate-y-1/2"
+              width="120"
+              height="2"
+              viewBox="0 0 120 2"
+              fill="none"
+            >
+              <line
+                x1="0"
+                y1="1"
+                x2="120"
+                y2="1"
+                stroke="currentColor"
+                strokeWidth="1"
+                opacity="0.6"
+              />
+            </svg>
+            
+            {/* Description text */}
+            <div className="ml-32 w-80 text-[#2F3178]">
+              <h4 className="text-base font-semibold mb-2">
+                {descriptionTitle}
+              </h4>
+              <CP color="custom">{description}</CP>
+            </div>
+          </motion.div>
+        )}
+
+        {/* Description for Mobile - Below cube */}
+        {isActive && (
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 10 }}
+            transition={{ duration: 0.3 }}
+            className="lg:hidden absolute top-full left-1/2 -translate-x-1/2 mt-8 z-50"
+          >
+            <div className="w-64 sm:w-80 px-4 text-[#2F3178]">
+              <h4 className="text-base font-semibold mb-2 text-center">
+                {descriptionTitle}
+              </h4>
+              <CP className="text-center" color="custom">{description}</CP>
+            </div>
+          </motion.div>
+        )}
+      </motion.div>
+    </div>
+  );
+}
--- a/src/components/Archives/GridStats
+++ b/src/components/Archives/GridStats
@@ -0,0 +1,117 @@
+"use client";
+
+import CountUp from "react-countup";
+import React from "react";
+import { Button } from "@/components/Button";
+
+export function GridStats() {
+  return (
+    <div id="grid-stats" className="py-24 bg-transparent relative">
+      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+          {/* Column 1: Title & NODES */}
+          <div className="flex flex-col space-y-10">
+            {/* Title + Description */}
+            <div>
+              <h2 className="text-2xl font-semibold tracking-tight leading-tight text-black lg:text-4xl">
+                Powered by a Global Community
+              </h2>
+              <p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-black lg:text-base">
+                ThreeFold’s groundbreaking technology enables anyone – individuals, organizations, and communities – to deploy their own Internet infrastructure.
+              </p>
+              <Button className="mt-8" variant="outline" href="https://threefold.io/build" >Explore TFGrid →</Button>
+            </div>
+
+          </div>
+
+          {/* Column 2: CORES (staggered) + SSD */}
+          <div className="flex flex-col space-y-10">
+            <StatCard
+              label="CORES"
+              description="A globally distributed mesh of CPU cores powering decentralized applications, AI workloads, and edge computing — without central bottlenecks."
+              value={<CountUp end={54_958} duration={2.5} separator="," />}
+              note="Total Central Processing Unit Cores available on the grid."
+            />
+
+            <StatCard
+              label="SSD CAPACITY"
+              description="A distributed network of storage capacity — ready to support Web3, AI, and edge computing workloads around the world."
+              value={<CountUp end={7_364_506} duration={2.5} separator="," />}
+              unit="GB"
+              note="The total amount of storage (SSD, HDD, & RAM) on the grid."
+            />
+          </div>
+
+          
+
+          {/* Column 3: nodes countries */}
+          <div className="flex flex-col space-y-10 justify-start">
+            <StatCard
+              label="NODES"
+              description="A computer server 100% dedicated to the network. It is a building block of the ThreeFold Grid, providing compute, storage, and network resources."
+              value={<CountUp end={1778} duration={2.5} separator="," />}
+              note="The total number of nodes on the grid."
+
+            />
+
+            <StatCard
+              label="COUNTRIES"
+              description="The number of countries where at least one node is connected and operational on the grid."
+              value={<CountUp end={51} duration={2.5} separator="," />}
+              note="The total number of countries with active nodes."
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// 🧱 Stat Card Component
+function StatCard({
+  label,
+  description,
+  value,
+  unit,
+  note,
+  className = "",
+}: {
+  label: string;
+  description: string;
+  value: React.ReactNode;
+  unit?: string;
+  note: string;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`relative flex flex-col overflow-hidden rounded-3xl bg-white shadow-md shadow-gray-900/5 p-8 transition-all duration-300 ease-out hover:scale-105 ${className}`}
+      style={{
+        filter: 'brightness(1)',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.filter = 'brightness(0.8)';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.filter = 'brightness(1)';
+      }}
+    >
+      <h3 className="text-lg font-semibold text-gradient-neutral-vertical" style={{ textShadow: '0 0 12px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.2)' }}>{label}</h3>
+      <p className="mt-2 text-sm font-light text-pretty text-black lg:text-base">
+        {description}
+      </p>
+      <div className="mt-8 flex items-center space-x-3">
+        <span className="text-gradient-neutral-vertical text-3xl">•</span>
+        <div className="text-5xl font-semibold tracking-tight text-black tabular-nums">
+          {value}
+          {unit && (
+            <span className="ml-2 text-lg font-normal text-gray-800">{unit}</span>
+          )}
+        </div>
+      </div>
+      <p className="mt-2 text-sm text-gray-800 uppercase tracking-wider">
+        {note}
+      </p>
+    </div>
+  );
+}
--- a/src/components/Archives/HomeHero
+++ b/src/components/Archives/HomeHero
@@ -0,0 +1,90 @@
+'use client'
+
+import { useState } from 'react'
+import { motion } from 'framer-motion'
+import { TypeAnimation } from 'react-type-animation'
+import { Dialog, DialogPanel } from '@headlessui/react'
+import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
+import { H1, PL } from '@/components/Texts'
+
+const navigation = [
+  { name: 'Product', href: '#' },
+  { name: 'Features', href: '#' },
+  { name: 'Marketplace', href: '#' },
+  { name: 'Company', href: '#' },
+]
+
+export function HomeHero() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  return (
+    <div className="relative h-screen -top-15">
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 2 }}
+        className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[700px] -z-10 rounded-full overflow-hidden"
+      >
+        <video
+          autoPlay
+          loop
+          muted
+          playsInline
+          className="h-full w-full object-cover"
+        >
+          <source src="/videos/mycelium.mp4" type="video/mp4" />
+        </video>
+      </motion.div>
+      <div className="relative isolate px-6 lg:px-8">
+        <div
+          aria-hidden="true"
+          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl lg:-top-80"
+        >
+          <div
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+            className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#a4caf6] to-[#aaa4fa] opacity-15 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+          />
+        </div>
+        <div
+          aria-hidden="true"
+          className="absolute inset-x-0 bottom-10 -z-10 transform-gpu overflow-hidden blur-3xl lg:bottom-40"
+        >
+          <div
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+            className="relative bottom-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-15 sm:left-[calc(50%+30rem)] sm:w-[72.1875rem]"
+          />
+        </div>
+        <div className="relative -top-15  mx-auto max-w-8xl h-screen flex items-center justify-center">
+          <div className="text-center max-w-5xl">
+            <H1>
+              <TypeAnimation
+                sequence={[
+                  'Decentralized Autonomous Agentic Cloud.',
+                  1000,
+                ]}
+                wrapper="span"
+                speed={50}
+                repeat={0}
+              />
+            </H1>
+          </div>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 1, delay: 1 }}
+          >
+            <PL className="absolute bottom-0 left-0 max-w-xl text-left" color="custom">
+              Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
+            </PL>
+          </motion.div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/components/Archives/Steps
+++ b/src/components/Archives/Steps
@@ -0,0 +1,71 @@
+'use client'
+
+import React, { useRef } from 'react'
+import { motion, useInView } from 'framer-motion'
+import { H2, P, CT, CP } from '@/components/Texts'
+import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
+
+const features = [
+  {
+    name: 'Choose Your Intelligence',
+    description: 'Explore a library of leading LLMs and agentic functions. Pick the ones that fit your use case, from general assistants to specialized reasoning models.',
+    icon: TbCircleNumber1Filled,
+  },
+  {
+    name: 'Add Your Knowledge',
+    description:
+      'Connect your data or knowledge base to enable personalized, context-aware results while keeping your information private.',
+    icon: TbCircleNumber2Filled,
+  },
+  {
+    name: 'Define Your Network',
+    description:
+      'Set up and manage your nodes with ease. Scale compute and storage as you grow, while staying fully sovereign and decentralized.',
+    icon: TbCircleNumber3Filled,
+  },
+]
+
+export function Steps() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+
+  return (
+    <section id="benefits" ref={ref} className="bg-white pt-0 pb-24 dark:bg-gray-900">
+      <div className="mx-auto max-w-7xl px-6 lg:px-0">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+          transition={{ duration: 0.8, delay: 0.1 }}
+          className="mx-auto max-w-5xl lg:mx-0"
+        >
+          <H2 className="text-3xl font-medium tracking-tight">
+            Deploy Scalable LLMs and AI Agents in Seconds
+          </H2>
+          <P className="mt-6 text-lg" color="custom">
+            Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control.
+          </P>
+        </motion.div>
+        <motion.ul
+          initial={{ opacity: 0 }}
+          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+          transition={{ duration: 0.5, delay: 0.2, staggerChildren: 0.2 }}
+          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base/7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3"
+        >
+          {features.map((feature, index) => (
+            <motion.li
+              key={feature.name}
+              initial={{ opacity: 0, y: 20 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+              transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
+              className="rounded-2xl border border-gray-200 p-8 dark:border-gray-700"
+            >
+              <feature.icon className="h-8 w-8 mb-4 text-[#2F3178]" />
+              <CT as="span" className="font-semibold">{feature.name}</CT>
+              <CP className="mt-2 text-sm" color="custom">{feature.description}</CP>
+            </motion.li>
+          ))}
+        </motion.ul>
+      </div>
+    </section>
+  )
+}
--- a/src/components/Archives/UseCases
+++ b/src/components/Archives/UseCases
@@ -0,0 +1,263 @@
+'use client'
+
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import clsx from 'clsx'
+import {
+  ArchiveBoxIcon,
+  CodeBracketIcon,
+  CpuChipIcon,
+  GlobeAltIcon,
+  MagnifyingGlassIcon,
+  ShareIcon,
+  UserGroupIcon,
+  CheckBadgeIcon,
+} from '@heroicons/react/24/solid'
+
+import { Container } from '@/components/Container'
+import { H2, P, CT, CP } from '@/components/Texts'
+import { motion, useInView } from 'framer-motion'
+
+interface Review {
+  title: string
+  body: string
+}
+
+const reviews: Array<Review> = [
+  {
+    title: 'FungiStor: Long-Term AI Memory',
+    body: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.',
+  },
+  {
+    title: 'HeroDB: Active AI Memory',
+    body: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.',
+  },
+  {
+    title: 'MOS Sandboxes: Secure Agent Workspaces',
+    body: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.',
+  },
+  {
+    title: 'Mycelium Mesh: Secure Communication Network',
+    body: 'Peer-to-peer overlay network with end-to-end encryption. Self-healing shortest-path routing creates resilient agentic communication.',
+  },
+  {
+    title: 'Deterministic Deployment: Verifiable Code Execution',
+    body: 'Cryptographic guarantee system ensuring deployed code matches specifications. Prevents supply-chain attacks with immutable trails.',
+  },
+  {
+    title: 'Agent Coordination: Sovereign Workflow Management',
+    body: 'User-centric orchestration where HERO agents coordinate worker fleets. Planetary-scale coordination with instant spawning.',
+  },
+  {
+    title: 'Universal Interface Layer: AI Service Gateway',
+    body: 'Unified broker connecting agents to LLMs, APIs, and services. Integrated micropayments simplify development.',
+  },
+  {
+    title: 'Semantic Index & Search: Navigable Knowledge Fabric',
+    body: 'Transforms data chaos into unified knowledge graphs. Goes beyond keywords to understand meaning and context.',
+  },
+]
+
+
+function getReviewIcon(title: string) {
+  if (title.startsWith('FungiStor')) return ArchiveBoxIcon;
+  if (title.startsWith('HeroDB')) return CpuChipIcon;
+  if (title.startsWith('MOS Sandboxes')) return CodeBracketIcon;
+  if (title.startsWith('Mycelium Mesh')) return ShareIcon;
+  if (title.startsWith('Deterministic Deployment')) return CheckBadgeIcon;
+  if (title.startsWith('Agent Coordination')) return UserGroupIcon;
+  if (title.startsWith('Universal Interface Layer')) return GlobeAltIcon;
+  if (title.startsWith('Semantic Index & Search')) return MagnifyingGlassIcon;
+  return GlobeAltIcon; // default
+}
+
+function Review({
+  title,
+  body,
+  className,
+  ...props
+}: Omit<React.ComponentPropsWithoutRef<'figure'>, keyof Review> & Review) {
+  let animationDelay = useMemo(() => {
+    let possibleAnimationDelays = ['0s', '0.1s', '0.2s', '0.3s', '0.4s', '0.5s']
+    return possibleAnimationDelays[
+      Math.floor(Math.random() * possibleAnimationDelays.length)
+    ]
+  }, [])
+
+  return (
+    <figure
+      className={clsx(
+        'animate-fade-in rounded-3xl bg-white p-6 opacity-0 shadow-md shadow-gray-900/5',
+        className,
+      )}
+      style={{ animationDelay }}
+      {...props}
+    >
+      <blockquote className="text-gray-900">
+        {React.createElement(getReviewIcon(title), { className: "h-6 w-6 text-[#2F3178] mb-2" })}
+        <CT color="primary" className="mt-4 text-lg/6 font-semibold">
+          {title}
+        </CT>
+        <CP color="custom" className="mt-3 text-sm">{body}</CP>
+      </blockquote>
+
+    </figure>
+  )
+}
+
+function splitArray<T>(array: Array<T>, numParts: number) {
+  let result: Array<Array<T>> = []
+  for (let i = 0; i < array.length; i++) {
+    let index = i % numParts
+    if (!result[index]) {
+      result[index] = []
+    }
+    result[index].push(array[i])
+  }
+  return result
+}
+
+function ReviewColumn({
+  reviews,
+  className,
+  reviewClassName,
+  msPerPixel = 0,
+}: {
+  reviews: Array<Review>
+  className?: string
+  reviewClassName?: (reviewIndex: number) => string
+  msPerPixel?: number
+}) {
+  let columnRef = useRef<React.ElementRef<'div'>>(null)
+  let [columnHeight, setColumnHeight] = useState(0)
+  let duration = `${columnHeight * msPerPixel}ms`
+
+  useEffect(() => {
+    if (!columnRef.current) {
+      return
+    }
+
+    let resizeObserver = new window.ResizeObserver(() => {
+      setColumnHeight(columnRef.current?.offsetHeight ?? 0)
+    })
+
+    resizeObserver.observe(columnRef.current)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [])
+
+  return (
+    <div
+      ref={columnRef}
+      className={clsx('animate-marquee space-y-8 py-4', className)}
+      style={{ '--marquee-duration': duration } as React.CSSProperties}
+    >
+      {reviews.concat(reviews).map((review, reviewIndex) => (
+        <Review
+          key={reviewIndex}
+          aria-hidden={reviewIndex >= reviews.length}
+          className={reviewClassName?.(reviewIndex % reviews.length)}
+          {...review}
+        />
+      ))}
+    </div>
+  )
+}
+
+function ReviewGrid() {
+  let containerRef = useRef<React.ElementRef<'div'>>(null)
+  let isInView = useInView(containerRef, { once: true, amount: 0.4 })
+  let columns = splitArray(reviews, 3)
+  let column1 = columns[0]
+  let column2 = columns[1]
+  let column3 = splitArray(columns[2], 2)
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative -mx-4 mt-0 grid h-196 max-h-[150vh] grid-cols-1 items-start gap-8 overflow-hidden px-4 sm:mt-20 md:grid-cols-2 lg:grid-cols-3"
+    >
+      {isInView && (
+        <>
+          <ReviewColumn
+            reviews={[...column1, ...column3.flat(), ...column2]}
+            reviewClassName={(reviewIndex) =>
+              clsx(
+                reviewIndex >= column1.length + column3[0].length &&
+                  'md:hidden',
+                reviewIndex >= column1.length && 'lg:hidden',
+              )
+            }
+            msPerPixel={10}
+          />
+          <ReviewColumn
+            reviews={[...column2, ...column3[1]]}
+            className="hidden md:block"
+            reviewClassName={(reviewIndex) =>
+              reviewIndex >= column2.length ? 'lg:hidden' : ''
+            }
+            msPerPixel={15}
+          />
+          <ReviewColumn
+            reviews={column3.flat()}
+            className="hidden lg:block"
+            msPerPixel={10}
+          />
+        </>
+      )}
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-white" />
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-linear-to-t from-white" />
+    </div>
+  )
+}
+
+export function UseCases() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+
+  return (
+    <section
+      id="usecases"
+      ref={ref}
+      aria-labelledby="usecases-title"
+      className="py-12"
+    >
+      <Container className=''>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+          transition={{ duration: 0.8, delay: 0.1 }}
+          className="mx-auto max-w-2xl  lg:max-w-5xl"
+        >
+          <H2
+            id="usecases-title" 
+            color="primary"
+            className="text-center"
+          >
+            Coming Soon: The Future of Mycelium
+          </H2>
+          <P className="mt-6 text-center" color="custom">
+          Mycelium Cloud is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
+          </P>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+          transition={{ duration: 1, delay: 0.2 }}
+          aria-hidden="true"
+          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+        >
+          <div
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+            className="relative left-[calc(50%-30rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-30 sm:left-[calc(50%-36rem)] sm:w-[72.1875rem]"
+          />
+        </motion.div>
+        <ReviewGrid />
+      </Container>
+    </section>
+  )
+}
--- a/src/components/Archives/WorldMap.tsx
+++ b/src/components/Archives/WorldMap.tsx
@@ -0,0 +1,111 @@
+import { Globe } from "@/components/ui/globe"
+import { motion } from "framer-motion"
+import { H2, H4, CP, CT } from "@/components/Texts"
+
+export function WorldMap() {
+  return (
+    <div className="relative h-screen max-w-full overflow-hidden -top-20">
+      {/* Background video */}
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute inset-0 w-full h-full object-cover"
+      >
+        <source src="/videos/benefits.mp4" type="video/mp4" />
+      </video>
+
+      {/* Dark overlay */}
+      <div className="absolute inset-0 bg-black/60" />
+
+      {/* Top Left Intro Text */}
+      <div className="absolute top-0 left-0 px-6 py-24 z-10 max-w-lg">
+        <H4 color="light">Mycelium Network is Live.</H4>
+        <CP className="mt-6 text-base leading-relaxed font-light" color="light">
+          Mycelium Cloud's advancement technology enables anyone to deploy
+          their own Internet infrastructure, anywhere.
+        </CP>
+      </div>
+
+      {/* Globe Centered */}
+      <div className="absolute inset-0 flex items-center justify-center">
+        <Globe className="top-28" />
+      </div>
+
+      {/* Right Side Stats Column */}
+      <div className="absolute right-0 top-0 bottom-0 flex flex-col justify-center gap-6 px-6 py-12 max-w-xs z-10">
+        <motion.div
+          initial={{ opacity: 0, x: 50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6, delay: 0.1 }}
+          className="rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 p-4 shadow-md"
+        >
+          <CT color="light" className="uppercase tracking-wide">
+            CORES
+          </CT>
+          <H2 color="light" className="mt-2 text-3xl font-bold">
+            54,958
+          </H2>
+          <CP color="light" className="mt-2 text-sm">
+            Total Central Processing Unit Cores available on the grid.
+          </CP>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, x: 50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6, delay: 0.2 }}
+          className="rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 p-4 shadow-md"
+        >
+          <CT color="light" className="uppercase tracking-wide">
+            NODES
+          </CT>
+          <H2 color="light" className="mt-2 text-3xl font-bold">
+            54,958
+          </H2>
+          <CP color="light" className="mt-2 text-sm">
+            Total number of nodes on the grid.
+          </CP>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, x: 50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6, delay: 0.3 }}
+          className="rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 p-4 shadow-md"
+        >
+          <CT color="light" className="uppercase tracking-wide">
+            SSD CAPACITY
+          </CT>
+          <H2 color="light" className="mt-2 text-3xl font-bold">
+            54,958
+          </H2>
+          <CP color="light" className="mt-2 text-sm">
+            Total amount of storage (SSD, HDD, & RAM) on the grid.
+          </CP>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, x: 50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6, delay: 0.4 }}
+          className="rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 p-4 shadow-md"
+        >
+          <CT color="light" className="uppercase tracking-wide">
+            COUNTRIES
+          </CT>
+          <H2 color="light" className="mt-2 text-3xl font-bold">
+            51
+          </H2>
+          <CP color="light" className="mt-2 text-sm">
+            Total number of countries with active nodes.
+          </CP>
+        </motion.div>
+      </div>
+
+      {/* Radial fade overlay */}
+      <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" />
+    </div>
+  )
+}
--- a/src/components/AuthLayout.tsx
+++ b/src/components/AuthLayout.tsx
@@ -1,40 +0,0 @@
-import Link from 'next/link'
-
-import { CirclesBackground } from '@/components/CirclesBackground'
-import { Logo } from '@/components/Logo'
-
-export function AuthLayout({
-  title,
-  subtitle,
-  children,
-}: {
-  title: string
-  subtitle: React.ReactNode
-  children: React.ReactNode
-}) {
-  return (
-    <main className="flex min-h-full overflow-hidden pt-16 sm:py-28">
-      <div className="mx-auto flex w-full max-w-2xl flex-col px-4 sm:px-6">
-        <Link href="/" aria-label="Home">
-          <Logo className="mx-auto h-10 w-auto" />
-        </Link>
-        <div className="relative mt-12 sm:mt-16">
-          <CirclesBackground
-            width="1090"
-            height="1090"
-            className="absolute -top-7 left-1/2 -z-10 h-[788px] -translate-x-1/2 mask-[linear-gradient(to_bottom,white_20%,transparent_75%)] stroke-gray-300/30 sm:-top-9 sm:h-auto"
-          />
-          <h1 className="text-center text-2xl font-medium tracking-tight text-gray-900">
-            {title}
-          </h1>
-          {subtitle && (
-            <p className="mt-3 text-center text-lg text-gray-600">{subtitle}</p>
-          )}
-        </div>
-        <div className="-mx-4 mt-10 flex-auto bg-white px-4 py-10 shadow-2xl shadow-gray-900/10 sm:mx-0 sm:flex-none sm:rounded-5xl sm:p-24">
-          {children}
-        </div>
-      </div>
-    </main>
-  )
-}
--- a/src/components/BentoReviews.tsx
+++ b/src/components/BentoReviews.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { H2, P } from "@/components/Texts";
+import React, { useState, useEffect, useRef } from "react";
+import { BentoGrid, MotionBentoGridItem } from "@/components/ui/bento-grid";
+import { AnimatePresence, motion } from "framer-motion";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { FadeIn } from "./FadeIn";
+
+const items = [
+  {
+    title: 'FungiStor',
+    subtitle: 'Long-Term AI Memory',
+    description: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.',
+    video: "/videos/fungistor.mp4",
+  },
+  {
+    title: 'HeroDB',
+    subtitle: 'Active AI Memory',
+    description: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.',
+    video: "/videos/herodb.mp4",
+  },
+  {
+    title: 'MOS Sandboxes',
+    subtitle: 'Secure Agent Workspaces',
+    description: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.',
+    video: "/videos/sandbox.mp4",
+  },
+  {
+    title: 'Mycelium Mesh',
+    subtitle: 'Secure Communication Network',
+    description: 'Peer-to-peer overlay network with end-to-end encryption. Self-healing shortest-path routing creates resilient agentic communication.',
+    video: "/videos/mesh.mp4",
+  },
+  {
+    title: 'Deterministic Deployment',
+    subtitle: 'Verifiable Code Execution',
+    description: 'Cryptographic guarantee system ensuring deployed code matches specifications. Prevents supply-chain attacks with immutable trails.',
+    video: "/videos/deterministic.mp4",
+  },
+  {
+    title: 'Agent Coordination',
+    subtitle: 'Sovereign Workflow Management',
+    description: 'User-centric orchestration where HERO agents coordinate worker fleets. Planetary-scale coordination with instant spawning.',
+    video: "/videos/agent.mp4",
+  },
+  {
+    title: 'Universal Interface Layer',
+    subtitle: 'AI Service Gateway',
+    description: 'Unified broker connecting agents to LLMs, APIs, and services. Integrated micropayments simplify development.',
+    video: "/videos/universal.mp4",
+  },
+
+];
+
+export function BentoReviews() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (!isPaused) {
+      intervalRef.current = setInterval(() => {
+        setActiveIndex((prevIndex) => (prevIndex + 1) % items.length);
+      }, 3000);
+    } else {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [isPaused]);
+
+    const handleCardTap = () => {
+    setIsPaused(true);
+  };
+
+  const handlePrev = () => {
+    setActiveIndex((prevIndex) => (prevIndex - 1 + items.length) % items.length);
+    setIsPaused(true);
+  };
+
+  const handleNext = () => {
+    setActiveIndex((prevIndex) => (prevIndex + 1) % items.length);
+    setIsPaused(true);
+  };
+
+  return (
+    <div>
+      <div className="relative isolate pt-24 pb-12 bg-black text-center w-full lg:px-0 px-4">
+        <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
+          <div className="mx-auto max-w-5xl ">
+            <H2 className="text-center">Mycelium Technologies</H2>
+          </div>
+        </FadeIn>
+        <FadeIn transition={{ duration: 0.8, delay: 0.2 }}>
+          <div className="mx-auto max-w-4xl mt-6 mb-8">
+            <P className="text-center" color="primary">
+              A robust infrastructure layer for autonomous AI agents, our technology stack
+              delivers a secure, efficient, and intuitive platform for deploying and managing AI agents at scale.
+            </P>
+          </div>
+        </FadeIn>
+      </div>
+
+      {/* Desktop Grid */}
+      <div className="hidden lg:block">
+        <BentoGrid className="max-w-8xl lg:px-12 px-4 pb-12 lg:grid-cols-3">
+          {items.map((item, i) => (
+            <MotionBentoGridItem
+              key={i}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: false, margin: '0px 0px -100px 0px' }}
+              transition={{ duration: 0.8, delay: 0.3 + i * 0.1 }}
+              className={cn(i === 3 || i === 6 ? "md:col-span-2" : "")}
+              rowHeight={i >= 3 ? "h-[22rem]" : ""}
+              title={item.title}
+              subtitle={item.subtitle}
+              description={item.description}
+              video={item.video}
+            />
+          ))}
+        </BentoGrid>
+      </div>
+
+      {/* Mobile Carousel */}
+      <div className="lg:hidden block px-4 pb-12">
+                <div className="relative h-[24rem] w-full overflow-hidden">
+          <div className="absolute inset-0" onTouchStart={handleCardTap} />
+          <AnimatePresence initial={false}>
+            <motion.div
+              key={activeIndex}
+              className="absolute h-full w-full"
+              initial={{ x: "100%", opacity: 0 }}
+              animate={{ x: 0, opacity: 1 }}
+              exit={{ x: "-100%", opacity: 0 }}
+              transition={{ type: "spring", stiffness: 300, damping: 30 }}
+            >
+              <MotionBentoGridItem
+                className="h-full"
+                title={items[activeIndex].title}
+                subtitle={items[activeIndex].subtitle}
+                description={items[activeIndex].description}
+                video={items[activeIndex].video}
+              />
+            </motion.div>
+          </AnimatePresence>
+          <button
+            onClick={handlePrev}
+            className="absolute left-2 top-[58%] -translate-y-1/2 rounded-full bg-black/50 p-2 text-white z-10"
+          >
+            <ChevronLeft className="h-6 w-6" />
+          </button>
+          <button
+            onClick={handleNext}
+            className="absolute right-2 top-[58%] -translate-y-1/2 rounded-full bg-black/50 p-2 text-white z-10"
+          >
+            <ChevronRight className="h-6 w-6" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -5,18 +5,19 @@ const baseStyles = {
  solid:
    'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold transition-colors',
  outline:
-    'inline-flex justify-center rounded-lg border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-sm transition-colors',
+    'inline-flex justify-center rounded-lg border py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-sm transition-colors',
 }

 const variantStyles = {
  solid: {
-    cyan: 'relative overflow-hidden bg-[#2F3178] text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-[#2F3178] active:text-white/80 before:transition-colors',
+    cyan: 'relative overflow-hidden bg-[#005eff] text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-[#005eff] active:text-white/80 before:transition-colors',
    white:
      'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
    gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
  },
  outline: {
    gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
+    white: 'border-gray-300 text-white hover:border-gray-400 hover:text-gray-300 active:bg-gray-100 active:text-gray-800',
  },
 }

--- a/src/components/CallTo.tsx
+++ b/src/components/CallTo.tsx
@@ -13,12 +13,14 @@ export function CallTo() {
          </P>
          <div className="mt-10 flex items-center justify-center gap-x-6">
            <a
-              href="#"
+              href="mailto:info@ourworld.tf"
+              target="_blank"
+              rel="noopener noreferrer"
              className="rounded-md bg-[#2F3178] px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-[#2F3178]/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#2F3178]"
            >
              Book a Meeting
            </a>
-            <a href="#" className="text-sm/6 font-semibold text-[#2F3178] hover:text-[#2F3178]/80">
+            <a href="mailto:info@ourworld.tf" target="_blank" rel="noopener noreferrer" className="text-sm/6 font-semibold text-[#2F3178] hover:text-[#2F3178]/80">
              Join the Waitlist <span aria-hidden="true">→</span>
            </a>
          </div>
--- a/src/components/CallToAction.tsx
+++ b/src/components/CallToAction.tsx
@@ -1,34 +1,53 @@
-import { AppStoreLink } from '@/components/AppStoreLink'
-import { WindowsLink } from '@/components/WindowsLink'
-import { AndroidLink } from './AndroidLink'
-import { LinuxLink } from '@/components/LinuxLink'
 import { CircleBackground } from '@/components/CircleBackground'
 import { Container } from '@/components/Container'
+import { Button } from '@/components/Button'
+import { FadeIn } from '@/components/FadeIn'

 export function CallToAction() {
  return (
    <section
      id="get-free-shares-today"
-      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
+      className="relative overflow-hidden py-20 sm:py-28 border-t border-gray-800"
    >
-      <div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute top-0 left-0 w-full h-full object-cover z-0"
+      >
+        <source src="/videos/cta.mp4" type="video/mp4" />
+      </video>
+      <div className="absolute top-0 left-0 w-full h-full bg-black opacity-40 z-10"></div>
+            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2 z-20">
        <CircleBackground color="#fff" className="animate-spin-slower" />
      </div>
-      <Container className="relative">
-        <div className="mx-auto max-w-2xl sm:text-center">
+      <Container className="relative z-20">
+          <FadeIn>
+                <div className="mx-auto max-w-md text-center">
          <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
-            Get Started Today
+            Decentralized AI Agents that are Truly Yours
          </h2>
-          <p className="mt-6 text-lg text-gray-300">
-            Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.
+          <p className="mt-4 text-lg text-gray-300">
+            Why hand out your intelligence to centralized giants when you can
+            build your own. Ready to own your intelligence?
          </p>
-          <div className="mt-8 flex justify-center gap-4">
-            <AppStoreLink color="white" />
-            <WindowsLink color="white" />
-            <AndroidLink color="white" />
-            <LinuxLink color="white" />
+          <div className="mt-8 flex justify-center gap-x-6">
+            <Button
+              variant="solid"
+              color="cyan"
+              href="mailto:info@ourworld.tf"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Book a Meeting
+            </Button>
+            <Button href="mailto:info@ourworld.tf" target="_blank" rel="noopener noreferrer" variant="outline" color="white">
+              Join the Waitlist
+            </Button>
          </div>
        </div>
+        </FadeIn>
      </Container>
    </section>
  )
--- a/src/components/ClickableGallery.tsx
+++ b/src/components/ClickableGallery.tsx
@@ -1,41 +1,37 @@
 'use client'

-import { useEffect, useMemo, useState, useRef } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+import { useResponsiveCarousel } from '@/hooks/useResponsiveCarousel';
 import Image from 'next/image'
-import { motion, AnimatePresence, useInView } from 'framer-motion'
+import { motion, AnimatePresence } from 'framer-motion'
 import { wrap } from 'popmotion'
 import { Button } from '@/components/Button';
-import { H2, P, H4 } from '@/components/Texts';
+import { H2, P, CT } from '@/components/Texts';
 import { TypeAnimation } from 'react-type-animation'
+import { FadeIn } from './FadeIn';

 const galleryItems = [
-  { text: 'Navigate and interact with any web interface', image: '/images/interface.png' },
-  { text: 'Process documents across all formats', image: '/images/docs.png' },
-  { text: 'Execute multi-step workflows autonomously', image: '/images/flow.png' },
-  { text: 'Manage calendars, emails, and tasks', image: '/images/calendar.png' },
-  { text: 'Perform deep semantic search across all data sources', image: '/images/data.png' },
-  { text: 'Identify patterns in complex datasets', image: '/images/datasets.png' },
-  { text: 'Provide real-time market intelligence', image: '/images/market.png' },
-  { text: 'Generate and debug code in multiple languages', image: '/images/code.png' },
-  { text: 'Create consistent branded content', image: '/images/branding.png' },
-  { text: 'Translate and localize materials', image: '/images/translate.png' },
-  { text: 'Transform and migrate data structures', image: '/images/structure.png' },
+  { text: 'Navigate and interact with any web interface', image: '/images/gallery/interface.jpg', width: 448, height: 277 },
+  { text: 'Process documents across all formats', image: '/images/gallery/docs.jpg', width: 448, height: 277 },
+  { text: 'Execute multi-step workflows autonomously', image: '/images/gallery/flow.jpg', width: 448, height: 277 },
+  { text: 'Manage calendars, emails, and tasks', image: '/images/gallery/calendar.jpg', width: 448, height: 277 },
+  { text: 'Perform deep semantic search across all data sources', image: '/images/gallery/data.jpg', width: 448, height: 277 },
+  { text: 'Identify patterns in complex datasets', image: '/images/gallery/datasets.jpg', width: 448, height: 277 },
+  { text: 'Provide real-time market intelligence', image: '/images/gallery/market.jpg', width: 448, height: 277 },
+  { text: 'Generate and debug code in multiple languages', image: '/images/gallery/code.jpg', width: 448, height: 277 },
+  { text: 'Create consistent branded content', image: '/images/gallery/branding.jpg', width: 448, height: 277 },
+  { text: 'Translate and localize materials', image: '/images/gallery/translate.jpg', width: 448, height: 277 },
+  { text: 'Transform and migrate data structures', image: '/images/gallery/structure.jpg', width: 448, height: 277 },
 ]

 // 🔧 Carousel Config
-const VISIBLE = 4
-const CARD_SIZE = 360 // square size on desktop
-const GAP = 300       // spacing for larger cards
-const ROT_Y = 18
-const DEPTH = 210
-const SCALE_DROP = 0.12
-const AUTOPLAY_MS = 3200
+const VISIBLE = 4;
+const AUTOPLAY_MS = 3200;

 export function ClickableGallery() {
-  const [active, setActive] = useState(0)
-  const [hovering, setHovering] = useState(false)
-  const ref = useRef(null);
-  const isInView = useInView(ref, { once: true });
+  const [active, setActive] = useState(0);
+  const [hovering, setHovering] = useState(false);
+  const { GAP, ROT_Y, DEPTH, SCALE_DROP } = useResponsiveCarousel();

  // autoplay
  useEffect(() => {
@@ -53,142 +49,131 @@ export function ClickableGallery() {
  const prev = () => setActive((i) => wrap(0, galleryItems.length, i - 1))

  return (
-    <div ref={ref}>
-      <div className="relative isolate pt-24 pb-0 text-center w-full">
-        <motion.div initial={{ opacity: 0, y: 20 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }} transition={{ duration: 0.8, delay: 0.1 }} className="mx-auto max-w-5xl">
-          <H2 className="text-center">One Agent, Endless Possibilities.</H2>
-        </motion.div>
-        <motion.div initial={{ opacity: 0, y: 20 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }} transition={{ duration: 0.8, delay: 0.2 }} className="mx-auto max-w-4xl mt-6">
-          <P className="text-center" color="custom">
-            The future isn’t about more tools. It’s about one intelligent partner that can do it all. This is your gateway to creativity, automation, and discovery.
-          </P>
-        </motion.div>
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
-          transition={{ duration: 1, delay: 0.3 }}
-          aria-hidden="true"
-          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+    <div>
+      <div className="relative isolate pt-8 pb-0 bg-transparent text-center w-full">
+        <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
+          <div className="mx-auto max-w-5xl">
+            <H2 className="text-center">One Agent, Endless Possibilities.</H2>
+          </div>
+        </FadeIn>
+        <FadeIn transition={{ duration: 0.8, delay: 0.2 }}>
+          <div className="mx-auto max-w-4xl mt-6 lg:px-0 px-4">
+            <P className="text-center" color="primary">
+              The future isn’t about more tools. It’s about one intelligent partner that can do it all. This is your gateway to creativity, automation, and discovery.
+            </P>
+          </div>
+        </FadeIn>
+      </div>
+      <FadeIn transition={{ duration: 1, delay: 0.4 }}>
+        <section
+          className="relative w-full flex items-center justify-center overflow-hidden bg-transparent -mt-8 pt-0 pb-0"
+          onMouseEnter={() => setHovering(true)}
+          onMouseLeave={() => setHovering(false)}
        >
-          <div
-            style={{
-              clipPath:
-                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-            }}
-            className="relative left-[calc(50%-30rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-30 sm:left-[calc(50%-36rem)] sm:w-[72.1875rem]"
-          />
-        </motion.div>
-      </div>
-      <motion.section
-        initial={{ opacity: 0 }}
-        animate={isInView ? { opacity: 1 } : { opacity: 0 }}
-        transition={{ duration: 1, delay: 0.4 }}
-        className="relative w-full flex items-center justify-center overflow-hidden bg-background -mt-16 pt-0 pb-32"
-        onMouseEnter={() => setHovering(true)}
-        onMouseLeave={() => setHovering(false)}
-      >
-        {/* Soft edge fades */}
-        <div className="pointer-events-none absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-background to-transparent" />
-        <div className="pointer-events-none absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-background to-transparent" />
+                    <div className="relative w-full max-w-[1800px] h-[300px] md:h-[500px]" style={{ perspective: '1600px' }}>
+            <div className="absolute inset-0" style={{ transformStyle: 'preserve-3d' }}>
+              <AnimatePresence initial={false}>
+                {indices.map((idx, i) => {
+                  const distance = i - VISIBLE;
+                  const item = galleryItems[idx];

-        <div className="relative w-full max-w-[1800px] h-[500px]" style={{ perspective: '1600px' }}>
-          <div
-            aria-hidden="true"
-            className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
-          >
-            <div
-              style={{
-                clipPath:
-                  'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-              }}
-              className="relative left-[calc(50%+4rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-30 sm:left-[calc(50%+60rem)] sm:w-[72.1875rem]"
-            />
+                  const x = distance * GAP;
+                  const z = -Math.abs(distance) * DEPTH;
+                  const r = distance * ROT_Y;
+                  const s = 1 - Math.abs(distance) * SCALE_DROP;
+                  const o = distance === 0 ? 1 : 0.80;
+                  const zIndex = 100 - Math.abs(distance);
+
+                  return (
+                    <motion.div
+                      key={`${idx}-${i}`}
+                      className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 will-change-transform overflow-hidden ${distance === 0 ? 'rounded-xl' : ''}`}
+                      initial={{ opacity: 0 }}
+                      animate={{
+                        transform: `translateX(${x}px) translateZ(${z}px) rotateY(${r}deg) scale(${s})`,
+                        zIndex,
+                        opacity: o,
+                        boxShadow: distance === 0 ? '0 0 20px 5px rgba(255, 255, 255, 0.2)' : 'none',
+                      }}
+                      exit={{ opacity: 0 }}
+                      transition={{ type: 'spring', stiffness: 220, damping: 26 }}
+                      onClick={() => setActive(idx)}
+                    >
+                      <div className="relative bg-black flex items-center justify-center">
+                        <Image
+                          src={item.image}
+                          alt={item.text}
+                          width={item.width}
+                          height={item.height}
+                          className="object-contain text-white"
+                          priority={i === VISIBLE}
+                        />
+                      </div>
+                    </motion.div>
+                  );
+                })}
+              </AnimatePresence>
+            </div>
          </div>
-          <div className="absolute inset-0" style={{ transformStyle: 'preserve-3d' }}>
-          <AnimatePresence initial={false}>
-            {indices.map((idx, i) => {
-              const distance = i - VISIBLE
-              const item = galleryItems[idx]

-              const x = distance * GAP
-              const z = -Math.abs(distance) * DEPTH
-              const r = distance * ROT_Y
-              const s = 1 - Math.abs(distance) * SCALE_DROP
-              const o = distance === 0 ? 1 : 0.90
-              const zIndex = 100 - Math.abs(distance)
-
-              return (
-                <motion.div
-                  key={`${idx}-${i}`}
-                  className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 will-change-transform"
-                  initial={{ opacity: 0 }}
-                  animate={{
-                    transform: `translateX(${x}px) translateZ(${z}px) rotateY(${r}deg) scale(${s})`,
-                    zIndex,
-                    opacity: o,
-                  }}
-                  exit={{ opacity: 0 }}
-                  transition={{ type: 'spring', stiffness: 220, damping: 26 }}
-                  onClick={() => setActive(idx)}
-                >
-                  {/* Square container, keeps image ratio inside */}
-                  <div
-                    className="relative rounded-2xl overflow-hidden bg-white flex items-center justify-center"
-                    style={{ width: CARD_SIZE, height: CARD_SIZE }}
-                  >
-                    <Image
-                      src={item.image}
-                      alt={item.text}
-                      fill
-                      className="object-contain rounded-2xl"
-                      priority={i === VISIBLE}
-                    />
-                  </div>
-                </motion.div>
-              )
-            })}
-          </AnimatePresence>
-        </div>
-
-        {/* Arrows */}
-        <div className="absolute inset-y-0 left-8 flex items-center z-50">
-          <button
-            onClick={prev}
-            className="bg-white/70 hover:bg-white rounded-full p-3 shadow-lg backdrop-blur-md"
-            aria-label="Previous"
-          >
-            <svg className="size-8" viewBox="0 0 24 24" fill="none" dangerouslySetInnerHTML={{ __html: '<path d="M15 19L8 12l7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>' }} />
-          </button>
-        </div>
-        <div className="absolute inset-y-0 right-8 flex items-center z-50">
-          <button
-            onClick={next}
-            className="bg-white/70 hover:bg-white rounded-full p-3 shadow-lg backdrop-blur-md"
-            aria-label="Next"
-          >
-            <svg className="size-8" viewBox="0 0 24 24" fill="none" dangerouslySetInnerHTML={{ __html: '<path d="M9 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>' }} />
-          </button>
-        </div>
-
-        {/* Foreground pill */}
-        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[60]">
-          <div className="flex items-center justify-between w-[1040px] gap-6 rounded-3xl bg-white/95 shadow-[0_8px_40px_rgba(0,0,0,0.15)] px-12 py-6 backdrop-blur">
-            <H4 as="h4" className="max-w-[820px] h-[72px]">
-              <TypeAnimation
-                key={active}
-                sequence={[galleryItems[active].text]}
-                wrapper="span"
-                speed={50}
-                repeat={0}
-              />
-            </H4>
-            <Button href="#" color="cyan" className="text-sm px-4 py-2 lg:text-base">
-               Start
-            </Button> 
+          {/* Arrows */}
+                    {/* Arrows */}
+          <div className="absolute inset-y-0 left-8 hidden md:flex items-center z-50">
+            <button
+              onClick={prev}
+              className="bg-transparent rounded-full p-2 shadow-lg backdrop-blur-md"
+              aria-label="Previous"
+            >
+              <svg className="size-8" viewBox="0 0 24 24" fill="none" dangerouslySetInnerHTML={{ __html: '<path d="M15 19L8 12l7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>' }} />
+            </button>
          </div>
+                    <div className="absolute inset-y-0 right-8 hidden md:flex items-center z-50">
+            <button
+              onClick={next}
+              className="bg-transparent rounded-full p-2 shadow-lg backdrop-blur-md"
+              aria-label="Next"
+            >
+              <svg className="size-8" viewBox="0 0 24 24" fill="none" dangerouslySetInnerHTML={{ __html: '<path d="M9 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>' }} />
+            </button>
+          </div>
+
+          {/* Foreground pill (Desktop) */}
+          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[60] hidden md:block">
+            <div className="flex items-center justify-between w-[1040px] gap-6 rounded-2xl bg-black/30 shadow-[0_8px_40px_rgba(0,0,0,0.15)] px-12 backdrop-blur">
+              <CT as="h4" className="max-w-[820px] h-[72px] text-white flex items-center">
+                <TypeAnimation
+                  key={active}
+                  sequence={[galleryItems[active].text]}
+                  wrapper="span"
+                  speed={50}
+                  repeat={0}
+                />
+              </CT>
+              <Button href="#" color="cyan" className="text-sm px-4 py-2 lg:text-base whitespace-nowrap">
+                Start
+              </Button>
+            </div>
+          </div>
+        </section>
+
+        {/* Text box (Mobile) */}
+                        <div className="md:hidden w-full px-4 -mt-12 mb-16">
+            <div className="flex flex-row items-center justify-between w-full gap-x-4 rounded-2xl bg-white/10 bg-opacity-80 p-4 backdrop-blur-md">
+              <CT as="h4" className="w-full text-left h-[72px] text-white leading-tight flex items-center">
+                <TypeAnimation
+                  key={active}
+                  sequence={[galleryItems[active].text]}
+                  wrapper="span"
+                  speed={50}
+                  repeat={0}
+                />
+              </CT>
+              <Button href="#" color="cyan" className="text-xs px-3 py-1.5 whitespace-nowrap">
+                 Start
+              </Button>
+            </div>
        </div>
-      </div>
-    </motion.section>
+      </FadeIn>
    </div>
-  )
+  );
 }
--- a/src/components/Companies.tsx
+++ b/src/components/Companies.tsx
@@ -3,6 +3,7 @@
 import React from "react";
 import { motion } from "framer-motion";
 import { H2, P } from '@/components/Texts';
+import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";



@@ -15,76 +16,58 @@ import DeepMind from '@/components/logos/DeepMind';
 import Minimax from '@/components/logos/Minimax';
 import Mistral from '@/components/logos/Mistral';
 import Moonshot from '@/components/logos/Moonshot';
-import AlibabaCloud from '@/components/logos/AlibabaCloud';
 import TencentCloud from '@/components/logos/TencentCloud';
 import OpenAI from '@/components/logos/OpenAI';
 import XAI from '@/components/logos/XAI';

-const row1 = [Ai21, Claude, BaiduCloud, ByteDance];
-const row2 = [DeepSeek, DeepMind, Minimax, Mistral];
-const row3 = [Moonshot, AlibabaCloud];
-const row4 = [TencentCloud, OpenAI, XAI];
+const logos = [
+  <Ai21 key="ai21" />,
+  <Claude key="claude" />,
+  <BaiduCloud key="baidu" />,
+  <ByteDance key="bytedance" />,
+  <DeepSeek key="deepseek" />,
+  <DeepMind key="deepmind" />,
+  <Minimax key="minimax" />,
+  <Mistral key="mistral" />,
+  <Moonshot key="moonshot" />,
+  <TencentCloud key="tencent" />,
+  <OpenAI key="openai" />,
+  <XAI key="xai" />,
+];
+
+const row1 = logos.slice(0, 6);
+const row2 = logos.slice(6);

 export function Companies() {
  return (
-    <div id="companies" className="relative flex h-screen w-full overflow-hidden rounded-md bg-transparent antialiased md:items-center md:justify-center">
-      <div className="relative z-10 mx-auto w-full max-w-6xl p-4 py-12">
+    <div id="companies" className="relative bg-black flex flex-col items-center justify-center w-full overflow-hidden antialiased lg:py-12 py-4 -top-20">
+      <div className="relative z-10 mx-auto w-full max-w-6xl p-4">

        {/* Heading */}
        <motion.div
-          className="flex flex-col justify-center max-w-4xl items-center mb-6 mx-auto"
+          className="flex flex-col justify-center max-w-4xl items-center mb-8 mx-auto"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1 }}
        >
-          <H2 className="text-center pb-6">
-            Deploy the World’s Leading AI Models 
-          </H2>
-          <P className="pb-8 text-center" color="custom">
-            Deploy and scale AI from top global providers on a decentralized, privacy-first infrastructure. Mycelium Cloud lets you integrate state-of-the-art intelligence into your workflows with full control, sovereignty, and cost efficiency.
+          <P className="text-gray-100 text-center mb-6">
+            Mycelium Cloud allows you to deploy and scale AI agents from top global providers on a decentralized, privacy-first infrastructure.
          </P>
        </motion.div>

-        {/* Animated Line */}
-        <motion.div
-          className="h-[2px] bg-neutral-400 rounded-full mx-auto mb-12"
-          initial={{ width: 0 }}
-          animate={{ width: "100%" }}
-          transition={{ duration: 2, delay: 1 }}
-        />
-
        {/* Logos grid */}
-        <div className="flex flex-col items-center gap-y-10">
-          {[row1, row2, row3, row4].map((row, rowIndex) => (
-            <motion.div
-              key={rowIndex}
-              className="flex flex-wrap justify-center items-center gap-x-8 sm:gap-x-10"
-              initial="hidden"
-              animate="visible"
-              variants={{
-                visible: {
-                  transition: {
-                    staggerChildren: 0.15,
-                    delayChildren: 2.8 + rowIndex * 0.5, // Stagger rows
-                  },
-                },
-              }}
-            >
-              {row.map((Logo, i) => (
-                <motion.div
-                  key={i}
-                  className="flex justify-center"
-                  variants={{
-                    hidden: { opacity: 0, y: 30 },
-                    visible: { opacity: 1, y: 0 },
-                  }}
-                  transition={{ duration: 0.6, ease: "easeOut" }}
-                >
-                  <div className="text-[#2F3178]"><Logo /></div>
-                </motion.div>
-              ))}
-            </motion.div>
-          ))}
+        <div className="flex flex-col items-center gap-y-6 text-white">
+          <InfiniteMovingCards
+            items={row1}
+            direction="right"
+            speed="slow"
+          />
+          <InfiniteMovingCards
+            className=""
+            items={row2}
+            direction="left"
+            speed="slow"
+          />
        </div>
      </div>
    </div>
--- a/src/components/CountUpNumber.tsx
+++ b/src/components/CountUpNumber.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import CountUp from 'react-countup'
+import { H2 } from './Texts'
+
+interface CountUpNumberProps {
+  end: number
+  className?: string
+  color?: 'light' | 'primary' | 'secondary' | 'custom'
+}
+
+export function CountUpNumber({ end, className, color }: CountUpNumberProps) {
+  return (
+    <H2 color={color} className={className}>
+      <CountUp end={end} duration={2.75} separator="," />
+    </H2>
+  )
+}
--- a/src/components/DownloadLink.tsx
+++ b/src/components/DownloadLink.tsx
@@ -9,7 +9,7 @@ export function DownloadLink() {
      className="inline-flex items-center rounded-lg bg-gray-800 px-4 py-2 text-sm font-semibold text-white hover:bg-gray-900 transition-colors"
    >
      <ArrowDownTrayIcon className="h-5 w-5 mr-2" />
-      Get Mycelium
+      Get Started
    </Link>
  )
 }
--- a/src/components/FadeIn.tsx
+++ b/src/components/FadeIn.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import { motion, Transition } from 'framer-motion'
+import React from 'react'
+import { useMediaQuery } from '@/hooks/useMediaQuery'
+
+type FadeInProps = {
+  children: React.ReactNode
+  transition?: Transition
+  className?: string
+}
+
+export function FadeIn({ children, transition, className }: FadeInProps) {
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
+  return (
+    <motion.div
+      className={className}
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: false, margin: isMobile ? '0px 0px -50px 0px' : '0px 0px -100px 0px' }}
+      transition={transition || { duration: 0.5 }}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
--- a/src/components/Fields.tsx
+++ b/src/components/Fields.tsx
@@ -1,14 +1,21 @@
 import { useId } from 'react'
 import clsx from 'clsx'

-const formClasses =
-  'block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-hidden focus:ring-cyan-500 sm:text-sm'
+const formClasses = {
+  light:
+    'block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm',
+  dark:
+    'block w-full appearance-none rounded-lg border border-gray-600 bg-transparent py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-white placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm',
+}

-function Label({ id, children }: { id: string; children: React.ReactNode }) {
+function Label({ id, children, variant = 'light' }: { id: string; children: React.ReactNode, variant?: 'light' | 'dark' }) {
  return (
    <label
      htmlFor={id}
-      className="mb-2 block text-sm font-semibold text-gray-900"
+      className={clsx(
+        'mb-2 block text-sm font-semibold',
+        variant === 'light' ? 'text-gray-900' : 'text-white',
+      )}
    >
      {children}
    </label>
@@ -19,14 +26,15 @@ export function TextField({
  label,
  type = 'text',
  className,
+  variant = 'light',
  ...props
-}: Omit<React.ComponentPropsWithoutRef<'input'>, 'id'> & { label?: string }) {
+}: Omit<React.ComponentPropsWithoutRef<'input'>, 'id'> & { label?: string; variant?: 'light' | 'dark' }) {
  let id = useId()

  return (
    <div className={className}>
-      {label && <Label id={id}>{label}</Label>}
-      <input id={id} type={type} {...props} className={formClasses} />
+      {label && <Label id={id} variant={variant}>{label}</Label>}
+      <input id={id} type={type} {...props} className={formClasses[variant]} />
    </div>
  )
 }
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -6,6 +6,7 @@ import { Container } from '@/components/Container'
 import { TextField } from '@/components/Fields'
 import { Logomark } from '@/components/Logo'
 import { NavLinks } from '@/components/NavLinks'
+import { FadeIn } from '@/components/FadeIn'
 import qrCode from '@/images/qr-code.svg'

 function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) {
@@ -22,11 +23,12 @@ function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) {

 export function Footer() {
  return (
-    <footer id="footer" className="border-t border-gray-200">
+    <footer id="footer" className="border-t border-gray-800">
+      <FadeIn>
      <Container>
-        <div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-16">
+        <div className="flex flex-col items-start justify-between gap-y-12 pt-12 pb-6 lg:flex-row lg:items-center lg:py-12">
          <div>
-            <div className="flex items-center text-gray-900">
+            <div className="flex items-center text-white">
              <Logomark className="h-10 w-10 flex-none fill-cyan-500" />
              <div className="ml-4">
                <p className="text-base font-semibold">Project Mycelium</p>
@@ -37,44 +39,46 @@ export function Footer() {
              <NavLinks />
            </nav>
          </div>
-          <div className="group relative -mx-4 flex items-center self-stretch p-4 transition-colors hover:bg-gray-100 sm:self-auto sm:rounded-2xl lg:mx-0 lg:self-auto lg:p-6">
+          <div className="group relative -mx-4 flex items-center self-stretch p-4 transition-colors hover:bg-gray-800/50 sm:self-auto sm:rounded-2xl lg:mx-0 lg:self-auto lg:p-6">
            <div className="relative flex h-24 w-24 flex-none items-center justify-center">
-              <QrCodeBorder className="absolute inset-0 h-full w-full stroke-gray-300 transition-colors group-hover:stroke-cyan-500" />
+              <QrCodeBorder className="absolute inset-0 h-full w-full stroke-gray-700 transition-colors group-hover:stroke-[#015eff]" />
              <Image src={qrCode} alt="" unoptimized />
            </div>
            <div className="ml-8 lg:w-64">
-              <p className="text-base font-semibold text-gray-900">
-                <Link href="#">
+              <p className="text-base font-semibold text-white">
+                <Link href="https://threefoldfaq.crisp.help/en/">
                  <span className="absolute inset-0 sm:rounded-2xl" />
-                  Download the app
+                  Talk to a human
                </Link>
              </p>
-              <p className="mt-1 text-sm text-gray-700">
-                Scan the QR code to download the app from the App Store.
+              <p className="mt-1 text-sm text-gray-400">
+                Get in touch with us for any inquiries or questions.
              </p>
            </div>
          </div>
        </div>
-        <div className="flex flex-col items-center border-t border-gray-200 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
-          <form className="flex w-full justify-center md:w-auto">
+        <div className="flex flex-col items-center border-t border-gray-800 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
+          {/* <form className="flex w-full justify-center md:w-auto">
            <TextField
              type="email"
              aria-label="Email address"
              placeholder="Email address"
              autoComplete="email"
              required
+              variant="dark"
              className="w-60 min-w-0 shrink"
            />
            <Button type="submit" color="cyan" className="ml-4 flex-none">
              <span className="hidden lg:inline">Join our newsletter</span>
              <span className="lg:hidden">Join newsletter</span>
            </Button>
-          </form>
-          <p className="mt-6 text-sm text-gray-500 md:mt-0">
-            &copy; Copyright ThreeFold {new Date().getFullYear()}. All rights reserved.
+          </form> */}
+          <p className="mt-6 text-sm text-gray-400 md:mt-0 ">
+            &copy; Copyright OurWorld Holdings, {new Date().getFullYear()}. All rights reserved.
          </p>
        </div>
      </Container>
+      </FadeIn>
    </footer>
  )
 }
--- a/src/components/GetStarted.tsx
+++ b/src/components/GetStarted.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { H2, P, CP } from "@/components/Texts";
+import { Button } from "@/components/Button";
+
+export  function GetStarted() {
+  const items = [
+    {
+      title: "Mycelium Docs",
+      description:
+        "Learn how Mycelium works and get a high-level understanding of its architecture, deployment, and API references.",
+      href: "/docs",
+      buttonText: "Docs",
+    },
+    {
+      title: "Mycelium Repository",
+      description:
+        "Explore the official code repositories, contribute, and stay up-to-date with the latest changes.",
+      href: "https://github.com/your-repo", // replace with actual repo
+      buttonText: "Explore",
+    },
+    {
+      title: "Mycelium Support",
+      description:
+        "Need help? Reach out to our support team or join the community to get your questions answered quickly.",
+      href: "/support",
+      buttonText: "Support",
+    },
+  ];
+
+  return (
+    <section
+      className="bg-cover bg-center text-white py-32 px-6 relative"
+      style={{
+        backgroundImage: `url('/images/getstarted.webp')`,
+      }}
+    >
+      <div className="max-w-8xl mx-auto px-4 text-left mb-12">
+        <H2>Get Started</H2>
+        <P>Explore the documentation, code, and support channels to start building with Mycelium Cloud.</P>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3 max-w-8xl mx-auto px-4">
+        {items.map((item, idx) => (
+          <div
+            key={idx}
+            className="relative flex flex-col justify-between overflow-hidden rounded-2xl border border-white/10 bg-black/40 p-6 shadow-md shadow-gray-900/5 transition-all duration-300 ease-out hover:scale-105 hover:border-white/40 hover:bg-black/60"
+            style={{
+              filter: 'brightness(1)',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.filter = 'brightness(0.8)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.filter = 'brightness(1)';
+            }}
+          >
+            {/* Title + Button Row */}
+            <div className="flex items-center justify-between">
+              <h3 className="text-xl font-semibold">{item.title}</h3>
+              <Button variant="outline" href={item.href} color="white">
+                {item.buttonText}
+              </Button>
+            </div>
+
+            {/* Divider + Description */}
+            <div className="mt-4 border-t border-white/10"></div>
+
+            <CP className="mt-4">{item.description}</CP>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
--- a/src/components/GridStats.tsx
+++ b/src/components/GridStats.tsx
@@ -2,65 +2,56 @@

 import CountUp from "react-countup";
 import React from "react";
-import { Button } from "./Button";
+import { Button } from "@/components/Button";
+import { H2, P } from "@/components/Texts";

 export function GridStats() {
  return (
-    <div id="grid-stats" className="py-24 bg-transparent relative">
-      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
-        <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-          {/* Column 1: Title & NODES */}
+        <div
+      id="grid-stats"
+      className="py-24 relative -top-20 "
+      style={{
+        backgroundImage: "url(/images/benefits.webp)",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+      }}
+    >
+      <div className="max-w-2xl px-6 lg:max-w-7xl lg:px-6">
+        <div className="grid grid-cols-1 gap-16 lg:grid-cols-3">
+          {/* Column 1: Title & Description */}
          <div className="flex flex-col space-y-10">
-            {/* Title + Description */}
            <div>
-              <h2 className="text-2xl font-semibold tracking-tight leading-tight text-black lg:text-4xl">
-                Powered by a Global Community
-              </h2>
-              <p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-black lg:text-base">
-                ThreeFold’s groundbreaking technology enables anyone – individuals, organizations, and communities – to deploy their own Internet infrastructure.
-              </p>
-              <Button className="mt-8" variant="outline" href="https://threefold.io/build" >Explore TFGrid →</Button>
+              <H2 color="light">
+                Robust Infrastructure for your Intellegence Needs
+              </H2>
+              <P color="light" className="mt-6">
+                Mycelium's groundbreaking technology provides dedicated, performance-validated GPUs for your AI workloads.
+              </P>
+              <Button className="mt-8" variant="outline" href="https://threefold.io/build" color="white">Explore TFGrid →</Button>
            </div>
-
-
          </div>

-          {/* Column 2: CORES (staggered) + SSD */}
+          {/* Column 2: StatCards */}
          <div className="flex flex-col space-y-10">
            <StatCard
-              label="CORES"
-              description="A globally distributed mesh of CPU cores powering decentralized applications, AI workloads, and edge computing — without central bottlenecks."
-              value={<CountUp end={54_958} duration={2.5} separator="," />}
-              note="Total Central Processing Unit Cores available on the grid."
-              className="mt-24"
+              label="Dedicated Hosting"
+              description="Run LLMs, VLMs, and diffusion models on single-tenant GPUs with private endpoints. Bring your own weights or deploy from a curated library of open models."
            />
-
            <StatCard
-              label="SSD CAPACITY"
-              description="A distributed network of storage capacity — ready to support Web3, AI, and edge computing workloads around the world."
-              value={<CountUp end={7_364_506} duration={2.5} separator="," />}
-              unit="GB"
-              note="The total amount of storage (SSD, HDD, & RAM) on the grid."
+              label="Data Sovereignty"
+              description="Mycelium nodes run on trusted infrastructure you own or choose, ensuring that no third party can access, train on, or monetize your data."
            />
          </div>

-          
-
-          {/* Column 3: nodes countries */}
-          <div className="flex flex-col space-y-10 justify-start">
+          {/* Column 3: StatCards */}
+          <div className="flex flex-col space-y-10 justify-start mt-20">
            <StatCard
-              label="NODES"
-              description="A computer server 100% dedicated to the network. It is a building block of the ThreeFold Grid, providing compute, storage, and network resources."
-              value={<CountUp end={1778} duration={2.5} separator="," />}
-              note="The total number of nodes on the grid."
-
+              label="Seamless Scalability"
+              description="Mycelium’s decentralized infrastructure dynamically allocates compute, storage, and bandwidth across the network, so your AI workloads remain fast and resilient even under heavy demand."
            />
-
            <StatCard
-              label="COUNTRIES"
-              description="The number of countries where at least one node is connected and operational on the grid."
-              value={<CountUp end={51} duration={2.5} separator="," />}
-              note="The total number of countries with active nodes."
+              label="Composable Agent Ecosystem"
+              description="Mix and match agents for every part of your workflow: data ingestion, cleaning, orchestration, analysis, and reporting."
            />
          </div>
        </div>
@@ -73,21 +64,15 @@ export function GridStats() {
 function StatCard({
  label,
  description,
-  value,
-  unit,
-  note,
-  className = "",
+  className = "border border-white/10 hover:border-white/40 hover:bg-black/40",
 }: {
  label: string;
  description: string;
-  value: React.ReactNode;
-  unit?: string;
-  note: string;
  className?: string;
 }) {
  return (
    <div
-      className={`relative flex flex-col overflow-hidden rounded-2xl rounded-3xl bg-white p-6 opacity-0 shadow-md shadow-gray-900/5 p-8 transition-all duration-300 ease-out hover:scale-105 ${className}`}
+      className={`relative flex flex-col overflow-hidden rounded-3xl bg-gray-900/75 shadow-md shadow-gray-900/5 p-8 transition-all duration-300 ease-out hover:scale-105 ${className}`}
      style={{
        filter: 'brightness(1)',
      }}
@@ -98,22 +83,10 @@ function StatCard({
        e.currentTarget.style.filter = 'brightness(1)';
      }}
    >
-      <h3 className="text-lg font-semibold text-gradient-neutral-vertical" style={{ textShadow: '0 0 12px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.2)' }}>{label}</h3>
-      <p className="mt-2 text-sm font-light text-pretty text-black lg:text-base">
+      <h3 className="text-lg font-semibold text-white" style={{ textShadow: '0 0 12px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.2)' }}>{label}</h3>
+      <p className="mt-2 text-sm font-light text-pretty text-white lg:text-base">
        {description}
      </p>
-      <div className="mt-8 flex items-center space-x-3">
-        <span className="text-gradient-neutral-vertical text-3xl">•</span>
-        <div className="text-5xl font-semibold tracking-tight text-black tabular-nums">
-          {value}
-          {unit && (
-            <span className="ml-2 text-lg font-normal text-gray-800">{unit}</span>
-          )}
-        </div>
-      </div>
-      <p className="mt-2 text-sm text-gray-800 uppercase tracking-wider">
-        {note}
-      </p>
    </div>
  );
 }
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -48,7 +48,7 @@ function MobileNavLink(
  return (
    <PopoverButton
      as={Link}
-      className="block text-base/7 tracking-tight text-[#2F3178]"
+      className="block text-base/7 tracking-tight text-white"
      {...props}
    />
  )
@@ -72,7 +72,7 @@ export function Header() {
              {({ open }) => (
                <>
                  <PopoverButton
-                    className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-gray-900 p-2 hover:bg-gray-200/50 hover:stroke-gray-600 focus:not-data-focus:outline-hidden active:stroke-gray-900"
+                    className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-white p-2 hover:bg-gray-200/50 hover:stroke-gray-400 focus:not-data-focus:outline-hidden active:stroke-white"
                    aria-label="Toggle site navigation"
                  >
                    {({ open }) =>
@@ -104,28 +104,16 @@ export function Header() {
                            y: -32,
                            transition: { duration: 0.2 },
                          }}
-                          className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-white px-6 pt-32 pb-6 shadow-2xl shadow-gray-900/20"
+                          className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-900 px-6 pt-32 pb-6 shadow-2xl shadow-gray-900/20"
                        >
                          <div className="space-y-4">
-                            <MobileNavLink href="/#about">
-                              About
-                            </MobileNavLink>
-                            <MobileNavLink href="/#benefits">
-                              Benefits
-                            </MobileNavLink>
-                            <MobileNavLink href="/#features">
-                              Features
-                            </MobileNavLink>
-                            <MobileNavLink href="/#usecases">
-                              Use Cases
-                            </MobileNavLink>
-                            <MobileNavLink href="/#faqs">FAQs</MobileNavLink>
+                            <NavLinks className="block text-base/7 tracking-tight" />
                          </div>
                          <div className="mt-8 flex flex-col gap-4">
-                            <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
+                            <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" color="white" target="_blank" rel="noopener noreferrer">
                              Docs
                            </Button>
-                            <Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Mycelium</Button>
+                            <Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Started</Button>
                          </div>
                        </PopoverPanel>
                      </>
@@ -135,10 +123,10 @@ export function Header() {
              )}
            </Popover>
            <div className="flex items-center gap-6 max-lg:hidden">
-              <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
+              <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" color="white" target="_blank" rel="noopener noreferrer">
                Docs
              </Button>
-              <Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Mycelium</Button>
+              <Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Started</Button>
            </div>
          </div>
        </Container>
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,166 +0,0 @@
-import { useId } from 'react'
-import Image from 'next/image'
-import clsx from 'clsx'
-
-import { AppDemo } from '@/components/AppDemo'
-import { DownloadLink } from '@/components/DownloadLink'
-import { Button } from '@/components/Button'
-import { Container } from '@/components/Container'
-import { PhoneFrame } from '@/components/PhoneFrame'
-import logoBbc from '@/images/logos/bbc.svg'
-import logoCbs from '@/images/logos/cbs.svg'
-import logoCnn from '@/images/logos/cnn.svg'
-import logoFastCompany from '@/images/logos/fast-company.svg'
-import logoForbes from '@/images/logos/forbes.svg'
-import logoHuffpost from '@/images/logos/huffpost.svg'
-import logoTechcrunch from '@/images/logos/techcrunch.svg'
-import logoWired from '@/images/logos/wired.svg'
-
-function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
-  let id = useId()
-
-  return (
-    <div {...props}>
-      <svg
-        viewBox="0 0 1026 1026"
-        fill="none"
-        aria-hidden="true"
-        className="absolute inset-0 h-full w-full animate-spin-slow"
-      >
-        <path
-          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
-          stroke="#D4D4D4"
-          strokeOpacity="0.7"
-        />
-        <path
-          d="M513 1025C230.23 1025 1 795.77 1 513"
-          stroke={`url(#${id}-gradient-1)`}
-          strokeLinecap="round"
-        />
-        <defs>
-          <linearGradient
-            id={`${id}-gradient-1`}
-            x1="1"
-            y1="513"
-            x2="1"
-            y2="1025"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#06b6d4" />
-            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-      </svg>
-      <svg
-        viewBox="0 0 1026 1026"
-        fill="none"
-        aria-hidden="true"
-        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
-      >
-        <path
-          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
-          stroke="#D4D4D4"
-          strokeOpacity="0.7"
-        />
-        <path
-          d="M913 513c0 220.914-179.086 400-400 400"
-          stroke={`url(#${id}-gradient-2)`}
-          strokeLinecap="round"
-        />
-        <defs>
-          <linearGradient
-            id={`${id}-gradient-2`}
-            x1="913"
-            y1="513"
-            x2="913"
-            y2="913"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#06b6d4" />
-            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-      </svg>
-    </div>
-  )
-}
-
-function PlayIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
-      <circle cx="12" cy="12" r="11.5" stroke="#D4D4D4" />
-      <path
-        d="M9.5 14.382V9.618a.5.5 0 0 1 .724-.447l4.764 2.382a.5.5 0 0 1 0 .894l-4.764 2.382a.5.5 0 0 1-.724-.447Z"
-        fill="#A3A3A3"
-        stroke="#A3A3A3"
-      />
-    </svg>
-  )
-}
-
-export function Hero() {
-  return (
-    <div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
-      <Container>
-        <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
-          <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
-            <h1 className="text-4xl font-medium tracking-tight text-gray-900">
-              Mycelium
-            </h1>
-            <h2 className="mt-6 text-2xl tracking-tight text-gray-600">
-              Unleashing the Power of Decentralized Networks
-            </h2>
-            <p className="mt-6 text-lg text-gray-600">
-              Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
-            </p>
-            <p className="mt-6 text-lg text-gray-600">
-              Coming Soon: New Decentralized Features
-            </p>
-            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
-              <DownloadLink />
-              <Button
-                href="https://youtu.be/4oq15lxvkts?si=Heh_8DHqHaNpy3_F"
-                variant="outline"
-              >
-                <PlayIcon className="h-6 w-6 flex-none" />
-                <span className="ml-2.5">Watch the Demo</span>
-              </Button>
-            </div>
-          </div>
-          <div className="relative mt-10 sm:mt-20 lg:col-span-5 lg:row-span-2 lg:mt-0 xl:col-span-6">
-            <BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/3 mask-[linear-gradient(to_bottom,white_20%,transparent_75%)] stroke-gray-300/70 sm:top-16 sm:-translate-x-1/2 lg:-top-16 lg:ml-12 xl:-top-14 xl:ml-0" />
-            <div className="-mx-4 h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)] px-9 sm:mx-0 lg:absolute lg:-inset-x-10 lg:-top-10 lg:-bottom-20 lg:h-auto lg:px-0 lg:pt-10 xl:-bottom-32">
-              <PhoneFrame className="mx-auto max-w-[366px]" priority>
-                <AppDemo />
-              </PhoneFrame>
-            </div>
-          </div>
-          <div className="relative -mt-4 lg:col-span-7 lg:mt-0 xl:col-span-6">
-            <p className="text-center text-sm font-semibold text-gray-900 lg:text-left">
-              As featured in
-            </p>
-            <ul
-              role="list"
-              className="mx-auto mt-8 flex max-w-xl flex-wrap justify-center gap-x-10 gap-y-8 lg:mx-0 lg:justify-start"
-            >
-              {[
-                ['Forbes', logoForbes],
-                ['TechCrunch', logoTechcrunch],
-                ['Wired', logoWired],
-                ['CNN', logoCnn, 'hidden xl:block'],
-                ['BBC', logoBbc],
-                ['CBS', logoCbs],
-                ['Fast Company', logoFastCompany],
-                ['HuffPost', logoHuffpost, 'hidden xl:block'],
-              ].map(([name, logo, className]) => (
-                <li key={name} className={clsx('flex', className)}>
-                  <Image src={logo} alt={name} className="h-8" unoptimized />
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-      </Container>
-    </div>
-  )
-}
--- a/src/components/HomeHero.tsx
+++ b/src/components/HomeHero.tsx
@@ -18,68 +18,57 @@ export function HomeHero() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  return (
-    <div className="relative h-screen -top-15">
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 2 }}
-        className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[700px] -z-10 rounded-full overflow-hidden"
-      >
+    <div className="relative h-screen -top-20">
+      <div className="absolute inset-0 -z-10">
        <video
          autoPlay
          loop
          muted
          playsInline
-          className="h-full w-full object-cover"
+          className="absolute inset-0 w-full h-full object-cover"
        >
-          <source src="/videos/mycelium.mp4" type="video/mp4" />
+          <source src="/videos/mycelium2.mp4" type="video/mp4" />
        </video>
-      </motion.div>
-      <div className="relative isolate px-6 lg:px-8">
-        <div
-          aria-hidden="true"
-          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl lg:-top-80"
-        >
-          <div
-            style={{
-              clipPath:
-                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-            }}
-            className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#a4caf6] to-[#aaa4fa] opacity-15 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
-          />
-        </div>
-        <div
-          aria-hidden="true"
-          className="absolute inset-x-0 bottom-10 -z-10 transform-gpu overflow-hidden blur-3xl lg:bottom-40"
-        >
-          <div
-            style={{
-              clipPath:
-                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-            }}
-            className="relative bottom-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-15 sm:left-[calc(50%+30rem)] sm:w-[72.1875rem]"
-          />
-        </div>
-        <div className="relative -top-15  mx-auto max-w-8xl h-screen flex items-center justify-center">
-          <div className="text-center max-w-5xl">
-            <H1>
-              <TypeAnimation
-                sequence={[
-                  'Decentralized Autonomous Agentic Cloud.',
-                  1000,
-                ]}
-                wrapper="span"
-                speed={50}
-                repeat={0}
-              />
-            </H1>
+        <div className="absolute inset-0 bg-black/60" />
+      </div>
+      <div className="relative px-6 lg:px-8">
+        <div className="relative -top-15 mx-auto flex h-screen max-w-8xl items-center justify-center">
+          <div className="text-center">
+            <div className="max-w-5xl">
+              <H1 color="light">
+                <TypeAnimation
+                  sequence={[
+                    'Decentralized Autonomous Agentic Cloud.',
+                    1000,
+                  ]}
+                  wrapper="span"
+                  speed={50}
+                  repeat={0}
+                />
+              </H1>
+            </div>
+
+            {/* Mobile-only PL */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 1, delay: 1 }}
+              className="lg:hidden"
+            >
+              <PL className="mt-8 max-w-xl text-center text-gray-100" color="light">
+                Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
+              </PL>
+            </motion.div>
          </div>
+
+          {/* Desktop-only PL */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 1, delay: 1 }}
+            className="hidden lg:block"
          >
-            <PL className="absolute bottom-0 left-0 max-w-xl text-left" color="custom">
+            <PL className="absolute -bottom-8 left-0 max-w-xl text-left text-gray-100" color="light">
              Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
            </PL>
          </motion.div>
--- a/src/components/LinuxLink.tsx
+++ b/src/components/LinuxLink.tsx
@@ -1,36 +0,0 @@
-import Link from 'next/link'
-import clsx from 'clsx'
-
-export function LinuxLink({
-  color = 'black',
-}: {
-  color?: 'black' | 'white'
-}) {
-  return (
-    <Link
-      href="#"
-      aria-label="Download for Linux"
-      className={clsx(
-        'flex items-center rounded-lg transition-colors px-4 py-2',
-        color === 'black'
-          ? 'bg-gray-800 text-white hover:bg-gray-900'
-          : 'bg-white text-gray-900 hover:bg-gray-50',
-      )}
-    >
-      {/* Linux SVG */}
-      <svg
-        viewBox="0 0 266 312"
-        aria-hidden="true"
-        className="h-5 w-5 mr-3"
-      >
-        <path d="M128.6640625 79.2793c0 1-1 1-1 1h-1c-1 0-1-1-2-2 0 0-1-1-1-2s0-1 1-1l2 1c1 1 2 2 2 3m-18-10c0-5-2-8-5-8 0 0 0 1-1 1v2h3c0 2 1 3 1 5h2m35-5c2 0 3 2 4 5h2c-1-1-1-2-1-3s0-2-1-3-2-2-3-2c0 0-1 1-2 1 0 1 1 1 1 2m-30 16c-1 0-1 0-1-1s0-2 1-3c2 0 3-1 3-1 1 0 1 1 1 1 0 1-1 2-3 4h-1m-11-1c-4-2-5-5-5-10 0-3 0-5 2-7 1-2 3-3 5-3s3 1 5 3c1 3 2 6 2 9v2h1v-1c1 0 1-2 1-6 0-3 0-6-2-9s-4-5-8-5c-3 0-6 2-7 5-2 4-2.4 7-2.4 12 0 4 1.4 8 5.4 12 1-1 2-1 3-2m125 141c1 0 1-.4 1-1.3 0-2.2-1-4.8-4-7.7-3-3-8-4.9-14-5.7-1-.1-2-.1-2-.1-1-.2-1-.2-2-.2-1-.1-3-.3-4-.5 3-9.3 4-17.5 4-24.7 0-10-2-17-6-23s-8-9-13-10c-1 1-1 1-1 2 5 2 10 6 13 12 3 7 4 13 4 20 0 5.6-1 13.9-5 24.5-4 1.6-8 5.3-11 11.1 0 .9 0 1.4 1 1.4 0 0 1-.9 2-2.6 2-1.7 3-3.4 5-5.1 3-1.7 5-2.6 8-2.6 5 0 10 .7 13 2.1 4 1.3 6 2.7 7 4.3 1 1.5 2 2.9 3 4.2 0 1.3 1 1.9 1 1.9m-92-145c-1-1-1-3-1-5 0-4 0-6 2-9 2-2 4-3 6-3 3 0 5 2 7 4 1 3 2 5 2 8 0 5-2 8-6 9 0 0 1 1 2 1 2 0 3 1 5 2 1-6 2-10 2-15 0-6-1-10-3-13-3-3-6-4-10-4-3 0-6 1-9 3-2 3-3 5-3 8 0 5 1 9 3 13 1 0 2 1 3 1m12 16c-13 9-23 13-31 13-7 0-14-3-20-8 1 2 2 4 3 5l6 6c4 4 9 6 14 6 7 0 15-4 25-11l9-6c2-2 4-4 4-7 0-1 0-2-1-2-1-2-6-5-16-8-9-4-16-6-20-6-3 0-8 2-15 6-6 4-10 8-10 12 0 0 1 1 2 3 6 5 12 8 18 8 8 0 18-4 31-14v2c1 0 1 1 1 1m23 202c4 7.52 11 11.3 19 11.3 2 0 4-.3 6-.9 2-.4 4-1.1 5-1.9 1-.7 2-1.4 3-2.2 2-.7 2-1.2 3-1.7l17-14.7c4-3.19 8-5.98 13-8.4 4-2.4 8-4 10-4.9 3-.8 5-2 7-3.6 1-1.5 2-3.4 2-5.8 0-2.9-2-5.1-4-6.7s-4-2.7-6-3.4-4-2.3-7-5c-2-2.6-4-6.2-5-10.9l-1-5.8c-1-2.7-1-4.7-2-5.8 0-.3 0-.4-1-.4s-3 .9-4 2.6c-2 1.7-4 3.6-6 5.6-1 2-4 3.8-6 5.5-3 1.7-6 2.6-8 2.6-8 0-12-2.2-15-6.5-2-3.2-3-6.9-4-11.1-2-1.7-3-2.6-5-2.6-5 0-7 5.2-7 15.7v31.1c0 .9-1 2.9-1 6-1 3.1-1 6.62-1 10.6l-2 11.1v.17m-145-5.29c9.3 1.36 20 4.27 32.1 8.71 12.1 4.4 19.5 6.7 22.2 6.7 7 0 12.8-3.1 17.6-9.09 1-1.94 1-4.22 1-6.84 0-9.45-5.7-21.4-17.1-35.9l-6.8-9.1c-1.4-1.9-3.1-4.8-5.3-8.7-2.1-3.9-4-6.9-5.5-9-1.3-2.3-3.4-4.6-6.1-6.9-2.6-2.3-5.6-3.8-8.9-4.6-4.2.8-7.1 2.2-8.5 4.1s-2.2 4-2.4 6.2c-.3 2.1-.9 3.5-1.9 4.2-1 .6-2.7 1.1-5 1.6-.5 0-1.4 0-2.7.1h-2.7c-5.3 0-8.9.6-10.8 1.6-2.5 2.9-3.8 6.2-3.8 9.7 0 1.6.4 4.3 1.2 8.1.8 3.7 1.2 6.7 1.2 8.8 0 4.1-1.2 8.2-3.7 12.3-2.5 4.3-3.8 7.5-3.8 9.78 1 3.88 7.6 6.61 19.7 8.21m33.3-90.9c0-6.9 1.8-14.5 5.5-23.5 3.6-9 7.2-15 10.7-19-.2-1-.7-1-1.5-1l-1-1c-2.9 3-6.4 10-10.6 20-4.2 9-6.4 17.3-6.4 23.4 0 4.5 1.1 8.4 3.1 11.8 2.2 3.3 7.5 8.1 15.9 14.2l10.6 6.9c11.3 9.8 17.3 16.6 17.3 20.6 0 2.1-1 4.2-4 6.5-2 2.4-4.7 3.6-7 3.6-.2 0-.3.2-.3.7 0 .1 1 2.1 3.1 6 4.2 5.7 13.2 8.5 25.2 8.5 22 0 39-9 52-27 0-5 0-8.1-1-9.4v-3.7c0-6.5 1-11.4 3-14.6s4-4.7 7-4.7c2 0 4 .7 6 2.2 1-7.7 1-14.4 1-20.4 0-9.1 0-16.6-2-23.6-1-6-3-11-5-15l-6-9c-2-3-3-6-5-9-1-4-2-7-2-12-3-5-5-10-8-15-2-5-4-10-6-14l-9 7c-10 7-18 10-25 10-6 0-11-1-14-5l-6-5c0 3-1 7-3 11l-6.3 12c-2.8 7-4.3 11-4.6 14-.4 2-.7 4-.9 4l-7.5 15c-8.1 15-12.2 28.9-12.2 40.4 0 2.3.2 4.7.6 7.1-4.5-3.1-6.7-7.4-6.7-13m71.6 94.6c-13 0-23 1.76-30 5.25v-.3c-5 6-10.6 9.1-18.4 9.1-4.9 0-12.6-1.9-23-5.7-10.5-3.6-19.8-6.36-27.9-8.18-.8-.23-2.6-.57-5.5-1.03-2.8-.45-5.4-.91-7.7-1.37-2.1-.45-4.5-1.13-7.1-2.05-2.5-.79-4.5-1.82-6-3.07-1.38-1.26-2.06-2.68-2.06-4.27 0-1.6.34-3.31 1.02-5.13.64-1.1 1.34-2.2 2.04-3.2.7-1.1 1.3-2.1 1.7-3.1.6-.9 1-1.8 1.4-2.8.4-.9.8-1.8 1-2.9.2-1 .4-2 .4-3s-.4-4-1.2-9.3c-.8-5.2-1.2-8.5-1.2-9.9 0-4.4 1-7.9 3.2-10.4s4.3-3.8 6.5-3.8h11.5c.9 0 2.3-.5 4.4-1.7.7-1.6 1.3-2.9 1.7-4.1.5-1.2.7-2.1.9-2.5.2-.6.4-1.2.6-1.7.4-.7.9-1.5 1.6-2.3-.8-1-1.2-2.3-1.2-3.9 0-1.1 0-2.1.2-2.7 0-3.6 1.7-8.7 5.3-15.4l3.5-6.3c2.9-5.4 5.1-9.4 6.7-13.4 1.7-4 3.5-10 5.5-18 1.6-7 5.4-14 11.4-21l7.5-9c5.2-6 8.6-11 10.5-15s2.9-9 2.9-13c0-2-.5-8-1.6-18-1-10-1.5-20-1.5-29 0-7 .6-12 1.9-17s3.6-10 7-14c3-4 7-8 13-10s13-3 21-3c3 0 6 0 9 1 3 0 7 1 12 3 4 2 8 4 11 7 4 3 7 8 10 13 2 6 4 12 5 20 1 5 1 10 2 17 0 6 1 10 1 13 1 3 1 7 2 12 1 4 2 8 4 11 2 4 4 8 7 12 3 5 7 10 11 16 9 10 16 21 20 32 5 10 8 23 8 36.9 0 6.9-1 13.6-3 20.1 2 0 3 .8 4 2.2s2 4.4 3 9.1l1 7.4c1 2.2 2 4.3 5 6.1 2 1.8 4 3.3 7 4.5 2 1 5 2.4 7 4.2 2 2 3 4.1 3 6.3 0 3.4-1 5.9-3 7.7-2 2-4 3.4-7 4.3-2 1-6 3-12 5.82-5 2.96-10 6.55-15 10.8l-10 8.51c-4 3.9-8 6.7-11 8.4-3 1.8-7 2.7-11 2.7l-7-.8c-8-2.1-13-6.1-16-12.2-16-1.94-29-2.9-37-2.9" fill="currentColor" />
-      </svg>
-
-      {/* Text */}
-      <div className="flex flex-col text-left leading-tight">
-        <span className="text-[9px] mt-0">Download for</span>
-        <span className="text-sm font-semibold -mt-1.5">Linux</span>
-      </div>
-    </Link>
-  )
-}
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
--- a/src/components/NavLinks.tsx
+++ b/src/components/NavLinks.tsx
@@ -3,25 +3,40 @@
 import { useRef, useState } from 'react'
 import Link from 'next/link'
 import { AnimatePresence, motion } from 'framer-motion'
+import clsx from 'clsx'

-export function NavLinks() {
+export function NavLinks({ className }: { className?: string }) {
  let [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
  let timeoutRef = useRef<number | null>(null)

+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
+    if (href.startsWith('/#')) {
+      e.preventDefault();
+      const targetId = href.substring(2);
+      const targetElement = document.getElementById(targetId);
+
+      if (targetElement) {
+        targetElement.scrollIntoView({
+          behavior: 'smooth',
+        });
+      }
+    }
+  };
+
  return [
-    ['About', '/#home-about'],
-    ['Cloud', '/#grid-stats'],
-    ['Marketplace', '/#companies'],
-    ['Technology', '/#stack-section'],
-    ['How it works', '/#steps'],
-    ['Use Cases', '/#clickable-gallery'],
-    ['Coming Soon', '/#use-cases'],
-    ['FAQs', '/#faqs'],
+    ['Technologies', '/#technologies'],
+    ['Network', '/#network'],
+    ['How it Works', '/#how-it-works'],
+    ['Get Started', '/#get-started'],
  ].map(([label, href], index) => (
    <Link
      key={label}
      href={href}
-      className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-[#2F3178] transition-colors delay-150 hover:text-[#2F3178] hover:delay-0"
+      className={clsx(
+        'relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-white transition-colors delay-150 hover:text-gray-300 hover:delay-0',
+        className,
+      )}
+      onClick={(e) => handleClick(e, href)}
      onMouseEnter={() => {
        if (timeoutRef.current) {
          window.clearTimeout(timeoutRef.current)
@@ -37,7 +52,7 @@ export function NavLinks() {
      <AnimatePresence>
        {hoveredIndex === index && (
          <motion.span
-            className="absolute inset-0 rounded-lg bg-gray-100"
+            className="absolute inset-0 rounded-lg bg-white/10"
            layoutId="hoverBackground"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1, transition: { duration: 0.15 } }}
--- a/src/components/PhoneFrame.tsx
+++ b/src/components/PhoneFrame.tsx
@@ -1,42 +0,0 @@
-import Image from 'next/image'
-import clsx from 'clsx'
-
-import frame from '@/images/phone-frame.svg'
-
-function PlaceholderFrame(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 366 729" aria-hidden="true" {...props}>
-      <path
-        fill="#F2F2F2"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M300.092 1c41.22 0 63.223 21.99 63.223 63.213V184.94c-.173.184-.329.476-.458.851.188-.282.404-.547.647-.791.844-.073 2.496.257 2.496 2.157V268.719c-.406 2.023-2.605 2.023-2.605 2.023a7.119 7.119 0 0 1-.08-.102v394.462c0 41.213-22.001 63.212-63.223 63.212h-95.074c-.881-.468-2.474-.795-4.323-.838l-33.704-.005-.049.001h-.231l-.141-.001c-2.028 0-3.798.339-4.745.843H66.751c-41.223 0-63.223-21.995-63.223-63.208V287.739c-.402-.024-2.165-.23-2.524-2.02v-.973A2.039 2.039 0 0 1 1 284.62v-47.611c0-.042.001-.084.004-.126v-.726c0-1.9 1.652-2.23 2.496-2.157l.028.028v-16.289c-.402-.024-2.165-.23-2.524-2.02v-.973A2.039 2.039 0 0 1 1 214.62v-47.611c0-.042.001-.084.004-.126v-.726c0-1.9 1.652-2.23 2.496-2.157l.028.028v-26.041a2.26 2.26 0 0 0 .093-.236l-.064-.01a3.337 3.337 0 0 1-.72-.12l-.166-.028A2 2 0 0 1 1 135.62v-24.611a2 2 0 0 1 1.671-1.973l.857-.143v-44.68C3.528 22.99 25.53 1 66.75 1h233.341ZM3.952 234.516a5.481 5.481 0 0 0-.229-.278c.082.071.159.163.228.278Zm89.99-206.304A4.213 4.213 0 0 0 89.727 24H56.864C38.714 24 24 38.708 24 56.852v618.296C24 693.292 38.714 708 56.864 708h250.272c18.15 0 32.864-14.708 32.864-32.852V56.852C340 38.708 325.286 24 307.136 24h-32.864a4.212 4.212 0 0 0-4.213 4.212v2.527c0 10.235-8.3 18.532-18.539 18.532H112.48c-10.239 0-18.539-8.297-18.539-18.532v-2.527Z"
-      />
-      <rect x="154" y="29" width="56" height="5" rx="2.5" fill="#D4D4D4" />
-    </svg>
-  )
-}
-
-export function PhoneFrame({
-  className,
-  children,
-  priority = false,
-  ...props
-}: React.ComponentPropsWithoutRef<'div'> & { priority?: boolean }) {
-  return (
-    <div className={clsx('relative aspect-366/729', className)} {...props}>
-      <div className="absolute inset-y-[calc(1/729*100%)] right-[calc(5/729*100%)] left-[calc(7/729*100%)] rounded-[calc(58/366*100%)/calc(58/729*100%)] shadow-2xl" />
-      <div className="absolute top-[calc(23/729*100%)] left-[calc(23/366*100%)] grid h-[calc(686/729*100%)] w-[calc(318/366*100%)] transform grid-cols-1 overflow-hidden bg-gray-900 pt-[calc(23/318*100%)]">
-        {children}
-      </div>
-      <PlaceholderFrame className="pointer-events-none absolute inset-0 h-full w-full fill-gray-100" />
-      <Image
-        src={frame}
-        alt=""
-        className="pointer-events-none absolute inset-0 h-full w-full"
-        unoptimized
-        priority={priority}
-      />
-    </div>
-  )
-}
--- a/src/components/Pricing.tsx
+++ b/src/components/Pricing.tsx
@@ -1,288 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Radio, RadioGroup } from '@headlessui/react'
-import clsx from 'clsx'
-
-import { Button } from '@/components/Button'
-import { Container } from '@/components/Container'
-import { Logomark } from '@/components/Logo'
-
-const plans = [
-  {
-    name: 'Starter',
-    featured: false,
-    price: { Monthly: '$0', Annually: '$0' },
-    description:
-      'You’re new to investing but want to do it right. Get started for free.',
-    button: {
-      label: 'Get started for free',
-      href: '/register',
-    },
-    features: [
-      'Commission-free trading',
-      'Multi-layered encryption',
-      'One tip every day',
-      'Invest up to $1,500 each month',
-    ],
-    logomarkClassName: 'fill-gray-300',
-  },
-  {
-    name: 'Investor',
-    featured: false,
-    price: { Monthly: '$7', Annually: '$70' },
-    description:
-      'You’ve been investing for a while. Invest more and grow your wealth faster.',
-    button: {
-      label: 'Subscribe',
-      href: '/register',
-    },
-    features: [
-      'Commission-free trading',
-      'Multi-layered encryption',
-      'One tip every hour',
-      'Invest up to $15,000 each month',
-      'Basic transaction anonymization',
-    ],
-    logomarkClassName: 'fill-gray-500',
-  },
-  {
-    name: 'VIP',
-    featured: true,
-    price: { Monthly: '$199', Annually: '$1,990' },
-    description:
-      'You’ve got a huge amount of assets but it’s not enough. To the moon.',
-    button: {
-      label: 'Subscribe',
-      href: '/register',
-    },
-    features: [
-      'Commission-free trading',
-      'Multi-layered encryption',
-      'Real-time tip notifications',
-      'No investment limits',
-      'Advanced transaction anonymization',
-      'Automated tax-loss harvesting',
-    ],
-    logomarkClassName: 'fill-cyan-500',
-  },
-]
-
-function CheckIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
-      <path
-        d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
-        fill="currentColor"
-      />
-      <circle
-        cx="12"
-        cy="12"
-        r="8.25"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-function Plan({
-  name,
-  price,
-  description,
-  button,
-  features,
-  activePeriod,
-  logomarkClassName,
-  featured = false,
-}: {
-  name: string
-  price: {
-    Monthly: string
-    Annually: string
-  }
-  description: string
-  button: {
-    label: string
-    href: string
-  }
-  features: Array<string>
-  activePeriod: 'Monthly' | 'Annually'
-  logomarkClassName?: string
-  featured?: boolean
-}) {
-  return (
-    <section
-      className={clsx(
-        'flex flex-col overflow-hidden rounded-3xl p-6 shadow-lg shadow-gray-900/5',
-        featured ? 'order-first bg-gray-900 lg:order-none' : 'bg-white',
-      )}
-    >
-      <h3
-        className={clsx(
-          'flex items-center text-sm font-semibold',
-          featured ? 'text-white' : 'text-gray-900',
-        )}
-      >
-        <Logomark className={clsx('h-6 w-6 flex-none', logomarkClassName)} />
-        <span className="ml-4">{name}</span>
-      </h3>
-      <p
-        className={clsx(
-          'relative mt-5 flex text-3xl tracking-tight',
-          featured ? 'text-white' : 'text-gray-900',
-        )}
-      >
-        {price.Monthly === price.Annually ? (
-          price.Monthly
-        ) : (
-          <>
-            <span
-              aria-hidden={activePeriod === 'Annually'}
-              className={clsx(
-                'transition duration-300',
-                activePeriod === 'Annually' &&
-                  'pointer-events-none translate-x-6 opacity-0 select-none',
-              )}
-            >
-              {price.Monthly}
-            </span>
-            <span
-              aria-hidden={activePeriod === 'Monthly'}
-              className={clsx(
-                'absolute top-0 left-0 transition duration-300',
-                activePeriod === 'Monthly' &&
-                  'pointer-events-none -translate-x-6 opacity-0 select-none',
-              )}
-            >
-              {price.Annually}
-            </span>
-          </>
-        )}
-      </p>
-      <p
-        className={clsx(
-          'mt-3 text-sm',
-          featured ? 'text-gray-300' : 'text-gray-700',
-        )}
-      >
-        {description}
-      </p>
-      <div className="order-last mt-6">
-        <ul
-          role="list"
-          className={clsx(
-            '-my-2 divide-y text-sm',
-            featured
-              ? 'divide-gray-800 text-gray-300'
-              : 'divide-gray-200 text-gray-700',
-          )}
-        >
-          {features.map((feature) => (
-            <li key={feature} className="flex py-2">
-              <CheckIcon
-                className={clsx(
-                  'h-6 w-6 flex-none',
-                  featured ? 'text-white' : 'text-cyan-500',
-                )}
-              />
-              <span className="ml-4">{feature}</span>
-            </li>
-          ))}
-        </ul>
-      </div>
-      <Button
-        href={button.href}
-        color={featured ? 'cyan' : 'gray'}
-        className="mt-6"
-        aria-label={`Get started with the ${name} plan for ${price}`}
-      >
-        {button.label}
-      </Button>
-    </section>
-  )
-}
-
-export function Pricing() {
-  let [activePeriod, setActivePeriod] = useState<'Monthly' | 'Annually'>(
-    'Monthly',
-  )
-
-  return (
-    <section
-      id="pricing"
-      aria-labelledby="pricing-title"
-      className="border-t border-gray-200 bg-gray-100 py-20 sm:py-32"
-    >
-      <Container>
-        <div className="mx-auto max-w-2xl text-center">
-          <h2
-            id="pricing-title"
-            className="text-3xl font-medium tracking-tight text-gray-900"
-          >
-            Flat pricing, no management fees.
-          </h2>
-          <p className="mt-2 text-lg text-gray-600">
-            Whether you’re one person trying to get ahead or a big firm trying
-            to take over the world, we’ve got a plan for you.
-          </p>
-        </div>
-
-        <div className="mt-8 flex justify-center">
-          <div className="relative">
-            <RadioGroup
-              value={activePeriod}
-              onChange={setActivePeriod}
-              className="grid grid-cols-2"
-            >
-              {['Monthly', 'Annually'].map((period) => (
-                <Radio
-                  key={period}
-                  value={period}
-                  className={clsx(
-                    'cursor-pointer border border-gray-300 px-[calc(--spacing(3)-1px)] py-[calc(--spacing(2)-1px)] text-sm text-gray-700 transition-colors hover:border-gray-400 data-focus:outline-2 data-focus:outline-offset-2',
-                    period === 'Monthly'
-                      ? 'rounded-l-lg'
-                      : '-ml-px rounded-r-lg',
-                  )}
-                >
-                  {period}
-                </Radio>
-              ))}
-            </RadioGroup>
-            <div
-              aria-hidden="true"
-              className={clsx(
-                'pointer-events-none absolute inset-0 z-10 grid grid-cols-2 overflow-hidden rounded-lg bg-cyan-500 transition-all duration-300',
-                activePeriod === 'Monthly'
-                  ? '[clip-path:inset(0_50%_0_0)]'
-                  : '[clip-path:inset(0_0_0_calc(50%-1px))]',
-              )}
-            >
-              {['Monthly', 'Annually'].map((period) => (
-                <div
-                  key={period}
-                  className={clsx(
-                    'py-2 text-center text-sm font-semibold text-white',
-                    period === 'Annually' && '-ml-px',
-                  )}
-                >
-                  {period}
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 items-start gap-x-8 gap-y-10 sm:mt-20 lg:max-w-none lg:grid-cols-3">
-          {plans.map((plan) => (
-            <Plan key={plan.name} {...plan} activePeriod={activePeriod} />
-          ))}
-        </div>
-      </Container>
-    </section>
-  )
-}
--- a/src/components/PrimaryFeatures.tsx
+++ b/src/components/PrimaryFeatures.tsx
@@ -1,599 +0,0 @@
-'use client'
-
-import { Fragment, useEffect, useId, useRef, useState } from 'react'
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
-import clsx from 'clsx'
-import {
-  type MotionProps,
-  type Variant,
-  type Variants,
-  AnimatePresence,
-  motion,
-} from 'framer-motion'
-import { useDebouncedCallback } from 'use-debounce'
-
-import { AppScreen } from '@/components/AppScreen'
-import { CircleBackground } from '@/components/CircleBackground'
-import { Container } from '@/components/Container'
-import { PhoneFrame } from '@/components/PhoneFrame'
-import {
-  DiageoLogo,
-  LaravelLogo,
-  MirageLogo,
-  ReversableLogo,
-  StatamicLogo,
-  StaticKitLogo,
-  TransistorLogo,
-  TupleLogo,
-} from '@/components/StockLogos'
-
-const MotionAppScreenHeader = motion(AppScreen.Header)
-const MotionAppScreenBody = motion(AppScreen.Body)
-
-interface CustomAnimationProps {
-  isForwards: boolean
-  changeCount: number
-}
-
-const features = [
-  {
-    name: 'Decentralized Nodes',
-    description:
-      "Mycelium operates through a network of decentralized nodes, similar to how nature's mycelium forms a decentralized network of threads. Each node acts as a connection point in the overall digital ecosystem.",
-    icon: DeviceUserIcon,
-    screen: InviteScreen,
-  },
-  {
-    name: 'Efficient Data Routing',
-    description:
-      'Mycelium optimizes data routing by choosing the most efficient path for communication. Data travels along the shortest path in terms of latency, ensuring that information reaches its destination swiftly.',
-    icon: DeviceNotificationIcon,
-    screen: StocksScreen,
-  },
-  {
-    name: 'End-to-End Encryption',
-    description:
-      'Each node in the system is identified by a unique key pair. Data between nodes is encrypted using secret keys derived from these pairs. This ensures that data remains confidential, enhancing the privacy of the network.',
-    icon: DeviceTouchIcon,
-    screen: InvestScreen,
-  },
-]
-
-function DeviceUserIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
-      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M16 23a3 3 0 100-6 3 3 0 000 6zm-1 2a4 4 0 00-4 4v1a2 2 0 002 2h6a2 2 0 002-2v-1a4 4 0 00-4-4h-2z"
-        fill="#737373"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5 4a4 4 0 014-4h14a4 4 0 014 4v24a4.002 4.002 0 01-3.01 3.877c-.535.136-.99-.325-.99-.877s.474-.98.959-1.244A2 2 0 0025 28V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 001.041 1.756C8.525 30.02 9 30.448 9 31s-.455 1.013-.99.877A4.002 4.002 0 015 28V4z"
-        fill="#A3A3A3"
-      />
-    </svg>
-  )
-}
-
-function DeviceNotificationIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
-      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
-        fill="#A3A3A3"
-      />
-      <path
-        d="M9 8a2 2 0 012-2h10a2 2 0 012 2v2a2 2 0 01-2 2H11a2 2 0 01-2-2V8z"
-        fill="#737373"
-      />
-    </svg>
-  )
-}
-
-function DeviceTouchIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  let id = useId()
-
-  return (
-    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" {...props}>
-      <defs>
-        <linearGradient
-          id={`${id}-gradient`}
-          x1={14}
-          y1={14.5}
-          x2={7}
-          y2={17}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#737373" />
-          <stop offset={1} stopColor="#D4D4D4" stopOpacity={0} />
-        </linearGradient>
-      </defs>
-      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5 4a4 4 0 014-4h14a4 4 0 014 4v13h-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 002 2h4v2H9a4 4 0 01-4-4V4z"
-        fill="#A3A3A3"
-      />
-      <path
-        d="M7 22c0-4.694 3.5-8 8-8"
-        stroke={`url(#${id}-gradient)`}
-        strokeWidth={2}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M21 20l.217-5.513a1.431 1.431 0 00-2.85-.226L17.5 21.5l-1.51-1.51a2.107 2.107 0 00-2.98 0 .024.024 0 00-.005.024l3.083 9.25A4 4 0 0019.883 32H25a4 4 0 004-4v-5a3 3 0 00-3-3h-5z"
-        fill="#A3A3A3"
-      />
-    </svg>
-  )
-}
-
-const headerAnimation: Variants = {
-  initial: { opacity: 0, transition: { duration: 0.3 } },
-  animate: { opacity: 1, transition: { duration: 0.3, delay: 0.3 } },
-  exit: { opacity: 0, transition: { duration: 0.3 } },
-}
-
-const maxZIndex = 2147483647
-
-const bodyVariantBackwards: Variant = {
-  opacity: 0.4,
-  scale: 0.8,
-  zIndex: 0,
-  filter: 'blur(4px)',
-  transition: { duration: 0.4 },
-}
-
-const bodyVariantForwards: Variant = (custom: CustomAnimationProps) => ({
-  y: '100%',
-  zIndex: maxZIndex - custom.changeCount,
-  transition: { duration: 0.4 },
-})
-
-const bodyAnimation: MotionProps = {
-  initial: 'initial',
-  animate: 'animate',
-  exit: 'exit',
-  variants: {
-    initial: (custom: CustomAnimationProps, ...props) =>
-      custom.isForwards
-        ? bodyVariantForwards(custom, ...props)
-        : bodyVariantBackwards,
-    animate: (custom: CustomAnimationProps) => ({
-      y: '0%',
-      opacity: 1,
-      scale: 1,
-      zIndex: maxZIndex / 2 - custom.changeCount,
-      filter: 'blur(0px)',
-      transition: { duration: 0.4 },
-    }),
-    exit: (custom: CustomAnimationProps, ...props) =>
-      custom.isForwards
-        ? bodyVariantBackwards
-        : bodyVariantForwards(custom, ...props),
-  },
-}
-
-type ScreenProps =
-  | {
-      animated: true
-      custom: CustomAnimationProps
-    }
-  | { animated?: false }
-
-function InviteScreen(props: ScreenProps) {
-  return (
-    <AppScreen className="w-full">
-      <MotionAppScreenHeader {...(props.animated ? headerAnimation : {})}>
-        <AppScreen.Title>Invite people</AppScreen.Title>
-        <AppScreen.Subtitle>
-          Get tips <span className="text-white">5s sooner</span> for every
-          invite.
-        </AppScreen.Subtitle>
-      </MotionAppScreenHeader>
-      <MotionAppScreenBody
-        {...(props.animated ? { ...bodyAnimation, custom: props.custom } : {})}
-      >
-        <div className="px-4 py-6">
-          <div className="space-y-6">
-            {[
-              { label: 'Full name', value: 'Albert H. Wiggin' },
-              { label: 'Email address', value: 'awiggin@chase.com' },
-            ].map((field) => (
-              <div key={field.label}>
-                <div className="text-sm text-gray-500">{field.label}</div>
-                <div className="mt-2 border-b border-gray-200 pb-2 text-sm text-gray-900">
-                  {field.value}
-                </div>
-              </div>
-            ))}
-          </div>
-          <div className="mt-6 rounded-lg bg-cyan-500 px-3 py-2 text-center text-sm font-semibold text-white">
-            Invite person
-          </div>
-        </div>
-      </MotionAppScreenBody>
-    </AppScreen>
-  )
-}
-
-function StocksScreen(props: ScreenProps) {
-  return (
-    <AppScreen className="w-full">
-      <MotionAppScreenHeader {...(props.animated ? headerAnimation : {})}>
-        <AppScreen.Title>Stocks</AppScreen.Title>
-        <AppScreen.Subtitle>March 9, 2022</AppScreen.Subtitle>
-      </MotionAppScreenHeader>
-      <MotionAppScreenBody
-        {...(props.animated ? { ...bodyAnimation, custom: props.custom } : {})}
-      >
-        <div className="divide-y divide-gray-100">
-          {[
-            {
-              name: 'Laravel',
-              price: '4,098.01',
-              change: '+4.98%',
-              color: '#F9322C',
-              logo: LaravelLogo,
-            },
-            {
-              name: 'Tuple',
-              price: '5,451.10',
-              change: '-3.38%',
-              color: '#5A67D8',
-              logo: TupleLogo,
-            },
-            {
-              name: 'Transistor',
-              price: '4,098.41',
-              change: '+6.25%',
-              color: '#2A5B94',
-              logo: TransistorLogo,
-            },
-            {
-              name: 'Diageo',
-              price: '250.65',
-              change: '+1.25%',
-              color: '#3320A7',
-              logo: DiageoLogo,
-            },
-            {
-              name: 'StaticKit',
-              price: '250.65',
-              change: '-3.38%',
-              color: '#2A3034',
-              logo: StaticKitLogo,
-            },
-            {
-              name: 'Statamic',
-              price: '5,040.85',
-              change: '-3.11%',
-              color: '#0EA5E9',
-              logo: StatamicLogo,
-            },
-            {
-              name: 'Mirage',
-              price: '140.44',
-              change: '+9.09%',
-              color: '#16A34A',
-              logo: MirageLogo,
-            },
-            {
-              name: 'Reversable',
-              price: '550.60',
-              change: '-1.25%',
-              color: '#8D8D8D',
-              logo: ReversableLogo,
-            },
-          ].map((stock) => (
-            <div key={stock.name} className="flex items-center gap-4 px-4 py-3">
-              <div
-                className="flex-none rounded-full"
-                style={{ backgroundColor: stock.color }}
-              >
-                <stock.logo className="h-10 w-10" />
-              </div>
-              <div className="flex-auto text-sm text-gray-900">
-                {stock.name}
-              </div>
-              <div className="flex-none text-right">
-                <div className="text-sm font-medium text-gray-900">
-                  {stock.price}
-                </div>
-                <div
-                  className={clsx(
-                    'text-xs/5',
-                    stock.change.startsWith('+')
-                      ? 'text-cyan-500'
-                      : 'text-gray-500',
-                  )}
-                >
-                  {stock.change}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </MotionAppScreenBody>
-    </AppScreen>
-  )
-}
-
-function InvestScreen(props: ScreenProps) {
-  return (
-    <AppScreen className="w-full">
-      <MotionAppScreenHeader {...(props.animated ? headerAnimation : {})}>
-        <AppScreen.Title>Buy $LA</AppScreen.Title>
-        <AppScreen.Subtitle>
-          <span className="text-white">$34.28</span> per share
-        </AppScreen.Subtitle>
-      </MotionAppScreenHeader>
-      <MotionAppScreenBody
-        {...(props.animated ? { ...bodyAnimation, custom: props.custom } : {})}
-      >
-        <div className="px-4 py-6">
-          <div className="space-y-4">
-            {[
-              { label: 'Number of shares', value: '100' },
-              {
-                label: 'Current market price',
-                value: (
-                  <div className="flex">
-                    $34.28
-                    <svg viewBox="0 0 24 24" fill="none" className="h-6 w-6">
-                      <path
-                        d="M17 15V7H9M17 7 7 17"
-                        stroke="#06B6D4"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
-                  </div>
-                ),
-              },
-              { label: 'Estimated cost', value: '$3,428.00' },
-            ].map((item) => (
-              <div
-                key={item.label}
-                className="flex justify-between border-b border-gray-100 pb-4"
-              >
-                <div className="text-sm text-gray-500">{item.label}</div>
-                <div className="text-sm font-semibold text-gray-900">
-                  {item.value}
-                </div>
-              </div>
-            ))}
-            <div className="rounded-lg bg-cyan-500 px-3 py-2 text-center text-sm font-semibold text-white">
-              Buy shares
-            </div>
-          </div>
-        </div>
-      </MotionAppScreenBody>
-    </AppScreen>
-  )
-}
-
-function usePrevious<T>(value: T) {
-  let ref = useRef<T>()
-
-  useEffect(() => {
-    ref.current = value
-  }, [value])
-
-  return ref.current
-}
-
-function FeaturesDesktop() {
-  let [changeCount, setChangeCount] = useState(0)
-  let [selectedIndex, setSelectedIndex] = useState(0)
-  let prevIndex = usePrevious(selectedIndex)
-  let isForwards = prevIndex === undefined ? true : selectedIndex > prevIndex
-
-  let onChange = useDebouncedCallback(
-    (selectedIndex) => {
-      setSelectedIndex(selectedIndex)
-      setChangeCount((changeCount) => changeCount + 1)
-    },
-    100,
-    { leading: true },
-  )
-
-  return (
-    <TabGroup
-      className="grid grid-cols-12 items-center gap-8 lg:gap-16 xl:gap-24"
-      selectedIndex={selectedIndex}
-      onChange={onChange}
-      vertical
-    >
-      <TabList className="relative z-10 order-last col-span-6 space-y-6">
-        {features.map((feature, featureIndex) => (
-          <div
-            key={feature.name}
-            className="relative rounded-2xl transition-colors hover:bg-gray-800/30"
-          >
-            {featureIndex === selectedIndex && (
-              <motion.div
-                layoutId="activeBackground"
-                className="absolute inset-0 bg-gray-800"
-                initial={{ borderRadius: 16 }}
-              />
-            )}
-            <div className="relative z-10 p-8">
-              <feature.icon className="h-8 w-8" />
-              <h3 className="mt-6 text-lg font-semibold text-white">
-                <Tab className="text-left data-selected:not-data-focus:outline-hidden">
-                  <span className="absolute inset-0 rounded-2xl" />
-                  {feature.name}
-                </Tab>
-              </h3>
-              <p className="mt-2 text-sm text-gray-400">
-                {feature.description}
-              </p>
-            </div>
-          </div>
-        ))}
-      </TabList>
-      <div className="relative col-span-6">
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-          <CircleBackground color="#13B5C8" className="animate-spin-slower" />
-        </div>
-        <PhoneFrame className="z-10 mx-auto w-full max-w-[366px]">
-          <TabPanels as={Fragment}>
-            <AnimatePresence
-              initial={false}
-              custom={{ isForwards, changeCount }}
-            >
-              {features.map((feature, featureIndex) =>
-                selectedIndex === featureIndex ? (
-                  <TabPanel
-                    static
-                    key={feature.name + changeCount}
-                    className="col-start-1 row-start-1 flex focus:outline-offset-32 data-selected:not-data-focus:outline-hidden"
-                  >
-                    <feature.screen
-                      animated
-                      custom={{ isForwards, changeCount }}
-                    />
-                  </TabPanel>
-                ) : null,
-              )}
-            </AnimatePresence>
-          </TabPanels>
-        </PhoneFrame>
-      </div>
-    </TabGroup>
-  )
-}
-
-function FeaturesMobile() {
-  let [activeIndex, setActiveIndex] = useState(0)
-  let slideContainerRef = useRef<React.ElementRef<'div'>>(null)
-  let slideRefs = useRef<Array<React.ElementRef<'div'>>>([])
-
-  useEffect(() => {
-    let observer = new window.IntersectionObserver(
-      (entries) => {
-        for (let entry of entries) {
-          if (entry.isIntersecting && entry.target instanceof HTMLDivElement) {
-            setActiveIndex(slideRefs.current.indexOf(entry.target))
-            break
-          }
-        }
-      },
-      {
-        root: slideContainerRef.current,
-        threshold: 0.6,
-      },
-    )
-
-    for (let slide of slideRefs.current) {
-      if (slide) {
-        observer.observe(slide)
-      }
-    }
-
-    return () => {
-      observer.disconnect()
-    }
-  }, [slideContainerRef, slideRefs])
-
-  return (
-    <>
-      <div
-        ref={slideContainerRef}
-        className="-mb-4 flex snap-x snap-mandatory -space-x-4 overflow-x-auto overscroll-x-contain scroll-smooth pb-4 [scrollbar-width:none] sm:-space-x-6 [&::-webkit-scrollbar]:hidden"
-      >
-        {features.map((feature, featureIndex) => (
-          <div
-            key={featureIndex}
-            ref={(ref) => {
-              if (ref) {
-                slideRefs.current[featureIndex] = ref
-              }
-            }}
-            className="w-full flex-none snap-center px-4 sm:px-6"
-          >
-            <div className="relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6">
-              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-                <CircleBackground
-                  color="#13B5C8"
-                  className={featureIndex % 2 === 1 ? 'rotate-180' : undefined}
-                />
-              </div>
-              <PhoneFrame className="relative mx-auto w-full max-w-[366px]">
-                <feature.screen />
-              </PhoneFrame>
-              <div className="absolute inset-x-0 bottom-0 bg-gray-800/95 p-6 backdrop-blur-sm sm:p-10">
-                <feature.icon className="h-8 w-8" />
-                <h3 className="mt-6 text-sm font-semibold text-white sm:text-lg">
-                  {feature.name}
-                </h3>
-                <p className="mt-2 text-sm text-gray-400">
-                  {feature.description}
-                </p>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-      <div className="mt-6 flex justify-center gap-3">
-        {features.map((_, featureIndex) => (
-          <button
-            type="button"
-            key={featureIndex}
-            className={clsx(
-              'relative h-0.5 w-4 rounded-full',
-              featureIndex === activeIndex ? 'bg-gray-300' : 'bg-gray-500',
-            )}
-            aria-label={`Go to slide ${featureIndex + 1}`}
-            onClick={() => {
-              slideRefs.current[featureIndex].scrollIntoView({
-                block: 'nearest',
-                inline: 'nearest',
-              })
-            }}
-          >
-            <span className="absolute -inset-x-1.5 -inset-y-3" />
-          </button>
-        ))}
-      </div>
-    </>
-  )
-}
-
-export function PrimaryFeatures() {
-  return (
-    <section
-      id="features"
-      aria-label="Features for investing all your money"
-      className="bg-gray-900 py-20 sm:py-32"
-    >
-      <Container>
-        <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
-          <h2 className="text-3xl font-medium tracking-tight text-white">
-            How Mycelium Operates
-          </h2>
-          <p className="mt-6 text-lg text-gray-300">
-            Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks.
-          </p>
-        </div>
-      </Container>
-      <div className="mt-16 md:hidden">
-        <FeaturesMobile />
-      </div>
-      <Container className="hidden md:mt-20 md:block">
-        <FeaturesDesktop />
-      </Container>
-    </section>
-  )
-}
--- a/src/components/SecondaryFeatures.tsx
+++ b/src/components/SecondaryFeatures.tsx
@@ -1,225 +0,0 @@
-import { useId } from 'react'
-
-import { Container } from '@/components/Container'
-
-const features = [
-  {
-    name: 'Quantum Safe Storage Functionality',
-    description:
-      "Mycelium's quantum safe storage enables flexible, scalable, and efficient data distribution across a decentralized network, ensuring redundancy and security.",
-    icon: DeviceArrowIcon,
-  },
-  {
-    name: 'Entry and Exit Points for AI Workloads',
-    description:
-      'Seamlessly connect AI applications to Mycelium, providing optimized and secured data pipelines for training, inference, and real-time processing.',
-    icon: DeviceCardsIcon,
-  },
-  {
-    name: 'Data Storage and Retrieval Mechanisms',
-    description:
-      'Users can choose between storing data locally for quick access or utilizing the distributed grid for enhanced scalability and resilience.',
-    icon: DeviceClockIcon,
-  },
-  {
-    name: 'Integrated Name Services (DNS)',
-    description:
-      'The Integrated DNS system efficiently finds the shortest path between users and websites, automatically balancing loads and identifying alternative routes in case of internet issues.',
-    icon: DeviceListIcon,
-  },
-  {
-    name: 'Frontend/Backend Integration',
-    description:
-      'Mycelium provides seamless integration with existing applications, enabling developers to leverage decentralized storage across both frontend and backend architectures.',
-    icon: DeviceLockIcon,
-  },
-  {
-    name: 'CDN (Content Delivery Network)',
-    description:
-      'Mycelium accelerates data distribution by acting as a decentralized CDN, ensuring fast, secure, and efficient content delivery across global nodes with minimal latency.',
-    icon: DeviceChartIcon,
-  },
-]
-
-function DeviceArrowIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
-        fill="#737373"
-      />
-      <path
-        d="M12 25l8-8m0 0h-6m6 0v6"
-        stroke="#171717"
-        strokeWidth={2}
-        strokeLinecap="round"
-      />
-      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
-    </svg>
-  )
-}
-
-function DeviceCardsIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  let id = useId()
-
-  return (
-    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
-        fill="#737373"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M9 13a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H10a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H10a1 1 0 01-1-1v-2zm1 5a1 1 0 00-1 1v2a1 1 0 001 1h12a1 1 0 001-1v-2a1 1 0 00-1-1H10z"
-        fill={`url(#${id}-gradient)`}
-      />
-      <rect x={9} y={6} width={14} height={4} rx={1} fill="#171717" />
-      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
-      <defs>
-        <linearGradient
-          id={`${id}-gradient`}
-          x1={16}
-          y1={12}
-          x2={16}
-          y2={28}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#737373" />
-          <stop offset={1} stopColor="#737373" stopOpacity={0} />
-        </linearGradient>
-      </defs>
-    </svg>
-  )
-}
-
-function DeviceClockIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
-      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5 4a4 4 0 014-4h14a4 4 0 014 4v10h-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 002 2h5v2H9a4 4 0 01-4-4V4z"
-        fill="#737373"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M24 32a8 8 0 100-16 8 8 0 000 16zm1-8.414V19h-2v5.414l4 4L28.414 27 25 23.586z"
-        fill="#171717"
-      />
-    </svg>
-  )
-}
-
-function DeviceListIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
-        fill="#737373"
-      />
-      <circle cx={11} cy={14} r={2} fill="#171717" />
-      <circle cx={11} cy={20} r={2} fill="#171717" />
-      <circle cx={11} cy={26} r={2} fill="#171717" />
-      <path
-        d="M16 14h6M16 20h6M16 26h6"
-        stroke="#737373"
-        strokeWidth={2}
-        strokeLinecap="square"
-      />
-      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
-    </svg>
-  )
-}
-
-function DeviceLockIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
-      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5 4a4 4 0 014-4h14a4 4 0 014 4v10h-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 002 2h5v2H9a4 4 0 01-4-4V4z"
-        fill="#737373"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M18 19.5a3.5 3.5 0 117 0V22a2 2 0 012 2v6a2 2 0 01-2 2h-7a2 2 0 01-2-2v-6a2 2 0 012-2v-2.5zm2 2.5h3v-2.5a1.5 1.5 0 00-3 0V22z"
-        fill="#171717"
-      />
-    </svg>
-  )
-}
-
-function DeviceChartIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
-        fill="#737373"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M23 13.838V26a2 2 0 01-2 2H11a2 2 0 01-2-2V15.65l2.57 3.212a1 1 0 001.38.175L15.4 17.2a1 1 0 011.494.353l1.841 3.681c.399.797 1.562.714 1.843-.13L23 13.837z"
-        fill="#171717"
-      />
-      <path
-        d="M10 12h12"
-        stroke="#737373"
-        strokeWidth={2}
-        strokeLinecap="square"
-      />
-      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
-    </svg>
-  )
-}
-
-export function SecondaryFeatures() {
-  return (
-    <section
-      id="secondary-features"
-      aria-label="Features for building a portfolio"
-      className="py-20 sm:py-32"
-    >
-      <Container>
-        <div className="mx-auto max-w-4xl sm:text-center">
-          <h2 className="text-3xl font-medium tracking-tight text-gray-900">
-            Coming Soon: The Future of Mycelium
-          </h2>
-          <p className="mt-6 text-lg text-gray-600">
-            Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
-          </p>
-        </div>
-        <ul
-          role="list"
-          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 text-sm sm:mt-20 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-3"
-        >
-          {features.map((feature) => (
-            <li
-              key={feature.name}
-              className="rounded-2xl border border-gray-200 p-8"
-            >
-              <feature.icon className="h-8 w-8" />
-              <h3 className="mt-6 font-semibold text-gray-900">
-                {feature.name}
-              </h3>
-              <p className="mt-2 text-gray-700">{feature.description}</p>
-            </li>
-          ))}
-        </ul>
-      </Container>
-    </section>
-  )
-}
--- a/src/components/StackSection.tsx
+++ b/src/components/StackSection.tsx
@@ -1,63 +1,34 @@
 "use client";

 import { StackedCubes } from "@/components/ui/StackedCubes";
-import { Button } from "@/components/Button";
-import { motion, useInView } from 'framer-motion';
 import { H2, P } from '@/components/Texts';
-import { useRef } from "react";
+import { FadeIn } from "./FadeIn";

 export function StackSectionPreview() {
-  const ref = useRef(null);
-  const isInView = useInView(ref);

  return (
-    <section ref={ref} className="w-full h-screen bg-transparent lg:px-0 pt-24 pb-12 px-6 relative">
-    {/* Gradient Blob Component */}
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={isInView ? { opacity: 0.4 } : { opacity: 0 }}
-        transition={{ duration: 1, delay: 0.1 }}
-        className="absolute w-[400px] h-[200px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] rounded-full blur-[150px] bottom-[200px] left-[-150px] z-0"
-      />
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={isInView ? { opacity: 0.5 } : { opacity: 0 }}
-        transition={{ duration: 1, delay: 0.15 }}
-        className="absolute w-[200px] h-[100px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] rounded-full blur-[150px] top-[200px] right-[-150px] z-0"
-      />
+        <section className="w-full bg-transparent lg:px-0 py-12 lg:py-24 px-6 relative">
      <div className="mx-auto max-w-7xl">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-16 items-center lg:items-start">
          {/* Left Column - Text (1/3 width) */}
-          <div className="text-left lg:text-left lg:col-span-1 order-1 lg:order-1">
-            <motion.div
-              initial={{ opacity: 0, y: 30 }}
-              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
-              transition={{ duration: 0.8, delay: 0.2 }}
-            >
+                    <div className="text-center lg:text-left lg:col-span-1 order-1 lg:order-1">
+            <FadeIn>
              <H2 className="">
                The Mycelium Stack
              </H2>
-            </motion.div>
+            </FadeIn>
            
-            <motion.div
-              initial={{ opacity: 0, y: 30 }}
-              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
-              transition={{ duration: 0.8, delay: 0.6 }}
-            >
-              <P className="mx-auto mt-8 max-w-3xl" color="custom">
+            <FadeIn>
+              <P className="mx-auto mt-8 max-w-3xl" color="light">
                Built with Mycelium technology, our AI infrastructure ensures unbreakable networks, complete data sovereignty, ultra-secure agent-human communication, and unhackable data storage systems.
              </P>
-            </motion.div>
+            </FadeIn>
          </div>
          {/* Right Column - Stacked Cubes (2/3 width) */}
-          <div className="lg:col-span-2 flex items-center justify-center lg:justify-start order-2 lg:order-2">
-            <motion.div
-              initial={{ opacity: 0, y: 30 }}
-              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
-              transition={{ duration: 0.8, delay: 0.3 }}
-            >
+          <div className="lg:col-span-2 flex items-center justify-center lg:justify-start order-2 lg:order-2 mt-8 lg:mt-0">
+            <FadeIn>
              <StackedCubes />
-            </motion.div>
+            </FadeIn>
          </div>
        </div>
      </div>
--- a/src/components/Steps.tsx
+++ b/src/components/Steps.tsx
@@ -30,18 +30,19 @@ export function Steps() {
  const isInView = useInView(ref, { once: true });

  return (
-    <section id="benefits" ref={ref} className="bg-white pt-0 pb-24 dark:bg-gray-900">
-      <div className="mx-auto max-w-7xl px-6 lg:px-0">
+    <section id="benefits" ref={ref} className="relative bg-cover bg-center py-32 -top-20 text-white" style={{ backgroundImage: "url('/images/deployment.webp')" }}>
+      <div className="absolute inset-0 bg-black/60" />
+      <div className="relative px-6 lg:px-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
          transition={{ duration: 0.8, delay: 0.1 }}
          className="mx-auto max-w-5xl lg:mx-0"
        >
-          <H2 className="text-3xl font-medium tracking-tight">
+          <H2 className="text-3xl font-medium tracking-tight" color="light">
            Deploy Scalable LLMs and AI Agents in Seconds
          </H2>
-          <P className="mt-6 text-lg" color="custom">
+          <P className="mt-6" color="light">
            Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control.
          </P>
        </motion.div>
@@ -49,7 +50,7 @@ export function Steps() {
          initial={{ opacity: 0 }}
          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
          transition={{ duration: 0.5, delay: 0.2, staggerChildren: 0.2 }}
-          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base/7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3"
+          className="mx-auto lg:mt-12 mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-8 text-base/7 sm:grid-cols-2 sm:gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-3"
        >
          {features.map((feature, index) => (
            <motion.li
@@ -57,11 +58,11 @@ export function Steps() {
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
              transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
-              className="rounded-2xl border border-gray-200 p-8 dark:border-gray-700"
+              className="rounded-2xl border border-white/20 bg-black/20 lg:py-8 lg:px-8 py-6 px-6 backdrop-blur-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-white/40 hover:bg-black/40"
            >
-              <feature.icon className="h-8 w-8 mb-4 text-[#2F3178]" />
-              <CT as="span" className="font-semibold">{feature.name}</CT>
-              <CP className="mt-2 text-sm" color="custom">{feature.description}</CP>
+              <feature.icon className="h-8 w-8 mb-4 text-white" />
+              <CT as="span" className="font-semibold" color="light">{feature.name}</CT>
+              <CP className="mt-2 text-sm" color="light">{feature.description}</CP>
            </motion.li>
          ))}
        </motion.ul>
--- a/src/components/StockLogos.tsx
+++ b/src/components/StockLogos.tsx
@@ -1,100 +0,0 @@
-export function LaravelLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M29.982 14.509c.002.005.006.01.007.015a.316.316 0 0 1 .011.082v4.293a.304.304 0 0 1-.043.156.32.32 0 0 1-.119.115l-3.709 2.075v4.112a.305.305 0 0 1-.043.157.32.32 0 0 1-.119.114l-7.742 4.33a.286.286 0 0 1-.056.023l-.022.008a.33.33 0 0 1-.18-.005l-.01-.005c-.018-.006-.036-.011-.053-.021l-7.742-4.33a.32.32 0 0 1-.119-.115.304.304 0 0 1-.043-.156v-12.88a.33.33 0 0 1 .01-.08c.004-.01.01-.018.012-.027l.01-.027a.158.158 0 0 1 .011-.022c.006-.01.015-.018.023-.028.009-.012.017-.025.028-.036.01-.01.02-.016.031-.024.012-.009.023-.019.036-.026l3.871-2.165a.33.33 0 0 1 .322 0l3.872 2.165c.013.007.024.017.036.026l.01.008c.008.005.015.01.021.016a.175.175 0 0 1 .021.025l.008.011.022.028c.008.015.014.032.02.049l.006.01.006.016a.307.307 0 0 1 .01.082v8.044l3.227-1.804v-4.112c0-.028.004-.055.011-.082.003-.01.008-.017.011-.026l.004-.01a.228.228 0 0 1 .017-.039.132.132 0 0 1 .013-.018.203.203 0 0 0 .01-.01c.009-.012.017-.025.028-.036l.015-.013.016-.01.019-.016a.126.126 0 0 1 .017-.011l3.871-2.165a.33.33 0 0 1 .322 0l3.871 2.165c.014.007.024.018.036.026l.012.008.02.016a.162.162 0 0 1 .02.026l.009.01.008.01c.005.006.01.012.013.018a.254.254 0 0 1 .018.04l.003.009.005.01Zm-15.138 8.717 3.22 1.77 7.094-3.933-3.223-1.803-7.091 3.966Zm10.64-2.704v-3.57l-3.226-1.804v3.57l3.225 1.804Zm3.547-5.916-3.225-1.803-3.224 1.803 3.224 1.803 3.225-1.803Zm-14.515.218v7.863l3.226-1.805V13.02l-3.226 1.804Zm2.902-2.346-3.225-1.803-3.224 1.803 3.224 1.803 3.225-1.803Zm-3.547 2.347-3.226-1.805v12.155l7.098 3.97V25.54l-3.708-2.038h-.001l-.002-.002c-.013-.008-.024-.018-.035-.027a.28.28 0 0 0-.011-.007.133.133 0 0 1-.02-.015v-.001l-.019-.022a.452.452 0 0 0-.008-.011l-.016-.02a.086.086 0 0 1-.008-.01v-.002a.123.123 0 0 1-.013-.027l-.005-.012-.008-.016a.115.115 0 0 1-.007-.02.18.18 0 0 1-.005-.033l-.002-.013a.293.293 0 0 0-.002-.013l-.002-.022v-8.405Zm4.516 10.715v3.605l7.096-3.969v-3.572l-7.096 3.935Zm7.742-5.019 3.226-1.804v-3.57l-3.226 1.805v3.57Z"
-      />
-    </svg>
-  )
-}
-
-export function TupleLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M22.5 8 12 11.692v12l3.5 1.231v3.385L26 32V12.615l-3.5 1.231V8Zm-5.833 17.334 5.833 2.05v-12.24l2.333-.82v15.968l-8.166-2.87v-2.088Z"
-      />
-    </svg>
-  )
-}
-
-export function TransistorLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" {...props}>
-      <path d="M20 32c-6.617 0-12-5.383-12-12S13.383 8 20 8s12 5.383 12 12-5.383 12-12 12Zm0-22.4C14.267 9.6 9.6 14.266 9.6 20S14.267 30.4 20 30.4c5.734 0 10.4-4.666 10.4-10.4S25.734 9.6 20 9.6Z" />
-      <path d="M19.434 27.749c.15.15.354.234.566.235.433 0 .8-.368.8-.8V12.815a.8.8 0 0 0-1.6 0v14.368c0 .212.084.415.234.565ZM12.833 20.8h3.833a.802.802 0 0 0 .802-.8.8.8 0 0 0-.801-.8h-3.834c-.45 0-.8.35-.8.8a.8.8 0 0 0 .8.8ZM23.333 20.8h3.85c.433 0 .783-.35.783-.8a.799.799 0 0 0-.8-.8h-3.833c-.45 0-.8.35-.8.8a.8.8 0 0 0 .8.8Z" />
-    </svg>
-  )
-}
-
-export function DiageoLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg
-      viewBox="0 0 40 40"
-      fill="#fff"
-      stroke="#fff"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-      {...props}
-    >
-      <path d="M22.16 19 26 13H14l3.84 6" fill="none" />
-      <path d="M25 24a5 5 0 1 1-10 0 5 5 0 0 1 10 0Z" />
-    </svg>
-  )
-}
-
-export function StaticKitLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" {...props}>
-      <path d="m26.068 10.555-11.49 13.089L12 21.089 23.489 8l2.58 2.555ZM28 18.91 16.512 32l-2.579-2.555 11.489-13.089L28 18.911Z" />
-    </svg>
-  )
-}
-
-export function StatamicLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M30.177 27.293c0 1.921-.644 2.707-2.398 2.707H12.22c-1.754 0-2.397-.786-2.397-2.707v-3.741c0-1.805-.837-2.824-1.642-3.291a.385.385 0 0 1-.133-.143.403.403 0 0 1 .133-.526c.837-.551 1.642-1.704 1.642-3.241v-3.677c0-2.072.547-2.674 2.3-2.674h15.754c1.754 0 2.3.602 2.3 2.674v3.675c0 1.537.805 2.69 1.641 3.24.243.168.243.52 0 .67-.804.484-1.64 1.503-1.64 3.29v3.743h-.001Zm-14.739-2.455c1.271 1.152 2.64 1.737 4.522 1.737 2.96 0 4.891-1.537 4.891-4.026 0-2.637-2.3-3.31-4.17-3.856-1.282-.375-2.363-.691-2.363-1.54 0-.551.564-1.086 1.513-1.086.917 0 1.674.2 2.397.584.242.117.467.2.676.2.306 0 .547-.15.756-.45l.29-.451a.955.955 0 0 0 .161-.55c0-.336-.161-.67-.402-.837-.966-.635-2.27-1.17-4.039-1.17-2.51 0-4.44 1.37-4.44 3.826 0 2.746 2.349 3.443 4.23 4h.001c1.255.372 2.3.681 2.3 1.497 0 .785-.707 1.17-1.592 1.17a5.19 5.19 0 0 1-2.992-.92c-.274-.183-.532-.3-.805-.3-.242 0-.451.117-.644.368l-.387.517a.888.888 0 0 0-.192.585c0 .25.08.501.29.702Z"
-      />
-    </svg>
-  )
-}
-
-export function MirageLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M24.05 9c2.307 0 4.177 1.885 4.177 4.21a4.21 4.21 0 0 1-2.762 3.964l3.366 6.057h2.304c.355 0 .642.29.642.647a.645.645 0 0 1-.642.647H7.142a.645.645 0 0 1-.642-.647c0-.358.288-.647.643-.647h2.304l5.994-10.747a.641.641 0 0 1 1.097-.036l3.444 5.32 1.071-1.627a4.214 4.214 0 0 1-1.178-2.93c0-2.326 1.87-4.211 4.176-4.211Zm-3.304 9.948 2.772 4.283h3.84l-4.317-7.769-2.295 3.486Zm1.239 4.283-5.944-9.183-5.121 9.183h11.065Zm5.038-10.02a2.995 2.995 0 0 1-2.159 2.883l-1.216-2.19a.64.64 0 0 0-1.096-.04l-.811 1.232a3 3 0 0 1-.663-1.885c0-1.655 1.332-2.997 2.973-2.997 1.641 0 2.972 1.341 2.972 2.997Z"
-      />
-      <path d="M12.069 26.469c-.354 0-.641.289-.641.646 0 .358.287.646.64.646h14.139c.354 0 .641-.29.641-.646a.644.644 0 0 0-.64-.646h-14.14Zm4.928 3.236a.645.645 0 0 0-.642.648c0 .357.288.647.642.647h4.282c.355 0 .643-.29.643-.647a.645.645 0 0 0-.643-.648h-4.282Z" />
-    </svg>
-  )
-}
-
-export function ReversableLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg
-      viewBox="0 0 40 40"
-      fill="none"
-      stroke="#fff"
-      strokeWidth="2"
-      strokeLinecap="square"
-      strokeLinejoin="round"
-      aria-hidden="true"
-      {...props}
-    >
-      <path d="M15 26v-5.25m0 0V16a2 2 0 0 1 2-2h4.21c.968 0 1.37 1.24.587 1.809L15 20.75Zm0 0L25 26" />
-    </svg>
-  )
-}
--- a/src/components/Texts.tsx
+++ b/src/components/Texts.tsx
@@ -4,9 +4,10 @@ import React from 'react'
 import { cn } from '@/lib/utils'

 const colorVariants = {
-  primary: 'text-[#2F3178]',
-  secondary: 'text-gray-600',
-  custom: 'text-[#1c1c49]',
+  primary: 'text-[#fffff]',
+  secondary: 'text-gray-200',
+  custom: 'text-[#015eff]',
+  light: '[#fcfcfc]',
 } as const

 type TextOwnProps = {
@@ -51,10 +52,10 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
 // Exports
 export const H1 = createTextComponent('h1', 'text-5xl font-medium tracking-tight text-balance lg:text-8xl')
 export const PL = createTextComponent('p', 'text-2xl font-medium text-pretty leading-[1.2] lg:text-3xl')
-export const H2 = createTextComponent('h2', 'text-4xl font-medium text-pretty lg:text-5xl')
-export const P  = createTextComponent('p', 'text-xl font-normal text-pretty lg:text-2xl')
-export const H3 = createTextComponent('h3', 'text-3xl lg:text-4xl font-medium')
-export const H4 = createTextComponent('h4', 'text-2xl lg:text-3xl font-semibold leading-tight')
-export const CT = createTextComponent('span', 'text-base lg:text-xl font-semibold text-center')
-export const CP = createTextComponent('p', 'text-sm lg:text-base leading-relaxed font-light')
-export const NL = createTextComponent('span', 'text-lg font-semibold leading-6')
+export const H2 = createTextComponent('h2', 'text-3xl font-medium text-pretty lg:text-4xl')
+export const P  = createTextComponent('p', 'text-lg font-normal text-pretty leading-snug lg:text-xl lg:leading-normal')
+export const H3 = createTextComponent('h3', 'text-2xl lg:text-3xl font-medium')
+export const H4 = createTextComponent('h4', 'text-xl lg:text-2xl font-semibold leading-[1.15]')
+export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold text-center')
+export const CP = createTextComponent('p', 'text-sm lg:text-base leading-[1.525] font-light')
+export const NL = createTextComponent('span', 'text-lg font-semibold leading-[1.23]')
--- a/src/components/UseCases.tsx
+++ b/src/components/UseCases.tsx
@@ -22,129 +22,75 @@ interface Review {
  body: string
 }

-const reviews: Array<Review> = [
-  {
-    title: 'FungiStor: Long-Term AI Memory',
-    body: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.',
-  },
-  {
-    title: 'HeroDB: Active AI Memory',
-    body: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.',
-  },
-  {
-    title: 'MOS Sandboxes: Secure Agent Workspaces',
-    body: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.',
-  },
-  {
-    title: 'Mycelium Mesh: Secure Communication Network',
-    body: 'Peer-to-peer overlay network with end-to-end encryption. Self-healing shortest-path routing creates resilient agentic communication.',
-  },
-  {
-    title: 'Deterministic Deployment: Verifiable Code Execution',
-    body: 'Cryptographic guarantee system ensuring deployed code matches specifications. Prevents supply-chain attacks with immutable trails.',
-  },
-  {
-    title: 'Agent Coordination: Sovereign Workflow Management',
-    body: 'User-centric orchestration where HERO agents coordinate worker fleets. Planetary-scale coordination with instant spawning.',
-  },
-  {
-    title: 'Universal Interface Layer: AI Service Gateway',
-    body: 'Unified broker connecting agents to LLMs, APIs, and services. Integrated micropayments simplify development.',
-  },
-  {
-    title: 'Semantic Index & Search: Navigable Knowledge Fabric',
-    body: 'Transforms data chaos into unified knowledge graphs. Goes beyond keywords to understand meaning and context.',
-  },
+const reviews: Review[] = [
+  { title: 'FungiStor: Long-Term AI Memory', body: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.' },
+  { title: 'HeroDB: Active AI Memory', body: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.' },
+  { title: 'MOS Sandboxes: Secure Agent Workspaces', body: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.' },
+  { title: 'Mycelium Mesh: Secure Communication Network', body: 'Peer-to-peer overlay network with end-to-end encryption. Self-healing shortest-path routing creates resilient agentic communication.' },
+  { title: 'Deterministic Deployment: Verifiable Code Execution', body: 'Cryptographic guarantee system ensuring deployed code matches specifications. Prevents supply-chain attacks with immutable trails.' },
+  { title: 'Agent Coordination: Sovereign Workflow Management', body: 'User-centric orchestration where HERO agents coordinate worker fleets. Planetary-scale coordination with instant spawning.' },
+  { title: 'Universal Interface Layer: AI Service Gateway', body: 'Unified broker connecting agents to LLMs, APIs, and services. Integrated micropayments simplify development.' },
+  { title: 'Semantic Index & Search: Navigable Knowledge Fabric', body: 'Transforms data chaos into unified knowledge graphs. Goes beyond keywords to understand meaning and context.' },
 ]

-
 function getReviewIcon(title: string) {
-  if (title.startsWith('FungiStor')) return ArchiveBoxIcon;
-  if (title.startsWith('HeroDB')) return CpuChipIcon;
-  if (title.startsWith('MOS Sandboxes')) return CodeBracketIcon;
-  if (title.startsWith('Mycelium Mesh')) return ShareIcon;
-  if (title.startsWith('Deterministic Deployment')) return CheckBadgeIcon;
-  if (title.startsWith('Agent Coordination')) return UserGroupIcon;
-  if (title.startsWith('Universal Interface Layer')) return GlobeAltIcon;
-  if (title.startsWith('Semantic Index & Search')) return MagnifyingGlassIcon;
-  return GlobeAltIcon; // default
+  if (title.startsWith('FungiStor')) return ArchiveBoxIcon
+  if (title.startsWith('HeroDB')) return CpuChipIcon
+  if (title.startsWith('MOS Sandboxes')) return CodeBracketIcon
+  if (title.startsWith('Mycelium Mesh')) return ShareIcon
+  if (title.startsWith('Deterministic Deployment')) return CheckBadgeIcon
+  if (title.startsWith('Agent Coordination')) return UserGroupIcon
+  if (title.startsWith('Universal Interface Layer')) return GlobeAltIcon
+  if (title.startsWith('Semantic Index & Search')) return MagnifyingGlassIcon
+  return GlobeAltIcon
 }

-function Review({
-  title,
-  body,
-  className,
-  ...props
-}: Omit<React.ComponentPropsWithoutRef<'figure'>, keyof Review> & Review) {
-  let animationDelay = useMemo(() => {
-    let possibleAnimationDelays = ['0s', '0.1s', '0.2s', '0.3s', '0.4s', '0.5s']
-    return possibleAnimationDelays[
-      Math.floor(Math.random() * possibleAnimationDelays.length)
-    ]
+function Review({ title, body, className, ...props }: Omit<React.ComponentPropsWithoutRef<'figure'>, keyof Review> & Review) {
+  const animationDelay = useMemo(() => {
+    const delays = ['0s', '0.1s', '0.2s', '0.3s', '0.4s', '0.5s']
+    return delays[Math.floor(Math.random() * delays.length)]
  }, [])

  return (
    <figure
      className={clsx(
-        'animate-fade-in rounded-3xl bg-white p-6 opacity-0 shadow-md shadow-gray-900/5',
-        className,
+        'animate-fade-in rounded-3xl bg-gray-900/50 p-6 opacity-0 shadow-md shadow-gray-900/5',
+        className
      )}
      style={{ animationDelay }}
      {...props}
    >
-      <blockquote className="text-gray-900">
-        {React.createElement(getReviewIcon(title), { className: "h-6 w-6 text-[#2F3178] mb-2" })}
-        <CT color="primary" className="mt-4 text-lg/6 font-semibold">
-          {title}
-        </CT>
-        <CP color="custom" className="mt-3 text-sm">{body}</CP>
+      <blockquote className="text-white">
+        {React.createElement(getReviewIcon(title), { className: 'h-6 w-6 text-white mb-2' })}
+        <CT color="light" className="mt-4 text-lg font-semibold">{title}</CT>
+        <CP color="light" className="mt-3 text-sm">{body}</CP>
      </blockquote>
-
    </figure>
  )
 }

-function splitArray<T>(array: Array<T>, numParts: number) {
-  let result: Array<Array<T>> = []
+function splitArray<T>(array: T[], numParts: number) {
+  const result: T[][] = []
  for (let i = 0; i < array.length; i++) {
-    let index = i % numParts
-    if (!result[index]) {
-      result[index] = []
-    }
+    const index = i % numParts
+    if (!result[index]) result[index] = []
    result[index].push(array[i])
  }
  return result
 }

-function ReviewColumn({
-  reviews,
-  className,
-  reviewClassName,
-  msPerPixel = 0,
-}: {
-  reviews: Array<Review>
-  className?: string
-  reviewClassName?: (reviewIndex: number) => string
-  msPerPixel?: number
-}) {
-  let columnRef = useRef<React.ElementRef<'div'>>(null)
-  let [columnHeight, setColumnHeight] = useState(0)
-  let duration = `${columnHeight * msPerPixel}ms`
+function ReviewColumn({ reviews, className, msPerPixel = 0 }: { reviews: Review[], className?: string, msPerPixel?: number }) {
+  const columnRef = useRef<HTMLDivElement>(null)
+  const [columnHeight, setColumnHeight] = useState(0)
+  const duration = `${columnHeight * msPerPixel}ms`

  useEffect(() => {
-    if (!columnRef.current) {
-      return
-    }
-
-    let resizeObserver = new window.ResizeObserver(() => {
+    if (!columnRef.current) return
+    const resizeObserver = new ResizeObserver(() =>
      setColumnHeight(columnRef.current?.offsetHeight ?? 0)
-    })
-
+    )
    resizeObserver.observe(columnRef.current)
-
-    return () => {
-      resizeObserver.disconnect()
-    }
+    return () => resizeObserver.disconnect()
  }, [])

  return (
@@ -153,110 +99,73 @@ function ReviewColumn({
      className={clsx('animate-marquee space-y-8 py-4', className)}
      style={{ '--marquee-duration': duration } as React.CSSProperties}
    >
-      {reviews.concat(reviews).map((review, reviewIndex) => (
-        <Review
-          key={reviewIndex}
-          aria-hidden={reviewIndex >= reviews.length}
-          className={reviewClassName?.(reviewIndex % reviews.length)}
-          {...review}
-        />
+      {reviews.concat(reviews).map((review, i) => (
+        <Review key={i} aria-hidden={i >= reviews.length} {...review} />
      ))}
    </div>
  )
 }

 function ReviewGrid() {
-  let containerRef = useRef<React.ElementRef<'div'>>(null)
-  let isInView = useInView(containerRef, { once: true, amount: 0.4 })
-  let columns = splitArray(reviews, 3)
-  let column1 = columns[0]
-  let column2 = columns[1]
-  let column3 = splitArray(columns[2], 2)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const isInView = useInView(containerRef, { once: true, amount: 0.4 })
+  const columns = splitArray(reviews, 2)

  return (
-    <div
-      ref={containerRef}
-      className="relative -mx-4 mt-0 grid h-196 max-h-[150vh] grid-cols-1 items-start gap-8 overflow-hidden px-4 sm:mt-20 md:grid-cols-2 lg:grid-cols-3"
-    >
+    <div ref={containerRef} className="relative grid grid-cols-1 md:grid-cols-2 gap-8 overflow-hidden h-full">
      {isInView && (
        <>
-          <ReviewColumn
-            reviews={[...column1, ...column3.flat(), ...column2]}
-            reviewClassName={(reviewIndex) =>
-              clsx(
-                reviewIndex >= column1.length + column3[0].length &&
-                  'md:hidden',
-                reviewIndex >= column1.length && 'lg:hidden',
-              )
-            }
-            msPerPixel={10}
-          />
-          <ReviewColumn
-            reviews={[...column2, ...column3[1]]}
-            className="hidden md:block"
-            reviewClassName={(reviewIndex) =>
-              reviewIndex >= column2.length ? 'lg:hidden' : ''
-            }
-            msPerPixel={15}
-          />
-          <ReviewColumn
-            reviews={column3.flat()}
-            className="hidden lg:block"
-            msPerPixel={10}
-          />
+          <ReviewColumn reviews={columns[0]} msPerPixel={10} />
+          <ReviewColumn reviews={columns[1]} msPerPixel={15} />
        </>
      )}
-      <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-white" />
-      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-linear-to-t from-white" />
+      {/* Top Gradient */}
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-black/90 to-transparent z-10" />
+      {/* Bottom Gradient */}
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-black/90 to-transparent z-10" />
    </div>
  )
 }

 export function UseCases() {
-  const ref = useRef(null);
-  const isInView = useInView(ref, { once: true });
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true })

  return (
    <section
      id="usecases"
      ref={ref}
      aria-labelledby="usecases-title"
-      className="py-12"
+      className="bg-black h-screen relative flex items-start py-12 -top-20"
    >
-      <Container className=''>
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
-          transition={{ duration: 0.8, delay: 0.1 }}
-          className="mx-auto max-w-2xl  lg:max-w-5xl"
-        >
-          <H2
-            id="usecases-title" 
-            color="primary"
-            className="text-center"
+      <Container className="h-full">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-10 h-full">
+          {/* Left Column */}
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }}
+            transition={{ duration: 0.8, delay: 0.1 }}
+            className="flex flex-col items-start justify-start pt-10 lg:pr-12"
          >
-            Coming Soon: The Future of Mycelium
-          </H2>
-          <P className="mt-6 text-center" color="custom">
-          Mycelium Cloud is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
-          </P>
-        </motion.div>
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
-          transition={{ duration: 1, delay: 0.2 }}
-          aria-hidden="true"
-          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
-        >
-          <div
-            style={{
-              clipPath:
-                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-            }}
-            className="relative left-[calc(50%-30rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-30 sm:left-[calc(50%-36rem)] sm:w-[72.1875rem]"
-          />
-        </motion.div>
-        <ReviewGrid />
+            <H2 id="usecases-title" color="light" className="text-left">
+              Mycelium Technologies
+            </H2>
+            <P className="mt-4 text-left" color="light">
+              A robust infrastructure layer for autonomous AI agents, our technology stack
+              delivers a secure, efficient, and intuitive platform for deploying and managing AI agents at scale.
+            </P>
+          </motion.div>
+
+          {/* Right Columns */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+            transition={{ duration: 1, delay: 0.2 }}
+            className="lg:col-span-2 h-full"
+          >
+            <ReviewGrid />
+          </motion.div>
+        </div>
      </Container>
    </section>
  )
--- a/src/components/WindowsLink.tsx
+++ b/src/components/WindowsLink.tsx
@@ -1,39 +0,0 @@
-import Link from 'next/link'
-import clsx from 'clsx'
-
-export function WindowsLink({
-  color = 'black',
-}: {
-  color?: 'black' | 'white'
-}) {
-  return (
-    <Link
-      href="#"
-      aria-label="Download for Windows"
-      className={clsx(
-        'flex items-center rounded-lg transition-colors px-4 py-2',
-        color === 'black'
-          ? 'bg-gray-800 text-white hover:bg-gray-900'
-          : 'bg-white text-gray-900 hover:bg-gray-50',
-      )}
-    >
-      {/* Windows logo */}
-      <svg
-        viewBox="0 0 88 88"
-        aria-hidden="true"
-        className="h-5 w-5 mr-3"
-      >
-        <path
-          fill="currentColor"
-          d="M0 12.2L35.6 7v34.2H0V12.2Zm0 63.6L35.6 76V44.8H0v31ZM41.2 6l46.8-6v41.2H41.2V6Zm0 76l46.8 6V46.8H41.2V82Z"
-        />
-      </svg>
-
-      {/* Text */}
-      <div className="flex flex-col text-left leading-tight">
-        <span className="text-[9px] mt-0">Download for</span>
-        <span className="text-sm font-semibold -mt-1.5">Windows</span>
-      </div>
-    </Link>
-  )
-}
--- a/src/components/WorldMap.tsx
+++ b/src/components/WorldMap.tsx
@@ -0,0 +1,120 @@
+'use client'
+
+import { Globe } from "@/components/ui/globe"
+import { motion } from "framer-motion"
+import { H2, P, CT, CP } from "@/components/Texts"
+import { CountUpNumber } from './CountUpNumber'
+
+export function WorldMap() {
+  return (
+    <div className="relative min-h-screen w-full overflow-hidden top-0 flex py-12 flex-col">
+      {/* Background video */}
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute inset-0 w-full h-full object-cover"
+      >
+        <source src="/videos/benefits.mp4" type="video/mp4" />
+      </video>
+
+      {/* Dark overlay */}
+      <div className="absolute inset-0 bg-black/10" />
+
+      {/* Content */}
+      <div className="relative z-10 flex flex-col h-full px-8 md:px-16 py-12">
+        {/* Title + Subtitle */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="max-w-xl"
+        >
+          <H2 color="light">Mycelium Network is Live.</H2>
+          <P className="mt-4 text-base leading-relaxed font-light" color="light">
+            Mycelium Cloud's advancement technology enables anyone to deploy
+            their own Internet infrastructure, anywhere.
+          </P>
+        </motion.div>
+
+        {/* Bottom Layout: Globe + Cards */}
+        <div className="mt-8 flex flex-1 flex-col lg:flex-row items-center lg:items-stretch gap-x-10">
+          {/* Globe Left Column */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="flex-1 flex items-center justify-center"
+          >
+            <div className="relative w-[450px] h-[450px] md:w-[600px] md:h-[600px]">
+              <Globe className="absolute inset-0 w-full h-full left-0 lg:-left-24" />
+            </div>
+          </motion.div>
+
+          {/* Cards Right Column */}
+          <div className="relative flex-1 lg:h-auto h-[700px] flex flex-col lg:block items-center gap-y-4 mt-8 lg:mt-0">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.4 }}
+              whileHover={{ scale: 1.05 }}
+              className="lg:absolute lg:top-12 lg:-left-12 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 lg:py-8 py-6 shadow-md w-80"
+            >
+              <CT color="light" className="uppercase tracking-wide">CORES</CT>
+              <CountUpNumber end={54958} color="light" className="mt-2 text-3xl font-bold" />
+              <CP color="light" className="mt-2 text-sm">
+                Total Central Processing Unit Cores available on the grid.
+              </CP>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.5 }}
+              whileHover={{ scale: 1.05 }}
+              className="lg:absolute lg:-top-10 lg:right-0 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 lg:py-8 py-6 shadow-md w-80"
+            >
+              <CT color="light" className="uppercase tracking-wide">NODES</CT>
+              <CountUpNumber end={1493} color="light" className="mt-2 text-3xl font-bold" />
+              <CP color="light" className="mt-2 text-sm">
+                Total number of nodes on the grid.
+              </CP>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.6 }}
+              whileHover={{ scale: 1.05 }}
+              className="lg:absolute lg:bottom-28 lg:-left-12 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 lg:py-8 py-6 shadow-md w-80"
+            >
+              <CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT>
+              <CountUpNumber end={5388956} color="light" className="mt-2 text-3xl font-bold" />
+              <CP color="light" className="mt-2 text-sm">
+                Total GB amount of storage (SSD, HDD, & RAM) on the grid.
+              </CP>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.7 }}
+              whileHover={{ scale: 1.05 }}
+              className="lg:absolute lg:top-44 lg:right-0 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 lg:py-8 py-6 shadow-md w-80"
+            >
+              <CT color="light" className="uppercase tracking-wide">COUNTRIES</CT>
+              <CountUpNumber end={44} color="light" className="mt-2 text-3xl font-bold" />
+              <CP color="light" className="mt-2 text-sm">
+                Total number of countries with active nodes.
+              </CP>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+
+      {/* Radial fade overlay */}
+      <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" />
+    </div>
+  )
+}
--- a/src/components/logos/Ai21.tsx
+++ b/src/components/logos/Ai21.tsx
@@ -1,3 +1,3 @@
 import { Ai21 } from '@lobehub/icons';

-export default () => <Ai21.Brand size={45} />;
+export default () => <Ai21.Brand size={30} />;
--- a/src/components/logos/AlibabaCloud.tsx
+++ b/src/components/logos/AlibabaCloud.tsx
@@ -1,3 +1,3 @@
 import { AlibabaCloud } from '@lobehub/icons';

-export default () => <AlibabaCloud.Text size={45} />;
+export default () => <AlibabaCloud.Text size={30} />;
--- a/src/components/logos/BaiduCloud.tsx
+++ b/src/components/logos/BaiduCloud.tsx
@@ -1,3 +1,3 @@
 import { BaiduCloud } from '@lobehub/icons';

-export default () => <BaiduCloud.Combine size={45} />;
+export default () => <BaiduCloud.Combine size={30} />;
--- a/src/components/logos/ByteDance.tsx
+++ b/src/components/logos/ByteDance.tsx
@@ -1,3 +1,3 @@
 import { ByteDance } from '@lobehub/icons';

-export default () => <ByteDance.Text size={45} />;
+export default () => <ByteDance.Text size={30} />;
--- a/src/components/logos/Claude.tsx
+++ b/src/components/logos/Claude.tsx
@@ -1,3 +1,3 @@
 import { Claude } from '@lobehub/icons';

-export default () => <Claude.Combine size={45} />;
+export default () => <Claude.Combine size={30} />;
--- a/src/components/logos/DeepMind.tsx
+++ b/src/components/logos/DeepMind.tsx
@@ -1,3 +1,3 @@
 import { DeepMind } from '@lobehub/icons';

-export default () => <DeepMind.Combine size={45} />;
+export default () => <DeepMind.Combine size={30} />;
--- a/src/components/logos/DeepSeek.tsx
+++ b/src/components/logos/DeepSeek.tsx
@@ -1,3 +1,3 @@
 import { DeepSeek } from '@lobehub/icons';

-export default () => <DeepSeek.Combine size={45} />;
+export default () => <DeepSeek.Combine size={30} />;
--- a/src/components/logos/Minimax.tsx
+++ b/src/components/logos/Minimax.tsx
@@ -1,3 +1,3 @@
 import { Minimax } from '@lobehub/icons';

-export default () => <Minimax.Combine size={45} />;
+export default () => <Minimax.Combine size={30} />;
--- a/src/components/logos/Mistral.tsx
+++ b/src/components/logos/Mistral.tsx
@@ -1,3 +1,3 @@
 import { Mistral } from '@lobehub/icons';

-export default () => <Mistral.Combine size={45} />;
+export default () => <Mistral.Combine size={30} />;
--- a/src/components/logos/Moonshot.tsx
+++ b/src/components/logos/Moonshot.tsx
@@ -1,3 +1,3 @@
 import { Moonshot } from '@lobehub/icons';

-export default () => <Moonshot.Combine size={45} />;
+export default () => <Moonshot.Combine size={30} />;
--- a/src/components/logos/OpenAI.tsx
+++ b/src/components/logos/OpenAI.tsx
@@ -1,3 +1,3 @@
 import { OpenAI } from '@lobehub/icons';

-export default () => <OpenAI.Combine size={45} />;
+export default () => <OpenAI.Combine size={30} />;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
sasha-astiadi	9a4f347ee8	ok	2025-09-19 14:14:04 +02:00
sasha-astiadi	017fc41d2b	refactor: consolidate navigation links into reusable NavLinks component with dynamic styling	2025-09-19 14:08:46 +02:00
sasha-astiadi	ab14a5a8e5	feat: add email links and update navigation structure	2025-09-19 14:01:47 +02:00
sasha-astiadi	41d4c3a054	feat: adjust mobile viewport margin and update company branding in footer	2025-09-19 01:21:11 +02:00
sasha-astiadi	a362985d4c	style: improve text component spacing and center CTA content on mobile	2025-09-19 01:09:08 +02:00
sasha-astiadi	1d66fd60a4	chore: adjust mobile carousel gap from 100 to 110 pixels	2025-09-19 01:02:53 +02:00
sasha-astiadi	43d995bbc2	feat: add responsive carousel with mobile-optimized layout and controls	2025-09-19 01:01:46 +02:00
sasha-astiadi	0dedde3592	style: adjust vertical padding for Companies component on mobile and desktop views	2025-09-19 00:48:17 +02:00
sasha-astiadi	d5b9303d94	style: adjust spacing and padding in Steps component for better responsive layout	2025-09-19 00:46:28 +02:00
sasha-astiadi	3a240177c4	feat: add responsive layout for WorldMap component on mobile devices	2025-09-19 00:43:42 +02:00
sasha-astiadi	0479b7330a	feat: add mobile carousel view with auto-play for BentoReviews component	2025-09-19 00:39:00 +02:00
sasha-astiadi	a78bc67ed3	style: add responsive padding to BentoReviews component for mobile devices	2025-09-19 00:30:38 +02:00
sasha-astiadi	a035500c34	style: adjust spacing and responsive layout for stack section and cubes	2025-09-19 00:27:35 +02:00
sasha-astiadi	2b5c502724	feat: add mobile-friendly cube descriptions with click interaction	2025-09-19 00:12:16 +02:00
sasha-astiadi	a462afc8b2	fix mobile	2025-09-19 00:07:14 +02:00
sasha-astiadi	bf78cde2d8	feat: add row height control to BentoGrid and remove gradient blobs from StackSection	2025-09-18 20:26:37 +02:00
sasha-astiadi	cde6c90033	fx	2025-09-18 20:21:48 +02:00
sasha-astiadi	f5ab743987	style: update button hover states and add white variant to docs button	2025-09-18 20:11:56 +02:00
sasha-astiadi	45364a7452	ok	2025-09-18 20:09:48 +02:00
sasha-astiadi	b7f25d712f	fix gry	2025-09-18 19:43:04 +02:00
sasha-astiadi	2fdcb3697d	feat: add hover opacity transitions and bottom margin to bento grid components	2025-09-18 18:17:19 +02:00
sasha-astiadi	204625b9a8	add	2025-09-18 18:14:18 +02:00
sasha-astiadi	02557fcb82	ok	2025-09-17 18:32:20 +02:00
sasha-astiadi	9277bc7105	feat: add BentoReviews component with responsive grid layout for AI stack features	2025-09-17 17:21:30 +02:00
sasha-astiadi	3f6ffbe4ea	ok	2025-09-17 17:21:23 +02:00
sasha-astiadi	343b7ae22e	ok	2025-09-17 16:46:23 +02:00
sasha-astiadi	5f6ad1c98d	ok	2025-09-17 16:09:57 +02:00
sasha-astiadi	9e26dce717	add	2025-09-17 15:45:33 +02:00
sasha-astiadi	8f997b2f86	id	2025-09-17 15:35:06 +02:00
sasha-astiadi	f712a6c894	ok	2025-09-17 15:29:08 +02:00
sasha-astiadi	1708aadf1e	fav	2025-09-17 15:24:42 +02:00
sasha-astiadi	dadf92559c	ok	2025-09-17 15:19:26 +02:00
sasha-astiadi	c3481f3221	ok	2025-09-17 15:16:24 +02:00
sasha-astiadi	8d83f44a07	ok	2025-09-17 15:14:51 +02:00
sasha-astiadi	9faaf7dee9	ok	2025-09-17 15:07:08 +02:00
sasha-astiadi	fa7b8dbbb8	ok	2025-09-17 15:05:02 +02:00
sasha-astiadi	4b5c30c11e	ok	2025-09-17 14:58:10 +02:00
sasha-astiadi	bde7d37305	add	2025-09-17 14:55:37 +02:00
sasha-astiadi	b65f2aa538	OK	2025-09-17 14:34:37 +02:00
sasha-astiadi	be949d65bd	ok	2025-09-17 14:29:57 +02:00
sasha-astiadi	9ee0d678c9	ok	2025-09-17 14:28:40 +02:00
sasha-astiadi	eb2ad2be3f	ok	2025-09-17 14:21:34 +02:00
sasha-astiadi	34bd6522e3	ok	2025-09-16 14:34:13 +02:00
sasha-astiadi	273cb24a47	add	2025-09-16 14:24:25 +02:00
sasha-astiadi	13ecc4d2ec	feat: add background video and enhance hover effects in CTA and GetStarted components	2025-09-16 14:05:51 +02:00
sasha-astiadi	979a6523fa	OK	2025-09-16 13:54:45 +02:00
sasha-astiadi	de6a83a87c	dd stacks	2025-09-16 13:25:24 +02:00
sasha-astiadi	4aff3a5c6b	ok	2025-09-16 13:19:22 +02:00
sasha-astiadi	78e1e51877	ok	2025-09-15 21:05:36 +02:00
sasha-astiadi	3df200c7d2	ok	2025-09-15 20:45:18 +02:00
sasha-astiadi	f4c247baa2	ok	2025-09-15 18:20:49 +02:00
sasha-astiadi	cbc89b192b	ok	2025-09-15 18:20:25 +02:00
sasha-astiadi	c9af96e669	Merge branch 'development'	2025-09-15 18:14:48 +02:00
sasha-astiadi	225c10a853	ok	2025-09-15 18:14:25 +02:00
sasha-astiadi	d8da5325de	ok	2025-09-15 18:01:50 +02:00
sasha-astiadi	6f2f7318bc	ok	2025-09-15 17:07:54 +02:00
sasha-astiadi	29398d1e2e	ok	2025-09-15 17:05:51 +02:00
sasha-astiadi	a8fb5e2942	ok	2025-09-15 16:52:56 +02:00
sasha-astiadi	bfdd5aae41	ok	2025-09-15 16:51:05 +02:00
PeterNashaat	e3ede705c7	Update next.config.js	2025-09-15 07:11:29 +00:00
Peter Nashaat	c49a51783a	Lock @heroicons/react	2025-09-15 07:08:02 +00:00
sasha-astiadi	4618fc3525	Merge branch 'development'	2025-09-14 17:47:13 +02:00
sasha-astiadi	28fa04afc0	ok	2025-09-14 17:45:16 +02:00
sasha-astiadi	6e06d215fa	chore: move @tailwindcss/postcss from dependencies to devDependencies	2025-09-14 17:30:56 +02:00
sasha-astiadi	6343a22a8c	Finish revert and apply stashed changes	2025-09-14 17:21:38 +02:00
sasha-astiadi	7efede267d	Revert "ok" This reverts commit `6b9b27fab9`.	2025-09-14 17:20:42 +02:00