Execute **Implementation timeline** below in order (phases bundle parallelizable work; within a phase, prefer top-to-bottom).

[p3n74]

Synced from Winnow plan Quality Assessment and UI/UX mastery (c7b3c344-85c6-40eb-823e-c4e6d3f81bb6).

Section: In Progress
Status at sync: open
Task key: in-progress/0/execute-implementation-timeline-below-in-order-phases-bundle-parallelizable-work

Details

• Execute Implementation timeline below in order (phases bundle parallelizable work; within a phase, prefer top-to-bottom).

Implementation timeline (ordered)

Execute in this order so dialog semantics land before broad keyboard/SR validation, dashboard + footer restore trust early, then forms/theme, then polish/performance, then validation.

Phase 1 — Critical / High: overlays, trust, CRO

1. Home + treatments modals (A11Y + UX): Implement proper dialog pattern for home contact overlay (apps/web/src/app/page.tsx) and treatment detail overlays (landing/treatments.tsx, treatments-page.tsx): role="dialog" / Radix Dialog, aria-modal, labelled title, focus trap, Escape to close, first focus inside panel on open, backdrop click dismiss (backdrop onClick closes; panel stopPropagation).
2. Dashboard trust (dashboard.tsx): Remove or dev-only-gate console.log / console.warn on subscription paths; replace placeholder subscription CTAs with disabled + clear copy and/or toast.info until billing is wired.
3. Footer social CRO + A11Y (footer.tsx): Replace non-interactive social <span>s with real <a href="..." rel="noopener noreferrer"> (URLs aligned with hero Facebook / brand).

Phase 2 — Medium: consultations + shell menus

4. Consultations form + calendar (consultations-client.tsx): Pair every visible <label> with htmlFor + matching control id (inputs, select, textarea, phone/country); add aria-label="Previous month" / "Next month" on calendar nav buttons; optionally aria-pressed on slot buttons where it aids state.
5. Consultations UX/perf: Hoist min/max selectable day bounds with useMemo (avoid 42× recompute in cell map); add date-picker popover dismiss (Escape, outside click, optional Cancel / Done).
6. User menu (user-menu.tsx): Sign-out as DropdownMenuItem + onSelect; show email as DropdownMenuLabel or static text (avoid nested full Button / non-action menu row).

Phase 3 — Medium: theme + motion + global chrome

7. Theme coherence: Align layout.tsx body background with tokens (bg-background or shared --cream in :root + .dark) so ModeToggle / index.css stay consistent.
8. Reduced motion: Apply motion-reduce:animate-none (or CSS prefers-reduced-motion) to “scroll down to meet the team” pulse and similar decorative motion.

Phase 4 — Low: quick technical + visual cleanup

9. Dead code / noise: Remove unused Footer import from apps/web/src/app/page.tsx (done during Q-001); delete or deliberately adopt page-layout.tsx (avoid double header/footer with root layout).
10. Auth + chrome micro-fixes: sign-in-form.tsx — numeric width/height on next/image; decorative Google <svg> — aria-hidden="true"; sign-up-form.tsx — drop stray text-indigo-600, use link/primary tokens; mode-toggle.tsx — relative on icon trigger container; hero / visuals — descriptive alt (e.g. “Precisione logo”).
11. Visual consistency (optional batch): Unify desktop vs mobile nav label casing; replace very small arbitrary sizes (text-[11px], fractional rem) with scale tokens (e.g. text-xs minimum for supporting copy) where low-risk.

Phase 5 — Performance + hardening

12. Images: Add responsive sizes to priority fill next/image usages on home and treatments (doctor cards, hero sections as applicable).
13. Home carousel observer: Harden IntersectionObserver setup/cleanup (ref-based or stable deps) so changing slides cannot leak observers.

Phase 6 — Validation + follow-up

14. Run Validation checklist (keyboard sweep, screen reader on dialogs/forms, Lighthouse A11y + Best Practices on /, /treatments, /consultations, /login, /dashboard, dark mode spot check after theme fix).
15. Sidequest: After consultation label work, Lighthouse /consultations; file any remaining contrast issues (e.g. text-muted-foreground on translucent cards).

---

Next Tasks (summary — detail in timeline)