---
estimated_steps: 43
estimated_files: 2
skills_used: []
---

# T02: Build hero section with large avatar, bio text, and genre pills

Replace the compact `creator-detail__header` with a full hero section. Large avatar, prominent name, bio paragraph, and genre pills. Use existing `CreatorAvatar` component (supports `imageUrl` prop and arbitrary `size`), existing `.pill` class for genres, and CSS custom properties for theming.

## Steps

1. Open `frontend/src/pages/CreatorDetail.tsx`. Replace the `<header className="creator-detail__header">` block with a new hero layout:
   ```tsx
   <header className="creator-hero">
     <CreatorAvatar
       creatorId={creator.id}
       name={creator.name}
       imageUrl={creator.avatar_url ?? undefined}
       size={96}
     />
     <div className="creator-hero__info">
       <h1 className="creator-hero__name">{creator.name}</h1>
       {creator.bio && (
         <p className="creator-hero__bio">{creator.bio}</p>
       )}
       {creator.genres && creator.genres.length > 0 && (
         <div className="creator-hero__genres">
           {creator.genres.map((g) => (
             <span key={g} className="pill">{g}</span>
           ))}
         </div>
       )}
     </div>
   </header>
   ```
2. Move the topic breakdown pills (the `badge--cat-*` pills currently in the stats span) to below the technique list header, or keep them — the hero should be clean with just name/bio/genres. The stats (video count, technique count, topic pills) stay in the section below the hero.
3. Open `frontend/src/App.css`. Add `.creator-hero` styles:
   - Flex layout: avatar left, info right, gap 1.5rem
   - `.creator-hero__name`: font-size 2rem+, font-weight 800, letter-spacing -0.02em
   - `.creator-hero__bio`: color var(--color-text-secondary), font-size 1rem, max-width 48rem, line-height 1.6
   - `.creator-hero__genres`: flex-wrap, gap 0.375rem
   - Responsive: at mobile (<768px), stack vertically (flex-direction column, center avatar)
   - Add bottom border or spacing to visually separate hero from technique list
4. Remove or update the old `.creator-detail__header` / `.creator-detail__name` CSS rules that are no longer used.
5. Run `cd frontend && npm run build` to confirm clean production build.

## Must-Haves

- [ ] Hero section with CreatorAvatar at size 96 using avatar_url
- [ ] Name displayed at 2rem+ font size
- [ ] Bio paragraph rendered when present, hidden when null
- [ ] Genre pills displayed using existing .pill class
- [ ] Responsive: stacks vertically on mobile (<768px)
- [ ] Clean production build with zero warnings

## Inputs

- `frontend/src/pages/CreatorDetail.tsx`
- `frontend/src/App.css`
- `frontend/src/api/public-client.ts`

## Expected Output

- `frontend/src/pages/CreatorDetail.tsx`
- `frontend/src/App.css`

## Verification

cd frontend && npm run build
