7.1 KiB

Raw Blame History

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:

Goal 1:
- EN: "Supporting Palestinian legal professionals and developing their professional and research capabilities."
- AR: "دعم المهنيين القانونيين الفلسطينيين وتطوير قدراتهم المهنية والبحثية."
Goal 2:
- EN: "Documenting and analyzing community cases to produce legal knowledge grounded in reality."
- AR: "توثيق وتحليل القضايا المجتمعية لإنتاج معرفة قانونية متجذرة في الواقع."
Goal 3:
- EN: "Preparing and writing research papers that address contemporary legal issues in depth and systematically."
- AR: "إعداد وكتابة أوراق بحثية تعالج القضايا القانونية المعاصرة بعمق ومنهجية."
Goal 4:
- EN: "Launching legal awareness programs that raise community awareness of rights and obligations."
- AR: "إطلاق برامج توعية قانونية ترفع وعي المجتمع بحقوقه وواجباته."
Goal 5:
- EN: "Strengthening the connection between society and its legal history through knowledge-based and cultural initiatives."
- AR: "تعزيز الصلة بين المجتمع وتاريخه القانوني من خلال المبادرات المعرفية والثقافية."
Goal 6:
- EN: "Developing innovative legal solutions based on field research that reflects the Palestinian social context."
- AR: "تطوير حلول قانونية مبتكرة قائمة على البحث الميداني الذي يعكس السياق الاجتماعي الفلسطيني."
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

{{-- 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

// 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)

7.1 KiB Raw Blame History