8.7 KiB

Raw Blame History

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

<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

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

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

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

8.7 KiB Raw Blame History