Skip to content

feat(ui): rebuild landing page on a Stripe-style grid - #53

Merged
CodeWithEugene merged 1 commit into
mainfrom
feature/stripe-style-landing
Sep 28, 2026
Merged

CodeWithEugene merged 1 commit into
mainfrom
feature/stripe-style-landing

Conversation

@CodeWithEugene

@CodeWithEugene CodeWithEugene commented Sep 28, 2026 •

Copy link
Copy Markdown
Owner

Summary

Rebuilds the home page (app/(marketing)/page.tsx) using Stripe's landing-page structure, keeping HackVillage's fonts, colour tokens and pill-button system.

  • Frame: one continuous ruled column with hairline side rules and horizontal rules between sections. The navbar is now left-aligned (logo and links left, actions right), and on the landing page it lines up with the frame.
  • Hero: two-tone statement heading plus a brand-blue SVG ribbon.
  • Partner marquee: Salamander Tech Hub, Technetium Kenya and SkillsSync Global.
  • Bento product cards: mock screens for the prize vault, 50/50 payouts, judging, Proof-of-Work, the public ledger and the organizer dashboard.
  • Photo banner: "Organizers ghost winners. We fixed that."
  • Interactive trust stats: the stats work as a tab menu with a sliding gradient indicator. A canvas burst shows what each stat means (100% / 50% / 1hr sweep / 0%) and follows the cursor. It auto-cycles, pauses on hover or focus, stops when a stat is clicked, and respects reduced motion.
  • Audience sections: organizers (case study and accordion), builders (journey carousel and promos), hiring (showcase, features, pull quote).
  • Navy open-infrastructure band: money-flow diagram, waves with stats, and three ways to take part.
  • Latest posts and closing CTA: latest posts come from lib/blog, followed by a closing call to action.

The "What Is HackVillage?" copy is unchanged word for word, for SEO and answer engines. The old landing components (landing-hero, landing-about, builder-journey, trust-impact) and their CSS are removed; /how-it-works still uses the hero-action* rules, so those stay.

No escrow, payout or contract code is touched.

Notes for review

  • The mock screens use sample names and figures ("Team Jua", "Wanjiku K.", "Mombasa Fintech Sprint", KES amounts). The rules they illustrate are the platform's (5% fee on top, 50/50 tranches, 30-day milestone).
  • Partner logos aren't linked yet; the Technetium and SkillsSync URLs are still needed.

Test plan

  • tsc --noEmit and next lint pass
  • Checked in the browser at 1440px, 1920px and 375px, in light and dark mode, with no horizontal overflow
  • Carousel arrows, accordion rows, stat tabs, indicator, canvas states and pointer response work in headless Chrome
  • /how-it-works renders unchanged after the CSS cleanup

Restructure the home page around one continuous ruled frame with
two-tone statement headings, keeping HackVillage fonts, colours and
pill buttons:

- hero with a brand-blue SVG ribbon and a left-aligned navbar that
  lines up with the frame
- partner logo marquee (Salamander, Technetium Kenya, SkillsSync)
- bento product cards with mock screens (vault, payouts, judging,
  Proof-of-Work, ledger, organizer dashboard)
- photo banner, interactive trust stats (tab menu, sliding indicator,
  canvas burst that illustrates each stat and follows the cursor)
- organizer / builder / hiring sections, navy open-infrastructure
  band, latest blog posts and a closing call to action

The "What Is HackVillage?" copy is unchanged for search and answer
engines. Old landing components and their CSS are removed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@CodeWithEugene
CodeWithEugene merged commit e39bad3 into main Sep 28, 2026
4 checks passed
CodeWithEugene added a commit that referenced this pull request Sep 28, 2026
Restructure the home page around one continuous ruled frame with
two-tone statement headings, keeping HackVillage fonts, colours and
pill buttons:

- hero with a brand-blue SVG ribbon and a left-aligned navbar that
  lines up with the frame
- partner logo marquee (Salamander, Technetium Kenya, SkillsSync)
- bento product cards with mock screens (vault, payouts, judging,
  Proof-of-Work, ledger, organizer dashboard)
- photo banner, interactive trust stats (tab menu, sliding indicator,
  canvas burst that illustrates each stat and follows the cursor)
- organizer / builder / hiring sections, navy open-infrastructure
  band, latest blog posts and a closing call to action

The "What Is HackVillage?" copy is unchanged for search and answer
engines. Old landing components and their CSS are removed.

This branch was successfully deployed

1 active deployment
Preview — f4992c8a Deployed Sep 28, 2026 by vercel[bot]
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.

1 participant