326 lines
11 KiB
Markdown
326 lines
11 KiB
Markdown
# 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
|