Lovable prompt to build a landing page
Landing pages are where Lovable moves quickest, but vague prompts return generic hero-and-grid filler. This one fixes the section order, wires the email capture to a real waitlist table with duplicate handling, and constrains the styling direction, so the output is a page you can put in front of traffic the same day.
Last updated
Build a landing page for a developer tool called Relay that syncs environment variables across machines. Sections in order: a hero with a one-line value statement, a subline, and a primary Get Early Access button, a three-step How It Works row, a feature grid of six cards titled with short verbs, a single quote block, and a closing call to action above a minimal footer. Waitlist: the hero button scrolls to an email capture form that writes email, referrer, and created_at to a waitlist table in Supabase, blocks duplicate emails with an already-signed-up message backed by a unique constraint, and swaps the form for a success state on submit. Behaviors: a sticky header that gains a bottom border after scrolling, smooth scrolling to section anchors, and a mobile menu that collapses the nav into a sheet. States: inline validation for malformed emails before any insert, and a fallback message with a mailto link if the insert itself fails. Styling: dark background, high-contrast type, one accent color used only on buttons and links, generous vertical spacing between sections, and monospace accents on the product name to match the developer audience. No stock illustrations. Acceptance: the page renders at phone width with no horizontal scroll, submitting the same email twice produces the duplicate message and exactly one row, every image carries alt text, and heading levels descend from a single h1 without skipping.
Same task in other tools
Questions about this prompt
Will Lovable actually create the waitlist table or just fake the form?
With the table named in the prompt it creates it and wires the insert. Confirm by submitting once and checking the row in the Supabase view, a success animation alone does not prove persistence.
How do I reuse this for a different product?
Rewrite the hero line, the three steps, and the six feature card titles for your product before generating, those strings drive the whole page. The structure, waitlist wiring, and states carry over unchanged.
Duplicate emails still create second rows despite the message. Fix?
The duplicate check probably lives only in client state. Ask Lovable for a unique constraint on the email column and to treat the resulting conflict error as the duplicate path.