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>
2026-10-31 18:23:02 +02:00
parent caec396fa4
commit 3d1fe40be6
17 changed files with 1761 additions and 5 deletions
@@ -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.