# Story 14.4: Values Section

## Story

**As a** website visitor
**I want to** understand Libra's core values
**So that** I can assess if their principles align with my expectations

## Acceptance Criteria

### AC1: Section Container

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

### AC2: Section Heading

**Given** the values section
**When** displayed
**Then** show a section heading:
- English: "Our Values"
- Arabic: "قيمنا"
- Optional subheading about values starting in the field and returning to the people
- Typography: H2, SemiBold, Forest Green (`#2D322A`)
- Centered alignment

### AC3: Six Value Items

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

| # | English | Arabic | Icon Suggestion |
|---|---------|--------|-----------------|
| 1 | Integrity | النزاهة | shield-check |
| 2 | Justice | العدالة | scale |
| 3 | Knowledge | المعرفة | academic-cap |
| 4 | Women's Empowerment | تمكين المرأة | user-group / heart |
| 5 | Professionalism | الاحترافية | briefcase |
| 6 | Social Innovation | الابتكار الاجتماعي | light-bulb |

### AC4: Value Item Design

**Given** each value item
**When** displayed
**Then** include:
- Icon: Warm Gold (`#A68966`) color, 40-48px size
- Value name: Bold, Forest Green (`#2D322A`)
- Clean, minimal design (no heavy descriptions)
- Centered alignment within item
- Optional: subtle hover effect

### AC5: Grid Layout

**Given** different screen sizes
**When** viewing the values section:
- **Desktop (≥992px):** 6 columns (1 row) or 3 columns (2 rows)
- **Tablet (576-991px):** 3 columns (2 rows)
- **Mobile (<576px):** 2 columns (3 rows)

### AC6: Visual Style Options

**Given** the values display
**When** implemented
**Then** choose one of these styles:
- **Option A:** Simple icon + text (minimal)
- **Option B:** Card-based with subtle background
- **Option C:** Icon badges with circular background

Recommendation: Option A (minimal) or Option C (icon badges) for elegance

### AC7: RTL Support

**Given** Arabic language is selected
**When** viewing the values section
**Then** items maintain proper alignment and text direction

## Technical Notes

### Files to Modify
- `resources/views/pages/home.blade.php` - Add values section
- `lang/en/home.php` - Add translations
- `lang/ar/home.php` - Add translations

### HTML Structure (Option A - Minimal)

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

        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-8">
            @foreach(['integrity', 'justice', 'knowledge', 'empowerment', 'professionalism', 'innovation'] as $value)
                <div class="text-center">
                    <div class="text-cta mb-3">
                        <flux:icon name="{{ __('home.values.' . $value . '.icon') }}" class="w-10 h-10 mx-auto" />
                    </div>
                    <h3 class="text-sm lg:text-base font-semibold text-text">
                        {{ __('home.values.' . $value . '.title') }}
                    </h3>
                </div>
            @endforeach
        </div>
    </div>
</section>
```

### HTML Structure (Option C - Icon Badges)

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

        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-6">
            @foreach(['integrity', 'justice', 'knowledge', 'empowerment', 'professionalism', 'innovation'] as $value)
                <div class="text-center">
                    <div class="w-16 h-16 lg:w-20 lg:h-20 rounded-full bg-cta/10 flex items-center justify-center mx-auto mb-3">
                        <flux:icon name="{{ __('home.values.' . $value . '.icon') }}" class="w-8 h-8 lg:w-10 lg:h-10 text-cta" />
                    </div>
                    <h3 class="text-sm lg:text-base font-semibold text-text">
                        {{ __('home.values.' . $value . '.title') }}
                    </h3>
                </div>
            @endforeach
        </div>
    </div>
</section>
```

### Translation Keys

```php
// lang/en/home.php (additions)
'values_title' => 'Our Values',
'values_subtitle' => 'These start in the field and return to the people',
'values' => [
    'integrity' => [
        'icon' => 'shield-check',
        'title' => 'Integrity',
    ],
    'justice' => [
        'icon' => 'scale',
        'title' => 'Justice',
    ],
    'knowledge' => [
        'icon' => 'academic-cap',
        'title' => 'Knowledge',
    ],
    'empowerment' => [
        'icon' => 'heart',
        'title' => "Women's Empowerment",
    ],
    'professionalism' => [
        'icon' => 'briefcase',
        'title' => 'Professionalism',
    ],
    'innovation' => [
        'icon' => 'light-bulb',
        'title' => 'Social Innovation',
    ],
],

// lang/ar/home.php (additions)
'values_title' => 'قيمنا',
'values_subtitle' => 'تبدأ من الميدان وتعود إلى الناس',
'values' => [
    'integrity' => [
        'icon' => 'shield-check',
        'title' => 'النزاهة',
    ],
    'justice' => [
        'icon' => 'scale',
        'title' => 'العدالة',
    ],
    'knowledge' => [
        'icon' => 'academic-cap',
        'title' => 'المعرفة',
    ],
    'empowerment' => [
        'icon' => 'heart',
        'title' => 'تمكين المرأة',
    ],
    'professionalism' => [
        'icon' => 'briefcase',
        'title' => 'الاحترافية',
    ],
    'innovation' => [
        'icon' => 'light-bulb',
        'title' => 'الابتكار الاجتماعي',
    ],
],
```

### Icon Options (Heroicons)

- `shield-check` - Integrity
- `scale` - Justice
- `academic-cap` - Knowledge
- `heart` - Women's Empowerment
- `briefcase` - Professionalism
- `light-bulb` - Social Innovation

## Dev Checklist

- [ ] Create values section HTML structure
- [ ] Add section heading with translations
- [ ] Add optional subtitle with translations
- [ ] Implement 6 value items with icons
- [ ] Add all value titles with translations (EN + AR)
- [ ] Choose and implement visual style (minimal or badges)
- [ ] Implement responsive grid layout
- [ ] Verify icons display correctly
- [ ] Test RTL layout
- [ ] Ensure even spacing and alignment

## Estimation

**Complexity:** Low
**Risk:** Low - Simple grid of icons and text

## Dependencies

- Previous stories for page structure
- Flux UI icons available