---
globs: src/data/**/*.ts,src/data/**/*.json
---

# Data and Content Management

## Data Structure

Non-secret content belongs in `src/data/` as TypeScript modules or JSON files. Keep data presentation-agnostic.

## Current Data Files

- [src/data/projects.ts](mdc:src/data/projects.ts) - Project portfolio data
- [src/data/services.ts](mdc:src/data/services.ts) - Service offerings data

## Data Patterns

### TypeScript Data Modules
```typescript
// src/data/projects.ts
export interface Project {
  id: string
  title: string
  description: string
  category: string
  images: string[]
  videoUrl?: string
}

export const projects: Project[] = [
  {
    id: 'project-1',
    title: 'Project Title',
    description: 'Project description',
    category: 'commercial',
    images: ['/image1.jpg', '/image2.jpg']
  }
]
```

### JSON Data Files
```json
{
  "services": [
    {
      "id": "vfx",
      "name": "Visual Effects",
      "description": "High-end VFX services"
    }
  ]
}
```

## Data Usage Rules

1. **Server Components**: Prefer server components for data fetching
2. **File Imports**: Use direct imports instead of client-side fetching for static data
3. **Type Safety**: Define TypeScript interfaces for all data structures
4. **Separation**: Keep data separate from presentation logic

## Content Guidelines

- Use descriptive, SEO-friendly content
- Include proper alt text for images
- Maintain consistent naming conventions
- Keep content up-to-date and accurate

## Data Fetching Patterns

```typescript
// ✅ Good: Server component with direct import
import { projects } from '@/data/projects'

export default function PortfolioPage() {
  return (
    <div>
      {projects.map(project => (
        <ProjectCard key={project.id} project={project} />
      ))}
    </div>
  )
}

// ❌ Avoid: Client-side fetching of static data
'use client'
import { useEffect, useState } from 'react'

export function PortfolioPage() {
  const [projects, setProjects] = useState([])
  
  useEffect(() => {
    fetch('/api/projects').then(res => res.json())
  }, [])
  
  // ...
}
```