219 lines
7.5 KiB
Markdown
219 lines
7.5 KiB
Markdown
# 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
|
|
|
|
- [ ] 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
|