feat: lead the carousel hero with each page's own headline - #41
Merged
Conversation
An alternative hero at /home-carousel, modelled on the statement band on the Manhattan Bridge noise site: one figure at a time, each slide a link into the section it counts, crossfading on a 5.2s rotation with dot controls and a pause. The slides sit in a single grid cell rather than absolutely positioned inside a guessed min-height, so the band is exactly as tall as its tallest slide at every width — the type is fluid, so a guessed height cannot stay right. Rotation stops on hover, on focus, when the tab is hidden, and for good once the reader touches the dots; under reduced motion it never starts and the control becomes a manual Next. Every figure is counted from src/content/site.ts at build time. The home page has already shipped a wrong number once (it read "all five" with four research areas), and a hero that leads with figures is the worst place to repeat that. Everything below the hero moves to HomeBody, shared verbatim by both routes, so the two layouts differ only in what sits above it. The route is noindex and carries a line back to the current home page: it is here to be compared, not to be landed on. Co-Authored-By: Claude Opus 5 <[email protected]>
The statement carousel now rotates the destination pages' own hero headings as the page `<h1>` — same words, same accent half — instead of sitting under a fixed slogan with a figure at display size. Each card carries its figure one step down in white, its context line, and a single button that follows the card. - Add a card for the home page itself, first in the rotation, carrying the home hero's mission line and intro paragraph verbatim (accent and the Center for Global Affairs link included) and no button, because that card stands for the page the reader is already on. - Drop the current-cohort card, and fold the two portfolio cards into one: with headline-led cards they would have shown the same heading twice in a rotation. - Centre the band, and give a card an optional heading size override so the wordmark can run larger than the sentence-shaped headings. - Replace the compare strips on both layouts with one shared HomeViewToggle, identical on each side, under the hero buttons. Verified: eslint, tsc --noEmit, check:content, next build, plus headless screenshots of both layouts. Co-Authored-By: Claude Opus 5 <[email protected]>
Mechanical output of `npm run sync:static` for the carousel hero change. Kept as its own commit so the source diff stays readable, as CONTRIBUTING.md section 4 asks. Co-Authored-By: Claude Opus 5 <[email protected]>
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 changed and why
/home-carouselis the alternative home layout under review. Its hero used to be a fixed slogan with a rotating figure at display size. It now rotates each destination page's own hero heading as the page<h1>— same words, same accent half — so a card reads as a door into that page rather than as a statistic.Per card, in order: the heading at display size, the figure one step down in white, the context line, then a single button that follows the card.
/'s mission line and intro paragraph verbatim — the serif type,human conditionin the accent, and the live link to the Center for Global Affairs. It has no button: that card stands for the page the reader is already on./centres its own hero.Change Home Page View/Carousel View) with one sharedHomeViewToggle, identical wording on both sides, sitting under each hero's buttons.Affected routes
/home-carousel— hero rebuilt; stillrobots: noindex, nofollow./— the toggle button added under the hero CTA pair. Nothing else on the standard layout changes.Commands run
npx eslintnpx tsc --noEmitnpm run check:contentContent invariants OK (3 cohorts, 23 researcher records)npm run buildnpm run sync:staticchore: regenerate the static snapshotVisual checks
Both layouts rendered headlessly from the built export at 1440px and inspected: the first card (wordmark, mission line, intro paragraph, no button), a rotated card (heading, white figure line, context,
Explore the portfolio →), and the toggle under the buttons on each page.Known limitations / follow-ups
static-site/was regenerated./home-carouselroute come out together when the comparison is settled.🤖 Generated with Claude Code