complete story 16.5

docs/stories/story-16.5-legal-services-section.md

@@ -301,17 +301,17 @@
 
 ## Dev Checklist
 
-- [ ] Add services section to about.blade.php
+- [x] Add services section to about.blade.php
-- [ ] Style section header with gold underline
+- [x] Style section header with gold underline
-- [ ] Add intro text
+- [x] Add intro text
-- [ ] Create 4 service category cards with icons
+- [x] Create 4 service category cards with icons
-- [ ] Add bullet list items to each card
+- [x] Add bullet list items to each card
-- [ ] Implement responsive grid (4 → 2 → 1 columns)
+- [x] Implement responsive grid (4 → 2 → 1 columns)
-- [ ] Add CTA button linking to /booking
+- [x] Add CTA button linking to /booking
-- [ ] Add all English translations (arrays)
+- [x] Add all English translations (arrays)
-- [ ] Add all Arabic translations (arrays)
+- [x] Add all Arabic translations (arrays)
-- [ ] Test RTL layout
+- [x] Test RTL layout
-- [ ] Test responsive breakpoints
+- [x] Test responsive breakpoints
 
 ## Estimation
 
@@ -323,3 +323,35 @@
 - Story 16.4 completed (goals section exists above)
 - Booking route exists at `/booking`
 - Flux icons available
+
+---
+
+## Dev Agent Record
+
+### Status
+Ready for Review
+
+### Agent Model Used
+Claude Opus 4.5
+
+### File List
+- `resources/views/livewire/pages/about.blade.php` - Added services section with 4 service cards
+- `lang/en/about.php` - Added English translations for services section
+- `lang/ar/about.php` - Added Arabic translations for services section
+- `tests/Feature/Public/AboutPageTest.php` - Added 26 tests for services section (Story 16.5)
+
+### Debug Log References
+None - No issues encountered
+
+### Completion Notes
+- Implemented services section below the goals section on the About page
+- Added 4 service category cards: Legal Consultations & Representation, Women's & Family Law, Civil & Commercial Disputes, Business Legal Services
+- Each card has an icon, title, and bullet list of services
+- Responsive grid: 4 columns desktop, 2 columns tablet, 1 column mobile
+- CTA button linking to /booking page
+- Full bilingual support (EN/AR) with RTL layout
+- 26 new tests added covering all acceptance criteria
+- All 206 public page tests pass
+
+### Change Log
+- 2026-01-11: Initial implementation of Story 16.5 - Legal Services Section

lang/ar/about.php

@@ -39,4 +39,41 @@ return [
         'تطوير حلول قانونية مبتكرة قائمة على البحث الميداني الذي يعكس السياق الاجتماعي الفلسطيني.',
         'تعزيز العدالة وتمكين المرأة من خلال خدمات قانونية متخصصة وميسّرة.',
     ],
+
+    // Services Section
+    'services_title' => 'خدماتنا القانونية',
+    'services_intro' => 'تقدم ليبرا خدمات قانونية شاملة كمكتب محاماة ربحي، يجمع بين الممارسة القانونية التقليدية والرؤية المبنية على البحث.',
+    'services_cta' => 'احجز استشارة',
+
+    'service_consultation_title' => 'الاستشارات والتمثيل القانوني',
+    'service_consultation_items' => [
+        'الاستشارات القانونية',
+        'التمثيل أمام المحاكم',
+        'إدارة التقاضي',
+        'المذكرات والاستئناف',
+    ],
+
+    'service_family_title' => 'قانون المرأة والأسرة',
+    'service_family_items' => [
+        'إجراءات الطلاق',
+        'قضايا النفقة',
+        'حضانة الأطفال',
+        'الحماية من العنف',
+    ],
+
+    'service_civil_title' => 'النزاعات المدنية والتجارية',
+    'service_civil_items' => [
+        'قضايا الشراكة',
+        'المطالبات المالية',
+        'النزاعات المدنية',
+        'التقاضي التجاري',
+    ],
+
+    'service_business_title' => 'الخدمات القانونية للأعمال',
+    'service_business_items' => [
+        'صياغة ومراجعة العقود',
+        'الحوكمة والامتثال',
+        'التحكيم',
+        'الحل البديل للنزاعات',
+    ],
 ];

lang/en/about.php

@@ -39,4 +39,41 @@ return [
         '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.',
     ],
+
+    // Services Section
+    'services_title' => 'Our Legal Services',
+    'services_intro' => 'Libra provides comprehensive legal services as a for-profit law firm, combining traditional legal practice with research-driven insight.',
+    'services_cta' => 'Book a Consultation',
+
+    'service_consultation_title' => 'Legal Consultations & Representation',
+    'service_consultation_items' => [
+        'Legal advice',
+        'Court representation',
+        'Litigation management',
+        'Pleadings & appeals',
+    ],
+
+    'service_family_title' => 'Women\'s & Family Law',
+    'service_family_items' => [
+        'Divorce proceedings',
+        'Alimony cases',
+        'Child custody',
+        'Protection from violence',
+    ],
+
+    'service_civil_title' => 'Civil & Commercial Disputes',
+    'service_civil_items' => [
+        'Partnership cases',
+        'Financial claims',
+        'Civil disputes',
+        'Commercial litigation',
+    ],
+
+    'service_business_title' => 'Business Legal Services',
+    'service_business_items' => [
+        'Contract drafting & review',
+        'Governance & compliance',
+        'Arbitration',
+        'Alternative dispute resolution',
+    ],
 ];

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

@@ -193,7 +193,98 @@ new #[Layout('components.layouts.public')] class extends Component
         </div>
     </section>
 
-    {{-- Services Section - Story 16.5 --}}
+    {{-- Services Section --}}
+    <section class="bg-white 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.services_title') }}
+            </h2>
+            <div class="w-20 h-1 bg-accent mx-auto mb-4"></div>
+            <p class="text-center text-text/70 max-w-3xl mx-auto mb-12">
+                {{ __('about.services_intro') }}
+            </p>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+                {{-- Legal Consultations & Representation --}}
+                <div class="bg-background rounded-xl p-8 text-center shadow-sm">
+                    <div class="text-accent mb-4">
+                        <flux:icon name="scale" class="w-12 h-12 mx-auto" />
+                    </div>
+                    <h3 class="text-lg font-bold text-text mb-4">
+                        {{ __('about.service_consultation_title') }}
+                    </h3>
+                    <ul class="text-sm text-text/80 space-y-2 text-start">
+                        @foreach(__('about.service_consultation_items') as $item)
+                            <li class="flex items-center gap-2">
+                                <span class="w-1.5 h-1.5 bg-accent rounded-full flex-shrink-0"></span>
+                                {{ $item }}
+                            </li>
+                        @endforeach
+                    </ul>
+                </div>
+
+                {{-- Women's & Family Law --}}
+                <div class="bg-background rounded-xl p-8 text-center shadow-sm">
+                    <div class="text-accent mb-4">
+                        <flux:icon name="heart" class="w-12 h-12 mx-auto" />
+                    </div>
+                    <h3 class="text-lg font-bold text-text mb-4">
+                        {{ __('about.service_family_title') }}
+                    </h3>
+                    <ul class="text-sm text-text/80 space-y-2 text-start">
+                        @foreach(__('about.service_family_items') as $item)
+                            <li class="flex items-center gap-2">
+                                <span class="w-1.5 h-1.5 bg-accent rounded-full flex-shrink-0"></span>
+                                {{ $item }}
+                            </li>
+                        @endforeach
+                    </ul>
+                </div>
+
+                {{-- Civil & Commercial Disputes --}}
+                <div class="bg-background rounded-xl p-8 text-center shadow-sm">
+                    <div class="text-accent mb-4">
+                        <flux:icon name="building-office" class="w-12 h-12 mx-auto" />
+                    </div>
+                    <h3 class="text-lg font-bold text-text mb-4">
+                        {{ __('about.service_civil_title') }}
+                    </h3>
+                    <ul class="text-sm text-text/80 space-y-2 text-start">
+                        @foreach(__('about.service_civil_items') as $item)
+                            <li class="flex items-center gap-2">
+                                <span class="w-1.5 h-1.5 bg-accent rounded-full flex-shrink-0"></span>
+                                {{ $item }}
+                            </li>
+                        @endforeach
+                    </ul>
+                </div>
+
+                {{-- Business Legal Services --}}
+                <div class="bg-background rounded-xl p-8 text-center shadow-sm">
+                    <div class="text-accent mb-4">
+                        <flux:icon name="briefcase" class="w-12 h-12 mx-auto" />
+                    </div>
+                    <h3 class="text-lg font-bold text-text mb-4">
+                        {{ __('about.service_business_title') }}
+                    </h3>
+                    <ul class="text-sm text-text/80 space-y-2 text-start">
+                        @foreach(__('about.service_business_items') as $item)
+                            <li class="flex items-center gap-2">
+                                <span class="w-1.5 h-1.5 bg-accent rounded-full flex-shrink-0"></span>
+                                {{ $item }}
+                            </li>
+                        @endforeach
+                    </ul>
+                </div>
+            </div>
+
+            <div class="text-center">
+                <flux:button variant="primary" href="{{ route('booking') }}">
+                    {{ __('about.services_cta') }}
+                </flux:button>
+            </div>
+        </div>
+    </section>
 
     {{-- Scholarship Section - Story 16.6 --}}
 </div>

tests/Feature/Public/AboutPageTest.php

@@ -539,3 +539,223 @@ test('about page displays all 7 goal numbers', function () {
     // Verify there are 7 goals by checking the translation array count
     expect(count(__('about.goals')))->toBe(7);
 });
+
+// Story 16.5: Legal Services Section Tests
+
+// AC1: Services Section Container
+test('about page has services section with white background', function () {
+    $this->get('/about')
+        ->assertOk()
+        ->assertSee('bg-white py-8 sm:py-12 lg:py-[60px]', false);
+});
+
+// AC2: Services Section Header
+test('about page displays services title in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Our Legal Services');
+});
+
+test('about page displays services title in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('خدماتنا القانونية');
+});
+
+// AC3: Services Introduction
+test('about page displays services intro in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Libra provides comprehensive legal services as a for-profit law firm, combining traditional legal practice with research-driven insight.');
+});
+
+test('about page displays services intro in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('تقدم ليبرا خدمات قانونية شاملة كمكتب محاماة ربحي، يجمع بين الممارسة القانونية التقليدية والرؤية المبنية على البحث.');
+});
+
+// AC4: Four Service Categories - Card 1: Legal Consultations & Representation
+test('about page displays consultation service card title in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Legal Consultations')
+        ->assertSee('Representation');
+});
+
+test('about page displays consultation service card title in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('الاستشارات والتمثيل القانوني');
+});
+
+test('about page displays consultation service items in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Legal advice')
+        ->assertSee('Court representation')
+        ->assertSee('Litigation management')
+        ->assertSee('Pleadings')
+        ->assertSee('appeals');
+});
+
+test('about page displays consultation service items in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('الاستشارات القانونية')
+        ->assertSee('التمثيل أمام المحاكم')
+        ->assertSee('إدارة التقاضي')
+        ->assertSee('المذكرات والاستئناف');
+});
+
+// AC4: Four Service Categories - Card 2: Women's & Family Law
+test('about page displays family service card title in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Women')
+        ->assertSee('Family Law');
+});
+
+test('about page displays family service card title in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('قانون المرأة والأسرة');
+});
+
+test('about page displays family service items in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Divorce proceedings')
+        ->assertSee('Alimony cases')
+        ->assertSee('Child custody')
+        ->assertSee('Protection from violence');
+});
+
+test('about page displays family service items in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('إجراءات الطلاق')
+        ->assertSee('قضايا النفقة')
+        ->assertSee('حضانة الأطفال')
+        ->assertSee('الحماية من العنف');
+});
+
+// AC4: Four Service Categories - Card 3: Civil & Commercial
+test('about page displays civil service card title in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Civil')
+        ->assertSee('Commercial Disputes');
+});
+
+test('about page displays civil service card title in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('النزاعات المدنية والتجارية');
+});
+
+test('about page displays civil service items in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Partnership cases')
+        ->assertSee('Financial claims')
+        ->assertSee('Civil disputes')
+        ->assertSee('Commercial litigation');
+});
+
+test('about page displays civil service items in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('قضايا الشراكة')
+        ->assertSee('المطالبات المالية')
+        ->assertSee('النزاعات المدنية')
+        ->assertSee('التقاضي التجاري');
+});
+
+// AC4: Four Service Categories - Card 4: Business Services
+test('about page displays business service card title in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Business Legal Services');
+});
+
+test('about page displays business service card title in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('الخدمات القانونية للأعمال');
+});
+
+test('about page displays business service items in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Contract drafting')
+        ->assertSee('review')
+        ->assertSee('Governance')
+        ->assertSee('compliance')
+        ->assertSee('Arbitration')
+        ->assertSee('Alternative dispute resolution');
+});
+
+test('about page displays business service items in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('صياغة ومراجعة العقود')
+        ->assertSee('الحوكمة والامتثال')
+        ->assertSee('التحكيم')
+        ->assertSee('الحل البديل للنزاعات');
+});
+
+// AC5: Service Card Styling
+test('about page service cards have correct styling', function () {
+    $this->get('/about')
+        ->assertOk()
+        ->assertSee('bg-background rounded-xl p-8 text-center shadow-sm', false);
+});
+
+// AC6: Responsive Grid
+test('about page service cards use responsive grid', function () {
+    $this->get('/about')
+        ->assertOk()
+        ->assertSee('grid-cols-1 md:grid-cols-2 lg:grid-cols-4', false);
+});
+
+// AC7: CTA Button
+test('about page services section has CTA button in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('Book a Consultation');
+});
+
+test('about page services section has CTA button in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/about')
+        ->assertOk()
+        ->assertSee('احجز استشارة');
+});
+
+test('about page services CTA links to booking page', function () {
+    $this->get('/about')
+        ->assertOk()
+        ->assertSee('href="'.route('booking').'"', false);
+});