# Biohazard VFX Website

A modern, minimal Next.js website for Biohazard VFX studio, built with React, TypeScript, Tailwind CSS, and shadcn/ui components.

## Features

- **Homepage**: Hero section, studio showreel, featured projects, and capabilities overview
- **About**: Studio origins, values, technical capabilities, and client testimonials
- **Services**: Comprehensive service offerings with detailed descriptions
- **Portfolio**: Masonry grid layout showcasing projects with varying aspect ratios
- **Contact**: Multi-step smart contact form for efficient client intake

## Tech Stack

- **Framework**: Next.js 15.5.4 with App Router
- **Language**: TypeScript
- **Styling**: Tailwind CSS 4
- **UI Components**: shadcn/ui (New York style)
- **Icons**: Lucide React
- **Fonts**: Geist Sans & Geist Mono

## Getting Started

### Prerequisites

- Node.js 20+ 
- npm or yarn

### Installation

1. Clone the repository:
```bash
git clone <repository-url>
cd biohazard-vfx-website
```

2. Install dependencies:
```bash
npm install
```

3. Run the development server:
```bash
npm run dev
```

4. Open [http://localhost:3000](http://localhost:3000) in your browser.

## Available Scripts

- `npm run dev` - Start development server with Turbopack
- `npm run build` - Build for production
- `npm run start` - Start production server
- `npm run lint` - Run ESLint
- `npm run type-check` - Run TypeScript type checking

## Project Structure

```
biohazard-vfx-website/
├── src/
│   ├── app/                    # Next.js app directory
│   │   ├── about/             # About page
│   │   ├── contact/           # Contact page
│   │   ├── portfolio/         # Portfolio page
│   │   ├── services/          # Services page
│   │   ├── layout.tsx         # Root layout with navigation & footer
│   │   ├── page.tsx           # Homepage
│   │   └── globals.css        # Global styles & CSS variables
│   ├── components/            # React components
│   │   ├── ui/               # shadcn/ui components
│   │   ├── Footer.tsx
│   │   ├── Hero.tsx
│   │   ├── MasonryGrid.tsx
│   │   ├── MultiStepForm.tsx
│   │   ├── Navigation.tsx
│   │   ├── ProjectCard.tsx
│   │   ├── ServiceCard.tsx
│   │   └── VideoPlayer.tsx
│   ├── data/                 # Data files
│   │   ├── projects.ts       # Project data
│   │   └── services.ts       # Services data
│   └── lib/
│       └── utils.ts          # Utility functions
├── public/                   # Static assets
└── components.json          # shadcn/ui configuration
```

## Customization

### Styling

The project uses shadcn/ui with the New York style variant. You can quickly try different styles by:

1. Modifying CSS variables in `src/app/globals.css`
2. Updating the shadcn theme in `components.json`
3. All components use shadcn classnames for easy theme switching

### Content

Update content in the data files:

- **Projects**: Edit `src/data/projects.ts`
- **Services**: Edit `src/data/services.ts`

Replace placeholder images with your own:
- Update image URLs in data files
- Add images to the `public/` directory

### Adding New Pages

1. Create a new directory in `src/app/`
2. Add a `page.tsx` file
3. Export metadata and default component
4. Update navigation in `src/components/Navigation.tsx`

## SEO & Performance

The site includes:

- ✅ Metadata for all pages
- ✅ Canonical links
- ✅ Open Graph tags
- ✅ JSON-LD structured data
- ✅ Font preloading
- ✅ Image lazy loading
- ✅ Next.js Image optimization

## Deployment

### Vercel (Recommended)

1. Push your code to GitHub
2. Import the project to Vercel
3. Deploy automatically

### Other Platforms

Build the project and deploy the `.next` directory:

```bash
npm run build
npm run start
```

## License

Private - All rights reserved to Biohazard VFX

## Support

For issues or questions, contact: info@biohazardvfx.com