180 lines
7.1 KiB
Markdown
180 lines
7.1 KiB
Markdown
# 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)
|