feat: standardize button components and update GPU hero section

- Refactored Button component usage across hero sections to use consistent variant/color props instead of inline styles
- Added new cyan outline button variant with hover state styling
- Updated GPU hero section with new heading, condensed description, and dual CTA buttons
- Standardized button spacing and removed unnecessary whitespace in button text
- Modified Button component type definitions to support cyan color in outline variant

src/components/Button.tsx

@@ -17,6 +17,7 @@ const variantStyles = {
     green: 'bg-green-500 text-white hover:bg-green-600',
   },
   outline: {
+    cyan: 'border-cyan-500 text-cyan-500 hover:bg-cyan-50',
     gray: 'border-gray-300 text-gray-700 hover:border-cyan-500 active:border-cyan-500',
     white: 'border-gray-300 text-white hover:border-cyan-500 active:border-cyan-500',
   },
@@ -29,7 +30,7 @@ type ButtonProps = (
     }
   | {
       variant: 'outline'
-      color?: keyof typeof variantStyles.outline
+      color?: (keyof typeof variantStyles.outline) | 'cyan'
     }
 ) &
   (

src/pages/cloud/CloudHeroAlt.tsx

@@ -21,12 +21,8 @@ export function CloudHeroAlt() {
              Mycelium Cloud blends deterministic compute with quantum-safe storage, delivering a sovereign platform built for zero-ops automation.
           </p>
           <div className="mt-8">
-            <Button
+            <Button href="#" variant="solid" color="cyan">
-              href="#"
+              Experience Deterministic Compute
-              className="inline-flex rounded-xl bg-cyan-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-cyan-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
-            >
-              {' '}
-              Experience Deterministic Compute{' '}
             </Button>
           </div>
         </div>

src/pages/compute/ComputeHero.tsx

@@ -24,12 +24,8 @@ export function ComputeHero() {
             Compute that verifies itself. Expands itself. Heals itself.
           </p>
           <div className="mt-8">
-            <Button
+            <Button href="#" variant="solid" color="cyan">
-              href="#"
+              Experience Deterministic Compute
-              className="inline-flex rounded-xl bg-cyan-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-cyan-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
-            >
-              {' '}
-              Experience Deterministic Compute{' '}
             </Button>
           </div>
         </div>

src/pages/gpu/GpuHero.tsx

@@ -16,19 +16,16 @@ export function GpuHero() {
       <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">
         <div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 xl:pr-32">
           <h2 className="text-base/7 font-semibold text-cyan-500">GPU</h2>
-          <p className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">The energy behind intelligence.</p>
+          <h1 className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Unify Distributed GPU Power. Run Intelligence Anywhere.</h1>
           <p className="mt-6 text-base/7 text-gray-600">
-            Mycelium GPU unifies distributed acceleration into a single sovereign fabric — turning fragmented hardware into one adaptive intelligence layer.
+            Mycelium GPU transforms fragmented GPU resources into a single sovereign fabric for running AI, ML, and rendering workloads — from edge to core, with deterministic performance and transparent cost.
-            Run AI, ML, and rendering workloads anywhere, from edge to core, with deterministic performance and transparent cost.
-            No silos. No intermediaries. Just raw, verifiable power — orchestrated through code, not control.
           </p>
-          <div className="mt-8">
+          <div className="mt-8 flex items-center gap-x-4">
-            <Button
+            <Button to="/docs" variant="solid" color="cyan">
-              href="#"
+              Get Started →
-              className="inline-flex rounded-xl bg-cyan-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-cyan-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
+            </Button>
-            >
+            <Button to="#architecture" variant="outline" color="cyan">
-              {' '}
+              Explore Architecture →
-              Unify Your GPU Power{' '}
             </Button>
           </div>
         </div>

src/pages/storage/StorageHero.tsx

@@ -22,12 +22,8 @@ export function StorageHero() {
 Rooted in open standards, it ensures speed, resilience, and true data sovereignty.
           </p>
           <div className="mt-8">
-            <Button
+            <Button href="#" variant="solid" color="cyan">
-              href="#"
+              Talk to an expert
-              className="inline-flex rounded-xl bg-cyan-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-cyan-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
-            >
-              {' '}
-              Talk to an expert{' '}
             </Button>
           </div>
         </div>