fix: center CircleBackground and simplify mobile navigation menu

src/components/About.tsx

@@ -9,7 +9,7 @@ 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">

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">

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