forked from emre/www_projectmycelium_com
sasha-astiadi
8d1e2f4c7d
- Implemented responsive mobile menu using Headless UI Dialog component with hamburger toggle - Refactored hero sections to use consistent boxed layout with background images and improved spacing - Standardized button styling across hero components with arrow indicators for secondary actions
41 lines
1.7 KiB
TypeScript
41 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import { Button } from '@/components/Button'
|
|
import { Eyebrow, H3 } from '@/components/Texts'
|
|
|
|
export function GpuHero() {
|
|
return (
|
|
<div className="">
|
|
{/* Boxed container */}
|
|
<div
|
|
className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-200 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-2xl lg:pl-6">
|
|
<Eyebrow>Mycelium GPU</Eyebrow>
|
|
<H3 as="h1" className="mt-4">
|
|
Sovereign GPU Acceleration for AI and High-Performance Compute
|
|
</H3>
|
|
<p className="mt-6 text-lg">
|
|
Access GPUs across the Mycelium mesh without waitlists, inflated pricing, or centralized control. Run inference, training, and compute workloads where they make sense: cloud, edge, or on your own hardware.
|
|
</p>
|
|
<div className="mt-10 flex items-center gap-x-6">
|
|
<Button to="#gpu-getting-started" as="a" variant="solid" color="cyan">
|
|
How it works
|
|
</Button>
|
|
<Button to="#gpu-architecture" as="a" variant="outline">
|
|
Explore Docs <span aria-hidden="true">→</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* ✅ Bottom horizontal line with spacing */}
|
|
<div className="w-full border-b border-gray-200" />
|
|
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
|
|
</div>
|
|
)
|
|
}
|