libra/docs/stories/story-16.1-about-page-layout-hero.md

Story 16.1: About Page Layout & Hero Section

Story

As a website visitor I want to access a dedicated About Us page So that I can learn about Libra for Rights' identity and purpose

Acceptance Criteria

AC1: Route & Navigation

Given a visitor on any page When they look at the main navigation Then an "About Us" / "من نحن" link is visible

When they click the About Us link Then they are navigated to /about

AC2: Page Structure

Given a visitor accesses /about When the page loads Then the page uses the public layout with:

• Navigation header
• Main content area
• Footer

AC3: Hero Section Container

Given the About Us page loads When displayed Then show a hero section with:

• Dark Forest Green (#2D3624) background
• Full-width container
• Adequate vertical padding (80px desktop, 60px tablet, 40px mobile)
• Centered white text

AC4: Page Title

Given the hero section When viewed in English Then display title: "About Us"

When viewed in Arabic Then display title: "من نحن"

• Typography: H1, Bold, White
• Responsive font size: 3rem desktop, 2.5rem tablet, 2rem mobile

AC5: Tagline Display

Given the hero section below the title When displayed Then show the tagline:

• English: "Committed to Justice – Grounded in Dignity – Driven to Advocate"
• Arabic: "ملتزمون بالعدالة – متجذرون بالكرامة – مدفوعون للدفاع"
• Typography: H2, Regular, White with opacity
• Max-width: 800px centered

AC6: Identity Statement

Given the hero section below the tagline When displayed Then show the identity statement:

• English: "A legal institution woven from the fabric of society, using research as a tool of power to serve justice."
• Arabic: "مؤسسة قانونية منسوجة من نسيج المجتمع، تستخدم البحث كأداة قوة لخدمة العدالة."
• Typography: Body text, Regular, White
• Max-width: 700px centered

AC7: Responsive Layout

Given different screen sizes When viewing the hero section:

• Desktop (≥992px): Full layout with comfortable spacing
• Tablet (576-991px): Reduced padding, slightly smaller text
• Mobile (<576px): Compact spacing, stacked layout

AC8: RTL Support

Given Arabic language is selected When viewing the page Then all text and elements align right-to-left correctly

Technical Notes

Files to Create

• resources/views/pages/about.blade.php - Main page
• lang/en/about.php - English translations
• lang/ar/about.php - Arabic translations

Route to Add

// routes/web.php
Route::get('/about', function () {
    return view('pages.about');
})->name('about');

Navigation Update

Update resources/views/components/layouts/public.blade.php to include About Us link:

<a href="{{ route('about') }}">{{ __('nav.about') }}</a>

HTML Structure

<x-layouts.public>
    {{-- Hero Section --}}
    <section class="bg-[#2D3624] py-16 lg:py-20">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl lg:text-5xl font-bold text-white mb-4">
                {{ __('about.title') }}
            </h1>
            <p class="text-xl lg:text-2xl text-white/80 max-w-3xl mx-auto mb-6">
                {{ __('about.tagline') }}
            </p>
            <p class="text-lg text-white/70 max-w-2xl mx-auto">
                {{ __('about.identity') }}
            </p>
        </div>
    </section>

    {{-- Vision Section - Story 16.2 --}}

    {{-- Mission Section - Story 16.2 --}}

    {{-- Values Section - Story 16.3 --}}

    {{-- Goals Section - Story 16.4 --}}

    {{-- Services Section - Story 16.5 --}}

    {{-- Scholarship Section - Story 16.6 --}}
</x-layouts.public>

Translation Keys

// lang/en/about.php
return [
    'title' => 'About Us',
    'tagline' => 'Committed to Justice – Grounded in Dignity – Driven to Advocate',
    'identity' => 'A legal institution woven from the fabric of society, using research as a tool of power to serve justice.',
];

// lang/ar/about.php
return [
    'title' => 'من نحن',
    'tagline' => 'ملتزمون بالعدالة – متجذرون بالكرامة – مدفوعون للدفاع',
    'identity' => 'مؤسسة قانونية منسوجة من نسيج المجتمع، تستخدم البحث كأداة قوة لخدمة العدالة.',
];

Navigation Translation Keys

// Add to lang/en/nav.php
'about' => 'About Us',

// Add to lang/ar/nav.php
'about' => 'من نحن',

Dev Checklist

• Add route for /about in routes/web.php
• Create resources/views/pages/about.blade.php
• Create lang/en/about.php with initial translations
• Create lang/ar/about.php with initial translations
• Add About Us link to navigation
• Implement hero section with dark green background
• Style page title with correct typography
• Add tagline below title
• Add identity statement
• Test responsive layout (mobile, tablet, desktop)
• Test RTL layout (Arabic)
• Test LTR layout (English)
• Verify navigation link works correctly

Estimation

Complexity: Low Risk: Low - Standard page creation

Dependencies

• Public layout exists
• Navigation component exists
• Brand colors defined in CSS

---

Dev Agent Record

Status

Ready for Review

Agent Model Used

Claude Opus 4.5 (claude-opus-4-5-20251101)

File List

File	Action
routes/web.php	Modified - Added /about route
resources/views/livewire/pages/about.blade.php	Created - About page Volt component with hero section
lang/en/about.php	Created - English translations
lang/ar/about.php	Created - Arabic translations
lang/en/navigation.php	Modified - Added 'about' key
lang/ar/navigation.php	Modified - Added 'about' key
resources/views/components/navigation.blade.php	Modified - Added About Us links to desktop and mobile navigation
tests/Feature/Public/AboutPageTest.php	Created - 16 tests covering all acceptance criteria

Change Log

• Added Volt route for /about page with named route 'about'
• Created About page Volt component using class-based pattern with public layout
• Implemented hero section with Dark Forest Green (#2D3624) background
• Added responsive typography (2rem mobile, 2.5rem tablet, 3rem desktop)
• Added tagline with white/80 opacity and 800px max-width
• Added identity statement with white/70 opacity and 700px max-width
• Created English and Arabic translation files for about page content
• Added 'about' navigation translation keys to both language files
• Updated navigation component with About Us link in desktop and mobile views
• Added data-test attributes for navigation links (nav-about, mobile-nav-about)
• Created comprehensive test suite with 16 tests covering all acceptance criteria

Completion Notes

• All acceptance criteria implemented and tested
• 16 tests passing with 33 assertions
• RTL/LTR support verified through existing public layout
• Responsive layout implemented with Tailwind breakpoints
• Hero section extends full-width with negative margins to override container padding
• Placeholder comments added for future story sections (Vision, Mission, Values, Goals, Services, Scholarship)

DoD Checklist

1. Requirements Met:

   • All functional requirements specified in the story are implemented.
   • All acceptance criteria defined in the story are met.

2. Coding Standards & Project Structure:

   • All new/modified code strictly adheres to Operational Guidelines.
   • All new/modified code aligns with Project Structure (file locations, naming, etc.).
   • Adherence to Tech Stack for technologies/versions used.
   • [N/A] Adherence to Api Reference and Data Models - No API or data model changes.
   • Basic security best practices applied.
   • No new linter errors or warnings introduced.
   • Code is well-commented where necessary.

3. Testing:

   • All required unit tests implemented (16 tests for About page).
   • [N/A] Integration tests - Not applicable for static page.
   • All tests pass successfully (16 passed, 33 assertions).
   • Test coverage meets project standards.

4. Functionality & Verification:

   • Functionality verified via automated tests.
   • Edge cases handled (RTL/LTR, both languages).

5. Story Administration:

   • All tasks within the story file are marked as complete.
   • Clarifications documented in Dev Agent Record.
   • Story wrap up section completed.

6. Dependencies, Build & Configuration:

   • Project builds successfully without errors.
   • Project linting passes (273 files checked).
   • [N/A] No new dependencies added.
   • [N/A] No new environment variables introduced.

7. Documentation:

   • Inline code documentation complete (placeholders for future sections).
   • [N/A] No user-facing documentation changes needed.
   • [N/A] No architectural changes requiring technical documentation.

Final Confirmation:

• I, the Developer Agent, confirm that all applicable items above have been addressed.