# A landing page that says what it is in five seconds

> Make the first screen say what the product is, who it is for and what to do next, and load fast.

Canonical: https://abacklaunch.com/prompts/landing-page-above-the-fold
Last updated: 2026-10-26

Version 1.0.

Launch visitors to the production site decide in a few seconds whether to stay. Review the first screen of the landing page, on a phone and on a laptop, and make it answer three questions at a glance: what is this, is it for me, and what do I do next. Show me copy changes before making them.

Site: not given. Find the production URL in the project config, or ask me.

## Ground rules

1. Read before you write. Explore the parts of the codebase this job touches and tell me what is already in place.
2. Plan, then stop. Give me a numbered plan: what you will change, in which files, and why. Wait for my approval before editing anything.
3. Fix things at their source (the shared layout, the config, the generator), not with one-off patches page by page.
4. Keep the project's conventions: its framework APIs, file layout, naming and code style. Add no new dependency without asking.
5. Where something is already done well, say so and leave it alone.

## You will not

- Edit `.env` files, secrets or API keys, or print their values.
- Deploy, push, merge or publish anything.
- Delete data, or run migrations or scripts against a production database.
- Add tracking, third-party scripts or links to any site I did not ask for.
- Change copy, design or behaviour that this job does not need.
- Invent testimonials, user counts or customer logos.
- Publish copy I have not approved.

## Your stack

- Framework: Work out the framework, router and build output from the project files (package.json, lockfiles, framework config) before planning, and say which you found.
- Host: Work out where the site is hosted from the config files (vercel.json, netlify.toml, wrangler config, Dockerfile, fly.toml) and say which you found.

## Steps

### 1. Read it like a stranger

Describe what a first-time visitor sees above the fold at 390px and 1280px wide: the headline, subhead, primary button, image, and anything competing for attention (banners, popups, cookie notices). Say what a stranger would think the product does from that screen alone.

### 2. Headline and subhead

Propose two or three headline options that name the outcome or the category plainly ("Invoices that chase late payments for you"), not a slogan, and a subhead that says who it is for and how it works in one sentence. Keep the current one as an option. Wait for my choice before changing copy.

### 3. One clear next step

One primary call to action with a specific label ("Start free", "Try the demo"), visible without scrolling on a phone. Secondary actions look secondary. Remove or delay anything that covers the first screen on load, such as newsletter popups.

### 4. Proof and speed

Add real proof near the button where it exists: a short testimonial, a number of users, a logo strip, a launch badge. Never invent it. Make the hero image or video load fast: correct size, modern format, width and height set, not lazy-loaded since it is above the fold.

## Done means

- [ ] The first screen says what the product is and who it is for, in copy I approved.
- [ ] One primary call to action is visible without scrolling at phone width.
- [ ] Nothing covers the first screen on load.
- [ ] Any proof shown is real, and the hero image is sized and not lazy-loaded.

## Report back

When you finish, give me:

- what you changed, file by file;
- anything you skipped, and why;
- anything I must do by hand (DNS records, dashboards, accounts, deploys);
- how to check each change on the live site.

## Related

- [A pricing page people trust](https://abacklaunch.com/prompts/pricing-page)
- [Remove friction from sign-up](https://abacklaunch.com/prompts/signup-friction)
- [A testimonial wall from real reviews](https://abacklaunch.com/prompts/testimonial-wall)