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

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

- [ ] 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