refactor: update About and Features components with improved content and styling

src/components/About.tsx

@@ -7,13 +7,13 @@ 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" />
       </div>
       <Container className="relative">
-        <div className="mx-auto max-w-3xl sm:text-center">
+        <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">
             Discover Mycelium
           </h2>
@@ -28,6 +28,7 @@ export function About() {
               href="https://docs.ourworld.tf/mycelium_cloud/docs/"
               target="_blank"
               variant="outline"
+              color="white"
             >
               Learn More
             </Button>

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

@@ -8,19 +8,15 @@ 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">
-        <p className="mt-2 max-w-lg text-3xl lg:text-4xl lg:text-4xl font-medium tracking-tight  text-pretty text-gray-950">
+        <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">
+        <p className="mt-4 max-w-xl text-lg text-gray-600">
-            If you have anything else you want to ask,{' '}
+            Built for resilience and autonomy, the Mycelium Network dynamically connects nodes through intelligent routing, proxy discovery, and decentralized delivery.
-            <a
+        </p>
-              href="mailto:info@example.com"
+        <p className="mt-2 max-w-xl text-lg text-gray-600">
-              className="text-gray-900 underline"
+Each component — from message passing to content distribution — works in harmony to create a fully self-healing, self-optimizing data mesh.
-            >
+        </p>  
-              reach out to us
-            </a>
-            .
-          </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/Hero.tsx

@@ -98,7 +98,7 @@ function PlayIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 
 export function Hero() {
   return (
-    <div className="overflow-hidden lg:py-32 pb-4">
+    <div className="overflow-hidden lg:py-32 lg:pb-0 pb-24">
       <Container>
         <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">
@@ -126,8 +126,8 @@ export function Hero() {
             </div>
           </div>
           <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-16 lg:ml-12 xl:-top-14 ml-0" />
+            <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-10 lg:-bottom-20 lg:h-auto lg:pt-10 xl:-bottom-32">
+            <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"