From 607a31e96d894c0ad236d1009badd9229637f15d Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 15 Oct 2025 15:42:17 +0200
Subject: [PATCH] refactor: update DevHub component styling with bordered
 feature cards and code bracket icons

---
 src/components/DevHub.tsx | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/DevHub.tsx b/src/components/DevHub.tsx
index 72eacfd..e91667d 100644
--- a/src/components/DevHub.tsx
+++ b/src/components/DevHub.tsx
@@ -1,4 +1,4 @@
-import { CheckIcon } from '@heroicons/react/20/solid'
+import { CodeBracketIcon } from '@heroicons/react/24/outline'
 
 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="col-span-2">
             <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
             </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.
             </p>
           </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) => (
-              <div key={feature.name} className="relative pl-9">
-                <dt className="font-semibold text-white">
-                  <CheckIcon aria-hidden="true" className="absolute top-1 left-0 size-5 text-indigo-400" />
-                  {feature.name}
-                </dt>
-                <dd className="mt-2">{feature.description}</dd>
+              <div key={feature.name} className="rounded-2xl border border-gray-700 p-6">
+                <div className="flex items-center gap-x-3">
+                  <CodeBracketIcon
+                    aria-hidden="true"
+                    className="h-6 w-6 flex-none text-cyan-500"
+                  />
+                  <dt className="flex-auto font-semibold text-white">
+                    {feature.name}
+                  </dt>
+                </div>
+                <dd className="mt-4 text-gray-400">{feature.description}</dd>
               </div>
             ))}
           </dl>