naser
/
libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
libra/docs/epics/epic-14-home-page-redesign.md

8.0 KiB
Raw Permalink Blame History

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

  • Existing navigation and footer structure preserved
  • RTL (Arabic) and LTR (English) support required
  • Mobile responsiveness required
  • Brand color scheme (Dark Forest Green, Warm Gold, Warm Cream)
  • No changes to routing or authentication
  • 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

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