# Step 4: Generate Components

## Your Task

Create TSX components for each section identified in Step 3.

## Generation Order

1. **globals.css** - CSS variables and font imports first
2. **layout.tsx** - Root layout with fonts
3. **Section components** - One file per section
4. **page.tsx** - Compose sections together

## Critical Rules

### Use Exact Values

```tsx
// WRONG - Tailwind approximation
<h1 className="text-6xl">

// RIGHT - Exact pixel value
<h1 className="text-[160px]">
```

### Use Exact Colors

```tsx
// WRONG - Tailwind color
<div className="bg-blue-500">

// RIGHT - Exact hex
<div className="bg-[#3C2F12]">
// OR use CSS variable
<div className="bg-accent">
```

### Map Asset URLs

```tsx
// WRONG - Remote URL
<img src="https://cdn.example.com/hero.png">

// RIGHT - Local asset
<img src="/assets/hero.png">
```

### Preserve Layout Complexity

If the original uses absolute positioning, keep it:

```tsx
<div className="relative min-h-[900px]">
  <div className="absolute top-[10%] left-[5%]">
    {/* Positioned element */}
  </div>
</div>
```

## For Non-Extractable Elements

When you encounter JS animations or effects you can't extract:

1. **Look at the screenshot**
2. **Replicate the visual result**
3. **Use CSS animations or Framer Motion**

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

## File Writing

```ts
import {writeFile} from './plugin';

await writeFile('./output/src/app/globals.css', globalsContent);
await writeFile('./output/src/app/layout.tsx', layoutContent);
await writeFile('./output/src/components/sections/hero.tsx', heroContent);
// etc.
```

## Completion Criteria

- [ ] globals.css with all design tokens
- [ ] layout.tsx with font imports
- [ ] All section components created
- [ ] page.tsx composing sections
- [ ] No remote asset URLs (all local)
- [ ] No Tailwind color approximations

## Next Step

Proceed to [step5-validate.md](step5-validate.md)