151 lines
5.0 KiB
Markdown
151 lines
5.0 KiB
Markdown
# Story 14.1: Hero Section Implementation
|
||
|
||
## Story
|
||
|
||
**As a** website visitor
|
||
**I want to** see an impactful hero section when I land on the home page
|
||
**So that** I immediately understand what Libra offers and how to take action
|
||
|
||
## Acceptance Criteria
|
||
|
||
### AC1: Hero Section Container
|
||
|
||
**Given** a visitor lands on the home page
|
||
**When** the page loads
|
||
**Then** a full-width hero section is displayed with:
|
||
- Warm Cream (`#F4F1EA`) background
|
||
- Adequate vertical padding (64px desktop, 48px tablet, 32px mobile)
|
||
- Centered content
|
||
|
||
### AC2: Tagline Display
|
||
|
||
**Given** the hero section
|
||
**When** viewed in English
|
||
**Then** display: "Committed to Justice – Grounded in Dignity – Driven to Advocate"
|
||
|
||
**When** viewed in Arabic
|
||
**Then** display: "ملتزمون بالعدالة – متجذرون بالكرامة – مدفوعون للدفاع"
|
||
|
||
- Typography: H1, Bold, Forest Green (`#2D322A`)
|
||
- Responsive font size: 2.5rem desktop, 2rem tablet, 1.75rem mobile
|
||
|
||
### AC3: Introductory Text
|
||
|
||
**Given** the hero section below the tagline
|
||
**When** displayed
|
||
**Then** show a brief 1-2 sentence introduction:
|
||
- English: "Libra for Rights is a legal institution woven from the fabric of society, offering innovative legal solutions with honesty and professionalism."
|
||
- Arabic: "ليبرا للحقوق مؤسسة قانونية منسوجة من نسيج المجتمع، تقدم حلولاً قانونية مبتكرة بأمانة واحترافية."
|
||
- Typography: Body text, Regular, Forest Green (`#2D322A`)
|
||
- Max-width: 800px centered
|
||
|
||
### AC4: Primary CTA Button
|
||
|
||
**Given** the hero section
|
||
**When** displayed below the intro text
|
||
**Then** show a primary CTA button:
|
||
- Label (EN): "Book a Consultation"
|
||
- Label (AR): "احجز استشارة"
|
||
- Style: Warm Gold background (`#A68966`), white text
|
||
- Link: `/booking`
|
||
- Hover: Darker Gold (`#8A7555`)
|
||
|
||
### AC5: Secondary CTA Button (Optional)
|
||
|
||
**Given** the hero section
|
||
**When** displayed next to primary CTA
|
||
**Then** show a secondary CTA button:
|
||
- Label (EN): "Our Services"
|
||
- Label (AR): "خدماتنا"
|
||
- Style: Transparent background, Forest Green border and text
|
||
- Action: Smooth scroll to services section
|
||
- Hover: Light primary background
|
||
|
||
### AC6: Responsive Layout
|
||
|
||
**Given** different screen sizes
|
||
**When** viewing the hero section:
|
||
- **Desktop (≥992px):** Full layout with comfortable spacing
|
||
- **Tablet (576-991px):** Reduced padding, slightly smaller text
|
||
- **Mobile (<576px):** Stacked buttons, compact spacing
|
||
|
||
### AC7: RTL Support
|
||
|
||
**Given** Arabic language is selected
|
||
**When** viewing the hero section
|
||
**Then** all text and elements align right-to-left correctly
|
||
|
||
## Technical Notes
|
||
|
||
### File to Create/Modify
|
||
- `resources/views/pages/home.blade.php` - Main implementation
|
||
- `lang/en/home.php` - English translations
|
||
- `lang/ar/home.php` - Arabic translations
|
||
|
||
### HTML Structure
|
||
|
||
```blade
|
||
<section class="hero-section bg-background py-16 lg:py-20">
|
||
<div class="container mx-auto px-4 text-center">
|
||
<h1 class="text-3xl lg:text-4xl font-bold text-text mb-6">
|
||
{{ __('home.tagline') }}
|
||
</h1>
|
||
<p class="text-body text-lg max-w-3xl mx-auto mb-8">
|
||
{{ __('home.intro') }}
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<flux:button variant="primary" href="{{ route('booking') }}">
|
||
{{ __('home.cta_book') }}
|
||
</flux:button>
|
||
<flux:button variant="ghost" href="#services">
|
||
{{ __('home.cta_services') }}
|
||
</flux:button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
```
|
||
|
||
### Translation Keys
|
||
|
||
```php
|
||
// lang/en/home.php
|
||
return [
|
||
'tagline' => 'Committed to Justice – Grounded in Dignity – Driven to Advocate',
|
||
'intro' => 'Libra for Rights is a legal institution woven from the fabric of society, offering innovative legal solutions with honesty and professionalism.',
|
||
'cta_book' => 'Book a Consultation',
|
||
'cta_services' => 'Our Services',
|
||
];
|
||
|
||
// lang/ar/home.php
|
||
return [
|
||
'tagline' => 'ملتزمون بالعدالة – متجذرون بالكرامة – مدفوعون للدفاع',
|
||
'intro' => 'ليبرا للحقوق مؤسسة قانونية منسوجة من نسيج المجتمع، تقدم حلولاً قانونية مبتكرة بأمانة واحترافية.',
|
||
'cta_book' => 'احجز استشارة',
|
||
'cta_services' => 'خدماتنا',
|
||
];
|
||
```
|
||
|
||
## Dev Checklist
|
||
|
||
- [ ] Create hero section HTML structure
|
||
- [ ] Add English translations to `lang/en/home.php`
|
||
- [ ] Add Arabic translations to `lang/ar/home.php`
|
||
- [ ] Style tagline with correct typography
|
||
- [ ] Style intro text with max-width
|
||
- [ ] Implement primary CTA button linking to `/booking`
|
||
- [ ] Implement secondary CTA with smooth scroll to `#services`
|
||
- [ ] Test responsive layout (mobile, tablet, desktop)
|
||
- [ ] Test RTL layout (Arabic)
|
||
- [ ] Test LTR layout (English)
|
||
- [ ] Verify color usage matches brand guidelines
|
||
|
||
## Estimation
|
||
|
||
**Complexity:** Low
|
||
**Risk:** Low - Straightforward content section
|
||
|
||
## Dependencies
|
||
|
||
- Epic 12 completed (brand colors available)
|
||
- Booking route exists at `/booking`
|