libra/docs/tasks/24-4.md

id, title, status, date, parent

id	title	status	date	parent
24-4	24-4 Home Page Sections (Hero to Latest Articles)	QA Review	2026-10-31	24

Description

Rebuild resources/views/livewire/pages/home.blade.php as the approved redesign, sections 1–7 (hero, pillars, founder, services, vision, values, latest articles). Section 8, the booking card, is task 24-5; leave a placeholder comment {{-- booking card: task 24-5 --}} where it goes. Keep the component's PHP class as it is (#[Layout('components.layouts.public')], with() returning latestPosts = Post::published()->latest('published_at')->take(3)->get()). Remove the temporary <div class="wrap py-8"> wrapper added in 24-1: each section is full-bleed and holds a <div class="wrap">.

The visual reference is docs/ux-mockup.html (commit caec396). Port the CSS for each section from the line ranges below into resources/css/public.css, every selector prefixed with body.site , and port the matching responsive rules from lines 293–323. Put data-reveal and data-d attributes on the same elements as the mockup (lines 358–506).

Photography — create public/images/site/

Extract these JPEG data URIs from docs/ux-mockup.html and save them, decoded, as files (a short script reading the file and base64-decoding the src="data:image/jpeg;base64,…" value on each line is enough; do not commit the script):

Mockup line	<img>	Save as
377	hero olive tree	public/images/site/olive-tree.jpg
447	embroidery hoop	public/images/site/embroidery-hoop.jpg
455	olives on a branch	public/images/site/olives.jpg
459	hills and road	public/images/site/hills.jpg

The founder portrait uses the existing public/images/huda-armouche.jpg. The images are from Unsplash (licence permits commercial use without attribution); show no credit line.

Sections (in order, inside the root <div>)

1. Hero — <section class="hero" id="top">; CSS lines 100–125. Two-column grid (1fr 1.08fr, gap 56px; one column ≤1100px). Start column: .eyebrow = site.hero_eyebrow; <h1> = {{ __('site.hero_title_a') }}<em>{{ __('site.hero_title_em') }}</em>{{ __('site.hero_title_b') }} (the em is upright, --olive, with text-decoration: underline dashed var(--gold) .07em; text-underline-offset:.28em); <p class="lede"> = home.intro; CTA row: gold button home.cta_book → #book with the arrow SVG (mockup line 366), ghost button home.cta_services → #services; .trust strip with three items, each <strong> + <span>: (site.trust_1_title, site.trust_1_text), (site.trust_2_title, site.trust_2_text), (site.trust_3_title, site.trust_3_text). End column .hero-art: <figure class="frame"> (aspect 4/4.6, radius 999px 999px 18px 18px, forest ground, gradient veil ::before from rgba(35,42,28,.35) to .9), containing <img src="/images/site/olive-tree.jpg" alt="{{ __('site.alt_olive_tree') }}"> (filter saturate(.75) contrast(1.05), scale(1.08)), <span class="glow"> (420px radial gold glow), <x-site.balance mode="hero" :label="__('site.balance_label')" id="scales" /> positioned inset:10% 8% 12%, and <figcaption> = site.frame_caption (display italic, cream .78). Then <div class="tag"> with <span class="dot"> (olive, pulsing) and site.frame_tag.
2. Pillars band — <section class="band on-dark" aria-label="{{ __('site.pillars_label') }}">; CSS lines 127–137. Three .pillar columns: (site.pillar_justice, site.pillar_justice_text), (site.pillar_dignity, site.pillar_dignity_text), (site.pillar_advocacy, site.pillar_advocacy_text), each title preceded by <span class="gem"> (CSS line 210).
3. Founder — <section class="sec" id="founder">; CSS lines 146–157. Portrait /images/huda-armouche.jpg (alt home.lawyer_name) with .namecard (<b> home.lawyer_name, <span> site.founder_role). Text column: .art-no site.art_founder; <h2> home.about_title; <blockquote> site.founder_quote; paragraphs home.lawyer_bio and home.lawyer_bio_2; ghost button site.founder_cta → route('about').
4. Services docket — <section class="sec" id="services" style="padding-top:40px">; CSS lines 159–174. x-site.section-head (see below) with label site.art_services, title home.services_subtitle, lede site.services_lede. Four <a class="row" href="#book"> rows: number 01–04 (.n), <h3> title, .chips of the items, .go arrow circle. Rows in order: (home.service_consultation_title, home.service_consultation_items), (home.service_family_title, home.service_family_items), (home.service_civil_title, home.service_civil_items), (home.service_business_title, home.service_business_items). Items are arrays — render each as <span class="chip">.
5. Vision — <section class="sec fabric" id="mission">; CSS lines 176–197. Text column: .art-no site.art_vision, <h2> site.vision_title, <p class="big"> site.vision_text; beside it .hoop with /images/site/embroidery-hoop.jpg (alt site.alt_hoop; filter hue-rotate(-140deg) saturate(.55) sepia(.25)). Below, .three grid of <article class="card">: (a) .ph.motif-ph containing <x-site.balance mode="static" /> (150×150px) and label site.card_institution_label, title site.card_institution_title, text site.card_institution_text; (b) .ph with /images/site/olives.jpg (alt site.alt_olives), label site.card_society_label, title site.card_society_title, text site.card_society_text; (c) .ph with /images/site/hills.jpg (alt site.alt_hills), label site.card_diaspora_label, title site.card_diaspora_title, text site.card_diaspora_text.
6. Values — <section class="sec" id="values">; CSS lines 199–212. Section head: label site.art_values, title home.values_title, lede home.values_subtitle. .sampler grid of six .val cards, each <span class="medal"> with the line icon and <b> = home.values.<key>.title, keys in order integrity, justice, knowledge, empowerment, professionalism, innovation. Icons: the inline SVGs on mockup lines 474–479 in the same order (24×24 viewBox, aria-hidden="true", stroke --gold-ink 1.5, no fill). Replace the current flux:icon usage.
7. Latest articles — <section class="sec" id="posts" style="padding-top:20px">; CSS lines 214–234. Head: label site.art_articles, title home.posts_title, and in place of the lede a ghost button home.view_all_posts → route('posts.index'). If $latestPosts is not empty: .posts grid of <x-site.post-card :post="$post" />; otherwise a <p> with home.posts_empty (muted, centred).

Components to create

• resources/views/components/site/section-head.blade.php — props label, title, lede (nullable); renders <div class="sec-head"><div><span class="art-no" data-reveal>{{ $label }}</span><h2 data-reveal data-d="1">{{ $title }}</h2></div> then either <p data-reveal data-d="2">{{ $lede }}</p> or the $slot (for the button), then </div>.
• resources/views/components/site/post-card.blade.php — prop post (App\Models\Post); <a class="post" href="{{ route('posts.show', $post) }}" wire:navigate data-reveal> → <div class="bd"> with <span class="meta"> = the published date ($post->published_at?->translatedFormat('j F Y')), <h3> = $post->getTitle(), <p> = an excerpt of strip_tags($post->getBody()) limited to 140 characters (Str::limit), and <span class="more"> = home.read_more. Text-only: no image element.

Language keys — add to lang/ar/site.php and lang/en/site.php

Key	ar	en
hero_eyebrow	ليبرا للحقوق · فلسطين	Libra for Rights · Palestine
hero_title_a	العدالة␠	Justice is a␠
hero_title_em	ممارسةٌ يومية	daily practice
hero_title_b	، لا مبدأٌ نظري.	, not a theory.
trust_1_title	أفراد وشركات	Individuals & companies
trust_1_text	استشارات وتمثيل	Consultations and representation
trust_2_title	المرأة والأسرة	Women & family
trust_2_text	دعم قانوني متخصص	Specialised legal support
trust_3_title	عربي · English	Arabic · English
trust_3_text	خدمة بلغتين	Bilingual service
alt_olive_tree	شجرة زيتون معمّرة بين صخور كلسية	An ancient olive tree among limestone rocks
balance_label	ميزان العدالة	The scales of justice
frame_caption	لكلّ حقٍّ وزنُه	Every right carries its weight
frame_tag	استشارات حضورية أو عن بُعد	Consultations in person or remotely
pillars_label	ركائزنا	Our pillars
pillar_justice	العدالة	Justice
pillar_justice_text	الإنصاف، والمساءلة، وسيادة القانون.	Fairness, accountability and the rule of law.
pillar_dignity	الكرامة	Dignity
pillar_dignity_text	القيمة الأصيلة لكل إنسان.	The inherent worth of every person.
pillar_advocacy	الدفاع	Advocacy
pillar_advocacy_text	انخراطٌ فاعل، وقولُ الحق في وجه السلطة.	Active engagement, and speaking truth to power.
art_founder	المادة ٠١ — المؤسِّسة	Article 01 — The founder
founder_role	المؤسِّسة · محامية	Founder · Attorney at Law
founder_quote	«العدالة ممارسة يومية، وليست مجرد مبدأ نظري.»	“Justice is a daily practice, not merely a theoretical principle.”
founder_cta	اقرأ قصتنا	Read our story
art_services	المادة ٠٢ — الخدمات	Article 02 — Services
services_lede	ممارسة قانونية أصيلة، تقوم على البحث والمعرفة الميدانية.	Traditional legal practice, combined with research-driven insight.
art_vision	المادة ٠٣ — الرؤية	Article 03 — Vision
vision_title	منسوجةٌ من نسيج المجتمع	Woven from the fabric of society
vision_text	ليبرا نسيجٌ أصيل من المجتمع، تتقصّى مشكلاته وتوثّقها وتكشف جذورها، وتقدّم حلولاً عملية لرأب أوجاعه مهما صغرت، عبر العمل التشاركي والبحث الميداني الحقيقي.	Libra investigates society's problems, documents them, uncovers their roots, and offers practical solutions to mend social pains — however small — through collaborative work and genuine field research.
alt_hoop	تطريز بغرزة الصليب مشدود على طارة خشبية	Cross-stitch embroidery stretched on a wooden hoop
card_institution_label	لمؤسستنا	For our institution
card_institution_title	القانون والبحث والميدان	Law, research and fieldwork
card_institution_text	نلتقط نبض المجتمع ونحوّل تحدياته إلى معرفة وحلول قانونية مبتكرة.	Capturing society's pulse and turning its challenges into knowledge and innovative legal solutions.
alt_olives	ثمار زيتون على غصن	Olives ripening on a branch
card_society_label	للمجتمع	For society
card_society_title	شريكٌ موثوق للقضاء	A trusted partner to the judiciary
card_society_text	نعيد وصل المجتمع بتاريخه وإرثه القانوني.	Reconnecting society with its history and legal heritage.
alt_hills	تلال وطريق متعرّج عند الغروب	Hills and a winding road at sunset
card_diaspora_label	لفلسطينيي الشتات	For Palestinians in the diaspora
card_diaspora_title	عودةٌ إلى الأرض والعائلة	Back to the land and the family
card_diaspora_text	نساعد الفلسطينيين في الخارج على البحث في عائلاتهم وتاريخهم وأراضيهم.	Helping Palestinians abroad research their families, their history and their land.
art_values	المادة ٠٤ — القيم	Article 04 — Values
art_articles	المادة ٠٥ — المقالات	Article 05 — Articles

␠ marks a trailing space that must be kept in the value.

Files

• Create: public/images/site/olive-tree.jpg, public/images/site/embroidery-hoop.jpg, public/images/site/olives.jpg, public/images/site/hills.jpg, resources/views/components/site/section-head.blade.php, resources/views/components/site/post-card.blade.php.
• Modify: resources/views/livewire/pages/home.blade.php, resources/css/public.css, lang/ar/site.php, lang/en/site.php.
• Do not edit lang/*/home.php.

Acceptance Criteria

• / renders, in order, sections with ids top, (the pillars band), founder, services, mission, values, posts, each with its content from the keys above in both Arabic and English (switch with /language/en).
• / has exactly one <h1>, and every <img> has a non-empty alt in both languages.
• The four files in public/images/site/ exist, are valid JPEGs (file reports JPEG image data) and load with HTTP 200 on /.
• The hero balance renders inside the hero frame and settles level (task 24-3 behaviour).
• Each services row links to #book; each row shows the item chips from home.php.
• With three or more published posts, three post cards show date, title, excerpt and "Read more", link to /posts/{post}, and contain no <img>; with no published posts, the home.posts_empty text shows instead of the grid.
• At 1440, 768 and 390px wide, / has no horizontal scroll (document.documentElement.scrollWidth <= innerWidth).
• Hovering a service row fills it forest with cream text; hovering a value card lifts it and rotates its medallion; hovering a post card lifts it.
• The page contains no "Unsplash" text and lang/*/home.php is unchanged against BASE.

Sub-tasks

None.