Before you launch your product, you need a way to capture leads, build anticipation, and communicate your value proposition. A coming soon page with email capture, a pricing page that converts, and a pitch deck that tells your story are essential pre-launch assets.

Startup pitch deck HTML templates and coming soon page templates give you professional, conversion-optimized pages without hiring a designer.

Pre-Launch Pages Every Startup Needs

Before your product is ready, these pages drive your early traction:

Coming Soon Page

A minimal landing page that communicates your value proposition and captures email signups. Include a clear headline, a brief description of what you are building, and an email input with a compelling CTA.

Pricing Page

Even before launch, publishing your pricing builds credibility and helps qualify leads. Show your plans, feature comparisons, and a highlighted recommended option.

Waitlist Page

For products with limited early access, a waitlist with social proof (number of signups, testimonials) creates urgency and exclusivity.

The SaaS Landing Page Kit includes coming soon, pricing, and waitlist templates.

Coming Soon Page

// app/coming-soon/page.tsx
import { NewsletterForm } from './NewsletterForm'

export default function ComingSoonPage() {
  return (
    <div className="flex min-h-screen items-center justify-center px-4">
      <div className="mx-auto max-w-2xl text-center">
        <div className="inline-flex items-center gap-2 rounded-full bg-brand-50 px-4 py-1.5 text-sm font-medium text-brand-700">
          Launching Q3 2026
        </div>
        <h1 className="mt-6 text-5xl font-bold tracking-tight">
          Something Amazing
          <span className="block text-brand-600">Is Coming</span>
        </h1>
        <p className="mx-auto mt-6 max-w-lg text-lg text-gray-600">
          We are building the next-generation platform for developers.
          Be the first to know when we launch.
        </p>
        <div className="mt-10">
          <NewsletterForm />
        </div>
        <div className="mt-12 flex justify-center gap-8 text-sm text-gray-500">
          <div>
            <span className="block text-2xl font-bold text-gray-900">2,847</span>
            Waitlist Signups
          </div>
          <div>
            <span className="block text-2xl font-bold text-gray-900">127</span>
            Days Until Launch
          </div>
        </div>
      </div>
    </div>
  )
}

Pricing Page with Comparison

// components/PricingTable.tsx
const plans = [
  {
    name: 'Starter',
    price: 29,
    features: ['1 project', '10GB storage', 'Basic support', 'Community access'],
    cta: 'Get Started',
  },
  {
    name: 'Pro',
    price: 79,
    popular: true,
    features: ['10 projects', '100GB storage', 'Priority support', 'Team collaboration', 'API access'],
    cta: 'Start Free Trial',
  },
  {
    name: 'Enterprise',
    price: 199,
    features: ['Unlimited projects', '1TB storage', 'Dedicated support', 'Custom integrations', 'SLA', 'SSO'],
    cta: 'Contact Sales',
  },
]

export function PricingTable() {
  return (
    <div className="grid gap-8 lg:grid-cols-3">
      {plans.map(plan => (
        <div key={plan.name} className={`rounded-2xl border p-8 ${plan.popular ? 'border-brand-600 ring-2 ring-brand-600' : ''}`}>
          {plan.popular && (
            <span className="rounded-full bg-brand-600 px-3 py-1 text-xs font-semibold text-white">
              Most Popular
            </span>
          )}
          <h3 className="mt-4 text-xl font-bold">{plan.name}</h3>
          <p className="mt-2">
            <span className="text-4xl font-bold">${plan.price}</span>
            <span className="text-gray-500">/month</span>
          </p>
          <ul className="mt-6 space-y-3">
            {plan.features.map(f => (
              <li key={f} className="flex items-center gap-2 text-sm">
                <svg className="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
                {f}
              </li>
            ))}
          </ul>
          <button className="mt-8 w-full rounded-xl bg-brand-600 py-3 font-semibold text-white">
            {plan.cta}
          </button>
        </div>
      ))}
    </div>
  )
}

Waitlist with Social Proof

'use client'

import { useState } from 'react'

export function WaitlistForm() {
  const [email, setEmail] = useState('')
  const [submitted, setSubmitted] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    await fetch('/api/waitlist', {
      method: 'POST',
      body: JSON.stringify({ email }),
    })
    setSubmitted(true)
  }

  if (submitted) {
    return (
      <div className="rounded-xl bg-green-50 p-6 text-center">
        <p className="font-semibold text-green-800">You are on the list!</p>
        <p className="mt-1 text-sm text-green-600">We will notify you when we launch.</p>
      </div>
    )
  }

  return (
    <form onSubmit={handleSubmit} className="flex gap-3">
      <input
        type="email"
        value={email}
        onChange={e => setEmail(e.target.value)}
        placeholder="Enter your email"
        className="flex-1 rounded-xl border px-4 py-3"
        required
      />
      <button
        type="submit"
        className="rounded-xl bg-brand-600 px-8 py-3 font-semibold text-white"
      >
        Join Waitlist
      </button>
    </form>
  )
}

Get your pre-launch pages live with the SaaS Landing Page Kit and start building your waitlist today.

Browse all 200+ templates and starter kits.