# Story 16.3: Values Section

## Story

**As a** website visitor
**I want to** see Libra's core values
**So that** I understand the principles that guide their work

## Acceptance Criteria

### AC1: Values Section Container

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

### AC2: Values Section Header

**Given** the values section
**When** displayed
**Then** show section header:
- English: "Our Values"
- Arabic: "قيمنا"
- Typography: H2, Bold, Forest Green (`#2D322A`)
- Warm Gold underline accent
- Centered

### AC3: Values Introduction

**Given** the values section below the header
**When** displayed
**Then** show introductory text:
- English: "These values start in the field and return to the people."
- Arabic: "هذه القيم تبدأ من الميدان وتعود إلى الناس."
- Typography: Body text, Regular, Forest Green with opacity
- Centered, max-width 600px

### AC4: Six Value Cards

**Given** the values section
**When** displayed
**Then** show 6 value cards:

1. **Integrity**
   - Icon: Shield/Check icon
   - EN: "Integrity"
   - AR: "النزاهة"

2. **Justice**
   - Icon: Scale icon
   - EN: "Justice"
   - AR: "العدالة"

3. **Knowledge**
   - Icon: Book/Academic icon
   - EN: "Knowledge"
   - AR: "المعرفة"

4. **Women's Empowerment**
   - Icon: Heart/Users icon
   - EN: "Women's Empowerment"
   - AR: "تمكين المرأة"

5. **Professionalism**
   - Icon: Briefcase icon
   - EN: "Professionalism"
   - AR: "الاحترافية"

6. **Social Innovation**
   - Icon: Lightbulb icon
   - EN: "Social Innovation"
   - AR: "الابتكار الاجتماعي"

### AC5: Value Card Styling

**Given** each value card
**When** displayed
**Then** style with:
- Warm Cream (`#F4F1EA`) background
- Rounded corners (12px)
- Icon: Warm Gold (`#A68966`), 40px size, centered
- Value name: H4, Semi-bold, Forest Green, centered
- Padding: 24px vertical, 16px horizontal
- Subtle hover effect (slight lift/shadow)

### AC6: Responsive Grid

**Given** different screen sizes
**When** viewing value cards:
- **Desktop (≥992px):** 6 columns (1 row of 6) or 3 columns (2 rows of 3)
- **Tablet (768-991px):** 3 columns (2 rows)
- **Mobile (<768px):** 2 columns (3 rows)

### AC7: RTL Support

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

## Technical Notes

### HTML Structure

```blade
{{-- Values Section --}}
<section class="bg-white 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.values_title') }}
        </h2>
        <div class="w-20 h-1 bg-accent mx-auto mb-4"></div>
        <p class="text-center text-text/70 max-w-xl mx-auto mb-12">
            {{ __('about.values_intro') }}
        </p>

        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 lg:gap-6">
            {{-- Integrity --}}
            <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                <div class="text-accent mb-3">
                    <flux:icon name="shield-check" class="w-10 h-10 mx-auto" />
                </div>
                <h4 class="font-semibold text-text">
                    {{ __('about.value_integrity') }}
                </h4>
            </div>

            {{-- Justice --}}
            <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                <div class="text-accent mb-3">
                    <flux:icon name="scale" class="w-10 h-10 mx-auto" />
                </div>
                <h4 class="font-semibold text-text">
                    {{ __('about.value_justice') }}
                </h4>
            </div>

            {{-- Knowledge --}}
            <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                <div class="text-accent mb-3">
                    <flux:icon name="academic-cap" class="w-10 h-10 mx-auto" />
                </div>
                <h4 class="font-semibold text-text">
                    {{ __('about.value_knowledge') }}
                </h4>
            </div>

            {{-- Women's Empowerment --}}
            <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                <div class="text-accent mb-3">
                    <flux:icon name="heart" class="w-10 h-10 mx-auto" />
                </div>
                <h4 class="font-semibold text-text">
                    {{ __('about.value_women') }}
                </h4>
            </div>

            {{-- Professionalism --}}
            <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                <div class="text-accent mb-3">
                    <flux:icon name="briefcase" class="w-10 h-10 mx-auto" />
                </div>
                <h4 class="font-semibold text-text">
                    {{ __('about.value_professionalism') }}
                </h4>
            </div>

            {{-- Social Innovation --}}
            <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                <div class="text-accent mb-3">
                    <flux:icon name="light-bulb" class="w-10 h-10 mx-auto" />
                </div>
                <h4 class="font-semibold text-text">
                    {{ __('about.value_innovation') }}
                </h4>
            </div>
        </div>
    </div>
</section>
```

### Translation Keys to Add

```php
// lang/en/about.php - add these keys
'values_title' => 'Our Values',
'values_intro' => 'These values start in the field and return to the people.',
'value_integrity' => 'Integrity',
'value_justice' => 'Justice',
'value_knowledge' => 'Knowledge',
'value_women' => 'Women\'s Empowerment',
'value_professionalism' => 'Professionalism',
'value_innovation' => 'Social Innovation',

// lang/ar/about.php - add these keys
'values_title' => 'قيمنا',
'values_intro' => 'هذه القيم تبدأ من الميدان وتعود إلى الناس.',
'value_integrity' => 'النزاهة',
'value_justice' => 'العدالة',
'value_knowledge' => 'المعرفة',
'value_women' => 'تمكين المرأة',
'value_professionalism' => 'الاحترافية',
'value_innovation' => 'الابتكار الاجتماعي',
```

## Dev Checklist

- [x] Add values section to about.blade.php
- [x] Style section header with gold underline
- [x] Add intro text
- [x] Create 6 value cards with icons
- [x] Implement responsive grid (6 → 3 → 2 columns)
- [x] Add hover effects to cards
- [x] Add all English translations
- [x] Add all Arabic translations
- [x] Test RTL layout
- [x] Test responsive breakpoints

## Estimation

**Complexity:** Low
**Risk:** Low - Standard card grid

## Dependencies

- Story 16.2 completed (mission section exists above)
- Flux icons available

---

## Dev Agent Record

### Status
Ready for Review

### Agent Model Used
claude-opus-4-5-20251101

### Completion Notes
- Added values section with 6 value cards following the exact HTML structure from technical notes
- Implemented responsive grid: 2 cols mobile, 3 cols tablet, 6 cols desktop
- Added all English and Arabic translations for values section
- Used Flux icons: shield-check, scale, academic-cap, heart, briefcase, light-bulb
- Added hover shadow effect on cards
- All 19 new tests pass (52 total AboutPageTest tests pass)
- RTL support works automatically with centered text and grid layout

### File List
- `resources/views/livewire/pages/about.blade.php` (modified)
- `lang/en/about.php` (modified)
- `lang/ar/about.php` (modified)
- `tests/Feature/Public/AboutPageTest.php` (modified)

### Change Log
- 2026-01-11: Implemented Story 16.3 values section with all acceptance criteria met