A SaaS website that shows the product
What does it actually look like? Every software site has to answer that before anyone starts a trial. This kit answers with your product: your own screens on a laptop and phones, in 3D.
Plenty of product sites answer with illustrations, abstract shapes or a video behind a play button. Here the interface is the picture: the screenshots you upload keep their colours, on devices without logos, lit and turning as the page scrolls. Visitors see what they’d be signing up for.
At the end come your plans, with prices and what each one includes, every button going where that plan starts: your sign-up page, a Stripe payment link, a page to talk to sales. The site doesn’t create accounts or bill anyone; that stays in your product.
What your site shows
Your product, on the laptop
The opening puts your desktop screen on a 14-inch laptop, with a phone in front turning round to your mobile view. It’s the first thing visitors see; the laptop slides away once they scroll on.
Four views, each in turn
Then four views of your product, on phones set in an arc — home, list, overview, detail. As the visitor scrolls, the arc swings round and each view takes its turn at the front.
What your product takes in
Short items you choose — new leads, tickets, invoices, whatever arrives in your product — sweep in from the edges and land on your empty list screen, row after row, until it’s full.
An overview, then a close-up
Behind your overview screen, blocks of colour rise into a grid like a calendar. Then a single detail view, with the background dimming around it. Each section carries your own title and text.
Plans a buyer can compare
Finally, your plans: up to four cards, with the phones moved to one side — a price and what it covers (a month, a user), the lines of what’s included, and a button that goes wherever that plan starts. Mark the one you recommend.
Have this ready
- A desktop screenshot at 1440 × 900: the view that best explains the product, with sample data in it
- Five phone-sized views (390 × 844) from your mobile layout or companion app: home, a list (full and empty), an overview and a detail view
- A handful of things your product receives — up to ten, a few words each
- One to four plans: name, price, what it’s per, what’s included, and the words and link for its button
- The address of your sign-up or trial page, for the main button
- The product’s name and slogan, plus the line that goes under the headline
- Brand colours as hex codes — one for the background, three for accents
Worth knowing
Choose the desktop screen that sells
The laptop holds one screen, so use the view where a new customer would see the reason to sign up: mid-task, not settings or an empty state. Fill it with invented sample data, never a real customer’s account.
Make the plans comparable
Keep the lines in the same order in every plan, open the bigger ones with “Everything in …”, and say exactly what the price covers: a user, a month, a year. Highlight the plan you’d pick for most customers.
The line under the headline works twice
The text under your headline is also the page’s description for search engines, the one Google often shows beneath your link. Say what the product does and who it’s for, in plain words and two sentences at most.
Questions
- Our product is used mostly on desktop. Does the kit show that?
- Your desktop screen opens the page, on the laptop behind the phone. After that the story is told on phones, so they need screens too: up to five, and a phone left without its own shows one of your others. Your web app’s mobile layout works; without one, the kit shows less of your product than you’d like.
- Does it handle sign-ups, trials or billing?
- No. It’s the marketing site: the main button goes to your sign-up page, where the trial begins; each plan’s button goes where that plan is bought — a Stripe link, your own checkout, a contact page. Accounts, trials and invoices stay in your product.
- Can we show per-seat pricing and a free tier?
- Yes. Each plan has a price and a free-text line for what it’s per — “a user / month”, “a month, billed yearly” — plus its list of what’s included. A free tier is a plan priced at zero, its button going straight to sign-up.
- What will it cost us to run?
- €500 for the kit, once; Promti charges nothing after that. Cloudflare’s free plan hosts a static site like this, so your only yearly cost is the domain, about €10–15. When a plan’s button goes to Stripe, Stripe keeps a small part of each payment — Promti takes nothing from your subscriptions.
- Can the site have docs, a blog or a changelog?
- Not inside the kit: it’s one page, with a legal page and a 404 beside it. Docs or a blog hosted elsewhere can go in the footer’s links, under any name. And it’s all ordinary HTML, CSS and JavaScript, so a developer can add pages.