libra/docs/tasks/24-7.md

id, title, status, date, parent

id	title	status	date	parent
24-7	24-7 About Page	QA Review	2026-10-31	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.