Add flair badge gamification system with custom SVG badges

- Create 12 Office Space themed SVG badges (extraction, basement, printer,
  coffee, tps, bobs, memo, oface, stapler, conclusions, spreadsheet, flair-badge)
- Implement FlairBadge.astro component with localStorage persistence
- Add 15-second timer per page to earn flair
- Create floating counter, modal flair board, toast notifications
- Override Starlight Footer to inject flair system globally
- Add name capture dialog on first flair earned

Features:
- Badges glow golden when earned, grayscale when locked
- Progress persists across browser sessions
- Stan quote: "We need to talk about your document processing..."
This commit is contained in:
Ryan Malloy 2026-01-11 14:24:39 -07:00
parent 32b41f79d9
commit 5ae7040496
28 changed files with 1410 additions and 11 deletions

View file

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
<!-- "I Was Told There Would Be Extraction" - Document with extraction arrow -->
<rect x="10" y="6" width="22" height="28" rx="2" fill="#f8fafc" stroke="#475569" stroke-width="2"/>
<rect x="14" y="12" width="14" height="2" rx="1" fill="#94a3b8"/>
<rect x="14" y="17" width="14" height="2" rx="1" fill="#94a3b8"/>
<rect x="14" y="22" width="10" height="2" rx="1" fill="#94a3b8"/>
<!-- Extraction arrow coming out -->
<path d="M28 26 L38 26 L38 22 L46 28 L38 34 L38 30 L28 30 Z" fill="#dc2626"/>
<!-- Small glow effect -->
<ellipse cx="46" cy="28" rx="4" ry="6" fill="#dc2626" opacity="0.2"/>
</svg>

After

Width:  |  Height:  |  Size: 689 B