Replit Agent prompt for an ecommerce landing page

Replit Agent: first outline a plan, then build and host a landing page that sells one product — a project management SaaS — to engineering managers at startups. Show me the plan (sections, tech, files) for approval before generating code; static frontend, hosted on Replit when done.

Sections, in this exact order:
1. Purchase hero — a product photography area with a 4-shot gallery; beside it the name, a subhead framing the single biggest benefit, the star average with count, a price block (unit price plus any bundle saving), the buy button, and a trust cluster underneath: delivery estimate, returns period, secure-payment mark.
2. Objection row — 3 short question-and-answer pairs addressing the top reasons people hesitate to buy a project management SaaS, written as questions in the buyer's voice.
3. Benefit deep-dive — 3 full-width bands, one benefit each: the claim, the mechanism (how the product does it), and a proof line (a stat or a quote).
4. Specs and logistics — a split panel: spec list on the left; shipping tiers, packaging note, and warranty on the right.
5. Review section — a rating summary, 6 quotes with names and stars, and one longer featured review set apart from the rest.
6. Closing offer — the price restated with guarantee terms and the final buy button.
7. Sticky buy bar — a compact bar with price and button that appears after the hero leaves view.

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.

Spacing and responsive:
- Sections on a 100px cadence desktop, 60px mobile; the objection row tightens to 40px internal gaps.
- On phones, the purchase hero stacks gallery-then-text and the trust cluster wraps to two lines at most.

Label every buy button "start a free trial" — hero, closing offer, sticky bar. After hosting, send me the URL; I'll refine section by section in follow-up messages, so keep each section separately editable.

Before finishing, verify: the build matches the approved plan; all three "start a free trial" buttons render; the sticky bar never covers the closing offer's button; the hosted URL loads on a phone; the objection row reads as buyer questions, not marketing labels.