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
This commit is contained in:
2025-11-19 17:51:30 +01:00
parent de5d990fc9
commit a8105a0551
2 changed files with 29 additions and 34 deletions

View File

@@ -48,39 +48,35 @@ export function CallToAction() {
Use todays components models, storage, compute, and network to deploy workloads, connect nodes, and prepare for the next generation of distributed AI. Use todays components models, storage, compute, and network to deploy workloads, connect nodes, and prepare for the next generation of distributed AI.
</p> </p>
{/* ✅ Two cards, stacked center with spacing */} {/* ✅ Button row same structure as homepage CTA */}
<div className="mt-6 flex flex-wrap justify-center gap-x-10 gap-y-8"> <div className="mt-10 flex flex-wrap justify-center items-center gap-x-6 gap-y-4">
<div className="flex flex-col items-center text-center max-w-xs"> <Button
<Button as="a"
as="a" to="https://myceliumcloud.tf"
to="https://myceliumcloud.tf" variant="solid"
variant="solid" color="cyan"
color="cyan" target="_blank"
className="mt-4" rel="noopener noreferrer"
target="_blank" >
rel="noopener noreferrer" Deploy a Model
> </Button>
Deploy a Model
</Button>
</div>
<div className="flex flex-col items-center text-center max-w-xs"> <Button to="/nodes" variant="outline" color="white">
<Button to="/nodes" variant="outline" color="white" className="mt-4"> Host a Node
Host a Node </Button>
</Button>
</div>
<div className="flex flex-col items-center text-center max-w-xs"> <Button
<a as="a"
href="https://threefold.info/mycelium_network/docs/" to="https://threefold.info/mycelium_network/docs/"
target="_blank" variant="link"
rel="noopener noreferrer" color="cyan"
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" className="inline-flex items-center gap-1.5"
> target="_blank"
Follow Development rel="noopener noreferrer"
<span aria-hidden="true"></span> >
</a> Follow Development
</div> <span aria-hidden="true"></span>
</Button>
</div> </div>
</div> </div>
</Container> </Container>

View File

@@ -1,6 +1,5 @@
"use client"; "use client";
import { Link } from 'react-router-dom';
import { Container } from '@/components/Container' import { Container } from '@/components/Container'
import { Button } from "@/components/Button"; 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 Deploy in Cloud
</Button> </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; Host a Node &rarr;
</Link> </Button>
</div> </div>
</div> </div>
</Container> </Container>