WeWeb Landing Page: Design for High Conversions

Before building sections, establish your design tokens so styling is consistent throughout. First, set your brand fonts: click the Libraries icon in the left navbar → Typography → + New Style. Create styles for Heading (H1), Subheading (H2), Body, and Caption — defining font family, weight, size, line-height, and color for each. To use a Google Font: Styling panel → Typography → Font dropdown → search by name (Google Fonts are available directly). For a custom uploaded font: go to the project dashboard → Fonts section → upload TTF or WOFF2 files → the font appears in the dropdown. Second, set brand colors: Libraries → Colors → + New Color → paste your hex values and name them (e.g., 'Primary Blue', 'Accent Green', 'Text Dark'). These named colors appear in all color pickers throughout the project. With Typography styles and Colors defined, applying your brand to any element is one click.

Click Add element (+) → Section → drag onto the canvas. In the Styling panel, set the section's minimum height to 100vh to fill the viewport. Set padding: top 80px, bottom 80px (or use relative units: clamp(40px, 8vh, 120px)). Inside the section, add a Flexbox Container with direction 'column', align-items 'center', and justify-content 'center'. Inside this container, add in order: (1) a small Badge element or Text element with a pre-headline (e.g., 'Now in beta'). (2) A Heading H1 — apply your Heading Typography style — with your main value proposition. Keep it under 10 words. (3) A Text element with your subheading/supporting copy (2–3 sentences maximum). (4) A Flexbox row container with two buttons: a primary CTA button (filled, brand color) and a secondary CTA (outlined). For a background image or gradient: in the Section's Styling panel → Background → choose Image or Gradient. For video backgrounds, add a Video element positioned as absolute behind the content container with z-index: -1.

Immediately below the hero, add a thin Section that functions as a 'logos band' or 'as seen in' section. This reduces visitor anxiety by showing recognizable client or media logos. Add the section → set background to a light gray (#f9fafb) → set padding: top 24px, bottom 24px. Inside, add a Flexbox Container with direction 'row', align-items 'center', justify-content 'center', flex-wrap 'wrap', and gap 32px. Add a Text element: 'Trusted by teams at' — style it in your Caption typography (small, muted). Then add Image elements for each logo. Set each logo image to: width auto, height 28px (or 32px), object-fit contain, and filter: grayscale(100%) opacity(60%) via the Custom CSS field so logos are unobtrusive. At Mobile breakpoint, increase the gap and reduce logo size so they wrap cleanly.

Add a new Section → set padding: top 96px, bottom 96px. Inside, add a Flexbox Container (column, align center). Add a centered heading: 'Everything you need to [outcome]'. Below it, add a Flexbox Container with direction 'row', flex-wrap 'wrap', gap 24px, and justify-content 'center'. This container holds your feature cards. Add a Container as the first card. Set it to width 320px (or 30% with min-width 280px to handle wrapping), padding 32px, border-radius 12px, background white, and box-shadow (via Custom CSS: box-shadow: 0 1px 3px rgba(0,0,0,0.1)). Inside each card: an Icon element (or Image), a Heading H3 for the feature name, and a Text element for the description (2–3 sentences). Duplicate the card 2–5 more times and update each. At Mobile breakpoint, the flex-wrap causes cards to stack to single column automatically — just adjust the width binding to 100% at Mobile.

Add a Section for your lead capture area → set background to your primary brand color (this makes the form section stand out visually). Inside, add a Flexbox Container (column, align center). Add a heading: 'Start for free' or your CTA heading. Below, drag a Form Container element from Add element (+) → Form Elements. Inside the Form Container, add: an Input element (email type, placeholder 'Your email address'), and a Button element ('Get early access' or your CTA text). In the Form Container's Settings panel, configure validation: set the email input as Required and Email format. Now add a workflow to the form: select the Form Container → Workflows tab → On submit → Add action: Supabase → Database Insert → table: 'leads' → data: `{email: formData.email_input, created_at: new Date().toISOString()}`. Add a second action after success: Change variable value → 'formSubmitted' Boolean → true. Bind the form's display to `not(formSubmitted)` and add a thank-you message bound to `formSubmitted`. For REST API submission: use REST API Request → POST → your endpoint → JSON body `{email: formData.email_input}`.

1// Injection point: Supabase SQL editor (outside WeWeb)
2// Run this in Supabase Dashboard → SQL editor to create the leads table
3
4CREATE TABLE IF NOT EXISTS public.leads (
5  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
6  email TEXT NOT NULL UNIQUE,
7  source TEXT DEFAULT 'landing_page',
8  created_at TIMESTAMPTZ DEFAULT now()
9);
10
11-- Allow anonymous inserts (landing page visitors are not logged in)
12ALTER TABLE public.leads ENABLE ROW LEVEL SECURITY;
13
14CREATE POLICY "Anyone can submit their email"
15  ON public.leads
16  FOR INSERT
17  WITH CHECK (true);
18
19-- Prevent anyone from reading the leads list via the frontend
20CREATE POLICY "No public select"
21  ON public.leads
22  FOR SELECT
23  USING (false);

Entrance animations engage visitors as they scroll and give the page a polished feel. Select a features card or any element you want to animate → Styling panel → Animations tab → click + New Animation. Configure: Animation type (Fade In, Slide In Up are most effective for landing pages), Duration (400–600ms works well), Timing function (ease-out), Delay (0ms for the first element, then add 100ms increments for subsequent elements to create a stagger effect). In the Trigger section, select 'When element enters viewport' (also called 'Appear transition') so the animation fires as the user scrolls down, not on initial page load. For a staggered feature cards effect: select all three feature cards and apply the same animation settings with delays of 0ms, 100ms, and 200ms respectively. Do not overdo animations — use them on section headings and feature cards, not on every element.

Click on the landing page in the Pages panel to select it → Page settings panel (right sidebar) → SEO & Meta Tags section. Set: Title Tag (≤60 chars, include your primary keyword near the beginning, e.g., 'Acme — Automate Your Invoicing in Minutes'). Meta Description (≤155 chars — problem + solution + benefit, e.g., 'Stop chasing invoices. Acme automatically sends and tracks invoices so you get paid faster. Try free.'). For Open Graph (social media sharing previews): Open Graph Title (can match title tag or be more conversational), Open Graph Description (can match meta description), Open Graph Image — upload a 1200×630px image. This image appears when your link is shared on LinkedIn, Twitter, or Slack. To create the OG image: design a simple 1200×630px graphic in Figma or Canva showing your headline and product screenshot, export as PNG, upload in the OG Image field. Without an OG image, social shares show a generic placeholder — this dramatically reduces click-through rates from shared links.