From 7d6bbc2763e90a3265f0afde81053f6285876d06 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Tue, 18 Nov 2025 12:38:41 +0100
Subject: [PATCH] refactor: improve spacing and typography in Pods CallToAction
 section

- Added leading-normal to description paragraphs for better readability
- Reduced top margin from mt-10 to mt-6 for benefits list and CTA cards
- Changed benefits grid gap from gap-y-3 to gap-y-1 lg:gap-y-3 for tighter mobile spacing
- Reduced horizontal gap between CTA cards from gap-x-10 to gap-x-8
---
 src/pages/pods/CallToAction.tsx     | 10 +++++-----
 src/pages/pods/Homepod.tsx          |  3 +--
 src/pages/pods/PodsBento.tsx        |  2 +-
 src/pages/pods/PodsCapabilities.tsx |  2 +-
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/pages/pods/CallToAction.tsx b/src/pages/pods/CallToAction.tsx
index c8d6802..94494d4 100644
--- a/src/pages/pods/CallToAction.tsx
+++ b/src/pages/pods/CallToAction.tsx
@@ -52,15 +52,15 @@ export function CallToAction() {
 
             </h2>
 
-            <p className="mt-6 text-lg text-gray-300">
+            <p className="mt-6 text-lg leading-normal text-gray-300">
               The first Pods are launching soon.
               10,000 early Pods will be available for early adopters.
             </p>
 
-            <div className="mt-10 flex items-center justify-center">
+            <div className="mt-6 flex items-center justify-center">
               <ul
                 role="list"
-                className="grid grid-cols-1 gap-x-8 gap-y-3 text-left text-base/7 text-gray-200 sm:grid-cols-2"
+                className="grid grid-cols-1 gap-x-8 gap-y-1 lg:gap-y-3 text-left text-base/7 text-gray-200 sm:grid-cols-2"
               >
                 {benefits.map((benefit) => (
                   <li key={benefit} className="flex items-start gap-x-3">
@@ -74,14 +74,14 @@ export function CallToAction() {
               </ul>
             </div>
 
-            <p className="mt-6 text-lg text-gray-300">
+            <p className="mt-6 text-lg 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.
             </p>
 
             {/* ✅ Two cards, stacked center with spacing */}
-            <div className="mt-10 flex flex-wrap justify-center gap-x-10 gap-y-8">
+            <div className="mt-6 flex flex-wrap justify-center gap-x-8 gap-y-8">
               <div className="flex flex-col items-center text-center max-w-xs">
                 <Button to="#" variant="solid" color="cyan" className="mt-4">
                   Join the Waitlist
diff --git a/src/pages/pods/Homepod.tsx b/src/pages/pods/Homepod.tsx
index 507cbd6..2e3344c 100644
--- a/src/pages/pods/Homepod.tsx
+++ b/src/pages/pods/Homepod.tsx
@@ -9,8 +9,7 @@ export default function Homepod() {
     <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/computehero11.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/computehero11.webp')] md:bg-contain md:bg-right md:bg-no-repeat"
       >
         {/* Inner padding */}
         <div className="px-6 py-16 lg:py-24">
diff --git a/src/pages/pods/PodsBento.tsx b/src/pages/pods/PodsBento.tsx
index bb42f49..492ea22 100644
--- a/src/pages/pods/PodsBento.tsx
+++ b/src/pages/pods/PodsBento.tsx
@@ -108,7 +108,7 @@ export function PodsBento() {
                     </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" />
                 )}
 
                 {/* TEXT AREA */}
diff --git a/src/pages/pods/PodsCapabilities.tsx b/src/pages/pods/PodsCapabilities.tsx
index d6b3545..1c01d2d 100644
--- a/src/pages/pods/PodsCapabilities.tsx
+++ b/src/pages/pods/PodsCapabilities.tsx
@@ -20,7 +20,7 @@ export function PodsCapabilities() {
         
         {/* ✅ LEFT SIDE — Title + Intro */}
         <div className="max-w-xl ">
-          <Eyebrow>What You Can Do</Eyebrow>
+          <Eyebrow className="text-cyan-500 tracking-[0.16em]">What You Can Do</Eyebrow>
 
           <H3  className="mt-6 text-white">
             Pods Features