---
alwaysApply: true
---

# Biohazard VFX Website - Project Structure

This is a Next.js 15.5.4 VFX studio website built with React 19, TypeScript, Tailwind CSS 4, and shadcn/ui components.

## Core Architecture

- **Framework**: Next.js 15.5.4 with App Router
- **Styling**: Tailwind CSS 4 + shadcn/ui components
- **Animation**: Framer Motion for subtle transitions
- **Forms**: react-hook-form + Zod validation
- **Deployment**: Cloudflare Workers via OpenNext
- **Package Manager**: npm

## Project Layout

```
src/
├─ app/                  # App Router pages and layouts
│  ├─ (marketing)/       # Route groups
│  ├─ api/               # Route handlers
│  └─ layout.tsx         # Root layout with global providers
├─ components/           # Reusable UI components
│  └─ ui/               # shadcn/ui primitives
├─ data/                # JSON/TS data objects
├─ lib/                 # Utilities, hooks, server actions
├─ styles/              # globals.css, Tailwind utilities
└─ types/               # Shared TypeScript types
```

## Key Files

- [AGENTS.md](mdc:AGENTS.md) - Single source of truth for development guidelines
- [package.json](mdc:package.json) - Dependencies and scripts
- [next.config.ts](mdc:next.config.ts) - Next.js configuration
- [tsconfig.json](mdc:tsconfig.json) - TypeScript configuration with @ alias
- [src/middleware.ts](mdc:src/middleware.ts) - Route protection and redirects
- [src/app/layout.tsx](mdc:src/app/layout.tsx) - Root layout with fonts and metadata

## Import Aliases

Always use absolute imports with `@` mapped to `src/`:
```typescript
import { Component } from '@/components/Component'
import { data } from '@/data/projects'
```

## Development Commands

```bash
npm ci                    # Install dependencies
npm run dev              # Development server with Turbopack
npm run type-check       # TypeScript validation
npm run lint             # ESLint validation
npm run build            # Production build
npx open-next@latest build  # OpenNext build for Cloudflare
```