# 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