forked from emre/www_projectmycelium_com
sasha-astiadi
0f2f6df299
- Updated ComputeCapabilities component with dark background, bordered container layout, and improved visual hierarchy - Replaced icon components with technology-specific images (Kubernetes, VM, Linux) - Standardized button color scheme across components (gray to white outline variant)
96 lines
3.4 KiB
TypeScript
96 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import { Container } from '@/components/Container'
|
|
import { Eyebrow, H3, P } from '@/components/Texts'
|
|
import { Button } from '@/components/Button'
|
|
|
|
const capabilities = [
|
|
{
|
|
title: 'Containers & K3s',
|
|
description:
|
|
'Deploy services, web apps, and APIs with full Kubernetes compatibility.',
|
|
icon: (
|
|
<div className=" flex items-center justify-center">
|
|
<img src="/images/kubernetes.webp" alt="Kubernetes" className="h-full w-full object-cover" />
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
title: 'Virtual Machines',
|
|
description:
|
|
'Run legacy apps and specialized stacks with secure boot and attestation.',
|
|
icon: (
|
|
<div className="flex items-center justify-center">
|
|
<img src="/images/vm.webp" alt="Virtual Machines" className="h-full w-full object-cover" />
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
title: 'Native Linux Workloads',
|
|
description:
|
|
'Execute agents, batch jobs, and custom tooling statelessly across the grid.',
|
|
icon: (
|
|
<div className="flex items-center justify-center">
|
|
<img src="/images/linux.png" alt="Linux" className="h-full w-full object-cover" />
|
|
</div>
|
|
),
|
|
},
|
|
]
|
|
|
|
export function ComputeCapabilities() {
|
|
return (
|
|
<section className="bg-[#121212] w-full max-w-8xl mx-auto">
|
|
{/* Top horizontal spacer */}
|
|
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
|
|
<div className="w-full border-t border-l border-r border-gray-800" />
|
|
|
|
{/* Boxed container */}
|
|
<div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-800 bg-[#111111] py-12">
|
|
<Container>
|
|
<div className="mx-auto max-w-4xl sm:text-center">
|
|
<Eyebrow className="text-cyan-400">CAPABILITIES</Eyebrow>
|
|
<H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
|
|
What You Can Run
|
|
</H3>
|
|
<P className="mt-6 text-lg text-gray-300">
|
|
Mycelium Compute supports multiple workload types on a single execution
|
|
fabric, from legacy VMs to modern Kubernetes clusters.
|
|
</P>
|
|
</div>
|
|
|
|
{/* Card layout */}
|
|
<ul
|
|
role="list"
|
|
className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6 text-sm sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10"
|
|
>
|
|
{capabilities.map((capability) => (
|
|
<li
|
|
key={capability.title}
|
|
className="rounded-xl border border-gray-800 bg-[#111]/60 p-6 text-center lg:text-left"
|
|
>
|
|
{capability.icon}
|
|
<h3 className="text-lg font-semibold text-white">{capability.title}</h3>
|
|
<p className="mt-2 text-gray-400 leading-snug">{capability.description}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* Button section */}
|
|
<div className="mx-auto mt-12 flex justify-center gap-6">
|
|
<Button variant="solid" color="cyan" href="#">
|
|
Get Started
|
|
</Button>
|
|
<Button variant="outline" color="white" href="#">
|
|
Explore Docs
|
|
</Button>
|
|
</div>
|
|
</Container>
|
|
</div>
|
|
|
|
{/* Bottom border + spacer */}
|
|
<div className="w-full border-b border-gray-800" />
|
|
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
|
|
</section>
|
|
)
|
|
}
|