273 lines
8.2 KiB
Markdown
273 lines
8.2 KiB
Markdown
# 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
|
|
|
|
- [x] Create values section HTML structure
|
|
- [x] Add section heading with translations
|
|
- [x] Add optional subtitle with translations
|
|
- [x] Implement 6 value items with icons
|
|
- [x] Add all value titles with translations (EN + AR)
|
|
- [x] Choose and implement visual style (minimal or badges)
|
|
- [x] Implement responsive grid layout
|
|
- [x] Verify icons display correctly
|
|
- [x] Test RTL layout
|
|
- [x] 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
|
|
|
|
---
|
|
|
|
## Dev Agent Record
|
|
|
|
### Status
|
|
Ready for Review
|
|
|
|
### Agent Model Used
|
|
Claude Opus 4.5 (claude-opus-4-5-20251101)
|
|
|
|
### File List
|
|
| File | Action |
|
|
|------|--------|
|
|
| `resources/views/pages/home.blade.php` | Modified - Added values section |
|
|
| `lang/en/home.php` | Modified - Added values translations |
|
|
| `lang/ar/home.php` | Modified - Added values translations |
|
|
| `tests/Feature/Public/HomePageTest.php` | Modified - Added 17 tests for values section |
|
|
|
|
### Change Log
|
|
- Implemented values section using Option C (Icon Badges) style with circular backgrounds
|
|
- Added subtle hover effect on icon badges (bg-cta/10 to bg-cta/20 transition)
|
|
- Added all 6 values with icons: shield-check, scale, academic-cap, heart, briefcase, light-bulb
|
|
- Added bilingual translations (EN/AR) for title, subtitle, and all 6 value names
|
|
- Implemented responsive grid: 2 cols mobile, 3 cols tablet, 6 cols desktop
|
|
- Added 17 new tests covering section ID, titles, subtitles, and all values in both languages
|
|
|
|
### Completion Notes
|
|
- All acceptance criteria met (AC1-AC7)
|
|
- Chose Option C (Icon Badges) per recommendation for elegance
|
|
- RTL support automatic via existing layout infrastructure
|
|
- All 52 HomePageTest tests passing (17 new + 35 existing)
|