refactor: remove unused imports from MediaColors and MediaType components

- Removed unused Eyebrow and P imports from MediaColors component
- Removed unused logo_light and logo_dark data arrays from MediaColors component
- Removed unused H4 import from MediaType component

google5dd3a8b700455c0e.html

@@ -0,0 +1 @@
+google-site-verification: google5dd3a8b700455c0e.html

index.html

@@ -4,8 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Project Mycelium - Unleash the Power of Decentralized Networks</title>
-    <meta name="description" content="Project Mycelium's technology enables anyone to deploy their own Internet infrastructure, anywhere." />
+    <meta name="google-site-verification" content="rRrZkMEhdC4yFe_BrENEzYmy2bRfD-VE6RTRiDJNLkg" />
+    <title>Project Mycelium - Built for Digital Sovereignty</title>
+    <meta name="description" content="Discover Project Mycelium. A sovereign peer-to-peer network for private communication, storage, and compute. Build and run your digital environment on infrastructure you control." />
+    <meta name="keywords" content="Project Mycelium, Mycelium, digital sovereignty, decentralized network, peer-to-peer infrastructure, private storage, secure compute, sovereign cloud, edge cloud" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;700&display=swap" rel="stylesheet" />

public/images/mediakit/logo_dark/logomark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" zoomAndPan="magnify" viewBox="0 0 75 74.999997" height="100" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="17cc7c511f"><path d="M 0.679688 0.28125 L 48.441406 0.28125 L 48.441406 5 L 0.679688 5 Z M 0.679688 0.28125 " clip-rule="nonzero"/></clipPath><clipPath id="871aafab52"><path d="M 0.679688 36 L 48.441406 36 L 48.441406 40.601562 L 0.679688 40.601562 Z M 0.679688 36 " clip-rule="nonzero"/></clipPath><clipPath id="08bb39558f"><rect x="0" width="49" y="0" height="41"/></clipPath></defs><g transform="matrix(1, 0, 0, 1, 13, 17)"><g clip-path="url(#08bb39558f)"><g clip-path="url(#17cc7c511f)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 0.434943)" fill="none" stroke-linejoin="miter" d="M -0.00342307 4.000082 L 76.539934 4.000082 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g><path fill="#22d3ee" d="M 3.097656 18.003906 L 29.941406 18.003906 L 29.941406 22.480469 L 3.097656 22.480469 M 34.414062 18.003906 L 45.902344 18.003906 L 45.902344 22.480469 L 34.414062 22.480469 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#871aafab52)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 36.091279)" fill="none" stroke-linejoin="miter" d="M -0.00342307 3.999929 L 76.539934 3.999929 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g></g></g></svg>

public/images/mediakit/logo_light/logomark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" zoomAndPan="magnify" viewBox="0 0 75 74.999997" height="100" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="17cc7c511f"><path d="M 0.679688 0.28125 L 48.441406 0.28125 L 48.441406 5 L 0.679688 5 Z M 0.679688 0.28125 " clip-rule="nonzero"/></clipPath><clipPath id="871aafab52"><path d="M 0.679688 36 L 48.441406 36 L 48.441406 40.601562 L 0.679688 40.601562 Z M 0.679688 36 " clip-rule="nonzero"/></clipPath><clipPath id="08bb39558f"><rect x="0" width="49" y="0" height="41"/></clipPath></defs><g transform="matrix(1, 0, 0, 1, 13, 17)"><g clip-path="url(#08bb39558f)"><g clip-path="url(#17cc7c511f)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 0.434943)" fill="none" stroke-linejoin="miter" d="M -0.00342307 4.000082 L 76.539934 4.000082 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g><path fill="#22d3ee" d="M 3.097656 18.003906 L 29.941406 18.003906 L 29.941406 22.480469 L 3.097656 22.480469 M 34.414062 18.003906 L 45.902344 18.003906 L 45.902344 22.480469 L 34.414062 22.480469 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#871aafab52)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 36.091279)" fill="none" stroke-linejoin="miter" d="M -0.00342307 3.999929 L 76.539934 3.999929 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g></g></g></svg>

src/App.tsx

@@ -12,6 +12,7 @@ const StoragePage = lazy(() => import('./pages/storage/StoragePage'));
 const GpuPage = lazy(() => import('./pages/gpu/GpuPage'));
 const PodsPage = lazy(() => import('./pages/pods/PodsPage'));
 const NodesPage = lazy(() => import('./pages/nodes/NodesPage'));
+const MediaPage = lazy(() => import('./pages/mediakit/MediaPage'));
 
 function ScrollToTop() {
   const { pathname, hash } = useLocation();
@@ -49,6 +50,7 @@ function App() {
                         <Route path="gpu" element={<GpuPage />} />
             <Route path="pods" element={<PodsPage />} />
             <Route path="nodes" element={<NodesPage />} />
+            <Route path="mediakit" element={<MediaPage />} />
           </Route>
         </Routes>
       </Suspense>

src/assets/fonts/Mulish/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Mulish Project Authors (https://github.com/googlefonts/mulish)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/assets/fonts/Mulish/README.txt

@@ -0,0 +1,79 @@
+Mulish Variable Font
+====================
+
+This download contains Mulish as both variable fonts and static fonts.
+
+Mulish is a variable font with this axis:
+  wght
+
+This means all the styles are contained in these files:
+  Mulish/Mulish-VariableFont_wght.ttf
+  Mulish/Mulish-Italic-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Mulish:
+  Mulish/static/Mulish-ExtraLight.ttf
+  Mulish/static/Mulish-Light.ttf
+  Mulish/static/Mulish-Regular.ttf
+  Mulish/static/Mulish-Medium.ttf
+  Mulish/static/Mulish-SemiBold.ttf
+  Mulish/static/Mulish-Bold.ttf
+  Mulish/static/Mulish-ExtraBold.ttf
+  Mulish/static/Mulish-Black.ttf
+  Mulish/static/Mulish-ExtraLightItalic.ttf
+  Mulish/static/Mulish-LightItalic.ttf
+  Mulish/static/Mulish-Italic.ttf
+  Mulish/static/Mulish-MediumItalic.ttf
+  Mulish/static/Mulish-SemiBoldItalic.ttf
+  Mulish/static/Mulish-BoldItalic.ttf
+  Mulish/static/Mulish-ExtraBoldItalic.ttf
+  Mulish/static/Mulish-BlackItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

src/components/Button.tsx

@@ -3,23 +3,30 @@ import clsx from 'clsx'
 
 const baseStyles = {
   solid:
-    'inline-flex justify-center rounded-full py-2 px-5 text-base font-semibold transition-colors',
+    'inline-flex justify-center rounded-full py-2 px-5 text-sm md:text-base font-semibold transition-colors',
   outline:
-    'inline-flex justify-center bg-transparent rounded-full border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(5)-1px)] text-base transition-colors',
+    'inline-flex justify-center bg-transparent font-semibold rounded-full  border border-2 py-[calc(--spacing(2)-1px)] px-[calc(--spacing(5)-1px)] text-sm md:text-base transition-colors',
+  link:
+    'inline-flex items-center text-sm md:text-base font-semibold 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',
+    cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 hover:bg-cyan-400 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-500 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: {
-    cyan: 'border-cyan-500 text-cyan-500',
-    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',
+    cyan: 'border-cyan-500 text-cyan-500 hover:border-cyan-400 hover:text-cyan-400 active:border-cyan-400',
+    gray: 'border-gray-200 text-gray-600 hover:text-cyan-400 hover:border-cyan-400 active:border-cyan-400',
+    white: 'border-gray-300 text-white hover:text-cyan-400 hover:border-cyan-400 active:border-cyan-400',
+  },
+  link: {
+    cyan: 'text-cyan-400 underline hover:text-cyan-300',
+    white: 'text-white underline hover:text-cyan-300',
+    dark: 'text-gray-900 underline hover:text-cyan-400',
   },
 }
 
@@ -30,7 +37,11 @@ type ButtonProps = (
     }
   | {
       variant: 'outline'
-      color?: (keyof typeof variantStyles.outline) | 'cyan'
+      color?: keyof typeof variantStyles.outline
+    }
+  | {
+      variant: 'link'
+      color?: keyof typeof variantStyles.link
     }
 ) &
   (
@@ -43,15 +54,32 @@ type ButtonProps = (
   )
 
 export function Button({ className, as, ...props }: ButtonProps) {
-  props.variant ??= 'solid'
-  props.color ??= 'gray'
+  // Set safe defaults per variant so color always matches a valid palette key
+  if (!props.variant) {
+    props.variant = 'solid'
+  }
+
+  if (!props.color) {
+    if (props.variant === 'solid') {
+      props.color = 'gray'
+    } else if (props.variant === 'outline') {
+      props.color = 'gray'
+    } else if (props.variant === 'link') {
+      props.color = 'cyan'
+    }
+  }
+
+  const variant = props.variant
+  const color = props.color as string
 
   className = clsx(
-    baseStyles[props.variant],
-    props.variant === 'outline'
-      ? variantStyles.outline[props.color]
-      : props.variant === 'solid'
-        ? variantStyles.solid[props.color]
+    baseStyles[variant],
+    variant === 'outline'
+      ? variantStyles.outline[color as keyof typeof variantStyles.outline]
+      : variant === 'solid'
+        ? variantStyles.solid[color as keyof typeof variantStyles.solid]
+        : variant === 'link'
+          ? variantStyles.link[color as keyof typeof variantStyles.link]
           : undefined,
     className,
   )

src/components/Footer.tsx

@@ -8,10 +8,10 @@ export function Footer() {
         <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="/images/logomark.svg" alt="Mycelium Logomark" className="h-15 w-15 flex-none" />
-              <div className="ml-4">
-                <p className="text-base font-semibold">Project Mycelium</p>
-                <p className="mt-1 text-sm">Unleash the Power of Decentralization</p>
+              <img src="/images/logomark.svg" alt="Mycelium Logomark" className="h-20 w-20 flex-none" />
+              <div className="">
+                <p className="text-base lg:text-lg font-semibold">Project Mycelium</p>
+                <p className="mt-1 text-sm">Built for Digital Sovereignty</p>
               </div>
             </div>
             <nav className="mt-10 flex gap-8">
@@ -30,6 +30,9 @@ export function Footer() {
               <Link to="/nodes" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
                 Nodes
               </Link>
+              <Link to="/mediakit" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
+                Media Kit
+              </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">
@@ -49,11 +52,11 @@ export function Footer() {
             </div>
           </div>
         </div>
-        <div className="flex flex-col items-center border-t border-gray-100 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
+        <div className="flex flex-col items-center border-t border-gray-100 py-8 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 href="https://ourworld.tf/" target="_blank" rel="noopener noreferrer" className="font-semibold hover:text-cyan-500 transition-colors">
+              OurWorld
             </a>{' '}
             {new Date().getFullYear()}. All rights reserved.
           </p>

src/components/Header.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { Link } from 'react-router-dom'
 import { Container } from './Container'
 import { Button } from './Button'
-import pmyceliumLogo from '../images/logos/logo_1.png'
+import pmyceliumLogo from '../images/logos/mainlogo.svg'
 import { Dialog } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 

src/components/HeaderDark.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { Link } from 'react-router-dom'
 import { Container } from './Container'
 import { Button } from './Button'
-import pmyceliumLogo from '../images/logos/logo_1.png'
+import pmyceliumLogo from '../images/logos/mainlogo.svg'
 import { Dialog } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 

src/components/Layout.tsx

@@ -1,8 +1,42 @@
+import { useEffect } from 'react'
 import { Outlet } from 'react-router-dom'
 import { Footer } from './Footer'
 import { Header } from './Header'
 
 export function Layout() {
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    if (document.getElementById('mailerlite-universal')) return
+
+    const script = document.createElement('script')
+    script.id = 'mailerlite-universal'
+    script.innerHTML = `
+      (function(m,a,i,l,e,r){
+        m['MailerLiteObject']=e;
+        function f(){
+          var c={a:arguments,q:[]};
+          var r=this.push(c);
+          return "number"!=typeof r?r:f.bind(c.q);
+        }
+        f.q=f.q||[];
+        m[e]=m[e]||f.bind(f.q);
+        m[e].q=m[e].q||f.q;
+        r=a.createElement(i);
+        var _=a.getElementsByTagName(i)[0];
+        r.async=1;
+        r.src=l+'?v'+(~~(new Date().getTime()/1000000));
+        _.parentNode.insertBefore(r,_);
+      })(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
+      window.ml_account = ml('accounts', '1778010', 'x2d3d9f8n1', 'load');
+    `
+
+    document.body.appendChild(script)
+
+    return () => {
+      script.remove()
+    }
+  }, [])
 
   return (
     <div className="bg-[#fdfdfd] antialiased relative" style={{ fontFamily: 'var(--font-inter)' }}>

src/components/Texts.tsx

@@ -12,8 +12,8 @@ const colorVariants = {
   primary: 'text-gray-900',
   secondary: 'text-gray-600',
   light: 'text-gray-50',
-  accent: 'text-cyan-500',
-  cyan: 'text-cyan-50',
+  accent: 'text-cyan-400',
+  cyan: 'text-cyan-400',
   white: 'text-white',
   dark: 'text-gray-950',
   tertiary: 'text-gray-700',
@@ -162,5 +162,5 @@ export const DownloadCardDescription = createTextComponent(
   'text-base/7 leading-normal tracking-normal'
 )
 
-export const CT = createTextComponent('span', 'text-base lg:text-lg font-medium')
-export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-tight font-light')
+export const CT = createTextComponent('span', 'text-base lg:text-lg leading-normal font-medium')
+export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-normal font-light')

src/components/logos/NousResearch.tsx

@@ -1 +0,0 @@
-

src/components/logos/XAI.tsx

@@ -10,7 +10,6 @@ const XAILogo = () => (
         xmlSpace="preserve"
     width="30"
     height="30"
-    fill="white"
   >
     <g>
       <polygon points="557.09,211.99 565.4,538.36 631.96,538.36 640.28,93.18 	" />

src/components/magicui/infinite-moving-cards.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 export const InfiniteMovingCards = ({
   items,
   direction = "left",
-  speed = "fast",
+  speed = "slow",
   pauseOnHover = true,
   className,
 }: {
@@ -15,43 +15,39 @@ export const InfiniteMovingCards = ({
   speed?: "fast" | "normal" | "slow";
   pauseOnHover?: boolean;
   className?: string;
-}): JSX.Element => {
-  const containerRef = React.useRef<HTMLDivElement>(null);
-  const scrollerRef = React.useRef<HTMLUListElement>(null);
-  const [start, setStart] = useState(false);
-
-
-  const getSpeed = useCallback(() => {
-    if (containerRef.current) {
-      if (speed === "fast") {
-        containerRef.current.style.setProperty("--animation-duration", "20s");
-      } else if (speed === "normal") {
-        containerRef.current.style.setProperty("--animation-duration", "40s");
-      } else {
-        containerRef.current.style.setProperty("--animation-duration", "80s");
-      }
-    }
-  }, [speed]);
-
-  const addAnimation = useCallback(() => {
-    if (containerRef.current && scrollerRef.current) {
-      const scrollerContent = Array.from(scrollerRef.current.children);
-
-      scrollerContent.forEach((item) => {
-        const duplicatedItem = item.cloneNode(true);
-        if (scrollerRef.current) {
-          scrollerRef.current.appendChild(duplicatedItem);
-        }
-      });
-
-      getSpeed();
-      setStart(true);
-    }
-  }, [getSpeed]);
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const scrollerRef = useRef<HTMLUListElement>(null);
+  const [isReady, setIsReady] = useState(false);
 
   useEffect(() => {
-    addAnimation();
-  }, [addAnimation]);
+    if (!scrollerRef.current) return;
+
+    const children = Array.from(scrollerRef.current.children);
+
+    // duplicate each item ONCE
+    children.forEach((item) => {
+      const clone = item.cloneNode(true);
+      scrollerRef.current!.appendChild(clone);
+    });
+
+    // set speed variable
+    const duration =
+      speed === "fast" ? "20s" : speed === "normal" ? "40s" : "80s";
+
+    containerRef.current?.style.setProperty(
+      "--animation-duration",
+      duration
+    );
+
+    // set direction variable
+    containerRef.current?.style.setProperty(
+      "--animation-direction",
+      direction === "left" ? "forwards" : "reverse"
+    );
+
+    setIsReady(true);
+  }, [direction, speed]);
 
   return (
     <div
@@ -61,13 +57,16 @@ export const InfiniteMovingCards = ({
       <ul
         ref={scrollerRef}
         className={cn(
-          "flex min-w-full shrink-0 gap-16 py-4 w-max flex-nowrap",
-          start && (direction === "left" ? "animate-scroll-left" : "animate-scroll-right"),
+          "flex w-max shrink-0 gap-16 py-4",
+          isReady &&
+            (direction === "left"
+              ? "animate-infinite-scroll"
+              : "animate-infinite-scroll-right"),
           pauseOnHover && "hover:[animation-play-state:paused]"
         )}
       >
-        {items.map((item, idx) => (
-          <li className="relative flex-shrink-0" key={idx}>
+        {items.map((item, i) => (
+          <li key={i} className="flex-shrink-0">
             {item}
           </li>
         ))}

src/components/ui/DynamicMapContainer.tsx

@@ -0,0 +1,122 @@
+import { useState, useEffect } from 'react';
+import WorldMap from './world-map';
+import { motion } from 'framer-motion'; 
+
+// Interface for the simplified data passed to WorldMap
+interface GeoNode {
+  lat: number;
+  lng: number;
+  label?: string;
+  color?: string;
+}
+
+// Interface for the raw data structure expected from the gridproxy API
+interface RawNode {
+    node_id: number;
+    location: {
+        latitude: string; // API often returns these as strings
+        longitude: string; // API often returns these as strings
+        city: string;
+        country: string;
+    };
+    // ... other raw fields you don't need
+}
+
+const clusterNodes = (nodeList: GeoNode[], cellSize = 2) => {
+  const buckets = new Map<
+    string,
+    { latSum: number; lngSum: number; count: number }
+  >();
+
+  nodeList.forEach((node) => {
+    const latBucket = Math.round(node.lat / cellSize) * cellSize;
+    const lngBucket = Math.round(node.lng / cellSize) * cellSize;
+    const key = `${latBucket}|${lngBucket}`;
+
+    const bucket = buckets.get(key);
+    if (bucket) {
+      bucket.latSum += node.lat;
+      bucket.lngSum += node.lng;
+      bucket.count += 1;
+    } else {
+      buckets.set(key, {
+        latSum: node.lat,
+        lngSum: node.lng,
+        count: 1,
+      });
+    }
+  });
+
+  return Array.from(buckets.values()).map((bucket) => {
+    const avgLat = bucket.latSum / bucket.count;
+    const avgLng = bucket.lngSum / bucket.count;
+    const count = bucket.count;
+
+    let color = "#06b6d4";
+    if (count > 20) {
+      color = "#0891b2";
+    } else if (count > 5) {
+      color = "#22d3ee";
+    }
+
+    return {
+      lat: avgLat,
+      lng: avgLng,
+      color,
+      label: `${count} nodes`,
+    };
+  });
+};
+
+function DynamicMapContainer() {
+  const [loading, setLoading] = useState(true);
+  const [nodes, setNodes] = useState<GeoNode[]>([]);
+  const API_URL = "https://gridproxy.grid.tf/nodes?healthy=true&size=500";
+
+  useEffect(() => {
+    async function fetchNodeData() {
+      try {
+        const response = await fetch(API_URL);
+        const data: RawNode[] = await response.json();
+
+        const geoNodes: GeoNode[] = data
+          .filter((node: RawNode) => node.location && node.location.latitude && node.location.longitude)
+          .map((node: RawNode) => ({
+            lat: parseFloat(node.location.latitude),
+            lng: parseFloat(node.location.longitude),
+            label: `${node.location.city}, ${node.location.country} (${node.node_id})`,
+          }));
+
+        const clusteredNodes = clusterNodes(geoNodes);
+        setNodes(clusteredNodes);
+      } catch (error) {
+        console.error("Failed to fetch node data:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchNodeData();
+  }, []);
+
+  // While fetching, show a loading state
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center w-full aspect-[2/1] bg-[#111111] rounded-lg text-cyan-500">
+        <motion.span
+          animate={{ rotate: 360 }}
+          transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+          className="text-4xl"
+        >
+          🌎
+        </motion.span>
+        <p className="ml-4">Loading nodes...</p>
+      </div>
+    );
+  }
+
+  // After data is loaded, render the map
+  return <WorldMap nodes={nodes} />;
+}
+
+export default DynamicMapContainer;

src/components/ui/world-map.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useRef } from "react";
-import { motion } from "motion/react";
+import { motion } from "framer-motion";
 import DottedMap from "dotted-map";
 
 interface MapProps {
@@ -9,12 +9,15 @@ interface MapProps {
     start: { lat: number; lng: number; label?: string };
     end: { lat: number; lng: number; label?: string };
   }>;
+  // New prop for dynamic standalone nodes
+  nodes?: Array<{ lat: number; lng: number; label?: string; color?: string }>;
   lineColor?: string;
 }
 
 export default function WorldMap({
   dots = [],
-  lineColor = "#06b6d4", // cyan-500
+  nodes = [],
+  lineColor = "#06b6d4",
 }: MapProps) {
   const svgRef = useRef<SVGSVGElement>(null);
 
@@ -22,20 +25,22 @@ export default function WorldMap({
   const map = new DottedMap({ height: 100, grid: "diagonal" });
   const svgMap = map.getSVG({
     radius: 0.22,
-    color: "#06b6d480", // cyan-500 at 50% opacity
+    color: "#06b6d480",
     shape: "circle",
     backgroundColor: "#111111",
   });
 
   // ✅ Point projection stays the same
+  // Projects lat/lng to the SVG's 800x400 viewBox coordinates
   const projectPoint = (lat: number, lng: number) => {
     const x = (lng + 180) * (800 / 360);
-    const y = (90 - lat) * (400 / 180);
+    const y = (90 - lat) * (400 / 180) + 45;
     return { x, y };
   };
 
   const createCurvedPath = (start: any, end: any) => {
     const midX = (start.x + end.x) / 2;
+    // Creates an arc that bows upward by 50 units
     const midY = Math.min(start.y, end.y) - 50; 
     return `M ${start.x} ${start.y} Q ${midX} ${midY} ${end.x} ${end.y}`;
   };
@@ -49,13 +54,53 @@ export default function WorldMap({
         draggable={false}
       />
 
-      {/* ✅ Lines + points */}
+      {/* ✅ Lines + points + new standalone nodes */}
       <svg
         ref={svgRef}
         viewBox="0 0 800 400"
         className="w-full h-full absolute inset-0 pointer-events-none select-none"
       >
-        {/* ✅ animated curved travel lines */}
+        {/* Glowing path gradient DEFS */}
+        <defs>
+          <linearGradient id="path-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="black" stopOpacity="0" />
+            <stop offset="5%" stopColor={lineColor} stopOpacity="1" />
+            <stop offset="95%" stopColor={lineColor} stopOpacity="1" />
+            <stop offset="100%" stopColor="black" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        
+        {/* ✅ DYNAMIC STANDALONE NODE DOTS (New Section) */}
+        {nodes.map((node, i) => {
+          const p = projectPoint(node.lat, node.lng);
+          const dotColor = node.color || lineColor;
+
+          return (
+            <g key={`node-${i}`}>
+              {/* Outer pulsing circle */}
+              <circle cx={p.x} cy={p.y} r="2" fill={dotColor} opacity="0.5">
+                <animate
+                  attributeName="r"
+                  from="2"
+                  to="7"
+                  dur="1.4s"
+                  repeatCount="indefinite"
+                />
+                <animate
+                  attributeName="opacity"
+                  from="0.6"
+                  to="0"
+                  dur="1.4s"
+                  repeatCount="indefinite"
+                />
+              </circle>
+              {/* Inner fixed circle */}
+              <circle cx={p.x} cy={p.y} r="2" fill={dotColor} />
+            </g>
+          );
+        })}
+
+        {/* ✅ Animated curved travel lines (Existing Logic) */}
         {dots.map((dot, i) => {
           const startPoint = projectPoint(dot.start.lat, dot.start.lng);
           const endPoint = projectPoint(dot.end.lat, dot.end.lng);
@@ -78,17 +123,7 @@ export default function WorldMap({
           );
         })}
 
-        {/* ✅ glowing path gradient */}
-        <defs>
-          <linearGradient id="path-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" stopColor="black" stopOpacity="0" />
-            <stop offset="5%" stopColor={lineColor} stopOpacity="1" />
-            <stop offset="95%" stopColor={lineColor} stopOpacity="1" />
-            <stop offset="100%" stopColor="black" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-
-        {/* ✅ start & end points with pulsing cyan glow */}
+        {/* ✅ Start & end points with pulsing cyan glow (Existing Logic) */}
         {dots.map((dot, i) => {
           const s = projectPoint(dot.start.lat, dot.start.lng);
           const e = projectPoint(dot.end.lat, dot.end.lng);

src/images/logos/logomark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77" zoomAndPan="magnify" viewBox="0 0 57.75 54" height="72" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="6b820d2194"><path d="M 0.402344 0 L 57.101562 0 L 57.101562 6 L 0.402344 6 Z M 0.402344 0 " clip-rule="nonzero"/></clipPath><clipPath id="3794aac157"><path d="M 0.402344 23 L 57 23 L 57 30 L 0.402344 30 Z M 0.402344 23 " clip-rule="nonzero"/></clipPath><clipPath id="a8068b094c"><path d="M 0.402344 46 L 57.101562 46 L 57.101562 53 L 0.402344 53 Z M 0.402344 46 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#6b820d2194)"><path stroke-linecap="butt" transform="matrix(0.736364, 0, 0, 0.736364, 0.402273, 0.00000196364)" fill="none" stroke-linejoin="miter" d="M 0.000096737 3.999805 L 76.537522 3.999805 " stroke="#43d7ff" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g><g clip-path="url(#3794aac157)"><path fill="#43d7ff" d="M 0.402344 23.136719 L 35.746094 23.136719 L 35.746094 29.027344 L 0.402344 29.027344 M 41.636719 23.136719 L 56.761719 23.136719 L 56.761719 29.027344 L 41.636719 29.027344 " fill-opacity="1" fill-rule="nonzero"/></g><g clip-path="url(#a8068b094c)"><path stroke-linecap="butt" transform="matrix(0.736364, 0, 0, 0.736364, 0.402273, 46.951043)" fill="none" stroke-linejoin="miter" d="M 0.000096737 4.002635 L 76.537522 4.002635 " stroke="#43d7ff" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g></svg>

src/pages/agents/AgentBento.tsx

@@ -23,7 +23,7 @@ const bentos: {
   {
     id: "core",
     eyebrow: "ARCHITECTURE",
-    title: "Augmented Intelligence Fabric",
+    title: "Intelligence Fabric",
     description:
       "The sovereign substrate for autonomous AI. Stateless, geo-aware, end-to-end encrypted—and verifiable from intent to execution.",
     animation: null,
@@ -123,7 +123,7 @@ export function AgentBento() {
                     <div className="w-full h-full object-cover"><card.animation /></div>
                   </div>
                 ) : (
-                  <div className="h-48 w-full flex items-center justify-center bg-transparent" />
+                  <div className="hidden md:flex md:h-48 w-full items-center justify-center bg-transparent" />
                 )}
 
                 <div className="px-8 pt-4 pb-6">
@@ -136,7 +136,7 @@ export function AgentBento() {
                   ) : (
                     <>
                      {/* ✅ NEW SUBTITLE */}
-                      <p className="text-sm text-cyan-400">{card.subtitle}</p>
+                      <p className="text-sm text-cyan-500">{card.subtitle}</p>
 
                       <p className="mt-1 text-lg font-medium lg:text-xl tracking-tight text-white">
                         {card.title}
@@ -161,6 +161,9 @@ export function AgentBento() {
           ))}
         </div>
       </div>
+      {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b  border-gray-800" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
     </section>
   );
 }

src/pages/agents/AgentHeroAlt.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { Button } from '@/components/Button'
 import { Eyebrow, H3, P } from '@/components/Texts'
 
 export function AgentHeroAlt() {
@@ -8,28 +7,32 @@ export function AgentHeroAlt() {
     <div className="">
       {/* Boxed container */}
       <div
-        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
-        style={{ backgroundImage: "url('/images/agents.webp')", backgroundSize: "contain" }}
+        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden md:bg-[url('/images/agents.webp')] md:bg-contain md:bg-right md:bg-no-repeat"
       >
         {/* Inner padding */}
-        <div className="px-6 py-16 lg:py-16">
-          <div className="max-w-2xl lg:pl-6">
+        <div className="px-6 pt-4 pb-12 lg:py-24">
+          {/* Mobile-only hero image */}
+          <img
+            src="/images/mobile/agents.jpg"
+            alt="Mycelium Agents visual"
+            className="mb-8 w-full object-cover md:hidden"
+          />
+
+          <div className="max-w-xl lg:pl-6">
             <Eyebrow>MYCELIUM AGENTS - COMING IN 2026</Eyebrow>
             <H3 as="h1" className="mt-4">
               Private, Sovereign and Distributed AI You Control
             </H3>
-            <P className="mt-6 text-gray-800">
+            <P className="mt-6 text-gray-600">
               Mycelium Agents let you deploy and run intelligent systems on your own infrastructure.
+            </P>
+            <P className="mt-4 text-gray-600">
 Private, local, and autonomous by design, they give you everything you need to build, host, and connect AI agents without relying on centralized clouds.
             </P>
             
             <div className="mt-10 flex items-center gap-x-6">
-              <Button href="#" variant="solid" color="cyan">
-                Follow Development
-              </Button>
-              <Button href="#" variant="outline">
-                Explore Docs <span aria-hidden="true">→</span>
-              </Button>
+              {/* TODO: Hero CTAs (Follow Development / Explore Docs) to be added when links are ready.
+                  Previously two Buttons here with href="#". */}
             </div>
           </div>
         </div>

src/pages/agents/AgentLogos.tsx

@@ -1,65 +0,0 @@
-import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";
-import Ai21Logo from "@/components/logos/Ai21";
-import ClaudeLogo from "@/components/logos/Claude";
-import BaiduCloudLogo from "@/components/logos/BaiduCloud";
-import ByteDanceLogo from "@/components/logos/ByteDance";
-import DeepSeekLogo from "@/components/logos/DeepSeek";
-import DeepMindLogo from "@/components/logos/DeepMind";
-import MinimaxLogo from "@/components/logos/Minimax";
-import MistralLogo from "@/components/logos/Mistral";
-import MoonshotLogo from "@/components/logos/Moonshot";
-import TencentCloudLogo from "@/components/logos/TencentCloud";
-import OpenAILogo from "@/components/logos/OpenAI";
-import XAILogo from "@/components/logos/XAI";
-
-const logos = [
-  { id: "ai21", Component: Ai21Logo, label: "AI21" },
-  { id: "claude", Component: ClaudeLogo, label: "Claude" },
-  { id: "baidu", Component: BaiduCloudLogo, label: "Baidu Cloud" },
-  { id: "bytedance", Component: ByteDanceLogo, label: "ByteDance" },
-  { id: "deepseek", Component: DeepSeekLogo, label: "DeepSeek" },
-  { id: "deepmind", Component: DeepMindLogo, label: "DeepMind" },
-  { id: "minimax", Component: MinimaxLogo, label: "Minimax" },
-  { id: "mistral", Component: MistralLogo, label: "Mistral" },
-  { id: "moonshot", Component: MoonshotLogo, label: "Moonshot" },
-  { id: "tencent", Component: TencentCloudLogo, label: "Tencent Cloud" },
-  { id: "openai", Component: OpenAILogo, label: "OpenAI" },
-  { id: "xai", Component: XAILogo, label: "xAI" },
-];
-
-const splitLogoRows = () => {
-  const midpoint = Math.ceil(logos.length / 2);
-  return [logos.slice(0, midpoint), logos.slice(midpoint)];
-};
-
-export const AgentLogos = () => {
-  const rows = splitLogoRows();
-
-  return (
-    <section className="relative isolate overflow-hidden bg-[#121212] py-4">
-      <div className="pointer-events-none absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-black to-transparent" />
-      <div className="pointer-events-none absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-black to-transparent" />
-      <div className="flex w-full flex-col gap-1 px-0">
-        {rows.map((row, idx) => (
-          <InfiniteMovingCards
-            key={`logos-row-${idx}`}
-            items={row.map(({ id, Component, label }) => (
-              <div
-                key={id}
-                className="flex h-24 w-36 items-center justify-center bg-transparent px-4"
-                aria-label={label}
-              >
-                <Component />
-              </div>
-            ))}
-            direction={idx % 2 === 0 ? "left" : "right"}
-            speed="slow"
-            pauseOnHover={true}
-            className="w-full"
-          />
-        ))}
-      </div>
-    </section>
-  );
-};
-

src/pages/agents/AgentPro.tsx

@@ -0,0 +1,90 @@
+import { Small } from "@/components/Texts";
+import { Eyebrow, H3, P } from "@/components/Texts";
+
+const highlights = [
+  {
+    label: "Local Execution",
+    title: "Agents run entirely inside your environment.",
+    description:
+      "Models, logic, and memory stay within your own trusted hardware, never behind third-party APIs.",
+  },
+  {
+    label: "Mesh Connectivity",
+    title: "They communicate peer-to-peer across trusted nodes.",
+    description:
+      "Agents form direct encrypted paths between environments, without relays or central servers.",
+  },
+  {
+    label: "Private Data Access",
+    title: "They use your data without sending it elsewhere.",
+    description:
+      "Your datasets, embeddings, and context never leave your boundaries. Processing stays local.",
+  },
+  {
+    label: "Portability",
+    title: "They move with you, not with a cloud provider.",
+    description:
+      "Agents follow your devices, networks, and workflows, remaining sovereign across every location.",
+  },
+];
+
+export function AgentPro() {
+  return (
+    <section className="relative w-full bg-[#FDFDFD] overflow-hidden">
+      {/* Top spacing line */}
+      <div className="max-w-7xl bg-[#FDFDFD] mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="w-full border-t border-l border-r border-gray-100" />
+
+      {/* Intro Block */}
+      <div className="bg-white w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-100">
+        <div className="px-8 py-12 max-w-4xl mx-auto flex flex-col items-center justify-center min-h-[220px] text-center">
+          <Eyebrow className="text-cyan-500">
+            Advantages
+          </Eyebrow>
+
+          <H3 className="mt-4 text-black">
+            Why It’s Different
+          </H3>
+
+          <P className="mt-4 text-gray-700 text-base leading-relaxed">
+            Most AI systems run on centralized clouds, where the models, data, and
+            logic operate behind third-party APIs. Mycelium Agents flip that
+            architecture, it runs entirely inside your environment so control,
+            privacy, and autonomy stay with you.
+          </P>
+        </div>
+
+        {/* Grid */}
+        <div className="grid lg:grid-cols-4">
+          {highlights.map((item) => (
+            <div
+              key={item.title}
+              className="group relative overflow-hidden border border-gray-100 bg-white p-8 transition hover:border-cyan-400/40 hover:bg-white"
+            >
+              {/* Glow */}
+              <div className="absolute inset-0 bg-linear-to-br from-cyan-200/0 via-cyan-100/20 to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
+
+              <div className="relative">
+                <Small className="text-xs uppercase tracking-[0.16em] text-cyan-600">
+                  {item.label}
+                </Small>
+
+                <h3 className="mt-4 text-lg font-semibold leading-tight text-black">
+                  {item.title}
+                </h3>
+
+                <p className="mt-4 text-base leading-relaxed text-gray-600">
+                  {item.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Bottom spacing */}
+      <div className="w-full border-b border-gray-100 bg-[#FDFDFD]" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
+    </section>
+  );
+}

src/pages/agents/AgentUseCase.tsx

@@ -1,9 +1,6 @@
 "use client";
 
-import { useRef } from "react";
-import { Eyebrow, SectionHeader, P } from "@/components/Texts";
-import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
-
+import { Eyebrow,  P, CT, CP, H3} from "@/components/Texts";
 import {
   CpuChipIcon,
   GlobeAltIcon,
@@ -23,7 +20,7 @@ const networkUseCases = [
   {
     title: "Run agents on your own hardware",
     description:
-      "Deploy AI processes on laptops, homelabs, edge nodes, or full clusters — no cloud dependency.",
+      "Deploy AI processes on laptops, homelabs, edge nodes, or full clusters with no cloud dependency.",
     icon: CpuChipIcon,
   },
   {
@@ -50,98 +47,74 @@ const networkUseCases = [
       "Run agents in sectors requiring strict data residency, verified identity, and controlled connectivity.",
     icon: ShieldCheckIcon,
   },
+  {
+    title: "Blend local + remote intelligence",
+    description:
+      "Let lightweight agents run locally while offloading heavy tasks to trusted nodes, maintaining privacy and performance balance.",
+    icon: CpuChipIcon,
+  },
 ];
 
 export function AgentUsecase() {
-  const sliderRef = useRef<HTMLUListElement>(null);
-
-  const scrollLeft = () =>
-    sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" });
-
-  const scrollRight = () =>
-    sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" });
-
   return (
     <section className="w-full max-w-8xl mx-auto bg-transparent">
-
-      {/* ✅ Top horizontal line with spacing */}
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      {/* Top horizontal spacing line */}
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
       <div className="w-full border-t border-l border-r border-gray-100" />
 
-      <div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-slate-200 bg-white overflow-hidden">
-        <ul
-          ref={sliderRef}
-          className="flex overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar"
+      {/* Main framed section */}
+      <div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-100">
+        <div className="mx-auto max-w-3xl sm:text-center px-6 lg:px-8">
+          {/* Intro block (from isIntro item) */}
+          {networkUseCases[0].isIntro && (
+            <>
+              <Eyebrow className="text-cyan-500">{networkUseCases[0].eyebrow}</Eyebrow>
+              <H3
+                className="mt-4 text-gray-900"
               >
-          {networkUseCases.map((item, idx) => (
+                {networkUseCases[0].title}
+              </H3>
+              <P className="mt-4 text-lg text-gray-600">
+                {networkUseCases[0].description}
+              </P>
+            </>
+          )}
+        </div>
+
+        {/* Grid of features (excluding intro) */}
+        <ul
+          role="list"
+          className="mx-auto mt-8 max-w-6xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-y-10 px-6"
+        >
+          {networkUseCases.slice(1).map((item, idx) => (
             <li
               key={idx}
-              className={`snap-start shrink-0 w-[85%] sm:w-[50%] lg:w-[33%] 
-                border border-slate-200 px-10 py-12 relative 
-                ${item.isIntro ? "bg-gray-50/80" : "bg-white"}`}
+              className="rounded-2xl border border-gray-200 p-8 transition-all duration-300 ease-in-out hover:scale-[1.03] hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white"
             >
-              {/* INTRO CARD */}
-              {item.isIntro ? (
-                <div className="flex flex-col justify-between h-full">
-                  <div>
-                    <Eyebrow>{item.eyebrow}</Eyebrow>
-                    <SectionHeader
-                      as="h3"
-                      className="mt-4 text-gray-900 text-xl lg:text-2xl"
-                    >
-                      {item.title}
-                    </SectionHeader>
-                    <P className="mt-4 text-gray-600 text-sm lg:text-base">
-                      {item.description}
-                    </P>
-                  </div>
-
-                  {/* slider buttons */}
-                  <div className="flex items-center gap-x-4 mt-6">
-                    <button
-                      onClick={scrollLeft}
-                      className="h-8 w-8 flex items-center justify-center 
-                        border border-slate-300 rounded-md 
-                        hover:border-cyan-500 transition-colors"
-                    >
-                      <IoArrowBackOutline className="text-gray-600" size={16} />
-                    </button>
-
-                    <button
-                      onClick={scrollRight}
-                      className="h-8 w-8 flex items-center justify-center 
-                        border border-slate-300 rounded-md 
-                        hover:border-cyan-500 transition-colors"
-                    >
-                      <IoArrowForwardOutline className="text-gray-600" size={16} />
-                    </button>
-                  </div>
-                </div>
-              ) : (
-                /* REGULAR CARD */
-                <div className="flex flex-col h-full">
+              {/* Icon */}
               {item.icon && (
-                    <div className="h-12 w-12 flex items-center justify-center rounded-xl bg-gray-100 mb-6">
-                      <item.icon className="h-6 w-6 text-cyan-600" />
+                <div className="h-10 w-10 mb-2 flex items-center justify-center rounded-xl bg-gray-100">
+                  <item.icon className="h-6 w-6 text-cyan-500" />
                 </div>
               )}
 
-                  <p className="text-lg font-semibold text-gray-900">
+              {/* Title */}
+              <CT className="leading-normal text-gray-900">
                 {item.title}
-                  </p>
+              </CT>
 
-                  <p className="mt-2 text-gray-600 leading-snug">
+              {/* Description */}
+              <CP className="mt-2 text-gray-600 text-sm leading-snug">
                 {item.description}
-                  </p>
-                </div>
-              )}
+              </CP>
             </li>
           ))}
         </ul>
       </div>
-      {/* ✅ Bottom horizontal line with spacing */}
+
+      {/* Bottom horizontal line */}
       <div className="w-full border-b border-gray-100" />
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </section>
   );
 }

src/pages/agents/AgentsPage.tsx

@@ -1,11 +1,12 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { DeploySection } from './DeploySection'
-import { AgentLogos } from './AgentLogos'
+import { Companies } from './Companies'
 import { AgentBento } from './AgentBento'
 import { AgentHeroAlt } from './AgentHeroAlt'
 import { CallToAction } from './CallToAction'
 import { AgentUsecase } from './AgentUseCase'
-import { AgentDesign } from './AgentDesign'
+
+import { AgentPro } from './AgentPro'
 
 export default function AgentsPage() {
   return (
@@ -19,7 +20,7 @@ export default function AgentsPage() {
       </AnimatedSection>
 
       <AnimatedSection>
-        <AgentLogos />
+        <Companies />
       </AnimatedSection>
 
       <AnimatedSection>
@@ -31,7 +32,7 @@ export default function AgentsPage() {
       </AnimatedSection>
 
       <AnimatedSection>
-        <AgentDesign />
+        <AgentPro />
       </AnimatedSection>
 
       <AnimatedSection>