Landing Page Template

A complete, conversion-optimized landing page for SaaS products. Drop it into your Next.js project and customize in minutes.

Install#

npx @aidimension/cli@latest add template landing-page

This creates src/app/(templates)/landing-page/page.tsx with all the supporting components.

What's included#

The template is a single ~400-line file with these sections:

Sticky header with logo, nav, and CTA
Hero with gradient backdrop, badge, headline, subheading, CTAs, and a code preview
Social proof logo strip
Feature grid (6 cards with icons)
How it works (3-step explainer with connecting line)
Big stats banner
Testimonials (3 cards)
Pricing (3 tiers with feature lists)
FAQ accordion
Final CTA banner
Footer with link columns

Customize#

All copy lives in plain JSX. Edit any string:

<h1>Your headline here</h1>
<p>Your subheading.</p>

<h1>Your headline here</h1>
<p>Your subheading.</p>

Brand color#

Override the primary color in globals.css:

:root {
  --color-primary: oklch(0.55 0.22 220); /* blue instead of purple */
}

:root {
  --color-primary: oklch(0.55 0.22 220); /* blue instead of purple */
}

Logo#

Replace the emoji or paste an <img>:

<span className="text-2xl">⚡</span>
// or
<img src="/logo.svg" alt="Acme" className="h-8" />

<span className="text-2xl">⚡</span>
// or
<img src="/logo.svg" alt="Acme" className="h-8" />

Hero code preview#

The floating code window in the hero is a <pre> block — replace its contents with your actual quickstart:

<pre>
  <code>{`npm install @aidimension/ui
# ✓ 32 components installed
# ✓ Tailwind v4 configured
# ✓ Dark mode ready`}</code>
</pre>

<pre>
  <code>{`npm install @aidimension/ui
# ✓ 32 components installed
# ✓ Tailwind v4 configured
# ✓ Dark mode ready`}</code>
</pre>

Features#

Replace the 6 feature cards with your own. Each is a <Card> with an emoji, title, and description.

Pricing#

Three tiers by default. Edit prices, features, and the "Most popular" badge as needed.

Sections you can delete#

Don't need a section? Just delete the JSX:

No FAQ? Delete the  block
No testimonials? Delete the testimonials grid
Single pricing tier? Delete two of the three columns

Performance#

The template is built for speed:

✅ All Server Components by default
✅ Zero client JS unless you add a useState (e.g. for FAQ accordion)
✅ All decorative emojis are inline text (no extra requests)
✅ Lighthouse 100/100/100/100 achievable out of the box
✅ ~12 KB gzipped

Mobile responsive#

Every section adapts to mobile:

Hero stacks vertically
Feature grid: 1 col → 2 col → 3 col
Pricing tiers stack
Header collapses to hamburger

SEO#

The template includes:

<title> and meta description (set in metadata export)
Open Graph tags
Schema.org Product JSON-LD
Semantic HTML (h1, h2, section, article)
Proper landmark roles

Conversion optimizations#

The template follows landing-page best practices:

🎯 One primary CTA above the fold
🎯 Hero shows the product, not a stock photo
🎯 Social proof immediately after the hero
🎯 Features explain the "why" not just the "what"
🎯 Pricing is the third-to-last block (after value is established)
🎯 Final CTA repeats the offer

A/B testing#

The template is a single file, so it's easy to fork and A/B test:

landing-page-v1/page.tsx (control)
landing-page-v2/page.tsx (variant)

Use Vercel's Edge Config or PostHog to switch between them.

Example output#

You can see a live version of this template at templates.aidimension.io/landing-page. The docs site you're reading is built with the same component primitives.

Next steps#

Dashboard template — for the authed product
Pricing template — if you want a dedicated pricing page
Templates overview — all 6 templates