# 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

```php
// 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:

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

### HTML Structure

```blade
<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

```php
// 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

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

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

## Dev Checklist

- [x] Add route for `/about` in `routes/web.php`
- [x] Create `resources/views/pages/about.blade.php`
- [x] Create `lang/en/about.php` with initial translations
- [x] Create `lang/ar/about.php` with initial translations
- [x] Add About Us link to navigation
- [x] Implement hero section with dark green background
- [x] Style page title with correct typography
- [x] Add tagline below title
- [x] Add identity statement
- [x] Test responsive layout (mobile, tablet, desktop)
- [x] Test RTL layout (Arabic)
- [x] Test LTR layout (English)
- [x] 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:**
   - [x] All functional requirements specified in the story are implemented.
   - [x] All acceptance criteria defined in the story are met.

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

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

4. **Functionality & Verification:**
   - [x] Functionality verified via automated tests.
   - [x] Edge cases handled (RTL/LTR, both languages).

5. **Story Administration:**
   - [x] All tasks within the story file are marked as complete.
   - [x] Clarifications documented in Dev Agent Record.
   - [x] Story wrap up section completed.

6. **Dependencies, Build & Configuration:**
   - [x] Project builds successfully without errors.
   - [x] Project linting passes (273 files checked).
   - [N/A] No new dependencies added.
   - [N/A] No new environment variables introduced.

7. **Documentation:**
   - [x] 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:**
- [x] I, the Developer Agent, confirm that all applicable items above have been addressed.