docs: client-approved public-site redesign — PRD 1.4, UX spec v2.0, architecture §6.2, tasks 24-x Ready for Dev

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>

docs/tasks/24-6.md

@@ -0,0 +1,90 @@
+---
+id: 24-6
+title: 24-6 Booking Page and Booking Success
+status: Ready for Dev
+date: 2026-10-31
+parent: 24
+---
+
+## Description
+
+Restyle `/booking` (the non-compact rendering of `resources/views/livewire/pages/booking.blade.php`)
+and `/booking/success` (`resources/views/livewire/pages/booking-success.blade.php`) to the
+redesign. Behaviour does not change: the month calendar, the guest fields, the captcha, the
+confirm step, the one-per-day rule, the logged-in message, and the redirect to `/booking/success`.
+Task 24-5 already added `$compact`, the strip variant and the `.book`, `.book-l`, `.book-r`,
+input and label styles in `resources/css/public.css`; reuse them.
+
+### `/booking` (non-compact branch of `booking.blade.php`)
+
+Replace the page markup (keeping every `wire:` binding, error output, and the
+`@if($isLoggedIn)` / step logic) with:
+
+`<section class="sec" style="padding-top:56px"><div class="wrap">` →
+`<x-site.section-head :label="__('site.art_booking')" :title="__('booking.request_consultation')" :lede="__('site.booking_lede')" />` →
+`<div class="book">`:
+- `.book-l.on-dark`: `.contact` list (phone `tel:+970599353502` with
+  `<span dir="ltr">{{ __('footer.phone') }}</span>`, `mailto:` `footer.email`, address
+  `footer.address`, same 20px gold icons as the home card) and
+  `<x-site.balance mode="static" style="width:190px;height:190px;margin-top:22px" />`.
+- `.book-r` (cream inset): for a logged-in visitor, the existing logged-in title, message and
+  `booking.go_to_dashboard` link (`route('client.consultations.book')`) as `btn btn-gold`.
+  For a guest: step 1 — `booking.select_date_time` then `<livewire:availability-calendar />`
+  (month variant); step 2 — the selected date/time summary with the existing "change" action,
+  the fields name, email, phone, case summary, captcha, the gold submit; step 3 — the existing
+  confirmation summary with Confirm (`btn-gold`) and Back (`btn-ghost`). The existing
+  `session('success')` callout stays at the top of `.book-r`.
+
+Below the card, inside the same `.wrap`, keep `<x-booking-expectations class="mt-10" />`
+unchanged.
+
+### Month calendar restyle (CSS only, scoped to the public site)
+
+In `resources/css/public.css`, under `body.site`, style the month grid rendered by
+`resources/views/livewire/availability-calendar.blade.php` (month variant) without editing its
+markup: day cells min 44×44px, radius 10px; available and partial days white with a 6px gold dot
+below the number (`::after`, `background:var(--gold)`); the selected day `background:var(--forest)`
+with cream text; unavailable, closed, blocked and past days `--muted` text at 50% opacity, no
+hover; month navigation buttons as 44px pills with `1.5px solid var(--line)`. Read the template
+to find the exact classes or `wire:click` attributes the selectors must target; if the template
+has no class to hook onto, add a class attribute only (e.g. `site-cal-day`, plus
+`is-available`, `is-selected`) without changing structure or behaviour, so the client dashboard
+(which has no `body.site`) renders as before.
+
+### `/booking/success` — `booking-success.blade.php`
+
+`<section class="sec"><div class="wrap">` → a centred cream card (max-width 560px, margin-inline auto,
+`background:var(--cream)`, `1px solid var(--line)` border, radius 20px, `--shadow-2`, padding
+48px 40px, text-align center) containing
+`<x-site.balance mode="static" style="width:120px;height:120px;margin:0 auto 18px" />`, `<h1>`
+`booking.success_title` (display font, `clamp(2rem,3.4vw,2.6rem)`), `<p>`
+`booking.success_message` (muted), and `<a class="btn btn-ghost" href="{{ route('home') }}" wire:navigate>`
+`site.nav_home`. Remove the `flux:icon` check-circle, `flux:heading` and `flux:button`.
+
+### Files
+
+- Modify: `resources/views/livewire/pages/booking.blade.php`,
+  `resources/views/livewire/pages/booking-success.blade.php`, `resources/css/public.css`, and
+  (class attributes only, if needed) `resources/views/livewire/availability-calendar.blade.php`.
+
+## Acceptance Criteria
+
+- [ ] `/booking` as a guest shows the section head, the forest card with contact details and a
+      level balance, and the month calendar inside the cream panel; selecting an available day and
+      a slot reveals the fields; completing the form and confirming creates one guest consultation
+      and redirects to `/booking/success`.
+- [ ] Every validation rule behaves as before this task (required fields, 20-character summary,
+      captcha, one booking per email per day), each error rendered under its field.
+- [ ] `/booking` logged in as a client shows the logged-in message and the link to
+      `/client/consultations/book`, and no form.
+- [ ] In the month calendar on `/booking`, available days show a gold dot, the selected day is
+      forest with cream text, and unavailable days are dimmed; day cells are at least 44×44px.
+- [ ] `/client/consultations/book` (logged in as a client) renders the calendar as before
+      (no `body.site` styles apply there).
+- [ ] `/booking/success` shows the balance, title, message and a Home button, and contains no
+      `flux:` markup output (`data-flux-` attributes) in its main content.
+- [ ] `/booking` and `/booking/success` have no horizontal scroll at 1440, 768 and 390px.
+
+## Sub-tasks
+
+None.