---
globs: src/app/**/*.tsx
---

# Routing and Layout Rules

## App Router Structure

- **Pages**: Live in `src/app/` directory
- **Server Components**: Default to server components, promote to client only when needed
- **Layout Hierarchy**: Root layout owns global providers, navigation, and footer
- **Route Groups**: Use `(marketing)` for grouped routes without affecting URL structure

## Layout Rules

### Root Layout ([src/app/layout.tsx](mdc:src/app/layout.tsx))
- Owns global providers and theme class
- Contains `<Navigation />` and `<Footer />` components
- Sets up font variables and metadata
- **DO NOT** duplicate these in child layouts

### Page Layouts
- Keep server components as default
- Add `"use client"` only when necessary for interactivity
- Define unique metadata for each route

## Metadata Requirements

Every page must have:
```typescript
export const metadata: Metadata = {
  title: "Unique Page Title",
  description: "Unique description for SEO",
  // Include Open Graph and Twitter cards
}
```

## Route Protection

The [src/middleware.ts](mdc:src/middleware.ts) currently redirects all routes to `/` except:
- Home page (`/`)
- Next.js internal routes (`/_next/*`)
- Favicon files
- Specific static assets (OLIVER.jpeg, OLIVER_depth.jpeg, etc.)

## Static Assets

When adding new files to `public/`, update the middleware allowlist in [src/middleware.ts](mdc:src/middleware.ts) line 8 to prevent 307 redirects.

## Common Patterns

```typescript
// Page component
export default function PageName() {
  return (
    <div className="container mx-auto px-4">
      {/* Page content */}
    </div>
  )
}

// With metadata
export const metadata: Metadata = {
  title: "Page Title",
  description: "Page description"
}
```