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,225 @@
+# 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