forked from emre/www_projectmycelium_com
70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import { CP } from '@/components/Texts'
|
||
import {
|
||
ShieldCheckIcon,
|
||
GlobeAltIcon,
|
||
BoltIcon,
|
||
BanknotesIcon,
|
||
} from '@heroicons/react/24/solid'
|
||
|
||
const benefits = [
|
||
{
|
||
id: 1,
|
||
title: "Unbreakable by Design",
|
||
desc: "No central cloud to censor or fail. The network heals itself.",
|
||
icon: ShieldCheckIcon,
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "Sovereign by Default",
|
||
desc: "Identity, compute, and data belong to you – cryptographically.",
|
||
icon: GlobeAltIcon,
|
||
},
|
||
{
|
||
id: 3,
|
||
title: "Hackable & Open",
|
||
desc: "Learn, build, and experiment without permission.",
|
||
icon: BoltIcon,
|
||
},
|
||
{
|
||
id: 4,
|
||
title: "Cost & Energy Efficient",
|
||
desc: "Distributed hardware eliminates hyperscale overhead.",
|
||
icon: BanknotesIcon,
|
||
},
|
||
];
|
||
|
||
export function HomeBenefits() {
|
||
return (
|
||
<div className="">
|
||
|
||
{/* ✅ Top horizontal line with spacing */}
|
||
<div className="max-w-7xl bg-transparent mx-auto border border-t-0 border-b-0 border-gray-100" />
|
||
<div className="w-full border-t border-l border-r border-gray-100" />
|
||
|
||
{/* ✅ Main content */}
|
||
<div className="mx-auto max-w-7xl border-gray-100">
|
||
<dl className="grid grid-cols-1 gap-4 lg:gap-6 lg:grid-cols-4 text-center">
|
||
{benefits.map((item) => (
|
||
<div
|
||
key={item.id}
|
||
className="flex flex-col items-center bg-white/40 dark:bg-black/40 py-10 px-4 border border-gray-100 lg:border-t-0 lg:border-b-0"
|
||
>
|
||
<item.icon className="h-10 w-10 text-cyan-500 mb-4" />
|
||
<h3 className="text-lg font-semibold text-black dark:text-white">
|
||
{item.title}
|
||
</h3>
|
||
<CP className="mt-2 max-w-xs text-gray-600 dark:text-gray-300">
|
||
{item.desc}
|
||
</CP>
|
||
</div>
|
||
))}
|
||
</dl>
|
||
</div>
|
||
|
||
{/* ✅ Bottom 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>
|
||
);
|
||
}
|