A SaaS site: the product playing in its window, live feature moments, pricing, a changelog, customers, a blog and careers.
A landing site in the manner of the best product-team tools: a big headline set flush left, then the product itself in a window that runs off the first screen. Three feature moments follow, each a small working piece of the app rather than an icon, then a dated changelog, one customer quote, three plans and a close. Around it are the pages a product company needs: a longer feature tour with three more vignettes, pricing with a full comparison and questions, a changelog with a page per release, customers and a full story, a blog, careers with a page per role, about, contact sales, sign in and sign up, privacy, terms, a beta waitlist and a not-found page. The sample product is Tern, an issue tracker, and every word lives in its content files.
Every section is built from Eased components you can also use on their own, and each one installs by itself from the Pro registry. It is designed dark first and works the same in light; reduced motion and keyboard use are handled the same way they are in the library.
A bug report, triaged to shipped
The hero's window is Tern itself: a sidebar, the board grouped by status in a Group-by Morph List, and the selected issue. It plays one story: a bug report lands in Triage, ⌘K opens the command menu, "assign ama" is typed and run, and the issue travels through In progress and In review to Done as its activity fills in. Every frame is real components changing state, and Play again replays it.
Home/
Header
The wordmark, a few text links, and Log in and Sign up over a full-width hairline.
Features
Three alternating feature moments, each a small live piece of the product: triage from the keyboard, a cycle's progress and an answer from Ask Tern.
Quote
One customer quote at display size with an avatar and role.
Pricing
Three plans with a billing switch that rolls the prices, the recommended plan raised.
Footer
The wordmark and its line, three link columns, the legal line and a status badge.
Waitlist/waitlist
Header
The wordmark, a few text links, and Log in and Sign up over a full-width hairline.
Waitlist
A focused waitlist page: one email field with inline validation, a confirmation whose place in line rolls up, and what you get.
Footer
The wordmark and its line, three link columns, the legal line and a status badge.
Features/features
Pricing/pricing
Header
The wordmark, a few text links, and Log in and Sign up over a full-width hairline.
Pricing
Three plans with a billing switch that rolls the prices, the recommended plan raised.
Footer
The wordmark and its line, three link columns, the legal line and a status badge.
Changelog/changelog
Header
The wordmark, a few text links, and Log in and Sign up over a full-width hairline.
Changelog page
The changelog: every release with its date and version, and a page per entry with its improvements, fixes and the entries either side.
Footer
The wordmark and its line, three link columns, the legal line and a status badge.
Changelog entries
Header
The wordmark, a few text links, and Log in and Sign up over a full-width hairline.
Changelog page
The changelog: every release with its date and version, and a page per entry with its improvements, fixes and the entries either side.
Footer
The wordmark and its line, three link columns, the legal line and a status badge.
Customers/customers
Customer story: Fernway/customers/fernway
Blog/blog
Blog posts
About/about
Careers/careers
Job posts
Contact sales/contact
Log in
Legal
Header
The wordmark, a few text links, and Log in and Sign up over a full-width hairline.
Legal
Privacy and terms: a sample-text note, the date last changed, and the text with its headings listed beside it.
Footer
The wordmark and its line, three link columns, the legal line and a status badge.
Not found/404
Download the starter
A Next.js app with every section, the content file and the Eased tokens. Unzip it, run pnpm install and pnpm dev, then make it yours in one file.
Install one section
Each section is its own Pro registry item, with the components it uses. Add it to an app that already has Eased set up.
npx shadcn add @eased-pro/saas-landing-hero