forked from emre/www_projectmycelium_com
64 lines
2.5 KiB
TypeScript
64 lines
2.5 KiB
TypeScript
import { InboxIcon, TrashIcon, UsersIcon } from '@heroicons/react/24/outline'
|
|
import { H2, P } from '@/components/Texts'
|
|
|
|
const features = [
|
|
{
|
|
name: 'Mycelium Network',
|
|
description:
|
|
"A global, end-to-end encrypted overlay that simply doesn't break.",
|
|
href: '/network',
|
|
icon: UsersIcon,
|
|
image: '/images/network_icon.png',
|
|
},
|
|
{
|
|
name: 'Mycelium Cloud',
|
|
description:
|
|
'An autonomous, stateless OS that enforces pre-deterministic deployments you define.',
|
|
href: '/cloud',
|
|
icon: TrashIcon,
|
|
image: '/images/cloud_icon.png',
|
|
},
|
|
{
|
|
name: 'Mycelium Agents',
|
|
description:
|
|
'Your sovereign agent with private memory and permissioned data access—always under your control.',
|
|
href: '/agents',
|
|
icon: InboxIcon,
|
|
image: '/images/agent_icon.png',
|
|
},
|
|
]
|
|
|
|
export function HomeFeatures() {
|
|
|
|
return (
|
|
<div className="">
|
|
<div className="relative bg-transparent pb-24 Pt-0 overflow-hidden">
|
|
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div className="mx-auto max-w-2xl lg:mx-0">
|
|
<H2 className="">
|
|
The Building Blocks of <span className="font-medium text-7xl">Decentralized Future</span>
|
|
</H2>
|
|
<P className="mt-6 ">
|
|
From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
|
|
</P>
|
|
</div>
|
|
<div className="mx-auto mt-16 max-w-2xl lg:max-w-7xl">
|
|
<div className="grid grid-cols-1 gap-x-12 gap-y-12 lg:grid-cols-3">
|
|
{features.map((feature) => (
|
|
<div key={feature.name} className="relative flex flex-col p-8 rounded-3xl border border-gray-100 bg-white backdrop-blur-lg overflow-hidden shadow-lg hover:shadow-xl hover:border-cyan-500 hover:scale-105 transform transition-all duration-300">
|
|
<div className="w-30 h-30 bg-white/80 rounded-full flex items-center justify-center">
|
|
<img src={feature.image} alt="" className="w-25 h-25" />
|
|
</div>
|
|
<h3 className="mt-6 text-xl font-semibold text-black">{feature.name}</h3>
|
|
<p className="mt-4 text-base text-gray-800">{feature.description}</p>
|
|
<a href={feature.href} className="mt-6 text-base font-semibold text-black">Learn more <span aria-hidden="true"> →</span></a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|