Files
www_projectmycelium_com/src/pages/nodes/NodeHero.tsx
sasha-astiadi e6b194e8c7 refactor: adjust spacing and styling across multiple components for visual consistency
- Increased HomeAurora subtitle margin from mt-4 to mt-6 for better spacing
- Added bg-white to HomeDesign content container for explicit background
- Removed bg-white from HomeTab top separator div
- Reduced network Hero title margin from mt-8 to mt-4 and second paragraph margin from mt-6 to mt-4
- Changed network Hero secondary button variant from cyan to dark
- Reduced NetworkPros title margin from mt-4 to mt-2
2025-11-19 18:00:35 +01:00

47 lines
1.8 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 to="#node-getting-started" as="a" variant="solid" color="cyan">
How it works
</Button>
<Button to="#node-architecture" as="a" variant="outline">
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>
)
}