---
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.