From a8105a0551fe9f11de492a75a4ccd6ee24afdb80 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 19 Nov 2025 17:51:30 +0100
Subject: [PATCH] refactor: replace custom links with Button component in
 CallToAction components

- Replaced custom <a> tag with Button component (as="a", variant="link", color="cyan") in agents CallToAction
- Replaced Link component with Button component (variant="link", color="cyan") in network CallToAction
- Removed unused Link import from network CallToAction
- Standardized link styling across CallToAction components for consistency
---
 src/pages/agents/CallToAction.tsx  | 58 ++++++++++++++----------------
 src/pages/network/CallToAction.tsx |  5 ++-
 2 files changed, 29 insertions(+), 34 deletions(-)

diff --git a/src/pages/agents/CallToAction.tsx b/src/pages/agents/CallToAction.tsx
index 6778028..f995929 100644
--- a/src/pages/agents/CallToAction.tsx
+++ b/src/pages/agents/CallToAction.tsx
@@ -48,39 +48,35 @@ export function CallToAction() {
               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-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"
-                  to="https://myceliumcloud.tf"
-                  variant="solid"
-                  color="cyan"
-                  className="mt-4"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Deploy a Model
-                </Button>
-              </div>
+            {/* ✅ Button row – same structure as homepage CTA */}
+            <div className="mt-10 flex flex-wrap justify-center items-center gap-x-6 gap-y-4">
+              <Button
+                as="a"
+                to="https://myceliumcloud.tf"
+                variant="solid"
+                color="cyan"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Deploy a Model
+              </Button>
 
-              <div className="flex flex-col items-center text-center max-w-xs">
-                <Button to="/nodes" variant="outline" color="white" className="mt-4">
-                  Host a Node
-                </Button>
-              </div>
+              <Button to="/nodes" variant="outline" color="white">
+                Host a Node
+              </Button>
 
-              <div className="flex flex-col items-center text-center max-w-xs">
-                <a
-                  href="https://threefold.info/mycelium_network/docs/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  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>
-                </a>
-              </div>
+              <Button
+                as="a"
+                to="https://threefold.info/mycelium_network/docs/"
+                variant="link"
+                color="cyan"
+                className="inline-flex items-center gap-1.5"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Follow Development
+                <span aria-hidden="true">→</span>
+              </Button>
             </div>
           </div>
         </Container>
diff --git a/src/pages/network/CallToAction.tsx b/src/pages/network/CallToAction.tsx
index 07ccde1..bb0394d 100644
--- a/src/pages/network/CallToAction.tsx
+++ b/src/pages/network/CallToAction.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { Link } from 'react-router-dom';
 import { Container } from '@/components/Container'
 import { Button } from "@/components/Button";
 
@@ -66,9 +65,9 @@ Use the network to link environments, deploy workloads, or host nodes to strengt
                 Deploy in Cloud
               </Button>
 
-              <Link to="/nodes" className="text-cyan-400 hover:text-cyan-300 transition-colors">
+              <Button to="/nodes" variant="link" color="cyan">
                 Host a Node &rarr;
-              </Link>
+              </Button>
             </div>
           </div>
         </Container>