ourworld_web/www_projectmycelium_com
22
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 2 Pull Requests 1 Projects Releases Activity

refactor: update CTA buttons with external links and navigation improvements

Browse Source 
- Changed "Deploy a Model" button in agents CallToAction to external link (myceliumcloud.tf) with target="_blank"
- Updated "Host a Node" button path from /host to /nodes in agents and cloud CallToAction
- Changed cloud CallToAction "Start Deploying" button to external link with target="_blank"
- Updated CloudHeroNew buttons to external links for myceliumcloud.tf and docs
- Removed onGetStartedClick handler from CloudHeroNew in
This commit is contained in:
sasha-astiadi
2025-11-18 11:56:33 +01:00
parent 6329d2dcac
commit c289c63856
9 changed files with 69 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/agents/CallToAction.tsx
View File

@@ -51,13 +51,21 @@ export function CallToAction() {
{/* ✅ Two cards, stacked center with spacing */}
<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">
<Button
as="a"
to="https://myceliumcloud.tf"
variant="solid"
color="cyan"
className="mt-4"
target="_blank"
rel="noopener noreferrer"
>
Deploy a Model
</Button>
</div>
<div className="flex flex-col items-center text-center max-w-xs">
<Button to="/host" as="a" variant="outline" color="white" className="mt-4">
<Button to="/nodes" variant="outline" color="white" className="mt-4">
Host a Node
</Button>
</div>

12
src/pages/cloud/CalltoAction.tsx
View File

@@ -52,13 +52,21 @@ export function CallToAction() {
{/* ✅ Two cards, stacked center with spacing */}
<div className="mt-10 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="/host" variant="solid" color="cyan" className="mt-4">
<Button to="/nodes" variant="solid" color="cyan" className="mt-4">
Host a Node
</Button>
</div>
<div className="flex flex-col items-center text-center max-w-xs">
<Button to="/cloud" variant="outline" color="white" className="mt-4">
<Button
as="a"
to="https://myceliumcloud.tf"
variant="outline"
color="white"
className="mt-4"
target="_blank"
rel="noopener noreferrer"
>
Start Deploying
</Button>
</div>

15
src/pages/cloud/CloudHeroNew.tsx
View File

@@ -27,13 +27,22 @@ export function CloudHeroNew({ onGetStartedClick = () => {} }: { onGetStartedCli
</p>
<div className="mt-10 flex items-center gap-x-6">
<Button
onClick={onGetStartedClick}
as="a"
to="https://myceliumcloud.tf"
variant="solid"
color="cyan"
target="_blank"
rel="noopener noreferrer"
>
Deploy Workloads
</Button>
<Button to="#" variant="outline">
<Button
as="a"
to="https://myceliumcloud.tf/docs"
variant="outline"
target="_blank"
rel="noopener noreferrer"
>
Explore Docs <span aria-hidden="true">→</span>
</Button>
</div>
@@ -41,7 +50,7 @@ export function CloudHeroNew({ onGetStartedClick = () => {} }: { onGetStartedCli
</div>
</div>
{/* ✅ Bottom horizontal line with spacing */}
{/* Bottom horizontal line with spacing */}
<div className="w-full border-b border-gray-100" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
</div>

24
src/pages/cloud/CloudIntro.tsx
View File

@@ -79,6 +79,18 @@ export function CloudIntro() {
const current = tabs.find((t) => t.id === active)!.content;
const currentButtons = tabButtons[active as keyof typeof tabButtons];
const primaryLinks: Record<string, string | undefined> = {
kubernetes: "https://myceliumcloud.tf",
vdc: undefined,
qsfs: undefined,
};
const secondaryLinks: Record<string, string | undefined> = {
kubernetes: "https://myceliumcloud.tf/docs",
vdc: "https://threefold.info/mycelium_vdc/docs/",
qsfs: undefined,
};
return (
<section className="relative w-full bg-[#121212] overflow-hidden">
{/* Top Spacing Border */}
@@ -164,17 +176,25 @@ export function CloudIntro() {
{currentButtons && (
<div className="mt-8 flex flex-wrap gap-4">
<Button
to="#"
as={primaryLinks[active] ? "a" : undefined}
to={primaryLinks[active] ?? "#"}
variant="solid"
color="cyan"
{...(primaryLinks[active]
? { target: "_blank", rel: "noopener noreferrer" }
: {})}
>
{currentButtons.primary}
</Button>
<Button
to="#"
as={secondaryLinks[active] ? "a" : undefined}
to={secondaryLinks[active] ?? "#"}
variant="outline"
color="white"
{...(secondaryLinks[active]
? { target: "_blank", rel: "noopener noreferrer" }
: {})}
>
{currentButtons.secondary}
</Button>

2
src/pages/home/CallToAction.tsx
View File

@@ -52,7 +52,7 @@ export function CallToAction() {
</P>
<div className="mt-10 flex flex-wrap justify-center items-center gap-x-6 gap-y-4">
<Button to="/network" variant="solid" color="cyan">
<Button to="/network#download" variant="solid" color="cyan">
Join the Network
</Button>

6
src/pages/home/HomeAurora.tsx
View File

@@ -1,7 +1,7 @@
import { H3, H5, Eyebrow } from "@/components/Texts"
import { Button } from "@/components/Button"
export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
export function HomeAurora() {
return (
<div className="px-4">
{/* Boxed container */}
@@ -24,13 +24,13 @@ export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => voi
<div className="mt-8 flex items-center gap-x-6">
<Button
to="/nodes"
variant="solid"
color="cyan"
onClick={onGetStartedClick}
>
Start Hosting
</Button>
<Button to="#" variant="outline">
<Button to="/cloud" variant="outline">
Deploy in Cloud →
</Button>
</div>

8
src/pages/home/HomePage.tsx
View File

@@ -1,5 +1,4 @@
import { useRef } from 'react'
import { AnimatedSection } from '../../components/AnimatedSection'
import { CallToAction } from './CallToAction'
import { HomeTab } from './HomeTab'
@@ -11,15 +10,10 @@ import { HomeDesign } from './HomeDesign';
export default function HomePage() {
const sliderRef = useRef<HTMLDivElement>(null)
const handleScrollToSlider = () => {
sliderRef.current?.scrollIntoView({ behavior: 'smooth' })
}
return (
<div>
<AnimatedSection>
<HomeAurora onGetStartedClick={handleScrollToSlider} />
<HomeAurora />
</AnimatedSection>
<AnimatedSection>

11
src/pages/network/Hero.tsx
View File

@@ -96,8 +96,15 @@ export function Hero() {
<Button to="/download" variant="solid" color="cyan">
Get Started
</Button>
<Button to="/download" variant="outline" color="cyan">
Explore Docs
<Button
as="a"
to="https://threefold.info/mycelium_network/docs/"
variant="outline"
color="cyan"
target="_blank"
rel="noopener noreferrer"
>
Explore Docs
</Button>
</div>
</div>

2
src/pages/network/NetworkDownload.tsx
View File

@@ -42,7 +42,7 @@ const features = [
export function NetworkDownload() {
return (
<section className="w-full max-w-8xl mx-auto bg-transparent">
<section id="download" className="w-full max-w-8xl mx-auto bg-transparent">
{/* ✅ Top horizontal line with spacing */}
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>