---
globs: **/*.tsx,**/*.ts
---

# Images and Assets

## Image Handling

### Next.js Image Component
Always use Next.js Image component for remote images:

```typescript
import Image from 'next/image'

<Image
  src="https://images.unsplash.com/photo-123"
  alt="Descriptive alt text"
  width={800}
  height={600}
  className="rounded-lg"
/>
```

### Remote Image Domains
Current allowed domains in [next.config.ts](mdc:next.config.ts):
- `images.unsplash.com`

**When adding new external domains:**
1. Add to `remotePatterns` in [next.config.ts](mdc:next.config.ts)
2. Document the change in [AGENTS.md](mdc:AGENTS.md)

## Static Assets

### Public Directory
- Keep `public/` for truly static assets only
- Current assets: favicon files, images (OLIVER.jpeg, etc.), GIFs

### Middleware Whitelist
**CRITICAL**: When adding new static assets to `public/`, update the middleware allowlist in [src/middleware.ts](mdc:src/middleware.ts) line 8:

```typescript
// Add new asset paths here
if (pathname === '/' || 
    pathname.startsWith('/_next') || 
    pathname.startsWith('/favicon.') || 
    pathname === '/OLIVER.jpeg' || 
    pathname === '/new-asset.jpg' ||  // Add new assets here
    pathname === '/reel.mp4') {
  return NextResponse.next();
}
```

**Common symptom**: If assets return "text/html" Content-Type error, the path isn't whitelisted.

## Asset Optimization

- Use appropriate image formats (WebP when possible)
- Provide proper alt text for accessibility
- Use responsive images with `sizes` prop
- Optimize file sizes for web delivery

## Video Files

Custom headers are configured in [next.config.ts](mdc:next.config.ts) for `.mp4` files:
```typescript
{
  source: "/:path*.mp4",
  headers: [
    {
      key: "Content-Type",
      value: "video/mp4",
    },
  ],
}
```