# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

Biohazard VFX is a modern Next.js 15 website for a visual effects studio, deployed to Cloudflare Workers using OpenNext. The site showcases portfolio work, services, and provides a multi-step contact form for client intake.

**Tech Stack:**
- Next.js 15.5.4 with App Router
- TypeScript (strict mode)
- React 19.1.0
- Tailwind CSS 4
- shadcn/ui (New York style)
- Framer Motion for animations
- Cloudflare Workers deployment via OpenNext

## Development Commands

```bash
# Development
npm run dev              # Start dev server with Turbopack
npm run type-check       # Run TypeScript compiler (no emit)
npm run lint             # Run ESLint

# Building
npm run build            # Standard Next.js build
npm run build:open-next  # Build for Cloudflare Workers (runs next build + open-next build)

# Production
npm start                # Start Next.js production server (not used for Cloudflare deployment)
```

## Deployment (Cloudflare Workers)

The site deploys to Cloudflare Workers, not Vercel. Critical deployment files:

- **`wrangler.toml`**: Cloudflare Workers configuration with routes for biohazardvfx.com
- **`open-next.config.ts`**: OpenNext adapter configuration for Cloudflare
- **`next.config.ts`**: Ignores lint/TypeScript errors during build (required for deployment)

**Deploy commands:**
```bash
npx opennextjs-cloudflare build  # Build for Cloudflare
npx wrangler deploy              # Deploy to Cloudflare Workers
```

**Live URLs:**
- Production: https://biohazardvfx.com
- Worker: https://biohazard-vfx-website.nicholaivogelfilms.workers.dev

**Cloudflare-specific requirements:**
- Requires `nodejs_compat` compatibility flag
- Compatibility date: `2024-09-23` or later
- Assets binding configured at `.open-next/assets`

## Architecture

### Path Aliases
- `@/*` maps to `./src/*` (configured in tsconfig.json)
- shadcn/ui aliases: `@/components`, `@/components/ui`, `@/lib/utils`

### App Structure (Next.js App Router)

Pages are in `src/app/`:
- `page.tsx` - Homepage with hero, featured projects, capabilities
- `about/page.tsx` - Studio origins, values, testimonials
- `services/page.tsx` - Service offerings with ServiceCard components
- `portfolio/page.tsx` - Masonry grid portfolio layout
- `contact/page.tsx` - Multi-step contact form
- `layout.tsx` - Root layout with Navigation and Footer (removed from individual pages)

**Important:** Navigation and Footer components are only in the root layout. Individual pages should NOT include them.

### Data Files

Content is separated from components in `src/data/`:
- `projects.ts` - Project data with Project interface (id, title, description, category, thumbnailUrl, videoUrl, aspectRatio, featured, tags)
- `services.ts` - Services data

When adding new projects or services, update these files rather than hardcoding data in components.

### Component Organization

Custom components in `src/components/`:
- **Layout:** Navigation, Footer
- **Page sections:** Hero, ContactSection, MissionSection, BrandingSection
- **Content display:** ProjectCard, ServiceCard, MasonryGrid, ProjectShowcase, VideoPlayer, VideoPreview
- **Interactive:** MultiStepForm (4-step client intake), HorizontalAccordion
- **Visual effects:** DepthMap, CursorDotBackground, ScrollProgressBar, SectionDivider
- **Third-party:** InstagramFeed, ClientLogoGrid

shadcn/ui components in `src/components/ui/`:
- Uses New York style variant
- Includes: accordion, button, card, dialog, hover-card, input, label, navigation-menu, progress, select, separator, textarea

### Styling System

**Fonts:** Nine Google Fonts preloaded in layout.tsx:
- Geist Sans (primary), Geist Mono
- Bebas Neue, Orbitron, Inter, JetBrains Mono, Space Mono, Rajdhani, Exo 2
- Available as CSS variables: `--font-geist-sans`, `--font-bebas`, etc.

**Theme:**
- Dark mode by default (`className="dark"` on html element)
- CSS variables in `src/app/globals.css`
- shadcn/ui config in `components.json` (New York style, neutral base color)

**Tailwind:**
- Tailwind CSS 4 with PostCSS
- Config: `tailwind.config.ts`
- Global styles: `src/app/globals.css`

### SEO & Metadata

All pages include Next.js Metadata API:
- Open Graph tags
- Twitter cards
- Canonical links
- JSON-LD structured data (Organization schema in root layout)
- metadataBase: `https://biohazardvfx.com`

### Forms & Validation

MultiStepForm component uses:
- react-hook-form for form state
- zod for validation (via @hookform/resolvers)
- 4 steps: Project Type → Budget/Timeline → Project Details → Contact Info
- Progress indicator using shadcn/ui Progress component

### Images

Next.js Image optimization configured in next.config.ts:
- Remote patterns allowed: `images.unsplash.com`
- `unoptimized: false` (optimization enabled)

## Key Constraints

1. **Cloudflare deployment:** Do not suggest Vercel-specific features that won't work with OpenNext
2. **Build config:** Lint and TypeScript errors are ignored during build (required for deployment). Do not remove these settings from next.config.ts
3. **Dark theme only:** Site uses dark mode by default. Do not create light mode variants unless explicitly requested
4. **Layout structure:** Navigation and Footer are in root layout only. Do not add them to individual pages
5. **Data separation:** Project and service data lives in `src/data/`. Keep content separate from components

## Common Tasks

**Add a new page:**
1. Create directory in `src/app/`
2. Add `page.tsx` with metadata export
3. Update Navigation component at `src/components/Navigation.tsx`

**Add a new shadcn/ui component:**
```bash
npx shadcn@latest add [component-name]
```

**Update project portfolio:**
1. Edit `src/data/projects.ts`
2. Add new Project object to projects array
3. Ensure aspectRatio is set correctly for masonry layout

**Update services:**
1. Edit `src/data/services.ts`
2. Add service object with required fields

**Modify theme colors:**
1. Edit CSS variables in `src/app/globals.css`
2. Theme uses neutral base color with CSS variables for theming