complete story 14.3

2026-01-09 17:02:01 +02:00 · 2026-01-09 17:02:01 +02:00 · fbd5d91da3
parent a0965c83bc
commit fbd5d91da3
5 changed files with 211 additions and 25 deletions
--- a/docs/stories/story-14.3-services-section.md
+++ b/docs/stories/story-14.3-services-section.md
@ -196,16 +196,16 @@ Using Heroicons (available in Flux UI):

 ## Dev Checklist

- [ ] Create services section HTML structure
- [ ] Add section heading and subtitle with translations
- [ ] Implement 4 service cards with icons
- [ ] Add all service titles with translations
- [ ] Add all service descriptions with translations
- [ ] Style cards with proper shadows and borders
- [ ] Implement responsive grid layout
- [ ] Verify icons display correctly
- [ ] Test RTL layout
- [ ] Ensure proper spacing between cards
+- [x] Create services section HTML structure
+- [x] Add section heading and subtitle with translations
+- [x] Implement 4 service cards with icons
+- [x] Add all service titles with translations
+- [x] Add all service descriptions with translations
+- [x] Style cards with proper shadows and borders
+- [x] Implement responsive grid layout
+- [x] Verify icons display correctly
+- [x] Test RTL layout
+- [x] Ensure proper spacing between cards

 ## Estimation

@ -216,3 +216,33 @@ Using Heroicons (available in Flux UI):

 - Stories 14.1 and 14.2 for page structure
 - Flux UI icons available
+
+---
+
+## Dev Agent Record
+
+### Status
+Ready for Review
+
+### Agent Model Used
+claude-opus-4-5-20251101
+
+### Completion Notes
+- Replaced placeholder services section with proper implementation matching story specs
+- Added 4 service cards with Heroicons: chat-bubble-left-right, scale, document-text, pencil-square
+- Implemented responsive grid: 4 columns on desktop (lg:grid-cols-4), 2 on tablet (sm:grid-cols-2), 1 on mobile
+- Added all English and Arabic translations for titles, descriptions, and subtitle
+- Cards use bg-card (white), p-6 (24px padding), rounded-lg (8px radius), shadow-card
+- Icons use text-cta class for Warm Gold color and w-12 h-12 (48px) sizing
+- Section uses bg-background for Warm Cream background with py-16 lg:py-20 padding
+- Added 12 new test cases covering all services in both English and Arabic
+- All 35 HomePageTest tests pass
+
+### File List
+- `resources/views/pages/home.blade.php` - Modified (replaced services placeholder)
+- `lang/en/home.php` - Modified (added services translations)
+- `lang/ar/home.php` - Modified (added services translations)
+- `tests/Feature/Public/HomePageTest.php` - Modified (added 12 services tests)
+
+### Change Log
+- 2026-01-09: Initial implementation of services section per story requirements
--- a/lang/ar/home.php
+++ b/lang/ar/home.php
@ -11,4 +11,30 @@ return [
    'lawyer_name' => 'هدى عرموش',
    'lawyer_title' => 'محامية',
    'lawyer_bio' => 'أسست هدى عرموش ليبرا للحقوق برؤية لإنشاء مؤسسة قانونية منسوجة من نسيج المجتمع. بالتزامها بالعدالة والكرامة، تقود ممارسة تحقق في التحديات وتوثقها وتحولها إلى حلول قانونية مبتكرة. تُرافق ليبرا الأفراد والمؤسسات بأمانة واحترافية، ساعية لتعزيز العدالة وتمكين المرأة من خلال القانون والبحث والعمل الميداني.',
+
+    // Services Section
+    'services_title' => 'خدماتنا',
+    'services_subtitle' => 'حلول قانونية شاملة للأفراد والشركات',
+    'services' => [
+        'consultations' => [
+            'icon' => 'chat-bubble-left-right',
+            'title' => 'الاستشارات القانونية',
+            'description' => 'استشارات قانونية متخصصة مصممة وفقاً لوضعك واحتياجاتك.',
+        ],
+        'representation' => [
+            'icon' => 'scale',
+            'title' => 'التمثيل أمام المحاكم',
+            'description' => 'تمثيل احترافي أمام المحاكم والهيئات القضائية في جميع المراحل.',
+        ],
+        'litigation' => [
+            'icon' => 'document-text',
+            'title' => 'إدارة الدعاوى',
+            'description' => 'إدارة كاملة للقضايا من اللوائح والمذكرات إلى الاستئنافات.',
+        ],
+        'contracts' => [
+            'icon' => 'pencil-square',
+            'title' => 'خدمات العقود',
+            'description' => 'صياغة ومراجعة العقود والامتثال القانوني لجميع احتياجاتكم التعاقدية.',
+        ],
+    ],
 ];
--- a/lang/en/home.php
+++ b/lang/en/home.php
@ -11,4 +11,30 @@ return [
    'lawyer_name' => 'Huda Armouche',
    'lawyer_title' => 'Attorney at Law',
    'lawyer_bio' => 'Huda Armouche founded Libra for Rights with a vision to create a legal institution woven from the fabric of society. With a commitment to justice and dignity, she leads a practice that investigates challenges, documents them, and transforms them into innovative legal solutions. Libra accompanies individuals and institutions with honesty and professionalism, striving to advance justice and empower women through law, research, and fieldwork.',
+
+    // Services Section
+    'services_title' => 'Our Services',
+    'services_subtitle' => 'Comprehensive legal solutions for individuals and businesses',
+    'services' => [
+        'consultations' => [
+            'icon' => 'chat-bubble-left-right',
+            'title' => 'Legal Consultations',
+            'description' => 'Expert legal advice tailored to your specific situation and needs.',
+        ],
+        'representation' => [
+            'icon' => 'scale',
+            'title' => 'Court Representation',
+            'description' => 'Professional representation before courts and judicial bodies at all stages.',
+        ],
+        'litigation' => [
+            'icon' => 'document-text',
+            'title' => 'Litigation Management',
+            'description' => 'Complete case management from pleadings and memoranda to appeals.',
+        ],
+        'contracts' => [
+            'icon' => 'pencil-square',
+            'title' => 'Contract Services',
+            'description' => 'Drafting, review, and legal compliance for all your contractual needs.',
+        ],
+    ],
 ];
--- a/resources/views/pages/home.blade.php
+++ b/resources/views/pages/home.blade.php
@ -57,22 +57,32 @@
        </div>
    </section>

-    {{-- Services Section Placeholder --}}
-    <section id="services" class="py-8 sm:py-12">
+    {{-- Services Section --}}
+    <section id="services" class="py-16 lg:py-20 bg-background">
        <div class="container mx-auto px-4">
-            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
-                <div class="bg-card p-4 sm:p-6 rounded-lg shadow-card">
-                    <h3 class="text-lg sm:text-xl font-semibold text-text mb-2">{{ __('Expert Consultations') }}</h3>
-                    <p class="text-body text-sm sm:text-base">{{ __('Professional legal advice tailored to your needs.') }}</p>
+            <div class="text-center mb-12">
+                <h2 class="text-2xl lg:text-3xl font-semibold text-text mb-4">
+                    {{ __('home.services_title') }}
+                </h2>
+                <p class="text-body max-w-2xl mx-auto">
+                    {{ __('home.services_subtitle') }}
+                </p>
            </div>
-                <div class="bg-card p-4 sm:p-6 rounded-lg shadow-card">
-                    <h3 class="text-lg sm:text-xl font-semibold text-text mb-2">{{ __('Case Management') }}</h3>
-                    <p class="text-body text-sm sm:text-base">{{ __('Track your cases and stay informed every step of the way.') }}</p>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                @foreach(['consultations', 'representation', 'litigation', 'contracts'] as $service)
+                    <div class="bg-card p-6 rounded-lg shadow-card text-center">
+                        <div class="text-cta mb-4">
+                            <flux:icon name="{{ __('home.services.' . $service . '.icon') }}" class="w-12 h-12 mx-auto" />
                        </div>
-                <div class="bg-card p-4 sm:p-6 rounded-lg shadow-card sm:col-span-2 lg:col-span-1">
-                    <h3 class="text-lg sm:text-xl font-semibold text-text mb-2">{{ __('Legal Resources') }}</h3>
-                    <p class="text-body text-sm sm:text-base">{{ __('Access our library of legal insights and articles.') }}</p>
+                        <h3 class="text-lg font-bold text-text mb-2">
+                            {{ __('home.services.' . $service . '.title') }}
+                        </h3>
+                        <p class="text-body text-sm">
+                            {{ __('home.services.' . $service . '.description') }}
+                        </p>
                    </div>
+                @endforeach
            </div>
        </div>
    </section>
--- a/tests/Feature/Public/HomePageTest.php
+++ b/tests/Feature/Public/HomePageTest.php
@ -155,3 +155,97 @@ test('home page lawyer photo has alt text for accessibility', function () {
        ->assertOk()
        ->assertSee('alt="Huda Armouche"', false);
 });
+
+// Services Section Tests
+
+test('home page displays services section title in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('Our Services');
+});
+
+test('home page displays services section title in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('خدماتنا');
+});
+
+test('home page displays services section subtitle in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('Comprehensive legal solutions for individuals and businesses');
+});
+
+test('home page displays services section subtitle in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('حلول قانونية شاملة للأفراد والشركات');
+});
+
+test('home page displays legal consultations service in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('Legal Consultations')
+        ->assertSee('Expert legal advice tailored to your specific situation and needs.');
+});
+
+test('home page displays legal consultations service in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('الاستشارات القانونية')
+        ->assertSee('استشارات قانونية متخصصة مصممة وفقاً لوضعك واحتياجاتك.');
+});
+
+test('home page displays court representation service in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('Court Representation')
+        ->assertSee('Professional representation before courts and judicial bodies at all stages.');
+});
+
+test('home page displays court representation service in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('التمثيل أمام المحاكم')
+        ->assertSee('تمثيل احترافي أمام المحاكم والهيئات القضائية في جميع المراحل.');
+});
+
+test('home page displays litigation management service in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('Litigation Management')
+        ->assertSee('Complete case management from pleadings and memoranda to appeals.');
+});
+
+test('home page displays litigation management service in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('إدارة الدعاوى')
+        ->assertSee('إدارة كاملة للقضايا من اللوائح والمذكرات إلى الاستئنافات.');
+});
+
+test('home page displays contract services in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('Contract Services')
+        ->assertSee('Drafting, review, and legal compliance for all your contractual needs.');
+});
+
+test('home page displays contract services in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('خدمات العقود')
+        ->assertSee('صياغة ومراجعة العقود والامتثال القانوني لجميع احتياجاتكم التعاقدية.');
+});