From ef9865862b7028e51f20bc9f44c8d549c055f40b Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Tue, 18 Nov 2025 12:30:55 +0100
Subject: [PATCH] refactor: standardize Eyebrow styling and improve
 CloudHeroNew typography across pages

- Changed all Eyebrow components from uppercase tracking-[0.16em] text-cyan-600 to text-cyan-500
- Applied changes to AgentPro, CloudPros, HomeDesign, NetworkPros, PodsDesign, and PodsPro
- Updated CloudHeroNew to hide background image on mobile using md:bg-[url(...)] classes
- Replaced inline style with Tailwind classes for background image in CloudHeroNew
- Converted CloudHeroNew description from two separate
---
 src/pages/agents/AgentPro.tsx     |  2 +-
 src/pages/cloud/CloudHeroNew.tsx  | 11 ++++-------
 src/pages/cloud/CloudIntro.tsx    | 10 +++++-----
 src/pages/cloud/CloudPros.tsx     |  2 +-
 src/pages/home/HomeDesign.tsx     |  2 +-
 src/pages/network/NetworkPros.tsx |  2 +-
 src/pages/pods/PodsDesign.tsx     |  2 +-
 src/pages/pods/PodsPro.tsx        |  2 +-
 8 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/pages/agents/AgentPro.tsx b/src/pages/agents/AgentPro.tsx
index 2a34fca..e09de76 100644
--- a/src/pages/agents/AgentPro.tsx
+++ b/src/pages/agents/AgentPro.tsx
@@ -38,7 +38,7 @@ export function AgentPro() {
       {/* Intro Block */}
       <div className="bg-[#FDFDFD] 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="uppercase tracking-[0.16em] text-cyan-600">
+          <Eyebrow className="text-cyan-500">
             Advantages
           </Eyebrow>
 
diff --git a/src/pages/cloud/CloudHeroNew.tsx b/src/pages/cloud/CloudHeroNew.tsx
index d91a05e..49fd1c7 100644
--- a/src/pages/cloud/CloudHeroNew.tsx
+++ b/src/pages/cloud/CloudHeroNew.tsx
@@ -1,4 +1,4 @@
-import { H3, Eyebrow } from "@/components/Texts"
+import { H3, Eyebrow, P } from "@/components/Texts"
 import { Button } from "@/components/Button"
 
 export function CloudHeroNew({ onGetStartedClick = () => {} }: { onGetStartedClick?: () => void }) {
@@ -6,8 +6,7 @@ export function CloudHeroNew({ onGetStartedClick = () => {} }: { onGetStartedCli
     <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/cloudhero4.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/cloudhero4.webp')] md:bg-contain md:bg-right md:bg-no-repeat"
       >
         {/* Inner padding */}
         <div className="px-6 py-16 lg:py-24">
@@ -18,13 +17,11 @@ export function CloudHeroNew({ onGetStartedClick = () => {} }: { onGetStartedCli
             <H3 className="mt-4">
               Sovereign Edge Cloud Infrastructure
             </H3>
-            <p className="mt-6 text-lg text-gray-600">
+            <P className="mt-6  text-gray-600">
               Run compute, storage, and AI resources on infrastructure you control.
-            </p>
-            <p className="mt-2 text-lg text-gray-600">
               The Mycelium Cloud runs on a distributed grid of independent nodes, 
               delivering secure, scalable performance wherever your users or data live.
-            </p>
+            </P>
             <div className="mt-10 flex items-center gap-x-6">
               <Button
                 as="a"
diff --git a/src/pages/cloud/CloudIntro.tsx b/src/pages/cloud/CloudIntro.tsx
index c14838d..fef3ab3 100644
--- a/src/pages/cloud/CloudIntro.tsx
+++ b/src/pages/cloud/CloudIntro.tsx
@@ -107,7 +107,7 @@ export function CloudIntro() {
 
           <H3 color="white">What You Can Run on Mycelium Cloud</H3>
 
-          <P className="max-w-3xl text-gray-400 mt-6">
+          <P className="max-w-3xl text-gray-200 mt-6">
             Host nodes, deploy workloads, or build private AI systems all on
             infrastructure you own and control. Mycelium gives you scalable compute,
             secure storage, and sovereign orchestration without depending on
@@ -138,7 +138,7 @@ export function CloudIntro() {
                 <button
                   key={tab.id}
                   onClick={() => setActive(tab.id)}
-                  className={`text-sm font-medium tracking-wide pb-2 ${
+                  className={`text-sm font-medium tracking-wide leading-tight pb-2 ${
                     active === tab.id
                       ? "border-b-2 border-cyan-500 text-white"
                       : "text-gray-400 hover:text-white"
@@ -152,8 +152,8 @@ export function CloudIntro() {
             {/* Tab Content */}
             <div className="mt-6 space-y-6">
               <div>
-                <p className="text-lg font-medium text-white">{current.item}</p>
-                <p className="mt-2 text-base text-gray-400 leading-relaxed">
+                <p className="text-lg lg:text-xl font-medium text-white">{current.item}</p>
+                <p className="mt-2 text-base text-gray-300 leading-relaxed">
                   {current.desc}
                 </p>
               </div>
@@ -165,7 +165,7 @@ export function CloudIntro() {
 
                 <ul className="space-y-2">
                   {current.bullets.map((b, i) => (
-                    <li key={i} className="text-base text-gray-300 flex gap-2">
+                    <li key={i} className="text-base text-gray-400 flex gap-2">
                       <span className="text-cyan-500">•</span>
                       {b}
                     </li>
diff --git a/src/pages/cloud/CloudPros.tsx b/src/pages/cloud/CloudPros.tsx
index 0099506..e9f9c35 100644
--- a/src/pages/cloud/CloudPros.tsx
+++ b/src/pages/cloud/CloudPros.tsx
@@ -37,7 +37,7 @@ export function CloudPros() {
       {/* Intro Block */}
       <div className="bg-[#FDFDFD] 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">
-          <Eyebrow className="uppercase tracking-[0.16em] text-cyan-600">
+          <Eyebrow className=" text-cyan-500">
             Cloud Advantages
           </Eyebrow>
 
diff --git a/src/pages/home/HomeDesign.tsx b/src/pages/home/HomeDesign.tsx
index 2988c67..2429a7c 100644
--- a/src/pages/home/HomeDesign.tsx
+++ b/src/pages/home/HomeDesign.tsx
@@ -37,7 +37,7 @@ export function HomeDesign() {
       <div className="mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-200">
         {/* Centered intro */}
         <div className="px-6 pt-12 pb-4 text-center max-w-4xl mx-auto ">
-          <Eyebrow className="uppercase tracking-[0.16em] text-cyan-600">
+          <Eyebrow className="text-cyan-500">
             Who's it For
           </Eyebrow>
 
diff --git a/src/pages/network/NetworkPros.tsx b/src/pages/network/NetworkPros.tsx
index f055851..23f6467 100644
--- a/src/pages/network/NetworkPros.tsx
+++ b/src/pages/network/NetworkPros.tsx
@@ -38,7 +38,7 @@ export function NetworkPros() {
       <div className="bg-[#121212] w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-800">
         {/* Centered intro */}
         <div className="px-6 pt-12 pb-4 text-center max-w-4xl mx-auto ">
-          <Eyebrow className="uppercase tracking-[0.16em] text-cyan-600">
+          <Eyebrow className="text-cyan-500">
             WHY
           </Eyebrow>
 
diff --git a/src/pages/pods/PodsDesign.tsx b/src/pages/pods/PodsDesign.tsx
index 56349a8..b952e93 100644
--- a/src/pages/pods/PodsDesign.tsx
+++ b/src/pages/pods/PodsDesign.tsx
@@ -52,7 +52,7 @@ export function PodsDesign() {
       <div className="bg-[#FDFDFD] 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="uppercase tracking-[0.16em] text-cyan-600">
+          <Eyebrow className="text-cyan-500">
             {product.subtitle}
           </Eyebrow>
 
diff --git a/src/pages/pods/PodsPro.tsx b/src/pages/pods/PodsPro.tsx
index 0d798bb..8a6c1d7 100644
--- a/src/pages/pods/PodsPro.tsx
+++ b/src/pages/pods/PodsPro.tsx
@@ -57,7 +57,7 @@ export function PodsPro() {
       <div className="bg-[#FDFDFD] 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="uppercase tracking-[0.16em] text-cyan-600">
+          <Eyebrow className="text-cyan-500">
             {product.subtitle}
           </Eyebrow>