Skip to main content
Frontend Glossary

Layouts · Page types

Landing Page

Also called: Marketing page, Promo page, Product homepage, Sales page

A long page built to promote a product or campaign. Starting with a big headline, it walks through the benefits, the proof and the pricing, guiding visitors to click the same call-to-action button.

Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.

How to tell AI

Swap in your own content first

Build a product landing page with these sections from top to bottom: a sticky nav (logo, anchor links to Features/Pricing/FAQ, and a "Start free trial" button); a hero with a big headline, a subheadline and the primary button on the left and a product screenshot on the right; three columns of key benefits; customer reviews; three pricing tiers with the middle one highlighted; an FAQ accordion; and one more call-to-action button plus the footer at the bottom. Alternate section backgrounds between white and light gray.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Landing Page is what you need.

Use Landing Page when

  • The page is for first-time visitors and needs to introduce and sell a product or campaign
  • The page has just one core goal, like signing up, buying or booking
  • The content is mainly persuasive and needs images and text to explain the benefits clearly

Pick something else when

  • Tool pages that signed-in users use every day to work with data

    Use insteadSidebar Layout

  • You need to show lots of similar records for users to filter and compare

    Use insteadData TableCard Grid

  • Users already know what they want to do and just need one entry point, like logging in

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    A vague hero headline like "Welcome to our platform", so after reading it you still don't know what the product does

    The wireframe below shows this case. The red dashed box marks the problem.

  2. 02

    Several buttons with different goals on the page, so visitors don't know which one to click

  3. 03

    Every section uses the same text-left, image-right layout, with no change in rhythm

  4. 04

    Large images aren't compressed, so the first screen takes several seconds to load

Anti-pattern, matches item 01

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A series of full-width sections stacked vertically (hero, key benefits, case studies or reviews, pricing plans, FAQ, a closing call-to-action section and the footer), with alternating backgrounds.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A landing page is where users arrive after clicking an ad, a search result or a shared link. It usually has just one goal: get visitors to sign up, buy, book or download. A typical structure from top to bottom: a hero section (a big headline, a subheadline, a prominent call-to-action button and a product image), three to six key benefits, screenshots or a demo, customer reviews and partner logos, pricing plans, FAQs, and finally the call-to-action button once more and the footer.

Each section answers one of the visitor's questions: what is this, what's in it for me, why should I trust you, and how much does it cost. So the sections need a change in rhythm (alternating background colors, images and text switching sides), and the call-to-action button shows up again and again with the same wording.

It's different from tool pages like a Dashboard or a Data Table. The readers are strangers visiting for the first time, and the page is about persuading them, so it doesn't need complex navigation. The top usually keeps only the logo, a few anchor links and a "Start free trial" button.

Developer info
Term ID
layout-landing
DOM selectors
No DOM cues. This concept isn't detected directly on a page.
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026