Northlight SaaS Landing Page
A software product landing page template where the app's own screen is pinned and driven by the scroll, with pricing, a changelog and contact, nothing stored.
Designed for
- Small software products that want the product itself on the page
- Bookkeeping, invoicing and finance apps for freelancers
- Founders launching a paid app with three plans
- Teams that ship often and want a public changelog
Key highlights
- Pinned app screen driven by the scroll
- Four states: invoices, expenses, taxes, export
- Rendered screens with realistic data, no screenshots
- Three plans with the middle one featured
- Monthly and yearly pricing toggle
- Accordion FAQ and a billing FAQ
- Changelog of dated releases
- Every button opens a prepared email
- Contact page with the office and the founders
About this template
Northlight is a landing page template for a software product, built on one idea: the product is the page. The app's main screen, rendered in code with data that looks real, stays pinned in the viewport while the text scrolls beside it and drives the screen through four states. The demo is a bookkeeping app for freelancers made by a small team in Berlin, with euro amounts, invoice statuses and a monthly chart.
The home page opens with the promise in large type over the pinned screen, then the four driven states (the invoice list fills row by row, receipts attach to expense lines, the quarter's tax summary slides in, one click produces the accountant's file), a row of six customer names set in type, four customer words with their trades, three plans in one row with the middle plan featured, an accordion FAQ of eight questions and a closing band. Product expands the four moments into full sections with screens and short lists. Pricing carries the three plans with a yearly toggle, a twelve-line comparison and the billing FAQ. Changelog lists six dated releases, newest first. Contact gives the email, the office with a map and the two founders with LinkedIn links. On phones the pinned screen becomes a band that changes state above each section.
To make it yours, describe your product in a chat with Firevibe: its name and promise, the four moments you want shown and the data on each screen, your plans and prices, your customers' words, your releases and your office. The pinned screen and its states are rebuilt around your product; nothing on the page is a screenshot.
Best use cases
Bookkeeping software
The demo shows invoices, expenses, quarterly VAT and the accountant export as one scroll, with customer words from a photographer, a translator, a carpenter and a designer.
Invoicing app
The invoice state fills a list of clients, numbers, amounts and Paid or Sent statuses; the Product page describes reminders and recurring invoices.
Expense tracking product
The expense state attaches receipts to three merchant lines and shows the month's spending and reclaimable tax.
Any app sold in three plans
Pricing is one row of three plans with six lines each, a yearly toggle that charges for ten months, and a button per plan that opens an email with the plan in the subject.
How it works
Use the template
Sign up or log in, and the template's code is copied into a new project of your own. The site is served right away, at its own address.
Change it by chat
Describe what you want different: the words, the images, the pages, the colors. Firevibe edits the code and the preview updates.
Publish
Put the site live on a firevibe.dev address, or connect your own domain.
Features
Pinned product screen
The rendered app screen stays in view while the narrow text column scrolls past it and changes what the screen shows.
Four scroll-driven states
Invoices fill in, receipts attach, the tax summary slides in and the export completes, each with a short exact transition.
Screens rendered in code
Every product view is built from real components with realistic names, amounts and dates, so it stays sharp at any size and is easy to change.
Featured middle plan
Three plans sit in one row with the middle one lifted and marked, each listing six things it includes.
Yearly toggle
The Pricing page switches between monthly prices and yearly prices that give two months free.
Two FAQs
An accordion of eight plain questions on the home page and a billing FAQ on Pricing, each answer animating open.
Dated changelog
Six releases with dates and two sentences each, newest first, on their own page.
Prepared emails everywhere
Start free, the plan buttons and the newsletter line all open an email with a prepared subject; nothing is stored and there is no sign-up form.
Contact with the founders
The Contact page groups the email, the office address with a map and the two founders with LinkedIn links.
Phone layout
On a phone the pinned screen becomes a full-width band that cross-fades its state above each text section.
More landing page templates
See all
Paper Plane Design AgencyA design agency website template: a horizontal filmstrip of twelve works with the manifesto in the gaps, a custom cursor, a command palette, case studies.
Rowe and Castellan Law FirmA law firm website template set like a broadsheet: a masthead with a live dateline, two editorial columns with marginal notes, numbered sections, plain fees.
Harbourline Real EstateA real estate agency website template: listings filtered in the browser, listing pages with galleries and inspections, sold results, suburb guides, the agents.Like what you see? Make it yours.
Start for free