forked from emre/www_projectmycelium_com
sasha-astiadi
c56f67ae2e
- Restructured hero section with boxed container and background image positioning - Added onGetStartedClick callback prop for interactive button handling - Updated button variants and added tagline about network compatibility
52 lines
2.1 KiB
TypeScript
52 lines
2.1 KiB
TypeScript
import { H3, Eyebrow } from "@/components/Texts"
|
||
import { Button } from "@/components/Button"
|
||
|
||
export function ComputeHero({ onGetStartedClick = () => {} }: { onGetStartedClick?: () => void }) {
|
||
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/computehero.webp')", backgroundSize: "contain" }}
|
||
>
|
||
{/* Inner padding */}
|
||
<div className="px-6 py-16 lg:py-16">
|
||
<div className="max-w-xl lg:pl-6">
|
||
<Eyebrow>
|
||
Mycelium Compute
|
||
</Eyebrow>
|
||
<H3 className="mt-4">
|
||
Deterministic Compute You Control
|
||
</H3>
|
||
<p className="mt-6 text-lg">
|
||
Run workloads on sovereign, self-verifying infrastructure.
|
||
Mycelium Compute delivers predictable execution, zero drift, and automatic healing, whether you’re running containers, VMs, agents, or full Kubernetes clusters.
|
||
</p>
|
||
<p className="mt-4 lg:text-base italic text-gray-600 text-sm">
|
||
Works Alone. Works Together.
|
||
Mycelium Compute can run on any network fabric, or pair with Mycelium Network
|
||
for sovereign connectivity.
|
||
</p>
|
||
<div className="mt-10 flex items-center gap-x-6">
|
||
<Button
|
||
onClick={onGetStartedClick}
|
||
variant="solid"
|
||
color="cyan"
|
||
>
|
||
Get started
|
||
</Button>
|
||
<Button to="#" variant="outline">
|
||
Documentation <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>
|
||
)
|
||
}
|