generated epic 14 with stories to fix the home page also added a pic of the lawyer to the files with a pdf from the client to understand their vision and about them
This commit is contained in:
Naser Mansour
@@ -0,0 +1,218 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user