From c962743737a113cc3e00b71283d9785a9a16f9dd Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 19 Nov 2025 18:33:56 +0100
Subject: [PATCH] refactor: adjust text colors, animation positioning, and
 hover effects across multiple components

- Changed AgentHeroAlt and Homepod description text from text-gray-800 to text-gray-600 for softer contrast
- Added vertical translation to animation SVGs: NoCentral (-translate-y-10), DataControl (-translate-y-12), Security (translate-y-6), Resilience (translate-y-5)
- Updated Resilience and Security danger color from red (#ff4d4d) to gray (#9ca3af)
- Changed NodeBenefits card border from border-gray-300
---
 src/pages/agents/AgentHeroAlt.tsx         | 2 +-
 src/pages/home/animations/NoCentral.tsx   | 2 +-
 src/pages/nodes/NodeBenefits.tsx          | 2 +-
 src/pages/nodes/NodeSpecs.tsx             | 6 +++---
 src/pages/pods/Homepod.tsx                | 2 +-
 src/pages/pods/animations/DataControl.tsx | 2 +-
 src/pages/pods/animations/Resilience.tsx  | 4 ++--
 src/pages/pods/animations/Security.tsx    | 4 ++--
 8 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/pages/agents/AgentHeroAlt.tsx b/src/pages/agents/AgentHeroAlt.tsx
index 3b9b558..99cc0ec 100644
--- a/src/pages/agents/AgentHeroAlt.tsx
+++ b/src/pages/agents/AgentHeroAlt.tsx
@@ -23,7 +23,7 @@ export function AgentHeroAlt() {
             <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.
 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>
diff --git a/src/pages/home/animations/NoCentral.tsx b/src/pages/home/animations/NoCentral.tsx
index 6b1c62c..e7c6335 100644
--- a/src/pages/home/animations/NoCentral.tsx
+++ b/src/pages/home/animations/NoCentral.tsx
@@ -131,7 +131,7 @@ export default function NoCentral({
       aria-label="Distributed network illustration"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full -translate-y-10">
         {/* Background grid */}
         <defs>
           <pattern id="grid-dark" width="28" height="28" patternUnits="userSpaceOnUse">
diff --git a/src/pages/nodes/NodeBenefits.tsx b/src/pages/nodes/NodeBenefits.tsx
index 7912dfb..6c173e2 100644
--- a/src/pages/nodes/NodeBenefits.tsx
+++ b/src/pages/nodes/NodeBenefits.tsx
@@ -94,7 +94,7 @@ export function NodeBenefits() {
                 delay: 0.3 + index * 0.15,
                 ease: "easeOut",
               }}
-              className="rounded-md border border-gray-300 bg-white/5 lg:p-8 p-6 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 backdrop-blur-md"
+              className="rounded-md border border-gray-100 bg-white/5 lg:p-8 p-6 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 backdrop-blur-md"
             >
               <feature.icon className="mb-4 h-8 w-8 text-white" />
               <CT as="span" className="text-left font-semibold" color="light">
diff --git a/src/pages/nodes/NodeSpecs.tsx b/src/pages/nodes/NodeSpecs.tsx
index 92a0ac9..1ebb8ba 100644
--- a/src/pages/nodes/NodeSpecs.tsx
+++ b/src/pages/nodes/NodeSpecs.tsx
@@ -71,7 +71,7 @@ export function NodeSpecs() {
         {/* BENTO GRID */}
         <div className="mt-8 grid grid-cols-1 gap-4  lg:grid-cols-3 lg:grid-rows-2">
           {cards.map((item, index) => (
-            <div key={index} className="relative">
+            <div key={index} className="relative group">
 
               {/* OUTER BACKPLATE */}
               <div
@@ -82,7 +82,7 @@ export function NodeSpecs() {
 
               {/* INNER CARD */}
               <div
-                className={`relative flex h-full flex-row items-center gap-3 overflow-hidden rounded-[calc(var(--radius-lg)+1px)] px-8 py-6 transition-transform duration-300 hover:scale-102 hover:shadow-lg hover:shadow-cyan-500/20 ${
+                className={`relative flex h-full flex-row items-center gap-3 overflow-hidden rounded-[calc(var(--radius-lg)+1px)] px-8 py-6 transition-transform duration-300 group-hover:scale-102 group-hover:shadow-lg group-hover:shadow-cyan-500/20 ${
                   item.innerRounded || ""
                 }`}
               >
@@ -103,7 +103,7 @@ export function NodeSpecs() {
 
               {/* OUTLINE */}
               <div
-                className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${
+                className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 transition-transform duration-300 group-hover:scale-102 group-hover:shadow-lg group-hover:shadow-cyan-500/20 ${
                   item.rounded || ""
                 }`}
               />
diff --git a/src/pages/pods/Homepod.tsx b/src/pages/pods/Homepod.tsx
index a804c60..050037a 100644
--- a/src/pages/pods/Homepod.tsx
+++ b/src/pages/pods/Homepod.tsx
@@ -33,7 +33,7 @@ export default function Homepod() {
             <H3 className="mt-4">
               Your Private Space in the New Internet
             </H3>
-            <P className="mt-6 text-gray-800">
+            <P className="mt-6 text-gray-600">
               Pods are personal digital spaces on the Mycelium Network. They are private, persistent, and fully under your control. Run conversations, files, and tools directly on the network instead of through central servers
             </P>
             <div className="mt-8 flex items-center gap-x-6">
diff --git a/src/pages/pods/animations/DataControl.tsx b/src/pages/pods/animations/DataControl.tsx
index 5e90997..363392f 100644
--- a/src/pages/pods/animations/DataControl.tsx
+++ b/src/pages/pods/animations/DataControl.tsx
@@ -59,7 +59,7 @@ export default function DataControl({
 
   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">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full -translate-y-12">
         {/* GRID + GLOW */}
         <defs>
           <pattern id="dc-grid" width="28" height="28" patternUnits="userSpaceOnUse">
diff --git a/src/pages/pods/animations/Resilience.tsx b/src/pages/pods/animations/Resilience.tsx
index 68b9adc..d0a1326 100644
--- a/src/pages/pods/animations/Resilience.tsx
+++ b/src/pages/pods/animations/Resilience.tsx
@@ -17,7 +17,7 @@ const H = 540;
 export default function Resilience({
   className,
   accent = "#00b8db",
-  danger = "#ff4d4d",
+  danger = "#9ca3af",
   bg = "#0b0b0b",
   gridStroke = "#2b2a2a",
 }: Props) {
@@ -55,7 +55,7 @@ export default function Resilience({
 
   return (
     <div className={clsx("relative overflow-hidden", className)}>
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full" style={{ background: bg }}>
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full translate-y-5" style={{ background: bg }}>
         {/* ===== GRID + FILTERS ===== */}
         <defs>
           <pattern id="res-grid" width="28" height="28" patternUnits="userSpaceOnUse">
diff --git a/src/pages/pods/animations/Security.tsx b/src/pages/pods/animations/Security.tsx
index eec1e5e..11b2d84 100644
--- a/src/pages/pods/animations/Security.tsx
+++ b/src/pages/pods/animations/Security.tsx
@@ -17,7 +17,7 @@ const H = 540;
 export default function Security({
   className,
   accent = "#00b8db",
-  danger = "#ff4d4d",
+  danger = "#9ca3af",
   bg = "#0b0b0b",
   gridStroke = "#2b2a2a",
 }: Props) {
@@ -46,7 +46,7 @@ export default function Security({
       role="img"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full translate-y-6">
         {/* ====== GRID + FILTERS ====== */}
         <defs>
           <pattern id="sec-grid" width="28" height="28" patternUnits="userSpaceOnUse">