# Story 14.3: Services Section

## Story

**As a** website visitor
**I want to** see what legal services Libra offers
**So that** I can determine if they can help with my legal needs

## Acceptance Criteria

### AC1: Section Container

**Given** a visitor scrolls to the services section
**When** viewing the section
**Then** display with:
- Warm Cream (`#F4F1EA`) background
- Section ID `id="services"` for anchor linking
- Adequate padding (64px vertical on desktop)

### AC2: Section Heading

**Given** the services section
**When** displayed
**Then** show a section heading:
- English: "Our Services"
- Arabic: "خدماتنا"
- Optional subheading: "Comprehensive legal solutions for individuals and businesses"
- Typography: H2, SemiBold, Forest Green (`#2D322A`)
- Centered alignment

### AC3: Four Service Cards

**Given** the services section
**When** displayed
**Then** show 4 service cards:

| Service | English | Arabic | Icon Suggestion |
|---------|---------|--------|-----------------|
| Consultations | Legal Consultations | الاستشارات القانونية | chat/message icon |
| Representation | Court Representation | التمثيل أمام المحاكم | gavel/scales icon |
| Litigation | Litigation Management | إدارة الدعاوى | document/folder icon |
| Contracts | Contract Services | خدمات العقود | file-text/pen icon |

### AC4: Service Card Design

**Given** each service card
**When** displayed
**Then** include:
- Icon: Warm Gold (`#A68966`) color, 48px size
- Title: Bold, Forest Green (`#2D322A`)
- Brief description (1-2 sentences)
- Card background: White (`#FFFFFF`)
- Subtle shadow for depth
- Border-radius: 8px
- Padding: 24px

### AC5: Service Descriptions

**Given** each service card
**When** displayed
**Then** show appropriate descriptions:

**Legal Consultations:**
- EN: "Expert legal advice tailored to your specific situation and needs."
- AR: "استشارات قانونية متخصصة مصممة وفقاً لوضعك واحتياجاتك."

**Court Representation:**
- EN: "Professional representation before courts and judicial bodies at all stages."
- AR: "تمثيل احترافي أمام المحاكم والهيئات القضائية في جميع المراحل."

**Litigation Management:**
- EN: "Complete case management from pleadings and memoranda to appeals."
- AR: "إدارة كاملة للقضايا من اللوائح والمذكرات إلى الاستئنافات."

**Contract Services:**
- EN: "Drafting, review, and legal compliance for all your contractual needs."
- AR: "صياغة ومراجعة العقود والامتثال القانوني لجميع احتياجاتكم التعاقدية."

### AC6: Grid Layout

**Given** different screen sizes
**When** viewing the services section:
- **Desktop (≥992px):** 4 columns (1 row of 4 cards)
- **Tablet (576-991px):** 2 columns (2 rows of 2 cards)
- **Mobile (<576px):** 1 column (4 rows, stacked)

### AC7: RTL Support

**Given** Arabic language is selected
**When** viewing the services section
**Then** cards maintain proper alignment and text direction

## Technical Notes

### Files to Modify
- `resources/views/pages/home.blade.php` - Add services section
- `lang/en/home.php` - Add translations
- `lang/ar/home.php` - Add translations

### HTML Structure

```blade
<section id="services" class="py-16 lg:py-20 bg-background">
    <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.services_title') }}
            </h2>
            <p class="text-body max-w-2xl mx-auto">
                {{ __('home.services_subtitle') }}
            </p>
        </div>

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

### Translation Keys

```php
// lang/en/home.php (additions)
'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.',
    ],
],

// lang/ar/home.php (additions)
'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' => 'صياغة ومراجعة العقود والامتثال القانوني لجميع احتياجاتكم التعاقدية.',
    ],
],
```

### Icon Options

Using Heroicons (available in Flux UI):
- `chat-bubble-left-right` - Consultations
- `scale` - Court Representation
- `document-text` - Litigation
- `pencil-square` - Contracts

## Dev Checklist

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

**Complexity:** Low
**Risk:** Low - Standard card grid layout

## Dependencies

- 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