index.astro

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="Home">

  <!-- Hero — full viewport, cinematic intro -->
  <section class="hero-section relative flex items-center justify-center overflow-hidden" style="min-height: calc(100vh - 4rem);">
    <!-- Ambient glow -->
    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
      <div class="hero-glow absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full opacity-20 blur-[120px]" style="background: radial-gradient(circle, #a855f7 0%, transparent 70%);"></div>
    </div>

    <div class="relative z-10 w-full min-w-0 max-w-4xl mx-auto text-center px-6 sm:px-8">
      <p class="hero-fade hero-fade-1 text-sm font-semibold tracking-widest uppercase mb-6 text-purple-400">
        Open Source &middot; Cross Platform &middot; Any Tech Stack
      </p>
      <h1 class="hero-fade hero-fade-2 text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight leading-[1.05] mb-8">
        Test beyond<br />
        <span class="bg-gradient-to-r from-purple-400 via-purple-500 to-purple-600 bg-clip-text text-transparent">the happy path.</span>
      </h1>
      <p class="hero-fade hero-fade-3 text-lg md:text-xl max-w-2xl mx-auto mb-12 leading-relaxed" style="color: var(--text-muted);">
        Dev Proxy is an API simulator that helps you test how your app handles errors, throttling, and slow responses&thinsp;&mdash;&thinsp;without changing a single line of code.
      </p>
      <div class="hero-fade hero-fade-4 flex gap-4 justify-center flex-wrap">
        <a
          href="https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/get-started"
          target="_blank"
          rel="noopener"
          class="group px-8 py-4 bg-purple-600 hover:bg-purple-500 text-white font-semibold rounded-full transition-all duration-300 hover:shadow-[0_0_30px_rgba(168,85,247,0.4)]"
        >
          Get Started <span class="inline-block transition-transform duration-300 group-hover:translate-x-1">&rarr;</span>
        </a>
        <a
          href={`${import.meta.env.BASE_URL}samples/`}
          class="px-8 py-4 border font-semibold rounded-full transition-all duration-300 hover:border-purple-500 hover:shadow-[0_0_30px_rgba(168,85,247,0.15)]"
          style="border-color: var(--border-secondary); color: var(--text-secondary);"
        >
          Browse Samples
        </a>
      </div>

      <!-- Terminal teaser -->
      <div class="hero-fade hero-fade-5 mt-16 max-w-xl mx-auto min-w-0">
        <div class="rounded-2xl border overflow-hidden text-left font-mono text-xs sm:text-sm" style="background: var(--bg-secondary); border-color: var(--border-primary);">
          <div class="flex items-center gap-2 px-4 py-3 border-b" style="border-color: var(--border-primary);">
            <span class="w-3 h-3 rounded-full bg-red-500/70"></span>
            <span class="w-3 h-3 rounded-full bg-yellow-500/70"></span>
            <span class="w-3 h-3 rounded-full bg-green-500/70"></span>
            <span class="ml-2 text-xs" style="color: var(--text-faint);">terminal</span>
          </div>
          <div class="p-4 sm:p-5 space-y-1 overflow-x-auto">
            <p style="color: var(--text-faint);"><span style="color: var(--text-muted);">&#x276F;</span> devproxy</p>
            <p class="whitespace-nowrap">&nbsp;&nbsp;<span class="text-blue-400">info</span>&nbsp;&nbsp;&nbsp;&nbsp;Dev Proxy listening on 127.0.0.1:8000...</p>
            <p class="mt-2"></p>
            <p class="whitespace-nowrap" style="color: var(--text-faint);">&nbsp;&nbsp;<span style="color: var(--text-secondary);">req</span>&nbsp;&nbsp;&nbsp;&nbsp;GET https://api.contoso.com/posts</p>
            <p class="whitespace-nowrap" style="color: var(--text-faint);">&nbsp;&nbsp;skip&nbsp;&nbsp;&nbsp;GenericRandomErrorPlugin: Pass through</p>
            <p class="whitespace-nowrap">&nbsp;&nbsp;<span class="px-1 rounded text-xs font-semibold bg-yellow-500/20 text-yellow-400">pass</span>&nbsp;&nbsp;&nbsp;Passed through</p>
            <p class="mt-2"></p>
            <p class="whitespace-nowrap" style="color: var(--text-faint);">&nbsp;&nbsp;<span style="color: var(--text-secondary);">req</span>&nbsp;&nbsp;&nbsp;&nbsp;GET https://api.contoso.com/posts</p>
            <p class="whitespace-nowrap" style="color: var(--text-faint);">&nbsp;&nbsp;skip&nbsp;&nbsp;&nbsp;RetryAfterPlugin: Request not throttled</p>
            <p class="whitespace-nowrap">&nbsp;&nbsp;<span class="px-1 rounded text-xs font-semibold bg-red-500/20 text-red-400">oops</span>&nbsp;&nbsp;&nbsp;<span style="color: var(--text-faint);">GenericRandomErrorPlugin: 429 429</span></p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Problem statement — emotional hook -->
  <section class="py-32 px-6 sm:px-8">
    <div class="max-w-3xl mx-auto text-center">
      <h2 class="section-reveal text-3xl md:text-5xl font-bold leading-tight mb-8">
        You test the happy path.<br />
        <span style="color: var(--text-faint);">Your users get the rest.</span>
      </h2>
      <p class="section-reveal text-lg md:text-xl leading-relaxed" style="color: var(--text-muted);">
        APIs fail. They throttle. They respond slowly. They return unexpected data. And when they do, your app needs to handle it gracefully. But simulating these failures is hard&thinsp;&mdash;&thinsp;until now.
      </p>
    </div>
  </section>

  <!-- Use cases — alternating layout, Apple-style big sections -->
  <section class="py-16 px-6 sm:px-8">
    <div class="max-w-6xl mx-auto space-y-32 min-w-0">

      <!-- Use case 1: Mock APIs -->
      <div class="section-reveal grid md:grid-cols-2 gap-12 md:gap-16 items-center">
        <div>
          <p class="text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">API Mocking</p>
          <h3 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">Mock APIs that don't exist yet.</h3>
          <p class="text-lg leading-relaxed mb-6" style="color: var(--text-muted);">
            Stand up a fully-functional CRUD API without writing a single line of server code. Design, prototype, and build your frontend in parallel with your backend.
          </p>
          <a href="https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-crud-api" target="_blank" rel="noopener" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">
            Learn more &rarr;
          </a>
        </div>
        <div class="rounded-2xl border p-6 md:p-8 font-mono text-sm overflow-hidden" style="background: var(--bg-secondary); border-color: var(--border-primary);">
          <p style="color: var(--text-faint);">// customers-api.json &mdash; CrudApiPlugin</p>
          <p class="mt-2 truncate" style="color: var(--text-secondary);"><span class="text-purple-400">"baseUrl"</span>: <span class="text-green-400">"https://api.contoso.com/customers"</span></p>
          <p class="mt-3"><span class="text-green-400">getAll</span>  <span style="color: var(--text-faint);">GET &nbsp;&nbsp;&nbsp;/customers</span></p>
          <p><span class="text-green-400">getOne</span>  <span style="color: var(--text-faint);">GET &nbsp;&nbsp;&nbsp;/customers/&#123;id&#125;</span></p>
          <p><span class="text-blue-400">create</span>  <span style="color: var(--text-faint);">POST &nbsp;&nbsp;/customers</span></p>
          <p><span class="text-yellow-400">merge</span> &nbsp;<span style="color: var(--text-faint);">PATCH &nbsp;/customers/&#123;id&#125;</span></p>
          <p><span class="text-red-400">delete</span>  <span style="color: var(--text-faint);">DELETE /customers/&#123;id&#125;</span></p>
          <p class="mt-4 text-purple-400">// Defined in JSON. Zero server code.</p>
        </div>
      </div>

      <!-- Use case 2: Error Handling / Resilience -->
      <div class="section-reveal grid md:grid-cols-2 gap-12 md:gap-16 items-center">
        <div class="md:order-2">
          <p class="text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">Resilience Testing</p>
          <h3 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">See how your app handles API errors.</h3>
          <p class="text-lg leading-relaxed mb-6" style="color: var(--text-muted);">
            Simulate random errors, timeouts, and failures for any API — without touching your code. Build more robust apps and never lose your customers' data.
          </p>
          <a href="https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/test-my-app-with-random-errors" target="_blank" rel="noopener" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">
            Learn more &rarr;
          </a>
        </div>
        <div class="md:order-1 rounded-2xl border p-6 md:p-8 font-mono text-sm overflow-hidden" style="background: var(--bg-secondary); border-color: var(--border-primary);">
          <p style="color: var(--text-faint);">// errors-contoso-api.json</p>
          <p class="mt-2 truncate" style="color: var(--text-secondary);"><span class="text-purple-400">"url"</span>: <span class="text-green-400">"https://api.contoso.com/*"</span></p>
          <p class="mt-3" style="color: var(--text-secondary);"><span class="text-purple-400">"responses"</span>:</p>
          <p>&nbsp;&nbsp;<span class="text-red-400">500</span> <span style="color: var(--text-faint);">Internal Server Error</span></p>
          <p>&nbsp;&nbsp;<span class="text-yellow-400">429</span> <span style="color: var(--text-faint);">Too Many Requests</span></p>
          <p>&nbsp;&nbsp;<span class="text-red-400">503</span> <span style="color: var(--text-faint);">Service Unavailable</span></p>
          <p class="mt-4 text-purple-400">// Random errors at configured failure rate.</p>
        </div>
      </div>

      <!-- Use case 3: AI/LLM Testing -->
      <div class="section-reveal grid md:grid-cols-2 gap-12 md:gap-16 items-center">
        <div>
          <p class="text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">AI / LLM Testing</p>
          <h3 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">Build & test AI apps without burning tokens.</h3>
          <p class="text-lg leading-relaxed mb-6" style="color: var(--text-muted);">
            Route OpenAI and Azure OpenAI API calls to a local language model during development. Get real responses while building your AI-powered apps&thinsp;&mdash;&thinsp;without spending tokens.
          </p>
          <a href="https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-openai" target="_blank" rel="noopener" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">
            Learn more &rarr;
          </a>
        </div>
        <div class="rounded-2xl border p-6 md:p-8 font-mono text-sm overflow-hidden" style="background: var(--bg-secondary); border-color: var(--border-primary);">
          <p style="color: var(--text-faint);">// Your app calls OpenAI</p>
          <p class="truncate" style="color: var(--text-secondary);">POST <span class="text-green-400">/v1/chat/completions</span></p>
          <p class="mt-4 text-purple-400">// Dev Proxy routes to local LLM</p>
          <p style="color: var(--text-faint);"> &rarr; <span class="text-green-400">Ollama</span> (llama3.2)</p>
          <p class="mt-3"><span class="text-green-400">200</span> <span style="color: var(--text-faint);">&#123;</span> <span class="text-purple-400">"choices"</span>: [&#123; <span class="text-purple-400">"message"</span>: ... &#125;] <span style="color: var(--text-faint);">&#125;</span></p>
          <p class="mt-4 text-purple-400">// Real responses. Zero API costs.</p>
        </div>
      </div>

      <!-- Use case 4: Rate Limiting -->
      <div class="section-reveal grid md:grid-cols-2 gap-12 md:gap-16 items-center">
        <div class="md:order-2">
          <p class="text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">Rate Limit Simulation</p>
          <h3 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">Verify your app respects API limits.</h3>
          <p class="text-lg leading-relaxed mb-6" style="color: var(--text-muted);">
            Simulate rate limiting and throttling responses before they happen in production. Avoid getting blocked and deliver a smoother experience for your users.
          </p>
          <a href="https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-rate-limit-api-responses" target="_blank" rel="noopener" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">
            Learn more &rarr;
          </a>
        </div>
        <div class="md:order-1 rounded-2xl border p-6 md:p-8 font-mono text-sm" style="background: var(--bg-secondary); border-color: var(--border-primary);">
          <p style="color: var(--text-faint);">RateLimit-Limit: <span class="text-purple-400">3</span></p>
          <div class="space-y-2 mt-3">
            <div class="flex items-center justify-between">
              <span style="color: var(--text-muted);">GET /api/orders</span>
              <span class="px-2 py-0.5 rounded text-xs font-semibold bg-green-500/20 text-green-400">Remaining: 2</span>
            </div>
            <div class="flex items-center justify-between">
              <span style="color: var(--text-muted);">GET /api/orders</span>
              <span class="px-2 py-0.5 rounded text-xs font-semibold bg-green-500/20 text-green-400">Remaining: 1</span>
            </div>
            <div class="flex items-center justify-between">
              <span style="color: var(--text-muted);">GET /api/orders</span>
              <span class="px-2 py-0.5 rounded text-xs font-semibold bg-yellow-500/20 text-yellow-400">Remaining: 0</span>
            </div>
            <div class="w-full h-px my-2" style="background: var(--border-primary);"></div>
            <div class="flex items-center justify-between">
              <span style="color: var(--text-muted);">GET /api/orders</span>
              <span class="px-2 py-0.5 rounded text-xs font-semibold bg-red-500/20 text-red-400">429 Too Many Requests</span>
            </div>
            <p class="text-xs mt-3 text-purple-400">Retry-After: 30</p>
          </div>
        </div>
      </div>

      <!-- Use case 5: CI/CD -->
      <div class="section-reveal grid md:grid-cols-2 gap-12 md:gap-16 items-center">
        <div>
          <p class="text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">CI/CD Integration</p>
          <h3 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">Automate chaos testing in&nbsp;your pipeline.</h3>
          <p class="text-lg leading-relaxed mb-6" style="color: var(--text-muted);">
            Run Dev Proxy as part of your CI/CD pipeline to catch API integration issues before they reach production. Works with GitHub Actions, Azure DevOps, and more.
          </p>
          <a href="https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/use-dev-proxy-with-github-actions" target="_blank" rel="noopener" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">
            Learn more &rarr;
          </a>
        </div>
        <div class="rounded-2xl border p-6 md:p-8 font-mono text-sm overflow-hidden" style="background: var(--bg-secondary); border-color: var(--border-primary);">
          <p style="color: var(--text-faint);"># .github/workflows/test.yml</p>
          <p style="color: var(--text-secondary);"><span class="text-purple-400">steps</span>:</p>
          <p style="color: var(--text-secondary);">  - <span class="text-purple-400">name</span>: Setup Dev Proxy</p>
          <p style="color: var(--text-secondary);">    <span class="text-purple-400">uses</span>: <span class="text-green-400">dev-proxy-tools/actions/setup@v1</span></p>
          <p style="color: var(--text-secondary);">  - <span class="text-purple-400">name</span>: Run tests</p>
          <p style="color: var(--text-secondary);">    <span class="text-purple-400">run</span>: <span class="text-green-400">npm test</span></p>
          <p style="color: var(--text-secondary);">  - <span class="text-purple-400">name</span>: Stop Dev Proxy</p>
          <p style="color: var(--text-secondary);">    <span class="text-purple-400">uses</span>: <span class="text-green-400">dev-proxy-tools/actions/stop@v1</span></p>
          <p class="mt-3" style="color: var(--text-faint);">✓ 42 passed, 0 failed</p>
        </div>
      </div>

      <!-- Use case 6: MCP Server -->
      <div class="section-reveal grid md:grid-cols-2 gap-12 md:gap-16 items-center">
        <div class="md:order-2">
          <p class="text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">MCP Server</p>
          <h3 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">Configure Dev Proxy with AI&nbsp;assistants.</h3>
          <p class="text-lg leading-relaxed mb-6" style="color: var(--text-muted);">
            Use the Dev Proxy MCP server to create configurations using natural language. Get contextual help and discover features&thinsp;&mdash;&thinsp;right from your AI assistant.
          </p>
          <a href="https://github.com/dev-proxy-tools/mcp" target="_blank" rel="noopener" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">
            Learn more &rarr;
          </a>
        </div>
        <div class="md:order-1 rounded-2xl border p-6 md:p-8 font-mono text-sm overflow-hidden" style="background: var(--bg-secondary); border-color: var(--border-primary);">
          <p style="color: var(--text-faint);">// .vscode/mcp.json</p>
          <p class="mt-2" style="color: var(--text-secondary);">&#123;</p>
          <p style="color: var(--text-secondary);">&nbsp;&nbsp;<span class="text-purple-400">"servers"</span>: &#123;</p>
          <p style="color: var(--text-secondary);">&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-purple-400">"devproxy"</span>: &#123;</p>
          <p style="color: var(--text-secondary);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-purple-400">"type"</span>: <span class="text-green-400">"stdio"</span>,</p>
          <p class="truncate" style="color: var(--text-secondary);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-purple-400">"command"</span>: <span class="text-green-400">"npx"</span>,</p>
          <p class="truncate" style="color: var(--text-secondary);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-purple-400">"args"</span>: [<span class="text-green-400">"-y"</span>, <span class="text-green-400">"@devproxy/mcp"</span>]</p>
          <p style="color: var(--text-secondary);">&nbsp;&nbsp;&nbsp;&nbsp;&#125;</p>
          <p style="color: var(--text-secondary);">&nbsp;&nbsp;&#125;</p>
          <p style="color: var(--text-secondary);">&#125;</p>
          <p class="mt-3 text-purple-400">// AI-powered configuration. Natural language.</p>
        </div>
      </div>

    </div>
  </section>

  <!-- Works with everything -->
  <section class="py-32 px-6 sm:px-8">
    <div class="max-w-4xl mx-auto text-center">
      <p class="section-reveal text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">Platform Agnostic</p>
      <h2 class="section-reveal text-3xl md:text-5xl font-bold mb-8">Works with everything you use.</h2>
      <p class="section-reveal text-lg md:text-xl mb-16" style="color: var(--text-muted);">
        Dev Proxy intercepts network traffic at the system level. It works with any language, framework, and API&thinsp;&mdash;&thinsp;no SDKs, no adapters, no code changes.
      </p>
      <div class="section-reveal grid grid-cols-2 md:grid-cols-4 gap-6">
        {[
          { name: '.NET', icon: `${import.meta.env.BASE_URL}logos/dotnet.svg` },
          { name: 'Node.js', icon: `${import.meta.env.BASE_URL}logos/nodejs.svg` },
          { name: 'Python', icon: `${import.meta.env.BASE_URL}logos/python.svg` },
          { name: 'Java', icon: `${import.meta.env.BASE_URL}logos/java.svg` },
          { name: 'React', icon: `${import.meta.env.BASE_URL}logos/react.svg` },
          { name: 'Angular', icon: `${import.meta.env.BASE_URL}logos/angular.svg` },
          { name: 'Browser', icon: `${import.meta.env.BASE_URL}logos/browser.svg` },
          { name: 'Any REST API', icon: `${import.meta.env.BASE_URL}logos/rest-api.svg` },
        ].map((tech) => (
          <div class="rounded-xl border p-5 text-center transition-all duration-300 hover:border-purple-500/50" style="background: var(--bg-secondary); border-color: var(--border-primary);">
            <div class="mb-2 flex justify-center" aria-hidden="true"><img src={tech.icon} alt={tech.name} class="h-8 w-8" /></div>
            <p class="text-sm font-medium" style="color: var(--text-muted);">{tech.name}</p>
          </div>
        ))}
      </div>
    </div>
  </section>

  <!-- Quick start scenarios -->
  <section class="py-32 px-6 sm:px-8" style="background: var(--bg-secondary);">
    <div class="max-w-5xl mx-auto">
      <div class="text-center mb-16">
        <p class="section-reveal text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">Get Started In Minutes</p>
        <h2 class="section-reveal text-3xl md:text-5xl font-bold">What do you want to do?</h2>
      </div>
      <div class="section-reveal grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        {[
          { title: 'Mock an API that doesn\'t exist yet', time: '10 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-crud-api' },
          { title: 'Test my app handles API errors', time: '5 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/test-my-app-with-random-errors' },
          { title: 'Simulate OpenAI with a local LLM', time: '15 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-openai' },
          { title: 'Simulate rate limiting responses', time: '10 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-rate-limit-api-responses' },
          { title: 'Automate API testing in CI/CD', time: '15 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/use-dev-proxy-with-github-actions' },
          { title: 'Discover what APIs my app calls', time: '5 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/discover-urls-to-watch' },
        ].map((scenario) => (
          <a
            href={scenario.href}
            target="_blank"
            rel="noopener"
            class="group rounded-xl border p-6 transition-all duration-300 hover:border-purple-500/50 hover:shadow-[0_0_40px_rgba(168,85,247,0.1)] flex flex-col"
            style="background: var(--bg-primary); border-color: var(--border-primary);"
          >
            <h3 class="font-semibold mb-3 group-hover:text-purple-400 transition-colors">{scenario.title}</h3>
            <div class="mt-auto flex items-center justify-between">
              <span class="text-xs font-mono px-2 py-1 rounded" style="background: var(--bg-secondary); color: var(--text-faint);">{scenario.time}</span>
              <span class="text-purple-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300">&rarr;</span>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>

  <!-- .NET Foundation membership -->
  <section class="py-24 px-6 sm:px-8">
    <div class="max-w-4xl mx-auto text-center">
      <a
        href="https://dotnetfoundation.org/projects/project-detail/dev-proxy"
        target="_blank"
        rel="noopener"
        class="section-reveal inline-flex flex-col sm:flex-row items-center gap-6 sm:gap-8 rounded-2xl border p-8 sm:p-10 transition-all duration-300 hover:border-purple-500/50 hover:shadow-[0_0_40px_rgba(168,85,247,0.1)] no-underline"
        style="background: var(--bg-secondary); border-color: var(--border-primary);"
      >
        <img
          src={`${import.meta.env.BASE_URL}logos/dotnet-foundation.svg`}
          alt=".NET Foundation logo"
          class="h-20 w-20 shrink-0"
        />
        <div class="text-center sm:text-left">
          <p class="text-lg font-semibold mb-1" style="color: var(--text-primary);">Proud member of the .NET Foundation</p>
          <p class="text-sm" style="color: var(--text-muted);">Dev Proxy is a community-maintained open source project supported by the .NET Foundation.</p>
        </div>
      </a>
    </div>
  </section>

  <!-- Final CTA — bold, cinematic -->
  <section class="py-32 px-6 sm:px-8 relative overflow-hidden">
    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
      <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-[600px] h-[400px] rounded-full opacity-15 blur-[100px]" style="background: radial-gradient(circle, #a855f7 0%, transparent 70%);"></div>
    </div>
    <div class="relative z-10 max-w-3xl mx-auto text-center">
      <h2 class="section-reveal text-3xl md:text-5xl font-bold mb-6">
        How does your app handle<br />
        <span class="bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent">API errors?</span>
      </h2>
      <p class="section-reveal text-lg mb-10" style="color: var(--text-muted);">
        Find out in minutes. Dev Proxy is open source and free.
      </p>
      <div class="section-reveal flex gap-4 justify-center flex-wrap">
        <a
          href="https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/get-started"
          target="_blank"
          rel="noopener"
          class="group px-8 py-4 bg-purple-600 hover:bg-purple-500 text-white font-semibold rounded-full transition-all duration-300 hover:shadow-[0_0_30px_rgba(168,85,247,0.4)]"
        >
          Get Started <span class="inline-block transition-transform duration-300 group-hover:translate-x-1">&rarr;</span>
        </a>
        <a
          href="https://github.com/dotnet/dev-proxy"
          target="_blank"
          rel="noopener"
          class="px-8 py-4 border font-semibold rounded-full transition-all duration-300 hover:border-purple-500"
          style="border-color: var(--border-secondary); color: var(--text-secondary);"
        >
          View on GitHub
        </a>
      </div>
    </div>
  </section>

</Layout>

<style>
  /* Hero fade-in animations */
  .hero-fade {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeIn 0.8s ease-out forwards;
  }
  .hero-fade-1 { animation-delay: 0.1s; }
  .hero-fade-2 { animation-delay: 0.25s; }
  .hero-fade-3 { animation-delay: 0.4s; }
  .hero-fade-4 { animation-delay: 0.55s; }
  .hero-fade-5 { animation-delay: 0.7s; }

  @keyframes heroFadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Scroll-triggered reveal */
  .section-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  }
  .section-reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
</style>

<script>
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
        }
      });
    },
    { threshold: 0.15, rootMargin: '0px 0px -60px 0px' }
  );

  document.querySelectorAll('.section-reveal').forEach((el) => observer.observe(el));
</script>