AI SaaS Product Landing Page Template

Flashly is the SaaS template in the Siteglade library. It is a complete product-marketing landing page for an AI email-campaign platform: a bright, trustworthy blue-on-slate light theme that walks a visitor from the headline all the way down to a contact form, without a single dead section in between.

It is aimed at the moment where a software product needs a page more than a website — a launch, a beta list, a pricing announcement. Everything a buyer asks before signing up is already there in the right order, so the work is replacing copy rather than inventing an information architecture.

It is forkable from the Siteglade template picker on the Pro and Max plans, with a public live preview. Forking copies the whole Next.js project into a chat session you can keep editing by prompt or in the built-in code editor.

A product page built around one conversion path

The section order is the argument. The hero states what the product does, the split feature grid explains how, the metric cards give the result a shape, and the media cards section — the one headed "Built for Modern Teams" — shows the product in context before the page ever mentions money. Only then does the pricing carousel appear, followed by testimonials that answer the doubt pricing creates, an FAQ that answers the rest, a blog strip for depth, and a contact call to action.

That ordering is the hard part, and it is what you inherit by forking. All the copy lives in one place: the template centralizes its text in data/content.ts, so a rewrite is a single file edit rather than a hunt through a dozen components — which is also why the Siteglade agent rewrites this template quickly and cleanly.

Every section that ships in the project

Each block is its own file under components/sections/, so you can delete one without unpicking the others. The page composes them top to bottom in app/page.tsx:

• Navbar — sticky top navigation with anchor links to each section id
• Hero — headline, supporting copy and the primary call to action
• Features grid split — the main capability grid, split text and media
• Metrics feature cards — numeric proof cards for outcomes you can state
• Features media cards — the secondary "Built for Modern Teams" showcase
• Pricing layered cards — an Embla carousel of stacked plan cards
• Testimonial detailed cards — long-form quotes with an avatar group
• FAQ two column — question and answer pairs in an editorial two-column layout
• Blog simple cards — a three-card strip for posts or changelog entries
• Contact CTA — the closing conversion block
• Footer — link columns and legal line

Design notes

The palette is deliberately light. Slate text on near-white, blue as the single accent, and gradient treatment reserved for headings so the emphasis lands on words rather than on boxes. Behind everything sits a fixed light-rays background rendered at low opacity, which gives the page a faint centre glow that never competes with the content in front of it.

Motion is used to pace reading, not to perform. Lenis drives smooth scrolling, a shared ScrollReveal wrapper fades sections in as they enter the viewport, and a TextAnimation helper handles heading reveals. Icons come from lucide-react at a consistent stroke weight, and the pricing carousel is the only component with real interaction state.

Because Tailwind v4 runs on a precompiled theme here, color and spacing are token-level decisions — changing the accent is a token edit, not a search-and-replace across class names.

The stack under the hood

This is a normal, current Next.js project — nothing bespoke, nothing that only runs inside Siteglade. If you export it to GitHub or download the code, it builds the way any Next.js app builds.

• Next.js 15 with the App Router
• React 19 and TypeScript
• Tailwind CSS v4 with a precompiled theme
• Framer Motion 11 for reveals and transitions
• Lenis for smooth scrolling
• Embla Carousel for the pricing rail
• lucide-react for icons

Adapting it with a Siteglade prompt

Fork the template, then describe the product you actually sell. The agent edits the real files in the project and the sandboxed preview iframe updates while it works, so you watch the page become yours section by section. If an edit breaks the preview, the server runs a bounded auto-fix loop and repairs it without you intervening.

A prompt that gives the agent a product, an audience and a tone will get further than one that only asks for a color change. Something like: "Rebuild this as the landing page for Ledgerly, an AI bookkeeping tool for freelance designers. Keep the section order. Rewrite the hero around getting quarterly taxes done in an evening, change the four feature cards to receipt capture, mileage tracking, quarterly estimates and export to an accountant, replace the metric cards with hours saved per month, and make the pricing carousel three tiers: Solo, Studio and Firm. Swap the blue accent for a deep green."

From there, iterate in short instructions — "make the FAQ six questions", "shorten every testimonial to two sentences". You can also click elements directly in the preview with the visual style editor to change type, spacing and images without writing a prompt.

What to change first

In rough order of impact, before you touch anything visual:

• The hero headline — it is the only line most visitors read
• The plan names, prices and feature lists in the pricing carousel
• The metric cards, which should carry numbers you can actually defend
• Testimonials — replace the placeholders with real quotes or remove the section
• Site title, description, favicon and share image in Siteglade site settings, so search results and link previews read correctly

Last updated: 2026-08-16