refactor: clean up unused imports and component exports

- Removed unused component imports across multiple pages (AgentHeroAlt, ComputeHero, CloudPage, GpuPage, StoragePage) - Changed ComputeDesign export from default to named export for consistency - Removed CloudDesign section from CloudPage layout
feat: update GPU CTA section copy and button labels
2025-11-04 17:15:07 +01:00 · 2025-11-04 17:03:50 +01:00 · 2025-11-04 16:50:20 +01:00 · 2025-11-04 16:50:15 +01:00 · 2025-11-04 16:43:37 +01:00 · 2025-11-04 16:23:57 +01:00
122 changed files with 1903 additions and 897 deletions
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 All in one project mycelium website
- **Repository:** [https://git.ourworld.tf/ourworld_web/www_project_mycelium_com/](https://git.ourworld.tf/ourworld_web/www_project_mycelium_com/)
+- **Repository:** [https://git.ourworld.tf/ourworld_web/www_projectmycelium_com/](https://git.ourworld.tf/ourworld_web/www_projectmycelium_com/)
 - **Main Branch (Production):** [https://www.projectmycelium.com/](https://www.projectmycelium.com)
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
    <meta name="description" content="Project Mycelium's technology enables anyone to deploy their own Internet infrastructure, anywhere." />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;700&display=swap" rel="stylesheet" />
  </head>
  <body>
    <div id="root"></div>
--- a/public/images/8c0e4489-1721-49e0-a475-509daf745c1c.png
+++ b/public/images/8c0e4489-1721-49e0-a475-509daf745c1c.png
--- a/public/images/ChatGPT
+++ b/public/images/ChatGPT
--- a/public/images/ChatGPT
+++ b/public/images/ChatGPT
--- a/public/images/Screenshot
+++ b/public/images/Screenshot
--- a/public/images/a718fb45-791b-429f-9927-668e6fa8c73b.png
+++ b/public/images/a718fb45-791b-429f-9927-668e6fa8c73b.png
--- a/public/images/agent_icon.png
+++ b/public/images/agent_icon.png
--- a/public/images/agenthero1.webp
+++ b/public/images/agenthero1.webp
--- a/public/images/agents.png
+++ b/public/images/agents.png
--- a/public/images/agentshero2.png
+++ b/public/images/agentshero2.png
--- a/public/images/benefits/autonomous.webp
+++ b/public/images/benefits/autonomous.webp
--- a/public/images/benefits/cost.webp
+++ b/public/images/benefits/cost.webp
--- a/public/images/benefits/energy.webp
+++ b/public/images/benefits/energy.webp
--- a/public/images/benefits/sovereign.webp
+++ b/public/images/benefits/sovereign.webp
--- a/public/images/candy.gif
+++ b/public/images/candy.gif
--- a/public/images/cloud.png
+++ b/public/images/cloud.png
--- a/public/images/cloud/billing.jpg
+++ b/public/images/cloud/billing.jpg
--- a/public/images/cloud/billing.png
+++ b/public/images/cloud/billing.png
--- a/public/images/cloud/kubeconfig.jpg
+++ b/public/images/cloud/kubeconfig.jpg
--- a/public/images/cloud/kubeconfig.png
+++ b/public/images/cloud/kubeconfig.png
--- a/public/images/cloud/reserve.jpg
+++ b/public/images/cloud/reserve.jpg
--- a/public/images/cloud/reserve.png
+++ b/public/images/cloud/reserve.png
--- a/public/images/cloud1.png
+++ b/public/images/cloud1.png
--- a/public/images/cloud_icon.png
+++ b/public/images/cloud_icon.png
--- a/public/images/cloudhero.webp
+++ b/public/images/cloudhero.webp
--- a/public/images/cloudhero2.webp
+++ b/public/images/cloudhero2.webp
--- a/public/images/cloudhero3.webp
+++ b/public/images/cloudhero3.webp
--- a/public/images/cloudhero4.webp
+++ b/public/images/cloudhero4.webp
--- a/public/images/computehero.webp
+++ b/public/images/computehero.webp
--- a/public/images/computehero11.webp
+++ b/public/images/computehero11.webp
--- a/public/images/computehero3.jpg
+++ b/public/images/computehero3.jpg
--- a/public/images/cube.png
+++ b/public/images/cube.png
--- a/public/images/deployment.webp
+++ b/public/images/deployment.webp
--- a/public/images/gpuhero.jpeg
+++ b/public/images/gpuhero.jpeg
--- a/public/images/gpuhero2.png
+++ b/public/images/gpuhero2.png
--- a/public/images/hero11.webp
+++ b/public/images/hero11.webp
--- a/public/images/homehero1.png
+++ b/public/images/homehero1.png
--- a/public/images/k82.png
+++ b/public/images/k82.png
--- a/public/images/mchip.webp
+++ b/public/images/mchip.webp
--- a/public/images/mchip2.webp
+++ b/public/images/mchip2.webp
--- a/public/images/network_icon.png
+++ b/public/images/network_icon.png
--- a/public/images/pages/agent.png
+++ b/public/images/pages/agent.png
--- a/public/images/pages/agent.webp
+++ b/public/images/pages/agent.webp
--- a/public/images/pages/cloud.png
+++ b/public/images/pages/cloud.png
--- a/public/images/pages/cloud.webp
+++ b/public/images/pages/cloud.webp
--- a/public/images/pages/compute.png
+++ b/public/images/pages/compute.png
--- a/public/images/pages/compute.webp
+++ b/public/images/pages/compute.webp
--- a/public/images/pages/gpu.png
+++ b/public/images/pages/gpu.png
--- a/public/images/pages/gpu.webp
+++ b/public/images/pages/gpu.webp
--- a/public/images/pages/gpuhero2.png
+++ b/public/images/pages/gpuhero2.png
--- a/public/images/pages/network.png
+++ b/public/images/pages/network.png
--- a/public/images/pages/network.webp
+++ b/public/images/pages/network.webp
--- a/public/images/pages/screencapture-localhost-5175-2025-11-01-21_45_20.png
+++ b/public/images/pages/screencapture-localhost-5175-2025-11-01-21_45_20.png
--- a/public/images/pages/storage.png
+++ b/public/images/pages/storage.png
--- a/public/images/pages/storage.webp
+++ b/public/images/pages/storage.webp
--- a/public/images/pages/storage1.webp
+++ b/public/images/pages/storage1.webp
--- a/public/images/storage.png
+++ b/public/images/storage.png
--- a/public/images/storage2.png
+++ b/public/images/storage2.png
--- a/public/videos/mhero.mp4
+++ b/public/videos/mhero.mp4
--- a/src/components/AnimatedSection.tsx
+++ b/src/components/AnimatedSection.tsx
@@ -1,4 +1,5 @@
 import { motion } from 'framer-motion'
 import { forwardRef } from 'react'
 type AnimatedSectionProps = {
  children: React.ReactNode
@@ -6,9 +7,11 @@ type AnimatedSectionProps = {
  className?: string
 }
-export function AnimatedSection({ children, id, className }: AnimatedSectionProps) {
+export const AnimatedSection = forwardRef<HTMLElement, AnimatedSectionProps>(
  ({ children, id, className }, ref) => {
  return (
-    <motion.section
+        <motion.section
      ref={ref}
      id={id}
      className={className}
      initial={{ opacity: 0, y: 40 }}
@@ -19,4 +22,5 @@ export function AnimatedSection({ children, id, className }: AnimatedSectionProp
      {children}
    </motion.section>
  )
-}
+  },
 )
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,11 +1,30 @@
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 import { Dropdown } from './ui/Dropdown'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { Container } from './Container'
 import { Button } from './Button'
 import pmyceliumLogo from '../images/logos/logo_1.png'
 const cloudNavItems = [
  { name: 'Cloud', href: '/cloud' },
  { name: 'Compute', href: '/compute' },
  { name: 'Storage', href: '/storage' },
  { name: 'GPU', href: '/gpu' },
 ]
 export function Header() {
  const location = useLocation()
  const getCurrentPageName = () => {
    const currentPath = location.pathname;
    if (currentPath.startsWith('/compute')) return 'Compute';
    if (currentPath.startsWith('/storage')) return 'Storage';
    if (currentPath.startsWith('/gpu')) return 'GPU';
    if (currentPath.startsWith('/cloud')) return 'Cloud';
    return 'Cloud'; 
  };
  return (
    <header>
      <nav>
@@ -18,16 +37,11 @@ export function Header() {
              <Dropdown
                buttonContent={
                  <>
-                    Cloud
+                    {getCurrentPageName()}
                    <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
                  </>
                }
-                items={[
+                items={cloudNavItems}
                  { name: 'Cloud', href: '/cloud' },
                  { name: 'Compute', href: '/compute' },
                  { name: 'Storage', href: '/storage' },
                  { name: 'GPU', href: '/gpu' },
                ]}
              />
              <Link
                to="/network"
--- a/src/components/Texts.tsx
+++ b/src/components/Texts.tsx
@@ -13,6 +13,7 @@ const colorVariants = {
  secondary: 'text-gray-600',
  light: 'text-gray-50',
  accent: 'text-cyan-500',
  cyan: 'text-cyan-50',
  white: 'text-white',
  dark: 'text-gray-950',
  tertiary: 'text-gray-700',
@@ -33,7 +34,8 @@ type PolymorphicProps<E extends React.ElementType, P> = P & {
 const createTextComponent = <DefaultElement extends React.ElementType>(
  defaultElement: DefaultElement,
-  defaultClassName: string
+  defaultClassName: string,
  defaultProps: Omit<TextOwnProps, 'className' | 'children'> = {}
 ) => {
  type Props<E extends React.ElementType = DefaultElement> = PolymorphicProps<
    E,
@@ -41,9 +43,9 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
  >
  function Text<E extends React.ElementType = DefaultElement>({
-    font = 'sans',
+    font = defaultProps.font || 'sans',
    as,
-    color = 'primary',
+    color = defaultProps.color || 'primary',
    className,
    children,
    ...props
@@ -72,7 +74,7 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
 // Exports based on your tailwind.css and the example
 export const H1 = createTextComponent(
  'h1',
-  'text-6xl lg:text-7xl font-medium leading-tight tracking-tight'
+  'text-5xl lg:text-7xl font-medium leading-tight tracking-tight'
 )
 export const H2 = createTextComponent(
  'h2',
@@ -88,7 +90,7 @@ export const H4 = createTextComponent(
 )
 export const P = createTextComponent(
  'p',
-  'text-base lg:text-lg leading-relaxed'
+  'text-base lg:text-xl leading-relaxed'
 )
 export const Small = createTextComponent(
  'small',
@@ -100,11 +102,12 @@ export const Subtle = createTextComponent(
 )
 export const H5 = createTextComponent(
  'h5',
-  'text-xl lg:text-2xl font-light leading-snug tracking-normal'
+  'text-xl lg:text-2xl font-light lg:leading-snug leading-[0.85] tracking-normal'
 )
 export const Eyebrow = createTextComponent(
  'h2',
-  'text-base/7 font-semibold tracking-wide'
+  'text-base/7 font-semibold tracking-[0.18em] uppercase',
  { color: 'accent' }
 )
 export const SectionHeader = createTextComponent(
  'p',
@@ -128,7 +131,7 @@ export const FeatureTitle = createTextComponent(
 )
 export const FeatureDescription = createTextComponent(
  'p',
-  'text-sm leading-normal tracking-normal'
+  'lg:text-base text-sm leading-normal tracking-normal'
 )
 export const MobileFeatureTitle = createTextComponent(
  'h3',
@@ -160,4 +163,4 @@ export const DownloadCardDescription = createTextComponent(
 )
 export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold')
-export const CP = createTextComponent('p', 'text-sm lg:text-sm tracking-wide leading-[1.525] font-light')
+export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-tight font-light')
--- a/src/components/ui/CubeLight.tsx
+++ b/src/components/ui/CubeLight.tsx
@@ -26,7 +26,7 @@ const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({
    <path
      fill={`url(#cube-gradient-${index})`}
      d="M491.651 144.747L287.198 227.339C265.219 236.22 241.783 236.22 219.802 227.339L15.3486 144.747C-5.11621 136.479 -5.11621 97.5191 15.3486 89.2539L219.802 6.65884C241.783 -2.21961 265.219 -2.21961 287.198 6.65884L491.651 89.2539C512.116 97.5191 512.116 136.479 491.651 144.747Z"
-      stroke="rgba(59, 130, 246, 0.25)"
+      stroke="rgba(107, 114, 128, 0.3)"
      strokeWidth="0.5"
    />
    <defs>
@@ -79,8 +79,8 @@ export function CubeLight({
        <div
          className={`absolute inset-0 blur-3xl rounded-2xl transition-all duration-500 ${
            isActive
-              ? "bg-blue-400/40 opacity-70"
+              ? "bg-cyan-400/20 opacity-30"
-              : "bg-blue-200/20 opacity-40"
+              : "bg-cyan-200/20 opacity-40"
          }`}
        />
@@ -90,8 +90,8 @@ export function CubeLight({
          className="w-48 sm:w-64 lg:w-80 h-auto relative"
          style={{
            filter: isActive
-              ? "drop-shadow(0 0 25px rgba(59, 130, 246, 0.4)) brightness(1.1)"
+              ? "drop-shadow(0 0 15px rgba(34, 211, 238, 0.25)) brightness(1.05)"
-              : "drop-shadow(0 0 10px rgba(59, 130, 246, 0.15)) brightness(1)",
+              : "drop-shadow(0 0 10px rgba(34, 211, 238, 0.15)) brightness(1)",
            transition: "all 0.4s ease",
          }}
        />
@@ -99,10 +99,10 @@ export function CubeLight({
        {/* Title overlay */}
        <div className="absolute inset-0 flex items-center justify-center">
          <h3
-            className="text-blue-900 text-sm lg:text-base font-medium text-center px-4"
+            className="text-cyan-900 text-sm lg:text-base font-medium text-center px-4"
            style={{
              textShadow:
-                "0 0 15px rgba(255,255,255,0.8), 0 0 25px rgba(59, 130, 246, 0.5)",
+                "0 0 15px rgba(255,255,255,0.8), 0 0 25px rgba(34, 211, 238, 0.5)",
            }}
          >
            {title}
@@ -131,7 +131,7 @@ export function CubeLight({
                y1="1"
                x2="120"
                y2="1"
-                stroke="rgba(59, 130, 246, 0.6)"
+                stroke="rgba(34, 211, 238, 0.6)"
                strokeWidth="1"
                opacity="0.8"
              />
--- a/src/components/ui/StackedCubesLight.tsx
+++ b/src/components/ui/StackedCubesLight.tsx
@@ -35,8 +35,8 @@ const stackData = [
 ];
 export function StackedCubesLight() {
-  const [active, setActive] = useState<string | null>("agent");
+  const [active, setActive] = useState<string | null>("network");
-  const [selectedForMobile, setSelectedForMobile] = useState<string | null>("agent");
+  const [selectedForMobile, setSelectedForMobile] = useState<string | null>("network");
  const handleCubeClick = (id: string) => {
    setSelectedForMobile((prev) => (prev === id ? null : id));
@@ -49,10 +49,10 @@ export function StackedCubesLight() {
  return (
    <div className="flex flex-col items-center relative">
      {/* ✨ Ambient cyan-white gradient background */}
-      <div className="absolute inset-0 bg-gradient-to-b from-white via-cyan-50/40 to-white blur-3xl opacity-70 pointer-events-none" />
+      <div className="absolute inset-0 bg-gradient-to-b from-white via-cyan-50/30 to-white blur-3xl opacity-70 pointer-events-none" />
      <div
        className="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
-        onMouseLeave={() => setActive("agent")}
+        onMouseLeave={() => setActive("network")}
      >
        <motion.div
          className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96"
@@ -77,8 +77,8 @@ export function StackedCubesLight() {
              <div
                className={`absolute inset-0 blur-2xl rounded-3xl transition-all duration-500 ${
                  active === layer.id
-                    ? "bg-cyan-300/40 opacity-70"
+                    ? "bg-cyan-300/20 opacity-20"
-                    : "bg-cyan-200/20 opacity-40"
+                    : "bg-cyan-200/20 opacity-20"
                }`}
              />
              <CubeLight
--- a/src/components/ui/apple-cards-carousel.tsx
+++ b/src/components/ui/apple-cards-carousel.tsx
@@ -11,6 +11,7 @@ import {
 import { cn } from "@/lib/utils";
 import { Link } from "react-router-dom";
 import { motion } from "motion/react";
 import { DarkCard } from "./cards";
 interface CarouselProps {
  items: JSX.Element[];
@@ -73,7 +74,7 @@ export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => {
          <div
            className={cn(
-              "flex flex-row justify-start gap-4 pl-4",
+              "flex flex-row justify-start gap-6 pl-4",
              "mx-auto max-w-7xl", // remove max-w-4xl if you want the carousel to span the full width of its container
            )}
          >
@@ -93,7 +94,7 @@ export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => {
                  },
                }}
                key={"card" + index}
-                className="rounded-3xl last:pr-[5%] md:last:pr-[33%]"
+                className="rounded-3xl last:pr-[5%] md:last:pr-[33%] "
              >
                {item}
              </motion.div>
@@ -127,42 +128,44 @@ export const Card = ({
  card: Card;
  layout?: boolean;
 }) => {
  return (
    <Link to={card.link}>
-      <motion.div
+      <DarkCard className="p-0 rounded-3xl">
-        layoutId={layout ? `card-${card.title}` : undefined}
+        <motion.div
-        className="relative z-10 flex h-60 w-56 flex-col items-start justify-start overflow-hidden rounded-3xl md:h-120 md:w-96 hover:scale-105 transition-transform duration-200"
+          layoutId={layout ? `card-${card.title}` : undefined}
-        style={{
+          className="relative z-10 flex h-104 w-80 flex-col justify-between overflow-hidden rounded-3xl p-8 md:h-120 md:w-96"
-          backgroundImage: `url(${card.bg})`,
+        >
-          backgroundSize: 'cover',
+        <div className="flex h-2/5 flex-col justify-center py-6 px-4">
          backgroundPosition: 'center',
        }}
      >
        <div className="pointer-events-none absolute inset-x-0 top-0 z-30 h-full bg-gradient-to-b from-black/50 via-transparent to-transparent" />
        <div className="relative z-40 p-8 w-full">
          <motion.p
            layoutId={layout ? `category-${card.category}` : undefined}
-            className="text-left font-sans text-sm font-medium text-white md:text-base"
+            className="text-left font-sans font-semibold text-cyan-500 uppercase tracking-wider text-xs   md:text-sm"
          >
            {card.category}
          </motion.p>
          <motion.p
            layoutId={layout ? `title-${card.title}` : undefined}
-            className="mt-2 max-w-xs text-left font-sans text-xl font-semibold [text-wrap:balance] text-white md:text-3xl"
+            className="mt-1 max-w-xs text-left font-sans text-xl font-semibold text-white [text-wrap:balance] lg:text-2xl"
          >
            {card.title}
          </motion.p>
-          <div className="flex flex-row justify-between items-center w-full mt-4">
+          <div className="mt-2 flex w-full flex-row items-center justify-between md:mt-4">
-            <motion.p className="max-w-xs text-left font-sans text-sm text-neutral-300">
+            <motion.p className="max-w-xs text-left font-sans lg:text-xl text-lg text-neutral-300 lg:leading-normal leading-tight">
              {card.description}
            </motion.p>
-            <div className="h-8 w-8 bg-[#212121] rounded-full flex items-center justify-center text-[#858585] shrink-0 hover:bg-[#262626] hover:text-white active:bg-[#262626] active:text-white transition-colors duration-200">
+            <div className="flex h-6 w-6 ml-2 shrink-0 items-center justify-center rounded-full bg-[#212121] text-[#858585] transition-colors duration-200 hover:bg-[#262626] hover:text-white md:h-8 md:w-8">
-              <IconChevronRight className="h-6 w-6" />
+              <IconChevronRight className="h-4 w-4 md:h-6 md:w-6 " />
            </div>
          </div>
        </div>
-      </motion.div>
+        <div className="relative flex h-3/5 w-full items-end justify-end bg-transparent">
          <img
            src={card.src}
            alt={card.title}
            className="h-full w-full origin-bottom-right scale-75 object-contain mb-10"
          />
        </div>
        </motion.div>
      </DarkCard>
    </Link>
  );
 };
--- a/src/components/ui/cards.tsx
+++ b/src/components/ui/cards.tsx
@@ -0,0 +1,19 @@
 import * as React from "react";
 import { cn } from "@/lib/utils";
 const DarkCard = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "border border-white/10 bg-white/3 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 rounded-3xl hover:bg-white/6 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/15",
      className
    )}
    {...props}
  />
 ));
 DarkCard.displayName = "DarkCard";
 export { DarkCard };
--- a/src/components/ui/layout-text-flip.tsx
+++ b/src/components/ui/layout-text-flip.tsx
@@ -33,7 +33,7 @@ export const LayoutTextFlip = ({
      <motion.span
        layout
-        className="relative w-fit overflow-hidden px-2 py-2 font-medium italic tracking-tight"
+        className="relative w-fit overflow-hidden px-2 py-2 font-medium tracking-tight"
      >
        <AnimatePresence mode="popLayout">
          <motion.span
--- a/src/pages/agents/AgentHeroAlt.tsx
+++ b/src/pages/agents/AgentHeroAlt.tsx
@@ -0,0 +1,33 @@
 'use client'
 import { Button } from '../../components/Button'
 import { Eyebrow, P, H3 } from '../../components/Texts'
 export function AgentHeroAlt() {
  return (
    <div className="relative bg-white lg:mt-10 mt-0">
      <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-2/3">
        <img
          alt=""
          src="/images/agents.png"
          className="size-full object-cover"
        />
      </div>
      <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8">
        <div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 xl:pr-32">
          <Eyebrow className="text-base/7 font-semibold text-cyan-500">AGENT</Eyebrow>
          <H3 as="h1" className="mt-2 text-gray-900">Sovereign AI Agents, Coming Soon.</H3>
          <P className="mt-6  text-gray-600">
            Hero is the autonomous agent layer for the Mycelium platform—trusted, policy-aware AI that runs on infrastructure you control and remembers what matters.
          </P>
          <div className="mt-8">
            <Button href="#" variant="solid" color="cyan">
              Join the Waitlist
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
 }
--- a/src/pages/agents/AgentsHeroAlt.tsx
+++ b/src/pages/agents/AgentsHeroAlt.tsx
@@ -7,7 +7,7 @@ export function AgentsHeroAlt() {
  return (
    <div
      style={{
-        backgroundImage: "url(/images/agentshero.png)",
+        backgroundImage: "url(/images/agentshero2.png)",
        backgroundSize: "cover",
        backgroundPosition: "center",
      }}
--- a/src/pages/agents/AgentsPage.tsx
+++ b/src/pages/agents/AgentsPage.tsx
@@ -3,13 +3,13 @@ import { DeploySection } from './DeploySection'
 import { GallerySection } from './GallerySection'
 import { Companies } from './Companies'
 import { BentoSection } from './BentoSection'
-import { AgentsHeroAlt } from './AgentsHeroAlt'
+import { AgentHeroAlt } from './AgentHeroAlt'
 export default function AgentsPage() {
  return (
    <div>
      <AnimatedSection>
-        <AgentsHeroAlt />
+      <AgentHeroAlt />
      </AnimatedSection>
      <AnimatedSection>
--- a/src/pages/cloud/CloudArchitecture.tsx
+++ b/src/pages/cloud/CloudArchitecture.tsx
@@ -1,5 +1,5 @@
 import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, H3, P } from '../../components/Texts'
 const architectureSections = [
  {
@@ -39,15 +39,15 @@ const architectureSections = [
 export function CloudArchitecture() {
  return (
-    <section className="bg-white py-24 sm:py-32">
+    <section className="bg-white py-24 lg:py-32">
      <Container>
-        <div className="mx-auto max-w-3xl text-center">
+        <div className="mx-auto max-w-5xl text-center">
-          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+          <Eyebrow>
            Technical Architecture
          </Eyebrow>
-          <SectionHeader as="h2" className="mt-6 text-gray-900">
+          <H3 className="mt-6 text-gray-900">
-            Built on a sovereign, encrypted delivery mesh.
+            Built on a Sovereign, Encrypted Delivery Mesh.
-          </SectionHeader>
+          </H3>
          <P className="mt-6 text-gray-600">
            Mycelium Cloud rides on the ThreeFold Grid, pairing encrypted mesh
            networking with deterministic K3s orchestration. Every layer is
@@ -59,7 +59,7 @@ export function CloudArchitecture() {
          {architectureSections.map((section) => (
            <div
              key={section.title}
-              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg "
            >
              <div className="flex items-center gap-3">
                <span className="inline-flex size-10 items-center justify-center rounded-full bg-cyan-500/10 text-base font-semibold uppercase tracking-[0.3em] text-cyan-600">
--- a/src/pages/cloud/CloudBluePrint.tsx
+++ b/src/pages/cloud/CloudBluePrint.tsx
@@ -0,0 +1,52 @@
 import { H3, P, Eyebrow } from '../../components/Texts'
 export function CloudBluePrint() {
  return (
    <div className="bg-white py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <Eyebrow color="accent">Cloud Blueprint</Eyebrow>
        <H3 color="primary">Your Personal Sovereign Cloud Workspace</H3>
        <P color="primary">Digital Me is an example environment built to demonstrate what’s possible on top of the Mycelium Stack, a full personal cloud you can deploy, customize, or extend.
            Your files, communication, apps, and optional AI agent, all running privately on infrastructure you choose.</P>
        <div className="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5">
          <img
            alt="Transistor"
            src="https://tailwindcss.com/plus-assets/img/logos/158x48/transistor-logo-gray-900.svg"
            width={158}
            height={48}
            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
          />
          <img
            alt="Reform"
            src="https://tailwindcss.com/plus-assets/img/logos/158x48/reform-logo-gray-900.svg"
            width={158}
            height={48}
            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
          />
          <img
            alt="Tuple"
            src="https://tailwindcss.com/plus-assets/img/logos/158x48/tuple-logo-gray-900.svg"
            width={158}
            height={48}
            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
          />
          <img
            alt="SavvyCal"
            src="https://tailwindcss.com/plus-assets/img/logos/158x48/savvycal-logo-gray-900.svg"
            width={158}
            height={48}
            className="col-span-2 max-h-12 w-full object-contain sm:col-start-2 lg:col-span-1"
          />
          <img
            alt="Statamic"
            src="https://tailwindcss.com/plus-assets/img/logos/158x48/statamic-logo-gray-900.svg"
            width={158}
            height={48}
            className="col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto lg:col-span-1"
          />
        </div>
      </div>
    </div>
  )
 }
--- a/src/pages/cloud/CloudDesign.tsx
+++ b/src/pages/cloud/CloudDesign.tsx
--- a/src/pages/cloud/CloudFeatures.tsx
+++ b/src/pages/cloud/CloudFeatures.tsx
@@ -1,125 +1,430 @@
-import { Container } from '../../components/Container'
+'use client'
 import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
-const featureSections = [
+import { Fragment, useEffect, useId, useRef, useState } from 'react'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
 import clsx from 'clsx'
 import {
  type MotionProps,
  type Variant,
  AnimatePresence,
  motion,
 } from 'framer-motion'
 import { useDebouncedCallback } from 'use-debounce'
 import {
  Eyebrow,
  FeatureDescription,
  FeatureTitle,
  MobileFeatureTitle,
  P,
  SectionHeader,
 } from '@/components/Texts'
 import { Container } from '@/components/Container'
 import reservenodeimg from '/images/cloud/reserve.png'
 import billingImg from '/images/cloud/billing.png'
 import kubeconfigImg from '/images/cloud/kubeconfig.png'
 interface CustomAnimationProps {
  isForwards: boolean
  changeCount: number
 }
 const features = [
  {
-    title: 'Mycelium Networking',
+    name: 'Decentralized Kubernetes',
    description:
-      'Ultra-fast, decentralized networking inspired by nature to keep services reachable without exposing surfaces.',
+      "Reserve a node and deploy sovereign Kubernetes clusters on decentralized infrastructure.",
-    bullets: [
+    icon: DeviceUserIcon,
-      'End-to-end encrypted mesh connectivity between every node.',
+    screen: ReserveNodeScreen,
      'Direct node communication without centralized intermediaries.',
      'Self-optimizing routes that heal around failures automatically.',
      'Secure peer-to-peer communication across the entire grid.',
    ],
  },
  {
-    title: 'Zero-Image Technology',
+    name: 'Manage Your Cluster',
    description:
-      'Metadata-first zero-images shrink artifacts up to 100x, reducing deployment time and bandwidth.',
+      'Manage your cluster with ease, with a simple and intuitive interface.',
-    bullets: [
+    icon: DeviceNotificationIcon,
-      'Deterministic deployments verified cryptographically.',
+    screen: ManageClusterScreen,
      'Run containers, VMs, and Linux workloads with secure boot.',
      'Smart contract orchestration manages every workload lifecycle.',
      'Minimal artifact footprint accelerates delivery everywhere.',
    ],
  },
  {
-    title: 'Quantum-Safe Storage (QSS)',
+    name: 'Personalised Billings & Accounts',
    description:
-      'Quantum-resistant encryption secures data beyond the application layer for complete ownership.',
+      'Easily manage your cluster billing and accounts with personalised configurations.',
-    bullets: [
+    icon: DeviceTouchIcon,
-      'Self-healing storage recovers instantly from corruption or failure.',
+    screen: PersonalisedBillingsScreen,
      'Serve the same data via IPFS, S3, WebDAV, HTTP, and native FS.',
      'Geo-aware placement enforces residency and redundancy policies.',
      'Autonomous replication keeps data resilient across the globe.',
    ],
  },
  {
    title: 'Multi-Master Clusters',
    description:
      'High-availability Kubernetes with automatic failover and leadership orchestration.',
    bullets: [
      'Multi-master topologies orchestrated with zero downtime.',
      'Automatic failover keeps control planes healthy and responsive.',
      'HA operations managed without manual intervention or scripts.',
      'Upgrades roll out seamlessly with continuous verification.',
    ],
  },
  {
    title: 'Effortless Load Balancing & Scaling',
    description:
      'Adaptive automation balances traffic and scales workloads based on demand.',
    bullets: [
      'Built-in autoscaling that responds to real-time usage.',
      'Native load balancing distributes traffic globally.',
      'High availability delivered without custom controllers.',
      'Elastic scaling keeps costs aligned with workload demand.',
    ],
  },
  {
    title: 'Simple Web Gateway Access',
    description:
      'Expose services to the public web with declarative Kubernetes resources.',
    bullets: [
      'One resource publishes services without complex ingress rules.',
      'Domain and prefix-based routing built into the platform.',
      'No need to manage dedicated ingress controllers.',
      'Consistent configuration across every cluster and region.',
    ],
  },
 ]
 function DeviceUserIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
  return (
    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M16 23a3 3 0 100-6 3 3 0 000 6zm-1 2a4 4 0 00-4 4v1a2 2 0 002 2h6a2 2 0 002-2v-1a4 4 0 00-4-4h-2z"
        fill="#737373"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M5 4a4 4 0 014-4h14a4 4 0 014 4v24a4.002 4.002 0 01-3.01 3.877c-.535.136-.99-.325-.99-.877s.474-.98.959-1.244A2 2 0 0025 28V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 001.041 1.756C8.525 30.02 9 30.448 9 31s-.455 1.013-.99.877A4.002 4.002 0 015 28V4z"
        fill="#A3A3A3"
      />
    </svg>
  )
 }
 function DeviceNotificationIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
  return (
    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
        fill="#A3A3A3"
      />
      <path
        d="M9 8a2 2 0 012-2h10a2 2 0 012 2v2a2 2 0 01-2 2H11a2 2 0 01-2-2V8z"
        fill="#737373"
      />
    </svg>
  )
 }
 function DeviceTouchIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
  let id = useId()
  return (
    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" {...props}>
      <defs>
        <linearGradient
          id={`${id}-gradient`}
          x1={14}
          y1={14.5}
          x2={7}
          y2={17}
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#737373" />
          <stop offset={1} stopColor="#D4D4D4" stopOpacity={0} />
        </linearGradient>
      </defs>
      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M5 4a4 4 0 014-4h14a4 4 0 014 4v13h-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 002 2h4v2H9a4 4 0 01-4-4V4z"
        fill="#A3A3A3"
      />
      <path
        d="M7 22c0-4.694 3.5-8 8-8"
        stroke={`url(#${id}-gradient)`}
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M21 20l.217-5.513a1.431 1.431 0 00-2.85-.226L17.5 21.5l-1.51-1.51a2.107 2.107 0 00-2.98 0 .024.024 0 00-.005.024l3.083 9.25A4 4 0 0019.883 32H25a4 4 0 004-4v-5a3 3 0 00-3-3h-5z"
        fill="#A3A3A3"
      />
    </svg>
  )
 }
 const maxZIndex = 2147483647
 const bodyVariantBackwards: Variant = {
  opacity: 0.4,
  scale: 0.8,
  zIndex: 0,
  filter: 'blur(4px)',
  transition: { duration: 0.4 },
 }
 const bodyAnimation: MotionProps = {
  initial: 'initial',
  animate: 'animate',
  exit: 'exit',
  variants: {
    initial: (custom: CustomAnimationProps) => (
      custom.isForwards
        ? {
            y: '100%',
            zIndex: maxZIndex - custom.changeCount,
            transition: { duration: 0.4 },
          }
        : bodyVariantBackwards
    ),
    animate: (custom: CustomAnimationProps) => ({
      y: '0%',
      opacity: 1,
      scale: 1,
      zIndex: maxZIndex / 2 - custom.changeCount,
      filter: 'blur(0px)',
      transition: { duration: 0.4 },
    }),
    exit: (custom: CustomAnimationProps) => (
      custom.isForwards
        ? bodyVariantBackwards
        : {
            y: '100%',
            zIndex: maxZIndex - custom.changeCount,
            transition: { duration: 0.4 },
          }
    ),
  },
 }
 function ReserveNodeScreen() {
  return (
    <img
      src={reservenodeimg}
      alt="Mycelium Reserve Node"
      width={2432}
      height={1442}
      className="w-4xl max-w-none rounded-xl shadow-2xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-32 lg:-ml-32"
    />
  );
 }
 function ManageClusterScreen() {
  return (
    <img
      src={kubeconfigImg}
      alt="Mycelium Kubeconfig"
      width={2432}
      height={1442}
      className="w-4xl max-w-none rounded-xl shadow-2xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-32 lg:-ml-32"
    />
  );
 }
 function PersonalisedBillingsScreen() {
  return (
    <img
      src={billingImg}
      alt="Mycelium Billing"
      width={2432}
      height={1442}
      className="w-4xl max-w-none rounded-xl shadow-2xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-32 lg:-ml-32"
    />
  );
 }
 function usePrevious<T>(value: T) {
  const ref = useRef<T>()
  useEffect(() => {
    ref.current = value
  }, [value])
  return ref.current
 }
 function CloudFeaturesDesktop() {
  let [changeCount, setChangeCount] = useState(0)
  let [selectedIndex, setSelectedIndex] = useState(0)
  let prevIndex = usePrevious(selectedIndex)
  let isForwards = prevIndex === undefined ? true : selectedIndex > prevIndex
  let onChange = useDebouncedCallback(
    (selectedIndex: number) => {
      setSelectedIndex(selectedIndex)
      setChangeCount((changeCount) => changeCount + 1)
    },
    100,
    { leading: true },
  )
  return (
    <TabGroup
      className="grid grid-cols-12 items-center gap-8 lg:gap-16"
      selectedIndex={selectedIndex}
      onChange={onChange}
      vertical
    >
      <TabList className="z-10 col-span-6 space-y-6 pl-4 sm:pl-6 lg:pl-8">
        {features.map((feature, featureIndex) => (
          <div
            key={feature.name}
            className={clsx(
              'relative rounded-2xl outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30 ml-16',
              selectedIndex === featureIndex
                ? 'outline-cyan-500'
                : 'outline-transparent hover:outline-cyan-500',
            )}
          >
            {featureIndex === selectedIndex && (
              <motion.div
                layoutId="activeBackground"
                className="absolute inset-0 bg-gray-800 "
                initial={{ borderRadius: 16 }}
              />
            )}
            <div className="relative z-10 p-8">
              <feature.icon className="h-8 w-8" />
              <FeatureTitle as="h3" color="white" className="mt-6">
                <Tab className="text-left data-selected:not-data-focus:outline-hidden">
                  <span className="absolute inset-0 rounded-2xl" />
                  {feature.name}
                </Tab>
              </FeatureTitle>
              <FeatureDescription color="secondary" className="mt-2">
                {feature.description}
              </FeatureDescription>
            </div>
          </div>
        ))}
      </TabList>
      <div className="relative col-span-6 overflow-hidden">
        <div className="z-10 mx-auto w-full max-w-[366px]">
          <TabPanels as={Fragment}>
            <AnimatePresence
              initial={false}
              custom={{ isForwards, changeCount }}
            >
              {features.map((feature, featureIndex) =>
                selectedIndex === featureIndex ? (
                  <TabPanel
                    static
                    key={feature.name + changeCount}
                    className="col-start-1 row-start-1 flex focus:outline-offset-32 data-selected:not-data-focus:outline-hidden"
                  >
                    <motion.div {...bodyAnimation} custom={{ isForwards, changeCount }}>
                      <feature.screen />
                    </motion.div>
                  </TabPanel>
                ) : null,
              )}
            </AnimatePresence>
          </TabPanels>
        </div>
      </div>
    </TabGroup>
  )
 }
 function CloudFeaturesMobile() {
  let [activeIndex, setActiveIndex] = useState(0)
  let slideContainerRef = useRef<React.ElementRef<'div'>>(null)
  let slideRefs = useRef<Array<React.ElementRef<'div'>>>([])
  useEffect(() => {
    let observer = new window.IntersectionObserver(
      (entries) => {
        for (let entry of entries) {
          if (entry.isIntersecting && entry.target instanceof HTMLDivElement) {
            setActiveIndex(slideRefs.current.indexOf(entry.target))
            break
          }
        }
      },
      {
        root: slideContainerRef.current,
        threshold: 0.6,
      },
    )
    for (let slide of slideRefs.current) {
      if (slide) {
        observer.observe(slide)
      }
    }
    return () => {
      observer.disconnect()
    }
  }, [slideContainerRef, slideRefs])
  return (
    <>
      <div
        ref={slideContainerRef}
        className="-mb-4 flex snap-x snap-mandatory -space-x-4 overflow-x-auto overscroll-x-contain scroll-smooth pb-4 [scrollbar-width:none] sm:-space-x-6 [&::-webkit-scrollbar]:hidden"
      >
        {features.map((feature, featureIndex) => (
          <div
            key={featureIndex}
            ref={(ref) => ref && (slideRefs.current[featureIndex] = ref)}
            className="w-full flex-none snap-center px-4 sm:px-6 transition-all duration-300 ease-in-out hover:scale-105"
          >
                        <div
              className={clsx(
                'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
                activeIndex === featureIndex
                  ? 'outline-transparent' // Remove outline for active mobile slide
                  : 'outline-transparent hover:outline-cyan-500',
              )}
            >
              <div className="relative mx-auto w-full max-w-[366px]">
                <feature.screen />
              </div>
              <div className="absolute inset-x-0 bottom-0 bg-gray-800 p-6 backdrop-blur-sm sm:p-10">
                <feature.icon className="h-8 w-8" />
                <MobileFeatureTitle color="white" className="mt-6">
                  {feature.name}
                </MobileFeatureTitle>
                <FeatureDescription color="secondary" className="mt-2">
                  {feature.description}
                </FeatureDescription>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="mt-6 flex justify-center gap-3">
        {features.map((_, featureIndex) => (
          <button
            type="button"
            key={featureIndex}
            className={clsx(
              'relative h-0.5 w-4 rounded-full',
              featureIndex === activeIndex ? 'bg-gray-600' : 'bg-gray-700',
            )}
            aria-label={`Go to slide ${featureIndex + 1}`}
            onClick={() => {
              slideRefs.current[featureIndex].scrollIntoView({
                block: 'nearest',
                inline: 'nearest',
              })
            }}
          >
            <span className="absolute -inset-x-1.5 -inset-y-3" />
          </button>
        ))}
      </div>
    </>
  )
 }
 export function CloudFeatures() {
  return (
-    <section className="bg-gray-50 py-24 sm:py-32">
+    <section
      id="overview"
      aria-label="Features for investing all your money"
      className="bg-gray-900 py-20 sm:py-32"
    >
      <Container>
-        <div className="mx-auto max-w-3xl text-center">
+        <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
-          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+          <Eyebrow color="accent">Platform Overview</Eyebrow>
-            Core Features
+          <SectionHeader color="white" className="mt-2">
-          </Eyebrow>
+            A Decentralized Cloud that Operates Itself
          <SectionHeader as="h2" className="mt-6 text-gray-900">
            Infrastructure that verifies, heals, and scales itself.
          </SectionHeader>
-          <P className="mt-6 text-gray-600">
+          <P color="light" className="mt-6">
-            From mesh networking to quantum-safe storage, every capability in
+           Mycelium Cloud runs Kubernetes on a sovereign, self-healing network with compute, storage, and networking built in, so you don’t need external cloud dependencies.
            Mycelium Cloud is designed for sovereign control and autonomous
            operations—so your teams focus on shipping workloads instead of
            wiring infrastructure.
          </P>
        </div>
        <div className="mt-16 grid gap-8 md:grid-cols-2 xl:grid-cols-3">
          {featureSections.map((feature) => (
            <div
              key={feature.title}
              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
            >
              <div>
                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
                  Capability
                </Small>
                <h3 className="mt-4 text-xl font-semibold text-gray-900">
                  {feature.title}
                </h3>
                <p className="mt-4 text-sm leading-relaxed text-gray-600">
                  {feature.description}
                </p>
              </div>
              <ul className="mt-6 space-y-3 text-sm text-gray-600">
                {feature.bullets.map((bullet) => (
                  <li
                    key={bullet}
                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
                  >
                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
                    <span>{bullet}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </Container>
      <div className="hidden md:mt-20 md:block">
          <CloudFeaturesDesktop />
        </div>
      <div className="mt-16 md:hidden">
        <CloudFeaturesMobile />
      </div>
    </section>
  )
 }
--- a/src/pages/cloud/CloudHero.tsx
+++ b/src/pages/cloud/CloudHero.tsx
@@ -2,7 +2,7 @@ import { useId } from 'react'
 import { Button } from '../../components/Button'
 import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, H2, P, H5 } from '../../components/Texts'
 function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
  const id = useId()
@@ -82,17 +82,17 @@ export function CloudHero() {
            <Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
              Mycelium Cloud
            </Eyebrow>
-            <SectionHeader as="h1" className="mt-6 text-gray-900">
+            <H2 as="h1" className="mt-6 text-gray-900">
              Deploy sovereign Kubernetes clusters on decentralized
              infrastructure.
-            </SectionHeader>
+            </H2>
-            <P className="mt-6 text-gray-600">
+            <H5  className="mt-6 text-gray-600">
              Mycelium Cloud turns the ThreeFold Grid into a programmable
              substrate for K3s. Launch verifiable clusters with nature-inspired
              networking, quantum-safe storage, and zero-image delivery that
              keeps every workload deterministic.
-            </P>
+            </H5>
-            <P className="mt-6 italic text-gray-500">
+            <P className="mt-6 text-gray-500">
              Developer guide to decentralized cloud computing.
            </P>
            <div className="mt-10 flex flex-wrap gap-4">
--- a/src/pages/cloud/CloudHeroNew.tsx
+++ b/src/pages/cloud/CloudHeroNew.tsx
@@ -0,0 +1,50 @@
 import { H3, H5, Eyebrow } from "../../components/Texts"
 import { Button } from "../../components/Button"
 export function CloudHeroNew() {
  return (
    <div
      className="relative bg-cover lg:bg-contain bg-right bg-no-repeat"
      style={{ backgroundImage: "url('/images/cloudhero4.webp')" }}
    >
      <div className="mx-auto max-w-7xl lg:px-8">
        <div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
          <div className="mx-auto max-w-2xl lg:mx-0">
            <Eyebrow>
             Mycelium Cloud
            </Eyebrow>
            <H3 className="mt-4">
              Run Kubernetes on the Sovereign Agentic Cloud
            </H3>
            <H5 className="mt-8 text-lg text-gray-600">
              Mycelium Cloud turns the ThreeFold Grid into a programmable substrate for K3s. 
            </H5>
            <H5 className="mt-4 text-lg text-gray-600">
              Deploy K3s clusters on a global, self-healing mesh network.
              Your workloads run on sovereign, encrypted infrastructure, without centralized cloud control.
            </H5>
            <H5 className="mt-4 text-sm text-gray-600">
              Works Alone. Works Together.
              Mycelium Cloud can run on any network fabric, or pair with Mycelium Network
              for sovereign connectivity.
            </H5>
            <div className="mt-10 flex items-center gap-x-6">
              <Button
                to="#"
                variant="solid"
                className=""
                color="cyan"
              >
                Get started
              </Button>
              <Button to="#" variant="outline">
                Documentation <span aria-hidden="true"> →</span>
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
 }
--- a/src/pages/cloud/CloudHosting.tsx
+++ b/src/pages/cloud/CloudHosting.tsx
@@ -0,0 +1,70 @@
 import {
  ArrowPathIcon,
  CloudArrowUpIcon,
  ServerIcon,
  ShieldCheckIcon,
 } from '@heroicons/react/24/outline'
 import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
 const features = [
  {
    Eyebrow: 'DevOps / Cloud teams',
    name: 'Kubernetes Clusters',
    description: 'Deterministic K3s workloads across sovereign hardware.',
    icon: ServerIcon,
  },
  {
    Eyebrow: 'Security & infrastructure',
    name: 'Encrypted Mesh Networking',
    description: 'No public ingress, no exposed attack surface, zero-trust routing.',
    icon: ShieldCheckIcon,
  },
  {
    Eyebrow: 'Data-driven teams',
    name: 'S3-Compatible Storage',
    description: 'Distributed storage with erasure coding and residency control.',
    icon: CloudArrowUpIcon,
  },
  {
    Eyebrow: 'AI / ML workloads',
    name: 'GPU-Ready',
    description: 'Scale inference & training on demand.',
    icon: ArrowPathIcon,
  },
 ]
 export function CloudHosting() {
  return (
    <div className="relative bg-white py-24 lg:py-32">
      <div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
        <Eyebrow>CAPABILITIES</Eyebrow>
        <H3 className="mt-2">What You Can Run on Mycelium Cloud</H3>
        <P className="mx-auto mt-5 max-w-prose">
          Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
          orchestration, and security layers, so you can deploy services the same way you would on public cloud without
          giving your data or control to anyone.
        </P>
        <div className="mt-16">
          <div className="grid grid-cols-1 gap-12 lg:grid-cols-4">
            {features.map((feature) => (
              <div key={feature.name} className="relative">
                <div className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 p-8 pt-16 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg">
                  <span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-cyan-500 hover:bg-cyan-400 p-3 shadow-lg">
                    <feature.icon aria-hidden="true" className="size-8 text-white" />
                  </span>
                  <Eyebrow>{feature.Eyebrow}</Eyebrow>
                  <CT as="h3" className="mt-4">
                    {feature.name}
                  </CT>
                  <CP color="secondary" className="mt-4">
                    {feature.description}
                  </CP>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
 }
--- a/src/pages/cloud/CloudOverview.tsx
+++ b/src/pages/cloud/CloudOverview.tsx
@@ -39,7 +39,7 @@ export function CloudOverview() {
      </div>
      <Container className="relative">
        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-400">
+          <Eyebrow>
            Platform Overview
          </Eyebrow>
          <SectionHeader as="h2" color="light" className="mt-6 font-medium">
@@ -51,7 +51,7 @@ export function CloudOverview() {
            orchestration are all built-in so developers can deploy critical
            workloads without wrestling infrastructure.
          </P>
-          <P color="lightSecondary" className="mt-6 italic">
+          <P color="lightSecondary" className="mt-6">
            Declarative, sovereign, and ready for production workloads anywhere.
          </P>
        </div>
--- a/src/pages/cloud/CloudPage.tsx
+++ b/src/pages/cloud/CloudPage.tsx
@@ -1,37 +1,40 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { CloudHero } from './CloudHero'
 import { CloudOverview } from './CloudOverview'
 import { CloudArchitecture } from './CloudArchitecture'
 import { CloudFeatures } from './CloudFeatures'
 import { CloudGettingStarted } from './CloudGettingStarted'
 import { CloudUseCases } from './CloudUseCases'
 import { SecurityPillars } from './SecurityPillars'
 import { CloudCTA } from './CloudCTA'
 import { CloudHeroNew } from './CloudHeroNew'
 import { CloudHosting } from './CloudHosting'
 import { CloudBluePrint } from './CloudBluePrint'
 export default function CloudPage() {
  return (
    <>
      <AnimatedSection>
-        <CloudHero />
+        <CloudHeroNew />
      </AnimatedSection>
      <AnimatedSection>
-        <CloudOverview />
+        <CloudHosting />
      </AnimatedSection>
      <AnimatedSection>
        <CloudArchitecture />
      </AnimatedSection>
      <AnimatedSection>
        <CloudFeatures />
      </AnimatedSection>
      <AnimatedSection>
-        <CloudGettingStarted />
+        <CloudArchitecture />
      </AnimatedSection>
      <AnimatedSection>
        <CloudUseCases />
      </AnimatedSection>
      <AnimatedSection>
-        <SecurityPillars />
+        <CloudBluePrint />
      </AnimatedSection>
      <AnimatedSection>
        <CloudCTA />
      </AnimatedSection>
--- a/src/pages/cloud/CloudUseCases.tsx
+++ b/src/pages/cloud/CloudUseCases.tsx
@@ -3,35 +3,33 @@ import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
 const useCases = [
  {
-    title: 'AI / ML Training',
+    title: 'Enterprise & Private Kubernetes',
    description:
-      'Run GPU-accelerated workloads for deep learning, data science, and inference on demand.',
+      'Production-grade K3s clusters with full workload ownership and residency control. Deploy apps and internal services without vendor lock-in or exposed surfaces.',
    bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
  },
  {
    title: 'Enterprise Kubernetes',
    description:
      'Operate production-grade clusters with complete control and no vendor lock-in.',
    bullets: ['High availability', 'Security', 'Compliance'],
  },
  {
    title: 'Edge & IoT',
    description:
      'Leverage global nodes for low-latency workloads and connected device deployments.',
    bullets: ['Low latency', 'Global distribution', 'Real-time processing'],
  },
  {
    title: 'DigitalMe Blueprint',
    description:
      'Launch a full digital workspace on Mycelium Cloud with pre-integrated services.',
    bullets: [
-      'Cryptpad • Encrypted collaboration',
+      'High availability + failover',
-      'Elements • Matrix chat',
+      'Encrypted, mesh-native networking',
-      'Stallwart • Mail, calendar, contacts',
+      'Compliance-ready governance & policy control',
-      'Gitea • Git hosting',
+    ],
-      'Nextcloud • File storage and sync',
+  },
-      'LiveKit / Jitsi • Real-time video',
+  {
-      'Single Sign-On backed by Gitea',
+    title: 'Edge & Distributed Deployments',
    description:
      'Place compute close to where data is created. Run clusters globally across home labs, offices, data centers, or edge locations.',
    bullets: [
      'Low-latency execution',
      'Mesh-routed connectivity',
      'Autonomous healing across region',
    ],
  },
  {
    title: 'AI / ML & Agent Workloads',
    description:
      'Run inference, training, and autonomous AI systems on sovereign compute. GPU orchestration, private vector storage, and model execution without handing data to hyperscalers.',
    bullets: [
      'Scales across nodes',
      'Supports open-source & fine-tuned models',
      'Built for agentic automation + RAG',
    ],
  },
 ]
@@ -41,7 +39,7 @@ export function CloudUseCases() {
    <section className="bg-white py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+          <Eyebrow>
            Use Cases
          </Eyebrow>
          <SectionHeader as="h2" className="mt-6 text-gray-900">
--- a/src/pages/compute/CallToAction.tsx
+++ b/src/pages/compute/CallToAction.tsx
@@ -14,14 +14,16 @@ export function CallToAction() {
      <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">
-            Get Started Today
+            Choose How You Want to Start
          </h2>
          <p className="mt-6 text-lg text-gray-300">
-            Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.
+            Run workloads using Mycelium Cloud, or host your own compute node.
 Both use the same deterministic execution fabric.
          </p>
          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
            <Button to="/download" variant="solid" color="white">
-              Get Mycelium Connector
+              Deploy Workloads
            </Button>
            <Button
              to="https://threefold.info/mycelium_network/docs/"
@@ -30,7 +32,7 @@ export function CallToAction() {
              variant="outline"
              color="white"
            >
-              Read Docs
+              Host Compute Node
            </Button>
          </div>
        </div>
--- a/src/pages/compute/ComputeCapabilities.tsx
+++ b/src/pages/compute/ComputeCapabilities.tsx
@@ -0,0 +1,58 @@
 import {
  CpuChipIcon,
  CubeIcon,
  ServerIcon,
 } from '@heroicons/react/24/solid'
 import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
 import { Container } from '../../components/Container'
 const capabilities = [
  {
    name: 'Containers',
    description: 'Services, web apps, APIs. Fully compatible with Kubernetes.',
    icon: CubeIcon,
  },
  {
    name: 'Virtual Machines',
    description:
      'Legacy apps and specialized runtime stacks. Secure boot + attestation included.',
    icon: ServerIcon,
  },
  {
    name: 'Native Linux Workloads',
    description:
      'Agents, batch jobs, tooling. Runs statelessly anywhere.',
    icon: CpuChipIcon,
  },
 ]
 export function ComputeCapabilities() {
  return (
    <section className="bg-white py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow>CAPABILITIES</Eyebrow>
          <H3 className="mt-4 text-gray-900">What You Can Run</H3>
          <P className="mt-6 text-gray-600">
            Mycelium Compute supports multiple workload types on a single
            execution fabric.
          </P>
        </div>
        <div className="mx-auto mt-16 max-w-5xl">
          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
            {capabilities.map((feature) => (
              <div key={feature.name} className="flex flex-col text-center">
                <div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
                  <feature.icon aria-hidden="true" className="size-6 text-cyan-600" />
                </div>
                <CT className="mt-6 text-gray-900">{feature.name}</CT>
                <CP className="mt-2 text-gray-600">{feature.description}</CP>
              </div>
            ))}
          </dl>
        </div>
      </Container>
    </section>
  )
 }
--- a/src/pages/compute/ComputeDesign.tsx
+++ b/src/pages/compute/ComputeDesign.tsx
@@ -0,0 +1,56 @@
 import {
  ShieldCheckIcon,
  ArrowPathIcon,
  RocketLaunchIcon,
 } from '@heroicons/react/24/solid'
 import { Container } from '../../components/Container'
 import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
 const features = [
  {
    name: 'Cryptographically verified deployments',
    description: 'Every cluster state is signed and checksummed to guarantee truth.',
    icon: ShieldCheckIcon,
  },
  {
    name: 'Stateless execution that scales anywhere',
    description: 'Run workloads on any node, region, or edge without manual orchestration.',
    icon: RocketLaunchIcon,
  },
  {
    name: 'Automatic healing and recovery',
    description: 'Self-repairing processes ensure workloads stay available and consistent.',
    icon: ArrowPathIcon,
  },
 ]
 export function ComputeDesign() {
  return (
    <section className="bg-white py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl sm:text-center">
          <Eyebrow>CORE VALUE</Eyebrow>
          <H3 className="mt-4 text-gray-900">Deterministic by Design</H3>
          <P className="mt-6 text-gray-600">
            Every workload runs exactly as declared: no drift, no hidden state, no surprises.
          </P>
        </div>
        <div className="mx-auto mt-16 max-w-5xl">
          <dl className="grid grid-cols-1 gap-12 text-gray-600 sm:grid-cols-2 lg:grid-cols-3">
            {features.map((feature) => (
              <div key={feature.name} className="relative pl-12">
                <feature.icon
                  aria-hidden="true"
                  className="absolute left-0 top-1 size-6 text-cyan-600"
                />
                <CT className="font-semibold text-gray-900">{feature.name}</CT>
                <CP className="mt-1 text-gray-600">{feature.description}</CP>
              </div>
            ))}
          </dl>
        </div>
      </Container>
    </section>
  )
 }
--- a/src/pages/compute/ComputeFeatures.tsx
+++ b/src/pages/compute/ComputeFeatures.tsx
@@ -3,52 +3,24 @@ import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
 const featureGroups = [
  {
-    title: 'Deterministic Deployments',
+    title: 'Self-Managing Infrastructure',
    description:
-      'Cryptographic verification ensures every workload deploys exactly as specified—no tampering, no drift.',
+      'Scaling, healing, and failover happen automatically, no manual intervention.',
    listTitle: 'Benefits',
    bullets: [
      'Cryptographic verification of every workload component',
      'Zero configuration drift across environments',
      'Immediate detection of unauthorized changes',
      'Complete reproducibility for every deployment',
    ],
  },
  {
-    title: 'Self-Managing & Stateless Infrastructure',
+    title: 'Secure, Stateless Execution',
    description:
-      'Infrastructure that scales and heals autonomously across the ThreeFold Grid with no manual intervention.',
+      'Workloads remain isolated, reproducible, and portable, no environment drift or configuration decay.',
    listTitle: 'Capabilities',
    bullets: [
      'Autonomous operations that self-orchestrate workloads',
      'Global scaling sewn into the fabric of the platform',
      'Stateless design removes hardware dependencies',
      'Self-healing recovery from failures and anomalies',
    ],
  },
  {
-    title: 'Smart Contract-Based Deployment',
+    title: 'Zero-Image Delivery',
    description:
-      'Cryptographically signed contracts orchestrate every workload lifecycle with transparent, tamper-proof execution.',
+      'Deploy workloads using metadata instead of large container images for instant launches.',
    listTitle: 'Benefits',
    bullets: [
      'Every deployment contract cryptographically signed',
      'Fully auditable, transparent execution of operations',
      'Tamper-proof orchestration that cannot be rewritten',
      'Smart contracts automate the entire workload lifecycle',
    ],
  },
  {
-    title: 'Multi-Workload Compatibility with Secure Boot',
+    title: 'Global Placement Control',
    description:
-      'Run containers, VMs, and native Linux workloads anywhere with stateless secure boot and continuous verification.',
+      'Choose where workloads run, on your hardware or across the decentralized grid.',
    listTitle: 'Capabilities',
    bullets: [
      'Full compatibility with Kubernetes and Docker workloads',
      'Securely run virtual machines with attested boot paths',
      'Native Linux applications verified end-to-end',
      'Continuous verification maintains trusted execution',
    ],
  },
 ]
@@ -69,6 +41,7 @@ export function ComputeFeatures() {
            the grid.
          </P>
        </div>
        <div className="mt-16 grid gap-8 md:grid-cols-2">
          {featureGroups.map((feature) => (
            <div
@@ -77,7 +50,7 @@ export function ComputeFeatures() {
            >
              <div>
                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
-                  {feature.listTitle}
+                  Feature
                </Small>
                <h3 className="mt-4 text-2xl font-semibold text-gray-900">
                  {feature.title}
@@ -86,17 +59,6 @@ export function ComputeFeatures() {
                  {feature.description}
                </p>
              </div>
              <ul className="mt-6 space-y-3 text-sm text-gray-600">
                {feature.bullets.map((bullet) => (
                  <li
                    key={bullet}
                    className="flex items-start gap-3 rounded-2xl border border-cyan-100/40 bg-cyan-50/40 p-3 text-left leading-relaxed"
                  >
                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
                    <span>{bullet}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
--- a/src/pages/compute/ComputeHero.tsx
+++ b/src/pages/compute/ComputeHero.tsx
@@ -1,6 +1,7 @@
 'use client'
 import { Button } from '../../components/Button'
 import { Eyebrow, P, H3 } from '../../components/Texts'
 export function ComputeHero() {
  return (
@@ -8,25 +9,24 @@ export function ComputeHero() {
      <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
        <img
          alt=""
-          src="/images/computehero4.png"
+          src="/images/computehero.webp"
-          className="size-full object-cover"
+          className="size-full object-contain"
        />
      </div>
-      <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">
+      <div className="relative mx-auto max-w-7xl py-12 lg:py-24 lg:px-8">
-        <div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 xl:pr-32">
+        <div className="max-w-2xl pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24">
-          <h2 className="text-base/7 font-semibold text-cyan-500">COMPUTE</h2>
+          <Eyebrow className="text-base/7 font-semibold text-cyan-500">COMPUTE</Eyebrow>
-          <p className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">The pulse of intelligence runs here.</p>
+          <H3 className="mt-2 text-gray-900">Deterministic Compute You Control</H3>
-          <p className="mt-6 text-base/7 text-gray-600">
+          <P className="mt-6  text-gray-600">
-            Mycelium Compute brings predictable, sovereign performance — free from lock-in, free from drift.
+            Run workloads on sovereign, self-verifying infrastructure.
-            Deploy any workload, anywhere, with cryptographic precision and zero compromise.
+            Mycelium Compute delivers predictable execution, zero drift, and automatic healing, whether you’re running containers, VMs, agents, or full Kubernetes clusters.
-            From micro-VMs to full clusters, every operation is deterministic, self-managing, and stateless by design.
+          </P>
-            Compute that verifies itself. Expands itself. Heals itself.
+          <div className="mt-12">
          </p>
          <div className="mt-8">
            <Button href="#" variant="solid" color="cyan">
-              Experience Deterministic Compute
+              How it works
            </Button>
            <Button href="#" variant="outline" color="cyan">Explore Docs</Button>
          </div>
        </div>
      </div>
--- a/src/pages/compute/ComputeOverview.tsx
+++ b/src/pages/compute/ComputeOverview.tsx
@@ -43,7 +43,7 @@ export function ComputeOverview() {
            precision, knowing the platform verifies, scales, and heals itself
            on your behalf.
          </P>
-          <P color="lightSecondary" className="mt-4 italic">
+          <P color="lightSecondary" className="mt-4">
            Deterministic. Self-managing. Stateless by design.
          </P>
        </div>
--- a/src/pages/compute/ComputePage.tsx
+++ b/src/pages/compute/ComputePage.tsx
@@ -8,6 +8,8 @@ import { ComputeDeveloperExperience } from './ComputeDeveloperExperience'
 import { ComputeUseCases } from './ComputeUseCases'
 import { ComputeDifferentiators } from './ComputeDifferentiators'
 import { CallToAction } from './CallToAction'
 import { ComputeCapabilities } from './ComputeCapabilities'
 import { ComputeDesign } from './ComputeDesign'
 export default function ComputePage() {
  return (
@@ -15,12 +17,24 @@ export default function ComputePage() {
      <AnimatedSection>
        <ComputeHero />
      </AnimatedSection>
      <AnimatedSection>
-        <ComputeOverview />
+        <ComputeCapabilities />
      </AnimatedSection>
      <AnimatedSection>
        <ComputeDesign />
      </AnimatedSection>
      <AnimatedSection>
        <ComputeFeatures />
      </AnimatedSection>
      <AnimatedSection>
        <ComputeOverview />
      </AnimatedSection>
      <AnimatedSection>
        <ComputeZeroImage />
      </AnimatedSection>
--- a/src/pages/compute/ComputeUseCases.tsx
+++ b/src/pages/compute/ComputeUseCases.tsx
@@ -1,72 +1,21 @@
 import { Container } from '../../components/Container'
 import { Eyebrow, SectionHeader, P } from '../../components/Texts'
-const primaryUseCases = [
+const useCases = [
  {
    title: 'AI / ML Training',
-    bullets: [
+    description:
-      'Deterministic training pipelines for reproducible experiments.',
+      'Reproducible pipelines, private model execution, scalable GPU orchestration.',
      'Cryptographically verified model artifacts end-to-end.',
      'Autonomous scaling for distributed training runs.',
      'Zero-drift environments that remain consistent over time.',
    ],
  },
  {
    title: 'Application Hosting',
-    bullets: [
+    description:
-      'Transparent deployments with verifiable execution.',
+      'Private, reliable, self-healing services – without cloud vendor lock-in.',
      'Auto-scaling that allocates resources on demand.',
      'Instant global distribution across the ThreeFold Grid.',
      'Cryptographically secured runtime environments.',
    ],
  },
  {
-    title: 'Data Processing',
+    title: 'Distributed & Edge Compute',
-    bullets: [
+    description:
-      'Deterministic pipelines that document every transformation.',
+      'Run workloads where data lives, in homes, offices, datacenters, or remote regions.',
      'Secure computation with cryptographic verification.',
      'Auto-scaling resources for fluctuating workloads.',
      'Global processing placement to minimize latency.',
    ],
  },
  {
    title: 'Scientific Computing',
    bullets: [
      'Reproducible research environments for shared experiments.',
      'Secure workloads with verifiable execution paths.',
      'Dynamic scaling for compute-intensive tasks.',
      'Global collaboration with sovereign resource control.',
    ],
  },
 ]
 const computeSpecific = [
  {
    title: 'Deterministic Training Environments',
    bullets: [
      'Reproducible ML experiments with identical conditions every run.',
      'Verifiable computational research for scientific collaboration.',
      'Auditable financial modelling workflows with traceable outputs.',
      'Consistent IoT edge processing with predictable performance.',
    ],
  },
  {
    title: 'Multi-Platform Application Hosting',
    bullets: [
      'Kubernetes orchestration with deterministic deployment pipelines.',
      'Virtual machines launched with hardware-attested secure boot.',
      'Native Linux workloads with cryptographic assurance.',
      'Hybrid topologies mixing containers, VMs, and bare metal.',
    ],
  },
  {
    title: 'Auto-Scaling Workloads',
    bullets: [
      'Demand-based scaling that reacts instantly to load.',
      'Global distribution across the ThreeFold Grid.',
      'Automated failover that restores services without intervention.',
      'Cost optimization through intelligent resource allocation.',
    ],
  },
 ]
@@ -87,47 +36,21 @@ export function ComputeUseCases() {
            self-orchestrating so teams can focus on building.
          </P>
        </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+
-          <div className="space-y-6">
+        <div className="mx-auto mt-16 max-w-4xl space-y-6">
-            {primaryUseCases.map((useCase) => (
+          {useCases.map((useCase) => (
-              <div
+            <div
-                key={useCase.title}
+              key={useCase.title}
-                className="rounded-3xl border border-white/10 bg-white/5 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:bg-white/10"
+              className="rounded-3xl border border-white/10 bg-white/5 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:bg-white/10"
-              >
+            >
-                <h3 className="text-xl font-semibold text-white">
+              <h3 className="text-xl font-semibold text-white">
-                  {useCase.title}
+                {useCase.title}
-                </h3>
+              </h3>
-                <ul className="mt-4 space-y-3 text-sm text-gray-200">
+              <p className="mt-3 text-sm leading-relaxed text-gray-200">
-                  {useCase.bullets.map((bullet) => (
+                {useCase.description}
-                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
+              </p>
-                      <span className="mt-1 inline-block size-2 rounded-full bg-cyan-400" />
+            </div>
-                      <span>{bullet}</span>
+          ))}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <div className="space-y-6">
            {computeSpecific.map((useCase) => (
              <div
                key={useCase.title}
                className="rounded-3xl border border-cyan-400/20 bg-gradient-to-br from-cyan-500/10 via-cyan-500/5 to-transparent p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:from-cyan-400/20 hover:via-cyan-400/10"
              >
                <h3 className="text-xl font-semibold text-white">
                  {useCase.title}
                </h3>
                <ul className="mt-4 space-y-3 text-sm text-cyan-100">
                  {useCase.bullets.map((bullet) => (
                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
                      <span className="mt-1 inline-block size-2 rounded-full bg-white/80" />
                      <span>{bullet}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
--- a/src/pages/compute/ComputeUseCasesArchived.tsx
+++ b/src/pages/compute/ComputeUseCasesArchived.tsx
@@ -0,0 +1,135 @@
 import { Container } from '../../components/Container'
 import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 const primaryUseCases = [
  {
    title: 'AI / ML Training',
    bullets: [
      'Deterministic training pipelines for reproducible experiments.',
      'Cryptographically verified model artifacts end-to-end.',
      'Autonomous scaling for distributed training runs.',
      'Zero-drift environments that remain consistent over time.',
    ],
  },
  {
    title: 'Application Hosting',
    bullets: [
      'Transparent deployments with verifiable execution.',
      'Auto-scaling that allocates resources on demand.',
      'Instant global distribution across the ThreeFold Grid.',
      'Cryptographically secured runtime environments.',
    ],
  },
  {
    title: 'Data Processing',
    bullets: [
      'Deterministic pipelines that document every transformation.',
      'Secure computation with cryptographic verification.',
      'Auto-scaling resources for fluctuating workloads.',
      'Global processing placement to minimize latency.',
    ],
  },
  {
    title: 'Scientific Computing',
    bullets: [
      'Reproducible research environments for shared experiments.',
      'Secure workloads with verifiable execution paths.',
      'Dynamic scaling for compute-intensive tasks.',
      'Global collaboration with sovereign resource control.',
    ],
  },
 ]
 const computeSpecific = [
  {
    title: 'Deterministic Training Environments',
    bullets: [
      'Reproducible ML experiments with identical conditions every run.',
      'Verifiable computational research for scientific collaboration.',
      'Auditable financial modelling workflows with traceable outputs.',
      'Consistent IoT edge processing with predictable performance.',
    ],
  },
  {
    title: 'Multi-Platform Application Hosting',
    bullets: [
      'Kubernetes orchestration with deterministic deployment pipelines.',
      'Virtual machines launched with hardware-attested secure boot.',
      'Native Linux workloads with cryptographic assurance.',
      'Hybrid topologies mixing containers, VMs, and bare metal.',
    ],
  },
  {
    title: 'Auto-Scaling Workloads',
    bullets: [
      'Demand-based scaling that reacts instantly to load.',
      'Global distribution across the ThreeFold Grid.',
      'Automated failover that restores services without intervention.',
      'Cost optimization through intelligent resource allocation.',
    ],
  },
 ]
 export function ComputeUseCases() {
  return (
    <section className="bg-gray-950 py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow color="accent" className="tracking-[0.32em] uppercase">
            Use Cases
          </Eyebrow>
          <SectionHeader as="h2" color="light" className="mt-6">
            Purpose-built for reproducibility, security, and scale.
          </SectionHeader>
          <P color="lightSecondary" className="mt-6">
            From sovereign AI training loops to globally distributed
            applications, Mycelium Compute keeps environments verifiable and
            self-orchestrating so teams can focus on building.
          </P>
        </div>
        <div className="mt-16 grid gap-8 lg:grid-cols-2">
          <div className="space-y-6">
            {primaryUseCases.map((useCase) => (
              <div
                key={useCase.title}
                className="rounded-3xl border border-white/10 bg-white/5 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:bg-white/10"
              >
                <h3 className="text-xl font-semibold text-white">
                  {useCase.title}
                </h3>
                <ul className="mt-4 space-y-3 text-sm text-gray-200">
                  {useCase.bullets.map((bullet) => (
                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
                      <span className="mt-1 inline-block size-2 rounded-full bg-cyan-400" />
                      <span>{bullet}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <div className="space-y-6">
            {computeSpecific.map((useCase) => (
              <div
                key={useCase.title}
                className="rounded-3xl border border-cyan-400/20 bg-gradient-to-br from-cyan-500/10 via-cyan-500/5 to-transparent p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:from-cyan-400/20 hover:via-cyan-400/10"
              >
                <h3 className="text-xl font-semibold text-white">
                  {useCase.title}
                </h3>
                <ul className="mt-4 space-y-3 text-sm text-cyan-100">
                  {useCase.bullets.map((bullet) => (
                    <li key={bullet} className="flex items-start gap-3 leading-relaxed">
                      <span className="mt-1 inline-block size-2 rounded-full bg-white/80" />
                      <span>{bullet}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  )
 }
--- a/src/pages/gpu/CallToAction.tsx
+++ b/src/pages/gpu/CallToAction.tsx
@@ -14,11 +14,12 @@ export function CallToAction() {
      <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">
-            Bring sovereign GPU acceleration to production.
+            Choose How You Want to Start
          </h2>
          <p className="mt-6 text-lg text-gray-300">
-            Work with the Mycelium team to deploy GPU workloads that remain
+            Use GPUs through Mycelium Cloud,
-            verifiable, performant, and cost-transparent from edge to core.
+or contribute GPU nodes to the mesh and run your own workloads.
          </p>
          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
            <Button
@@ -29,7 +30,7 @@ export function CallToAction() {
              target="_blank"
              rel="noreferrer"
            >
-              Talk to our team
+              Deploy GPU Workloads
            </Button>
            <Button
              to="#gpu-architecture"
@@ -37,7 +38,7 @@ export function CallToAction() {
              variant="outline"
              color="white"
            >
-              Review architecture
+              Host A GPU Node
            </Button>
          </div>
        </div>
--- a/src/pages/gpu/GpuArchitecture.tsx
+++ b/src/pages/gpu/GpuArchitecture.tsx
@@ -31,7 +31,7 @@ export function GpuArchitecture() {
    <section id="gpu-architecture" className="bg-white py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+          <Eyebrow>
            Technical Architecture
          </Eyebrow>
          <SectionHeader as="h2" className="mt-6 text-gray-900">
--- a/src/pages/gpu/GpuArchitectureArchive.tsx
+++ b/src/pages/gpu/GpuArchitectureArchive.tsx
@@ -0,0 +1,75 @@
 import { Container } from '../../components/Container'
 import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 const architectureSections = [
  {
    title: 'Distributed GPU Mesh',
    description:
      'A peer-to-peer fabric connects GPU nodes across the ThreeFold Grid, exposing them through the Mycelium network.',
    bullets: [
      'GPU nodes distributed globally for on-demand acceleration.',
      'Mycelium network provides encrypted peer-to-peer connectivity.',
      'Smart contract orchestration allocates and governs resources.',
      'Real-time monitoring tracks utilization and health.',
    ],
  },
  {
    title: 'Performance Characteristics',
    description:
      'Consistency and transparency are built into the fabric so workloads behave predictably anywhere on the planet.',
    bullets: [
      'Edge-to-core deployment flexibility for every workload profile.',
      'Adaptive intelligence optimizes allocation automatically.',
      'Deterministic performance guarantees availability when booked.',
      'Transparent cost tracking for every GPU cycle consumed.',
    ],
  },
 ]
 export function GpuArchitectureArchive() {
  return (
    <section id="gpu-architecture" className="bg-white py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow>
            Technical Architecture
          </Eyebrow>
          <SectionHeader as="h2" className="mt-6 text-gray-900">
            A peer-to-peer mesh purpose-built for acceleration.
          </SectionHeader>
          <P className="mt-6 text-gray-600">
            Mycelium GPU treats every node as part of a sovereign mesh. Encrypted
            networking, smart contract orchestration, and transparent monitoring
            ensure your workloads receive precisely the power they request.
          </P>
        </div>
        <div className="mt-16 grid gap-8 lg:grid-cols-2">
          {architectureSections.map((section) => (
            <div
              key={section.title}
              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
            >
              <h3 className="text-xl font-semibold text-gray-900">
                {section.title}
              </h3>
              <p className="mt-4 text-sm leading-relaxed text-gray-600">
                {section.description}
              </p>
              <ul className="mt-6 space-y-3 text-sm text-gray-600">
                {section.bullets.map((bullet) => (
                  <li
                    key={bullet}
                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
                  >
                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
                    <span>{bullet}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </Container>
    </section>
  )
 }
--- a/src/pages/gpu/GpuCapabilities.tsx
+++ b/src/pages/gpu/GpuCapabilities.tsx
@@ -0,0 +1,62 @@
 import {
  SparklesIcon,
  Cog6ToothIcon,
  CubeTransparentIcon,
  CpuChipIcon,
 } from '@heroicons/react/24/solid'
 import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
 import { Container } from '../../components/Container'
 const capabilities = [
  {
    name: 'AI / ML Inference & Training',
    description: 'LLMs, embeddings, transformers, fine-tuning',
    icon: SparklesIcon,
  },
  {
    name: 'Acceleration in Kubernetes Workloads',
    description: 'GPU-backed deployments on Mycelium Cloud',
    icon: Cog6ToothIcon,
  },
  {
    name: 'Rendering & Simulation',
    description: 'Scientific visualization, VFX, real-time 3D',
    icon: CubeTransparentIcon,
  },
  {
    name: 'Agent Compute & RAG Pipelines',
    description: 'Vector memory + model execution on sovereign hardware',
    icon: CpuChipIcon,
  },
 ]
 export function GpuCapabilities() {
  return (
    <section className="bg-white py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow>CAPABILITIES</Eyebrow>
          <H3 className="mt-4 text-gray-900">What You Can Run on Mycelium Cloud</H3>
          <P className="mt-6 text-gray-600">
            GPU workloads can run anywhere on the mesh — on cloud capacity, your own machines,
            or edge nodes — with full sovereignty.
          </P>
        </div>
        <div className="mx-auto mt-16 max-w-5xl">
          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4">
            {capabilities.map((feature) => (
              <div key={feature.name} className="flex flex-col text-center">
                <div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
                  <feature.icon className="size-6 text-cyan-600" aria-hidden="true" />
                </div>
                <CT className="mt-6 text-gray-900">{feature.name}</CT>
                <CP className="mt-2 text-gray-600">{feature.description}</CP>
              </div>
            ))}
          </dl>
        </div>
      </Container>
    </section>
  )
 }
--- a/src/pages/gpu/GpuDesign.tsx
+++ b/src/pages/gpu/GpuDesign.tsx
@@ -0,0 +1,62 @@
 import { Container } from '../../components/Container'
 import { Eyebrow, H3, P, CT } from '../../components/Texts'
 import {
  BoltIcon,
  BanknotesIcon,
  GlobeAltIcon,
  ShieldCheckIcon,
 } from '@heroicons/react/24/solid'
 const benefits = [
  {
    name: 'Consistent, reserved GPU performance (no noisy neighbor effects)',
    icon: BoltIcon,
  },
  {
    name: 'Transparent cost (no markup, no surprise billing)',
    icon: BanknotesIcon,
  },
  {
    name: 'Run anywhere – cloud, on-prem, edge, home lab',
    icon: GlobeAltIcon,
  },
  {
    name: 'Your data never leaves your control',
    icon: ShieldCheckIcon,
  },
 ]
 export function GpuDesign() {
  return (
    <section className="bg-white py-24 sm:py-32">
      <Container>
        {/* Header */}
        <div className="mx-auto max-w-3xl sm:text-center">
          <Eyebrow>CORE VALUE</Eyebrow>
          <H3 className="mt-4 text-gray-900">GPU Power You Actually Control</H3>
          <P className="mt-6 text-gray-600">
            Mycelium GPU gives you access to real hardware, not gated queues or
            proprietary runtimes.
          </P>
        </div>
        {/* Key Benefits */}
        <div className="mx-auto mt-16 max-w-5xl">
          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-2">
            {benefits.map((benefit) => (
              <div key={benefit.name} className="relative pl-12">
                <benefit.icon
                  className="absolute left-0 top-1 size-6 text-cyan-600"
                  aria-hidden="true"
                />
                <CT className="font-semibold text-gray-900">
                  {benefit.name}
                </CT>
              </div>
            ))}
          </dl>
        </div>
      </Container>
    </section>
  )
 }
--- a/src/pages/gpu/GpuHero.tsx
+++ b/src/pages/gpu/GpuHero.tsx
@@ -9,34 +9,30 @@ export function GpuHero() {
      <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
        <img
          alt="Mycelium GPU nebula illustration"
-          src="/images/gpuhero.png"
+          src="/images/gpuhero2.png"
-          className="size-full object-cover"
+          className="size-full object-contain"
        />
      </div>
-      <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">
+      <div className="relative mx-auto max-w-7xl py-24 lg:py-32 lg:px-8">
-        <div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 xl:pr-32">
+        <div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 ">
          <Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
            Mycelium GPU
          </Eyebrow>
          <SectionHeader as="h1" className="mt-4 text-gray-900">
-            Unify distributed GPU power into a sovereign acceleration fabric.
+            Sovereign GPU Acceleration for AI and High-Performance Compute
          </SectionHeader>
          <P className="mt-6 text-gray-600">
-            Mycelium GPU transforms fragmented hardware across the ThreeFold
+            Access GPUs across the Mycelium mesh without waitlists, 
-            Grid into one adaptive intelligence layer. Run AI, ML, rendering,
+inflated pricing, or centralized control.
-            and high-performance workloads anywhere—from edge devices to
+Run inference, training, and compute workloads where they make sense: 
-            planetary clusters—with deterministic performance and transparent
+cloud, edge, or on your own hardware. 
            cost.
          </P>
          <P className="mt-4 italic text-gray-500">
            The energy behind intelligence, orchestrated entirely through code.
          </P>
          <div className="mt-10 flex flex-wrap gap-4">
            <Button to="#gpu-getting-started" as="a" variant="solid" color="cyan">
-              Start with GPU Access
+              How it works
            </Button>
            <Button to="#gpu-architecture" as="a" variant="outline" color="cyan">
-              Explore the Mesh
+              Explore Docs
            </Button>
          </div>
        </div>
--- a/src/pages/gpu/GpuOverview.tsx
+++ b/src/pages/gpu/GpuOverview.tsx
@@ -1,48 +1,30 @@
 import {
-  CodeBracketSquareIcon,
+  AdjustmentsHorizontalIcon,
-  CubeTransparentIcon,
+  GlobeAltIcon,
-  LockClosedIcon,
+  BanknotesIcon,
  Squares2X2Icon,
 } from '@heroicons/react/24/outline'
 import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
-const overviewCards = [
+const coreFeatures = [
  {
-    label: 'Overview',
+    name: 'Deterministic GPU Allocation',
    title: 'Unified GPU acceleration across the ThreeFold Grid',
    description:
-      'Mycelium GPU aggregates distributed hardware into a single fabric, delivering sovereign acceleration for AI, ML, and rendering workloads.',
+      'Reserve the GPU type you need and get exactly that, every time.',
    icon: AdjustmentsHorizontalIcon,
  },
  {
-    label: 'Core Concept',
+    name: 'Multi-Topology Deployment',
    title: 'Sovereign intelligence layer',
    description:
-      'No silos, no intermediaries—just raw, verifiable GPU power orchestrated through smart contracts and APIs you control.',
+      'Run workloads in data centers, at the edge, or on self-hosted nodes.',
-  },
+    icon: GlobeAltIcon,
 ]
 const principles = [
  {
    name: 'No Silos',
    description: 'Every GPU resource is accessible through a single interface.',
    icon: Squares2X2Icon,
  },
  {
-    name: 'No Intermediaries',
+    name: 'Transparent Cost Structure',
-    description: 'Direct access to hardware without centralized brokers.',
+    description:
-    icon: CubeTransparentIcon,
+      'No inflated pricing, no hidden fees, no marketplace brokerage.',
-  },
+    icon: BanknotesIcon,
  {
    name: 'Verifiable Power',
    description: 'Every GPU cycle is attested and cryptographically verified.',
    icon: LockClosedIcon,
  },
  {
    name: 'Code-Orchestrated',
    description: 'Smart contracts and APIs automate allocation and policy.',
    icon: CodeBracketSquareIcon,
  },
 ]
@@ -52,52 +34,31 @@ export function GpuOverview() {
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
-            Platform Overview
+            PLATFORM OVERVIEW
          </Eyebrow>
          <SectionHeader as="h2" color="light" className="mt-6 font-medium">
-            The sovereign acceleration layer for intelligent workloads.
+            Core Features
          </SectionHeader>
          <P color="lightSecondary" className="mt-6">
-            Mycelium GPU makes distributed acceleration feel like one machine.
+            The Mycelium GPU layer provides predictable, sovereign acceleration
-            Harness global GPUs with deterministic performance, transparent
+            — without arbitrary limits or hidden economics.
            costs, and end-to-end verification.
          </P>
        </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+
-          {overviewCards.map((card) => (
+        <div className="mx-auto mt-16 max-w-5xl grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {coreFeatures.map((feature) => (
            <div
-              key={card.title}
+              key={feature.name}
-              className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+              className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
            >
              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.05] to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
              <div className="relative">
                <Small className="text-xs uppercase tracking-[0.35em] text-cyan-200">
                  {card.label}
                </Small>
                <h3 className="mt-4 text-lg font-semibold text-white">
                  {card.title}
                </h3>
                <p className="mt-4 text-sm leading-relaxed text-gray-300">
                  {card.description}
                </p>
              </div>
            </div>
          ))}
        </div>
        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {principles.map((principle) => (
            <div
              key={principle.name}
              className="rounded-3xl border border-white/10 bg-white/[0.04] p-6 text-left transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
            >
              <div className="mb-6 flex size-12 items-center justify-center rounded-full bg-cyan-500/15">
-                <principle.icon aria-hidden="true" className="size-6 text-cyan-300" />
+                <feature.icon className="size-6 text-cyan-300" aria-hidden="true" />
              </div>
-              <h3 className="text-base font-semibold text-white">
+              <h3 className="text-lg font-semibold text-white">
-                {principle.name}
+                {feature.name}
              </h3>
              <p className="mt-3 text-sm leading-relaxed text-gray-300">
-                {principle.description}
+                {feature.description}
              </p>
            </div>
          ))}
--- a/src/pages/gpu/GpuPage.tsx
+++ b/src/pages/gpu/GpuPage.tsx
@@ -2,11 +2,10 @@ import { AnimatedSection } from '../../components/AnimatedSection'
 import { GpuHero } from './GpuHero'
 import { GpuOverview } from './GpuOverview'
 import { GpuArchitecture } from './GpuArchitecture'
 import { GpuIntegration } from './GpuIntegration'
 import { GpuUseCases } from './GpuUseCases'
 import { GpuGettingStarted } from './GpuGettingStarted'
 import { GpuDifferentiators } from './GpuDifferentiators'
 import { CallToAction } from './CallToAction'
 import { GpuCapabilities } from './GpuCapabilities'
 import { GpuDesign } from './GpuDesign'
 export default function GpuPage() {
  return (
@@ -14,24 +13,27 @@ export default function GpuPage() {
      <AnimatedSection>
        <GpuHero />
      </AnimatedSection>
      <AnimatedSection>
-        <GpuOverview />
+        <GpuCapabilities />
      </AnimatedSection>
      <AnimatedSection>
        <GpuDesign />
      </AnimatedSection>
      <AnimatedSection>
        <GpuArchitecture />
      </AnimatedSection>
      <AnimatedSection>
-        <GpuIntegration />
+        <GpuOverview />
      </AnimatedSection>
-      <AnimatedSection>
+
       <AnimatedSection>
        <GpuUseCases />
      </AnimatedSection>
-      <AnimatedSection>
+
        <GpuGettingStarted />
      </AnimatedSection>
      <AnimatedSection>
        <GpuDifferentiators />
      </AnimatedSection>
      <AnimatedSection>
        <CallToAction />
      </AnimatedSection>
--- a/src/pages/gpu/GpuUseCases.tsx
+++ b/src/pages/gpu/GpuUseCases.tsx
@@ -1,34 +1,18 @@
 import { Container } from '../../components/Container'
 import { Eyebrow, SectionHeader, P } from '../../components/Texts'
-const useCases = [
+const gpuUseCases = [
  {
-    title: 'AI / ML Training',
+    title: 'AI / ML Training & Inference',
-    description:
+    description: 'Scale model execution across sovereign GPU nodes.',
      'Scale training, fine-tuning, and inference workloads anywhere on the grid.',
    bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
  },
  {
    title: 'Rendering & Visualization',
-    description:
+    description: 'Run 3D, scientific, simulation, or generative rendering pipelines.',
      'Drive high-performance graphics pipelines for media, science, and immersive experiences.',
    bullets: [
      'Distributed 3D rendering',
      'Scientific visualization',
      'Real-time VR / AR processing',
      'Digital twin simulations',
    ],
  },
  {
-    title: 'General GPU Computing',
+    title: 'Distributed & Edge Compute',
-    description:
+    description: 'Place GPU power close to where data is generated.',
      'Harness sovereign acceleration for simulations, finance, blockchain, and research.',
    bullets: [
      'Scientific simulations',
      'Financial modeling',
      'Blockchain processing',
      'Protein folding and discovery',
    ],
  },
 ]
@@ -37,41 +21,28 @@ export function GpuUseCases() {
    <section className="bg-white py-24 sm:py-32">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+          <Eyebrow>USE CASES</Eyebrow>
            Use Cases
          </Eyebrow>
          <SectionHeader as="h2" className="mt-6 text-gray-900">
-            Acceleration for every intelligent workload.
+            Built for Intelligent Workloads
          </SectionHeader>
          <P className="mt-6 text-gray-600">
-            From deep learning to immersive visualization, Mycelium GPU delivers
+            From sovereign AI execution to real-time rendering and edge inference,
-            deterministic access to the power you need without the waitlists or
+            Mycelium GPU ensures predictable acceleration with full ownership and no centralized control.
            markups of centralized clouds.
          </P>
        </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+
-          {useCases.map((useCase) => (
+        <div className="mx-auto mt-16 max-w-4xl space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">
          {gpuUseCases.map((useCase) => (
            <div
              key={useCase.title}
-              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+              className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
            >
              <h3 className="text-xl font-semibold text-gray-900">
                {useCase.title}
              </h3>
-              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+              <p className="mt-3 text-sm leading-relaxed text-gray-600">
                {useCase.description}
              </p>
              <ul className="mt-6 space-y-3 text-sm text-gray-600">
                {useCase.bullets.map((bullet) => (
                  <li
                    key={bullet}
                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
                  >
                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
                    <span>{bullet}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
--- a/src/pages/home/CallToAction.tsx
+++ b/src/pages/home/CallToAction.tsx
@@ -6,25 +6,25 @@ export function CallToAction() {
  return (
    <section
      id="get-started"
-      className="relative overflow-hidden bg-gray-900 py-32"
+      className="relative overflow-hidden bg-gray-900 lg:py-32 py-24"
    >
      <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">
+        <div className="mx-auto max-w-xl text-center">
          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
-            Activate Your Sovereign <br />Mycelium Stack
+            Use the Mycelium Stack Your Way
          </h2>
          <p className="mt-6 text-lg text-gray-300">
-            Provision cloud workloads, mesh them through the encrypted Mycelium Network, and unlock AI experiences without surrendering control of your infrastructure or your data.
+            Run workloads, connect environments, host nodes, and build agentic systems, all on one sovereign, self-healing network. 
          </p>
          <p className="mt-4 text-lg text-gray-300">
            Start wherever you are. Scale however you choose.
          </p>
          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
-            <Button to="/cloud" variant="solid" color="white">
+            <Button to="/cloud" variant="solid" color="cyan">
-              Start Deployment
+              Get Started
            </Button>
            <Button to="/download" variant="solid" color="cyan">
              Get Mycelium Connector
            </Button>
            <Button
              to="https://threefold.info/mycelium_network/docs/"
@@ -33,7 +33,7 @@ export function CallToAction() {
              variant="outline"
              color="white"
            >
-              Read Docs
+              Explore Docs
            </Button>
          </div>
        </div>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
sasha-astiadi	8d9f02a846	refactor: clean up unused imports and component exports - Removed unused component imports across multiple pages (AgentHeroAlt, ComputeHero, CloudPage, GpuPage, StoragePage) - Changed ComputeDesign export from default to named export for consistency - Removed CloudDesign section from CloudPage layout	2025-11-04 17:15:07 +01:00
sasha-astiadi	e16456bb94	feat: update GPU CTA section copy and button labels - Changed heading from "Bring sovereign GPU acceleration to production" to "Choose How You Want to Start" - Updated description to emphasize dual options: using Mycelium Cloud or contributing GPU nodes - Renamed buttons to "Deploy GPU Workloads" and "Host A GPU Node" for clearer action paths	2025-11-04 17:03:50 +01:00
sasha-astiadi	388654fcbd	refactor: remove unused GPU page sections	2025-11-04 16:50:20 +01:00
sasha-astiadi	865252274c	feat: restructure GPU page layout and simplify content presentation - Reordered sections to improve information flow (Capabilities → Design → Architecture → Overview) - Simplified use cases and overview sections by removing redundant bullet points - Added new GpuCapabilities and GpuDesign components with cleaner, more focused messaging	2025-11-04 16:50:15 +01:00
sasha-astiadi	8b892c9432	feat: simplify GPU hero section messaging - Replaced technical jargon with clearer value proposition focused on accessibility and control - Streamlined copy to emphasize practical benefits (no waitlists, transparent pricing, flexible deployment) - Updated CTA button labels for better clarity ("How it works" and "Explore Docs")	2025-11-04 16:43:37 +01:00
sasha-astiadi	7f9023c631	feat: simplify storage page messaging and structure - Streamlined call-to-action to focus on cloud vs. self-hosted options - Condensed architecture and use cases sections to remove excessive detail - Reorganized page component order and added new capability/design sections	2025-11-04 16:23:57 +01:00
sasha-astiadi	f3456eb470	feat: update storage hero section messaging and CTAs - Simplified headline to emphasize sovereignty, self-healing, and multi-protocol access - Streamlined description to focus on core value proposition of encrypted, quantum-safe storage - Updated button labels for clearer user navigation (Features → How It Works, Developer Flow → Explore Docs)	2025-11-04 16:12:07 +01:00
sasha-astiadi	46272e939d	feat: simplify compute and cloud page content - Streamlined ComputeFeatures and ComputeUseCases to focus on high-level benefits rather than detailed bullet points - Updated ComputeHero messaging to emphasize deterministic control and self-verification - Revised CallToAction to clarify deployment vs hosting options - Added CloudDesign and ComputeCapabilities/ComputeDesign sections to page layouts	2025-11-04 16:06:13 +01:00
sasha-astiadi	0daabe56f5	feat: replace SecurityPillars with CloudBluePrint component and reorder sections - Removed CloudGettingStarted section from the page - Replaced SecurityPillars with new CloudBluePrint component - Adjusted section ordering to improve page flow	2025-11-04 15:16:50 +01:00
sasha-astiadi	85afc05c35	feat: update cloud use cases with enterprise and edge focus - Reframed use cases to emphasize sovereignty, workload ownership, and distributed deployment - Replaced AI/ML training and DigitalMe Blueprint sections with enterprise Kubernetes and AI/agent workloads - Updated descriptions and feature bullets to highlight compliance, mesh networking, and autonomous capabilities	2025-11-04 15:16:43 +01:00
sasha-astiadi	866e1df042	feat: add Cloud Blueprint landing section with logo showcase	2025-11-04 15:16:32 +01:00
sasha-astiadi	28ea2ab49d	feat: clarify cloud infrastructure independence in features section	2025-11-04 14:06:29 +01:00
sasha-astiadi	1f11ca5319	feat: update cloud hosting capabilities section with audience-focused messaging - Reorganized features to target specific user personas (DevOps, Security, Data, AI/ML teams) - Updated feature descriptions to emphasize technical benefits and security posture - Changed section eyebrow from "DEPLOY" to "CAPABILITIES" for clearer positioning	2025-11-04 14:05:27 +01:00
sasha-astiadi	3e99e85e48	feat: enhance CloudHero messaging and formatting - Added tagline "Works Alone. Works Together." with explanation of Mycelium Cloud's flexibility - Simplified "Explore Docs" button text to "Documentation" - Fixed indentation for improved code readability	2025-11-04 14:01:17 +01:00
sasha-astiadi	b39694ea24	feat: update CTA button text from "Start Deployment" to "Get Started"	2025-11-04 13:35:53 +01:00
sasha-astiadi	363b822d8b	feat: refine benefits section messaging and ordering - Reordered features to lead with "Unbreakable by Design" for stronger impact - Simplified benefit descriptions for clarity and conciseness - Updated section heading from "Why It Changes Everything" to "Why It Matters"	2025-11-04 13:35:22 +01:00
sasha-astiadi	00802c7064	feat: reorder slider items and update ecosystem messaging - Moved Compute/Storage/GPU to first position in slider - Updated heading from "Mycelium Products" to "Mycelium Components" - Changed description to emphasize Agents instead of "intelligent automation"	2025-11-04 13:33:53 +01:00
sasha-astiadi	e45ca7c86f	feat: reorder HomeSlider section before HomeBenefits	2025-11-04 13:33:47 +01:00
sasha-astiadi	664897ee19	refactor: simplify StackSection description text	2025-11-04 13:31:29 +01:00
sasha-astiadi	91d249f097	feat: update homepage content and section ordering - Revised hosting section description to emphasize decentralized grid and user control - Swapped order of StackSectionLight and HomeHostingDark sections - Enhanced Kubernetes feature description with additional context	2025-11-04 13:29:37 +01:00
sasha-astiadi	4ba88257eb	feat: update hero section copy and CTAs - Changed announcement banner to focus on enterprise scaling with "Book a call" CTA - Simplified tagline to emphasize infrastructure ownership - Updated primary CTA from "Get started" to "Start Hosting" and secondary to "Deploy in Cloud"	2025-11-04 13:26:26 +01:00
sasha-astiadi	4c4a0c5dd1	feat: add hero video to public assets - Added mhero.mp4 video file to public/videos directory for hero section display - Video will be used as background media content in the landing page hero area	2025-11-04 12:54:59 +01:00
sasha-astiadi	8817272932	refactor: improve hero components and naming consistency - Renamed AgentsHeroAlt component to AgentHeroAlt for consistent singular naming - Updated hero section padding and spacing for consistent layout across GPU and Storage pages - Changed Storage hero image object-fit from cover to contain to match GPU hero styling - Removed redundant padding classes (sm:py-32, xl:pr-32) from hero components - Fixed indentation in AgentsPage component	2025-11-02 01:03:52 +01:00
sasha-astiadi	6a882371f0	feat: update cloud and product page content and visuals - Simplified cloud messaging to focus on sovereignty and self-healing capabilities - Updated hero section copy across Cloud, Compute, GPU and Storage pages for clearer value proposition - Added new CloudHosting component to Cloud page layout - Changed hero images for GPU and Storage pages to improve visual consistency - Adjusted layout spacing and typography in Compute hero section - Streamlined cloud features description to be more concise an	2025-11-02 00:45:24 +01:00
sasha-astiadi	4e8e714f37	feat: update homepage benefits messaging and value props - Revised benefit titles and descriptions to better communicate core product values - Changed "Sovereign" to "Sovereign by Default" to emphasize out-of-the-box functionality - Replaced "Autonomous" with "Hackable & Open" to highlight developer-friendly nature - Updated "Energy Efficient" to "Unbreakable by Design" focusing on resilience - Combined cost and energy benefits into single value proposition for clearer messaging	2025-11-01 22:32:06 +01:00
sasha-astiadi	01c3c226a9	feat: update product descriptions and streamline component list - Updated main heading from "Components" to "Products" to better reflect offering - Rewrote hero description to emphasize standalone and integrated usage of products - Consolidated Compute, Storage, and GPU into a single "Resources" category - Updated Network description to focus on mesh networking capabilities - Modified Agents description to emphasize privacy and hardware ownership - Removed individual entries for GPU, Compute, and Storage components	2025-11-01 22:26:26 +01:00
sasha-astiadi	c7371ec21b	feat: update homepage layout and visual styling - Reorganized homepage sections by adding HomeHostingDark and HomeComparisonTable components - Changed background color of slider section from #0b0b0b to #111111 for better contrast - Updated card styling in CloudArchitecture to use semi-transparent gray background (bg-gray-50/25) - Modified paragraph text styling to use leading-tight instead of leading-relaxed for better readability - Reordered HomeBenefits section placement in the page flow	2025-11-01 22:19:07 +01:00
sasha-astiadi	c15b110afe	feat: adjust hero section width on homepage - Reduced max-width of hero content container from max-w-3xl to max-w-2xl for better content alignment and readability - Content width now matches design specifications for desktop breakpoints	2025-11-01 21:08:51 +01:00
sasha-astiadi	3564b5cb0f	feat: enhance homepage with smooth scroll navigation - Added scroll-to-slider functionality when clicking "Get Started" button - Modified AnimatedSection to support ref forwarding for scroll targeting - Updated HomeAurora component to accept click handler prop - Refined homepage hero text and description for clearer value proposition - Changed button from link to click handler for better user interaction	2025-11-01 21:08:42 +01:00
sasha-astiadi	51ef8dffb5	feat: enhance UI components and layout styling - Updated FeatureDescription text size to be larger on desktop (lg:text-base) - Added rounded corners (rounded-3xl) to DarkCard component - Modified CloudArchitecture section with wider container (max-w-5xl) and updated heading styles - Adjusted mobile feature navigation indicators with darker colors (bg-gray-600/700) - Improved hero section typography using H2 and H5 components for better hierarchy - Refined padding and background styling in CloudFeatures mobile	2025-11-01 21:02:35 +01:00
sasha-astiadi	9d8f1a6919	refactor: replace MagicCard with DarkCard component - Replaced MagicCard with new DarkCard component across apple-cards-carousel and HomeGlobe - Updated card styling and layout in apple-cards-carousel to work with DarkCard - Removed gradient and border styling from globe stats cards - Adjusted padding and margin values to maintain consistent appearance - Fixed spacing and alignment of chevron icon in cards	2025-10-31 15:35:45 +01:00
sasha-astiadi	0f93199aa4	feat: redesign card carousel with modern layout and improved visuals - Updated card component design from image background to structured layout with separate content and image sections - Added dedicated image container with proper scaling and positioning for product images - Refined typography with new styling for category, title and description text - Increased gap between carousel cards from 4 to 6 units for better spacing - Adjusted card dimensions and padding for better responsive behavior - Update	2025-10-31 14:35:45 +01:00
sasha-astiadi	57fa97cc70	feat: update home slider images to PNG format - Added new PNG format images for network, agent, cloud, GPU, compute and storage sections - Updated image source paths in HomeSlider component to reference new PNG files - Replaced legacy .webp gallery images with dedicated page-specific images for better quality and consistency	2025-10-31 14:11:52 +01:00
sasha-astiadi	fa7c524b18	feat: remove cloud overview section from landing page - Removed CloudOverview component from CloudPage to streamline the user experience - Simplified page layout to focus on hero section and features content - Maintained AnimatedSection wrapper structure for remaining components	2025-10-31 05:02:26 +01:00
sasha-astiadi	f1c388cbab	refactor: reorganize cloud page component structure - Moved CloudOverview component into its own AnimatedSection for consistent layout - Reordered imports to match component rendering sequence - Fixed spacing and removed empty line in component structure	2025-10-31 05:02:02 +01:00
sasha-astiadi	ea3ee4d455	feat: add dynamic header navigation with current page tracking - Added useLocation hook to detect and display current page in header dropdown - Extracted cloud navigation items into separate constant for reusability - Implemented getCurrentPageName function to determine active page based on URL path - Updated dropdown button to dynamically show current section instead of static "Cloud" text	2025-10-31 04:58:58 +01:00
sasha-astiadi	24f6da37ed	feat: enhance cloud features UI with improved image styling - Removed CircleBackground component and its instances from desktop and mobile views for cleaner design - Updated image shadows from shadow-xl to shadow-2xl for stronger depth effect - Modified image positioning with -ml-32 margin for better layout alignment in tablet and desktop views - Removed unnecessary background animations to improve visual focus on feature screenshots	2025-10-31 04:55:30 +01:00
sasha-astiadi	c861f15492	feat: update hero images and adjust cloud features layout - Changed cloud hero background image from cloudhero3.webp to cloudhero4.webp for improved visual appeal - Updated compute hero image path from hero.webp to cloudhero.webp for consistency - Increased max width of cloud features container from max-w-none to max-w-3xl on large screens for better content readability	2025-10-31 04:50:11 +01:00
sasha-astiadi	bfe3c1e4bd	feat: redesign cloud features section with new UI and content - Replaced mobile phone mockups with full-width desktop screenshots for cloud platform features - Updated feature descriptions to focus on cloud/Kubernetes capabilities instead of network features - Changed section layout to improve desktop view with left-aligned feature tabs - Removed unused phone frame component and related mobile UI elements - Updated image assets from jpg to png format and reorganized image paths - Reordered page	2025-10-31 04:40:14 +01:00
sasha-astiadi	26ae2f156a	feat: add mobile app UI screenshots and enhance text components - Added new app UI screenshots for cloud features (connector, billing, kubeconfig, reserve) - Added new hero image (cloudhero3.webp) for cloud section - Enhanced Texts component with new cyan color variant and default props support - Updated Eyebrow component to use consistent styling with accent color and tracking - Simplified CloudArchitecture component by removing redundant style props - Completely rebuilt CloudFeatures component with	2025-10-31 04:04:44 +01:00
sasha-astiadi	33c940c604	feat: update cloud page hero and home slider components - Replaced CloudHero with new CloudHeroNew component on cloud page - Added new cloud-related images (cloudhero.webp, cloudhero2.webp, k82.png) to public assets - Enhanced HomeSlider section with Eyebrow component for "Ecosystem" label - Updated HomeSlider heading text from "Discover the Mycelium Ecosystem" to "Discover the Mycelium Components"	2025-10-31 03:36:19 +01:00
sasha-astiadi	0837a8313c	refactor: remove unused text component imports - Removed unused H2 import from HomeAurora.tsx - Removed unused SectionHeader import from StackSection.tsx - Cleaned up import statements to only include components being used	2025-10-31 03:10:39 +01:00
sasha-astiadi	b311cb22a4	feat: improve text styling and layout in home sections - Replaced custom paragraph tags with CP component for consistent text styling - Updated leading value from [1.525] to relaxed for better readability - Simplified feature descriptions while maintaining key messaging - Streamlined header styling in Stack section and removed redundant text classes - Standardized text color and spacing across sections for visual consistency	2025-10-31 03:09:47 +01:00
sasha-astiadi	b987f1a072	feat: enhance card component styling and responsiveness - Added subtle border to cards with 30% opacity gray color for improved visual definition - Increased description text size from sm to base on mobile and lg on desktop for better readability - Maintained hover and transition effects while improving visual hierarchy - Ensured consistent spacing and alignment across card elements	2025-10-31 03:09:07 +01:00
sasha-astiadi	dd4eba2215	feat: update UI styling and add new page images - Added new WebP images for different pages (agent, cloud, compute, gpu, network, storage) - Updated benefits section images with optimized WebP versions - Enhanced text styling: - Increased paragraph font size to text-xl on large screens - Adjusted H5 line height for better readability - Updated card paragraph text size to text-base - Refined visual design elements: - Changed cube stroke color to gray-600 for subtler appearance - Adjusted glow effects and gradients to	2025-10-31 03:01:17 +01:00
sasha-astiadi	ea1ef853f1	feat: add hero image for landing page - Added hero11.webp image file to public/images directory for use in website landing page	2025-10-31 01:38:26 +01:00
sasha-astiadi	5b05dababb	style: adjust eyebrow text tracking for better readability - Changed tracking property from 'tracking-wide' to 'tracking-wider' to increase letter spacing in eyebrow text component - Improves visual hierarchy and text legibility for uppercase headings	2025-10-31 01:36:16 +01:00
sasha-astiadi	ab5ac43793	feat: update website design and assets - Replaced multiple hero and background images with new optimized versions - Removed unused image assets from public/images directory - Updated typography styles: - Removed italic styling from various text components - Made eyebrow text uppercase - Adjusted H1 font size from 6xl to 5xl on mobile - Redesigned HomeAurora component with new layout and background - Added Mulish as primary font family in Tailwind config - Updated text formatting and spacing	2025-10-31 01:36:08 +01:00
sasha-astiadi	fb9250c365	feat: add Mulish font family to website - Added Google Fonts stylesheet link to load Mulish font with weights 400, 500, and 700 - Included preconnect links for optimal font loading performance	2025-10-31 01:35:03 +01:00
sasha-astiadi	04d08a4265	feat: update docs button text for improved UI clarity - Shortened "Read Docs" button text to "Docs" for cleaner, more concise presentation in the CallToAction component - Maintains same button styling and positioning while reducing visual clutter	2025-10-30 14:34:34 +01:00
sasha-astiadi	07f76639d2	docs: update repository URL in README - Fixed repository URL by removing underscore between "project" and "mycelium" - Ensures correct link for accessing project repository	2025-10-30 13:06:25 +01:00