Marketing · Hero Sections

Split Product Hero

A two-column hero with product messaging on the left and a product screenshot on the right.

What's in it

• Announcement Badge: Short release note, e.g. "Now with AI-powered workflows".
• Headline: Clear value proposition focused on measurable outcome.
• Supporting Copy: Two short sentences that explain who this is for and what pain it removes.
• CTA Group: Primary CTA for getting started and secondary CTA for seeing a demo. (Primary CTA, Secondary CTA)
• Social Proof: Trust line with customer count or known logos.
• Product Screenshot: Browser-style product screenshot card with depth and clean shadow.

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.

# Split Product Hero [order: 0]

- **Split Product Hero** [x: 0, y: 0, order: 0]
  - **Prompt:** A two-column hero with product messaging on the left and a product screenshot on the right.
  - **Announcement Badge** [x: 48, y: 64, order: 0]
    - **Prompt:** Short release note, e.g. "Now with AI-powered workflows".
  - **Headline** [x: 48, y: 120, order: 1]
    - **Prompt:** Clear value proposition focused on measurable outcome.
    - **Visual Weight:** HERO — dominant focal point — largest type, most space, maximum contrast
  - **Supporting Copy** [x: 48, y: 256, order: 2]
    - **Prompt:** Two short sentences that explain who this is for and what pain it removes.
    - **Visual Weight:** SECONDARY — supporting detail — reduced size, weight, or contrast relative to primary
  - **CTA Group** [x: 48, y: 336, order: 3]
    - **Prompt:** Primary CTA for getting started and secondary CTA for seeing a demo.
    - **Primary CTA** [x: 0, y: 0, order: 0]
      - **Type:** primary
      - **Prompt:** Start free trial
    - **Secondary CTA** [x: 184, y: 0, order: 1]
      - **Type:** secondary
      - **Prompt:** Watch demo
  - **Social Proof** [x: 48, y: 408, order: 4]
    - **Prompt:** Trust line with customer count or known logos.
  - **Product Screenshot** [x: 706, y: 64, order: 5]
    - **Prompt:** Browser-style product screenshot card with depth and clean shadow.

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 Split Product 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