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-2 overflow-x-auto">
            <p style="color: var(--text-faint);"><span style="color: var(--text-muted);">$</span> devproxy</p>
            <p class="text-purple-400">  Listening on 127.0.0.1:8000...</p>
            <p class="whitespace-nowrap" style="color: var(--text-faint);">  <span class="text-green-400">200</span> GET https://api.contoso.com/users</p>
            <p class="whitespace-nowrap" style="color: var(--text-faint);">  <span class="text-red-400">429</span> GET https://api.contoso.com/data <span style="color: var(--text-faint);">← throttled</span></p>
            <p class="whitespace-nowrap" style="color: var(--text-faint);">  <span class="text-yellow-400">500</span> POST https://api.contoso.com/items <span style="color: var(--text-faint);">← server error</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: API Errors -->
      <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">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="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 makes a normal API call</p>
          <p class="truncate" style="color: var(--text-secondary);">fetch(<span class="text-green-400">'https://api.contoso.com/orders'</span>)</p>
          <p class="mt-4 text-purple-400">// Dev Proxy intercepts and returns</p>
          <p><span class="text-red-400">500</span> <span style="color: var(--text-faint);">Internal Server Error</span></p>
          <p><span class="text-yellow-400">429</span> <span style="color: var(--text-faint);">Too Many Requests</span></p>
          <p><span class="text-red-400">503</span> <span style="color: var(--text-faint);">Service Unavailable</span></p>
          <p class="mt-4 text-purple-400">// Does your app handle it?</p>
        </div>
      </div>

      <!-- Use case 2: 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" style="background: var(--bg-secondary); border-color: var(--border-primary);">
          <div class="space-y-3">
            <div class="flex items-center justify-between">
              <span class="text-sm font-mono" style="color: var(--text-muted);">Request 1</span>
              <span class="px-2 py-0.5 rounded text-xs font-semibold bg-green-500/20 text-green-400">200 OK</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-sm font-mono" style="color: var(--text-muted);">Request 2</span>
              <span class="px-2 py-0.5 rounded text-xs font-semibold bg-green-500/20 text-green-400">200 OK</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-sm font-mono" style="color: var(--text-muted);">Request 3</span>
              <span class="px-2 py-0.5 rounded text-xs font-semibold bg-green-500/20 text-green-400">200 OK</span>
            </div>
            <div class="w-full h-px my-2" style="background: var(--border-primary);"></div>
            <div class="flex items-center justify-between">
              <span class="text-sm font-mono" style="color: var(--text-muted);">Request 4</span>
              <span class="px-2 py-0.5 rounded text-xs font-semibold bg-yellow-500/20 text-yellow-400">429 Throttled</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-sm font-mono" style="color: var(--text-muted);">Request 5</span>
              <span class="px-2 py-0.5 rounded text-xs font-semibold bg-yellow-500/20 text-yellow-400">429 Throttled</span>
            </div>
            <p class="text-xs mt-3 font-mono text-purple-400">Retry-After: 30s</p>
          </div>
        </div>
      </div>

      <!-- Use case 3: 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);">// No backend? No problem.</p>
          <p class="mt-2"><span class="text-green-400">GET</span>  <span style="color: var(--text-secondary);">/products</span>     <span style="color: var(--text-faint);">→ list</span></p>
          <p><span class="text-blue-400">POST</span> <span style="color: var(--text-secondary);">/products</span>     <span style="color: var(--text-faint);">→ create</span></p>
          <p><span class="text-yellow-400">PUT</span>  <span style="color: var(--text-secondary);">/products/:id</span> <span style="color: var(--text-faint);">→ update</span></p>
          <p><span class="text-red-400">DEL</span>  <span style="color: var(--text-secondary);">/products/:id</span> <span style="color: var(--text-faint);">→ delete</span></p>
          <p class="mt-4 text-purple-400">// Zero lines of server code.</p>
        </div>
      </div>

      <!-- Use case 4: Slow APIs -->
      <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">Latency Simulation</p>
          <h3 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">Test what happens when APIs are slow.</h3>
          <p class="text-lg leading-relaxed mb-6" style="color: var(--text-muted);">
            Add realistic latency to any API response. Make sure your loading states, timeouts, and cancellation logic work as expected.
          </p>
          <a href="https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-slow-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 flex flex-col items-center justify-center" style="background: var(--bg-secondary); border-color: var(--border-primary); min-height: 200px;">
          <div class="flex items-end gap-1 mb-4" aria-hidden="true">
            <div class="w-2 rounded-full bg-green-400" style="height: 20px;"></div>
            <div class="w-2 rounded-full bg-green-400" style="height: 30px;"></div>
            <div class="w-2 rounded-full bg-yellow-400" style="height: 50px;"></div>
            <div class="w-2 rounded-full bg-yellow-400" style="height: 70px;"></div>
            <div class="w-2 rounded-full bg-red-400" style="height: 100px;"></div>
            <div class="w-2 rounded-full bg-red-400" style="height: 90px;"></div>
            <div class="w-2 rounded-full bg-yellow-400" style="height: 60px;"></div>
            <div class="w-2 rounded-full bg-green-400" style="height: 35px;"></div>
          </div>
          <p class="text-4xl font-bold font-mono text-purple-400">3,200<span class="text-lg" style="color: var(--text-faint);">ms</span></p>
          <p class="text-sm mt-1" style="color: var(--text-faint);">simulated response time</p>
        </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-in-ci-cd-overview" 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>: Install Dev Proxy</p>
          <p style="color: var(--text-secondary);">    <span class="text-purple-400">run</span>: <span class="text-green-400">bash install.sh</span></p>
          <p style="color: var(--text-secondary);">  - <span class="text-purple-400">name</span>: Run tests with proxy</p>
          <p style="color: var(--text-secondary);">    <span class="text-purple-400">run</span>: <span class="text-green-400">devproxy &amp; npm test</span></p>
          <p class="mt-3" style="color: var(--text-faint);">✓ 42 passed, 0 failed</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: '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: '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: 'Check my Microsoft Graph permissions', time: '10 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/check-minimal-api-permissions' },
          { 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' },
          { 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-in-ci-cd-overview' },
          { title: 'Simulate LLM API failures', time: '10 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-errors-from-language-model-apis' },
        ].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>

  <!-- 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>