feat: add Learn More button to About section with documentation link

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,7 +7,7 @@ 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 -top-12"
     >
       <div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
         <CircleBackground color="#fff" className="animate-spin-slower" />
@@ -22,6 +23,15 @@ export function About() {
           <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"
+            >
+              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/Features.tsx

@@ -6,7 +6,7 @@ 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">
           Network Capabilities

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