Naser Mansour
86 lines
5.0 KiB
Markdown
86 lines
5.0 KiB
Markdown
---
|
||
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.
|