new cloud page

feat: add video previews and text components to agent showcase sections
feat: add responsive carousel and dark theme to agents gallery section
2025-10-23 13:07:24 +03:00 · 2025-10-22 18:14:41 +02:00 · 2025-10-22 18:04:52 +02:00 · 2025-10-22 17:51:43 +02:00 · 2025-10-22 17:34:12 +02:00 · 2025-10-22 17:33:52 +02:00
60 changed files with 14528 additions and 806 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -10,33 +10,44 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-router-dom": "^7.1.3",
-    "framer-motion": "^11.18.0",
+    "@headlessui/react": "^2.2.9",
+    "@heroicons/react": "^2.2.0",
+    "@lobehub/icons": "^1.97.2",
+    "@tabler/icons-react": "^3.35.0",
+    "@tailwindcss/forms": "^0.5.10",
+    "@types/node": "^20.19.23",
+    "@types/react": "^18.3.26",
+    "@types/react-dom": "^18.3.7",
+    "@types/react-router-dom": "^5.3.3",
+    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
-    "react-type-animation": "^3.2.0",
+    "cobe": "^0.6.5",
+    "framer-motion": "^10.18.0",
+    "lucide-react": "^0.544.0",
+    "motion": "^12.23.24",
+    "next": "^14.2.33",
+    "popmotion": "^11.0.5",
+    "react": "^18.3.1",
    "react-countup": "^6.5.3",
+    "react-dom": "^18.3.1",
    "react-icons": "^5.5.0",
-    "cobe": "^0.6.4"
+    "react-router-dom": "^7.9.4",
+    "react-type-animation": "^3.2.0",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.15",
+    "typescript": "^5.9.3",
+    "use-debounce": "^10.0.6"
  },
  "devDependencies": {
-    "@eslint/js": "^9.36.0",
-    "@tailwindcss/forms": "^0.5.9",
-    "@tailwindcss/postcss": "^4.1.7",
-    "@types/node": "^24.6.0",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
+    "@tailwindcss/postcss": "^4.1.15",
    "@vitejs/plugin-react": "^5.0.4",
    "autoprefixer": "^10.4.20",
-    "eslint": "^9.36.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.22",
-    "globals": "^16.4.0",
-    "postcss": "^8.5.1",
-    "tailwindcss": "^4.1.7",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.45.0",
+    "eslint": "^8.57.1",
+    "eslint-config-next": "^14.2.33",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "sharp": "^0.33.1",
+    "tw-animate-css": "^1.4.0",
    "vite": "^7.1.7"
  }
 }
--- a/public/images/logos/icon.svg
+++ b/public/images/logos/icon.svg
--- a/public/images/phone-frame.svg
+++ b/public/images/phone-frame.svg
@@ -0,0 +1,231 @@
+<svg width="366" height="729" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g mask="url(#mask)">
+    <g filter="url(#a)">
+      <path
+        d="M363.315 64.213C363.315 22.99 341.312 1 300.092 1H66.751C25.53 1 3.528 22.99 3.528 64.213v44.68l-.857.143A2 2 0 0 0 1 111.009v24.611a2 2 0 0 0 1.671 1.973l.95.158a2.26 2.26 0 0 1-.093.236v26.173c.212.1.398.296.541.643l-1.398.233A2 2 0 0 0 1 167.009v47.611a2 2 0 0 0 1.671 1.973l1.368.228c-.139.319-.314.533-.511.653v16.637c.221.104.414.313.56.689l-1.417.236A2 2 0 0 0 1 237.009v47.611a2 2 0 0 0 1.671 1.973l1.347.225c-.135.294-.302.493-.49.607v377.681c0 41.213 22 63.208 63.223 63.208h95.074c.947-.504 2.717-.843 4.745-.843l.141.001h.194l.086-.001 33.704.005c1.849.043 3.442.37 4.323.838h95.074c41.222 0 63.223-21.999 63.223-63.212v-394.63c-.259-.275-.48-.796-.63-1.47l-.011-.133 1.655-.276A2 2 0 0 0 366 266.62v-77.611a2 2 0 0 0-1.671-1.973l-1.712-.285c.148-.839.396-1.491.698-1.811V64.213Z"
+        fill="url(#b)" />
+      <path
+        d="M363.315 64.213C363.315 22.99 341.312 1 300.092 1H66.751C25.53 1 3.528 22.99 3.528 64.213v44.68l-.857.143A2 2 0 0 0 1 111.009v24.611a2 2 0 0 0 1.671 1.973l.95.158a2.26 2.26 0 0 1-.093.236v26.173c.212.1.398.296.541.643l-1.398.233A2 2 0 0 0 1 167.009v47.611a2 2 0 0 0 1.671 1.973l1.368.228c-.139.319-.314.533-.511.653v16.637c.221.104.414.313.56.689l-1.417.236A2 2 0 0 0 1 237.009v47.611a2 2 0 0 0 1.671 1.973l1.347.225c-.135.294-.302.493-.49.607v377.681c0 41.213 22 63.208 63.223 63.208h95.074c.947-.504 2.717-.843 4.745-.843l.141.001h.194l.086-.001 33.704.005c1.849.043 3.442.37 4.323.838h95.074c41.222 0 63.223-21.999 63.223-63.212v-394.63c-.259-.275-.48-.796-.63-1.47l-.011-.133 1.655-.276A2 2 0 0 0 366 266.62v-77.611a2 2 0 0 0-1.671-1.973l-1.712-.285c.148-.839.396-1.491.698-1.811V64.213Z"
+        fill="url(#c)" />
+    </g>
+    <g filter="url(#d)">
+      <path
+        d="M5 133.772v-21.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v24.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 133.772Z"
+        fill="url(#e)" />
+      <path
+        d="M5 133.772v-21.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v24.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 133.772Z"
+        fill="url(#f)" fill-opacity=".1" />
+    </g>
+    <g filter="url(#g)">
+      <path
+        d="M5 213.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 213.772Z"
+        fill="url(#h)" />
+      <path
+        d="M5 213.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 213.772Z"
+        fill="url(#i)" fill-opacity=".1" />
+    </g>
+    <g filter="url(#j)">
+      <path
+        d="M5 283.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 283.772Z"
+        fill="url(#k)" />
+      <path
+        d="M5 283.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 283.772Z"
+        fill="url(#l)" fill-opacity=".1" />
+    </g>
+    <g filter="url(#m)">
+      <path
+        d="M362.004 266.772v-78.15a5.12 5.12 0 0 1 1.5-3.622c.844-.073 2.496.257 2.496 2.157v81.562c-.406 2.023-2.605 2.023-2.605 2.023a6.359 6.359 0 0 1-1.391-3.97Z"
+        fill="url(#n)" />
+      <path
+        d="M362.004 266.772v-78.15a5.12 5.12 0 0 1 1.5-3.622c.844-.073 2.496.257 2.496 2.157v81.562c-.406 2.023-2.605 2.023-2.605 2.023a6.359 6.359 0 0 1-1.391-3.97Z"
+        fill="url(#o)" fill-opacity=".1" />
+    </g>
+    <path
+      d="M305 14.5H59c-24.577 0-44.5 19.923-44.5 44.5v615c0 23.472 19.028 42.5 42.5 42.5h250c23.472 0 42.5-19.028 42.5-42.5V59c0-24.577-19.923-44.5-44.5-44.5Z"
+      stroke="url(#p)" stroke-opacity=".5" />
+    <g filter="url(#q)" shape-rendering="crispEdges">
+      <path
+        d="M16 59c0-23.748 19.252-43 43-43h246c23.748 0 43 19.252 43 43v615c0 23.196-18.804 42-42 42H58c-23.196 0-42-18.804-42-42V59Z"
+        fill="url(#r)" fill-opacity=".3" />
+      <path
+        d="M305 15.5H59c-24.024 0-43.5 19.476-43.5 43.5v615c0 23.472 19.028 42.5 42.5 42.5h248c23.472 0 42.5-19.028 42.5-42.5V59c0-24.024-19.476-43.5-43.5-43.5Z"
+        stroke="#000" stroke-opacity=".07" />
+    </g>
+    <g filter="url(#s)">
+      <rect x="154" y="29" width="56" height="5" rx="2.5" fill="#D4D4D4" />
+    </g>
+  </g>
+  <defs>
+    <mask id="mask">
+      <rect width="366" height="729" fill="#fff" />
+      <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M89.728 24a4.213 4.213 0 0 1 4.213 4.212v2.527c0 10.235 8.3 18.532 18.539 18.532h139.04c10.239 0 18.539-8.297 18.539-18.532v-2.527A4.212 4.212 0 0 1 274.272 24h32.864C325.286 24 340 38.71 340 56.853v618.295c0 18.144-14.714 32.853-32.864 32.853H56.864c-18.15 0-32.864-14.709-32.864-32.853V56.853C24 38.709 38.714 24 56.864 24h32.864Z"
+        fill="#000" />
+    </mask>
+    <linearGradient id="e" x1="1.004" y1="123.367" x2="5" y2="123.367" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D4D4D4" />
+      <stop offset="1" stop-color="#E6E6E6" />
+    </linearGradient>
+    <linearGradient id="f" x1="3.002" y1="108.991" x2="3.002" y2="116.75" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#171717" />
+      <stop offset=".783" stop-color="#171717" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="h" x1="1.004" y1="190.867" x2="5" y2="190.867" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D4D4D4" />
+      <stop offset="1" stop-color="#E6E6E6" />
+    </linearGradient>
+    <linearGradient id="i" x1="3.002" y1="163.991" x2="3.002" y2="178.497" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#171717" />
+      <stop offset=".783" stop-color="#171717" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="k" x1="1.004" y1="260.867" x2="5" y2="260.867" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D4D4D4" />
+      <stop offset="1" stop-color="#E6E6E6" />
+    </linearGradient>
+    <linearGradient id="l" x1="3.002" y1="233.991" x2="3.002" y2="248.497" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#171717" />
+      <stop offset=".783" stop-color="#171717" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="n" x1="362.004" y1="226.25" x2="366" y2="226.25" gradientUnits="userSpaceOnUse">
+      <stop offset=".124" stop-color="#E6E6E6" />
+      <stop offset="1" stop-color="#D4D4D4" />
+    </linearGradient>
+    <linearGradient id="o" x1="364.002" y1="184.991" x2="364.002" y2="208.134" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#171717" />
+      <stop offset=".783" stop-color="#171717" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="p" x1="182" y1="15" x2="182" y2="716" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#fff" />
+      <stop offset=".381" stop-color="#fff" stop-opacity="0" />
+    </linearGradient>
+    <filter id="a" x="-1" y="-1" width="367" height="730.314" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dy="-2" />
+      <feGaussianBlur stdDeviation="1.5" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+      <feBlend in2="shape" result="effect1_innerShadow_104_2007" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="-2" />
+      <feGaussianBlur stdDeviation="2" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 0.0901961 0 0 0 0 0.0901961 0 0 0 0 0.0901961 0 0 0 0.17 0" />
+      <feBlend in2="effect1_innerShadow_104_2007" result="effect2_innerShadow_104_2007" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dy="2" />
+      <feGaussianBlur stdDeviation=".5" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0" />
+      <feBlend in2="effect2_innerShadow_104_2007" result="effect3_innerShadow_104_2007" />
+    </filter>
+    <filter id="d" x="1.004" y="108.991" width="4.996" height="28.751" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="1" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="-1" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
+      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
+    </filter>
+    <filter id="g" x="1.004" y="163.991" width="4.996" height="53.751" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="1" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="-1" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
+      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
+    </filter>
+    <filter id="j" x="1.004" y="233.991" width="4.996" height="53.751" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="1" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="-1" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
+      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
+    </filter>
+    <filter id="m" x="361.004" y="184.991" width="4.996" height="85.751" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="-1" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="1" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
+      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
+    </filter>
+    <filter id="q" x="15" y="15" width="334" height="703" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dy="1" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" />
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dy="1" />
+      <feGaussianBlur stdDeviation="2.5" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" />
+      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
+    </filter>
+    <filter id="s" x="154" y="29" width="56" height="6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dy="1" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0" />
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dy="1" />
+      <feGaussianBlur stdDeviation=".5" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
+    </filter>
+    <radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="matrix(0 727 -642 0 184 1)">
+      <stop stop-color="#FAFAFA" />
+      <stop offset="1" stop-color="#E6E6E6" />
+    </radialGradient>
+    <radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="matrix(0 319 -295.5 0 183.5 1)">
+      <stop stop-color="#fff" />
+      <stop offset=".533" stop-color="#fff" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient id="r" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="matrix(0 689 -326.783 0 182 27)">
+      <stop offset=".319" stop-color="#D4D4D4" />
+      <stop offset="1" stop-color="#E6E6E6" />
+    </radialGradient>
+  </defs>
+</svg>
--- a/public/images/phoneframe.png
+++ b/public/images/phoneframe.png
--- a/src/components/FadeIn.tsx
+++ b/src/components/FadeIn.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import { motion, type 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/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -10,8 +10,8 @@ export function Footer() {
            <div className="flex items-center text-gray-900">
              <img src="/src/images/logomark.svg" alt="Mycelium Logomark" className="h-20 w-20 flex-none" />
              <div className="ml-4">
-                <p className="text-base font-semibold">Mycelium</p>
-                <p className="mt-1 text-sm">Unleash the Power of Decentralized Networks</p>
+                <p className="text-base font-semibold">Project Mycelium</p>
+                <p className="mt-1 text-sm">Unleash the Power of Decentralization</p>
              </div>
            </div>
            <nav className="mt-10 flex gap-8">
--- a/src/components/PhoneFrame.tsx
+++ b/src/components/PhoneFrame.tsx
@@ -0,0 +1,22 @@
+import clsx from 'clsx'
+
+import phoneFrame from '@/images/phone-frame.svg'
+
+export function PhoneFrame({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'>) {
+  return (
+    <div className={clsx('relative aspect-[366/729]', className)} {...props}>
+      <img
+        src={phoneFrame}
+        alt=""
+        className="pointer-events-none absolute inset-0 w-full h-full"
+      />
+      <div className="absolute inset-x-[6.3%] top-[3.15%] bottom-[2.75%] rounded-3xl overflow-y-auto bg-gray-900">
+        {children}
+      </div>
+    </div>
+  )
+}
--- a/src/components/Texts.tsx
+++ b/src/components/Texts.tsx
@@ -0,0 +1,150 @@
+'use client'
+
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+const colorVariants = {
+  primary: 'text-gray-900',
+  secondary: 'text-gray-600',
+  light: 'text-gray-50',
+  accent: 'text-cyan-500',
+  white: 'text-white',
+  dark: 'text-gray-950',
+  tertiary: 'text-gray-700',
+  lightSecondary: 'text-gray-300',
+} as const
+
+type TextOwnProps = {
+  color?: keyof typeof colorVariants
+  className?: string
+}
+
+// Polymorphic helpers
+type PolymorphicProps<E extends React.ElementType, P> = P & {
+  as?: E
+} & Omit<React.ComponentPropsWithoutRef<E>, keyof P | 'as'>
+
+const createTextComponent = <DefaultElement extends React.ElementType>(
+  defaultElement: DefaultElement,
+  defaultClassName: string
+) => {
+  type Props<E extends React.ElementType = DefaultElement> = PolymorphicProps<
+    E,
+    TextOwnProps
+  >
+
+  function Text<E extends React.ElementType = DefaultElement>({
+    as,
+    color = 'primary',
+    className,
+    children,
+    ...props
+  }: Props<E>) {
+    const Tag = (as || defaultElement) as React.ElementType
+    return (
+      <Tag
+        className={cn(defaultClassName, colorVariants[color], className)}
+        {...props}
+      >
+        {children}
+      </Tag>
+    )
+  }
+
+  ;(Text as any).displayName = `Text(${typeof defaultElement === 'string' ? defaultElement : 'Component'
+  })`
+  return Text
+}
+
+// Exports based on your tailwind.css and the example
+export const H1 = createTextComponent(
+  'h1',
+  'text-6xl lg:text-7xl font-medium leading-tight tracking-tight'
+)
+export const H2 = createTextComponent(
+  'h2',
+  'text-4xl lg:text-6xl font-medium leading-tight tracking-tight'
+)
+export const H3 = createTextComponent(
+  'h3',
+  'text-3xl lg:text-5xl font-medium leading-tight tracking-tight'
+)
+export const H4 = createTextComponent(
+  'h4',
+  'text-2xl lg:text-4xl font-medium leading-snug tracking-tight'
+)
+export const P = createTextComponent(
+  'p',
+  'text-base lg:text-lg leading-relaxed'
+)
+export const Small = createTextComponent(
+  'small',
+  'text-sm font-medium leading-normal tracking-normal'
+)
+export const Subtle = createTextComponent(
+  'p',
+  'text-sm leading-normal tracking-normal text-gray-500'
+)
+export const H5 = createTextComponent(
+  'h5',
+  'text-xl lg:text-2xl font-semibold leading-snug tracking-tight'
+)
+export const Eyebrow = createTextComponent(
+  'h2',
+  'text-base/7 font-semibold tracking-wide'
+)
+export const SectionHeader = createTextComponent(
+  'p',
+  'text-3xl lg:text-4xl font-medium leading-tight tracking-tight'
+)
+export const CardEyebrow = createTextComponent(
+  'h3',
+  'text-sm/4 font-semibold tracking-wide'
+)
+export const CardTitle = createTextComponent(
+  'p',
+  'text-lg font-medium leading-snug tracking-tight'
+)
+export const CardDescription = createTextComponent(
+  'p',
+  'text-sm/6 leading-normal tracking-normal'
+)
+export const FeatureTitle = createTextComponent(
+  'h3',
+  'text-lg font-semibold leading-snug tracking-tight'
+)
+export const FeatureDescription = createTextComponent(
+  'p',
+  'text-sm leading-normal tracking-normal'
+)
+export const MobileFeatureTitle = createTextComponent(
+  'h3',
+  'text-sm font-semibold sm:text-lg leading-snug tracking-tight'
+)
+export const SecondaryFeatureTitle = createTextComponent(
+  'h3',
+  'text-base font-semibold leading-snug tracking-tight'
+)
+export const Question = createTextComponent(
+  'h3',
+  'text-lg/6 font-semibold tracking-tight'
+)
+export const Answer = createTextComponent(
+  'p',
+  'mt-4 text-sm leading-normal tracking-normal'
+)
+export const PageHeader = createTextComponent(
+  'h2',
+  'text-5xl lg:text-6xl font-medium leading-tight tracking-tight'
+)
+export const DownloadCardTitle = createTextComponent(
+  'dt',
+  'text-base/7 font-semibold tracking-wide'
+)
+export const DownloadCardDescription = createTextComponent(
+  'dd',
+  'text-base/7 leading-normal tracking-normal'
+)
+
+export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold')
+export const CP = createTextComponent('p', 'text-sm lg:text-sm leading-[1.525] font-light')
--- a/src/components/logos/Ai21.tsx
+++ b/src/components/logos/Ai21.tsx
@@ -0,0 +1,3 @@
+import { Ai21 } from '@lobehub/icons';
+
+export default () => <Ai21.Brand size={30} />;
--- a/src/components/logos/AlibabaCloud.tsx
+++ b/src/components/logos/AlibabaCloud.tsx
@@ -0,0 +1,3 @@
+import { AlibabaCloud } from '@lobehub/icons';
+
+export default () => <AlibabaCloud.Text size={30} />;
--- a/src/components/logos/BaiduCloud.tsx
+++ b/src/components/logos/BaiduCloud.tsx
@@ -0,0 +1,3 @@
+import { BaiduCloud } from '@lobehub/icons';
+
+export default () => <BaiduCloud.Combine size={30} />;
--- a/src/components/logos/ByteDance.tsx
+++ b/src/components/logos/ByteDance.tsx
@@ -0,0 +1,3 @@
+import { ByteDance } from '@lobehub/icons';
+
+export default () => <ByteDance.Text size={30} />;
--- a/src/components/logos/Claude.tsx
+++ b/src/components/logos/Claude.tsx
@@ -0,0 +1,3 @@
+import { Claude } from '@lobehub/icons';
+
+export default () => <Claude.Combine size={30} />;
--- a/src/components/logos/DeepMind.tsx
+++ b/src/components/logos/DeepMind.tsx
@@ -0,0 +1,3 @@
+import { DeepMind } from '@lobehub/icons';
+
+export default () => <DeepMind.Combine size={30} />;
--- a/src/components/logos/DeepSeek.tsx
+++ b/src/components/logos/DeepSeek.tsx
@@ -0,0 +1,3 @@
+import { DeepSeek } from '@lobehub/icons';
+
+export default () => <DeepSeek.Combine size={30} />;
--- a/src/components/logos/Minimax.tsx
+++ b/src/components/logos/Minimax.tsx
@@ -0,0 +1,3 @@
+import { Minimax } from '@lobehub/icons';
+
+export default () => <Minimax.Combine size={30} />;
--- a/src/components/logos/Mistral.tsx
+++ b/src/components/logos/Mistral.tsx
@@ -0,0 +1,3 @@
+import { Mistral } from '@lobehub/icons';
+
+export default () => <Mistral.Combine size={30} />;
--- a/src/components/logos/Moonshot.tsx
+++ b/src/components/logos/Moonshot.tsx
@@ -0,0 +1,3 @@
+import { Moonshot } from '@lobehub/icons';
+
+export default () => <Moonshot.Combine size={30} />;
--- a/src/components/logos/NousResearch.tsx
+++ b/src/components/logos/NousResearch.tsx
--- a/src/components/logos/OpenAI.tsx
+++ b/src/components/logos/OpenAI.tsx
@@ -0,0 +1,3 @@
+import { OpenAI } from '@lobehub/icons';
+
+export default () => <OpenAI.Combine size={30} />;
--- a/src/components/logos/TencentCloud.tsx
+++ b/src/components/logos/TencentCloud.tsx
@@ -0,0 +1,3 @@
+import { TencentCloud } from '@lobehub/icons';
+
+export default () => <TencentCloud.Combine size={30} />;
--- a/src/components/logos/XAI.tsx
+++ b/src/components/logos/XAI.tsx
@@ -0,0 +1,23 @@
+const XAILogo = () => (
+  <svg
+    version="1.1"
+    id="katman_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 841.89 595.28"
+        xmlSpace="preserve"
+    width="30"
+    height="30"
+  >
+    <g>
+      <polygon points="557.09,211.99 565.4,538.36 631.96,538.36 640.28,93.18 	" />
+      <polygon points="640.28,56.91 538.72,56.91 379.35,284.53 430.13,357.05 	" />
+      <polygon points="201.61,538.36 303.17,538.36 353.96,465.84 303.17,393.31 	" />
+      <polygon points="201.61,211.99 430.13,538.36 531.69,538.36 303.17,211.99 	" />
+    </g>
+  </svg>
+);
+
+export default XAILogo;
--- a/src/components/magicui/infinite-moving-cards.tsx
+++ b/src/components/magicui/infinite-moving-cards.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import React, { useCallback, useEffect, useState } from "react";
+
+export const InfiniteMovingCards = ({
+  items,
+  direction = "left",
+  speed = "fast",
+  pauseOnHover = true,
+  className,
+}: {
+  items: React.ReactNode[];
+  direction?: "left" | "right";
+  speed?: "fast" | "normal" | "slow";
+  pauseOnHover?: boolean;
+  className?: string;
+}): JSX.Element => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const scrollerRef = React.useRef<HTMLUListElement>(null);
+  const [start, setStart] = useState(false);
+
+  const getDirection = useCallback(() => {
+    if (containerRef.current) {
+      if (direction === "left") {
+        containerRef.current.style.setProperty("--animation-direction", "forwards");
+      } else {
+        containerRef.current.style.setProperty("--animation-direction", "reverse");
+      }
+    }
+  }, [direction]);
+
+  const getSpeed = useCallback(() => {
+    if (containerRef.current) {
+      if (speed === "fast") {
+        containerRef.current.style.setProperty("--animation-duration", "20s");
+      } else if (speed === "normal") {
+        containerRef.current.style.setProperty("--animation-duration", "40s");
+      } else {
+        containerRef.current.style.setProperty("--animation-duration", "80s");
+      }
+    }
+  }, [speed]);
+
+  const addAnimation = useCallback(() => {
+    if (containerRef.current && scrollerRef.current) {
+      const scrollerContent = Array.from(scrollerRef.current.children);
+
+      scrollerContent.forEach((item) => {
+        const duplicatedItem = item.cloneNode(true);
+        if (scrollerRef.current) {
+          scrollerRef.current.appendChild(duplicatedItem);
+        }
+      });
+
+      getDirection();
+      getSpeed();
+      setStart(true);
+    }
+  }, [getDirection, getSpeed]);
+
+  useEffect(() => {
+    addAnimation();
+  }, [addAnimation]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn("scroller relative z-20 overflow-hidden", className)}
+    >
+      <ul
+        ref={scrollerRef}
+        className={cn(
+          "flex min-w-full shrink-0 gap-16 py-4 w-max flex-nowrap",
+          start && "animate-scroll",
+          pauseOnHover && "hover:[animation-play-state:paused]",
+        )}
+      >
+        {items.map((item, idx) => (
+          <li className="relative flex-shrink-0" key={idx}>
+            {item}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
--- a/src/components/ui/Cube.tsx
+++ b/src/components/ui/Cube.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+
+interface CubeProps {
+  title: string;
+  descriptionTitle: string;
+  description: string;
+  isActive: boolean;
+  index: number;
+  onHover: () => void;
+  onLeave: () => void;
+  onClick: () => void;
+}
+
+const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({ index, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="507"
+    height="234"
+    fill="none"
+    viewBox="0 0 507 234"
+    {...props}
+  >
+    <path
+      fill={`url(#cube-gradient-${index})`}
+      d="M491.651 144.747L287.198 227.339C265.219 236.22 241.783 236.22 219.802 227.339L15.3486 144.747C-5.11621 136.479 -5.11621 97.5191 15.3486 89.2539L219.802 6.65884C241.783 -2.21961 265.219 -2.21961 287.198 6.65884L491.651 89.2539C512.116 97.5191 512.116 136.479 491.651 144.747Z"
+    />
+    <defs>
+      <linearGradient
+        id={`cube-gradient-${index}`}
+        x1="185.298"
+        x2="185.298"
+        y1="-27.5515"
+        y2="206.448"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop />
+        <stop offset="1" stopColor="#3F3B3E" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export function Cube({ title, descriptionTitle, description, isActive, index, onHover, onLeave, onClick }: CubeProps) {
+  return (
+    <div className="relative flex flex-col items-center">
+      <motion.div
+        className="relative cursor-pointer"
+        onMouseEnter={onHover}
+        onMouseLeave={onLeave}
+        onClick={onClick}
+        style={{
+          zIndex: 10 - index,
+        }}
+        animate={{
+          scale: isActive ? 1.05 : 1,
+        }}
+        transition={{
+          duration: 0.3,
+          ease: "easeOut",
+        }}
+      >
+        {/* SVG Cube */}
+        <CubeSvg 
+          index={index}
+          className="w-48 sm:w-64 lg:w-80 h-auto drop-shadow-lg opacity-50"
+          style={{
+            filter: isActive ? 'brightness(1.2) drop-shadow(0 0 20px rgba(156, 163, 175, 0.5))' : 'brightness(0.9)',
+          }}
+        />
+        
+        {/* Title overlay */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <h3 
+            className="text-white text-sm lg:text-base font-medium text-center px-4 drop-shadow-lg"
+            style={{ 
+              transform: 'rotate(0deg) skewX(0deg)',
+              transformOrigin: 'center'
+            }}
+          >
+            {title}
+          </h3>
+        </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="white"
+                strokeWidth="1"
+                opacity="0.6"
+              />
+            </svg>
+            
+            {/* Description text */}
+            <div className="ml-32 w-80">
+              <h4 className="text-white text-base font-semibold mb-2">
+                {descriptionTitle}
+              </h4>
+              <p className="text-white text-sm leading-relaxed font-light">
+                {description}
+              </p>
+            </div>
+          </motion.div>
+        )}
+
+        {/* Description for Mobile - Below cube */}
+              </motion.div>
+    </div>
+  );
+}
--- a/src/components/ui/CubeLight.tsx
+++ b/src/components/ui/CubeLight.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+
+interface CubeProps {
+  title: string;
+  descriptionTitle: string;
+  description: string;
+  isActive: boolean;
+  index: number;
+  onHover: () => void;
+  onLeave: () => void;
+  onClick: () => void;
+}
+
+const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({ index, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="507"
+    height="234"
+    fill="none"
+    viewBox="0 0 507 234"
+    {...props}
+  >
+    <path
+      fill={`url(#cube-gradient-${index})`}
+      d="M491.651 144.747L287.198 227.339C265.219 236.22 241.783 236.22 219.802 227.339L15.3486 144.747C-5.11621 136.479 -5.11621 97.5191 15.3486 89.2539L219.802 6.65884C241.783 -2.21961 265.219 -2.21961 287.198 6.65884L491.651 89.2539C512.116 97.5191 512.116 136.479 491.651 144.747Z"
+    />
+    <defs>
+      <linearGradient
+        id={`cube-gradient-${index}`}
+        x1="185.298"
+        x2="185.298"
+        y1="-27.5515"
+        y2="206.448"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#E5E7EB" />
+        <stop offset="1" stopColor="#9CA3AF" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export function CubeLight({ title, descriptionTitle, description, isActive, index, onHover, onLeave, onClick }: CubeProps) {
+  return (
+    <div className="relative flex flex-col items-center">
+      <motion.div
+        className="relative cursor-pointer"
+        onMouseEnter={onHover}
+        onMouseLeave={onLeave}
+        onClick={onClick}
+        style={{
+          zIndex: 10 - index,
+        }}
+        animate={{
+          scale: isActive ? 1.05 : 1,
+        }}
+        transition={{
+          duration: 0.3,
+          ease: "easeOut",
+        }}
+      >
+        {/* SVG Cube */}
+        <CubeSvg 
+          index={index}
+          className="w-48 sm:w-64 lg:w-80 h-auto drop-shadow-lg opacity-80"
+          style={{
+            filter: isActive ? 'brightness(1.1) drop-shadow(0 0 15px rgba(0, 0, 0, 0.2))' : 'brightness(1)',
+          }}
+        />
+        
+        {/* Title overlay */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <h3 
+            className="text-black text-sm lg:text-base font-medium text-center px-4 drop-shadow-sm"
+            style={{ 
+              transform: 'rotate(0deg) skewX(0deg)',
+              transformOrigin: 'center'
+            }}
+          >
+            {title}
+          </h3>
+        </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="black"
+                strokeWidth="1"
+                opacity="0.6"
+              />
+            </svg>
+            
+            {/* Description text */}
+            <div className="ml-32 w-80">
+              <h4 className="text-black text-base font-semibold mb-2">
+                {descriptionTitle}
+              </h4>
+              <p className="text-gray-800 text-sm leading-relaxed font-light">
+                {description}
+              </p>
+            </div>
+          </motion.div>
+        )}
+
+        {/* Description for Mobile - Below cube */}
+              </motion.div>
+    </div>
+  );
+}
--- a/src/components/ui/ScrollDown.tsx
+++ b/src/components/ui/ScrollDown.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
+import { useScroll } from '@/hooks/useScroll'
+
+export function ScrollDown() {
+  const { isAtBottom, scrollToNext } = useScroll()
+
+  if (isAtBottom) {
+    return null
+  }
+
+  return (
+    <button
+      onClick={scrollToNext}
+      className="fixed bottom-8 right-8 z-50 flex items-center gap-x-2 text-2xl font-medium text-white lg:text-3xl animate-blink"
+    >
+      <span>scroll</span>
+      <ChevronDoubleDownIcon className="h-6 w-6" />
+    </button>
+  )
+}
--- a/src/components/ui/ScrollUp.tsx
+++ b/src/components/ui/ScrollUp.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { ChevronDoubleUpIcon } from '@heroicons/react/24/outline'
+import { useScroll } from '@/hooks/useScroll'
+
+export function ScrollUp() {
+  const { isAtBottom, scrollToTop } = useScroll()
+
+  if (!isAtBottom) {
+    return null
+  }
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className="fixed bottom-8 right-8 z-50 flex items-center gap-x-2 text-2xl font-medium text-[#1c1c49] lg:text-3xl animate-blink"
+    >
+      <span>top</span>
+      <ChevronDoubleUpIcon className="h-6 w-6" />
+    </button>
+  )
+}
--- a/src/components/ui/StackedCubes.tsx
+++ b/src/components/ui/StackedCubes.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { Cube } from "@/components/ui/Cube"
+
+const stackData = [
+  {
+    id: "agent",
+    title: "Agent Layer",
+    descriptionTitle: "Your sovereign agent with private memory and permissioned data access—always under your control.",
+    description:
+      "Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval.\nIt coordinates across people, apps, and other agents to plan, create, and execute.\nIt operates inside a compliant legal & financial sandbox, ready for real-world transactions and operations.\nMore than just an assistant—an intelligent partner that learns and does your way.",
+    position: "top",
+  },
+  {
+    id: "network",
+    title: "Network Layer",
+    descriptionTitle: "A global, end-to-end encrypted overlay that simply doesn’t break.",
+    description:
+      "Shortest-path routing moves your traffic the fastest way, every time.\nInstant discovery with integrated DNS, semantic search, and indexing.\nA distributed CDN and edge delivery keep content available and tamper-resistant worldwide.\nBuilt-in tool services and secure coding sandboxes—seamless on phones, desktops, and edge.",
+    position: "middle",
+  },
+  {
+    id: "cloud",
+    title: "Cloud Layer",
+    descriptionTitle: "An autonomous, stateless OS that enforces pre-deterministic deployments you define.",
+    description:
+      "Workloads are cryptographically bound to your private key—location and access are yours.\nNo cloud vendor or middleman in the path: end-to-end ownership and isolation by default.\nGeo-aware placement delivers locality, compliance, and ultra-low latency where it matters.\nEncrypted, erasure-coded storage, decentralized compute and GPU on demand—including LLMs.",
+    position: "bottom",
+  },
+];
+
+export function StackedCubes() {
+  const [active, setActive] = useState<string | null>("agent");
+  const [selectedForMobile, setSelectedForMobile] = useState<string | null>("agent");
+
+  const handleCubeClick = (id: string) => {
+    setSelectedForMobile(prev => (prev === id ? null : id));
+  };
+
+  const selectedMobileLayer = stackData.find(layer => layer.id === selectedForMobile);
+
+  return (
+    <div className="flex flex-col items-center">
+    <div 
+      className="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
+      onMouseLeave={() => setActive("agent")}
+    >
+      <motion.div
+        className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96 scale-120 lg:scale-100"
+        animate={{ y: ["-8px", "8px"] }}
+        transition={{
+          duration: 4,
+          repeat: Infinity,
+          repeatType: "reverse",
+          ease: "easeInOut",
+        }}
+      >
+        {stackData.map((layer, index) => (
+          <div
+            key={layer.id}
+            className="absolute"
+            style={{
+              top: `calc(${index * 30}% - ${index * 10}px)`,
+              zIndex: active === layer.id ? 20 : 10 - index,
+            }}
+          >
+            <Cube
+              title={layer.title}
+              descriptionTitle={layer.descriptionTitle}
+              description={layer.description}
+              isActive={active === layer.id}
+              index={index}
+              onHover={() => setActive(layer.id)}
+              onLeave={() => {}}
+              onClick={() => handleCubeClick(layer.id)}
+            />
+          </div>
+        ))}
+      </motion.div>
+    </div>
+    {selectedMobileLayer && (
+      <div className="lg:hidden w-full max-w-md p-6 -mt-8 bg-gray-800/50 rounded-lg">
+        <h4 className="text-white text-lg font-semibold mb-2 text-center">
+          {selectedMobileLayer.descriptionTitle}
+        </h4>
+        <p className="text-gray-300 text-sm leading-relaxed text-center">
+          {selectedMobileLayer.description}
+        </p>
+      </div>
+    )}
+    </div>
+  );
+}
--- a/src/components/ui/StackedCubesLight.tsx
+++ b/src/components/ui/StackedCubesLight.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { CubeLight } from "@/components/ui/CubeLight"
+
+const stackData = [
+  {
+    id: "agent",
+    title: "Agent Layer",
+    descriptionTitle: "Your sovereign agent with private memory and permissioned data access—always under your control.",
+    description:
+      "Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval.\nIt coordinates across people, apps, and other agents to plan, create, and execute.\nIt operates inside a compliant legal & financial sandbox, ready for real-world transactions and operations.\nMore than just an assistant—an intelligent partner that learns and does your way.",
+    position: "top",
+  },
+  {
+    id: "network",
+    title: "Network Layer",
+    descriptionTitle: "A global, end-to-end encrypted overlay that simply doesn’t break.",
+    description:
+      "Shortest-path routing moves your traffic the fastest way, every time.\nInstant discovery with integrated DNS, semantic search, and indexing.\nA distributed CDN and edge delivery keep content available and tamper-resistant worldwide.\nBuilt-in tool services and secure coding sandboxes—seamless on phones, desktops, and edge.",
+    position: "middle",
+  },
+  {
+    id: "cloud",
+    title: "Cloud Layer",
+    descriptionTitle: "An autonomous, stateless OS that enforces pre-deterministic deployments you define.",
+    description:
+      "Workloads are cryptographically bound to your private key—location and access are yours.\nNo cloud vendor or middleman in the path: end-to-end ownership and isolation by default.\nGeo-aware placement delivers locality, compliance, and ultra-low latency where it matters.\nEncrypted, erasure-coded storage, decentralized compute and GPU on demand—including LLMs.",
+    position: "bottom",
+  },
+];
+
+export function StackedCubesLight() {
+  const [active, setActive] = useState<string | null>("agent");
+  const [selectedForMobile, setSelectedForMobile] = useState<string | null>("agent");
+
+  const handleCubeClick = (id: string) => {
+    setSelectedForMobile(prev => (prev === id ? null : id));
+  };
+
+  const selectedMobileLayer = stackData.find(layer => layer.id === selectedForMobile);
+
+  return (
+    <div className="flex flex-col items-center">
+    <div 
+      className="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
+      onMouseLeave={() => setActive("agent")}
+    >
+      <motion.div
+        className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96 scale-120 lg:scale-100"
+        animate={{ y: ["-8px", "8px"] }}
+        transition={{
+          duration: 4,
+          repeat: Infinity,
+          repeatType: "reverse",
+          ease: "easeInOut",
+        }}
+      >
+        {stackData.map((layer, index) => (
+          <div
+            key={layer.id}
+            className="absolute"
+            style={{
+              top: `calc(${index * 30}% - ${index * 10}px)`,
+              zIndex: active === layer.id ? 20 : 10 - index,
+            }}
+          >
+            <CubeLight
+              title={layer.title}
+              descriptionTitle={layer.descriptionTitle}
+              description={layer.description}
+              isActive={active === layer.id}
+              index={index}
+              onHover={() => setActive(layer.id)}
+              onLeave={() => {}}
+              onClick={() => handleCubeClick(layer.id)}
+            />
+          </div>
+        ))}
+      </motion.div>
+    </div>
+    {selectedMobileLayer && (
+      <div className="lg:hidden w-full max-w-md p-6 -mt-8 bg-gray-200/50 rounded-lg">
+        <h4 className="text-black text-lg font-semibold mb-2 text-center">
+          {selectedMobileLayer.descriptionTitle}
+        </h4>
+        <p className="text-gray-700 text-sm leading-relaxed text-center">
+          {selectedMobileLayer.description}
+        </p>
+      </div>
+    )}
+    </div>
+  );
+}
--- a/src/components/ui/bento-grid.tsx
+++ b/src/components/ui/bento-grid.tsx
@@ -0,0 +1,79 @@
+import { cn } from "@/lib/utils";
+import { CT, CP } from "@/components/Texts";
+import Image from 'next/image';
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export const BentoGrid = ({
+  className,
+  children,
+}: {
+  className?: string;
+  children?: React.ReactNode;
+}) => {
+  return (
+    <div
+      className={cn(
+        "mx-4 grid max-w-6xl grid-cols-1 gap-4 lg:grid-cols-3",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+interface BentoGridItemProps {
+  className?: string;
+  title?: string | React.ReactNode;
+  subtitle?: string | React.ReactNode;
+  description?: string | React.ReactNode;
+  img?: string;
+  video?: string;
+  rowHeight?: string;
+}
+
+export const BentoGridItem = React.forwardRef<HTMLDivElement, BentoGridItemProps>(
+  ({ className, title, subtitle, description, img, video, rowHeight }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "group/bento shadow-input row-span-1 flex flex-col justify-between rounded-xl border border-black bg-black/10 backdrop-blur-md transition-all duration-300 ease-in-out hover:scale-105 hover:border-black hover:bg-black/40",
+          rowHeight ? rowHeight : "h-full",
+          className
+        )}
+      >
+                <div className="relative w-full h-[65%] min-h-[6rem] bg-transparent overflow-hidden">
+          {video ? (
+            <video
+              src={video}
+              autoPlay
+              loop
+              muted
+              playsInline
+              className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
+            />
+          ) : img ? (
+            <Image
+              src={img}
+              alt={title as string}
+              width={300}
+              height={300}
+              className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
+            />
+          ) : null}
+        </div>
+        <div className="p-4 transition bg-white/5 hover:bg-white/7 backdrop-blur-md duration-200 group-hover/bento:translate-x-2 ">
+          <CT>{title}</CT>
+          <CP className="font-medium">{subtitle}</CP>
+          <CP className="mt-2">{description}</CP>
+        </div>
+      </div>
+    );
+  }
+);
+
+BentoGridItem.displayName = "BentoGridItem";
+
+export const MotionBentoGridItem = motion(BentoGridItem);
--- a/src/components/ui/dotted-glow-background.tsx
+++ b/src/components/ui/dotted-glow-background.tsx
@@ -0,0 +1,308 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+
+type DottedGlowBackgroundProps = {
+  className?: string;
+  /** distance between dot centers in pixels */
+  gap?: number;
+  /** base radius of each dot in CSS px */
+  radius?: number;
+  /** dot color (will pulse by alpha) */
+  color?: string;
+  /** optional dot color for dark mode */
+  darkColor?: string;
+  /** shadow/glow color for bright dots */
+  glowColor?: string;
+  /** optional glow color for dark mode */
+  darkGlowColor?: string;
+  /** optional CSS variable name for light dot color (e.g. --color-zinc-900) */
+  colorLightVar?: string;
+  /** optional CSS variable name for dark dot color (e.g. --color-zinc-100) */
+  colorDarkVar?: string;
+  /** optional CSS variable name for light glow color */
+  glowColorLightVar?: string;
+  /** optional CSS variable name for dark glow color */
+  glowColorDarkVar?: string;
+  /** global opacity for the whole layer */
+  opacity?: number;
+  /** background radial fade opacity (0 = transparent background) */
+  backgroundOpacity?: number;
+  /** minimum per-dot speed in rad/s */
+  speedMin?: number;
+  /** maximum per-dot speed in rad/s */
+  speedMax?: number;
+  /** global speed multiplier for all dots */
+  speedScale?: number;
+};
+
+/**
+ * Canvas-based dotted background that randomly glows and dims.
+ * - Uses a stable grid of dots.
+ * - Each dot gets its own phase + speed producing organic shimmering.
+ * - Handles high-DPI and resizes via ResizeObserver.
+ */
+export function DottedGlowBackground({
+  className,
+  gap = 12,
+  radius = 2,
+  color = "rgba(0,0,0,0.7)",
+  darkColor,
+  glowColor = "rgba(0, 170, 255, 0.85)",
+  darkGlowColor,
+  colorLightVar,
+  colorDarkVar,
+  glowColorLightVar,
+  glowColorDarkVar,
+  opacity = 0.6,
+  backgroundOpacity = 0,
+  speedMin = 0.4,
+  speedMax = 1.3,
+  speedScale = 1,
+}: DottedGlowBackgroundProps) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [resolvedColor, setResolvedColor] = useState<string>(color);
+  const [resolvedGlowColor, setResolvedGlowColor] = useState<string>(glowColor);
+
+  // Resolve CSS variable value from the container or root
+  const resolveCssVariable = (
+    el: Element,
+    variableName?: string,
+  ): string | null => {
+    if (!variableName) return null;
+    const normalized = variableName.startsWith("--")
+      ? variableName
+      : `--${variableName}`;
+    const fromEl = getComputedStyle(el as Element)
+      .getPropertyValue(normalized)
+      .trim();
+    if (fromEl) return fromEl;
+    const root = document.documentElement;
+    const fromRoot = getComputedStyle(root).getPropertyValue(normalized).trim();
+    return fromRoot || null;
+  };
+
+  const detectDarkMode = (): boolean => {
+    const root = document.documentElement;
+    if (root.classList.contains("dark")) return true;
+    if (root.classList.contains("light")) return false;
+    return (
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    );
+  };
+
+  // Keep resolved colors in sync with theme changes and prop updates
+  useEffect(() => {
+    const container = containerRef.current ?? document.documentElement;
+
+    const compute = () => {
+      const isDark = detectDarkMode();
+
+      let nextColor: string = color;
+      let nextGlow: string = glowColor;
+
+      if (isDark) {
+        const varDot = resolveCssVariable(container, colorDarkVar);
+        const varGlow = resolveCssVariable(container, glowColorDarkVar);
+        nextColor = varDot || darkColor || nextColor;
+        nextGlow = varGlow || darkGlowColor || nextGlow;
+      } else {
+        const varDot = resolveCssVariable(container, colorLightVar);
+        const varGlow = resolveCssVariable(container, glowColorLightVar);
+        nextColor = varDot || nextColor;
+        nextGlow = varGlow || nextGlow;
+      }
+
+      setResolvedColor(nextColor);
+      setResolvedGlowColor(nextGlow);
+    };
+
+    compute();
+
+    const mql = window.matchMedia
+      ? window.matchMedia("(prefers-color-scheme: dark)")
+      : null;
+    const handleMql = () => compute();
+    mql?.addEventListener?.("change", handleMql);
+
+    const mo = new MutationObserver(() => compute());
+    mo.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "style"],
+    });
+
+    return () => {
+      mql?.removeEventListener?.("change", handleMql);
+      mo.disconnect();
+    };
+  }, [
+    color,
+    darkColor,
+    glowColor,
+    darkGlowColor,
+    colorLightVar,
+    colorDarkVar,
+    glowColorLightVar,
+    glowColorDarkVar,
+  ]);
+
+  useEffect(() => {
+    const el = canvasRef.current;
+    const container = containerRef.current;
+    if (!el || !container) return;
+
+    const ctx = el.getContext("2d");
+    if (!ctx) return;
+
+    let raf = 0;
+    let stopped = false;
+
+    const dpr = Math.max(1, window.devicePixelRatio || 1);
+
+    const resize = () => {
+      const { width, height } = container.getBoundingClientRect();
+      el.width = Math.max(1, Math.floor(width * dpr));
+      el.height = Math.max(1, Math.floor(height * dpr));
+      el.style.width = `${Math.floor(width)}px`;
+      el.style.height = `${Math.floor(height)}px`;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    };
+
+    const ro = new ResizeObserver(resize);
+    ro.observe(container);
+    resize();
+
+    // Precompute dot metadata for a medium-sized grid and regenerate on resize
+    let dots: { x: number; y: number; phase: number; speed: number }[] = [];
+
+    const regenDots = () => {
+      dots = [];
+      const { width, height } = container.getBoundingClientRect();
+      const cols = Math.ceil(width / gap) + 2;
+      const rows = Math.ceil(height / gap) + 2;
+      const min = Math.min(speedMin, speedMax);
+      const max = Math.max(speedMin, speedMax);
+      for (let i = -1; i < cols; i++) {
+        for (let j = -1; j < rows; j++) {
+          const x = i * gap + (j % 2 === 0 ? 0 : gap * 0.5); // offset every other row
+          const y = j * gap;
+          // Randomize phase and speed slightly per dot
+          const phase = Math.random() * Math.PI * 2;
+          const span = Math.max(max - min, 0);
+          const speed = min + Math.random() * span; // configurable rad/s
+          dots.push({ x, y, phase, speed });
+        }
+      }
+    };
+
+    const regenThrottled = () => {
+      regenDots();
+    };
+
+    regenDots();
+
+    let last = performance.now();
+
+    const draw = (now: number) => {
+      if (stopped) return;
+      const dt = (now - last) / 1000; // seconds
+      last = now;
+      const { width, height } = container.getBoundingClientRect();
+
+      ctx.clearRect(0, 0, el.width, el.height);
+      ctx.globalAlpha = opacity;
+
+      // optional subtle background fade for depth (defaults to 0 = transparent)
+      if (backgroundOpacity > 0) {
+        const grad = ctx.createRadialGradient(
+          width * 0.5,
+          height * 0.4,
+          Math.min(width, height) * 0.1,
+          width * 0.5,
+          height * 0.5,
+          Math.max(width, height) * 0.7,
+        );
+        grad.addColorStop(0, "rgba(0,0,0,0)");
+        grad.addColorStop(
+          1,
+          `rgba(0,0,0,${Math.min(Math.max(backgroundOpacity, 0), 1)})`,
+        );
+        ctx.fillStyle = grad as unknown as CanvasGradient;
+        ctx.fillRect(0, 0, width, height);
+      }
+
+      // animate dots
+      ctx.save();
+      ctx.fillStyle = resolvedColor;
+
+      const time = (now / 1000) * Math.max(speedScale, 0);
+      for (let i = 0; i < dots.length; i++) {
+        const d = dots[i];
+        // Linear triangle wave 0..1..0 for linear glow/dim
+        const mod = (time * d.speed + d.phase) % 2;
+        const lin = mod < 1 ? mod : 2 - mod; // 0..1..0
+        const a = 0.25 + 0.55 * lin; // 0.25..0.8 linearly
+
+        // draw glow when bright
+        if (a > 0.6) {
+          const glow = (a - 0.6) / 0.4; // 0..1
+          ctx.shadowColor = resolvedGlowColor;
+          ctx.shadowBlur = 6 * glow;
+        } else {
+          ctx.shadowColor = "transparent";
+          ctx.shadowBlur = 0;
+        }
+
+        ctx.globalAlpha = a * opacity;
+        ctx.beginPath();
+        ctx.arc(d.x, d.y, radius, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      ctx.restore();
+
+      raf = requestAnimationFrame(draw);
+    };
+
+    const handleResize = () => {
+      resize();
+      regenThrottled();
+    };
+
+    window.addEventListener("resize", handleResize);
+    raf = requestAnimationFrame(draw);
+
+    return () => {
+      stopped = true;
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", handleResize);
+      ro.disconnect();
+    };
+  }, [
+    gap,
+    radius,
+    resolvedColor,
+    resolvedGlowColor,
+    opacity,
+    backgroundOpacity,
+    speedMin,
+    speedMax,
+    speedScale,
+  ]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      style={{ position: "absolute", inset: 0 }}
+    >
+      <canvas
+        ref={canvasRef}
+        style={{ display: "block", width: "100%", height: "100%" }}
+      />
+    </div>
+  );
+}
+
+export default DottedGlowBackground;
--- a/src/hooks/useMediaQuery.ts
+++ b/src/hooks/useMediaQuery.ts
@@ -0,0 +1,21 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+export function useMediaQuery(query: string) {
+  const [matches, setMatches] = useState(false)
+
+  useEffect(() => {
+    const media = window.matchMedia(query)
+    if (media.matches !== matches) {
+      setMatches(media.matches)
+    }
+    const listener = () => {
+      setMatches(media.matches)
+    }
+    media.addEventListener('change', listener)
+    return () => media.removeEventListener('change', listener)
+  }, [matches, query])
+
+  return matches
+}
--- a/src/hooks/useResponsiveCarousel.ts
+++ b/src/hooks/useResponsiveCarousel.ts
@@ -0,0 +1,39 @@
+'use client'
+
+import { useState, useEffect } from 'react';
+
+// 🔧 Carousel Config
+const desktopConfig = {
+  GAP: 300,
+  ROT_Y: 18,
+  DEPTH: 210,
+  SCALE_DROP: 0.12,
+};
+
+const mobileConfig = {
+  GAP: 110, // Smaller gap for mobile
+  ROT_Y: 0,   // Flatter view on mobile
+  DEPTH: 150, // Less depth
+  SCALE_DROP: 0.1, // Less aggressive scaling
+};
+
+export const useResponsiveCarousel = () => {
+  const [config, setConfig] = useState(desktopConfig);
+
+  useEffect(() => {
+    const checkScreenSize = () => {
+      if (window.innerWidth < 768) {
+        setConfig(mobileConfig);
+      } else {
+        setConfig(desktopConfig);
+      }
+    };
+
+    checkScreenSize();
+    window.addEventListener('resize', checkScreenSize);
+
+    return () => window.removeEventListener('resize', checkScreenSize);
+  }, []);
+
+  return config;
+};
--- a/src/hooks/useScroll.ts
+++ b/src/hooks/useScroll.ts
@@ -0,0 +1,45 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+
+export function useScroll() {
+  const [isAtBottom, setIsAtBottom] = useState(false)
+
+  const handleScroll = useCallback(() => {
+    const footer = document.querySelector('footer')
+    if (footer) {
+      const footerTop = footer.getBoundingClientRect().top
+      setIsAtBottom(footerTop < window.innerHeight)
+    }
+  }, [])
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll)
+    handleScroll() // Initial check
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [handleScroll])
+
+  const scrollToNext = () => {
+    const sections = Array.from(
+      document.querySelectorAll('section[id]')
+    ) as HTMLElement[]
+    const scrollPosition = window.scrollY + window.innerHeight / 2
+
+    const currentSection = sections.reduce((acc, section) => {
+      return section.offsetTop < scrollPosition ? section : acc
+    }, sections[0])
+
+    const currentIndex = sections.findIndex((sec) => sec.id === currentSection.id)
+    const nextIndex = currentIndex + 1
+
+    if (nextIndex < sections.length) {
+      sections[nextIndex].scrollIntoView({ behavior: 'smooth' })
+    }
+  }
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  return { isAtBottom, scrollToNext, scrollToTop }
+}
--- a/src/images/desktop.png
+++ b/src/images/desktop.png
--- a/src/images/linux
+++ b/src/images/linux
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/src/pages/agents/AgentsPage.tsx
+++ b/src/pages/agents/AgentsPage.tsx
@@ -1,6 +1,7 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { DeploySection } from './DeploySection'
 import { GallerySection } from './GallerySection'
+import { Companies } from './Companies'
 import { BentoSection } from './BentoSection'

 export default function AgentsPage() {
@@ -9,6 +10,11 @@ export default function AgentsPage() {
      <AnimatedSection>
        <DeploySection />
      </AnimatedSection>
+
+      <AnimatedSection>
+        <Companies />
+      </AnimatedSection>
+
      
      <AnimatedSection>
        <GallerySection />
--- a/src/pages/agents/BentoSection.tsx
+++ b/src/pages/agents/BentoSection.tsx
@@ -1,42 +1,49 @@
 import { motion } from 'framer-motion'
 import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, CT, CP } from '../../components/Texts'

 const items = [
  {
    title: 'FungiStor',
    subtitle: 'Long-Term AI Memory',
    description: 'Erasure coding + compression slash storage bloat by up to 10× vs basic replication. Source-encrypted shards are geo-dispersed—lose pieces, rebuild perfectly from a quorum.',
+    video: '/videos/fungistor.mp4',
  },
  {
    title: 'HeroDB',
    subtitle: 'Active AI Memory',
    description: 'Multimodal vector+keyword retrieval makes RAG feel instant across text, image, audio. Time-aware, policy-guarded context keeps results fresh while access stays governed.',
+    video: '/videos/herodb.mp4',
  },
  {
    title: 'MOS Sandboxes',
    subtitle: 'Secure Agent Workspaces',
    description: 'Attested, signed workspaces spin up ≈5s worldwide—ready to execute. Hardware isolation and scoped egress: run hard, tear down clean, zero residue.',
+    video: '/videos/sandbox.mp4',
  },
  {
    title: 'Mycelium Mesh',
    subtitle: 'Secure Communication Network',
    description: 'A private, public-key fabric with self-healing multi-path routing. Glides through NATs and firewalls—direct, low-latency, no middlemen.',
+    video: '/videos/mesh.mp4',
  },
  {
    title: 'Deterministic Deployment',
    subtitle: 'Verifiable Code Execution',
    description: 'Declare intent, get a hash; remote attestation proves that is what runs. Reproducible builds, signed artifacts, immutable logs—supply chain, sealed.',
+    video: '/videos/deterministic.mp4',
  },
  {
    title: 'Agent Coordination',
    subtitle: 'Sovereign Workflow Management',
    description: 'Your private agent conducts swarms of specialists in parallel. Policies fan out work; human checkpoints keep you in command.',
+    video: '/videos/agent.mp4',
  },
 ]

 export function BentoSection() {
  return (
-    <section className="bg-white py-20 lg:py-32">
+    <section className="bg-black py-20 lg:py-32">
      <Container>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
@@ -45,12 +52,13 @@ export function BentoSection() {
          transition={{ duration: 0.8 }}
          className="mx-auto max-w-3xl text-center mb-16"
        >
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+          <Eyebrow color="accent">Components</Eyebrow>
+          <SectionHeader color="light">
            Augmented Intelligence Fabric
-          </h2>
-          <p className="mt-6 text-lg text-gray-600">
+          </SectionHeader>
+          <P className="mt-6" color="lightSecondary">
            A complete infrastructure for building and deploying AI agents with enterprise-grade security and performance.
-          </p>
+          </P>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -61,11 +69,19 @@ export function BentoSection() {
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
-              className="rounded-2xl bg-gray-50 border border-gray-200 p-6 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
+              className="rounded-2xl bg-gray-900 border border-gray-800 p-6 hover:border-cyan-500 hover:shadow-lg transition-all duration-300 hover:scale-105 overflow-hidden"
            >
-              <h3 className="text-xl font-semibold text-gray-900">{item.title}</h3>
-              <p className="mt-2 text-sm font-medium text-cyan-500">{item.subtitle}</p>
-              <p className="mt-3 text-sm text-gray-600">{item.description}</p>
+              <video
+                src={item.video}
+                autoPlay
+                loop
+                muted
+                playsInline
+                className="w-full h-40 object-cover mb-4 rounded-lg"
+              />
+              <p className="text-sm font-medium text-cyan-500">{item.subtitle}</p>
+              <CT as="h3" className="mt-2" color="light">{item.title}</CT>
+              <CP className="mt-3" color="lightSecondary">{item.description}</CP>
            </motion.div>
          ))}
        </div>
--- a/src/pages/agents/Companies.tsx
+++ b/src/pages/agents/Companies.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+import { P, Eyebrow } from '@/components/Texts';
+import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";
+
+
+
+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 TencentCloud from '@/components/logos/TencentCloud';
+import OpenAI from '@/components/logos/OpenAI';
+import XAI from '@/components/logos/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 bg-black flex flex-col items-center justify-center w-full overflow-hidden antialiased  py-4 mb-12">
+      <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-8 mx-auto"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 1 }}
+        >
+          <Eyebrow color="accent"></Eyebrow>
+          <P className="hidden min-xl: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>
+
+        {/* Logos grid */}
+        <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/pages/agents/DeploySection.tsx
+++ b/src/pages/agents/DeploySection.tsx
@@ -1,7 +1,9 @@
-import { motion, useInView } from 'framer-motion'
+'use client'
+
 import { useRef } from 'react'
+import { motion, useInView } from 'framer-motion'
+import { SectionHeader, P, Eyebrow, CT, CP } from '@/components/Texts'
 import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
-import { Container } from '../../components/Container'

 const features = [
  {
@@ -24,30 +26,31 @@ const features = [
 ]

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

  return (
-    <section ref={ref} className="bg-white py-20 lg:py-32">
-      <Container>
+    <section id="benefits" ref={ref} className="relative pt-12 lg:pt-24 pb-4 px-4 lg:px-12  text-white bg-black">
+      <div className="relative px-6 lg:px-12">
        <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-3xl text-center"
+          className="mx-auto max-w-5xl text-center"
        >
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+          <Eyebrow color="accent">Get Started</Eyebrow>
+          <SectionHeader className="text-3xl font-medium tracking-tight" color="light">
            Deploy Scalable LLMs and AI Agents in Seconds
-          </h2>
-          <p className="mt-6 text-lg text-gray-600">
+          </SectionHeader>
+          <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>
+          </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-6 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-12 lg:max-w-7xl lg:grid-cols-3"
        >
          {features.map((feature, index) => (
            <motion.li
@@ -55,15 +58,15 @@ export function DeploySection() {
              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 bg-gray-50 p-8 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
+              className="rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
            >
-              <feature.icon className="h-8 w-8 mb-4 text-cyan-500" />
-              <h3 className="text-lg font-semibold text-gray-900">{feature.name}</h3>
-              <p className="mt-3 text-sm text-gray-600">{feature.description}</p>
+              <feature.icon className="h-8 w-8 mb-4 text-white" />
+              <CT as="span" className="font-semibold text-left" color="light">{feature.name}</CT>
+              <CP className="mt-2 text-sm text-left" color="light">{feature.description}</CP>
            </motion.li>
          ))}
        </motion.ul>
-      </Container>
+      </div>
    </section>
  )
 }
--- a/src/pages/agents/GallerySection.tsx
+++ b/src/pages/agents/GallerySection.tsx
@@ -1,58 +1,178 @@
-import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { useResponsiveCarousel } from '@/hooks/useResponsiveCarousel';
+import { motion, AnimatePresence } from 'framer-motion'
+import { wrap } from 'popmotion'
+import { Button } from '@/components/Button';
+import { SectionHeader, P, Eyebrow, CP } from '@/components/Texts';
+import { TypeAnimation } from 'react-type-animation'
+import { FadeIn } from '@/components/FadeIn';

 const galleryItems = [
-  { text: 'Navigate and interact with any web interface', image: '/images/gallery/interface.jpg' },
-  { text: 'Process documents across all formats', image: '/images/gallery/docs.jpg' },
-  { text: 'Execute multi-step workflows autonomously', image: '/images/gallery/flow.jpg' },
-  { text: 'Manage calendars, emails, and tasks', image: '/images/gallery/calendar.jpg' },
-  { text: 'Perform deep semantic search across all data sources', image: '/images/gallery/data.jpg' },
-  { text: 'Identify patterns in complex datasets', image: '/images/gallery/datasets.jpg' },
+  { 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 },
 ]

-export function GallerySection() {
-  return (
-    <section className="bg-gray-50 py-20 lg:py-32">
-      <Container>
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.8 }}
-          className="mx-auto max-w-3xl text-center mb-16"
-        >
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-            Agents with Endless Possibilities.
-          </h2>
-          <p className="mt-6 text-lg text-gray-600">
-            Your private agent coordinates a team of specialists that spin up on demand, collaborate across your world, and deliver end-to-end results. Many agents, one intelligence—yours.
-          </p>
-        </motion.div>
+// 🔧 Carousel Config
+const VISIBLE = 4;
+const AUTOPLAY_MS = 3200;

-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {galleryItems.map((item, index) => (
-            <motion.div
-              key={index}
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
-              className="group relative overflow-hidden rounded-2xl bg-white border border-gray-200 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
-            >
-              <div className="aspect-video overflow-hidden">
-                <img
-                  src={item.image}
-                  alt={item.text}
-                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-                />
-              </div>
-              <div className="p-6">
-                <p className="text-sm font-medium text-gray-900">{item.text}</p>
-              </div>
-            </motion.div>
-          ))}
-        </div>
-      </Container>
-    </section>
+export function GallerySection() {
+  const [active, setActive] = useState(0);
+  const [hovering, setHovering] = useState(false);
+  const { GAP, ROT_Y, DEPTH, SCALE_DROP } = useResponsiveCarousel();
+
+  // autoplay
+  useEffect(() => {
+    if (hovering) return
+    const id = setInterval(() => setActive((i) => wrap(0, galleryItems.length, i + 1)), AUTOPLAY_MS)
+    return () => clearInterval(id)
+  }, [hovering])
+
+  const indices = useMemo(
+    () => [...Array(VISIBLE * 2 + 1)].map((_, i) => wrap(0, galleryItems.length, active + i - VISIBLE)),
+    [active]
  )
+
+  const next = () => setActive((i) => wrap(0, galleryItems.length, i + 1))
+  const prev = () => setActive((i) => wrap(0, galleryItems.length, i - 1))
+
+  return (
+    <div className="bg-[#FAFAFA]">
+      <div className="relative isolate pt-8 pb-0 text-center w-full">
+        <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
+          <div className="mx-auto max-w-5xl lg:mt-12">
+            <Eyebrow color="accent">Use Cases</Eyebrow>
+            <SectionHeader className="text-center" color="dark">Agents with Endless Possibilities.</SectionHeader>
+          </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="dark">
+            Your private agent coordinates a team of specialists that spin up on demand, collaborate across your world, and deliver end-to-end results.
+            Many agents, one intelligence—yours.
+            </P>
+          </div>
+        </FadeIn>
+      </div>
+      <FadeIn transition={{ duration: 1, delay: 0.4 }}>
+        <section
+          className="relative w-full flex items-center justify-center overflow-hidden -mt-8 pt-0 pb-0"
+          onMouseEnter={() => setHovering(true)}
+          onMouseLeave={() => setHovering(false)}
+        >
+                    <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];
+
+                  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(0, 0, 0, 0.1)' : 'none',
+                      }}
+                      exit={{ opacity: 0 }}
+                      transition={{ type: 'spring', stiffness: 220, damping: 26 }}
+                      onClick={() => setActive(idx)}
+                    >
+                      <div className="relative bg-gray-100 flex items-center justify-center">
+                        <img
+                          src={item.image}
+                          alt={item.text}
+                          width={item.width}
+                          height={item.height}
+                          className="object-contain"
+                        />
+                      </div>
+                    </motion.div>
+                  );
+                })}
+              </AnimatePresence>
+            </div>
+          </div>
+
+          {/* Arrows */}
+          <div className="absolute inset-y-0 left-8 hidden md:flex items-center z-50">
+            <button
+              onClick={prev}
+              className="bg-white/50 rounded-full p-2 shadow-lg backdrop-blur-md text-black"
+              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-white/50 rounded-full p-2 shadow-lg backdrop-blur-md text-black"
+              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-gray-100/80 shadow-[0_8px_40px_rgba(0,0,0,0.15)] px-12 backdrop-blur">
+              <CP as="h4" className="max-w-[820px] h-[72px] flex items-center" color="dark">
+                <TypeAnimation
+                  key={active}
+                  sequence={[galleryItems[active].text]}
+                  wrapper="span"
+                  speed={50}
+                  repeat={0}
+                />
+              </CP>
+              <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-gray-100/80 p-4 backdrop-blur-md">
+              <CP as="h4" className="w-full text-left h-[72px] leading-tight flex items-center" color="dark">
+                <TypeAnimation
+                  key={active}
+                  sequence={[galleryItems[active].text]}
+                  wrapper="span"
+                  speed={50}
+                  repeat={0}
+                />
+              </CP>
+              <Button href="#" color="cyan" className="text-xs px-3 py-1.5 whitespace-nowrap">
+                 Start
+              </Button>
+            </div>
+        </div>
+      </FadeIn>
+    </div>
+  );
 }
--- a/src/pages/cloud/CloudCTA.tsx
+++ b/src/pages/cloud/CloudCTA.tsx
@@ -1,35 +1,35 @@
-import { motion } from 'framer-motion'
 import { Container } from '../../components/Container'
 import { Button } from '../../components/Button'
-import { CircleBackground } from '../../components/CircleBackground'

 export function CloudCTA() {
  return (
-    <section className="relative bg-white py-20 lg:py-32 overflow-hidden">
-      <CircleBackground color="cyan" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+    <section className="relative overflow-hidden py-24 lg:py-32">
      <Container className="relative">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.8 }}
-          className="mx-auto max-w-3xl text-center"
-        >
-          <h2 className="text-3xl lg:text-5xl font-medium tracking-tight text-gray-900">
-            Ready to Transform Your Kubernetes Experience?
-          </h2>
-          <p className="mt-6 text-lg lg:text-xl text-gray-600">
-            Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
-          </p>
-          <div className="mt-10 flex flex-wrap gap-4 justify-center">
-            <Button to="/download" variant="solid" color="cyan">
-              Start Your Free Trial
-            </Button>
-            <Button to="https://manual.grid.tf" variant="outline" color="gray">
-              Read Documentation
-            </Button>
+        <div className="relative mx-auto max-w-5xl overflow-hidden rounded-3xl border border-gray-200/60 bg-white/90 px-10 py-16 text-center shadow-[0_30px_120px_-70px_rgba(6,182,212,0.65)] backdrop-blur lg:px-16 lg:py-20">
+          <div className="max-w-3xl mx-auto">
+            <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-500">
+              Ready Today
+            </p>
+            <h2 className="mt-6 text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
+              Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
+            </h2>
+            <p className="mt-6 text-lg text-gray-600">
+              Revolutionary Kubernetes automation, deterministic compute, and quantum-safe storage—delivered as a turnkey platform so your team can deploy, scale, and operate cloud-native applications with confidence.
+            </p>
+            <div className="mt-10 flex justify-center">
+              <Button
+                to="https://myceliumcloud.tf"
+                as="a"
+                variant="solid"
+                color="cyan"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Start Deploying
+              </Button>
+            </div>
          </div>
-        </motion.div>
+        </div>
      </Container>
    </section>
  )
--- a/src/pages/cloud/CloudHero.tsx
+++ b/src/pages/cloud/CloudHero.tsx
@@ -1,65 +1,122 @@
-import { motion } from 'framer-motion'
-import { Globe } from '../../components/ui/Globe'
-import { CountUpNumber } from '../../components/CountUpNumber'
+import { useId } from 'react'
+
+import { Button } from '../../components/Button'
 import { Container } from '../../components/Container'

-const stats = [
-  { value: 54958, label: 'CPU Cores' },
-  { value: 1493, label: 'Nodes' },
-  { value: 5388956, label: 'GB Storage' },
-  { value: 44, label: 'Countries' },
-]
+function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
+  const 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>
+  )
+}

 export function CloudHero() {
  return (
-    <section className="relative bg-white py-20 lg:py-32">
+    <div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
      <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Text Content */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8 }}
-          >
-            <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
+        <div className="flex flex-col-reverse gap-y-16 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 lg:text-6xl">
              Mycelium Cloud
            </h1>
-            <p className="mt-6 text-lg lg:text-xl text-gray-600">
-              Revolutionary Kubernetes platform that transforms how teams deploy and manage cloud-native applications at scale
+            <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
+              Own every workload with certainty.
+            </h2>
+            <p className="mt-6 text-lg text-gray-600 leading-tight lg:text-xl lg:leading-normal">
+              Mycelium Cloud blends deterministic compute with quantum-safe storage, delivering a sovereign platform built for zero-ops automation.
            </p>
-          </motion.div>
-
-          {/* Globe */}
-          <motion.div
-            initial={{ opacity: 0, scale: 0.9 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{ duration: 0.8, delay: 0.2 }}
-            className="flex items-center justify-center"
-          >
-            <div className="relative w-full max-w-[500px] aspect-square">
-              <Globe className="w-full h-full" />
+            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
+              <Button to="/download" variant="solid" color="cyan">
+                Start Deploying
+              </Button>
+              <Button
+                to="https://manual.grid.tf"
+                as="a"
+                variant="outline"
+                color="gray"
+                target="_blank"
+                rel="noreferrer"
+              >
+                View Documentation
+              </Button>
            </div>
-          </motion.div>
-        </div>
-
-        {/* Stats */}
-        <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6">
-          {stats.map((stat, index) => (
-            <motion.div
-              key={stat.label}
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
-              className="rounded-2xl bg-gray-50 border border-gray-200 p-6 text-center hover:shadow-md transition-shadow"
-            >
-              <div className="text-2xl lg:text-3xl font-bold text-cyan-500">
-                <CountUpNumber end={stat.value} />
-              </div>
-              <p className="mt-2 text-sm text-gray-600">{stat.label}</p>
-            </motion.div>
-          ))}
+          </div>
+          <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
+            <BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
+            <div className="mx-auto h-[420px] max-w-[640px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-36">
+              <img
+                src="/src/images/desktop.png"
+                alt="Mycelium Cloud dashboard preview"
+                className="mx-auto w-full max-w-[640px]"
+                width={1366}
+                height={768}
+              />
+            </div>
+          </div>
        </div>
      </Container>
-    </section>
+    </div>
  )
 }
--- a/src/pages/cloud/CloudOverview.tsx
+++ b/src/pages/cloud/CloudOverview.tsx
@@ -0,0 +1,65 @@
+import { CircleBackground } from '../../components/CircleBackground'
+import { Container } from '../../components/Container'
+
+const focusAreas = [
+  {
+    title: 'Sovereign by Design',
+    description:
+      'Control jurisdiction, residency, and governance for every workload with transparent, verifiable operations.',
+  },
+  {
+    title: 'Secure by Default',
+    description:
+      'Cryptographic verification, secure boot, and zero-image delivery protect the entire lifecycle automatically.',
+  },
+  {
+    title: 'Ready to Scale',
+    description:
+      'Autonomous orchestration keeps the platform elastic, cost-efficient, and always available across the globe.',
+  },
+]
+
+export function CloudOverview() {
+  return (
+    <section className="relative overflow-hidden bg-gray-900 py-24 lg:py-32">
+      <div className="pointer-events-none absolute inset-0">
+        <CircleBackground
+          color="#06b6d4"
+          className="absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 opacity-40"
+        />
+        <CircleBackground
+          color="#22d3ee"
+          className="absolute -top-24 right-1/4 h-[420px] w-[420px] opacity-30 sm:opacity-40"
+        />
+      </div>
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl text-center">
+          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">
+            Mycelium Cloud
+          </p>
+          <h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
+            A sovereign, self-healing cloud built for trusted automation.
+          </h2>
+          <p className="mt-6 text-lg text-gray-300">
+            Run critical workloads on a programmable substrate that keeps data private, compute deterministic, and operations autonomous.
+          </p>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {focusAreas.map((item) => (
+            <div
+              key={item.title}
+              className="rounded-3xl border border-white/10 bg-white/5 p-8 text-left shadow-[0_20px_60px_-40px_rgba(6,182,212,0.6)] backdrop-blur"
+            >
+              <div className="text-base font-semibold text-cyan-200">
+                {item.title}
+              </div>
+              <p className="mt-4 text-sm leading-relaxed text-gray-200">
+                {item.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/cloud/CloudPage.tsx
+++ b/src/pages/cloud/CloudPage.tsx
@@ -1,42 +1,28 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { CloudHero } from './CloudHero'
-import { FeaturesSection } from './FeaturesSection'
-import { MyceliumNetworking } from './MyceliumNetworking'
-import { WebGateway } from './WebGateway'
-import { MultiMaster } from './MultiMaster'
-import { LoadBalancing } from './LoadBalancing'
+import { CloudOverview } from './CloudOverview'
+import { ComputeStorageSplit } from './ComputeStorageSplit'
+import { SecurityPillars } from './SecurityPillars'
 import { CloudCTA } from './CloudCTA'

 export default function CloudPage() {
  return (
-    <div>
+    <>
      <AnimatedSection>
        <CloudHero />
      </AnimatedSection>
-      
      <AnimatedSection>
-        <FeaturesSection />
+        <CloudOverview />
      </AnimatedSection>
-
      <AnimatedSection>
-        <MyceliumNetworking />
+        <ComputeStorageSplit />
      </AnimatedSection>
-
      <AnimatedSection>
-        <WebGateway />
+        <SecurityPillars />
      </AnimatedSection>
-
-      <AnimatedSection>
-        <MultiMaster />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <LoadBalancing />
-      </AnimatedSection>
-
      <AnimatedSection>
        <CloudCTA />
      </AnimatedSection>
-    </div>
+    </>
  )
 }
--- a/src/pages/cloud/ComputeStorageSplit.tsx
+++ b/src/pages/cloud/ComputeStorageSplit.tsx
@@ -0,0 +1,144 @@
+import { Container } from '../../components/Container'
+
+const computeFeatures = [
+  {
+    title: 'Deterministic Deployments',
+    description:
+      'Cryptographic verification ensures every workload deploys exactly as intended—no tampering, no drift.',
+  },
+  {
+    title: 'Self-Managing & Stateless Infrastructure',
+    description:
+      'Fully autonomous infrastructure that scales globally without manual intervention.',
+  },
+  {
+    title: 'Zero-Image Technology (100x Compression)',
+    description:
+      'Metadata-driven zero-images cut artifacts up to 100x, slashing bandwidth and deployment overhead.',
+  },
+  {
+    title: 'Smart Contract-Based Deployment',
+    description:
+      'Cryptographically signed contracts orchestrate every workload with transparent, tamper-proof execution.',
+  },
+  {
+    title: 'Multi-Workload Compatibility with Secure Boot',
+    description:
+      'Run containers, VMs, and Linux workloads anywhere with stateless secure boot and continuous verification.',
+  },
+]
+
+const storageFeatures = [
+  {
+    title: 'Quantum-Safe Storage (QSS)',
+    description:
+      'Quantum-resistant encryption secures data beyond the app layer so ownership and control stay yours.',
+  },
+  {
+    title: 'Self-Healing Storage System',
+    description:
+      'Autonomous recovery heals failures or corruption instantly, preserving integrity without human intervention.',
+  },
+  {
+    title: 'Multi-Protocol Data Access',
+    description:
+      'Serve the same data via IPFS, S3, WebDAV, HTTP, and native file systems for seamless integration.',
+  },
+  {
+    title: 'Geo-Aware Data Placement & Replication',
+    description:
+      'Define residency, redundancy, and distribution per workload while zone-to-zone replication hardens resilience.',
+  },
+  {
+    title: 'Ultra-Efficient Zero-Images (Flists)',
+    description:
+      'Metadata-only flists shrink images up to 100x, replacing heavy VMs and powering instant Zero-OS deployments.',
+  },
+]
+
+export function ComputeStorageSplit() {
+  return (
+    <section className="relative overflow-hidden bg-white">
+      <div className="absolute inset-0 bg-gradient-to-br from-cyan-50 via-white to-slate-50" />
+      <Container className="relative py-24 lg:py-32">
+        <div className="grid gap-12 lg:grid-cols-12 lg:gap-16">
+          <div className="flex flex-col items-center gap-10 text-center lg:col-span-5 lg:items-center lg:text-center">
+            <div className="max-w-xs">
+              <p className="text-xs font-semibold uppercase tracking-[0.35em] text-cyan-500">
+                Compute
+              </p>
+              <h2 className="mt-4 text-3xl font-medium tracking-tight text-gray-900">
+                Deterministic compute fabric.
+              </h2>
+              <p className="mt-4 text-sm text-gray-500">
+                Launch workloads with cryptographic certainty and autonomous operations.
+              </p>
+            </div>
+            <ul className="grid w-full gap-4">
+              {computeFeatures.map((item) => (
+                <li
+                  key={item.title}
+                  className="flex flex-col gap-1 rounded-2xl border border-cyan-100 bg-white/80 p-4 text-center transition hover:border-cyan-400/70 hover:bg-cyan-50/60 dark:bg-white/10"
+                >
+                  <span className="text-sm font-semibold text-gray-900">
+                    {item.title}
+                  </span>
+                  <span
+                    className="text-xs text-gray-500 leading-relaxed"
+                    style={{
+                      display: '-webkit-box',
+                      WebkitLineClamp: 2,
+                      WebkitBoxOrient: 'vertical',
+                      overflow: 'hidden',
+                    }}
+                  >
+                    {item.description}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="hidden lg:flex lg:col-span-2 lg:items-center lg:justify-center">
+            <span className="h-full w-px bg-gradient-to-b from-transparent via-cyan-200 to-transparent" />
+          </div>
+          <div className="flex flex-col items-center gap-10 text-center lg:col-span-5 lg:items-center lg:text-center">
+            <div className="max-w-xs">
+              <p className="text-xs font-semibold uppercase tracking-[0.35em] text-slate-500">
+                Storage
+              </p>
+              <h2 className="mt-4 text-3xl font-medium tracking-tight text-gray-900">
+                Quantum-safe, sovereign data plane.
+              </h2>
+              <p className="mt-4 text-sm text-gray-500">
+                Protect and place data precisely while keeping access effortless.
+              </p>
+            </div>
+            <ul className="grid w-full gap-4">
+              {storageFeatures.map((item) => (
+                <li
+                  key={item.title}
+                  className="flex flex-col gap-1 rounded-2xl border border-slate-200 bg-white/80 p-4 text-center transition hover:border-cyan-400/60 hover:bg-cyan-50/40 dark:bg-white/10"
+                >
+                  <span className="text-sm font-semibold text-gray-900">
+                    {item.title}
+                  </span>
+                  <span
+                    className="text-xs text-gray-500 leading-relaxed"
+                    style={{
+                      display: '-webkit-box',
+                      WebkitLineClamp: 2,
+                      WebkitBoxOrient: 'vertical',
+                      overflow: 'hidden',
+                    }}
+                  >
+                    {item.description}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/cloud/FeaturesSection.tsx
+++ b/src/pages/cloud/FeaturesSection.tsx
@@ -1,75 +0,0 @@
-import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
-
-const features = [
-  {
-    icon: '☁️',
-    title: 'Cloud-Native Architecture',
-    description: 'Built for the cloud with support for all major cloud providers and on-premise deployments.',
-  },
-  {
-    icon: '🛡️',
-    title: 'Enterprise Security',
-    description: 'Advanced security features including RBAC, network policies, and compliance monitoring.',
-  },
-  {
-    icon: '📊',
-    title: 'Real-time Monitoring',
-    description: 'Comprehensive monitoring and alerting with detailed metrics and performance insights.',
-  },
-  {
-    icon: '🚀',
-    title: 'One-Click Deployments',
-    description: 'Streamlined deployment process with automated CI/CD pipelines and rollback capabilities.',
-  },
-  {
-    icon: '👥',
-    title: 'Team Collaboration',
-    description: 'Built-in collaboration tools for teams with role-based access and shared workspaces.',
-  },
-  {
-    icon: '⚙️',
-    title: 'Advanced Configuration',
-    description: 'Flexible configuration management with support for Helm charts and custom resources.',
-  },
-]
-
-export function FeaturesSection() {
-  return (
-    <section className="bg-gray-50 py-20 lg:py-32">
-      <Container>
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.8 }}
-          className="text-center mb-16"
-        >
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-            Everything You Need to Succeed
-          </h2>
-          <p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
-            Powerful tools and features designed for modern cloud-native applications
-          </p>
-        </motion.div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {features.map((feature, index) => (
-            <motion.div
-              key={feature.title}
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
-              className="rounded-2xl bg-white border border-gray-200 p-8 hover:border-cyan-500 hover:shadow-lg transition-all duration-300 text-center"
-            >
-              <div className="text-4xl mb-4">{feature.icon}</div>
-              <h3 className="text-xl font-semibold text-gray-900 mb-3">{feature.title}</h3>
-              <p className="text-gray-600">{feature.description}</p>
-            </motion.div>
-          ))}
-        </div>
-      </Container>
-    </section>
-  )
-}
--- a/src/pages/cloud/LoadBalancing.tsx
+++ b/src/pages/cloud/LoadBalancing.tsx
@@ -1,52 +0,0 @@
-import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
-
-export function LoadBalancing() {
-  return (
-    <section className="bg-gray-50 py-20 lg:py-32">
-      <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Visual Placeholder */}
-          <motion.div
-            initial={{ opacity: 0, x: -20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="relative aspect-square rounded-2xl bg-gradient-to-br from-blue-50 to-cyan-50 border border-gray-200 flex items-center justify-center"
-          >
-            <div className="text-center p-8">
-              <div className="text-6xl mb-4">⚖️</div>
-              <p className="text-gray-600">Auto-scaling & Load Balancing</p>
-            </div>
-          </motion.div>
-
-          {/* Content */}
-          <motion.div
-            initial={{ opacity: 0, x: 20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-          >
-            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-              Effortless Load Balancing & Scaling
-            </h2>
-            <p className="mt-6 text-lg text-gray-600">
-              Mycelium Cloud automatically balances traffic and scales your services up or down based on demand. Enjoy high availability and optimal performance with zero manual intervention.
-            </p>
-            <div className="mt-6 flex flex-wrap gap-3">
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Auto-scaling
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Built-in load balancing
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                High availability
-              </span>
-            </div>
-          </motion.div>
-        </div>
-      </Container>
-    </section>
-  )
-}
--- a/src/pages/cloud/MultiMaster.tsx
+++ b/src/pages/cloud/MultiMaster.tsx
@@ -1,52 +0,0 @@
-import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
-
-export function MultiMaster() {
-  return (
-    <section className="bg-white py-20 lg:py-32">
-      <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Content */}
-          <motion.div
-            initial={{ opacity: 0, x: -20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-          >
-            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-              Multi-Master Clusters
-            </h2>
-            <p className="mt-6 text-lg text-gray-600">
-              High-availability Kubernetes clusters with multiple control plane nodes. Automatic failover, leader election, and zero-downtime upgrades built-in.
-            </p>
-            <div className="mt-6 flex flex-wrap gap-3">
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                HA Control Plane
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Automatic Failover
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Zero-downtime Upgrades
-              </span>
-            </div>
-          </motion.div>
-
-          {/* Visual Placeholder */}
-          <motion.div
-            initial={{ opacity: 0, x: 20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="relative aspect-square rounded-2xl bg-gradient-to-br from-cyan-50 to-blue-50 border border-gray-200 flex items-center justify-center"
-          >
-            <div className="text-center p-8">
-              <div className="text-6xl mb-4">⚡</div>
-              <p className="text-gray-600">High Availability Clusters</p>
-            </div>
-          </motion.div>
-        </div>
-      </Container>
-    </section>
-  )
-}
--- a/src/pages/cloud/MyceliumNetworking.tsx
+++ b/src/pages/cloud/MyceliumNetworking.tsx
@@ -1,49 +0,0 @@
-import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
-
-export function MyceliumNetworking() {
-  return (
-    <section className="bg-white py-20 lg:py-32">
-      <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Content */}
-          <motion.div
-            initial={{ opacity: 0, x: -20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-          >
-            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-              Mycelium Networking
-            </h2>
-            <p className="mt-6 text-lg text-gray-600">
-              Ultra-fast, decentralized networking inspired by nature. Mycelium Networking forms a resilient, adaptive mesh that routes around failures and optimizes for speed and security.
-            </p>
-            <div className="mt-6 flex flex-wrap gap-3">
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                End-to-end encrypted
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Nature-inspired
-              </span>
-            </div>
-          </motion.div>
-
-          {/* Visual Placeholder */}
-          <motion.div
-            initial={{ opacity: 0, x: 20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="relative aspect-square rounded-2xl bg-gradient-to-br from-cyan-50 to-blue-50 border border-gray-200 flex items-center justify-center"
-          >
-            <div className="text-center p-8">
-              <div className="text-6xl mb-4">🕸️</div>
-              <p className="text-gray-600">Decentralized Mesh Network</p>
-            </div>
-          </motion.div>
-        </div>
-      </Container>
-    </section>
-  )
-}
--- a/src/pages/cloud/SecurityPillars.tsx
+++ b/src/pages/cloud/SecurityPillars.tsx
@@ -0,0 +1,62 @@
+import { CircleBackground } from '../../components/CircleBackground'
+import { Container } from '../../components/Container'
+
+const pillars = [
+  {
+    title: 'Provable Sovereignty',
+    description:
+      'Assign workloads to trusted zones, verify state with cryptographic proofs, and maintain full lineage for every byte.',
+  },
+  {
+    title: 'Autonomous Zero-Trust',
+    description:
+      'Identity, policy, and attestation are enforced continuously—no manual keys, no hidden backdoors, no shared control.',
+  },
+  {
+    title: 'Planetary-Scale Resilience',
+    description:
+      'Mesh-connected infrastructure routes around failure, keeping applications responsive even when regions go dark.',
+  },
+]
+
+export function SecurityPillars() {
+  return (
+    <section className="relative overflow-hidden bg-gray-900 py-24 lg:py-32">
+      <div className="pointer-events-none absolute inset-0">
+        <CircleBackground
+          color="#22d3ee"
+          className="absolute -top-20 left-1/2 h-[520px] w-[520px] -translate-x-1/2 opacity-30"
+        />
+        <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-gray-900 to-transparent" />
+      </div>
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl text-center">
+          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">
+            Sovereign Architecture
+          </p>
+          <h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
+            Built for security, trust, and unstoppable continuity.
+          </h2>
+          <p className="mt-6 text-lg text-gray-300">
+            Every control surface is auditable and automated, enabling critical workloads to run with confidence.
+          </p>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {pillars.map((pillar) => (
+            <div
+              key={pillar.title}
+              className="rounded-3xl border border-white/10 bg-white/5 p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-400/60"
+            >
+              <div className="text-lg font-semibold text-white">
+                {pillar.title}
+              </div>
+              <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                {pillar.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/cloud/WebGateway.tsx
+++ b/src/pages/cloud/WebGateway.tsx
@@ -1,52 +0,0 @@
-import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
-
-export function WebGateway() {
-  return (
-    <section className="bg-gray-50 py-20 lg:py-32">
-      <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Visual Placeholder */}
-          <motion.div
-            initial={{ opacity: 0, x: -20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="relative aspect-square rounded-2xl bg-gradient-to-br from-blue-50 to-cyan-50 border border-gray-200 flex items-center justify-center"
-          >
-            <div className="text-center p-8">
-              <div className="text-6xl mb-4">🌐</div>
-              <p className="text-gray-600">Simple Web Gateway</p>
-            </div>
-          </motion.div>
-
-          {/* Content */}
-          <motion.div
-            initial={{ opacity: 0, x: 20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-          >
-            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-              Simple Web Gateway Access
-            </h2>
-            <p className="mt-6 text-lg text-gray-600">
-              Expose any service to the public web with a simple Kubernetes resource. No complex Ingress controllers. Domain and prefix-based routing is built-in.
-            </p>
-            <div className="mt-6 flex flex-wrap gap-3">
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Simple configuration
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Built-in routing
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                No ingress controllers
-              </span>
-            </div>
-          </motion.div>
-        </div>
-      </Container>
-    </section>
-  )
-}
--- a/src/pages/network/AppScreen.tsx
+++ b/src/pages/network/AppScreen.tsx
@@ -0,0 +1,109 @@
+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-0">
+        <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/pages/network/Hero.tsx
+++ b/src/pages/network/Hero.tsx
@@ -78,7 +78,7 @@ export function Hero() {
        <div className="flex flex-col-reverse gap-y-16 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 lg:text-6xl font-medium tracking-tight text-gray-900">
-              Mycelium
+              Mycelium Network
            </h1>
            <h2 className="mt-6 lg:text-2xl text-xl tracking-tight leading-normal text-gray-600">
              Unleashing the Power of Decentralized Networks
@@ -86,9 +86,6 @@ export function Hero() {
            <p className="mt-6 lg:text-xl text-lg text-gray-600 lg:leading-normal leading-tight">
              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">
              <Button to="/download" variant="solid" color="cyan">
                Get Mycelium
--- a/src/pages/network/PrimaryFeatures.tsx
+++ b/src/pages/network/PrimaryFeatures.tsx
@@ -1,28 +1,440 @@
-import { Container } from '../../components/Container'
+'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 './AppScreen'
+import {
+  Eyebrow,
+  FeatureDescription,
+  FeatureTitle,
+  MobileFeatureTitle,
+  P,
+  SectionHeader,
+} from '@/components/Texts'
+import { CircleBackground } from '@/components/CircleBackground'
+import { Container } from '@/components/Container'
+
+import connectorImg from '@/images/connector.png'
+import peersImg from '@/images/peers.png'
+import settingImg from '@/images/setting.png'
+import { PhoneFrame } from '@/components/PhoneFrame'
+
+
+interface CustomAnimationProps {
+  isForwards: boolean
+  changeCount: number
+}
+
+const features = [
+  {
+    name: 'Mycelium Connector',
+    description:
+      "Start (and stop) your Mycelium connector to gain access to sites, apps, and workloads available exclusively on the Mycelium Network. View statistics around peers and traffic.",
+    icon: DeviceUserIcon,
+    screen: InviteScreen,
+  },
+  {
+    name: 'Mycelium Peers',
+    description:
+      'Search and discover active peers on the Mycelium Network, or add your own.',
+    icon: DeviceNotificationIcon,
+    screen: StocksScreen,
+  },
+  {
+    name: 'Network Setting',
+    description:
+      'Find version and network information and trigger light or dark mode.',
+    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 bodyAnimation: MotionProps = {
+  initial: 'initial',
+  animate: 'animate',
+  exit: 'exit',
+  variants: {
+    initial: (custom: CustomAnimationProps) => (
+      custom.isForwards
+        ? {
+            y: '100%',
+            zIndex: maxZIndex - custom.changeCount,
+            transition: { duration: 0.4 },
+          }
+        : 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) => (
+      custom.isForwards
+        ? bodyVariantBackwards
+        : {
+            y: '100%',
+            zIndex: maxZIndex - custom.changeCount,
+            transition: { duration: 0.4 },
+          }
+    ),
+  },
+}
+
+
+function InviteScreen() {
+  return (
+    <AppScreen className="w-full">
+      <img src={connectorImg} alt="Mycelium Connector" width="366" height="732" className="mt-[-2rem]" />
+    </AppScreen>
+  )
+}
+
+function StocksScreen() {
+  return (
+    <AppScreen className="w-full">
+      <img src={peersImg} alt="Mycelium Peers" width="366" height="732" className="mt-[-2rem]" />
+    </AppScreen>
+  )
+}
+
+function InvestScreen() {
+  return (
+    <AppScreen className="w-full">
+      <img src={settingImg} alt="Mycelium Settings" width="366" height="732" className="mt-[-2rem]" />
+    </AppScreen>
+  )
+}
+
+function usePrevious<T>(value: T) {
+  const 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: number) => {
+      setSelectedIndex(selectedIndex)
+      setChangeCount((changeCount) => changeCount + 1)
+    },
+    100,
+    { leading: true },
+  )
+
+  return (
+    <TabGroup
+      className="grid grid-cols-12 items-center gap-8 lg:gap-16"
+      selectedIndex={selectedIndex}
+      onChange={onChange}
+      vertical
+    >
+      <TabList className="z-10 order-last col-span-6 space-y-6">
+        {features.map((feature, featureIndex) => (
+          <div
+            key={feature.name}
+            className={clsx(
+              'relative rounded-2xl outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30',
+              selectedIndex === featureIndex
+                ? 'outline-cyan-500'
+                : 'outline-transparent hover:outline-cyan-500',
+            )}
+          >
+            {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" />
+              <FeatureTitle as="h3" color="white" className="mt-6">
+                <Tab className="text-left data-selected:not-data-focus:outline-hidden">
+                  <span className="absolute inset-0 rounded-2xl" />
+                  {feature.name}
+                </Tab>
+              </FeatureTitle>
+              <FeatureDescription color="secondary" className="mt-2">
+                {feature.description}
+              </FeatureDescription>
+            </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 id="primaryfeatures_desktop_circle" 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"
+                  >
+                    <motion.div {...bodyAnimation} custom={{ isForwards, changeCount }}>
+                      <feature.screen />
+                    </motion.div>
+                  </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) => ref && (slideRefs.current[featureIndex] = ref)}
+            className="w-full flex-none snap-center px-4 sm:px-6 transition-all duration-300 ease-in-out hover:scale-105"
+          >
+                        <div
+              className={clsx(
+                'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
+                activeIndex === featureIndex
+                  ? 'outline-transparent' // Remove outline for active mobile slide
+                  : 'outline-transparent hover:outline-cyan-500',
+              )}
+            >
+              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                                <CircleBackground
+                  id={`primaryfeatures_mobile_circle_${featureIndex}`}
+                  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" />
+                <MobileFeatureTitle color="white" className="mt-6">
+                  {feature.name}
+                </MobileFeatureTitle>
+                <FeatureDescription color="secondary" className="mt-2">
+                  {feature.description}
+                </FeatureDescription>
+              </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="howitworks"
-      aria-label="How Mycelium works"
+      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-base/7 font-semibold text-cyan-500">How It Works</h2>
-          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
+          <Eyebrow color="accent">How It Works</Eyebrow>
+          <SectionHeader color="white" className="mt-2">
            How Mycelium Operates
-          </p>
-          <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>
-        <div className="mt-16 text-center">
-          <p className="text-lg text-gray-400">
-            Interactive features demonstration coming soon...
-          </p>
+          </SectionHeader>
+          <P color="light" className="mt-6">
+            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/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1,5 +1,22 @@
@import 'tailwindcss';

+@theme {
+  --animate-scroll: scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite;
+
+  @keyframes scroll {
+    to {
+      transform: translate(calc(-50% - 0.5rem));
+    }
+  }
+
+  --animate-pulse-slow: pulse 6s ease-in-out infinite;
+
+  @keyframes pulse {
+    '0%, 100%': { opacity: '1' },
+    '50%': { opacity: '0.6' }
+  }
+}
+
@plugin '@tailwindcss/forms';

@theme {
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,6 +1,10 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,13 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import path from 'node:path'

 // https://vite.dev/config/
 export default defineConfig({
  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
 })
Author	SHA1	Message	Date
Emre	4c30524504	new cloud page	2025-10-23 13:07:24 +03:00
sasha-astiadi	48979de1c7	feat: add video previews and text components to agent showcase sections	2025-10-22 18:14:41 +02:00
sasha-astiadi	31f5e53a71	feat: add responsive carousel and dark theme to agents gallery section	2025-10-22 18:04:52 +02:00
sasha-astiadi	8ea15271d3	refactor: update deploy section UI with dark theme and hover animations	2025-10-22 17:51:43 +02:00
sasha-astiadi	f30006a983	chore: delete unused icon.svg file	2025-10-22 17:34:12 +02:00
sasha-astiadi	044f9cf38b	feat: add InfiniteMovingCards component with customizable scroll animation	2025-10-22 17:33:52 +02:00
sasha-astiadi	5bd2459855	chore: update dependencies and add new UI packages for icons and animations	2025-10-22 17:33:42 +02:00
sasha-astiadi	6c0ed3cd65	feat: add interactive stacked cube components with hover descriptions	2025-10-22 17:33:29 +02:00
sasha-astiadi	fa0a55d846	feat: add logo components for various AI providers using @lobehub/icons	2025-10-22 17:32:46 +02:00
sasha-astiadi	886e7557df	chore: update dependencies and add new mobile-first features page with interactive demos	2025-10-22 17:10:31 +02:00