Skip to content

Commit a3a1bd9

Browse files
NAOR YUVALNAOR YUVAL
NAOR YUVAL
authored and
NAOR YUVAL
committed
feat: polished landing page with nav, MPCP story, dark theme
Made-with: Cursor
1 parent 4e09b90 commit a3a1bd9

1 file changed

Lines changed: 246 additions & 32 deletions

File tree

‎index.html‎

Lines changed: 246 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,52 +4,266 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>MPCP — Machine Payment Control Protocol</title>
7+
<meta name="description" content="A protocol for verifiable machine-to-service payments. Bounded authorization, deterministic verification, settlement-agnostic.">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
711
<style>
8-
* { box-sizing: border-box; }
12+
:root {
13+
--bg: #0f1419;
14+
--surface: #1a2332;
15+
--border: #2d3a4d;
16+
--text: #e6edf3;
17+
--text-muted: #8b9cb7;
18+
--accent: #58a6ff;
19+
--accent-dim: #388bfd66;
20+
--spec: #7ee787;
21+
--reference: #79c0ff;
22+
}
23+
* { box-sizing: border-box; margin: 0; padding: 0; }
24+
html { scroll-behavior: smooth; }
925
body {
10-
font-family: system-ui, -apple-system, sans-serif;
11-
max-width: 640px;
26+
font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
27+
background: var(--bg);
28+
color: var(--text);
29+
line-height: 1.65;
30+
min-height: 100vh;
31+
-webkit-font-smoothing: antialiased;
32+
}
33+
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
34+
35+
/* Nav */
36+
nav {
37+
position: sticky;
38+
top: 0;
39+
z-index: 100;
40+
background: rgba(15, 20, 25, 0.9);
41+
backdrop-filter: blur(12px);
42+
border-bottom: 1px solid var(--border);
43+
}
44+
nav .inner {
45+
max-width: 960px;
46+
margin: 0 auto;
47+
padding: 0.75rem 1.5rem;
48+
display: flex;
49+
align-items: center;
50+
justify-content: space-between;
51+
gap: 1.5rem;
52+
}
53+
nav .logo {
54+
font-weight: 600;
55+
font-size: 1.1rem;
56+
color: var(--text);
57+
text-decoration: none;
58+
letter-spacing: -0.02em;
59+
}
60+
nav .logo:hover { color: var(--accent); }
61+
nav .links {
62+
display: flex;
63+
gap: 0.5rem;
64+
}
65+
nav a {
66+
padding: 0.5rem 1rem;
67+
color: var(--text-muted);
68+
text-decoration: none;
69+
font-size: 0.9rem;
70+
font-weight: 500;
71+
border-radius: 6px;
72+
transition: color 0.15s, background 0.15s;
73+
}
74+
nav a:hover {
75+
color: var(--text);
76+
background: var(--surface);
77+
}
78+
nav a.spec:hover { color: var(--spec); }
79+
nav a.ref:hover { color: var(--reference); }
80+
81+
/* Hero */
82+
header {
83+
padding: 4rem 1.5rem 3rem;
84+
text-align: center;
85+
max-width: 720px;
1286
margin: 0 auto;
13-
padding: 3rem 1.5rem;
87+
}
88+
header .badge {
89+
display: inline-block;
90+
font-size: 0.75rem;
91+
font-weight: 500;
92+
color: var(--accent);
93+
letter-spacing: 0.08em;
94+
text-transform: uppercase;
95+
margin-bottom: 1rem;
96+
}
97+
header h1 {
98+
font-size: clamp(2rem, 5vw, 2.75rem);
99+
font-weight: 700;
100+
letter-spacing: -0.03em;
101+
line-height: 1.2;
102+
margin-bottom: 1rem;
103+
}
104+
header p {
105+
font-size: 1.2rem;
106+
color: var(--text-muted);
14107
line-height: 1.6;
15-
color: #1e293b;
16108
}
17-
h1 { font-size: 1.75rem; font-weight: 600; margin-bottom: 0.5rem; }
18-
p { color: #475569; margin: 0 0 1.5rem; }
19-
.links {
109+
110+
/* Story sections */
111+
main {
112+
max-width: 720px;
113+
margin: 0 auto;
114+
padding: 0 1.5rem 4rem;
115+
}
116+
section {
117+
margin-bottom: 3rem;
118+
}
119+
section h2 {
120+
font-size: 1.15rem;
121+
font-weight: 600;
122+
color: var(--text);
123+
margin-bottom: 0.75rem;
124+
letter-spacing: -0.01em;
125+
}
126+
section p {
127+
color: var(--text-muted);
128+
font-size: 1rem;
129+
margin-bottom: 0.75rem;
130+
}
131+
section p:last-child { margin-bottom: 0; }
132+
133+
.chain {
134+
background: var(--surface);
135+
border: 1px solid var(--border);
136+
border-radius: 8px;
137+
padding: 1rem 1.25rem;
138+
font-size: 0.875rem;
139+
overflow-x: auto;
140+
margin: 1rem 0;
141+
}
142+
.chain span { color: var(--text-muted); }
143+
.chain .artifact { color: var(--accent); }
144+
.chain .arrow { color: var(--text-muted); margin: 0 0.35rem; }
145+
146+
.bullets {
147+
list-style: none;
148+
}
149+
.bullets li {
150+
position: relative;
151+
padding-left: 1.25rem;
152+
margin-bottom: 0.5rem;
153+
color: var(--text-muted);
154+
}
155+
.bullets li::before {
156+
content: "→";
157+
position: absolute;
158+
left: 0;
159+
color: var(--accent-dim);
160+
font-size: 0.85em;
161+
}
162+
163+
.cta {
20164
display: flex;
21-
gap: 1rem;
22165
flex-wrap: wrap;
166+
gap: 1rem;
23167
margin-top: 2rem;
168+
padding-top: 2rem;
169+
border-top: 1px solid var(--border);
24170
}
25-
.links a {
26-
display: block;
27-
padding: 1rem 1.5rem;
28-
background: #f1f5f9;
29-
color: #0f172a;
171+
.cta a {
172+
display: flex;
173+
flex-direction: column;
174+
align-items: flex-start;
175+
padding: 1.25rem 1.5rem;
176+
background: var(--surface);
177+
border: 1px solid var(--border);
178+
border-radius: 10px;
30179
text-decoration: none;
31-
border-radius: 8px;
180+
color: var(--text);
32181
font-weight: 500;
33-
transition: background 0.2s;
182+
transition: border-color 0.2s, background 0.2s;
183+
min-width: 200px;
184+
}
185+
.cta a:hover {
186+
border-color: var(--accent);
187+
background: rgba(56, 139, 253, 0.08);
34188
}
35-
.links a:hover { background: #e2e8f0; }
36-
.links a strong { display: block; margin-bottom: 0.25rem; }
37-
.links a span { font-size: 0.9rem; color: #64748b; }
189+
.cta a.spec:hover { border-color: var(--spec); background: rgba(126, 231, 135, 0.06); }
190+
.cta a.ref:hover { border-color: var(--reference); background: rgba(121, 192, 255, 0.06); }
191+
.cta a strong { font-size: 1rem; margin-bottom: 0.25rem; }
192+
.cta a span { font-size: 0.875rem; color: var(--text-muted); font-weight: 400; }
193+
194+
footer {
195+
text-align: center;
196+
padding: 2rem 1.5rem;
197+
font-size: 0.85rem;
198+
color: var(--text-muted);
199+
border-top: 1px solid var(--border);
200+
}
201+
footer a { color: var(--accent); text-decoration: none; }
202+
footer a:hover { text-decoration: underline; }
38203
</style>
39204
</head>
40205
<body>
41-
<h1>Machine Payment Control Protocol</h1>
42-
<p>A protocol for verifiable machine-to-service payments.</p>
43-
44-
<div class="links">
45-
<a href="/spec/">
46-
<strong>Spec</strong>
47-
<span>Protocol specification, architecture, guides</span>
48-
</a>
49-
<a href="/reference/">
50-
<strong>Reference</strong>
51-
<span>Implementation docs, SDK, examples</span>
52-
</a>
53-
</div>
206+
<nav>
207+
<div class="inner">
208+
<a href="/" class="logo">MPCP</a>
209+
<div class="links">
210+
<a href="/spec/" class="spec">Spec</a>
211+
<a href="/reference/" class="ref">Reference</a>
212+
</div>
213+
</div>
214+
</nav>
215+
216+
<header>
217+
<span class="badge">Protocol v1.0</span>
218+
<h1>Machine Payment Control Protocol</h1>
219+
<p>Verifiable machine-to-service payments. Bounded authorization, deterministic verification, settlement-agnostic.</p>
220+
</header>
221+
222+
<main>
223+
<section>
224+
<h2>The problem</h2>
225+
<p>Autonomous vehicles, AI agents, and machines increasingly pay for real-world services: parking, charging, tolls. Existing payment systems assume a human present, per-transaction approval, or always-on connectivity—none of which work for machines operating at scale.</p>
226+
</section>
227+
228+
<section>
229+
<h2>How MPCP works</h2>
230+
<p>A payment is accepted only if the recipient can verify a chain of signed artifacts. Each step narrows what the machine is allowed to do.</p>
231+
<div class="chain">
232+
<span class="artifact">Fleet Policy</span><span class="arrow">→</span><span class="artifact">PolicyGrant</span><span class="arrow">→</span><span class="artifact">SBA</span><span class="arrow">→</span><span class="artifact">SPA</span><span class="arrow">→</span><span class="artifact">SettlementIntent</span><span class="arrow">→</span><span>Settlement</span>
233+
</div>
234+
<p>Machines get pre-authorized spending envelopes (budgets). They can execute payments autonomously—as long as they stay within policy and budget bounds.</p>
235+
</section>
236+
237+
<section>
238+
<h2>Key characteristics</h2>
239+
<ul class="bullets">
240+
<li><strong>Bounded authorization</strong> — Pre-authorized budgets, not per-transaction approval</li>
241+
<li><strong>Deterministic verification</strong> — Every settlement verifiable against the authorization chain</li>
242+
<li><strong>Settlement-agnostic</strong> — Works with XRPL, EVM, Stripe, hosted providers</li>
243+
<li><strong>Offline-capable</strong> — Payments can complete when the network is unavailable</li>
244+
<li><strong>Policy-first</strong> — All spending derives from explicit policy rules</li>
245+
</ul>
246+
</section>
247+
248+
<section>
249+
<h2>Explore</h2>
250+
<div class="cta">
251+
<a href="/spec/" class="spec">
252+
<strong>Specification</strong>
253+
<span>Protocol, architecture, artifacts, guides</span>
254+
</a>
255+
<a href="/reference/" class="ref">
256+
<strong>Reference implementation</strong>
257+
<span>SDK, verifier, CLI, examples</span>
258+
</a>
259+
</div>
260+
</section>
261+
</main>
262+
263+
<footer>
264+
<a href="https://github.com/mpcp-protocol">GitHub</a> ·
265+
<a href="https://github.com/mpcp-protocol/mpcp-spec">mpcp-spec</a> ·
266+
<a href="https://github.com/mpcp-protocol/mpcp-reference">mpcp-reference</a>
267+
</footer>
54268
</body>
55269
</html>

0 commit comments

Comments
 (0)