improvements

index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Mycelium - Unleash the Power of Decentralized Networks</title>
+    <title>Project Mycelium - Unleash the Power of Decentralized Networks</title>
-    <meta name="description" content="Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking." />
+    <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 />
   </head>

package-lock.json

@@ -8,6 +8,7 @@
       "name": "www_try",
       "version": "0.0.0",
       "dependencies": {
+        "@emailjs/browser": "^4.4.1",
         "@headlessui/react": "^2.2.9",
         "@heroicons/react": "^2.2.0",
         "@lobehub/icons": "^1.97.2",
@@ -612,6 +613,15 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/@emailjs/browser": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-4.4.1.tgz",
+      "integrity": "sha512-DGSlP9sPvyFba3to2A50kDtZ+pXVp/0rhmqs2LmbMS3I5J8FSOgLwzY2Xb4qfKlOVHh29EAutLYwe5yuEZmEFg==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.6.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emailjs/browser": "^4.4.1",
     "@headlessui/react": "^2.2.9",
     "@heroicons/react": "^2.2.0",
     "@lobehub/icons": "^1.97.2",

src/App.tsx

@@ -4,6 +4,7 @@ import HomePage from './pages/home/HomePage'
 import CloudPage from './pages/cloud/CloudPage'
 import NetworkPage from './pages/network/NetworkPage'
 import AgentsPage from './pages/agents/AgentsPage'
+import DownloadPage from './pages/download/DownloadPage'
 
 function App() {
   return (
@@ -14,6 +15,7 @@ function App() {
           <Route path="cloud" element={<CloudPage />} />
           <Route path="network" element={<NetworkPage />} />
           <Route path="agents" element={<AgentsPage />} />
+          <Route path="download" element={<DownloadPage />} />
         </Route>
       </Routes>
     </BrowserRouter>

src/components/AnimatedSection.tsx

@@ -1,20 +1,20 @@
-import { useRef } from 'react'
+import { motion } from 'framer-motion'
-import { motion, useInView } from 'framer-motion'
 
-export function AnimatedSection({ children, id }: { children: React.ReactNode; id?: string }) {
+type AnimatedSectionProps = {
-  const ref = useRef(null)
+  children: React.ReactNode
-  const isInView = useInView(ref, { once: true, margin: '-20% 0px -20% 0px' })
+  id?: string
+  className?: string
+}
 
+export function AnimatedSection({ children, id, className }: AnimatedSectionProps) {
   return (
     <motion.section
       id={id}
-      ref={ref}
+      className={className}
-      initial={{ opacity: 0, y: 50 }}
+      initial={{ opacity: 0, y: 40 }}
-      animate={{
+      whileInView={{ opacity: 1, y: 0 }}
-        opacity: isInView ? 1 : 0,
+      viewport={{ once: true, margin: '-25% 0px -20% 0px' }}
-        y: isInView ? 0 : 50,
+      transition={{ duration: 0.5, ease: 'easeOut' }}
-      }}
-      transition={{ duration: 0.5 }}
     >
       {children}
     </motion.section>

src/components/ContactForm.tsx

@@ -0,0 +1,220 @@
+'use client'
+
+import { AnimatePresence, motion } from 'framer-motion'
+import { useState, type ChangeEvent, type FormEvent } from 'react'
+import emailjs from '@emailjs/browser'
+import { CheckCircle, Send, X } from 'lucide-react'
+
+interface ContactFormProps {
+  isOpen: boolean
+  onClose: () => void
+  title?: string
+  formType?: 'investor' | 'partner' | 'agent_waitlist'
+}
+
+const initialFormState = {
+  name: '',
+  email: '',
+  company: '',
+  message: '',
+}
+
+export default function ContactForm({
+  isOpen,
+  onClose,
+  title = 'Book a Meeting',
+  formType,
+}: ContactFormProps) {
+  const [formData, setFormData] = useState(initialFormState)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isSubmitted, setIsSubmitted] = useState(false)
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }))
+  }
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+
+    try {
+      const templateParams = {
+        from_name: formData.name,
+        from_email: formData.email,
+        company: formData.company,
+        message: formData.message,
+        to_email: 'emre@incubaid.com',
+        form_type: formType || 'General Inquiry',
+      }
+
+      await emailjs.send(
+        'service_03d0vf8',
+        'template_6o6e8oe',
+        templateParams,
+        'bhkly3gzrO-SA9w7v',
+      )
+
+      setIsSubmitted(true)
+      setTimeout(() => {
+        setIsSubmitted(false)
+        setFormData(initialFormState)
+        onClose()
+      }, 3000)
+    } catch (error) {
+      console.error('Email sending failed:', error)
+      alert('Failed to send message. Please try again.')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+        >
+          <motion.div
+            className="relative w-full max-w-md overflow-hidden rounded-2xl bg-card shadow-2xl"
+            initial={{ scale: 0.9, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.9, opacity: 0 }}
+            transition={{ type: 'spring', damping: 25, stiffness: 300 }}
+          >
+            <div className="flex items-center justify-between border-b border-border p-6">
+              <h3 className="text-xl font-bold text-foreground">{title}</h3>
+              <button
+                onClick={onClose}
+                className="rounded-lg p-2 transition-colors hover:bg-muted"
+                aria-label="Close form"
+              >
+                <X className="h-5 w-5 text-muted-foreground" />
+              </button>
+            </div>
+
+            <div className="p-6">
+              {isSubmitted ? (
+                <motion.div
+                  className="py-8 text-center"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                >
+                  <CheckCircle className="mx-auto mb-4 h-16 w-16 text-primary" />
+                  <h4 className="mb-2 text-lg font-semibold text-foreground">Thank you!</h4>
+                  <p className="text-muted-foreground">We&apos;ll get back to you soon.</p>
+                </motion.div>
+              ) : (
+                <form onSubmit={handleSubmit} className="space-y-4">
+                  <div>
+                    <label
+                      htmlFor="name"
+                      className="mb-1 block text-sm font-medium text-muted-foreground"
+                    >
+                      Full Name *
+                    </label>
+                    <input
+                      type="text"
+                      id="name"
+                      name="name"
+                      value={formData.name}
+                      onChange={handleInputChange}
+                      required
+                      className="w-full rounded-lg border border-border bg-muted/30 px-4 py-3 text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary"
+                      placeholder="Your full name"
+                    />
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="email"
+                      className="mb-1 block text-sm font-medium text-muted-foreground"
+                    >
+                      Email Address *
+                    </label>
+                    <input
+                      type="email"
+                      id="email"
+                      name="email"
+                      value={formData.email}
+                      onChange={handleInputChange}
+                      required
+                      className="w-full rounded-lg border border-border bg-muted/30 px-4 py-3 text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary"
+                      placeholder="your.email@company.com"
+                    />
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="company"
+                      className="mb-1 block text-sm font-medium text-muted-foreground"
+                    >
+                      Company
+                    </label>
+                    <input
+                      type="text"
+                      id="company"
+                      name="company"
+                      value={formData.company}
+                      onChange={handleInputChange}
+                      className="w-full rounded-lg border border-border bg-muted/30 px-4 py-3 text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary"
+                      placeholder="Your company name"
+                    />
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="message"
+                      className="mb-1 block text-sm font-medium text-muted-foreground"
+                    >
+                      Message
+                    </label>
+                    <textarea
+                      id="message"
+                      name="message"
+                      value={formData.message}
+                      onChange={handleInputChange}
+                      rows={4}
+                      className="w-full resize-none rounded-lg border border-border bg-muted/30 px-4 py-3 text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary"
+                      placeholder={
+                        formType === 'investor'
+                          ? 'Tell us about your investment interests and how we can collaborate.'
+                          : formType === 'agent_waitlist'
+                            ? 'Tell us about your sovereign agent requirements.'
+                            : 'Tell us about your project or how we can help.'
+                      }
+                    />
+                  </div>
+
+                  <button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className="flex w-full items-center justify-center rounded-lg bg-primary px-6 py-3 font-semibold text-primary-foreground transition-opacity disabled:cursor-not-allowed disabled:opacity-50"
+                  >
+                    {isSubmitting ? (
+                      <>
+                        <div className="mr-2 h-5 w-5 animate-spin rounded-full border-2 border-primary-foreground/30 border-t-primary-foreground" />
+                        Sending...
+                      </>
+                    ) : (
+                      <>
+                        <Send className="h-5 w-5" />
+                        <span className="ml-2">Send Message</span>
+                      </>
+                    )}
+                  </button>
+                </form>
+              )}
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}

src/components/FadeIn.tsx

@@ -18,11 +18,10 @@ export function FadeIn({ children, transition, className }: FadeInProps) {
       className={className}
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: false, margin: isMobile ? '0px 0px -50px 0px' : '0px 0px -100px 0px' }}
+      viewport={{ once: true, amount: isMobile ? 0.2 : 0.3 }}
-      transition={transition || { duration: 0.5 }}
+      transition={transition || { duration: 0.5, ease: 'easeOut' }}
     >
       {children}
     </motion.div>
   )
 }
-

src/components/Footer.tsx

@@ -35,10 +35,10 @@ export function Footer() {
             </div>
             <div className="ml-4 lg:w-72">
               <p className="text-base font-semibold text-gray-900">
-                <a href="https://github.com/threefoldtech/mycelium/releases/" target="_blank" rel="noopener noreferrer">
+                <Link to="/download">
                   <span className="absolute inset-0 sm:rounded-2xl" />
-                  Download Mycelium
+                  Download Mycelium Connector
-                </a>
+                </Link>
               </p>
               <p className="mt-1 text-sm text-gray-700">
                 Head to the GitHub to access the latest Mycelium builds for your devices.

src/components/Header.tsx

@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom'
 import { Container } from './Container'
 import { Button } from './Button'
+import pmyceliumLogo from '../images/logos/pmyceliumlogo.png'
 
 export function Header() {
   return (
@@ -9,15 +10,9 @@ export function Header() {
                 <Container className="relative z-50 flex justify-between py-4">
           <div className="relative z-10 flex items-center gap-16">
             <Link to="/" aria-label="Home">
-              <img src="/src/images/logomark.svg" alt="Mycelium" className="h-10 w-auto" />
+              <img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />
             </Link>
             <div className="hidden lg:flex lg:gap-10">
-              <Link
-                to="/"
-                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
-              >
-                Home
-              </Link>
               <Link
                 to="/cloud"
                 className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
@@ -41,16 +36,16 @@ export function Header() {
           <div className="flex items-center gap-6">
             <div className="flex items-center gap-6 max-lg:hidden">
               <Button
-                to="https://threefold.info/mycelium_network/docs/"
+                to="https://myceliumcloud.tf"
                 variant="outline"
                 as="a"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                Docs
+                Start Deployment
               </Button>
               <Button to="/download" variant="solid" color="cyan">
-                Get Mycelium
+                Get Mycelium Connector
               </Button>
             </div>
           </div>

src/components/Texts.tsx

@@ -23,6 +23,7 @@ type TextOwnProps = {
   font?: keyof typeof fontVariants
   color?: keyof typeof colorVariants
   className?: string
+  children?: React.ReactNode
 }
 
 // Polymorphic helpers

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { useId } from "react";
 
 export default function FeaturesSectionDemo() {

src/components/ui/FadeIn.tsx

@@ -18,11 +18,10 @@ export function FadeIn({ children, transition, className }: FadeInProps) {
       className={className}
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: false, margin: isMobile ? '0px 0px -50px 0px' : '0px 0px -100px 0px' }}
+      viewport={{ once: true, amount: isMobile ? 0.2 : 0.3 }}
-      transition={transition || { duration: 0.5 }}
+      transition={transition || { duration: 0.5, ease: 'easeOut' }}
     >
       {children}
     </motion.div>
   )
 }
-

src/components/ui/HalfGlobe.tsx

@@ -1,12 +1,15 @@
 "use client";
 
-import * as THREE from "three";
 import { Canvas, useFrame } from "@react-three/fiber";
-import { OrbitControls, useTexture } from "@react-three/drei";
+import { Line, OrbitControls, useTexture } from "@react-three/drei";
-import { useRef } from "react";
+import { useMemo, useRef } from "react";
+
+type RotatableGroup = {
+  rotation: { y: number };
+};
 
 function Globe() {
-  const groupRef = useRef<THREE.Group>(null);
+  const groupRef = useRef<RotatableGroup | null>(null);
   const cloudTexture = useTexture("/images/cloud1.png");
 
   // Rotate the globe slowly
@@ -17,7 +20,7 @@ function Globe() {
   });
 
   // Coordinates for markers (half-globe)
-  const points = [
+  const markers = [
     [0, 1, 0],
     [0.7, 0.5, 0.2],
     [-0.5, 0.4, 0.5],
@@ -25,42 +28,47 @@ function Globe() {
     [-0.6, -0.1, 0.3],
     [0.3, -0.2, 0.8],
   ];
+  const arcPoints = useMemo(() => {
+    const radius = 2.5;
+    const verticalRadius = radius / 2;
+    const segments = 120;
+
+    return Array.from({ length: 8 }, () => {
+      const points: number[] = [];
+      for (let i = 0; i < segments; i++) {
+        const t = (i / (segments - 1)) * Math.PI;
+        const x = Math.cos(t) * radius;
+        const z = Math.sin(t) * verticalRadius;
+        const y = Math.sin(x / radius) * 0.5;
+        points.push(x, y, z);
+      }
+      return points;
+    });
+  }, []);
 
   return (
     <group ref={groupRef}>
       {/* Cyan arcs */}
-      {Array.from({ length: 8 }).map((_, i) => {
+      {arcPoints.map((points, i) => (
-        const radius = 2.5;
+        <Line
-        const curve = new THREE.EllipseCurve(
+          key={i}
-          0,
+          points={points}
-          0,
+          color="#00e5ff"
-          radius,
+          lineWidth={1}
-          radius / 2,
+          transparent
-          0,
+          opacity={0.5}
-          Math.PI,
+        />
-          false,
+      ))}
-          0
-        );
-        const points = curve.getPoints(100);
-        const geometry = new THREE.BufferGeometry().setFromPoints(
-          points.map((p) => new THREE.Vector3(p.x, Math.sin(p.x / radius) * 0.5, p.y))
-        );
-        return (
-          <line key={i} geometry={geometry}>
-            <lineBasicMaterial color="#00e5ff" linewidth={1} transparent opacity={0.5} />
-          </line>
-        );
-      })}
 
       {/* Cloud markers */}
-      {points.map(([x, y, z], i) => (
+      {markers.map(([x, y, z], i) => (
         <mesh key={i} position={[x * 2.5, y * 2.5, z * 2.5]}>
           <planeGeometry args={[0.3, 0.3]} />
           <meshBasicMaterial
             map={cloudTexture}
             transparent
             opacity={1}
-            side={THREE.DoubleSide}
+            side={2 /* DoubleSide */}
           />
         </mesh>
       ))}

src/components/ui/aurora-background.tsx

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "@/lib/utils";
-import React, { ReactNode } from "react";
+import type { CSSProperties, HTMLProps, ReactNode } from "react";
 
-interface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {
+interface AuroraBackgroundProps extends HTMLProps<HTMLDivElement> {
   children: ReactNode;
   showRadialGradient?: boolean;
 }
@@ -44,7 +44,7 @@ export const AuroraBackground = ({
               "--black": "#000",
               "--white": "#fff",
               "--transparent": "transparent",
-            } as React.CSSProperties
+            } as CSSProperties
           }
         >
           <div

src/components/ui/dotted-glow-background.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 type DottedGlowBackgroundProps = {
   className?: string;
@@ -203,12 +203,8 @@ export function DottedGlowBackground({
 
     regenDots();
 
-    let last = performance.now();
-
     const draw = (now: number) => {
       if (stopped) return;
-      const dt = (now - last) / 1000; // seconds
-      last = now;
       const { width, height } = container.getBoundingClientRect();
 
       ctx.clearRect(0, 0, el.width, el.height);

src/components/ui/floating-navbar.tsx

@@ -81,7 +81,7 @@ export const FloatingNav = ({
             <span className="hidden sm:block text-sm">Docs</span>
           </a>
           <Button to="/download" variant="solid" color="cyan">
-            Get Mycelium
+            Get Mycelium Connector
           </Button>
         </div>
       </motion.div>

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

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,10 @@ import { BentoSection } from './BentoSection'
 export default function AgentsPage() {
   return (
     <div>
+      <AnimatedSection>
+        <AgentsHero />
+      </AnimatedSection>
+
       <AnimatedSection>
         <DeploySection />
       </AnimatedSection>
@@ -15,7 +20,6 @@ export default function AgentsPage() {
         <Companies />
       </AnimatedSection>
 
-      
       <AnimatedSection>
         <GallerySection />
       </AnimatedSection>

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 }}
+          viewport={{ once: true, amount: 0.3 }}
-          transition={{ duration: 0.8 }}
+          transition={{ duration: 0.6, ease: 'easeOut' }}
-          className="mx-auto max-w-3xl text-center mb-16"
+          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 }}
+              viewport={{ once: true, amount: 0.2 }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
+              transition={{ duration: 0.45, delay: index * 0.1, ease: 'easeOut' }}
-              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"
+              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}

src/pages/agents/Companies.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-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 +46,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 }}
+          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1 }}
+          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">

src/pages/agents/DeploySection.tsx

@@ -1,46 +1,63 @@
-'use client'
+"use client";
 
-import { useRef } from 'react'
+import { motion } from "framer-motion";
-import { motion, useInView } from 'framer-motion'
+import { SectionHeader, P, Eyebrow, CT, CP } from "@/components/Texts";
-import { SectionHeader, P, Eyebrow, CT, CP } from '@/components/Texts'
+import type { ComponentPropsWithoutRef } from "react";
-import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
+
+type CircleIconProps = ComponentPropsWithoutRef<"svg">;
+
+const CircleNumber1Icon = (props: CircleIconProps) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm.994 5.886c-.083-.777-1.008-1.16-1.617-.67l-.084.077-2 2-.083.094a1 1 0 000 1.226l.083.094.094.083a1 1 0 001.226 0l.094-.083.293-.293v5.586l.007.117a1 1 0 001.986 0l.007-.117v-8l-.006-.114z" />
+  </svg>
+);
+
+const CircleNumber2Icon = (props: CircleIconProps) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm1 5h-3l-.117.007a1 1 0 000 1.986l.117.007h3v2h-2l-.15.005a2 2 0 00-1.844 1.838l-.006.157v2l.005.15a2 2 0 001.838 1.844l.157.006h3l.117-.007a1 1 0 000-1.986l-.117-.007h-3v-2h2l.15-.005a2 2 0 001.844-1.838l.006-.157v-2l-.005-.15a2 2 0 00-1.838-1.844l-.157-.006z" />
+  </svg>
+);
+
+const CircleNumber3Icon = (props: CircleIconProps) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm1 5h-2l-.15.005a2 2 0 00-1.85 1.995 1 1 0 001.974.23l.02-.113.006-.117h2v2h-2l-.133.007c-1.111.12-1.154 1.73-.128 1.965l.128.021.133.007h2v2h-2l-.007-.117a1 1 0 00-1.993.117 2 2 0 001.85 1.995l.15.005h2l.15-.005a2 2 0 001.844-1.838l.006-.157v-2l-.005-.15a1.988 1.988 0 00-.17-.667l-.075-.152-.019-.032.02-.03a2.01 2.01 0 00.242-.795l.007-.174v-2l-.005-.15a2 2 0 00-1.838-1.844l-.157-.006z" />
+  </svg>
+);
 
 const features = [
   {
     name: 'Choose Your Intelligence',
     description: 'Explore a library of leading LLMs and agentic functions. Pick the ones that fit your use case, from general assistants to specialized reasoning models.',
-    icon: TbCircleNumber1Filled,
+    icon: CircleNumber1Icon,
   },
   {
     name: 'Add Your Knowledge',
     description:
       'Connect your data or knowledge base to enable personalized, context-aware results while keeping your information private.',
-    icon: TbCircleNumber2Filled,
+    icon: CircleNumber2Icon,
   },
   {
     name: 'Define Your Network',
     description:
       'Set up and manage your nodes with ease. Scale compute and storage as you grow, while staying fully sovereign and decentralized.',
-    icon: TbCircleNumber3Filled,
+    icon: CircleNumber3Icon,
   },
-]
+];
 
 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 }}
+          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 0.1 }}
+          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 +65,31 @@ export function DeploySection() {
         </motion.div>
         <motion.ul
           initial={{ opacity: 0 }}
-          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+          whileInView={{ opacity: 1 }}
-          transition={{ duration: 0.5, delay: 0.2, staggerChildren: 0.2 }}
+          viewport={{ once: true, amount: 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"
+          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 }}
+              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
+              viewport={{ once: true, amount: 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"
+              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" />
+              <feature.icon className="mb-4 h-8 w-8 text-white" />
-              <CT as="span" className="font-semibold text-left" color="light">{feature.name}</CT>
+              <CT as="span" className="text-left font-semibold" color="light">
-              <CP className="mt-2 text-sm text-left" color="light">{feature.description}</CP>
+                {feature.name}
+              </CT>
+              <CP className="mt-2 text-left text-sm" color="light">
+                {feature.description}
+              </CP>
             </motion.li>
           ))}
         </motion.ul>
       </div>
     </section>
-  )
+  );
 }

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="mx-auto max-w-3xl text-center">
-          <div className="max-w-3xl mx-auto">
+          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-500">
-            <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-500">
+            Ready Today
-              Ready Today
+          </p>
-            </p>
+          <h2 className="mt-6 text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
-            <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.
-              Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
+          </h2>
-            </h2>
+          <p className="mt-6 text-lg text-gray-600">
-            <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.
-              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>
-            </p>
+          <div className="mt-10 flex justify-center">
-            <div className="mt-10 flex justify-center">
+            <Button
-              <Button
+              to="https://myceliumcloud.tf"
-                to="https://myceliumcloud.tf"
+              as="a"
-                as="a"
+              variant="solid"
-                variant="solid"
+              color="cyan"
-                color="cyan"
+              target="_blank"
-                target="_blank"
+              rel="noreferrer"
-                rel="noreferrer"
+            >
-              >
+              Start Deployment
-                Start Deploying
+            </Button>
-              </Button>
-            </div>
           </div>
         </div>
       </Container>

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">
+              <Button to="https://myceliumcloud.tf" variant="solid" color="cyan">
-                Start Deploying
+                Start Deployment
-              </Button>
-              <Button
-                to="https://manual.grid.tf"
-                as="a"
-                variant="outline"
-                color="gray"
-                target="_blank"
-                rel="noreferrer"
-              >
-                View Documentation
               </Button>
+              
             </div>
           </div>
           <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">

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>

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}

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

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

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

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">
+            <Button to="/cloud" variant="solid" color="white">
-              Start Building
+              Start Deployment
+            </Button>
+            <Button to="/download" variant="solid" color="cyan">
+              Get Mycelium Connector
             </Button>
             <Button
               to="https://threefold.info/mycelium_network/docs/"

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

src/pages/home/HomeAurora.tsx

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

src/pages/home/HomeBenefits.tsx

@@ -1,7 +1,6 @@
-import React from "react";
 import { cn } from "@/lib/utils";
 import createGlobe from "cobe";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, type ReactNode } from "react";
 import { motion } from "motion/react";
 import { IconBrandYoutubeFilled } from "@tabler/icons-react";
 import { LockClosedIcon, CogIcon, BoltIcon, CurrencyDollarIcon } from '@heroicons/react/24/solid'
@@ -9,36 +8,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" />,
+      icon: <LockClosedIcon className="h-6 w-6 text-cyan-500" />,
-      className:
-        "col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800",
     },
     {
       title: "Autonomous",
       description:
         "The cloud that runs itself. From deployment to scaling, Mycelium Cloud automates everything — so your systems stay fast, resilient, and adaptive.",
-            icon: <CogIcon className="h-6 w-6 text-cyan-500" />,
+      icon: <CogIcon className="h-6 w-6 text-cyan-500" />,
-      className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
     },
     {
       title: "Energy Efficient",
       description:
         "Built on distributed nodes designed for minimal energy use, Mycelium Cloud redefines sustainability without compromising performance.",
-            icon: <BoltIcon className="h-6 w-6 text-cyan-500" />,
+      icon: <BoltIcon className="h-6 w-6 text-cyan-500" />,
-      className:
-        "col-span-1 lg:col-span-3 lg:border-r  dark:border-neutral-800",
     },
     {
       title: "Cost Efficient",
       description:
         "No middlemen. No inflated bills. Just pure compute power at a fraction of traditional cloud costs — optimized, transparent, and fair.",
-            icon: <CurrencyDollarIcon className="h-6 w-6 text-cyan-500" />,
+      icon: <CurrencyDollarIcon className="h-6 w-6 text-cyan-500" />,
-      className: "col-span-1 lg:col-span-3 border-b lg:border-none",
     },
   ];
   return (
@@ -49,18 +42,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">
+        <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">
-          {features.map((feature) => (
+          <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">
-            <FeatureCard key={feature.title} className={feature.className}>
+            {features.map((feature) => (
-                            <FeatureTitle icon={feature.icon}>{feature.title}</FeatureTitle>
+              <FeatureCard key={feature.title}>
-              <FeatureDescription>{feature.description}</FeatureDescription>
+                <FeatureTitle icon={feature.icon}>{feature.title}</FeatureTitle>
-            </FeatureCard>
+                <FeatureDescription>{feature.description}</FeatureDescription>
-          ))}
+              </FeatureCard>
+            ))}
+          </div>
         </div>
       </div>
     </div>
@@ -71,33 +66,33 @@ const FeatureCard = ({
   children,
   className,
 }: {
-  children?: React.ReactNode;
+  children?: ReactNode;
   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>
   );
 };
 
-const FeatureTitle = ({ children, icon }: { children?: React.ReactNode, icon?: React.ReactNode }) => {
+const FeatureTitle = ({ children, icon }: { children?: ReactNode; icon?: ReactNode }) => {
   return (
     <div className="flex items-center gap-2">
       {icon}
-            <p className="max-w-5xl text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug">
+      <p className="max-w-5xl text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug">
         {children}
       </p>
     </div>
   );
 };
 
-const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
+const FeatureDescription = ({ children }: { children?: ReactNode }) => {
   return (
     <p
       className={cn(
-        "text-sm md:text-base  max-w-4xl text-left mx-auto",
+        "text-sm md:text-base max-w-4xl",
-        "text-neutral-500 text-center font-normal dark:text-neutral-300",
+        "text-neutral-500 font-normal dark:text-neutral-300",
         "text-left max-w-sm mx-0 md:text-sm my-2"
       )}
     >

src/pages/home/HomeGlobe.tsx

@@ -2,7 +2,7 @@
 
 import { Globe } from "@/components/ui/Globe"
 import { motion } from "framer-motion"
-import { H2, P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
+import { P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
 import { CountUpNumber } from '@/components/CountUpNumber'
 
 export function WorldMap() {
@@ -27,14 +27,15 @@ export function WorldMap() {
         {/* Title + Subtitle */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
+          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
+          viewport={{ once: true, amount: 0.3 }}
+          transition={{ duration: 0.5, ease: "easeOut" }}
           className="max-w-xl"
         >
-          <Eyebrow color="accent">Network</Eyebrow>
+          <Eyebrow color="accent">Decentralized Network</Eyebrow>
-          <SectionHeader color="light">Mycelium Network is Live.</SectionHeader>
+          <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 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 }}
+            whileInView={{ opacity: 1, scale: 1 }}
-            transition={{ duration: 0.5, delay: 0.2 }}
+            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 }}
+              whileInView={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.4 }}
+              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 }}
+              whileInView={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.5 }}
+              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 }}
+              whileInView={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.6 }}
+              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 }}
+              whileInView={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5, delay: 0.7 }}
+              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>

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

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

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

src/pages/home/HomePage.tsx

@@ -1,9 +1,6 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { HomeAurora } from './HomeAurora'
-import { HomeFeatures } from './HomeFeatures'
 import { HomeFeaturesDark } from './HomeFeaturesDark'
-import { HomeCloud } from './HomeCloud'
-import { HomeAgent } from './HomeAgent'
 import { StackSectionLight } from './StackSection'
 import { WorldMap } from './HomeGlobe'
 import { HomeBenefits } from './HomeBenefits'

src/pages/home/StackSection.tsx

@@ -2,7 +2,7 @@
 
 import { motion } from "framer-motion";
 import { StackedCubesLight } from "@/components/ui/StackedCubesLight";
-import { H2, P, SectionHeader, Eyebrow } from "@/components/Texts";
+import { P, SectionHeader, Eyebrow } from "@/components/Texts";
 import { FadeIn } from "@/components/ui/FadeIn";
 import { DottedGlowBackground } from '@/components/ui/dotted-glow-background';
 
@@ -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
+              Project Mycelium unifies compute, storage, networking, and AI into a resilient
-              unbreakable networks, complete data sovereignty, ultra-secure
+              ecosystem that preserves data sovereignty, powers seamless collaboration,
-              agent-human communication, and unhackable data storage systems.
+              and keeps every layer of your infrastructure secure end to end on decentralized infrastructure.
             </P>
           </FadeIn>
         </div>

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

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

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">
+          <div className="relative mt-0 lg:mt-10 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" />
+            <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-[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="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}
               />

src/pages/network/PrimaryFeatures.tsx

@@ -6,7 +6,6 @@ import clsx from 'clsx'
 import {
   type MotionProps,
   type Variant,
-  type Variants,
   AnimatePresence,
   motion,
 } from 'framer-motion'
@@ -137,12 +136,6 @@ function DeviceTouchIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   )
 }
 
-const headerAnimation: Variants = {
-  initial: { opacity: 0, transition: { duration: 0.3 } },
-  animate: { opacity: 1, transition: { duration: 0.3, delay: 0.3 } },
-  exit: { opacity: 0, transition: { duration: 0.3 } },
-}
-
 const maxZIndex = 2147483647
 
 const bodyVariantBackwards: Variant = {

src/pages/network/animations/ContentDistribution.tsx

@@ -7,7 +7,6 @@ type Props = {
 
 const ACCENT = '#00b8db';
 const STROKE = '#111827';
-const GRAY = '#9CA3AF';
 const GRAY_LT = '#E5E7EB';
 
 const IconSquare = () => (

vite.config.ts

@@ -10,4 +10,22 @@ export default defineConfig({
       '@': path.resolve(__dirname, './src'),
     },
   },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          react: ['react', 'react-dom', 'react-router', 'react-router-dom'],
+          framer: ['framer-motion'],
+          motion: ['motion/react'],
+          antd: [
+            'antd',
+            'rc-field-form',
+            'rc-motion',
+            '@ant-design/cssinjs',
+            '@rc-component/async-validator',
+          ],
+        },
+      },
+    },
+  },
 })