Landing Craft

Landing Craft

Landing pages that convert. Based on Unbounce (44,000+ A/B tests), GoodUI, CXL Institute, and WiderFunnel LIFT Model.

Creative Variance Engine

Before writing code, select ONE combination based on the brief. This prevents every landing page from looking the same.

Vibe Archetypes (pick 1)

Layout Archetypes (pick 1)

Mobile override (universal): Any asymmetric layout above md: (768px) must collapse to single-column (w-full, px-4, py-8) on viewports below 768px.

Workflow

Step 1: Select creative archetype

Pick one vibe + layout from the Creative Variance Engine. Every page must feel distinct.

Step 2: Wireframe the sections

Block out all 10 sections (Hero through Final CTA). Each section answers: what does the visitor need to hear RIGHT NOW to move forward?

Step 3: Draft copy

Headline under 10 words. One CTA above fold. Social proof near top. Use PAS framework for problem section.

Step 4: Implement with mobile-first HTML/CSS

8px grid. clamp() for fluid typography. No centered hero text. Grain overlay (opacity 0.03-0.06).

Step 5: Optimize for Core Web Vitals

Preload hero image. Inline critical CSS. Lazy-load below-fold images. Target LCP < 2.5s, INP < 200ms.

Step 6: A/B test and iterate

Test highest-impact element first (headline). 95% significance. Min 1,000 visitors per variant.

The Structure

Hero: headline + sub + CTA (above the fold)
Social proof: logos, metrics, testimonials (~100px below hero)
Problem: framed for empathy, names the pain
Solution: 3 steps max, benefit-focused
Features: 3-6 items, each with one clear benefit
Testimonials: real people, specific results
Pricing: 3 tiers, middle is the offer
FAQ: answers top 5 objections
Final CTA: same ask, different context, near scroll bottom

Every section answers: what does the visitor need to hear RIGHT NOW to move to the next section?

Hero Rules (from Unbounce data)

1. Value in 3 seconds: headline must communicate core benefit. A/B test headline first - highest-impact element.
2. CTA visible without scroll: primary button above the fold. Above 600px vh.
3. One CTA: one primary action. Secondary links are text only.
4. Headline under 10 words: "Ship 3x faster with automated deployments" not "Welcome to DeployPro - the fastest way to ship code"
5. Never center text: Left-aligned text + right-aligned visual (Split Screen). Centered hero is the #1 AI clich-.
6. Supporting visual: product screenshot, illustration, or demo - never a generic stock photo.

Hero alt-layouts (not all center)

Design Palette

CRO Methodology

LIFT Model (WiderFunnel)

Evaluate every element against these six factors:

High-Impact Test Elements (in order of ROI)

Test one element at a time. 95% statistical significance. Min 1,000 visitors per variant.

Hero Architecture (Exact CSS)

.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 clamp(2rem, 5vw, 6rem);
  background: #080c1a;
}

.hero-text {
  max-width: 650px;
}

.hero-text h1 {
  font-family: 'Cabinet Grotesk', 'Geist', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #f0ede8;
}

.hero-text p {
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.6;
  color: #a09c96;
  max-width: 480px;
  margin-top: 1.5rem;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 16px 48px;
  background: #1B365D;
  color: #f0ede8;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 0;
  margin-top: 2rem;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              background 200ms ease;
}

.hero-cta:hover {
  background: #e05a20;
  transform: translateY(-2px);
}

.hero-cta:active {
  transform: scale(0.97);
}

Social Proof

Place near the top (within first 2 sections). Types by effectiveness:

1. Logos of recognizable companies (3-12, grayscale, hover color. Never use without permission.)
2. Specific user metrics: "Join 10,000+ paying customers" - number must be real
3. Relevant testimonial: quote with name, title, photo, specific result
4. Award/certification badge: only if recognizable (SOC 2, YC, Product Hunt)

<div class="social-proof">
  <p class="text-sm uppercase tracking-wider text-slate-400 mb-6">Trusted by teams at</p>
  <div class="flex flex-wrap gap-8 items-center opacity-60">
    <img src="stripe.svg" alt="Stripe" class="h-8 grayscale hover:grayscale-0 transition" />
    <img src="vercel.svg" alt="Vercel" class="h-8 grayscale hover:grayscale-0 transition" />
    <img src="shopify.svg" alt="Shopify" class="h-8 grayscale hover:grayscale-0 transition" />
  </div>
</div>

Problem Section (PAS Framework)

Problem: name the exact pain with specific numbers. "Your landing page converts at 0.8%. The industry average is 3.2%." Agitate: explore consequences of NOT solving it. Money lost. Growth stalled. Competitors winning. Solution: present your approach. "DeployPro uses conversion science from 44,000+ A/B tests to lift conversion rates."

Features Grid

3-6 features. Each one gets:

• Icon (meaningful, not decorative). Single color, consistent stroke width.
• Benefit-led headline: "Ship 3x faster" not "Automated CI/CD"
• 1-2 sentence explanation. No fluff.

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  <div class="feature">
    <Icon icon="zap" class="w-8 h-8 text-amber-500 mb-4" />
    <h3 class="text-lg font-semibold mb-2">Ship 3x faster</h3>
    <p class="text-slate-400">Automated build and deploy pipeline. One command to production.</p>
  </div>
</div>

Testimonials

Pricing

3 tiers. Middle is your real offer.

.pricing-card-featured {
  border: 2px solid var(--accent);
  transform: scale(1.05);
  position: relative;
  z-index: 1;
}

.pricing-card-featured::before {
  content: 'Most popular';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  color: white;
  padding: 4px 16px;
  border-radius: 9999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Rules:

• Annual/monthly toggle (annual = 17-20% discount)
• Every tier lists features explicitly
• Include money-back guarantee near pricing
• No fake scarcity. No "Only 3 spots left" when unlimited.