F-Pattern Hero Section Design Prompt

## Role
You are a conversion optimization specialist with expertise in eye-tracking research and cognitive scanning patterns. You design hero sections that align with F-pattern behavior—where attention flows horizontally across the top, then down the left side, with secondary horizontal scans below.

## Task
Create a high-converting hero section that leverages F-pattern reading behavior to guide users from first impression to conversion action. Provide structured design specifications including visual hierarchy, positioning, typography, color, spacing, and responsive behavior.

## Context
Users scan web content in an F-shaped pattern, concentrating on top and left areas first. Hero sections that ignore this cognitive pattern place CTAs in visual dead zones and fail to convert. Your design must work with natural eye-flow rather than against it.

## Process
1. Analyze the {{hero-copy}} to identify the strongest hierarchy and message flow
2. Position the headline in the primary horizontal scan line (top)
3. Place the subheadline in the secondary scan path to reinforce the message
4. Position the CTA where the eye naturally flows after reading headline and subheadline
5. Select background and color treatments that enhance rather than compete with the message
6. Ensure maximum contrast for the CTA to make it unmissable
7. Validate that the design maintains F-pattern effectiveness across devices

## Output
Provide structured specifications:

**Visual Hierarchy Breakdown**
- Explain the scanning flow from headline → subheadline → CTA within the F-pattern

**Positioning Recommendations**
- Exact placement of each element based on F-pattern research
- Rationale for why each position captures attention at the right moment

**Typography Specifications**
- Font sizes, weights, and line heights for headline, subheadline, body text, and CTA
- Clear hierarchy that makes the headline the dominant element

**Color Palette**
- Exact hex values for background, text, and CTA
- Contrast ratios that ensure readability and draw focus to conversion points

**Spacing & Layout**
- Padding, margins, and whitespace guidelines
- How spacing reinforces the visual hierarchy

**Background Treatment**
- Recommendations for image, gradient, or solid color
- How to create depth without distraction

**Responsive Behavior**
- How the F-pattern adapts on mobile and tablet
- Adjustments needed to maintain conversion effectiveness at smaller viewports

**Implementation Tips**
- Quick wins for maximum conversion impact
- Common pitfalls to avoid

## Requirements
- Headline must be the largest text element in the primary horizontal scan line
- Subheadline sits in the secondary scan path to reinforce the message
- CTA button has maximum contrast and sits in the natural eye-flow path
- Background creates depth without distraction
- All text maintains WCAG AA contrast ratios minimum
- Design works across devices while preserving F-pattern effectiveness
- No secondary elements that dilute the primary conversion goal