Add human design touches. Refactor: Replace custom HTML structures wi…

[kevindees]

TL;DR: This PR modernizes the site's look using the brand we already have (--color-primary, --color-success, Geist, the existing logo, and photography). Nearly all of it is Blade templates and Tailwind classes. It looks like a big change because the design touches many files — but most of the diff is repeated markup collapsing into ~8 small Blade components, with pages rewritten as short component calls. Also, the copy and text are the same as the current live site.

I tried to keep the ethos of this PR simple: make the design feel more polished and less broken than what we have today. At this stage, I wouldn’t overthink the design direction or spend time debating design decisions. The goal is simply to clean things up, fix inconsistencies, and tune the UI so it feels more cohesive and intentional.

---

Why now: the current design is already inconsistent in ways users can see:

1. Buttons exist in three shapes and sizes (rounded-full pills in the nav and Slack page, rounded-lg everywhere else, three padding scales, mixed font weights).
2. The nav's active state changes font-weight, which shifts the layout; its dropdowns are hover-only and invisible to keyboard users.
3. Hero overlays are brand-indigo on the homepage but generic gray-900 on HG Nights; eyebrow text was brand green on dark indigo (~2.4:1 contrast — below readable).
4. Headings flip between font-light/bold and centered/left page to page; event date formats differ between pages.
5. The body had no background color at all — dark-mode browsers rendered the site on a black canvas.

Overall, the design improves:

1. Element continuity — one button component (one size, three variants), one heading component, one hero component (plain / image / interactive backgrounds, focal-point control), one stat, one CTA banner, one event-row partial shared by home, events, and org pages. Future pages compose these instead of re-inventing them.
2. Readability and contrast — light-on-dark text bumped to accessible tints, active nav states use a soft background instead of a weight change, explicit white canvas, larger mobile type per breakpoint.
3. Accessibility — keyboard-accessible dropdowns, 48px touch targets, role="list", aria labels, and every animation respects prefers-reduced-motion.
4. Zero dependency cost — no new packages. Geist Mono ships from the already-installed geist package; tech logos are CC0 SVGs committed to public/img.

Suggested review path: read resources/views/components/ first (8 files, all short) — that's the whole design system. Everything after that is called sites. pint passes, php artisan test passes, yarn build is clean, and every page was verified at desktop and mobile widths.

OLD

NEW

[kevindees]

I have another design PR ready with more design changes, but I felt taking baby steps with design and smaller iterations is a less demanding path.

[oliviasculley]

This seems like such a massive improvement I want to just merge it in now, but I think we should get bogdan's thoughts on using x-whatever as the prefix, not sure if that's convention for laravel or not

but this PR is super awesome and we should fast track this!!

Edit: Yep seems like Laravel convention lol, we already had x-nav-link so I think we're good to merge this

[allella]

Post merge PR review.