Above the Fold: The 5 Elements Every SaaS Landing Page Needs

You just spent 4 hours writing a custom authentication middleware in Go, and it works flawlessly. Now you need to sell it. You open page.tsx, type <div className="min-h-screen">, and freeze. You drop in a generic "Welcome to my app" h1, center it, and close the preview tab because it looks like a 2004 Craigslist clone. Visitors decide if they trust your SaaS in exactly 3 seconds. If your above-the-fold layout requires them to read a paragraph to understand what your tool does, they will close the tab.

The Three-Second Death Window

When a user lands on your site, their cursor immediately drifts toward the back button. You have 3 seconds to answer three questions: What is this? Why should I care? What do I click next?

Developers fail here because we write landing pages like README files. We list technical specs instead of outcomes. A typical indie hacker workflow looks like this: grab a free template, realize the React components are outdated, spend 2 hours updating dependencies, and then copy-paste generic text like "The ultimate solution for data management" into the hero section. That converts at 0.01%. You need exactly five elements above the fold, arranged in a strict visual hierarchy. Anything else is friction.

The Only 5 Elements You Need

You don't need a scroll-triggered WebGL animation. You don't need a carousel of features. You need a headline, a subheadline, a primary CTA, social proof, and a visual.

Layout: Two-Column vs Centered

Centered layouts are for newsletters and personal blogs. Two-column layouts are for SaaS.

When you center a 60px headline, the ragged edges make the eye jump back and forth across the screen to find the start of the next line. Left-aligned text in a two-column grid creates a hard vertical line. This structural gravity pulls the user's eye straight down: Headline → Subheadline → CTA. The right column holds the visual. It is the most efficient way for a human brain to process your pitch.

Typography: Force the Hierarchy

If everything is large, nothing is important. Your visitors will read the H1 first, glance at the visual, read the CTA, and maybe read the subheadline. Your CSS needs to enforce this reading path.

Use a display font for the headline and a sans-serif for the body. The headline needs tight line spacing (leading-tight or leading-[1.1]) and negative letter spacing (tracking-tight). A 60px headline with default line-height looks broken.

// DO NOT DO THIS. 
// The visual weight is completely flat. Default line height creates massive gaps.
<h1 className="text-3xl text-black">Ship faster</h1>
<p className="text-xl text-gray-800">Our tool helps you build things.</p>
 
// DO THIS. 
// Force the user's eyes to the H1. Tighten the tracking and leading.
<h1 className="text-5xl md:text-7xl font-extrabold tracking-tight text-slate-900 leading-[1.1]">
  Ship faster. <span className="text-primary-600">Break nothing.</span>
</h1>
<p className="mt-6 text-lg md:text-xl text-slate-600 max-w-2xl leading-relaxed">
  The only CI/CD pipeline that automatically detects and reverts breaking schema changes before they hit production.
</p>
## The CTA: Stop Using "Get Started"
 
Your button is the single most important 200x50 pixel rectangle on the page. "Get Started" is a high-friction request. It implies work. "Get your API key" or "Generate your brand" are low-friction outcomes. Tell the user exactly what happens when the `onClick` event fires.
 
Visually, the CTA must be the highest-contrast element on the screen. If your background is white, your button needs to be a dark, saturated primary color. This is where most developer side-projects look cheap—they use standard `#0000FF` blue or arbitrary hex codes because they don't have a cohesive color scale.
 
If you don't want to spend 3 hours tweaking HSL values in Figma to build a proper palette, OneMinuteBranding generates a mathematically balanced 7-shade color scale (50-950) in 60 seconds for a $49 one-time payment. You copy the output, paste it into your `tailwind.config.ts`, and your `bg-primary-600` CTA instantly looks professional and passes WCAG AAA contrast requirements.
 
```ts
// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        // Generated by OneMinuteBranding
        primary: {
          50: '#f0fdfa',
          100: '#ccfbf1',
          // ... skipped for brevity ...
          600: '#0d9488', // Your CTA background
          950: '#042f2e', // Your CTA text hover state
        }
      }
    }
  }
}

Make the button massive. Add px-8 py-4 text-lg font-semibold. On mobile screens (max-w-sm), apply w-full so it spans edge-to-edge.

The Visual: Screenshots Destroy Illustrations

Do not use unDraw. Do not use generic isometric vectors of people high-fiving over a server rack. Visitors have banner blindness to corporate illustrations. They want to see the UI. They want proof that you actually built the software and it's not vaporware.

Take a high-resolution screenshot of your app's most impressive screen. Crop it so the text is legible even when scaled down to a 600px container. Wrap it in a subtle border and a massive shadow to lift it off the page.

<div className="relative mt-16 sm:mt-24 lg:col-span-6 lg:mt-0">
  <div className="rounded-xl bg-slate-900/5 p-2 ring-1 ring-inset ring-slate-900/10 lg:rounded-2xl">
    <img
      src="/dashboard-screenshot.webp"
      alt="The analytics dashboard showing real-time metrics"
      width={2432}
      height={1442}
      className="rounded-md shadow-2xl ring-1 ring-slate-900/10"
    />
  </div>
</div>

If you have an API-first product, use a stylized code snippet instead of a dashboard. A syntax-highlighted block of code showing how simple your API is converts better than any abstract graphic. Use Shiki or Prism.js to render a dark-mode terminal window with Mac window controls (the three red, yellow, green dots).

Building It: The Tailwind Blueprint

Here is the exact layout you need. It uses CSS Grid to split the screen into two columns on desktop, stacking them on mobile. It includes all five elements in the correct semantic structure.

export default function Hero() {
  return (
    <div className="relative overflow-hidden bg-white pt-24 pb-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
          
          {/* Left Column: Copy & CTA */}
          <div className="lg:col-span-6 lg:pt-4 text-left">
            
            {/* 1. Social Proof (Pre-headline) */}
            <div className="mb-6 flex items-center gap-x-3">
              <div className="flex -space-x-2">
                {[1, 2, 3, 4, 5].map((i) => (
                  <img 
                    key={i} 
                    className="h-8 w-8 rounded-full ring-2 ring-white" 
                    src={`/avatars/dev-${i}.jpg`} 
                    alt="User avatar" 
                  />
                ))}
              </div>
              <p className="text-sm font-medium text-slate-600">
                Trusted by 2,000+ engineers
              </p>
            </div>
 
            {/* 2. Headline */}
            <h1 className="text-5xl font-extrabold tracking-tight text-slate-900 md:text-6xl leading-[1.1]">
              Deploy serverless Postgres <span className="text-primary-600">in 12 seconds</span>.
            </h1>
 
            {/* 3. Subheadline */}
            <p className="mt-6 text-lg text-slate-600 leading-relaxed max-w-lg">
              Stop managing connection pools. Get a scalable, edge-ready database with built-in pgvector support and zero cold starts.
            </p>
 
            {/* 4. CTA */}
            <div className="mt-8 flex items-center gap-x-4">
              <a 
                href="/signup" 
                className="rounded-md bg-primary-600 px-8 py-4 text-base font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 w-full sm:w-auto text-center transition-colors"
              >
                Get your API key
              </a>
              <p className="text-sm text-slate-500 hidden sm:block">No credit card required</p>
            </div>
          </div>
 
          {/* Right Column: Visual */}
          <div className="mt-16 sm:mt-24 lg:col-span-6 lg:mt-0">
            <div className="rounded-xl bg-slate-50 p-2 ring-1 ring-inset ring-slate-900/10 lg:rounded-2xl">
              {/* 5. The Visual */}
              <img
                src="/cli-demo.webp"
                alt="Terminal showing instant database deployment"
                className="rounded-lg shadow-2xl ring-1 ring-slate-900/10 w-full object-cover"
              />
            </div>
          </div>
          
        </div>
      </div>
    </div>
  );
}

Notice the specific spacing classes. pt-24 pb-32 gives the hero section breathing room before the next section begins. The max-w-lg constraint on the subheadline prevents the text from stretching too wide and becoming unreadable.

FAQ

Should I put a video above the fold? No. Videos require a click to play, and autoplaying videos destroy your Lighthouse performance score. A heavy .mp4 background drops your First Contentful Paint by 1.5 seconds. Use a static .webp screenshot. If you absolutely must show motion to explain the product, use a highly optimized, looped 2MB .webm file without audio controls.

How many CTAs should I have? One primary CTA. You can add a secondary "Read the Docs" link styled as ghost text (text-slate-600 hover:text-slate-900), but do not put two solid buttons next to each other. It creates decision fatigue. If you force the user to choose between two equally weighted paths, they will choose neither.

Does the background need to be white? A dark mode hero (bg-slate-950) works exceptionally well for developer tools, but you must invert your text colors (text-white for H1, text-slate-400 for subheadline). More importantly, you must verify your primary CTA color still passes contrast ratios against a dark background. A primary-600 that looks great on white will often look muddy and unclickable on slate-950. OMB outputs both light and dark mode CSS variables via globals.css to handle this mapping automatically.

Where do I get the user avatars for social proof if I'm pre-launch? If you have 0 users, don't fake it. Replace the avatar stack with a "Backed by YC" logo, a "Product Hunt #1" badge, or an "Open Source" GitHub star counter badge. If you have absolutely none of those, remove the social proof element entirely until you get your first 10 beta users. Never use stock photos for avatars.

Open your landing page right now. Press F12, select the DOM inspector, and delete every element in your hero section that isn't the headline, subheadline, CTA, visual, or social proof. If your page suddenly makes more sense, leave it deleted in your source code. Fix your H1 line-height to leading-tight, make your CTA button 20% larger, and swap your abstract vector art for a literal screenshot of your application.