feat: add cyan glow effects and new network resilience animation

- Added cyan radial glow SVG to CallToAction components across all product pages for visual consistency
- Created NoSinglePoint animation demonstrating redundant network paths and resilience against single point failures
- Updated HomeArchitecture layout to better center and display animations with improved flex positioning
This commit is contained in:
2025-11-14 22:23:11 +01:00
parent 33821987aa
commit a3028ff448
20 changed files with 548 additions and 174 deletions

View File

@@ -1,32 +1,32 @@
'use client'
import { Button } from '@/components/Button'
import { Eyebrow, H3, P } from '@/components/Texts'
import { Eyebrow, H3 } 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"
className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
style={{ backgroundImage: "url('/images/gpuhero2.png')", backgroundSize: "contain" }}
>
{/* Inner padding */}
<div className="px-6 py-16 lg:py-16">
<div className="max-w-3xl mx-auto text-center">
<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-800">
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 justify-center gap-x-6">
<Button href="/host" variant="solid" color="cyan">
Host a Node
<p className="mt-6 text-lg">
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 to="#node-getting-started" as="a" variant="solid" color="cyan">
How it works
</Button>
<Button href="#" variant="outline">
Learn More
<Button to="#node-architecture" as="a" variant="outline">
Explore Docs <span aria-hidden="true"></span>
</Button>
</div>
</div>