feat: add DevHub section and update heading styles across components

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>
     </>
   )
 }

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>

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>
+  )
+}

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>

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>

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>