forked from emre/www_projectmycelium_com
sasha-astiadi
a22a8ddcc9
- Changed CallToAction "Join the Network" button from /network#download to /network - Changed NodeHero "Explore Docs" button from #node-architecture anchor to external ThreeFold hosting FAQ link with target="_blank"
56 lines
2.1 KiB
TypeScript
56 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import { Button } from '@/components/Button'
|
|
import { Eyebrow, H3, P } from '@/components/Texts'
|
|
|
|
export function NodeHero() {
|
|
return (
|
|
<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 md:bg-[url('/images/gpuhero2.png')] md:bg-contain md:bg-right md:bg-no-repeat"
|
|
>
|
|
{/* Inner padding */}
|
|
<div className="px-6 pt-4 pb-12 lg:py-24">
|
|
{/* Mobile-only hero image */}
|
|
<img
|
|
src="/images/mobile/nodes.jpg"
|
|
alt="Mycelium Nodes visual"
|
|
className="mb-8 w-full object-cover md:hidden"
|
|
/>
|
|
|
|
<div className="max-w-2xl lg:pl-6">
|
|
<Eyebrow>MYCELIUM NODES</Eyebrow>
|
|
<H3 as="h1" className="mt-4">
|
|
Host a Node. Power the Network.
|
|
</H3>
|
|
<P className="mt-6 text-gray-600">
|
|
The Mycelium Network runs on nodes hosted by people and organizations around the world. Each node adds capacity, resilience, and sovereignty, expanding a global network for private, distributed compute and AI.
|
|
</P>
|
|
<div className="mt-10 flex items-center gap-x-6">
|
|
<Button
|
|
variant="solid"
|
|
color="cyan"
|
|
onClick={() => {
|
|
const el = document.getElementById('node-how-it-works')
|
|
if (el) {
|
|
el.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
|
}
|
|
}}
|
|
>
|
|
How it works
|
|
</Button>
|
|
<Button to="https://threefold.info/mycelium_economics/docs/faq/hosting_faq" as="a" variant="outline" target="_blank">
|
|
Explore Docs
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* ✅ 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>
|
|
)
|
|
}
|