---
theme: slidev-theme-pdego
author: PDEGO
colorSchema: light
highlight: github-light
section: Example Light
description: Living reference showcasing every layout, component, and utility class in the PDEGO theme — light colour scheme
layout: cover
transition: fade
---

<!--
  This deck is the living reference for the PDEGO slides design system.
  It showcases every layout, component, and utility class available in the theme.
  Do not use it as a real presentation — keep it up to date with the theme instead.
  Only modify this file to add, update, or improve design system examples.
-->

# Example Deck (Light)

A showcase of all layouts and components — light colour scheme

---
layout: section
---

# Layouts

---

# default — standard content

Use this for most slides. Supports headings, lists, code, and tables.

- Bullet point one
- Bullet point two
- Bullet point three

Header shows the logo and section label automatically.

---

# default — code block

```js
const greet = (name) => `Hello, ${name}!`

greet("PDEGO")
```

---

# default — table

| Feature    | Status | Notes               |
| ---------- | ------ | ------------------- |
| Layouts    | ✅     | cover, default, … |
| Components | ✅     | StatCard, logo      |
| Dark theme | ✅     | see example-dark    |
| Grid utils | ✅     | .grid-2 / .grid-3   |

---
layout: two-cols
---

# two-cols — side by side

::left::

## Left column

- Item one
- Item two
- Item three
- Item four

::right::

## Right column

- Item five
- Item six
- Item seven
- Item eight

---
layout: image-right
---

# image-right — visual + content

Use this when you have a screenshot, mockup, or diagram to pair with talking points.

- Point one — describe it briefly
- Point two — keep it scannable
- Point three — one idea per bullet

::right::

![Placeholder visual](https://placehold.co/480x400/366f7d/ffffff?text=Visual)

---
layout: stats
---

# stats — large number call-outs

::one::

## 10%

**Metric label**

Short description of what this number represents and why it matters.

::two::

## 48h

**Another metric**

Short description of what this number represents and why it matters.

::three::

## 3×

**Third metric**

Short description of what this number represents and why it matters.

---
layout: section
---

# Components & utilities

---

# CSS utilities — .grid-2

<div class="grid-2 mt-4">
  <div class="card">
    <div class="text-accent text-lg">Card A</div>
    <p class="text-muted text-sm mt-2">Use .card for a background tile, .grid-2 to lay them out side by side.</p>
  </div>
  <div class="card">
    <div class="text-accent text-lg">Card B</div>
    <p class="text-muted text-sm mt-2">All utility classes are available on every slide — no imports needed.</p>
  </div>
</div>

---

# CSS utilities — .grid-3

<div class="grid-3 mt-4">
  <div class="card">
    <div class="text-2xl text-accent">01</div>
    <div class="mt-2">First item</div>
  </div>
  <div class="card">
    <div class="text-2xl text-accent">02</div>
    <div class="mt-2">Second item</div>
  </div>
  <div class="card">
    <div class="text-2xl text-accent">03</div>
    <div class="mt-2">Third item</div>
  </div>
</div>

---
layout: section
---

# Section divider

Use the `section` layout between major topics.

---

# BarChart — horizontal chart

<BarChart
  :data="[
    { label: 'Q1', value: 42 },
    { label: 'Q2', value: 68 },
    { label: 'Q3', value: 55 },
    { label: 'Q4', value: 89 },
  ]"
  unit="%"
  class="mt-4"
/>

---

# MetricBar — progress indicators

<div class="mt-4" style="display:flex;flex-direction:column;gap:16px">
  <MetricBar label="Task completion" :value="84" />
  <MetricBar label="Team adoption" :value="67" />
  <MetricBar label="Revenue target" :value="110" :max="100" />
</div>

---

# Callout — highlight boxes

<div style="display:flex;flex-direction:column;gap:12px" class="mt-4">
  <Callout type="tip" title="Pro tip">Use the stats layout for high-impact number slides.</Callout>
  <Callout type="info" title="Note">Components are auto-imported — no import statement needed.</Callout>
  <Callout type="warning" title="Watch out">Avoid more than 3 bullet points per slide.</Callout>
</div>

---

# Timeline — roadmap

<Timeline
  :items="[
    { date: 'Q1 2024', title: 'Foundation', description: 'Core theme, CLI, cover & default layouts.' },
    { date: 'Q2 2024', title: 'Design system', description: 'two-cols, stats, image-right, component library.', active: true },
    { date: 'Q3 2024', title: 'Export pipeline', description: 'PDF & image export via Playwright.' },
    { date: 'Q4 2024', title: 'Distribution', description: 'npm publish + team-wide rollout.' },
  ]"
  class="mt-4"
/>

---

# Quote — testimonial

<Quote author="Jane Doe" role="VP of Product at Acme Corp" class="mt-4">
  This slide system cut our deck-prep time in half. The team actually enjoys making presentations now.
</Quote>

---
layout: agenda
---

# Agenda — table of contents

## Introduction
Context and goals for this presentation.

## Key Findings
Data and analysis from the research phase.

## Recommendations
Actionable next steps and priorities.

## Timeline
Delivery milestones and owners.

---
layout: agenda
cols: 2
---

# Agenda — two columns

## Discovery Phase

## Research & Analysis

## Design Iteration

## Stakeholder Review

## Implementation

## Launch & Retrospective

---
layout: three-points
---

# Three-Points — icon + title + body

::one::
<span class="point-icon">🎯</span>

### Focus
Remove everything that doesn't serve the audience. One idea per slide.

::two::
<span class="point-icon">⚡</span>

### Speed
Presentations built in minutes, not days. Templates handle the hard parts.

::three::
<span class="point-icon">✨</span>

### Polish
Consistent typography, colour, and spacing — every time.

---

# ColumnChart — vertical bar chart

<ColumnChart
  :data="[
    { label: 'Q1', value: 42 },
    { label: 'Q2', value: 68 },
    { label: 'Q3', value: 55 },
    { label: 'Q4', value: 89 },
  ]"
  unit="k"
  :height="260"
  class="mt-4"
/>

---

# ImageGrid — photo grid

<ImageGrid
  :cols="3"
  :images="[
    { src: 'https://picsum.photos/seed/a/400/300', alt: 'Image 1', caption: 'Caption one' },
    { src: 'https://picsum.photos/seed/b/400/300', alt: 'Image 2', caption: 'Caption two' },
    { src: 'https://picsum.photos/seed/c/400/300', alt: 'Image 3', caption: 'Caption three' },
    { src: 'https://picsum.photos/seed/d/400/300', alt: 'Image 4', caption: 'Caption four' },
    { src: 'https://picsum.photos/seed/e/400/300', alt: 'Image 5', caption: 'Caption five' },
    { src: 'https://picsum.photos/seed/f/400/300', alt: 'Image 6', caption: 'Caption six' },
  ]"
  class="mt-4"
/>

---

## components — Badge

<div class="flex gap-3 flex-wrap mt-4">
  <Badge color="accent">New</Badge>
  <Badge color="teal" icon="✓">Done</Badge>
  <Badge color="purple">Beta</Badge>
  <Badge color="magenta">Experimental</Badge>
  <Badge color="green" icon="▲">Up</Badge>
  <Badge color="red" icon="▼">Down</Badge>
  <Badge color="gray">Deprecated</Badge>
</div>

```md
<Badge color="accent">New</Badge>
<Badge color="teal" icon="✓">Done</Badge>
<Badge color="green" icon="▲">Up</Badge>
```

---

## components — Steps (vertical)

<Steps>
  <li><div><strong>Define the problem</strong><span>Align on scope, success metrics, and constraints.</span></div></li>
  <li><div><strong>Design the solution</strong><span>Prototype, validate with users, iterate quickly.</span></div></li>
  <li><div><strong>Ship & measure</strong><span>Deploy, monitor metrics, and learn from real usage.</span></div></li>
</Steps>

---

## components — Steps (horizontal)

<Steps :horizontal="true">
  <li><div><strong>Discover</strong><span>Research</span></div></li>
  <li><div><strong>Design</strong><span>Prototype</span></div></li>
  <li><div><strong>Build</strong><span>Engineer</span></div></li>
  <li><div><strong>Launch</strong><span>Deploy</span></div></li>
</Steps>

---

## components — KeyValue

<div class="grid-2 mt-4">
  <KeyValue :items="[
    { key: 'Owner', value: 'Platform Engineering' },
    { key: 'Status', value: 'In Progress', badge: true },
    { key: 'Priority', value: 'P1' },
    { key: 'Due', value: 'Q2 2025' },
  ]" />
  <KeyValue :vertical="true" :items="[
    { key: 'Stack', value: 'TypeScript · Vue · Vite' },
    { key: 'Repo', value: 'theorchard/collab' },
    { key: 'Docs', value: 'confluence.theorchard.com' },
  ]" />
</div>

---

## components — Avatar

<div class="grid-4 mt-4">
  <Avatar name="Alice Martin" role="Product Manager" detail="Platform" />
  <Avatar name="Bob Chen" role="Engineering Lead" detail="Backend" />
  <Avatar name="Clara Roy" role="Designer" detail="UX & Systems" />
  <Avatar name="David Kim" role="Data Scientist" detail="Analytics" />
</div>

---

## components — VideoEmbed

<VideoEmbed
  src="https://www.youtube.com/embed/y38qQRg3UDI?si=hXYE8qt9j0SNeuxd"
  title="YouTube video player"
  caption="An embedded YouTube video — works with any iframe-compatible source."
/>

---
layout: cover
---

# Thank You