polish(sponsors): tier hierarchy, dignified modal, no more SaaS gradient hero#20
Open
f1shyfang wants to merge 1 commit into
Open
polish(sponsors): tier hierarchy, dignified modal, no more SaaS gradient hero#20f1shyfang wants to merge 1 commit into
f1shyfang wants to merge 1 commit into
Conversation
…ent hero
Sponsors page violated PRODUCT.md Design Principle 3 ("Sponsors get
dignity, not vanity") in three ways: SaaS-template gradient hero,
tier structure flattened into identical card grids, and decorative
amber/sky/emerald gradient tier pills.
SponsorsClient: replaced hero with quiet container-width left-aligned
h1 + Brand Navy eyebrow + two Brand Navy CTAs. Removed tier color
gradients entirely. Tiers now expressed by (a) section eyebrow +
heading + context line, and (b) per-tier grid density (Diamond/Major
2-col, Gold 3-col, Silver 4-col, lower tiers 5-col) paired with the
new size prop on SponsorLogo so higher tiers actually render
proportionally larger. Featured/Lead-partner section uses the spec
card token. New recruit-state empty section mirrors the home page's
tone. All transitions explicit, motion-safe scale, focus-visible
rings throughout. Buzzword copy ("vibrant", "world-class",
"exceptional support", "next generation") removed.
SponsorLogo (shared): new optional size?: 'sm' | 'md' | 'lg' prop
(default 'md', so existing call sites unchanged) so the sponsors page
can pass 'lg' to Diamond/Major rows. focus-visible, motion-safe scale
gentled to 1.03, hairline-bordered card surface, alt text now includes
tier ("{name}, {tier} sponsor"). Padding bumped p-4/sm:p-6 -> p-6/sm:p-8
so logos breathe (dignity over density).
SponsorModal (shared): substantial accessibility rebuild. Removed
GSAP, replaced with motion-safe CSS transitions (prefers-reduced-motion-
aware). Removed backdrop-blur (glassmorphism is banned by spec).
Visit-website upgraded from low-emphasis text link to Brand Navy
primary button. Added focus trap (Tab/Shift-Tab cycle), focus
restoration on close, useId for collision-safe ids, sr-only
"(opens in a new tab)" cue, aria-describedby. Sponsor logo now
actually renders in the modal (was commented out). Tier shown as
Brand Navy eyebrow above the name. Description in proper Ink Body.
tsc --noEmit: clean. eslint: clean.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Polish pass on the sponsors surface: rebuilds the /sponsors page hero and tier sections around Brand Navy and tier-aware grid/logo sizing, replaces the GSAP-driven SponsorModal with a CSS-transition, focus-trapped, focus-restoring dialog, and adds an optional size prop to SponsorLogo.
Changes:
- Hero, featured-sponsor, tier sections, and CTA on
SponsorsClientrewritten with Brand Navy styling, tier-driven grid density, and an empty-state recruitment section. SponsorModalrebuilt: removes GSAP andbackdrop-blur, adds focus trap, focus restoration,useId-based ids, primary Brand Navy "Visit" button, and renders the sponsor logo.SponsorLogogains asizeprop ('sm' | 'md' | 'lg', default'md') and tightens focus/motion styles; metadata title/description updated.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| CEUS/src/app/sponsors/page.tsx | Updates page <title> and meta description to the new "Industry Partners" framing. |
| CEUS/src/app/sponsors/SponsorsClient.tsx | Rebuilds hero, featured card, tier sections (with gridForTier/logoSizeForTier), empty state, and CTA; drops tier color gradients. |
| CEUS/src/components/SponsorLogo.tsx | Adds size prop with per-size max-heights; updates a11y label, focus styles, and motion. |
| CEUS/src/components/SponsorModal.tsx | Replaces GSAP with CSS transitions, adds focus trap and restoration, renders logo, upgrades CTA to Brand Navy button. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
123
to
+137
| return ( | ||
| <div | ||
| role="dialog" | ||
| aria-modal="true" | ||
| aria-labelledby="sponsor-modal-title" | ||
| className="fixed inset-0 z-50 flex items-center justify-center p-4" | ||
| className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6" | ||
| onMouseDown={handleBackdropClick} | ||
| aria-hidden={!isOpen} | ||
| > | ||
| {/* Overlay */} | ||
| {/* Backdrop — solid scrim, no glassmorphism. */} | ||
| <div | ||
| className="sponsor-modal-overlay fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm" | ||
| onClick={handleCloseAnimation} // Close when overlay is clicked | ||
| style={{ opacity: 0 }} // Initial state for GSAP | ||
| ></div> | ||
| aria-hidden="true" | ||
| className={[ | ||
| 'absolute inset-0 bg-black/60', | ||
| 'motion-safe:transition-opacity motion-safe:duration-200 motion-safe:ease-out', | ||
| visible ? 'opacity-100' : 'opacity-0', | ||
| ].join(' ')} | ||
| /> |
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
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.
Summary
Polish pass on
/sponsorsplus the sharedSponsorLogoandSponsorModal. Critique score moved from 14/40 → 33/40 — the largest single-page jump in the series. PRODUCT.md Design Principle 3 ("Sponsors get dignity, not vanity") was being violated in three places.Page (
sponsors/page.tsx,SponsorsClient.tsx)bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-800with white-on-blue gradient-clipped text — pure SaaS landing template).sizeprop onSponsorLogo: Diamond/Major now rendersize='lg', Gold/Silver'md', lower tiers'sm'. The tier hierarchy is now visible in both column density AND logo footprint.SponsorLogo(shared)size?: 'sm' | 'md' | 'lg'prop (default'md'so existing call sites unchanged).focus-visible:ring,motion-safe:hover:scale-[1.03](gentled from1.05— sponsors get dignity, not bounce).SponsorModal(shared) — biggest a11y rebuild of the seriesprefers-reduced-motionaware).backdrop-blur(glassmorphism is banned by DESIGN.md).useIdfor collision-safe ids; sr-only "(opens in a new tab)" cue;aria-describedby.Test plan
npm run dev→/sponsors— verify hero is calm Brand Navy, no gradient or hero-metric templatebackdrop-blurprefers-reduced-motion: reduce— modal open/close is instant; no scale animationVerification
tsc --noEmit: cleaneslint: cleanMerge note
Independently mergeable. No file overlap with other polish PRs.
🤖 Generated with Claude Code