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

name	classification	success_metric	skip	status	created	architecture_ratified	partial_implementation	depends_on	umbrella
liquid-glass-public-and-auth	feature	`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).		architecture-ratified-partial-implementation	2026-06-03	2026-06-03	2026-06-03	liquid-glass-design-tokens liquid-glass-modal-and-surface-primitive liquid-glass-form-primitives liquid-glass-layout-shell liquid-glass-card-surfaces	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:

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.