Marketing · Hero Sections

Video Intro Hero

A centered hero with a headline, short copy, and a large embedded video preview.

What's in it

• Headline: Short, punchy headline introducing the product.
• Subtext: A one-paragraph summary that positions the video as the fastest way to understand the value.
• Primary Action: Main CTA button directly below the copy.
• Video Preview: Wide 16:9 preview frame with play button overlay and subtle caption below.

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.

# Video Intro Hero [order: 0]

- **Video Intro Hero** [x: 0, y: 0, order: 0]
  - **Prompt:** A centered hero with a headline, short copy, and a large embedded video preview.
  - **Headline** [x: 236, y: 64, order: 0]
    - **Prompt:** Short, punchy headline introducing the product.
    - **Layout Hint:** centered
    - **Visual Weight:** HERO — dominant focal point — largest type, most space, maximum contrast
  - **Subtext** [x: 236, y: 200, order: 1]
    - **Prompt:** A one-paragraph summary that positions the video as the fastest way to understand the value.
    - **Layout Hint:** centered
    - **Visual Weight:** SECONDARY — supporting detail — reduced size, weight, or contrast relative to primary
  - **Primary Action** [x: 520, y: 280, order: 2]
    - **Type:** primary
    - **Prompt:** Main CTA button directly below the copy.
  - **Video Preview** [x: 142, y: 368, order: 3]
    - **Prompt:** Wide 16:9 preview frame with play button overlay and subtle caption below.

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 Video Intro 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