258 lines
7.9 KiB
Markdown
258 lines
7.9 KiB
Markdown
# 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
|