libra/docs/tasks/24-2.md

id, title, status, date, parent

id	title	status	date	parent
24-2	24-2 Navigation and Footer	QA Review	2026-10-31	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.