-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
258 lines (237 loc) · 18.7 KB
/
Copy pathindex.html
File metadata and controls
258 lines (237 loc) · 18.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Last PM | The Final Interface for High-Craft Product Strategy</title>
<meta name="description" content="Stop letting generic AI write garbage PRDs. LastPM is a deterministic, anti-hallucination OS in your IDE—77 specialized agents, one Canvas Vault, Venture through Operational altitude. Your Synthetic Product Brain Trust.">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "LastPM",
"alternateName": "The Last PM OS: Synthetic Product Brain Trust",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Cursor IDE, Claude",
"description": "A deterministic AI Operating System for Enterprise Product Managers. Run 77 specialized AI agents natively inside Cursor to draft PRDs, synthesize user interviews, and stress-test strategy without AI hallucinations.",
"keywords": "AI Product Management, AI PRD generator, Cursor IDE for PMs, Product Strategy AI, AI Chief of Staff, Product Sense, Customer Feedback Synthesis AI, Claude Product Management",
"softwareVersion": "4.0.0",
"featureList": [
"77 Specialized AI Agents for Product Strategy",
"AI-Assisted PRD Drafting with Mandatory Human Checkpoints",
"Customer Interview Synthesis & Pain Point Extraction",
"Runs Natively in Cursor IDE & Claude Projects",
"Live Tool Integration via Model Context Protocol (MCP)",
"Canvas Vault: Markdown-Based Context to Stop Hallucinations"
]
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap');
html { -webkit-font-smoothing: antialiased; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background-color: #09090b; color: #fafafa; }
.nav-surface { background: rgba(9, 9, 11, 0.72); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.hero-wash {
background:
radial-gradient(ellipse 90% 60% at 50% -15%, rgba(251, 146, 60, 0.09), transparent 55%),
radial-gradient(ellipse 70% 45% at 80% 20%, rgba(167, 139, 250, 0.06), transparent 50%),
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(120, 120, 120, 0.06), transparent 55%);
}
.field-surface { background: rgba(24, 24, 27, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); }
.hero-gradient-text {
color: #f4f4f5;
background: linear-gradient(135deg, #fafafa 0%, #e4e4e7 45%, #fdba74 95%);
-webkit-background-clip: text;
background-clip: text;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
.hero-gradient-text { color: transparent; }
}
.tile { transition: border-color 0.15s ease, background-color 0.15s ease; }
.tile:hover { border-color: rgba(63, 63, 70, 0.9); background: rgba(24, 24, 27, 0.75); }
section[id] { scroll-margin-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
.tile, #gallery-main { transition: none; }
}
#gallery-main.gallery-fade { opacity: 0.88; }
#gallery-stage { touch-action: pan-y; }
</style>
</head>
<body class="selection:bg-zinc-700/40">
<nav class="fixed top-0 w-full z-50 nav-surface px-5 sm:px-10 py-4 flex justify-between items-center gap-6">
<a href="#" class="text-[15px] font-semibold tracking-tight text-zinc-100 hover:text-white transition-colors">LastPM</a>
<div class="flex items-center gap-6 sm:gap-8 text-[13px] font-medium text-zinc-500">
<a href="#sessions" class="hidden sm:inline hover:text-zinc-200 transition-colors">Sessions</a>
<a href="#how" class="hidden sm:inline hover:text-zinc-200 transition-colors">How it works</a>
<a href="https://github.com/JDAmiri/LastPM/blob/main/README.md" class="hover:text-zinc-200 transition-colors">Docs</a>
<a href="https://github.com/JDAmiri/LastPM" class="inline-flex items-center gap-1.5 rounded-full bg-zinc-100 px-3.5 py-1.5 text-zinc-900 text-[13px] font-medium hover:bg-white transition-colors shrink-0">
GitHub <i data-lucide="external-link" class="w-3.5 h-3.5 opacity-60"></i>
</a>
</div>
</nav>
<header class="relative pt-32 sm:pt-40 pb-24 sm:pb-32 px-5 sm:px-6 hero-wash text-center">
<p class="text-[11px] font-medium uppercase tracking-[0.22em] text-zinc-500 mb-6 max-w-xl mx-auto">PM OS for Cursor & Claude Code</p>
<h1 class="text-[2.6rem] sm:text-5xl md:text-[3.35rem] font-semibold tracking-tight mb-6 leading-[1.06] max-w-3xl mx-auto hero-gradient-text">
Product judgment, living in your repo.
</h1>
<p class="text-base sm:text-[1.05rem] text-zinc-400 mb-12 max-w-md mx-auto font-normal leading-relaxed">
<span class="text-zinc-300">77 agents</span>, one vault, zero theater—strategy that knows your files, not just your last prompt.
</p>
<div class="max-w-md mx-auto w-full">
<form action="https://formspree.io/f/mdapedoo" method="POST" class="field-surface rounded-2xl p-1.5 flex flex-col sm:flex-row gap-1.5 shadow-[0_0_0_1px_rgba(255,255,255,0.04)]">
<input type="email" name="email" placeholder="Your email" required class="flex-1 bg-transparent px-4 py-3.5 text-zinc-100 placeholder-zinc-600 focus:outline-none text-[15px] rounded-xl">
<button type="submit" class="rounded-xl bg-gradient-to-b from-orange-100 to-orange-50 text-zinc-900 font-medium py-3.5 px-6 text-[15px] hover:from-white hover:to-orange-50 transition-all shadow-sm whitespace-nowrap">Get early access</button>
</form>
<p class="mt-5 text-[13px] text-zinc-600 leading-relaxed">
Small onboarding cohort · or jump in on <a href="https://github.com/JDAmiri/LastPM" class="text-zinc-400 underline-offset-2 hover:underline">GitHub</a> with <code class="text-zinc-500">boot_os</code>
</p>
</div>
</header>
<section id="sessions" class="max-w-3xl mx-auto px-5 sm:px-6 -mt-4 sm:-mt-8 pt-2 pb-24 md:pb-32">
<h2 class="sr-only">Session screenshots</h2>
<div class="outline-none rounded-[1.35rem] focus-visible:ring-2 focus-visible:ring-orange-400/30 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950" id="session-gallery" tabindex="0" aria-label="Session screenshots. Swipe or use arrow keys when focused.">
<div class="rounded-[1.35rem] border border-zinc-800/80 bg-zinc-900/25 p-3 sm:p-5 shadow-[0_32px_64px_-24px_rgba(0,0,0,0.55)]">
<div id="gallery-stage" class="relative rounded-2xl border border-zinc-800/70 bg-zinc-950 overflow-hidden">
<button type="button" id="gallery-prev" class="absolute left-2 sm:left-4 top-1/2 z-10 -translate-y-1/2 flex h-9 w-9 items-center justify-center rounded-full border border-zinc-700/70 bg-zinc-900/95 text-zinc-200 hover:bg-zinc-800/95 focus:outline-none focus-visible:ring-2 focus-visible:ring-orange-400/35" aria-label="Previous slide">
<i data-lucide="chevron-left" class="w-4 h-4"></i>
</button>
<button type="button" id="gallery-next" class="absolute right-2 sm:right-4 top-1/2 z-10 -translate-y-1/2 flex h-9 w-9 items-center justify-center rounded-full border border-zinc-700/70 bg-zinc-900/95 text-zinc-200 hover:bg-zinc-800/95 focus:outline-none focus-visible:ring-2 focus-visible:ring-orange-400/35" aria-label="Next slide">
<i data-lucide="chevron-right" class="w-4 h-4"></i>
</button>
<div class="flex justify-center items-start px-3 sm:px-10 py-8 sm:py-10 min-h-[200px] sm:min-h-[300px] bg-zinc-950">
<img id="gallery-main" src="LastPM_market_analyses.png" alt="LastPM venture session: market analysis with assumptions and benchmark cross-checks" class="max-h-[min(62vh,700px)] w-full object-contain object-top transition-opacity duration-150 rounded-lg" loading="eager" decoding="async">
</div>
</div>
<div class="mt-8 px-1 sm:px-2">
<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 mb-3 text-[13px]">
<div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-zinc-500">
<span id="gallery-context">Claude Code · Venture</span>
<span class="text-zinc-700" aria-hidden="true">·</span>
<span id="gallery-badge" class="text-zinc-400 font-medium">Venture</span>
</div>
<span id="gallery-counter" class="tabular-nums text-zinc-600">1 / 7</span>
</div>
<h3 id="gallery-title" class="text-[17px] font-medium text-zinc-100 tracking-tight mb-2">Market sizing with explicit assumptions</h3>
<p id="gallery-desc" class="text-zinc-500 text-[15px] leading-relaxed">Benchmarks and confidence called out; the handoff is a testable hypothesis—not a slide of false precision.</p>
</div>
</div>
</div>
</section>
<section id="how" class="max-w-5xl mx-auto px-5 sm:px-6 pb-24 md:pb-32 border-t border-zinc-800/80 pt-16 md:pt-20">
<h2 class="text-center text-2xl sm:text-[1.65rem] font-semibold text-zinc-100 tracking-tight mb-3">How it works</h2>
<p class="text-center text-zinc-500 text-[15px] max-w-md mx-auto mb-12">Four ideas. Everything else lives in the repo and docs.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div class="tile rounded-2xl border border-zinc-800/90 bg-zinc-900/30 p-6 md:p-7">
<div class="flex items-center gap-3 mb-3">
<i data-lucide="lock" class="w-5 h-5 text-orange-200/55 shrink-0"></i>
<h3 class="text-[15px] font-medium text-zinc-100">Canvas Vault</h3>
</div>
<p class="text-zinc-500 text-[15px] leading-relaxed">Context lives in markdown in your repo—not a chat thread. The orchestrator reads before it writes.</p>
</div>
<div class="tile rounded-2xl border border-zinc-800/90 bg-zinc-900/30 p-6 md:p-7">
<div class="flex items-center gap-3 mb-3">
<i data-lucide="brain-circuit" class="w-5 h-5 text-violet-300/50 shrink-0"></i>
<h3 class="text-[15px] font-medium text-zinc-100">77 agents, one router</h3>
</div>
<p class="text-zinc-500 text-[15px] leading-relaxed">State the problem; intent routing picks the specialist. Cursor, Claude CLI, MCP when the web matters.</p>
</div>
<div class="tile rounded-2xl border border-zinc-800/90 bg-zinc-900/30 p-6 md:p-7">
<div class="flex items-center gap-3 mb-3">
<i data-lucide="radar" class="w-5 h-5 text-orange-200/55 shrink-0"></i>
<h3 class="text-[15px] font-medium text-zinc-100">Research protocol</h3>
</div>
<p class="text-zinc-500 text-[15px] leading-relaxed">Facts carry <code class="text-zinc-400 text-xs">[VERIFIED]</code> / <code class="text-zinc-400 text-xs">[ESTIMATED]</code>—so you know what you're standing on.</p>
</div>
<div class="tile rounded-2xl border border-zinc-800/90 bg-zinc-900/30 p-6 md:p-7">
<div class="flex items-center gap-3 mb-3">
<i data-lucide="shield-ban" class="w-5 h-5 text-violet-300/50 shrink-0"></i>
<h3 class="text-[15px] font-medium text-zinc-100">Strategic brakes</h3>
</div>
<p class="text-zinc-500 text-[15px] leading-relaxed">Weak bets and shallow moats get challenged before engineering commits.</p>
</div>
</div>
<p class="text-center text-zinc-500 text-[15px] max-w-2xl mx-auto mt-14 leading-relaxed">
From board-ready strategy to PRDs, opportunity trees, and launch comms—outputs land in your vault across <span class="text-zinc-300">Venture</span>, <span class="text-zinc-300">Initiative</span>, and <span class="text-zinc-300">Operational</span> work.
</p>
<p class="text-center mt-6">
<a href="https://github.com/JDAmiri/LastPM/blob/main/claude/rules/agent_registry.md" class="inline-flex items-center gap-2 text-[15px] font-medium text-zinc-400 hover:text-zinc-200 transition-colors">
Example outputs & full agent catalog <i data-lucide="arrow-right" class="w-4 h-4 opacity-70"></i>
</a>
</p>
</section>
<footer class="py-16 md:py-24 text-center px-5 sm:px-6 border-t border-zinc-800/80">
<p class="text-zinc-100 text-base md:text-lg font-medium tracking-tight mb-2">Clone the repo. Boot the OS. Let's build.</p>
<p class="text-zinc-600 tracking-[0.2em] uppercase text-[10px] mb-6">The Last PM · OS v4 · high-craft PM in your IDE</p>
<p class="text-zinc-500 text-[15px] max-w-md mx-auto mb-8 leading-relaxed">
Open source & self-hosted: wire <code class="text-zinc-400">LastPM.md</code> or <code class="text-zinc-400">CLAUDE.md</code>. Cohort access is optional onboarding.
</p>
<div class="flex flex-wrap justify-center gap-6 md:gap-10 font-medium text-zinc-500 text-[15px]">
<a href="https://github.com/JDAmiri/LastPM" class="hover:text-zinc-200 transition-colors">GitHub</a>
<a href="https://github.com/JDAmiri/LastPM/blob/main/README.md" class="hover:text-zinc-200 transition-colors">README</a>
<a href="https://github.com/JDAmiri/LastPM/blob/main/claude/rules/agent_registry.md" class="hover:text-zinc-200 transition-colors">Agents</a>
</div>
</footer>
<script>
(function () {
var slides = [
{ src: 'LastPM_market_analyses.png', context: 'Claude Code · Venture', badge: 'Venture', title: 'Market sizing with explicit assumptions', desc: 'Benchmarks and confidence called out; the handoff is a testable hypothesis—not a slide of false precision.', alt: 'LastPM venture session: market analysis with assumptions and benchmark cross-checks' },
{ src: 'LastPM_product_vault_update.png', context: 'Claude Code · Vault', badge: 'Vault', title: 'Diffs you can review', desc: 'Canvas markdown updates stay in git-shaped paths—you approve before they become memory for the next agent.', alt: 'LastPM applying a diff to vault markdown: product canvas update' },
{ src: 'LastPM_scoring_matrix_monetization_low.png', context: 'Claude Code · Initiative', badge: 'Initiative', title: 'Pushback while scope is cheap', desc: 'Scoring surfaces weak monetization and motion risk before engineering inherits a polished wrong bet.', alt: 'LastPM initiative session: scoring matrix and strategic pushback on monetization' },
{ src: 'LastPM_social_media_post.png', context: 'Cursor · Composer', badge: 'Operational', title: 'Ship drafts from vault context', desc: 'GTM copy grounded in company and product files—not a generic viral template.', alt: 'LastPM in Cursor: drafting social copy from repo context' },
{ src: 'LastPM_cursor_IDE.png', context: 'Cursor · IDE', badge: 'Surface', title: 'Where many PMs live', desc: 'Composer and file tree share one workspace with your vault—no copy-paste between tools.', alt: 'LastPM workspace in Cursor IDE' },
{ src: 'LastPM_claude_CLI.png', context: 'Claude Code · CLI', badge: 'Surface', title: 'Same OS from the terminal', desc: 'For heads-down runs: orchestration and file access without leaving the shell.', alt: 'LastPM session in Claude Code terminal' },
{ src: 'LastPM_initial_product_canvas.png', context: 'Repository · Layout', badge: 'Vault', title: 'Markdown as system of record', desc: 'Global context and product workspace folders—structured for agents and humans alike.', alt: 'LastPM vault folder structure and product canvas' }
];
var main = document.getElementById('gallery-main');
var ctxEl = document.getElementById('gallery-context');
var badgeEl = document.getElementById('gallery-badge');
var counterEl = document.getElementById('gallery-counter');
var titleEl = document.getElementById('gallery-title');
var descEl = document.getElementById('gallery-desc');
var stage = document.getElementById('gallery-stage');
var prevBtn = document.getElementById('gallery-prev');
var nextBtn = document.getElementById('gallery-next');
var idx = 0;
var reduceMotion = typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
var touchStartX = null;
function go(i) {
idx = (i + slides.length) % slides.length;
var s = slides[idx];
main.classList.add('gallery-fade');
setTimeout(function () {
main.src = s.src;
main.alt = s.alt;
ctxEl.textContent = s.context;
badgeEl.textContent = s.badge;
badgeEl.className = 'text-zinc-400 font-medium';
titleEl.textContent = s.title;
descEl.textContent = s.desc;
if (counterEl) counterEl.textContent = (idx + 1) + ' / ' + slides.length;
main.classList.remove('gallery-fade');
}, reduceMotion ? 0 : 90);
}
if (prevBtn) prevBtn.addEventListener('click', function () { go(idx - 1); });
if (nextBtn) nextBtn.addEventListener('click', function () { go(idx + 1); });
document.getElementById('session-gallery').addEventListener('keydown', function (e) {
if (e.key === 'ArrowLeft') { e.preventDefault(); go(idx - 1); }
if (e.key === 'ArrowRight') { e.preventDefault(); go(idx + 1); }
});
if (stage) {
stage.addEventListener('touchstart', function (e) {
touchStartX = e.changedTouches[0].screenX;
}, { passive: true });
stage.addEventListener('touchend', function (e) {
if (touchStartX == null) return;
var dx = e.changedTouches[0].screenX - touchStartX;
touchStartX = null;
if (dx < -48) go(idx + 1);
else if (dx > 48) go(idx - 1);
}, { passive: true });
}
})();
lucide.createIcons();
</script>
</body>
</html>