new cloud page

package.json

@@ -10,34 +10,44 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@headlessui/react": "^2.1.0",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/postcss": "^4.1.7",
-    "@types/node": "^20.10.8",
-    "@types/react": "^18.2.47",
-    "@types/react-dom": "^18.2.18",
+    "@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",
     "cobe": "^0.6.5",
-    "framer-motion": "^10.15.0",
-    "react": "^18.2.0",
+    "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.2.0",
+    "react-dom": "^18.3.1",
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.9.4",
     "react-type-animation": "^3.2.0",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.7",
-    "typescript": "^5.3.3",
+    "tailwindcss": "^4.1.15",
+    "typescript": "^5.9.3",
     "use-debounce": "^10.0.6"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.15",
     "@vitejs/plugin-react": "^5.0.4",
     "autoprefixer": "^10.4.20",
-    "eslint": "^8.56.0",
-    "prettier": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "sharp": "0.33.1",
+    "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"
   }
 }

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>
+  )
+}
+

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">

src/components/Texts.tsx

@@ -145,3 +145,6 @@ 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')

src/components/logos/Ai21.tsx

@@ -0,0 +1,3 @@
+import { Ai21 } from '@lobehub/icons';
+
+export default () => <Ai21.Brand size={30} />;

src/components/logos/AlibabaCloud.tsx

@@ -0,0 +1,3 @@
+import { AlibabaCloud } from '@lobehub/icons';
+
+export default () => <AlibabaCloud.Text size={30} />;

src/components/logos/BaiduCloud.tsx

@@ -0,0 +1,3 @@
+import { BaiduCloud } from '@lobehub/icons';
+
+export default () => <BaiduCloud.Combine size={30} />;

src/components/logos/ByteDance.tsx

@@ -0,0 +1,3 @@
+import { ByteDance } from '@lobehub/icons';
+
+export default () => <ByteDance.Text size={30} />;

src/components/logos/Claude.tsx

@@ -0,0 +1,3 @@
+import { Claude } from '@lobehub/icons';
+
+export default () => <Claude.Combine size={30} />;

src/components/logos/DeepMind.tsx

@@ -0,0 +1,3 @@
+import { DeepMind } from '@lobehub/icons';
+
+export default () => <DeepMind.Combine size={30} />;

src/components/logos/DeepSeek.tsx

@@ -0,0 +1,3 @@
+import { DeepSeek } from '@lobehub/icons';
+
+export default () => <DeepSeek.Combine size={30} />;

src/components/logos/Minimax.tsx

@@ -0,0 +1,3 @@
+import { Minimax } from '@lobehub/icons';
+
+export default () => <Minimax.Combine size={30} />;

src/components/logos/Mistral.tsx

@@ -0,0 +1,3 @@
+import { Mistral } from '@lobehub/icons';
+
+export default () => <Mistral.Combine size={30} />;

src/components/logos/Moonshot.tsx

@@ -0,0 +1,3 @@
+import { Moonshot } from '@lobehub/icons';
+
+export default () => <Moonshot.Combine size={30} />;

src/components/logos/OpenAI.tsx

@@ -0,0 +1,3 @@
+import { OpenAI } from '@lobehub/icons';
+
+export default () => <OpenAI.Combine size={30} />;

src/components/logos/TencentCloud.tsx

@@ -0,0 +1,3 @@
+import { TencentCloud } from '@lobehub/icons';
+
+export default () => <TencentCloud.Combine size={30} />;

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;

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>
+  );
+};

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>
+  );
+}

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>
+  );
+}

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>
+  )
+}

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>
+  )
+}

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>
+  );
+}

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>
+  );
+}

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);

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;

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
+}

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;
+};

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 }
+}

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 />

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>

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>
+  );
+}

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>
   )
 }

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>
+  );
 }

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>
   )

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>
   )
 }

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>
+  )
+}

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>
+    </>
   )
 }

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>
+  )
+}

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>
-  )
-}

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>
-  )
-}

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>
-  )
-}

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>
-  )
-}

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>
+  )
+}

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>
-  )
-}

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

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 {