docs: add developer docs for compute and storage

feat: add GPU overview section with key features
- Created new GpuOverview component showcasing 4 core features of GPU service - Added responsive grid layout with feature cards displaying icons and descriptions - Integrated overview section into GpuPage between hero and call-to-action - Implemented dark theme styling with cyan accents for feature icons - Added descriptive text explaining unified GPU acceleration across ThreeFold Grid
2025-10-27 12:32:21 -04:00 · 2025-10-27 17:16:14 +01:00 · 2025-10-27 17:15:58 +01:00
9 changed files with 525 additions and 30 deletions
--- a/docs/mycelium_compute_for_devs.md
+++ b/docs/mycelium_compute_for_devs.md
@@ -0,0 +1,215 @@
+# Mycelium Compute for Developers
+
+*Deterministic Compute Fabric*
+
+## Overview
+
+Mycelium Compute provides a sovereign, deterministic compute fabric that enables developers to launch workloads with cryptographic certainty and autonomous operations. Built on decentralized infrastructure, it offers transparent, verifiable computing environments with zero manual intervention.
+
+## Core Concept
+
+Deterministic compute fabric ensures that every workload deploys exactly as intended with cryptographic verification, eliminating tampering and drift while maintaining full operational autonomy.
+
+---
+
+## Core Features
+
+### Deterministic Deployments
+Cryptographic verification ensures every workload deploys exactly as intended—no tampering, no drift.
+
+**Benefits:**
+- **Cryptographic Verification**: Every workload component verified before deployment
+- **No Configuration Drift**: Environments remain exactly as specified
+- **Tamper Detection**: Any unauthorized changes immediately identified
+- **Complete Reproducibility**: Exact same environment every deployment
+
+### Self-Managing & Stateless Infrastructure
+Fully autonomous infrastructure that scales globally without manual intervention.
+
+**Capabilities:**
+- **Autonomous Operations**: No manual intervention required for scaling
+- **Global Scaling**: Infrastructure scales across the ThreeFold Grid
+- **Stateless Design**: No persistent dependencies on specific hardware
+- **Self-Healing**: Automatic recovery from failures and issues
+
+### Smart Contract-Based Deployment
+Cryptographically signed contracts orchestrate every workload with transparent, tamper-proof execution.
+
+**Benefits:**
+- **Cryptographic Signatures**: Every deployment contract cryptographically signed
+- **Transparent Execution**: All operations verifiable and auditable
+- **Tamper-Proof**: Immutable deployment contracts
+- **Automated Orchestration**: Smart contracts manage workload lifecycle
+
+### Multi-Workload Compatibility with Secure Boot
+Run containers, VMs, and Linux workloads anywhere with stateless secure boot and continuous verification.
+
+**Capabilities:**
+- **Container Support**: Full Kubernetes and Docker compatibility
+- **VM Workloads**: Support for virtual machine deployments
+- **Linux Workloads**: Native Linux application support
+- **Secure Boot**: Hardware-level verification and security
+- **Continuous Verification**: Ongoing integrity checking
+
+---
+
+## Zero-Image Integration
+
+Mycelium Compute integrates with Mycelium Storage's Zero-Image technology for ultra-efficient deployments:
+
+**Benefits:**
+- **Metadata-Only**: Deployments use metadata instead of full artifacts
+- **Instant Startup**: Rapid workload initialization
+- **Bandwidth Optimization**: Minimal transfer requirements
+- **Global Distribution**: Deploy anywhere on ThreeFold Grid
+
+---
+
+## Technical Architecture
+
+### Deterministic Computing
+Mycelium Compute ensures every computational step is predictable and verifiable:
+
+- **Cryptographic Verification**: All computations verified before execution
+- **State Determinism**: Same inputs always produce same outputs
+- **Tamper Resistance**: Any modification detected immediately
+- **Audit Trail**: Complete verification history for all operations
+
+### Stateless Infrastructure
+- **No Persistent State**: Workloads don't depend on specific hardware
+- **Global Distribution**: Compute resources available worldwide
+- **Auto-Scaling**: Automatic resource allocation and scaling
+- **Fault Tolerance**: Automatic failover and recovery
+
+### Zero-Image System
+- **Metadata-Only**: Images represented as metadata, not full artifacts
+- **Instant Deployment**: Rapid workload startup using metadata
+- **Efficient Storage**: Minimal storage requirements for images
+- **Bandwidth Optimization**: Significant reduction in transfer overhead
+
+---
+
+## Developer Experience
+
+### Simple Deployment
+```yaml
+# Basic compute workload
+apiVersion: v1
+kind: Deployment
+metadata:
+  name: deterministic-app
+spec:
+  replicas: 3
+  selector:
+    matchLabels:
+      app: deterministic-app
+  template:
+    metadata:
+      labels:
+        app: deterministic-app
+    spec:
+      containers:
+      - name: app
+        image: ubuntu:latest
+        command: ["echo", "Deterministic deployment"]
+```
+
+### Zero-Image Deployment
+```yaml
+# Using zero-image technology
+apiVersion: v1
+kind: Pod
+metadata:
+  name: zero-image-pod
+spec:
+  containers:
+  - name: app
+    image: "zero-image://ubuntu-latest"  # Metadata-only image
+    command: ["echo", "Running on zero-image"]
+```
+
+### Smart Contract Deployment
+```yaml
+# Smart contract orchestrated deployment
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: deployment-contract
+data:
+  contract: |
+    smart_contract:
+      signature: "cryptographically_signed_deployment"
+      workload_spec:
+        image: "ubuntu-latest"
+        replicas: 3
+        verification_hash: "sha256_hash_of_workload"
+```
+
+---
+
+## Use Cases
+
+### AI/ML Training
+- **Deterministic Training**: Reproducible machine learning experiments
+- **Secure Model Deployment**: Cryptographically verified model artifacts
+- **Distributed Training**: Autonomous scaling across compute nodes
+- **Zero-Drift Environments**: Consistent training environments
+
+### Application Hosting
+- **Transparent Deployments**: Verifiable application deployments
+- **Auto-Scaling**: Automatic resource allocation based on demand
+- **Global Distribution**: Deploy applications worldwide instantly
+- **Secure Execution**: Cryptographically verified runtime environments
+
+### Data Processing
+- **Deterministic Pipelines**: Reproducible data processing workflows
+- **Secure Computation**: Verified data transformation operations
+- **Auto-Scaling**: Dynamic resource allocation for processing workloads
+- **Global Processing**: Distribute workloads across ThreeFold Grid
+
+### Scientific Computing
+- **Reproducible Research**: Verifiable computational experiments
+- **Secure Workloads**: Cryptographically verified scientific applications
+- **Auto-Scaling**: Dynamic resource allocation for compute-intensive tasks
+- **Global Collaboration**: Share computational resources worldwide
+
+---
+
+## Compute-Specific Use Cases
+
+### Deterministic Training Environments
+- **Reproducible ML Experiments**: Identical training conditions every time
+- **Scientific Computing**: Verifiable computational research
+- **Financial Modeling**: Auditable risk calculations
+- **IoT Processing**: Consistent edge computing environments
+
+### Multi-Platform Application Hosting
+- **Container Orchestration**: Kubernetes workloads with deterministic deployment
+- **VM Management**: Virtual machines with secure boot verification
+- **Linux Workloads**: Native applications with cryptographic assurance
+- **Hybrid Deployments**: Mix containers, VMs, and bare metal
+
+### Auto-Scaling Workloads
+- **Demand-Based Scaling**: Automatic resource allocation based on load
+- **Global Distribution**: Deploy compute across ThreeFold Grid
+- **Failure Recovery**: Automatic failover and service restoration
+- **Cost Optimization**: Scale resources efficiently
+
+---
+
+## Key Differentiators
+
+### Deterministic Guarantee
+Every computation is cryptographically verified and guaranteed to produce consistent results.
+
+### Autonomous Operations
+Infrastructure manages itself without human intervention, scaling and healing automatically.
+
+### Smart Contract Security
+Workload orchestration through cryptographically signed, tamper-proof contracts.
+
+### Multi-Platform Support
+Run any workload type - containers, VMs, or native Linux applications.
+
+### Secure Boot Verification
+Hardware-level security verification for all deployments.
--- a/docs/mycelium_storage_for_devs.md
+++ b/docs/mycelium_storage_for_devs.md
@@ -0,0 +1,234 @@
+# Mycelium Storage for Developers
+
+*Quantum-Safe, Sovereign Data Plane*
+
+## Overview
+
+Mycelium Storage provides quantum-safe, sovereign data management that protects and places data precisely while keeping access effortless. Built on advanced cryptographic principles and autonomous recovery systems, it ensures data integrity, availability, and sovereignty across global distributed infrastructure.
+
+## Core Concept
+
+Quantum-safe, sovereign data plane protects data beyond the application layer while providing multi-protocol access and geo-aware placement for complete data control and ownership.
+
+---
+
+## Core Features
+
+### Quantum-Safe Storage (QSS)
+Quantum-resistant encryption secures data beyond the app layer so ownership and control stay yours.
+
+**Benefits:**
+- **Beyond AES-256**: Quantum-resistant encryption algorithms
+- **Multi-Layer Protection**: Data secured beyond application level
+- **Future-Proof**: Protected against current and future quantum threats
+- **Complete Ownership**: Data control and sovereignty maintained
+
+### Self-Healing Storage System
+Autonomous recovery heals failures or corruption instantly, preserving integrity without human intervention.
+
+**Capabilities:**
+- **Instant Recovery**: Automatic detection and repair of failures
+- **Integrity Preservation**: Data integrity maintained during recovery
+- **Autonomous Operation**: No manual intervention required
+- **Corruption Healing**: Automatic detection and repair of data corruption
+
+### Multi-Protocol Data Access
+Serve the same data via IPFS, S3, WebDAV, HTTP, and native file systems for seamless integration.
+
+**Protocol Support:**
+- **IPFS**: Decentralized, content-addressed storage
+- **S3**: Amazon S3 compatible API for existing tools
+- **WebDAV**: Web-based file access and synchronization
+- **HTTP**: Direct API access for web applications
+- **Native File Systems**: Standard POSIX file system access
+
+### Geo-Aware Data Placement & Replication
+Define residency, redundancy, and distribution per workload while zone-to-zone replication hardens resilience.
+
+**Features:**
+- **Data Residency**: Choose where data physically resides
+- **Custom Redundancy**: Define replication levels per workload
+- **Zone-to-Zone Replication**: Automatic cross-zone data replication
+- **Geographic Distribution**: Global data placement across ThreeFold Grid
+
+### Ultra-Efficient Zero-Images (Flists)
+Metadata-only flists shrink images up to 100x, replacing heavy VMs and powering instant Zero-OS deployments.
+
+**Benefits:**
+- **100x Size Reduction**: Dramatic reduction in image sizes
+- **Metadata-Only**: Images represented as metadata, not full artifacts
+- **Zero-OS Support**: Instant deployment of operating systems
+- **Bandwidth Efficiency**: Minimal transfer requirements
+
+---
+
+## Technical Architecture
+
+### Quantum-Safe Data Protection
+- **Post-Quantum Encryption**: Algorithms resistant to quantum computing attacks
+- **Beyond Application Layer**: Protection at infrastructure level
+- **Cryptographic Verification**: All storage operations verified
+- **Future-Proof Security**: Designed for long-term data protection
+
+### Autonomous Self-Healing
+- **Continuous Monitoring**: 24/7 detection of failures and corruption
+- **Instant Recovery**: Automatic repair without service interruption
+- **Data Integrity**: Ongoing verification of all stored data
+- **Zero Intervention**: Complete autonomous operation
+
+### Multi-Protocol Access
+```
+Application → Protocol Adapter → Mycelium Storage → Data Nodes
+```
+
+### Geo-Aware Data Governance
+- **Sovereignty Control**: Choose specific jurisdictions for data residency
+- **Custom Redundancy**: Define replication levels per workload
+- **Zone Replication**: Automatic cross-zone data synchronization
+- **Global Distribution**: Deploy data across ThreeFold Grid worldwide
+
+---
+
+## Developer Experience
+
+### S3-Compatible Access
+```python
+# Using S3-compatible API
+import boto3
+
+# Initialize S3 client
+s3_client = boto3.client(
+    's3',
+    endpoint_url='https://storage.mycelium.com',
+    aws_access_key_id='your_access_key',
+    aws_secret_access_key='your_secret_key'
+)
+
+# Upload file
+s3_client.upload_file('local_file.txt', 'my-bucket', 'remote_file.txt')
+
+# Download file
+s3_client.download_file('my-bucket', 'remote_file.txt', 'downloaded_file.txt')
+```
+
+### WebDAV Access
+```bash
+# Mount WebDAV storage
+mount -t davfs https://storage.mycelium.com/dav /mnt/storage
+
+# Access files normally
+cp /mnt/storage/data.txt ./
+echo "Data updated" > /mnt/storage/updated.txt
+```
+
+### IPFS Integration
+```python
+# Using IPFS for decentralized access
+import ipfshttpclient
+
+# Connect to IPFS
+client = ipfshttpclient.connect('/ip4/127.0.0.1/tcp/5001')
+
+# Add file to IPFS
+res = client.add('data.txt')
+
+# Access file via IPFS hash
+print(f"File available at: {res['Hash']}")
+```
+
+### Geo-Aware Configuration
+```yaml
+# Data placement configuration
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: storage-config
+data:
+  placement: |
+    geo_aware_storage:
+      residency: "eu-west"
+      redundancy: 3
+      zones:
+        - "zone-1"
+        - "zone-2" 
+        - "zone-3"
+      protocols:
+        - "s3"
+        - "ipfs"
+        - "webdav"
+```
+
+---
+
+## Use Cases
+
+### Data Sovereignty Applications
+- **Privacy-First Applications**: Complete control over user data location
+- **Regulatory Compliance**: Ensure data stays in specific jurisdictions
+- **Enterprise Data**: Keep sensitive data in preferred locations
+- **DigitalMe Applications**: Self-hosted services with full data control
+
+### Multi-Protocol Applications
+- **Legacy System Integration**: Support multiple access protocols simultaneously
+- **Hybrid Applications**: Combine centralized and decentralized storage
+- **Developer Flexibility**: Choose protocol based on application needs
+- **Migration Scenarios**: Gradual migration from traditional storage
+
+### Backup and Recovery
+- **Autonomous Backup**: Self-healing storage with automatic recovery
+- **Cross-Zone Replication**: Automatic data replication across zones
+- **Integrity Verification**: Continuous verification of backup integrity
+- **Instant Recovery**: Rapid restoration from storage failures
+
+### Content Distribution
+- **Global CDN**: Distribute content across ThreeFold Grid worldwide
+- **IPFS Integration**: Decentralized content addressing
+- **Multi-Protocol Access**: Serve content via HTTP, S3, WebDAV
+- **Geo-Optimization**: Place content near users for optimal performance
+
+---
+
+## Storage-Specific Use Cases
+
+### Data Sovereignty & Compliance
+- **Regulatory Requirements**: Ensure data stays in specific jurisdictions
+- **Privacy-First Applications**: Complete control over personal data location
+- **Enterprise Data Governance**: Keep sensitive business data in controlled regions
+- **Cross-Border Compliance**: Navigate international data regulations
+
+### Multi-Protocol Data Solutions
+- **Legacy System Integration**: Support existing S3, WebDAV, and HTTP workflows
+- **Decentralized Applications**: IPFS integration for blockchain and Web3 projects
+- **Hybrid Storage**: Combine centralized and decentralized access patterns
+- **Developer Flexibility**: Choose protocols based on application requirements
+
+### Autonomous Backup & Recovery
+- **Self-Healing Backups**: Storage automatically maintains backup integrity
+- **Cross-Zone Resilience**: Automatic replication across geographic zones
+- **Instant Recovery**: Rapid restoration from storage failures
+- **Continuous Verification**: Ongoing integrity checking without intervention
+
+### Content Distribution & CDN
+- **Global Content Delivery**: Distribute content across ThreeFold Grid worldwide
+- **IPFS Integration**: Decentralized content addressing and access
+- **Multi-Protocol Serving**: Serve same content via HTTP, S3, WebDAV
+- **Geo-Optimized Placement**: Position content near end users
+
+---
+
+## Key Differentiators
+
+### Quantum-Safe Protection
+Data protected with encryption algorithms resistant to quantum computing threats.
+
+### Autonomous Self-Healing
+Storage manages itself with automatic detection, recovery, and verification.
+
+### Universal Protocol Support
+Same data accessible via IPFS, S3, WebDAV, HTTP, and native file systems.
+
+### Geo-Aware Data Governance
+Complete control over data placement, residency, and replication.
+
+### Ultra-Efficient Storage
+Zero-Image technology reduces storage requirements by 100x.
--- a/src/components/Button.tsx
+++ b/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'
    }
 ) &
  (
--- a/src/pages/cloud/CloudHeroAlt.tsx
+++ b/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
-              href="#"
-              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 href="#" variant="solid" color="cyan">
+              Experience Deterministic Compute
            </Button>
          </div>
        </div>
--- a/src/pages/compute/ComputeHero.tsx
+++ b/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
-              href="#"
-              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 href="#" variant="solid" color="cyan">
+              Experience Deterministic Compute
            </Button>
          </div>
        </div>
--- a/src/pages/gpu/GpuHero.tsx
+++ b/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.
-            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.
+            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.
          </p>
-          <div className="mt-8">
-            <Button
-              href="#"
-              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"
-            >
-              {' '}
-              Unify Your GPU Power{' '}
+          <div className="mt-8 flex items-center gap-x-4">
+            <Button to="/docs" variant="solid" color="cyan">
+              Get Started →
+            </Button>
+            <Button to="#architecture" variant="outline" color="cyan">
+              Explore Architecture →
            </Button>
          </div>
        </div>
--- a/src/pages/gpu/GpuOverview.tsx
+++ b/src/pages/gpu/GpuOverview.tsx
@@ -0,0 +1,56 @@
+import { CodeBracketSquareIcon, CubeTransparentIcon, LockClosedIcon, Squares2X2Icon } from '@heroicons/react/24/outline'
+
+const features = [
+  {
+    name: 'No Silos',
+    description: 'All GPU resources accessible through a single interface.',
+    icon: Squares2X2Icon,
+  },
+  {
+    name: 'No Intermediaries',
+    description: 'Direct access to GPU resources without centralized control.',
+    icon: CubeTransparentIcon,
+  },
+  {
+    name: 'Verifiable Power',
+    description: 'Every GPU cycle cryptographically verified.',
+    icon: LockClosedIcon,
+  },
+  {
+    name: 'Code-Orchestrated',
+    description: 'Managed entirely through APIs and smart contracts.',
+    icon: CodeBracketSquareIcon,
+  },
+]
+
+export function GpuOverview() {
+  return (
+    <div className="bg-[#171717] py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
+          <div className="lg:col-span-2">
+            <h2 className="text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">
+              Unified GPU Acceleration Across the Grid
+            </h2>
+            <p className="mt-4 text-base/7 text-gray-300">
+              Mycelium GPU provides unified access to distributed GPU acceleration across the ThreeFold Grid. It transforms fragmented GPU resources into a single adaptive intelligence layer — enabling you to run AI, ML, and rendering workloads anywhere, anytime, with verifiable performance and transparent costs.
+            </p>
+          </div>
+          <dl className="col-span-3 grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2">
+            {features.map((feature) => (
+              <div key={feature.name}>
+                <dt className="text-base/7 font-semibold text-white">
+                  <div className="mb-6 flex size-10 items-center justify-center rounded-lg">
+                    <feature.icon aria-hidden="true" className="size-8 text-cyan-500" />
+                  </div>
+                  {feature.name}
+                </dt>
+                <dd className="mt-1 text-base/7 text-gray-400">{feature.description}</dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/pages/gpu/GpuPage.tsx
+++ b/src/pages/gpu/GpuPage.tsx
@@ -1,6 +1,7 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { GpuHero } from './GpuHero'
 import { CallToAction } from './CallToAction'
+import { GpuOverview } from './GpuOverview'

 export default function GpuPage() {
  return (
@@ -8,6 +9,9 @@ export default function GpuPage() {
      <AnimatedSection>
        <GpuHero />
      </AnimatedSection>
+      <AnimatedSection>
+        <GpuOverview />
+      </AnimatedSection>
      <AnimatedSection>
        <CallToAction />
      </AnimatedSection>
--- a/src/pages/storage/StorageHero.tsx
+++ b/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
-              href="#"
-              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 href="#" variant="solid" color="cyan">
+              Talk to an expert
            </Button>
          </div>
        </div>