Marketing · Hero Sections

Signup Focus Hero

A conversion-focused hero with headline, proof points, and inline email signup.

What's in it

• Headline: Outcome-first headline that maps directly to target user pain.
• Subheadline: Short explanation with one sentence on time saved and one sentence on setup speed.
• Signup Row: Inline email field and primary CTA button. (Email Input, Signup Button)
• Proof Points: Three short proof bullets, such as setup time, free plan, and cancellation terms.
• Supporting Visual: A clean product interface screenshot or abstract illustration on the right side.

The brief your agent gets

This is how the section appears in a UIPrompt brief: each component with its prompt, position and role, so your agent builds the section as planned instead of guessing. In a project, the brief also carries your exact copy, your brand and your stack.

# Signup Focus Hero [order: 0]

- **Signup Focus Hero** [x: 0, y: 0, order: 0]
  - **Prompt:** A conversion-focused hero with headline, proof points, and inline email signup.
  - **Headline** [x: 48, y: 64, order: 0]
    - **Prompt:** Outcome-first headline that maps directly to target user pain.
    - **Visual Weight:** HERO — dominant focal point — largest type, most space, maximum contrast
  - **Subheadline** [x: 48, y: 200, order: 1]
    - **Prompt:** Short explanation with one sentence on time saved and one sentence on setup speed.
  - **Signup Row** [x: 48, y: 280, order: 2]
    - **Prompt:** Inline email field and primary CTA button.
    - **Email Input** [x: 0, y: 0, order: 0]
      - **Prompt:** Work email input.
    - **Signup Button** [x: 380, y: 0, order: 1]
      - **Type:** primary
      - **Prompt:** Start free
  - **Proof Points** [x: 48, y: 352, order: 3]
    - **Prompt:** Three short proof bullets, such as setup time, free plan, and cancellation terms.
  - **Supporting Visual** [x: 706, y: 64, order: 4]
    - **Prompt:** A clean product interface screenshot or abstract illustration on the right side.

Get the prompt for your stack

The same section written for a specific stack, with each component mapped to its framework and component library.

Use it in three steps

1. Open the editor and drag Signup Focus Hero from the section library onto a page. It lines up with the other sections on a 12-column grid.
2. Double-click a component to add your own copy. Your agent uses it word for word.
3. Your agent builds the page from the brief, over the UIPrompt connector or from a pull request to your repo. It works with Claude Code, Codex, Cursor, GitHub Copilot, Windsurf and Gemini CLI.

More sections

See all 23 sections