managarten/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:

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)

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)

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

Key Takeaways

keyTakeaways (array of strings, required):

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

Testimonial (Optional)

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

Technical Details (Optional)

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)

cta:
  text: "Start Your Free Trial"
  url: "/signup"

Example Case Study

---
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