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

@@ -9,14 +9,15 @@ export function About() {
       id="about"
       className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 lg:top-0 top-0"
     >
-      <div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
         <CircleBackground color="#fff" className="animate-spin-slower" />
       </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/CallToAction.tsx

@@ -11,7 +11,7 @@ export function CallToAction() {
       id="get-free-shares-today"
       className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
     >
-      <div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
         <CircleBackground color="#fff" className="animate-spin-slower" />
       </div>
       <Container className="relative">
@@ -22,7 +22,7 @@ export function CallToAction() {
           <p className="mt-6 text-lg text-gray-300">
             Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.
           </p>
-          <div className="mt-8 flex justify-center gap-4">
+          <div className="mt-8 grid grid-cols-2 justify-items-center gap-4 sm:flex sm:justify-center">
             <AppStoreLink color="white" />
             <WindowsLink color="white" />
             <AndroidLink color="white" />

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/DownloadHero.tsx

@@ -33,7 +33,7 @@ const features = [
 
 export default function DownloadHero() {
   return (
-    <div className=" py-24 sm:py-32">
+    <div className=" py-16 sm:py-32">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:mx-0">
           <h2 className="text-5xl lg:text-6xl font-medium tracking-tight text-gray-900">

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/Header.tsx

@@ -107,23 +107,8 @@ export function Header() {
                           }}
                           className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pt-32 pb-6 shadow-2xl shadow-gray-900/20"
                         >
-                          <div className="space-y-4">
-                            <MobileNavLink href="/#about">
-                              About
-                            </MobileNavLink>
-                            <MobileNavLink href="/#benefits">
-                              Benefits
-                            </MobileNavLink>
-                            <MobileNavLink href="/#features">
-                              Features
-                            </MobileNavLink>
-                            <MobileNavLink href="/#usecases">
-                              Use Cases
-                            </MobileNavLink>
-                            <MobileNavLink href="/#faqs">FAQs</MobileNavLink>
-                          </div>
-                          <div className="mt-8 flex flex-col gap-4">
-                            <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
+                          <div className="mt-6 flex flex-col gap-4">
+                            <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" target="_blank" rel="noopener noreferrer">
                               Docs
                             </Button>
                             <Button variant="solid" color="cyan" href="/download/">Get Mycelium</Button>
@@ -136,7 +121,7 @@ export function Header() {
               )}
             </Popover>
             <div className="flex items-center gap-6 max-lg:hidden">
-              <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
+              <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" target="_blank" rel="noopener noreferrer">
                 Docs
               </Button>
               <Button href="/download/" variant="solid" color="cyan">Get Mycelium</Button>

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>