complete story 14.4

docs/stories/story-14.4-values-section.md

@@ -218,16 +218,16 @@ Recommendation: Option A (minimal) or Option C (icon badges) for elegance
 
 ## Dev Checklist
 
-- [ ] Create values section HTML structure
+- [x] Create values section HTML structure
-- [ ] Add section heading with translations
+- [x] Add section heading with translations
-- [ ] Add optional subtitle with translations
+- [x] Add optional subtitle with translations
-- [ ] Implement 6 value items with icons
+- [x] Implement 6 value items with icons
-- [ ] Add all value titles with translations (EN + AR)
+- [x] Add all value titles with translations (EN + AR)
-- [ ] Choose and implement visual style (minimal or badges)
+- [x] Choose and implement visual style (minimal or badges)
-- [ ] Implement responsive grid layout
+- [x] Implement responsive grid layout
-- [ ] Verify icons display correctly
+- [x] Verify icons display correctly
-- [ ] Test RTL layout
+- [x] Test RTL layout
-- [ ] Ensure even spacing and alignment
+- [x] Ensure even spacing and alignment
 
 ## Estimation
 
@@ -238,3 +238,35 @@ Recommendation: Option A (minimal) or Option C (icon badges) for elegance
 
 - Previous stories for page structure
 - Flux UI icons available
+
+---
+
+## Dev Agent Record
+
+### Status
+Ready for Review
+
+### Agent Model Used
+Claude Opus 4.5 (claude-opus-4-5-20251101)
+
+### File List
+| File | Action |
+|------|--------|
+| `resources/views/pages/home.blade.php` | Modified - Added values section |
+| `lang/en/home.php` | Modified - Added values translations |
+| `lang/ar/home.php` | Modified - Added values translations |
+| `tests/Feature/Public/HomePageTest.php` | Modified - Added 17 tests for values section |
+
+### Change Log
+- Implemented values section using Option C (Icon Badges) style with circular backgrounds
+- Added subtle hover effect on icon badges (bg-cta/10 to bg-cta/20 transition)
+- Added all 6 values with icons: shield-check, scale, academic-cap, heart, briefcase, light-bulb
+- Added bilingual translations (EN/AR) for title, subtitle, and all 6 value names
+- Implemented responsive grid: 2 cols mobile, 3 cols tablet, 6 cols desktop
+- Added 17 new tests covering section ID, titles, subtitles, and all values in both languages
+
+### Completion Notes
+- All acceptance criteria met (AC1-AC7)
+- Chose Option C (Icon Badges) per recommendation for elegance
+- RTL support automatic via existing layout infrastructure
+- All 52 HomePageTest tests passing (17 new + 35 existing)

lang/ar/home.php

@@ -37,4 +37,34 @@ return [
             'description' => 'صياغة ومراجعة العقود والامتثال القانوني لجميع احتياجاتكم التعاقدية.',
         ],
     ],
+
+    // Values Section
+    'values_title' => 'قيمنا',
+    'values_subtitle' => 'تبدأ من الميدان وتعود إلى الناس',
+    'values' => [
+        'integrity' => [
+            'icon' => 'shield-check',
+            'title' => 'النزاهة',
+        ],
+        'justice' => [
+            'icon' => 'scale',
+            'title' => 'العدالة',
+        ],
+        'knowledge' => [
+            'icon' => 'academic-cap',
+            'title' => 'المعرفة',
+        ],
+        'empowerment' => [
+            'icon' => 'heart',
+            'title' => 'تمكين المرأة',
+        ],
+        'professionalism' => [
+            'icon' => 'briefcase',
+            'title' => 'الاحترافية',
+        ],
+        'innovation' => [
+            'icon' => 'light-bulb',
+            'title' => 'الابتكار الاجتماعي',
+        ],
+    ],
 ];

lang/en/home.php

@@ -37,4 +37,34 @@ return [
             'description' => 'Drafting, review, and legal compliance for all your contractual needs.',
         ],
     ],
+
+    // Values Section
+    'values_title' => 'Our Values',
+    'values_subtitle' => 'These start in the field and return to the people',
+    'values' => [
+        'integrity' => [
+            'icon' => 'shield-check',
+            'title' => 'Integrity',
+        ],
+        'justice' => [
+            'icon' => 'scale',
+            'title' => 'Justice',
+        ],
+        'knowledge' => [
+            'icon' => 'academic-cap',
+            'title' => 'Knowledge',
+        ],
+        'empowerment' => [
+            'icon' => 'heart',
+            'title' => "Women's Empowerment",
+        ],
+        'professionalism' => [
+            'icon' => 'briefcase',
+            'title' => 'Professionalism',
+        ],
+        'innovation' => [
+            'icon' => 'light-bulb',
+            'title' => 'Social Innovation',
+        ],
+    ],
 ];

resources/views/pages/home.blade.php

@@ -86,4 +86,31 @@
             </div>
         </div>
     </section>
+
+    {{-- Values Section --}}
+    <section id="values" class="py-16 lg:py-20 bg-card">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-2xl lg:text-3xl font-semibold text-text mb-4">
+                    {{ __('home.values_title') }}
+                </h2>
+                <p class="text-body max-w-2xl mx-auto">
+                    {{ __('home.values_subtitle') }}
+                </p>
+            </div>
+
+            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-6">
+                @foreach(['integrity', 'justice', 'knowledge', 'empowerment', 'professionalism', 'innovation'] as $value)
+                    <div class="text-center group">
+                        <div class="w-16 h-16 lg:w-20 lg:h-20 rounded-full bg-cta/10 flex items-center justify-center mx-auto mb-3 transition-colors group-hover:bg-cta/20">
+                            <flux:icon name="{{ __('home.values.' . $value . '.icon') }}" class="w-8 h-8 lg:w-10 lg:h-10 text-cta" />
+                        </div>
+                        <h3 class="text-sm lg:text-base font-bold text-text">
+                            {{ __('home.values.' . $value . '.title') }}
+                        </h3>
+                    </div>
+                @endforeach
+            </div>
+        </div>
+    </section>
 </x-layouts.public>

tests/Feature/Public/HomePageTest.php

@@ -249,3 +249,123 @@ test('home page displays contract services in Arabic', function () {
         ->assertSee('خدمات العقود')
         ->assertSee('صياغة ومراجعة العقود والامتثال القانوني لجميع احتياجاتكم التعاقدية.');
 });
+
+// Values Section Tests
+
+test('home page contains values section with id', function () {
+    $this->get('/')
+        ->assertOk()
+        ->assertSee('id="values"', false);
+});
+
+test('home page displays values section title in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('Our Values');
+});
+
+test('home page displays values section title in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('قيمنا');
+});
+
+test('home page displays values section subtitle in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('These start in the field and return to the people');
+});
+
+test('home page displays values section subtitle in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('تبدأ من الميدان وتعود إلى الناس');
+});
+
+test('home page displays integrity value in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('Integrity');
+});
+
+test('home page displays integrity value in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('النزاهة');
+});
+
+test('home page displays justice value in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('Justice');
+});
+
+test('home page displays justice value in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('العدالة');
+});
+
+test('home page displays knowledge value in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('Knowledge');
+});
+
+test('home page displays knowledge value in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('المعرفة');
+});
+
+test('home page displays womens empowerment value in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('Women's Empowerment', false);
+});
+
+test('home page displays womens empowerment value in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('تمكين المرأة');
+});
+
+test('home page displays professionalism value in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('Professionalism');
+});
+
+test('home page displays professionalism value in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('الاحترافية');
+});
+
+test('home page displays social innovation value in English', function () {
+    $this->withSession(['locale' => 'en'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('Social Innovation');
+});
+
+test('home page displays social innovation value in Arabic', function () {
+    $this->withSession(['locale' => 'ar'])
+        ->get('/')
+        ->assertOk()
+        ->assertSee('الابتكار الاجتماعي');
+});