generated epic 14 with stories to fix the home page also added a pic of the lawyer to the files with a pdf from the client to understand their vision and about them

2026-01-09 16:44:38 +02:00
parent 944076e0bf
commit 6504327ed7
9 changed files with 1425 additions and 0 deletions
@@ -0,0 +1,150 @@
+# 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`