From 5483e7950a2ac7ac5851647be5ed16299c3ec0b9 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 15 Oct 2025 12:35:57 +0200
Subject: [PATCH] feat: add DevHub section and update heading styles across
 components

---
 src/app/(main)/download/page.tsx     |  8 +++++
 src/components/About.tsx             |  5 +--
 src/components/DevHub.tsx            | 46 ++++++++++++++++++++++++++++
 src/components/Features.tsx          |  1 +
 src/components/PrimaryFeatures.tsx   |  5 +--
 src/components/SecondaryFeatures.tsx |  5 +--
 6 files changed, 64 insertions(+), 6 deletions(-)
 create mode 100644 src/components/DevHub.tsx

diff --git a/src/app/(main)/download/page.tsx b/src/app/(main)/download/page.tsx
index dc253a5..ce61006 100644
--- a/src/app/(main)/download/page.tsx
+++ b/src/app/(main)/download/page.tsx
@@ -1,5 +1,7 @@
 import { AnimatedSection } from '@/components/AnimatedSection'
 import DownloadHero from '@/components/DownloadHero'
+import { DevHub } from '@/components/DevHub'
+import { Faqs } from '@/components/Faqs'
 
 export default function Download() {
   return (
@@ -7,6 +9,12 @@ export default function Download() {
       <AnimatedSection>
         <DownloadHero />
       </AnimatedSection>
+      <AnimatedSection>
+        <DevHub />
+      </AnimatedSection>
+            <AnimatedSection>
+              <Faqs />
+            </AnimatedSection>
     </>
   )
 }
diff --git a/src/components/About.tsx b/src/components/About.tsx
index 4ecaa62..5f19f40 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -14,9 +14,10 @@ export function About() {
       </div>
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
+          <h2 className="text-base/7 font-semibold text-cyan-500">Our Mission</h2>
+          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
             Discover Mycelium
-          </h2>
+          </p>
           <p className="mt-6 text-lg text-gray-300">
             Mycelium is an unbreakable network, always finding the shortest path and providing 100% secure, peer-to-peer communication. But this is just the beginning.
           </p>
diff --git a/src/components/DevHub.tsx b/src/components/DevHub.tsx
new file mode 100644
index 0000000..72eacfd
--- /dev/null
+++ b/src/components/DevHub.tsx
@@ -0,0 +1,46 @@
+import { CheckIcon } from '@heroicons/react/20/solid'
+
+const features = [
+  {
+    name: 'Documentation',
+    description: 'Documentation for Mycelium.',
+  },
+  { name: 'Support', description: 'Talk to an expert.' },
+  {
+    name: 'Forum',
+    description: 'Forum for all your questions.',
+  },
+  { name: 'Community', description: 'Join our Developers community on telegram.' },
+
+]
+
+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="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">
+              Developer Hub
+            </p>
+            <p className="mt-6 text-base/7 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">
+            {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>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/Features.tsx b/src/components/Features.tsx
index 814e9a1..5c2702b 100644
--- a/src/components/Features.tsx
+++ b/src/components/Features.tsx
@@ -8,6 +8,7 @@ export function Features() {
   return (
     <section id="features" className=" py-24">
       <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
+        <h2 className="text-base/7 font-semibold text-cyan-500">Core Components</h2>
         <p className="mt-2 max-w-4xl text-3xl lg:text-4xl font-medium tracking-tight  text-pretty text-gray-950">
           Network Capabilities
         </p>
diff --git a/src/components/PrimaryFeatures.tsx b/src/components/PrimaryFeatures.tsx
index dfc6128..1b4bbc1 100644
--- a/src/components/PrimaryFeatures.tsx
+++ b/src/components/PrimaryFeatures.tsx
@@ -408,9 +408,10 @@ export function PrimaryFeatures() {
     >
       <Container>
         <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
+          <h2 className="text-base/7 font-semibold text-cyan-500">How It Works</h2>
+          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
             How Mycelium Operates
-          </h2>
+          </p>
           <p className="mt-6 text-lg text-gray-300">
             Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks.
           </p>
diff --git a/src/components/SecondaryFeatures.tsx b/src/components/SecondaryFeatures.tsx
index f2521b2..9c8a400 100644
--- a/src/components/SecondaryFeatures.tsx
+++ b/src/components/SecondaryFeatures.tsx
@@ -195,9 +195,10 @@ export function SecondaryFeatures() {
     >
       <Container>
         <div className="mx-auto max-w-4xl sm:text-center">
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+          <h2 className="text-base/7 font-semibold text-cyan-500">Roadmap</h2>
+          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
             Coming Soon: The Future of Mycelium
-          </h2>
+          </p>
           <p className="mt-6 text-lg text-gray-600">
             Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
           </p>