slidev-theme-hatch-corporate/README.md

A comprehensive Slidev theme for Hatch corporate presentations with advanced layouts and components

# Slidev Theme: Hatch Corporate v2.0

A comprehensive, professional Slidev theme designed specifically for Hatch corporate presentations. Features advanced layouts, interactive components, and complete brand consistency.

## 🚀 Features

- **Multiple Layout Options**: 8+ specialized layouts for different presentation needs
- **Interactive Components**: Reusable Vue components with animations and hover effects
- **Brand Consistency**: Automatic Hatch branding with customizable options
- **Configuration System**: TypeScript-based configuration for easy customization
- **Responsive Design**: Optimized for different screen sizes and export formats
- **Professional Animations**: Subtle, engaging animations throughout

## 📦 Installation

### NPM Installation
```bash
npm install slidev-theme-hatch-corporate
```

### Usage
```yaml
---

theme: hatch-corporate
---

```

## 🎨 Available Layouts

### 1. Cover (`layout: cover`)
Professional title slide with Hatch branding
```yaml
---

layout: cover
---

# Your Presentation Title
## Subtitle or Description
```

### 2. Default (`layout: default`)
Standard content layout with header and footer
```yaml
---

layout: default
---

# Slide Title
Your content here...
```

### 3. Q&A (`layout: qa`)
Beautiful interactive Q&A slide
```yaml
---

layout: qa
email: "project-team@hatch.com"
docs: "hatch.com/project-docs"
website: "www.hatch.com"
---

# Questions & Discussion
Let's explore how our solutions will transform your capabilities
```

### 4. Metrics (`layout: metrics`)
Data visualization layout for KPIs
```yaml
---

layout: metrics
title: "Key Performance Indicators"
metrics:
  - icon: "📈"
    value: "85%"
    label: "User Adoption"
    change: "+12%"
    trend: "positive"
---

```

### 5. Timeline (`layout: timeline`)
Project timeline visualization
```yaml
---

layout: timeline
timeline:
  - date: "Q1 2025"
    phase: "Planning"
    description: "Initial requirements"
    completed: true
    icon: "📋"
---

```

### 6. Closing (`layout: closing`)
Thank you slide with 70-year anniversary badge
```yaml
---

layout: closing
---

```

## 🔧 Configuration

Create a `hatch.config.ts` file in your project root:

```typescript
import { defineConfig } from 'slidev-theme-hatch-corporate'

export default defineConfig({
  branding: {
    hideDate: true,
    showAnniversary: true,
    companyName: 'HATCH ADVISORY'
  },
  colors: {
    primary: '#E84B37',
    secondary: '#FF8C00'
  },
  contact: {
    email: 'your-team@hatch.com',
    docs: 'hatch.com/your-docs',
    website: 'www.hatch.com'
  }
})
```

## 🧩 Components

### HatchCard
```vue
<HatchCard variant="primary" hover>
  Your content here
</HatchCard>
```

### HatchButton
```vue
<HatchButton @click="handleClick" variant="primary" size="large">
  Click Me
</HatchButton>
```

### HatchBadge
```vue
<HatchBadge 
  :years="70" 
  label="YEARS"
  :animated="true"
  tooltip-title="Our Legacy"
/>
```

## 📝 Frontmatter Options

### Global Options
```yaml
---

theme: hatch-corporate
background: '#FFFFFF'
title: "Your Presentation"
hideDate: true
contact:
  email: "team@hatch.com"
  docs: "hatch.com/docs"
  website: "www.hatch.com"
---

```

### Layout-Specific Options
```yaml
---

layout: qa
title: "Custom Q&A Title"
subtitle: "Custom subtitle"
email: "custom@hatch.com"
---

```

## 🎯 Best Practices

1. **Use appropriate layouts** for content type
2. **Configure contact information** once in frontmatter
3. **Leverage components** for consistent styling
4. **Test exports** in different formats
5. **Follow brand guidelines** with provided colors

## 🔄 Migration from v1.x

1. Update package: `npm install slidev-theme-hatch-corporate@^2.0.0`
2. Replace old layouts with new ones:
   - `questions` → `qa`
   - Custom metric slides → `metrics` layout
3. Update frontmatter configuration
4. Replace custom cards with `<HatchCard>` component

## 📚 Examples

See the `/docs/examples/` directory for complete presentation examples.

## 🤝 Contributing

1. Fork the repository
2. Create feature branch
3. Make changes
4. Test with different presentation types
5. Submit pull request

## 📄 License

MIT License - see LICENSE file for details.

## 🆘 Support

- **Issues**: [GitHub Issues](https://github.com/hatch/slidev-theme-hatch-corporate/issues)
- **Email**: digital@hatch.com
- **Documentation**: [Full Documentation](https://hatch.github.io/slidev-theme-hatch-corporate)