feat: differentiated hero + GSAP motion - #9
Merged
Conversation
Replace the terminal-window hero (shared boilerplate across every AxeForge marketing site) with a hero specific to what ReviewForge actually does: a mock PR review thread showing a simplified Go diff plus three reviewer-persona comment bubbles (Bob Lil Swagger, Robert Dover Clow, Maya Simplifica -- names/voices pulled straight from README.md's persona table), grounded in the README's own "Add retry logic" / helpers/http.go learning-report example. Layout mirrors the family pattern instead of repeating it: the PR thread sits on the left, hero copy on the right (siblings all run text-left/demo-right), with DOM order matching visual order at every breakpoint. Adds GSAP (via CDN, no build step) for: - hero entrance timeline: kicker -> h1 -> lede -> ctas -> PR thread shell -> diff lines -> the three comments streaming in one at a time (slide-in + typing-style clip-path reveal + avatar pop), not all at once - scroll-triggered reveals per section (fade + translateY, staggered across cards), once per section via ScrollTrigger's `once: true` - reduced-motion guard via gsap.matchMedia(): every animated target snaps to its final visible state immediately, no opacity:0 left behind; verified with Playwright's reducedMotion emulation - fails open if the CDN scripts don't load: nothing is hidden via CSS, only via JS right before its reveal tween, so a blocked/slow CDN just leaves the static page fully visible Also fixes a theme bug the new component would otherwise have inherited: --af-surface-2/-3 are fixed dark tokens that don't change with the page theme (by design, "terminal stays dark on a light page"), but var(--af-text)/var(--af-text-muted) do -- pairing them would go invisible in light theme. The PR card uses the shell's fixed dark-mode text values instead, verified by forcing data-theme="light".
StructLint — 4 violation(s) found58/62 rules passed · 4 violation(s) detected against Files not matching any allowed naming pattern (3)
Directories not in the allowed list (1)
View full run · Powered by StructLint |
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
Replaces the terminal-window hero (identical structure across every AxeForge marketing site built this session) with something specific to what ReviewForge actually does.
New hero concept: mock PR review thread
helpers/http.go, PR #42 "Add retry logic" — pulled directly from README.md's own learning-report example) plus three reviewer-persona comment bubbles with avatar badges: Bob Lil Swagger, Robert Dover Clow, Maya Simplifica — real persona names/voices from README.md's persona table, not invented. Each comment is written in that persona's documented style (Bob: friendly/encouraging, Robert: SOLID/pattern-naming, Maya: everyday analogies — a garden hose fordefer).GSAP motion (CDN, no build step)
clip-pathreveal on the paragraph + an avatar "pop"), not all at once — meant to read like a live review arriving.ScrollTrigger'sonce: true— verified it doesn't replay on scroll-direction changes.gsap.matchMedia()with two mutually-exclusive branches. Whenprefers-reduced-motion: reduce, every animated target is set to its final visible state immediately — verified with Playwright'sreducedMotion: 'reduce'emulation (actual browser render, not just code review).typeof gsap === "undefined". If the CDN scripts are blocked/slow, the static page just renders fully visible — no permanently-stuckopacity: 0.Bug caught and fixed along the way
The new PR-thread card sits on
--af-surface-2/-3— fixed dark tokens that don't change with page theme (intentional: "terminal stays dark on a light page"). I initially styled its content withvar(--af-text)/var(--af-text-muted), which do flip to near-black in light theme — that would go invisible against the permanently-dark card. Fixed by hardcoding the shell's dark-mode text values for that component instead, and verified by forcingdata-theme="light"in a real browser and screenshotting it.Verification
--virtual-time-budgetheadless — that mode doesn't tickrequestAnimationFramereliably and produced a false-looking "stuck mid-animation" screenshot on first pass; a real browser session with real waits confirmed the animation completes correctly).reducedMotion: 'reduce'browser emulation — confirmed all content renders in final state immediately, no animation.data-theme="light"— confirmed the fix above holds.detect.mjsanti-pattern scan: identical 3 pre-existing advisory findings as the original file (grid background, single-font, em-dash density) — nothing new introduced.aria-hidden(redundant with adjacent persona name), diff add/remove meaning carried by literal+/-text (not color alone), reduced-motion hard requirement verified live.<body>(non-blocking), animations use transform/opacity, only 2 small CDN scripts added, no new images.minmax(0, Xfr)(the known bug class from an earlier build), diff box has anoverflow-x: autosafety net, PR file badge hides below 480px; mobile screenshot shows clean single-column stacking with no horizontal scroll.feed-tonedots,glass-cardconventions) rather than inventing new ones, content grounded in README's real persona table and learning-report example throughout.