forked from emre/www_projectmycelium_com
55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import { CP, CT } from '@/components/Texts'
|
|
import {
|
|
ArrowPathIcon,
|
|
GlobeAltIcon,
|
|
ShieldCheckIcon,
|
|
} from '@heroicons/react/24/solid'
|
|
|
|
const stats = [
|
|
{
|
|
id: 1,
|
|
name: 'Cryptographically verified deployments',
|
|
value: 'Signed & Checksummed',
|
|
icon: ShieldCheckIcon,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Stateless execution that scales anywhere',
|
|
value: 'Global Scaling',
|
|
icon: GlobeAltIcon,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Automatic healing and recovery',
|
|
value: 'Self-Repairing',
|
|
icon: ArrowPathIcon,
|
|
},
|
|
]
|
|
|
|
export function ComputeDesign() {
|
|
return (
|
|
<div className="">
|
|
|
|
{/* ✅ Top horizontal line with spacing */}
|
|
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
|
<div className="w-full border-t border-l border-r border-gray-100" />
|
|
|
|
{/* ✅ Top horizontal line with spacing */}
|
|
<div className="mx-auto max-w-7xl border-gray-100">
|
|
<dl className="grid grid-cols-1 gap-4 lg:gap-14 overflow-hidden text-center lg:grid-cols-3">
|
|
{stats.map((stat) => (
|
|
<div key={stat.id} className="flex flex-col items-center bg-gray-400/5 py-8 px-12 border border-gray-100 lg:border-t-0 lg:border-b-0">
|
|
<stat.icon className="h-8 w-8 fill-cyan-500 mb-4" aria-hidden="true" />
|
|
<CT className="">{stat.value}</CT>
|
|
<CP className="mt-1">{stat.name}</CP>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
{/* ✅ Bottom horizontal line + spacing */}
|
|
<div className="w-full border-b border-gray-100" />
|
|
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
|
</div>
|
|
)
|
|
}
|