import Link from 'next/link';
import { ArrowLeft, Calendar, Clock } from 'lucide-react';

export const metadata = {
  title: "API Monetization for AI Agents: Pricing, Billing, L402, and Metering",
  description: "How to monetize APIs for AI agents with machine-readable pricing, request-path metering, budget enforcement, and paid-rail context.",
  alternates: { canonical: 'https://satgate.io/blog/api-monetization-ai' },
  keywords: ['API monetization AI', 'API monetization for AI agents', 'monetize API AI', 'AI agent billing', 'machine-to-machine payments', 'API pricing AI agents', 'rail-neutral paid-rail governance'],
  openGraph: {
    title: 'API Monetization for AI Agents: Pricing, Billing, and L402',
    description: 'Monetize APIs for AI agents with machine-readable pricing, request-path metering, budget enforcement, and paid-rail context.',
    url: 'https://satgate.io/blog/api-monetization-ai',
    type: 'article',
    publishedTime: '2026-03-26T00:00:00Z',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'API Monetization for AI Agents: Pricing, Billing, and L402',
    description: 'Turn APIs into paid-agent products with machine-readable prices, request-path metering, and L402 payment flows.',
  },
};

export default function ApiMonetizationAiBlogPage() {
  const articleJsonLd = {
    '@context': 'https://schema.org',
    '@type': 'TechArticle',
    headline: 'API Monetization for AI Agents: Pricing, Billing, L402, and Metering',
    description: metadata.description,
    author: { '@type': 'Organization', name: 'SatGate' },
    publisher: { '@type': 'Organization', name: 'SatGate', url: 'https://satgate.io' },
    datePublished: '2026-03-26',
    dateModified: '2026-05-04',
    mainEntityOfPage: 'https://satgate.io/blog/api-monetization-ai',
    about: [
      { '@type': 'Thing', name: 'API monetization for AI agents' },
      { '@type': 'Thing', name: 'machine-readable API pricing' },
      { '@type': 'Thing', name: 'request-path API metering' },
      { '@type': 'Thing', name: 'L402 API payments' },
      { '@type': 'Thing', name: 'paid agent billing' },
    ],
  };

  const faqJsonLd = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: [
      {
        '@type': 'Question',
        name: 'How do you monetize an API for AI agents?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: 'Monetize APIs for AI agents by exposing machine-readable prices, enforcing per-call budgets in the request path, and accepting machine-native payment flows such as L402 instead of relying only on monthly subscriptions and static API keys.',
        },
      },
      {
        '@type': 'Question',
        name: 'Why do traditional API pricing models break for AI workloads?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: 'Traditional API pricing assumes a human signs up, manages an account, and reviews invoices. AI agents discover tools dynamically, call APIs at machine speed, delegate work to sub-agents, and can create large bills before monthly billing catches up.',
        },
      },
      {
        '@type': 'Question',
        name: 'What role does L402 play in AI API monetization?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: 'L402 lets APIs return HTTP 402 Payment Required with a Lightning invoice and macaroon so an agent can pay per request and receive proof-of-payment access without human signup or credit-card billing.',
        },
      },
      {
        '@type': 'Question',
        name: 'Is API monetization for AI agents the same as usage-based SaaS billing?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: 'No. Usage-based SaaS billing usually measures consumption after the fact and invoices a human account later. AI agent monetization needs machine-readable prices, request-path authorization, real-time budget checks, and machine-native payment or proof-of-payment before access is granted.',
        },
      },
    ],
  };

  return (
    <div className="min-h-screen bg-black text-gray-100 font-sans">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }} />
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(faqJsonLd) }} />
      <div className="max-w-3xl mx-auto px-6 py-16">
        <Link href="/blog" className="text-gray-500 hover:text-white flex items-center gap-2 transition mb-8">
          <ArrowLeft size={18} /> Back to Blog
        </Link>
        
        <header className="mb-12">
          <div className="flex flex-wrap gap-2 mb-4">
            <span className="px-2 py-1 rounded-full bg-purple-900/30 border border-purple-500/30 text-purple-300 text-xs font-mono">Monetization</span>
            <span className="px-2 py-1 rounded-full bg-cyan-900/30 border border-cyan-500/30 text-cyan-300 text-xs font-mono">AI Agents</span>
            <span className="px-2 py-1 rounded-full bg-yellow-900/30 border border-yellow-500/30 text-yellow-300 text-xs font-mono">API Economics</span>
          </div>
          
          <h1 className="text-4xl font-bold mb-4">API Monetization for AI: How to Charge Agents, Not Just Developers</h1>
          
          <p className="text-xl text-gray-400 mb-6 italic">
            Your API's next million customers won't have email addresses. They'll have token budgets. Here's how to monetize API access for a world where autonomous agents are the buyers.
          </p>
          
          <div className="flex items-center gap-4 text-sm text-gray-500">
            <span className="flex items-center gap-1"><Calendar size={14} /> March 26, 2026</span>
            <span className="flex items-center gap-1"><Clock size={14} /> 10 min read</span>
          </div>
        </header>

        <article className="prose prose-invert prose-lg max-w-none">
          
          <p className="text-gray-300 text-lg leading-relaxed">
            API monetization isn't new. Stripe, Twilio, and OpenAI proved that developers will pay per call, per token, per message. But those billing models share an assumption that's about to break: a human signs up, enters a credit card, and manages the account.
          </p>

          <p className="text-gray-300 leading-relaxed">
            AI agents don't do any of that. An agent can't fill out a registration form. It can't evaluate a pricing page. It can't decide whether your enterprise plan is worth the upgrade. But it <em>can</em> consume your API at a rate no human developer ever would — thousands of calls per hour, across dozens of tools, with no one watching the dashboard.
          </p>

          <p className="text-gray-300 leading-relaxed">
            This is the API monetization gap for AI. The demand side has changed fundamentally — from human developers making deliberate integration decisions to autonomous agents making real-time tool selections — but the supply side is still selling monthly subscriptions with API keys.
          </p>

          <p className="text-gray-300 leading-relaxed">
            If you're running an API business, this gap is either your biggest risk or your biggest opportunity. Let's break down why traditional API monetization fails for AI workloads, and what to build instead.
          </p>

          <h2 className="text-2xl font-bold text-white mt-12 mb-4">Why Traditional API Monetization Breaks with AI Agents</h2>

          <p className="text-gray-300 leading-relaxed">
            Traditional API monetization works on a simple chain: developer finds API → signs up → gets API key → integrates → pays monthly bill. Every link in this chain assumes human decision-making, human timing, and human accountability.
          </p>

          <p className="text-gray-300 leading-relaxed">
            AI agents break every link.
          </p>

          <h3 className="text-xl font-bold text-white mt-8 mb-3">The Discovery Problem</h3>

          <p className="text-gray-300 leading-relaxed">
            Agents discover APIs dynamically. An MCP-connected agent doesn't browse your documentation site — it reads a tool manifest and decides in milliseconds whether your API solves its current task. Your pricing page, your sales funnel, your "contact us for enterprise" — none of it exists in the agent's decision loop.
          </p>

          <p className="text-gray-300 leading-relaxed">
            This means the pricing signal needs to be machine-readable and available at the protocol level, not buried in a marketing page. If an agent can't determine the cost of a call <em>before</em> making it, it either calls blindly (cost risk) or skips your API entirely (revenue loss).
          </p>

          <h3 className="text-xl font-bold text-white mt-8 mb-3">The Identity Problem</h3>

          <p className="text-gray-300 leading-relaxed">
            API keys map to accounts. Accounts map to humans. But in a multi-agent system, a single API key might be shared across dozens of agents with different purposes, different budgets, and different risk profiles. One key might serve a low-stakes summarization agent and a high-stakes trading agent simultaneously.
          </p>

          <p className="text-gray-300 leading-relaxed">
            Traditional per-key billing can't distinguish between these workloads. You're charging the account, not the agent. When the bill spikes because one agent went rogue, the account owner has no way to attribute the cost — and no way to prevent it from happening again without revoking the key entirely.
          </p>

          <h3 className="text-xl font-bold text-white mt-8 mb-3">The Velocity Problem</h3>

          <p className="text-gray-300 leading-relaxed">
            Human developers make deliberate API calls. They write code, test it, deploy it, and the call pattern is predictable. AI agents make opportunistic API calls — potentially hundreds per minute as they explore tool options, retry failed approaches, or fan out across parallel subtasks.
          </p>

          <p className="text-gray-300 leading-relaxed">
            Monthly billing with post-hoc invoicing doesn't work when an agent can accumulate a four-figure bill in an afternoon. By the time the invoice arrives, the budget is already blown. The monetization system needs to operate at the same speed as the consumer — real-time metering, real-time enforcement.
          </p>

          <h3 className="text-xl font-bold text-white mt-8 mb-3">The Delegation Problem</h3>

          <p className="text-gray-300 leading-relaxed">
            In the agent economy, the entity consuming your API isn't the entity paying for it. Agent A might call your API on behalf of Agent B, which is operating under a budget set by Agent C's human operator. The payment chain involves delegation — and traditional API monetization has no concept of delegated authority.
          </p>

          <p className="text-gray-300 leading-relaxed">
            You need to know not just <em>who</em> is calling, but <em>on whose budget</em> and <em>with what spending authority</em>. API keys can't carry this information. OAuth tokens weren't designed for it. The billing system needs to understand delegation natively.
          </p>

          <h2 className="text-2xl font-bold text-white mt-12 mb-4">The Three Requirements for AI-Native API Monetization</h2>

          <p className="text-gray-300 leading-relaxed">
            To monetize APIs in a world of autonomous consumers, you need three capabilities that traditional billing platforms don't provide:
          </p>

          <h3 className="text-xl font-bold text-white mt-8 mb-3">1. Machine-Readable Pricing at the Protocol Level</h3>

          <p className="text-gray-300 leading-relaxed">
            Agents need to know what a call costs before they make it. Not from a docs page — from the API itself. This means embedding pricing information into the protocol layer: tool manifests, HTTP headers, or challenge-response flows that communicate cost as part of the API contract.
          </p>

          <p className="text-gray-300 leading-relaxed">
            The <strong className="text-white">HTTP 402 Payment Required</strong> status code was literally designed for this — a standard way for servers to tell clients "this resource costs money, here's how to pay." It's been dormant for decades because human-driven web browsing didn't need programmatic payment negotiation. AI agents do.
          </p>

          <pre className="bg-gray-900/70 border border-gray-800 rounded-lg p-4 overflow-x-auto text-sm my-6">
            <code className="text-green-300">{`HTTP/1.1 402 Payment Required
WWW-Authenticate: L402 macaroon="AGIAJEem...", invoice="lnbc10n1..."
X-Cost-Per-Call: 0.001 USD
X-Budget-Remaining: 4.50 USD

# Agent reads the cost, validates against its budget, 
# pays the invoice, and resubmits with proof-of-payment.
# Total time: <200ms. No human involved.`}</code>
          </pre>

          <p className="text-gray-300 leading-relaxed">
            This isn't theoretical — it's the L402 protocol, combining HTTP 402 with macaroon tokens and Lightning Network micropayments. The agent sees the price, pays it, and gets access — all in a single request cycle.
          </p>

          <h3 className="text-xl font-bold text-white mt-8 mb-3">2. Per-Call Budget Enforcement (Not Per-Month Billing)</h3>

          <p className="text-gray-300 leading-relaxed">
            Monthly billing works when your customer is a developer who checks the dashboard weekly. It doesn't work when your customer is an agent that can exhaust a $1,000 monthly allocation in 90 minutes.
          </p>

          <p className="text-gray-300 leading-relaxed">
            AI-native monetization requires per-call enforcement. Every API call should check the caller's remaining budget <em>before</em> executing the request. If the budget is exhausted, the call is rejected with a clear signal — not a 429 rate limit (which the agent will retry), but a 402 payment required (which the agent can act on by requesting more budget or choosing a cheaper tool).
          </p>

          <p className="text-gray-300 leading-relaxed">
            This distinction matters enormously. Rate limiting is a blunt instrument that throttles all callers equally regardless of payment status. Budget enforcement is a precise instrument that throttles based on economic authority. An agent with a $100 budget should be able to burst to 1,000 calls per minute — as long as the budget covers it.
          </p>

          <h3 className="text-xl font-bold text-white mt-8 mb-3">3. Delegated Spending Authority via Capability Tokens</h3>

          <p className="text-gray-300 leading-relaxed">
            The delegation problem requires a token that carries spending authority, not just identity. <strong className="text-white">Macaroon tokens</strong> solve this by embedding attenuating caveats directly into the credential:
          </p>

          <pre className="bg-gray-900/70 border border-gray-800 rounded-lg p-4 overflow-x-auto text-sm my-6">
            <code className="text-green-300">{`# Root token: full API access, $500 budget
macaroon = mint(secret, "api-full-access")

# Attenuated for Agent A: read-only endpoints, $50 budget
agent_a_token = attenuate(macaroon, [
  "budget_max = 50.00",
  "endpoints = /read/*",
  "expires = 2026-03-27T00:00:00Z"
])

# Further attenuated for Sub-Agent A1: single endpoint, $5 budget
sub_agent_token = attenuate(agent_a_token, [
  "budget_max = 5.00",
  "endpoints = /read/summary",
  "rate_limit = 10/min"
])

# Each level can only restrict, never expand.
# The $5 sub-agent can never spend more than $5,
# even if the parent has $50 remaining.`}</code>
          </pre>

          <p className="text-gray-300 leading-relaxed">
            This is the key innovation for AI monetization: the token itself carries the payment contract. No central billing system needs to be queried in real-time. The gateway validates the macaroon, checks the embedded budget caveat against accumulated spend, and either allows or rejects the call. The billing happens at the point of consumption, not 30 days later.
          </p>

          <h2 className="text-2xl font-bold text-white mt-12 mb-4">Five API Monetization Models for AI Workloads</h2>

          <p className="text-gray-300 leading-relaxed">
            Not every API needs the same monetization approach. Here are five models that work for autonomous consumers, ordered from simplest to most sophisticated:
          </p>

          <h3 className="text-xl font-bold text-white mt-8 mb-3">Model 1: Pay-Per-Call with Budget Caps</h3>

          <p className="text-gray-300 leading-relaxed">
            The simplest AI-native model. Every call has a fixed price. The agent's token includes a budget cap. The gateway deducts from the budget on each call and rejects when exhausted. No subscriptions, no tiers, no "contact sales." The agent either has budget or it doesn't.
          </p>

          <p className="text-gray-300 leading-relaxed">
            <strong className="text-white">Best for:</strong> Utility APIs (geocoding, translation, data enrichment) where each call delivers roughly equal value.
          </p>

          <h3 className="text-xl font-bold text-white mt-8 mb-3">Model 2: Value-Based Pricing</h3>

          <p className="text-gray-300 leading-relaxed">
            Different endpoints cost different amounts based on the value they deliver. A basic search costs $0.001. A full analysis costs $0.05. A premium insight costs $0.50. The agent sees the price for each endpoint in the tool manifest and makes cost-benefit decisions autonomously.
          </p>

          <p className="text-gray-300 leading-relaxed">
            <strong className="text-white">Best for:</strong> AI/ML APIs, data APIs, and any service where call complexity varies significantly.
          </p>

          <h3 className="text-xl font-bold text-white mt-8 mb-3">Model 3: Metered Consumption with Tiered Rates</h3>

          <p className="text-gray-300 leading-relaxed">
            Volume discounts, but enforced in real-time. The first 1,000 calls cost $0.01 each. The next 10,000 cost $0.005. Beyond that, $0.001. The gateway tracks cumulative consumption per token and adjusts the per-call cost dynamically. Agents that use more, pay less per call — but still within their budget cap.
          </p>

          <p className="text-gray-300 leading-relaxed">
            <strong className="text-white">Best for:</strong> High-volume APIs where you want to incentivize heavy usage without unpredictable bills.
          </p>

          <h3 className="text-xl font-bold text-white mt-8 mb-3">Model 4: Marketplace with Revenue Sharing</h3>

          <p className="text-gray-300 leading-relaxed">
            Your API becomes a tool in an agent marketplace. The marketplace gateway handles discovery, pricing negotiation, and payment splitting. You set your per-call price, the marketplace takes a percentage, and agents browse tools based on cost-effectiveness ratings.
          </p>

          <p className="text-gray-300 leading-relaxed">
            <strong className="text-white">Best for:</strong> Niche APIs that want distribution through agent tool registries and MCP aggregators.
          </p>

          <h3 className="text-xl font-bold text-white mt-8 mb-3">Model 5: Outcome-Based Pricing</h3>

          <p className="text-gray-300 leading-relaxed">
            The most sophisticated model: charge based on results, not calls. An agent makes 50 API calls but only pays if the aggregate output meets a quality threshold. The gateway holds the spend in escrow (via pre-authorized budget) and settles based on a success signal from the agent.
          </p>

          <p className="text-gray-300 leading-relaxed">
            <strong className="text-white">Best for:</strong> High-value APIs (lead scoring, fraud detection, medical analysis) where the outcome matters more than the activity.
          </p>

          <h2 className="text-2xl font-bold text-white mt-12 mb-4">Implementation: Adding AI Monetization to Your API</h2>

          <p className="text-gray-300 leading-relaxed">
            You don't need to rebuild your API to monetize it for AI. The economic governance layer sits in front of your existing infrastructure — a gateway that handles pricing, payment, and budget enforcement at the protocol level.
          </p>

          <p className="text-gray-300 leading-relaxed">
            Here's the architecture:
          </p>

          <pre className="bg-gray-900/70 border border-gray-800 rounded-lg p-4 overflow-x-auto text-sm my-6">
            <code className="text-green-300">{`┌──────────┐     ┌─────────────────────┐     ┌──────────┐
│ AI Agent │────▶│  Economic Gateway    │────▶│ Your API │
│          │◀────│                      │◀────│          │
└──────────┘     │ • Price signaling    │     └──────────┘
                 │ • Budget enforcement │
                 │ • Macaroon auth      │
                 │ • Usage metering     │
                 │ • Cost attribution   │
                 │ • Settlement         │
                 └─────────────────────┘

# Agent → Gateway: presents macaroon token with budget
# Gateway: validates token, checks budget, deducts cost
# Gateway → API: forwards authenticated request
# API → Gateway → Agent: response + updated budget info`}</code>
          </pre>

          <p className="text-gray-300 leading-relaxed">
            The critical insight: <strong className="text-white">this gateway doesn't replace your existing auth or billing. It layers on top.</strong> Your API keeps working exactly as it does today for human developers with API keys. The economic gateway adds a parallel path for autonomous agents that need real-time budget enforcement and machine-readable pricing.
          </p>

          <p className="text-gray-300 leading-relaxed">
            SatGate implements this pattern as an open-source economic firewall. You define per-endpoint pricing, set budget policies, and mint macaroon tokens with embedded spending limits. The gateway handles the rest — L402 challenge-response, real-time budget tracking, cost attribution, and settlement.
          </p>

          <h2 className="text-2xl font-bold text-white mt-12 mb-4">The Revenue Math: Why This Matters Now</h2>

          <p className="text-gray-300 leading-relaxed">
            Consider the numbers. Today, your API might serve 1,000 developer accounts making 100,000 total calls per month. You charge $99/month per account. Revenue: $99,000/month.
          </p>

          <p className="text-gray-300 leading-relaxed">
            Now add AI agents. A single MCP-connected agent can make 10,000 calls per day. An agent swarm of 50 agents can make 500,000 calls per day. That's 15 million calls per month from a single operator — 150x your current human developer volume.
          </p>

          <p className="text-gray-300 leading-relaxed">
            If you're still on flat monthly pricing, that operator pays $99 for 15 million calls. Your infrastructure costs explode while revenue stays flat. If you're on per-call pricing with budget enforcement, that same volume generates $15,000/month in metered revenue — and the operator's agents automatically manage their own consumption within their budget.
          </p>

          <p className="text-gray-300 leading-relaxed">
            The API providers who figure out AI monetization first will capture the majority of agent economy revenue. The ones who don't will subsidize agent workloads with human developer pricing until the margins disappear.
          </p>

          <h2 className="text-2xl font-bold text-white mt-12 mb-4">Getting Started</h2>

          <p className="text-gray-300 leading-relaxed">
            You don't need to adopt all five monetization models at once. Start with the simplest approach that captures value:
          </p>

          <p className="text-gray-300 leading-relaxed">
            <strong className="text-white">Step 1: Assign costs to your endpoints.</strong> Even if you don't enforce them yet, define what each API call is worth. This forces you to think about value delivery per endpoint — something most API teams have never done.
          </p>

          <p className="text-gray-300 leading-relaxed">
            <strong className="text-white">Step 2: Add budget enforcement at the gateway layer.</strong> Deploy an economic gateway (like SatGate) in front of your API. Start in observe mode — track what agents would spend without actually blocking anything. This gives you real consumption data.
          </p>

          <p className="text-gray-300 leading-relaxed">
            <strong className="text-white">Step 3: Mint tokens with spending limits.</strong> Issue macaroon tokens to delegated agent consumers with embedded budget caps. Start generous — you want usage data more than revenue at this stage.
          </p>

          <p className="text-gray-300 leading-relaxed">
            <strong className="text-white">Step 4: Enable L402 for zero-signup access.</strong> Let agents discover and pay for your API without registration. The agent presents a Lightning payment, gets a macaroon, and starts consuming. No forms, no sales calls, no onboarding friction.
          </p>

          <p className="text-gray-300 leading-relaxed">
            <strong className="text-white">Step 5: Publish your tool manifest with pricing.</strong> Add your API to MCP registries with machine-readable pricing. Agents will discover your API, evaluate cost vs. alternatives, and choose you when the value proposition is right.
          </p>

          <h2 className="text-2xl font-bold text-white mt-12 mb-4">The Bottom Line</h2>

          <p className="text-gray-300 leading-relaxed">
            API monetization for AI isn't a future problem — it's a present one. Every week, more agents connect to more tools via MCP. Every week, the gap between human-designed billing and machine-speed consumption grows wider. The API providers who add economic governance now will own the revenue infrastructure for the agent economy. The ones who wait will be competing on price with zero margin.
          </p>

          <p className="text-gray-300 leading-relaxed">
            Your API's next million customers are already being built. They just need a way to pay.
          </p>

          <section className="not-prose mt-16 rounded-2xl border border-gray-800 bg-gray-950 p-8">
            <p className="mb-2 text-sm font-mono uppercase tracking-wide text-purple-300">FAQ</p>
            <h2 className="mb-6 text-2xl font-bold text-white">AI API monetization questions</h2>
            <div className="space-y-5">
              {[
                ['How do you monetize an API for AI agents?', 'Expose machine-readable prices, enforce per-call budgets in the request path, and accept machine-native payment flows such as L402 instead of relying only on monthly subscriptions and static API keys.'],
                ['Why do traditional API pricing models break for AI workloads?', 'They assume a human signs up, manages an account, and reviews invoices. AI agents discover tools dynamically, call APIs at machine speed, delegate work to sub-agents, and can create large bills before monthly billing catches up.'],
                ['What role does L402 play in AI API monetization?', 'L402 lets APIs return HTTP 402 Payment Required with a Lightning invoice and macaroon so an agent can pay per request and receive proof-of-payment access without human signup or credit-card billing.'],
                ['Is API monetization for AI agents the same as usage-based SaaS billing?', 'No. Usage-based SaaS billing measures consumption after the fact and invoices a human account later. AI agent monetization needs machine-readable prices, request-path authorization, real-time budget checks, and machine-native payment or proof-of-payment before access is granted.'],
              ].map(([question, answer]) => (
                <div key={question} className="border-t border-gray-800 pt-5 first:border-t-0 first:pt-0">
                  <h3 className="mb-2 text-lg font-bold text-white">{question}</h3>
                  <p className="leading-relaxed text-gray-400">{answer}</p>
                </div>
              ))}
            </div>
          </section>

          {/* CTA Section */}
          <div className="mt-16 bg-gradient-to-r from-purple-900/20 to-cyan-900/20 border border-purple-800/30 rounded-xl p-8">
            <h3 className="text-xl font-bold text-white mb-3">Ready to Monetize Your API for AI?</h3>
            <p className="text-gray-300 mb-4">
              SatGate adds economic governance — pricing, budgets, and machine-readable payments — to any API in minutes. Start with observe mode and go live when you're ready.
            </p>
            <div className="flex flex-wrap gap-3">
              <a href="https://github.com/SatGate-io/satgate" className="inline-flex items-center gap-2 bg-white text-black px-6 py-3 rounded-lg font-bold hover:bg-gray-200 transition text-sm">
                View on GitHub
              </a>
              <Link href="/design-partners" className="inline-flex items-center gap-2 border border-purple-500 text-purple-300 px-6 py-3 rounded-lg font-bold hover:bg-purple-900/30 transition text-sm">
                Become a Design Partner
              </Link>
            </div>
          </div>

        </article>
      </div>
    </div>
  );
}
