feat(landing-page): redesign homepage around the live workspace demo - #6881
feat(landing-page): redesign homepage around the live workspace demo#6881joeylee12629-star wants to merge 1 commit into
Conversation
Rebuild the homepage per the approved 2026-08 prototype: - Announcement bar with the live release label (build-time release metadata + client-side codename refresh), inside the fixed chrome so it never covers the nav. - New hero: Vibe Design Workspace positioning, one breathing download CTA, five scenario tabs driving a live three-pane workspace demo (projects / agent chat / artifact canvas). The demo embeds real template previews already produced by the build's copy-example-html step; wheel events relay out via postMessage so page scroll never dies inside the iframes. - Agent marquee (21 coding agents), three-step 'How it works', key-features grid with an interactive brand-system demo iframe and a benchmark band, team-workspace mock, three ways to use it, customer stories, and a data-driven 'Recent highlights' blog rail. - Nav consolidation (site-wide header): Solution's three groups fold into the Product mega panel alongside a new Plugin column (Codex Plugin); the product-family column moves to footer-only; the top-level Plugins dropdown becomes a single Resources item; a quiet GitHub star chip joins the bar before Download. The mega panel centers on the viewport via a static trigger li. - Removed sections: about, capabilities scrollytelling, labs dock, method falling-text (and its matter-js vendoring), stats wall, newsletter, and the homepage download-engagement prompt (the new page repeats the download CTA per section). Contributor globe, closing CTA, FAQ, and footer stay. - FAQ gains three entries (Codex plugin, brand system self-evolution, team workspace); homepage title/description/FAQ heading move to the Vibe Design Workspace framing while keeping the Claude Design alternative anchor. - All new copy ships in all 11 locales (en/zh hand-written, the rest agent-translated); demo documents are English product mocks with a hand-translated zh variant, matching the site's product screenshots. - New CSS lives under an hm- namespace so nothing collides with the legacy global classes.
lefarcen
added
size/XXL
PerishCode
left a comment
PerishCode
left a comment
There was a problem hiding this comment.
The live workspace demo introduces a useful cross-frame interaction, but the message channel needs to authenticate its peer before this can ship.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.| }); | ||
| }); | ||
| } | ||
| window.addEventListener('message', (event) => { |
There was a problem hiding this comment.
Authenticate the iframe before acting on cross-window messages. This global handler accepts od-download and arbitrary numeric odScroll payloads from any window, so an unrelated iframe or a page that opened the landing site can force navigation through the download CTA or continuously move the visitor's page. The paired receiver in scripts/home-demo/controller.ts likewise accepts scene commands from any sender, and both sides publish with '*'. Restrict the host handler to event.source === frame.contentWindow and the expected same-origin event.origin; in the generated demo require e.source === parent plus that origin, and use location.origin as targetOrigin for both directions. Please add a focused fixture test covering accepted messages from the demo frame and ignored messages from another source/origin.
🚀 Landing page previewThis PR is deployed to a Cloudflare Pages preview — not staging or production:
|
|
@joeylee12629-star PerishCode has the blocker for this head: please lock down the workspace demo message channel so both sides only accept messages from the expected frame/source + origin, and add the focused test they called out. Once that lands, the next review pass should be straightforward.
|
3 participants
Why
The homepage had grown into a long scroll of abstract marketing sections (about, capabilities scrollytelling, labs dock, falling-text method block, stats wall, newsletter) that never showed the product doing anything. Visitors arriving from "Claude Design alternative" / "vibe design" searches had to take our word for what Open Design is, then hunt for a download button that competed with a dozen other CTAs.
This PR lands the 2026-08 homepage redesign that was prototyped and reviewed offline: one positioning line (Vibe Design Workspace), one download CTA repeated per section, and a live three-pane workspace demo doing real work above the fold. It is my own use case as maintainer of the marketing site — the old page converted the product story into copy instead of showing it.
What users will see
copy-example-htmlstep, and they are editable in place and auto-advance.Live campaign surfaces that landed on
mainafter this branch was cut are preserved on the redesigned page: the DeepSeek V4 Pro campaign banner (active through 2026-08-27) and the Launch Week float both still render, stacked above the new announcement bar. Verified at 1440px and 390px — no overlap, hero clears both.Surface area
home-redesign-i18n.tscopy pack across all 11 landing locales, plus FAQ/SEO string updatesBuild wiring:
scripts/build-home-demo.tsnow runs indevandbuild:static(also exposed aspnpm build:home-demo). It generates the workspace demo assets from the repo's own design systems intopublic/home-redesign/— those outputs are gitignored, never hand-edited.Screenshots
The branch preview at
https://pr-6881.open-design-landing-staging.pages.devis the entry point to click through: the announcement bar and consolidated nav are the first thing on screen, the scenario tabs sit directly under the hero CTA, and the workspace demo runs live below them. Desktop (1440px) and mobile (390px) captures of that same view are in the review notes.Bug fix verification
Not a bug fix.
Validation
pnpm --filter @open-design/landing-page test— 137 pass, 0 failpnpm --filter @open-design/landing-page build(includesastro check) — clean, 6466 pages, localized template routes verifiedmain(117 commits) and resolved the homepage conflicts by keepingmain's live campaign banner + Launch Week float alongside the redesignout/: EN + ZH homepages at 1440×900 and 390×844 — campaign banner, announcement bar, nav, hero, scenario tabs and the workspace demo all render as intendedpnpm guardis clean apart from the pre-existing "residual JavaScript" report for build-generated, gitignored assets (public/enhancers/*.jsonmain, plus this branch'spublic/home-redesign/artifacts.jsfrom the same generator pattern); it does not fire on a clean checkout