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

npm install slidev-theme-hatch-corporate

Usage

---
theme: hatch-corporate
---

🎨 Available Layouts

1. Cover (layout: cover)

Professional title slide with Hatch branding

---
layout: cover
---
# Your Presentation Title
## Subtitle or Description

2. Default (layout: default)

Standard content layout with header and footer

---
layout: default
---
# Slide Title
Your content here...

3. Q&A (layout: qa)

Beautiful interactive Q&A slide

---
layout: qa
email: "[email protected]"
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

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

5. Timeline (layout: timeline)

Project timeline visualization

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

---
layout: closing
---

🔧 Configuration

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

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: '[email protected]',
    docs: 'hatch.com/your-docs',
    website: 'www.hatch.com'
  }
})

🧩 Components

HatchCard

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

HatchButton

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

HatchBadge

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

📝 Frontmatter Options

Global Options

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

Layout-Specific Options

---
layout: qa
title: "Custom Q&A Title"
subtitle: "Custom subtitle"
email: "[email protected]"
---

🎯 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
• Email: [email protected]
• Documentation: Full Documentation