added epic 16 and stories to creat the about us page
This commit is contained in:
Naser Mansour
@@ -0,0 +1,229 @@
|
||||
# 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
|
||||
|
||||
- [ ] Add values section to about.blade.php
|
||||
- [ ] Style section header with gold underline
|
||||
- [ ] Add intro text
|
||||
- [ ] Create 6 value cards with icons
|
||||
- [ ] Implement responsive grid (6 → 3 → 2 columns)
|
||||
- [ ] Add hover effects to cards
|
||||
- [ ] Add all English translations
|
||||
- [ ] Add all Arabic translations
|
||||
- [ ] Test RTL layout
|
||||
- [ ] Test responsive breakpoints
|
||||
|
||||
## Estimation
|
||||
|
||||
**Complexity:** Low
|
||||
**Risk:** Low - Standard card grid
|
||||
|
||||
## Dependencies
|
||||
|
||||
- Story 16.2 completed (mission section exists above)
|
||||
- Flux icons available
|
||||
Reference in New Issue
Block a user