fix: adjust spacing and styling in hero and about sections for better responsive layout

src/components/About.tsx

@@ -7,7 +7,7 @@ export function About() {
   return (
     <section
       id="about"
-      className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 lg:-top-12 top-0"
+      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">
         <CircleBackground color="#fff" className="animate-spin-slower" />
@@ -28,6 +28,7 @@ export function About() {
               href="https://docs.ourworld.tf/mycelium_cloud/docs/"
               target="_blank"
               variant="outline"
+              color="white"
             >
               Learn More
             </Button>