Theme · Landing · Beginner
Event / Conference Site
Event site = a nav with tickets, an event hero, track pills, a session grid, and ticket tiers.
Tips
Keep the dark stage calm and let the violet accent carry the brand. Put the speaker name under each talk so attendees can scan the lineup fast.
See also
Build a dark, modern conference site for a frontend event called "ForwardJS 2026".
STYLE
- Deep navy #0a0e1a base, light text #e8eaf2, violet accent #6c5ce7
- A violet radial glow in the hero; hairline rgba(255,255,255,0.08) borders; 10px radii
- System sans; the accent appears on the primary button, the active track, and ticket prices
LAYOUT
- Top bar: "ForwardJS" wordmark left, links Agenda / Speakers / Sponsors, a pill "Get tickets" button right
- [tall] Hero: kicker "Sep 24–25 · San Francisco", headline "ForwardJS 2026", one supporting line, and a "Get tickets" button
- A single row of track pills: Talks (active), Workshops, Panels
- A session grid (3 across desktop): each card has a time, a session title, and a speaker
- 09:00 — Keynote: The Edge of UI — A. Rivera
- 11:30 — Building with AI Agents — K. Osei
- 14:00 — Design Systems at Scale — M. Lindqvist
- [tall] Ticket tiers: Early $199, Pro $349 (highlighted), Team $999
- [tall] Footer: "© 2026 ForwardJS" + Venue · Code of Conduct
COMPONENTS
- Navbar, button, card, badge
- Session card: time (accent), title, speaker
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui