# Fintastic Returns — Page Integration

Added `fintastic.html` as the dedicated brand landing page for House II of the Finisit ecosystem, with full nav integration across all 22 canonical pages + 2 member pages.

## Files added

| Path | Purpose |
|---|---|
| `fintastic.html` | Main brand landing page (624 lines, scoped CSS via `--fin-brand`) |
| `assets/og-fintastic.png` | 1200×630 Open Graph image |
| `assets/og-fintastic.webp` | WebP variant (47% smaller) |
| `assets/twitter-fintastic.png` | Twitter card image |
| `assets/twitter-fintastic.webp` | WebP variant |
| `scripts/og-fintastic.mjs` | Regenerates the OG images via Playwright |
| `scripts/add-fintastic-nav.mjs` | Idempotent nav-migration script (handles 3 nav formats) |
| `scripts/screenshot-fintastic.mjs` | Captures `fintastic-desktop.png` + `fintastic-mobile.png` |
| `scripts/probe-fintastic.mjs` | DOM-render verifier |
| `docs/screenshots/fintastic-desktop.png` | 1280×… preview |
| `docs/screenshots/fintastic-mobile.png` | 390×… mobile preview |
| `docs/fintastic-handoff.md` | This file |

## Files modified

| File | Change |
|---|---|
| `ecosystem.html` | Brand card → `fintastic.html`. House II CTA replaced with two buttons (Explore the Table / Play 5-min Demo) |
| **All 21 top-level HTML pages** | New `<li><a href="fintastic.html" data-i18n="nav.fintastic">Fintastic</a></li>` inserted in primary-nav after  |
| **2 member pages** (`member/finsight.html`, `member/finsight-arb.html`) | Same nav addition with relative path `../fintastic.html` |
| `data/i18n-th.json` | Added `nav.fintastic: "Fintastic Returns"` |
| `sitemap.xml` | Auto-regenerated — 29 pages + 33 posts = 62 URLs |

## Validations passing

```
✓ check-nav-drift     22 pages canonical, all include Fintastic
✓ check-encoding      275 files scanned, no errors
✓ check-seo           35 files, 0 errors (14 pre-existing warnings on other pages)
✓ check-i18n          nav.fintastic key valid; pre-existing bare-English on other pages
✓ build-sitemap       62 URLs total
✓ ESLint              all 4 new scripts pass clean
✓ Visual screenshot   full-page render verified on 1280px and 390px
```

## Page sections

1. **Hero** — "Trade. Invest. Strategize. Win." + CTAs + 4 status pills
2. **Three Editions** — Web Demo (LIVE) / Physical (PRE-ORDER) / NFT (coming)
3. **Demo CTA** — Big launch button → `https://fintastic-returns-demo.vercel.app/`
4. **How It Plays** — 5 numbered steps
5. **The Four Roles** — Mr. Compoundo + 3 AI bots
6. **7 Archetypes** — tease grid
7. **Why a Board Game** — emotional hook + 4 outcomes
8. **CTA Band** — final conversion push
9. **Footer** — canonical site footer with new "Fintastic Returns" column

## Demo URL

The page launches the demo at `https://fintastic-returns-demo.vercel.app/` — placeholder until the demo (at `C:\Users\usEr\fintastic-returns-demo\`) is deployed.

Two integration alternatives once demo is deployed:

1. **External link** (current) — keeps demo on its own Vercel project. Simplest.
2. **Subfolder bundle** — copy demo `dist/` into `Projects/finisit-site/fintastic-demo/`. Same domain, single deploy. Update `<a id="demo-launch">` href in `fintastic.html` to `/fintastic-demo/`.
3. **Vercel rewrite** — add to `vercel.json`: `{ "source": "/play/(.*)", "destination": "https://fintastic-returns-demo.vercel.app/$1" }`. Same domain, separate deploys, no bundle bloat.

## Suggested follow-up tasks

- [ ] Deploy the web demo to Vercel and update `<a id="demo-launch">` href in `fintastic.html`
- [ ] Add Plausible goal `cta_play_demo` for funnel tracking
- [ ] Translation: add `data-i18n="fintastic.*"` keys throughout `fintastic.html` body for full Thai
- [ ] Member-only feature: leaderboard + best score sync once member auth wired
- [ ] Add Fintastic to the "Finisit" footer column on other pages (currently only on `fintastic.html`)
- [ ] Sub-folder bundle the demo so it lives at `/fintastic-demo/` on same domain

## Migration script

`scripts/add-fintastic-nav.mjs` is idempotent and handles three nav formats:
1. Inline canonical (top-level pages with `data-i18n`)
2. Block canonical (multi-line `<li>...</li>` blocks)
3. Member relative (`../nft.html` paths, no i18n)

Safe to re-run if anyone adds new pages — it'll only modify pages that have  but lack Fintastic.