style: reduce header padding from 8 to 4 units for more compact layout

package.json

@@ -28,8 +28,6 @@
     "framer-motion": "^10.18.0",
     "lucide-react": "^0.544.0",
     "motion": "^12.23.24",
-    "next": "^14.2.33",
-    "next-themes": "^0.4.6",
     "popmotion": "^11.0.5",
     "react": "^18.3.1",
     "react-countup": "^6.5.3",
@@ -49,7 +47,6 @@
     "@vitejs/plugin-react": "^5.0.4",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.1",
-    "eslint-config-next": "^14.2.33",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "sharp": "^0.33.1",

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="text-base font-semibold">Project Mycelium</p>
-                <p className="mt-1 text-sm">Unleash the Power of Decentralized Networks</p>
+                <p className="mt-1 text-sm">Unleash the Power of Decentralization</p>
               </div>
             </div>
             <nav className="mt-10 flex gap-8">

src/components/Header.tsx

@@ -1,67 +1,44 @@
-'use client'
-
-
-import { useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { AnimatePresence, motion } from 'framer-motion'
+import { Container } from './Container'
-import clsx from 'clsx'
 import { Button } from './Button'
 
-
+export function Header() {
-function NavLinks() {
-  let [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
-  let timeoutRef = useRef<number | null>(null)
-
-
   return (
-    <div className="flex items-center gap-x-5">
+    <header>
-      <Link to="/" aria-label="Home">
+      <nav>
-        <img src="/src/images/logomark.svg" alt="Mycelium" className="h-10 w-auto" />
+                <Container className="relative z-50 flex justify-between py-4">
-      </Link>
+          <div className="relative z-10 flex items-center gap-16">
-      <div className="flex items-center gap-x-5 border-l border-white/10 pl-5">
+            <Link to="/" aria-label="Home">
-        {[
+              <img src="/src/images/logomark.svg" alt="Mycelium" className="h-10 w-auto" />
-          ['Home', '/'],
+            </Link>
-          ['Cloud', '/cloud'],
+            <div className="hidden lg:flex lg:gap-10">
-          ['Network', '/network'],
+              <Link
-          ['Agents', '/agents'],
+                to="/"
-        ].map(([label, href], index) => (
+                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
-          <Link
+              >
-            key={label}
+                Home
-            to={href}
+              </Link>
-            className={clsx(
+              <Link
-              'relative rounded-lg px-3 py-2 text-sm text-black transition-colors delay-150 hover:text-cyan-500 hover:delay-0',
+                to="/cloud"
-            )}
+                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
-            onMouseEnter={() => {
+              >
-              if (timeoutRef.current) {
+                Cloud
-                window.clearTimeout(timeoutRef.current)
+              </Link>
-              }
+              <Link
-              setHoveredIndex(index)
+                to="/network"
-            }}
+                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
-            onMouseLeave={() => {
+              >
-              timeoutRef.current = window.setTimeout(() => {
+                Network
-                setHoveredIndex(null)
+              </Link>
-              }, 200)
+              <Link
-            }}
+                to="/agents"
-          >
+                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
-            <AnimatePresence>
+              >
-              {hoveredIndex === index && (
+                Agents
-                <motion.span
+              </Link>
-                  className="absolute inset-0 rounded-lg bg-white/10"
+            </div>
-                  layoutId="hoverBackground"
+          </div>
-                  initial={{ opacity: 0 }}
+          <div className="flex items-center gap-6">
-                  animate={{ opacity: 1, transition: { duration: 0.15 } }}
-                  exit={{
-                    opacity: 0,
-                    transition: { duration: 0.15 },
-                  }}
-                />
-              )}
-            </AnimatePresence>
-            <span className="relative z-10">{label}</span>
-          </Link>
-        ))}
-      </div>
-       <div className="flex items-center gap-8">
             <div className="flex items-center gap-6 max-lg:hidden">
               <Button
                 to="https://threefold.info/mycelium_network/docs/"
@@ -77,48 +54,8 @@ function NavLinks() {
               </Button>
             </div>
           </div>
-    </div>
+        </Container>
-  )
+      </nav>
-}
+    </header>
-
-
-export function Header() {
-  const [isVisible, setIsVisible] = useState(true);
-  const [lastScrollY, setLastScrollY] = useState(0);
-
-
-  const controlHeader = () => {
-    if (typeof window !== 'undefined') {
-      if (window.scrollY > lastScrollY && window.scrollY > 100) { // Hides when scrolling down past 100px
-        setIsVisible(false);
-      } else { // Shows when scrolling up
-        setIsVisible(true);
-      }
-      setLastScrollY(window.scrollY);
-    }
-  };
-
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      window.addEventListener('scroll', controlHeader);
-      return () => {
-        window.removeEventListener('scroll', controlHeader);
-      };
-    }
-  }, [lastScrollY]);
-
-
-  return (
-    <motion.header 
-      className="fixed top-4 left-0 right-0 z-50 flex justify-center"
-      initial={{ y: 0, opacity: 1 }}
-      animate={{ y: isVisible ? 0 : -100, opacity: isVisible ? 1 : 0 }}
-      transition={{ duration: 0.3, ease: 'easeInOut' }}
-    >
-      <div className="rounded-full bg-white/10 px-5 py-3 shadow-lg ring-1 ring-white/10 backdrop-blur-sm">
-        <NavLinks />
-      </div>
-    </motion.header>
   )
 }

src/components/Layout.tsx

@@ -1,20 +1,13 @@
 import { Outlet } from 'react-router-dom'
-import { FloatingNav } from './ui/floating-navbar'
 import { Footer } from './Footer'
 import { Header } from './Header'
 
 export function Layout() {
-  const navItems = [
-    { name: 'Home', link: '/' },
-    { name: 'Cloud', link: '/cloud' },
-    { name: 'Network', link: '/network' },
-    { name: 'Agents', link: '/agents' },
-  ];
 
   return (
     <div className="bg-white antialiased" style={{ fontFamily: 'var(--font-inter)' }}>
       <Header />
-      <main>
+            <main className="">
         <Outlet />
       </main>
       <Footer />

src/components/features-section-demo-1.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import { useId } from "react";
+
+export default function FeaturesSectionDemo() {
+  return (
+    <div className="py-20 lg:py-40">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 md:gap-2 max-w-7xl mx-auto">
+        {grid.map((feature) => (
+          <div
+            key={feature.title}
+            className="relative bg-gradient-to-b dark:from-neutral-900 from-neutral-100 dark:to-neutral-950 to-white p-6 rounded-3xl overflow-hidden"
+          >
+            <Grid size={20} />
+            <p className="text-base font-bold text-neutral-800 dark:text-white relative z-20">
+              {feature.title}
+            </p>
+            <p className="text-neutral-600 dark:text-neutral-400 mt-4 text-base font-normal relative z-20">
+              {feature.description}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const grid = [
+  {
+    title: "HIPAA and SOC2 Compliant",
+    description:
+      "Our applications are HIPAA and SOC2 compliant, your data is safe with us, always.",
+  },
+  {
+    title: "Automated Social Media Posting",
+    description:
+      "Schedule and automate your social media posts across multiple platforms to save time and maintain a consistent online presence.",
+  },
+  {
+    title: "Advanced Analytics",
+    description:
+      "Gain insights into your social media performance with detailed analytics and reporting tools to measure engagement and ROI.",
+  },
+  {
+    title: "Content Calendar",
+    description:
+      "Plan and organize your social media content with an intuitive calendar view, ensuring you never miss a post.",
+  },
+  {
+    title: "Audience Targeting",
+    description:
+      "Reach the right audience with advanced targeting options, including demographics, interests, and behaviors.",
+  },
+  {
+    title: "Social Listening",
+    description:
+      "Monitor social media conversations and trends to stay informed about what your audience is saying and respond in real-time.",
+  },
+  {
+    title: "Customizable Templates",
+    description:
+      "Create stunning social media posts with our customizable templates, designed to fit your brand's unique style and voice.",
+  },
+  {
+    title: "Collaboration Tools",
+    description:
+      "Work seamlessly with your team using our collaboration tools, allowing you to assign tasks, share drafts, and provide feedback in real-time.",
+  },
+];
+
+export const Grid = ({
+  pattern,
+  size,
+}: {
+  pattern?: number[][];
+  size?: number;
+}) => {
+  const p = pattern ?? [
+    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
+    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
+    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
+    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
+    [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
+  ];
+  return (
+    <div className="pointer-events-none absolute left-1/2 top-0  -ml-20 -mt-2 h-full w-full [mask-image:linear-gradient(white,transparent)]">
+      <div className="absolute inset-0 bg-gradient-to-r  [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-zinc-900/30 from-zinc-100/30 to-zinc-300/30 dark:to-zinc-900/30 opacity-100">
+        <GridPattern
+          width={size ?? 20}
+          height={size ?? 20}
+          x="-12"
+          y="4"
+          squares={p}
+          className="absolute inset-0 h-full w-full  mix-blend-overlay dark:fill-white/10 dark:stroke-white/10 stroke-black/10 fill-black/10"
+        />
+      </div>
+    </div>
+  );
+};
+
+export function GridPattern({ width, height, x, y, squares, ...props }: any) {
+  const patternId = useId();
+
+  return (
+    <svg aria-hidden="true" {...props}>
+      <defs>
+        <pattern
+          id={patternId}
+          width={width}
+          height={height}
+          patternUnits="userSpaceOnUse"
+          x={x}
+          y={y}
+        >
+          <path d={`M.5 ${height}V.5H${width}`} fill="none" />
+        </pattern>
+      </defs>
+      <rect
+        width="100%"
+        height="100%"
+        strokeWidth={0}
+        fill={`url(#${patternId})`}
+      />
+      {squares && (
+        <svg x={x} y={y} className="overflow-visible">
+          {squares.map(([x, y]: any) => (
+            <rect
+              strokeWidth="0"
+              key={`${x}-${y}`}
+              width={width + 1}
+              height={height + 1}
+              x={x * width}
+              y={y * height}
+            />
+          ))}
+        </svg>
+      )}
+    </svg>
+  );
+}

src/components/features-section-demo-2.tsx

@@ -0,0 +1,109 @@
+import { cn } from "@/lib/utils";
+import {
+  IconAdjustmentsBolt,
+  IconCloud,
+  IconCurrencyDollar,
+  IconEaseInOut,
+  IconHeart,
+  IconHelp,
+  IconRouteAltLeft,
+  IconTerminal2,
+} from "@tabler/icons-react";
+
+export default function FeaturesSectionDemo() {
+  const features = [
+    {
+      title: "Built for developers",
+      description:
+        "Built for engineers, developers, dreamers, thinkers and doers.",
+      icon: <IconTerminal2 />,
+    },
+    {
+      title: "Ease of use",
+      description:
+        "It's as easy as using an Apple, and as expensive as buying one.",
+      icon: <IconEaseInOut />,
+    },
+    {
+      title: "Pricing like no other",
+      description:
+        "Our prices are best in the market. No cap, no lock, no credit card required.",
+      icon: <IconCurrencyDollar />,
+    },
+    {
+      title: "100% Uptime guarantee",
+      description: "We just cannot be taken down by anyone.",
+      icon: <IconCloud />,
+    },
+    {
+      title: "Multi-tenant Architecture",
+      description: "You can simply share passwords instead of buying new seats",
+      icon: <IconRouteAltLeft />,
+    },
+    {
+      title: "24/7 Customer Support",
+      description:
+        "We are available a 100% of the time. Atleast our AI Agents are.",
+      icon: <IconHelp />,
+    },
+    {
+      title: "Money back guarantee",
+      description:
+        "If you donot like EveryAI, we will convince you to like us.",
+      icon: <IconAdjustmentsBolt />,
+    },
+    {
+      title: "And everything else",
+      description: "I just ran out of copy ideas. Accept my sincere apologies",
+      icon: <IconHeart />,
+    },
+  ];
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4  relative z-10 py-10 max-w-7xl mx-auto">
+      {features.map((feature, index) => (
+        <Feature key={feature.title} {...feature} index={index} />
+      ))}
+    </div>
+  );
+}
+
+const Feature = ({
+  title,
+  description,
+  icon,
+  index,
+}: {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  index: number;
+}) => {
+  return (
+    <div
+      className={cn(
+        "flex flex-col lg:border-r  py-10 relative group/feature dark:border-neutral-800",
+        (index === 0 || index === 4) && "lg:border-l dark:border-neutral-800",
+        index < 4 && "lg:border-b dark:border-neutral-800"
+      )}
+    >
+      {index < 4 && (
+        <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
+      )}
+      {index >= 4 && (
+        <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
+      )}
+      <div className="mb-4 relative z-10 px-10 text-neutral-600 dark:text-neutral-400">
+        {icon}
+      </div>
+      <div className="text-lg font-bold mb-2 relative z-10 px-10">
+        <div className="absolute left-0 inset-y-0 h-6 group-hover/feature:h-8 w-1 rounded-tr-full rounded-br-full bg-neutral-300 dark:bg-neutral-700 group-hover/feature:bg-blue-500 transition-all duration-200 origin-center" />
+        <span className="group-hover/feature:translate-x-2 transition duration-200 inline-block text-neutral-800 dark:text-neutral-100">
+          {title}
+        </span>
+      </div>
+      <p className="text-sm text-neutral-600 dark:text-neutral-300 max-w-xs relative z-10 px-10">
+        {description}
+      </p>
+    </div>
+  );
+};

src/components/features-section-demo-3.tsx

@@ -0,0 +1,281 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import createGlobe from "cobe";
+import { useEffect, useRef } from "react";
+import { motion } from "motion/react";
+import { IconBrandYoutubeFilled } from "@tabler/icons-react";
+
+
+export default function FeaturesSectionDemo() {
+  const features = [
+    {
+      title: "Track issues effectively",
+      description:
+        "Track and manage your project issues with ease using our intuitive interface.",
+      skeleton: <SkeletonOne />,
+      className:
+        "col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800",
+    },
+    {
+      title: "Capture pictures with AI",
+      description:
+        "Capture stunning photos effortlessly using our advanced AI technology.",
+      skeleton: <SkeletonTwo />,
+      className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
+    },
+    {
+      title: "Watch our AI on YouTube",
+      description:
+        "Whether its you or Tyler Durden, you can get to know about our product on YouTube",
+      skeleton: <SkeletonThree />,
+      className:
+        "col-span-1 lg:col-span-3 lg:border-r  dark:border-neutral-800",
+    },
+    {
+      title: "Deploy in seconds",
+      description:
+        "With our blazing fast, state of the art, cutting edge, we are so back cloud servies (read AWS) - you can deploy your model in seconds.",
+      skeleton: <SkeletonFour />,
+      className: "col-span-1 lg:col-span-3 border-b lg:border-none",
+    },
+  ];
+  return (
+    <div className="relative z-20 py-10 lg:py-40 max-w-7xl mx-auto">
+      <div className="px-8">
+        <h4 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
+          Packed with thousands of features
+        </h4>
+
+        <p className="text-sm lg:text-base  max-w-2xl  my-4 mx-auto text-neutral-500 text-center font-normal dark:text-neutral-300">
+          From Image generation to video generation, Everything AI has APIs for
+          literally everything. It can even create this website copy for you.
+        </p>
+      </div>
+
+      <div className="relative ">
+        <div className="grid grid-cols-1 lg:grid-cols-6 mt-12 xl:border rounded-md dark:border-neutral-800">
+          {features.map((feature) => (
+            <FeatureCard key={feature.title} className={feature.className}>
+              <FeatureTitle>{feature.title}</FeatureTitle>
+              <FeatureDescription>{feature.description}</FeatureDescription>
+              <div className=" h-full w-full">{feature.skeleton}</div>
+            </FeatureCard>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const FeatureCard = ({
+  children,
+  className,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div className={cn(`p-4 sm:p-8 relative overflow-hidden`, className)}>
+      {children}
+    </div>
+  );
+};
+
+const FeatureTitle = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <p className=" max-w-5xl mx-auto text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug">
+      {children}
+    </p>
+  );
+};
+
+const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <p
+      className={cn(
+        "text-sm md:text-base  max-w-4xl text-left mx-auto",
+        "text-neutral-500 text-center font-normal dark:text-neutral-300",
+        "text-left max-w-sm mx-0 md:text-sm my-2"
+      )}
+    >
+      {children}
+    </p>
+  );
+};
+
+export const SkeletonOne = () => {
+  return (
+    <div className="relative flex py-8 px-2 gap-10 h-full">
+      <div className="w-full  p-5  mx-auto bg-white dark:bg-neutral-900 shadow-2xl group h-full">
+        <div className="flex flex-1 w-full h-full flex-col space-y-2  ">
+          {/* TODO */}
+          <img
+            src="/linear.webp"
+            alt="header"
+            width={800}
+            height={800}
+            className="h-full w-full aspect-square object-cover object-left-top rounded-sm"
+          />
+        </div>
+      </div>
+
+      <div className="absolute bottom-0 z-40 inset-x-0 h-60 bg-gradient-to-t from-white dark:from-black via-white dark:via-black to-transparent w-full pointer-events-none" />
+      <div className="absolute top-0 z-40 inset-x-0 h-60 bg-gradient-to-b from-white dark:from-black via-transparent to-transparent w-full pointer-events-none" />
+    </div>
+  );
+};
+
+export const SkeletonThree = () => {
+  return (
+    <a
+      href="https://www.youtube.com/watch?v=RPa3_AD1_Vs"
+      target="__blank"
+      className="relative flex gap-10  h-full group/image"
+    >
+      <div className="w-full  mx-auto bg-transparent dark:bg-transparent group h-full">
+        <div className="flex flex-1 w-full h-full flex-col space-y-2  relative">
+          {/* TODO */}
+          <IconBrandYoutubeFilled className="h-20 w-20 absolute z-10 inset-0 text-red-500 m-auto " />
+          <img
+            src="https://assets.aceternity.com/fireship.jpg"
+            alt="header"
+            width={800}
+            height={800}
+            className="h-full w-full aspect-square object-cover object-center rounded-sm blur-none group-hover/image:blur-md transition-all duration-200"
+          />
+        </div>
+      </div>
+    </a>
+  );
+};
+
+export const SkeletonTwo = () => {
+  const images = [
+    "https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  ];
+
+  const imageVariants = {
+    whileHover: {
+      scale: 1.1,
+      rotate: 0,
+      zIndex: 100,
+    },
+    whileTap: {
+      scale: 1.1,
+      rotate: 0,
+      zIndex: 100,
+    },
+  };
+  return (
+    <div className="relative flex flex-col items-start p-8 gap-10 h-full overflow-hidden">
+      {/* TODO */}
+      <div className="flex flex-row -ml-20">
+        {images.map((image, idx) => (
+          <motion.div
+            variants={imageVariants}
+            key={"images-first" + idx}
+            style={{
+              rotate: Math.random() * 20 - 10,
+            }}
+            whileHover="whileHover"
+            whileTap="whileTap"
+            className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
+          >
+            <img
+              src={image}
+              alt="bali images"
+              width="500"
+              height="500"
+              className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
+            />
+          </motion.div>
+        ))}
+      </div>
+      <div className="flex flex-row">
+        {images.map((image, idx) => (
+          <motion.div
+            key={"images-second" + idx}
+            style={{
+              rotate: Math.random() * 20 - 10,
+            }}
+            variants={imageVariants}
+            whileHover="whileHover"
+            whileTap="whileTap"
+            className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
+          >
+            <img
+              src={image}
+              alt="bali images"
+              width="500"
+              height="500"
+              className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
+            />
+          </motion.div>
+        ))}
+      </div>
+
+      <div className="absolute left-0 z-[100] inset-y-0 w-20 bg-gradient-to-r from-white dark:from-black to-transparent  h-full pointer-events-none" />
+      <div className="absolute right-0 z-[100] inset-y-0 w-20 bg-gradient-to-l from-white dark:from-black  to-transparent h-full pointer-events-none" />
+    </div>
+  );
+};
+
+export const SkeletonFour = () => {
+  return (
+    <div className="h-60 md:h-60  flex flex-col items-center relative bg-transparent dark:bg-transparent mt-10">
+      <Globe className="absolute -right-10 md:-right-10 -bottom-80 md:-bottom-72" />
+    </div>
+  );
+};
+
+export const Globe = ({ className }: { className?: string }) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    let phi = 0;
+
+    if (!canvasRef.current) return;
+
+    const globe = createGlobe(canvasRef.current, {
+      devicePixelRatio: 2,
+      width: 600 * 2,
+      height: 600 * 2,
+      phi: 0,
+      theta: 0,
+      dark: 1,
+      diffuse: 1.2,
+      mapSamples: 16000,
+      mapBrightness: 6,
+      baseColor: [0.3, 0.3, 0.3],
+      markerColor: [0.1, 0.8, 1],
+      glowColor: [1, 1, 1],
+      markers: [
+        // longitude latitude
+        { location: [37.7595, -122.4367], size: 0.03 },
+        { location: [40.7128, -74.006], size: 0.1 },
+      ],
+      onRender: (state) => {
+        // Called on every animation frame.
+        // `state` will be an empty object, return updated params.
+        state.phi = phi;
+        phi += 0.01;
+      },
+    });
+
+    return () => {
+      globe.destroy();
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{ width: 600, height: 600, maxWidth: "100%", aspectRatio: 1 }}
+      className={className}
+    />
+  );
+};

src/components/ui/CountUpNumber.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import CountUp from 'react-countup'
+import { SectionHeader } from '@/components/Texts'
+
+interface CountUpNumberProps {
+  end: number
+  className?: string
+  color?: 'light' | 'primary' | 'secondary' | 'white'
+}
+
+export function CountUpNumber({ end, className, color }: CountUpNumberProps) {
+  return (
+    <SectionHeader color={color} className={className}>
+      <CountUp end={end} duration={2.75} separator="," />
+    </SectionHeader>
+  )
+}

src/components/ui/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/ui/Globe.tsx

@@ -1,47 +1,159 @@
-import { useEffect, useRef } from 'react'
+"use client";
-import createGlobe from 'cobe'
 
-export function Globe({ className }: { className?: string }) {
+import createGlobe, { type COBEOptions } from "cobe";
-  const canvasRef = useRef<HTMLCanvasElement>(null)
+import { useMotionValue, useSpring } from "motion/react";
+import { useEffect, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+const MOVEMENT_DAMPING = 1400;
+
+const GLOBE_CONFIG: COBEOptions = {
+  width: 800,
+  height: 800,
+  onRender: () => {},
+  devicePixelRatio: 2,
+  phi: 0,
+  theta: 0.3,
+  dark: 0,
+  diffuse: 0.25, // softer shading for premium look
+  mapSamples: 16000,
+  mapBrightness: 1.1,
+  baseColor: [0.8, 0.8, 0.8], // sleek dark gray globe
+  markerColor: [0.02, 0.71, 0.83], // cyan-500
+  glowColor: [0.8, 0.8, 0.85], // grey
+  
+  markers: [
+    // --- Core Global Markers ---
+    { location: [14.5995, 120.9842], size: 0.03 }, // Manila
+    { location: [19.076, 72.8777], size: 0.1 }, // Mumbai
+    { location: [23.8103, 90.4125], size: 0.05 }, // Dhaka
+    { location: [30.0444, 31.2357], size: 0.07 }, // Cairo
+    { location: [39.9042, 116.4074], size: 0.08 }, // Beijing
+    { location: [-23.5505, -46.6333], size: 0.1 }, // São Paulo
+    { location: [19.4326, -99.1332], size: 0.1 }, // Mexico City
+    { location: [40.7128, -74.006], size: 0.1 }, // New York
+    { location: [34.6937, 135.5022], size: 0.05 }, // Osaka
+    { location: [41.0082, 28.9784], size: 0.06 }, // Istanbul
+    { location: [48.8566, 2.3522], size: 0.08 }, // Paris
+    { location: [51.5072, -0.1276], size: 0.08 }, // London
+    { location: [52.52, 13.405], size: 0.07 }, // Berlin
+    { location: [35.6895, 139.6917], size: 0.06 }, // Tokyo
+    { location: [-33.8688, 151.2093], size: 0.06 }, // Sydney
+    { location: [-1.2921, 36.8219], size: 0.05 }, // Nairobi
+    { location: [-34.6037, -58.3816], size: 0.07 }, // Buenos Aires
+    { location: [37.7749, -122.4194], size: 0.08 }, // San Francisco
+    { location: [1.3521, 103.8198], size: 0.06 }, // Singapore
+    { location: [28.6139, 77.2090], size: 0.08 }, // New Delhi
+    { location: [13.7563, 100.5018], size: 0.06 }, // Bangkok
+    { location: [59.9343, 30.3351], size: 0.05 }, // St. Petersburg
+    { location: [33.6844, 73.0479], size: 0.05 }, // Islamabad
+    { location: [25.276987, 55.296249], size: 0.07 }, // Dubai
+    { location: [60.1699, 24.9384], size: 0.05 }, // Helsinki
+    { location: [43.6532, -79.3832], size: 0.07 }, // Toronto
+    { location: [6.5244, 3.3792], size: 0.08 }, // Lagos
+    { location: [50.1109, 8.6821], size: 0.06 }, // Frankfurt
+
+    // --- 12 New US + European Cities ---
+    { location: [34.0522, -118.2437], size: 0.08 }, // Los Angeles
+    { location: [41.8781, -87.6298], size: 0.07 }, // Chicago
+    { location: [29.7604, -95.3698], size: 0.07 }, // Houston
+    { location: [25.7617, -80.1918], size: 0.07 }, // Miami
+    { location: [45.5017, -73.5673], size: 0.06 }, // Montreal
+    { location: [47.6062, -122.3321], size: 0.06 }, // Seattle
+    { location: [40.4406, -79.9959], size: 0.05 }, // Pittsburgh
+    { location: [41.3851, 2.1734], size: 0.06 }, // Barcelona
+    { location: [45.4642, 9.19], size: 0.06 }, // Milan
+    { location: [52.3676, 4.9041], size: 0.06 }, // Amsterdam
+    { location: [38.7169, -9.139], size: 0.05 }, // Lisbon
+    { location: [59.3293, 18.0686], size: 0.05 }, // Stockholmx
+  ],
+};
+
+export function Globe({
+  className,
+  config = GLOBE_CONFIG,
+}: {
+  className?: string;
+  config?: COBEOptions;
+}) {
+  let phi = 0;
+  let width = 0;
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const pointerInteracting = useRef<number | null>(null);
+
+  const r = useMotionValue(0);
+  const rs = useSpring(r, {
+    mass: 1,
+    damping: 35, // slightly smoother motion
+    stiffness: 100,
+  });
+
+  const updatePointerInteraction = (value: number | null) => {
+    pointerInteracting.current = value;
+    if (canvasRef.current) {
+      canvasRef.current.style.cursor = value !== null ? "grabbing" : "grab";
+    }
+  };
+
+  const updateMovement = (clientX: number) => {
+    if (pointerInteracting.current !== null) {
+      const delta = clientX - pointerInteracting.current;
+      r.set(r.get() + delta / MOVEMENT_DAMPING);
+    }
+  };
 
   useEffect(() => {
-    let phi = 0
+    const onResize = () => {
+      if (canvasRef.current) width = canvasRef.current.offsetWidth;
+    };
 
-    if (!canvasRef.current) return
+    window.addEventListener("resize", onResize);
+    onResize();
 
-    const globe = createGlobe(canvasRef.current, {
+    const globe = createGlobe(canvasRef.current!, {
-      devicePixelRatio: 2,
+      ...config,
-      width: 600 * 2,
+      width: width * 2,
-      height: 600 * 2,
+      height: width * 2,
-      phi: 0,
-      theta: 0,
-      dark: 0,
-      diffuse: 1.2,
-      mapSamples: 16000,
-      mapBrightness: 6,
-      baseColor: [0.3, 0.3, 0.3],
-      markerColor: [0.1, 0.8, 1],
-      glowColor: [1, 1, 1],
-      markers: [
-        { location: [37.7595, -122.4367], size: 0.03 },
-        { location: [40.7128, -74.006], size: 0.1 },
-      ],
       onRender: (state) => {
-        state.phi = phi
+        if (!pointerInteracting.current) phi += 0.004; // slightly slower rotation for elegance
-        phi += 0.01
+        state.phi = phi + rs.get();
+        state.width = width * 2;
+        state.height = width * 2;
       },
-    })
+    });
 
+    setTimeout(() => (canvasRef.current!.style.opacity = "1"), 0);
     return () => {
-      globe.destroy()
+      globe.destroy();
-    }
+      window.removeEventListener("resize", onResize);
-  }, [])
+    };
+  }, [rs, config]);
 
   return (
-    <canvas
+    <div
-      ref={canvasRef}
+      className={cn(
-      className={className}
+        // Radial gradient background that fades to pure black at edges
-      style={{ width: '100%', height: '100%', maxWidth: '100%', aspectRatio: 1 }}
+        "absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px] rounded-full",
-    />
+        className,
-  )
+      )}
+    >
+      <canvas
+        className={cn(
+          "size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]",
+        )}
+        ref={canvasRef}
+        onPointerDown={(e) => {
+          pointerInteracting.current = e.clientX;
+          updatePointerInteraction(e.clientX);
+        }}
+        onPointerUp={() => updatePointerInteraction(null)}
+        onPointerOut={() => updatePointerInteraction(null)}
+        onMouseMove={(e) => updateMovement(e.clientX)}
+        onTouchMove={(e) =>
+          e.touches[0] && updateMovement(e.touches[0].clientX)
+        }
+      />
+    </div>
+  );
 }

src/components/ui/Globe2.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef } from 'react'
+import createGlobe from 'cobe'
+
+export function Globe({ className }: { className?: string }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    let phi = 0
+
+    if (!canvasRef.current) return
+
+    const globe = createGlobe(canvasRef.current, {
+      devicePixelRatio: 2,
+      width: 600 * 2,
+      height: 600 * 2,
+      phi: 0,
+      theta: 0,
+      dark: 0,
+      diffuse: 1.2,
+      mapSamples: 16000,
+      mapBrightness: 6,
+      baseColor: [0.3, 0.3, 0.3],
+      markerColor: [0.1, 0.8, 1],
+      glowColor: [1, 1, 1],
+      markers: [
+        { location: [37.7595, -122.4367], size: 0.03 },
+        { location: [40.7128, -74.006], size: 0.1 },
+      ],
+      onRender: (state) => {
+        state.phi = phi
+        phi += 0.01
+      },
+    })
+
+    return () => {
+      globe.destroy()
+    }
+  }, [])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className={className}
+      style={{ width: '100%', height: '100%', maxWidth: '100%', aspectRatio: 1 }}
+    />
+  )
+}

src/components/ui/bento-grid.tsx

@@ -1,6 +1,5 @@
 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';
 
@@ -55,11 +54,9 @@ export const BentoGridItem = React.forwardRef<HTMLDivElement, BentoGridItemProps
               className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
             />
           ) : img ? (
-            <Image
+            <img
               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}

src/components/ui/layout-text-flip.tsx

@@ -1,6 +1,6 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
-import { motion, AnimatePresence } from "motion/react";
+import { motion, AnimatePresence } from "framer-motion";
 import { cn } from "@/lib/utils";
 
 export const LayoutTextFlip = ({
@@ -33,7 +33,7 @@ export const LayoutTextFlip = ({
 
       <motion.span
         layout
-        className="relative w-fit overflow-hidden px-2 py-2 font-neuton font-medium italic tracking-tight"
+        className="relative w-fit overflow-hidden px-2 py-2 font-medium italic tracking-tight"
       >
         <AnimatePresence mode="popLayout">
           <motion.span

src/components/ui/world-map.tsx

@@ -4,8 +4,6 @@ import { useRef } from "react";
 import { motion } from "motion/react";
 import DottedMap from "dotted-map";
 
-import { useTheme } from "next-themes";
-
 interface MapProps {
   dots?: Array<{
     start: { lat: number; lng: number; label?: string };
@@ -21,13 +19,11 @@ export default function WorldMap({
   const svgRef = useRef<SVGSVGElement>(null);
   const map = new DottedMap({ height: 100, grid: "diagonal" });
 
-  const { theme } = useTheme();
-
   const svgMap = map.getSVG({
     radius: 0.22,
-    color: theme === "dark" ? "#FFFFFF40" : "#00000040",
+    color: "#FFFFFF40", // Hardcoded for dark theme
     shape: "circle",
-    backgroundColor: theme === "dark" ? "black" : "white",
+    backgroundColor: "black", // Hardcoded for dark theme
   });
 
   const projectPoint = (lat: number, lng: number) => {

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">
+    <section className="relative overflow-hidden py-24 lg:py-32">
-      <CircleBackground color="cyan" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
       <Container className="relative">
-        <motion.div
+        <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">
-          initial={{ opacity: 0, y: 20 }}
+          <div className="max-w-3xl mx-auto">
-          whileInView={{ opacity: 1, y: 0 }}
+            <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-500">
-          viewport={{ once: true }}
+              Ready Today
-          transition={{ duration: 0.8 }}
+            </p>
-          className="mx-auto max-w-3xl text-center"
+            <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 className="text-3xl lg:text-5xl font-medium tracking-tight text-gray-900">
+            </h2>
-            Ready to Transform Your Kubernetes Experience?
+            <p className="mt-6 text-lg text-gray-600">
-          </h2>
+              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 className="mt-6 text-lg lg:text-xl text-gray-600">
+            </p>
-            Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
+            <div className="mt-10 flex justify-center">
-          </p>
+              <Button
-          <div className="mt-10 flex flex-wrap gap-4 justify-center">
+                to="https://myceliumcloud.tf"
-            <Button to="/download" variant="solid" color="cyan">
+                as="a"
-              Start Your Free Trial
+                variant="solid"
-            </Button>
+                color="cyan"
-            <Button to="https://manual.grid.tf" variant="outline" color="gray">
+                target="_blank"
-              Read Documentation
+                rel="noreferrer"
-            </Button>
+              >
+                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 { useId } from 'react'
-import { Globe } from '../../components/ui/Globe'
+
-import { CountUpNumber } from '../../components/CountUpNumber'
+import { Button } from '../../components/Button'
 import { Container } from '../../components/Container'
 
-const stats = [
+function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
-  { value: 54958, label: 'CPU Cores' },
+  const id = useId()
-  { value: 1493, label: 'Nodes' },
+
-  { value: 5388956, label: 'GB Storage' },
+  return (
-  { value: 44, label: 'Countries' },
+    <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">
+        <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
-          {/* Text Content */}
+          <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">
-          <motion.div
+            <h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
-            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">
               Mycelium Cloud
             </h1>
-            <p className="mt-6 text-lg lg:text-xl text-gray-600">
+            <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
-              Revolutionary Kubernetes platform that transforms how teams deploy and manage cloud-native applications at scale
+              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>
+            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
-
+              <Button to="/download" variant="solid" color="cyan">
-          {/* Globe */}
+                Start Deploying
-          <motion.div
+              </Button>
-            initial={{ opacity: 0, scale: 0.9 }}
+              <Button
-            animate={{ opacity: 1, scale: 1 }}
+                to="https://manual.grid.tf"
-            transition={{ duration: 0.8, delay: 0.2 }}
+                as="a"
-            className="flex items-center justify-center"
+                variant="outline"
-          >
+                color="gray"
-            <div className="relative w-full max-w-[500px] aspect-square">
+                target="_blank"
-              <Globe className="w-full h-full" />
+                rel="noreferrer"
+              >
+                View Documentation
+              </Button>
             </div>
-          </motion.div>
+          </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" />
-        {/* Stats */}
+            <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">
-        <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6">
+              <img
-          {stats.map((stat, index) => (
+                src="/src/images/desktop.png"
-            <motion.div
+                alt="Mycelium Cloud dashboard preview"
-              key={stat.label}
+                className="mx-auto w-full max-w-[640px]"
-              initial={{ opacity: 0, y: 20 }}
+                width={1366}
-              animate={{ opacity: 1, y: 0 }}
+                height={768}
-              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>
-            >
+          </div>
-              <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>
       </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 { CloudOverview } from './CloudOverview'
-import { MyceliumNetworking } from './MyceliumNetworking'
+import { ComputeStorageSplit } from './ComputeStorageSplit'
-import { WebGateway } from './WebGateway'
+import { SecurityPillars } from './SecurityPillars'
-import { MultiMaster } from './MultiMaster'
-import { LoadBalancing } from './LoadBalancing'
 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/home/CallToAction.tsx

@@ -0,0 +1,40 @@
+import { CircleBackground } from '../../components/CircleBackground'
+import { Container } from '../../components/Container'
+import { Button } from '../../components/Button'
+
+export function CallToAction() {
+  return (
+    <section
+      id="get-started"
+      className="relative overflow-hidden bg-gray-900 py-32"
+    >
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
+      </div>
+      <Container className="relative">
+        <div className="mx-auto max-w-2xl text-center">
+          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
+            Build the Future, Today
+          </h2>
+          <p className="mt-6 text-lg text-gray-300">
+            Ready to reclaim your digital freedom? Start building on a cloud that’s autonomous, efficient, and truly yours. Explore the documentation or join our community to get started.
+          </p>
+          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
+                        <Button to="/cloud" variant="solid" color="white">
+              Start Building
+            </Button>
+            <Button
+              to="https://threefold.info/mycelium_network/docs/"
+              as="a"
+              target="_blank"
+              variant="outline"
+              color="white"
+            >
+              Read Docs
+            </Button>
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/home/HomeAgent.tsx

@@ -9,7 +9,7 @@ export function HomeAgent() {
         <div className="mx-auto max-w-4xl text-center">
           <H2>
             Deploy your own{" "}
-            <span className="font-neuton text-left text-black font-medium text-7xl italic  bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-400 to-violet-400">
+            <span className="text-left text-black font-medium text-7xl italic  bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-400 to-violet-400">
               <LayoutTextFlip
                 text=""
                 words={[

src/pages/home/HomeAurora.tsx

@@ -1,13 +1,11 @@
 "use client";
 
-import { motion } from "motion/react";
+import { motion } from "framer-motion";
 import { H1, H2, H3, H4, H5 } from "@/components/Texts";
-import { AuroraBackground } from "@/components/ui/aurora-background";
 import { ScrollDownArrow } from '@/components/ScrollDownArrow';
 
 export function HomeAurora() {
   return (
-    <AuroraBackground>
       <motion.div
         initial={{ opacity: 0.0, y: 40 }}
         whileInView={{ opacity: 1, y: 0 }}
@@ -16,10 +14,15 @@ export function HomeAurora() {
           duration: 1,
           ease: "easeInOut",
         }}
-        className="relative mb-20  flex flex-col items-center justify-center gap-4 px-4 max-w-5xl"
+        style={{
+          backgroundImage: "url(/images/mchip2.webp)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+        }}
+        className="relative mx-auto pb-24 pt-0 h-screen flex flex-col items-center justify-center gap-4 px-4 max-w-5xl"
       >
         <div className="text-center text-gray-800">
-          <H1>Decentralized Autonomous <span className="font-neuton text-bold lg:text-8xl italic">Agentic Cloud.</span></H1>
+          <H1>Decentralized Autonomous <span className="text-bold lg:text-8xl">Agentic Cloud.</span></H1>
         </div>
         <div className="pt-8 text-center font-light text-gray-500 max-w-4xl">
           <H5>Mycelium Project is a decentralized platform for autonomous AI, powered by distributed compute, sovereign memory, encrypted networking, and stateless GPU orchestration.</H5>
@@ -27,8 +30,6 @@ export function HomeAurora() {
         <div className="pt-8">
           <ScrollDownArrow />
         </div>
-       
       </motion.div>
-    </AuroraBackground>
   );
 }

src/pages/home/HomeBenefits.tsx

@@ -0,0 +1,284 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import createGlobe from "cobe";
+import { useEffect, useRef } from "react";
+import { motion } from "motion/react";
+import { IconBrandYoutubeFilled } from "@tabler/icons-react";
+import { LockClosedIcon, CogIcon, BoltIcon, CurrencyDollarIcon } from '@heroicons/react/24/solid'
+import { H2, P } from '@/components/Texts'
+
+
+export function HomeBenefits() {
+      const features = [
+    {
+      title: "Sovereign",
+      description:
+        "Own your infrastructure and your data. Mycelium Cloud eliminates dependency on centralized providers, giving you full digital sovereignty.",
+            icon: <LockClosedIcon className="h-6 w-6 text-cyan-500" />,
+      className:
+        "col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800",
+    },
+    {
+      title: "Autonomous",
+      description:
+        "The cloud that runs itself. From deployment to scaling, Mycelium Cloud automates everything — so your systems stay fast, resilient, and adaptive.",
+            icon: <CogIcon className="h-6 w-6 text-cyan-500" />,
+      className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
+    },
+    {
+      title: "Energy Efficient",
+      description:
+        "Built on distributed nodes designed for minimal energy use, Mycelium Cloud redefines sustainability without compromising performance.",
+            icon: <BoltIcon className="h-6 w-6 text-cyan-500" />,
+      className:
+        "col-span-1 lg:col-span-3 lg:border-r  dark:border-neutral-800",
+    },
+    {
+      title: "Cost Efficient",
+      description:
+        "No middlemen. No inflated bills. Just pure compute power at a fraction of traditional cloud costs — optimized, transparent, and fair.",
+            icon: <CurrencyDollarIcon className="h-6 w-6 text-cyan-500" />,
+      className: "col-span-1 lg:col-span-3 border-b lg:border-none",
+    },
+  ];
+  return (
+    <div className="relative z-20 py-10 lg:py-40 max-w-7xl mx-auto">
+      <div className="px-8">
+        <H2 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
+          Why It Changes Everything
+        </H2>
+
+        <P className="text-sm lg:text-base  max-w-2xl  my-4 mx-auto text-neutral-500 text-center font-normal dark:text-neutral-300">
+          Mycelium Cloud isn’t just another cloud — it’s a new foundation for digital independence. A self-governing, AI-powered infrastructure that gives you control, efficiency, and trust without compromise.
+        </P>
+      </div>
+
+      <div className="relative ">
+        <div className="grid grid-cols-1 lg:grid-cols-6 mt-12 xl:border rounded-md dark:border-neutral-800">
+          {features.map((feature) => (
+            <FeatureCard key={feature.title} className={feature.className}>
+                            <FeatureTitle icon={feature.icon}>{feature.title}</FeatureTitle>
+              <FeatureDescription>{feature.description}</FeatureDescription>
+            </FeatureCard>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const FeatureCard = ({
+  children,
+  className,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div className={cn(`p-4 sm:p-8 relative overflow-hidden`, className)}>
+      {children}
+    </div>
+  );
+};
+
+const FeatureTitle = ({ children, icon }: { children?: React.ReactNode, icon?: React.ReactNode }) => {
+  return (
+    <div className="flex items-center gap-2">
+      {icon}
+            <p className="max-w-5xl text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug">
+        {children}
+      </p>
+    </div>
+  );
+};
+
+const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <p
+      className={cn(
+        "text-sm md:text-base  max-w-4xl text-left mx-auto",
+        "text-neutral-500 text-center font-normal dark:text-neutral-300",
+        "text-left max-w-sm mx-0 md:text-sm my-2"
+      )}
+    >
+      {children}
+    </p>
+  );
+};
+
+export const SkeletonOne = () => {
+  return (
+    <div className="relative flex py-8 px-2 gap-10 h-full">
+      <div className="w-full  p-5  mx-auto bg-white dark:bg-neutral-900 shadow-2xl group h-full">
+        <div className="flex flex-1 w-full h-full flex-col space-y-2  ">
+          {/* TODO */}
+          <img
+            src="/linear.webp"
+            alt="header"
+            width={800}
+            height={800}
+            className="h-full w-full aspect-square object-cover object-left-top rounded-sm"
+          />
+        </div>
+      </div>
+
+      <div className="absolute bottom-0 z-40 inset-x-0 h-60 bg-gradient-to-t from-white dark:from-black via-white dark:via-black to-transparent w-full pointer-events-none" />
+      <div className="absolute top-0 z-40 inset-x-0 h-60 bg-gradient-to-b from-white dark:from-black via-transparent to-transparent w-full pointer-events-none" />
+    </div>
+  );
+};
+
+export const SkeletonThree = () => {
+  return (
+    <a
+      href="https://www.youtube.com/watch?v=RPa3_AD1_Vs"
+      target="__blank"
+      className="relative flex gap-10  h-full group/image"
+    >
+      <div className="w-full  mx-auto bg-transparent dark:bg-transparent group h-full">
+        <div className="flex flex-1 w-full h-full flex-col space-y-2  relative">
+          {/* TODO */}
+          <IconBrandYoutubeFilled className="h-20 w-20 absolute z-10 inset-0 text-red-500 m-auto " />
+          <img
+            src="https://assets.aceternity.com/fireship.jpg"
+            alt="header"
+            width={800}
+            height={800}
+            className="h-full w-full aspect-square object-cover object-center rounded-sm blur-none group-hover/image:blur-md transition-all duration-200"
+          />
+        </div>
+      </div>
+    </a>
+  );
+};
+
+export const SkeletonTwo = () => {
+  const images = [
+    "https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  ];
+
+  const imageVariants = {
+    whileHover: {
+      scale: 1.1,
+      rotate: 0,
+      zIndex: 100,
+    },
+    whileTap: {
+      scale: 1.1,
+      rotate: 0,
+      zIndex: 100,
+    },
+  };
+  return (
+    <div className="relative flex flex-col items-start p-8 gap-10 h-full overflow-hidden">
+      {/* TODO */}
+      <div className="flex flex-row -ml-20">
+        {images.map((image, idx) => (
+          <motion.div
+            variants={imageVariants}
+            key={"images-first" + idx}
+            style={{
+              rotate: Math.random() * 20 - 10,
+            }}
+            whileHover="whileHover"
+            whileTap="whileTap"
+            className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
+          >
+            <img
+              src={image}
+              alt="bali images"
+              width="500"
+              height="500"
+              className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
+            />
+          </motion.div>
+        ))}
+      </div>
+      <div className="flex flex-row">
+        {images.map((image, idx) => (
+          <motion.div
+            key={"images-second" + idx}
+            style={{
+              rotate: Math.random() * 20 - 10,
+            }}
+            variants={imageVariants}
+            whileHover="whileHover"
+            whileTap="whileTap"
+            className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
+          >
+            <img
+              src={image}
+              alt="bali images"
+              width="500"
+              height="500"
+              className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
+            />
+          </motion.div>
+        ))}
+      </div>
+
+      <div className="absolute left-0 z-[100] inset-y-0 w-20 bg-gradient-to-r from-white dark:from-black to-transparent  h-full pointer-events-none" />
+      <div className="absolute right-0 z-[100] inset-y-0 w-20 bg-gradient-to-l from-white dark:from-black  to-transparent h-full pointer-events-none" />
+    </div>
+  );
+};
+
+export const SkeletonFour = () => {
+  return (
+    <div className="h-60 md:h-60  flex flex-col items-center relative bg-transparent dark:bg-transparent mt-10">
+      <Globe className="absolute -right-10 md:-right-10 -bottom-80 md:-bottom-72" />
+    </div>
+  );
+};
+
+export const Globe = ({ className }: { className?: string }) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    let phi = 0;
+
+    if (!canvasRef.current) return;
+
+    const globe = createGlobe(canvasRef.current, {
+      devicePixelRatio: 2,
+      width: 600 * 2,
+      height: 600 * 2,
+      phi: 0,
+      theta: 0,
+      dark: 1,
+      diffuse: 1.2,
+      mapSamples: 16000,
+      mapBrightness: 6,
+      baseColor: [0.3, 0.3, 0.3],
+      markerColor: [0.1, 0.8, 1],
+      glowColor: [1, 1, 1],
+      markers: [
+        // longitude latitude
+        { location: [37.7595, -122.4367], size: 0.03 },
+        { location: [40.7128, -74.006], size: 0.1 },
+      ],
+      onRender: (state) => {
+        // Called on every animation frame.
+        // `state` will be an empty object, return updated params.
+        state.phi = phi;
+        phi += 0.01;
+      },
+    });
+
+    return () => {
+      globe.destroy();
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{ width: 600, height: 600, maxWidth: "100%", aspectRatio: 1 }}
+      className={className}
+    />
+  );
+};

src/pages/home/HomeCloud.tsx

@@ -23,7 +23,7 @@ export function HomeCloud() {
             />
             <div className="w-full flex-auto">
               <H2 className="">
-                Mycelium <span className="font-neuton font-medium text-7xl italic">Cloud</span>
+                Mycelium <span className="font-medium text-7xl italic">Cloud</span>
               </H2>
               <P className="mt-6 text-lg/8 text-pretty text-gray-600">
                 A comprehensive platform for deploying and managing Kubernetes clusters on the decentralized Mycelium Grid infrastructure

src/pages/home/HomeFeatures.tsx

@@ -32,24 +32,11 @@ export function HomeFeatures() {
 
   return (
     <div className="">
-        <div className="relative bg-transparent py-24 overflow-hidden">
+        <div className="relative bg-transparent pb-24 Pt-0 overflow-hidden">
-      {/* --- Soft background gradients --- */}
-      <div
-          aria-hidden="true"
-          className="absolute inset-x-0 -top-16 -z-10 flex transform-gpu justify-center overflow-hidden blur-3xl"
-        >
-          <div
-            style={{
-              clipPath:
-                'polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)',
-            }}
-            className="aspect-1318/752 w-329.5 flex-none bg-linear-to-r from-[#9fd6fc] to-[#c6c4fa] opacity-40"
-          />
-        </div>
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:mx-0">
           <H2 className="">
-            The Building Blocks of <span className="font-neuton font-medium text-7xl italic">Decentralized Future</span>
+            The Building Blocks of <span className="font-medium text-7xl">Decentralized Future</span>
           </H2>
           <P className="mt-6 ">
             From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
@@ -65,7 +52,6 @@ export function HomeFeatures() {
                 <h3 className="mt-6 text-xl font-semibold text-black">{feature.name}</h3>
                 <p className="mt-4 text-base text-gray-800">{feature.description}</p>
                 <a href={feature.href} className="mt-6 text-base font-semibold text-black">Learn more <span aria-hidden="true"> &rarr;</span></a>
-                <div className="absolute -bottom-10 -right-10 h-50 w-50 -z-10" style={{ background: 'radial-gradient(circle, rgba(173, 239, 255, 0.6) 0%, rgba(115, 207, 255, 0.4) 100%)', filter: 'blur(80px)' }}></div>
               </div>
             ))}
           </div>

src/pages/home/HomeFeaturesDark.tsx

@@ -0,0 +1,60 @@
+import { GlobeAltIcon, ServerStackIcon, CpuChipIcon } from '@heroicons/react/24/solid'
+import { H2, P } from '@/components/Texts'
+
+const features = [
+  {
+    name: 'Mycelium Network',
+    description:
+      "A global, end-to-end encrypted overlay that simply doesn't break.",
+    href: '/network',
+    icon: GlobeAltIcon,
+  },
+  {
+    name: 'Mycelium Cloud',
+    description:
+      'An autonomous, stateless OS that enforces pre-deterministic deployments you define.',
+    href: '/cloud',
+    icon: ServerStackIcon,
+  },
+  {
+    name: 'Mycelium Agents',
+    description:
+      'Your sovereign agent with private memory and permissioned data access—always under your control.',
+    href: '/agents',
+    icon: CpuChipIcon,
+  },
+]
+
+export function HomeFeaturesDark() {
+
+  return (
+    <div className="">
+            <div className="relative bg-black py-24 overflow-hidden">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:mx-0">
+                    <H2 className="text-white">
+            The Building Blocks of Decentralized Future
+          </H2>
+                    <P className="mt-6 text-gray-300">
+            From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
+          </P>
+        </div>
+        <div className="mx-auto mt-16 max-w-2xl lg:max-w-7xl">
+          <div className="grid grid-cols-1 gap-x-12 gap-y-12 lg:grid-cols-3">
+            {features.map((feature) => (
+                                          <div key={feature.name} className="relative flex flex-col p-8 rounded-3xl border border-gray-700 bg-gray-900/50 backdrop-blur-lg overflow-hidden shadow-2xl hover:shadow-cyan-500/40 hover:border-cyan-500 hover:scale-105 transform transition-all duration-300">
+                                                <div className="w-20 h-20 bg-gray-800/80 rounded-full flex items-center justify-center">
+                  <feature.icon className="h-12 w-12 text-cyan-500" />
+                </div>
+                                <h3 className="mt-6 text-xl font-semibold text-white">{feature.name}</h3>
+                                <p className="mt-4 text-base text-gray-300">{feature.description}</p>
+                                <a href={feature.href} className="mt-6 text-base font-semibold text-white">Learn more <span aria-hidden="true"> &rarr;</span></a>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+    </div>
+  )
+}

src/pages/home/HomeGlobe.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { Globe } from "@/components/ui/Globe"
+import { motion } from "framer-motion"
+import { H2, P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
+import { CountUpNumber } from '@/components/CountUpNumber'
+
+export function WorldMap() {
+  return (
+    <div className="relative min-h-screen w-full overflow-hidden top-0 flex py-12 flex-col">
+      {/* Background video */}
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute inset-0 w-full h-full object-cover"
+      >
+        <source src="/videos/benefits.mp4" type="video/mp4" />
+      </video>
+
+      {/* Dark overlay */}
+      <div className="absolute inset-0 bg-black/10" />
+
+      {/* Content */}
+      <div className="relative z-10 flex flex-col h-full px-8 md:px-16 py-12">
+        {/* Title + Subtitle */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="max-w-xl"
+        >
+          <Eyebrow color="accent">Network</Eyebrow>
+          <SectionHeader color="light">Mycelium Network is Live.</SectionHeader>
+          <P className=" mt-4 text-base leading-relaxed" color="light">
+            Mycelium Cloud's advancement technology enables anyone to deploy
+            their own Internet infrastructure, anywhere.
+          </P>
+        </motion.div>
+
+        {/* Bottom Layout: Globe + Cards */}
+        <div className="mt-8 flex flex-1 flex-col lg:flex-row items-center lg:items-stretch gap-x-10">
+          {/* Globe Left Column */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="flex-1 flex items-center justify-center"
+          >
+            <div className="relative w-[450px] h-[450px] md:w-[600px] md:h-[600px]">
+              <Globe className="absolute inset-0 w-full h-full left-0 lg:-left-24" />
+            </div>
+          </motion.div>
+
+          {/* Cards Right Column */}
+          <div className="relative flex-1 lg:h-auto h-[700px] flex flex-col lg:block items-center gap-y-4 mt-8 lg:mt-0">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.4 }}
+              className="lg:absolute lg:top-12 lg:-left-12 w-80 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"
+            >
+              <div><CT color="light" className="uppercase tracking-wide">CORES</CT></div>
+              <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white" /></div>
+              <CP color="light" className="mt-2 text-sm">
+                Total Central Processing Unit Cores available on the grid.
+              </CP>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.5 }}
+              className="lg:absolute lg:-top-10 lg:right-0 w-80 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"
+            >
+              <div><CT color="light" className="uppercase tracking-wide">NODES</CT></div>
+              <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white" /></div>
+              <CP color="light" className="mt-2 text-sm">
+                Total number of nodes on the grid.
+              </CP>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.6 }}
+              className="lg:absolute lg:bottom-28 lg:-left-12 w-80 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"
+            >
+              <div><CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT></div>
+              <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white" /></div>
+              <CP color="light" className="mt-2 text-sm">
+                Total GB amount of storage (SSD, HDD, & RAM) on the grid.
+              </CP>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.7 }}
+              className="lg:absolute lg:top-47 lg:right-0 w-80 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"
+            >
+              <div><CT color="light" className="uppercase tracking-wide">COUNTRIES</CT></div>
+              <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white" /></div>
+              <CP color="light" className="mt-2 text-sm">
+                Total number of countries with active nodes.
+              </CP>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+
+      {/* Radial fade overlay */}
+      <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" />
+    </div>
+  )
+}

src/pages/home/HomeHero.tsx

@@ -1,28 +1,27 @@
 'use client'
 
 import { H1, P } from '@/components/Texts'
-import { FadeIn } from '@/components/FadeIn'
 import { Button } from '@/components/Button'
 
 export function HomeHero() {
   return (
-    <div
+        <div
-      className="relative isolate overflow-hidden bg-white"
+      className="relative isolate overflow-hidden bg-white h-screen -z-10  flex items-center justify-center"
       style={{
         backgroundImage: 'url(/images/cloud.png)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
       }}
     >
-      <div className="mx-auto max-w-7xl px-6  py-24 lg:py-32 lg:flex lg:px-8">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
+        <div className="-mt-32 mx-auto max-w-2xl text-center">
-          <H1 color="primary" className="mt-10 text-5xl font-semibold tracking-tight text-pretty sm:text-7xl">
+                    <H1 color="primary" className="text-5xl font-semibold tracking-tight text-pretty sm:text-7xl">
             Decentralized Autonomous Agentic Cloud.
           </H1>
           <P color="secondary" className="mt-8 text-lg font-medium text-pretty sm:text-xl/8">
             Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
           </P>
-          <div className="mt-10 flex items-center gap-x-6">
+          <div className="mt-10 flex items-center justify-center gap-x-6">
             <Button variant="solid" color="cyan" href="#">
               Get started
             </Button>

src/pages/home/HomeMap.tsx

@@ -5,11 +5,11 @@ import { H2, P } from "@/components/Texts";
 
 export function HomeMapSection() {
   return (
-    <div className=" py-24 dark:bg-black bg-white w-full">
+    <div className=" py-24 dark:bg-black bg-tra w-full">
       <div className="max-w-7xl mx-auto text-center">
         <H2 className="font-medium text-xl md:text-4xl dark:text-white text-gray-800">
           Mycelium Network is{" "}
-          <span className="text-black font-neuton text-bold italic">
+          <span className="text-black text-bold italic">
             {"Live.".split("").map((word, idx) => (
               <motion.span
                 key={idx}

src/pages/home/HomePage.tsx

@@ -1,14 +1,14 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
-import { HomeHero } from './HomeHero'
-import { WorldMapSection } from './WorldMapSection'
-import { StackSection } from './StackSection'
-import { HomeHeroLight2 } from './HomeHeroLight2'
-import { HomeHeroDark } from './HomeHeroDark'
 import { HomeAurora } from './HomeAurora'
-import { HomeMapSection } from './HomeMap'
 import { HomeFeatures } from './HomeFeatures'
+import { HomeFeaturesDark } from './HomeFeaturesDark'
 import { HomeCloud } from './HomeCloud'
 import { HomeAgent } from './HomeAgent'
+import { StackSectionLight } from './StackSection'
+import { WorldMap } from './HomeGlobe'
+import { HomeBenefits } from './HomeBenefits'
+import { CallToAction } from './CallToAction'
+
 
 export default function HomePage() {
   return (
@@ -18,21 +18,25 @@ export default function HomePage() {
       </AnimatedSection>
 
       <AnimatedSection id="next-section">
-        <HomeFeatures />
+        <WorldMap />
-      </AnimatedSection>
-
-      <AnimatedSection >
-        <HomeMapSection />
       </AnimatedSection>
 
       <AnimatedSection>
-       <HomeCloud />
+        <StackSectionLight />
+      </AnimatedSection>
+
+
+      <AnimatedSection>
+        <HomeFeaturesDark />
       </AnimatedSection>
 
       <AnimatedSection>
-       <HomeAgent />
+       <HomeBenefits />
       </AnimatedSection>
 
+      <AnimatedSection>
+        <CallToAction />
+      </AnimatedSection>
     </div>
   )
 }

src/pages/home/StackSection.tsx

@@ -1,66 +1,75 @@
-import { motion } from 'framer-motion'
+"use client";
-import { Container } from '../../components/Container'
 
-const stackData = [
+import { motion } from "framer-motion";
-  {
+import { StackedCubesLight } from "@/components/ui/StackedCubesLight";
-    id: 'agent',
+import { H2, P, SectionHeader, Eyebrow } from "@/components/Texts";
-    title: 'Agent Layer',
+import { FadeIn } from "@/components/ui/FadeIn";
-    description:
+import { DottedGlowBackground } from '@/components/ui/dotted-glow-background';
-      'Your sovereign agent with private memory and permissioned data access—always under your control. Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval.',
-  },
-  {
-    id: 'network',
-    title: 'Network Layer',
-    description:
-      'A global, end-to-end encrypted overlay that simply doesn\'t break. Shortest-path routing moves your traffic the fastest way, every time with instant discovery.',
-  },
-  {
-    id: 'cloud',
-    title: 'Cloud Layer',
-    description:
-      'An autonomous, stateless OS that enforces pre-deterministic deployments you define. Workloads are cryptographically bound to your private key—location and access are yours.',
-  },
-]
 
-export function StackSection() {
+export function StackSectionLight() {
   return (
-    <section className="relative bg-black py-20 lg:py-32">
+    <section className="relative w-full overflow-hidden py-24 lg:py-40">
-      <Container>
+      {/* === Background Layer === */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 items-start">
+      <div className="absolute inset-0 -z-10 bg-transparent">
-          {/* Left Column - Text */}
+        {/* Dotted Glow Background */}
-          <motion.div
+        <DottedGlowBackground
-            initial={{ opacity: 0, y: 20 }}
+          gap={15}
-            whileInView={{ opacity: 1, y: 0 }}
+          radius={2}
-            viewport={{ once: true }}
+          color="rgba(0,0,0,0.4)"
-            transition={{ duration: 0.5 }}
+          glowColor="rgba(0,170,255,0.85)"
-            className="lg:col-span-1"
+          opacity={0.2}
-          >
+        />
-            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
+        {/* Faint 3D grid floor */}
-              The Mycelium Stack
+        <div className="absolute inset-0 flex items-end justify-center overflow-hidden">
-            </h2>
+          <div className="w-[200vw] h-[200vh] bg-[linear-gradient(to_right,rgba(0,0,0,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,0,0,0.03)_1px,transparent_1px)] bg-[size:60px_60px] [transform:perspective(800px)_rotateX(70deg)] origin-bottom opacity-50" />
-            <p className="mt-6 text-lg text-gray-600">
-              Built with Mycelium technology, our AI infrastructure ensures unbreakable networks, complete data sovereignty, ultra-secure agent-human communication, and unhackable data storage systems.
-            </p>
-          </motion.div>
-
-          {/* Right Column - Stack Cards */}
-          <div className="lg:col-span-2 space-y-6">
-            {stackData.map((layer, index) => (
-              <motion.div
-                key={layer.id}
-                initial={{ opacity: 0, x: 20 }}
-                whileInView={{ opacity: 1, x: 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"
-              >
-                <h3 className="text-xl font-semibold text-gray-900">{layer.title}</h3>
-                <p className="mt-3 text-gray-600">{layer.description}</p>
-              </motion.div>
-            ))}
-          </div>
         </div>
-      </Container>
+      </div>
+
+      {/* === Content === */}
+      <div className="relative mx-auto max-w-7xl px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-3 gap-16 items-center">
+        {/* Left Column - Text */}
+        <div className="text-center lg:text-left">
+          <FadeIn>
+            <Eyebrow color="accent">Technology Layers</Eyebrow>
+            <SectionHeader color="dark" className="text-4xl sm:text-5xl font-semibold">
+              The Mycelium Stack
+            </SectionHeader>
+          </FadeIn>
+
+          <FadeIn>
+            <P color="dark" className="mt-6 text-lg leading-relaxed text-gray-600">
+              Built with Mycelium technology, our AI infrastructure ensures
+              unbreakable networks, complete data sovereignty, ultra-secure
+              agent-human communication, and unhackable data storage systems.
+            </P>
+          </FadeIn>
+        </div>
+
+        {/* Right Column - Animated Stack */}
+        <div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative">
+          <motion.div
+            initial={{ y: 30, opacity: 0 }}
+            whileInView={{ y: 0, opacity: 1 }}
+            transition={{ duration: 1.2, ease: "easeOut" }}
+            viewport={{ once: true }}
+          >
+            <motion.div
+              animate={{
+                y: [0, -10, 0],
+                rotateZ: [0, 0.5, -0.5, 0],
+              }}
+              transition={{
+                duration: 6,
+                repeat: Infinity,
+                ease: "easeInOut",
+              }}
+              className="relative"
+            >
+              <StackedCubesLight />
+            </motion.div>
+          </motion.div>
+        </div>
+      </div>
     </section>
-  )
+  );
 }

src/pages/home/WorldMapSection.tsx

@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion'
-import { Globe } from '../../components/ui/Globe'
+import { Globe } from '../../components/ui/Globe2'
 import { CountUpNumber } from '../../components/CountUpNumber'
 import { Container } from '../../components/Container'
 

src/pages/network/Hero.tsx

@@ -1,6 +1,7 @@
 import { useId } from 'react'
 import { Container } from '../../components/Container'
 import { Button } from '../../components/Button'
+import phoneFrame from '../../images/phoneframe.png'
 
 function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
   let id = useId()
@@ -73,12 +74,12 @@ function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
 
 export function Hero() {
   return (
-    <div className="overflow-hidden lg:py-32 lg:pb-0 pb-24">
+        <div className="overflow-hidden py-32">
       <Container>
         <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 +87,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
@@ -96,10 +94,10 @@ export function Hero() {
             </div>
           </div>
           <div className="relative lg:mt-10 mt-0 lg:col-span-5 lg:row-span-2 xl:col-span-6">
-            <BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12 ml-0" />
+            <BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:top-0 lg:ml-12 ml-0" />
-            <div className="mx-auto h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:px-0 lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-32">
+            <div className="mx-auto h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:px-0 lg:absolute lg:-inset-x-10 lg:top-0 lg:h-auto lg:pt-10 xl:-bottom-32">
               <img
-                src="/src/images/phoneframe.png"
+                src={phoneFrame}
                 alt="Mycelium application demo"
                 className="mx-auto max-w-[366px]"
                 width={366}