feat(website): animated DAG as the landing hero#22
Merged
Conversation
Replace the static banner.webp hero with DagHero, a wider cut of the workflow graph (ingest fans out to transform/validate, both feed score, which routes to report/store) tuned to fill the shared landing's 16/5 hero-banner box. Pure CSS animation, no client JS, safe across the RSC boundary and in static export. - DagHero: bare SVG (no frame of its own, the landing supplies corners, the bottom gradient and the caption), shared design tokens with the docs diagrams. - diagrams.module.css: hoist the token block to a shared .figure/.heroFill selector, add .heroFill/.heroSvg sizing. - data.tsx: hero banner now carries node: <DagHero /> instead of src. - bump the light-landing-page lockfile pin to the commit that added the optional banner node prop. build with cc
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Replace the static
banner.webplanding hero with DagHero, an animated SVG of the workflow graph:ingestfans out totransform/validate, both feedscore, which routes toreport/store. Tuned to fill the shared landing's 16/5 hero-banner box.Why
The hero was a placeholder image. The DAG is the product; showing a live graph says it better than a still. Same visual language as the docs diagrams shipped in #21, so the site reads as one piece.
How
DagHerois a bare SVG (no frame of its own): the shared landing supplies the corner brackets, the bottom gradient and the caption. Consumes the new optionalbanner.nodeprop from light-landing-page.diagrams.module.css: hoisted the design-token block to a shared.figure/.heroFillselector, added.heroFill/.heroSvgsizing.data.tsx: the hero banner now carriesnode: <DagHero />instead ofsrc.light-landing-pagelockfile pin to the commit that added the optional banner node (feat: support a custom React banner node in the hero light-landing-page#1).Notes
prefers-reduced-motion, and is safe to pass across the RSC boundary (same server-JSX-as-prop pattern already used for the headline/lede).npx tsc --noEmitpasses; the Next static export is the CI oracle (Google Fonts fetch fails offline).build with cc