11 KiB

Raw Blame History

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

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

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

11 KiB Raw Blame History