Skip to content

Commit 6420a4d

Browse files
CopilotCopilot
authored
feat: add five homepage variants with mobile-friendly layouts
Agent-Logs-Url: https://github.com/counterfact/api-simulator/sessions/cec0209c-2045-4908-b120-23a8dfe6b24d
1 parent c6b8f30 commit 6420a4d

5 files changed

Lines changed: 407 additions & 0 deletions

File tree

‎docs/home-page-variants/variant-1.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Counterfact Home Variant 1</title>
7+
<style>
8+
:root {
9+
color-scheme: light dark;
10+
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
11+
}
12+
body {
13+
margin: 0;
14+
line-height: 1.5;
15+
}
16+
main {
17+
max-width: 860px;
18+
margin: 0 auto;
19+
padding: 24px 16px 48px;
20+
}
21+
h1 {
22+
font-size: clamp(1.8rem, 5vw, 2.8rem);
23+
margin: 0 0 12px;
24+
}
25+
.kicker {
26+
font-weight: 600;
27+
opacity: 0.8;
28+
}
29+
.cta {
30+
display: inline-block;
31+
margin-top: 8px;
32+
padding: 10px 14px;
33+
border-radius: 10px;
34+
text-decoration: none;
35+
border: 1px solid currentColor;
36+
}
37+
.cards {
38+
display: grid;
39+
gap: 12px;
40+
margin-top: 20px;
41+
}
42+
.card {
43+
border: 1px solid color-mix(in oklab, currentColor 25%, transparent);
44+
border-radius: 12px;
45+
padding: 14px;
46+
}
47+
.card h2 {
48+
margin: 0 0 8px;
49+
font-size: 1.1rem;
50+
}
51+
.placeholder {
52+
margin-top: 18px;
53+
padding: 12px;
54+
border-left: 3px solid #7aa2ff;
55+
border-radius: 8px;
56+
background: color-mix(in oklab, #7aa2ff 10%, transparent);
57+
}
58+
@media (min-width: 720px) {
59+
.cards {
60+
grid-template-columns: repeat(3, minmax(0, 1fr));
61+
}
62+
}
63+
</style>
64+
</head>
65+
<body>
66+
<main>
67+
<p class="kicker">Counterfact</p>
68+
<h1>Your OpenAPI file becomes a living API in one command.</h1>
69+
<p>
70+
Counterfact generates a stateful mock server with editable TypeScript handlers and a runtime REPL.
71+
In under 15 seconds: you understand what it does. In under 30 seconds: you know where to go next.
72+
</p>
73+
<a class="cta" href="../getting-started.md">Start in 60 seconds</a>
74+
75+
<section class="cards" aria-label="Entry points">
76+
<article class="card">
77+
<h2>Frontend first</h2>
78+
<p>Need realistic API behavior while your backend is evolving?</p>
79+
<a href="../patterns/mock-with-dummy-data.md">Mock with dummy data</a>
80+
</article>
81+
<article class="card">
82+
<h2>Test and CI</h2>
83+
<p>Need repeatable contract behavior in tests?</p>
84+
<a href="../patterns/automated-integration-tests.md">Automated integration tests</a>
85+
</article>
86+
<article class="card">
87+
<h2>AI workflows</h2>
88+
<p>Need deterministic APIs for coding agents?</p>
89+
<a href="../patterns/agentic-sandbox.md">Agentic sandbox pattern</a>
90+
</article>
91+
</section>
92+
93+
<section class="placeholder" aria-label="Demo placeholder">
94+
<strong>Demo placeholder:</strong> animated GIF showing spec → server → REPL flow.
95+
</section>
96+
</main>
97+
</body>
98+
</html>

‎docs/home-page-variants/variant-2.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Counterfact Home Variant 2</title>
7+
<style>
8+
:root {
9+
color-scheme: light dark;
10+
font-family: Inter, system-ui, sans-serif;
11+
}
12+
body {
13+
margin: 0;
14+
}
15+
main {
16+
max-width: 760px;
17+
margin: 0 auto;
18+
padding: 22px 16px 40px;
19+
}
20+
h1 {
21+
margin: 0;
22+
font-size: clamp(1.8rem, 5vw, 2.4rem);
23+
}
24+
.timeline {
25+
margin: 18px 0;
26+
padding: 0;
27+
list-style: none;
28+
display: grid;
29+
gap: 10px;
30+
}
31+
.timeline li {
32+
border: 1px solid color-mix(in oklab, currentColor 25%, transparent);
33+
border-radius: 10px;
34+
padding: 12px;
35+
}
36+
.links {
37+
display: grid;
38+
gap: 8px;
39+
}
40+
.placeholder {
41+
margin-top: 20px;
42+
border-radius: 10px;
43+
padding: 12px;
44+
background: color-mix(in oklab, #9d7dff 12%, transparent);
45+
}
46+
</style>
47+
</head>
48+
<body>
49+
<main>
50+
<h1>From API contract to believable simulation, fast.</h1>
51+
<p>
52+
Counterfact is an OpenAPI-native simulator. It generates typed route handlers,
53+
keeps shared state, and hot-reloads while your app keeps running.
54+
</p>
55+
56+
<ol class="timeline" aria-label="What you learn quickly">
57+
<li><strong>0–15s:</strong> You know Counterfact turns OpenAPI into a live mock API.</li>
58+
<li><strong>15–30s:</strong> You see practical paths for frontend, testing, or AI-assisted development.</li>
59+
<li><strong>30s+:</strong> You jump into docs that match your immediate goal.</li>
60+
</ol>
61+
62+
<div class="links" aria-label="Explore patterns">
63+
<a href="../patterns/executable-spec.md">Executable spec pattern</a>
64+
<a href="../patterns/repl-inspection.md">Inspect and modify state with REPL</a>
65+
<a href="../patterns/simulate-failures.md">Simulate failures safely</a>
66+
<a href="../usage.md">Usage guide</a>
67+
</div>
68+
69+
<p class="placeholder"><strong>Demo placeholder:</strong> terminal recording (coming soon).</p>
70+
</main>
71+
</body>
72+
</html>

‎docs/home-page-variants/variant-3.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Counterfact Home Variant 3</title>
7+
<style>
8+
:root {
9+
color-scheme: light dark;
10+
font-family: Inter, system-ui, sans-serif;
11+
}
12+
body {
13+
margin: 0;
14+
}
15+
main {
16+
max-width: 880px;
17+
margin: 0 auto;
18+
padding: 22px 16px 48px;
19+
}
20+
h1 {
21+
margin: 0 0 8px;
22+
font-size: clamp(2rem, 5vw, 2.6rem);
23+
}
24+
.grid {
25+
display: grid;
26+
gap: 12px;
27+
}
28+
.tile {
29+
border: 1px solid color-mix(in oklab, currentColor 25%, transparent);
30+
border-radius: 12px;
31+
padding: 14px;
32+
}
33+
.tile h2 {
34+
margin: 0 0 8px;
35+
font-size: 1.1rem;
36+
}
37+
pre {
38+
margin: 0;
39+
padding: 10px;
40+
border-radius: 8px;
41+
background: color-mix(in oklab, currentColor 6%, transparent);
42+
overflow-x: auto;
43+
}
44+
@media (min-width: 760px) {
45+
.grid {
46+
grid-template-columns: repeat(2, minmax(0, 1fr));
47+
}
48+
}
49+
</style>
50+
</head>
51+
<body>
52+
<main>
53+
<h1>Need realistic APIs before production APIs exist?</h1>
54+
<p>
55+
Counterfact helps you prototype, test, and automate against an API that behaves like software,
56+
not static fixtures.
57+
</p>
58+
<pre>$ npx counterfact openapi.yaml api</pre>
59+
60+
<section class="grid" aria-label="Popular starting points">
61+
<article class="tile">
62+
<h2>Explore an unfamiliar API</h2>
63+
<p>Generate routes and inspect behavior quickly.</p>
64+
<a href="../patterns/explore-new-api.md">Explore new API</a>
65+
</article>
66+
<article class="tile">
67+
<h2>Hybrid with real backend</h2>
68+
<p>Proxy selected endpoints while mocking the rest.</p>
69+
<a href="../patterns/hybrid-proxy.md">Hybrid proxy pattern</a>
70+
</article>
71+
<article class="tile">
72+
<h2>Script realistic scenarios</h2>
73+
<p>Reproduce edge cases repeatedly.</p>
74+
<a href="../patterns/scenario-scripts.md">Scenario scripts</a>
75+
</article>
76+
<article class="tile">
77+
<h2>Reference implementation</h2>
78+
<p>See how teams structure bigger simulations.</p>
79+
<a href="../patterns/reference-implementation.md">Reference implementation</a>
80+
</article>
81+
</section>
82+
83+
<p><strong>Demo placeholder:</strong> split-screen walkthrough (spec + editor + requests).</p>
84+
</main>
85+
</body>
86+
</html>

‎docs/home-page-variants/variant-4.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Counterfact Home Variant 4</title>
7+
<style>
8+
:root {
9+
color-scheme: light dark;
10+
font-family: Inter, system-ui, sans-serif;
11+
}
12+
body {
13+
margin: 0;
14+
}
15+
.wrap {
16+
max-width: 760px;
17+
margin: 0 auto;
18+
padding: 24px 16px 40px;
19+
}
20+
h1 {
21+
font-size: clamp(1.9rem, 5vw, 2.5rem);
22+
margin: 0 0 10px;
23+
}
24+
.stack {
25+
display: grid;
26+
gap: 10px;
27+
margin-top: 16px;
28+
}
29+
.row {
30+
padding: 12px;
31+
border-radius: 10px;
32+
border: 1px solid color-mix(in oklab, currentColor 24%, transparent);
33+
}
34+
.actions {
35+
display: flex;
36+
flex-wrap: wrap;
37+
gap: 10px;
38+
margin: 18px 0;
39+
}
40+
.button {
41+
padding: 9px 12px;
42+
border-radius: 10px;
43+
text-decoration: none;
44+
border: 1px solid currentColor;
45+
}
46+
.note {
47+
padding: 10px;
48+
border-radius: 8px;
49+
background: color-mix(in oklab, #53d59a 12%, transparent);
50+
}
51+
</style>
52+
</head>
53+
<body>
54+
<main class="wrap">
55+
<h1>Counterfact: programmable API simulation from your OpenAPI spec</h1>
56+
<p>
57+
Replace brittle mocks with a local API you can shape in real time.
58+
Generated TypeScript handlers + shared context + REPL controls.
59+
</p>
60+
61+
<div class="actions">
62+
<a class="button" href="../getting-started.md">Get started</a>
63+
<a class="button" href="../comparison.md">Compare tools</a>
64+
<a class="button" href="../patterns/index.md">Browse patterns</a>
65+
</div>
66+
67+
<section class="stack" aria-label="Who is this for">
68+
<article class="row"><strong>Frontend teams:</strong> unblock UI work with realistic API state.</article>
69+
<article class="row"><strong>Backend teams:</strong> ship contract-safe changes with faster feedback loops.</article>
70+
<article class="row"><strong>QA/Automation:</strong> run deterministic workflows and edge-case simulations.</article>
71+
</section>
72+
73+
<p class="note"><strong>Demo placeholder:</strong> interactive mini demo (coming soon).</p>
74+
</main>
75+
</body>
76+
</html>

0 commit comments

Comments
 (0)