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

@@ -1,4 +1,5 @@
 import { AppStoreLink } from '@/components/AppStoreLink'
+import { Button } from '@/components/Button'
 import { CircleBackground } from '@/components/CircleBackground'
 import { Container } from '@/components/Container'
 
@@ -6,22 +7,33 @@ export function About() {
   return (
     <section
       id="about"
-      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
+      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 sm:text-center">
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
+        <div className="mx-auto max-w-3xl text-center">
+          <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>
           <p className="mt-6 text-lg text-gray-300">
             Our mission is to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.
           </p>
+          <div className="mt-8 flex justify-center">
+            <Button
+              href="https://docs.ourworld.tf/mycelium_cloud/docs/"
+              target="_blank"
+              variant="outline"
+              color="white"
+            >
+              Learn More
+            </Button>
+          </div>
         </div>
       </Container>
     </section>

src/components/AppScreen.tsx

@@ -51,7 +51,7 @@ export function AppScreen({
 }: React.ComponentPropsWithoutRef<'div'>) {
   return (
     <div className={clsx('flex flex-col', className)} {...props}>
-      <div className="flex justify-between px-4 pt-4">
+      <div className="flex justify-between px-4 pt-0">
         <MenuIcon className="h-6 w-6 flex-none" />
         <Logo className="h-6 flex-none" />
         <UserIcon className="h-6 w-6 flex-none" />

src/components/Button.tsx

@@ -16,7 +16,8 @@ const variantStyles = {
     gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
   },
   outline: {
-    gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
+    gray: 'border-gray-300 text-gray-700 hover:text-gray-500 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
+    white: 'border-gray-300 text-white hover:text-gray-200 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80', 
   },
 }
 

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

@@ -6,7 +6,7 @@ export function Container({
 }: React.ComponentPropsWithoutRef<'div'>) {
   return (
     <div
-      className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
+      className={clsx('mx-auto max-w-7xl px-6 lg:px-8', className)}
       {...props}
     />
   )

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

@@ -6,21 +6,18 @@ import ContentDistribution from '@/components/ContentDistribution'
 
 export function Features() {
   return (
-    <section id="features" className="bg-white py-24 sm:py-32">
+    <section id="features" className=" py-24">
       <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
-        <p className="mt-2 max-w-lg text-3xl lg:text-4xl lg:text-4xl font-medium tracking-tight  text-pretty text-gray-950">
+        <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>
-        <p className="mt-2 max-w-lg text-lg text-gray-600">
-            If you have anything else you want to ask,{' '}
-            <a
-              href="mailto:info@example.com"
-              className="text-gray-900 underline"
-            >
-              reach out to us
-            </a>
-            .
-          </p>
+        <p className="mt-4 max-w-xl text-lg text-gray-600">
+            Built for resilience and autonomy, the Mycelium Network dynamically connects nodes through intelligent routing, proxy discovery, and decentralized delivery.
+        </p>
+        <p className="mt-2 max-w-xl text-lg text-gray-600">
+Each component — from message passing to content distribution — works in harmony to create a fully self-healing, self-optimizing data mesh.
+        </p>  
         <div className="mt-10 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
           <div className="relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-t-4xl lg:rounded-tl-4xl" />

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

@@ -98,20 +98,20 @@ function PlayIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 
 export function Hero() {
   return (
-    <div className="overflow-hidden py-32">
+    <div className="overflow-hidden lg:py-32 lg:pb-0 pb-24">
       <Container>
-        <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
+        <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
           <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
-            <h1 className="text-5xl lg:text-6xl font-medium tracking-tight text-gray-900">
+            <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
               Mycelium
             </h1>
-            <h2 className="mt-6 text-2xl tracking-tight text-gray-600">
-              Unleashing the Power of Decentralized Networks
+              <h2 className="mt-6 lg:text-2xl text-xl tracking-tight leading-normal text-gray-600">
+                Unleashing the Power of Decentralized Networks
             </h2>
-            <p className="mt-6 text-lg text-gray-600">
+            <p className="mt-6 lg:text-xl text-lg text-gray-600 lg:leading-normal leading-tight">
               Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
             </p>
-            <p className="mt-6 text-lg text-gray-600">
+            <p className="mt-6 text-lg text-gray-600 ">
               Coming Soon: New Decentralized Features
             </p>
             <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
@@ -125,9 +125,9 @@ export function Hero() {
               </Button>
             </div>
           </div>
-          <div className="relative mt-10 sm:mt-20 lg:col-span-5 lg:row-span-2 lg:mt-0 xl:col-span-6">
-            <BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/3 mask-[linear-gradient(to_bottom,white_20%,transparent_75%)] stroke-gray-300/70 sm:top-16 sm:-translate-x-1/2 lg:-top-16 lg:ml-12 xl:-top-14 xl:ml-0" />
-            <div className="-mx-4 h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)] px-9 sm:mx-0 lg:absolute lg:-inset-x-10 lg:-top-10 lg:-bottom-20 lg:h-auto lg:px-0 lg:pt-10 xl:-bottom-32">
+          <div className="relative lg:mt-10 mt-0  lg:col-span-5 lg:row-span-2 xl:col-span-6">
+            <BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12  ml-0" />
+            <div className="mx-auto h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)]  lg:px-0 lg:absolute lg:-inset-x-10 lg:-top-24  lg:h-auto lg:pt-10 xl:-bottom-32">
               <Image
                 src="/images/phoneframe.png"
                 alt="Mycelium application demo"

src/components/PhoneFrame.tsx

@@ -16,7 +16,7 @@ export function PhoneFrame({
         fill
         priority={priority}
       />
-      <div className="absolute inset-x-[6.3%] top-[3.15%] bottom-[2.75%] rounded-3xl overflow-hidden bg-gray-900">
+      <div className="absolute inset-x-[6.3%] top-[3.15%] bottom-[2.75%] rounded-3xl overflow-y-auto bg-gray-900">
         {children}
       </div>
     </div>

src/components/PrimaryFeatures.tsx

@@ -194,7 +194,7 @@ type ScreenProps =
 function InviteScreen(props: ScreenProps) {
   return (
     <AppScreen className="w-full">
-      <Image src="/images/connector.png" alt="Mycelium Connector" width={366} height={732} />
+      <Image src="/images/connector.png" alt="Mycelium Connector" width={366} height={732} className="mt-[-2rem]" />
     </AppScreen>
   )
 }
@@ -202,7 +202,7 @@ function InviteScreen(props: ScreenProps) {
 function StocksScreen(props: ScreenProps) {
   return (
     <AppScreen className="w-full">
-      <Image src="/images/peers.png" alt="Mycelium Peers" width={366} height={732} />
+      <Image src="/images/peers.png" alt="Mycelium Peers" width={366} height={732} className="mt-[-2rem]" />
     </AppScreen>
   )
 }
@@ -210,7 +210,7 @@ function StocksScreen(props: ScreenProps) {
 function InvestScreen(props: ScreenProps) {
   return (
     <AppScreen className="w-full">
-      <Image src="/images/setting.png" alt="Mycelium Settings" width={366} height={732} />
+      <Image src="/images/setting.png" alt="Mycelium Settings" width={366} height={732} className="mt-[-2rem]" />
     </AppScreen>
   )
 }
@@ -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>