# Story 14.2: About Section with Lawyer Profile

## Story

**As a** website visitor
**I want to** see information about the lawyer behind Libra
**So that** I can trust the firm and understand who will be handling my case

## Acceptance Criteria

### AC1: Section Container

**Given** a visitor scrolls past the hero section
**When** viewing the about section
**Then** display a section with:
- White (`#FFFFFF`) background to contrast with hero
- Section ID `id="about"` for anchor linking
- Adequate padding (64px vertical on desktop)

### AC2: Section Heading

**Given** the about section
**When** displayed
**Then** show a section heading:
- English: "About Us" or "Meet the Founder"
- Arabic: "من نحن" or "تعرف على المؤسسة"
- Typography: H2, SemiBold, Forest Green (`#2D322A`)

### AC3: Lawyer Photo

**Given** the about section
**When** displayed
**Then** show Huda Armouche's professional photo:
- Rounded corners or circular crop
- Appropriate size (200-300px width on desktop)
- Shadow for depth
- Alt text for accessibility

### AC4: Lawyer Name and Title

**Given** the about section
**When** displayed
**Then** show:
- Name (EN): "Huda Armouche"
- Name (AR): "هدى عرموش"
- Title (EN): "Attorney at Law"
- Title (AR): "محامية"
- Name: Bold, larger font
- Title: Regular, Warm Gold accent color

### AC5: Bio Text

**Given** the about section
**When** displayed
**Then** show a professional bio:
- English: "Huda Armouche founded Libra for Rights with a vision to create a legal institution woven from the fabric of society. With a commitment to justice and dignity, she leads a practice that investigates challenges, documents them, and transforms them into innovative legal solutions. Libra accompanies individuals and institutions with honesty and professionalism, striving to advance justice and empower women through law, research, and fieldwork."
- Arabic: "أسست هدى عرموش ليبرا للحقوق برؤية لإنشاء مؤسسة قانونية منسوجة من نسيج المجتمع. بالتزامها بالعدالة والكرامة، تقود ممارسة تحقق في التحديات وتوثقها وتحولها إلى حلول قانونية مبتكرة. تُرافق ليبرا الأفراد والمؤسسات بأمانة واحترافية، ساعية لتعزيز العدالة وتمكين المرأة من خلال القانون والبحث والعمل الميداني."
- Typography: Body text, readable line height
- Max-width for comfortable reading

### AC6: Layout Structure

**Given** different screen sizes
**When** viewing the about section:
- **Desktop:** Two-column layout (photo left/right, text opposite)
- **Tablet:** Two-column or stacked
- **Mobile:** Stacked (photo above, text below)

### AC7: RTL Support

**Given** Arabic language is selected
**When** viewing the about section
**Then** layout mirrors appropriately (photo on right in RTL if it was on left in LTR)

## Technical Notes

### Files to Modify/Create
- `resources/views/pages/home.blade.php` - Add about section
- `lang/en/home.php` - Add translations
- `lang/ar/home.php` - Add translations
- `public/images/huda-armouche.jpg` - Lawyer photo (to be added)

### HTML Structure

```blade
<section id="about" class="py-16 lg:py-20 bg-card">
    <div class="container mx-auto px-4">
        <h2 class="text-2xl lg:text-3xl font-semibold text-text text-center mb-12">
            {{ __('home.about_title') }}
        </h2>

        <div class="flex flex-col lg:flex-row items-center gap-8 lg:gap-12 max-w-5xl mx-auto">
            <!-- Photo -->
            <div class="flex-shrink-0">
                <img
                    src="{{ asset('images/huda-armouche.jpg') }}"
                    alt="{{ __('home.lawyer_name') }}"
                    class="w-48 h-48 lg:w-64 lg:h-64 rounded-full object-cover shadow-lg"
                >
            </div>

            <!-- Bio -->
            <div class="text-center lg:text-start">
                <h3 class="text-xl lg:text-2xl font-bold text-text mb-1">
                    {{ __('home.lawyer_name') }}
                </h3>
                <p class="text-cta font-medium mb-4">
                    {{ __('home.lawyer_title') }}
                </p>
                <p class="text-body leading-relaxed">
                    {{ __('home.lawyer_bio') }}
                </p>
            </div>
        </div>
    </div>
</section>
```

### Translation Keys

```php
// lang/en/home.php (additions)
'about_title' => 'Meet the Founder',
'lawyer_name' => 'Huda Armouche',
'lawyer_title' => 'Attorney at Law',
'lawyer_bio' => 'Huda Armouche founded Libra for Rights with a vision to create a legal institution woven from the fabric of society. With a commitment to justice and dignity, she leads a practice that investigates challenges, documents them, and transforms them into innovative legal solutions. Libra accompanies individuals and institutions with honesty and professionalism, striving to advance justice and empower women through law, research, and fieldwork.',

// lang/ar/home.php (additions)
'about_title' => 'تعرف على المؤسِّسة',
'lawyer_name' => 'هدى عرموش',
'lawyer_title' => 'محامية',
'lawyer_bio' => 'أسست هدى عرموش ليبرا للحقوق برؤية لإنشاء مؤسسة قانونية منسوجة من نسيج المجتمع. بالتزامها بالعدالة والكرامة، تقود ممارسة تحقق في التحديات وتوثقها وتحولها إلى حلول قانونية مبتكرة. تُرافق ليبرا الأفراد والمؤسسات بأمانة واحترافية، ساعية لتعزيز العدالة وتمكين المرأة من خلال القانون والبحث والعمل الميداني.',
```

### Image Requirements

- **File:** `public/images/huda-armouche.jpg`
- **Source:** WhatsApp Image 2026-01-07 at 5.34.23 PM.jpeg (provided by client)
- **Processing:** May need to crop/resize for optimal display
- **Recommended dimensions:** 400x400px minimum for retina displays

## Dev Checklist

- [x] Copy and rename lawyer photo to `public/images/huda-armouche.jpg`
- [x] Create about section HTML structure
- [x] Add section heading with translations
- [x] Implement photo display with proper styling
- [x] Add name and title with correct typography
- [x] Add bio text with translations
- [x] Implement responsive layout (flex column on mobile, row on desktop)
- [x] Test RTL layout mirrors correctly
- [x] Verify image loads and displays correctly
- [x] Ensure accessible alt text on image

## Estimation

**Complexity:** Low
**Risk:** Low - Content section with image

## Dependencies

- Story 14.1 (Hero) should be completed first for page structure
- Lawyer photo file must be placed in public/images/

---

## Dev Agent Record

### Status
Ready for Review

### Agent Model Used
Claude Opus 4.5

### File List
| File | Action |
|------|--------|
| `public/images/huda-armouche.jpg` | Created (copied from source) |
| `lang/en/home.php` | Modified (added about_title, lawyer_name, lawyer_title, lawyer_bio) |
| `lang/ar/home.php` | Modified (added about_title, lawyer_name, lawyer_title, lawyer_bio) |
| `resources/views/pages/home.blade.php` | Modified (added about section) |
| `tests/Feature/Public/HomePageTest.php` | Modified (added 12 about section tests) |

### Change Log
- Copied lawyer photo from `WhatsApp Image 2026-01-07 at 5.34.23 PM.jpeg` to `public/images/huda-armouche.jpg`
- Added English translations for about section (about_title, lawyer_name, lawyer_title, lawyer_bio)
- Added Arabic translations for about section
- Created about section in home page with:
  - White background (`bg-card`)
  - Section ID `id="about"` for anchor linking
  - 64px/80px vertical padding (py-16 lg:py-20)
  - H2 heading with translations
  - Circular photo with shadow (w-48/lg:w-64, rounded-full, object-cover, shadow-lg)
  - Name in bold, title in warm gold color (text-cta)
  - Bio text with readable line height (leading-relaxed)
  - Responsive layout: stacked on mobile, two-column on desktop (flex-col lg:flex-row)
  - RTL support via Tailwind's text-start class
- Added 12 comprehensive tests for about section covering both locales

### Completion Notes
- All acceptance criteria met
- All 23 HomePageTest tests pass (including 12 new about section tests)
- All 61 public page tests pass
- Code formatted with Pint
- RTL layout automatically handled by Tailwind's flex-row and text-start utilities
