From 828fe93f460bb28fab36b2dae41dbb70249f0494 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Mon, 17 Nov 2025 16:05:54 +0100
Subject: [PATCH] refactor: reduce spacing and adjust typography in
 CallToAction and NetworkDownload

- Changed paragraph spacing from mt-6 to mt-2 in CallToAction for tighter layout
- Reduced top margin on cards container from mt-10 to mt-8
- Replaced "Follow Development" Button with styled anchor link featuring underline and arrow
- Added hover effects with cyan color transition to new anchor link
- Reduced heading size in NetworkDownload from text-5xl/6xl to text-4xl/5xl
---
 src/pages/agents/CallToAction.tsx     | 14 ++++++++++----
 src/pages/network/NetworkDownload.tsx |  2 +-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/pages/agents/CallToAction.tsx b/src/pages/agents/CallToAction.tsx
index c4f179a..243369c 100644
--- a/src/pages/agents/CallToAction.tsx
+++ b/src/pages/agents/CallToAction.tsx
@@ -44,12 +44,12 @@ export function CallToAction() {
             <p className="mt-6 text-lg text-gray-300">
               The Agent Framework launches in H1 2026, but the foundation is ready now.
             </p>
-            <p className="mt-6 text-lg text-gray-300">
+            <p className="mt-2 text-lg 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-10 flex flex-wrap justify-center gap-x-10 gap-y-8">
+            <div className="mt-8 flex flex-wrap justify-center gap-x-10 gap-y-8">
               <div className="flex flex-col items-center text-center max-w-xs">
                 <Button to="/deploy" variant="solid" color="cyan" className="mt-4">
                   Deploy a Model
@@ -63,9 +63,15 @@ export function CallToAction() {
               </div>
 
               <div className="flex flex-col items-center text-center max-w-xs">
-                <Button to="https://threefold.info/mycelium_network/docs/" as="a" target="_blank" variant="outline" color="white" className="mt-4">
+                <a
+                  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"
+                >
                   Follow Development
-                </Button>
+                  <span aria-hidden="true">→</span>
+                </a>
               </div>
             </div>
           </div>
diff --git a/src/pages/network/NetworkDownload.tsx b/src/pages/network/NetworkDownload.tsx
index 0c9f7b3..ab5b61a 100644
--- a/src/pages/network/NetworkDownload.tsx
+++ b/src/pages/network/NetworkDownload.tsx
@@ -54,7 +54,7 @@ export function NetworkDownload() {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
-            className="text-5xl font-medium tracking-tight text-gray-900 lg:text-6xl"
+            className="text-4xl font-medium tracking-tight text-gray-900 lg:text-5xl"
           >
             Download Mycelium Network
           </motion.h3>