improvements

2025-10-24 02:17:33 +03:00
parent 644bb34419
commit 3a7aa82ff7
34 changed files with 740 additions and 442 deletions
--- a/src/pages/agents/AgentsHero.tsx
+++ b/src/pages/agents/AgentsHero.tsx
@@ -0,0 +1,125 @@
+'use client'
+
+import { useId, useState } from 'react'
+
+import { Button } from '../../components/Button'
+import { Container } from '../../components/Container'
+import ContactForm from '../../components/ContactForm'
+
+function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
+  const id = useId()
+
+  return (
+    <div {...props}>
+      <svg
+        viewBox="0 0 1026 1026"
+        fill="none"
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full animate-spin-slow"
+      >
+        <path
+          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
+          stroke="#D4D4D4"
+          strokeOpacity="0.7"
+        />
+        <path
+          d="M513 1025C230.23 1025 1 795.77 1 513"
+          stroke={`url(#${id}-gradient-1)`}
+          strokeLinecap="round"
+        />
+        <defs>
+          <linearGradient
+            id={`${id}-gradient-1`}
+            x1="1"
+            y1="513"
+            x2="1"
+            y2="1025"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#06b6d4" />
+            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <svg
+        viewBox="0 0 1026 1026"
+        fill="none"
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
+      >
+        <path
+          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
+          stroke="#D4D4D4"
+          strokeOpacity="0.7"
+        />
+        <path
+          d="M913 513c0 220.914-179.086 400-400 400"
+          stroke={`url(#${id}-gradient-2)`}
+          strokeLinecap="round"
+        />
+        <defs>
+          <linearGradient
+            id={`${id}-gradient-2`}
+            x1="913"
+            y1="513"
+            x2="913"
+            y2="913"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#06b6d4" />
+            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+  )
+}
+
+export function AgentsHero() {
+  const [isContactOpen, setIsContactOpen] = useState(false)
+
+  return (
+    <>
+      <div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
+        <Container>
+          <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
+            <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
+              <h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
+                Mycelium Agents
+              </h1>
+              <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
+                Sovereign AI agents, coming soon.
+              </h2>
+              <p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
+                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 flex flex-wrap gap-x-6 gap-y-4">
+                <Button variant="solid" color="cyan" onClick={() => setIsContactOpen(true)}>
+                  Join the Waitlist
+                </Button>
+              </div>
+            </div>
+            <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
+              <BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
+              <div className="mx-auto h-[420px] max-w-[640px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-36">
+                <img
+                  src="/images/agent_icon.png"
+                  alt="Preview of Hero sovereign agent orchestration"
+                  className="mx-auto w-full max-w-[520px]"
+                  width={1024}
+                  height={1024}
+                />
+              </div>
+            </div>
+          </div>
+        </Container>
+      </div>
+      <ContactForm
+        isOpen={isContactOpen}
+        onClose={() => setIsContactOpen(false)}
+        title="Join the Waitlist"
+        formType="agent_waitlist"
+      />
+    </>
+  )
+}
--- a/src/pages/agents/AgentsPage.tsx
+++ b/src/pages/agents/AgentsPage.tsx
@@ -1,4 +1,5 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
+import { AgentsHero } from './AgentsHero'
 import { DeploySection } from './DeploySection'
 import { GallerySection } from './GallerySection'
 import { Companies } from './Companies'
@@ -7,6 +8,18 @@ import { BentoSection } from './BentoSection'
 export default function AgentsPage() {
  return (
    <div>
+      <AnimatedSection>
+        <AgentsHero />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <BentoSection />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <GallerySection />
+      </AnimatedSection>
+
      <AnimatedSection>
        <DeploySection />
      </AnimatedSection>
@@ -14,15 +27,6 @@ export default function AgentsPage() {
      <AnimatedSection>
        <Companies />
      </AnimatedSection>
-
-      
-      <AnimatedSection>
-        <GallerySection />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <BentoSection />
-      </AnimatedSection>
    </div>
  )
 }
--- a/src/pages/agents/BentoSection.tsx
+++ b/src/pages/agents/BentoSection.tsx
@@ -48,16 +48,16 @@ export function BentoSection() {
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.8 }}
-          className="mx-auto max-w-3xl text-center mb-16"
+          viewport={{ once: true, amount: 0.3 }}
+          transition={{ duration: 0.6, ease: 'easeOut' }}
+          className="mx-auto mb-16 max-w-3xl text-center"
        >
          <Eyebrow color="accent">Components</Eyebrow>
          <SectionHeader color="light">
-            Augmented Intelligence Fabric
+            Intelligence Fabric
          </SectionHeader>
          <P className="mt-6" color="lightSecondary">
-            A complete infrastructure for building and deploying AI agents with enterprise-grade security and performance.
+            A complete infrastructure for building and deploying sovereign AI agents with enterprise-grade security and performance. Your data never leaves your control.
          </P>
        </motion.div>

@@ -67,9 +67,9 @@ export function BentoSection() {
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
-              className="rounded-2xl bg-gray-900 border border-gray-800 p-6 hover:border-cyan-500 hover:shadow-lg transition-all duration-300 hover:scale-105 overflow-hidden"
+              viewport={{ once: true, amount: 0.2 }}
+              transition={{ duration: 0.45, delay: index * 0.1, ease: 'easeOut' }}
+              className="overflow-hidden rounded-2xl border border-gray-800 bg-gray-900 p-6 transition-all duration-300 hover:scale-105 hover:border-cyan-500 hover:shadow-lg"
            >
              <video
                src={item.video}
--- a/src/pages/agents/Companies.tsx
+++ b/src/pages/agents/Companies.tsx
@@ -2,7 +2,7 @@

 import React from "react";
 import { motion } from "framer-motion";
-import { P, Eyebrow } from '@/components/Texts';
+import { P, Eyebrow } from "@/components/Texts";
 import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";


@@ -47,8 +47,9 @@ export function Companies() {
        <motion.div
          className="flex flex-col justify-center max-w-4xl items-center mb-8 mx-auto"
          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.3 }}
+          transition={{ duration: 0.6, ease: "easeOut" }}
        >
          <Eyebrow color="accent"></Eyebrow>
          <P className="hidden min-xl:text-gray-100 text-center mb-6">
--- a/src/pages/agents/DeploySection.tsx
+++ b/src/pages/agents/DeploySection.tsx
@@ -1,9 +1,8 @@
-'use client'
+"use client";

-import { useRef } from 'react'
-import { motion, useInView } from 'framer-motion'
-import { SectionHeader, P, Eyebrow, CT, CP } from '@/components/Texts'
-import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
+import { motion } from "framer-motion";
+import { SectionHeader, P, Eyebrow, CT, CP } from "@/components/Texts";
+import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from "react-icons/tb";

 const features = [
  {
@@ -23,24 +22,22 @@ const features = [
      'Set up and manage your nodes with ease. Scale compute and storage as you grow, while staying fully sovereign and decentralized.',
    icon: TbCircleNumber3Filled,
  },
-]
+];

 export function DeploySection() {
-  const ref = useRef(null);
-  const isInView = useInView(ref, { once: true });
-
  return (
-    <section id="benefits" ref={ref} className="relative pt-12 lg:pt-24 pb-4 px-4 lg:px-12  text-white bg-black">
+    <section id="benefits" className="relative bg-black px-4 pb-4 pt-12 text-white lg:px-12 lg:pt-24">
      <div className="relative px-6 lg:px-12">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
-          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
-          transition={{ duration: 0.8, delay: 0.1 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.3 }}
+          transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
          className="mx-auto max-w-5xl text-center"
        >
          <Eyebrow color="accent">Get Started</Eyebrow>
          <SectionHeader className="text-3xl font-medium tracking-tight" color="light">
-            Deploy Scalable LLMs and AI Agents in Seconds
+            Deploy Scalable LLMs and AI Agents
          </SectionHeader>
          <P className="mt-6" color="light">
            Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control.
@@ -48,25 +45,31 @@ export function DeploySection() {
        </motion.div>
        <motion.ul
          initial={{ opacity: 0 }}
-          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
-          transition={{ duration: 0.5, delay: 0.2, staggerChildren: 0.2 }}
-          className="mx-auto lg:mt-12 mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-8 text-base/7 sm:grid-cols-2 sm:gap-y-16 lg:mx-12 lg:max-w-7xl lg:grid-cols-3"
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true, amount: 0.2 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          className="mx-auto mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-8 text-base/7 sm:grid-cols-2 sm:gap-y-16 lg:mx-12 lg:mt-12 lg:max-w-7xl lg:grid-cols-3"
        >
          {features.map((feature, index) => (
            <motion.li
              key={feature.name}
              initial={{ opacity: 0, y: 20 }}
-              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
-              transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
-              className="rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, amount: 0.2 }}
+              transition={{ duration: 0.45, delay: 0.3 + index * 0.15, ease: "easeOut" }}
+              className="rounded-2xl border border-gray-300 bg-white/5 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 backdrop-blur-md"
            >
-              <feature.icon className="h-8 w-8 mb-4 text-white" />
-              <CT as="span" className="font-semibold text-left" color="light">{feature.name}</CT>
-              <CP className="mt-2 text-sm text-left" color="light">{feature.description}</CP>
+              <feature.icon className="mb-4 h-8 w-8 text-white" />
+              <CT as="span" className="text-left font-semibold" color="light">
+                {feature.name}
+              </CT>
+              <CP className="mt-2 text-left text-sm" color="light">
+                {feature.description}
+              </CP>
            </motion.li>
          ))}
        </motion.ul>
      </div>
    </section>
-  )
+  );
 }
--- a/src/pages/cloud/CloudCTA.tsx
+++ b/src/pages/cloud/CloudCTA.tsx
@@ -5,29 +5,27 @@ export function CloudCTA() {
  return (
    <section className="relative overflow-hidden py-24 lg:py-32">
      <Container className="relative">
-        <div className="relative mx-auto max-w-5xl overflow-hidden rounded-3xl border border-gray-200/60 bg-white/90 px-10 py-16 text-center shadow-[0_30px_120px_-70px_rgba(6,182,212,0.65)] backdrop-blur lg:px-16 lg:py-20">
-          <div className="max-w-3xl mx-auto">
-            <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-500">
-              Ready Today
-            </p>
-            <h2 className="mt-6 text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
-              Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
-            </h2>
-            <p className="mt-6 text-lg text-gray-600">
-              Revolutionary Kubernetes automation, deterministic compute, and quantum-safe storage—delivered as a turnkey platform so your team can deploy, scale, and operate cloud-native applications with confidence.
-            </p>
-            <div className="mt-10 flex justify-center">
-              <Button
-                to="https://myceliumcloud.tf"
-                as="a"
-                variant="solid"
-                color="cyan"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Start Deploying
-              </Button>
-            </div>
+        <div className="mx-auto max-w-3xl text-center">
+          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-500">
+            Ready Today
+          </p>
+          <h2 className="mt-6 text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
+            Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
+          </h2>
+          <p className="mt-6 text-lg text-gray-600">
+            Revolutionary Kubernetes automation, deterministic compute, and quantum-safe storage—delivered as a turnkey platform so your team can deploy, scale, and operate cloud-native applications with confidence.
+          </p>
+          <div className="mt-10 flex justify-center">
+            <Button
+              to="https://myceliumcloud.tf"
+              as="a"
+              variant="solid"
+              color="cyan"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Start Deployment
+            </Button>
          </div>
        </div>
      </Container>
--- a/src/pages/cloud/CloudHero.tsx
+++ b/src/pages/cloud/CloudHero.tsx
@@ -88,19 +88,10 @@ export function CloudHero() {
              Mycelium Cloud blends deterministic compute with quantum-safe storage, delivering a sovereign platform built for zero-ops automation.
            </p>
            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
-              <Button to="/download" variant="solid" color="cyan">
-                Start Deploying
-              </Button>
-              <Button
-                to="https://manual.grid.tf"
-                as="a"
-                variant="outline"
-                color="gray"
-                target="_blank"
-                rel="noreferrer"
-              >
-                View Documentation
+              <Button to="https://myceliumcloud.tf" variant="solid" color="cyan">
+                Start Deployment
              </Button>
+              
            </div>
          </div>
          <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
--- a/src/pages/cloud/CloudOverview.tsx
+++ b/src/pages/cloud/CloudOverview.tsx
@@ -48,12 +48,12 @@ export function CloudOverview() {
          {focusAreas.map((item) => (
            <div
              key={item.title}
-              className="rounded-3xl border border-white/10 bg-white/5 p-8 text-left shadow-[0_20px_60px_-40px_rgba(6,182,212,0.6)] backdrop-blur"
+              className="rounded-3xl p-8 text-left transition hover:-translate-y-1"
            >
-              <div className="text-base font-semibold text-cyan-200">
+              <div className="text-lg font-semibold text-white">
                {item.title}
              </div>
-              <p className="mt-4 text-sm leading-relaxed text-gray-200">
+              <p className="mt-4 text-sm leading-relaxed text-gray-300">
                {item.description}
              </p>
            </div>
--- a/src/pages/cloud/SecurityPillars.tsx
+++ b/src/pages/cloud/SecurityPillars.tsx
@@ -45,7 +45,7 @@ export function SecurityPillars() {
          {pillars.map((pillar) => (
            <div
              key={pillar.title}
-              className="rounded-3xl border border-white/10 bg-white/5 p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-400/60"
+              className="rounded-3xl p-8 text-left transition hover:-translate-y-1"
            >
              <div className="text-lg font-semibold text-white">
                {pillar.title}
--- a/src/pages/download/DevHub.tsx
+++ b/src/pages/download/DevHub.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import {
+  BookOpenIcon,
+  ChatBubbleOvalLeftEllipsisIcon,
+  LifebuoyIcon,
+  UserGroupIcon,
+} from '@heroicons/react/24/outline'
+
+const features = [
+  {
+    name: 'Documentation',
+    description: 'Documentation for Mycelium.',
+    href: 'https://threefold.info/mycelium_network/docs/',
+    icon: BookOpenIcon,
+  },
+  {
+    name: 'Support',
+    description: 'Talk to an expert.',
+    href: 'https://threefoldfaq.crisp.help/en/',
+    icon: LifebuoyIcon,
+  },
+  {
+    name: 'Forum',
+    description: 'Forum for all your questions.',
+    href: 'https://forum.threefold.io/',
+    icon: ChatBubbleOvalLeftEllipsisIcon,
+  },
+  {
+    name: 'Community',
+    description: 'Join our Developers community on telegram.',
+    href: 'https://t.me/threefoldtesting',
+    icon: UserGroupIcon,
+  },
+]
+
+export function DevHub() {
+  return (
+    <div className="bg-gray-900 py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
+          <div className="col-span-2">
+            <h2 className="mb-2 text-base font-semibold leading-7 text-cyan-500">Get Started</h2>
+            <p className="text-3xl font-medium tracking-tight text-white lg:text-4xl">Developer Hub</p>
+            <p className="mt-6 text-lg text-gray-300">
+              Our Developer Hub is a resource center for developers looking to build on top of Mycelium.
+              Join our Developers community on telegram to get started.
+            </p>
+          </div>
+          <dl className="col-span-3 grid grid-cols-1 gap-8 sm:grid-cols-2">
+            {features.map((feature) => (
+              <a
+                key={feature.name}
+                href={feature.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block rounded-2xl border border-gray-700 bg-gray-900/40 p-6 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:bg-gray-800 hover:shadow-lg hover:shadow-cyan-500/20"
+              >
+                <feature.icon aria-hidden="true" className="mb-4 h-6 w-6 flex-none text-cyan-500" />
+                <dt className="font-semibold text-white">{feature.name}</dt>
+                <dd className="mt-2 text-gray-400">{feature.description}</dd>
+              </a>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/pages/download/DownloadHero.tsx
+++ b/src/pages/download/DownloadHero.tsx
@@ -0,0 +1,104 @@
+'use client'
+
+import { motion } from 'framer-motion'
+
+import appleIcon from '@/images/apple.svg'
+import windowsIcon from '@/images/windows.svg'
+import androidIcon from '@/images/android.svg'
+import linuxIcon from '@/images/linux.svg'
+
+const features = [
+  {
+    name: 'Download for iOS & MacOS',
+    description: 'Download Mycelium App from the Apple Store.',
+    href: 'https://apps.apple.com/us/app/mycelium-network/id6504277565',
+    icon: appleIcon,
+    alt: 'Apple logo',
+  },
+  {
+    name: 'Download for Windows',
+    description: 'Download the Mycelium App for Windows directly from its Github repository.',
+    href: 'https://github.com/threefoldtech/myceliumflut/releases',
+    icon: windowsIcon,
+    alt: 'Windows logo',
+  },
+  {
+    name: 'Download for Android',
+    description: 'Download Mycelium from the Google Play Store.',
+    href: 'https://play.google.com/store/apps/details?id=tech.threefold.mycelium&pli=1',
+    icon: androidIcon,
+    alt: 'Android logo',
+  },
+  {
+    name: 'Download for Linux',
+    description: 'Download the Mycelium binary for Linux directly from its Github repository.',
+    href: 'https://github.com/threefoldtech/mycelium/releases',
+    icon: linuxIcon,
+    alt: 'Linux logo',
+  },
+]
+
+export function DownloadHero() {
+  return (
+    <div className="py-16 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <motion.h2
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="text-5xl font-medium tracking-tight text-gray-900 lg:text-6xl"
+          >
+            Download Mycelium Network
+          </motion.h2>
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="mt-6 text-lg text-gray-600 lg:leading-8"
+          >
+            Get Mycelium Network for Android, Windows, macOS, and iOS to securely connect, store, and interact with the decentralized network—seamlessly and efficiently. Not sure how it works?{' '}
+            <a
+              href="https://threefold.info/mycelium_network/docs/"
+              className="font-semibold text-gray-900 underline transition-colors hover:text-cyan-500"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Read the manual.
+            </a>
+          </motion.p>
+        </div>
+        <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
+          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 md:grid-cols-2 lg:max-w-none lg:grid-cols-4">
+            {features.map((feature) => (
+              <div
+                key={feature.name}
+                className="flex flex-col rounded-lg border border-gray-200 p-8 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
+              >
+                <dt className="text-base font-semibold leading-7 text-gray-900">
+                  <div className="mb-6 flex h-10 w-10 items-center justify-center">
+                    <img src={feature.icon} alt={feature.alt} className="h-10 w-10" />
+                  </div>
+                  {feature.name}
+                </dt>
+                <dd className="mt-1 flex flex-auto flex-col text-base leading-7 text-gray-600">
+                  <p className="flex-auto">{feature.description}</p>
+                  <p className="mt-6">
+                    <a
+                      href={feature.href}
+                      className="text-sm font-semibold leading-6 text-cyan-500 transition-colors hover:text-cyan-400"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Download Now <span aria-hidden="true">→</span>
+                    </a>
+                  </p>
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/pages/download/DownloadPage.tsx
+++ b/src/pages/download/DownloadPage.tsx
@@ -0,0 +1,17 @@
+import { AnimatedSection } from '@/components/AnimatedSection'
+
+import { DownloadHero } from './DownloadHero'
+import { DevHub } from './DevHub'
+
+export default function DownloadPage() {
+  return (
+    <>
+      <AnimatedSection>
+        <DownloadHero />
+      </AnimatedSection>
+      <AnimatedSection>
+        <DevHub />
+      </AnimatedSection>
+    </>
+  )
+}
--- a/src/pages/home/CallToAction.tsx
+++ b/src/pages/home/CallToAction.tsx
@@ -14,14 +14,17 @@ 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">
-            Build the Future, Today
+            Activate Your Sovereign <br />Mycelium Stack
          </h2>
          <p className="mt-6 text-lg text-gray-300">
-            Ready to reclaim your digital freedom? Start building on a cloud that’s autonomous, efficient, and truly yours. Explore the documentation or join our community to get started.
+            Provision cloud workloads, mesh them through the encrypted Mycelium Network, and unlock AI experiences without surrendering control of your infrastructure or your data.
          </p>
          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
-                        <Button to="/cloud" variant="solid" color="white">
-              Start Building
+            <Button to="/cloud" variant="solid" color="white">
+              Start Deployment
+            </Button>
+            <Button to="/download" variant="solid" color="cyan">
+              Get Mycelium Connector
            </Button>
            <Button
              to="https://threefold.info/mycelium_network/docs/"
--- a/src/pages/home/HomeAgent.tsx
+++ b/src/pages/home/HomeAgent.tsx
@@ -26,7 +26,7 @@ export function HomeAgent() {
          </H2>

          <P className="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-600">
-            Mycelium delivers enterprise-grade AI agents with unmatched customizability and the fastest time to production — all in the agent platform designed for real business use cases.
+            Mycelium delivers enterprise-grade AI experiences that run on sovereign compute and the Mycelium Network, so production agents can reason over private data, collaborate across sites, and stay fully under your governance.
          </P>

          <div className="mt-10 flex items-center justify-center gap-x-6">
--- a/src/pages/home/HomeAurora.tsx
+++ b/src/pages/home/HomeAurora.tsx
@@ -1,35 +1,37 @@
 "use client";

-import { motion } from "framer-motion";
-import { H1, H2, H3, H4, H5 } from "@/components/Texts";
+import { H1, H5 } from "@/components/Texts";
 import { ScrollDownArrow } from '@/components/ScrollDownArrow';

 export function HomeAurora() {
  return (
-      <motion.div
-        initial={{ opacity: 0.0, y: 40 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        transition={{
-          delay: 0.5,
-          duration: 1,
-          ease: "easeInOut",
-        }}
-        style={{
-          backgroundImage: "url(/images/mchip2.webp)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-        }}
-        className="relative mx-auto pb-24 pt-0 h-screen flex flex-col items-center justify-center gap-4 px-4 max-w-5xl"
-      >
-        <div className="text-center text-gray-800">
-          <H1>Decentralized Autonomous <span className="text-bold lg:text-8xl">Agentic Cloud.</span></H1>
-        </div>
-        <div className="pt-8 text-center font-light text-gray-500 max-w-4xl">
-          <H5>Mycelium Project is a decentralized platform for autonomous AI, powered by distributed compute, sovereign memory, encrypted networking, and stateless GPU orchestration.</H5>
-        </div>
-        <div className="pt-8">
-          <ScrollDownArrow />
-        </div>
-      </motion.div>
+    <div
+      style={{
+        backgroundImage: "url(/images/mchip2.webp)",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+      }}
+      className="relative mx-auto flex min-h-screen flex-col items-center justify-center gap-6 px-4 pb-24 pt-24 text-gray-800 lg:pb-0"
+    >
+      <div className="text-center">
+        <H1>
+          <span className="text-bold lg:text-8xl">
+            Project Mycelium.
+            <br className="hidden lg:block" />
+            Full Sovereignty for Cloud, Network & AI.
+          </span>
+        </H1>
+      </div>
+      <div className="max-w-4xl text-center font-light text-gray-500">
+        <H5>
+          Build and run mission-critical workloads on distributed compute,
+          encrypted networking, and sovereign AI orchestration — all under your
+          control, without centralized gatekeepers.
+        </H5>
+      </div>
+      <div className="pt-6">
+        <ScrollDownArrow />
+      </div>
+    </div>
  );
 }
--- a/src/pages/home/HomeBenefits.tsx
+++ b/src/pages/home/HomeBenefits.tsx
@@ -9,36 +9,30 @@ import { H2, P } from '@/components/Texts'


 export function HomeBenefits() {
-      const features = [
+  const features = [
    {
      title: "Sovereign",
      description:
        "Own your infrastructure and your data. Mycelium Cloud eliminates dependency on centralized providers, giving you full digital sovereignty.",
-            icon: <LockClosedIcon className="h-6 w-6 text-cyan-500" />,
-      className:
-        "col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800",
+      icon: <LockClosedIcon className="h-6 w-6 text-cyan-500" />,
    },
    {
      title: "Autonomous",
      description:
        "The cloud that runs itself. From deployment to scaling, Mycelium Cloud automates everything — so your systems stay fast, resilient, and adaptive.",
-            icon: <CogIcon className="h-6 w-6 text-cyan-500" />,
-      className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
+      icon: <CogIcon className="h-6 w-6 text-cyan-500" />,
    },
    {
      title: "Energy Efficient",
      description:
        "Built on distributed nodes designed for minimal energy use, Mycelium Cloud redefines sustainability without compromising performance.",
-            icon: <BoltIcon className="h-6 w-6 text-cyan-500" />,
-      className:
-        "col-span-1 lg:col-span-3 lg:border-r  dark:border-neutral-800",
+      icon: <BoltIcon className="h-6 w-6 text-cyan-500" />,
    },
    {
      title: "Cost Efficient",
      description:
        "No middlemen. No inflated bills. Just pure compute power at a fraction of traditional cloud costs — optimized, transparent, and fair.",
-            icon: <CurrencyDollarIcon className="h-6 w-6 text-cyan-500" />,
-      className: "col-span-1 lg:col-span-3 border-b lg:border-none",
+      icon: <CurrencyDollarIcon className="h-6 w-6 text-cyan-500" />,
    },
  ];
  return (
@@ -49,18 +43,20 @@ export function HomeBenefits() {
        </H2>

        <P className="text-sm lg:text-base  max-w-2xl  my-4 mx-auto text-neutral-500 text-center font-normal dark:text-neutral-300">
-          Mycelium Cloud isn’t just another cloud — it’s a new foundation for digital independence. A self-governing, AI-powered infrastructure that gives you control, efficiency, and trust without compromise.
+          Project Mycelium is a new foundation for digital independence. A self-governing, AI-powered infrastructure that gives you control, efficiency, and trust without compromise.
        </P>
      </div>

      <div className="relative ">
-        <div className="grid grid-cols-1 lg:grid-cols-6 mt-12 xl:border rounded-md dark:border-neutral-800">
-          {features.map((feature) => (
-            <FeatureCard key={feature.title} className={feature.className}>
-                            <FeatureTitle icon={feature.icon}>{feature.title}</FeatureTitle>
-              <FeatureDescription>{feature.description}</FeatureDescription>
-            </FeatureCard>
-          ))}
+        <div className="mt-12 rounded-2xl border border-neutral-200/70 bg-white/40 dark:bg-black/40 dark:border-neutral-800/60 backdrop-blur">
+          <div className="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-neutral-200/70 dark:divide-neutral-800/60">
+            {features.map((feature) => (
+              <FeatureCard key={feature.title}>
+                <FeatureTitle icon={feature.icon}>{feature.title}</FeatureTitle>
+                <FeatureDescription>{feature.description}</FeatureDescription>
+              </FeatureCard>
+            ))}
+          </div>
        </div>
      </div>
    </div>
@@ -75,7 +71,7 @@ const FeatureCard = ({
  className?: string;
 }) => {
  return (
-    <div className={cn(`p-4 sm:p-8 relative overflow-hidden`, className)}>
+    <div className={cn(`p-6 lg:p-8 relative overflow-hidden`, className)}>
      {children}
    </div>
  );
@@ -85,7 +81,7 @@ const FeatureTitle = ({ children, icon }: { children?: React.ReactNode, icon?: R
  return (
    <div className="flex items-center gap-2">
      {icon}
-            <p className="max-w-5xl text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug">
+      <p className="max-w-5xl text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug">
        {children}
      </p>
    </div>
@@ -96,8 +92,8 @@ const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
  return (
    <p
      className={cn(
-        "text-sm md:text-base  max-w-4xl text-left mx-auto",
-        "text-neutral-500 text-center font-normal dark:text-neutral-300",
+        "text-sm md:text-base max-w-4xl",
+        "text-neutral-500 font-normal dark:text-neutral-300",
        "text-left max-w-sm mx-0 md:text-sm my-2"
      )}
    >
--- a/src/pages/home/HomeGlobe.tsx
+++ b/src/pages/home/HomeGlobe.tsx
@@ -27,14 +27,15 @@ export function WorldMap() {
        {/* Title + Subtitle */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.3 }}
+          transition={{ duration: 0.5, ease: "easeOut" }}
          className="max-w-xl"
        >
-          <Eyebrow color="accent">Network</Eyebrow>
-          <SectionHeader color="light">Mycelium Network is Live.</SectionHeader>
+          <Eyebrow color="accent">Decentralized Network</Eyebrow>
+          <SectionHeader color="light">Project Mycelium is Live.</SectionHeader>
          <P className=" mt-4 text-base leading-relaxed" color="light">
-            Mycelium Cloud's advancement technology enables anyone to deploy
+            Project Mycelium's technology enables anyone to deploy
            their own Internet infrastructure, anywhere.
          </P>
        </motion.div>
@@ -44,8 +45,9 @@ export function WorldMap() {
          {/* Globe Left Column */}
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{ duration: 0.5, delay: 0.2 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true, amount: 0.3 }}
+            transition={{ duration: 0.5, delay: 0.2, ease: "easeOut" }}
            className="flex-1 flex items-center justify-center"
          >
            <div className="relative w-[450px] h-[450px] md:w-[600px] md:h-[600px]">
@@ -57,8 +59,9 @@ export function WorldMap() {
          <div className="relative flex-1 lg:h-auto h-[700px] flex flex-col lg:block items-center gap-y-4 mt-8 lg:mt-0">
            <motion.div
              initial={{ opacity: 0, x: -20 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.4 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.5, delay: 0.4, ease: "easeOut" }}
              className="lg:absolute lg:top-12 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
            >
              <div><CT color="light" className="uppercase tracking-wide">CORES</CT></div>
@@ -70,8 +73,9 @@ export function WorldMap() {

            <motion.div
              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.5 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.5, delay: 0.5, ease: "easeOut" }}
              className="lg:absolute lg:-top-10 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
            >
              <div><CT color="light" className="uppercase tracking-wide">NODES</CT></div>
@@ -83,8 +87,9 @@ export function WorldMap() {

            <motion.div
              initial={{ opacity: 0, x: -20 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.6 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
              className="lg:absolute lg:bottom-28 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
            >
              <div><CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT></div>
@@ -96,8 +101,9 @@ export function WorldMap() {

            <motion.div
              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.7 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.5, delay: 0.7, ease: "easeOut" }}
              className="lg:absolute lg:top-47 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
            >
              <div><CT color="light" className="uppercase tracking-wide">COUNTRIES</CT></div>
--- a/src/pages/home/HomeHero.tsx
+++ b/src/pages/home/HomeHero.tsx
@@ -1,36 +0,0 @@
-'use client'
-
-import { H1, P } from '@/components/Texts'
-import { Button } from '@/components/Button'
-
-export function HomeHero() {
-  return (
-        <div
-      className="relative isolate overflow-hidden bg-white h-screen -z-10  flex items-center justify-center"
-      style={{
-        backgroundImage: 'url(/images/cloud.png)',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-      }}
-    >
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="-mt-32 mx-auto max-w-2xl text-center">
-                    <H1 color="primary" className="text-5xl font-semibold tracking-tight text-pretty sm:text-7xl">
-            Decentralized Autonomous Agentic Cloud.
-          </H1>
-          <P color="secondary" className="mt-8 text-lg font-medium text-pretty sm:text-xl/8">
-            Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
-          </P>
-          <div className="mt-10 flex items-center justify-center gap-x-6">
-            <Button variant="solid" color="cyan" href="#">
-              Get started
-            </Button>
-            <a href="#" className="text-sm/6 font-semibold text-gray-50">
-              Learn more <span aria-hidden="true">→</span>
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
--- a/src/pages/home/HomeHeroDark.tsx
+++ b/src/pages/home/HomeHeroDark.tsx
@@ -1,35 +0,0 @@
-"use client";
-import React from "react";
-import { motion } from "motion/react";
-import { LampContainer } from "@/components/ui/lamp";
-
-export function HomeHeroDark() {
-  return (
-    <LampContainer>
-      <motion.h1
-        initial={{ opacity: 0.5, y: 30 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        transition={{
-          delay: 0.3,
-          duration: 0.8,
-          ease: "easeInOut",
-        }}
-        className="bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl max-w-4xl"
-      >
-        Decentralized Autonomous Agentic Cloud.
-      </motion.h1>
-      <motion.p
-        initial={{ opacity: 0.5, y: 60 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        transition={{
-          delay: 0.5,
-          duration: 0.8,
-          ease: "easeInOut",
-        }}
-        className="mt-8 bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-lg font-medium tracking-tight text-transparent md:text-xl max-w-3xl"
-      >
-        Mycelium Project is a decentralized platform for autonomous AI, powered by distributed compute, sovereign memory, encrypted networking, and stateless GPU orchestration.
-      </motion.p>
-    </LampContainer>
-  );
-}
--- a/src/pages/home/HomeHeroLight2.tsx
+++ b/src/pages/home/HomeHeroLight2.tsx
@@ -1,69 +0,0 @@
-'use client'
-
-import { useRef, useEffect } from 'react'
-import { H1, H5 } from '@/components/Texts'
-
-export function HomeHeroLight2() {
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  useEffect(() => {
-    const video = videoRef.current;
-    if (video) {
-      video.playbackRate = 0.4;
-      const playPromise = video.play();
-      if (playPromise !== undefined) {
-        playPromise.catch(error => {
-          console.error("Video autoplay was prevented:", error);
-        });
-      }
-    }
-  }, []);
-
-  return (
-    <section className="relative h-screen overflow-hidden">
-      {/* Background video */}
-      <video
-        ref={videoRef}
-        src="/videos/cloud.mp4"
-        autoPlay
-        loop
-        muted
-        playsInline
-        className="absolute inset-0 h-full w-full object-cover z-[-10]"
-      />
-
-      {/* Global soft wash + blur (Temporarily commented out for debugging) */}
-      {/* <div className="absolute inset-0 bg-white opacity-30 backdrop-blur-md z-0" /> */}
-
-      {/* Center “halo” for text legibility (Temporarily commented out for debugging) */}
-      {/* <div
-        className="absolute inset-0 z-0"
-        style={{
-          background:
-            'radial-gradient(ellipse at center, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 15%, rgba(255,255,255,0.72) 35%, rgba(255,255,255,0.08) 75%)'
-        }}
-      /> */}
-
-      {/* Content */}
-      <div className="relative z-10 h-full flex items-center justify-center">
-        <div className="mx-auto max-w-4xl text-center px-6 lg:px-8">
-          
-          <H1 
-            className="pt-6"
-            style={{ textShadow: '0 2px 8px rgba(0,0,0,0.08)' }}
-          >
-            Decentralized Autonomous Agentic Cloud.
-          </H1>
-
-          <H5
-            className="mt-8"
-            style={{ textShadow: '0 1px 4px rgba(0,0,0,0.06)' }}
-          >
-            Mycelium&apos;s advancements in Agentic infrastructure support private, secure, and
-            autonomous Agents that connect, learn, and grow with you.
-          </H5>
-        </div>
-      </div>
-    </section>
-  )
-}
--- a/src/pages/home/StackSection.tsx
+++ b/src/pages/home/StackSection.tsx
@@ -38,9 +38,9 @@ export function StackSectionLight() {

          <FadeIn>
            <P color="dark" className="mt-6 text-lg leading-relaxed text-gray-600">
-              Built with Mycelium technology, our AI infrastructure ensures
-              unbreakable networks, complete data sovereignty, ultra-secure
-              agent-human communication, and unhackable data storage systems.
+              Project Mycelium unifies compute, storage, networking, and AI into a resilient
+              ecosystem that preserves data sovereignty, powers seamless collaboration,
+              and keeps every layer of your infrastructure secure end to end.
            </P>
          </FadeIn>
        </div>
--- a/src/pages/home/WorldMapSection.tsx
+++ b/src/pages/home/WorldMapSection.tsx
@@ -1,106 +0,0 @@
-import { motion } from 'framer-motion'
-import { Globe } from '../../components/ui/Globe2'
-import { CountUpNumber } from '../../components/CountUpNumber'
-import { Container } from '../../components/Container'
-
-export function WorldMapSection() {
-  return (
-    <section className="relative bg-gray-50 py-20 lg:py-32">
-      <Container>
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.5 }}
-          className="mb-12"
-        >
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-            Mycelium Network is Live.
-          </h2>
-        </motion.div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Globe */}
-          <motion.div
-            initial={{ opacity: 0, scale: 0.9 }}
-            whileInView={{ opacity: 1, scale: 1 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, delay: 0.2 }}
-            className="flex items-center justify-center"
-          >
-            <div className="relative w-full max-w-[500px] aspect-square">
-              <Globe className="w-full h-full" />
-            </div>
-          </motion.div>
-
-          {/* Stats Cards */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: 0.3 }}
-              className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
-            >
-              <p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">CORES</p>
-              <div className="mt-2 text-3xl font-bold text-gray-900">
-                <CountUpNumber end={54958} />
-              </div>
-              <p className="mt-2 text-sm text-gray-600">
-                Total Central Processing Unit Cores available on the grid.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: 0.4 }}
-              className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
-            >
-              <p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">NODES</p>
-              <div className="mt-2 text-3xl font-bold text-gray-900">
-                <CountUpNumber end={1493} />
-              </div>
-              <p className="mt-2 text-sm text-gray-600">
-                Total number of nodes on the grid.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: 0.5 }}
-              className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
-            >
-              <p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">SSD CAPACITY</p>
-              <div className="mt-2 text-3xl font-bold text-gray-900">
-                <CountUpNumber end={5388956} />
-              </div>
-              <p className="mt-2 text-sm text-gray-600">
-                Total GB amount of storage (SSD, HDD, & RAM) on the grid.
-              </p>
-            </motion.div>
-
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: 0.6 }}
-              className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
-            >
-              <p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">COUNTRIES</p>
-              <div className="mt-2 text-3xl font-bold text-gray-900">
-                <CountUpNumber end={44} />
-              </div>
-              <p className="mt-2 text-sm text-gray-600">
-                Total number of countries with active nodes.
-              </p>
-            </motion.div>
-          </div>
-        </div>
-      </Container>
-    </section>
-  )
-}
--- a/src/pages/network/CallToAction.tsx
+++ b/src/pages/network/CallToAction.tsx
@@ -21,7 +21,7 @@ export function CallToAction() {
          </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
+              Get Mycelium Connector
            </Button>
            <Button
              to="https://threefold.info/mycelium_network/docs/"
--- a/src/pages/network/Hero.tsx
+++ b/src/pages/network/Hero.tsx
@@ -74,32 +74,32 @@ function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {

 export function Hero() {
  return (
-        <div className="overflow-hidden py-32">
+    <div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
      <Container>
        <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
          <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
-            <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
+            <h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
              Mycelium Network
            </h1>
-            <h2 className="mt-6 lg:text-2xl text-xl tracking-tight leading-normal text-gray-600">
+            <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
              Unleashing the Power of Decentralized Networks
            </h2>
-            <p className="mt-6 lg:text-xl text-lg text-gray-600 lg:leading-normal leading-tight">
+            <p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
              Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
            </p>
            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
              <Button to="/download" variant="solid" color="cyan">
-                Get Mycelium
+                Get Mycelium Connector
              </Button>
            </div>
          </div>
-          <div className="relative lg:mt-10 mt-0 lg:col-span-5 lg:row-span-2 xl:col-span-6">
-            <BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:top-0 lg:ml-12 ml-0" />
-            <div className="mx-auto h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:px-0 lg:absolute lg:-inset-x-10 lg:top-0 lg:h-auto lg:pt-10 xl:-bottom-32">
+          <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
+            <BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
+            <div className="mx-auto h-[460px] max-w-[520px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-32">
              <img
                src={phoneFrame}
                alt="Mycelium application demo"
-                className="mx-auto max-w-[366px]"
+                className="mx-auto h-full w-auto max-w-[366px]"
                width={366}
                height={729}
              />