ourworld_web/www_mycelium_net
23
0
Fork 0
forked from sashaastiadi/www_mycelium_net
Code Issues Pull Requests Activity

refactor: update DevHub component styling with bordered feature cards and code bracket icons

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-15 15:42:17 +02:00
parent 50f8ae3d69
commit 607a31e96d
1 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/DevHub.tsx
View File

@@ -1,4 +1,4 @@
import { CheckIcon } from '@heroicons/react/20/solid' import { CodeBracketIcon } from '@heroicons/react/24/outline'
const features = [ const features = [
{ {
@@ -21,21 +21,26 @@ export function DevHub() {
<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="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"> <div className="col-span-2">
<h2 className="text-base/7 font-semibold text-cyan-500 mb-2">Get Started</h2> <h2 className="text-base/7 font-semibold text-cyan-500 mb-2">Get Started</h2>
<p className="text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl"> <p className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
Developer Hub Developer Hub
</p> </p>
<p className="mt-6 text-base/7 text-gray-300"> <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. 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> </p>
</div> </div>
<dl className="col-span-3 grid grid-cols-1 gap-x-8 gap-y-10 text-base/7 text-gray-400 sm:grid-cols-2 lg:gap-y-16"> <dl className="col-span-3 grid grid-cols-1 gap-8 sm:grid-cols-2">
{features.map((feature) => ( {features.map((feature) => (
<div key={feature.name} className="relative pl-9"> <div key={feature.name} className="rounded-2xl border border-gray-700 p-6">
<dt className="font-semibold text-white"> <div className="flex items-center gap-x-3">
<CheckIcon aria-hidden="true" className="absolute top-1 left-0 size-5 text-indigo-400" /> <CodeBracketIcon
{feature.name} aria-hidden="true"
</dt> className="h-6 w-6 flex-none text-cyan-500"
<dd className="mt-2">{feature.description}</dd> />
<dt className="flex-auto font-semibold text-white">
{feature.name}
</dt>
</div>
<dd className="mt-4 text-gray-400">{feature.description}</dd>
</div> </div>
))} ))}
</dl> </dl>