Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Plotline, a Next.js template

product planning SaaS landing page

A landing page for a product-planning tool where requests, roadmaps and releases live in one workspace. The hero holds a working app in a browser frame on a painted sky: a timeline where dragging one bar moves every linked project after it, a board, a task list you can tick off, and a weekly update that types itself, with teammates' cursors drifting across. Then come a logo wall, how it works in four live demos (a request inbox you can filter and upvote, a Now / Next / Later board, tracking with a blocker to escalate, and release notes you publish), stats that count up, the new weekly-update feature, customer stories whose drawings play on hover, a quote, pricing with a team-size slider, a FAQ, a changelog and a closing call to action. Plotline and every company, person and figure are invented sample content.

  • SaaS
  • Advanced
  • 1 page
  • 13 sections
Plotline home page
Open it live

Inside the page

Screens from the live template. The first one is open to everyone; Pro unlocks the other 3.

What's in it

Sections, top to bottom

  1. 1Navigation
  2. 2Hero with Working App Mock
  3. 3Logo Wall
  4. 4How It Works with Live Demos
  5. 5Stats
  6. 6Weekly Updates Feature
  7. 7Customer Stories
  8. 8Quote
  9. 9Pricing with Team Size Slider
  10. 10FAQ
  11. 11Changelog
  12. 12Call to Action
  13. 13Footer

Built in

  • A working app in the hero: timeline, board, list and updates views behind tabs, in a browser frame that tilts flat as you scroll
  • Drag the onboarding bar (or use the arrow keys) and the linked projects follow on softer springs, with a toast saying how far they moved
  • How it works as four live demos: upvote and filter requests, pull cards across a roadmap board, escalate a blocker, publish release notes
  • A sticky step list on wide screens that follows the demo you are reading, with a progress line
  • Customer stories whose drawings play on hover, and stats that count up once on screen
  • Pricing with a monthly or yearly switch and a team-size slider that totals every plan with rolling numbers
  • Painted skies with drifting light and film grain behind the mocks, all drawn in CSS, so there are no image files
  • Inter Tight and Geist self-hosted (both Open Font Licence), reduced-motion support

Run it on your machine

  1. Get the code

    Get Pro or lifetime access, then download the source zip from this page.

  2. Install

    In the project folder:

    $ npm install

  3. Start it

    Then open localhost:3000.

    $ npm run dev

More templates

See all templates

Make Plotline yours

Included in Pro, $49.99 a year, along with every other template. Swap in your words and colours and ship it.

Live preview