# 01 — App Prototypes

The product-facing UI explorations for Kinko.

## policy-analyser/  (the main prototype)

A 7-screen mobile lead-acquisition funnel for analysing a health-insurance
policy. Built as a single-page app — **React 18 + Framer Motion + htm**, loaded
from CDN via an import map (`index.html`). No build step.

**Run it** (needs HTTP + internet for the CDN):
```bash
cd policy-analyser
python3 -m http.server 8000   # then open http://localhost:8000/
```

**Files**
- `index.html` — import map + mount point
- `app.js` — all screens, components, and the `Tedi` mascot (uses `assets/tedi-*.png`)
- `styles.css` — mirrors the Kinko Design System token approach
- `assets/` — mascot expressions: `tedi-curious.png`, `tedi-think.png`, `tedi-worried.png`

**Funnel screens** (see `../03-learnings-and-reference/policy-analyser-build-notes.md`)
1. Landing → 2. Upload → 3. Confirm → 4. Preview (score) →
5. Lead capture → 6. Full report → 7. Three CTAs

The design direction is **infographic-first**: a radial score gauge, an 18-feature
coverage heatmap, severity gap-cards with ₹ impact meters. Single green accent
(`#009b1a`); hierarchy via weight/size, not rainbow color.

## life-simulator-game/  (the game)

A gamified "Why Insurance Matters" flow — 9 life events, A/B choices, dynamic
financial result. Vanilla HTML/JS, inlines the Kinko Design System, and reuses
the rigged Lottie mascot poses. It has its own detailed README inside the folder.

**Run it** (needs HTTP + internet):
```bash
cd life-simulator-game
python3 -m http.server 8000   # open http://localhost:8000/screens/life-simulator.html
```

The folder mirrors the original project layout (`screens/` + `css/` + `tokens/`)
so the result-page "Calculate Coverage" CTA → bundled `coverage-calculator-kds.html`
resolves correctly.

## policy-gap-explorations/

Earlier **static HTML** concept boards exploring how to visualize a user's
coverage gaps. Each opens directly in a browser (no server needed):
- `policy-gaps-card.html` — first card concept
- `policy-gap-cards.html` — card variations
- `policy-gap-cards-v2.html` — "new perspectives" iteration
- `policy-gap-iceberg-v2.html` — "iceberg" metaphor card (visible vs hidden gaps)

## insurance-illustration.svg

A hero/marketing illustration in the Kinko house style (see
`../03-learnings-and-reference/illustration-style.md`).