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>
This commit is contained in:
Naser Mansour
@@ -116,7 +116,7 @@ php artisan make:model ModelName -mf
|
||||
- `app/Enums/` - UserType, UserStatus, ConsultationType, ConsultationStatus, PaymentStatus, TimelineStatus, PostStatus
|
||||
- `docs/prd.md` - Full product requirements document
|
||||
- `docs/architecture.md` - Complete architecture document
|
||||
- `docs/ux-design.md` - Design system reference (colors, typography, layout, components — retrospective, written 2026-09-27)
|
||||
- `docs/ux-design.md` - Design spec. **Part A** = the public-site redesign (approved by the client 2026-10-31, mockup `docs/ux-mockup.html`); **Part B** = the pre-redesign system, which still governs the dashboards, emails and the Nablus form
|
||||
- `docs/tasks/` - **Current task/status tracker** (`statuses.md` is the status source of truth). One row per epic (parent) and per story (subtask), e.g. `3.md` / `3-4.md`.
|
||||
- `docs/stories/`, `docs/epics/`, `docs/qa/gates/` - **Legacy.** Original BMAD-agent build records (98→102 stories across 16 epics). Kept for implementation history and traceability, no longer the status source — `docs/tasks/statuses.md` superseded them 2026-09-27. `.bmad-core/` and `.claude/commands/BMad/` are the retired BMAD toolchain, also kept but unused.
|
||||
|
||||
@@ -246,7 +246,25 @@ Located in `app/Notifications/`:
|
||||
- **Cascade deletes:** User deletion cascades to consultations, timelines, notifications
|
||||
- **Bilingual required:** All user-facing text needs Arabic and English
|
||||
|
||||
## Public-site redesign (PRD 1.4, tasks 24-x)
|
||||
|
||||
The public pages (home, about, posts, booking, legal) and the auth pages' type/controls follow
|
||||
`docs/ux-design.md` Part A; the map is `docs/architecture.md` §6.2. Boundaries that keep the
|
||||
dashboards safe:
|
||||
- Redesign styles live in `resources/css/public.css`, every selector under `body.site` (auth:
|
||||
`body.site-auth`); its script is `resources/js/public.js` + `resources/js/site/*`, initialised on
|
||||
`livewire:navigated`. Both load only from the public (and, CSS only, auth) layouts.
|
||||
- Never edit `resources/css/app.css` `@theme`/`.btn-*`, `components/language-toggle.blade.php`,
|
||||
or `lang/*/navigation.php` for the redesign — the dashboards share them. New public copy goes in
|
||||
`lang/{ar,en}/site.php`.
|
||||
- `availability-calendar` defaults to `variant="month"` (the client dashboard uses it); the home
|
||||
page uses `variant="strip"`. `pages.booking` takes `compact` for the home card; booking rules are
|
||||
shared and unchanged.
|
||||
|
||||
## Design Requirements (from PRD)
|
||||
|
||||
Below: the dashboards' palette and rules. Public pages: Part A of `docs/ux-design.md`.
|
||||
|
||||
- **Color scheme:**
|
||||
- Dark Forest Green (#2D3624) - Header/Footer backgrounds
|
||||
- Warm Gold (#A68966) - CTA buttons, links, accents
|
||||
|
||||
+64
-2
@@ -1,7 +1,7 @@
|
||||
# Libra Law Firm - Architecture Document
|
||||
|
||||
**Version:** 1.1
|
||||
**Date:** December 21, 2025
|
||||
**Version:** 1.2
|
||||
**Date:** October 31, 2026
|
||||
**Status:** Approved
|
||||
**Domain:** libra.ps
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
|------|---------|-------------|--------|
|
||||
| Dec 21, 2025 | 1.0 | Initial architecture document | Winston (Architect) |
|
||||
| Dec 21, 2025 | 1.1 | Added CI/CD, rollback procedures, monitoring, timezone handling, alternatives analysis | Winston (Architect) |
|
||||
| Oct 31, 2026 | 1.2 | Added §6.2 Public-site presentation layer (PRD 1.4 redesign, ux-design.md v2.0 Part A) | Jarvis |
|
||||
|
||||
---
|
||||
|
||||
@@ -1008,6 +1009,67 @@ libra/
|
||||
└── build/ # Compiled assets
|
||||
```
|
||||
|
||||
> §6.1 is the original (Dec 2025) plan. As built, the public layout is
|
||||
> `resources/views/components/layouts/public.blade.php` (not `guest.blade.php`) and public pages
|
||||
> are Volt components under `resources/views/livewire/pages/`. §6.2 is current.
|
||||
|
||||
### 6.2 Public-Site Presentation Layer (redesign, PRD 1.4)
|
||||
|
||||
**Overview.** The October 2026 redesign (PRD Update 1.4; `docs/ux-design.md` Part A) is a
|
||||
presentation-only change to the public pages. No route, model, migration, service, mail or job
|
||||
changes. The redesign is isolated from the admin and client dashboards by loading its stylesheet
|
||||
and script only from the public and auth layouts, and by scoping every rule under a body class.
|
||||
|
||||
**Components**
|
||||
|
||||
| Component | Path | Owns |
|
||||
|---|---|---|
|
||||
| Public stylesheet | `resources/css/public.css` (new Vite entry) | Part A tokens (`--forest`, `--gold`, …), linen ground, type, buttons, sections, cards, docket rows, booking card, footer, reveal and reduced-motion rules. Every selector is scoped under `body.site`; auth-page rules under `body.site-auth`. |
|
||||
| Public script | `resources/js/public.js` (new Vite entry) imports `resources/js/site/balance.js`, `reveal.js`, `progress.js` | The balance SVG builder and damped spring, hero pointer response, finale scroll mapping, IntersectionObserver reveal, reading-progress rule, nav scrolled state. Initialises on `livewire:navigated` (fires on first load and after every `wire:navigate`) and tears down listeners on `livewire:navigating`. |
|
||||
| Font partial | `resources/views/partials/site-fonts.blade.php` (new) | Google Fonts link for Markazi Text (400–700) and IBM Plex Sans Arabic (300–600), `display=swap`. |
|
||||
| Public layout | `resources/views/components/layouts/public.blade.php` (changed) | Body class `site`; includes the font partial and `@vite(['resources/css/public.css','resources/js/public.js'])` after `partials.head`; drops the 1200px content wrapper and the 64px fixed-nav spacer (nav becomes sticky); adds the progress rule element. |
|
||||
| Auth layouts | `resources/views/components/layouts/auth/split.blade.php`, `card.blade.php`, `simple.blade.php` (changed) | Body class `site-auth`; font partial; `public.css` only (no public script). Composition unchanged. |
|
||||
| Navigation / footer | `resources/views/components/navigation.blade.php`, `footer.blade.php` (restyled in place; used only by the public layout) | Part A nav and footer. Keeps the existing Alpine mobile menu, auth-aware links and language toggle. |
|
||||
| Site Blade components | `resources/views/components/site/` (new): `balance.blade.php` (SVG mount point; props `id`, `size`, `mode` = `hero` / `finale` / `static`), `section-head.blade.php` (article label + h2 + lede), `post-card.blade.php` (text-only post card) | Shared markup for the public pages. |
|
||||
| Redesign copy | `lang/ar/site.php`, `lang/en/site.php` (new) | Strings introduced by the redesign only (hero line, trust strip, pillars, article labels, card titles, booking lede, nav and footer labels). Existing keys in `home.php`, `about.php`, `booking.php`, `footer.php`, `navigation.php` are reused, never duplicated or edited. `navigation.php` keys used by the dashboards are untouched. |
|
||||
| Photography | `public/images/site/olive-tree.jpg`, `embroidery-hoop.jpg`, `olives.jpg`, `hills.jpg` (new; extracted from the data URIs in `docs/ux-mockup.html`) | Production images (Unsplash licence). Portrait stays `public/images/huda-armouche.jpg`; seal uses `public/images/logo.png`. |
|
||||
| Guest booking | `resources/views/livewire/pages/booking.blade.php` (changed) | Gains `public bool $compact = false` (mount parameter). `compact` renders the one-screen home layout; default renders the `/booking` page layout. Validation, captcha, one-per-day rule, confirm step and redirect to `booking.success` are shared and unchanged. |
|
||||
| Availability calendar | `resources/views/livewire/availability-calendar.blade.php` (changed) | Gains `public string $variant = 'month'`. `strip` lists the next 14 dates whose `AvailabilityService::getDateStatus()` is available (scanning at most 60 days ahead) and their `getAvailableSlots()`; `month` is the existing grid. Default stays `month`, so the client dashboard's booking page (`resources/views/livewire/client/consultations/book.blade.php`) is unaffected; its public restyle applies only under `body.site`. |
|
||||
|
||||
**Data flows**
|
||||
|
||||
1. Request to a public route → Volt page with `#[Layout('components.layouts.public')]` → layout
|
||||
loads `app.css` + `app.js` (unchanged, via `partials.head`), then `public.css` + `public.js`.
|
||||
2. Home `/` → `Post::published()->latest('published_at')->take(3)` (existing) → `x-site.post-card`;
|
||||
embeds `<livewire:pages.booking :compact="true" />`, which embeds
|
||||
`<livewire:availability-calendar variant="strip" />`. Slot choice → `$parent.selectSlot(date,
|
||||
time)` (existing contract) → submit → existing confirm step → existing `submit()` → redirect
|
||||
`/booking/success`.
|
||||
3. `public.js` on `livewire:navigated` → finds `[data-balance]` mounts → builds the SVG → binds
|
||||
pointer (hero, fine pointers only) and scroll (finale) → spring per `requestAnimationFrame`.
|
||||
`prefers-reduced-motion: reduce` → every balance drawn level, no listeners bound.
|
||||
4. Language: unchanged — `/language/{locale}` sets the session locale; layouts set `lang` and
|
||||
`dir`.
|
||||
|
||||
**Module boundaries**
|
||||
|
||||
- The redesign owns `public.css`, `public.js`, `resources/js/site/*`, `components/site/*`,
|
||||
`lang/*/site.php`, `public/images/site/*`, and the restyle of the public views listed above.
|
||||
- It does not own and must not change: `resources/css/app.css` `@theme` tokens and `.btn-*`
|
||||
classes, Flux configuration, anything under `resources/views/livewire/admin/` or
|
||||
`livewire/client/`, `components/layouts/app*`, emails, PDFs,
|
||||
`resources/views/livewire/pages/forms/nablus-workshop.blade.php`, `layouts/standalone.blade.php`,
|
||||
routes, models, services (read-only use of `AvailabilityService`), migrations.
|
||||
- Pages restyled: `livewire/pages/home.blade.php`, `about.blade.php`, `booking.blade.php`,
|
||||
`booking-success.blade.php`, `posts/index.blade.php`, `posts/show.blade.php`,
|
||||
`resources/views/pages/legal.blade.php` (and the `terms`/`privacy` wrappers if they render
|
||||
markup).
|
||||
- `partials/head.blade.php`: `theme-color` corrected to `#2D3624` (was the superseded
|
||||
`#4A4A42`); nothing else changes there, because the dashboards share it.
|
||||
|
||||
**Open gaps** — none blocking. The four rulings (photography, 14-day strip, unmocked pages, auth
|
||||
scope) are recorded in `docs/ux-design.md` Part A *Open Questions* and the project ledger.
|
||||
|
||||
---
|
||||
|
||||
## 7. Authentication & Authorization
|
||||
|
||||
+57
-1
@@ -1,7 +1,7 @@
|
||||
# Product Requirements Document (PRD)
|
||||
## Libra Law Firm Website
|
||||
|
||||
**Version:** 1.2
|
||||
**Version:** 1.4
|
||||
**Date:** January 3, 2026
|
||||
**Domain:** libra.ps
|
||||
**Prepared for:** Development Team & Client Review
|
||||
@@ -1106,6 +1106,7 @@ All emails in both Arabic and English based on user preference:
|
||||
| 1.1 | Dec 20, 2025 | Added brand identity section, clarified booking rules (1/day, 45min), multiple timelines, account management (deactivate/delete), exports, analytics, Terms/Privacy pages | Development Team |
|
||||
| 1.2 | Jan 3, 2026 | Added guest booking functionality: public booking form at /booking, custom captcha, 1-per-day limit, guest email notifications, admin guest booking management | Development Team |
|
||||
| 1.3 | Sep 27, 2026 | Added standalone Nablus workshop registration form (unlinked page at /forms/nablus-workshop) — see Update below | Development Team |
|
||||
| 1.4 | Oct 31, 2026 | Public-site redesign approved by the client (mockup v3): new visual system for the public pages, compact booking card on the home page — see Update below | Development Team |
|
||||
|
||||
---
|
||||
|
||||
@@ -1145,4 +1146,59 @@ None outstanding — all decisions confirmed directly with Naser in the same ses
|
||||
|
||||
---
|
||||
|
||||
## Update — Version 1.4
|
||||
**Date:** 2026-10-31
|
||||
|
||||
### New Features Added
|
||||
|
||||
**Public-site redesign.** ElenosLabs proposed a redesign of Libra's public website (mockup v3,
|
||||
`docs/ux-mockup.html`); the client approved it on 2026-10-31. Scope answers given by Naser on
|
||||
2026-10-31: scope "Public site" (home, about, posts, booking, auth); brand "Keep logo, evolve
|
||||
rest" (the logo and the forest/gold/cream palette stay; type, layout and motion change); driver
|
||||
"Our pitch". Naser's constraint on content: "we dont need to promice smth we wont deliver" — every
|
||||
claim on the new pages is backed by existing behaviour. The full visual specification is
|
||||
`docs/ux-design.md` Part A.
|
||||
|
||||
- **New visual system on every public page** — `/`, `/about`, `/posts`, `/posts/{post}`,
|
||||
`/booking`, `/booking/success`, `/page/{slug}`: Markazi Text (display) and IBM Plex Sans Arabic
|
||||
(body); the brand palette used in full-bleed forest bands, gold rules and a linen cream ground;
|
||||
sections numbered as articles; a sticky translucent navigation with a reading-progress rule; a
|
||||
four-column forest footer.
|
||||
- **Signature balance** — an engraved-gold scales-of-justice graphic over olive-tree photography in
|
||||
the home hero, settling into balance on load and responding to the pointer; a second balance in
|
||||
the booking card comes level as the reader arrives. All motion respects
|
||||
`prefers-reduced-motion`.
|
||||
- **Redesigned home page** — hero, pillars (Justice, Dignity, Advocacy), founder, services docket,
|
||||
vision with photography, values, latest three articles (text-only cards), and an embedded
|
||||
booking card.
|
||||
- **Compact booking on the home page** — the home page embeds the existing guest-booking form as
|
||||
one screen (name, phone, email, a 14-day strip of days with free slots, slot buttons, case
|
||||
summary, captcha), with the same rules as `/booking` (required fields, 20-character minimum
|
||||
summary, captcha, one booking per email per day, slots from the availability settings, the
|
||||
confirm step, the success page). This realises §5.1's "Embedded simplified booking form".
|
||||
- **Auth pages** — the new type and form controls; the split layout is unchanged.
|
||||
- **Production photography** — four licensed Unsplash photographs (olive tree, embroidery hoop,
|
||||
olives, hills) and the founder's existing portrait.
|
||||
|
||||
### Scope Changes
|
||||
|
||||
- §5.1 and §7 (Design Requirements) are superseded for the public pages by `docs/ux-design.md`
|
||||
Part A. §7's typography (Cairo/Montserrat), button radius and card specs continue to apply to
|
||||
the admin and client dashboards, which are unchanged.
|
||||
- §5.2 navigation gains a "Services" link (to the home page's services section); the menu labels
|
||||
on the public site read Home, About, Services, Articles, Booking.
|
||||
- Out of scope: admin and client dashboards, emails, PDF exports, `/forms/nablus-workshop`, any
|
||||
backend or database change, post images or categories, new content beyond the redesign's
|
||||
section labels and short lines approved in the mockup.
|
||||
|
||||
### Open Questions
|
||||
|
||||
None blocking. Rulings recorded in the project ledger (2026-10-31): the mockup's Unsplash photos
|
||||
ship to production (replaceable by the client's own later); the home day strip covers the next 14
|
||||
days with free slots; pages not shown in the mockup are composed from its components with their
|
||||
existing content; auth pages change type and controls only. The build price is not yet set (a
|
||||
commercial matter, not a product requirement).
|
||||
|
||||
---
|
||||
|
||||
**END OF DOCUMENT**
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
---
|
||||
id: 24-1
|
||||
title: 24-1 Public Design Foundation (Stylesheet, Script, Fonts, Layout)
|
||||
status: Ready for Dev
|
||||
date: 2026-10-31
|
||||
parent: 24
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
Create the shared foundation every later redesign subtask builds on. It must be loaded only by
|
||||
the public layout (and, for the stylesheet only, by the auth layouts in task 24-9), and every rule
|
||||
must be scoped under `body.site` so the admin and client dashboards are unaffected.
|
||||
|
||||
The approved visual reference is the mockup file `docs/ux-mockup.html` (committed in `caec396`).
|
||||
Where this task says "port lines X–Y", copy those CSS rules from that file and prefix every
|
||||
selector with `body.site ` (for example `.btn-gold` → `body.site .btn-gold`; `:root{…}` →
|
||||
`body.site{…}`; `body{…}` → `body.site{…}`; `html[dir=ltr] .x` → `html[dir=ltr] body.site .x`;
|
||||
`html[lang=en] .x` → `html[lang=en] body.site .x`). The mockup's lines contain no images, so line
|
||||
numbers are exact.
|
||||
|
||||
### Files to create
|
||||
|
||||
1. **`resources/css/public.css`** — contains, in this order:
|
||||
- Tokens on `body.site` (from mockup lines 12–29):
|
||||
`--forest:#2D3624; --forest-2:#232A1C; --gold:#A68966; --gold-ink:#8A7555; --gold-lt:#C4A882;
|
||||
--cream:#F4F1EA; --olive:#4A5D23; --ink:#1E2219; --muted:#5B6152; --line:rgba(45,54,36,.14);
|
||||
--display:"Markazi Text","Times New Roman",serif; --body:"IBM Plex Sans Arabic",system-ui,sans-serif;
|
||||
--r:10px; --ease:cubic-bezier(.2,.7,.2,1);
|
||||
--shadow-1:0 1px 2px rgba(30,34,25,.06),0 4px 14px rgba(30,34,25,.06);
|
||||
--shadow-2:0 2px 4px rgba(30,34,25,.08),0 18px 40px -12px rgba(30,34,25,.28);`
|
||||
- Page ground and type on `body.site` (port lines 32–39): `font-family:var(--body);
|
||||
color:var(--ink); font-size:17px; line-height:1.75; background-color:var(--cream)` plus the
|
||||
linen weave `background-image: repeating-linear-gradient(0deg, rgba(45,54,36,.025) 0 1px,
|
||||
transparent 1px 3px), repeating-linear-gradient(90deg, rgba(45,54,36,.022) 0 1px, transparent
|
||||
1px 4px)`. This overrides the inline `style="font-family: var(--font-…)"` on the body, so the
|
||||
layout's inline style is removed (see layout changes below).
|
||||
- Port lines 40–50 (img, links, `.wrap`, skip link, focus-visible, h1–h3, `.eyebrow`,
|
||||
`.art-no`). `.wrap` = `max-width:1200px; margin-inline:auto; padding-inline:28px`.
|
||||
Focus = `outline:2px solid var(--gold); outline-offset:3px; border-radius:4px`.
|
||||
- Buttons: port lines 52–68 (`.btn`, `.btn-gold` with shimmer `::after`, `.btn-ghost`,
|
||||
`.on-dark .btn-ghost`, `.btn .arr` and LTR mirroring). Class names `.btn`, `.btn-gold`,
|
||||
`.btn-ghost` do not exist in `resources/css/app.css` (which uses `.btn-primary`,
|
||||
`.btn-secondary`), and they are scoped under `body.site`, so there is no collision.
|
||||
- Progress rule: port lines 70–73 (`#hem` → rename to `.site-progress`; fixed, top 0, z 60,
|
||||
height 2px, gradient `linear-gradient(90deg,#8A7555,#E2CDA4,#A68966)`, `transform:scaleX(0)`,
|
||||
origin right; `html[dir=ltr]` origin left).
|
||||
- Sections: port lines 139–144 (`section{position:relative}`, `.sec{padding:120px 0}`,
|
||||
`.sec-head`, `.sec-head h2`, `.sec-head p`).
|
||||
- Reveal: port lines 286–290, changed so content is hidden only when JavaScript runs:
|
||||
`body.site.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s
|
||||
var(--ease),transform .9s var(--ease)}`, `body.site.js [data-reveal].in{opacity:1;transform:none}`,
|
||||
and the `data-d` 1–5 delays (.08s, .16s, .24s, .32s, .4s).
|
||||
- Responsive base: at `max-width:760px`: `body.site{font-size:16px}`,
|
||||
`body.site .wrap{padding-inline:18px}`, `body.site .sec{padding:80px 0}`.
|
||||
- Reduced motion (port lines 324–327): under `@media (prefers-reduced-motion:reduce)`,
|
||||
`body.site *, body.site *::before, body.site *::after{animation:none!important;
|
||||
transition:none!important; scroll-behavior:auto!important}` and
|
||||
`body.site [data-reveal]{opacity:1;transform:none}`.
|
||||
- `html:has(body.site){scroll-behavior:smooth}`.
|
||||
2. **`resources/js/public.js`** — imports `./site/reveal.js` and `./site/progress.js`, and calls
|
||||
each module's `init()` on the `livewire:navigated` document event (Livewire 3 dispatches it on
|
||||
the first page load and after every `wire:navigate`), and each module's `destroy()` on
|
||||
`livewire:navigating`. On init it adds the class `js` to `document.body`.
|
||||
3. **`resources/js/site/reveal.js`** — exports `init()`/`destroy()`. If
|
||||
`matchMedia('(prefers-reduced-motion: reduce)').matches`, add class `in` to every
|
||||
`[data-reveal]` and return. Otherwise create one `IntersectionObserver` with
|
||||
`rootMargin: '0px 0px -8% 0px'`; when an observed element intersects, add class `in` and
|
||||
unobserve it. `destroy()` disconnects the observer.
|
||||
4. **`resources/js/site/progress.js`** — exports `init()`/`destroy()`. Adds a passive `scroll`
|
||||
listener on `window` that sets `.site-progress` `style.transform = scaleX(p)` where
|
||||
`p = max > 0 ? scrollY / max : 1` and `max = document.documentElement.scrollHeight - innerHeight`,
|
||||
and toggles class `scrolled` on `#site-nav` when `scrollY > 8` (if that element exists; it is
|
||||
added in task 24-2). Runs once on init. `destroy()` removes the listener.
|
||||
5. **`resources/views/partials/site-fonts.blade.php`** — exactly:
|
||||
```html
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
```
|
||||
6. **`lang/ar/site.php`** and **`lang/en/site.php`** — each `<?php return [ ... ];` with the
|
||||
keys `progress_label` (ar `'تقدّم القراءة'`, en `'Reading progress'`). Later subtasks add keys
|
||||
to these files.
|
||||
|
||||
### Files to modify
|
||||
|
||||
7. **`vite.config.js`** — `input` becomes
|
||||
`['resources/css/app.css', 'resources/js/app.js', 'resources/css/public.css', 'resources/js/public.js']`.
|
||||
8. **`resources/views/components/layouts/public.blade.php`**:
|
||||
- After `@include('partials.head')` add `@include('partials.site-fonts')` and
|
||||
`@vite(['resources/css/public.css', 'resources/js/public.js'])`.
|
||||
- `<body>` becomes `<body class="site min-h-screen flex flex-col">` (remove `bg-background`
|
||||
and the inline `style="font-family: …"`).
|
||||
- Immediately after the skip link add
|
||||
`<div class="site-progress" aria-hidden="true"></div>`.
|
||||
- Remove the spacer `<div class="h-16"></div>` (the navigation becomes sticky in 24-2; until
|
||||
then the existing fixed navigation may overlap the first 64px — acceptable only between
|
||||
24-1 and 24-2).
|
||||
- `<main>` keeps `id="main-content" role="main" class="flex-1" tabindex="-1"` but its child
|
||||
`<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">` is removed, so
|
||||
`{{ $slot }}` is rendered directly inside `<main>`.
|
||||
9. Because the wrapper is gone, wrap the root content of each existing public page that is not
|
||||
yet redesigned in `<div class="wrap py-8">…</div>` so these pages keep a contained width until
|
||||
their own subtask restyles them:
|
||||
- `resources/views/livewire/pages/home.blade.php`
|
||||
- `resources/views/livewire/pages/about.blade.php` (also remove the negative margins
|
||||
`-mx-4 sm:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8` from its first `<section>`)
|
||||
- `resources/views/livewire/pages/booking.blade.php`
|
||||
- `resources/views/livewire/pages/booking-success.blade.php`
|
||||
- `resources/views/livewire/pages/posts/index.blade.php`
|
||||
- `resources/views/livewire/pages/posts/show.blade.php`
|
||||
- `resources/views/pages/legal.blade.php`
|
||||
- `resources/views/pages/terms.blade.php`
|
||||
- `resources/views/pages/privacy.blade.php`
|
||||
(`resources/views/pages/booking.blade.php` is a dead placeholder — `/booking` is served by the
|
||||
Volt page — and is left untouched.)
|
||||
For a Volt page whose root is a single element, put the wrapper inside the root element so the
|
||||
component keeps one root.
|
||||
10. **`resources/views/partials/head.blade.php`** — change
|
||||
`<meta name="theme-color" content="#4A4A42">` to `<meta name="theme-color" content="#2D3624">`.
|
||||
Change nothing else in this file (the dashboards share it).
|
||||
|
||||
Do not modify `resources/css/app.css` or any file under `resources/views/livewire/admin/`,
|
||||
`resources/views/livewire/client/`, `resources/views/components/layouts/app*`.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [ ] `npm run build` succeeds and `public/build/manifest.json` contains entries for
|
||||
`resources/css/public.css` and `resources/js/public.js`.
|
||||
- [ ] Every selector in `resources/css/public.css` is scoped under `body.site` (or
|
||||
`html[...] body.site`, or `html:has(body.site)`), verify:
|
||||
`grep -nE '^[^@/ }].*\{' resources/css/public.css | grep -v 'body.site'` returns nothing.
|
||||
- [ ] The HTML of `/` contains `<body class="site`, the `Markazi+Text` font link, a
|
||||
`public.css` and a `public.js` asset, and `<div class="site-progress"`.
|
||||
- [ ] The HTML of `/admin/dashboard` (logged in as admin) and `/client/dashboard` (logged in as a
|
||||
client) contains neither `public.css`, `public.js`, `Markazi` nor `class="site`.
|
||||
- [ ] `resources/css/app.css` is unchanged: `git diff --quiet BASE -- resources/css/app.css`.
|
||||
- [ ] On `/` with the browser at 390px wide, the document has no horizontal scroll, and every
|
||||
public page listed in item 9 still renders its content inside a 1200px-max container.
|
||||
- [ ] Scrolling `/` changes the `.site-progress` element's transform from `scaleX(0)` toward
|
||||
`scaleX(1)`; with `prefers-reduced-motion: reduce` emulated, every `[data-reveal]` element
|
||||
is visible without scrolling.
|
||||
- [ ] `partials/head.blade.php` contains `content="#2D3624"` and no `#4A4A42`.
|
||||
|
||||
## Sub-tasks
|
||||
|
||||
None.
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 24-10
|
||||
title: 24-10 Redesign Integration Verification
|
||||
status: Ready for Dev
|
||||
date: 2026-10-31
|
||||
parent: 24
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
Verify the finished redesign as a whole before it is offered for deployment, and fix any defect
|
||||
found within the files touched by tasks 24-1 to 24-9. This task adds no feature. Build the assets
|
||||
(`npm run build`) first so the pages are not rendered from stale CSS.
|
||||
|
||||
Check, on the local site (`https://libra.test` via Valet, or `php artisan serve`), with at least
|
||||
three published posts in the database and working hours configured so slots exist:
|
||||
|
||||
1. **Pages** — `/`, `/about`, `/posts`, one `/posts/{post}`, `/booking`, `/booking/success`,
|
||||
`/page/terms`, `/page/privacy`, `/login`, `/forgot-password`: each in Arabic (RTL) and English
|
||||
(LTR), each at 1440, 768 and 390px wide.
|
||||
2. **Booking end-to-end** — one guest booking from the home card and one from `/booking`, each
|
||||
reaching `/booking/success` and each appearing in the admin's pending bookings
|
||||
(`/admin/bookings/pending`).
|
||||
3. **Unchanged areas** — `/admin/dashboard`, `/admin/bookings/pending`, `/admin/posts`,
|
||||
`/client/dashboard`, `/client/consultations/book`, `/forms/nablus-workshop`.
|
||||
4. **Motion** — load `/` with and without `prefers-reduced-motion: reduce` emulated.
|
||||
5. **Navigation** — move between public pages with the navigation links (`wire:navigate`) and back
|
||||
to `/`.
|
||||
|
||||
Fix defects in the redesign's own files only: `resources/css/public.css`, `resources/js/public.js`,
|
||||
`resources/js/site/*.js`, `resources/views/components/site/*.blade.php`,
|
||||
`resources/views/components/navigation.blade.php`, `resources/views/components/footer.blade.php`,
|
||||
`resources/views/components/layouts/public.blade.php`,
|
||||
`resources/views/components/layouts/auth/*.blade.php`, `resources/views/partials/site-fonts.blade.php`,
|
||||
`resources/views/livewire/pages/home.blade.php`, `about.blade.php`, `booking.blade.php`,
|
||||
`booking-success.blade.php`, `posts/index.blade.php`, `posts/show.blade.php`,
|
||||
`resources/views/livewire/availability-calendar.blade.php`, `resources/views/pages/legal.blade.php`,
|
||||
`terms.blade.php`, `privacy.blade.php`, `lang/ar/site.php`, `lang/en/site.php`.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [ ] Every page in item 1, in both languages and at all three widths, has no horizontal scroll
|
||||
(`document.documentElement.scrollWidth <= innerWidth`), no console error, and no missing
|
||||
translation key (no raw `site.` or `home.` key text visible).
|
||||
- [ ] Each page in item 1 has exactly one `<h1>`, every `<img>` has a non-empty `alt`, and every
|
||||
interactive element in the navigation, footer and booking card is reachable by Tab with a
|
||||
visible gold focus ring.
|
||||
- [ ] Both bookings in item 2 succeed and appear in `/admin/bookings/pending`.
|
||||
- [ ] The pages in item 3 contain no `public.css`, `public.js`, `class="site` or `site-auth`, and
|
||||
`git diff BASE -- resources/css/app.css resources/views/livewire/admin resources/views/livewire/client resources/views/components/layouts/app.blade.php resources/views/components/layouts/app resources/views/livewire/pages/forms`
|
||||
(BASE = the commit recorded before task 24-1) is empty.
|
||||
- [ ] With reduced motion emulated, all `[data-reveal]` content is visible on load and every
|
||||
balance is level; without it, the hero balance settles and the finale levels on scroll.
|
||||
- [ ] After five `wire:navigate` hops ending on `/`, the hero balance and reveal still work and the
|
||||
finale still levels.
|
||||
- [ ] Contrast: body text on cream, `--gold-lt` text on forest, and the gold button text meet
|
||||
WCAG AA (4.5:1 for body text, 3:1 for large text) — measured, values noted in the task's QA
|
||||
record.
|
||||
- [ ] No page contains the text "Unsplash" or "mockup".
|
||||
|
||||
## Sub-tasks
|
||||
|
||||
None.
|
||||
@@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 24-2
|
||||
title: 24-2 Navigation and Footer
|
||||
status: Ready for Dev
|
||||
date: 2026-10-31
|
||||
parent: 24
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
Restyle the public navigation and footer to the approved redesign. Both components are used only
|
||||
by `resources/views/components/layouts/public.blade.php`, so they are restyled in place. Keep all
|
||||
existing behaviour: the Alpine `x-data="{ mobileMenuOpen: false }"` menu with its
|
||||
`x-trap.inert.noscroll`, `@click.away` and `@keydown.escape.window` handling, the `@auth` branch
|
||||
(Dashboard link to `route('admin.dashboard')` or `route('client.dashboard')` by
|
||||
`auth()->user()->isAdmin()`, and the logout `<form method="POST" action="{{ route('logout') }}">`),
|
||||
the language toggle's `/language/{locale}` links, and `wire:navigate` on internal links.
|
||||
|
||||
All CSS goes in `resources/css/public.css` (created in 24-1), every selector prefixed with
|
||||
`body.site `. Port the CSS from `docs/ux-mockup.html`: navigation lines 75–98, footer lines
|
||||
273–284, and the responsive nav/footer rules inside lines 293–323 (`.links` hidden and
|
||||
`.menu-btn` shown at ≤1100px; `.nav .btn` and `.login` hidden at ≤760px; footer grid 2 columns at
|
||||
≤1100px and 1 column at ≤760px).
|
||||
|
||||
### Navigation — `resources/views/components/navigation.blade.php`
|
||||
|
||||
- Root: `<header class="nav" id="site-nav">` — sticky (`position:sticky; top:0; z-index:50`),
|
||||
height 72px, background `rgba(244,241,234,.82)`, `backdrop-filter: blur(14px) saturate(1.2)`
|
||||
(with `-webkit-` prefix), bottom border transparent; with class `scrolled` (toggled by
|
||||
`resources/js/site/progress.js` from 24-1 when `scrollY > 8`) the border becomes
|
||||
`1px solid var(--line)` and the shadow `0 8px 24px -18px rgba(30,34,25,.5)`. Remove the old
|
||||
fixed positioning and forest background.
|
||||
- Inner `<div class="wrap">` laid out as flex, `align-items:center; gap:28px; height:72px`:
|
||||
1. Brand link to `route('home')`: `<span class="seal">` (46×46px, background
|
||||
`#fff url('/images/logo.png') center/cover no-repeat`, `border:2px solid #1A1A1A`,
|
||||
`box-shadow:3px 3px 5px rgba(26,26,26,.35)`) then a two-line wordmark: `<b>` =
|
||||
`__('site.brand_name')` (display font, 1.35rem, line-height 1) and `<small>` =
|
||||
`__('site.brand_sub')` (.72rem, `--muted`; letter-spacing .12em in English).
|
||||
`aria-label="{{ __('site.brand_label') }}"`.
|
||||
2. `<nav class="links" aria-label="{{ __('site.nav_main') }}">` with links: Home →
|
||||
`route('home')`, About → `route('about')`, Services → `route('home').'#services'`,
|
||||
Articles → `route('posts.index')`, Booking → `route('booking')`. Labels from `site.nav_*`.
|
||||
The current route's link gets `aria-current="page"` (home for `home`, about for `about`,
|
||||
articles for `posts.*`, booking for `booking*`). Link style: padding 10px 14px, weight 500,
|
||||
.95rem, radius 8px; hover colour `--olive`; `::after` underline — `inset-inline:14px;
|
||||
bottom:4px; height:2px; background:repeating-linear-gradient(90deg,var(--gold) 0 4px,
|
||||
transparent 4px 7px); transform:scaleX(0)`, origin right (left in LTR), transition
|
||||
`.35s var(--ease)`; `scaleX(1)` on hover and on `[aria-current]`.
|
||||
3. `.nav-tools` (flex, gap 10px): replace both `<x-language-toggle />` usages in this file
|
||||
(desktop and mobile) with a plain link
|
||||
`<a class="lang" href="{{ url('/language/'.(app()->getLocale() === 'ar' ? 'en' : 'ar')) }}" aria-label="{{ __('site.lang_switch') }}">`
|
||||
— a pill (min 48×44px, inline-grid centred, radius 999px, `1.5px solid var(--line)`, white,
|
||||
weight 600 .85rem, no underline; hover gold border and lift 1px) whose text is `EN` when the
|
||||
locale is `ar` and `ع` when it is `en`. Do not edit
|
||||
`resources/views/components/language-toggle.blade.php` (the auth layouts and the dashboard
|
||||
sidebar use it); for guests a `.login` link (`__('site.nav_login')` →
|
||||
`route('login')`, .92rem, min-height 44px, hover olive); for authenticated users the
|
||||
existing Dashboard link and logout button styled like `.login`; then
|
||||
`<a class="btn btn-gold" href="{{ route('home') }}#book">{{ __('site.nav_book') }}</a>`
|
||||
(in the nav: min-height 44px, padding 10px 20px, .92rem); then the mobile menu button
|
||||
`.menu-btn` (44×44px, radius 10px, `1.5px solid var(--line)`, white, hidden above 1100px)
|
||||
carrying the existing Alpine toggle, `:aria-expanded`, and
|
||||
`aria-label="{{ __('site.nav_menu') }}"`.
|
||||
- Mobile menu sheet (the existing `x-show="mobileMenuOpen"` panel): cream background
|
||||
(`var(--cream)`), directly under the nav, full width, each link a 48px-high row with a
|
||||
`1px solid var(--line)` bottom border; contains the five links, the login (or Dashboard and
|
||||
logout) and the gold Book button full width.
|
||||
|
||||
### Footer — `resources/views/components/footer.blade.php`
|
||||
|
||||
- `<footer class="site-footer">`: background `var(--forest-2)`, colour `var(--gold-lt)`,
|
||||
margin-top 120px, padding 72px 0 28px, .92rem, position relative. First child
|
||||
`<span class="foot-band" aria-hidden="true">` — absolute, top 0, full width, height 1px,
|
||||
`linear-gradient(90deg,transparent,rgba(196,168,130,.7),transparent)`.
|
||||
- `<div class="wrap"><div class="foot">` grid `1.4fr 1fr 1fr 1fr`, gap 40px:
|
||||
1. The brand mark (same seal + wordmark as the nav; wordmark `<b>` cream, `<small>` gold-lt)
|
||||
and `<p>` = `__('home.tagline')` (margin-top 16px, max-width 26em).
|
||||
2. `<h4>{{ __('site.footer_explore') }}</h4>` then links About → `route('about')`, Services →
|
||||
`route('home').'#services'`, Articles → `route('posts.index')`, Booking → `route('booking')`.
|
||||
3. `<h4>{{ __('site.footer_clients') }}</h4>` then Client login → `route('login')`, Terms →
|
||||
`route('terms')` with `__('site.footer_terms')`, Privacy → `route('privacy')` with
|
||||
`__('site.footer_privacy')`.
|
||||
4. `<h4>{{ __('site.footer_contact') }}</h4>` then `<a href="tel:+970599353502" dir="ltr">`
|
||||
`{{ __('footer.phone') }}`, `<a href="mailto:{{ __('footer.email') }}">`, and the address
|
||||
`{{ __('footer.address') }}` as plain text.
|
||||
- `h4`: display font, 1.15rem, cream, margin 0 0 14px. Links: block, padding 10px 0, hover
|
||||
colour cream and `translateX(-3px)` (RTL) / `translateX(3px)` (LTR).
|
||||
- `.legal` row: flex, space-between, wrap, `border-top:1px solid rgba(244,241,234,.1)`,
|
||||
margin-top 48px, padding-top 22px, .8rem, colour `rgba(196,168,130,.75)`; content
|
||||
`© {{ date('Y') }} {{ __('footer.copyright') }}`. No photography credit.
|
||||
|
||||
### Language keys — add to `lang/ar/site.php` and `lang/en/site.php`
|
||||
|
||||
| Key | ar | en |
|
||||
|---|---|---|
|
||||
| `brand_name` | ليبرا | Libra |
|
||||
| `brand_sub` | للحقوق | FOR RIGHTS |
|
||||
| `brand_label` | ليبرا للحقوق | Libra for Rights |
|
||||
| `nav_main` | القائمة الرئيسية | Main |
|
||||
| `nav_home` | الرئيسية | Home |
|
||||
| `nav_about` | من نحن | About |
|
||||
| `nav_services` | الخدمات | Services |
|
||||
| `nav_articles` | المقالات | Articles |
|
||||
| `nav_booking` | الحجز | Booking |
|
||||
| `nav_login` | دخول العملاء | Client login |
|
||||
| `nav_book` | احجز استشارة | Book a consultation |
|
||||
| `nav_menu` | القائمة | Menu |
|
||||
| `lang_switch` | English | العربية |
|
||||
| `footer_explore` | تصفّح | Explore |
|
||||
| `footer_clients` | العملاء | Clients |
|
||||
| `footer_contact` | تواصل | Contact |
|
||||
| `footer_terms` | شروط الاستخدام | Terms of use |
|
||||
| `footer_privacy` | سياسة الخصوصية | Privacy policy |
|
||||
|
||||
Do not edit `lang/*/navigation.php` or `lang/*/footer.php` (the dashboards use `navigation.php`).
|
||||
|
||||
### Files
|
||||
|
||||
- Modify: `resources/views/components/navigation.blade.php`,
|
||||
`resources/views/components/footer.blade.php`, `resources/css/public.css`,
|
||||
`lang/ar/site.php`, `lang/en/site.php`.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [ ] On `/` at 1440px the navigation is 72px high, stays at the top of the viewport while
|
||||
scrolling, shows brand, five links, language pill, Client login and the gold Book button,
|
||||
and gains a bottom border once the page is scrolled past 8px.
|
||||
- [ ] On `/about` the About link has `aria-current="page"`; on `/posts` the Articles link does.
|
||||
- [ ] At ≤1100px the five links are hidden and the menu button opens a sheet containing all five
|
||||
links, login and Book; Escape closes it; at 390px there is no horizontal scroll.
|
||||
- [ ] Logged in as a client, the navigation shows Dashboard (to `/client/dashboard`) and a working
|
||||
Log out instead of Client login; logged in as admin, Dashboard goes to `/admin/dashboard`.
|
||||
- [ ] The language pill reads `EN` on Arabic pages and `ع` on English pages and switches locale;
|
||||
`resources/views/components/language-toggle.blade.php` is unchanged against BASE.
|
||||
- [ ] The footer shows four columns at 1440px with the phone, email and address from
|
||||
`lang/*/footer.php`, links to `/terms` and `/privacy`, and `© <current year>`; it contains no
|
||||
"Unsplash" text.
|
||||
- [ ] Every key in the table exists in both `lang/ar/site.php` and `lang/en/site.php`, and
|
||||
`lang/*/navigation.php` and `lang/*/footer.php` are unchanged against BASE.
|
||||
- [ ] The admin and client dashboards' navigation is unchanged (they do not render
|
||||
`components/navigation.blade.php`): verify `grep -rn "x-navigation" resources/views` lists
|
||||
only `components/layouts/public.blade.php`.
|
||||
|
||||
## Sub-tasks
|
||||
|
||||
None.
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 24-3
|
||||
title: 24-3 Signature Balance Component
|
||||
status: Ready for Dev
|
||||
date: 2026-10-31
|
||||
parent: 24
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
Build the redesign's signature: an engraved-gold balance (scales of justice) rendered as an
|
||||
inline SVG, with three behaviours — `hero` (settles on load, weighed by the pointer), `finale`
|
||||
(comes level as the reader scrolls to the booking card) and `static` (always level). Pages place
|
||||
it in later subtasks (24-4 hero and vision card, 24-5 finale, 24-6 success page).
|
||||
|
||||
### Files to create
|
||||
|
||||
1. **`resources/views/components/site/balance.blade.php`** — props: `mode` (`hero` | `finale` |
|
||||
`static`, default `static`), `label` (default null), `size` (integer px, default null; when set,
|
||||
the SVG gets `width` and `height` of that many px). Renders
|
||||
`<svg class="site-balance" data-balance="{{ $mode }}" viewBox="0 0 400 400" …>` with
|
||||
`overflow:visible`; when `label` is set: `role="img" aria-label="{{ $label }}"`, otherwise
|
||||
`aria-hidden="true"`. Pass through `$attributes` (class, id, style).
|
||||
2. **`resources/js/site/balance.js`** — exports `init()` and `destroy()`; imported and wired in
|
||||
`resources/js/public.js` exactly like `reveal.js` (init on `livewire:navigated`, destroy on
|
||||
`livewire:navigating`). It contains:
|
||||
- `build(svg)` — fills the SVG with the markup from `docs/ux-mockup.html` lines 566–595
|
||||
(the `scales()` function's template: four gradients `gd`, `gc`, `gb`, `gh`, two filters
|
||||
`sh` (drop shadow dy 8, stdDeviation 7, flood `#0d1009` opacity .45) and `bl` (blur 6), the
|
||||
ground shadow ellipse, base, pillar, olive-leaf finial, the `.beam` group, the pivot, and two
|
||||
`.pan` groups). Gradient and filter ids must be unique per instance (suffix a running
|
||||
counter) so several balances on one page do not share ids. Returns `tilt(deg)` (mockup lines
|
||||
597–602): `beam.setAttribute('transform', rotate(deg 200 110))`; with
|
||||
`r = deg·π/180, c = cos(r)·142, s = sin(r)·142`, pan 0 at `translate(200−c, 110−s)` and pan 1
|
||||
at `translate(200+c, 110+s)`.
|
||||
- `spring(tilt, start)` (mockup lines 605–610): state `a = start, v = 0, target = 0`; each
|
||||
animation frame `v += (target − a)·0.028; v ·= 0.935; a += v; tilt(a)`; keep requesting
|
||||
frames while `|v| > 0.002` or `|target − a| > 0.01`. Exposes `set(target)`.
|
||||
- Behaviour per `data-balance`:
|
||||
- `static`: `tilt(0)`.
|
||||
- `hero`: `tilt(14)`, create a spring from 14, after 450ms `set(0)`. If
|
||||
`matchMedia('(pointer:fine)').matches`, find the closest ancestor `.frame` (the hero frame,
|
||||
built in 24-4); on `pointermove` over it: `x = (clientX − rect.left) / rect.width`,
|
||||
`set(clamp((x − 0.5)·2.4, −1, 1)·9)`; move the frame's `.glow` element's `left`/`top` to
|
||||
the pointer position within the frame; set the frame's `img` transform to
|
||||
`scale(1.08) translate(${(clientX − rect.left − rect.width/2)/−40}px, ${(clientY − rect.top − rect.height/2)/−40}px)`.
|
||||
On `pointerleave`: `set(0)` and clear the image transform.
|
||||
- `finale`: `tilt(−12)`, spring from −12; on a passive window `scroll` listener (and once on
|
||||
init): `p = scrollY / (scrollHeight − innerHeight)` (1 if the denominator is ≤ 0),
|
||||
`q = clamp((p − 0.7) / 0.25, 0, 1)`, `set(−12·(1 − q))`.
|
||||
- If `matchMedia('(prefers-reduced-motion: reduce)').matches`: every balance is built and
|
||||
`tilt(0)`; no spring, no listeners.
|
||||
- `destroy()` removes every listener added and cancels pending animation frames.
|
||||
3. CSS in **`resources/css/public.css`**: `body.site .site-balance{display:block;overflow:visible}`.
|
||||
|
||||
### Files to modify
|
||||
|
||||
- `resources/js/public.js` (import and wire `./site/balance.js`), `resources/css/public.css`.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [ ] `<x-site.balance mode="hero" label="ميزان العدالة" />` renders an `<svg>` with
|
||||
`data-balance="hero"`, `viewBox="0 0 400 400"`, `role="img"` and the given `aria-label`;
|
||||
without `label` it renders `aria-hidden="true"`.
|
||||
- [ ] With two balances on one page, every `id` inside the SVGs is unique
|
||||
(`document.querySelectorAll('[id]')` has no duplicate values).
|
||||
- [ ] A `hero` balance is drawn tilted on load and its beam's `transform` reaches `rotate(0…)`
|
||||
(|angle| < 0.05) within 4 seconds without pointer input.
|
||||
- [ ] Moving a fine pointer to the right edge of the hero frame tips the beam toward +9° (in the
|
||||
browser, read the beam's transform); leaving the frame returns it toward 0°.
|
||||
- [ ] A `finale` balance's beam is at −12° at the top of the page and within 0.5° of 0° when the
|
||||
page is scrolled to the bottom.
|
||||
- [ ] With `prefers-reduced-motion: reduce` emulated, every balance's beam transform is
|
||||
`rotate(0 200 110)` and no animation frame is requested after load.
|
||||
- [ ] Navigating between public pages with `wire:navigate` and back to `/` re-initialises the
|
||||
hero balance (it renders and settles) and leaves no duplicate scroll listeners (the finale
|
||||
still levels correctly after three navigations).
|
||||
|
||||
## Sub-tasks
|
||||
|
||||
None.
|
||||
@@ -0,0 +1,196 @@
|
||||
---
|
||||
id: 24-4
|
||||
title: 24-4 Home Page Sections (Hero to Latest Articles)
|
||||
status: Ready for Dev
|
||||
date: 2026-10-31
|
||||
parent: 24
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
Rebuild `resources/views/livewire/pages/home.blade.php` as the approved redesign, sections 1–7
|
||||
(hero, pillars, founder, services, vision, values, latest articles). Section 8, the booking card,
|
||||
is task 24-5; leave a placeholder comment `{{-- booking card: task 24-5 --}}` where it goes. Keep
|
||||
the component's PHP class as it is (`#[Layout('components.layouts.public')]`, `with()` returning
|
||||
`latestPosts` = `Post::published()->latest('published_at')->take(3)->get()`). Remove the
|
||||
temporary `<div class="wrap py-8">` wrapper added in 24-1: each section is full-bleed and holds a
|
||||
`<div class="wrap">`.
|
||||
|
||||
The visual reference is `docs/ux-mockup.html` (commit `caec396`). Port the CSS for each section
|
||||
from the line ranges below into `resources/css/public.css`, every selector prefixed with
|
||||
`body.site `, and port the matching responsive rules from lines 293–323. Put `data-reveal` and
|
||||
`data-d` attributes on the same elements as the mockup (lines 358–506).
|
||||
|
||||
### Photography — create `public/images/site/`
|
||||
|
||||
Extract these JPEG data URIs from `docs/ux-mockup.html` and save them, decoded, as files (a short
|
||||
script reading the file and base64-decoding the `src="data:image/jpeg;base64,…"` value on each
|
||||
line is enough; do not commit the script):
|
||||
|
||||
| Mockup line | `<img>` | Save as |
|
||||
|---|---|---|
|
||||
| 377 | hero olive tree | `public/images/site/olive-tree.jpg` |
|
||||
| 447 | embroidery hoop | `public/images/site/embroidery-hoop.jpg` |
|
||||
| 455 | olives on a branch | `public/images/site/olives.jpg` |
|
||||
| 459 | hills and road | `public/images/site/hills.jpg` |
|
||||
|
||||
The founder portrait uses the existing `public/images/huda-armouche.jpg`. The images are from
|
||||
Unsplash (licence permits commercial use without attribution); show no credit line.
|
||||
|
||||
### Sections (in order, inside the root `<div>`)
|
||||
|
||||
1. **Hero** — `<section class="hero" id="top">`; CSS lines 100–125. Two-column grid
|
||||
(`1fr 1.08fr`, gap 56px; one column ≤1100px). Start column: `.eyebrow` = `site.hero_eyebrow`;
|
||||
`<h1>` = `{{ __('site.hero_title_a') }}<em>{{ __('site.hero_title_em') }}</em>{{ __('site.hero_title_b') }}`
|
||||
(the `em` is upright, `--olive`, with `text-decoration: underline dashed var(--gold) .07em;
|
||||
text-underline-offset:.28em`); `<p class="lede">` = `home.intro`; CTA row: gold button
|
||||
`home.cta_book` → `#book` with the arrow SVG (mockup line 366), ghost button
|
||||
`home.cta_services` → `#services`; `.trust` strip with three items, each
|
||||
`<strong>` + `<span>`: (`site.trust_1_title`, `site.trust_1_text`), (`site.trust_2_title`,
|
||||
`site.trust_2_text`), (`site.trust_3_title`, `site.trust_3_text`). End column `.hero-art`:
|
||||
`<figure class="frame">` (aspect 4/4.6, radius `999px 999px 18px 18px`, forest ground,
|
||||
gradient veil `::before` from `rgba(35,42,28,.35)` to `.9`), containing
|
||||
`<img src="/images/site/olive-tree.jpg" alt="{{ __('site.alt_olive_tree') }}">` (filter
|
||||
`saturate(.75) contrast(1.05)`, `scale(1.08)`), `<span class="glow">` (420px radial gold
|
||||
glow), `<x-site.balance mode="hero" :label="__('site.balance_label')" id="scales" />`
|
||||
positioned `inset:10% 8% 12%`, and `<figcaption>` = `site.frame_caption` (display italic,
|
||||
cream .78). Then `<div class="tag">` with `<span class="dot">` (olive, pulsing) and
|
||||
`site.frame_tag`.
|
||||
2. **Pillars band** — `<section class="band on-dark" aria-label="{{ __('site.pillars_label') }}">`;
|
||||
CSS lines 127–137. Three `.pillar` columns: (`site.pillar_justice`, `site.pillar_justice_text`),
|
||||
(`site.pillar_dignity`, `site.pillar_dignity_text`), (`site.pillar_advocacy`,
|
||||
`site.pillar_advocacy_text`), each title preceded by `<span class="gem">` (CSS line 210).
|
||||
3. **Founder** — `<section class="sec" id="founder">`; CSS lines 146–157. Portrait
|
||||
`/images/huda-armouche.jpg` (alt `home.lawyer_name`) with `.namecard`
|
||||
(`<b>` `home.lawyer_name`, `<span>` `site.founder_role`). Text column: `.art-no`
|
||||
`site.art_founder`; `<h2>` `home.about_title`; `<blockquote>` `site.founder_quote`;
|
||||
paragraphs `home.lawyer_bio` and `home.lawyer_bio_2`; ghost button `site.founder_cta` →
|
||||
`route('about')`.
|
||||
4. **Services docket** — `<section class="sec" id="services" style="padding-top:40px">`;
|
||||
CSS lines 159–174. `x-site.section-head` (see below) with label `site.art_services`, title
|
||||
`home.services_subtitle`, lede `site.services_lede`. Four `<a class="row" href="#book">` rows:
|
||||
number `01`–`04` (`.n`), `<h3>` title, `.chips` of the items, `.go` arrow circle. Rows in order:
|
||||
(`home.service_consultation_title`, `home.service_consultation_items`),
|
||||
(`home.service_family_title`, `home.service_family_items`),
|
||||
(`home.service_civil_title`, `home.service_civil_items`),
|
||||
(`home.service_business_title`, `home.service_business_items`). Items are arrays — render each
|
||||
as `<span class="chip">`.
|
||||
5. **Vision** — `<section class="sec fabric" id="mission">`; CSS lines 176–197. Text column:
|
||||
`.art-no` `site.art_vision`, `<h2>` `site.vision_title`, `<p class="big">` `site.vision_text`;
|
||||
beside it `.hoop` with `/images/site/embroidery-hoop.jpg` (alt `site.alt_hoop`; filter
|
||||
`hue-rotate(-140deg) saturate(.55) sepia(.25)`). Below, `.three` grid of `<article class="card">`:
|
||||
(a) `.ph.motif-ph` containing `<x-site.balance mode="static" />` (150×150px) and label
|
||||
`site.card_institution_label`, title `site.card_institution_title`, text
|
||||
`site.card_institution_text`; (b) `.ph` with `/images/site/olives.jpg` (alt `site.alt_olives`),
|
||||
label `site.card_society_label`, title `site.card_society_title`, text `site.card_society_text`;
|
||||
(c) `.ph` with `/images/site/hills.jpg` (alt `site.alt_hills`), label
|
||||
`site.card_diaspora_label`, title `site.card_diaspora_title`, text `site.card_diaspora_text`.
|
||||
6. **Values** — `<section class="sec" id="values">`; CSS lines 199–212. Section head: label
|
||||
`site.art_values`, title `home.values_title`, lede `home.values_subtitle`. `.sampler` grid of six
|
||||
`.val` cards, each `<span class="medal">` with the line icon and `<b>` =
|
||||
`home.values.<key>.title`, keys in order `integrity`, `justice`, `knowledge`, `empowerment`,
|
||||
`professionalism`, `innovation`. Icons: the inline SVGs on mockup lines 474–479 in the same
|
||||
order (24×24 viewBox, `aria-hidden="true"`, stroke `--gold-ink` 1.5, no fill). Replace the
|
||||
current `flux:icon` usage.
|
||||
7. **Latest articles** — `<section class="sec" id="posts" style="padding-top:20px">`; CSS lines
|
||||
214–234. Head: label `site.art_articles`, title `home.posts_title`, and in place of the lede a
|
||||
ghost button `home.view_all_posts` → `route('posts.index')`. If `$latestPosts` is not empty:
|
||||
`.posts` grid of `<x-site.post-card :post="$post" />`; otherwise a `<p>` with
|
||||
`home.posts_empty` (muted, centred).
|
||||
|
||||
### Components to create
|
||||
|
||||
- **`resources/views/components/site/section-head.blade.php`** — props `label`, `title`,
|
||||
`lede` (nullable); renders
|
||||
`<div class="sec-head"><div><span class="art-no" data-reveal>{{ $label }}</span><h2 data-reveal data-d="1">{{ $title }}</h2></div>`
|
||||
then either `<p data-reveal data-d="2">{{ $lede }}</p>` or the `$slot` (for the button), then
|
||||
`</div>`.
|
||||
- **`resources/views/components/site/post-card.blade.php`** — prop `post` (App\Models\Post);
|
||||
`<a class="post" href="{{ route('posts.show', $post) }}" wire:navigate data-reveal>` →
|
||||
`<div class="bd">` with `<span class="meta">` = the published date
|
||||
(`$post->published_at?->translatedFormat('j F Y')`), `<h3>` = `$post->getTitle()`, `<p>` = an
|
||||
excerpt of `strip_tags($post->getBody())` limited to 140 characters (`Str::limit`), and
|
||||
`<span class="more">` = `home.read_more`. Text-only: no image element.
|
||||
|
||||
### Language keys — add to `lang/ar/site.php` and `lang/en/site.php`
|
||||
|
||||
| Key | ar | en |
|
||||
|---|---|---|
|
||||
| `hero_eyebrow` | ليبرا للحقوق · فلسطين | Libra for Rights · Palestine |
|
||||
| `hero_title_a` | العدالة␠ | Justice is a␠ |
|
||||
| `hero_title_em` | ممارسةٌ يومية | daily practice |
|
||||
| `hero_title_b` | ، لا مبدأٌ نظري. | , not a theory. |
|
||||
| `trust_1_title` | أفراد وشركات | Individuals & companies |
|
||||
| `trust_1_text` | استشارات وتمثيل | Consultations and representation |
|
||||
| `trust_2_title` | المرأة والأسرة | Women & family |
|
||||
| `trust_2_text` | دعم قانوني متخصص | Specialised legal support |
|
||||
| `trust_3_title` | عربي · English | Arabic · English |
|
||||
| `trust_3_text` | خدمة بلغتين | Bilingual service |
|
||||
| `alt_olive_tree` | شجرة زيتون معمّرة بين صخور كلسية | An ancient olive tree among limestone rocks |
|
||||
| `balance_label` | ميزان العدالة | The scales of justice |
|
||||
| `frame_caption` | لكلّ حقٍّ وزنُه | Every right carries its weight |
|
||||
| `frame_tag` | استشارات حضورية أو عن بُعد | Consultations in person or remotely |
|
||||
| `pillars_label` | ركائزنا | Our pillars |
|
||||
| `pillar_justice` | العدالة | Justice |
|
||||
| `pillar_justice_text` | الإنصاف، والمساءلة، وسيادة القانون. | Fairness, accountability and the rule of law. |
|
||||
| `pillar_dignity` | الكرامة | Dignity |
|
||||
| `pillar_dignity_text` | القيمة الأصيلة لكل إنسان. | The inherent worth of every person. |
|
||||
| `pillar_advocacy` | الدفاع | Advocacy |
|
||||
| `pillar_advocacy_text` | انخراطٌ فاعل، وقولُ الحق في وجه السلطة. | Active engagement, and speaking truth to power. |
|
||||
| `art_founder` | المادة ٠١ — المؤسِّسة | Article 01 — The founder |
|
||||
| `founder_role` | المؤسِّسة · محامية | Founder · Attorney at Law |
|
||||
| `founder_quote` | «العدالة ممارسة يومية، وليست مجرد مبدأ نظري.» | “Justice is a daily practice, not merely a theoretical principle.” |
|
||||
| `founder_cta` | اقرأ قصتنا | Read our story |
|
||||
| `art_services` | المادة ٠٢ — الخدمات | Article 02 — Services |
|
||||
| `services_lede` | ممارسة قانونية أصيلة، تقوم على البحث والمعرفة الميدانية. | Traditional legal practice, combined with research-driven insight. |
|
||||
| `art_vision` | المادة ٠٣ — الرؤية | Article 03 — Vision |
|
||||
| `vision_title` | منسوجةٌ من نسيج المجتمع | Woven from the fabric of society |
|
||||
| `vision_text` | ليبرا نسيجٌ أصيل من المجتمع، تتقصّى مشكلاته وتوثّقها وتكشف جذورها، وتقدّم حلولاً عملية لرأب أوجاعه مهما صغرت، عبر العمل التشاركي والبحث الميداني الحقيقي. | Libra investigates society's problems, documents them, uncovers their roots, and offers practical solutions to mend social pains — however small — through collaborative work and genuine field research. |
|
||||
| `alt_hoop` | تطريز بغرزة الصليب مشدود على طارة خشبية | Cross-stitch embroidery stretched on a wooden hoop |
|
||||
| `card_institution_label` | لمؤسستنا | For our institution |
|
||||
| `card_institution_title` | القانون والبحث والميدان | Law, research and fieldwork |
|
||||
| `card_institution_text` | نلتقط نبض المجتمع ونحوّل تحدياته إلى معرفة وحلول قانونية مبتكرة. | Capturing society's pulse and turning its challenges into knowledge and innovative legal solutions. |
|
||||
| `alt_olives` | ثمار زيتون على غصن | Olives ripening on a branch |
|
||||
| `card_society_label` | للمجتمع | For society |
|
||||
| `card_society_title` | شريكٌ موثوق للقضاء | A trusted partner to the judiciary |
|
||||
| `card_society_text` | نعيد وصل المجتمع بتاريخه وإرثه القانوني. | Reconnecting society with its history and legal heritage. |
|
||||
| `alt_hills` | تلال وطريق متعرّج عند الغروب | Hills and a winding road at sunset |
|
||||
| `card_diaspora_label` | لفلسطينيي الشتات | For Palestinians in the diaspora |
|
||||
| `card_diaspora_title` | عودةٌ إلى الأرض والعائلة | Back to the land and the family |
|
||||
| `card_diaspora_text` | نساعد الفلسطينيين في الخارج على البحث في عائلاتهم وتاريخهم وأراضيهم. | Helping Palestinians abroad research their families, their history and their land. |
|
||||
| `art_values` | المادة ٠٤ — القيم | Article 04 — Values |
|
||||
| `art_articles` | المادة ٠٥ — المقالات | Article 05 — Articles |
|
||||
|
||||
`␠` marks a trailing space that must be kept in the value.
|
||||
|
||||
### Files
|
||||
|
||||
- Create: `public/images/site/olive-tree.jpg`, `public/images/site/embroidery-hoop.jpg`,
|
||||
`public/images/site/olives.jpg`, `public/images/site/hills.jpg`,
|
||||
`resources/views/components/site/section-head.blade.php`,
|
||||
`resources/views/components/site/post-card.blade.php`.
|
||||
- Modify: `resources/views/livewire/pages/home.blade.php`, `resources/css/public.css`,
|
||||
`lang/ar/site.php`, `lang/en/site.php`.
|
||||
- Do not edit `lang/*/home.php`.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [ ] `/` renders, in order, sections with ids `top`, (the pillars band), `founder`, `services`,
|
||||
`mission`, `values`, `posts`, each with its content from the keys above in both Arabic and
|
||||
English (switch with `/language/en`).
|
||||
- [ ] `/` has exactly one `<h1>`, and every `<img>` has a non-empty `alt` in both languages.
|
||||
- [ ] The four files in `public/images/site/` exist, are valid JPEGs (`file` reports JPEG image
|
||||
data) and load with HTTP 200 on `/`.
|
||||
- [ ] The hero balance renders inside the hero frame and settles level (task 24-3 behaviour).
|
||||
- [ ] Each services row links to `#book`; each row shows the item chips from `home.php`.
|
||||
- [ ] With three or more published posts, three post cards show date, title, excerpt and "Read
|
||||
more", link to `/posts/{post}`, and contain no `<img>`; with no published posts, the
|
||||
`home.posts_empty` text shows instead of the grid.
|
||||
- [ ] At 1440, 768 and 390px wide, `/` has no horizontal scroll (`document.documentElement.scrollWidth <= innerWidth`).
|
||||
- [ ] Hovering a service row fills it forest with cream text; hovering a value card lifts it and
|
||||
rotates its medallion; hovering a post card lifts it.
|
||||
- [ ] The page contains no "Unsplash" text and `lang/*/home.php` is unchanged against BASE.
|
||||
|
||||
## Sub-tasks
|
||||
|
||||
None.
|
||||
@@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 24-5
|
||||
title: 24-5 Home Booking Card (Compact Booking and Day Strip)
|
||||
status: Ready for Dev
|
||||
date: 2026-10-31
|
||||
parent: 24
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
Add section 8 of the home page: a forest booking card that embeds the existing guest-booking
|
||||
component in a one-screen "compact" mode, with a 14-day strip of bookable days. The booking rules
|
||||
must not change: name, email and phone required; case summary required, minimum 20 characters;
|
||||
the math captcha (`App\Services\CaptchaService`); one booking per email per day; slots from
|
||||
`App\Services\AvailabilityService`; the existing confirm step (`showConfirmation`); and the
|
||||
existing `submit()` that redirects to `route('booking.success')`. Logged-in visitors see the
|
||||
existing logged-in message instead of the form.
|
||||
|
||||
### 1. Availability calendar — `resources/views/livewire/availability-calendar.blade.php`
|
||||
|
||||
- Add `public string $variant = 'month';` (settable from the tag: `variant="strip"`). The default
|
||||
`month` must render exactly as today, because
|
||||
`resources/views/livewire/client/consultations/book.blade.php` also uses this component.
|
||||
- When `$variant === 'strip'`:
|
||||
- Compute `$stripDays`: starting today, step one day at a time up to 60 days ahead and collect
|
||||
the first 14 dates for which `AvailabilityService::getDateStatus($date)` returns
|
||||
`'available'` or `'partial'` (the same two values `selectDate()` accepts today), each with
|
||||
its `getAvailableSlots($date)`.
|
||||
- On mount, select the first strip day (`$selectedDate`) and load its slots with the existing
|
||||
`loadAvailableSlots()`.
|
||||
- Render a day strip: `<div class="days" role="group" aria-label="{{ __('site.booking_day') }}">`
|
||||
of `<button type="button" class="day" aria-pressed="true|false" wire:click="selectDate('Y-m-d')">`
|
||||
with the weekday name (`translatedFormat('l')`) and `<b>` the day number. Then a slot row:
|
||||
`<div class="slots" role="group" aria-label="{{ __('site.booking_time') }}">` of
|
||||
`<button type="button" class="slot" dir="ltr" aria-pressed=…>` per slot, clicking calls the
|
||||
existing `$parent.selectSlot('<date>', '<slot>')`, and the button for the parent's current
|
||||
`selectedTime` on the selected date is pressed. Slot labels use the same time format as the
|
||||
month view.
|
||||
- No strip day available within 60 days → show `site.booking_none` (ar «لا توجد مواعيد
|
||||
متاحة حالياً»; en "No times are available at the moment") in place of the strip and slots.
|
||||
- CSS (in `resources/css/public.css`, scoped `body.site`; mockup `docs/ux-mockup.html` lines
|
||||
256–265): `.days` flex, gap 8px, `overflow-x:auto`, `scrollbar-width:none`; `.day` 66×72px min,
|
||||
radius 14px, `1.5px solid rgba(45,54,36,.15)`, white, .78rem muted, `<b>` display font 1.35rem
|
||||
ink; hover gold border and lift 2px; `[aria-pressed=true]` forest background, `--gold-lt` text,
|
||||
cream number, shadow `0 10px 22px -10px rgba(45,54,36,.8)`. `.slots` flex-wrap gap 8px;
|
||||
`.slot` min-height 44px, padding 8px 16px, pill, same border, white; hover gold border;
|
||||
`[aria-pressed=true]` gold fill, gold border, ink text.
|
||||
|
||||
### 2. Booking component — `resources/views/livewire/pages/booking.blade.php`
|
||||
|
||||
- Add `public bool $compact = false;` and accept it in `mount(bool $compact = false)` (keep the
|
||||
existing mount logic). The `#[Layout]` attribute stays; it is ignored when the component is
|
||||
embedded.
|
||||
- When `$compact` is true, render (instead of the page markup) a
|
||||
`<form class="book-r" wire:submit="showConfirm">` (mockup CSS lines 247–267: cream, padding
|
||||
44px 44px 40px, margin 12px, radius 20px) containing, in order:
|
||||
1. `.f2` two-column row: full name (`guestName`, `autocomplete="name"`) and phone
|
||||
(`guestPhone`, `type="tel" dir="ltr" autocomplete="tel"`), labels from the existing
|
||||
`booking.*` keys with ` *`;
|
||||
2. email (`guestEmail`, `type="email" dir="ltr" autocomplete="email"`);
|
||||
3. `<livewire:availability-calendar variant="strip" />` — the strip variant itself renders a
|
||||
visible label `site.booking_day` (.85rem, weight 600, margin-bottom 6px) above `.days` and
|
||||
`site.booking_time` above `.slots`;
|
||||
4. case summary textarea (`problemSummary`, rows 3, label `booking.problem_summary` + ` *`,
|
||||
help text `booking.problem_summary_help`);
|
||||
5. the captcha question and input (`captchaAnswer`, `inputmode="numeric" dir="ltr"`,
|
||||
max-width 140px) exactly as the page version renders it;
|
||||
6. `<button type="submit" class="btn btn-gold">` `site.booking_submit`, full width;
|
||||
7. `<p class="note">` `booking.limit_message`.
|
||||
Validation errors render under each field as in the page version. Submitting without a
|
||||
selected slot shows the existing `selectedTime` error.
|
||||
- When `$compact` and `$showConfirmation` are true, the same `.book-r` panel shows the existing
|
||||
confirmation summary (date, time, name, email, phone, summary) with the existing Confirm
|
||||
(`submit`) and Back (`$set('showConfirmation', false)`) actions, styled `btn-gold` and
|
||||
`btn-ghost`.
|
||||
- When `$compact` and the visitor is logged in, the panel shows the existing
|
||||
`booking.logged_in_title`, `booking.logged_in_message` and the `booking.go_to_dashboard` link
|
||||
(`route('client.consultations.book')`) styled as `btn-gold`.
|
||||
- Inputs and textarea (scoped `body.site .book-r`): min-height 48px, padding 12px 16px, radius
|
||||
12px, `1.5px solid rgba(45,54,36,.18)`, white, `font:400 1rem var(--body)`; focus border
|
||||
`--gold` and `box-shadow:0 0 0 4px rgba(166,137,102,.2)`; labels .85rem weight 600. Flux inputs
|
||||
may be replaced by plain inputs in compact mode, keeping the same `wire:model` names.
|
||||
- The non-compact (page) rendering is unchanged by this task.
|
||||
|
||||
### 3. Home page — `resources/views/livewire/pages/home.blade.php`
|
||||
|
||||
Replace `{{-- booking card: task 24-5 --}}` with
|
||||
`<section id="book"><div class="wrap"><div class="book" data-reveal>` (mockup CSS lines 236–246:
|
||||
forest, radius 28px, two columns `1fr 1.1fr`, one column ≤1100px, shadow
|
||||
`0 50px 90px -40px rgba(30,34,25,.8)`), containing:
|
||||
- `<div class="book-l on-dark">` (padding 56px 52px; 40px 24px ≤760px): `.eyebrow`
|
||||
`site.art_booking` (colour `--gold-lt`), `<h2>` `site.booking_title` (cream), `<p>`
|
||||
`site.booking_lede` (`--gold-lt`), `.contact` list — phone link `tel:+970599353502` with
|
||||
`<span dir="ltr">{{ __('footer.phone') }}</span>`, email link `mailto:` `footer.email`, and the
|
||||
address `footer.address`, each with the 20px gold line icon from mockup lines 517–519 — and
|
||||
`<x-site.balance mode="finale" style="width:190px;height:190px;margin-top:22px" />`.
|
||||
- `<livewire:pages.booking :compact="true" />`.
|
||||
|
||||
### Language keys — add to `lang/ar/site.php` and `lang/en/site.php`
|
||||
|
||||
| Key | ar | en |
|
||||
|---|---|---|
|
||||
| `art_booking` | المادة ٠٦ — الاستشارة | Article 06 — Consultation |
|
||||
| `booking_title` | احجز استشارة | Book a consultation |
|
||||
| `booking_lede` | اختر يوماً ووقتاً متاحَين، وأخبرنا باختصار عن قضيتك. نراجع كل طلب ونؤكّد الموعد بالبريد الإلكتروني — دون الحاجة إلى حساب. | Choose an available day and time and tell us briefly about your case. We review every request and confirm by email — no account needed. |
|
||||
| `booking_day` | اليوم | Day |
|
||||
| `booking_time` | الوقت | Time |
|
||||
| `booking_submit` | اطلب هذا الموعد | Request this appointment |
|
||||
| `booking_none` | لا توجد مواعيد متاحة حالياً | No times are available at the moment |
|
||||
|
||||
### Files
|
||||
|
||||
- Modify: `resources/views/livewire/availability-calendar.blade.php`,
|
||||
`resources/views/livewire/pages/booking.blade.php`,
|
||||
`resources/views/livewire/pages/home.blade.php`, `resources/css/public.css`,
|
||||
`lang/ar/site.php`, `lang/en/site.php`.
|
||||
- Do not modify `app/Services/AvailabilityService.php`, `app/Services/CaptchaService.php`,
|
||||
`resources/views/livewire/client/consultations/book.blade.php`, or any migration.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [ ] `/` shows the booking card with id `book`: the forest panel (title, lede, phone, email,
|
||||
address, finale balance) and the cream form with fields in the order name, phone, email,
|
||||
day strip, slots, summary, captcha, submit, one-per-day note.
|
||||
- [ ] The day strip lists up to 14 dates, all of which have at least one slot in
|
||||
`AvailabilityService::getAvailableSlots()`; the first is pressed on load and its slots show;
|
||||
clicking another day loads that day's slots.
|
||||
- [ ] A guest who fills valid data, picks a slot, answers the captcha and confirms creates exactly
|
||||
one guest consultation (same attributes as a booking made on `/booking`) and lands on
|
||||
`/booking/success`.
|
||||
- [ ] A summary of fewer than 20 characters, a wrong captcha answer, a missing slot, or a second
|
||||
booking with the same email on the same day each produce the same error as on `/booking`,
|
||||
and no consultation is created.
|
||||
- [ ] Logged in as a client, `/` shows the logged-in message with a link to
|
||||
`/client/consultations/book` and no form.
|
||||
- [ ] `/booking` and `/client/consultations/book` render the month calendar as before this task
|
||||
(`variant` defaults to `month`).
|
||||
- [ ] The finale balance is tilted at the top of `/` and level when scrolled to the booking card at
|
||||
the end of the page.
|
||||
- [ ] At 390px the card is one column, the day strip scrolls horizontally inside the card, and the
|
||||
page has no horizontal scroll.
|
||||
|
||||
## Sub-tasks
|
||||
|
||||
None.
|
||||
@@ -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.
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 24-7
|
||||
title: 24-7 About Page
|
||||
status: Ready for Dev
|
||||
date: 2026-10-31
|
||||
parent: 24
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
Restyle `/about` (`resources/views/livewire/pages/about.blade.php`) with the redesign's components,
|
||||
using only the page's existing content from `lang/*/about.php` (no new copy beyond the article
|
||||
labels below). Keep the Volt class and layout attribute. Remove the temporary
|
||||
`<div class="wrap py-8">` from 24-1; each section is full-bleed with its own `.wrap`. The
|
||||
Scholarship section stays removed (it was taken out on 2026-01-11 at Naser's request).
|
||||
|
||||
Sections, in order (all CSS classes already exist in `resources/css/public.css` from 24-1 to 24-5;
|
||||
add only what is listed as new):
|
||||
|
||||
1. **Hero** — `<section class="sec" style="padding-bottom:64px">`, `.wrap`, max-width 52em:
|
||||
`.eyebrow` = `about.tagline`; `<h1>` = `about.title` (display font,
|
||||
`clamp(2.6rem,4.6vw,4.1rem)`, line-height 1.12); `<p class="lede">` = `about.identity`.
|
||||
2. **Vision and mission** — `<section class="sec fabric">`: `.fabric-grid` with the text column
|
||||
(`.art-no` `site.about_art_vision`, `<h2>` `about.vision_title`, `<p class="big">`
|
||||
`about.vision_text`, then `<h3>` `about.mission_title` and `<p>` `about.mission_intro`) and the
|
||||
`.hoop` photo `/images/site/embroidery-hoop.jpg` (alt `site.alt_hoop`); below, `.three` cards
|
||||
exactly as on the home page but with the about texts: (a) static balance panel, label
|
||||
`site.card_institution_label`, title `about.mission_institution_title`, text
|
||||
`about.mission_institution_text`; (b) `/images/site/olives.jpg`, label
|
||||
`site.card_society_label`, title `about.mission_society_title`, text
|
||||
`about.mission_society_text`; (c) `/images/site/hills.jpg`, label `site.card_diaspora_label`,
|
||||
title `about.mission_diaspora_title`, text `about.mission_diaspora_text`.
|
||||
3. **Values** — `<section class="sec">`: `<x-site.section-head :label="__('site.about_art_values')" :title="__('about.values_title')" :lede="__('about.values_intro')" />`,
|
||||
then the `.sampler` of six `.val` medallion cards with the same six icons and order as the home
|
||||
page (inline SVGs from `docs/ux-mockup.html` lines 474–479), names `about.value_integrity`,
|
||||
`about.value_justice`, `about.value_knowledge`, `about.value_women`,
|
||||
`about.value_professionalism`, `about.value_innovation`.
|
||||
4. **Goals** — `<section class="sec" style="padding-top:20px">`: section head with label
|
||||
`site.about_art_goals`, title `about.goals_title`; then a `.docket` list (`<ol>`, no bullets)
|
||||
with one `.row.row-static` per item of `about.goals` (an array of 7 strings): `.n` = the
|
||||
two-digit number (`01`–`07`) and a `<p>` with the goal text (1.1rem, ink). New CSS:
|
||||
`body.site .row-static{grid-template-columns:90px 1fr}` (52px 1fr at ≤760px) and
|
||||
`body.site .row-static:hover{background:none;color:inherit;transform:none;box-shadow:none}`,
|
||||
`body.site .row-static::before{display:none}`.
|
||||
5. **Legal services** — `<section class="sec" id="services" style="padding-top:20px">`: section
|
||||
head with label `site.about_art_services`, title `about.services_title`, lede
|
||||
`about.services_intro`; four `<a class="row">` rows linking to `route('booking')`, as on the
|
||||
home page, with titles and chips from `about.service_consultation_title/items`,
|
||||
`about.service_family_title/items`, `about.service_civil_title/items`,
|
||||
`about.service_business_title/items`.
|
||||
6. **Closing CTA** — `<section class="band on-dark">` with a `.wrap` centred column, padding
|
||||
72px 0: `<h2>` `site.about_cta_title` (cream, display font) and
|
||||
`<a class="btn btn-gold" href="{{ route('booking') }}" wire:navigate>` `about.services_cta`.
|
||||
|
||||
All elements that reveal on the home page carry `data-reveal` here too.
|
||||
|
||||
### Language keys — add to `lang/ar/site.php` and `lang/en/site.php`
|
||||
|
||||
| Key | ar | en |
|
||||
|---|---|---|
|
||||
| `about_art_vision` | المادة ٠١ — الرؤية والرسالة | Article 01 — Vision and mission |
|
||||
| `about_art_values` | المادة ٠٢ — القيم | Article 02 — Values |
|
||||
| `about_art_goals` | المادة ٠٣ — الأهداف | Article 03 — Goals |
|
||||
| `about_art_services` | المادة ٠٤ — الخدمات | Article 04 — Services |
|
||||
| `about_cta_title` | لكلّ حقٍّ وزنُه | Every right carries its weight |
|
||||
|
||||
### Files
|
||||
|
||||
- Modify: `resources/views/livewire/pages/about.blade.php`, `resources/css/public.css`,
|
||||
`lang/ar/site.php`, `lang/en/site.php`. Do not edit `lang/*/about.php`.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [ ] `/about` renders the six sections in order with all existing `about.*` content in Arabic and
|
||||
English: identity, vision, mission intro and three mission cards, six values, seven goals,
|
||||
four service groups with their items.
|
||||
- [ ] `/about` has exactly one `<h1>`; every `<img>` has a non-empty `alt`.
|
||||
- [ ] Goal rows have no hover fill; service rows have the forest hover fill and link to `/booking`.
|
||||
- [ ] No Scholarship content appears (`grep -i scholarship resources/views/livewire/pages/about.blade.php` returns nothing).
|
||||
- [ ] `/about` has no horizontal scroll at 1440, 768 and 390px.
|
||||
- [ ] `lang/*/about.php` is unchanged against BASE.
|
||||
|
||||
## Sub-tasks
|
||||
|
||||
None.
|
||||
@@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 24-8
|
||||
title: 24-8 Articles and Legal Pages
|
||||
status: Ready for Dev
|
||||
date: 2026-10-31
|
||||
parent: 24
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
Restyle the articles index, the article page and the legal pages. Behaviour does not change:
|
||||
search (`wire:model.live.debounce.300ms="search"`), pagination (`paginate(10)`), result counts,
|
||||
empty states, the 404 for unpublished posts, and the CMS content of legal pages. Remove the
|
||||
temporary `<div class="wrap py-8">` wrappers added in 24-1.
|
||||
|
||||
### `/posts` — `resources/views/livewire/pages/posts/index.blade.php`
|
||||
|
||||
`<section class="sec" style="padding-top:56px"><div class="wrap">`:
|
||||
- `<x-site.section-head :label="__('site.hero_eyebrow')" :title="__('site.nav_articles')">`
|
||||
(the h2 reads «المقالات» / "Articles"; the existing `posts.posts` key reads "Posts" in English, so
|
||||
it is not used here) with,
|
||||
in the slot, the search field: a pill input (`.search`: min-height 48px, radius 999px, padding
|
||||
12px 20px, `1.5px solid rgba(45,54,36,.18)`, white, width min(360px, 100%); focus gold border
|
||||
plus `0 0 0 4px rgba(166,137,102,.2)`), same `wire:model` and placeholder
|
||||
`posts.search_placeholder`, with an accessible label (`sr-only` text
|
||||
`posts.search_placeholder`).
|
||||
- The existing result-count / no-result lines (`posts.search_results`, `posts.no_results`) as a
|
||||
muted paragraph, and the existing clear-search action as `btn btn-ghost`.
|
||||
- The posts as `<x-site.post-card :post="$post" />` in a `.posts` grid (3 columns; 2 at ≤1100px;
|
||||
1 at ≤760px — the grid CSS exists from 24-4; at this page the last card does not span two
|
||||
columns: add `body.site .posts-index .post:last-child{grid-column:auto}` and give the grid the
|
||||
extra class `posts-index`).
|
||||
- Empty states `posts.no_posts` as before.
|
||||
- Pagination: `{{ $posts->links() }}` kept; style its links under `body.site .pagination-wrap`
|
||||
(wrap the call in `<div class="pagination-wrap">`): 44px pill buttons, `1.5px solid var(--line)`,
|
||||
current page `background:var(--forest)` with cream text, disabled at 50% opacity.
|
||||
|
||||
### `/posts/{post}` — `resources/views/livewire/pages/posts/show.blade.php`
|
||||
|
||||
`<section class="sec" style="padding-top:56px"><article class="wrap" style="max-width:768px">`
|
||||
(720px content + padding):
|
||||
- `<span class="meta">` the published date (existing `translatedFormat('l, d F Y')` expression),
|
||||
colour `--gold-ink`, .85rem, weight 600.
|
||||
- `<h1>` = `$post->getTitle()` — display font, `clamp(2rem,3.4vw,3rem)`, margin 10px 0 28px.
|
||||
- Body `<div class="prose prose-lg prose-brand max-w-none site-prose">{!! $post->getBody() !!}</div>`
|
||||
(keep the existing output exactly). New CSS: `body.site .site-prose :is(h2,h3,h4){font-family:var(--display)}`,
|
||||
`body.site .site-prose a{color:var(--olive)}`, `body.site .site-prose{font-size:1.06rem;line-height:1.85}`.
|
||||
- Footer: `<a class="btn btn-ghost" href="{{ route('posts.index') }}" wire:navigate>`
|
||||
`posts.back_to_posts`, preceded by a hairline `border-top:1px solid var(--line)` with 48px
|
||||
margin-top and 24px padding-top. Remove `flux:heading`.
|
||||
|
||||
### Legal pages
|
||||
|
||||
- `resources/views/pages/legal.blade.php` — inside `<x-layouts.public>`:
|
||||
`<section class="sec" style="padding-top:56px"><div class="wrap" style="max-width:768px">`,
|
||||
`<h1>` `$page->getTitle()` (same h1 style as the article page), the existing
|
||||
`prose prose-brand` block with the class `site-prose` added and its card styling replaced by
|
||||
white background, radius 16px, `--shadow-1`, padding 40px (24px ≤760px); the existing
|
||||
"last updated" line as muted .85rem text. Keep the `clean()` call and the
|
||||
`pages.content_coming_soon` fallback unchanged.
|
||||
- `resources/views/pages/terms.blade.php` and `resources/views/pages/privacy.blade.php` — the same
|
||||
structure with their existing title and placeholder text. (`/terms` and `/privacy` redirect to
|
||||
`/page/terms` and `/page/privacy`; these two views are kept in case they are rendered
|
||||
directly.)
|
||||
|
||||
### Language keys
|
||||
|
||||
None new; `site.hero_eyebrow` (24-4) and `site.nav_articles` (24-2) are reused.
|
||||
|
||||
### Files
|
||||
|
||||
- Modify: `resources/views/livewire/pages/posts/index.blade.php`,
|
||||
`resources/views/livewire/pages/posts/show.blade.php`, `resources/views/pages/legal.blade.php`,
|
||||
`resources/views/pages/terms.blade.php`, `resources/views/pages/privacy.blade.php`,
|
||||
`resources/css/public.css`.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [ ] `/posts` shows the section head, a working search (typing filters results after the
|
||||
debounce and shows the count line), text-only post cards and styled pagination when there
|
||||
are more than 10 published posts.
|
||||
- [ ] `/posts/{post}` for a published post shows date, a display-font `<h1>`, the body and a Back
|
||||
button to `/posts`; an unpublished post still returns 404.
|
||||
- [ ] `/page/terms` and `/page/privacy` show the title, the sanitised CMS content (or the
|
||||
coming-soon text) and the last-updated line.
|
||||
- [ ] Each of these pages has exactly one `<h1>` and no horizontal scroll at 1440, 768 and 390px.
|
||||
- [ ] The admin posts screens (`/admin/posts`) are unchanged (they do not use the public layout).
|
||||
|
||||
## Sub-tasks
|
||||
|
||||
None.
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: 24-9
|
||||
title: 24-9 Auth Pages Type and Controls
|
||||
status: Ready for Dev
|
||||
date: 2026-10-31
|
||||
parent: 24
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
Apply the redesign's type and form controls to the auth pages (login, forgot password, reset
|
||||
password, confirm password, verify email, two-factor challenge) without changing their
|
||||
composition. The split layout (forest panel with the logo on the start side at ≥1024px, cream form
|
||||
panel with the existing `auth-pattern` background, the language toggle at the top end, and the
|
||||
mobile logo above the form) stays exactly as it is. No public script is loaded on auth pages.
|
||||
|
||||
### Layouts
|
||||
|
||||
In each of `resources/views/components/layouts/auth/split.blade.php`,
|
||||
`resources/views/components/layouts/auth/card.blade.php` and
|
||||
`resources/views/components/layouts/auth/simple.blade.php`:
|
||||
- After `@include('partials.head')` add `@include('partials.site-fonts')` and
|
||||
`@vite(['resources/css/public.css'])`.
|
||||
- Add the class `site-auth` to `<body>` and remove the inline
|
||||
`style="font-family: var(--font-…)"` from `<body>`.
|
||||
|
||||
### CSS — `resources/css/public.css`, scoped under `body.site-auth`
|
||||
|
||||
- `body.site-auth{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;color:#1E2219}`.
|
||||
- Headings (`h1, h2, [data-flux-heading]`): `font-family:"Markazi Text","Times New Roman",serif;
|
||||
font-weight:700`.
|
||||
- Text inputs (`input[type=email], input[type=password], input[type=text]`) — including those
|
||||
rendered by `flux:input`: min-height 48px, radius 12px, border `1.5px solid rgba(45,54,36,.18)`,
|
||||
white background; focus border `#A68966` and `box-shadow:0 0 0 4px rgba(166,137,102,.2)`, no
|
||||
default outline.
|
||||
- Primary submit buttons (`[data-flux-button][type=submit]` and `button[type=submit]`): radius
|
||||
999px, min-height 48px, background `#A68966`, text `#1E2219`, weight 600, shadow
|
||||
`0 1px 0 rgba(255,255,255,.35) inset, 0 8px 22px -8px rgba(166,137,102,.8)`; hover lift 2px.
|
||||
- Links inside the form panel: colour `#4A5D23`, underline on hover.
|
||||
- Focus ring for every control: `outline:2px solid #A68966; outline-offset:3px`.
|
||||
- Reduced motion: no transitions under `prefers-reduced-motion: reduce`.
|
||||
Inspect the rendered login page to confirm which attributes Flux outputs before writing the
|
||||
selectors; target only elements inside `body.site-auth`.
|
||||
|
||||
### Files
|
||||
|
||||
- Modify: `resources/views/components/layouts/auth/split.blade.php`,
|
||||
`resources/views/components/layouts/auth/card.blade.php`,
|
||||
`resources/views/components/layouts/auth/simple.blade.php`, `resources/css/public.css`.
|
||||
- Do not modify any file under `resources/views/livewire/auth/` or `app/Actions/Fortify/`.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [ ] `/login` renders in IBM Plex Sans Arabic with the heading in Markazi Text, 48px inputs with a
|
||||
gold focus ring, and a gold pill submit button; the forest logo panel and the cream pattern
|
||||
panel are unchanged in layout.
|
||||
- [ ] Logging in with valid credentials still works for an admin and a client (redirect to their
|
||||
dashboard), and invalid credentials still show the existing error.
|
||||
- [ ] `/forgot-password` shows the same styles and still sends the reset link for a known email.
|
||||
- [ ] The auth pages' HTML contains `public.css` and `class="site-auth`, and does not contain
|
||||
`public.js`.
|
||||
- [ ] The admin and client dashboards contain neither `public.css` nor `site-auth`.
|
||||
- [ ] `/login` has no horizontal scroll at 1440, 768 and 390px.
|
||||
|
||||
## Sub-tasks
|
||||
|
||||
None.
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
id: 24
|
||||
title: 24 Public-Site Redesign (PRD 1.4)
|
||||
status: Ready for Dev
|
||||
date: 2026-10-31
|
||||
parent: null
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
Container for the public-site redesign the client approved on 2026-10-31 (mockup v3,
|
||||
`docs/ux-mockup.html`, commit `caec396`). The redesign is presentation-only: no route, model,
|
||||
migration, service, mail or job changes. It restyles the public pages (`/`, `/about`, `/posts`,
|
||||
`/posts/{post}`, `/booking`, `/booking/success`, `/page/{slug}`, `/terms`, `/privacy`) and the
|
||||
auth pages' type and controls. The admin and client dashboards, emails, PDFs and
|
||||
`/forms/nablus-workshop` must not change.
|
||||
|
||||
This parent carries no implementation of its own. Execute the subtasks in ID order.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [ ] Subtasks 24-1, 24-2, 24-3, 24-4, 24-5, 24-6, 24-7, 24-8, 24-9 and 24-10 are all Done.
|
||||
|
||||
## Sub-tasks
|
||||
|
||||
- 24-1 Public design foundation (stylesheet, script, fonts, layout)
|
||||
- 24-2 Navigation and footer
|
||||
- 24-3 Signature balance component
|
||||
- 24-4 Home page sections (hero to latest articles)
|
||||
- 24-5 Home booking card (compact booking and day strip)
|
||||
- 24-6 Booking page and booking success
|
||||
- 24-7 About page
|
||||
- 24-8 Articles and legal pages
|
||||
- 24-9 Auth pages type and controls
|
||||
- 24-10 Redesign integration verification
|
||||
@@ -0,0 +1,143 @@
|
||||
# Task Index: Libra
|
||||
**Generated:** 2026-10-31
|
||||
|
||||
| ID | Title | Status | Parent |
|
||||
|----|-------|--------|--------|
|
||||
| 1 | 1 Core Foundation & Infrastructure | Done | — |
|
||||
| 1-1 | 1-1 Project Setup & Database Schema | Done | 1 |
|
||||
| 1-2 | 1-2 Authentication & Role System | Done | 1 |
|
||||
| 1-3 | 1-3 Bilingual Infrastructure (Arabic/English) | Done | 1 |
|
||||
| 1-4 | 1-4 Base UI & Navigation | Done | 1 |
|
||||
| 2 | 2 User Management System | Done | — |
|
||||
| 2-1 | 2-1 Individual Client Account Management | Done | 2 |
|
||||
| 2-2 | 2-2 Company/Corporate Client Account Management | Done | 2 |
|
||||
| 2-3 | 2-3 Account Type Conversion | Done | 2 |
|
||||
| 2-4 | 2-4 Account Lifecycle Management | Done | 2 |
|
||||
| 2-5 | 2-5 Account Creation Email Notification | Done | 2 |
|
||||
| 3 | 3 Booking & Consultation System | Done | — |
|
||||
| 3-1 | 3-1 Working Hours Configuration | Done | 3 |
|
||||
| 3-2 | 3-2 Time Slot Blocking | Done | 3 |
|
||||
| 3-3 | 3-3 Availability Calendar Display | Done | 3 |
|
||||
| 3-4 | 3-4 Booking Request Submission | Done | 3 |
|
||||
| 3-5 | 3-5 Admin Booking Review & Approval | Done | 3 |
|
||||
| 3-6 | 3-6 Calendar File Generation (.ics) | Done | 3 |
|
||||
| 3-7 | 3-7 Consultation Management | Done | 3 |
|
||||
| 3-8 | 3-8 Consultation Reminders | Done | 3 |
|
||||
| 3-9 | 3-9 Guest Booking Request | Done | 3 |
|
||||
| 4 | 4 Case Timeline System | Done | — |
|
||||
| 4-1 | 4-1 Timeline Creation | Done | 4 |
|
||||
| 4-2 | 4-2 Timeline Updates Management | Done | 4 |
|
||||
| 4-3 | 4-3 Timeline Archiving | Done | 4 |
|
||||
| 4-4 | 4-4 Admin Timeline Dashboard | Done | 4 |
|
||||
| 4-5 | 4-5 Client Timeline View | Done | 4 |
|
||||
| 4-6 | 4-6 Timeline Update Notifications | Done | 4 |
|
||||
| 5 | 5 Posts/Blog System | Done | — |
|
||||
| 5-1 | 5-1 Post Creation & Editing | Done | 5 |
|
||||
| 5-2 | 5-2 Post Management Dashboard | Done | 5 |
|
||||
| 5-3 | 5-3 Post Deletion | Done | 5 |
|
||||
| 5-4 | 5-4 Public Posts Display | Done | 5 |
|
||||
| 5-5 | 5-5 Post Search | Done | 5 |
|
||||
| 6 | 6 Admin Dashboard | Done | — |
|
||||
| 6-1 | 6-1 Dashboard Overview & Statistics | Done | 6 |
|
||||
| 6-2 | 6-2 Analytics Charts | Done | 6 |
|
||||
| 6-3 | 6-3 Quick Actions Panel | Done | 6 |
|
||||
| 6-4 | 6-4 Data Export - User Lists | Done | 6 |
|
||||
| 6-5 | 6-5 Data Export - Consultation Records | Done | 6 |
|
||||
| 6-6 | 6-6 Data Export - Timeline Reports | Done | 6 |
|
||||
| 6-7 | 6-7 Monthly Statistics Report | Done | 6 |
|
||||
| 6-8 | 6-8 System Settings | Done | 6 |
|
||||
| 6-9 | 6-9 Legal Pages Editor | Done | 6 |
|
||||
| 6-10 | 6-10 Audit Log Viewer | Done | 6 |
|
||||
| 7 | 7 Client Dashboard | Done | — |
|
||||
| 7-1 | 7-1 Client Dashboard Overview | Done | 7 |
|
||||
| 7-2 | 7-2 My Consultations View | Done | 7 |
|
||||
| 7-3 | 7-3 My Cases/Timelines View (Dashboard Integration) | Done | 7 |
|
||||
| 7-4 | 7-4 My Profile View | Done | 7 |
|
||||
| 7-5 | 7-5 New Booking Interface | Done | 7 |
|
||||
| 7-6 | 7-6 Booking Limit Indicator | Done | 7 |
|
||||
| 8 | 8 Email Notification System | Done | — |
|
||||
| 8-1 | 8-1 Email Infrastructure Setup | Done | 8 |
|
||||
| 8-2 | 8-2 Welcome Email (Account Created) | Done | 8 |
|
||||
| 8-3 | 8-3 Booking Submitted Confirmation | Done | 8 |
|
||||
| 8-4 | 8-4 Booking Approved Email | Done | 8 |
|
||||
| 8-5 | 8-5 Booking Rejected Email | Done | 8 |
|
||||
| 8-6 | 8-6 Consultation Reminder (24 Hours) | Done | 8 |
|
||||
| 8-7 | 8-7 Consultation Reminder (2 Hours) | Done | 8 |
|
||||
| 8-8 | 8-8 Timeline Update Notification | Done | 8 |
|
||||
| 8-9 | 8-9 Admin Notification - New Booking | Done | 8 |
|
||||
| 8-10 | 8-10 Admin Notification - System Events | Done | 8 |
|
||||
| 9 | 9 Design & Branding Implementation | Done | — |
|
||||
| 9-1 | 9-1 Color System Implementation | Done | 9 |
|
||||
| 9-2 | 9-2 Typography System | Done | 9 |
|
||||
| 9-3 | 9-3 Logo Integration | Done | 9 |
|
||||
| 9-4 | 9-4 Component Styling - Buttons | Done | 9 |
|
||||
| 9-5 | 9-5 Component Styling - Forms | Done | 9 |
|
||||
| 9-6 | 9-6 Component Styling - Cards & Containers | Done | 9 |
|
||||
| 9-7 | 9-7 Navigation & Footer Styling | Done | 9 |
|
||||
| 9-8 | 9-8 RTL/LTR Layout Perfection | Done | 9 |
|
||||
| 9-9 | 9-9 Responsive Design Implementation | Done | 9 |
|
||||
| 9-10 | 9-10 Accessibility Compliance | Done | 9 |
|
||||
| 9-11 | 9-11 Animations & Micro-interactions | Done | 9 |
|
||||
| 10 | 10 Brand Color Refresh | Done | — |
|
||||
| 10-1 | 10-1 Core CSS Theme Update | Done | 10 |
|
||||
| 10-2 | 10-2 Blade Component Color Migration | Done | 10 |
|
||||
| 10-3 | 10-3 Email Template Color Update | Done | 10 |
|
||||
| 10-4 | 10-4 PDF Template Color Update | Done | 10 |
|
||||
| 10-5 | 10-5 Logo and SVG Assets Update | Done | 10 |
|
||||
| 10-6 | 10-6 Documentation Update | Done | 10 |
|
||||
| 11 | 11 Guest Booking | Done | — |
|
||||
| 11-1 | 11-1 Database Schema & Model Updates | Done | 11 |
|
||||
| 11-2 | 11-2 Public Booking Form with Custom Captcha | Done | 11 |
|
||||
| 11-3 | 11-3 Guest Email Notifications & Admin Integration | Done | 11 |
|
||||
| 11-4 | 11-4 Documentation Updates | Done | 11 |
|
||||
| 12 | 12 Branding Refresh (Logo + Color Scheme) | Done | — |
|
||||
| 12-1 | 12-1 Logo Asset Deployment and CSS Layout Updates | Done | 12 |
|
||||
| 12-2 | 12-2 Core CSS Theme Update - Dark Charcoal & Warm Gold Palette | Done | 12 |
|
||||
| 12-3 | 12-3 Blade Component Color Migration - Dark Charcoal & Warm Gold | Done | 12 |
|
||||
| 12-4 | 12-4 Email Template Color Update - Dark Charcoal & Warm Gold | Done | 12 |
|
||||
| 12-5 | 12-5 PDF Template Color Update - Dark Charcoal & Warm Gold | Done | 12 |
|
||||
| 12-6 | 12-6 Brand Documentation Update - Dark Charcoal & Warm Gold | Done | 12 |
|
||||
| 13 | 13 Authentication Pages Design Enhancement | Done | — |
|
||||
| 13-1 | 13-1 Language Toggle Visibility Enhancement | Done | 13 |
|
||||
| 13-2 | 13-2 Auth Layout Split Design Update | Done | 13 |
|
||||
| 13-3 | 13-3 Subtle Background Pattern Implementation | Done | 13 |
|
||||
| 13-4 | 13-4 Auth Pages Migration to Split Layout | Done | 13 |
|
||||
| 13-5 | 13-5 Visual QA and Refinement | Done | 13 |
|
||||
| 14 | 14 Home Page Redesign | Done | — |
|
||||
| 14-1 | 14-1 Hero Section Implementation | Done | 14 |
|
||||
| 14-2 | 14-2 About Section with Lawyer Profile | Done | 14 |
|
||||
| 14-3 | 14-3 Services Section | Done | 14 |
|
||||
| 14-4 | 14-4 Values Section | Done | 14 |
|
||||
| 14-5 | 14-5 Latest Posts Section | Done | 14 |
|
||||
| 14-6 | 14-6 Footer Contact Information Update | Done | 14 |
|
||||
| 15 | 15 Potential Clients Management | Done | — |
|
||||
| 15-1 | 15-1 Database Schema & Model Setup | Done | 15 |
|
||||
| 15-2 | 15-2 Potential Clients List with Type Filter | Done | 15 |
|
||||
| 15-3 | 15-3 CRUD Operations for Potential Clients | Done | 15 |
|
||||
| 16 | 16 About Us Page | Done | — |
|
||||
| 16-1 | 16-1 About Page Layout & Hero Section | Done | 16 |
|
||||
| 16-2 | 16-2 Vision & Mission Section | Done | 16 |
|
||||
| 16-3 | 16-3 Values Section | Done | 16 |
|
||||
| 16-4 | 16-4 Goals Section | Done | 16 |
|
||||
| 16-5 | 16-5 Legal Services Section | Done | 16 |
|
||||
| 16-6 | 16-6 Scholarship Aspiration Section (REMOVED from production 2026-01-11 — do not re-implement) | Done | 16 |
|
||||
| 17 | 17 Nablus Workshop Registration Form | Done | — |
|
||||
| 17-1 | 17-1 Registration mailable and email template | Done | 17 |
|
||||
| 17-2 | 17-2 Standalone registration page, form, and submit wiring | Done | 17 |
|
||||
| 18 | 18 Nablus Workshop Form - Image Sizing Fix | Done | — |
|
||||
| 19 | 19 Nablus Workshop Form - Remove Logo, Shrink Flyer Further | Done | — |
|
||||
| 20 | 20 Nablus Workshop Form - Match Site Background and Card Styling | Done | — |
|
||||
| 21 | 21 Nablus Workshop Form - Flyer Size Adjustment | Done | — |
|
||||
| 22 | 22 Fix Footer Address - Add Missing Street Name | Done | — |
|
||||
| 23 | 23 Fix AdminNotificationService Carbon TypeError Masking Exceptions | Done | — |
|
||||
| 24 | 24 Public-Site Redesign (PRD 1.4) | Ready for Dev | — |
|
||||
| 24-1 | 24-1 Public Design Foundation (Stylesheet, Script, Fonts, Layout) | Ready for Dev | 24 |
|
||||
| 24-2 | 24-2 Navigation and Footer | Ready for Dev | 24 |
|
||||
| 24-3 | 24-3 Signature Balance Component | Ready for Dev | 24 |
|
||||
| 24-4 | 24-4 Home Page Sections (Hero to Latest Articles) | Ready for Dev | 24 |
|
||||
| 24-5 | 24-5 Home Booking Card (Compact Booking and Day Strip) | Ready for Dev | 24 |
|
||||
| 24-6 | 24-6 Booking Page and Booking Success | Ready for Dev | 24 |
|
||||
| 24-7 | 24-7 About Page | Ready for Dev | 24 |
|
||||
| 24-8 | 24-8 Articles and Legal Pages | Ready for Dev | 24 |
|
||||
| 24-9 | 24-9 Auth Pages Type and Controls | Ready for Dev | 24 |
|
||||
| 24-10 | 24-10 Redesign Integration Verification | Ready for Dev | 24 |
|
||||
@@ -5,6 +5,7 @@
|
||||
**Last synced:** 2026-09-28 — 19 QA passed (logo removed, flyer max-h-40 confirmed, 7/7 tests), Done
|
||||
**Last synced:** 2026-09-28 — 20 QA passed (auth-pattern/bg-background/card/text-body confirmed in compiled CSS and Blade, 7/7 tests), Done
|
||||
**Last synced:** 2026-09-28 — 21 QA passed (flyer max-h-56 confirmed in Blade and compiled CSS, HTTP 200, 7/7 tests), Done
|
||||
**Last synced:** 2026-10-31 — added tasks 24, 24-1…24-10 (public-site redesign, PRD 1.4); readiness review same day: 6 task-level fixes, all 11 promoted to Ready for Dev
|
||||
|
||||
| ID | Title | Status |
|
||||
|----|-------|--------|
|
||||
@@ -135,3 +136,14 @@
|
||||
| 21 | 21 Nablus Workshop Form - Flyer Size Adjustment | Done |
|
||||
| 22 | 22 Fix Footer Address - Add Missing Street Name | Done |
|
||||
| 23 | 23 Fix AdminNotificationService Carbon TypeError Masking Exceptions | Done |
|
||||
| 24 | 24 Public-Site Redesign (PRD 1.4) | Ready for Dev |
|
||||
| 24-1 | 24-1 Public Design Foundation (Stylesheet, Script, Fonts, Layout) | Ready for Dev |
|
||||
| 24-2 | 24-2 Navigation and Footer | Ready for Dev |
|
||||
| 24-3 | 24-3 Signature Balance Component | Ready for Dev |
|
||||
| 24-4 | 24-4 Home Page Sections (Hero to Latest Articles) | Ready for Dev |
|
||||
| 24-5 | 24-5 Home Booking Card (Compact Booking and Day Strip) | Ready for Dev |
|
||||
| 24-6 | 24-6 Booking Page and Booking Success | Ready for Dev |
|
||||
| 24-7 | 24-7 About Page | Ready for Dev |
|
||||
| 24-8 | 24-8 Articles and Legal Pages | Ready for Dev |
|
||||
| 24-9 | 24-9 Auth Pages Type and Controls | Ready for Dev |
|
||||
| 24-10 | 24-10 Redesign Integration Verification | Ready for Dev |
|
||||
|
||||
+320
-1
@@ -1,4 +1,323 @@
|
||||
# UX / Design Reference — Libra Law Firm
|
||||
# UX Design Spec: Libra for Rights — Public-Site Redesign
|
||||
**Version:** 2.0
|
||||
**Date:** 2026-10-31
|
||||
**Status:** Approved (client approved mockup v3 on 2026-10-31)
|
||||
**Visual mockup:** `docs/ux-mockup.html` (open in a browser to view; v3, commit `caec396`)
|
||||
|
||||
This file has two parts:
|
||||
|
||||
- **Part A — Public site (redesign, approved 2026-10-31).** Governs every page rendered through
|
||||
`resources/views/components/layouts/public.blade.php` and the auth layouts' type and controls.
|
||||
- **Part B — Dashboards, emails and the Nablus form (unchanged).** The retrospective record of the
|
||||
design system as built before the redesign. It still governs the admin and client dashboards,
|
||||
the emails and `/forms/nablus-workshop`, none of which the redesign touches.
|
||||
|
||||
Where Part A and Part B disagree about a public page, Part A wins.
|
||||
|
||||
---
|
||||
|
||||
# Part A — Public site
|
||||
|
||||
## Design Direction
|
||||
|
||||
Arabic-first, editorial and quiet: the firm reads like a well-bound legal document, not a tech
|
||||
product. The brand palette (forest, gold, cream, olive) is kept and used with more confidence —
|
||||
large forest bands, gold as thread and rule, cream as linen. Headlines are set in an editorial
|
||||
naskh serif (Markazi Text); body in IBM Plex Sans Arabic. Sections are numbered like articles of
|
||||
a statute ("المادة ٠١ — المؤسِّسة"). The signature is an engraved-gold balance over olive-tree
|
||||
photography that settles into level on load and is weighed by the visitor's pointer. Tatreez
|
||||
appears only inside real photography — Naser ruled out drawn cross-stitch ("drawing using xxx and
|
||||
other symbols is more of a tech stuff not lawyers", 2026-10-31). Every claim on the page is backed
|
||||
by the code (code-fit check, 2026-10-31): no availability promises, no response-time promises, no
|
||||
article images.
|
||||
|
||||
**Layout default:** desktop-first; every layout works at 768px and 390px with no horizontal scroll.
|
||||
|
||||
**Scope:** public pages only — home `/`, about `/about`, posts `/posts` and `/posts/{post}`,
|
||||
booking `/booking` and `/booking/success`, legal `/page/{slug}` (terms, privacy), and the auth
|
||||
pages (type and controls only, see *Auth pages*). Out of scope: admin and client dashboards,
|
||||
emails, PDFs, `/forms/nablus-workshop`.
|
||||
|
||||
## Layout & Navigation
|
||||
|
||||
- **Containment.** The public layout no longer wraps pages in one padded 1200px container; each
|
||||
page section is full-bleed and places its own content in a `.wrap` container:
|
||||
`max-width: 1200px; margin-inline: auto; padding-inline: 28px` (18px at ≤760px).
|
||||
- **Section rhythm.** Standard section padding 120px top and bottom (80px at ≤760px). Section
|
||||
header (`.sec-head`): flex row, items aligned to the end, space-between, gap 32px, wrap,
|
||||
margin-bottom 54px; left side holds the article label and h2, right side a muted lede
|
||||
(max-width 30em).
|
||||
- **Article label** (`.art-no`): display font, 1.15rem, weight 600, `--gold-ink`. Format
|
||||
`المادة ٠N — <name>` / `Article 0N — <Name>` (Arabic-Indic digits in Arabic).
|
||||
- **Eyebrow** (`.eyebrow`): 0.82rem, weight 600, `--gold-ink`, preceded by a 22×2px rule in
|
||||
currentColor with 10px gap; in English 0.74rem, uppercase, letter-spacing .16em. Arabic text
|
||||
never gets letter-spacing (it breaks joining).
|
||||
- **Navigation** (sticky, top 0, z 50, height 72px): background `rgba(244,241,234,.82)` with
|
||||
`backdrop-filter: blur(14px) saturate(1.2)`; bottom border transparent until the page has
|
||||
scrolled more than 8px, then `1px solid var(--line)` plus shadow `0 8px 24px -18px
|
||||
rgba(30,34,25,.5)`. Order (start → end): brand (seal + wordmark), links, then tools (language
|
||||
toggle, client login, gold "Book a consultation" button). Links: Home, About, Services (→
|
||||
`/#services`), Articles (→ `/posts`), Booking (→ `/booking`). Link style: 10px 14px padding,
|
||||
weight 500, .95rem; hover colour `--olive`; a 2px dashed gold underline (4px dash, 3px gap)
|
||||
scales in from the inline-start edge on hover and stays on the current page's link
|
||||
(`aria-current="page"`). Logged-in visitors see "Dashboard" (to their role's dashboard) and
|
||||
"Log out" in place of "Client login", as today.
|
||||
- **Brand mark:** a 46×46px "seal" — `public/images/logo.png` as a cover background on white,
|
||||
2px solid `#1A1A1A` border, shadow `3px 3px 5px rgba(26,26,26,.35)` — followed by the wordmark:
|
||||
«ليبرا» (display font, 1.35rem) over «للحقوق» (.72rem, muted). English: "Libra" over
|
||||
"FOR RIGHTS" (letter-spacing .12em).
|
||||
- **Mobile (≤1100px):** links hide; a 44×44px menu button (1.5px `--line` border, radius 10px,
|
||||
white) opens the existing Alpine mobile menu, restyled as a cream sheet below the nav with
|
||||
full-width 48px rows. At ≤760px the nav's gold button and the client-login link also hide (both
|
||||
remain inside the sheet).
|
||||
- **Reading progress rule:** a fixed 2px bar at the very top of the viewport (z 60), gradient
|
||||
`#8A7555 → #E2CDA4 → #A68966`, `transform: scaleX(p)` where p = scrollY / (scrollHeight −
|
||||
innerHeight); origin is the inline-start edge (right in RTL, left in LTR). Decorative
|
||||
(`aria-hidden`).
|
||||
- **Footer:** background `--forest-2` (#232A1C), text `--gold-lt`, margin-top 120px, padding 72px 0
|
||||
28px, .92rem. A 1px top hairline: horizontal gradient transparent → `rgba(196,168,130,.7)` →
|
||||
transparent. Four columns (1.4fr 1fr 1fr 1fr, gap 40px; 2 columns ≤1100px; 1 column ≤760px):
|
||||
(1) brand mark with cream wordmark and the tagline «ملتزمون بالعدالة – متجذرون بالكرامة – مدفوعون
|
||||
للدفاع»; (2) "Explore": About, Services, Articles, Booking; (3) "Clients": Client login, Terms of
|
||||
use, Privacy policy; (4) "Contact": phone (LTR), email, address. Column headings: display font,
|
||||
1.15rem, cream. Links: 10px vertical padding, hover → cream and a 3px nudge toward the
|
||||
inline-start. Bottom row: copyright, top border `rgba(244,241,234,.1)`, .8rem. No photography
|
||||
credit line.
|
||||
|
||||
## Visual Style
|
||||
|
||||
### Color Palette
|
||||
|
||||
| Token | Hex | Use |
|
||||
|---|---|---|
|
||||
| `--forest` | `#2D3624` | hero frame ground, pillar band, booking card, hover fill of service rows |
|
||||
| `--forest-2` | `#232A1C` | footer only (depth) |
|
||||
| `--gold` | `#A68966` | gold buttons, rules, row numbers, focus ring |
|
||||
| `--gold-ink` | `#8A7555` | gold text on cream (labels, dates) |
|
||||
| `--gold-lt` | `#C4A882` | small gold text on forest |
|
||||
| `--cream` | `#F4F1EA` | page ground |
|
||||
| `--olive` | `#4A5D23` | link hover, emphasis word in the hero, active accents |
|
||||
| `--ink` | `#1E2219` | body and heading text |
|
||||
| `--muted` | `#5B6152` | secondary text |
|
||||
| `--line` | `rgba(45,54,36,.14)` | hairlines and borders |
|
||||
| fabric ground | `#ECE7DC` | background of the Vision section |
|
||||
|
||||
The palette is the brand's own (`docs/brand.md`); `--ink`, `--muted`, `--forest-2` and the fabric
|
||||
ground are darker/lighter steps of it, added for contrast and depth. Status colours (success,
|
||||
danger, warning) are unchanged from Part B.
|
||||
|
||||
**Page ground:** `--cream` with a linen weave —
|
||||
`repeating-linear-gradient(0deg, rgba(45,54,36,.025) 0 1px, transparent 1px 3px),
|
||||
repeating-linear-gradient(90deg, rgba(45,54,36,.022) 0 1px, transparent 1px 4px)`.
|
||||
|
||||
**Shadows:** `--shadow-1: 0 1px 2px rgba(30,34,25,.06), 0 4px 14px rgba(30,34,25,.06)`;
|
||||
`--shadow-2: 0 2px 4px rgba(30,34,25,.08), 0 18px 40px -12px rgba(30,34,25,.28)`.
|
||||
**Easing:** `--ease: cubic-bezier(.2,.7,.2,1)`. **Radius:** cards 16px, buttons and chips 999px,
|
||||
inputs 12px.
|
||||
|
||||
### Typography
|
||||
|
||||
- **Display** (h1–h3, article labels, blockquotes, numbers): **Markazi Text**, weights 400–700,
|
||||
fallback `"Times New Roman", serif`. Headings weight 700, line-height 1.25.
|
||||
- **Body and UI:** **IBM Plex Sans Arabic**, weights 300–600, fallback `system-ui, sans-serif`.
|
||||
17px, line-height 1.75 (16px at ≤760px). Both families carry Latin glyphs, so English uses the
|
||||
same two families.
|
||||
- Loaded from Google Fonts with `display=swap`, on the public and auth layouts only. The dashboards
|
||||
keep Cairo/Montserrat.
|
||||
- Sizes: hero h1 `clamp(2.6rem, 4.6vw, 4.1rem)`, line-height 1.12, word-spacing .08em (English:
|
||||
letter-spacing −.02em); section h2 `clamp(2rem, 3.4vw, 3rem)`; row h3 1.65rem; card h3 1.4rem;
|
||||
post h3 1.35rem; lede 1.15rem.
|
||||
|
||||
### Tone & Style
|
||||
|
||||
Editorial, warm, unhurried. Real photography only (olive tree, embroidery on a hoop, olives,
|
||||
hills, the founder's portrait). No drawn cross-stitch, no gradient blobs, no carousels. Depth comes
|
||||
from layered shadows, gold hairlines and the engraved balance.
|
||||
|
||||
### Buttons
|
||||
|
||||
- **Gold** (`.btn-gold`): pill (radius 999px), min-height 48px, padding 12px 26px, weight 600,
|
||||
background `--gold`, text `--ink`, shadow `0 1px 0 rgba(255,255,255,.35) inset, 0 8px 22px -8px
|
||||
rgba(166,137,102,.8)`. Hover: lift 2px, deeper glow plus a 6px `rgba(166,137,102,.14)` halo, and
|
||||
a white shimmer (105° gradient, 30–70%) sweeps across in .7s.
|
||||
- **Ghost** (`.btn-ghost`): transparent, 1.5px inset `--forest` ring, text `--ink`. Hover: fills
|
||||
`--forest`, text cream, lift 2px. On dark grounds: cream text and a `rgba(244,241,234,.6)` ring;
|
||||
hover fills cream with forest text.
|
||||
- An arrow icon inside a button nudges 4px toward the reading direction on hover; it is mirrored
|
||||
in LTR.
|
||||
- Focus (all controls): `outline: 2px solid var(--gold); outline-offset: 3px`.
|
||||
|
||||
## Key Screens / Flows
|
||||
|
||||
### Home `/`
|
||||
|
||||
Top to bottom (content is real; copy keys are listed in the tasks):
|
||||
|
||||
1. **Hero** — two columns (1fr : 1.08fr, gap 56px; one column ≤1100px). Start column: eyebrow
|
||||
«ليبرا للحقوق · فلسطين»; h1 «العدالة *ممارسةٌ يومية*، لا مبدأٌ نظري.» with the emphasised phrase
|
||||
in `--olive` and a dashed gold underline; lede (the existing `home.intro`); gold "Book a
|
||||
consultation" (→ `#book`) and ghost "Our services" (→ `#services`); a trust strip of three
|
||||
items separated from the CTAs by a hairline: «أفراد وشركات / استشارات وتمثيل», «المرأة والأسرة /
|
||||
دعم قانوني متخصص», «عربي · English / خدمة بلغتين». End column: the **balance frame** (see
|
||||
Signature Moment): an arched frame (aspect 4:4.6, radius 999px 999px 18px 18px) holding the
|
||||
olive-tree photo under a forest gradient veil, a soft gold glow, the gold balance, and the
|
||||
italic caption «لكلّ حقٍّ وزنُه». A cream tag with a pulsing olive dot overlaps the frame edge:
|
||||
«استشارات حضورية أو عن بُعد».
|
||||
2. **Pillars band** — full-bleed forest band, three columns divided by cream hairlines: Justice,
|
||||
Dignity, Advocacy, each with a gold gem (12px rotated square) and a one-line gloss in
|
||||
`--gold-lt`. Hover lightens the column background.
|
||||
3. **Founder** (Article 01) — portrait (aspect 4:5, radius 18px, greyscale, an inset dashed gold
|
||||
frame, a cream name card «هدى عرموش / المؤسِّسة · محامية»), h2 «تعرّف على المؤسِّسة», a pull
|
||||
quote «العدالة ممارسة يومية، وليست مجرد مبدأ نظري.» (display font, gold inline-start rule), the
|
||||
two bio paragraphs, and a ghost "Read our story" → `/about`. Hover on the portrait restores some
|
||||
colour and scales it 3%.
|
||||
4. **Services docket** (Article 02) — four rows, each a link to `#book`: big gold number, title,
|
||||
chips of the service's items, a round arrow button. Hover: the row fills forest, text turns
|
||||
cream, chips go gold-light, the arrow fills gold, a dashed gold inner border appears, lift 2px.
|
||||
5. **Vision** (Article 03, fabric ground `#ECE7DC`) — text column (h2 «منسوجةٌ من نسيج المجتمع»
|
||||
and a display-font paragraph) beside the embroidery-hoop photo (circular, two gold ring
|
||||
shadows). Below it, three cards: "For our institution" (forest panel with a static balance),
|
||||
"For society" (olives photo), "For Palestinians in the diaspora" (hills photo); each with an
|
||||
italic label on the image, a title and one line.
|
||||
6. **Values** (Article 04) — six cards in a row (3 ≤1100px, 2 ≤760px): a gold-ringed medallion
|
||||
with a fine-line icon, and the value name. Hover: card lifts and tilts −0.6°, the medallion
|
||||
rotates −8°, gains a gold glow, the icon turns olive.
|
||||
7. **Latest articles** (Article 05) — the three most recent published posts as text-only cards
|
||||
(date, title, excerpt, "Read more"), gold top border turning olive on hover, a large faint
|
||||
quotation mark in the corner; "View all articles" ghost button → `/posts`. No post → the
|
||||
existing "Articles coming soon" line in place of the grid.
|
||||
8. **Booking card** (Article 06, `id="book"`) — one rounded (28px) forest card in two columns:
|
||||
start panel with h2 "Book a consultation", the lede «اختر يوماً ووقتاً متاحَين، وأخبرنا باختصار
|
||||
عن قضيتك. نراجع كل طلب ونؤكّد الموعد بالبريد الإلكتروني — دون الحاجة إلى حساب.», phone, email,
|
||||
address, and the finale balance (190px); end panel is a cream inset form (see *Booking flow*).
|
||||
|
||||
### Booking flow (home card and `/booking`)
|
||||
|
||||
Both surfaces run the existing guest-booking component and its rules unchanged: name, email,
|
||||
phone (all required), a case summary (required, minimum 20 characters), the math captcha, one
|
||||
booking per email per day, slots from `AvailabilityService`, the existing confirm step, and the
|
||||
redirect to `/booking/success`. Logged-in visitors see the existing "you are logged in" message,
|
||||
restyled, in place of the form.
|
||||
|
||||
- **Home card (compact):** fields in this order — name and phone side by side, email, a **day
|
||||
strip**, a **slot row**, the case summary, the captcha, the gold submit "Request this
|
||||
appointment" (full width), and the note «ملاحظة: يمكنك حجز استشارة واحدة كحدّ أقصى في اليوم.».
|
||||
The day strip shows the next 14 calendar days that have at least one available slot, as
|
||||
66×72px buttons (weekday name over the day number), horizontally scrollable; the first is
|
||||
pre-selected. Selected day: forest fill, cream number. The slot row shows that day's available
|
||||
slots as pill buttons (min-height 44px); selected slot: gold fill. Both use `aria-pressed`.
|
||||
Submit opens the existing confirm step inside the same card (summary of date, time and contact,
|
||||
with Confirm and Back).
|
||||
- **`/booking` page:** the same two-panel forest card, full page; the end panel keeps the month
|
||||
calendar (the existing component, restyled: cream ground, 44px day cells, selected day forest,
|
||||
available days with a gold dot, unavailable days muted), then the fields and confirm step.
|
||||
- **Inputs:** min-height 48px, padding 12px 16px, radius 12px, 1.5px border `rgba(45,54,36,.18)`,
|
||||
white; focus: border `--gold` plus a 4px `rgba(166,137,102,.2)` ring. Labels .85rem, weight 600.
|
||||
Errors: the existing message under the field, in the danger colour.
|
||||
- **`/booking/success`:** a centred cream card on the linen ground with a small level balance, the
|
||||
existing success copy and a ghost button home.
|
||||
|
||||
### About `/about`
|
||||
|
||||
The same system, existing content only (no new copy beyond section labels): hero (eyebrow, h1
|
||||
from `about.title`, the tagline, the identity statement), Vision and Mission (the fabric section
|
||||
pattern; the three mission cards with the olives, hills and static-balance panels), Values (the
|
||||
medallion row), Goals (a numbered docket list: gold display numbers, no chips, no links), Legal
|
||||
services (the docket rows, linking to `/booking`), closing gold CTA to `/booking`.
|
||||
|
||||
### Articles `/posts` and `/posts/{post}`
|
||||
|
||||
- **Index:** page head (article label, h2 "Articles"), the existing search field restyled as a
|
||||
pill input, the text-only post cards in a three-column grid (2 ≤1100px, 1 ≤760px), the existing
|
||||
pagination restyled (pill buttons, current page forest).
|
||||
- **Show:** a reading column max-width 720px; date in `--gold-ink`; title in the display font
|
||||
`clamp(2rem, 3.4vw, 3rem)`; body in the existing prose styles with headings in the display font
|
||||
and links in `--olive`; a "Back to articles" ghost button.
|
||||
|
||||
### Legal pages `/page/{slug}`
|
||||
|
||||
Reading column max-width 720px, display-font title, existing prose body.
|
||||
|
||||
### Auth pages (login, forgot/reset password, confirm password, verify email)
|
||||
|
||||
Type and controls only: the auth layouts load the two new families and apply the input, focus and
|
||||
gold-button styles above. The split composition (forest panel with the logo, cream form panel) and
|
||||
the existing auth pattern stay as they are.
|
||||
|
||||
## Signature Moment
|
||||
|
||||
**Element:** an engraved-gold balance (scales of justice) drawn as layered SVG — gradient-filled
|
||||
beam, pillar, olive-leaf finial, base and two pans with a drop shadow — standing over the
|
||||
olive-tree photograph in the hero frame. A second instance (the "finale", 190px) sits in the
|
||||
booking card; a static instance fills the "For our institution" card.
|
||||
**Built from:** the firm's own name — Libra, the balance — and the olive tree of the region; the
|
||||
photograph is real.
|
||||
**Trigger:** page load; pointer movement over the hero frame (fine pointers only); scroll position
|
||||
for the finale.
|
||||
**Mapping:**
|
||||
- Load: the hero beam starts tilted 14° and, after 450ms, a damped spring settles it to 0°
|
||||
(per frame: `v += (target − a) × 0.028; v ×= 0.935; a += v`; stop when |v| < 0.002 and
|
||||
|target − a| < 0.01).
|
||||
- Pointer: x = (clientX − frame.left) / frame.width; target = clamp((x − 0.5) × 2.4, −1, 1) × 9°.
|
||||
The gold glow follows the pointer; the photo pans opposite the pointer by
|
||||
`(pointer − centre) / −40` px at scale 1.08. Pointer leave → target 0°, photo resets.
|
||||
- Pans hang from the beam ends: for beam angle θ, pan centres are at (200 ∓ 142·cos θ,
|
||||
110 ∓ 142·sin θ) in the 400×400 viewBox, so they stay vertical while the beam tips.
|
||||
- Finale: with p the page progress, q = clamp((p − 0.7) / 0.25, 0, 1); target = −12° × (1 − q), so
|
||||
the balance comes level as the reader reaches the booking card.
|
||||
**Tech suggestion:** an inline SVG Blade component and a small vanilla JS module
|
||||
(`requestAnimationFrame`); no library.
|
||||
**Reduced-motion fallback:** all balances render level (0°), no spring, no pointer response, no
|
||||
glow movement; the photo stays still.
|
||||
|
||||
## Interaction Patterns (secondary)
|
||||
|
||||
- **Entrance choreography:** elements marked `data-reveal` start at opacity 0 and translateY 28px
|
||||
and transition (.9s, `--ease`) to rest when 8% inside the viewport (IntersectionObserver,
|
||||
`rootMargin: 0px 0px -8% 0px`, observe once). Delays by `data-d` 1–5: .08s steps. Content stays
|
||||
visible if JavaScript fails (the hidden state applies only once the script adds a `js` class).
|
||||
- **Hover depth:** cards lift 6px with `--shadow-2` and a gold border `rgba(166,137,102,.55)`;
|
||||
card images scale 1.05–1.06 over .8s.
|
||||
- **Language toggle:** the existing `/language/{locale}` route; a 48×44px pill showing "EN" in
|
||||
Arabic and "ع" in English.
|
||||
- **Reduced motion:** `@media (prefers-reduced-motion: reduce)` disables every animation and
|
||||
transition on the public pages and shows all `data-reveal` content at rest.
|
||||
- **Touch targets:** every interactive element at least 44×44px.
|
||||
- **RTL/LTR:** logical properties throughout; arrows and the progress rule's origin mirror.
|
||||
|
||||
## Design Decisions & Rationale
|
||||
|
||||
- **Markazi Text + IBM Plex Sans Arabic** — Amiri's calligraphic ligatures broke in large
|
||||
headlines; Markazi is an editorial naskh with a matching Latin serif (brand.md asks for a serif
|
||||
headline); Plex Arabic is highly legible at body size. Two families total.
|
||||
- **Balance over olive photography, no drawn tatreez** — Naser rejected the cross-stitch drawings
|
||||
as "tech stuff"; the balance is the firm's name and reads as law at a glance.
|
||||
- **Article numbering** — frames the firm's content in the language of a statute; costs nothing.
|
||||
- **Text-only article cards** — posts have no image field (code-fit check); no images are promised.
|
||||
- **Copy limited to what the code backs** — no availability or response-time claims; booking copy
|
||||
is drawn from the existing lang strings.
|
||||
- **Public-only scope** — the dashboards share global tokens and `.btn` classes; the redesign is
|
||||
scoped to the public layout so no dashboard screen changes.
|
||||
- **Compact booking on the home page** — the client approved a one-screen form; it reuses the same
|
||||
component and rules, so the backend does not change.
|
||||
|
||||
## Open Questions
|
||||
|
||||
None blocking. Rulings taken for the build (ledger, 2026-10-31):
|
||||
|
||||
1. **Photography** — the mockup's four Unsplash photos (olive tree, embroidery hoop, olives, hills)
|
||||
ship as the production images; the Unsplash licence allows commercial use without attribution.
|
||||
The client may replace them later with their own.
|
||||
2. **Home day strip** — the next 14 calendar days with an available slot; `/booking` keeps the
|
||||
month calendar.
|
||||
3. **Pages the mockup does not show** (about, articles, booking page, success, legal) — composed
|
||||
from the homepage's components with their existing content; no new sections.
|
||||
4. **Auth pages** — type and controls only; composition unchanged.
|
||||
|
||||
---
|
||||
|
||||
# Part B — Dashboards, emails and the Nablus form (pre-redesign record)
|
||||
|
||||
|
||||
Retrospective documentation of the design system as it is currently **built and live**. This
|
||||
is not a proposal — it describes what shipped, so a dev/QA agent picking up a new task can match
|
||||
|
||||
Reference in New Issue
Block a user