# Story 16.5: Legal Services Section

## Story

**As a** website visitor
**I want to** see Libra's comprehensive legal services
**So that** I know what services they offer and if they can help with my legal needs

## Acceptance Criteria

### AC1: Services Section Container

**Given** the About Us page below the goals section
**When** displayed
**Then** show a services section with:
- White (`#FFFFFF`) background
- Full-width container
- Adequate vertical padding (60px desktop, 48px tablet, 32px mobile)

### AC2: Services Section Header

**Given** the services section
**When** displayed
**Then** show section header:
- English: "Our Legal Services"
- Arabic: "خدماتنا القانونية"
- Typography: H2, Bold, Forest Green (`#2D322A`)
- Warm Gold underline accent
- Centered

### AC3: Services Introduction

**Given** the services section below the header
**When** displayed
**Then** show introductory text:
- English: "Libra provides comprehensive legal services as a for-profit law firm, combining traditional legal practice with research-driven insight."
- Arabic: "تقدم ليبرا خدمات قانونية شاملة كمكتب محاماة ربحي، يجمع بين الممارسة القانونية التقليدية والرؤية المبنية على البحث."
- Typography: Body text, Forest Green with opacity
- Centered, max-width 800px

### AC4: Four Service Categories

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

**Card 1 - Legal Consultations & Representation:**
- Icon: Scale/Gavel icon
- Title (EN): "Legal Consultations & Representation"
- Title (AR): "الاستشارات والتمثيل القانوني"
- Items:
  - Legal advice / الاستشارات القانونية
  - Court representation / التمثيل أمام المحاكم
  - Litigation management / إدارة التقاضي
  - Pleadings & appeals / المذكرات والاستئناف

**Card 2 - Women's & Family Law:**
- Icon: Heart/Family icon
- Title (EN): "Women's & Family Law"
- Title (AR): "قانون المرأة والأسرة"
- Items:
  - Divorce proceedings / إجراءات الطلاق
  - Alimony cases / قضايا النفقة
  - Child custody / حضانة الأطفال
  - Protection from violence / الحماية من العنف

**Card 3 - Civil & Commercial:**
- Icon: Building icon
- Title (EN): "Civil & Commercial Disputes"
- Title (AR): "النزاعات المدنية والتجارية"
- Items:
  - Partnership cases / قضايا الشراكة
  - Financial claims / المطالبات المالية
  - Civil disputes / النزاعات المدنية
  - Commercial litigation / التقاضي التجاري

**Card 4 - Business Services:**
- Icon: Briefcase icon
- Title (EN): "Business Legal Services"
- Title (AR): "الخدمات القانونية للأعمال"
- Items:
  - Contract drafting & review / صياغة ومراجعة العقود
  - Governance & compliance / الحوكمة والامتثال
  - Arbitration / التحكيم
  - Alternative dispute resolution / الحل البديل للنزاعات

### AC5: Service Card Styling

**Given** each service card
**When** displayed
**Then** style with:
- Warm Cream (`#F4F1EA`) background
- Rounded corners (12px)
- Icon: Warm Gold (`#A68966`), 48px, top-centered
- Title: H3, Bold, Forest Green, centered
- List items: Bullet points, Forest Green text
- Padding: 32px
- Subtle border or shadow

### AC6: Responsive Grid

**Given** different screen sizes
**When** viewing service cards:
- **Desktop (≥992px):** 4 columns
- **Tablet (768-991px):** 2 columns (2x2)
- **Mobile (<768px):** 1 column stacked

### AC7: CTA Button

**Given** the services section
**When** displayed below the cards
**Then** show a CTA button:
- Label (EN): "Book a Consultation"
- Label (AR): "احجز استشارة"
- Style: Warm Gold background, white text
- Link: `/booking`
- Centered

### AC8: RTL Support

**Given** Arabic language is selected
**When** viewing the services section
**Then** all cards, lists, and text align correctly for RTL

## Technical Notes

### HTML Structure

```blade
{{-- Legal Services Section --}}
<section class="bg-white py-12 lg:py-16">
    <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">
            {{-- Consultations & Representation --}}
            <div class="bg-background rounded-xl p-6 text-center">
                <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-6 text-center">
                <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 --}}
            <div class="bg-background rounded-xl p-6 text-center">
                <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 Services --}}
            <div class="bg-background rounded-xl p-6 text-center">
                <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>
```

### Translation Keys to Add

```php
// lang/en/about.php - add these keys
'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',
],

// lang/ar/about.php - add these keys
'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' => [
    'صياغة ومراجعة العقود',
    'الحوكمة والامتثال',
    'التحكيم',
    'الحل البديل للنزاعات',
],
```

## Dev Checklist

- [ ] Add services section to about.blade.php
- [ ] Style section header with gold underline
- [ ] Add intro text
- [ ] Create 4 service category cards with icons
- [ ] Add bullet list items to each card
- [ ] Implement responsive grid (4 → 2 → 1 columns)
- [ ] Add CTA button linking to /booking
- [ ] Add all English translations (arrays)
- [ ] Add all Arabic translations (arrays)
- [ ] Test RTL layout
- [ ] Test responsive breakpoints

## Estimation

**Complexity:** Medium
**Risk:** Low - Standard card grid with lists

## Dependencies

- Story 16.4 completed (goals section exists above)
- Booking route exists at `/booking`
- Flux icons available