From 74b04cc596468de514443228b8d46ab2e13b930f Mon Sep 17 00:00:00 2001 From: Waldek Mastykarz Date: Thu, 25 Jun 2026 09:15:41 +0200 Subject: [PATCH 01/12] Improve landing page copy for better conversion - Rewrite hero subhead to lead with outcome, not product description - Make primary CTA specific: 'Simulate your first API error' vs generic 'Get Started' - Strengthen problem statement with visceral consequences (paged at 2AM, retry spirals) - Rewrite all 6 use case headlines to sell benefits/outcomes, not features - Remove repetitive uppercase tracked eyebrow labels from every section - Improve 'Works with everything' to emphasize the differentiator (test your real app) - Add trust signal: 'runs entirely on your machine, no telemetry required' - Rewrite quick-start card titles as user-intent phrases - Replace gradient text with solid purple-400 for hero and final CTA - Reorder quick-start cards to lead with most compelling use case (error testing) - Make final CTA match hero CTA for consistent conversion path Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/pages/index.astro | 82 +++++++++++++++++++------------------------ 1 file changed, 36 insertions(+), 46 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 50da7f2..00f4588 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -12,15 +12,15 @@ import Layout from '../layouts/Layout.astro';
-

- Open Source · Cross Platform · Any Tech Stack +

+ Open source. Cross platform. Any tech stack.

Test beyond
- the happy path. + the happy path.

- Dev Proxy is an API simulator that helps you test how your app handles errors, throttling, and slow responses — without changing a single line of code. + Simulate API failures, throttling, and slow responses against your running app — without changing a single line of code. Find out how your app really behaves before your users do.

- Get Started → + Simulate your first API error → Your users get the rest.

- 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 — until now. + APIs fail, throttle, and timeout. When your app doesn't handle those moments, users lose work, retries spiral, and you get paged at 2 AM. Simulating these failures used to mean writing custom mocks or waiting for production to break. Not anymore.

@@ -86,10 +86,9 @@ import Layout from '../layouts/Layout.astro';
-

API Mocking

-

Mock APIs that don't exist yet.

+

Build frontend features before the backend is ready.

- 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. + Mock realistic CRUD APIs locally so your team can prototype, integrate, and ship frontend work without waiting for backend endpoints. Define it in JSON, get a working API in seconds.

Learn more → @@ -110,10 +109,9 @@ import Layout from '../layouts/Layout.astro';
-

Resilience Testing

-

See how your app handles API errors.

+

Verify your retries, fallbacks, and error states actually work.

- Simulate random errors, timeouts, and failures for any API — without touching your code. Build more robust apps and never lose your customers' data. + Inject random errors, timeouts, and 5xx responses into any API your app calls. Test your loading states, retry logic, and error messages before real users depend on them — without touching your code.

Learn more → @@ -133,10 +131,9 @@ import Layout from '../layouts/Layout.astro';
-

AI / LLM Testing

-

Build & test AI apps without burning tokens.

+

Iterate on AI features without burning tokens.

- Route OpenAI and Azure OpenAI API calls to a local language model during development. Get real responses while building your AI-powered apps — without spending tokens. + Route OpenAI and Azure OpenAI calls to a local model while you build. Iterate faster, test AI workflows end-to-end, and keep your API bill at zero during development.

Learn more → @@ -155,10 +152,9 @@ import Layout from '../layouts/Layout.astro';
-

Rate Limit Simulation

-

Verify your app respects API limits.

+

Prevent rate-limit surprises in production.

- Simulate rate limiting and throttling responses before they happen in production. Avoid getting blocked and deliver a smoother experience for your users. + Simulate 429s and throttling locally so you can validate your retry logic, backoff strategy, and user-facing messaging before real APIs start blocking your app.

Learn more → @@ -192,10 +188,9 @@ import Layout from '../layouts/Layout.astro';
-

CI/CD Integration

-

Automate chaos testing in your pipeline.

+

Catch broken API assumptions before deploy.

- 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. + Run Dev Proxy in your CI/CD pipeline to test how your app handles errors, throttling, and slow responses on every push. Issues surface in the PR, not in production.

Learn more → @@ -217,10 +212,9 @@ import Layout from '../layouts/Layout.astro';
-

MCP Server

-

Configure Dev Proxy with AI assistants.

+

Set up test scenarios faster with AI.

- Use the Dev Proxy MCP server to create configurations using natural language. Get contextual help and discover features — right from your AI assistant. + Use the Dev Proxy MCP server to generate configurations in natural language. Describe what you want to simulate and your AI assistant writes the config for you.

Learn more → @@ -247,10 +241,9 @@ import Layout from '../layouts/Layout.astro';
-

Platform Agnostic

-

Works with everything you use.

+

Test the app you actually ship.

- Dev Proxy intercepts network traffic at the system level. It works with any language, framework, and API — no SDKs, no adapters, no code changes. + Dev Proxy intercepts HTTP traffic at the system level. No SDKs. No adapters. No test-only branches. It works against the app you already have — in any language, any framework, any API.

{[ @@ -275,10 +268,9 @@ import Layout from '../layouts/Layout.astro';
-

See It In Action

-

Get started with Dev Proxy.

+

Up and running in 5 minutes.

- Watch how to set up Dev Proxy and start testing your app in minutes. + Install Dev Proxy, point it at any URL, and start simulating failures immediately. No config needed for the basics.

@@ -298,17 +290,16 @@ import Layout from '../layouts/Layout.astro';
-

Get Started In Minutes

-

What do you want to do?

+

What do you want to test?

{[ + { title: 'Test how 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: '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' }, + { title: 'Use a local LLM instead of OpenAI', time: '15 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-openai' }, + { title: 'Simulate rate limiting locally', time: '10 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-rate-limit-api-responses' }, + { title: 'Run API failure tests 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: 'Find out which 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) => (
- +
-

Proud member of the .NET Foundation

-

Dev Proxy is a community-maintained open source project supported by the .NET Foundation.

+

Backed by the .NET Foundation

+

Open source, community-maintained, and runs entirely on your machine. No traffic leaves your device. No telemetry required.
@@ -408,10 +398,10 @@ import Layout from '../layouts/Layout.astro';

How does your app handle
- API errors? + a flaky API?

- Find out in minutes. Dev Proxy is open source and free. + Find out in 5 minutes. Dev Proxy is free, open source, and runs entirely on your machine.

- Get Started → + Simulate your first API error → Date: Thu, 25 Jun 2026 09:30:27 +0200 Subject: [PATCH 02/12] Full design pass: typography, structure, hierarchy, motion MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Typography: - Add Sora as heading font for distinctive, confident voice - Apply font-heading class to all h1-h3 headings Page structure (reordered for conversion): - Hero → Problem → Quick Starts → Primary use case → Secondary use cases → Differentiator → Compact capabilities → Video → VS Code → Trust → CTA - Move quick-start cards directly after problem statement (path to value) - Promote resilience testing to full-width primary use case (h2) - Consolidate rate-limiting, CI/CD, MCP into compact 3-column grid - Reduce from 6 identical alternating sections to varied layouts Visual hierarchy: - Primary use case gets full-width h2 treatment (biggest impact) - Secondary use cases (mocking, AI) get medium h3 with code demos - Tertiary capabilities get text-only compact cards (no code blocks) - Differentiator section gets ambient glow + positioning copy Motion: - Sections render visible by default (accessible baseline) - JS adds .will-reveal class only when motion is allowed - Proper prefers-reduced-motion: all animations disabled - Easing changed to cubic-bezier(0.16, 1, 0.3, 1) (expo-out) - Removed hero tagline animation step (tighter sequence) Copy additions: - Differentiator section: 'Not mocks. Not stubs. Not a test harness.' - Quick-starts subhead: 'Pick a scenario. You'll be running in minutes.' Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/pages/index.astro | 412 ++++++++++++++++++++---------------------- src/styles/global.css | 9 + 2 files changed, 208 insertions(+), 213 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 00f4588..7e60dc9 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -12,17 +12,14 @@ import Layout from '../layouts/Layout.astro';
-

- Open source. Cross platform. Any tech stack. -

-

+

Test beyond
the happy path.

-

+

Simulate API failures, throttling, and slow responses against your running app — without changing a single line of code. Find out how your app really behaves before your users do.

-
+
-
+
@@ -69,7 +66,7 @@ import Layout from '../layouts/Layout.astro';
-

+

You test the happy path.
Your users get the rest.

@@ -79,37 +76,46 @@ import Layout from '../layouts/Layout.astro';
- -
-
- - -
-
-

Build frontend features before the backend is ready.

-

- Mock realistic CRUD APIs locally so your team can prototype, integrate, and ship frontend work without waiting for backend endpoints. Define it in JSON, get a working API in seconds. -

- - Learn more → + +
+
+
+

What do you want to test?

+

Pick a scenario. You'll be running in minutes.

+
+
+ {[ + { title: 'Test how 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: 'Use a local LLM instead of OpenAI', time: '15 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-openai' }, + { title: 'Simulate rate limiting locally', time: '10 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-rate-limit-api-responses' }, + { title: 'Run API failure tests 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: 'Find out which 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) => ( + +

{scenario.title}

+
+ {scenario.time} + → +
-
-
-

// customers-api.json — CrudApiPlugin

-

"baseUrl": "https://api.contoso.com/customers"

-

getAll GET    /customers

-

getOne GET    /customers/{id}

-

create POST   /customers

-

merge  PATCH  /customers/{id}

-

delete DELETE /customers/{id}

-

// Defined in JSON. Zero server code.

-
+ ))}
+
+
- + +
+
-
-

Verify your retries, fallbacks, and error states actually work.

+ -
+

// errors-contoso-api.json

"url": "https://api.contoso.com/*"

"responses":

@@ -127,125 +133,73 @@ import Layout from '../layouts/Layout.astro';

// Random errors at configured failure rate.

+
+
- -
-
-

Iterate on AI features without burning tokens.

-

- Route OpenAI and Azure OpenAI calls to a local model while you build. Iterate faster, test AI workflows end-to-end, and keep your API bill at zero during development. -

- - Learn more → - -
-
-

// Your app calls OpenAI

-

POST /v1/chat/completions

-

// Dev Proxy routes to local LLM

-

→ Ollama (llama3.2)

-

200 { "choices": [{ "message": ... }] }

-

// Real responses. Zero API costs.

-
-
+ +
+
- +
-

Prevent rate-limit surprises in production.

-

- Simulate 429s and throttling locally so you can validate your retry logic, backoff strategy, and user-facing messaging before real APIs start blocking your app. +

Build frontend features before the backend is ready.

+

+ Mock realistic CRUD APIs locally so your team can prototype, integrate, and ship frontend work without waiting for backend endpoints. Define it in JSON, get a working API in seconds.

- + Learn more →
-
-

RateLimit-Limit: 3

-
-
- GET /api/orders - Remaining: 2 -
-
- GET /api/orders - Remaining: 1 -
-
- GET /api/orders - Remaining: 0 -
-
-
- GET /api/orders - 429 Too Many Requests -
-

Retry-After: 30

-
+
+

// customers-api.json — CrudApiPlugin

+

"baseUrl": "https://api.contoso.com/customers"

+

getAll GET    /customers

+

getOne GET    /customers/{id}

+

create POST   /customers

+

merge  PATCH  /customers/{id}

+

delete DELETE /customers/{id}

+

// Defined in JSON. Zero server code.

- +
-

Catch broken API assumptions before deploy.

-

- Run Dev Proxy in your CI/CD pipeline to test how your app handles errors, throttling, and slow responses on every push. Issues surface in the PR, not in production. -

- - Learn more → - -
-
-

# .github/workflows/test.yml

-

steps:

-

- name: Setup Dev Proxy

-

uses: dev-proxy-tools/actions/setup@v1

-

- name: Run tests

-

run: npm test

-

- name: Stop Dev Proxy

-

uses: dev-proxy-tools/actions/stop@v1

-

✓ 42 passed, 0 failed

-
-
- - -
-
-

Set up test scenarios faster with AI.

-

- Use the Dev Proxy MCP server to generate configurations in natural language. Describe what you want to simulate and your AI assistant writes the config for you. +

Iterate on AI features without burning tokens.

+

+ Route OpenAI and Azure OpenAI calls to a local model while you build. Iterate faster, test AI workflows end-to-end, and keep your API bill at zero during development.

- + Learn more →
-
-

// .vscode/mcp.json

-

{

-

  "servers": {

-

    "devproxy": {

-

      "type": "stdio",

-

      "command": "npx",

-

      "args": ["-y", "@devproxy/mcp"]

-

    }

-

  }

-

}

-

// AI-powered configuration. Natural language.

+
+

// Your app calls OpenAI

+

POST /v1/chat/completions

+

// Dev Proxy routes to local LLM

+

→ Ollama (llama3.2)

+

200 { "choices": [{ "message": ... }] }

+

// Real responses. Zero API costs.

-
- -
-
-

Test the app you actually ship.

-

- Dev Proxy intercepts HTTP traffic at the system level. No SDKs. No adapters. No test-only branches. It works against the app you already have — in any language, any framework, any API. + +

+ +
+

Test the app you actually ship.

+

+ Dev Proxy intercepts HTTP traffic at the system level. No SDKs. No adapters. No test-only code paths. It works against the app you already have — the same binary your users run. +

+

+ Not mocks. Not stubs. Not a test harness.
Real API behavior, simulated locally against your real app.

-
+
{[ { name: '.NET', icon: `${import.meta.env.BASE_URL}logos/dotnet.svg` }, { name: 'Node.js', icon: `${import.meta.env.BASE_URL}logos/nodejs.svg` }, @@ -256,21 +210,59 @@ import Layout from '../layouts/Layout.astro'; { 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) => ( -
- -

{tech.name}

+
+ +

{tech.name}

))}
- + +
+
+
+ +
+

Prevent rate-limit surprises.

+

+ Simulate 429s and throttling locally. Validate your retry logic and backoff strategy before real APIs block your app. +

+ + Learn more → + +
+ +
+

Catch issues before deploy.

+

+ Run Dev Proxy in CI/CD to test against errors and throttling on every push. Issues surface in the PR, not in production. +

+ + Learn more → + +
+ +
+

Configure with AI assistants.

+

+ Use the Dev Proxy MCP server to generate configurations in natural language. Describe what you want to simulate and your AI assistant writes the config. +

+ + Learn more → + +
+
+
+
+ +
-

Up and running in 5 minutes.

-

- Install Dev Proxy, point it at any URL, and start simulating failures immediately. No config needed for the basics. +

Up and running in 5 minutes.

+

+ Install, point at any URL, and start simulating failures immediately.

@@ -286,64 +278,31 @@ import Layout from '../layouts/Layout.astro';
- -
+ +
-
-

What do you want to test?

-
-
- {[ - { title: 'Test how 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: 'Use a local LLM instead of OpenAI', time: '15 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-openai' }, - { title: 'Simulate rate limiting locally', time: '10 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-rate-limit-api-responses' }, - { title: 'Run API failure tests 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: 'Find out which 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) => ( - -

{scenario.title}

-
- {scenario.time} - → -
- - ))} -
-
-
- - -
-
-
+
-

Stay in your editor. Control everything from there.

-

- The Dev Proxy Toolkit for VS Code gives you IntelliSense for config files, 100+ code snippets, debugger integration, and a built-in MCP server for AI-assisted setup — all without leaving your editor. +

Stay in your editor.

+

+ The Dev Proxy Toolkit for VS Code gives you IntelliSense for config files, 100+ code snippets, debugger integration, and a built-in MCP server — all without leaving your editor.

- + Install from Marketplace →
-
-
- Visual Studio Code +
+
+ Visual Studio Code
-

Dev Proxy Toolkit

+

Dev Proxy Toolkit

garrytrinder

-
+
✓ - Control Dev Proxy from VS Code + Start/stop from the command palette
✓ @@ -359,7 +318,7 @@ import Layout from '../layouts/Layout.astro';
✓ - MCP server for AI-assisted development + MCP server for AI-assisted config
@@ -367,7 +326,7 @@ import Layout from '../layouts/Layout.astro';
- +
-

Backed by the .NET Foundation

+

Backed by the .NET Foundation

Open source, community-maintained, and runs entirely on your machine. No traffic leaves your device. No telemetry required.
- +
-

+

How does your app handle
a flaky API?

- Find out in 5 minutes. Dev Proxy is free, open source, and runs entirely on your machine. + Find out in 5 minutes. Free, open source, runs on your machine.

diff --git a/src/styles/global.css b/src/styles/global.css index fceecbb..e62975f 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,9 +1,18 @@ @import "tailwindcss"; +@font-face { + font-family: 'Sora'; + font-style: normal; + font-weight: 100 800; + font-display: swap; + src: url('https://fonts.gstatic.com/s/sora/v12/xMQOuFFYT72X5wkB_18qmnndmSdSnk-NKQI.woff2') format('woff2'); +} + @theme { --color-purple-400: #c084fc; --color-purple-500: #a855f7; --color-purple-600: #9333ea; + --font-heading: 'Sora', ui-sans-serif, system-ui, sans-serif; } :root { From 476befa07bc469ebdba9c86c47b234f806fd811a Mon Sep 17 00:00:00 2001 From: Waldek Mastykarz Date: Thu, 25 Jun 2026 09:35:47 +0200 Subject: [PATCH 03/12] Change hero to loss-aversion headline MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 'Your app works fine. Until the API doesn't.' — names the tension immediately, triggers loss aversion, and creates an open loop that pulls the reader into the subhead. Also rework the problem statement section into a problem→solution bridge: 'You test the happy path. Dev Proxy tests everything else.' This avoids repeating the same emotional beat twice and moves the narrative forward. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/pages/index.astro | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 7e60dc9..4da8ccf 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -13,8 +13,8 @@ import Layout from '../layouts/Layout.astro';

- Test beyond
- the happy path. + Your app works fine.
+ Until the API doesn't.

Simulate API failures, throttling, and slow responses against your running app — without changing a single line of code. Find out how your app really behaves before your users do. @@ -63,15 +63,15 @@ import Layout from '../layouts/Layout.astro';

- +

You test the happy path.
- Your users get the rest. + Dev Proxy tests everything else.

- APIs fail, throttle, and timeout. When your app doesn't handle those moments, users lose work, retries spiral, and you get paged at 2 AM. Simulating these failures used to mean writing custom mocks or waiting for production to break. Not anymore. + Errors, throttling, timeouts, unexpected payloads — all the things that break apps in production but are hard to reproduce in development. Dev Proxy simulates them against your running app, locally, without changing your code.

From 192e8bfdab1654e6f911873970ad47b0f1ebfd1f Mon Sep 17 00:00:00 2001 From: Waldek Mastykarz Date: Thu, 25 Jun 2026 09:40:01 +0200 Subject: [PATCH 04/12] Fix hero visual weight and font loading - Load Sora via Google Fonts for reliable weight delivery (self-hosted woff2 wasn't rendering bold weights) - Use font-extrabold (800) + fluid clamp sizing for commanding presence - Cap heading at 5.5rem to prevent awkward line wrapping - Trim subhead to one focused sentence (less competition with headline) - Remove broken self-hosted @font-face declaration Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/layouts/Layout.astro | 3 +++ src/pages/index.astro | 4 ++-- src/styles/global.css | 8 -------- 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 4eff21b..79b8ca8 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -22,6 +22,9 @@ const ogImage = image ? new URL(image, Astro.site ?? 'https://devproxy.net').hre {title} - Dev Proxy + + + diff --git a/src/pages/index.astro b/src/pages/index.astro index 4da8ccf..4b0f1d6 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -12,12 +12,12 @@ import Layout from '../layouts/Layout.astro';
-

+

Your app works fine.
Until the API doesn't.

- Simulate API failures, throttling, and slow responses against your running app — without changing a single line of code. Find out how your app really behaves before your users do. + Simulate API failures, throttling, and slow responses against your running app — without changing a single line of code.

Date: Thu, 25 Jun 2026 09:43:23 +0200 Subject: [PATCH 05/12] Redesign hero with typographic contrast MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The headline has emotional contrast (calm setup → sharp twist), so the typography should perform that rhythm: - Setup line ('Your app works fine.'): medium weight, smaller size, muted color — understated, confident, calm - Punchline ('Until the API doesn't.'): extrabold, 2x size, purple — the twist hits hard Each line has its own size constraint so neither wraps awkwardly. Wider max-w-5xl container gives breathing room. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .impeccable/hook.cache.json | 1 + PRODUCT.md | 41 +++++++++++++++++++++++++++++++++++++ src/pages/index.astro | 8 ++++---- 3 files changed, 46 insertions(+), 4 deletions(-) create mode 100644 .impeccable/hook.cache.json create mode 100644 PRODUCT.md diff --git a/.impeccable/hook.cache.json b/.impeccable/hook.cache.json new file mode 100644 index 0000000..4232029 --- /dev/null +++ b/.impeccable/hook.cache.json @@ -0,0 +1 @@ +{"version":1,"sessions":{"c957bc52-5e60-4e60-b458-6a06a353d089":{"updatedAt":1782373395162,"files":{"/Users/waldek/.copilot/copilot-worktrees/dev-proxy-tools.github.io/wmastyka-microsoft-congenial-sniffle/src/pages/index.astro":{"editCount":20,"findings":["gradient-text:20","gradient-text:411","ai-color-palette:320","ai-color-palette:20","ai-color-palette:411","gradient-text:410","ai-color-palette:319","ai-color-palette:410","gradient-text:409","ai-color-palette:318","ai-color-palette:409","gradient-text:408","ai-color-palette:317","ai-color-palette:408","gradient-text:407","ai-color-palette:316","ai-color-palette:407"]},"/Users/waldek/.copilot/copilot-worktrees/dev-proxy-tools.github.io/wmastyka-microsoft-congenial-sniffle/src/styles/global.css":{"editCount":3,"findings":["side-tab:89","side-tab:90","side-tab:81"]},"/Users/waldek/.copilot/copilot-worktrees/dev-proxy-tools.github.io/wmastyka-microsoft-congenial-sniffle/src/layouts/Layout.astro":{"editCount":1,"findings":["single-font:27"]}}}}} \ No newline at end of file diff --git a/PRODUCT.md b/PRODUCT.md new file mode 100644 index 0000000..1c6cde9 --- /dev/null +++ b/PRODUCT.md @@ -0,0 +1,41 @@ +# Product + +## Register + +brand + +## Users + +Developers building apps that consume APIs — frontend devs, full-stack devs, platform engineers. They land here from search, social, or word-of-mouth. They're evaluating whether Dev Proxy solves a pain they already have (flaky API integrations, untested error paths, expensive AI token burn during development). Context: at their desk, mid-project, looking for a tool that fits into their existing workflow without friction. + +## Product Purpose + +Marketing site for Dev Proxy — an open-source, cross-platform API simulator. The site's job is to make developers understand the value proposition in seconds and get them to try the tool. Success: a developer arrives, recognizes their own pain, and clicks through to install/get started. + +## Brand Personality + +Technical, confident, developer-native. + +Speaks like a senior engineer who's built this for other engineers. No marketing fluff, no corporate speak. Shows rather than tells. Assumes competence. The confidence comes from knowing the tool actually works — not from shouting. + +## Anti-references + +- AI-generated slop — the dime-a-dozen landing page with identical structure, gradient text, glassmorphism cards, eyebrow labels on every section, and "Built for the modern developer" copy +- Generic SaaS templates — hero + 3 feature cards + pricing + footer +- Enterprise/corporate heaviness — compliance language, stock photography, dense feature matrices +- "Developer advocacy" cringe — forced enthusiasm, emoji-heavy, "🚀 Ship faster!" + +## Design Principles + +1. **Show the terminal, not the brochure.** Every claim is backed by a concrete code/config/output example. The product sells itself through demonstration. +2. **Respect the reader's time.** Developers skim. Front-load value. Every section earns its place or gets cut. +3. **Sell the problem you solve, not the features you have.** Lead with pain, resolve with outcome. The tool is the means, not the message. +4. **One voice, not six.** The page should feel like one coherent argument building toward a single conclusion, not a feature catalogue. +5. **Earned confidence.** Trust comes from specificity, proof, and craft — not from bold claims or social pressure. + +## Accessibility & Inclusion + +- WCAG 2.1 AA minimum +- Dark and light mode with system preference detection +- Reduced motion support for all animations +- No information conveyed by color alone diff --git a/src/pages/index.astro b/src/pages/index.astro index 4b0f1d6..738ce28 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -11,10 +11,10 @@ import Layout from '../layouts/Layout.astro';
-
-

- Your app works fine.
- Until the API doesn't. +
+

+ Your app works fine. + Until the API doesn't.

Simulate API failures, throttling, and slow responses against your running app — without changing a single line of code. From 8a23d3849189eb0a281fe12ff6e49f1594b83656 Mon Sep 17 00:00:00 2001 From: Waldek Mastykarz Date: Thu, 25 Jun 2026 09:44:47 +0200 Subject: [PATCH 06/12] Fix hero: both lines bold, same size, color-only contrast MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The typographic weight contrast made the setup line look like a caption. The original worked because both lines were equally commanding — differentiated only by color. Apply the same principle: both extrabold, same responsive scale (stepped down one size to accommodate longer text without wrapping). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/pages/index.astro | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 738ce28..ff82cb6 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -12,9 +12,9 @@ import Layout from '../layouts/Layout.astro';

-

- Your app works fine. - Until the API doesn't. +

+ Your app works fine.
+ Until the API doesn't.

Simulate API failures, throttling, and slow responses against your running app — without changing a single line of code. From 99a8602d49173c1d9911f990e196bd83bb61b066 Mon Sep 17 00:00:00 2001 From: Waldek Mastykarz Date: Thu, 25 Jun 2026 09:47:56 +0200 Subject: [PATCH 07/12] Remove all em-dashes from copy Replace with periods or restructured sentences. Em-dashes read as LLM-generated text. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/pages/index.astro | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index ff82cb6..a2f3650 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -17,7 +17,7 @@ import Layout from '../layouts/Layout.astro'; Until the API doesn't.

- Simulate API failures, throttling, and slow responses against your running app — without changing a single line of code. + Simulate API failures, throttling, and slow responses against your running app. No code changes required.

Dev Proxy tests everything else.

- Errors, throttling, timeouts, unexpected payloads — all the things that break apps in production but are hard to reproduce in development. Dev Proxy simulates them against your running app, locally, without changing your code. + Errors, throttling, timeouts, unexpected payloads. All the things that break apps in production but are hard to reproduce in development. Dev Proxy simulates them against your running app, locally, without changing your code.

@@ -117,7 +117,7 @@ import Layout from '../layouts/Layout.astro';
-

// customers-api.json — CrudApiPlugin

+

// customers-api.json / CrudApiPlugin

"baseUrl": "https://api.contoso.com/customers"

getAll GET    /customers

getOne GET    /customers/{id}

@@ -194,7 +194,7 @@ import Layout from '../layouts/Layout.astro';

Test the app you actually ship.

- Dev Proxy intercepts HTTP traffic at the system level. No SDKs. No adapters. No test-only code paths. It works against the app you already have — the same binary your users run. + Dev Proxy intercepts HTTP traffic at the system level. No SDKs. No adapters. No test-only code paths. It works against the app you already have. The same binary your users run.

Not mocks. Not stubs. Not a test harness.
Real API behavior, simulated locally against your real app. @@ -285,7 +285,7 @@ import Layout from '../layouts/Layout.astro';

Stay in your editor.

- The Dev Proxy Toolkit for VS Code gives you IntelliSense for config files, 100+ code snippets, debugger integration, and a built-in MCP server — all without leaving your editor. + The Dev Proxy Toolkit for VS Code gives you IntelliSense for config files, 100+ code snippets, debugger integration, and a built-in MCP server. All without leaving your editor.

Install from Marketplace → From 06dc213699d5182d9e9c33fb12215fcf32258618 Mon Sep 17 00:00:00 2001 From: Waldek Mastykarz Date: Thu, 25 Jun 2026 09:50:32 +0200 Subject: [PATCH 08/12] Redesign hero: split layout with prominent terminal demo - Left side: headline + subhead + CTAs, left-aligned (no more wrapping) - Right side: terminal demo, large and prominent with subtle shadow - Terminal now shows 3 requests (200, 429, 504) for richer demonstration - Grid layout at lg breakpoint, stacked on mobile - Left-aligned text eliminates centering-related orphan/wrapping issues - Terminal has more generous padding and spacing for readability - Ambient glow repositioned to right side behind terminal - max-w-7xl for wider composition that uses the viewport The product is the hero. Show the terminal, not the brochure. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/pages/index.astro | 77 +++++++++++++++++++++++-------------------- 1 file changed, 42 insertions(+), 35 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index a2f3650..5a31011 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -4,59 +4,66 @@ import Layout from '../layouts/Layout.astro'; - -
+ +
-
-

- Your app works fine.
- Until the API doesn't. -

-

- Simulate API failures, throttling, and slow responses against your running app. No code changes required. -

-
- - Simulate your first API error → - - - Browse Samples - +
+ +
+

+ Your app works fine.
+ Until the API doesn't. +

+

+ Simulate API failures, throttling, and slow responses against your running app. No code changes required. +

+
+ + Simulate your first API error → + + + Browse Samples + +
- -
-
+ +
+
terminal
-
+

❯ devproxy

  info    Dev Proxy listening on 127.0.0.1:8000...

-

+

  req    GET https://api.contoso.com/posts

  skip   GenericRandomErrorPlugin: Pass through

-

  pass   Passed through

-

+

  200   Passed through

+

  req    GET https://api.contoso.com/posts

  skip   RetryAfterPlugin: Request not throttled

-

  oops   GenericRandomErrorPlugin: 429 429

+

  429   GenericRandomErrorPlugin: Too Many Requests

+

+

  req    POST https://api.contoso.com/orders

+

  skip   LatencyPlugin: Adding 3200ms delay

+

  504   GenericRandomErrorPlugin: Gateway Timeout

From f9ca928ac318ddc24d98a5299236a1c3fd3bbb9f Mon Sep 17 00:00:00 2001 From: Waldek Mastykarz Date: Thu, 25 Jun 2026 09:56:52 +0200 Subject: [PATCH 09/12] Fix hero layout at narrower viewports - Split layout now activates at md (768px) instead of lg (1024px) - Full-height hero only applied at lg+ (no dead space on tablets) - Natural padding (py-16) on smaller viewports keeps content tight - Remove unnecessary top padding from text column Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/pages/index.astro | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 5a31011..49a1ea2 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -5,15 +5,15 @@ import Layout from '../layouts/Layout.astro'; -
+
-
+
-
+

Your app works fine.
Until the API doesn't. @@ -398,6 +398,15 @@ import Layout from '../layouts/Layout.astro'; font-family: var(--font-heading); } + .hero-grid { + min-height: auto; + } + @media (min-width: 1024px) { + .hero-grid { + min-height: calc(100vh - 4rem); + } + } + /* Hero fade-in animations */ .hero-fade { opacity: 0; From 653de4a075834312125b907ae94d3d873f2a5bf6 Mon Sep 17 00:00:00 2001 From: Waldek Mastykarz Date: Thu, 25 Jun 2026 10:15:11 +0200 Subject: [PATCH 10/12] Make hero look good at every viewport width - Center text + CTAs below md, left-align when split is active - Bigger heading on mobile (text-5xl/text-6xl vs previous text-4xl) - Subhead max-w-lg centered on mobile, left-aligned on desktop - Terminal constrained to max-w-xl and centered when stacked - No viewport requires special treatment to look correct Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/pages/index.astro | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 49a1ea2..12fe24c 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -12,16 +12,16 @@ import Layout from '../layouts/Layout.astro';

- -
-

+ +
+

Your app works fine.
Until the API doesn't.

-

+

Simulate API failures, throttling, and slow responses against your running app. No code changes required.

-
+
- -
+ +
From 12a5290e715250677cdd8479dcdbcb80177d8acd Mon Sep 17 00:00:00 2001 From: Waldek Mastykarz Date: Thu, 25 Jun 2026 10:38:57 +0200 Subject: [PATCH 11/12] Fix grid split: use underscores not commas in Tailwind arbitrary value MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit md:grid-cols-[1fr,1.2fr] is invalid Tailwind syntax — arbitrary values use underscores for spaces. Fixed to md:grid-cols-[1fr_1.2fr]. This was preventing the two-column layout from ever activating. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/pages/index.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 12fe24c..2b0e469 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -11,7 +11,7 @@ import Layout from '../layouts/Layout.astro';
-
+

From e4a925579308e19e2629c20f2fe7d5280405f40b Mon Sep 17 00:00:00 2001 From: Waldek Mastykarz Date: Thu, 25 Jun 2026 10:41:31 +0200 Subject: [PATCH 12/12] Revert hero to centered layout (like original) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The split layout was a failed experiment — it broke at common viewport widths and added complexity without visual improvement. Back to centered: headline, subhead, CTAs, terminal demo. Same composition as the original that worked, with the improved copy and a wider terminal showing 3 request types (200, 429, 504). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/pages/index.astro | 72 ++++++++++++++++++------------------------- 1 file changed, 30 insertions(+), 42 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 2b0e469..4bd0c55 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -4,45 +4,42 @@ import Layout from '../layouts/Layout.astro'; - -
+ +
-
- -
-

- Your app works fine.
- Until the API doesn't. -

-

- Simulate API failures, throttling, and slow responses against your running app. No code changes required. -

-
- - Simulate your first API error → - - - Browse Samples - -
+
+

+ Your app works fine.
+ Until the API doesn't. +

+

+ Simulate API failures, throttling, and slow responses against your running app. No code changes required. +

+
+ + Simulate your first API error → + + + Browse Samples +
- -
-
+ +
+
@@ -398,15 +395,6 @@ import Layout from '../layouts/Layout.astro'; font-family: var(--font-heading); } - .hero-grid { - min-height: auto; - } - @media (min-width: 1024px) { - .hero-grid { - min-height: calc(100vh - 4rem); - } - } - /* Hero fade-in animations */ .hero-fade { opacity: 0;