How to Build a Landing Page in Lovable

Prompt Lovable to set up the backend table that will store every signup. Keep the schema minimal at launch — email and a timestamp are the only truly required fields — and add optional columns for basic attribution if you're running ads or multiple traffic sources. Set the RLS policy so anyone (including anonymous visitors) can INSERT a new row, but nobody can SELECT the table's contents from the client side — signups should only be readable from Cloud → Database directly or through an authenticated admin view you build separately, never exposed to the public.

1Create a waitlist_signups table with:
2- id (uuid, primary key, default gen_random_uuid())
3- email (text, not null, unique)
4- referrer (text, nullable) — where the signup came from (utm_source or page URL)
5- created_at (timestamptz, default now())
6
7RLS policy: allow anonymous and authenticated INSERT with no restrictions on the row values except the unique email constraint. Do NOT allow public SELECT — only accessible via Cloud → Database or a future authenticated admin view.

Build the top of the page first, since it carries the most weight for conversion. Describe your product's core value proposition in one sentence for the hero headline, a supporting sub-headline, and the primary call-to-action that scrolls to or opens the waitlist form. Follow with a features section highlighting 3-4 key benefits, each with a short headline, one or two sentences of description, and an icon. Keep copy specific to what you're actually building rather than generic marketing language — a landing page's job is to make a stranger understand what the product does and why they should care within a few seconds.

1Build the landing page hero section at the top of src/pages/Index.tsx:
2
3- Full-width section, centered content, max-width container (max-w-4xl)
4- Headline (h1, large, bold): the core value proposition in one sentence
5- Sub-headline (p, muted-foreground, larger text): one supporting sentence explaining who it's for
6- Primary CTA Button: 'Join the Waitlist' — scrolls smoothly to the waitlist form section using an anchor link
7- Optional: a hero image, illustration, or simple product screenshot placeholder below the CTA
8
9Below the hero, build a features section:
10- Section heading: 'Why [Product Name]'
11- 3-4 feature Cards in a responsive grid (grid-cols-1 md:grid-cols-3)
12- Each Card: icon (lucide-react), short bold title, 1-2 sentence description
13- Keep the grid balanced — an odd number of features (3) tends to look better than an even number that leaves gaps on smaller screens

Social proof reduces the perceived risk of joining a waitlist for a product that doesn't exist yet. Depending on what you actually have available, build one of: a short testimonial from an early user or advisor, logos of companies or communities you're affiliated with, or a simple 'X people already joined' counter fed live from the waitlist_signups table. If you don't have real testimonials or logos yet, favor a specific, credible claim over generic hype — 'Built by the team behind [previous product]' or 'Currently in private beta with 12 early testers' reads more credibly than vague enthusiasm with no substance behind it.

1Add a social proof section between the features and the waitlist form:
2
3- If using a live counter: query count of rows in waitlist_signups (supabase.from('waitlist_signups').select('*', { count: 'exact', head: true })) and display as '{count}+ people already joined' — only render this section once the count exceeds 20, otherwise hide it entirely
4- If using testimonials: a single centered Card with a quote, name, and role/affiliation
5- If using logos: a muted, grayscale row of 3-5 logos with the label 'As seen in' or 'Trusted by'

Build the form itself using react-hook-form and zod for validation — a single email field is usually enough friction-wise, though you can add an optional 'what are you hoping to use this for' text field if you want qualitative signal from early signups. On submit, call an Edge Function rather than inserting directly from the client, so you can add a honeypot spam check and basic rate limiting server-side. Handle the duplicate-email case gracefully using the UNIQUE constraint's error code rather than showing a generic failure.

1Build a WaitlistForm component with:
2- Email input (required, valid email format via zod)
3- Optional hidden honeypot field (name it something plausible like 'company_website', styled with display:none and tabIndex=-1 so real users never see or tab into it)
4- Submit Button with a loading state
5
6On submit, call the join-waitlist Edge Function with { email, honeypot, referrer: document.referrer }.
7
8Handle responses:
9- Success: show 'You're on the list! We'll email you when we launch.'
10- Duplicate email (error code from the function): show 'You're already on the waitlist — we'll be in touch soon.'
11- Honeypot triggered: show a generic success message anyway (never reveal to a bot that it was caught) but do not insert the row
12- Other errors: show a generic 'Something went wrong, please try again' message

Check which rendering path your project is on before configuring meta tags — this changes what 'correct' looks like. Projects created after May 13, 2026 default to TanStack Start with full server-side rendering, so per-route meta tags (title, description, Open Graph image) are rendered into the initial HTML response and are immediately visible to crawlers and link-preview bots with no special handling. Older Vite SPA projects rely on prerendering for crawlers rather than true SSR — meta tags still need to be set, but verify they're actually appearing in prerendered output rather than only in the client-rendered DOM. Set a specific, keyword-relevant title and description for the landing page route, plus Open Graph tags so the page previews correctly when shared on social platforms or in Slack/Discord.

1Set page-level SEO metadata for the landing page route:
2- Title: '[Product Name] — [one-line value proposition]' (under 60 characters)
3- Meta description: a specific 1-2 sentence summary of the product and who it's for (under 155 characters)
4- Open Graph tags: og:title, og:description, og:image (a 1200x630px preview image), og:type='website'
5- Twitter card tags: twitter:card='summary_large_image'
6
7If this is a TanStack Start project, set these via the route's head/meta configuration so they render server-side. If this is a legacy Vite SPA project, confirm with me whether prerendering is correctly picking up these tags for crawlers.

Once the page, form, and SEO meta are in place, click the Publish button in the top-right corner of the editor. Your app is live on a free xxx.lovable.app subdomain immediately after publishing. To use your own domain, go to Project Settings → Domains (paid plans only) and add your domain. Lovable will show DNS records to add at your registrar — typically an A record pointing to Lovable's IP and a TXT record for verification. Automatic setup via Entri is available for supported registrars; otherwise add the records manually. DNS propagation can take up to 72 hours, though it's usually much faster. Lovable provisions a free SSL certificate automatically once the domain verifies.