feat: landing page revamp (#349)

* feat: revamp marketing landing page

Combine hero (dot grid, noise texture, agent selector, install block) from
prototype 1 with middle content (plan/code review showcases, how-it-works
toggle, key properties, compatibility, final CTA) from prototype 2.

- Hero with animated fade-up, glassy agent buttons, per-agent install commands
- AnnoReplace component: shimmer + white glove hint → click → comment popover
- How It Works section with Plan/Code Review toggle swapping images + copy
- Accurate install instructions (binary + plugin for Claude Code/OpenCode)
- Three-column footer with brand stamp
- Nav with pipe-separated links
- Agent icons with CSS invert for light/dark mode
- Scroll reveal animations for showcase sections

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat: interactive terminal demos, install UX, and copy refinements

- Plan review: terminal animation (ASCII art, /plan typing, agent steps,
  submit_plan(), deny → feedback loop) with viewport-aware start/pause
- Code review: same pattern (/plannotator-review, send feedback loop)
- Install instructions: multi-step copyable rows for Claude Code and
  OpenCode, accurate Pi install command, Codex plan mode caveat
- Remove redundant Get Started section (hero handles install)
- AnnoReplace component: shimmer + white glove hint → click → comment popover
- How It Works: centered toggle, notification dot, tighter spacing
- Footer: license line, tighter gaps, @plannotator handle
- Social proof bar: "Zero learning curve"
- Hero trust signal: "free & open source"
- CTA subline: "Shape what gets built. Own what ships."
- Nav: pipe-separated links from prototype 2

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* chore: clean up landing page dead code and fix mobile/perf issues

Remove ~160 lines of dead CSS/JS from removed Get Started section,
consolidate duplicate reveal animation system, fix copy buttons
invisible on touch devices, drop unused Source Serif 4 font load,
fix footer responsive breakpoint, and clean up duplicate data attrs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat: mobile responsiveness, demo glove pointers, and capabilities grid

Mobile: hide install commands, promote video CTA, reorder terminal
demos above text, fix social proof bar stacking, footer 2-col layout,
glove jabs further on small screens.

Demo gloves: white glove pointer on plan deny button (flipped, right
side) and code review send button (left side) with jab animations.

Capabilities: replace icon cards with 3-column grid (Commands,
Features, Integrations) with shimmer on slash commands.

Also: send feedback button moved to bottom-left, matched deny button
color, title em-dash to hyphen.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* chore: optimize images and clean up dead assets

Convert How It Works screenshots to WebP (25MB → 470KB).
Add proper plan-review.webp and code-review.webp for terminal demos.
Remove 6 unused image assets (~27MB). Fix ASCII art alignment.
Update trust signal copy.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat: contributor strip below footer with build-time GitHub fetch

GraphQL query (CI) fetches code contributors, issue authors, and
discussion participants in one request. REST fallback (local dev)
for code contributors only. Results cached in-process to avoid
blocking repeated renders. Deploy workflow passes GITHUB_TOKEN.

Also: bump brand stamp and avatar opacity, footer copy cleanup.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: update agent video links and Codex install instructions

OpenCode → dedicated YouTube demo, Codex → X post demo.
Codex detail steps now show !plannotator review and !plannotator last.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: agent install steps leaking across buttons

Step elements now fully cleared (innerHTML + display:none) on every
agent switch. Use inline style instead of class toggle to avoid
CSS specificity conflict with .hero-detail-step display:flex.
Add third step slot for Codex commands. Add !plannotator annotate.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: add restart instructions and noscript fallback

Add restart step to Claude Code and OpenCode hero install flows so
new users know hooks/plugins require a session restart. Add noscript
style so landing-reveal sections stay visible without JavaScript.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Ramos
2026-03-19 23:28:34 -07:00
committed by GitHub
parent 1821943d06
commit e01526457b
27 changed files with 2446 additions and 327 deletions
+2
View File
@@ -99,6 +99,8 @@ jobs:
- name: Build marketing
run: bun run build:marketing
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@8df5847569e6427dd6c4fb1cf565c83acfa8afa7 # v6.0.0