feat(marketing): full-viewport video hero#101
Merged
Merged
Conversation
Replace the oversized stacked-type hero with a full-viewport section: a muted looping background video (dimmed for legibility), the fixed nav as the top overlay, and a bottom-anchored stack (eyebrow, heading, paragraph, two CTAs side by side). Restrained type sizing so the content bottom-anchors with headroom on laptop heights instead of overflowing into the nav. - background video committed as public/hero-bg.mp4 (reels/ stays gitignored and regenerable; the hero asset is tracked deliberately) - reduced-motion: video hidden via motion-reduce, ink gradient shows; gsap entrance gated behind prefers-reduced-motion: no-preference so content stays visible when motion is off - mobile: CTAs and stack collapse to single column, reading order preserved Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
Replaces the oversized stacked-type hero (it dominated the page and crammed at laptop heights) with a full-viewport video-background hero per the requested pattern:
public/hero-bg.mp4), with a dimming gradient (vertical scrim for nav + copy legibility, left scrim for the text column).MarketingHeader(transparent at top) sits above the video.aria-hidden+motion-reduce:hidden(ink gradient shows for reduced motion); the GSAP entrance is gated behindprefers-reduced-motion: no-preferenceso content stays visible when motion is off.On-brand with DESIGN.md (Fraunces display, gold accent, ink canvas, no em dashes in prose).
Asset
The hero video is committed as
public/hero-bg.mp4(tracked).public/reels/*stays gitignored/regenerable; the landing asset is deliberate. Swap the file to rebrand.Verified
Built + ran the marketing dev server, confirmed via DOM measurement: video plays (
readyState 4), content bottom-anchors at laptop ratio (1280×577) clear of the nav (h1 238px down, no top overflow), CTAs 80px above section end. Typecheck + biome clean.🤖 Generated with Claude Code