# Story 16.4: Goals Section

## Story

**As a** website visitor
**I want to** see Libra's organizational goals
**So that** I understand what they are working to achieve

## Acceptance Criteria

### AC1: Goals Section Container

**Given** the About Us page below the values section
**When** displayed
**Then** show a goals section with:
- Warm Cream (`#F4F1EA`) background
- Full-width container
- Adequate vertical padding (60px desktop, 48px tablet, 32px mobile)

### AC2: Goals Section Header

**Given** the goals section
**When** displayed
**Then** show section header:
- English: "Our Goals"
- Arabic: "أهدافنا"
- Typography: H2, Bold, Forest Green (`#2D322A`)
- Warm Gold underline accent
- Centered

### AC3: Seven Goals Display

**Given** the goals section
**When** displayed
**Then** show all 7 goals:

1. **Goal 1:**
   - EN: "Supporting Palestinian legal professionals and developing their professional and research capabilities."
   - AR: "دعم المهنيين القانونيين الفلسطينيين وتطوير قدراتهم المهنية والبحثية."

2. **Goal 2:**
   - EN: "Documenting and analyzing community cases to produce legal knowledge grounded in reality."
   - AR: "توثيق وتحليل القضايا المجتمعية لإنتاج معرفة قانونية متجذرة في الواقع."

3. **Goal 3:**
   - EN: "Preparing and writing research papers that address contemporary legal issues in depth and systematically."
   - AR: "إعداد وكتابة أوراق بحثية تعالج القضايا القانونية المعاصرة بعمق ومنهجية."

4. **Goal 4:**
   - EN: "Launching legal awareness programs that raise community awareness of rights and obligations."
   - AR: "إطلاق برامج توعية قانونية ترفع وعي المجتمع بحقوقه وواجباته."

5. **Goal 5:**
   - EN: "Strengthening the connection between society and its legal history through knowledge-based and cultural initiatives."
   - AR: "تعزيز الصلة بين المجتمع وتاريخه القانوني من خلال المبادرات المعرفية والثقافية."

6. **Goal 6:**
   - EN: "Developing innovative legal solutions based on field research that reflects the Palestinian social context."
   - AR: "تطوير حلول قانونية مبتكرة قائمة على البحث الميداني الذي يعكس السياق الاجتماعي الفلسطيني."

7. **Goal 7:**
   - EN: "Promoting justice and empowering women through specialized and accessible legal services."
   - AR: "تعزيز العدالة وتمكين المرأة من خلال خدمات قانونية متخصصة وميسّرة."

### AC4: Goals List Styling

**Given** the goals list
**When** displayed
**Then** style as:
- Two-column layout on desktop (left: goals 1-4, right: goals 5-7)
- Single column on mobile
- Each goal has a numbered circle (Warm Gold background, white number)
- Goal text: Body text, Forest Green
- Adequate spacing between items (16px)
- White card container with padding

### AC5: Numbered Circle Style

**Given** each goal number
**When** displayed
**Then** style the number with:
- Circle shape (32px diameter)
- Warm Gold (`#A68966`) background
- White text
- Bold font
- Inline with goal text

### AC6: Responsive Layout

**Given** different screen sizes
**When** viewing goals:
- **Desktop (≥992px):** 2 columns side by side
- **Tablet (768-991px):** 2 columns
- **Mobile (<768px):** 1 column stacked

### AC7: RTL Support

**Given** Arabic language is selected
**When** viewing the goals section
**Then** numbers align on the right, text flows RTL

## Technical Notes

### HTML Structure

```blade
{{-- Goals Section --}}
<section class="bg-background py-12 lg:py-16">
    <div class="container mx-auto px-4">
        <h2 class="text-2xl lg:text-3xl font-bold text-text text-center mb-2">
            {{ __('about.goals_title') }}
        </h2>
        <div class="w-20 h-1 bg-accent mx-auto mb-12"></div>

        <div class="bg-white rounded-lg shadow-sm p-8 max-w-5xl mx-auto">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6">
                @foreach(__('about.goals') as $index => $goal)
                    <div class="flex items-start gap-4">
                        <span class="flex-shrink-0 w-8 h-8 bg-accent text-white rounded-full flex items-center justify-center font-bold text-sm">
                            {{ $index + 1 }}
                        </span>
                        <p class="text-text/90 pt-1">{{ $goal }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
```

### Translation Keys to Add

```php
// lang/en/about.php - add these keys
'goals_title' => 'Our Goals',
'goals' => [
    'Supporting Palestinian legal professionals and developing their professional and research capabilities.',
    'Documenting and analyzing community cases to produce legal knowledge grounded in reality.',
    'Preparing and writing research papers that address contemporary legal issues in depth and systematically.',
    'Launching legal awareness programs that raise community awareness of rights and obligations.',
    'Strengthening the connection between society and its legal history through knowledge-based and cultural initiatives.',
    'Developing innovative legal solutions based on field research that reflects the Palestinian social context.',
    'Promoting justice and empowering women through specialized and accessible legal services.',
],

// lang/ar/about.php - add these keys
'goals_title' => 'أهدافنا',
'goals' => [
    'دعم المهنيين القانونيين الفلسطينيين وتطوير قدراتهم المهنية والبحثية.',
    'توثيق وتحليل القضايا المجتمعية لإنتاج معرفة قانونية متجذرة في الواقع.',
    'إعداد وكتابة أوراق بحثية تعالج القضايا القانونية المعاصرة بعمق ومنهجية.',
    'إطلاق برامج توعية قانونية ترفع وعي المجتمع بحقوقه وواجباته.',
    'تعزيز الصلة بين المجتمع وتاريخه القانوني من خلال المبادرات المعرفية والثقافية.',
    'تطوير حلول قانونية مبتكرة قائمة على البحث الميداني الذي يعكس السياق الاجتماعي الفلسطيني.',
    'تعزيز العدالة وتمكين المرأة من خلال خدمات قانونية متخصصة وميسّرة.',
],
```

## Dev Checklist

- [x] Add goals section to about.blade.php
- [x] Style section header with gold underline
- [x] Create white card container
- [x] Implement 2-column grid layout
- [x] Style numbered circles (gold background, white text)
- [x] Display all 7 goals with proper spacing
- [x] Add English translations (array format)
- [x] Add Arabic translations (array format)
- [x] Test RTL layout (numbers on right)
- [x] Test responsive breakpoints

## File List

- `resources/views/livewire/pages/about.blade.php` - Added goals section
- `lang/en/about.php` - Added goals_title and goals array translations
- `lang/ar/about.php` - Added goals_title and goals array translations
- `tests/Feature/Public/AboutPageTest.php` - Added 21 tests for Story 16.4

## Status

Ready for Review

## Estimation

**Complexity:** Low
**Risk:** Low - Standard list display

## Dependencies

- Story 16.3 completed (values section exists above)
