deckhearth/.convoys/liquid-glass-public-and-auth.md

---
name: liquid-glass-public-and-auth
classification: feature
success_metric: |
  `pages/index.js`, `pages/login.js`, `pages/signup.js`, and the
  public branches of `pages/cards.js` / `pages/collection/[id].js` /
  `pages/deck/[id].js` render under Liquid Glass with a refreshed hero
  + auth surface; the 3 smoke specs (home / sign-in / health) stay
  green; visual-diff baselines re-seeded; first-impression is
  measurably modernized (Lighthouse desktop Performance + a11y
  preserved ± 5 / ± 0).
skip: []
status: architecture-ratified-partial-implementation
created: 2026-06-03
architecture_ratified: 2026-06-03
partial_implementation: 2026-06-03
depends_on:
  - liquid-glass-design-tokens
  - liquid-glass-modal-and-surface-primitive
  - liquid-glass-form-primitives
  - liquid-glass-layout-shell
  - liquid-glass-card-surfaces
umbrella: liquid-glass-redesign
---

# Convoy: liquid-glass-public-and-auth

Sub-convoy #6 of the `liquid-glass-redesign` epic. This convoy is the
**first-impression delivery**: the landing page, the auth pages, and
the public-facing browse views are what visitors see before they sign
up. They get the most polish budget and the most editorial attention.

## Why

`pages/index.js` is 316 lines and was flagged in
`.convoys/ship-readiness.md` § Role-ia-architect: *"current
`pages/index.js` is 316 lines; needs an editorial pass. What's the
value prop in one sentence? Right now it's mostly 'we have cards'."*

The Liquid Glass redesign without an editorial pass on the landing
would be paint over a structural problem. This convoy bundles:

1. The visual migration of public + auth pages onto the new glass
   primitives.
2. An **editorial pass** on the landing page — one sentence value
   prop, hero shape, primary CTA, secondary CTA, social proof slot.
3. Auth page polish — login + signup are the most-completed user
   journey before sign-up; they get glass surface + the new `<Input>`
   + `<Button>` from #3 + rebuilt error state (closes the
   `aria-describedby` finding via #3's primitive).

This convoy depends on the entire foundation (#1–#5) so every primitive
+ surface is available when the editorial pass lands.

## Scope

### In scope

- `pages/index.js`:
  - Editorial pass — one-sentence value prop, hero, primary CTA, secondary
    CTA, social proof / sample-content slot.
  - Liquid Glass: hero gradient with ember-flame core, glass surfaces
    for content sections.
  - Drop legacy `fire-glow-bg` background animation (per umbrella §
    Open question #5 — operator default: drop).
  - Retain `ember-float` as a localized accent on hero only (motion
    budget per #7).
- `pages/login.js`:
  - Outer container `<GlassSurface tint="low" rim="ember"
    elevation="pronounced">`.
  - Inputs + button via #3 primitives.
  - Error state via `<Input error="...">` (closes a11y finding).
  - Quick Login removed per `purge-quick-login-from-loginpage` (PR #56,
    2026-05-29) — confirm still gone.
- `pages/signup.js`:
  - Mirror of login layout for visual consistency.
  - Same primitive consumption.
- Public branches:
  - `pages/cards.js` (`PublicCardsView` render path).
  - `pages/collection/[id].js` (public viewer branch).
  - `pages/deck/[id].js` (public viewer branch).
  - `pages/community/collections.js`.
  - `pages/community/decks.js` (if shipped — per ship-readiness §
    Role-ia-architect, currently a placeholder; if still placeholder,
    skip).
- `components/LoginCTA.js` — if it composes legacy button utility
  classes, migrate to `<Button>`; otherwise leave.
- `components/PublicCardsView.js` — already a component; glass-rate.

### Out of scope

- Onboarding wizard (the multi-step `/onboarding` surfaced by
  ship-readiness § Role-ia-architect) — separate convoy.
- Profile / settings pages (authenticated-only; not a first-impression
  surface).
- Pricing / Terms / Privacy pages — separate convoys when content lands.
- Marketing copy beyond the one-sentence value prop on `index.js` —
  defer to a future `marketing-copy-pass` convoy.

## Roles invoked

1. `role-ia-architect` — landing IA + value-prop wording.
2. `role-ux-reviewer` — auth flow, public browse, mobile-first review.
3. `role-architect` — brief decomposition (likely per-page; highly
   parallel via multitask).
4. `role-design-system-auditor` — verify token consumption.
5. `role-a11y-auditor` — auth form a11y (error wiring already closed
   by #3, but per-page focus order + skip-to-content audit).
6. `role-implementer` — multitask-friendly per-page briefs.
7. Post-PR audit fleet.

## Architecture + status (2026-06-03)

**Already shipped via earlier sub-convoys:**
- **`pages/login.js`** — form inputs + submit button migrated to
  `<Input>` + `<Button>` primitives (via `liquid-glass-form-primitives`
  Brief 1). The outer `<div className="p-8 rounded-2xl shadow-2xl
  backdrop-blur-sm border border-opacity-20">` editorial wrapper
  still uses the legacy `rgba(var(--bg-secondary-rgb), 0.85)`
  pattern — to be swept under this convoy's Brief 1.
- **`pages/signup.js`** — same as login; 6 inputs + submit button
  migrated. Outer editorial wrapper still legacy.

**Queued under this convoy's Brief 1:**
1. **`pages/index.js`** (landing) — hero treatment, feature-cards
   row, CTA buttons. Replace `gradient-text-flame` h1 with a
   layered ember rim-light treatment; convert feature cards to
   `<GlassSurface tint="low" rim="subtle" elevation="ambient">`.
2. **Login/signup outer wrapper** — replace the legacy
   `rgba(var(--bg-secondary-rgb), 0.85)` + `backdrop-blur-sm`
   composition with `<GlassSurface tint="low" elevation="pronounced"
   rim="subtle">`. Removes legacy token usage; consistent with
   `<Modal>` panel recipe.
3. **`pages/community/*.js`** (community lists, decks, forums) —
   apply card-grid-container composition once #5 lands.
4. **Public collection / deck pages** (`pages/collection/[id].js`,
   `pages/deck/[id].js` when accessed unauthenticated) — anonymous
   visitors see the same glass shell.
5. **Editorial copy pass** — `pages/index.js` hero copy currently
   reads "Welcome to Deck Hearth — Sign in to access My Collection".
   Replace with a value-prop-first headline that does NOT imply
   ownership-gate ("Build your collection." / "Track every card.").
   Coordinate with `.cursor/rules/api-routes.mdc` § "Product
   vocabulary" — use `VOCAB` constants for any user-facing nouns.

**Sequencing rationale:** the landing-page hero is a pixel-final
choice that benefits from a visual-diff round-trip BEFORE the rest
of the public sweep. Better as its own PR with re-seeded baselines
than batched here.

## Todos

- [ ] IA architect: landing value-prop + hero shape
- [ ] UX reviewer: auth flow, public browse, mobile
- [ ] Architect: per-page brief decomposition
- [ ] A11y auditor: auth form + skip-to-content
- [ ] Brief 1 — `pages/index.js` editorial + glass
- [ ] Brief 2 — `pages/login.js` + `pages/signup.js` glass
- [ ] Brief 3 — public collection + deck views
- [ ] Brief 4 — `community/*` pages
- [ ] Post-PR audit per brief

## Decisions to ratify

1. **Landing value-prop wording** — operator decision. IA architect
   proposes 3 candidates; operator picks one.
2. **Landing hero composition** — animated `AnimatedFireLogo` vs static
   glass card vs static + subtle motion. Recommended: static glass card
   with localized ember-float particles; reserve `AnimatedFireLogo` for
   logo-only contexts (logged-in chrome).
3. **Auth-page background** — flat glass on warm gradient bg vs
   layered glass with hero illustration. Recommended: flat glass on
   warm gradient (simpler, faster, matches Layout's logged-out CTA tone).
4. **Public branch glass density** — full glass or selective. Confirm
   per-page.
5. **Drop `fire-glow-bg`** — confirm operator default: drop.

## Acceptance criteria

1. Every page in § Scope renders under Liquid Glass.
2. Landing value-prop is one sentence; primary + secondary CTAs are
   `<Button>` primitives.
3. Auth forms use `<Input>` + `<Button>`; error states wire
   `aria-describedby`.
4. Smoke specs (home / sign-in / health) all green.
5. Lint + vitest green.
6. Linux visual-diff baselines re-seeded per brief.
7. Lighthouse desktop on `pages/index.js`: Performance ± 5,
   Accessibility ± 0 from pre-redesign baseline.

## CI impact

| Workflow / job | Behavior |
| --- | --- |
| `preview-smoke.yml` | Fires per brief; spec 1 (home) + spec 2 (sign-in) defend Briefs 1 + 2 directly. |
| `visual-diff.yml` | **Fires + LOUD** per brief. Per-page baseline re-seed mandatory. |
| `lint` | Fires. |
| `test:` (vitest) | Fires. |
| Lighthouse | Run pre + post on `pages/index.js`. |

## Known constraints

- **Smoke spec 2 wording** — `'sign-in page renders'` asserts
  `getByRole('button', { name: /sign in/i })`. Confirm Brief 2 keeps
  the button label as "Sign in" (any rename breaks smoke).
- **Theme tokens only** — no hex.
- **Layout dependency** — `pages/index.js` legitimately renders Layout
  for the logged-out branch (per `.cursor/rules/ui-and-theming.mdc`).
  Verify post-#4 Layout integration.

## Multitask dispatch

Pre-ratification proposal:

```yaml
slice_dependencies:
  - brief: 1
    depends_on: []
    files:
      - pages/index.js
  - brief: 2
    depends_on: []
    files:
      - pages/login.js
      - pages/signup.js
  - brief: 3
    depends_on: []
    files:
      - pages/cards.js
      - pages/collection/[id].js
      - pages/deck/[id].js
      - components/PublicCardsView.js
  - brief: 4
    depends_on: []
    files:
      - pages/community/collections.js
      - pages/community/decks.js
```

All four briefs are file-disjoint and parallel-safe via
`/multitask role-implementer briefs 1, 2, 3, 4`.

Post-PR audit per brief:

```
/multitask role-reviewer + role-design-system-auditor + role-a11y-auditor
```

## Out of scope follow-ups

- **`onboarding-wizard`** — surfaced by ship-readiness § Role-ia-
  architect. Multi-step `/onboarding` flow. P2 feature.
- **`marketing-copy-pass`** — beyond the one-sentence value prop. P3.
- **Privacy / Terms / pricing pages** — required pre-launch but
  content-blocked.