forked from emre/www_projectmycelium_com
70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
'use client'
|
|
|
|
import {
|
|
BookOpenIcon,
|
|
ChatBubbleOvalLeftEllipsisIcon,
|
|
LifebuoyIcon,
|
|
UserGroupIcon,
|
|
} from '@heroicons/react/24/outline'
|
|
|
|
const features = [
|
|
{
|
|
name: 'Documentation',
|
|
description: 'Documentation for Mycelium.',
|
|
href: 'https://threefold.info/mycelium_network/docs/',
|
|
icon: BookOpenIcon,
|
|
},
|
|
{
|
|
name: 'Support',
|
|
description: 'Talk to an expert.',
|
|
href: 'https://threefoldfaq.crisp.help/en/',
|
|
icon: LifebuoyIcon,
|
|
},
|
|
{
|
|
name: 'Forum',
|
|
description: 'Forum for all your questions.',
|
|
href: 'https://forum.threefold.io/',
|
|
icon: ChatBubbleOvalLeftEllipsisIcon,
|
|
},
|
|
{
|
|
name: 'Community',
|
|
description: 'Join our Developers community on telegram.',
|
|
href: 'https://t.me/threefoldtesting',
|
|
icon: UserGroupIcon,
|
|
},
|
|
]
|
|
|
|
export function DevHub() {
|
|
return (
|
|
<div className="bg-gray-900 py-24 sm:py-32">
|
|
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
|
|
<div className="col-span-2">
|
|
<h2 className="mb-2 text-base font-semibold leading-7 text-cyan-500">Get Started</h2>
|
|
<p className="text-3xl font-medium tracking-tight text-white lg:text-4xl">Developer Hub</p>
|
|
<p className="mt-6 text-lg text-gray-300">
|
|
Our Developer Hub is a resource center for developers looking to build on top of Mycelium.
|
|
Join our Developers community on telegram to get started.
|
|
</p>
|
|
</div>
|
|
<dl className="col-span-3 grid grid-cols-1 gap-8 sm:grid-cols-2">
|
|
{features.map((feature) => (
|
|
<a
|
|
key={feature.name}
|
|
href={feature.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block rounded-2xl border border-gray-700 bg-gray-900/40 p-6 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:bg-gray-800 hover:shadow-lg hover:shadow-cyan-500/20"
|
|
>
|
|
<feature.icon aria-hidden="true" className="mb-4 h-6 w-6 flex-none text-cyan-500" />
|
|
<dt className="font-semibold text-white">{feature.name}</dt>
|
|
<dd className="mt-2 text-gray-400">{feature.description}</dd>
|
|
</a>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|