libra/docs/epics/epic-14-home-page-redesign.md

# Epic 14: Home Page Redesign

## Epic Goal

Transform the minimal home page into a comprehensive, professional landing page that showcases Libra's mission, services, values, and the lawyer (Huda Armouche), while providing clear pathways to booking consultations and reading legal posts.

## Epic Description

### Existing System Context

- **Current state:** Minimal home page with heading, tagline, and 3 basic feature cards
- **Technology stack:** Laravel 12, Livewire 3/Volt, Flux UI, Tailwind CSS 4
- **Current file:** `resources/views/pages/home.blade.php`
- **Public layout:** `resources/views/components/layouts/public.blade.php`
- **Posts system:** Existing post model and public posts page at `/posts`
- **Booking system:** Guest booking available at `/booking`

### Content Assets Available

**Lawyer Information:**
- **Name:** Huda Armouche (هدى عرموش)
- **Photo:** Professional headshot available
- **Title:** Attorney / محامية

**Contact Information:**
- **Phone:** +970599353502
- **Address:** العمارة الأمريكية - بجانب الشني - الطابق الرابع

**Brand Content:**
- **Tagline:** "Committed to Justice – Grounded in Dignity – Driven to Advocate"
- **Arabic Tagline:** "ملتزمون بالعدالة – متجذرون بالكرامة – مدفوعون للدفاع"
- **Vision:** Woven from the fabric of society, investigating problems, documenting them, uncovering their roots, and offering solutions
- **Values:** Integrity, Justice, Knowledge, Women's Empowerment, Professionalism, Social Innovation

### Enhancement Details

**What's being added:**

1. **Hero Section**
   - Bold tagline with brand colors
   - Brief introduction to Libra
   - Primary CTA: "Book a Consultation" linking to `/booking`
   - Secondary CTA: "Learn More" (scrolls to about section)

2. **About Section**
   - Huda Armouche's professional photo
   - Name and title
   - Brief bio based on vision/mission content
   - Professional, elegant layout

3. **Services Section (Generalized)**
   - Legal Consultations
   - Court Representation
   - Litigation Management
   - Contract Services
   - Presented as cards/icons without listing specific practice areas

4. **Values Section**
   - 6 values displayed as cards/icons:
     - Integrity (النزاهة)
     - Justice (العدالة)
     - Knowledge (المعرفة)
     - Women's Empowerment (تمكين المرأة)
     - Professionalism (الاحترافية)
     - Social Innovation (الابتكار الاجتماعي)

5. **Latest Posts Section**
   - Display 3 most recent published posts
   - Post title, excerpt, date
   - "View All" link to `/posts`

6. **Footer Contact Update**
   - Update phone number to +970599353502
   - Update address to العمارة الأمريكية - بجانب الشني - الطابق الرابع

**Success criteria:**
- Home page displays all sections in correct order
- Professional appearance consistent with brand guidelines
- Responsive design (mobile, tablet, desktop)
- Bilingual support (Arabic RTL / English LTR)
- CTA buttons link correctly to booking page
- Latest posts pull from database dynamically
- Footer displays updated contact information

---

## Stories

### Story 14.1: Hero Section Implementation
**File:** `story-14.1-hero-section.md`

Create the hero section with tagline, introductory text, and CTA buttons. Should be visually impactful and set the professional tone for the page.

### Story 14.2: About Section with Lawyer Profile
**File:** `story-14.2-about-section.md`

Implement the about section featuring Huda Armouche's photo, name, title, and a brief professional bio derived from the vision/mission content.

### Story 14.3: Services Section
**File:** `story-14.3-services-section.md`

Create the generalized services section with 4 service cards (Consultations, Representation, Litigation, Contracts) using icons and brief descriptions.

### Story 14.4: Values Section
**File:** `story-14.4-values-section.md`

Implement the 6 values as visually appealing cards/icons with both Arabic and English labels.

### Story 14.5: Latest Posts Section
**File:** `story-14.5-latest-posts-section.md`

Create a dynamic section that pulls the 3 most recent published posts from the database and displays them with a "View All" link.

### Story 14.6: Footer Contact Information Update
**File:** `story-14.6-footer-update.md`

Update the public layout footer with the correct phone number and address.

---

## Compatibility Requirements

- [x] Existing navigation and footer structure preserved
- [x] RTL (Arabic) and LTR (English) support required
- [x] Mobile responsiveness required
- [x] Brand color scheme (Dark Forest Green, Warm Gold, Warm Cream)
- [x] No changes to routing or authentication
- [x] Posts integration uses existing Post model

## Technical Considerations

### Layout Structure

```
+------------------------------------------+
|              NAVIGATION                   |
+------------------------------------------+
|                                          |
|              HERO SECTION                |
|    Tagline + Intro + CTA Buttons         |
|                                          |
+------------------------------------------+
|                                          |
|             ABOUT SECTION                |
|    Photo | Name + Bio                    |
|                                          |
+------------------------------------------+
|                                          |
|            SERVICES SECTION              |
|    [Card] [Card] [Card] [Card]           |
|                                          |
+------------------------------------------+
|                                          |
|             VALUES SECTION               |
|    [Icon] [Icon] [Icon]                  |
|    [Icon] [Icon] [Icon]                  |
|                                          |
+------------------------------------------+
|                                          |
|          LATEST POSTS SECTION            |
|    [Post] [Post] [Post] [View All]       |
|                                          |
+------------------------------------------+
|              FOOTER                       |
|    Phone | Address | Links               |
+------------------------------------------+
```

### Color Usage

```css
/* Hero background */
--color-background: #F4F1EA;      /* Warm Cream */

/* Section alternating backgrounds */
--color-card: #FFFFFF;            /* White for some sections */
--color-background: #F4F1EA;      /* Warm Cream for others */

/* CTA buttons */
--color-cta: #A68966;             /* Warm Gold */

/* Text */
--color-text: #2D322A;            /* Forest Green for headings */
--color-body: #2D322A;            /* Forest Green for body */
```

### Image Assets Required

- Huda Armouche's photo (to be placed in `public/images/`)
- Service icons (can use existing icon library or SVGs)
- Value icons (can use existing icon library or SVGs)

### Data Requirements

- Latest 3 posts query: `Post::where('status', 'published')->latest()->take(3)->get()`

---

## Risk Mitigation

- **Primary Risk:** Content may need adjustment based on client feedback
- **Mitigation:** Use translation files for all text content, allowing easy updates
- **Rollback Plan:** Previous home page can be restored from git history

## Definition of Done

- [ ] All 6 stories completed with acceptance criteria met
- [ ] Hero section displays tagline and CTAs correctly
- [ ] About section shows lawyer photo and bio
- [ ] Services section displays 4 generalized services
- [ ] Values section displays 6 values with icons
- [ ] Latest posts section pulls real data from database
- [ ] Footer shows updated phone and address
- [ ] Responsive design works on mobile, tablet, desktop
- [ ] RTL (Arabic) layout displays correctly
- [ ] LTR (English) layout displays correctly
- [ ] All text in translation files (ar/en)
- [ ] Visual consistency with brand guidelines
- [ ] Accessibility standards maintained

## Dependencies

- Epic 12 (Branding Refresh) completed - for consistent colors
- Existing Post model and data
- Lawyer photo asset to be provided