199 lines
6.7 KiB
Markdown
199 lines
6.7 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
|
||
|
||
- [x] Create hero section HTML structure
|
||
- [x] Add English translations to `lang/en/home.php`
|
||
- [x] Add Arabic translations to `lang/ar/home.php`
|
||
- [x] Style tagline with correct typography
|
||
- [x] Style intro text with max-width
|
||
- [x] Implement primary CTA button linking to `/booking`
|
||
- [x] Implement secondary CTA with smooth scroll to `#services`
|
||
- [x] Test responsive layout (mobile, tablet, desktop)
|
||
- [x] Test RTL layout (Arabic)
|
||
- [x] Test LTR layout (English)
|
||
- [x] 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`
|
||
|
||
---
|
||
|
||
## Dev Agent Record
|
||
|
||
### Status
|
||
|
||
Ready for Review
|
||
|
||
### Agent Model Used
|
||
|
||
Claude Opus 4.5 (claude-opus-4-5-20251101)
|
||
|
||
### File List
|
||
|
||
| File | Action | Description |
|
||
|------|--------|-------------|
|
||
| `resources/views/pages/home.blade.php` | Modified | Added hero section with tagline, intro, and CTA buttons |
|
||
| `lang/en/home.php` | Created | English translations for hero section |
|
||
| `lang/ar/home.php` | Created | Arabic translations for hero section |
|
||
| `resources/css/app.css` | Modified | Added smooth scroll behavior for HTML element |
|
||
| `tests/Feature/Public/HomePageTest.php` | Created | 12 tests covering all acceptance criteria |
|
||
|
||
### Completion Notes
|
||
|
||
- Implemented hero section with full-width warm cream background per AC1
|
||
- Responsive typography: 1.75rem mobile, 2rem tablet, 2.5rem desktop per AC2
|
||
- Intro text constrained to 800px max-width per AC3
|
||
- Primary CTA uses existing `btn-primary` class with warm gold styling per AC4
|
||
- Secondary CTA uses `btn-secondary` class with forest green border per AC5
|
||
- Smooth scroll implemented via CSS `scroll-behavior: smooth` on html element
|
||
- Added `id="services"` to existing services section for anchor link
|
||
- Buttons stack vertically on mobile, inline on tablet/desktop per AC6
|
||
- RTL support automatic via Tailwind's built-in RTL utilities per AC7
|
||
- All 12 feature tests pass covering bilingual content, links, and structure
|
||
|
||
### Change Log
|
||
|
||
| Date | Change |
|
||
|------|--------|
|
||
| 2026-01-09 | Initial implementation of hero section |
|
||
| 2026-01-09 | Created translation files (en/ar) |
|
||
| 2026-01-09 | Added smooth scroll CSS |
|
||
| 2026-01-09 | Created comprehensive test suite |
|
||
|
||
### Debug Log References
|
||
|
||
N/A - No issues encountered during implementation
|