ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 4 Pull Requests Releases Activity

refactor: redesign ComputeHero component layout and styling

Browse Source 
- 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
This commit is contained in:
sasha-astiadi
2025-11-06 23:03:25 +01:00
parent 39b748cdac
commit c56f67ae2e
1 changed files with 43 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/pages/compute/ComputeHero.tsx
View File

@@ -1,35 +1,51 @@
'use client' import { H3, Eyebrow } from "@/components/Texts"
import { Button } from "@/components/Button"
import { Button } from '@/components/Button' export function ComputeHero({ onGetStartedClick = () => {} }: { onGetStartedClick?: () => void }) {
import { Eyebrow, P, H3 } from '@/components/Texts'
export function ComputeHero() {
return ( return (
<div className="relative bg-white"> <div className="">
<div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2"> {/* Boxed container */}
<img <div
alt="" 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"
src="/images/computehero.webp" style={{ backgroundImage: "url('/images/computehero.webp')", backgroundSize: "contain" }}
className="size-full object-contain" >
/> {/* Inner padding */}
<div className="px-6 py-16 lg:py-16">
</div> <div className="max-w-xl lg:pl-6">
<div className="relative mx-auto max-w-7xl py-12 lg:py-24 lg:px-8"> <Eyebrow>
<div className="max-w-2xl pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24"> Mycelium Compute
<Eyebrow className="text-base/7 font-semibold text-cyan-500">COMPUTE</Eyebrow> </Eyebrow>
<H3 className="mt-2 text-gray-900">Deterministic Compute You Control</H3> <H3 className="mt-4">
<P className="mt-6 text-gray-600"> Deterministic Compute You Control
Run workloads on sovereign, self-verifying infrastructure. </H3>
Mycelium Compute delivers predictable execution, zero drift, and automatic healing, whether you’re running containers, VMs, agents, or full Kubernetes clusters. <p className="mt-6 text-lg">
</P> Run workloads on sovereign, self-verifying infrastructure.
<div className="mt-12"> Mycelium Compute delivers predictable execution, zero drift, and automatic healing, whether you’re running containers, VMs, agents, or full Kubernetes clusters.
<Button href="#" variant="solid" color="cyan"> </p>
How it works <p className="mt-4 lg:text-base italic text-gray-600 text-sm">
</Button> Works Alone. Works Together.
<Button href="#" variant="outline" color="cyan">Explore Docs</Button> 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> </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> </div>
) )
} }