From 29f713cd2f01b6cbd6bf6db3512ff3b890c0c8f0 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 19 Nov 2025 12:11:27 +0100
Subject: [PATCH] refactor: make CallToAction description text responsive
 across all pages

- Changed text-lg to lg:text-lg text-base for responsive font sizing on mobile
- Applied to description paragraphs in CallToAction components across agents, compute, gpu, home, network, nodes, pods, and storage pages
- Added leading-normal class to PodsHow animated text span for consistent line height
---
 src/pages/agents/CallToAction.tsx  | 4 ++--
 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/pods/CallToAction.tsx    | 4 ++--
 src/pages/pods/PodsHow.tsx         | 2 +-
 src/pages/storage/CallToAction.tsx | 2 +-
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/pages/agents/CallToAction.tsx b/src/pages/agents/CallToAction.tsx
index b01d90e..bcd41be 100644
--- a/src/pages/agents/CallToAction.tsx
+++ b/src/pages/agents/CallToAction.tsx
@@ -41,10 +41,10 @@ export function CallToAction() {
               Start with Mycelium Today
             </h2>
 
-            <p className="mt-6 text-lg leading-normal text-gray-300">
+            <p className="mt-6 lg:text-lg text-base 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 leading-normal text-gray-300">
+            <p className="mt-2 lg:text-lg text-base 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>
 
diff --git a/src/pages/compute/CallToAction.tsx b/src/pages/compute/CallToAction.tsx
index 7135297..87adb48 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 leading-normal text-gray-300">
+            <p className="mt-6 lg:text-lg text-base 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 80560b0..5c69bb5 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 leading-normal text-gray-300">
+            <p className="mt-6 lg:text-lg text-base 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 319a06a..add4106 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 leading-normal text-gray-300">
+            <P className="mt-6 lg:text-lg text-base 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 leading-normal text-gray-300">
+            <P className="mt-4 lg:text-lg text-base 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 eebef23..3f1deda 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 leading-normal text-gray-300">
+            <p className="mt-6 lg:text-lg text-base 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 bae772a..a64da1b 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 leading-normal text-gray-300">
+            <p className="mt-6 lg:text-lg text-base 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/pods/CallToAction.tsx b/src/pages/pods/CallToAction.tsx
index 94494d4..7bd3dda 100644
--- a/src/pages/pods/CallToAction.tsx
+++ b/src/pages/pods/CallToAction.tsx
@@ -52,7 +52,7 @@ export function CallToAction() {
 
             </h2>
 
-            <p className="mt-6 text-lg leading-normal text-gray-300">
+            <p className="mt-6 lg:text-lg text-base leading-normal text-gray-300">
               The first Pods are launching soon.
               10,000 early Pods will be available for early adopters.
             </p>
@@ -74,7 +74,7 @@ export function CallToAction() {
               </ul>
             </div>
 
-            <p className="mt-6 text-lg leading-normal text-gray-300">
+            <p className="mt-6 lg:text-lg text-base leading-normal text-gray-300">
               Next, Pods will support peer-to-peer AI Agents that live inside your environment.
               Your own AI, powered by your data without any data leaks. Be among the first to claim
               your private space on the Mycelium Network.
diff --git a/src/pages/pods/PodsHow.tsx b/src/pages/pods/PodsHow.tsx
index 72f921c..15ff0b7 100644
--- a/src/pages/pods/PodsHow.tsx
+++ b/src/pages/pods/PodsHow.tsx
@@ -50,7 +50,7 @@ export function PodsHow() {
               <H5 color="white" className="mt-4">
                 When you use Mycelium,&nbsp;
                 <span
-                  className={`inline-block transition-opacity duration-300 ${
+                  className={`leading-normal inline-block transition-opacity duration-300 ${
                     fade ? "opacity-100" : "opacity-0"
                   }`}
                 >
diff --git a/src/pages/storage/CallToAction.tsx b/src/pages/storage/CallToAction.tsx
index 76cda05..6f9f31a 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 leading-normal text-gray-300">
+            <p className="mt-6 lg:text-lg text-base leading-normal text-gray-300">
               Store data in your Mycelium Cloud environment 
               or host your own node for full sovereignty.
             </p>