feat(events): Stripe-style hackathons directory and detail page, animated hero ribbon - #54
Merged
Merged
Conversation
The landing ribbon now drifts continuously: its edges follow slow, out-of-step sine waves so the band breathes and twists, and a wave runs across the strands. It pauses off-screen and holds still for reduced motion; the server still renders the resting pose. On the landing page the header is transparent while the hero is under it, and the hero is pulled up beneath it, so the ribbon is no longer cut off by the navbar. The header turns solid as soon as the page scrolls.
Rebuilds /hackathons on the landing page's ruled frame: - hero with a two-tone heading and a staggered wall of live covers, plus Ongoing / Upcoming / Past links - a live stats row computed from the listing itself (KES escrowed, open for registration, teams registered, completed) - a featured hackathon: the biggest prize still open for registration (falls back to the biggest one running), hidden once filters apply - a directory with sidebar facets (status, category, where, prize pool) that show live counts, a GET search and sort form that works without JavaScript, and a grid / list toggle kept in the URL - phase-aware cards: organizer trust score, team capacity bar, tags, and a status line (registration closes in N days, building now, winners announced) instead of a flat "Registration closed" - suggestions and a newsletter sign-up when a view has few results - a verification section that keeps the listing's SEO copy word for word Filtering, sorting, stats and the featured pick live in lib/events/listing.ts as pure functions over the single cached read, with unit tests. Every variant still canonicalizes to /hackathons.
Rebuilds /hackathons/[slug] on the shared ruled frame: - breadcrumb hero with a large title, summary and track links, and a facts card (cover, Prize Verified, host, trust score, format) - a sticky rail of tick-line stats (prize pool, dates, where, team places, registration countdown) with the register / sign in / workspace / closed action - long-form sections: status timeline, the challenge, roles, rules, an escrow pull-quote for this exact pool, a prize table with winners and first-payout state, a key-dates timeline, the organizer and the 48-hour gallery - "More hackathons" from the shared listing cache Metadata, Event/breadcrumb structured data, the registration POST and the closed-registration banner are unchanged. The listing's cached read moves to lib/events/listing-data.ts so both pages share it, and the now-unused KeyDatesCard is removed.
…tions The hackathons hero wall is now three columns that loop forever: the outer two drift up, the middle one down. Tiles are smaller (4:5) so each column shows two or three at once, dealt round-robin from up to nine hackathons and topped up so no column runs short. Each column is rendered twice for a seamless loop (the copy hidden from assistive tech and the keyboard), the window fades at the top and bottom, and the motion pauses on hover or focus and stops for reduced motion.
The hackathons filter sidebar now behaves like the legal pages' table of contents: it sticks under the header while the results beside it scroll, capped to the window height with its own scroll if the open groups outgrow it. Filter groups start collapsed (Status stays open, and a group opens when one of its options is in use), so the sidebar is shorter than the results and actually has room to sit still.
…m the home page Removes three sections from the landing page: the "Run the whole event from one dashboard" product card, the "Organizers ghost winners" photo banner, and the navy open-infrastructure band (money-flow diagram, wave stats and take-part cards). Their components, the dashboard mock, the inverse LandingLink variant and all CSS only they used are deleted.
…e page Removes the "Built for everyone in the room" intro, the "Hire from verified Proof-of-Work" hiring section (profile showcase and three feature points) and the closing "Ready to run a hackathon people trust?" block from the landing page. The organizer and builder blocks now stand as their own sections with h2 headings, and the escrow-rule pull quote moves under the builder block. The closing CTA component stays in use on /hackathons; the hiring showcase CSS is removed.
Privacy, Terms, How Escrow Works, For Organizers and Contribute share LegalDocument, which now uses a new shared PageHero (kicker bar, large title, lead) and the landing frame. Sections open on a hairline, the On This Page rail stays put beside them, and numbered lists show their numbers again. No copy changes.
The page uses the shared PageHero, the four steps become story cards with numbered tick lines, and the newsletter banner becomes a tinted card in the frame. Copy is unchanged. The old how-it-works, hero-action and sparkle styles and the unused Sparkle component are removed.
… the blog The header bar now always takes the frame's width, gutter and hairline side rules, instead of only on pages that use the new layout, so the lines run unbroken from the navbar down every page. The blog index and posts move onto the shared PageHero and frame: hairline blog cards, a wide cover, the On This Page rail, and Keep Reading in a divided section. Copy is unchanged.
The Trust page uses the shared PageHero (with the simulation-mode notice), and the prize vaults and ledger entries become divided sections in the frame with hairline cards and table. Copy and data are unchanged.
The Proof-of-Work profile gets a tinted hero (name, headline, location, bio, skills, links) with the five verified metrics as tick-line stats, then Portfolio, Judge Endorsements and Hiring as divided sections. Copy and data are unchanged.
The organizer page gets a tinted hero (name, location, badges, about, links) with its hosted / escrowed / joined figures as tick-line stats, then Payout Performance, Hackathons and Trust History as divided sections with hairline cards. Copy and data are unchanged.
The two email unsubscribe pages sit on the tinted hero inside the frame, and the 404 page keeps its illustration and copy inside the frame's side rules. No copy changes.
The frame (and the header aligned to it) now grows up to 2200px instead of stopping at 1440px, so wide screens keep narrow side margins. Document text caps at a readable 1100px line length inside it.
Past 1800px wide, hero titles, statement headings, section and card titles and headline stats scale with the screen from the size they stop at below it (no jump), capped about 45% larger. Their width limits scale too so line breaks keep their shape. Smaller screens are unchanged.
CodeWithEugene
force-pushed
the
feature/stripe-style-hackathons
branch
from
September 28, 2026 13:08
d862b3e to
bbada93
Compare
3 tasks done
This branch was successfully deployed
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.
Summary
Three pieces of work, one commit each (plus a docs rule):
1. Hackathons listing (
/hackathons), redesigned as a searchable directory2. Hackathon detail page (
/hackathons/[slug]), laid out like a customer story3. Landing hero
Docs:
CLAUDE.mdnow forbids AI attribution in commits, PRs and files.Implementation notes
lib/events/listing.tsas pure functions, with unit tests intests/unit/hackathon-listing.test.ts.lib/events/listing-data.tsand is shared by both pages. It still usesrevalidate: 300and the existingrevalidatePath("/hackathons")calls. The cache key was bumped because the card shape gainedmaxTeams./hackathons.components/patterns/event-card.tsxandcomponents/patterns/key-dates-card.tsx, now unused.Test plan
tsc --noEmit,next lintand Prettier pass on the changed fileshackathon-listing.test.ts)db/seeds: