polish(events): solid Brand Navy hero, polished EventCard, dignified empty states#18
Open
f1shyfang wants to merge 1 commit into
Open
polish(events): solid Brand Navy hero, polished EventCard, dignified empty states#18f1shyfang wants to merge 1 commit into
f1shyfang wants to merge 1 commit into
Conversation
…states
The /events page hero was a SaaS-template gradient with floating
white orbs and palette-foreign indigo. Replaced with a calm solid
Brand Navy cover plus eyebrow + balanced h1 + concrete-noun subtitle
and two on-brand CTAs.
EventCard polished end-to-end: whole-card clickability in the default
variant (was CTA-only); home variant title parity with line-clamp-2;
relative date framing ("Tomorrow", "Friday in 4 days"); EventCardSkeleton
matching the polished card; graceful degrade when description, image,
category, or link is missing. CATEGORY_COLORS tightened to a
Record<Event['category'], string> so future category additions become
tsc errors.
EventFilterButton: solid Brand Navy active state (was gradient with
blue glow), aria-pressed toggle semantics, motion-safe scale, hairline
border, focus-visible ring.
Three contextual empty states (no events at all, filter returns nothing,
past archive empty), each with brand-voice copy and Brand Navy CTAs.
Animation transitions wrapped in prefers-reduced-motion guards
(scrollIntoView, .animate-fade-in-up). Stable tab counters so chrome
doesn't flicker as filters change.
formatRelativeEventDate added to src/lib/utils.ts. CALENDAR_SUBSCRIBE_URL
moved to src/lib/links.ts (duplicated with polish/home for independent
mergeability; identical content auto-merges).
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
This PR polishes the /events experience and shared event presentation components with updated Brand Navy styling, richer empty states, relative event dates, and card interaction improvements.
Changes:
- Reworks the events page hero, sticky section navigation, filters, empty states, and reduced-motion-aware scrolling.
- Updates
EventCard, filter buttons, and skeletons to match the new visual treatment and fallback behavior. - Adds shared event utilities and a centralized calendar subscribe link.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
CEUS/src/app/events/page.tsx |
Updates page metadata description. |
CEUS/src/app/events/EventsClient.tsx |
Rebuilds the events page UI, filters, tabs, empty states, and scrolling behavior. |
CEUS/src/components/EventCard.tsx |
Updates card variants, relative dates, whole-card linking, and fallback rendering. |
CEUS/src/components/EventFilterButton.tsx |
Restyles filter buttons and adds toggle semantics. |
CEUS/src/components/skeletons/Skeletons.tsx |
Reworks event skeletons and adds a home event skeleton. |
CEUS/src/lib/utils.ts |
Adds formatRelativeEventDate. |
CEUS/src/lib/links.ts |
Adds shared calendar subscription URL constant. |
CEUS/.impeccable/critique/2026-05-29T05-48-45Z__ceus-src-components-eventcard-tsx.md |
Adds design critique documentation for EventCard. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {eventsToRender.map((event, index) => ( | ||
| <div | ||
| key={`${sectionType}-${event.id}`} | ||
| className="animate-fade-in-up motion-safe:opacity-0" |
| const EventCard: React.FC<EventCardProps> = ({ event, variant = 'default' }) => { | ||
| const formattedDate = formatEventDate(event.date); | ||
| const relativeDate = formatRelativeEventDate(event.date); | ||
| const hasLink = Boolean(event.facebookEventLink); |
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
/eventsplus the sharedEventCardit leans on. Critique score moved from 22/40 → 34/40.Page (
events/page.tsx,EventsClient.tsx)bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-800with floating white opacity orbs — SaaS landing-template anti-pattern).aria-currentandfocus-visible:rings..animate-fade-in-uprewritten as a true reduced-motion-aware animation.scrollIntoViewcalls now passbehavior: 'auto'whenprefers-reduced-motion: reduce.bg-white; gradient underline bars under each h2 deleted; hierarchy carried by typography and spacing.EventCard(shared component)line-clamp-2 min-h-[3.25rem].EventSkeletonrebuilt to match the polished card; newEventHomeSkeletonfor the home carousel.CATEGORY_COLORStightened toRecord<Event['category'], string>so future category additions becometscerrors.EventFilterButton(shared)bg-gradient-to-r from-blue-500 to-blue-600withshadow-blue-500/25glow).aria-pressedtoggle semantics, motion-safe scale, hairline border, focus-visible ring.Shared utilities
formatRelativeEventDateadded toCEUS/src/lib/utils.ts.CALENDAR_SUBSCRIBE_URLmoved toCEUS/src/lib/links.ts. (Duplicated withpolish/homeso each PR is independently mergeable; identical content auto-merges.)Test plan
npm run dev→/events— verify hero is solid Brand Navy, no gradient or orbsprefers-reduced-motion: reduce; verify card-entrance animation is static and tab-scroll is instantdescriptionor nofacebookEventLink, verify graceful fallbackVerification
tsc --noEmit: cleaneslint: cleanMerge note
This PR shares two trivially-mergeable files with
polish/home:CEUS/src/lib/links.ts(new, identical content) andCEUS/src/index.cssis not duplicated here. Either merge order works.🤖 Generated with Claude Code