← /notes

Landing Page

2026.04.25 · 8 min read

With AI growing increasingly powerful, the barrier to building has essentially vanished. Anyone can be a maker now. In that world, your landing page is no longer just a digital brochure — it is your pitch, your storefront, and often your only shot at a first impression before someone moves on.

A landing page is a lie — in the best possible way. It shows your product in its most optimistic form: the clearest headline you can write, the most believable proof you can show, the most frictionless path to one action. It is not the product. It is the argument that the product is worth trying.

What a landing page actually is

A landing page is a focused web page with a single conversion goal: a sign-up, a purchase, a download, a demo request. Unlike a homepage — which tries to serve every visitor — a landing page arrives with a specific audience already in mind.

// Homepage: general entry point
// Tries to answer: "Who are you?"

// Landing page: targeted entry point
// Tries to answer: "Why should I try this?"
// Audience: a visitor with a specific intent

Success is measured as a conversion rate — the percentage of visitors who complete the one target action. Everything on the page either helps that number or hurts it.

The anatomy

Every effective landing page is built from the same sections, in the same order. Click any row to see what it does and why it matters.

Navbarclick to read →

Heroclick to read →

Social Proofclick to read →

Featuresclick to read →

Testimonialsclick to read →

Footer CTAclick to read →

Above the fold

The fold is the line below which a visitor cannot see without scrolling. On the web it is not fixed — it shifts with screen size, resolution, and zoom. The only safe assumption: your hero must make the full argument before a single scroll happens.

const foldHeight = {
  mobile:  640,   // px — only navbar + hero guaranteed visible
  laptop:  768,
  desktop: 1080,
}

// The practical rule:
// assume the fold sits right below your hero

Switch viewports below to see which sections land above the fold on each device.

above fold

below fold

Writing the hero

The hero is a five-second interview. Most visitors decide to stay or leave based on what loads in the viewport. A hero contains exactly three things:

Headline — one sentence stating the outcome the product delivers. Not the features. Not the process. The outcome.
Sub-headline — one or two sentences of context: who it's for, how it works, why now.
Primary CTA — one button. The single action you most want the visitor to take.

// Weak: feature-led
const weak = "AI-powered task management with integrations"

// Strong: outcome-led
const strong = "Your team ships faster. Without the meetings."

// Weak tells you what the product does.
// Strong tells you what your life looks like after.

Social proof

Trust is expensive to build from scratch. Social proof borrows it from parties the visitor already trusts.

Format	Works when
Company logos	Recognisable names are available
Testimonial quotes	Specific, numeric claims are possible
Usage numbers	Numbers are large enough to be meaningful
Press mentions	Publication is known to the target audience

Magic UI effects

Magic UI is an open-source library of 150+ animated components built on React, TypeScript, Tailwind, and Motion. Step through the effects below — each preview is built from scratch using CSS keyframes.

# Install via shadcn CLI
npx shadcn@latest add "https://magicui.design/r/shimmer-button"
npx shadcn@latest add "https://magicui.design/r/text-animate"
npx shadcn@latest add "https://magicui.design/r/number-ticker"

The physics of attention

Animation works by co-opting a hard-wired reflex. The human visual system is tuned to detect motion. Moving elements capture attention with almost no cognitive cost to the viewer. Used well, this is powerful. Used carelessly, it destroys credibility.

// Good: one animated element in a field of still ones
const ctaShimmers          = true
const heroGradientAnimates = true
const everythingElseStatic = true   // ← this is the constraint

// Bad: ambient motion everywhere
const backgroundParticles  = true   // ← pulls eye from CTA
const cardsHoverSway       = true   // ← visual noise

The practical rule: animate at most one or two elements per viewport. Give everything else room to breathe.

Conversion rate is a design problem

Most teams treat conversion rate as a marketing problem. It is more accurately a design problem. Visitors convert when the page removes every reason not to.

Failure	What it signals to the visitor
Weak headline	"I don't understand what this does"
No social proof	"I have no reason to trust this"
Multiple CTAs	"I don't know what they want me to do"
Feature-led copy	"So what does that mean for me?"
No fold awareness	"I didn't know there was more to see"

The page does not need to be beautiful to convert. It needs to be clear.