complete story 16.4

docs/stories/story-16.4-goals-section.md

@@ -158,16 +158,27 @@
 
 ## Dev Checklist
 
-- [ ] Add goals section to about.blade.php
+- [x] Add goals section to about.blade.php
-- [ ] Style section header with gold underline
+- [x] Style section header with gold underline
-- [ ] Create white card container
+- [x] Create white card container
-- [ ] Implement 2-column grid layout
+- [x] Implement 2-column grid layout
-- [ ] Style numbered circles (gold background, white text)
+- [x] Style numbered circles (gold background, white text)
-- [ ] Display all 7 goals with proper spacing
+- [x] Display all 7 goals with proper spacing
-- [ ] Add English translations (array format)
+- [x] Add English translations (array format)
-- [ ] Add Arabic translations (array format)
+- [x] Add Arabic translations (array format)
-- [ ] Test RTL layout (numbers on right)
+- [x] Test RTL layout (numbers on right)
-- [ ] Test responsive breakpoints
+- [x] Test responsive breakpoints
+
+## File List
+
+- `resources/views/livewire/pages/about.blade.php` - Added goals section
+- `lang/en/about.php` - Added goals_title and goals array translations
+- `lang/ar/about.php` - Added goals_title and goals array translations
+- `tests/Feature/Public/AboutPageTest.php` - Added 21 tests for Story 16.4
+
+## Status
+
+Ready for Review
 
 ## Estimation
 

lang/ar/about.php

@@ -27,4 +27,16 @@ return [
     'value_women' => 'تمكين المرأة',
     'value_professionalism' => 'الاحترافية',
     'value_innovation' => 'الابتكار الاجتماعي',
+
+    // Goals Section
+    'goals_title' => 'أهدافنا',
+    'goals' => [
+        'دعم المهنيين القانونيين الفلسطينيين وتطوير قدراتهم المهنية والبحثية.',
+        'توثيق وتحليل القضايا المجتمعية لإنتاج معرفة قانونية متجذرة في الواقع.',
+        'إعداد وكتابة أوراق بحثية تعالج القضايا القانونية المعاصرة بعمق ومنهجية.',
+        'إطلاق برامج توعية قانونية ترفع وعي المجتمع بحقوقه وواجباته.',
+        'تعزيز الصلة بين المجتمع وتاريخه القانوني من خلال المبادرات المعرفية والثقافية.',
+        'تطوير حلول قانونية مبتكرة قائمة على البحث الميداني الذي يعكس السياق الاجتماعي الفلسطيني.',
+        'تعزيز العدالة وتمكين المرأة من خلال خدمات قانونية متخصصة وميسّرة.',
+    ],
 ];

lang/en/about.php

@@ -27,4 +27,16 @@ return [
     'value_women' => 'Women\'s Empowerment',
     'value_professionalism' => 'Professionalism',
     'value_innovation' => 'Social Innovation',
+
+    // Goals Section
+    '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.',
+    ],
 ];

resources/views/livewire/pages/about.blade.php

@@ -170,7 +170,28 @@ new #[Layout('components.layouts.public')] class extends Component
         </div>
     </section>
 
-    {{-- Goals Section - Story 16.4 --}}
+    {{-- Goals Section --}}
+    <section class="bg-background py-8 sm:py-12 lg:py-[60px]">
+        <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-6 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>
 
     {{-- Services Section - Story 16.5 --}}
 

tests/Feature/Public/AboutPageTest.php

@@ -385,3 +385,157 @@ test('about page value cards use responsive grid', function () {
         ->assertOk()
         ->assertSee('grid-cols-2 md:grid-cols-3 lg:grid-cols-6', false);
 });
+
+// Story 16.4: Goals Section Tests
+
+// AC1: Goals Section Container
+test('about page has goals section with cream background', function () {
+    $this->get('/about')
+        ->assertOk()
+        ->assertSee('bg-background py-8 sm:py-12 lg:py-[60px]', false);
+});
+
+// AC2: Goals Section Header
+test('about page displays goals title in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Our Goals');
+});
+
+test('about page displays goals title in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('أهدافنا');
+});
+
+// AC3: Seven Goals Display - English
+test('about page displays goal 1 in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Supporting Palestinian legal professionals and developing their professional and research capabilities.');
+});
+
+test('about page displays goal 2 in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Documenting and analyzing community cases to produce legal knowledge grounded in reality.');
+});
+
+test('about page displays goal 3 in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Preparing and writing research papers that address contemporary legal issues in depth and systematically.');
+});
+
+test('about page displays goal 4 in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Launching legal awareness programs that raise community awareness of rights and obligations.');
+});
+
+test('about page displays goal 5 in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Strengthening the connection between society and its legal history through knowledge-based and cultural initiatives.');
+});
+
+test('about page displays goal 6 in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Developing innovative legal solutions based on field research that reflects the Palestinian social context.');
+});
+
+test('about page displays goal 7 in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Promoting justice and empowering women through specialized and accessible legal services.');
+});
+
+// AC3: Seven Goals Display - Arabic
+test('about page displays goal 1 in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('دعم المهنيين القانونيين الفلسطينيين وتطوير قدراتهم المهنية والبحثية.');
+});
+
+test('about page displays goal 2 in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('توثيق وتحليل القضايا المجتمعية لإنتاج معرفة قانونية متجذرة في الواقع.');
+});
+
+test('about page displays goal 3 in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('إعداد وكتابة أوراق بحثية تعالج القضايا القانونية المعاصرة بعمق ومنهجية.');
+});
+
+test('about page displays goal 4 in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('إطلاق برامج توعية قانونية ترفع وعي المجتمع بحقوقه وواجباته.');
+});
+
+test('about page displays goal 5 in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('تعزيز الصلة بين المجتمع وتاريخه القانوني من خلال المبادرات المعرفية والثقافية.');
+});
+
+test('about page displays goal 6 in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('تطوير حلول قانونية مبتكرة قائمة على البحث الميداني الذي يعكس السياق الاجتماعي الفلسطيني.');
+});
+
+test('about page displays goal 7 in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('تعزيز العدالة وتمكين المرأة من خلال خدمات قانونية متخصصة وميسّرة.');
+});
+
+// AC4: Goals Card Container Styling
+test('about page goals section has white card container', function () {
+    $this->get('/about')
+        ->assertOk()
+        ->assertSee('bg-white rounded-lg shadow-sm p-6 sm:p-8 max-w-5xl mx-auto', false);
+});
+
+// AC5: Numbered Circle Style
+test('about page goals have numbered circles with gold background', function () {
+    $this->get('/about')
+        ->assertOk()
+        ->assertSee('w-8 h-8 bg-accent text-white rounded-full', false);
+});
+
+// AC6: Responsive Grid Layout
+test('about page goals use responsive grid layout', function () {
+    $this->get('/about')
+        ->assertOk()
+        ->assertSee('grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6', false);
+});
+
+// AC7: All 7 goal numbers are displayed
+test('about page displays all 7 goal numbers', function () {
+    $response = $this->withSession(['locale' => 'en'])->get('/about');
+    $response->assertOk();
+
+    // Verify there are 7 goals by checking the translation array count
+    expect(count(__('about.goals')))->toBe(7);
+});