added epic 16 and stories to creat the about us page
This commit is contained in:
Naser Mansour
@@ -0,0 +1,179 @@
|
||||
# Story 16.4: Goals Section
|
||||
|
||||
## Story
|
||||
|
||||
**As a** website visitor
|
||||
**I want to** see Libra's organizational goals
|
||||
**So that** I understand what they are working to achieve
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
### AC1: Goals Section Container
|
||||
|
||||
**Given** the About Us page below the values section
|
||||
**When** displayed
|
||||
**Then** show a goals section with:
|
||||
- Warm Cream (`#F4F1EA`) background
|
||||
- Full-width container
|
||||
- Adequate vertical padding (60px desktop, 48px tablet, 32px mobile)
|
||||
|
||||
### AC2: Goals Section Header
|
||||
|
||||
**Given** the goals section
|
||||
**When** displayed
|
||||
**Then** show section header:
|
||||
- English: "Our Goals"
|
||||
- Arabic: "أهدافنا"
|
||||
- Typography: H2, Bold, Forest Green (`#2D322A`)
|
||||
- Warm Gold underline accent
|
||||
- Centered
|
||||
|
||||
### AC3: Seven Goals Display
|
||||
|
||||
**Given** the goals section
|
||||
**When** displayed
|
||||
**Then** show all 7 goals:
|
||||
|
||||
1. **Goal 1:**
|
||||
- EN: "Supporting Palestinian legal professionals and developing their professional and research capabilities."
|
||||
- AR: "دعم المهنيين القانونيين الفلسطينيين وتطوير قدراتهم المهنية والبحثية."
|
||||
|
||||
2. **Goal 2:**
|
||||
- EN: "Documenting and analyzing community cases to produce legal knowledge grounded in reality."
|
||||
- AR: "توثيق وتحليل القضايا المجتمعية لإنتاج معرفة قانونية متجذرة في الواقع."
|
||||
|
||||
3. **Goal 3:**
|
||||
- EN: "Preparing and writing research papers that address contemporary legal issues in depth and systematically."
|
||||
- AR: "إعداد وكتابة أوراق بحثية تعالج القضايا القانونية المعاصرة بعمق ومنهجية."
|
||||
|
||||
4. **Goal 4:**
|
||||
- EN: "Launching legal awareness programs that raise community awareness of rights and obligations."
|
||||
- AR: "إطلاق برامج توعية قانونية ترفع وعي المجتمع بحقوقه وواجباته."
|
||||
|
||||
5. **Goal 5:**
|
||||
- EN: "Strengthening the connection between society and its legal history through knowledge-based and cultural initiatives."
|
||||
- AR: "تعزيز الصلة بين المجتمع وتاريخه القانوني من خلال المبادرات المعرفية والثقافية."
|
||||
|
||||
6. **Goal 6:**
|
||||
- EN: "Developing innovative legal solutions based on field research that reflects the Palestinian social context."
|
||||
- AR: "تطوير حلول قانونية مبتكرة قائمة على البحث الميداني الذي يعكس السياق الاجتماعي الفلسطيني."
|
||||
|
||||
7. **Goal 7:**
|
||||
- EN: "Promoting justice and empowering women through specialized and accessible legal services."
|
||||
- AR: "تعزيز العدالة وتمكين المرأة من خلال خدمات قانونية متخصصة وميسّرة."
|
||||
|
||||
### AC4: Goals List Styling
|
||||
|
||||
**Given** the goals list
|
||||
**When** displayed
|
||||
**Then** style as:
|
||||
- Two-column layout on desktop (left: goals 1-4, right: goals 5-7)
|
||||
- Single column on mobile
|
||||
- Each goal has a numbered circle (Warm Gold background, white number)
|
||||
- Goal text: Body text, Forest Green
|
||||
- Adequate spacing between items (16px)
|
||||
- White card container with padding
|
||||
|
||||
### AC5: Numbered Circle Style
|
||||
|
||||
**Given** each goal number
|
||||
**When** displayed
|
||||
**Then** style the number with:
|
||||
- Circle shape (32px diameter)
|
||||
- Warm Gold (`#A68966`) background
|
||||
- White text
|
||||
- Bold font
|
||||
- Inline with goal text
|
||||
|
||||
### AC6: Responsive Layout
|
||||
|
||||
**Given** different screen sizes
|
||||
**When** viewing goals:
|
||||
- **Desktop (≥992px):** 2 columns side by side
|
||||
- **Tablet (768-991px):** 2 columns
|
||||
- **Mobile (<768px):** 1 column stacked
|
||||
|
||||
### AC7: RTL Support
|
||||
|
||||
**Given** Arabic language is selected
|
||||
**When** viewing the goals section
|
||||
**Then** numbers align on the right, text flows RTL
|
||||
|
||||
## Technical Notes
|
||||
|
||||
### HTML Structure
|
||||
|
||||
```blade
|
||||
{{-- Goals Section --}}
|
||||
<section class="bg-background 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.goals_title') }}
|
||||
</h2>
|
||||
<div class="w-20 h-1 bg-accent mx-auto mb-12"></div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-sm p-8 max-w-5xl mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6">
|
||||
@foreach(__('about.goals') as $index => $goal)
|
||||
<div class="flex items-start gap-4">
|
||||
<span class="flex-shrink-0 w-8 h-8 bg-accent text-white rounded-full flex items-center justify-center font-bold text-sm">
|
||||
{{ $index + 1 }}
|
||||
</span>
|
||||
<p class="text-text/90 pt-1">{{ $goal }}</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
### Translation Keys to Add
|
||||
|
||||
```php
|
||||
// lang/en/about.php - add these keys
|
||||
'goals_title' => 'Our Goals',
|
||||
'goals' => [
|
||||
'Supporting Palestinian legal professionals and developing their professional and research capabilities.',
|
||||
'Documenting and analyzing community cases to produce legal knowledge grounded in reality.',
|
||||
'Preparing and writing research papers that address contemporary legal issues in depth and systematically.',
|
||||
'Launching legal awareness programs that raise community awareness of rights and obligations.',
|
||||
'Strengthening the connection between society and its legal history through knowledge-based and cultural initiatives.',
|
||||
'Developing innovative legal solutions based on field research that reflects the Palestinian social context.',
|
||||
'Promoting justice and empowering women through specialized and accessible legal services.',
|
||||
],
|
||||
|
||||
// lang/ar/about.php - add these keys
|
||||
'goals_title' => 'أهدافنا',
|
||||
'goals' => [
|
||||
'دعم المهنيين القانونيين الفلسطينيين وتطوير قدراتهم المهنية والبحثية.',
|
||||
'توثيق وتحليل القضايا المجتمعية لإنتاج معرفة قانونية متجذرة في الواقع.',
|
||||
'إعداد وكتابة أوراق بحثية تعالج القضايا القانونية المعاصرة بعمق ومنهجية.',
|
||||
'إطلاق برامج توعية قانونية ترفع وعي المجتمع بحقوقه وواجباته.',
|
||||
'تعزيز الصلة بين المجتمع وتاريخه القانوني من خلال المبادرات المعرفية والثقافية.',
|
||||
'تطوير حلول قانونية مبتكرة قائمة على البحث الميداني الذي يعكس السياق الاجتماعي الفلسطيني.',
|
||||
'تعزيز العدالة وتمكين المرأة من خلال خدمات قانونية متخصصة وميسّرة.',
|
||||
],
|
||||
```
|
||||
|
||||
## Dev Checklist
|
||||
|
||||
- [ ] Add goals section to about.blade.php
|
||||
- [ ] Style section header with gold underline
|
||||
- [ ] Create white card container
|
||||
- [ ] Implement 2-column grid layout
|
||||
- [ ] Style numbered circles (gold background, white text)
|
||||
- [ ] Display all 7 goals with proper spacing
|
||||
- [ ] Add English translations (array format)
|
||||
- [ ] Add Arabic translations (array format)
|
||||
- [ ] Test RTL layout (numbers on right)
|
||||
- [ ] Test responsive breakpoints
|
||||
|
||||
## Estimation
|
||||
|
||||
**Complexity:** Low
|
||||
**Risk:** Low - Standard list display
|
||||
|
||||
## Dependencies
|
||||
|
||||
- Story 16.3 completed (values section exists above)
|
||||
Reference in New Issue
Block a user