Initial commit

2025-10-22 17:30:00 +03:00
commit 205c8fd0d9
134 changed files with 8080 additions and 0 deletions
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,23 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { Layout } from './components/Layout'
+import HomePage from './pages/home/HomePage'
+import CloudPage from './pages/cloud/CloudPage'
+import NetworkPage from './pages/network/NetworkPage'
+import AgentsPage from './pages/agents/AgentsPage'
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<HomePage />} />
+          <Route path="cloud" element={<CloudPage />} />
+          <Route path="network" element={<NetworkPage />} />
+          <Route path="agents" element={<AgentsPage />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  )
+}
+
+export default App
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/components/AnimatedSection.tsx
+++ b/src/components/AnimatedSection.tsx
@@ -0,0 +1,21 @@
+import { useRef } from 'react'
+import { motion, useInView } from 'framer-motion'
+
+export function AnimatedSection({ children }: { children: React.ReactNode }) {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, margin: '-20% 0px -20% 0px' })
+
+  return (
+    <motion.section
+      ref={ref}
+      initial={{ opacity: 0, y: 50 }}
+      animate={{
+        opacity: isInView ? 1 : 0,
+        y: isInView ? 0 : 50,
+      }}
+      transition={{ duration: 0.5 }}
+    >
+      {children}
+    </motion.section>
+  )
+}
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -0,0 +1,68 @@
+import { Link } from 'react-router-dom'
+import clsx from 'clsx'
+
+const baseStyles = {
+  solid:
+    'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold transition-colors',
+  outline:
+    'inline-flex justify-center rounded-lg border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-sm transition-colors',
+}
+
+const variantStyles = {
+  solid: {
+    cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
+    white:
+      'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
+    gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
+    green: 'bg-green-500 text-white hover:bg-green-600',
+  },
+  outline: {
+    gray: 'border-gray-300 text-gray-700 hover:border-cyan-500 active:border-cyan-500',
+    white: 'border-gray-300 text-white hover:border-cyan-500 active:border-cyan-500',
+  },
+}
+
+type ButtonProps = (
+  | {
+      variant?: 'solid'
+      color?: keyof typeof variantStyles.solid
+    }
+  | {
+      variant: 'outline'
+      color?: keyof typeof variantStyles.outline
+    }
+) &
+  (
+    | (Omit<React.ComponentPropsWithoutRef<typeof Link>, 'color'> & { to: string; as?: 'link' })
+    | (Omit<React.ComponentPropsWithoutRef<'a'>, 'color'> & { to: string; as: 'a' })
+    | (Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> & {
+        to?: undefined
+        as?: undefined
+      })
+  )
+
+export function Button({ className, as, ...props }: ButtonProps) {
+  props.variant ??= 'solid'
+  props.color ??= 'gray'
+
+  className = clsx(
+    baseStyles[props.variant],
+    props.variant === 'outline'
+      ? variantStyles.outline[props.color]
+      : props.variant === 'solid'
+        ? variantStyles.solid[props.color]
+        : undefined,
+    className,
+  )
+
+  if (typeof props.to === 'undefined') {
+    return <button className={className} {...props} />
+  }
+  
+  if (as === 'a') {
+    const { to, variant, color, ...rest } = props as any
+    return <a className={className} href={to} {...rest} />
+  }
+  
+  return <Link className={className} {...props} />
+}
--- a/src/components/CircleBackground.tsx
+++ b/src/components/CircleBackground.tsx
@@ -0,0 +1,45 @@
+import { useId } from 'react'
+
+export function CircleBackground({
+  color,
+  ...props
+}: React.ComponentPropsWithoutRef<'svg'> & {
+  color: string
+}) {
+  let id = useId()
+
+  return (
+    <svg
+      viewBox="0 0 558 558"
+      width="558"
+      height="558"
+      fill="none"
+      aria-hidden="true"
+      {...props}
+    >
+      <defs>
+        <linearGradient
+          id={id}
+          x1="79"
+          y1="16"
+          x2="105"
+          y2="237"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={color} />
+          <stop offset="1" stopColor={color} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <path
+        opacity=".2"
+        d="M1 279C1 125.465 125.465 1 279 1s278 124.465 278 278-124.465 278-278 278S1 432.535 1 279Z"
+        stroke={color}
+      />
+      <path
+        d="M1 279C1 125.465 125.465 1 279 1"
+        stroke={`url(#${id})`}
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -0,0 +1,13 @@
+import clsx from 'clsx'
+
+export function Container({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'>) {
+  return (
+    <div
+      className={clsx('mx-auto max-w-7xl px-6 lg:px-8', className)}
+      {...props}
+    />
+  )
+}
--- a/src/components/CountUpNumber.tsx
+++ b/src/components/CountUpNumber.tsx
@@ -0,0 +1,17 @@
+import CountUp from 'react-countup'
+
+interface CountUpNumberProps {
+  end: number
+  className?: string
+}
+
+export function CountUpNumber({ end, className }: CountUpNumberProps) {
+  return (
+    <CountUp
+      end={end}
+      duration={2.5}
+      separator=","
+      className={className}
+    />
+  )
+}
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -0,0 +1,61 @@
+import { Link } from 'react-router-dom'
+import { Container } from './Container'
+
+export function Footer() {
+  return (
+    <footer className="border-t border-gray-200">
+      <Container>
+        <div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-8">
+          <div>
+            <div className="flex items-center text-gray-900">
+              <img src="/src/images/logomark.svg" alt="Mycelium Logomark" className="h-20 w-20 flex-none" />
+              <div className="ml-4">
+                <p className="text-base font-semibold">Mycelium</p>
+                <p className="mt-1 text-sm">Unleash the Power of Decentralized Networks</p>
+              </div>
+            </div>
+            <nav className="mt-10 flex gap-8">
+              <Link to="/" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
+                Home
+              </Link>
+              <Link to="/cloud" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
+                Cloud
+              </Link>
+              <Link to="/network" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
+                Network
+              </Link>
+              <Link to="/agents" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
+                Agents
+              </Link>
+            </nav>
+          </div>
+          <div className="group relative -mx-4 flex items-center self-stretch p-4 transition-colors hover:bg-gray-100 sm:self-auto sm:rounded-2xl lg:mx-0 lg:self-auto lg:p-6">
+            <div className="relative flex h-16 w-16 flex-none items-center justify-center">
+              <img src="/src/images/github.svg" alt="GitHub" className="h-16 w-16" />
+            </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">
+                  <span className="absolute inset-0 sm:rounded-2xl" />
+                  Download Mycelium
+                </a>
+              </p>
+              <p className="mt-1 text-sm text-gray-700">
+                Head to the GitHub to access the latest Mycelium builds for your devices.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col items-center border-t border-gray-200 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
+          <p className="mt-6 text-sm text-gray-500 md:mt-0">
+            &copy; Copyright{' '}
+            <a href="https://www.threefold.io" target="_blank" rel="noopener noreferrer" className="hover:text-cyan-500 transition-colors">
+              ThreeFold
+            </a>{' '}
+            {new Date().getFullYear()}. All rights reserved.
+          </p>
+        </div>
+      </Container>
+    </footer>
+  )
+}
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -0,0 +1,61 @@
+import { Link } from 'react-router-dom'
+import { Container } from './Container'
+import { Button } from './Button'
+
+export function Header() {
+  return (
+    <header>
+      <nav>
+        <Container className="relative z-50 flex justify-between py-8">
+          <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" />
+            </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"
+              >
+                Cloud
+              </Link>
+              <Link
+                to="/network"
+                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
+              >
+                Network
+              </Link>
+              <Link
+                to="/agents"
+                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
+              >
+                Agents
+              </Link>
+            </div>
+          </div>
+          <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/"
+                variant="outline"
+                as="a"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Docs
+              </Button>
+              <Button to="/download" variant="solid" color="cyan">
+                Get Mycelium
+              </Button>
+            </div>
+          </div>
+        </Container>
+      </nav>
+    </header>
+  )
+}
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom'
+import { Header } from './Header'
+import { Footer } from './Footer'
+
+export function Layout() {
+  return (
+    <div className="bg-gray-50 antialiased" style={{ fontFamily: 'var(--font-inter)' }}>
+      <Header />
+      <main>
+        <Outlet />
+      </main>
+      <Footer />
+    </div>
+  )
+}
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -0,0 +1,64 @@
+export function Logomark(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="81"
+      height="50"
+      version="1"
+      viewBox="0 0 60.75 37.5"
+      {...props}
+    >
+      <defs>
+        <filter id="a" width="100%" height="100%" x="0%" y="0%">
+          <feColorMatrix
+            colorInterpolationFilters="sRGB"
+            values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+          />
+        </filter>
+        <filter id="b" width="100%" height="100%" x="0%" y="0%">
+          <feColorMatrix
+            colorInterpolationFilters="sRGB"
+            values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.2126 0.7152 0.0722 0 0"
+          />
+        </filter>
+        <clipPath id="c">
+          <path d="M.277.309H60V37H.277Zm0 0" />
+        </clipPath>
+        <mask id="d">
+          <g filter="url(#a)">
+            <g filter="url(#b)" transform="matrix(.08765 0 0 .08811 .276 .26)">
+              <image
+                xlinkHref="/src/images/logomark.svg"
+                width="684"
+                height="420"
+              />
+            </g>
+          </g>
+        </mask>
+      </defs>
+      <g clipPath="url(#c)" mask="url(#d)">
+        <image
+          xlinkHref="/src/images/logomark.svg"
+          width="684"
+          height="420"
+          transform="matrix(.08765 0 0 .08811 .276 .26)"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="160"
+      height="40"
+      viewBox="0 0 120 30"
+      {...props}
+    >
+      <image xlinkHref="/src/images/mycelium.svg" width="120" height="30" />
+    </svg>
+  )
+}
--- a/src/components/ui/Globe.tsx
+++ b/src/components/ui/Globe.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useRef } from 'react'
+import createGlobe from 'cobe'
+
+export function Globe({ className }: { className?: string }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    let phi = 0
+
+    if (!canvasRef.current) return
+
+    const globe = createGlobe(canvasRef.current, {
+      devicePixelRatio: 2,
+      width: 600 * 2,
+      height: 600 * 2,
+      phi: 0,
+      theta: 0,
+      dark: 0,
+      diffuse: 1.2,
+      mapSamples: 16000,
+      mapBrightness: 6,
+      baseColor: [0.3, 0.3, 0.3],
+      markerColor: [0.1, 0.8, 1],
+      glowColor: [1, 1, 1],
+      markers: [
+        { location: [37.7595, -122.4367], size: 0.03 },
+        { location: [40.7128, -74.006], size: 0.1 },
+      ],
+      onRender: (state) => {
+        state.phi = phi
+        phi += 0.01
+      },
+    })
+
+    return () => {
+      globe.destroy()
+    }
+  }, [])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className={className}
+      style={{ width: '100%', height: '100%', maxWidth: '100%', aspectRatio: 1 }}
+    />
+  )
+}
--- a/src/images/android.svg
+++ b/src/images/android.svg
@@ -0,0 +1 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80"><defs><clipPath clipPathUnits="userSpaceOnUse" id="cp1"><path d="m2.09 33.33h8.58v24h-8.58z"/></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="cp2"><path d="m13.33 33.33h32v38.19h-32z"/></clipPath></defs><style>.a{fill:#00b8db}</style><g clip-path="url(#cp1)"><path class="a" d="m5.9 33.7c-2.1 0-3.8 1.7-3.8 3.9v15.2c0 2.2 1.7 3.9 3.8 3.9 2.1 0 3.9-1.7 3.9-3.9v-15.2c0-2.2-1.8-3.9-3.9-3.9z"/></g><path class="a" d="m52 33.7c-2.1 0-3.8 1.7-3.8 3.9v15.2c0 2.2 1.7 3.9 3.8 3.9 2.1 0 3.9-1.7 3.9-3.9v-15.2c0-2.2-1.8-3.9-3.9-3.9z"/><g clip-path="url(#cp2)"><path class="a" d="m13.6 56.9c0 2.1 1.7 3.8 3.8 3.8v7.4c0 2.2 1.8 3.9 3.9 3.9 2.1 0 3.8-1.7 3.8-3.9v-7.4h7.7v7.4c0 2.2 1.7 3.9 3.9 3.9 2.1 0 3.8-1.7 3.8-3.9v-7.4c2.1 0 3.8-1.7 3.8-3.8v-22.9h-30.7z"/></g><path class="a" d="m38.6 18l3.4-4.1c0.7-0.8 0.5-2-0.3-2.7-0.8-0.6-2-0.5-2.7 0.3l-3.7 4.5c-1.9-0.9-4.1-1.4-6.3-1.4-2.3 0-4.5 0.5-6.4 1.4l-3.6-4.5c-0.7-0.8-1.9-1-2.8-0.3-0.8 0.7-0.9 1.9-0.2 2.7l3.3 4.2c-3.4 2.8-5.7 7-5.7 11.8h30.7c0-4.8-2.2-9.1-5.7-11.9zm-13.5 6.2c-1 0-1.9-0.9-1.9-1.9 0-1.1 0.9-2 1.9-2 1.1 0 2 0.9 2 2 0 1-0.9 1.9-2 1.9zm7.7 0c-1 0-1.9-0.9-1.9-1.9 0-1.1 0.9-2 1.9-2 1.1 0 1.9 0.9 1.9 2 0 1-0.8 1.9-1.9 1.9z"/></svg>
--- a/src/images/apple.svg
+++ b/src/images/apple.svg
@@ -0,0 +1 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80"><defs><clipPath clipPathUnits="userSpaceOnUse" id="cp1"><path d="m1.33 25.33h50.59v46.27h-50.59z"/></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="cp2"><path d="m28 7.6h13.33v13.73h-13.33z"/></clipPath></defs><style>.a{fill:#00b8db}</style><g clip-path="url(#cp1)"><path fill-rule="evenodd" class="a" d="m12.8 27c-4.8 1.5-8.5 5.4-10 10.3-1.1 3.8-1.9 10.2 1.3 18.8 0 0.1 3.1 8.6 10.8 13.2 3.7 2.2 8.5 2.1 12-0.3l0.1-0.1q0.2-0.1 0.4-0.3 0.3-0.2 0.7-0.2 0.3 0 0.6 0.2 0.3 0.2 0.5 0.4h0.1c3.5 2.4 8.2 2.5 11.9 0.2 6.9-4.1 10.1-11.2 10.7-12.8q-0.2 0-0.4 0c-3.7 0-7.1-1.4-9.7-3.9-2.6-2.6-4-6-4-9.6 0-6.4 4.5-11.8 10.6-13.2-1.5-1.2-3.2-2.2-5-2.8-8.1-2.6-13.9 3-14.6 3.6v0.1c-0.4 0.4-1 0.4-1.4 0l-0.1-0.1c-0.6-0.6-6.4-6.2-14.5-3.5z"/></g><g clip-path="url(#cp2)"><path fill-rule="evenodd" class="a" d="m31.3 10.9c-2.2 2.2-3.3 5.4-3.1 9.1 3.8 0.2 7.1-0.9 9.2-3.1 2.2-2.1 3.3-5.3 3.1-9-3.8-0.2-7 0.8-9.2 3z"/></g></svg>
--- a/src/images/connector.png
+++ b/src/images/connector.png
--- a/src/images/github.svg
+++ b/src/images/github.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-label="GitHub" viewBox="0 0 512 512" id="github">
+  <rect width="512" height="512" fill="#1B1817" rx="15%"></rect>
+  <path fill="#fff" d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-50c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"></path>
+</svg>
--- a/src/images/linux.png
+++ b/src/images/linux.png
--- a/src/images/linux.svg
+++ b/src/images/linux.svg
@@ -0,0 +1 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 266 312" width="266" height="312"><style>.a{fill:#00b8db}</style><path class="a" d="m132.6 291.6q-19.5 0-30 5.3v-0.3c-5 6-10.6 9.1-18.4 9.1-4.9 0-12.6-1.9-23-5.7-10.5-3.6-19.8-6.4-27.9-8.2-0.8-0.2-2.6-0.6-5.5-1-2.8-0.5-5.4-0.9-7.7-1.4-2.1-0.5-4.5-1.1-7.1-2.1q-3.8-1.1-6-3-2.1-1.9-2.1-4.3 0-2.4 1-5.1c0.7-1.1 1.4-2.2 2.1-3.2 0.7-1.1 1.3-2.1 1.7-3.1 0.6-0.9 1-1.8 1.4-2.8 0.4-0.9 0.8-1.8 1-2.9 0.2-1 0.4-2 0.4-3 0-1-0.4-4-1.2-9.3q-1.2-7.8-1.2-9.9c0-4.4 1-7.9 3.2-10.4 2.2-2.5 4.3-3.8 6.5-3.8h11.5c0.9 0 2.3-0.5 4.4-1.7 0.7-1.6 1.3-2.9 1.7-4.1 0.5-1.2 0.7-2.1 0.9-2.5 0.2-0.6 0.4-1.2 0.6-1.7 0.4-0.7 0.9-1.5 1.6-2.3q-1.2-1.5-1.2-3.9c0-1.1 0-2.1 0.2-2.7 0-3.6 1.7-8.7 5.3-15.4l3.5-6.3c2.9-5.4 5.1-9.4 6.7-13.4 1.7-4 3.5-10 5.5-18q2.4-10.5 11.4-21l7.5-9c5.2-6 8.6-11 10.5-15 1.9-4 2.9-9 2.9-13 0-2-0.5-8-1.6-18-1-10-1.5-20-1.5-29 0-7 0.6-12 1.9-17 1.3-5 3.6-10 7-14 3-4 7-8 13-10q9-3 21-3c3 0 6 0 9 1q4.5 0 12 3c4 2 8 4 11 7 4 3 7 8 10 13 2 6 4 12 5 20 1 5 1 10 2 17 0 6 1 10 1 13 1 3 1 7 2 12 1 4 2 8 4 11 2 4 4 8 7 12 3 5 7 10 11 16 9 10 16 21 20 32 5 10 8 23 8 36.9q0 10.3-3 20.1c2 0 3 0.8 4 2.2 1 1.4 2 4.4 3 9.1l1 7.4c1 2.2 2 4.3 5 6.1 2 1.8 4 3.3 7 4.5 2 1 5 2.4 7 4.2q3 3 3 6.3c0 3.4-1 5.9-3 7.7-2 2-4 3.4-7 4.3-2 1-6 3-12 5.8q-7.5 4.4-15 10.8l-10 8.5c-4 3.9-8 6.7-11 8.4-3 1.8-7 2.7-11 2.7l-7-0.8c-8-2.1-13-6.1-16-12.2-16-1.9-29-2.9-37-2.9m-27.9-212.3c-4-2-5-5-5-10 0-3 0-5 2-7 1-2 3-3 5-3 2 0 3 1 5 3 1 3 2 6 2 9v2h1v-1c1 0 1-2 1-6 0-3 0-6-2-9-2-3-4-5-8-5-3 0-6 2-7 5-2 4-2.4 7-2.4 12 0 4 1.4 8 5.4 12 1-1 2-1 3-2zm33-4c-1-1-1-3-1-5 0-4 0-6 2-9q3-3 6-3c3 0 5 2 7 4 1 3 2 5 2 8q0 7.5-6 9c0 0 1 1 2 1 2 0 3 1 5 2 1-6 2-10 2-15 0-6-1-10-3-13-3-3-6-4-10-4q-4.5 0-9 3c-2 3-3 5-3 8 0 5 1 9 3 13 1 0 2 1 3 1zm12 16c-13 9-23 13-31 13-7 0-14-3-20-8 1 2 2 4 3 5l6 6c4 4 9 6 14 6 7 0 15-4 25-11l9-6c2-2 4-4 4-7 0-1 0-2-1-2-1-2-6-5-16-8-9-4-16-6-20-6q-4.5 0-15 6c-6 4-10 8-10 12 0 0 1 1 2 3 6 5 12 8 18 8 8 0 18-4 31-14v2c1 0 1 1 1 1zm-39-22c0-5-2-8-5-8 0 0 0 1-1 1v2h3c0 2 1 3 1 5zm119 151c1 0 1-0.4 1-1.3 0-2.2-1-4.8-4-7.7-3-3-8-4.9-14-5.7-1-0.1-2-0.1-2-0.1-1-0.2-1-0.2-2-0.2-1-0.1-3-0.3-4-0.5 3-9.3 4-17.5 4-24.7 0-10-2-17-6-23-4-6-8-9-13-10-1 1-1 1-1 2 5 2 10 6 13 12 3 7 4 13 4 20 0 5.6-1 13.9-5 24.5-4 1.6-8 5.3-11 11.1 0 0.9 0 1.4 1 1.4 0 0 1-0.9 2-2.6 2-1.7 3-3.4 5-5.1 3-1.7 5-2.6 8-2.6 5 0 10 0.7 13 2.1 4 1.3 6 2.7 7 4.3q1.5 2.2 3 4.2c0 1.3 1 1.9 1 1.9zm-84-156c2 0 3 2 4 5h2c-1-1-1-2-1-3 0-1 0-2-1-3-1-1-2-2-3-2 0 0-1 1-2 1 0 1 1 1 1 2zm-17 15c0 1-1 1-1 1h-1c-1 0-1-1-2-2 0 0-1-1-1-2 0-1 0-1 1-1l2 1c1 1 2 2 2 3zm44 214c4 7.5 11 11.3 19 11.3q3 0 6-0.9c2-0.4 4-1.1 5-1.9 1-0.7 2-1.4 3-2.2 2-0.7 2-1.2 3-1.7l17-14.7c4-3.2 8-6 13-8.4 4-2.4 8-4 10-4.9 3-0.8 5-2 7-3.6 1-1.5 2-3.4 2-5.8 0-2.9-2-5.1-4-6.7-2-1.6-4-2.7-6-3.4-2-0.7-4-2.3-7-5-2-2.6-4-6.2-5-10.9l-1-5.8c-1-2.7-1-4.7-2-5.8 0-0.3 0-0.4-1-0.4-1 0-3 0.9-4 2.6-2 1.7-4 3.6-6 5.6-1 2-4 3.8-6 5.5-3 1.7-6 2.6-8 2.6-8 0-12-2.2-15-6.5-2-3.2-3-6.9-4-11.1-2-1.7-3-2.6-5-2.6-5 0-7 5.2-7 15.7v31.1c0 0.9-1 2.9-1 6-1 3.1-1 6.6-1 10.6l-2 11.1v0.1m-145-5.2q13.9 2 32.1 8.7c12.1 4.4 19.5 6.7 22.2 6.7 7 0 12.8-3.1 17.6-9.1 1-2 1-4.2 1-6.9q0-14.1-17.1-35.9l-6.8-9.1c-1.4-1.9-3.1-4.8-5.3-8.7-2.1-3.9-4-6.9-5.5-9-1.3-2.3-3.4-4.6-6.1-6.9-2.6-2.3-5.6-3.8-8.9-4.6-4.2 0.8-7.1 2.2-8.5 4.1-1.4 1.9-2.2 4-2.4 6.2-0.3 2.1-0.9 3.5-1.9 4.2-1 0.6-2.7 1.1-5 1.6-0.5 0-1.4 0-2.7 0.1h-2.7c-5.3 0-8.9 0.6-10.8 1.6-2.5 2.9-3.8 6.2-3.8 9.7q0 2.4 1.2 8.1c0.8 3.7 1.2 6.7 1.2 8.8 0 4.1-1.2 8.2-3.7 12.3-2.5 4.3-3.8 7.5-3.8 9.8 1 3.9 7.6 6.6 19.7 8.2m33.3-90.9c0-6.9 1.8-14.5 5.5-23.5 3.6-9 7.2-15 10.7-19-0.2-1-0.7-1-1.5-1l-1-1c-2.9 3-6.4 10-10.6 20-4.2 9-6.4 17.3-6.4 23.4 0 4.5 1.1 8.4 3.1 11.8 2.2 3.3 7.5 8.1 15.9 14.2l10.6 6.9c11.3 9.8 17.3 16.6 17.3 20.6 0 2.1-1 4.2-4 6.5-2 2.4-4.7 3.6-7 3.6-0.2 0-0.3 0.2-0.3 0.7 0 0.1 1 2.1 3.1 6 4.2 5.7 13.2 8.5 25.2 8.5 22 0 39-9 52-27 0-5 0-8.1-1-9.4v-3.7c0-6.5 1-11.4 3-14.6 2-3.2 4-4.7 7-4.7 2 0 4 0.7 6 2.2 1-7.7 1-14.4 1-20.4 0-9.1 0-16.6-2-23.6-1-6-3-11-5-15l-6-9c-2-3-3-6-5-9-1-4-2-7-2-12-3-5-5-10-8-15-2-5-4-10-6-14l-9 7c-10 7-18 10-25 10-6 0-11-1-14-5l-6-5c0 3-1 7-3 11l-6.3 12c-2.8 7-4.3 11-4.6 14-0.4 2-0.7 4-0.9 4l-7.5 15c-8.1 15-12.2 28.9-12.2 40.4 0 2.3 0.2 4.7 0.6 7.1-4.5-3.1-6.7-7.4-6.7-13zm54.7-116.7c-1 0-1 0-1-1 0-1 0-2 1-3 2 0 3-1 3-1 1 0 1 1 1 1 0 1-1 2-3 4z"/></svg>
--- a/src/images/logomark.svg
+++ b/src/images/logomark.svg
--- a/src/images/logos/bbc.svg
+++ b/src/images/logos/bbc.svg
@@ -0,0 +1,5 @@
+<svg width="83" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M0 15.531v11.531h24.771V4H0v11.531Zm29.042 0v11.531h24.771V4H29.041v11.531Zm29.041 0v11.531h24.771V4H58.083v11.531ZM14.807 7.817c.979.444 1.988 1.197 2.242 1.67.254.475.461 1.43.461 2.125 0 .694-.364 1.713-.81 2.263l-.81 1 1.548 1.34c1.307 1.13 1.548 1.608 1.548 3.079 0 1.25-.29 2.049-1.026 2.834-.565.6-1.714 1.283-2.553 1.516-.84.233-3.208.425-5.264.426l-3.737.003V6.99l3.31.009c2.32.006 3.843.251 5.09.818Zm28.763-.134c1.045.418 1.982 1.173 2.358 1.9.343.665.624 1.677.624 2.25 0 .572-.365 1.492-.81 2.042-.81 1-.81 1 .68 2.29 1.18 1.02 1.5 1.621 1.535 2.888.028 1-.281 2.041-.827 2.776-.48.647-1.526 1.406-2.326 1.686s-3.233.52-5.406.534l-3.95.024V6.99h3.194c1.952 0 3.87.27 4.928.693Zm32.237-.116c1.566.47 1.72.65 1.844 2.148.1 1.222-.007 1.577-.427 1.402-.31-.128-1.59-.551-2.846-.94-1.556-.484-2.896-.618-4.206-.421-1.325.198-2.407.732-3.482 1.717-1.464 1.342-1.56 1.588-1.56 3.997 0 2.26.151 2.725 1.257 3.88.692.721 1.94 1.501 2.776 1.734.836.232 2.096.418 2.8.414.705-.004 2.387-.463 3.738-1.018l2.455-1.01v1.592c0 1.318-.202 1.688-1.174 2.148-.646.306-2.667.65-4.492.765-2.484.156-3.79.027-5.204-.512-1.038-.397-2.562-1.468-3.387-2.38-.824-.913-1.715-2.46-1.978-3.44-.264-.98-.36-2.496-.211-3.37.148-.874.624-2.175 1.06-2.892.436-.717 1.434-1.781 2.217-2.366.783-.584 2.001-1.264 2.706-1.51.704-.246 2.434-.448 3.844-.449 1.409 0 3.33.23 4.27.511ZM9.48 12.007l.13 2.03 1.685-.057c1.182-.039 1.915-.34 2.456-1.008.424-.523.77-1.11.77-1.301 0-.192-.301-.651-.67-1.02-.411-.411-1.415-.672-2.586-.672H9.349l.13 2.029Zm29.042 0 .13 2.03 1.594-.048c.876-.027 1.886-.29 2.242-.587.357-.296.648-.956.648-1.468 0-.511-.23-1.16-.512-1.442-.282-.282-1.35-.513-2.372-.513h-1.86l.13 2.029ZM9.48 19.056l.128 2.242 2.45-.05c1.347-.026 2.74-.29 3.096-.585.356-.296.647-.983.647-1.529 0-.545-.427-1.29-.95-1.655-.57-.4-1.855-.666-3.225-.666H9.351l.13 2.243Zm29.041 0c.123 2.136.189 2.249 1.403 2.387.7.08 1.995-.072 2.878-.337 1.184-.354 1.68-.776 1.887-1.604.217-.864.06-1.305-.683-1.907-.672-.543-1.674-.782-3.29-.782h-2.324l.13 2.243Z"
+    fill="#737373" />
+</svg>
--- a/src/images/logos/cbs.svg
+++ b/src/images/logos/cbs.svg
@@ -0,0 +1,5 @@
+<svg width="101" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M15.072 1C6.675 1 0 7.855 0 16.205c0 8.44 6.676 15.297 15.072 15.297 8.44 0 15.026-6.855 15.026-15.295C30.099 7.857 23.51 1 15.072 1Zm0 6.454c6.855 0 11.876 4.353 13.998 8.753-2.122 4.467-7.143 8.841-13.998 8.841-6.9 0-11.881-4.375-14.002-8.84 2.12-4.4 7.104-8.751 14.002-8.751v-.003Zm0 .692c-4.466 0-8.107 3.614-8.107 8.059a8.092 8.092 0 0 0 8.107 8.106c4.465 0 8.058-3.595 8.058-8.104a8.055 8.055 0 0 0-8.058-8.061ZM44.506 2.81c-7.883 0-13.376 5.983-13.376 13.261v.088c0 7.368 5.606 13.198 13.177 13.198 4.934 0 7.882-1.765 10.517-4.601L51.23 21.14c-2.01 1.83-3.822 3.016-6.747 3.016-4.398 0-7.457-3.689-7.457-8.086v-.066c0-4.399 3.126-7.995 7.457-7.995 2.568 0 4.578 1.094 6.566 2.904l3.595-4.155c-2.389-2.344-5.291-3.95-10.137-3.95ZM56.951 3.254v25.653h12.213c5.782 0 9.6-2.341 9.6-7.029v-.09c0-3.438-1.829-5.16-4.801-6.297 1.832-1.026 3.372-2.633 3.372-5.536V9.89c0-1.767-.581-3.195-1.765-4.378-1.472-1.45-3.772-2.257-6.698-2.257h-11.92Zm5.49 4.934h5.584c2.39 0 3.705.96 3.705 2.635v.09c0 1.898-1.585 2.702-4.085 2.702l-5.203.002V8.188Zm0 10.119h6.545c2.878 0 4.173 1.073 4.173 2.792v.087c0 1.898-1.517 2.768-3.995 2.768l-6.722.003v-5.65ZM89.833 2.876c-5.224 0-8.974 3.08-8.974 7.745v.069c0 5.093 3.347 6.523 8.506 7.84 4.287 1.115 5.179 1.829 5.179 3.258v.09c0 1.495-1.408 2.412-3.707 2.412-2.948 0-5.36-1.209-7.66-3.106L79.83 25.18c3.081 2.747 7.01 4.088 10.896 4.088v-.003c5.537 0 9.421-2.86 9.421-7.946v-.067c0-4.487-2.946-6.344-8.149-7.705-4.42-1.14-5.538-1.697-5.538-3.372v-.066c0-1.25 1.139-2.255 3.305-2.255 2.166 0 4.4.959 6.678 2.542l2.924-4.26c-2.59-2.077-5.781-3.261-9.533-3.261Z"
+    fill="#737373" />
+</svg>
--- a/src/images/logos/cnn.svg
+++ b/src/images/logos/cnn.svg
@@ -0,0 +1,11 @@
+<svg width="68" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M5.155 15.807c0 5.795 4.715 10.51 10.51 10.51h9.817c.617 0 1.095-.586 1.095-1.09V5.966a2.21 2.21 0 0 1 2.206-2.207c.78 0 1.508.414 1.897 1.08a91573.874 91573.874 0 0 1 12.332 21.263.918.918 0 0 0 1.701-.476V5.968c0-1.217.99-2.207 2.206-2.207.78 0 1.508.414 1.897 1.08.05.084 3.02 5.208 6.164 10.634l6.16 10.63a.918.918 0 0 0 1.7-.476V.138h-3.87V15.31S51.96 3.243 51.734 2.855C50.709 1.105 48.768 0 46.703 0a5.861 5.861 0 0 0-5.86 5.86v9.45s-7.01-12.067-7.238-12.455C32.582 1.105 30.641 0 28.575 0a5.861 5.861 0 0 0-5.86 5.86V21.39c.003.565-.422 1.057-1.04 1.059h-5.968a6.64 6.64 0 0 1 0-13.282h4.998V5.297h-5.04c-5.795 0-10.51 4.715-10.51 10.51Z"
+    fill="#737373" />
+  <path
+    d="M64.13.137v25.49c0 1.217-.989 2.207-2.206 2.207-.78 0-1.508-.414-1.897-1.08-.05-.084-3.02-5.209-6.163-10.634l-6.16-10.63a.918.918 0 0 0-1.7.475v19.662c-.001 1.217-.99 2.207-2.208 2.207-.78 0-1.507-.414-1.897-1.08L35.732 16.12 29.567 5.49a.917.917 0 0 0-1.7.475v19.26c0 1.269-1.115 2.381-2.385 2.381h-9.816c-6.507 0-11.8-5.293-11.8-11.8 0-6.506 5.293-11.8 11.8-11.8h5.04V.136H15.67C7.016.137 0 7.153 0 15.807c0 8.655 7.016 15.67 15.67 15.67h9.911c3.754.002 6.169-2.198 6.164-6.255v-8.938s7.06 12.153 7.238 12.456a5.86 5.86 0 0 0 10.89-3.006v-9.45s7.01 12.068 7.238 12.456c1.023 1.75 2.964 2.855 5.03 2.855A5.86 5.86 0 0 0 68 25.734V.136h-3.87Z"
+    fill="#737373" />
+  <path
+    d="M3.865 15.807c0 6.507 5.294 11.8 11.8 11.8h9.817c1.27 0 2.384-1.112 2.384-2.38V5.966a.917.917 0 0 1 1.7-.475c.05.084 3.159 5.445 6.165 10.629L41.9 26.755a2.202 2.202 0 0 0 1.897 1.08 2.21 2.21 0 0 0 2.207-2.207V5.967a.917.917 0 0 1 1.7-.475l6.16 10.629 6.163 10.634a2.201 2.201 0 0 0 1.897 1.08c1.218 0 2.207-.99 2.207-2.207V.138h-1.29v25.49a.918.918 0 0 1-1.7.475l-6.16-10.629c-3.145-5.426-6.114-10.55-6.164-10.634a2.201 2.201 0 0 0-1.897-1.08 2.21 2.21 0 0 0-2.206 2.207v19.66a.918.918 0 0 1-1.701.476A344293.41 344293.41 0 0 1 30.68 4.84a2.201 2.201 0 0 0-1.897-1.08 2.21 2.21 0 0 0-2.207 2.207v19.26c0 .504-.478 1.09-1.094 1.09h-9.817c-5.795 0-10.51-4.715-10.51-10.51s4.715-10.51 10.51-10.51h5.04v-1.29h-5.04c-6.506 0-11.8 5.294-11.8 11.8Z"
+    fill="#fff" />
+</svg>
--- a/src/images/logos/fast-company.svg
+++ b/src/images/logos/fast-company.svg
@@ -0,0 +1,5 @@
+<svg width="124" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M58.787 11.975c0 2.488-.249 10.2-.249 10.2 0 1.492.498 2.154 1.907 2.154v.663H54.89v-.663c1.409 0 2.155-.662 2.155-2.155l.498-12.602c-.415-.996-.83-1.327-1.907-1.41v-.58h4.228l4.478 11.774 4.561-11.774h3.814v.58c-1.078 0-1.658.498-1.658 1.658l.498 12.189c0 1.824.331 2.322 1.824 2.322v.662h-6.385v-.662c1.244 0 1.825-.415 1.741-2.322l-.331-10.033-3.067 8.457a31.599 31.599 0 0 0-1.162 3.649l-.994.083c-.249-.912-.912-2.57-.912-2.57l-3.484-9.62Zm-5.224 13.1c-.332-.083-.663-.083-.995-.083-.663 0-1.825.332-3.234.332-5.39 0-9.37-3.233-9.37-9.203 0-5.058 3.732-8.955 9.452-8.955 1.327 0 2.82.25 4.064.747.248-.25.33-.415.58-.663h.497c-.083.912-.414 3.897-.414 3.897h-.498c-.332-1.741-1.244-2.902-4.146-2.902-3.482 0-6.633 2.736-6.633 7.794 0 5.721 3.234 8.208 6.799 8.208 2.322 0 3.73-1.326 4.643-2.985l.58.25-1.326 3.564ZM37.89 10.816h-.58c-.083-1.576-.58-2.074-1.824-2.074h-2.405V21.76c0 2.155.415 2.57 1.825 2.57v.663h-6.219v-.663c1.41 0 1.825-.415 1.825-2.654V8.741h-2.405c-1.575 0-1.825.415-2.24 2.073h-.579l.415-3.731.414.083c.166.414.498.414 1.493.414h8.043c1.493 0 1.824 0 2.156-.497h.498l-.416 3.73v.001ZM20.314 25.406c-1.161 0-2.073-.166-2.736-.415-.663-.165-1.161-.414-1.41-.58-.331.331-.58.746-.58.746l-.498-.166.415-3.897.58.084c.332 1.824 1.575 3.15 4.146 3.15 1.99 0 3.316-1.658 3.316-3.482 0-1.492-.58-2.24-2.57-3.732l-1.742-1.16c-1.824-1.16-2.985-2.488-2.985-4.643 0-2.488 2.073-4.147 4.81-4.147 1.574 0 2.57.498 2.902.663l.58-.663.414.084-.415 3.565-.58-.083c0-1.658-.995-2.404-2.653-2.404-1.575 0-2.736.83-2.736 2.404 0 1.41 1.078 2.322 2.321 3.15l1.658 1.079c2.902 2.072 3.566 3.399 3.566 5.389 0 2.901-2.238 5.057-5.803 5.057v.001Zm-9.452-14.593H10.2c0-1.493-.663-2.073-1.99-2.073H4.48v6.55h2.404c1.243 0 1.493-.662 1.658-1.74h.58v4.643h-.58c-.165-1.244-.415-1.741-1.742-1.741H4.48v5.556c0 2.072.497 2.322 1.824 2.322v.662H0v-.662c1.575 0 1.824-.415 1.824-2.322V9.819c0-1.16-.498-1.658-1.824-1.658v-.58h8.623c1.492 0 1.824-.084 2.073-.581h.58l-.415 3.814h.001Zm89.465.995v9.95c0 2.155.496 2.57 1.823 2.57v.663h-9.783v-.663c.747 0 1.409-.25 1.409-.747 0-.332-.083-.912-.249-1.493l-.747-2.404H87.31c-.084.332-1.078 3.067-1.078 3.814 0 .663.747.83 1.243.83v.663h-4.56v-.663c.829 0 1.492-.084 2.072-1.824l4.23-13.516c-.25-.58-.581-.745-1.16-.83v-.58h3.73l4.476 14.18c.416 1.491.83 2.238 1.493 2.569.996-.331 1.245-.663 1.245-2.57V9.82c-.747-.994-.83-1.658-2.24-1.658v-.58h4.229l6.964 11.855V10.4c0-1.824-.413-2.239-1.824-2.239v-.58h9.286v.58c-.58 0-1.077.249-1.077.83 0 .414.166.828.331 1.326l2.654 5.722 2.571-5.555c.413-.746.498-1.16.498-1.576 0-.497-.334-.746-1.078-.746v-.58h4.394v.58c-1.078 0-1.743.995-2.239 2.154l-3.4 6.966v4.56c0 1.99.498 2.487 1.825 2.487v.663h-6.302v-.663c1.326 0 1.824-.496 1.824-2.487v-3.897l-3.649-7.711c-.662-1.492-.911-1.823-1.327-2.073-.828.331-1.077.912-1.077 2.239v12.769l.166 2.155-1.078.083-8.125-13.598h.001Zm-10.364-.83-2.323 7.547h4.81l-2.488-7.546ZM79.68 18.526h-1.243v3.565c0 1.824.496 2.239 1.907 2.239v.663h-6.385v-.663c1.327 0 1.825-.497 1.825-2.321V10.317c0-1.823-.498-2.155-1.825-2.155v-.58h4.809c4.643 0 7.379 1.409 7.379 5.223 0 3.98-3.316 5.721-6.467 5.721Zm-.83-9.784h-.413v8.54h.745c2.737 0 4.147-1.245 4.147-4.395 0-3.15-1.244-4.145-4.478-4.145ZM50.744 21.676c-3.15 0-5.306-2.24-5.306-5.472 0-3.068 2.24-5.472 5.306-5.472 2.986 0 5.224 2.322 5.224 5.472 0 3.067-2.322 5.472-5.224 5.472Zm0-9.95c-2.155 0-2.902 2.073-2.902 4.478 0 2.24.664 4.477 2.902 4.477 2.156 0 2.82-2.24 2.82-4.56 0-2.238-.83-4.395-2.82-4.395Zm-36.481 8.955v-.58c.83 0 .995-.248.995-.497 0-.333-.083-.581-.166-.83 0 0-.167-.664-.332-1.16h-3.234l-.331 1.078c-.083.248-.166.497-.166.828 0 .331.332.58.83.58v.581H8.624v-.58c.83 0 1.161-.248 1.492-1.16l2.488-7.463c-.083-.332-.332-.58-.83-.58v-.58h2.653l2.736 7.96c.415 1.408.83 1.823 1.492 1.823v.58h-4.393ZM13.1 12.638l-1.243 4.063h2.57l-1.326-4.063Z"
+    fill="#737373" />
+</svg>
--- a/src/images/logos/forbes.svg
+++ b/src/images/logos/forbes.svg
@@ -0,0 +1,5 @@
+<svg width="82" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M49.928 11.88c-1.318 0-2.354.286-3.39.854L46.632 6 40.32 7.138v.57l.66.094c.846.19 1.13.664 1.317 1.803.19 2.277.094 14.42 0 16.412 1.696.38 3.485.665 5.276.665 4.993 0 8.008-3.132 8.008-8.064 0-3.89-2.45-6.736-5.653-6.736v-.001Zm-2.166 13.757c-.377 0-.848 0-1.13-.095-.095-1.328-.189-6.925-.095-11.858.566-.19.941-.285 1.413-.285 2.075 0 3.205 2.467 3.205 5.502 0 3.796-1.414 6.736-3.392 6.736ZM16.58 6.378H0v.854l.942.095c1.224.19 1.696.948 1.884 2.75.283 3.416.189 9.583 0 12.523-.189 1.803-.659 2.657-1.884 2.75L0 25.54v.76h10.645v-.76l-1.13-.19c-1.226-.094-1.697-.948-1.884-2.75a77.793 77.793 0 0 1-.19-5.692l2.262.095c1.413 0 2.072 1.139 2.354 2.75h.849V13.02h-.849c-.283 1.613-.941 2.75-2.354 2.75l-2.26.096c0-3.226.094-6.262.189-8.064h3.296c2.545 0 3.864 1.612 4.805 4.459l.942-.285-.094-5.598h-.001Zm5.37 5.313c4.71 0 7.065 3.226 7.065 7.495 0 4.079-2.638 7.495-7.348 7.495s-7.065-3.227-7.065-7.495c0-4.08 2.638-7.495 7.349-7.495h-.001Zm-.283.949c-2.073 0-2.638 2.846-2.638 6.546 0 3.604.942 6.545 2.826 6.545 2.166 0 2.731-2.846 2.731-6.545 0-3.605-.94-6.546-2.92-6.546h.001Zm35.138 6.64c0-3.889 2.449-7.589 7.253-7.589 3.955 0 5.84 2.942 5.84 6.83h-8.76c-.095 3.51 1.6 6.073 4.992 6.073 1.508 0 2.26-.379 3.204-1.044l.376.474c-.943 1.328-3.014 2.657-5.652 2.657-4.24-.001-7.253-3.036-7.253-7.4Zm4.332-1.802 4.428-.095c0-1.897-.283-4.743-1.883-4.743-1.601 0-2.45 2.656-2.544 4.838Zm19.974-5.028c-1.13-.475-2.638-.759-4.334-.759-3.485 0-5.653 2.087-5.653 4.554s1.6 3.51 3.864 4.27c2.355.852 3.014 1.517 3.014 2.655 0 1.139-.848 2.182-2.355 2.182-1.79 0-3.11-1.043-4.145-3.89l-.66.19.095 4.175c1.13.474 3.202.855 4.993.855 3.674 0 6.03-1.899 6.03-4.839 0-1.993-1.038-3.13-3.487-4.08-2.638-1.043-3.579-1.707-3.579-2.94 0-1.234.85-2.088 1.98-2.088 1.695 0 2.826 1.043 3.675 3.606l.659-.19-.096-3.7h-.001Zm-39.85-.379c-1.6-.948-4.427-.474-5.934 2.942l.093-3.321-6.31 1.233v.57l.66.095c.848.095 1.223.57 1.319 1.803.188 2.277.093 6.261 0 8.253-.095 1.138-.47 1.707-1.32 1.802l-.66.095v.759h8.761v-.759l-1.13-.095c-.942-.095-1.224-.665-1.32-1.802-.188-1.803-.188-5.408-.093-7.684.47-.665 2.543-1.233 4.427 0l1.508-3.89Z"
+    fill="#737373" />
+</svg>
--- a/src/images/logos/huffpost.svg
+++ b/src/images/logos/huffpost.svg
@@ -0,0 +1,5 @@
+<svg width="142" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M18.359 24.268h5.186l2.78-15.914H21.14l-1.026 5.7h-4.496l1.025-5.7h-5.186l-2.78 15.914h5.186l1.045-5.955h4.496l-1.045 5.955ZM29.264 8.335l-1.578 8.854c-.138.69-.197 1.36-.197 1.992 0 4.693 4.102 5.403 6.567 5.403 5.166 0 7.395-1.716 8.203-6.35l1.736-9.919h-5.187l-1.479 8.322c-.473 2.603-.808 3.964-2.74 3.964-1.263 0-1.874-.67-1.874-2.051 0-.533.079-1.183.237-1.992l1.498-8.243h-5.186v.02ZM71.404 24.268h5.187l.73-4.101h2.444c4.516 0 7.02-2.446 7.02-6.902 0-3.136-2.169-4.93-5.974-4.93h-6.626l-2.78 15.933Zm8.085-8.026h-1.498l.69-3.746h1.4c1.144 0 1.755.572 1.755 1.617 0 1.321-.888 2.13-2.347 2.13ZM96.862 8c-5.64 0-9.011 3.648-9.011 9.78 0 4.26 2.681 6.824 7.177 6.824 5.64 0 9.012-3.648 9.012-9.781.02-4.28-2.662-6.823-7.178-6.823Zm-1.518 12.482c-1.34 0-2.13-.966-2.13-2.583 0-.611.06-1.144.178-1.755.394-2.09 1.065-4.003 3.175-4.003 1.34 0 2.13.966 2.13 2.583 0 .612-.06 1.144-.178 1.755-.395 2.07-1.065 4.003-3.175 4.003ZM122.083 24.268h5.186l2.051-11.654h3.904l.75-4.26h-13.272l-.749 4.26h4.141l-2.011 11.654ZM113.485 14.231c-1.636-.512-2.307-.73-2.307-1.498 0-.513.335-1.124 1.321-1.124.73 0 1.341.414 1.578 1.025l4.575-1.242C118.119 9.144 116.187 8 112.854 8c-6.27 0-6.763 4.2-6.763 5.482 0 2.603 1.38 4.2 4.377 5.029.789.216 1.696.453 1.696 1.32 0 .69-.513 1.125-1.4 1.125-.808 0-1.676-.474-1.972-1.302l-4.516 1.223c.493 2.366 2.722 3.707 6.212 3.707 2.662 0 7.119-.71 7.119-5.521.019-2.406-1.341-3.984-4.122-4.832ZM5.778 24.268l2.8-15.914H0v15.914h5.778ZM136.202 8.354l-2.78 15.914H142V8.354h-5.798ZM50.186 19.575h4.358l.71-4.003h-4.358l.493-2.958h6.093l.75-4.279h-11.28l-2.78 15.933h5.186l.828-4.693ZM63.773 19.575h4.378l.71-4.003h-4.358l.493-2.958h6.093l.75-4.279h-11.28l-2.78 15.933h5.185l.809-4.693Z"
+    fill="#737373" />
+</svg>
--- a/src/images/logos/techcrunch.svg
+++ b/src/images/logos/techcrunch.svg
@@ -0,0 +1,5 @@
+<svg width="181" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M66.825 12.77v11.34h-4.157V12.77H58.48V9.14h12.54v3.63h-4.195Zm13.89 6.85h-6.632a1.77 1.77 0 0 0 1.904 1.803 5.853 5.853 0 0 0 2.911-.793l1.507 2.506a8.69 8.69 0 0 1-4.528 1.293c-3.398 0-5.241-2.405-5.241-5.852 0-3.878 2.186-5.875 5.132-5.875 2.945 0 5.002 2.041 5.002 6.215-.044.272-.044.51-.056.704h.001Zm-5.099-4.117c-.884 0-1.37.601-1.495 1.724h3.206c-.193-1.145-.578-1.723-1.711-1.723Zm12.257 8.88c-3.296 0-5.256-2.098-5.256-5.897 0-3.402 1.745-5.83 5.347-5.83A4.676 4.676 0 0 1 92.28 15.2l-2.651 2.038c-.532-.975-.895-1.452-1.733-1.452-.837 0-1.47.986-1.47 2.766s.533 2.704 1.587 2.704c.725 0 1.23-.409 1.948-1.463l2.436 1.906c-1.31 1.94-2.526 2.688-4.52 2.688l-.004-.003Zm13.142-.238V17.76c0-1.463-.488-1.849-1.28-1.849-.793 0-1.311.386-1.311 1.804v6.43h-3.851V10.071l3.85-1.543v5.115a4.348 4.348 0 0 1 2.833-.986c2.462 0 3.637 1.656 3.637 4.604v6.884h-3.878Zm13.095.239c-4.453 0-6.797-3.3-6.797-7.735 0-4.82 2.832-7.734 6.797-7.734 3.681 0 5.131 1.577 6.162 4.41l-3.761 1.471c-.544-1.39-1.053-2.268-2.424-2.268-1.734 0-2.482 1.736-2.482 4.117 0 2.382.726 4.106 2.527 4.106 1.302 0 1.858-.704 2.673-2.121l3.513 1.871a6.446 6.446 0 0 1-6.209 3.878l.001.005Zm15.701-7.247a2.411 2.411 0 0 0-1.79-.942c-.94 0-1.517.453-1.517 1.826v6.124h-3.852V12.93h3.852v.816a3.394 3.394 0 0 1 4.213-.578l-.906 3.97Zm9.165 7.009v-.749a4.259 4.259 0 0 1-2.81.987c-2.462 0-3.636-1.656-3.636-4.617v-6.839h3.863v6.35c0 1.453.498 1.838 1.291 1.838.793 0 1.28-.385 1.28-1.792v-6.396h3.874v11.25l-3.862-.033Zm13.095 0V17.76c0-1.463-.499-1.849-1.28-1.849-.782 0-1.311.386-1.311 1.804v6.43h-3.851V12.93h3.851v.749a4.349 4.349 0 0 1 2.833-.987c2.461 0 3.636 1.656 3.636 4.604v6.884l-3.878-.033Zm11.385.238c-3.296 0-5.268-2.098-5.268-5.897 0-3.403 1.756-5.83 5.347-5.83a4.714 4.714 0 0 1 4.327 2.54l-2.65 2.007c-.545-.975-.907-1.452-1.734-1.452s-1.484.987-1.484 2.767c0 1.78.533 2.703 1.586 2.703.725 0 1.246-.408 1.949-1.463l2.435 1.905c-1.302 1.973-2.526 2.722-4.509 2.722l.001-.003v.001Zm13.13-.238V17.76c0-1.463-.488-1.849-1.281-1.849-.792 0-1.302.386-1.302 1.804v6.43h-3.851V10.071l3.851-1.543v5.115a4.296 4.296 0 0 1 2.821-.986c2.47 0 3.637 1.656 3.637 4.604v6.884h-3.875ZM0 3v8.54h8.519v17.066h8.53V11.539h8.518V3H0Zm34.096 17.067V11.54h-8.53v17.067h25.578v-8.539H34.096Zm0-17.066h17.048v8.538H34.096V3.001Z"
+    fill="#737373" />
+</svg>
--- a/src/images/logos/wired.svg
+++ b/src/images/logos/wired.svg
@@ -0,0 +1,5 @@
+<svg width="121" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M101.512 7.74v16.645h8.198c2.291 0 3.617-.362 4.582-1.207 1.206-1.085 1.808-3.015 1.808-7.116 0-4.102-.602-6.031-1.808-7.117-.965-.844-2.291-1.206-4.582-1.206h-8.198Zm11.213 8.322c0 3.618-.241 4.463-.965 4.945-.482.362-1.085.482-2.29.482h-4.582V10.513h4.582c1.205 0 1.808 0 2.29.483.724.603.965 1.447.965 5.066Zm7.595 12.002H96.268V4h24.052v24.064Zm-43.703-17.55V7.739h14.226v5.308h-3.015v-2.534h-5.787v3.981h4.582v2.654H82.04v4.463h5.909v-2.895h3.013v5.669H76.618V21.61h2.29V10.513h-2.29Zm-12.9 9.528c0 1.81.12 3.136.36 4.222h3.257c-.122-.844-.241-2.412-.241-4.463-.122-2.412-.845-2.774-2.533-3.136 1.929-.362 2.774-1.206 2.774-4.222 0-2.412-.363-3.377-1.086-3.98-.482-.482-1.325-.724-2.653-.724H53.468v16.646h3.376V17.87h4.703c.965 0 1.325.121 1.688.362s.482.604.482 1.81Zm-6.873-4.825v-4.583h5.426c.724 0 .965.12 1.084.241.241.241.483.603.483 2.05 0 1.448-.242 1.93-.483 2.172-.119.12-.36.24-1.084.24l-5.426-.12Zm15.312 12.847H48.044V4h24.052v24.064h.06Zm-30.38-6.453v2.774H30.32V21.61h4.099V10.513h-4.1V7.74h11.454v2.775h-4.1V21.61h4.101ZM22.423 7.739H19.29L17 20.887 14.346 8.704c-.12-.844-.482-.965-1.206-.965h-1.688c-.723 0-1.085.241-1.205.965L7.595 20.887 5.305 7.739H1.929l3.255 15.802c.12.723.362.844 1.206.844h2.29c.724 0 .965-.12 1.207-.845l2.532-11.458L14.95 23.54c.12.723.361.844 1.205.844h2.17c.724 0 1.085-.12 1.206-.845l2.894-15.8h-.002Zm1.688 20.325H0V4h24.052v24.064h.06Z"
+    fill="#737373" />
+</svg>
--- a/src/images/mycelium.svg
+++ b/src/images/mycelium.svg
--- a/src/images/peers.png
+++ b/src/images/peers.png
--- a/src/images/phone-frame.svg
+++ b/src/images/phone-frame.svg
@@ -0,0 +1,231 @@
+<svg width="366" height="729" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g mask="url(#mask)">
+    <g filter="url(#a)">
+      <path
+        d="M363.315 64.213C363.315 22.99 341.312 1 300.092 1H66.751C25.53 1 3.528 22.99 3.528 64.213v44.68l-.857.143A2 2 0 0 0 1 111.009v24.611a2 2 0 0 0 1.671 1.973l.95.158a2.26 2.26 0 0 1-.093.236v26.173c.212.1.398.296.541.643l-1.398.233A2 2 0 0 0 1 167.009v47.611a2 2 0 0 0 1.671 1.973l1.368.228c-.139.319-.314.533-.511.653v16.637c.221.104.414.313.56.689l-1.417.236A2 2 0 0 0 1 237.009v47.611a2 2 0 0 0 1.671 1.973l1.347.225c-.135.294-.302.493-.49.607v377.681c0 41.213 22 63.208 63.223 63.208h95.074c.947-.504 2.717-.843 4.745-.843l.141.001h.194l.086-.001 33.704.005c1.849.043 3.442.37 4.323.838h95.074c41.222 0 63.223-21.999 63.223-63.212v-394.63c-.259-.275-.48-.796-.63-1.47l-.011-.133 1.655-.276A2 2 0 0 0 366 266.62v-77.611a2 2 0 0 0-1.671-1.973l-1.712-.285c.148-.839.396-1.491.698-1.811V64.213Z"
+        fill="url(#b)" />
+      <path
+        d="M363.315 64.213C363.315 22.99 341.312 1 300.092 1H66.751C25.53 1 3.528 22.99 3.528 64.213v44.68l-.857.143A2 2 0 0 0 1 111.009v24.611a2 2 0 0 0 1.671 1.973l.95.158a2.26 2.26 0 0 1-.093.236v26.173c.212.1.398.296.541.643l-1.398.233A2 2 0 0 0 1 167.009v47.611a2 2 0 0 0 1.671 1.973l1.368.228c-.139.319-.314.533-.511.653v16.637c.221.104.414.313.56.689l-1.417.236A2 2 0 0 0 1 237.009v47.611a2 2 0 0 0 1.671 1.973l1.347.225c-.135.294-.302.493-.49.607v377.681c0 41.213 22 63.208 63.223 63.208h95.074c.947-.504 2.717-.843 4.745-.843l.141.001h.194l.086-.001 33.704.005c1.849.043 3.442.37 4.323.838h95.074c41.222 0 63.223-21.999 63.223-63.212v-394.63c-.259-.275-.48-.796-.63-1.47l-.011-.133 1.655-.276A2 2 0 0 0 366 266.62v-77.611a2 2 0 0 0-1.671-1.973l-1.712-.285c.148-.839.396-1.491.698-1.811V64.213Z"
+        fill="url(#c)" />
+    </g>
+    <g filter="url(#d)">
+      <path
+        d="M5 133.772v-21.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v24.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 133.772Z"
+        fill="url(#e)" />
+      <path
+        d="M5 133.772v-21.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v24.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 133.772Z"
+        fill="url(#f)" fill-opacity=".1" />
+    </g>
+    <g filter="url(#g)">
+      <path
+        d="M5 213.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 213.772Z"
+        fill="url(#h)" />
+      <path
+        d="M5 213.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 213.772Z"
+        fill="url(#i)" fill-opacity=".1" />
+    </g>
+    <g filter="url(#j)">
+      <path
+        d="M5 283.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 283.772Z"
+        fill="url(#k)" />
+      <path
+        d="M5 283.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 283.772Z"
+        fill="url(#l)" fill-opacity=".1" />
+    </g>
+    <g filter="url(#m)">
+      <path
+        d="M362.004 266.772v-78.15a5.12 5.12 0 0 1 1.5-3.622c.844-.073 2.496.257 2.496 2.157v81.562c-.406 2.023-2.605 2.023-2.605 2.023a6.359 6.359 0 0 1-1.391-3.97Z"
+        fill="url(#n)" />
+      <path
+        d="M362.004 266.772v-78.15a5.12 5.12 0 0 1 1.5-3.622c.844-.073 2.496.257 2.496 2.157v81.562c-.406 2.023-2.605 2.023-2.605 2.023a6.359 6.359 0 0 1-1.391-3.97Z"
+        fill="url(#o)" fill-opacity=".1" />
+    </g>
+    <path
+      d="M305 14.5H59c-24.577 0-44.5 19.923-44.5 44.5v615c0 23.472 19.028 42.5 42.5 42.5h250c23.472 0 42.5-19.028 42.5-42.5V59c0-24.577-19.923-44.5-44.5-44.5Z"
+      stroke="url(#p)" stroke-opacity=".5" />
+    <g filter="url(#q)" shape-rendering="crispEdges">
+      <path
+        d="M16 59c0-23.748 19.252-43 43-43h246c23.748 0 43 19.252 43 43v615c0 23.196-18.804 42-42 42H58c-23.196 0-42-18.804-42-42V59Z"
+        fill="url(#r)" fill-opacity=".3" />
+      <path
+        d="M305 15.5H59c-24.024 0-43.5 19.476-43.5 43.5v615c0 23.472 19.028 42.5 42.5 42.5h248c23.472 0 42.5-19.028 42.5-42.5V59c0-24.024-19.476-43.5-43.5-43.5Z"
+        stroke="#000" stroke-opacity=".07" />
+    </g>
+    <g filter="url(#s)">
+      <rect x="154" y="29" width="56" height="5" rx="2.5" fill="#D4D4D4" />
+    </g>
+  </g>
+  <defs>
+    <mask id="mask">
+      <rect width="366" height="729" fill="#fff" />
+      <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M89.728 24a4.213 4.213 0 0 1 4.213 4.212v2.527c0 10.235 8.3 18.532 18.539 18.532h139.04c10.239 0 18.539-8.297 18.539-18.532v-2.527A4.212 4.212 0 0 1 274.272 24h32.864C325.286 24 340 38.71 340 56.853v618.295c0 18.144-14.714 32.853-32.864 32.853H56.864c-18.15 0-32.864-14.709-32.864-32.853V56.853C24 38.709 38.714 24 56.864 24h32.864Z"
+        fill="#000" />
+    </mask>
+    <linearGradient id="e" x1="1.004" y1="123.367" x2="5" y2="123.367" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D4D4D4" />
+      <stop offset="1" stop-color="#E6E6E6" />
+    </linearGradient>
+    <linearGradient id="f" x1="3.002" y1="108.991" x2="3.002" y2="116.75" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#171717" />
+      <stop offset=".783" stop-color="#171717" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="h" x1="1.004" y1="190.867" x2="5" y2="190.867" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D4D4D4" />
+      <stop offset="1" stop-color="#E6E6E6" />
+    </linearGradient>
+    <linearGradient id="i" x1="3.002" y1="163.991" x2="3.002" y2="178.497" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#171717" />
+      <stop offset=".783" stop-color="#171717" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="k" x1="1.004" y1="260.867" x2="5" y2="260.867" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D4D4D4" />
+      <stop offset="1" stop-color="#E6E6E6" />
+    </linearGradient>
+    <linearGradient id="l" x1="3.002" y1="233.991" x2="3.002" y2="248.497" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#171717" />
+      <stop offset=".783" stop-color="#171717" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="n" x1="362.004" y1="226.25" x2="366" y2="226.25" gradientUnits="userSpaceOnUse">
+      <stop offset=".124" stop-color="#E6E6E6" />
+      <stop offset="1" stop-color="#D4D4D4" />
+    </linearGradient>
+    <linearGradient id="o" x1="364.002" y1="184.991" x2="364.002" y2="208.134" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#171717" />
+      <stop offset=".783" stop-color="#171717" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="p" x1="182" y1="15" x2="182" y2="716" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#fff" />
+      <stop offset=".381" stop-color="#fff" stop-opacity="0" />
+    </linearGradient>
+    <filter id="a" x="-1" y="-1" width="367" height="730.314" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dy="-2" />
+      <feGaussianBlur stdDeviation="1.5" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+      <feBlend in2="shape" result="effect1_innerShadow_104_2007" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="-2" />
+      <feGaussianBlur stdDeviation="2" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 0.0901961 0 0 0 0 0.0901961 0 0 0 0 0.0901961 0 0 0 0.17 0" />
+      <feBlend in2="effect1_innerShadow_104_2007" result="effect2_innerShadow_104_2007" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dy="2" />
+      <feGaussianBlur stdDeviation=".5" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0" />
+      <feBlend in2="effect2_innerShadow_104_2007" result="effect3_innerShadow_104_2007" />
+    </filter>
+    <filter id="d" x="1.004" y="108.991" width="4.996" height="28.751" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="1" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="-1" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
+      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
+    </filter>
+    <filter id="g" x="1.004" y="163.991" width="4.996" height="53.751" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="1" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="-1" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
+      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
+    </filter>
+    <filter id="j" x="1.004" y="233.991" width="4.996" height="53.751" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="1" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="-1" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
+      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
+    </filter>
+    <filter id="m" x="361.004" y="184.991" width="4.996" height="85.751" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="-1" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dx="1" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
+      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
+    </filter>
+    <filter id="q" x="15" y="15" width="334" height="703" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dy="1" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" />
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dy="1" />
+      <feGaussianBlur stdDeviation="2.5" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" />
+      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
+    </filter>
+    <filter id="s" x="154" y="29" width="56" height="6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dy="1" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0" />
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feOffset dy="1" />
+      <feGaussianBlur stdDeviation=".5" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
+    </filter>
+    <radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="matrix(0 727 -642 0 184 1)">
+      <stop stop-color="#FAFAFA" />
+      <stop offset="1" stop-color="#E6E6E6" />
+    </radialGradient>
+    <radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="matrix(0 319 -295.5 0 183.5 1)">
+      <stop stop-color="#fff" />
+      <stop offset=".533" stop-color="#fff" stop-opacity="0" />
+    </radialGradient>
+    <radialGradient id="r" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="matrix(0 689 -326.783 0 182 27)">
+      <stop offset=".319" stop-color="#D4D4D4" />
+      <stop offset="1" stop-color="#E6E6E6" />
+    </radialGradient>
+  </defs>
+</svg>
--- a/src/images/phoneframe.png
+++ b/src/images/phoneframe.png
--- a/src/images/qr-code.svg
+++ b/src/images/qr-code.svg
@@ -0,0 +1,118 @@
+<svg width="80" height="80" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.2 0H0v3.2h3.2V0ZM3.2 3.2H0v3.2h3.2V3.2ZM3.2 6.4H0v3.2h3.2V6.4Z" fill="#171717" />
+  <path
+    d="M3.2 9.6H0v3.2h3.2V9.6ZM3.2 12.8H0V16h3.2v-3.2ZM3.2 16H0v3.2h3.2V16ZM3.2 19.2H0v3.2h3.2v-3.2ZM3.2 25.6H0v3.2h3.2v-3.2ZM3.2 35.2H0v3.2h3.2v-3.2ZM3.2 57.6H0v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path d="M3.2 60.8H0V64h3.2v-3.2ZM3.2 64H0v3.2h3.2V64ZM3.2 67.2H0v3.2h3.2v-3.2ZM3.2 70.4H0v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path
+    d="M3.2 73.6H0v3.2h3.2v-3.2ZM3.2 76.8H0V80h3.2v-3.2ZM6.4 0H3.2v3.2h3.2V0ZM6.4 19.2H3.2v3.2h3.2v-3.2ZM6.4 25.6H3.2v3.2h3.2v-3.2ZM6.4 28.8H3.2V32h3.2v-3.2ZM6.4 32H3.2v3.2h3.2V32ZM6.4 35.2H3.2v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path
+    d="M6.4 38.4H3.2v3.2h3.2v-3.2ZM6.4 48H3.2v3.2h3.2V48ZM6.4 51.2H3.2v3.2h3.2v-3.2ZM6.4 57.6H3.2v3.2h3.2v-3.2ZM6.4 76.8H3.2V80h3.2v-3.2ZM9.6 0H6.4v3.2h3.2V0ZM9.6 6.4H6.4v3.2h3.2V6.4Z"
+    fill="#171717" />
+  <path
+    d="M9.6 9.6H6.4v3.2h3.2V9.6ZM9.6 12.8H6.4V16h3.2v-3.2ZM9.6 19.2H6.4v3.2h3.2v-3.2ZM9.6 28.8H6.4V32h3.2v-3.2ZM9.6 32H6.4v3.2h3.2V32ZM9.6 41.6H6.4v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path
+    d="M9.6 44.8H6.4V48h3.2v-3.2ZM9.6 57.6H6.4v3.2h3.2v-3.2ZM9.6 64H6.4v3.2h3.2V64ZM9.6 67.2H6.4v3.2h3.2v-3.2ZM9.6 70.4H6.4v3.2h3.2v-3.2ZM9.6 76.8H6.4V80h3.2v-3.2ZM12.8 0H9.6v3.2h3.2V0ZM12.8 6.4H9.6v3.2h3.2V6.4Z"
+    fill="#171717" />
+  <path
+    d="M12.8 9.6H9.6v3.2h3.2V9.6ZM12.8 12.8H9.6V16h3.2v-3.2ZM12.8 19.2H9.6v3.2h3.2v-3.2ZM12.8 25.6H9.6v3.2h3.2v-3.2ZM12.8 38.4H9.6v3.2h3.2v-3.2ZM12.8 48H9.6v3.2h3.2V48ZM12.8 51.2H9.6v3.2h3.2v-3.2ZM12.8 57.6H9.6v3.2h3.2v-3.2ZM12.8 64H9.6v3.2h3.2V64ZM12.8 67.2H9.6v3.2h3.2v-3.2ZM12.8 70.4H9.6v3.2h3.2v-3.2ZM12.8 76.8H9.6V80h3.2v-3.2ZM16 0h-3.2v3.2H16V0ZM16 6.4h-3.2v3.2H16V6.4Z"
+    fill="#171717" />
+  <path
+    d="M16 9.6h-3.2v3.2H16V9.6ZM16 12.8h-3.2V16H16v-3.2ZM16 19.2h-3.2v3.2H16v-3.2ZM16 25.6h-3.2v3.2H16v-3.2ZM16 41.6h-3.2v3.2H16v-3.2Z"
+    fill="#171717" />
+  <path
+    d="M16 44.8h-3.2V48H16v-3.2ZM16 57.6h-3.2v3.2H16v-3.2ZM16 64h-3.2v3.2H16V64ZM16 67.2h-3.2v3.2H16v-3.2ZM16 70.4h-3.2v3.2H16v-3.2ZM16 76.8h-3.2V80H16v-3.2ZM19.2 0H16v3.2h3.2V0ZM19.2 19.2H16v3.2h3.2v-3.2ZM19.2 28.8H16V32h3.2v-3.2ZM19.2 44.8H16V48h3.2v-3.2ZM19.2 57.6H16v3.2h3.2v-3.2ZM19.2 76.8H16V80h3.2v-3.2ZM22.4 0h-3.2v3.2h3.2V0ZM22.4 3.2h-3.2v3.2h3.2V3.2ZM22.4 6.4h-3.2v3.2h3.2V6.4Z"
+    fill="#171717" />
+  <path
+    d="M22.4 9.6h-3.2v3.2h3.2V9.6ZM22.4 12.8h-3.2V16h3.2v-3.2ZM22.4 16h-3.2v3.2h3.2V16ZM22.4 19.2h-3.2v3.2h3.2v-3.2ZM22.4 25.6h-3.2v3.2h3.2v-3.2ZM22.4 32h-3.2v3.2h3.2V32ZM22.4 38.4h-3.2v3.2h3.2v-3.2ZM22.4 44.8h-3.2V48h3.2v-3.2ZM22.4 51.2h-3.2v3.2h3.2v-3.2ZM22.4 57.6h-3.2v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path
+    d="M22.4 60.8h-3.2V64h3.2v-3.2ZM22.4 64h-3.2v3.2h3.2V64ZM22.4 67.2h-3.2v3.2h3.2v-3.2ZM22.4 70.4h-3.2v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path
+    d="M22.4 73.6h-3.2v3.2h3.2v-3.2ZM22.4 76.8h-3.2V80h3.2v-3.2ZM25.6 28.8h-3.2V32h3.2v-3.2ZM25.6 32h-3.2v3.2h3.2V32ZM25.6 35.2h-3.2v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path
+    d="M25.6 38.4h-3.2v3.2h3.2v-3.2ZM25.6 44.8h-3.2V48h3.2v-3.2ZM25.6 48h-3.2v3.2h3.2V48ZM25.6 51.2h-3.2v3.2h3.2v-3.2ZM28.8 0h-3.2v3.2h3.2V0ZM28.8 19.2h-3.2v3.2h3.2v-3.2ZM28.8 22.4h-3.2v3.2h3.2v-3.2ZM28.8 28.8h-3.2V32h3.2v-3.2ZM28.8 32h-3.2v3.2h3.2V32ZM28.8 35.2h-3.2v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path d="M28.8 38.4h-3.2v3.2h3.2v-3.2ZM28.8 44.8h-3.2V48h3.2v-3.2ZM28.8 51.2h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
+  <path
+    d="M28.8 54.4h-3.2v3.2h3.2v-3.2ZM28.8 64h-3.2v3.2h3.2V64ZM28.8 67.2h-3.2v3.2h3.2v-3.2ZM28.8 73.6h-3.2v3.2h3.2v-3.2ZM28.8 76.8h-3.2V80h3.2v-3.2ZM32 0h-3.2v3.2H32V0ZM32 6.4h-3.2v3.2H32V6.4ZM32 16h-3.2v3.2H32V16ZM32 22.4h-3.2v3.2H32v-3.2ZM32 25.6h-3.2v3.2H32v-3.2ZM32 32h-3.2v3.2H32V32ZM32 38.4h-3.2v3.2H32v-3.2ZM32 54.4h-3.2v3.2H32v-3.2ZM32 57.6h-3.2v3.2H32v-3.2Z"
+    fill="#171717" />
+  <path
+    d="M32 60.8h-3.2V64H32v-3.2ZM32 76.8h-3.2V80H32v-3.2ZM35.2 0H32v3.2h3.2V0ZM35.2 9.6H32v3.2h3.2V9.6ZM35.2 12.8H32V16h3.2v-3.2ZM35.2 19.2H32v3.2h3.2v-3.2ZM35.2 28.8H32V32h3.2v-3.2ZM35.2 38.4H32v3.2h3.2v-3.2ZM35.2 41.6H32v3.2h3.2v-3.2ZM35.2 48H32v3.2h3.2V48ZM35.2 57.6H32v3.2h3.2v-3.2ZM35.2 64H32v3.2h3.2V64ZM35.2 76.8H32V80h3.2v-3.2Z"
+    fill="#171717" />
+  <path d="M38.4 0h-3.2v3.2h3.2V0ZM38.4 3.2h-3.2v3.2h3.2V3.2ZM38.4 6.4h-3.2v3.2h3.2V6.4Z" fill="#171717" />
+  <path
+    d="M38.4 9.6h-3.2v3.2h3.2V9.6ZM38.4 12.8h-3.2V16h3.2v-3.2ZM38.4 16h-3.2v3.2h3.2V16ZM38.4 51.2h-3.2v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path
+    d="M38.4 54.4h-3.2v3.2h3.2v-3.2ZM38.4 60.8h-3.2V64h3.2v-3.2ZM38.4 64h-3.2v3.2h3.2V64ZM38.4 70.4h-3.2v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path
+    d="M38.4 73.6h-3.2v3.2h3.2v-3.2ZM38.4 76.8h-3.2V80h3.2v-3.2ZM41.6 3.2h-3.2v3.2h3.2V3.2ZM41.6 12.8h-3.2V16h3.2v-3.2ZM41.6 19.2h-3.2v3.2h3.2v-3.2ZM41.6 22.4h-3.2v3.2h3.2v-3.2ZM41.6 25.6h-3.2v3.2h3.2v-3.2ZM41.6 32h-3.2v3.2h3.2V32ZM41.6 41.6h-3.2v3.2h3.2v-3.2ZM41.6 48h-3.2v3.2h3.2V48ZM41.6 51.2h-3.2v3.2h3.2v-3.2ZM41.6 57.6h-3.2v3.2h3.2v-3.2ZM41.6 67.2h-3.2v3.2h3.2v-3.2ZM41.6 73.6h-3.2v3.2h3.2v-3.2ZM41.6 76.8h-3.2V80h3.2v-3.2ZM44.8 0h-3.2v3.2h3.2V0ZM44.8 6.4h-3.2v3.2h3.2V6.4Z"
+    fill="#171717" />
+  <path d="M44.8 22.4h-3.2v3.2h3.2v-3.2ZM44.8 32h-3.2v3.2h3.2V32ZM44.8 41.6h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
+  <path d="M44.8 44.8h-3.2V48h3.2v-3.2ZM44.8 51.2h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
+  <path d="M44.8 54.4h-3.2v3.2h3.2v-3.2ZM44.8 57.6h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
+  <path
+    d="M44.8 60.8h-3.2V64h3.2v-3.2ZM44.8 64h-3.2v3.2h3.2V64ZM44.8 67.2h-3.2v3.2h3.2v-3.2ZM44.8 70.4h-3.2v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path
+    d="M44.8 73.6h-3.2v3.2h3.2v-3.2ZM44.8 76.8h-3.2V80h3.2v-3.2ZM48 0h-3.2v3.2H48V0ZM48 16h-3.2v3.2H48V16ZM48 19.2h-3.2v3.2H48v-3.2ZM48 25.6h-3.2v3.2H48v-3.2ZM48 44.8h-3.2V48H48v-3.2ZM48 54.4h-3.2v3.2H48v-3.2ZM48 57.6h-3.2v3.2H48v-3.2Z"
+    fill="#171717" />
+  <path
+    d="M48 60.8h-3.2V64H48v-3.2ZM48 67.2h-3.2v3.2H48v-3.2ZM51.2 6.4H48v3.2h3.2V6.4ZM51.2 12.8H48V16h3.2v-3.2ZM51.2 22.4H48v3.2h3.2v-3.2ZM51.2 25.6H48v3.2h3.2v-3.2ZM51.2 28.8H48V32h3.2v-3.2ZM51.2 32H48v3.2h3.2V32ZM51.2 35.2H48v3.2h3.2v-3.2ZM51.2 41.6H48v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path
+    d="M51.2 44.8H48V48h3.2v-3.2ZM51.2 54.4H48v3.2h3.2v-3.2ZM51.2 60.8H48V64h3.2v-3.2ZM51.2 64H48v3.2h3.2V64ZM54.4 6.4h-3.2v3.2h3.2V6.4ZM54.4 12.8h-3.2V16h3.2v-3.2ZM54.4 19.2h-3.2v3.2h3.2v-3.2ZM54.4 28.8h-3.2V32h3.2v-3.2ZM54.4 32h-3.2v3.2h3.2V32ZM54.4 38.4h-3.2v3.2h3.2v-3.2ZM54.4 48h-3.2v3.2h3.2V48Z"
+    fill="#171717" />
+  <path d="M54.4 51.2h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
+  <path d="M54.4 54.4h-3.2v3.2h3.2v-3.2ZM54.4 57.6h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
+  <path
+    d="M54.4 60.8h-3.2V64h3.2v-3.2ZM54.4 64h-3.2v3.2h3.2V64ZM54.4 67.2h-3.2v3.2h3.2v-3.2ZM54.4 70.4h-3.2v3.2h3.2v-3.2ZM54.4 76.8h-3.2V80h3.2v-3.2ZM57.6 32h-3.2v3.2h3.2V32ZM57.6 41.6h-3.2v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path
+    d="M57.6 44.8h-3.2V48h3.2v-3.2ZM57.6 51.2h-3.2v3.2h3.2v-3.2ZM57.6 64h-3.2v3.2h3.2V64ZM57.6 70.4h-3.2v3.2h3.2v-3.2ZM57.6 76.8h-3.2V80h3.2v-3.2ZM60.8 0h-3.2v3.2h3.2V0ZM60.8 3.2h-3.2v3.2h3.2V3.2ZM60.8 6.4h-3.2v3.2h3.2V6.4Z"
+    fill="#171717" />
+  <path
+    d="M60.8 9.6h-3.2v3.2h3.2V9.6ZM60.8 12.8h-3.2V16h3.2v-3.2ZM60.8 16h-3.2v3.2h3.2V16ZM60.8 19.2h-3.2v3.2h3.2v-3.2ZM60.8 25.6h-3.2v3.2h3.2v-3.2ZM60.8 35.2h-3.2v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path
+    d="M60.8 38.4h-3.2v3.2h3.2v-3.2ZM60.8 44.8h-3.2V48h3.2v-3.2ZM60.8 48h-3.2v3.2h3.2V48ZM60.8 51.2h-3.2v3.2h3.2v-3.2ZM60.8 57.6h-3.2v3.2h3.2v-3.2ZM60.8 64h-3.2v3.2h3.2V64ZM60.8 67.2h-3.2v3.2h3.2v-3.2ZM64 0h-3.2v3.2H64V0ZM64 19.2h-3.2v3.2H64v-3.2ZM64 28.8h-3.2V32H64v-3.2ZM64 38.4h-3.2v3.2H64v-3.2ZM64 48h-3.2v3.2H64V48ZM64 51.2h-3.2v3.2H64v-3.2ZM64 64h-3.2v3.2H64V64ZM64 73.6h-3.2v3.2H64v-3.2ZM67.2 0H64v3.2h3.2V0ZM67.2 6.4H64v3.2h3.2V6.4Z"
+    fill="#171717" />
+  <path
+    d="M67.2 9.6H64v3.2h3.2V9.6ZM67.2 12.8H64V16h3.2v-3.2ZM67.2 19.2H64v3.2h3.2v-3.2ZM67.2 28.8H64V32h3.2v-3.2ZM67.2 41.6H64v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path d="M67.2 44.8H64V48h3.2v-3.2ZM67.2 51.2H64v3.2h3.2v-3.2Z" fill="#171717" />
+  <path d="M67.2 54.4H64v3.2h3.2v-3.2ZM67.2 57.6H64v3.2h3.2v-3.2Z" fill="#171717" />
+  <path d="M67.2 60.8H64V64h3.2v-3.2ZM67.2 64H64v3.2h3.2V64ZM67.2 70.4H64v3.2h3.2v-3.2Z" fill="#171717" />
+  <path d="M67.2 73.6H64v3.2h3.2v-3.2ZM70.4 0h-3.2v3.2h3.2V0ZM70.4 6.4h-3.2v3.2h3.2V6.4Z" fill="#171717" />
+  <path
+    d="M70.4 9.6h-3.2v3.2h3.2V9.6ZM70.4 12.8h-3.2V16h3.2v-3.2ZM70.4 19.2h-3.2v3.2h3.2v-3.2ZM70.4 28.8h-3.2V32h3.2v-3.2ZM70.4 32h-3.2v3.2h3.2V32ZM70.4 35.2h-3.2v3.2h3.2v-3.2ZM70.4 44.8h-3.2V48h3.2v-3.2ZM70.4 48h-3.2v3.2h3.2V48ZM70.4 70.4h-3.2v3.2h3.2v-3.2ZM70.4 76.8h-3.2V80h3.2v-3.2ZM73.6 0h-3.2v3.2h3.2V0Z"
+    fill="#171717" />
+  <path d="M73.6 6.4h-3.2v3.2h3.2V6.4Z" fill="#171717" />
+  <path
+    d="M73.6 9.6h-3.2v3.2h3.2V9.6ZM73.6 12.8h-3.2V16h3.2v-3.2ZM73.6 19.2h-3.2v3.2h3.2v-3.2ZM73.6 28.8h-3.2V32h3.2v-3.2ZM73.6 35.2h-3.2v3.2h3.2v-3.2ZM73.6 44.8h-3.2V48h3.2v-3.2ZM73.6 48h-3.2v3.2h3.2V48ZM73.6 51.2h-3.2v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path d="M73.6 54.4h-3.2v3.2h3.2v-3.2ZM73.6 70.4h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
+  <path
+    d="M73.6 73.6h-3.2v3.2h3.2v-3.2ZM76.8 0h-3.2v3.2h3.2V0ZM76.8 19.2h-3.2v3.2h3.2v-3.2ZM76.8 28.8h-3.2V32h3.2v-3.2ZM76.8 35.2h-3.2v3.2h3.2v-3.2ZM76.8 41.6h-3.2v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path d="M76.8 44.8h-3.2V48h3.2v-3.2ZM76.8 51.2h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
+  <path
+    d="M76.8 54.4h-3.2v3.2h3.2v-3.2ZM76.8 64h-3.2v3.2h3.2V64ZM76.8 67.2h-3.2v3.2h3.2v-3.2ZM76.8 70.4h-3.2v3.2h3.2v-3.2Z"
+    fill="#171717" />
+  <path d="M76.8 73.6h-3.2v3.2h3.2v-3.2ZM80 0h-3.2v3.2H80V0ZM80 3.2h-3.2v3.2H80V3.2ZM80 6.4h-3.2v3.2H80V6.4Z"
+    fill="#171717" />
+  <path
+    d="M80 9.6h-3.2v3.2H80V9.6ZM80 12.8h-3.2V16H80v-3.2ZM80 16h-3.2v3.2H80V16ZM80 19.2h-3.2v3.2H80v-3.2ZM80 25.6h-3.2v3.2H80v-3.2ZM80 32h-3.2v3.2H80V32ZM80 35.2h-3.2v3.2H80v-3.2Z"
+    fill="#171717" />
+  <path
+    d="M80 38.4h-3.2v3.2H80v-3.2ZM80 44.8h-3.2V48H80v-3.2ZM80 48h-3.2v3.2H80V48ZM80 57.6h-3.2v3.2H80v-3.2ZM80 64h-3.2v3.2H80V64ZM80 67.2h-3.2v3.2H80v-3.2ZM80 70.4h-3.2v3.2H80v-3.2Z"
+    fill="#171717" />
+  <path d="M80 73.6h-3.2v3.2H80v-3.2ZM80 76.8h-3.2V80H80v-3.2Z" fill="#171717" />
+</svg>
--- a/src/images/setting.png
+++ b/src/images/setting.png
--- a/src/images/windows.svg
+++ b/src/images/windows.svg
@@ -0,0 +1 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80"><defs><clipPath clipPathUnits="userSpaceOnUse" id="cp1"><path d="m2.92 11.31h25.08v26.02h-25.08z"/></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="cp2"><path d="m34.67 11.31h25.25v26.02h-25.25z"/></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="cp3"><path d="m2.92 42.67h25.08v25.64h-25.08z"/></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="cp4"><path d="m34.67 42.67h25.25v25.64h-25.25z"/></clipPath></defs><style>.a{fill:#00b8db}</style><g clip-path="url(#cp1)"><path class="a" d="m26.9 11.3h-22.8c-0.7 0-1.2 0.5-1.2 1.2v22.8c0 0.6 0.5 1.1 1.2 1.1h22.8c0.6 0 1.1-0.5 1.1-1.1v-22.8c0-0.7-0.5-1.2-1.1-1.2z"/></g><g clip-path="url(#cp2)"><path class="a" d="m58.8 11.3h-22.8c-0.6 0-1.2 0.5-1.2 1.2v22.8c0 0.6 0.6 1.1 1.2 1.1h22.8c0.6 0 1.1-0.5 1.1-1.1v-22.8c0-0.7-0.5-1.2-1.1-1.2z"/></g><g clip-path="url(#cp3)"><path class="a" d="m26.9 43.2h-22.8c-0.7 0-1.2 0.5-1.2 1.2v22.8c0 0.6 0.5 1.1 1.2 1.1h22.8c0.6 0 1.1-0.5 1.1-1.1v-22.8c0-0.7-0.5-1.2-1.1-1.2z"/></g><g clip-path="url(#cp4)"><path class="a" d="m58.8 43.2h-22.8c-0.6 0-1.2 0.5-1.2 1.2v22.8c0 0.6 0.6 1.1 1.2 1.1h22.8c0.6 0 1.1-0.5 1.1-1.1v-22.8c0-0.7-0.5-1.2-1.1-1.2z"/></g></svg>
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './styles/tailwind.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/src/pages/agents/AgentsPage.tsx
+++ b/src/pages/agents/AgentsPage.tsx
@@ -0,0 +1,22 @@
+import { AnimatedSection } from '../../components/AnimatedSection'
+import { DeploySection } from './DeploySection'
+import { GallerySection } from './GallerySection'
+import { BentoSection } from './BentoSection'
+
+export default function AgentsPage() {
+  return (
+    <div>
+      <AnimatedSection>
+        <DeploySection />
+      </AnimatedSection>
+      
+      <AnimatedSection>
+        <GallerySection />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <BentoSection />
+      </AnimatedSection>
+    </div>
+  )
+}
--- a/src/pages/agents/BentoSection.tsx
+++ b/src/pages/agents/BentoSection.tsx
@@ -0,0 +1,75 @@
+import { motion } from 'framer-motion'
+import { Container } from '../../components/Container'
+
+const items = [
+  {
+    title: 'FungiStor',
+    subtitle: 'Long-Term AI Memory',
+    description: 'Erasure coding + compression slash storage bloat by up to 10× vs basic replication. Source-encrypted shards are geo-dispersed—lose pieces, rebuild perfectly from a quorum.',
+  },
+  {
+    title: 'HeroDB',
+    subtitle: 'Active AI Memory',
+    description: 'Multimodal vector+keyword retrieval makes RAG feel instant across text, image, audio. Time-aware, policy-guarded context keeps results fresh while access stays governed.',
+  },
+  {
+    title: 'MOS Sandboxes',
+    subtitle: 'Secure Agent Workspaces',
+    description: 'Attested, signed workspaces spin up ≈5s worldwide—ready to execute. Hardware isolation and scoped egress: run hard, tear down clean, zero residue.',
+  },
+  {
+    title: 'Mycelium Mesh',
+    subtitle: 'Secure Communication Network',
+    description: 'A private, public-key fabric with self-healing multi-path routing. Glides through NATs and firewalls—direct, low-latency, no middlemen.',
+  },
+  {
+    title: 'Deterministic Deployment',
+    subtitle: 'Verifiable Code Execution',
+    description: 'Declare intent, get a hash; remote attestation proves that is what runs. Reproducible builds, signed artifacts, immutable logs—supply chain, sealed.',
+  },
+  {
+    title: 'Agent Coordination',
+    subtitle: 'Sovereign Workflow Management',
+    description: 'Your private agent conducts swarms of specialists in parallel. Policies fan out work; human checkpoints keep you in command.',
+  },
+]
+
+export function BentoSection() {
+  return (
+    <section className="bg-white py-20 lg:py-32">
+      <Container>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8 }}
+          className="mx-auto max-w-3xl text-center mb-16"
+        >
+          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+            Augmented Intelligence Fabric
+          </h2>
+          <p className="mt-6 text-lg text-gray-600">
+            A complete infrastructure for building and deploying AI agents with enterprise-grade security and performance.
+          </p>
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {items.map((item, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              className="rounded-2xl bg-gray-50 border border-gray-200 p-6 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
+            >
+              <h3 className="text-xl font-semibold text-gray-900">{item.title}</h3>
+              <p className="mt-2 text-sm font-medium text-cyan-500">{item.subtitle}</p>
+              <p className="mt-3 text-sm text-gray-600">{item.description}</p>
+            </motion.div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/agents/DeploySection.tsx
+++ b/src/pages/agents/DeploySection.tsx
@@ -0,0 +1,69 @@
+import { motion, useInView } from 'framer-motion'
+import { useRef } from 'react'
+import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
+import { Container } from '../../components/Container'
+
+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,
+  },
+  {
+    name: 'Add Your Knowledge',
+    description:
+      'Connect your data or knowledge base to enable personalized, context-aware results while keeping your information private.',
+    icon: TbCircleNumber2Filled,
+  },
+  {
+    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,
+  },
+]
+
+export function DeploySection() {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true })
+
+  return (
+    <section ref={ref} className="bg-white py-20 lg:py-32">
+      <Container>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+          transition={{ duration: 0.8, delay: 0.1 }}
+          className="mx-auto max-w-3xl text-center"
+        >
+          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+            Deploy Scalable LLMs and AI Agents in Seconds
+          </h2>
+          <p className="mt-6 text-lg text-gray-600">
+            Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control.
+          </p>
+        </motion.div>
+        <motion.ul
+          initial={{ opacity: 0 }}
+          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+          transition={{ duration: 0.5, delay: 0.2, staggerChildren: 0.2 }}
+          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3"
+        >
+          {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-200 bg-gray-50 p-8 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
+            >
+              <feature.icon className="h-8 w-8 mb-4 text-cyan-500" />
+              <h3 className="text-lg font-semibold text-gray-900">{feature.name}</h3>
+              <p className="mt-3 text-sm text-gray-600">{feature.description}</p>
+            </motion.li>
+          ))}
+        </motion.ul>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/agents/GallerySection.tsx
+++ b/src/pages/agents/GallerySection.tsx
@@ -0,0 +1,58 @@
+import { motion } from 'framer-motion'
+import { Container } from '../../components/Container'
+
+const galleryItems = [
+  { text: 'Navigate and interact with any web interface', image: '/images/gallery/interface.jpg' },
+  { text: 'Process documents across all formats', image: '/images/gallery/docs.jpg' },
+  { text: 'Execute multi-step workflows autonomously', image: '/images/gallery/flow.jpg' },
+  { text: 'Manage calendars, emails, and tasks', image: '/images/gallery/calendar.jpg' },
+  { text: 'Perform deep semantic search across all data sources', image: '/images/gallery/data.jpg' },
+  { text: 'Identify patterns in complex datasets', image: '/images/gallery/datasets.jpg' },
+]
+
+export function GallerySection() {
+  return (
+    <section className="bg-gray-50 py-20 lg:py-32">
+      <Container>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8 }}
+          className="mx-auto max-w-3xl text-center mb-16"
+        >
+          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+            Agents with Endless Possibilities.
+          </h2>
+          <p className="mt-6 text-lg text-gray-600">
+            Your private agent coordinates a team of specialists that spin up on demand, collaborate across your world, and deliver end-to-end results. Many agents, one intelligence—yours.
+          </p>
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {galleryItems.map((item, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              className="group relative overflow-hidden rounded-2xl bg-white border border-gray-200 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
+            >
+              <div className="aspect-video overflow-hidden">
+                <img
+                  src={item.image}
+                  alt={item.text}
+                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                />
+              </div>
+              <div className="p-6">
+                <p className="text-sm font-medium text-gray-900">{item.text}</p>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/cloud/CloudCTA.tsx
+++ b/src/pages/cloud/CloudCTA.tsx
@@ -0,0 +1,36 @@
+import { motion } from 'framer-motion'
+import { Container } from '../../components/Container'
+import { Button } from '../../components/Button'
+import { CircleBackground } from '../../components/CircleBackground'
+
+export function CloudCTA() {
+  return (
+    <section className="relative bg-white py-20 lg:py-32 overflow-hidden">
+      <CircleBackground color="cyan" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+      <Container className="relative">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8 }}
+          className="mx-auto max-w-3xl text-center"
+        >
+          <h2 className="text-3xl lg:text-5xl font-medium tracking-tight text-gray-900">
+            Ready to Transform Your Kubernetes Experience?
+          </h2>
+          <p className="mt-6 text-lg lg:text-xl text-gray-600">
+            Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
+          </p>
+          <div className="mt-10 flex flex-wrap gap-4 justify-center">
+            <Button to="/download" variant="solid" color="cyan">
+              Start Your Free Trial
+            </Button>
+            <Button to="https://manual.grid.tf" variant="outline" color="gray">
+              Read Documentation
+            </Button>
+          </div>
+        </motion.div>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/cloud/CloudHero.tsx
+++ b/src/pages/cloud/CloudHero.tsx
@@ -0,0 +1,65 @@
+import { motion } from 'framer-motion'
+import { Globe } from '../../components/ui/Globe'
+import { CountUpNumber } from '../../components/CountUpNumber'
+import { Container } from '../../components/Container'
+
+const stats = [
+  { value: 54958, label: 'CPU Cores' },
+  { value: 1493, label: 'Nodes' },
+  { value: 5388956, label: 'GB Storage' },
+  { value: 44, label: 'Countries' },
+]
+
+export function CloudHero() {
+  return (
+    <section className="relative bg-white py-20 lg:py-32">
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          {/* Text Content */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
+              Mycelium Cloud
+            </h1>
+            <p className="mt-6 text-lg lg:text-xl text-gray-600">
+              Revolutionary Kubernetes platform that transforms how teams deploy and manage cloud-native applications at scale
+            </p>
+          </motion.div>
+
+          {/* Globe */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            className="flex items-center justify-center"
+          >
+            <div className="relative w-full max-w-[500px] aspect-square">
+              <Globe className="w-full h-full" />
+            </div>
+          </motion.div>
+        </div>
+
+        {/* Stats */}
+        <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6">
+          {stats.map((stat, index) => (
+            <motion.div
+              key={stat.label}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
+              className="rounded-2xl bg-gray-50 border border-gray-200 p-6 text-center hover:shadow-md transition-shadow"
+            >
+              <div className="text-2xl lg:text-3xl font-bold text-cyan-500">
+                <CountUpNumber end={stat.value} />
+              </div>
+              <p className="mt-2 text-sm text-gray-600">{stat.label}</p>
+            </motion.div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/cloud/CloudPage.tsx
+++ b/src/pages/cloud/CloudPage.tsx
@@ -0,0 +1,42 @@
+import { AnimatedSection } from '../../components/AnimatedSection'
+import { CloudHero } from './CloudHero'
+import { FeaturesSection } from './FeaturesSection'
+import { MyceliumNetworking } from './MyceliumNetworking'
+import { WebGateway } from './WebGateway'
+import { MultiMaster } from './MultiMaster'
+import { LoadBalancing } from './LoadBalancing'
+import { CloudCTA } from './CloudCTA'
+
+export default function CloudPage() {
+  return (
+    <div>
+      <AnimatedSection>
+        <CloudHero />
+      </AnimatedSection>
+      
+      <AnimatedSection>
+        <FeaturesSection />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <MyceliumNetworking />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <WebGateway />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <MultiMaster />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <LoadBalancing />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <CloudCTA />
+      </AnimatedSection>
+    </div>
+  )
+}
--- a/src/pages/cloud/FeaturesSection.tsx
+++ b/src/pages/cloud/FeaturesSection.tsx
@@ -0,0 +1,75 @@
+import { motion } from 'framer-motion'
+import { Container } from '../../components/Container'
+
+const features = [
+  {
+    icon: '☁️',
+    title: 'Cloud-Native Architecture',
+    description: 'Built for the cloud with support for all major cloud providers and on-premise deployments.',
+  },
+  {
+    icon: '🛡️',
+    title: 'Enterprise Security',
+    description: 'Advanced security features including RBAC, network policies, and compliance monitoring.',
+  },
+  {
+    icon: '📊',
+    title: 'Real-time Monitoring',
+    description: 'Comprehensive monitoring and alerting with detailed metrics and performance insights.',
+  },
+  {
+    icon: '🚀',
+    title: 'One-Click Deployments',
+    description: 'Streamlined deployment process with automated CI/CD pipelines and rollback capabilities.',
+  },
+  {
+    icon: '👥',
+    title: 'Team Collaboration',
+    description: 'Built-in collaboration tools for teams with role-based access and shared workspaces.',
+  },
+  {
+    icon: '⚙️',
+    title: 'Advanced Configuration',
+    description: 'Flexible configuration management with support for Helm charts and custom resources.',
+  },
+]
+
+export function FeaturesSection() {
+  return (
+    <section className="bg-gray-50 py-20 lg:py-32">
+      <Container>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8 }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+            Everything You Need to Succeed
+          </h2>
+          <p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
+            Powerful tools and features designed for modern cloud-native applications
+          </p>
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {features.map((feature, index) => (
+            <motion.div
+              key={feature.title}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              className="rounded-2xl bg-white border border-gray-200 p-8 hover:border-cyan-500 hover:shadow-lg transition-all duration-300 text-center"
+            >
+              <div className="text-4xl mb-4">{feature.icon}</div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-3">{feature.title}</h3>
+              <p className="text-gray-600">{feature.description}</p>
+            </motion.div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/cloud/LoadBalancing.tsx
+++ b/src/pages/cloud/LoadBalancing.tsx
@@ -0,0 +1,52 @@
+import { motion } from 'framer-motion'
+import { Container } from '../../components/Container'
+
+export function LoadBalancing() {
+  return (
+    <section className="bg-gray-50 py-20 lg:py-32">
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          {/* Visual Placeholder */}
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="relative aspect-square rounded-2xl bg-gradient-to-br from-blue-50 to-cyan-50 border border-gray-200 flex items-center justify-center"
+          >
+            <div className="text-center p-8">
+              <div className="text-6xl mb-4">⚖️</div>
+              <p className="text-gray-600">Auto-scaling & Load Balancing</p>
+            </div>
+          </motion.div>
+
+          {/* Content */}
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+          >
+            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+              Effortless Load Balancing & Scaling
+            </h2>
+            <p className="mt-6 text-lg text-gray-600">
+              Mycelium Cloud automatically balances traffic and scales your services up or down based on demand. Enjoy high availability and optimal performance with zero manual intervention.
+            </p>
+            <div className="mt-6 flex flex-wrap gap-3">
+              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
+                Auto-scaling
+              </span>
+              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
+                Built-in load balancing
+              </span>
+              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
+                High availability
+              </span>
+            </div>
+          </motion.div>
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/cloud/MultiMaster.tsx
+++ b/src/pages/cloud/MultiMaster.tsx
@@ -0,0 +1,52 @@
+import { motion } from 'framer-motion'
+import { Container } from '../../components/Container'
+
+export function MultiMaster() {
+  return (
+    <section className="bg-white py-20 lg:py-32">
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          {/* Content */}
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+          >
+            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+              Multi-Master Clusters
+            </h2>
+            <p className="mt-6 text-lg text-gray-600">
+              High-availability Kubernetes clusters with multiple control plane nodes. Automatic failover, leader election, and zero-downtime upgrades built-in.
+            </p>
+            <div className="mt-6 flex flex-wrap gap-3">
+              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
+                HA Control Plane
+              </span>
+              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
+                Automatic Failover
+              </span>
+              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
+                Zero-downtime Upgrades
+              </span>
+            </div>
+          </motion.div>
+
+          {/* Visual Placeholder */}
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="relative aspect-square rounded-2xl bg-gradient-to-br from-cyan-50 to-blue-50 border border-gray-200 flex items-center justify-center"
+          >
+            <div className="text-center p-8">
+              <div className="text-6xl mb-4">⚡</div>
+              <p className="text-gray-600">High Availability Clusters</p>
+            </div>
+          </motion.div>
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/cloud/MyceliumNetworking.tsx
+++ b/src/pages/cloud/MyceliumNetworking.tsx
@@ -0,0 +1,49 @@
+import { motion } from 'framer-motion'
+import { Container } from '../../components/Container'
+
+export function MyceliumNetworking() {
+  return (
+    <section className="bg-white py-20 lg:py-32">
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          {/* Content */}
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+          >
+            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+              Mycelium Networking
+            </h2>
+            <p className="mt-6 text-lg text-gray-600">
+              Ultra-fast, decentralized networking inspired by nature. Mycelium Networking forms a resilient, adaptive mesh that routes around failures and optimizes for speed and security.
+            </p>
+            <div className="mt-6 flex flex-wrap gap-3">
+              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
+                End-to-end encrypted
+              </span>
+              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
+                Nature-inspired
+              </span>
+            </div>
+          </motion.div>
+
+          {/* Visual Placeholder */}
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="relative aspect-square rounded-2xl bg-gradient-to-br from-cyan-50 to-blue-50 border border-gray-200 flex items-center justify-center"
+          >
+            <div className="text-center p-8">
+              <div className="text-6xl mb-4">🕸️</div>
+              <p className="text-gray-600">Decentralized Mesh Network</p>
+            </div>
+          </motion.div>
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/cloud/WebGateway.tsx
+++ b/src/pages/cloud/WebGateway.tsx
@@ -0,0 +1,52 @@
+import { motion } from 'framer-motion'
+import { Container } from '../../components/Container'
+
+export function WebGateway() {
+  return (
+    <section className="bg-gray-50 py-20 lg:py-32">
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          {/* Visual Placeholder */}
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="relative aspect-square rounded-2xl bg-gradient-to-br from-blue-50 to-cyan-50 border border-gray-200 flex items-center justify-center"
+          >
+            <div className="text-center p-8">
+              <div className="text-6xl mb-4">🌐</div>
+              <p className="text-gray-600">Simple Web Gateway</p>
+            </div>
+          </motion.div>
+
+          {/* Content */}
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+          >
+            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+              Simple Web Gateway Access
+            </h2>
+            <p className="mt-6 text-lg text-gray-600">
+              Expose any service to the public web with a simple Kubernetes resource. No complex Ingress controllers. Domain and prefix-based routing is built-in.
+            </p>
+            <div className="mt-6 flex flex-wrap gap-3">
+              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
+                Simple configuration
+              </span>
+              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
+                Built-in routing
+              </span>
+              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
+                No ingress controllers
+              </span>
+            </div>
+          </motion.div>
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/home/HomeHero.tsx
+++ b/src/pages/home/HomeHero.tsx
@@ -0,0 +1,36 @@
+import { motion } from 'framer-motion'
+import { TypeAnimation } from 'react-type-animation'
+import { Container } from '../../components/Container'
+
+export function HomeHero() {
+  return (
+    <section className="relative bg-white py-20 lg:py-32">
+      <Container>
+        <div className="mx-auto max-w-4xl text-center">
+          <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
+            <TypeAnimation
+              sequence={[
+                'Decentralized Autonomous Agentic Cloud.',
+                1000,
+              ]}
+              wrapper="span"
+              speed={50}
+              repeat={0}
+            />
+          </h1>
+
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 1, delay: 1 }}
+            className="mt-8"
+          >
+            <p className="text-lg lg:text-xl text-gray-600">
+              Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
+            </p>
+          </motion.div>
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -0,0 +1,22 @@
+import { AnimatedSection } from '../../components/AnimatedSection'
+import { HomeHero } from './HomeHero'
+import { WorldMapSection } from './WorldMapSection'
+import { StackSection } from './StackSection'
+
+export default function HomePage() {
+  return (
+    <div>
+      <AnimatedSection>
+        <HomeHero />
+      </AnimatedSection>
+      
+      <AnimatedSection>
+        <WorldMapSection />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <StackSection />
+      </AnimatedSection>
+    </div>
+  )
+}
--- a/src/pages/home/StackSection.tsx
+++ b/src/pages/home/StackSection.tsx
@@ -0,0 +1,66 @@
+import { motion } from 'framer-motion'
+import { Container } from '../../components/Container'
+
+const stackData = [
+  {
+    id: 'agent',
+    title: 'Agent Layer',
+    description:
+      'Your sovereign agent with private memory and permissioned data access—always under your control. Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval.',
+  },
+  {
+    id: 'network',
+    title: 'Network Layer',
+    description:
+      'A global, end-to-end encrypted overlay that simply doesn\'t break. Shortest-path routing moves your traffic the fastest way, every time with instant discovery.',
+  },
+  {
+    id: 'cloud',
+    title: 'Cloud Layer',
+    description:
+      'An autonomous, stateless OS that enforces pre-deterministic deployments you define. Workloads are cryptographically bound to your private key—location and access are yours.',
+  },
+]
+
+export function StackSection() {
+  return (
+    <section className="relative bg-white py-20 lg:py-32">
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 items-start">
+          {/* Left Column - Text */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="lg:col-span-1"
+          >
+            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+              The Mycelium Stack
+            </h2>
+            <p className="mt-6 text-lg text-gray-600">
+              Built with Mycelium technology, our AI infrastructure ensures unbreakable networks, complete data sovereignty, ultra-secure agent-human communication, and unhackable data storage systems.
+            </p>
+          </motion.div>
+
+          {/* Right Column - Stack Cards */}
+          <div className="lg:col-span-2 space-y-6">
+            {stackData.map((layer, index) => (
+              <motion.div
+                key={layer.id}
+                initial={{ opacity: 0, x: 20 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className="rounded-2xl bg-gray-50 border border-gray-200 p-6 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
+              >
+                <h3 className="text-xl font-semibold text-gray-900">{layer.title}</h3>
+                <p className="mt-3 text-gray-600">{layer.description}</p>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/home/WorldMapSection.tsx
+++ b/src/pages/home/WorldMapSection.tsx
@@ -0,0 +1,106 @@
+import { motion } from 'framer-motion'
+import { Globe } from '../../components/ui/Globe'
+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/About.tsx
+++ b/src/pages/network/About.tsx
@@ -0,0 +1,41 @@
+import { Button } from '../../components/Button'
+import { CircleBackground } from '../../components/CircleBackground'
+import { Container } from '../../components/Container'
+
+export function About() {
+  return (
+    <section
+      id="about"
+      className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 lg:top-0 top-0"
+    >
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
+      </div>
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl text-center">
+          <h2 className="text-base/7 font-semibold text-cyan-500">Our Mission</h2>
+          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
+            Discover Mycelium
+          </p>
+          <p className="mt-6 text-lg text-gray-300">
+            Mycelium is an unbreakable network, always finding the shortest path and providing 100% secure, peer-to-peer communication. But this is just the beginning.
+          </p>
+          <p className="mt-6 text-lg text-gray-300">
+            Our mission is to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.
+          </p>
+          <div className="mt-8 flex justify-center">
+            <Button
+              to="https://threefold.info/mycelium_network/docs/"
+              as="a"
+              target="_blank"
+              variant="outline"
+              color="white"
+            >
+              Learn More
+            </Button>
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/network/CallToAction.tsx
+++ b/src/pages/network/CallToAction.tsx
@@ -0,0 +1,40 @@
+import { CircleBackground } from '../../components/CircleBackground'
+import { Container } from '../../components/Container'
+import { Button } from '../../components/Button'
+
+export function CallToAction() {
+  return (
+    <section
+      id="get-started"
+      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
+    >
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
+      </div>
+      <Container className="relative">
+        <div className="mx-auto max-w-2xl text-center">
+          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
+            Get Started Today
+          </h2>
+          <p className="mt-6 text-lg text-gray-300">
+            Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.
+          </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
+            </Button>
+            <Button
+              to="https://threefold.info/mycelium_network/docs/"
+              as="a"
+              target="_blank"
+              variant="outline"
+              color="white"
+            >
+              Read Docs
+            </Button>
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/network/Features.tsx
+++ b/src/pages/network/Features.tsx
@@ -0,0 +1,111 @@
+import Pathfinding from './animations/Pathfinding'
+import MessageBus from './animations/MessageBus'
+import ProxyDetection from './animations/ProxyDetection'
+import ProxyForwarding from './animations/ProxyForwarding'
+import ContentDistribution from './animations/ContentDistribution'
+
+export function Features() {
+  return (
+    <section id="features" className="py-24">
+      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
+        <h2 className="text-base/7 font-semibold text-cyan-500">Core Components</h2>
+        <p className="mt-2 max-w-2xl text-3xl lg:text-4xl font-medium tracking-tight text-pretty text-gray-950">
+          Network Capabilities
+        </p>
+        <p className="mt-4 max-w-4xl text-lg text-gray-600">
+          Built for resilience and autonomy, the Mycelium Network dynamically connects nodes through intelligent routing, proxy discovery, and decentralized delivery.
+        </p>
+        <p className="mt-2 max-w-4xl text-lg text-gray-600">
+          Each component — from message passing to content distribution — works in harmony to create a fully self-healing, self-optimizing data mesh.
+        </p>
+        <div className="mt-10 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
+          <div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
+            <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
+              <Pathfinding />
+              <div className="p-10 pt-4">
+                <h3 className="text-sm/4 font-semibold text-cyan-500">Routing</h3>
+                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
+                  Automatic pathfinding
+                </p>
+                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                  The Mycelium Network automatically discovers the shortest and fastest routes between nodes,
+                  ensuring optimal data flow and network efficiency without manual configuration.
+                </p>
+              </div>
+            </div>
+            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
+          </div>
+          <div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
+            <div className="absolute inset-0 rounded-lg bg-white lg:rounded-tr-4xl" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
+              <MessageBus />
+              <div className="p-10 pt-4">
+                <h3 className="text-sm/4 font-semibold text-cyan-500">Communication</h3>
+                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
+                  Distributed message bus
+                </p>
+                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                  Acts as a global message layer that lets nodes exchange information seamlessly.
+                  Enables resilient, asynchronous communication across the entire decentralized mesh.
+                </p>
+              </div>
+            </div>
+            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-tr-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
+          </div>
+          <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
+            <div className="absolute inset-0 rounded-lg bg-white lg:rounded-bl-4xl" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
+              <ProxyDetection className="h-80" />
+              <div className="p-10 pt-4">
+                <h3 className="text-sm/4 font-semibold text-cyan-500">Discovery</h3>
+                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
+                  Automatic proxy detection
+                </p>
+                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                  The system continuously scans for open SOCKS5 proxies within the network,
+                  making it effortless to find available connection points without manual setup.
+                </p>
+              </div>
+            </div>
+            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-bl-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
+          </div>
+          <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
+            <div className="absolute inset-0 rounded-lg bg-white" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
+              <ProxyForwarding className="h-80" />
+              <div className="p-10 pt-4">
+                <h3 className="text-sm/4 font-semibold text-cyan-500">Connectivity</h3>
+                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
+                  Seamless proxy forwarding
+                </p>
+                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                  Local SOCKS5 connections can be forwarded through nearby nodes or remote proxies.
+                  When browsers use the local proxy, traffic moves securely through the mesh—like a built-in VPN.
+                </p>
+              </div>
+            </div>
+            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
+          </div>
+          <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
+            <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-br-4xl" />
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
+              <ContentDistribution className="h-80" />
+              <div className="p-10 pt-4">
+                <h3 className="text-sm/4 font-semibold text-cyan-500">Delivery</h3>
+                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
+                  Decentralized content distribution
+                </p>
+                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                  Mycelium can serve data from distributed 0-DBs, creating a CDN-like layer that delivers
+                  content faster and more reliably—without relying on centralized servers.
+                </p>
+              </div>
+            </div>
+            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-br-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
--- a/src/pages/network/Hero.tsx
+++ b/src/pages/network/Hero.tsx
@@ -0,0 +1,114 @@
+import { useId } from 'react'
+import { Container } from '../../components/Container'
+import { Button } from '../../components/Button'
+
+function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
+  let 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 Hero() {
+  return (
+    <div className="overflow-hidden lg:py-32 lg:pb-0 pb-24">
+      <Container>
+        <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
+          <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
+            <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
+              Mycelium
+            </h1>
+            <h2 className="mt-6 lg:text-2xl text-xl tracking-tight leading-normal text-gray-600">
+              Unleashing the Power of Decentralized Networks
+            </h2>
+            <p className="mt-6 lg:text-xl text-lg text-gray-600 lg:leading-normal leading-tight">
+              Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
+            </p>
+            <p className="mt-6 text-lg text-gray-600">
+              Coming Soon: New Decentralized Features
+            </p>
+            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
+              <Button to="/download" variant="solid" color="cyan">
+                Get Mycelium
+              </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-12 lg:ml-12 ml-0" />
+            <div className="mx-auto h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:px-0 lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-32">
+              <img
+                src="/src/images/phoneframe.png"
+                alt="Mycelium application demo"
+                className="mx-auto max-w-[366px]"
+                width={366}
+                height={729}
+              />
+            </div>
+          </div>
+        </div>
+      </Container>
+    </div>
+  )
+}
--- a/src/pages/network/NetworkPage.tsx
+++ b/src/pages/network/NetworkPage.tsx
@@ -0,0 +1,32 @@
+import { AnimatedSection } from '../../components/AnimatedSection'
+import { Hero } from './Hero'
+import { About } from './About'
+import { Features } from './Features'
+import { PrimaryFeatures } from './PrimaryFeatures'
+import { SecondaryFeatures } from './SecondaryFeatures'
+import { CallToAction } from './CallToAction'
+
+export default function NetworkPage() {
+  return (
+    <>
+      <AnimatedSection>
+        <Hero />
+      </AnimatedSection>
+      <AnimatedSection>
+        <About />
+      </AnimatedSection>
+      <AnimatedSection>
+        <Features />
+      </AnimatedSection>
+      <AnimatedSection>
+        <PrimaryFeatures />
+      </AnimatedSection>
+      <AnimatedSection>
+        <SecondaryFeatures />
+      </AnimatedSection>
+      <AnimatedSection>
+        <CallToAction />
+      </AnimatedSection>
+    </>
+  )
+}
--- a/src/pages/network/PrimaryFeatures.tsx
+++ b/src/pages/network/PrimaryFeatures.tsx
@@ -0,0 +1,28 @@
+import { Container } from '../../components/Container'
+
+export function PrimaryFeatures() {
+  return (
+    <section
+      id="howitworks"
+      aria-label="How Mycelium works"
+      className="bg-gray-900 py-20 sm:py-32"
+    >
+      <Container>
+        <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
+          <h2 className="text-base/7 font-semibold text-cyan-500">How It Works</h2>
+          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
+            How Mycelium Operates
+          </p>
+          <p className="mt-6 text-lg text-gray-300">
+            Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks.
+          </p>
+        </div>
+        <div className="mt-16 text-center">
+          <p className="text-lg text-gray-400">
+            Interactive features demonstration coming soon...
+          </p>
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/network/SecondaryFeatures.tsx
+++ b/src/pages/network/SecondaryFeatures.tsx
@@ -0,0 +1,225 @@
+import { useId } from 'react'
+import { Container } from '../../components/Container'
+
+const features = [
+  {
+    name: 'Quantum Safe Storage Functionality',
+    description:
+      "Mycelium's quantum safe storage enables flexible, scalable, and efficient data distribution across a decentralized network, ensuring redundancy and security.",
+    icon: DeviceArrowIcon,
+  },
+  {
+    name: 'Entry and Exit Points for AI Workloads',
+    description:
+      'Seamlessly connect AI applications to Mycelium, providing optimized and secured data pipelines for training, inference, and real-time processing.',
+    icon: DeviceCardsIcon,
+  },
+  {
+    name: 'Data Storage and Retrieval Mechanisms',
+    description:
+      'Users can choose between storing data locally for quick access or utilizing the distributed grid for enhanced scalability and resilience.',
+    icon: DeviceClockIcon,
+  },
+  {
+    name: 'Integrated Name Services (DNS)',
+    description:
+      'The Integrated DNS system efficiently finds the shortest path between users and websites, automatically balancing loads and identifying alternative routes in case of internet issues.',
+    icon: DeviceListIcon,
+  },
+  {
+    name: 'Frontend/Backend Integration',
+    description:
+      'Mycelium provides seamless integration with existing applications, enabling developers to leverage decentralized storage across both frontend and backend architectures.',
+    icon: DeviceLockIcon,
+  },
+  {
+    name: 'CDN (Content Delivery Network)',
+    description:
+      'Mycelium accelerates data distribution by acting as a decentralized CDN, ensuring fast, secure, and efficient content delivery across global nodes with minimal latency.',
+    icon: DeviceChartIcon,
+  },
+]
+
+function DeviceArrowIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
+        fill="#737373"
+      />
+      <path
+        d="M12 25l8-8m0 0h-6m6 0v6"
+        stroke="#171717"
+        strokeWidth={2}
+        strokeLinecap="round"
+      />
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+    </svg>
+  )
+}
+
+function DeviceCardsIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  let id = useId()
+
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
+        fill="#737373"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 13a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H10a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H10a1 1 0 01-1-1v-2zm1 5a1 1 0 00-1 1v2a1 1 0 001 1h12a1 1 0 001-1v-2a1 1 0 00-1-1H10z"
+        fill={`url(#${id}-gradient)`}
+      />
+      <rect x={9} y={6} width={14} height={4} rx={1} fill="#171717" />
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <defs>
+        <linearGradient
+          id={`${id}-gradient`}
+          x1={16}
+          y1={12}
+          x2={16}
+          y2={28}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#737373" />
+          <stop offset={1} stopColor="#737373" stopOpacity={0} />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+function DeviceClockIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5 4a4 4 0 014-4h14a4 4 0 014 4v10h-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 002 2h5v2H9a4 4 0 01-4-4V4z"
+        fill="#737373"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M24 32a8 8 0 100-16 8 8 0 000 16zm1-8.414V19h-2v5.414l4 4L28.414 27 25 23.586z"
+        fill="#171717"
+      />
+    </svg>
+  )
+}
+
+function DeviceListIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
+        fill="#737373"
+      />
+      <circle cx={11} cy={14} r={2} fill="#171717" />
+      <circle cx={11} cy={20} r={2} fill="#171717" />
+      <circle cx={11} cy={26} r={2} fill="#171717" />
+      <path
+        d="M16 14h6M16 20h6M16 26h6"
+        stroke="#737373"
+        strokeWidth={2}
+        strokeLinecap="square"
+      />
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+    </svg>
+  )
+}
+
+function DeviceLockIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5 4a4 4 0 014-4h14a4 4 0 014 4v10h-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 002 2h5v2H9a4 4 0 01-4-4V4z"
+        fill="#737373"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18 19.5a3.5 3.5 0 117 0V22a2 2 0 012 2v6a2 2 0 01-2 2h-7a2 2 0 01-2-2v-6a2 2 0 012-2v-2.5zm2 2.5h3v-2.5a1.5 1.5 0 00-3 0V22z"
+        fill="#171717"
+      />
+    </svg>
+  )
+}
+
+function DeviceChartIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
+        fill="#737373"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M23 13.838V26a2 2 0 01-2 2H11a2 2 0 01-2-2V15.65l2.57 3.212a1 1 0 001.38.175L15.4 17.2a1 1 0 011.494.353l1.841 3.681c.399.797 1.562.714 1.843-.13L23 13.837z"
+        fill="#171717"
+      />
+      <path
+        d="M10 12h12"
+        stroke="#737373"
+        strokeWidth={2}
+        strokeLinecap="square"
+      />
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+    </svg>
+  )
+}
+
+export function SecondaryFeatures() {
+  return (
+    <section
+      id="comingsoon"
+      aria-label="Features for building a portfolio"
+      className="py-20 sm:py-32"
+    >
+      <Container>
+        <div className="mx-auto max-w-4xl sm:text-center">
+          <h2 className="text-base/7 font-semibold text-cyan-500">Roadmap</h2>
+          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+            Coming Soon: The Future of Mycelium
+          </p>
+          <p className="mt-6 text-lg text-gray-600">
+            Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
+          </p>
+        </div>
+        <ul
+          role="list"
+          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 text-sm sm:mt-20 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-3"
+        >
+          {features.map((feature) => (
+            <li
+              key={feature.name}
+              className="rounded-2xl border border-gray-200 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
+            >
+              <feature.icon className="h-8 w-8" />
+              <h3 className="mt-6 font-semibold text-gray-900">
+                {feature.name}
+              </h3>
+              <p className="mt-2 text-gray-700">{feature.description}</p>
+            </li>
+          ))}
+        </ul>
+      </Container>
+    </section>
+  )
+}
--- a/src/pages/network/animations/ContentDistribution.tsx
+++ b/src/pages/network/animations/ContentDistribution.tsx
@@ -0,0 +1,161 @@
+import { motion, useReducedMotion } from 'framer-motion';
+
+type Props = {
+  className?: string;
+  bg?: string;
+};
+
+const ACCENT = '#00b8db';
+const STROKE = '#111827';
+const GRAY = '#9CA3AF';
+const GRAY_LT = '#E5E7EB';
+
+const IconSquare = () => (
+  <rect x={-14} y={-14} width={28} height={28} rx={6} fill={ACCENT} stroke={STROKE} strokeWidth={3} />
+);
+const IconTriangle = () => (
+  <path d="M 0 -15 L 14 12 L -14 12 Z" fill="#fff" stroke={STROKE} strokeWidth={3} />
+);
+const IconHex = () => (
+  <path
+    d="M 0 -15 L 13 -7 L 13 7 L 0 15 L -13 7 L -13 -7 Z"
+    fill="#fff"
+    stroke={STROKE}
+    strokeWidth={3}
+  />
+);
+const IconBolt = () => (
+  <path d="M -5 -14 L 4 -2 L -1 -2 L 5 14 L -6 1 L -1 1 Z" fill={ACCENT} stroke={STROKE} strokeWidth={3} />
+);
+const IconPlay = () => (
+  <circle r={15} fill="#fff" stroke={STROKE} strokeWidth={3} />
+);
+const IconDB = () => (
+  <>
+    <ellipse cx={0} cy={-10} rx={16} ry={8} fill="#fff" stroke={STROKE} strokeWidth={3} />
+    <rect x={-16} y={-10} width={32} height={20} fill="#fff" stroke={STROKE} strokeWidth={3} />
+    <ellipse cx={0} cy={10} rx={16} ry={8} fill="#fff" stroke={STROKE} strokeWidth={3} />
+  </>
+);
+
+function Cloud({ pulse = true }: { pulse?: boolean }) {
+  const prefersReduced = useReducedMotion();
+  return (
+    <g>
+      <g fill={STROKE}>
+        <circle cx={-18} cy={0} r={14} />
+        <circle cx={0} cy={-10} r={18} />
+        <circle cx={18} cy={0} r={16} />
+        <rect x={-30} y={0} width={54} height={16} rx={8} />
+      </g>
+      <motion.circle
+        r={36}
+        fill="none"
+        stroke={ACCENT}
+        strokeWidth={4}
+        initial={{ opacity: 0.15, scale: 0.9 }}
+        animate={pulse && !prefersReduced ? { opacity: [0.15, 0.35, 0.15], scale: [0.9, 1.05, 0.9] } : {}}
+        transition={{ duration: 1.8, repeat: Infinity }}
+      />
+    </g>
+  );
+}
+
+function Beam({
+  x2,
+  y2,
+  delay = 0,
+}: {
+  x2: number;
+  y2: number;
+  delay?: number;
+}) {
+  const prefersReduced = useReducedMotion();
+  return (
+    <motion.line
+      x1={0}
+      y1={0}
+      x2={x2}
+      y2={y2}
+      stroke={ACCENT}
+      strokeWidth={4}
+      strokeLinecap="round"
+      initial={{ pathLength: 0, opacity: 0.0 }}
+      animate={{ pathLength: 1, opacity: 0.9 }}
+      transition={{
+        duration: prefersReduced ? 0.01 : 0.9,
+        delay,
+        repeat: prefersReduced ? 0 : Infinity,
+        repeatDelay: 1.2,
+        repeatType: 'reverse',
+        ease: [0.22, 1, 0.36, 1],
+      }}
+    />
+  );
+}
+
+export default function ContentDistribution({ className, bg = '#ffffff' }: Props) {
+  const W = 900;
+  const H = 560;
+
+  const rings = [110, 190, 270];
+
+  const layout = [
+    { r: rings[1], a: -20, icon: <IconSquare /> },
+    { r: rings[2], a: 20, icon: <IconTriangle /> },
+    { r: rings[0], a: 155, icon: <IconHex /> },
+    { r: rings[2], a: -145, icon: <IconBolt /> },
+    { r: rings[1], a: 210, icon: <IconDB /> },
+    { r: rings[0], a: 60, icon: <IconPlay /> },
+  ];
+
+  const prefersReduced = useReducedMotion();
+
+  return (
+    <div className={className} aria-hidden="true" role="img" style={{ background: bg }}>
+      <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%">
+        <defs>
+          <radialGradient id="fade" cx="50%" cy="50%" r="60%">
+            <stop offset="0%" stopColor="#ffffff" />
+            <stop offset="100%" stopColor="#ffffff" />
+          </radialGradient>
+        </defs>
+        <rect width={W} height={H} fill="url(#fade)" />
+        <g transform={`translate(${W / 2}, ${H / 2})`}>
+          {rings.map((r, i) => (
+            <circle key={i} r={r} fill="none" stroke={GRAY_LT} strokeWidth={2} />
+          ))}
+
+          <Cloud />
+
+          <motion.g
+            initial={{ rotate: 0 }}
+            animate={{ rotate: prefersReduced ? 0 : 360 }}
+            transition={{ duration: 40, ease: 'linear', repeat: prefersReduced ? 0 : Infinity }}
+          >
+            {layout.map((n, i) => {
+              const rad = (n.a * Math.PI) / 180;
+              const x = n.r * Math.cos(rad);
+              const y = n.r * Math.sin(rad);
+              return <Beam key={`beam-${i}`} x2={x} y2={y} delay={i * 0.15} />;
+            })}
+
+            {layout.map((n, i) => {
+              const rad = (n.a * Math.PI) / 180;
+              const x = n.r * Math.cos(rad);
+              const y = n.r * Math.sin(rad);
+              return (
+                <g key={`badge-${i}`} transform={`translate(${x}, ${y})`}>
+                  <circle r={34} fill="#fff" stroke={GRAY_LT} strokeWidth={3} />
+                  <g transform="scale(1)">
+                    {n.icon}
+                  </g>
+                </g>
+              );
+            })}
+          </motion.g>
+        </g>
+      </svg>
+    </div>
+  );
+}
--- a/src/pages/network/animations/MessageBus.tsx
+++ b/src/pages/network/animations/MessageBus.tsx
@@ -0,0 +1,132 @@
+import { motion, useReducedMotion } from 'framer-motion';
+
+type Props = {
+  className?: string;
+  bg?: string;
+};
+
+const ACCENT = '#00b8db';
+const STROKE = '#111827';
+const GRAY = '#9CA3AF';
+const GRAY_LT = '#E5E7EB';
+
+function Envelope({
+  x, y, w = 88, h = 56, fill = GRAY_LT, accent = false, delay = 0, duration = 1.6,
+  path = 'none',
+  reverse = false,
+}: {
+  x: number; y: number; w?: number; h?: number; fill?: string; accent?: boolean;
+  delay?: number; duration?: number; path?: 'left1'|'left2'|'rightTop'|'rightBottom'|'none'; reverse?: boolean;
+}) {
+  const prefersReduced = useReducedMotion();
+
+  const paths: Record<string, { x: number[]; y: number[] }> = {
+    left1: { x: [x, 380], y: [y, 220] },
+    left2: { x: [x, 380], y: [y, 220] },
+    rightTop: { x: [380, 720], y: [220, 150] },
+    rightBottom: { x: [380, 720], y: [220, 290] },
+    none: { x: [x], y: [y] },
+  };
+
+  const k = paths[path];
+
+  return (
+    <motion.g
+      initial={{ opacity: 0, scale: 0.98 }}
+      animate={{
+        opacity: 1,
+        scale: 1,
+        x: prefersReduced ? 0 : (reverse ? [...k.x].reverse() : k.x),
+        y: prefersReduced ? 0 : (reverse ? [...k.y].reverse() : k.y),
+      }}
+      transition={{
+        delay,
+        duration: prefersReduced ? 0.01 : duration,
+        ease: [0.22, 1, 0.36, 1],
+        repeat: prefersReduced ? 0 : Infinity,
+        repeatDelay: 0.6,
+      }}
+    >
+      <rect x={-w / 2} y={-h / 2} width={w} height={h} rx={8} fill={fill} stroke={STROKE} strokeWidth={3} />
+      <path
+        d={`M ${-w/2+4} ${-h/2+6} L 0 ${-h/2+26} L ${w/2-4} ${-h/2+6}`}
+        fill="none"
+        stroke={accent ? ACCENT : STROKE}
+        strokeWidth={4}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </motion.g>
+  );
+}
+
+export default function MessageBus({ className, bg = '#ffffff' }: Props) {
+  const W = 900;
+  const H = 460;
+
+  return (
+    <div className={className} aria-hidden="true" role="img" style={{ background: bg }}>
+      <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%">
+        <defs>
+          <pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse">
+            <path d="M 24 0 L 0 0 0 24" fill="none" stroke={GRAY_LT} strokeWidth="1" />
+          </pattern>
+        </defs>
+        <rect width={W} height={H} fill="url(#grid)" />
+
+        {[{cx:140,cy:120},{cx:140,cy:340}].map((n,i)=>(
+          <g key={i}>
+            <circle cx={n.cx} cy={n.cy} r={44} fill="#fff" stroke={STROKE} strokeWidth={4}/>
+            <motion.path
+              d={`M ${n.cx+48} ${n.cy} L 320 ${n.cy>200?260:180}`}
+              fill="none" stroke={STROKE} strokeWidth={4} strokeLinecap="round"
+              initial={{ pathLength: 0, opacity: 0.3 }}
+              animate={{ pathLength: 1, opacity: 1 }}
+              transition={{ duration: 0.9, delay: 0.1 + i*0.1, ease: [0.22,1,0.36,1] }}
+            />
+          </g>
+        ))}
+
+        {[{cx:760,cy:120},{cx:760,cy:340}].map((n,i)=>(
+          <g key={i}>
+            <circle cx={n.cx} cy={n.cy} r={44} fill="#fff" stroke={STROKE} strokeWidth={4}/>
+            <motion.path
+              d={`M 560 ${i===0?180:260} L ${n.cx-48} ${n.cy}`}
+              fill="none" stroke={STROKE} strokeWidth={4} strokeLinecap="round"
+              initial={{ pathLength: 0, opacity: 0.3 }}
+              animate={{ pathLength: 1, opacity: 1 }}
+              transition={{ duration: 0.9, delay: 0.2 + i*0.1, ease: [0.22,1,0.36,1] }}
+            />
+          </g>
+        ))}
+
+        <rect x={330} y={150} width={240} height={140} rx={24} fill="#fff" stroke={STROKE} strokeWidth={4} />
+        {[0,1,2].map(i=>(
+          <rect key={i} x={350 + i*76} y={170} width={64} height={100} rx={12} fill="none" stroke={GRAY} strokeWidth={3}/>
+        ))}
+
+        <Envelope x={200} y={120} accent fill="#fff" path="left1" delay={0.0} duration={2.0}/>
+        <Envelope x={200} y={340} fill={GRAY_LT} path="left2" delay={0.4} duration={2.2}/>
+        <Envelope x={200} y={340} accent fill="#fff" path="left2" delay={0.9} duration={2.0}/>
+
+        {[0,1,2].map((i)=>(
+          <motion.g key={i} transform={`translate(${382 + i*76} 220)`}>
+            <motion.rect
+              x={-28} y={-18} width={56} height={36} rx={8}
+              fill={i===2 ? ACCENT : GRAY_LT}
+              stroke={STROKE} strokeWidth={3}
+              initial={{ opacity: 0.6 }}
+              animate={{ opacity: [0.6, 1, 0.6] }}
+              transition={{ duration: 1.8, repeat: Infinity, delay: i*0.2 }}
+            />
+            <path d="M -24 -12 L 0 0 L 24 -12" fill="none" stroke={STROKE} strokeWidth={4} strokeLinecap="round" />
+          </motion.g>
+        ))}
+
+        <Envelope x={560} y={180} accent fill="#fff" path="rightTop" delay={0.6} duration={2.1}/>
+        <Envelope x={560} y={260} fill={GRAY_LT} path="rightBottom" delay={1.0} duration={2.3}/>
+        <Envelope x={560} y={260} accent fill="#fff" path="rightBottom" delay={1.5} duration={2.0}/>
+      </svg>
+    </div>
+  );
+}
--- a/src/pages/network/animations/Pathfinding.tsx
+++ b/src/pages/network/animations/Pathfinding.tsx
@@ -0,0 +1,209 @@
+// Animated SVG illustrating "Automatic pathfinding"
+import { motion, useReducedMotion } from 'framer-motion';
+import clsx from 'clsx';
+
+type Props = {
+  className?: string;
+  accent?: string;
+  stroke?: string;
+  bg?: string;
+};
+
+const Node = ({
+  cx,
+  cy,
+  r = 16,
+  fill = "#00b8db",
+  ring = "#E5E7EB",
+  pulse = false,
+  rMotion = 2,
+}: {
+  cx: number;
+  cy: number;
+  r?: number;
+  fill?: string;
+  ring?: string;
+  pulse?: boolean;
+  rMotion?: number;
+}) => {
+  const prefersReduced = useReducedMotion();
+
+  return (
+    <>
+      <motion.circle
+        cx={cx}
+        cy={cy}
+        r={r + 14}
+        fill="none"
+        stroke={ring}
+        strokeWidth={2}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.6 }}
+      />
+      <motion.circle
+        cx={cx}
+        cy={cy}
+        r={r}
+        fill={fill}
+        initial={{ opacity: 0, scale: 0.8 }}
+        animate={{
+          opacity: 1,
+          scale: pulse && !prefersReduced ? [1, 1 + rMotion / 16, 1] : 1,
+        }}
+        transition={{
+          duration: pulse && !prefersReduced ? 1.8 : 0.6,
+          repeat: pulse && !prefersReduced ? Infinity : 0,
+          repeatType: "loop",
+          ease: [0.22, 1, 0.36, 1],
+        }}
+      />
+    </>
+  );
+};
+
+const Arrow = ({
+  d,
+  color = "#111827",
+  delay = 0,
+}: {
+  d: string;
+  color?: string;
+  delay?: number;
+}) => (
+  <motion.path
+    d={d}
+    fill="none"
+    stroke={color}
+    strokeWidth={3}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    initial={{ pathLength: 0, opacity: 0 }}
+    animate={{ pathLength: 1, opacity: 1 }}
+    transition={{
+      delay,
+      duration: 0.8,
+      ease: [0.22, 1, 0.36, 1],
+    }}
+  />
+);
+
+const DashedPath = ({
+  d,
+  color = "#9CA3AF",
+  dash = 6,
+  delay = 0,
+  loop = false,
+}: {
+  d: string;
+  color?: string;
+  dash?: number;
+  delay?: number;
+  loop?: boolean;
+}) => {
+  const prefersReduced = useReducedMotion();
+
+  return (
+    <motion.path
+      d={d}
+      fill="none"
+      stroke={color}
+      strokeWidth={3}
+      strokeDasharray={dash}
+      strokeLinecap="round"
+      initial={{ pathLength: 0, opacity: 0.4 }}
+      animate={{
+        pathLength: 1,
+        opacity: 1,
+      }}
+      transition={{
+        delay,
+        duration: 0.9,
+        ease: [0.22, 1, 0.36, 1],
+        repeat: !prefersReduced && loop ? Infinity : 0,
+        repeatDelay: 1.2,
+        repeatType: "reverse",
+      }}
+    />
+  );
+};
+
+export default function Pathfinding({
+  className,
+  accent = "#00b8db",
+  stroke = "#111827",
+  bg = "#FFFFFF",
+}: Props) {
+  const W = 760;
+  const H = 420;
+
+  const center = { x: 380, y: 210 };
+  const nodes = [
+    { x: 130, y: 210 },
+    { x: 670, y: 210 },
+    { x: 380, y: 70 },
+    { x: 280, y: 340 },
+    { x: 500, y: 340 },
+  ];
+
+  const arrowTo = (from: { x: number; y: number }, to: { x: number; y: number }) => {
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    const len = Math.hypot(dx, dy);
+    const ux = dx / len;
+    const uy = dy / len;
+    const end = { x: to.x - ux * 18, y: to.y - uy * 18 };
+    const headL = {
+      x: end.x - uy * 8 - ux * 6,
+      y: end.y + ux * 8 - uy * 6,
+    };
+    const headR = {
+      x: end.x + uy * 8 - ux * 6,
+      y: end.y - ux * 8 - uy * 6,
+    };
+    return `M ${from.x} ${from.y} L ${end.x} ${end.y} M ${headL.x} ${headL.y} L ${end.x} ${end.y} L ${headR.x} ${headR.y}`;
+  };
+
+  const highlightA = `M ${nodes[0].x} ${nodes[0].y} L ${center.x} ${center.y}`;
+  const highlightB = `M ${center.x} ${center.y} L ${nodes[4].x} ${nodes[4].y}`;
+
+  const alt1 = `M ${nodes[2].x} ${nodes[2].y} L ${center.x} ${center.y}`;
+  const alt2 = `M ${nodes[3].x} ${nodes[3].y} L ${center.x} ${center.y}`;
+  const alt3 = `M ${center.x} ${center.y} L ${nodes[1].x} ${nodes[1].y}`;
+
+  return (
+    <div
+      className={clsx("relative overflow-hidden", className)}
+      aria-hidden="true"
+      role="img"
+      aria-label="Automatic pathfinding between nodes"
+      style={{ background: bg }}
+    >
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full">
+        <defs>
+          <pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse">
+            <path d="M 24 0 L 0 0 0 24" fill="none" stroke="#F3F4F6" strokeWidth="1" />
+          </pattern>
+        </defs>
+        <rect width={W} height={H} fill="url(#grid)" />
+
+        <DashedPath d={alt1} color="#E5E7EB" dash={5} delay={0.1} />
+        <DashedPath d={alt2} color="#E5E7EB" dash={5} delay={0.2} />
+        <DashedPath d={alt3} color="#E5E7EB" dash={5} delay={0.3} />
+
+        <DashedPath d={highlightA} color={accent} dash={8} delay={0.2} loop />
+        <DashedPath d={highlightB} color={accent} dash={8} delay={0.4} loop />
+
+        <Arrow d={arrowTo(nodes[0], center)} color={stroke} delay={0.1} />
+        <Arrow d={arrowTo(nodes[2], center)} color={stroke} delay={0.2} />
+        <Arrow d={arrowTo(nodes[3], center)} color={stroke} delay={0.25} />
+        <Arrow d={arrowTo(nodes[1], center)} color={stroke} delay={0.3} />
+
+        <Node cx={center.x} cy={center.y} r={18} fill={accent} ring="#E5E7EB" pulse />
+        {nodes.map((n, i) => (
+          <Node key={i} cx={n.x} cy={n.y} r={14} fill="#FFFFFF" ring="#E5E7EB" />
+        ))}
+      </svg>
+    </div>
+  );
+}
--- a/src/pages/network/animations/ProxyDetection.tsx
+++ b/src/pages/network/animations/ProxyDetection.tsx
@@ -0,0 +1,174 @@
+import { motion, useReducedMotion } from 'framer-motion';
+
+type Props = {
+  className?: string;
+  bg?: string;
+};
+
+const ACCENT = '#00b8db';
+const STROKE = '#111827';
+const GRAY = '#9CA3AF';
+const GRAY_LT = '#E5E7EB';
+
+function Magnifier({
+  x = 0,
+  y = 0,
+  flip = false,
+  delay = 0,
+  duration = 3,
+}: {
+  x?: number;
+  y?: number;
+  flip?: boolean;
+  delay?: number;
+  duration?: number;
+}) {
+  const prefersReduced = useReducedMotion();
+
+  return (
+    <motion.g
+      initial={{ x: 0 }}
+      animate={{ x: [0, 520] }}
+      transition={{
+        delay,
+        duration: prefersReduced ? 0.01 : duration,
+        ease: [0.22, 1, 0.36, 1],
+        repeat: prefersReduced ? 0 : Infinity,
+        repeatType: 'reverse',
+        repeatDelay: 0.4,
+      }}
+      transform={`translate(${x}, ${y})`}
+    >
+      <circle cx={0} cy={0} r={38} fill="#fff" stroke={STROKE} strokeWidth={6} />
+      <motion.circle
+        cx={0}
+        cy={0}
+        r={26}
+        fill="none"
+        stroke={ACCENT}
+        strokeWidth={4}
+        initial={{ opacity: 0.15, scale: 0.8 }}
+        animate={{ opacity: [0.15, 0.35, 0.15], scale: [0.8, 1.05, 0.8] }}
+        transition={{ duration: 1.6, repeat: Infinity }}
+      />
+      <g transform={`rotate(${flip ? 40 : -40}) translate(35, 10)`}>
+        <rect x={0} y={-6} width={80} height={12} rx={6} fill={STROKE} />
+        <rect x={0} y={-12} width={14} height={24} rx={6} fill={GRAY} />
+      </g>
+    </motion.g>
+  );
+}
+
+function ServerBox({
+  x,
+  y,
+  w = 88,
+  h = 50,
+  delay = 0,
+  accentPulse = false,
+}: {
+  x: number;
+  y: number;
+  w?: number;
+  h?: number;
+  delay?: number;
+  accentPulse?: boolean;
+}) {
+  const prefersReduced = useReducedMotion();
+
+  return (
+    <motion.g
+      transform={`translate(${x}, ${y})`}
+      initial={{ opacity: 0.6 }}
+      animate={{ opacity: 1 }}
+      transition={{ delay, duration: 0.4 }}
+    >
+      <rect
+        x={-w / 2}
+        y={-h / 2}
+        width={w}
+        height={h}
+        rx={10}
+        fill="#fff"
+        stroke={STROKE}
+        strokeWidth={3}
+      />
+      <rect
+        x={-w / 2 + 6}
+        y={-h / 2 + 8}
+        width={w - 12}
+        height={12}
+        rx={6}
+        fill={GRAY_LT}
+      />
+      <motion.rect
+        x={-w / 2 + 10}
+        y={-h / 2 + 26}
+        width={w - 20}
+        height={10}
+        rx={5}
+        fill={GRAY_LT}
+        initial={{ width: w * 0.2 }}
+        animate={{ width: [w * 0.2, w - 20, w * 0.2] }}
+        transition={{
+          delay,
+          duration: prefersReduced ? 0.01 : 1.8,
+          repeat: prefersReduced ? 0 : Infinity,
+          ease: [0.22, 1, 0.36, 1],
+        }}
+      />
+      <motion.circle
+        cx={w / 2 - 14}
+        cy={h / 2 - 14}
+        r={6}
+        fill={accentPulse ? ACCENT : GRAY}
+        initial={{ scale: 0.9, opacity: 0.8 }}
+        animate={
+          accentPulse && !prefersReduced
+            ? { scale: [0.9, 1.15, 0.9], opacity: [0.8, 1, 0.8] }
+            : { scale: 1, opacity: 0.9 }
+        }
+        transition={{ duration: 1.4, repeat: accentPulse && !prefersReduced ? Infinity : 0 }}
+      />
+    </motion.g>
+  );
+}
+
+export default function ProxyDetection({ className, bg = '#ffffff' }: Props) {
+  const W = 900;
+  const H = 180;
+
+  const rowY = H / 2;
+  const xs = [180, 320, 460, 600, 740];
+  const delays = [0.8, 0.6, 0.4, 0.2, 0.0];
+
+  return (
+    <div
+      className={className}
+      aria-hidden="true"
+      role="img"
+      style={{ background: bg }}
+    >
+      <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%">
+        <defs>
+          <pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse">
+            <path d="M 24 0 L 0 0 0 24" fill="none" stroke={GRAY_LT} strokeWidth="1" />
+          </pattern>
+        </defs>
+        <rect width={W} height={H} fill="url(#grid)" />
+
+        {xs.map((x, i) => (
+          <ServerBox
+            key={`b-${i}`}
+            x={x}
+            y={rowY}
+            delay={delays[i]}
+            accentPulse
+          />
+        ))}
+
+        <Magnifier x={120} y={rowY} flip={true} delay={0.25} duration={3.2} />
+      </svg>
+    </div>
+  );
+}
--- a/src/pages/network/animations/ProxyForwarding.tsx
+++ b/src/pages/network/animations/ProxyForwarding.tsx
@@ -0,0 +1,156 @@
+import { motion, useReducedMotion } from 'framer-motion';
+
+type Props = {
+  className?: string;
+  bg?: string;
+};
+
+const ACCENT = '#00b8db';
+const STROKE = '#111827';
+const GRAY = '#9CA3AF';
+const GRAY_LT = '#E5E7EB';
+
+function Laptop({ x, y }: { x: number; y: number }) {
+  return (
+    <g transform={`translate(${x}, ${y})`}>
+      <rect x={-48} y={-32} width={96} height={64} rx={8} fill="#fff" stroke={STROKE} strokeWidth={3} />
+      <rect x={-44} y={-28} width={88} height={40} rx={6} fill={GRAY_LT} />
+      <rect x={-56} y={32} width={112} height={10} rx={5} fill={STROKE} />
+    </g>
+  );
+}
+
+function ServerStack({ x, y }: { x: number; y: number }) {
+  return (
+    <g transform={`translate(${x}, ${y})`}>
+      {[0, 1, 2].map((i) => (
+        <g key={i} transform={`translate(0, ${-38 + i * 28})`}>
+          <rect x={-56} y={-12} width={112} height={24} rx={8} fill="#fff" stroke={STROKE} strokeWidth={3} />
+          <rect x={-46} y={-6} width={56} height={12} rx={6} fill={GRAY_LT} />
+          <circle cx={20} cy={0} r={4} fill={GRAY} />
+          <circle cx={30} cy={0} r={4} fill={ACCENT} />
+          <circle cx={40} cy={0} r={4} fill={GRAY} />
+        </g>
+      ))}
+      <rect x={-18} y={48} width={36} height={6} rx={3} fill={GRAY} />
+      <rect x={-10} y={54} width={20} height={6} rx={3} fill={ACCENT} />
+    </g>
+  );
+}
+
+function Cloud({ x, y }: { x: number; y: number }) {
+  return (
+    <g transform={`translate(${x}, ${y})`} fill={STROKE}>
+      <circle cx={-30} cy={0} r={18} fill={STROKE} />
+      <circle cx={-8} cy={-10} r={22} fill={STROKE} />
+      <circle cx={16} cy={0} r={20} fill={STROKE} />
+      <rect x={-40} y={0} width={72} height={20} rx={10} fill={STROKE} />
+      <rect x={-46} y={18} width={88} height={6} rx={3} fill={STROKE} />
+    </g>
+  );
+}
+
+function Arrow({ d, delay = 0 }: { d: string; delay?: number }) {
+  return (
+    <motion.path
+      d={d}
+      fill="none"
+      stroke={STROKE}
+      strokeWidth={4}
+      strokeLinecap="round"
+      initial={{ pathLength: 0, opacity: 0.3 }}
+      animate={{ pathLength: 1, opacity: 1 }}
+      transition={{ duration: 0.8, delay, ease: [0.22, 1, 0.36, 1] }}
+    />
+  );
+}
+
+function Packet({
+  xs,
+  ys,
+  delay = 0,
+  color = ACCENT,
+  duration = 2.2,
+}: {
+  xs: number[];
+  ys: number[];
+  delay?: number;
+  color?: string;
+  duration?: number;
+}) {
+  const prefersReduced = useReducedMotion();
+  return (
+    <motion.circle
+      r={6}
+      fill={color}
+      initial={{ x: xs[0], y: ys[0], opacity: 0 }}
+      animate={{
+        x: prefersReduced ? xs[0] : xs,
+        y: prefersReduced ? ys[0] : ys,
+        opacity: 1,
+      }}
+      transition={{
+        delay,
+        duration: prefersReduced ? 0.01 : duration,
+        ease: [0.22, 1, 0.36, 1],
+        repeat: prefersReduced ? 0 : Infinity,
+        repeatDelay: 0.6,
+      }}
+      stroke="#fff"
+      strokeWidth={2}
+    />
+  );
+}
+
+export default function ProxyForwarding({ className, bg = '#ffffff' }: Props) {
+  const W = 1000;
+  const H = 420;
+
+  const C1 = { x: 140, y: 90 };
+  const C2 = { x: 140, y: 210 };
+  const C3 = { x: 140, y: 330 };
+
+  const PROXY = { x: 420, y: 210 };
+  const CLOUD = { x: 640, y: 210 };
+  const DEST = { x: 860, y: 210 };
+
+  return (
+    <div className={className} aria-hidden="true" role="img" style={{ background: bg }}>
+      <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%">
+        <defs>
+          <pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse">
+            <path d="M 24 0 L 0 0 0 24" fill="none" stroke={GRAY_LT} strokeWidth="1" />
+          </pattern>
+        </defs>
+        <rect width={W} height={H} fill="url(#grid)" />
+
+        <Laptop x={C1.x} y={C1.y} />
+        <Laptop x={C2.x} y={C2.y} />
+        <Laptop x={C3.x} y={C3.y} />
+
+        <ServerStack x={PROXY.x} y={PROXY.y} />
+
+        <Cloud x={CLOUD.x} y={CLOUD.y} />
+
+        <ServerStack x={DEST.x} y={DEST.y} />
+
+        <Arrow d={`M ${C1.x + 70} ${C1.y} C 260 ${C1.y}, 320 150, ${PROXY.x - 80} 170`} delay={0.05} />
+        <Arrow d={`M ${C2.x + 70} ${C2.y} L ${PROXY.x - 80} ${PROXY.y}`} delay={0.1} />
+        <Arrow d={`M ${C3.x + 70} ${C3.y} C 260 ${C3.y}, 320 270, ${PROXY.x - 80} 250`} delay={0.15} />
+
+        <Arrow d={`M ${PROXY.x + 80} ${PROXY.y} L ${CLOUD.x - 60} ${CLOUD.y}`} delay={0.2} />
+        <Arrow d={`M ${CLOUD.x + 60} ${CLOUD.y} L ${DEST.x - 80} ${DEST.y}`} delay={0.25} />
+
+        <Packet xs={[C1.x + 70, PROXY.x - 80]} ys={[C1.y, 170]} delay={0.0} />
+        <Packet xs={[C2.x + 70, PROXY.x - 80]} ys={[C2.y, PROXY.y]} delay={0.3} color={GRAY} />
+        <Packet xs={[C3.x + 70, PROXY.x - 80]} ys={[C3.y, 250]} delay={0.6} />
+
+        <Packet xs={[PROXY.x + 80, CLOUD.x - 60]} ys={[PROXY.y, CLOUD.y]} delay={0.4} />
+        <Packet xs={[PROXY.x + 80, CLOUD.x - 60]} ys={[PROXY.y, CLOUD.y]} delay={0.9} color={GRAY} />
+
+        <Packet xs={[CLOUD.x + 60, DEST.x - 80]} ys={[CLOUD.y, DEST.y]} delay={0.7} />
+        <Packet xs={[CLOUD.x + 60, DEST.x - 80]} ys={[CLOUD.y, DEST.y]} delay={1.1} color={GRAY} />
+      </svg>
+    </div>
+  );
+}
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -0,0 +1,83 @@
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/forms';
+
+@theme {
+  --text-*: initial;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.5rem;
+  --text-base: 1rem;
+  --text-base--line-height: 1.5rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 2rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 2rem;
+  --text-3xl: 2rem;
+  --text-3xl--line-height: 3rem;
+  --text-4xl: 2.5rem;
+  --text-4xl--line-height: 3rem;
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+
+  --animate-fade-in: fade-in 0.5s linear forwards;
+  --animate-spin-slow: spin 4s linear infinite;
+  --animate-spin-slower: spin 6s linear infinite;
+  --animate-spin-reverse: spin-reverse 1s linear infinite;
+  --animate-spin-reverse-slow: spin-reverse 4s linear infinite;
+  --animate-spin-reverse-slower: spin-reverse 6s linear infinite;
+
+  --radius-4xl: 2rem;
+  --radius-5xl: 2.5rem;
+
+  --color-gray-50: oklch(0.985 0 0);
+  --color-gray-100: oklch(0.97 0 0);
+  --color-gray-200: oklch(0.922 0 0);
+  --color-gray-300: oklch(0.87 0 0);
+  --color-gray-400: oklch(0.708 0 0);
+  --color-gray-500: oklch(0.556 0 0);
+  --color-gray-600: oklch(0.439 0 0);
+  --color-gray-700: oklch(0.371 0 0);
+  --color-gray-800: oklch(0.269 0 0);
+  --color-gray-900: oklch(0.205 0 0);
+  --color-gray-950: oklch(0.145 0 0);
+
+  --font-sans: var(--font-inter);
+
+  --container-2xl: 40rem;
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes spin-reverse {
+    to {
+      transform: rotate(-360deg);
+    }
+  }
+}
+
+@theme inline {
+  --animate-marquee: marquee var(--marquee-duration) linear infinite;
+
+  @keyframes marquee {
+    100% {
+      transform: translateY(-50%);
+    }
+  }
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
				`@@ -0,0 +1 @@`
				<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80"><defs><clipPath clipPathUnits="userSpaceOnUse" id="cp1"><path d="m2.09 33.33h8.58v24h-8.58z"/></clipPath><clipPath clipPathUnits="userSpaceOnUse" id="cp2"><path d="m13.33 33.33h32v38.19h-32z"/></clipPath></defs><style>.a{fill:#00b8db}</style><g clip-path="url(#cp1)"><path class="a" d="m5.9 33.7c-2.1 0-3.8 1.7-3.8 3.9v15.2c0 2.2 1.7 3.9 3.8 3.9 2.1 0 3.9-1.7 3.9-3.9v-15.2c0-2.2-1.8-3.9-3.9-3.9z"/></g><path class="a" d="m52 33.7c-2.1 0-3.8 1.7-3.8 3.9v15.2c0 2.2 1.7 3.9 3.8 3.9 2.1 0 3.9-1.7 3.9-3.9v-15.2c0-2.2-1.8-3.9-3.9-3.9z"/><g clip-path="url(#cp2)"><path class="a" d="m13.6 56.9c0 2.1 1.7 3.8 3.8 3.8v7.4c0 2.2 1.8 3.9 3.9 3.9 2.1 0 3.8-1.7 3.8-3.9v-7.4h7.7v7.4c0 2.2 1.7 3.9 3.9 3.9 2.1 0 3.8-1.7 3.8-3.9v-7.4c2.1 0 3.8-1.7 3.8-3.8v-22.9h-30.7z"/></g><path class="a" d="m38.6 18l3.4-4.1c0.7-0.8 0.5-2-0.3-2.7-0.8-0.6-2-0.5-2.7 0.3l-3.7 4.5c-1.9-0.9-4.1-1.4-6.3-1.4-2.3 0-4.5 0.5-6.4 1.4l-3.6-4.5c-0.7-0.8-1.9-1-2.8-0.3-0.8 0.7-0.9 1.9-0.2 2.7l3.3 4.2c-3.4 2.8-5.7 7-5.7 11.8h30.7c0-4.8-2.2-9.1-5.7-11.9zm-13.5 6.2c-1 0-1.9-0.9-1.9-1.9 0-1.1 0.9-2 1.9-2 1.1 0 2 0.9 2 2 0 1-0.9 1.9-2 1.9zm7.7 0c-1 0-1.9-0.9-1.9-1.9 0-1.1 0.9-2 1.9-2 1.1 0 1.9 0.9 1.9 2 0 1-0.8 1.9-1.9 1.9z"/></svg>