forked from emre/www_projectmycelium_com
60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import { Container } from '@/components/Container'
|
||
import { Eyebrow, H3, CT } from '@/components/Texts'
|
||
import {
|
||
BoltIcon,
|
||
BanknotesIcon,
|
||
GlobeAltIcon,
|
||
ShieldCheckIcon,
|
||
} from '@heroicons/react/24/solid'
|
||
|
||
const benefits = [
|
||
{
|
||
name: 'Consistent, reserved GPU performance (no noisy neighbor effects)',
|
||
icon: BoltIcon,
|
||
},
|
||
{
|
||
name: 'Transparent cost (no markup, no surprise billing)',
|
||
icon: BanknotesIcon,
|
||
},
|
||
{
|
||
name: 'Run anywhere – cloud, on-prem, edge, home lab',
|
||
icon: GlobeAltIcon,
|
||
},
|
||
{
|
||
name: 'Your data never leaves your control',
|
||
icon: ShieldCheckIcon,
|
||
},
|
||
]
|
||
|
||
export function GpuDesign() {
|
||
return (
|
||
<section className="bg-white py-24 sm:py-32">
|
||
<Container>
|
||
{/* Header */}
|
||
<div className="mx-auto max-w-3xl sm:text-center">
|
||
<Eyebrow>CORE VALUE</Eyebrow>
|
||
<H3 className="mt-4 text-gray-900">GPU Power You Actually Control</H3>
|
||
|
||
</div>
|
||
|
||
{/* Key Benefits */}
|
||
<div className="mx-auto mt-16 max-w-5xl">
|
||
<dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-2">
|
||
{benefits.map((benefit) => (
|
||
<div key={benefit.name} className="relative pl-12">
|
||
<benefit.icon
|
||
className="absolute left-0 top-1 size-6 text-cyan-600"
|
||
aria-hidden="true"
|
||
/>
|
||
<CT className="font-semibold text-gray-900">
|
||
{benefit.name}
|
||
</CT>
|
||
</div>
|
||
))}
|
||
</dl>
|
||
</div>
|
||
</Container>
|
||
</section>
|
||
)
|
||
}
|