# Story 16.6: Scholarship Aspiration Section

## Story

**As a** website visitor
**I want to** learn about Libra's scholarship aspiration
**So that** I understand their vision for supporting Palestinian arts and law students

## Acceptance Criteria

### AC1: Scholarship Section Container

**Given** the About Us page below the services section
**When** displayed
**Then** show a scholarship section with:
- Dark Forest Green (`#2D3624`) background
- Full-width container
- Adequate vertical padding (60px desktop, 48px tablet, 32px mobile)

### AC2: Scholarship Section Header

**Given** the scholarship section
**When** displayed
**Then** show section header:
- English: "Our Aspiration: Libra Scholarship"
- Arabic: "طموحنا: منحة ليبرا"
- Typography: H2, Bold, White
- Warm Gold underline accent
- Centered

### AC3: Scholarship Description

**Given** the scholarship section
**When** displayed
**Then** show the scholarship description with two paragraphs:

**Paragraph 1:**
- English: "Art is the ambassador of Historical Palestine and the Palestinian people. Through the Libra Scholarship for Law and Palestinian Arts, Libra seeks to empower students to present Palestinian messages around the world."
- Arabic: "الفن هو سفير فلسطين التاريخية والشعب الفلسطيني. من خلال منحة ليبرا للقانون والفنون الفلسطينية، تسعى ليبرا لتمكين الطلاب من تقديم رسائل فلسطينية حول العالم."

**Paragraph 2:**
- English: "We aim to open ongoing discussions about the Palestinian situation and reality, protect intellectual property rights, and enable participation in international exhibitions, starting with local cultural platforms."
- Arabic: "نهدف إلى فتح نقاشات مستمرة حول الوضع والواقع الفلسطيني، وحماية حقوق الملكية الفكرية، وتمكين المشاركة في المعارض الدولية، بدءاً من المنصات الثقافية المحلية."

- Typography: Body text, White with opacity
- Max-width: 900px centered

### AC4: Key Aspirations List

**Given** the scholarship section below the description
**When** displayed
**Then** show 4 key aspirations as highlight items:

1. **Empowering Students**
   - EN: "Empowering students to present Palestinian messages globally"
   - AR: "تمكين الطلاب من تقديم الرسائل الفلسطينية عالمياً"

2. **Opening Discussions**
   - EN: "Opening ongoing discussions about Palestinian reality"
   - AR: "فتح نقاشات مستمرة حول الواقع الفلسطيني"

3. **Protecting Rights**
   - EN: "Protecting intellectual property rights"
   - AR: "حماية حقوق الملكية الفكرية"

4. **Enabling Participation**
   - EN: "Enabling participation in local and international exhibitions"
   - AR: "تمكين المشاركة في المعارض المحلية والدولية"

### AC5: Aspiration Item Styling

**Given** each aspiration item
**When** displayed
**Then** style with:
- Warm Gold (`#A68966`) check/star icon
- White text
- Horizontal layout on desktop, vertical on mobile
- Subtle separator between items

### AC6: Visual Accent

**Given** the scholarship section
**When** displayed
**Then** include:
- Decorative wheat/botanical icon (subtle, Warm Gold, semi-transparent)
- OR simple gold border/frame accent
- Elegant, aspirational feel

### AC7: Responsive Layout

**Given** different screen sizes
**When** viewing the scholarship section:
- **Desktop (≥992px):** 4 aspirations in 1 row, centered text above
- **Tablet (768-991px):** 2x2 grid of aspirations
- **Mobile (<768px):** Stacked aspirations, compact text

### AC8: RTL Support

**Given** Arabic language is selected
**When** viewing the scholarship section
**Then** all text and items align correctly for RTL

## Technical Notes

### HTML Structure

```blade
{{-- Scholarship Aspiration Section --}}
<section class="bg-[#2D3624] py-12 lg:py-16">
    <div class="container mx-auto px-4">
        <h2 class="text-2xl lg:text-3xl font-bold text-white text-center mb-2">
            {{ __('about.scholarship_title') }}
        </h2>
        <div class="w-20 h-1 bg-accent mx-auto mb-8"></div>

        <div class="max-w-4xl mx-auto text-center mb-12">
            <p class="text-white/90 text-lg mb-4">
                {{ __('about.scholarship_text_1') }}
            </p>
            <p class="text-white/80">
                {{ __('about.scholarship_text_2') }}
            </p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
            @foreach(__('about.scholarship_aspirations') as $aspiration)
                <div class="flex items-center gap-3 text-white/90">
                    <flux:icon name="check-circle" class="w-6 h-6 text-accent flex-shrink-0" />
                    <span>{{ $aspiration }}</span>
                </div>
            @endforeach
        </div>
    </div>
</section>
```

### Translation Keys to Add

```php
// lang/en/about.php - add these keys
'scholarship_title' => 'Our Aspiration: Libra Scholarship',
'scholarship_text_1' => 'Art is the ambassador of Historical Palestine and the Palestinian people. Through the Libra Scholarship for Law and Palestinian Arts, Libra seeks to empower students to present Palestinian messages around the world.',
'scholarship_text_2' => 'We aim to open ongoing discussions about the Palestinian situation and reality, protect intellectual property rights, and enable participation in international exhibitions, starting with local cultural platforms.',
'scholarship_aspirations' => [
    'Empowering students to present Palestinian messages globally',
    'Opening ongoing discussions about Palestinian reality',
    'Protecting intellectual property rights',
    'Enabling participation in local and international exhibitions',
],

// lang/ar/about.php - add these keys
'scholarship_title' => 'طموحنا: منحة ليبرا',
'scholarship_text_1' => 'الفن هو سفير فلسطين التاريخية والشعب الفلسطيني. من خلال منحة ليبرا للقانون والفنون الفلسطينية، تسعى ليبرا لتمكين الطلاب من تقديم رسائل فلسطينية حول العالم.',
'scholarship_text_2' => 'نهدف إلى فتح نقاشات مستمرة حول الوضع والواقع الفلسطيني، وحماية حقوق الملكية الفكرية، وتمكين المشاركة في المعارض الدولية، بدءاً من المنصات الثقافية المحلية.',
'scholarship_aspirations' => [
    'تمكين الطلاب من تقديم الرسائل الفلسطينية عالمياً',
    'فتح نقاشات مستمرة حول الواقع الفلسطيني',
    'حماية حقوق الملكية الفكرية',
    'تمكين المشاركة في المعارض المحلية والدولية',
],
```

## Dev Checklist

- [x] Add scholarship section to about.blade.php
- [x] Style section with dark green background
- [x] Style header with gold underline
- [x] Add two-paragraph description
- [x] Create 4 aspiration items with icons
- [x] Implement responsive grid (4 → 2 → 1 columns)
- [x] Add English translations
- [x] Add Arabic translations
- [x] Test RTL layout
- [x] Test responsive breakpoints
- [x] Ensure visual contrast is accessible (WCAG)

## Estimation

**Complexity:** Low
**Risk:** Low - Final content section

## Dependencies

- Story 16.5 completed (services section exists above)
- Flux icons available

---

## Dev Agent Record

### Status
Ready for Review

### Agent Model Used
Claude Opus 4.5

### File List
| File | Action |
|------|--------|
| `resources/views/livewire/pages/about.blade.php` | Modified - Added scholarship aspiration section |
| `lang/en/about.php` | Modified - Added scholarship translation keys |
| `lang/ar/about.php` | Modified - Added scholarship translation keys |
| `tests/Feature/Public/AboutPageTest.php` | Modified - Added 18 tests for scholarship section |

### Debug Log References
None - implementation completed without issues.

### Completion Notes
- Implemented scholarship section with Dark Forest Green (#2D3624) background per AC1
- Added decorative gold border frame accent (border-accent/20) for elegant visual appeal per AC6
- Responsive padding: 60px desktop (lg:py-[60px]), 48px tablet (sm:py-12), 32px mobile (py-8)
- Responsive grid: 4 columns on desktop, 2x2 on tablet, single column on mobile per AC7
- Added subtle separators between aspiration items using border-s classes
- RTL support works automatically via Tailwind's logical properties (border-s, ps-6)
- All 18 new tests pass covering both English and Arabic content
- All 225 Public tests pass, no regressions
- Pint linting passes

### Change Log
| Date | Change |
|------|--------|
| 2026-01-11 | Initial implementation of scholarship aspiration section |