Lovable prompt for a SaaS landing page

Create a single-page marketing site for a project management SaaS and make it deploy-ready. The audience is engineering managers at startups, and every headline should name their problem or their win — no generic feature talk anywhere on the page.

Page anatomy in order:
- Fixed navigation: logo, three anchor links (Features, Pricing, FAQ) that smooth-scroll, and the CTA button.
- Hero: eyebrow label naming the category a project management SaaS belongs to, an H1 stating the single biggest outcome, a subhead of at most two sentences, the CTA button, and one line of reassurance microcopy beneath it.
- Logo bar: six muted client logos with a caption counting teams or users.
- Alternating feature rows: three rows, image one side and copy the other, sides swapping each row; each row gets a short label, an H3, one paragraph, and an inline text link.
- Product screenshot framed inside a soft container, caption underneath.
- Pricing teaser: two tiers side by side — name, price, five bullet features, button — with a badge on the recommended tier.
- FAQ: five expandable questions engineering managers at startups would genuinely ask before paying.
- Closing CTA section, then a footer with legal links and social icons.

Wire the hero and closing CTA buttons to a working email-capture form stored in the built-in database (table: leads, columns: email, created_at) with an inline success state on submit — create the table and connect the form.

Visual direction:
Minimal dark style. Near-black canvas (#0A0A0B) with one elevated surface tone (#141416) for cards — never more than two surface steps. Hairline borders (1px, white at 8% opacity) instead of shadows; if a shadow is unavoidable use 0 1px 2px rgba(0,0,0,0.4) and nothing softer. Text in exactly three steps: white at 92% for headings, 60% for body, 40% for captions. Generous negative space — section padding at least 120px on desktop, 64px on mobile. The accent color appears only on interactive elements and one hero highlight, nowhere else.

Palette: a strict neutral ramp (white, #F5F5F5, #E5E5E5, #737373, #171717) carries the entire interface; pick one accent and use it only for primary CTAs, active states, and a single hero highlight. If the accent appears more than five times per viewport it stops being an accent. Keep semantic colors (success, error) desaturated so the accent stays in charge.
Typography: one geometric sans (a Futura/Poppins-class face) at three weights maximum (400/500/700). Scale: 64-88px hero, 32px section heads, 18px lede, 16px body, 13px caps labels with 0.08em tracking. Tight headline leading (1.05-1.1), relaxed body (1.6). Let the geometry carry the personality — no italics; weight and size do all hierarchy.
Motion: none. Zero scroll animations, zero entrance effects — the page is fully composed the instant it paints. Spend the motion budget on input feedback instead: 120-150ms ease-out color and transform transitions on hover and press states only. Hold this constraint absolutely; it is a statement, not an omission.

Rhythm and responsive rules:
- Uniform 96px vertical padding per section on desktop, 64px on mobile; one consistent max-width container throughout.
- On mobile, feature rows always show copy first then image, and pricing tiers stack with the recommended tier on top.

The primary call to action is "start a free trial" on every button that captures an email.

After building, check that: submitting a valid email writes a row to leads and shows the success state; an invalid email is blocked with an inline message; anchor links land with the section heading visible below the fixed nav; the deployed preview loads with no console errors.