Skip to content

Commit a8aeaab

Browse files
ishashankmiishashankmi
committed
updated overlay icon
1 parent 8b99804 commit a8aeaab

3 files changed

Lines changed: 750 additions & 1 deletion

File tree

‎apps/desktop/src/renderer/src/components/landing-page.tsx‎

Lines changed: 367 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,367 @@
1+
import {
2+
IconArrowRight,
3+
IconBolt,
4+
IconBrandGithub,
5+
IconChecklist,
6+
IconCommand,
7+
IconLayersIntersect,
8+
IconLayoutKanban,
9+
IconProgressCheck,
10+
IconRouteSquare2,
11+
IconSparkles
12+
} from '@tabler/icons-react'
13+
14+
import logo from '../../../../../../assets/logo.svg'
15+
16+
const proofPoints = [
17+
{
18+
label: 'Repo-native state',
19+
value: '.superplan/changes/',
20+
description: 'Tasks, progress, and handoffs stay with the code instead of vanishing into chat history.'
21+
},
22+
{
23+
label: 'Execution loop',
24+
value: 'run -> inspect -> complete',
25+
description: 'Superplan tells an agent what to do next, how to prove it, and how to resume without drift.'
26+
},
27+
{
28+
label: 'Built for agents',
29+
value: 'Codex, Claude, Cursor',
30+
description: 'The workflow travels across tools, so a change can keep moving even when the agent changes.'
31+
}
32+
] as const
33+
34+
const featureCards = [
35+
{
36+
icon: IconRouteSquare2,
37+
eyebrow: 'Structured by default',
38+
title: 'Turn vague requests into tracked execution',
39+
body:
40+
'Create a change, scaffold tasks, and give every unit of work a clear contract before code starts moving.'
41+
},
42+
{
43+
icon: IconProgressCheck,
44+
eyebrow: 'Visible progress',
45+
title: 'Know what is active, blocked, or ready next',
46+
body:
47+
'Runtime state is explicit, reviewable, and resumable. No more guessing where work paused or what still needs proof.'
48+
},
49+
{
50+
icon: IconLayersIntersect,
51+
eyebrow: 'Markdown-first',
52+
title: 'Keep the source of truth inside the repository',
53+
body:
54+
'Plans, specs, tasks, and durable context live next to the code, so handoffs survive tool switches and time.'
55+
}
56+
] as const
57+
58+
const workflowSteps = [
59+
{
60+
title: 'Define a change',
61+
text: 'Capture the user-visible outcome you want, not a pile of disconnected TODOs.'
62+
},
63+
{
64+
title: 'Scaffold tasks',
65+
text: 'Break the work into bounded contracts with acceptance criteria and verification paths.'
66+
},
67+
{
68+
title: 'Run the frontier',
69+
text: 'Let the CLI surface the next safe task so the agent stays aligned instead of improvising.'
70+
},
71+
{
72+
title: 'Resume without drift',
73+
text: 'Progress, blockers, and review state are preserved, so a fresh session can continue immediately.'
74+
}
75+
] as const
76+
77+
const agentChips = ['Codex', 'Claude Code', 'Cursor', 'OpenCode', 'Gemini CLI'] as const
78+
79+
const macInstallCommand =
80+
'curl -fsSL https://raw.githubusercontent.com/superplan-md/superplan-plugin/main/scripts/install.sh | sh'
81+
82+
const windowsInstallCommand = String.raw`curl.exe -fsSL -o install-superplan.cmd https://raw.githubusercontent.com/superplan-md/superplan-plugin/main/scripts/install.cmd; if ($LASTEXITCODE -eq 0) { .\install-superplan.cmd }`
83+
84+
const firstCommands = `superplan init
85+
superplan change new ship-launch --single-task "Build the launch page"
86+
superplan run --json`
87+
88+
function LandingPage(): React.JSX.Element {
89+
return (
90+
<main className="landing-page min-h-screen overflow-y-auto text-stone-50">
91+
<div className="landing-page__glow landing-page__glow--amber" />
92+
<div className="landing-page__glow landing-page__glow--teal" />
93+
94+
<section className="relative isolate overflow-hidden border-b border-white/10">
95+
<div className="landing-page__grid absolute inset-0 opacity-70" />
96+
<div className="mx-auto flex min-h-screen w-full max-w-7xl flex-col px-5 pb-12 pt-6 sm:px-8 lg:px-10">
97+
<header className="landing-reveal flex items-center justify-between gap-4">
98+
<div className="flex items-center gap-3">
99+
<div className="landing-brand-mark">
100+
<img alt="Superplan" className="h-9 w-9 rounded-2xl object-cover" src={logo} />
101+
</div>
102+
<div>
103+
<p className="landing-kicker">superplan.md</p>
104+
<p className="text-sm text-stone-300/75">Execution infrastructure for AI agents</p>
105+
</div>
106+
</div>
107+
108+
<a
109+
className="landing-nav-link"
110+
href="https://github.com/superplan-md/superplan-plugin"
111+
rel="noreferrer"
112+
target="_blank"
113+
>
114+
<IconBrandGithub className="size-4" />
115+
GitHub
116+
</a>
117+
</header>
118+
119+
<div className="grid flex-1 items-center gap-14 py-12 lg:grid-cols-[minmax(0,1.15fr)_minmax(420px,0.85fr)] lg:py-16">
120+
<div className="space-y-8">
121+
<div className="landing-reveal landing-reveal--delayed flex flex-wrap items-center gap-3">
122+
<span className="landing-pill">
123+
<IconSparkles className="size-4" />
124+
Repo-native planning that actually executes
125+
</span>
126+
<span className="landing-pill landing-pill--muted">
127+
<IconCommand className="size-4" />
128+
CLI-first
129+
</span>
130+
</div>
131+
132+
<div className="space-y-5">
133+
<p className="landing-reveal landing-reveal--delayed-2 max-w-2xl font-landing-display text-5xl leading-none tracking-[-0.05em] text-white sm:text-6xl lg:text-7xl">
134+
Stop losing work between chats. Start shipping with a real execution loop.
135+
</p>
136+
<p className="landing-reveal landing-reveal--delayed-3 max-w-2xl text-lg leading-8 text-stone-300/86 sm:text-xl">
137+
Superplan turns a request into tracked change work, task contracts, and a runtime that keeps agents moving
138+
through the repo without drift.
139+
</p>
140+
</div>
141+
142+
<div className="landing-reveal landing-reveal--delayed-4 flex flex-col gap-3 sm:flex-row">
143+
<a className="landing-cta landing-cta--primary" href="#install">
144+
Install Superplan
145+
<IconArrowRight className="size-4" />
146+
</a>
147+
<a className="landing-cta landing-cta--secondary" href="#workflow">
148+
See the workflow
149+
</a>
150+
</div>
151+
152+
<div className="landing-reveal landing-reveal--delayed-4 flex flex-wrap gap-3">
153+
{agentChips.map((agent) => (
154+
<span key={agent} className="landing-agent-chip">
155+
{agent}
156+
</span>
157+
))}
158+
</div>
159+
</div>
160+
161+
<div className="landing-reveal landing-reveal--delayed-2">
162+
<div className="landing-console">
163+
<div className="landing-console__header">
164+
<span className="landing-console__traffic" />
165+
<span className="landing-console__traffic" />
166+
<span className="landing-console__traffic" />
167+
<p className="landing-console__title">Superplan runtime</p>
168+
</div>
169+
170+
<div className="landing-console__body">
171+
<div className="landing-console__command">
172+
<span className="text-amber-300">$</span>
173+
<span>superplan init</span>
174+
</div>
175+
176+
<div className="landing-console__card">
177+
<div className="flex items-center justify-between gap-3">
178+
<div>
179+
<p className="text-xs uppercase tracking-[0.28em] text-stone-400">Active change</p>
180+
<p className="mt-2 text-xl font-semibold text-white">ship-superplan-launch</p>
181+
</div>
182+
<span className="landing-status-pill">
183+
<IconBolt className="size-4" />
184+
In progress
185+
</span>
186+
</div>
187+
188+
<div className="mt-6 space-y-3">
189+
<div className="landing-task-row">
190+
<div>
191+
<p className="text-sm text-stone-200">T-001 Shape launch narrative</p>
192+
<p className="text-xs text-stone-400">Spec and value prop aligned</p>
193+
</div>
194+
<span className="landing-task-state landing-task-state--done">Done</span>
195+
</div>
196+
<div className="landing-task-row">
197+
<div>
198+
<p className="text-sm text-stone-100">T-002 Build landing page</p>
199+
<p className="text-xs text-stone-400">Hero, proof, install, CTA</p>
200+
</div>
201+
<span className="landing-task-state landing-task-state--active">Running</span>
202+
</div>
203+
<div className="landing-task-row">
204+
<div>
205+
<p className="text-sm text-stone-200">T-003 Verify desktop build</p>
206+
<p className="text-xs text-stone-400">Proof before completion</p>
207+
</div>
208+
<span className="landing-task-state">Ready next</span>
209+
</div>
210+
</div>
211+
</div>
212+
213+
<div className="grid gap-3 sm:grid-cols-2">
214+
<div className="landing-console__metric">
215+
<IconChecklist className="size-4 text-teal-300" />
216+
<div>
217+
<p className="text-xs uppercase tracking-[0.24em] text-stone-400">State saved</p>
218+
<p className="mt-2 text-sm text-stone-100">Plans, tasks, and runtime stay in the repo.</p>
219+
</div>
220+
</div>
221+
<div className="landing-console__metric">
222+
<IconLayoutKanban className="size-4 text-amber-300" />
223+
<div>
224+
<p className="text-xs uppercase tracking-[0.24em] text-stone-400">Next action</p>
225+
<p className="mt-2 text-sm text-stone-100">The CLI surfaces the frontier instead of asking the agent to guess.</p>
226+
</div>
227+
</div>
228+
</div>
229+
</div>
230+
</div>
231+
</div>
232+
</div>
233+
234+
<div className="landing-reveal landing-reveal--delayed-4 grid gap-4 border-t border-white/10 pt-6 md:grid-cols-3">
235+
{proofPoints.map((point) => (
236+
<article key={point.label} className="landing-proof-card">
237+
<p className="text-xs uppercase tracking-[0.28em] text-stone-400">{point.label}</p>
238+
<p className="mt-3 font-landing-display text-2xl text-white">{point.value}</p>
239+
<p className="mt-3 text-sm leading-6 text-stone-300/78">{point.description}</p>
240+
</article>
241+
))}
242+
</div>
243+
</div>
244+
</section>
245+
246+
<section className="mx-auto w-full max-w-7xl px-5 py-20 sm:px-8 lg:px-10" id="workflow">
247+
<div className="grid gap-12 lg:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)]">
248+
<div className="space-y-5">
249+
<p className="landing-section-label">Why it feels different</p>
250+
<h2 className="font-landing-display text-4xl leading-none tracking-[-0.05em] text-white sm:text-5xl">
251+
Planning is only useful when it survives execution.
252+
</h2>
253+
<p className="max-w-xl text-lg leading-8 text-stone-300/82">
254+
Superplan keeps graph truth, task contracts, and runtime state separate so the agent can move fast without
255+
making the work invisible.
256+
</p>
257+
</div>
258+
259+
<div className="grid gap-4">
260+
{featureCards.map(({ icon: Icon, eyebrow, title, body }) => (
261+
<article key={title} className="landing-feature-card">
262+
<div className="landing-feature-icon">
263+
<Icon className="size-5" />
264+
</div>
265+
<div>
266+
<p className="text-xs uppercase tracking-[0.26em] text-amber-300/90">{eyebrow}</p>
267+
<h3 className="mt-3 text-2xl font-semibold text-white">{title}</h3>
268+
<p className="mt-3 text-sm leading-7 text-stone-300/80">{body}</p>
269+
</div>
270+
</article>
271+
))}
272+
</div>
273+
</div>
274+
</section>
275+
276+
<section className="border-y border-white/10 bg-white/[0.03]">
277+
<div className="mx-auto w-full max-w-7xl px-5 py-20 sm:px-8 lg:px-10">
278+
<div className="mb-12 flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
279+
<div className="space-y-4">
280+
<p className="landing-section-label">The operating loop</p>
281+
<h2 className="font-landing-display text-4xl leading-none tracking-[-0.05em] text-white sm:text-5xl">
282+
A calmer way to run complex repo work.
283+
</h2>
284+
</div>
285+
<p className="max-w-2xl text-base leading-7 text-stone-300/80">
286+
The point is not more process. The point is removing ambiguity at the exact moments when agents usually wander.
287+
</p>
288+
</div>
289+
290+
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
291+
{workflowSteps.map((step, index) => (
292+
<article key={step.title} className="landing-step-card">
293+
<p className="text-sm text-stone-500">0{index + 1}</p>
294+
<h3 className="mt-6 text-2xl font-semibold text-white">{step.title}</h3>
295+
<p className="mt-4 text-sm leading-7 text-stone-300/78">{step.text}</p>
296+
</article>
297+
))}
298+
</div>
299+
</div>
300+
</section>
301+
302+
<section className="mx-auto w-full max-w-7xl px-5 py-20 sm:px-8 lg:px-10" id="install">
303+
<div className="grid gap-10 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
304+
<div className="space-y-5">
305+
<p className="landing-section-label">Quick install</p>
306+
<h2 className="font-landing-display text-4xl leading-none tracking-[-0.05em] text-white sm:text-5xl">
307+
Get an agent into a structured execution loop in minutes.
308+
</h2>
309+
<p className="max-w-xl text-lg leading-8 text-stone-300/82">
310+
Start with install, initialize the repo, then let `superplan run` keep the frontier visible.
311+
</p>
312+
</div>
313+
314+
<div className="grid gap-4">
315+
<article className="landing-code-card">
316+
<p className="landing-code-card__label">macOS / Linux</p>
317+
<pre className="landing-code-card__code">
318+
<code>{macInstallCommand}</code>
319+
</pre>
320+
</article>
321+
322+
<article className="landing-code-card">
323+
<p className="landing-code-card__label">Windows PowerShell</p>
324+
<pre className="landing-code-card__code">
325+
<code>{windowsInstallCommand}</code>
326+
</pre>
327+
</article>
328+
329+
<article className="landing-code-card">
330+
<p className="landing-code-card__label">First commands</p>
331+
<pre className="landing-code-card__code">
332+
<code>{firstCommands}</code>
333+
</pre>
334+
</article>
335+
</div>
336+
</div>
337+
</section>
338+
339+
<section className="mx-auto w-full max-w-7xl px-5 pb-20 sm:px-8 lg:px-10">
340+
<div className="landing-final-cta">
341+
<div className="space-y-4">
342+
<p className="landing-section-label">Ready to ship</p>
343+
<h2 className="font-landing-display text-4xl leading-none tracking-[-0.05em] text-white sm:text-5xl">
344+
Give your agents a workflow that remembers.
345+
</h2>
346+
<p className="max-w-2xl text-lg leading-8 text-stone-300/80">
347+
Superplan keeps execution visible, resumable, and grounded in the repository so progress does not dissolve the
348+
moment the session ends.
349+
</p>
350+
</div>
351+
352+
<div className="flex flex-col gap-3 sm:flex-row">
353+
<a className="landing-cta landing-cta--primary" href="https://github.com/superplan-md/superplan-plugin" rel="noreferrer" target="_blank">
354+
Open the repo
355+
<IconArrowRight className="size-4" />
356+
</a>
357+
<a className="landing-cta landing-cta--secondary" href="#install">
358+
Copy the install flow
359+
</a>
360+
</div>
361+
</div>
362+
</section>
363+
</main>
364+
)
365+
}
366+
367+
export { LandingPage }

0 commit comments

Comments
 (0)