managarten/apps/picture/apps/landing/CASE_STUDIES_DOCUMENTATION.md

# Case Studies Collection Documentation

## Overview

The Case Studies collection showcases real customer success stories demonstrating how businesses use Picture AI to transform their creative workflows. Each case study follows a structured narrative format with quantifiable metrics and compelling testimonials.

## Collection Structure

**Collection Type:** `content` (Markdown files)
**Location:** `/src/content/caseStudies/`
**Schema:** Defined in `/src/content/config.ts`

## Directory Structure

```
src/content/caseStudies/
├── en/
│   ├── luxe-fashion-ecommerce.md
│   ├── bright-social-agency.md
│   └── techstart-saas.md
```

## Schema Fields

### Basic Information

- **title** (string, required) - Case study title
- **description** (string, required) - Short SEO description
- **coverImage** (string, required) - Main hero image URL
- **heroVideo** (string, optional) - Video URL if available

### Company Information

- **company.name** (string, required) - Company name
- **company.logo** (string, optional) - Company logo URL
- **company.website** (string, optional) - Company website
- **company.industry** (string, required) - Industry (e.g., "E-commerce", "Marketing Agency")
- **company.size** (enum, optional) - 'startup' | 'small' | 'medium' | 'enterprise'
- **company.location** (string, optional) - Location (e.g., "San Francisco, CA")

### Contact Person (Optional)

- **contact.name** (string)
- **contact.role** (string)
- **contact.avatar** (string, optional)
- **contact.quote** (string, optional) - Pull quote

### Classification

- **category** (enum, required) - 'ecommerce' | 'marketing' | 'design' | 'content-creation' | 'saas' | 'education' | 'enterprise' | 'startup' | 'other'
- **tags** (array of strings) - Keywords like ["product-photography", "social-media"]
- **language** (enum, required) - 'en' | 'de' | 'fr' | 'it' | 'es'

### Visibility

- **featured** (boolean) - Featured on homepage
- **trending** (boolean) - Trending badge

### The Story Structure

Each case study follows a four-part narrative:

1. **challenge** (string, required) - What problem did they face?
2. **solution** (string, required) - How did Picture solve it?
3. **implementation** (string, required) - How did they implement Picture?
4. **results** (string, required) - What results did they achieve?

### Key Metrics

**metrics** (array of objects, optional):

- **label** (string) - e.g., "Time Saved", "Cost Reduction"
- **value** (string) - e.g., "80%", "€2,000/month"
- **description** (string, optional) - Additional context
- **icon** (string, optional) - Emoji or icon

Example:

```yaml
metrics:
  - label: 'Cost Reduction'
    value: '90%'
    description: 'Saved €54,000 per year on photography'
    icon: '💰'
  - label: 'Images Generated'
    value: '10,000+'
    description: 'Professional product photos in first 6 months'
    icon: '📸'
```

### Features & Models Used

- **featuresUsed** (array) - Feature slugs they used
- **modelsUsed** (array) - Model slugs they used
- **useCases** (array) - Use case slugs

### Before & After (Optional)

```yaml
beforeAfter:
  before:
    description: 'Hiring photographers for every product'
    image: '/images/before.jpg'
    metrics:
      - '€5,000/month on photography'
      - '2 weeks per photo shoot'
  after:
    description: 'Generate unlimited product photos on-demand'
    image: '/images/after.jpg'
    metrics:
      - '€500/month for Picture Pro'
      - 'Minutes per image'
```

### Example Images

**exampleImages** (array of objects):

- **url** (string)
- **caption** (string, optional)
- **prompt** (string, optional)

### Timeline (Optional)

```yaml
timeline:
  - date: 'January 2025'
    milestone: 'Started using Picture'
  - date: 'March 2025'
    milestone: 'Scaled to 10,000 images'
```

### Key Takeaways

**keyTakeaways** (array of strings, required):

```yaml
keyTakeaways:
  - 'AI image generation reduced costs by 90%'
  - 'Team productivity increased 5x'
  - 'Able to test more product variations'
```

### Testimonial (Optional)

```yaml
testimonial:
  quote: 'Picture transformed how we create product photos'
  author: 'Sarah Chen'
  role: 'Creative Director'
```

### Technical Details (Optional)

```yaml
technicalDetails:
  integrations:
    - 'Shopify'
    - 'WordPress'
  workflow: 'Automated workflow description'
  team:
    size: 5
    roles:
      - 'Designer'
      - 'Marketer'
```

### Related Content

- **relatedCaseStudies** (array) - Other case study slugs
- **relatedTutorials** (array) - Tutorial slugs
- **relatedFeatures** (array) - Feature slugs

### SEO & Metadata

- **seoKeywords** (array) - Target keywords
- **ogImage** (string, optional) - Social share image
- **publishDate** (date, required)
- **lastUpdated** (date, required)
- **author** (string) - Defaults to "Picture Team"

### Stats & Engagement

- **views** (number) - Default: 0
- **likes** (number) - Default: 0

### Custom CTA (Optional)

```yaml
cta:
  text: 'Start Your Free Trial'
  url: '/signup'
```

## Example Case Study

```markdown
---
title: 'How Luxe Fashion Reduced Photography Costs by 90%'
description: 'Luxe Fashion e-commerce store saves €54,000/year on product photography using Picture AI'
coverImage: '/images/case-studies/luxe-fashion-hero.jpg'

company:
  name: 'Luxe Fashion'
  logo: '/images/logos/luxe-fashion.svg'
  website: 'https://luxefashion.example'
  industry: 'E-commerce Fashion'
  size: 'small'
  location: 'Berlin, Germany'

contact:
  name: 'Sarah Chen'
  role: 'Creative Director'
  avatar: '/images/people/sarah-chen.jpg'
  quote: 'Picture transformed our entire content creation workflow'

category: 'ecommerce'
tags:
  - 'product-photography'
  - 'e-commerce'
  - 'fashion'
featured: true
trending: false
language: 'en'

challenge: 'We were spending €5,000/month on professional photographers...'
solution: 'Picture AI enabled us to generate unlimited product photos...'
implementation: 'We integrated Picture into our Shopify workflow...'
results: 'In 6 months, we generated over 10,000 product images...'

metrics:
  - label: 'Cost Reduction'
    value: '90%'
    description: 'Saved €54,000 per year'
    icon: '💰'
  - label: 'Images Generated'
    value: '10,000+'
    description: 'Professional product photos'
    icon: '📸'
  - label: 'Time Saved'
    value: '20 hours/week'
    description: 'Team productivity boost'
    icon: '⏱️'

featuresUsed:
  - 'flux-pro'
  - 'batch-generation'
  - 'api-integration'
modelsUsed:
  - 'flux-1-1-pro'
  - 'flux-dev'

keyTakeaways:
  - 'AI image generation reduced costs by 90%'
  - 'Team can test more product variations'
  - 'Faster time-to-market for new products'

testimonial:
  quote: 'Picture transformed how we create product photos. What used to take weeks now takes minutes.'
  author: 'Sarah Chen'
  role: 'Creative Director'

publishDate: 2025-01-20T00:00:00Z
lastUpdated: 2025-01-20T00:00:00Z
---

## The Full Story

[Detailed case study content in markdown format...]
```

## Pages & Components

### Pages

1. **Index Page** - `/src/pages/case-studies/index.astro`
   - Lists all case studies
   - Featured stories section
   - Category filtering
   - Search and sort functionality

2. **Detail Page** - `/src/pages/case-studies/[slug].astro`
   - Individual case study page
   - Hero with company info
   - Metrics display
   - Structured narrative (Challenge → Solution → Implementation → Results)
   - Key takeaways
   - Testimonial
   - Related case studies

### Components

1. **CaseStudyCard.astro** - `/src/components/caseStudies/CaseStudyCard.astro`
   - Displays case study card
   - Shows cover image, company logo, metrics
   - Category badge and tags
   - View/like counts
   - Supports featured variant

2. **CaseStudyFilters.astro** - `/src/components/caseStudies/CaseStudyFilters.astro`
   - Search input
   - Sort dropdown (newest, popular, views, company)
   - Industry filter
   - Active filters display with clear all

## Utility Functions

Located in `/src/utils/caseStudies.ts`:

### Core Functions

- `getAllCaseStudies()` - Get all case studies
- `getFeaturedCaseStudies()` - Get featured case studies
- `getTrendingCaseStudies()` - Get trending case studies
- `getCaseStudyBySlug(slug)` - Get single case study

### Filtering Functions

- `getCaseStudiesByCategory(category)` - Filter by category
- `getCaseStudiesByIndustry(industry)` - Filter by industry
- `getCaseStudiesByCompanySize(size)` - Filter by company size
- `getCaseStudiesByTag(tag)` - Filter by tag

### Related Content

- `getRelatedCaseStudies(currentCaseStudy, limit)` - Get related case studies

### Stats & Analytics

- `getCaseStudyStats()` - Get overall statistics
- `getCaseStudyCategories()` - Get all categories with counts
- `getMostViewedCaseStudies(limit)` - Get most viewed
- `getMostLikedCaseStudies(limit)` - Get most liked

### Sorting Functions

- `sortCaseStudiesByDate(caseStudies, order)` - Sort by date
- `sortCaseStudiesByViews(caseStudies)` - Sort by views
- `sortCaseStudiesByLikes(caseStudies)` - Sort by likes

## Best Practices

### Writing Case Studies

1. **Focus on Results** - Quantify outcomes with specific metrics
2. **Tell a Story** - Follow the Challenge → Solution → Implementation → Results narrative
3. **Use Real Data** - Include actual metrics, testimonials, and company information
4. **Add Visuals** - Include cover image, company logo, and example images
5. **Optimize for SEO** - Use descriptive titles, meta descriptions, and keywords

### Content Guidelines

- **Challenge:** Describe the specific problem the customer faced
- **Solution:** Explain how Picture AI solved that problem
- **Implementation:** Detail how they integrated Picture into their workflow
- **Results:** Provide quantifiable outcomes and metrics

### Metrics Guidelines

- Use percentage improvements (e.g., "90% cost reduction")
- Include absolute numbers (e.g., "€54,000 saved per year")
- Show time savings (e.g., "20 hours/week")
- Quantify output (e.g., "10,000+ images generated")

### SEO Optimization

- **Title Format:** "How [Company] [Achieved Result] with Picture AI"
- **Description:** Include company name, industry, key metric
- **Keywords:** Industry, use case, specific features used
- **OG Image:** Custom social share image with key metric

## URL Structure

- Index: `/case-studies`
- Detail: `/case-studies/{slug}`
- Category Filter: `/case-studies?category={category}`

## File Naming Convention

Use kebab-case for file names:

- `company-name-brief-description.md`
- Example: `luxe-fashion-ecommerce.md`

## Adding New Case Studies

1. Create new markdown file in `/src/content/caseStudies/en/`
2. Use existing case study as template
3. Fill in all required fields
4. Add high-quality cover image
5. Include 3-4 key metrics
6. Write compelling challenge/solution/implementation/results sections
7. Add 3-5 key takeaways
8. Include customer testimonial if available

## Notes

- All dates should be in ISO 8601 format with 'Z' suffix (e.g., `2025-01-20T00:00:00Z`)
- The `slug` field is NOT included in frontmatter - it's auto-generated from the filename
- All case studies must have `language: "en"` in frontmatter
- The collection uses `type: 'content'` for full markdown support
- Cover images should be high-quality, minimum 1200x630px
- Metrics should be specific, quantifiable, and verifiable

## Related Collections

- **Features** - Link to features used in case studies
- **AI Models** - Reference specific models used
- **Tutorials** - Link to related tutorials
- **Use Cases** - Connect to broader use case content