polish(home): student-led copy, Brand Navy CTAs, motion guards#17
Open
f1shyfang wants to merge 1 commit into
Open
polish(home): student-led copy, Brand Navy CTAs, motion guards#17f1shyfang wants to merge 1 commit into
f1shyfang wants to merge 1 commit into
Conversation
…CTAs Hero now leads with a concrete promise instead of restating the brand name, with a single Brand Navy CTA anchoring to the next-event section. Sections reordered so "Happening Soon" comes directly under the hero (per the project's "next event is the lede" principle), with About CEUS demoted to the foot of the page. About copy rewritten out of generic university-comms voice into a single student-led paragraph with specific nouns. CTA palette aligned to the design system: Brand Navy primary, Brand Navy ghost secondary. Heading hierarchy compressed (Happening Soon dominates, sponsors/about quieter). Both empty states gained brand-voice copy + Brand Navy CTAs. GSAP hero animation now wrapped in prefers-reduced-motion guard via useIsomorphicLayoutEffect. Slick autoplay carousels also detect the preference and disable autoplay for users who request reduced motion. Also adds project-level design context: - PRODUCT.md (register, users, brand personality, anti-references, design principles, accessibility) - DESIGN.md (Stitch-format design system spec) - .impeccable/design.json (sidecar with tonal ramps, motion tokens, component snippets) - CEUS/src/index.css gains scroll-behavior: smooth and the shared animate-fade-in-up keyframes (reduced-motion aware) - CEUS/src/lib/links.ts hoists the calendar subscribe URL so future changes are a one-line edit 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 CEUS homepage and adds product/design documentation to align the site with a defined brand register, including reduced-motion guards for hero animation and carousel autoplay.
Changes:
- Rewrites
HomeClient.tsxto reorder sections, refresh copy/CTAs, add brand-aligned empty states, and respectprefers-reduced-motionfor GSAP + slick autoplay. - Adds foundational product/design-system docs (
PRODUCT.md,DESIGN.md) plus Impeccable design sidecar + critique snapshots. - Adds global smooth-scrolling (reduced-motion aware) and a shared “fade-in-up” animation utility; hoists the calendar subscribe URL into
links.ts.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| PRODUCT.md | Introduces product purpose, audiences, and brand/register guidance. |
| DESIGN.md | Adds a design-system specification (colors, typography, components, motion rules). |
| .impeccable/design.json | Adds a structured design sidecar (tokens/components) for tooling/reference. |
| CEUS/src/index.css | Adds global smooth-scroll (motion-aware) + shared fade-in-up utility. |
| CEUS/src/lib/links.ts | Centralizes the calendar subscribe URL into a shared constant. |
| CEUS/src/app/HomeClient.tsx | Homepage rewrite: section order, copy, CTA palette, empty states, motion guards. |
| CEUS/.impeccable/critique/2026-05-29T10-44-46Z__ceus-src-app-homeclient-tsx.md | Adds post-polish critique snapshot. |
| CEUS/.impeccable/critique/2026-05-29T05-39-58Z__ceus-src-app-homeclient-tsx.md | Adds pre-polish critique snapshot. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+21
to
+29
| const PrevArrow = (props: CustomArrowProps) => ( | ||
| <div | ||
| className={props.className} | ||
| style={{ ...props.style, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1 }} | ||
| onClick={props.onClick} | ||
| aria-label="Previous" | ||
| > | ||
| <FaChevronLeft className="text-2xl text-[#1B397E]" /> | ||
| </div> |
Comment on lines
+32
to
+40
| const NextArrow = (props: CustomArrowProps) => ( | ||
| <div | ||
| className={props.className} | ||
| style={{ ...props.style, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1 }} | ||
| onClick={props.onClick} | ||
| aria-label="Next" | ||
| > | ||
| <FaChevronRight className="text-2xl text-[#1B397E]" /> | ||
| </div> |
Comment on lines
114
to
+118
| responsive: [ | ||
| { breakpoint: 1024, settings: { slidesToShow: 4, centerMode: false, arrows: true } }, | ||
| { breakpoint: 600, settings: { slidesToShow: 3, centerMode: false, arrows: true } }, | ||
| { breakpoint: 480, settings: { slidesToShow: 2, centerMode: false, arrows: true } } | ||
| ] | ||
| { breakpoint: 480, settings: { slidesToShow: 2, centerMode: false, arrows: true } }, | ||
| ], |
Comment on lines
+17
to
+33
| @layer utilities { | ||
| @keyframes fadeInUp { | ||
| from { | ||
| opacity: 0; | ||
| transform: translateY(20px); | ||
| } | ||
| to { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| } | ||
| } | ||
| @media (prefers-reduced-motion: no-preference) { | ||
| .animate-fade-in-up { | ||
| animation: fadeInUp 0.5s ease-out forwards; | ||
| } | ||
| } | ||
| } |
| ### Hero Section (signature) | ||
| - **Layout:** Full-bleed photographic background (`object-cover`), `75vh` tall capped at `600px`, Scrim (`rgba(0,0,0,0.40)`) over the image so display type stays legible. | ||
| - **Type:** Left-aligned Display + Subdisplay in white, tracked. | ||
| - **Motion:** GSAP fade-rise from `y: 20, opacity: 0` to `y: 0, opacity: 1`, `power2.out`, 0.8s, subdisplay staggered `-0.6s`. Respects `prefers-reduced-motion` (currently relies on user OS — flagged as a Don't to enforce explicitly). |
| - **Motion:** GSAP fade-rise from `y: 20, opacity: 0` to `y: 0, opacity: 1`, `power2.out`, 0.8s, subdisplay staggered `-0.6s`. Respects `prefers-reduced-motion` (currently relies on user OS — flagged as a Don't to enforce explicitly). | ||
|
|
||
| ### Sponsor Carousel (signature) | ||
| - **Layout:** Slick carousel, 3 slides desktop / 2 tablet / 2 mobile, autoplay 4.5s, pause on hover. Arrows in Accent Blue. |
|
|
||
| --- | ||
|
|
||
| *Note: this PRODUCT.md was inferred from the codebase, README, and SEO metadata. Sections most worth confirming with the team: **Brand Personality** (the three words), **Anti-references** (any specific sites the exec wants to avoid resembling), and **Design Principles 1 & 3** (whether real photography and sponsor presentation are in fact the load-bearing visual commitments). Run `/impeccable init` to refine these via interview.* |
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
Rewrite of the home page (
CEUS/src/app/HomeClient.tsx) to match the brand register documented in the newPRODUCT.md/DESIGN.md. Critique score moved from 24/40 → 33/40.#happening, instead of restating the brand name with no call to action.#1B397E) or Brand Navy ghost. Bothbg-blue-600and the roguebg-emerald-600are gone.text-4xl md:text-5xl lg:text-6xl), supporting sections demoted totext-3xl md:text-4xl.prefers-reduced-motionguard viauseIsomorphicLayoutEffect. Slick autoplay also detects the preference and disables autoplay for reduced-motion users.Project-level scaffolding included
This PR also lands the foundational design-context files (everything else builds on these):
PRODUCT.md— register (brand), users, brand personality, anti-references, design principles, a11y target.DESIGN.md— Stitch-format design system spec..impeccable/design.json— sidecar with tonal ramps, motion tokens, and self-contained component HTML/CSS.CEUS/src/index.css—scroll-behavior: smooth(reduced-motion aware) and the sharedanimate-fade-in-upkeyframes.CEUS/src/lib/links.ts— hoistsCALENDAR_SUBSCRIBE_URLso the next URL change is a one-line edit.CEUS/.impeccable/critique/(pre- and post-polish home page scores).Test plan
cd CEUS && npm run dev→ load/, verify hero CTA scrolls smoothly to#happeningprefers-reduced-motion: reduceset (browser DevTools → Rendering panel). Confirm: GSAP hero is static, slick autoplay is disabled, smooth-scroll falls back to instantCEUS/src/lib/links.tsVerification
tsc --noEmit: clean (exit 0)eslint: clean (exit 0)🤖 Generated with Claude Code