TitleZone

Badge pill + title + optional subtitle + footnote for the top section of every slide.

Component

src/lib/deck/patterns/TitleZone.tsx

Props

Prop	Type	Description
badge	string	Badge pill text (e.g., "STRATEGY", "STEP 1")
title	string	Main title text
subtitle	string?	Optional subtitle/instruction below the title
footnote	string?	Optional right-aligned footnote

Usage

The badge text changes per slide to indicate the current section:

import { TitleZone } from "@/lib/deck/patterns/TitleZone";

// Title slide
<TitleZone badge="STRATEGY" title="Solving with Tape Diagrams" />

// Step slides
<TitleZone badge="STEP 1" title="Read the problem" />
<TitleZone badge="STEP 2" title="Draw the diagram" />

// Summary slide
<TitleZone badge="SUMMARY" title="Key Takeaways" />

// Practice slides
<TitleZone badge="PRACTICE" title="Try It Yourself" />

// With footnote
<TitleZone
  badge="STEP 1"
  title="Identify the Variables"
  footnote="Grade 8 - Unit 4 - Lesson 1"
/>

Design

Badge pill: #1791e8 blue background, white bold uppercase text (12px, 0.5px letter-spacing), 16px border-radius. Badge color is hardcoded — not configurable via props.
Title: #1791e8 blue, 22px bold
Positions are hardcoded internally (badge at x=12, y=10) — not configurable via props.
Subtitle: #1d1d1d dark, 16px
Footnote: #666666 gray, 10pt, right-aligned in top-right corner

Badge variations by slide

Slide ID	Badge text
`"title"`	STRATEGY
`"step-1"`, etc.	STEP 1
`"summary"`	SUMMARY
`"practice-1"`	PRACTICE