Skip to content

Add site-wide sticky apply banner - #279

Open
GauravShah123 wants to merge 4 commits into
uwblueprint:mainfrom
GauravShah123:feature/site-apply-banner
Open

Add site-wide sticky apply banner#279
GauravShah123 wants to merge 4 commits into
uwblueprint:mainfrom
GauravShah123:feature/site-apply-banner

Conversation

@GauravShah123

Copy link
Copy Markdown
Collaborator

Summary

Promotes the applications banner to a sticky announcement bar pinned above the navbar on every page. Previously it only rendered inside the Join Us hero (/join-us).

How it works

  • ApplyBar (new, src/components/layout/ApplyBar.tsx): a slim fixed top-0 bar (z above the navbar) with the applications copy + Apply button. Renders only while APPLICATION_IS_LIVE, so it self-hides once applications close.
  • Layout: sets a --apply-banner-h CSS variable (equal to the bar height) on <body> when applications are live, and pads the body by it. When not live, the variable is unset and the offset is 0.
  • Navbar: its fixed top is anchored to var(--apply-banner-h, 0px), so it sits directly under the bar (and 0 when the bar is hidden). Scroll hide-on-scroll behaviour is unchanged.
  • Removes the now-duplicate inline ApplyNowBanner from JoinUsHero and deletes the unused component.

Notes

  • Copy and Apply link reuse the existing constants/applications.ts values (APPLICATION_CLOSE_DATETIME, APPLICATION_LINK), so the close date stays in sync with the rest of the site.
  • Shows on all page types including full-bleed heros and the standalone /links page.
  • Mobile shows a shortened "Applications close {date}." to keep the bar a single line.

🤖 Generated with Claude Code

gauravshah-betterup and others added 4 commits July 3, 2026 22:06
Promote the applications banner to a sticky announcement bar pinned above
the navbar on every page (previously only inside the Join Us hero).

- New ApplyBar: slim fixed top bar, renders only while APPLICATION_IS_LIVE
- Layout sets --apply-banner-h so the navbar and all page content offset by
  the bar's height (0 when the bar is hidden)
- Navbar top anchored to --apply-banner-h
- Remove the now-duplicate inline ApplyNowBanner from JoinUsHero and delete
  the unused component

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Button reads "Apply now"
- Increase bar height (3rem -> 3.5rem) for more vertical breathing room;
  --apply-banner-h offset stays in sync

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Swap the filled button for an inline underlined link so it fits the slim
announcement bar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Distinguishes the sticky bar from page content beneath it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants