Skip to content

feat: landing page revamp#349

Merged
backnotprop merged 9 commits into
mainfrom
feat/landing-revamp
Mar 20, 2026
Merged

feat: landing page revamp#349
backnotprop merged 9 commits into
mainfrom
feat/landing-revamp

Conversation

@backnotprop
Copy link
Copy Markdown
Owner

Summary

  • Complete redesign of the marketing landing page with editorial column layout, interactive terminal demos, and annotation-inspired UI components
  • Mobile-first responsive design: hidden install commands on small screens, video CTA emphasis, reordered content sections, touch-friendly copy buttons
  • Image optimization: converted all screenshots to WebP (42MB → 620KB total), proper plan review and code review screenshots
  • Build-time contributor strip below footer via GitHub GraphQL API (contributors, issue authors, discussion participants)
  • Capabilities grid replacing generic icon cards, with shimmer effect on slash commands
  • Dead code cleanup: removed ~160 lines of unused CSS/JS, consolidated duplicate animation systems

Commits

  1. feat: revamp marketing landing page — base layout, hero with agent selector, AnnoReplace component, social proof bar, How It Works toggle, footer
  2. feat: interactive terminal demos, install UX, and copy refinements — viewport-aware animated terminal demos with deny/send loop, multi-step install instructions, copy polish
  3. chore: clean up landing page dead code and fix mobile/perf issues — remove dead CSS/JS, consolidate reveal system, fix copy buttons on touch, drop unused font, footer responsive
  4. feat: mobile responsiveness, demo glove pointers, and capabilities grid — mobile layout overhaul, white glove pointers on demo buttons, capabilities section with shimmer commands
  5. chore: optimize images and clean up dead assets — WebP conversion, proper screenshots, remove 42MB of dead images, ASCII art fixes
  6. feat: contributor strip below footer with build-time GitHub fetch — GraphQL + REST fallback, in-process cache, deploy workflow token

Test plan

  • Verify landing page renders correctly in dark and light mode
  • Test mobile layout (install hidden, video CTA prominent, demos above text, footer 2-col)
  • Confirm terminal demos play only when in viewport and pause when scrolled away
  • Test agent selector button switching (install command, video link, detail steps)
  • Verify AnnoReplace shimmer → click → popover → close cycle
  • Check white glove pointers appear on demo images and hide on button click
  • Test How It Works toggle between Plan Review and Code Review
  • Verify contributor strip renders (requires GITHUB_TOKEN in CI)
  • Run production build and confirm no missing assets

backnotprop and others added 8 commits March 19, 2026 23:00
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>
- 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>
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>
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>
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>
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>
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>
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>
@backnotprop backnotprop force-pushed the feat/landing-revamp branch from f68878b to aa2705f Compare March 20, 2026 06:02
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>
@backnotprop backnotprop merged commit e015264 into main Mar 20, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant