Landing pages / v1.0.0

Proof-led product launch

A restrained launch page that earns the primary action through a visible product, specific proof, and a short decision path.

Audience

Product-aware buyers comparing a focused software product with one or two credible alternatives.

Job to be done

Help a visitor understand the product, trust the claim, and start a trial or book a focused demo.

Design direction

Use the product itself as the visual center. Keep the page editorial and quiet, with one strong screenshot, compact proof, and measured section changes.

Hierarchy

01Literal product offer
02Product screenshot
03Primary action
04Specific proof
05How it works
06Objection handling

Required proof

01One quantified customer outcome with context
02A product screenshot that shows the promised workflow
03Two short customer observations tied to real use cases

Required states

01Default
02Mobile navigation open
03Form submitting
04Form success
05Form error

Responsive behavior

01Keep the product visible in the first viewport on desktop and mobile
02Stack proof after the primary action below 768px
03Preserve a hint of the next section in the first viewport

Constraints

01Use one primary action label across the page
02Do not place hero copy inside a card
03Avoid decorative gradients, oversized statistics, and nested cards

Accessibility

01Use one H1 and ordered section headings
02Keep visible focus states on every action
03Provide useful screenshot alt text and reduced-motion behavior

Verification

01Test the navigation and form with keyboard only
02Check 390px, 768px, 1280px, and 1536px layouts
03Confirm the screenshot remains legible without horizontal overflow

Tradeoffs

01A shorter page improves focus but leaves less room for broad category education
02Product-led imagery requires current screenshots whenever the interface changes

Stack

ReactTailwind CSSMotion for ReactLucide React

Connected UI Grids assets

Cinematic template BlurText

Build handoff

Provider

You are an expert design engineer.

Build a responsive landing page: Proof-led product launch.

**Purpose:** A restrained launch page that earns the primary action through a visible product, specific proof, and a short decision path.

**Audience:** Product-aware buyers comparing a focused software product with one or two credible alternatives.

**Job to be done:** Help a visitor understand the product, trust the claim, and start a trial or book a focused demo.

**Design style:** Use the product itself as the visual center. Keep the page editorial and quiet, with one strong screenshot, compact proof, and measured section changes.

**Visual hierarchy:** Literal product offer -> Product screenshot -> Primary action -> Specific proof -> How it works -> Objection handling

**Responsiveness:** Keep the product visible in the first viewport on desktop and mobile Stack proof after the primary action below 768px Preserve a hint of the next section in the first viewport

**Accessibility:** Use one H1 and ordered section headings Keep visible focus states on every action Provide useful screenshot alt text and reduced-motion behavior

**Required proof:**
- One quantified customer outcome with context
- A product screenshot that shows the promised workflow
- Two short customer observations tied to real use cases

**Required states:**
- Default
- Mobile navigation open
- Form submitting
- Form success
- Form error

**Expected technologies:**
- React
- Tailwind CSS
- Motion for React
- Lucide React

**Constraints:**
- Use one primary action label across the page
- Do not place hero copy inside a card
- Avoid decorative gradients, oversized statistics, and nested cards

**Verification:**
- Test the navigation and form with keyboard only
- Check 390px, 768px, 1280px, and 1536px layouts
- Confirm the screenshot remains legible without horizontal overflow

**Tradeoffs:**
- A shorter page improves focus but leaves less room for broad category education
- Product-led imagery requires current screenshots whenever the interface changes

**Brand inputs:**
- Product name
- Literal offer
- Primary action
- Accent color
- Product screenshot
- Proof statement

**Deliver:** A production-ready landing page implementation plus verification notes.

Use React + Tailwind. Keep it accessible and respect prefers-reduced-motion. Return only the component code.