5.0 KiB

Raw Blame History

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

<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

// 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

5.0 KiB Raw Blame History Unescape Escape