feat: add cyan glow effects and new network resilience animation

- Added cyan radial glow SVG to CallToAction components across all product pages for visual consistency
- Created NoSinglePoint animation demonstrating redundant network paths and resilience against single point failures
- Updated HomeArchitecture layout to better center and display animations with improved flex positioning

src/pages/agents/CallToAction.tsx

@@ -15,6 +15,26 @@ export function CallToAction() {
         id="get-started"
         className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
       >
+        {/* ✅ Cyan Radial Glow */}
+        <svg
+          viewBox="0 0 1024 1024"
+          aria-hidden="true"
+          className="absolute top-full left-1/2 w-7xl h-320 -translate-x-1/2 -translate-y-1/2 mask-image mask-[radial-gradient(circle,white,transparent)]"
+        >
+          <circle
+            r={512}
+            cx={512}
+            cy={512}
+            fill="url(#mycelium-cyan-glow)"
+            fillOpacity="0.2"
+          />
+          <defs>
+            <radialGradient id="mycelium-cyan-glow">
+              <stop stopColor="#00e5ff" />
+              <stop offset="1" stopColor="transparent" />
+            </radialGradient>
+          </defs>
+        </svg>
         <Container className="relative">
           <div className="mx-auto max-w-3xl text-center">
             <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">

src/pages/cloud/CalltoAction.tsx

@@ -15,6 +15,26 @@ export function CallToAction() {
         id="get-started"
         className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
       >
+        {/* ✅ Cyan Radial Glow */}
+        <svg
+          viewBox="0 0 1024 1024"
+          aria-hidden="true"
+          className="absolute top-full left-1/2 w-7xl h-320 -translate-x-1/2 -translate-y-1/2 mask-image mask-[radial-gradient(circle,white,transparent)]"
+        >
+          <circle
+            r={512}
+            cx={512}
+            cy={512}
+            fill="url(#mycelium-cyan-glow)"
+            fillOpacity="0.2"
+          />
+          <defs>
+            <radialGradient id="mycelium-cyan-glow">
+              <stop stopColor="#00e5ff" />
+              <stop offset="1" stopColor="transparent" />
+            </radialGradient>
+          </defs>
+        </svg>
     
 
         <Container className="relative">

src/pages/compute/CallToAction.tsx

@@ -15,6 +15,26 @@ export function CallToAction() {
         id="get-started"
         className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
       >
+        {/* ✅ Cyan Radial Glow */}
+        <svg
+          viewBox="0 0 1024 1024"
+          aria-hidden="true"
+          className="absolute top-full left-1/2 w-7xl h-320 -translate-x-1/2 -translate-y-1/2 mask-image mask-[radial-gradient(circle,white,transparent)]"
+        >
+          <circle
+            r={512}
+            cx={512}
+            cy={512}
+            fill="url(#mycelium-cyan-glow)"
+            fillOpacity="0.2"
+          />
+          <defs>
+            <radialGradient id="mycelium-cyan-glow">
+              <stop stopColor="#00e5ff" />
+              <stop offset="1" stopColor="transparent" />
+            </radialGradient>
+          </defs>
+        </svg>
     
 
         <Container className="relative">

src/pages/gpu/CallToAction.tsx

@@ -15,6 +15,26 @@ export function CallToAction() {
         id="get-started"
         className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
       >
+        {/* ✅ Cyan Radial Glow */}
+        <svg
+          viewBox="0 0 1024 1024"
+          aria-hidden="true"
+          className="absolute top-full left-1/2 w-7xl h-320 -translate-x-1/2 -translate-y-1/2 mask-image mask-[radial-gradient(circle,white,transparent)]"
+        >
+          <circle
+            r={512}
+            cx={512}
+            cy={512}
+            fill="url(#mycelium-cyan-glow)"
+            fillOpacity="0.2"
+          />
+          <defs>
+            <radialGradient id="mycelium-cyan-glow">
+              <stop stopColor="#00e5ff" />
+              <stop offset="1" stopColor="transparent" />
+            </radialGradient>
+          </defs>
+        </svg>
     
 
         <Container className="relative">

src/pages/home/HomeArchitecture.tsx

@@ -4,6 +4,7 @@ import { Eyebrow, H3, P } from "@/components/Texts";
 import NoExtraction from "./animations/NoExtraction";
 import NoControl from "./animations/NoControl";
 import NoCentral from "./animations/NoCentral";
+import NoSinglePoint from "./animations/NoSinglePoint";
 
 const deterministicCards = [
   {
@@ -45,7 +46,7 @@ const deterministicCards = [
     title: "No single point of failure.",
     description:
       "No single entity can dictate or censor your online experience.",
-    animation: <NoControl />, // ✅ NEW
+    animation: <NoSinglePoint />, // ✅ NEW
     colSpan: "lg:col-span-2",
     rowSpan: "lg:row-span-1",
     rounded: "",
@@ -76,7 +77,7 @@ export function HomeArchitecture() {
           {deterministicCards.map((card) => (
             <div
               key={card.id}
-              className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 group`}
+              className={`relative flex flex-col ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 group`}
             >
               {/* ✅ Disable wrapper on first card */}
               {!card.noBorder && (
@@ -90,8 +91,8 @@ export function HomeArchitecture() {
               >
                 {/* ✅ SVG Animation instead of images */}
                 {card.animation ? (
-                  <div className="lg:h-64 h-48 w-full overflow-hidden bg-transparent flex items-center">
+                  <div className="lg:h-64 h-48 w-full overflow-hidden bg-transparent flex items-center justify-center">
-                    <div className="w-full h-full">
+                    <div className="w-full h-full object-cover">
                       {card.animation}
                     </div>
                   </div>

src/pages/home/animations/NoSinglePoint.tsx

@@ -0,0 +1,225 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+import clsx from "clsx";
+
+type Props = {
+  className?: string;
+  accent?: string; // cyan
+  bg?: string;     // solid dark background
+  gridStroke?: string;
+};
+
+const W = 720; // 4:3
+const H = 540; // 4:3
+
+export default function NoSinglePoint({
+  className,
+  accent = "#00b8db",
+  bg = "#0b0b0b",
+  gridStroke = "#2b2a2a",
+}: Props) {
+  const prefers = useReducedMotion();
+
+  // Nodes (left source, right dest, top hub, bottom hub, plus two relays)
+  const nodes = {
+    left:  { x: 120, y: H / 2 },
+    right: { x: W - 120, y: H / 2 },
+    top:   { x: W / 2, y: 160 },
+    bot:   { x: W / 2, y: H - 160 },
+    tl:    { x: 240, y: 200 },
+    br:    { x: W - 240, y: H - 200 },
+  };
+
+  // Redundant paths from left → right
+  const upperPath = `M ${nodes.left.x} ${nodes.left.y}
+                     L ${nodes.tl.x} ${nodes.tl.y}
+                     L ${nodes.top.x} ${nodes.top.y}
+                     L ${nodes.right.x} ${nodes.right.y}`;
+
+  const lowerPath = `M ${nodes.left.x} ${nodes.left.y}
+                     L ${nodes.bot.x} ${nodes.bot.y}
+                     L ${nodes.br.x} ${nodes.br.y}
+                     L ${nodes.right.x} ${nodes.right.y}`;
+
+  return (
+    <div
+      className={clsx("relative overflow-hidden", className)}
+      aria-hidden="true"
+      role="img"
+      style={{ background: bg }}
+    >
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full">
+        {/* Subtle dark grid */}
+        <defs>
+          <pattern id="grid-dark-4x3" width="28" height="28" patternUnits="userSpaceOnUse">
+            <path d="M 28 0 L 0 0 0 28" fill="none" stroke={gridStroke} strokeWidth="1" opacity="0.35" />
+          </pattern>
+          <filter id="glow">
+            <feGaussianBlur stdDeviation="3" result="b" />
+            <feMerge>
+              <feMergeNode in="b" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+        <rect width={W} height={H} fill="url(#grid-dark-4x3)" />
+
+        {/* Base links (all potential connectivity) */}
+        {[
+          `M ${nodes.left.x} ${nodes.left.y} L ${nodes.tl.x} ${nodes.tl.y}`,
+          `M ${nodes.tl.x} ${nodes.tl.y} L ${nodes.top.x} ${nodes.top.y}`,
+          `M ${nodes.top.x} ${nodes.top.y} L ${nodes.right.x} ${nodes.right.y}`,
+          `M ${nodes.left.x} ${nodes.left.y} L ${nodes.bot.x} ${nodes.bot.y}`,
+          `M ${nodes.bot.x} ${nodes.bot.y} L ${nodes.br.x} ${nodes.br.y}`,
+          `M ${nodes.br.x} ${nodes.br.y} L ${nodes.right.x} ${nodes.right.y}`,
+          // cross edges (mesh redundancy)
+          `M ${nodes.tl.x} ${nodes.tl.y} L ${nodes.bot.x} ${nodes.bot.y}`,
+          `M ${nodes.top.x} ${nodes.top.y} L ${nodes.br.x} ${nodes.br.y}`,
+        ].map((d, i) => (
+          <motion.path
+            key={`base-${i}`}
+            d={d}
+            stroke="#1e1e1e"
+            strokeWidth={3}
+            strokeLinecap="round"
+            fill="none"
+            initial={{ pathLength: 0, opacity: 0.2 }}
+            animate={{ pathLength: 1, opacity: 0.5 }}
+            transition={{ duration: 0.8, delay: i * 0.05, ease: [0.22, 1, 0.36, 1] }}
+          />
+        ))}
+
+        {/* Highlight the two redundant main routes */}
+        <motion.path
+          d={upperPath}
+          fill="none"
+          stroke="#3a3a3a"
+          strokeWidth={4}
+          strokeLinecap="round"
+          initial={{ pathLength: 0, opacity: 0.6 }}
+          animate={{ pathLength: 1, opacity: 0.6 }}
+          transition={{ duration: 0.9 }}
+        />
+        <motion.path
+          d={lowerPath}
+          fill="none"
+          stroke="#3a3a3a"
+          strokeWidth={4}
+          strokeLinecap="round"
+          initial={{ pathLength: 0, opacity: 0.6 }}
+          animate={{ pathLength: 1, opacity: 0.6 }}
+          transition={{ duration: 0.9, delay: 0.1 }}
+        />
+
+        {/* Cyan accent dash showing “preferred/active” path(s) */}
+        <motion.path
+          d={upperPath}
+          fill="none"
+          stroke={accent}
+          strokeWidth={2}
+          strokeDasharray="10 8"
+          initial={{ pathLength: 0, opacity: 0.8 }}
+          animate={{ pathLength: 1, opacity: [0.8, 0.2, 0.8] }} // will fade as "blocked"
+          transition={{ duration: 1.1, repeat: Infinity, repeatType: "reverse" }}
+          filter="url(#glow)"
+        />
+        <motion.path
+          d={lowerPath}
+          fill="none"
+          stroke={accent}
+          strokeWidth={2}
+          strokeDasharray="10 8"
+          initial={{ pathLength: 0, opacity: 1 }}
+          animate={{ pathLength: 1, opacity: 1 }}
+          transition={{ duration: 1 }}
+          filter="url(#glow)"
+        />
+
+        {/* Moving packets: one tries upper (gets dimmed at top hub), one uses lower and continues */}
+        {!prefers && (
+          <>
+            {/* Upper path packet (dims near top hub to suggest block/censor but NOT stopping overall flow) */}
+            <motion.circle
+              r={5}
+              fill={accent}
+              style={{ offsetPath: `path('${upperPath}')` }}
+              initial={{ offsetDistance: "0%", opacity: 0.9 }}
+              animate={{
+                offsetDistance: ["0%", "100%"],
+                opacity: [0.9, 0.4, 0.9], // subtle dimming cycle
+              }}
+              transition={{ duration: 3.0, repeat: Infinity, ease: "linear" }}
+              filter="url(#glow)"
+            />
+
+            {/* Lower path packet (stable flow) */}
+            <motion.circle
+              r={6}
+              fill={accent}
+              style={{ offsetPath: `path('${lowerPath}')` }}
+              initial={{ offsetDistance: "0%", opacity: 1 }}
+              animate={{ offsetDistance: ["0%", "100%"] }}
+              transition={{ duration: 2.4, repeat: Infinity, ease: "linear" }}
+              filter="url(#glow)"
+            />
+          </>
+        )}
+
+        {/* Nodes */}
+        {Object.values(nodes).map((n, i) => (
+          <g key={`node-${i}`}>
+            <circle cx={n.x} cy={n.y} r={20} fill="#0f0f0f" stroke="#1f1f1f" strokeWidth={2} />
+            <motion.circle
+              cx={n.x}
+              cy={n.y}
+              r={8}
+              fill={i === 2 ? "#0f0f0f" : accent} // top hub inner is dark (to hint “blocked” moment)
+              stroke="#222"
+              strokeWidth={2}
+              animate={
+                !prefers
+                  ? i === 2 // top node (potential choke/attack point) pulses differently
+                    ? { opacity: [0.5, 0.25, 0.5], scale: [1, 0.95, 1] }
+                    : { opacity: [0.9, 1, 0.9], scale: [1, 1.06, 1] }
+                  : { opacity: 1 }
+              }
+              transition={{
+                duration: 2.2,
+                repeat: prefers ? 0 : Infinity,
+                ease: [0.22, 1, 0.36, 1],
+                delay: i * 0.05,
+              }}
+              filter="url(#glow)"
+            />
+          </g>
+        ))}
+
+        {/* A subtle “block” overlay on the top hub (appears/disappears) */}
+        {!prefers && (
+          <motion.g
+            initial={{ opacity: 0 }}
+            animate={{ opacity: [0, 0.7, 0] }}
+            transition={{ duration: 3.2, repeat: Infinity, ease: "easeInOut", delay: 0.8 }}
+          >
+            <circle
+              cx={nodes.top.x}
+              cy={nodes.top.y}
+              r={18}
+              fill="none"
+              stroke="#8b8b8b"
+              strokeWidth={2}
+            />
+            <path
+              d={`M ${nodes.top.x - 10} ${nodes.top.y - 10} L ${nodes.top.x + 10} ${nodes.top.y + 10}
+                  M ${nodes.top.x + 10} ${nodes.top.y - 10} L ${nodes.top.x - 10} ${nodes.top.y + 10}`}
+              stroke="#8b8b8b"
+              strokeWidth={2}
+              strokeLinecap="round"
+            />
+          </motion.g>
+        )}
+      </svg>
+    </div>
+  );
+}

src/pages/network/CallToAction.tsx

@@ -16,6 +16,26 @@ export function CallToAction() {
         id="get-started"
         className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
       >
+        {/* ✅ Cyan Radial Glow */}
+        <svg
+          viewBox="0 0 1024 1024"
+          aria-hidden="true"
+          className="absolute top-full left-1/2 w-7xl h-320 -translate-x-1/2 -translate-y-1/2 mask-image mask-[radial-gradient(circle,white,transparent)]"
+        >
+          <circle
+            r={512}
+            cx={512}
+            cy={512}
+            fill="url(#mycelium-cyan-glow)"
+            fillOpacity="0.2"
+          />
+          <defs>
+            <radialGradient id="mycelium-cyan-glow">
+              <stop stopColor="#00e5ff" />
+              <stop offset="1" stopColor="transparent" />
+            </radialGradient>
+          </defs>
+        </svg>
     
 
         <Container className="relative">

src/pages/network/Hero.tsx

@@ -2,7 +2,8 @@ import { useId } from 'react'
 import { Container } from '@/components/Container'
 import { Button } from '@/components/Button'
 import phoneFrame from '../../images/phoneframe.png'
-import { H3, P, CT } from "@/components/Texts";
+import { H3, P
+  , Eyebrow } from "@/components/Texts";
 
 function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
   let id = useId()
@@ -79,12 +80,12 @@ export function Hero() {
       <Container>
         <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20 px-6 lg:px-8">
           <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">
-            <H3 className="mb-4">
+            <Eyebrow className="mb-4">
               MYCELIUM NETWORK
-            </H3>
+            </Eyebrow>
-            <CT className="mt-8  font-medium text-gray-600 ">
+            <H3 className="mt-8 ">
               The Network Stack for Private, Autonomous Networking
-            </CT>
+            </H3>
             <P className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
               Connect once. Get private networking, censorship-resistant publishing, and on-network AI in one encrypted fabric.
             </P>

src/pages/nodes/CallToAction.tsx

@@ -13,6 +13,26 @@ export function CallToAction() {
         id="get-started"
         className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
       >
+        {/* ✅ Cyan Radial Glow */}
+        <svg
+          viewBox="0 0 1024 1024"
+          aria-hidden="true"
+          className="absolute top-full left-1/2 w-7xl h-320 -translate-x-1/2 -translate-y-1/2 mask-image mask-[radial-gradient(circle,white,transparent)]"
+        >
+          <circle
+            r={512}
+            cx={512}
+            cy={512}
+            fill="url(#mycelium-cyan-glow)"
+            fillOpacity="0.2"
+          />
+          <defs>
+            <radialGradient id="mycelium-cyan-glow">
+              <stop stopColor="#00e5ff" />
+              <stop offset="1" stopColor="transparent" />
+            </radialGradient>
+          </defs>
+        </svg>
         <Container className="relative">
           <div className="mx-auto max-w-3xl text-center">
             <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">

src/pages/nodes/NodeBenefits.tsx

@@ -52,7 +52,7 @@ export function NodeBenefits() {
       <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
       <div className="w-full border-t border-l border-r border-gray-800" />
 
-      <div className="relative px-6 lg:px-12 py-12 bg-[#111111] border border-t-0 border-b-0 border-gray-800 max-w-7xl mx-auto">
+      <div className="relative px-6 lg:px-6 py-12 bg-[#111111] border border-t-0 border-b-0 border-gray-800 max-w-7xl mx-auto">
         {/* Header */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}

src/pages/nodes/NodeHero.tsx

@@ -1,32 +1,32 @@
 'use client'
 
 import { Button } from '@/components/Button'
-import { Eyebrow, H3, P } from '@/components/Texts'
+import { Eyebrow, H3 } from '@/components/Texts'
 
 export function NodeHero() {
   return (
     <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"
+        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/gpuhero2.png')", backgroundSize: "contain" }}
       >
         {/* Inner padding */}
         <div className="px-6 py-16 lg:py-16">
-          <div className="max-w-3xl mx-auto text-center">
+          <div className="max-w-2xl lg:pl-6">
             <Eyebrow>MYCELIUM NODES</Eyebrow>
             <H3 as="h1" className="mt-4">
               Host a Node. Power the Network.
             </H3>
-            <P className="mt-6 text-gray-800">
+            <p className="mt-6 text-lg">
-              The Mycelium Network runs on nodes hosted by people and organizations around the world. Each node adds capacity, resilience, and sovereignty, expanding a global network for private, distributed compute and AI. 
+              The Mycelium Network runs on nodes hosted by people and organizations around the world. Each node adds capacity, resilience, and sovereignty, expanding a global network for private, distributed compute and AI. 
-            </P>
+            </p>
-            
+            <div className="mt-10 flex items-center gap-x-6">
-            <div className="mt-10 flex items-center justify-center gap-x-6">
+              <Button to="#node-getting-started" as="a" variant="solid" color="cyan">
-              <Button href="/host" variant="solid" color="cyan">
+                How it works
-                Host a Node
               </Button>
-              <Button href="#" variant="outline">
+              <Button to="#node-architecture" as="a" variant="outline">
-                Learn More
+                Explore Docs <span aria-hidden="true">→</span>
               </Button>
             </div>
           </div>

src/pages/nodes/NodeProducts.tsx

@@ -137,7 +137,7 @@ export function NodeProducts() {
             {/* CONFIG SELECTOR */}
             <fieldset className="mt-10">
               <legend className="text-sm font-medium text-gray-200">
-                Configuration
+                Choose Your Node Type
               </legend>
 
               <div className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-4">
@@ -160,7 +160,7 @@ export function NodeProducts() {
             </fieldset>
 
             <div className="mt-4">
-              <a className="inline-flex text-sm text-gray-500 hover:text-gray-300 transition">
+              <a href="https://threefold.info/mycelium_economics/docs/category/recommended-nodes" target="_blank" rel="noopener noreferrer" className="inline-flex text-sm text-gray-500 hover:text-gray-300 transition">
                 What config should I choose?
                 <QuestionMarkCircleIcon className="ml-1 w-5 h-5 text-gray-500" />
               </a>
@@ -194,11 +194,7 @@ export function NodeProducts() {
               </a>
             </div>
 
-            {/* Guarantee */}
+           
-            <div className="mt-6 flex items-center text-gray-400 text-sm">
-              <ShieldCheckIcon className="w-6 h-6 text-gray-500 mr-2" />
-              Lifetime Guarantee
-            </div>
           </motion.div>
 
           {/* ------------------------------ */}
@@ -214,7 +210,7 @@ export function NodeProducts() {
             <img
               src={selectedNode.image}
               alt={selectedNode.name}
-              className="w-full max-w-md rounded-2xl border border-gray-800 object-cover"
+              className="max-w-md rounded-2xl "
             />
           </motion.div>
 

src/pages/nodes/NodeSpecs.tsx

@@ -1,97 +1,115 @@
 "use client";
 
-import { Eyebrow, H3, CT, CP, P } from "@/components/Texts";
+import { Container } from "@/components/Container";
+import { Small } from "@/components/Texts";
+
+// Heroicons
+import {
+  ShieldCheckIcon,
+  BoltIcon,
+  GlobeAltIcon,
+  ServerStackIcon,
+  CheckBadgeIcon,
+  CpuChipIcon,
+} from "@heroicons/react/24/solid";
 
 const nodeSpecs = [
   {
-    id: "autonomous",
-    eyebrow: "Self-Running",
     title: "Autonomous Operation",
     description: "Runs autonomously with no central control.",
-    colSpan: "lg:col-span-3",
+    icon: ServerStackIcon,
-    rounded: "max-lg:rounded-t-4xl lg:rounded-tl-4xl",
-    innerRounded: "max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]",
   },
   {
-    id: "encrypted",
-    eyebrow: "Security",
     title: "Encrypted by Default",
     description: "Fully encrypted and identity-based.",
-    colSpan: "lg:col-span-3",
+    icon: ShieldCheckIcon,
-    rounded: "lg:rounded-tr-4xl",
-    innerRounded: "lg:rounded-tr-[calc(2rem+1px)]",
   },
   {
-    id: "efficient",
-    eyebrow: "Performance",
     title: "Energy Efficient",
     description: "Energy-efficient and quiet, designed for 24/7 uptime.",
-    colSpan: "lg:col-span-2",
+    icon: BoltIcon,
-    rounded: "lg:rounded-bl-4xl",
-    innerRounded: "lg:rounded-bl-[calc(2rem+1px)]",
   },
   {
-    id: "uptime",
-    eyebrow: "Reliability",
     title: "Measured Uptime",
     description: "Automatically measures uptime and contribution.",
-    colSpan: "lg:col-span-2",
+    icon: CheckBadgeIcon,
-    rounded: "",
-    innerRounded: "",
   },
   {
-    id: "fullstack",
-    eyebrow: "Compatibility",
     title: "Full Mycelium Stack Support",
     description: "Supports Mycelium Network, Cloud, Pods, and Agents.",
-    colSpan: "lg:col-span-2",
+    icon: GlobeAltIcon,
-    rounded: "max-lg:rounded-b-4xl lg:rounded-br-4xl",
+  },
-    innerRounded: "max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]",
+
+  // ✅ NEW 6th card (to complete the grid)
+  {
+    title: "Edge & Home Ready",
+    description:
+      "Runs seamlessly on compact hardware for edge, home, or micro-datacenter deployments.",
+    icon: CpuChipIcon,
   },
 ];
 
 export function NodeSpecs() {
   return (
-    <div className="bg-white py-24 sm:py-32">
+    <section className="w-full max-w-8xl mx-auto bg-transparent">
-      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
+      {/* Top horizontal spacing */}
-        <Eyebrow>Node Specifications</Eyebrow>
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
-        <H3 className="mt-2">Built for Reliability and Control</H3>
+      <div className="w-full border-t border-l border-r border-gray-100" />
-        <P className="mt-6 max-w-xl">
-          Each node strengthens the network and helps build a more open, sovereign and
-          distributed internet.
-        </P>
 
-        <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
+      <Container className="py-12 border border-t-0 border-b-0 border-gray-100">
-          {nodeSpecs.map((item) => (
+        {/* Header */}
-            <div key={item.id} className={`relative ${item.colSpan}`}>
+        <div className="mx-auto max-w-4xl sm:text-center">
-              {/* BG LAYER */}
+          <h2 className="text-base/7 font-semibold text-cyan-500">
-              <div
+            NODE SPECIFICATIONS
-                className={`absolute inset-0 rounded-lg bg-white ${item.rounded}`}
+          </h2>
-              />
 
-              {/* CONTENT LAYER */}
+          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-              <div
+            Built for Reliability and Control
-                className={`relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${item.innerRounded}`}
+          </p>
-              >
-                <div className="p-10 pt-6">
-                  <h3 className="text-sm/4 font-semibold text-cyan-600">{item.eyebrow}</h3>
-                  <CT className="mt-2 text-lg font-medium tracking-tight text-gray-950">
-                    {item.title}
-                  </CT>
-                  <CP className="mt-2 max-w-lg text-sm/6 text-gray-600">
-                    {item.description}
-                  </CP>
-                </div>
-              </div>
 
-              {/* OUTLINE OVERLAY */}
+          <p className="mt-6 text-lg text-gray-600">
-              <div
+            Each node strengthens the network and helps build a more open,
-                className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${item.rounded}`}
+            sovereign and distributed internet.
-              />
+          </p>
-            </div>
-          ))}
         </div>
-      </div>
+
-    </div>
+        {/* Cards */}
+        <ul
+          role="list"
+          className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6
+                     sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10"
+        >
+          {nodeSpecs.map((item) => {
+            const Icon = item.icon;
+
+            return (
+              <li
+                key={item.title}
+                className="rounded-md border border-gray-100 bg-white p-6 transition-all duration-300
+                           hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 flex flex-col"
+              >
+                {/* Title + label */}
+                <div className="flex items-center justify-between">
+                  <h3 className="font-semibold text-gray-900">
+                    {item.title}
+                  </h3>
+
+                  <Icon className="h-6 w-6 text-cyan-500" />
+                </div>
+
+                {/* Short description */}
+                <p className="mt-4 text-gray-700 leading-snug">
+                  {item.description}
+                </p>
+              </li>
+            );
+          })}
+        </ul>
+      </Container>
+
+      {/* Bottom spacing */}
+      <div className="w-full border-b border-gray-100" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+    </section>
   );
 }

src/pages/pods/CallToAction.tsx

@@ -15,6 +15,26 @@ export function CallToAction() {
         id="get-started"
         className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
       >
+        {/* ✅ Cyan Radial Glow */}
+        <svg
+          viewBox="0 0 1024 1024"
+          aria-hidden="true"
+          className="absolute top-full left-1/2 w-7xl h-320 -translate-x-1/2 -translate-y-1/2 mask-image mask-[radial-gradient(circle,white,transparent)]"
+        >
+          <circle
+            r={512}
+            cx={512}
+            cy={512}
+            fill="url(#mycelium-cyan-glow)"
+            fillOpacity="0.2"
+          />
+          <defs>
+            <radialGradient id="mycelium-cyan-glow">
+              <stop stopColor="#00e5ff" />
+              <stop offset="1" stopColor="transparent" />
+            </radialGradient>
+          </defs>
+        </svg>
         <Container className="relative">
           <div className="mx-auto max-w-3xl text-center">
             <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">

src/pages/pods/Homepod.tsx

@@ -6,7 +6,7 @@ export default function Homepod() {
       {/* 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/pods.png')", backgroundSize: "contain" }}
+        style={{ backgroundImage: "url('/images/computehero11.webp')", backgroundSize: "contain" }}
       >
         {/* Inner padding */}
         <div className="px-6 py-16 lg:py-16">

src/pages/pods/PodsDesign.tsx

@@ -49,10 +49,10 @@ export function PodsDesign() {
   return (
     <div className="bg-white text-gray-900">
       {/* TOP LINE */}
-      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
-      <div className="w-full border-t border-l border-r border-gray-200" />
+      <div className="w-full border-t border-l border-r border-gray-100" />
 
-      <main className="mx-auto max-w-7xl px-6 lg:px-12 py-12 border border-t-0 border-b-0 border-gray-200">
+      <main className="mx-auto max-w-7xl px-6 lg:px-12 py-12 border border-t-0 border-b-0 border-gray-100">
         <div className="mx-auto max-w-2xl lg:max-w-none">
 
           <div className="lg:grid lg:grid-cols-5 lg:items-start lg:gap-x-8">
@@ -61,7 +61,7 @@ export function PodsDesign() {
             <div className="lg:col-span-2 lg:mt-8 mt-2">
               <img
                 alt="Mycelium Federation"
-                src="/images/cloudhosting.webp"
+                src="/images/pod1.png"
                 className="aspect-square w-full object-cover rounded-md"
               />
             </div>
@@ -114,8 +114,8 @@ export function PodsDesign() {
       </main>
 
       {/* BOTTOM LINE */}
-      <div className="w-full border-b border-gray-200" />
+      <div className="w-full border-b border-gray-100" />
-      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
     </div>
   )
 }

src/pages/pods/PodsWhat.tsx

@@ -1,5 +1,12 @@
 "use client";
 
+import {
+  ServerIcon,
+  ShieldCheckIcon,
+  BoltIcon,
+  GlobeAltIcon,
+} from "@heroicons/react/24/solid";
+
 import { Eyebrow, H3 } from "@/components/Texts";
 
 const podCards = [
@@ -8,53 +15,38 @@ const podCards = [
     eyebrow: "Capabilities",
     title: "What is a Pod?",
     description: null,
-    image: null,
+    icon: null,
-    colSpan: "lg:col-span-3",
-    rowSpan: "lg:row-span-1",
     custom: true,
     noBorder: true,
+    colSpan: "lg:col-span-4",
   },
   {
     id: "home",
     title: "Your private digital home on the decentralized internet",
     description:
       "Your Pod is a private digital home where apps, data, and identity live independently of Big Tech and central servers.",
-    image: "/images/test.png",
+    icon: ServerIcon,
-    colSpan: "lg:col-span-3",
-    rowSpan: "lg:row-span-1",
-    rounded: "lg:rounded-tr-4xl max-lg:rounded-t-4xl",
-    innerRounded: "lg:rounded-tr-[calc(2rem+1px)] max-lg:rounded-t-[calc(2rem+1px)]",
   },
   {
     id: "control",
     title: "An always-on space you fully control",
     description:
       "A dedicated, always-on environment you fully command — your own sovereign slice of the network that never goes offline.",
-    image: "/images/test.png",
+    icon: ShieldCheckIcon,
-    colSpan: "lg:col-span-2",
-    rowSpan: "lg:row-span-1",
-    rounded: "lg:rounded-bl-4xl max-lg:rounded-b-4xl",
-    innerRounded: "lg:rounded-bl-[calc(2rem+1px)] max-lg:rounded-b-[calc(2rem+1px)]",
   },
   {
     id: "tools",
     title: "Runs communication, storage, and collaboration tools",
     description:
       "Runs your communication, storage, and collaboration tools in a secure local environment without reliance on outside platforms.",
-    image: "/images/test.png",
+    icon: BoltIcon,
-    colSpan: "lg:col-span-2",
-    rowSpan: "lg:row-span-1",
   },
   {
     id: "networking",
     title: "Fully encrypted, federated peer-to-peer network",
     description:
       "Encrypted, federated peer-to-peer networking that links your Pod directly with trusted devices without intermediaries.",
-    image: "/images/test.png",
+    icon: GlobeAltIcon,
-    colSpan: "lg:col-span-2",
-    rowSpan: "lg:row-span-1",
-    rounded: "lg:rounded-br-4xl max-lg:rounded-b-4xl",
-    innerRounded: "lg:rounded-br-[calc(2rem+1px)] max-lg:rounded-b-[calc(2rem+1px)]",
   },
 ];
 
@@ -62,70 +54,51 @@ export function PodsWhat() {
   return (
     <section className="relative w-full bg-[#121212] overflow-hidden">
       {/* Top horizontal line */}
-      <div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
       <div className="w-full border-t border-l border-r border-gray-800" />
 
-      <div className="mx-auto bg-[#111111] max-w-2xl px-6 lg:max-w-7xl lg:px-10 border border-t-0 border-b-0 border-gray-800">
+      {/* Content container */}
-        <div className="grid grid-cols-1 gap-6 pt-6 lg:grid-cols-6 lg:grid-rows-2 pb-6">
+      <div className="mx-auto bg-[#111111] max-w-7xl px-6 lg:px-10 border border-t-0 border-b-0 border-gray-800">
-          {podCards.map((card) => (
-            <div
-              key={card.id}
-              className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 group`}
-            >
-              {/* Border wrapper for non-intro */}
-              {!card.noBorder && (
-                <div
-                  className={`absolute inset-0 rounded-md border border-gray-800 bg-[#111111] ${card.rounded} group-hover:bg-linear-to-br from-gray-900 to-gray-800`}
-                />
-              )}
 
+        {/* 4-column grid */}
+        <div className="grid grid-cols-1 gap-12 pt-12 lg:grid-cols-4 pb-20">
+          {podCards.map((card) => {
+            const Icon = card.icon;
+
+            return (
               <div
-                className={`relative flex lg:h-90 flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.innerRounded}`}
+                key={card.id}
+                className={`${card.colSpan || ""} flex flex-col ${
+                  card.custom ? "" : "transition-transform duration-300 hover:scale-[1.02]"
+                }`}
               >
-                {/* Image */}
+                {/* Custom Intro Card */}
-                {card.image ? (
+                {card.custom ? (
-                  <div className="lg:h-64 h-48 w-full flex items-center justify-center bg-transparent overflow-hidden">
+                  <>
-                    <img
+                    <Eyebrow>{card.eyebrow}</Eyebrow>
-                      src={card.image}
+                    <H3 className="mt-2 text-white">{card.title}</H3>
-                      alt={card.title}
+                  </>
-                      className="h-full w-auto object-contain opacity-90"
-                    />
-                  </div>
                 ) : (
-                  <div className="h-48 w-full flex items-center justify-center bg-transparent" />
+                  <>
+                    {/* TITLE WITH ICON (matching the TL example) */}
+                    <dt className="flex items-center gap-x-3 text-base font-semibold text-white">
+                      <Icon className="h-6 w-6 text-cyan-500" aria-hidden="true" />
+                      {card.title}
+                    </dt>
+
+                    {/* DESCRIPTION */}
+                    <dd className="mt-4 text-base text-gray-300">
+                      {card.description}
+                    </dd>
+                  </>
                 )}
-
-                {/* Text */}
-                <div className="px-8 pt-4 pb-6">
-                  {card.custom ? (
-                    <>
-                      <Eyebrow>{card.eyebrow}</Eyebrow>
-                      <H3 className="mt-2 text-white">{card.title}</H3>
-                    </>
-                  ) : (
-                    <>
-                      <p className="mt-1 text-lg font-medium lg:text-xl tracking-tight text-white">
-                        {card.title}
-                      </p>
-                      <p className="mt-1 max-w-lg text-sm/6 text-gray-200">
-                        {card.description}
-                      </p>
-                    </>
-                  )}
-                </div>
               </div>
-
+            );
-              {/* Outer shadow */}
+          })}
-              {!card.noBorder && (
-                <div
-                  className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${card.rounded}`}
-                />
-              )}
-            </div>
-          ))}
         </div>
       </div>
 
+      {/* Bottom border */}
       <div className="w-full border-b border-gray-800" />
       <div className="max-w-7xl mx-auto py-6 border-x border-gray-800 border-t-0 border-b-0" />
     </section>

src/pages/storage/CallToAction.tsx

@@ -15,6 +15,26 @@ export function CallToAction() {
         id="get-started"
         className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
       >
+        {/* ✅ Cyan Radial Glow */}
+        <svg
+          viewBox="0 0 1024 1024"
+          aria-hidden="true"
+          className="absolute top-full left-1/2 w-7xl h-320 -translate-x-1/2 -translate-y-1/2 mask-image mask-[radial-gradient(circle,white,transparent)]"
+        >
+          <circle
+            r={512}
+            cx={512}
+            cy={512}
+            fill="url(#mycelium-cyan-glow)"
+            fillOpacity="0.2"
+          />
+          <defs>
+            <radialGradient id="mycelium-cyan-glow">
+              <stop stopColor="#00e5ff" />
+              <stop offset="1" stopColor="transparent" />
+            </radialGradient>
+          </defs>
+        </svg>
         <Container className="relative">
           <div className="mx-auto max-w-3xl text-center">
             <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">