From f9ee299362d95ce5edc909cec52846331ba05670 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Tue, 18 Nov 2025 12:50:36 +0100
Subject: [PATCH] refactor: improve CallToAction typography and AgentBento
 mobile layout across pages

- Added leading-normal to all CallToAction description paragraphs for better readability
- Changed AgentBento empty animation placeholder to hidden on mobile using hidden md:flex
- Reduced top margin from mt-8 to mt-6 for agents CallToAction CTA cards
- Changed "Follow Development" link margin from mt-5 to lg:mt-5 mt-0 for responsive spacing
- Applied leading-normal changes to agents, compute, gpu, home, network, nodes
---
 src/pages/agents/AgentBento.tsx    | 2 +-
 src/pages/agents/CallToAction.tsx  | 8 ++++----
 src/pages/compute/CallToAction.tsx | 2 +-
 src/pages/gpu/CallToAction.tsx     | 2 +-
 src/pages/home/CallToAction.tsx    | 4 ++--
 src/pages/network/CallToAction.tsx | 2 +-
 src/pages/nodes/CallToAction.tsx   | 2 +-
 src/pages/storage/CallToAction.tsx | 2 +-
 8 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/pages/agents/AgentBento.tsx b/src/pages/agents/AgentBento.tsx
index f7cbb91..9a37bde 100644
--- a/src/pages/agents/AgentBento.tsx
+++ b/src/pages/agents/AgentBento.tsx
@@ -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">
diff --git a/src/pages/agents/CallToAction.tsx b/src/pages/agents/CallToAction.tsx
index f346d60..b01d90e 100644
--- a/src/pages/agents/CallToAction.tsx
+++ b/src/pages/agents/CallToAction.tsx
@@ -41,15 +41,15 @@ export function CallToAction() {
               Start with Mycelium Today
             </h2>
 
-            <p className="mt-6 text-lg text-gray-300">
+            <p className="mt-6 text-lg leading-normal text-gray-300">
               The Agent Framework launches in H1 2026, but the foundation is ready now.
             </p>
-            <p className="mt-2 text-lg text-gray-300">
+            <p className="mt-2 text-lg leading-normal text-gray-300">
               Use today’s components —models, storage, compute, and network— to deploy workloads, connect nodes, and prepare for the next generation of distributed AI.
             </p>
 
             {/* ✅ Two cards, stacked center with spacing */}
-            <div className="mt-8 flex flex-wrap justify-center gap-x-10 gap-y-8">
+            <div className="mt-6 flex flex-wrap justify-center gap-x-10 gap-y-8">
               <div className="flex flex-col items-center text-center max-w-xs">
                 <Button
                   as="a"
@@ -75,7 +75,7 @@ export function CallToAction() {
                   href="https://threefold.info/mycelium_network/docs/"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="mt-5  font-semibold text-white underline underline-offset-4 decoration-white/70 hover:text-cyan-200 hover:decoration-cyan-200 transition-colors inline-flex items-center gap-1.5"
+                  className="lg:mt-5 mt-0 font-semibold text-white underline underline-offset-4 decoration-white/70 hover:text-cyan-200 hover:decoration-cyan-200 transition-colors inline-flex items-center gap-1.5"
                 >
                   Follow Development
                   <span aria-hidden="true">→</span>
diff --git a/src/pages/compute/CallToAction.tsx b/src/pages/compute/CallToAction.tsx
index 3a59f0d..7135297 100644
--- a/src/pages/compute/CallToAction.tsx
+++ b/src/pages/compute/CallToAction.tsx
@@ -43,7 +43,7 @@ export function CallToAction() {
               Choose How You Want to Start
             </h2>
 
-            <p className="mt-6 text-lg text-gray-300">
+            <p className="mt-6 text-lg leading-normal text-gray-300">
               Host your own node to contribute capacity or deploy workloads using the Mycelium Cloud.
               You don’t need to host before deploying, and you don’t need to deploy before hosting.
               
diff --git a/src/pages/gpu/CallToAction.tsx b/src/pages/gpu/CallToAction.tsx
index f82e665..80560b0 100644
--- a/src/pages/gpu/CallToAction.tsx
+++ b/src/pages/gpu/CallToAction.tsx
@@ -43,7 +43,7 @@ export function CallToAction() {
               Choose How You Want to Start
             </h2>
 
-            <p className="mt-6 text-lg text-gray-300">
+            <p className="mt-6 text-lg leading-normal text-gray-300">
               Use GPUs through Mycelium Cloud, or contribute GPU nodes to the mesh and run your own workloads.
             </p>
 
diff --git a/src/pages/home/CallToAction.tsx b/src/pages/home/CallToAction.tsx
index d170ed0..319a06a 100644
--- a/src/pages/home/CallToAction.tsx
+++ b/src/pages/home/CallToAction.tsx
@@ -43,11 +43,11 @@ export function CallToAction() {
               Use the Mycelium Stack Your Way
             </H3>
 
-            <P className="mt-6 text-gray-300">
+            <P className="mt-6 leading-normal text-gray-300">
               Deploy infrastructure, run workloads, connect environments, and build distributed AI systems, all on one network designed for autonomy and control.
             </P>
 
-            <P className="mt-4 text-gray-300">
+            <P className="mt-4 leading-normal text-gray-300">
               Start wherever you are. Scale on your own terms.
             </P>
 
diff --git a/src/pages/network/CallToAction.tsx b/src/pages/network/CallToAction.tsx
index c410e50..eebef23 100644
--- a/src/pages/network/CallToAction.tsx
+++ b/src/pages/network/CallToAction.tsx
@@ -44,7 +44,7 @@ export function CallToAction() {
               Choose How You Want to Connect
             </h2>
 
-            <p className="mt-6 text-lg text-gray-300">
+            <p className="mt-6 text-lg leading-normal text-gray-300">
               Choose How You Want to Connect
 Use the network to link environments, deploy workloads, or host nodes to strengthen the mesh and run on your own hardware.
             </p>
diff --git a/src/pages/nodes/CallToAction.tsx b/src/pages/nodes/CallToAction.tsx
index 5f93be4..54d5cfe 100644
--- a/src/pages/nodes/CallToAction.tsx
+++ b/src/pages/nodes/CallToAction.tsx
@@ -39,7 +39,7 @@ export function CallToAction() {
               Join Mycelium Grid
             </h2>
 
-            <p className="mt-6 text-lg text-gray-300">
+            <p className="mt-6 text-lg leading-normal text-gray-300">
               Be part of a global network that powers private, distributed
               infrastructure. Host a node, contribute resources, and earn rewards
               while expanding the sovereign digital grid.
diff --git a/src/pages/storage/CallToAction.tsx b/src/pages/storage/CallToAction.tsx
index d959c06..76cda05 100644
--- a/src/pages/storage/CallToAction.tsx
+++ b/src/pages/storage/CallToAction.tsx
@@ -41,7 +41,7 @@ export function CallToAction() {
               Choose How You Want to Start
             </h2>
 
-            <p className="mt-6 text-lg text-gray-300">
+            <p className="mt-6 text-lg leading-normal text-gray-300">
               Store data in your Mycelium Cloud environment 
               or host your own node for full sovereignty.
             </p>