# Step 3: Analyze the Page Structure

## Your Task

Study the HTML and screenshot to identify visual sections and design patterns.

## Two Sources of Truth

You have two complementary sources:

1. **HTML** - The structure and CSS values
2. **Screenshot** - The actual visual appearance

**When they conflict, the screenshot is the ground truth.**

## Section Identification

Look for these common patterns:

| Element | Typical Structure |
|---------|-------------------|
| Navigation | `<nav>` or `<header>` at top |
| Hero | First major `<section>` with large text/image |
| Features | Grid or flex layout with repeated cards |
| Testimonials | Quotes with attribution |
| CTA | Full-width section with button |
| Footer | `<footer>` at bottom |

## What to Extract

For each section, note:

### 1. Layout Type
- Is it a grid? Flexbox? Absolute positioning?
- What's the max-width of the container?
- What's the vertical spacing between sections?

### 2. Typography
- Font families used (from `render.fonts.fontFamilies`)
- Exact font sizes (not Tailwind approximations)
- Line heights and letter spacing

### 3. Colors
- Background colors
- Text colors
- Accent colors
- Use `render.colors.hex` as reference

### 4. Special Effects
- Gradients
- Shadows
- Blurs
- Transforms (rotations, scales)

## Non-Extractable Elements

Some things **cannot be extracted from HTML**:

- JavaScript animations
- Hover state transitions
- Scroll-triggered effects
- Canvas/WebGL content
- Complex SVG animations

For these, **look at the screenshot and replicate manually**.

See [rules/manual-replication.md](../rules/manual-replication.md) for guidance.

## Completion Criteria

- [ ] All major sections identified
- [ ] Layout patterns understood
- [ ] Design tokens extracted (fonts, colors, spacing)
- [ ] Non-extractable elements noted for manual replication

## Next Step

Proceed to [step4-generate.md](step4-generate.md)