# 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`