Theme · Landing · Beginner
Newsletter Waitlist Landing
Newsletter waitlist = a serif masthead, an indigo subscribe hero with one email field, and a latest-issues archive.
Tips
One field, one CTA above the fold. Every reason should remove a doubt a skeptic already has.
See also
Build a waitlist landing page for "ByteSize", a daily developer-newsletter.
STYLE
- Deep indigo-to-violet gradient hero (#11132b → #4f46e5) with a soft glow
- White type on the hero, calm off-white body below
- One electric accent (#6366f1) for the primary "Join the list" CTA
LAYOUT
- Masthead nav: serif wordmark "ByteSize"; links Issues / Archive / About; an indigo "Subscribe" pill
- Indigo gradient hero: kicker "DAILY, IN 5 MINUTES", serif headline "The news that actually ships", a white email form ([email protected] + "Join the list" button), line "38,000 engineers read it every weekday"
- "Latest issues" list: serif titles with dates - Issue #412 The caching episode (Sep 08 - 5 min), Issue #411 Postgres ate my index (Sep 07 - 4 min); tall adds Issue #410 Edge functions grow up (Sep 06 - 6 min)
COMPONENTS
- Masthead nav: serif wordmark, three links, Subscribe pill
- Hero: kicker, serif headline, white email form, reader count
- Latest issues: serif titles with issue numbers, dates, read times
INTERACTION
- The email form is the only filled element in the hero; issue titles underline on hover; the Subscribe pill carries the accent.
TECHNICAL
- React, Tailwind CSS, shadcn/ui