feat(landing): conversion-focused redesign of the aoagents.dev landing page#2826
feat(landing): conversion-focused redesign of the aoagents.dev landing page#2826AgentWrapper wants to merge 13 commits into
Conversation
…g page Hero now answers 'what is this' in one glance: mission-control subhead, direct platform download (macOS gets a real button instead of a dropdown), copyable brew install command, live release pill, and trust microcopy. - nav: live GitHub star chip + persistent Download button - new quickstart section: zero-to-fleet in three steps with copy blocks - new final CTA section before the footer - social proof: drop editorializing labels/notes, keep real posts only - video: poster facade, Mux iframe loads on click (faster first paint) - a11y: AA contrast for dim text, focus-visible rings, reduced-motion - seo: absolute og:image via metadataBase, sharper title/description - perf: shared GitHub facts store (one fetch, no per-component polling)
|
React Doctor found 1 issue in 1 file · 1 warning · score 96 / 100 (Great) · vs 1 warning
|
Shorter release pill and subhead (one breath instead of three lines), drop the microcopy row (quickstart/final CTA already carry platforms, license, and local-only trust signals).
Mux player expects boolean URL params as true/false; autoplay=1 was ignored, so the player waited for a second click inside the iframe.
Below 640px the bar rendered as an empty pill (logo glyph + hamburger only) - always render the Agent Orchestrator wordmark.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| label="ao spawn command" | ||
| className="w-full" | ||
| /> | ||
| <a |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-a-element (warning)
Plain reloads the whole page for internal links, so Next.js loses client-side navigation and prefetching.
Fix → import Link from 'next/link' for client-side navigation, prefetching, and preserved scroll position
| "https://github.com/AgentWrapper/agent-orchestrator/releases/latest", | ||
| ); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
React Doctor · react-doctor/rendering-hydration-no-flicker (warning)
This flashes for your users because useEffect(setState, []) runs after the first paint, so use useSyncExternalStore, or add suppressHydrationWarning
Fix → Use useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) or add suppressHydrationWarning to the element
| aria-label={`Play video: ${videoTitle}`} | ||
| className="group absolute inset-0 h-full w-full cursor-pointer" | ||
| > | ||
| <img |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-img-element (warning)
Plain ships unoptimized, oversized images.
Fix → Use next/image so users get optimized formats, responsive srcsets, and lazy loading instead of oversized image downloads.
- platform detection via useSyncExternalStore (shared hook) instead of setState-in-effect, removing the mount flash the hydration rule flags - next/link for internal links (nav logo, Docs link, quickstart link) - next/image for the video poster (responsive srcset, lazy by default) - DocsHardNav comment updated: landing->docs client nav is safe because globals.css loads on both routes; the guard covers docs->landing
- associate dialog labels with their controls (implicit wrap); read-only mock captions become spans instead of label elements - hoist marquee list to module scope; stable keys without array index - next/image for marquee logos and tweet avatars (unoptimized: 28px third-party favicons/avatars where proxy optimization adds fragility) Skipped: no-giant-component on HeroDashboardMockup (pre-existing structure; splitting it is a refactor beyond this PR).
|
React Doctor review addressed in commits Flagged inline comments — fixed:
Remaining warnings cleared: dialog labels now implicitly wrap their controls (clicking a label focuses its input — verified), read-only mock captions are spans, marquee list hoisted to module scope, index-free keys, marquee logos + avatars use Deliberately skipped: Score: 65/100 (17 warnings) -> 96/100 (1 warning). All other checks green. |
- drop 'one daemon' from the coverage meta row - split the marquee into two rows (second row scrolls reverse) - chip restyle: h-12, sans-serif name, subtle gradient, accent hover
Replaces the concept-art mockups (pinned GSAP scroll with hand-built DOM facsimiles) with three Cursor/Codex-style alternating rows pairing tight use-case copy with actual captures of the AO desktop app: - New task dialog (kick off work: worktree + branch + session per task) - the live session board (fleet status, PR + CI state per card) - a session inspector (CI failing routed back to the owning session) Captures taken from the real app (dev:web against a live daemon with a demo dataset, no sensitive projects). Removes LandingFeaturesScroll and the older unused LandingFeatures mockups.
…es shots - primary CTAs switch from saturated blue fill to quiet ivory (blue stays for small accents: italic headline, eyebrows, links) - nav shows the GitHub star chip at all widths (was hidden below 640px) - features screenshots go full-width with a soft glow (were ~41% scale and unreadable); session shot recaptured with a real agent transcript showing AO's CI-failure message routed into the session - TerminalPane web preview: fix invisible plain lines (text-terminal resolved to the terminal background color); AO nudge lines render in accent color - quickstart step 2 is one direct action (gh auth login); step 3 shows how users actually work - telling the orchestrator what they need in plain words instead of running ao spawn - drop the defensive 'No staged renders' framing
… TUI - restore the alternating side layout; each screenshot is now cropped to its subject (New task dialog, board columns, session terminal + PR card) so the product UI is legible at display size - demo terminal transcript rewritten to match the real Codex TUI: header box (model/directory/YOLO), Ran-blocks with transcript ellipsis, and AO's CI-failure nudge arriving in accent color
2 participants
Summary
Conversion-focused redesign of the public landing page (
frontend/src/landing, deployed at aoagents.dev). Every change is aimed at one metric: more visitors starring the repo and trying AO. The stack is unchanged (Next.js + Tailwind + GSAP), and every claim on the page is real and verifiable (8.4k stars, Apache-2.0, nightly releases, the publicagentwrapper/tapHomebrew cask).Before / after
Hero — desktop. Before: headline + two CTAs, nothing that says what AO is; the primary CTA on macOS was a dropdown ("Desktop downloads") instead of a button.
Hero — mobile (real iPhone UA). Before: oversized headline and a desktop-download dropdown that is useless on a phone. After: readable scale, subhead, repo-first primary CTA.
Social proof. Before: each tweet wrapped in editorializing chrome ("Most important outside validation.") that tells the visitor what to think. After: the real posts speak for themselves; the self-congratulatory official tweet was removed.
New sections. A three-step quickstart that removes the "setup looks heavy" objection, a video facade (Mux iframe no longer blocks first paint), and a closing CTA that repeats the conversion ask with proof.
Conversion decisions
getDownloadTarget()returnednullfor macOS, so the majority of devs got a dropdown while Windows/Linux got a one-click button. macOS now getsDownload for macOS(Apple silicon build; Intel remains one click away via "All platforms"). Portable devices get a repo-first CTA ("Get Agent Orchestrator") since a zip is useless on a phone — the achievable conversion there is a star.agentwrapper/tapHomebrew cask is real (brew install --cask agentwrapper/tap/agent-orchestrator, verified this session), so macOS visitors get a Warp-style copyable command block with clipboard feedback. Shown again in the quickstart and final CTA.gh auth login, agent CLIs you already have), spawn (ao spawn --prompt …) — directly attacking the "orchestration = complicated" objection.label/notelayer and the official self-tweet. Five real third-party posts, names/verified badges/dates/likes intact, each linking to the original.metadataBasemakesog:imageabsolute (it previously resolved relative to the host and would break in scrapers)./now carries full OG/Twitter tags, not just/landing.Accessibility & performance
--fg-dim(#79796f → #8a8a82) lifts small-label contrast from ~4.3:1 to ~5.4:1 (WCAG AA on the dark background).:focus-visibleaccent ring for all interactive elements in the landing tree (verified by tabbing through the page).prefers-reduced-motion; CSS reveals already did.<button>s with aria-labels that flip to "Copied to clipboard".useSyncExternalStore) issues one fetch per page load — matters because unauthenticated GitHub API is capped at 60 req/hr/IP and visitors share NAT egress. When the API is unavailable, the star count simply hides instead of showing a stuck "…".Verification
npx next buildpasses (63/63 pages);npx tsc --noEmitclean (only the two pre-existingdesktop-downloads.test.tsvitest-typing errors that exist on main).desktop-downloads.test.tsupdate).Risks / follow-ups
docs/screenshots/landing-refresh/so they render permanently; happy to drop them from the branch if you'd rather keep the repo lean.