How to Build a Landing Page with WeWeb (Step by Step)

WeWeb makes it possible to build a production-quality landing page in a single day — one that loads fast, looks great on mobile, and connects to your backend or CRM. This is the exact workflow we use at App Studio for client landing pages.

What You'll Build

By the end of this guide you'll have a complete landing page with:
- Hero section with headline, sub-headline, and CTA button
- Social proof row (logos or testimonial)
- Feature section (3-column grid)
- Pricing section
- FAQ accordion
- Lead capture form (connected to Supabase or a Make webhook)
- Published on a custom domain with HTTPS

Total build time: 4–6 hours for a first build, 1–2 hours once you've done it before.

Step 1: Set Up Your Project

Create a new WeWeb project. Choose "Blank" — don't use a template if you want full control over the structure.

First setup steps:
1. Set your default font in Project Settings → Fonts. Import a Google Font (Inter or Plus Jakarta Sans work well for SaaS).
2. Set your brand colours as design tokens in the Styles panel: primary, secondary, text, background, border.
3. Set the page width: max-width 1280px, centred, with 24px horizontal padding on mobile.

Invest 20 minutes here. Getting tokens right now saves hours of inconsistency later.

Step 2: Build the Hero Section

The hero is the most important section — build it first.

Structure:
<section> (full viewport height, centred content)
  <div> (badge/pill — optional, e.g. "Now in beta")
  <h1> (primary headline — the outcome)
  <p> (sub-headline — who it's for, how it works)
  <div> (CTA buttons — primary + optional secondary)
  <div> (hero image or product screenshot)

WeWeb tips:
- Use a Section element, not a Container, so the background stretches full-width
- Set the H1 font size to a WeWeb breakpoint variable: 56px desktop, 40px tablet, 32px mobile
- Add a gradient or subtle noise texture to the background — pure black/white heroes look flat

Step 3: Social Proof and Features

Social proof row: place it directly below the hero. Use a Flexbox row with justify-content: center, gap: 32px. Add company logo images (SVG or WebP, grey/opacity 60%).

Feature section:
- Container with a 3-column Grid (CSS Grid, gap: 24px)
- Each card: icon (24px), H3 (feature name), P (one-sentence description)
- Add a subtle border (1px solid rgba(255,255,255,0.08)) for separation without weight

WeWeb shortcut: create one feature card, style it, then duplicate it 2× and update the content. Don't build each card from scratch.

Step 4: Pricing Section

A three-column pricing layout is the SaaS standard. Build it with CSS Grid: three equal columns, centre column highlighted (different background, "Most popular" badge).

Each pricing card needs:
- Plan name (H3)
- Price + billing period
- 4–6 feature bullets (use a WeWeb List component, not hardcoded divs — it's easier to update)
- CTA button

WeWeb trick: bind the pricing card content to a WeWeb variable (array of objects). This lets you change prices and features from one data object without editing each card individually. When your pricing changes, update one array — all three cards update automatically.

Step 5: FAQ Accordion

An accordion is one WeWeb component with a click toggle. Build it with:
- A container for each FAQ item
- H3 for the question (clickable)
- A div for the answer (visibility toggled by a WeWeb variable)

WeWeb variables approach:
1. Create a variable: openFaqIndex (type: Number, default: -1)
2. On each question click: set openFaqIndex = index of this item (or -1 if it's already open)
3. Show/hide each answer div: add a condition "openFaqIndex === thisIndex"

This creates a proper accordion where only one answer is open at a time, with zero JavaScript code written.

Step 6: Lead Capture Form

Add a form above the footer. Keep it minimal: Name, Work email, CTA button ("Book a demo" or "Start free trial").

Connecting the form to Supabase:
1. In WeWeb, add a Form component
2. Add an Action on submit: "Insert row" → your Supabase "leads" table
3. Add a second Action: show a success message (toggle visibility of a thank-you div)

Connecting to Make instead:
1. Create a Make webhook scenario
2. In WeWeb, use the "HTTP Request" action on form submit → POST to your Make webhook URL
3. In Make: add email notification + HubSpot/Notion/Airtable row creation

Always add a honeypot field (hidden input that real users never fill — bots do). Filter out any submission where the honeypot field is not empty.

Step 7: Publish to Your Domain

In WeWeb, go to Hosting → Custom Domain. 1. Add your domain (e.g., app.yoursite.com or yoursite.com) 2. WeWeb gives you a CNAME record to add in your DNS provider 3. Add the CNAME, wait for DNS propagation (5–30 minutes typically) 4. WeWeb auto-provisions an SSL certificate via Let's Encrypt

Before publishing:
- Check every section at 375px, 768px, and 1280px
- Run a Lighthouse audit (Chrome DevTools → Lighthouse tab) — target 90+ performance
- Check page title and meta description in WeWeb's SEO settings
- Add your Google Analytics or Plausible snippet in Project Settings → Custom Code → <head>

Publish and you're live. Total time: one day.