diff --git a/LIBRA For Rights - Vision, Mission, Values __and Goals.pdf b/LIBRA For Rights - Vision, Mission, Values __and Goals.pdf new file mode 100644 index 0000000..a82a60f Binary files /dev/null and b/LIBRA For Rights - Vision, Mission, Values __and Goals.pdf differ diff --git a/WhatsApp Image 2026-01-07 at 5.34.23 PM.jpeg b/WhatsApp Image 2026-01-07 at 5.34.23 PM.jpeg new file mode 100644 index 0000000..6556448 Binary files /dev/null and b/WhatsApp Image 2026-01-07 at 5.34.23 PM.jpeg differ diff --git a/docs/epics/epic-14-home-page-redesign.md b/docs/epics/epic-14-home-page-redesign.md new file mode 100644 index 0000000..64787ac --- /dev/null +++ b/docs/epics/epic-14-home-page-redesign.md @@ -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 diff --git a/docs/stories/story-14.1-hero-section.md b/docs/stories/story-14.1-hero-section.md new file mode 100644 index 0000000..3afc1d3 --- /dev/null +++ b/docs/stories/story-14.1-hero-section.md @@ -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 +
+
+

+ {{ __('home.tagline') }} +

+

+ {{ __('home.intro') }} +

+
+ + {{ __('home.cta_book') }} + + + {{ __('home.cta_services') }} + +
+
+
+``` + +### 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` diff --git a/docs/stories/story-14.2-about-section.md b/docs/stories/story-14.2-about-section.md new file mode 100644 index 0000000..e4913ec --- /dev/null +++ b/docs/stories/story-14.2-about-section.md @@ -0,0 +1,163 @@ +# Story 14.2: About Section with Lawyer Profile + +## Story + +**As a** website visitor +**I want to** see information about the lawyer behind Libra +**So that** I can trust the firm and understand who will be handling my case + +## Acceptance Criteria + +### AC1: Section Container + +**Given** a visitor scrolls past the hero section +**When** viewing the about section +**Then** display a section with: +- White (`#FFFFFF`) background to contrast with hero +- Section ID `id="about"` for anchor linking +- Adequate padding (64px vertical on desktop) + +### AC2: Section Heading + +**Given** the about section +**When** displayed +**Then** show a section heading: +- English: "About Us" or "Meet the Founder" +- Arabic: "من نحن" or "تعرف على المؤسسة" +- Typography: H2, SemiBold, Forest Green (`#2D322A`) + +### AC3: Lawyer Photo + +**Given** the about section +**When** displayed +**Then** show Huda Armouche's professional photo: +- Rounded corners or circular crop +- Appropriate size (200-300px width on desktop) +- Shadow for depth +- Alt text for accessibility + +### AC4: Lawyer Name and Title + +**Given** the about section +**When** displayed +**Then** show: +- Name (EN): "Huda Armouche" +- Name (AR): "هدى عرموش" +- Title (EN): "Attorney at Law" +- Title (AR): "محامية" +- Name: Bold, larger font +- Title: Regular, Warm Gold accent color + +### AC5: Bio Text + +**Given** the about section +**When** displayed +**Then** show a professional bio: +- English: "Huda Armouche founded Libra for Rights with a vision to create a legal institution woven from the fabric of society. With a commitment to justice and dignity, she leads a practice that investigates challenges, documents them, and transforms them into innovative legal solutions. Libra accompanies individuals and institutions with honesty and professionalism, striving to advance justice and empower women through law, research, and fieldwork." +- Arabic: "أسست هدى عرموش ليبرا للحقوق برؤية لإنشاء مؤسسة قانونية منسوجة من نسيج المجتمع. بالتزامها بالعدالة والكرامة، تقود ممارسة تحقق في التحديات وتوثقها وتحولها إلى حلول قانونية مبتكرة. تُرافق ليبرا الأفراد والمؤسسات بأمانة واحترافية، ساعية لتعزيز العدالة وتمكين المرأة من خلال القانون والبحث والعمل الميداني." +- Typography: Body text, readable line height +- Max-width for comfortable reading + +### AC6: Layout Structure + +**Given** different screen sizes +**When** viewing the about section: +- **Desktop:** Two-column layout (photo left/right, text opposite) +- **Tablet:** Two-column or stacked +- **Mobile:** Stacked (photo above, text below) + +### AC7: RTL Support + +**Given** Arabic language is selected +**When** viewing the about section +**Then** layout mirrors appropriately (photo on right in RTL if it was on left in LTR) + +## Technical Notes + +### Files to Modify/Create +- `resources/views/pages/home.blade.php` - Add about section +- `lang/en/home.php` - Add translations +- `lang/ar/home.php` - Add translations +- `public/images/huda-armouche.jpg` - Lawyer photo (to be added) + +### HTML Structure + +```blade +
+
+

+ {{ __('home.about_title') }} +

+ +
+ +
+ {{ __('home.lawyer_name') }} +
+ + +
+

+ {{ __('home.lawyer_name') }} +

+

+ {{ __('home.lawyer_title') }} +

+

+ {{ __('home.lawyer_bio') }} +

+
+
+
+
+``` + +### Translation Keys + +```php +// lang/en/home.php (additions) +'about_title' => 'Meet the Founder', +'lawyer_name' => 'Huda Armouche', +'lawyer_title' => 'Attorney at Law', +'lawyer_bio' => 'Huda Armouche founded Libra for Rights with a vision to create a legal institution woven from the fabric of society. With a commitment to justice and dignity, she leads a practice that investigates challenges, documents them, and transforms them into innovative legal solutions. Libra accompanies individuals and institutions with honesty and professionalism, striving to advance justice and empower women through law, research, and fieldwork.', + +// lang/ar/home.php (additions) +'about_title' => 'تعرف على المؤسِّسة', +'lawyer_name' => 'هدى عرموش', +'lawyer_title' => 'محامية', +'lawyer_bio' => 'أسست هدى عرموش ليبرا للحقوق برؤية لإنشاء مؤسسة قانونية منسوجة من نسيج المجتمع. بالتزامها بالعدالة والكرامة، تقود ممارسة تحقق في التحديات وتوثقها وتحولها إلى حلول قانونية مبتكرة. تُرافق ليبرا الأفراد والمؤسسات بأمانة واحترافية، ساعية لتعزيز العدالة وتمكين المرأة من خلال القانون والبحث والعمل الميداني.', +``` + +### Image Requirements + +- **File:** `public/images/huda-armouche.jpg` +- **Source:** WhatsApp Image 2026-01-07 at 5.34.23 PM.jpeg (provided by client) +- **Processing:** May need to crop/resize for optimal display +- **Recommended dimensions:** 400x400px minimum for retina displays + +## Dev Checklist + +- [ ] Copy and rename lawyer photo to `public/images/huda-armouche.jpg` +- [ ] Create about section HTML structure +- [ ] Add section heading with translations +- [ ] Implement photo display with proper styling +- [ ] Add name and title with correct typography +- [ ] Add bio text with translations +- [ ] Implement responsive layout (flex column on mobile, row on desktop) +- [ ] Test RTL layout mirrors correctly +- [ ] Verify image loads and displays correctly +- [ ] Ensure accessible alt text on image + +## Estimation + +**Complexity:** Low +**Risk:** Low - Content section with image + +## Dependencies + +- Story 14.1 (Hero) should be completed first for page structure +- Lawyer photo file must be placed in public/images/ diff --git a/docs/stories/story-14.3-services-section.md b/docs/stories/story-14.3-services-section.md new file mode 100644 index 0000000..b1181b6 --- /dev/null +++ b/docs/stories/story-14.3-services-section.md @@ -0,0 +1,218 @@ +# Story 14.3: Services Section + +## Story + +**As a** website visitor +**I want to** see what legal services Libra offers +**So that** I can determine if they can help with my legal needs + +## Acceptance Criteria + +### AC1: Section Container + +**Given** a visitor scrolls to the services section +**When** viewing the section +**Then** display with: +- Warm Cream (`#F4F1EA`) background +- Section ID `id="services"` for anchor linking +- Adequate padding (64px vertical on desktop) + +### AC2: Section Heading + +**Given** the services section +**When** displayed +**Then** show a section heading: +- English: "Our Services" +- Arabic: "خدماتنا" +- Optional subheading: "Comprehensive legal solutions for individuals and businesses" +- Typography: H2, SemiBold, Forest Green (`#2D322A`) +- Centered alignment + +### AC3: Four Service Cards + +**Given** the services section +**When** displayed +**Then** show 4 service cards: + +| Service | English | Arabic | Icon Suggestion | +|---------|---------|--------|-----------------| +| Consultations | Legal Consultations | الاستشارات القانونية | chat/message icon | +| Representation | Court Representation | التمثيل أمام المحاكم | gavel/scales icon | +| Litigation | Litigation Management | إدارة الدعاوى | document/folder icon | +| Contracts | Contract Services | خدمات العقود | file-text/pen icon | + +### AC4: Service Card Design + +**Given** each service card +**When** displayed +**Then** include: +- Icon: Warm Gold (`#A68966`) color, 48px size +- Title: Bold, Forest Green (`#2D322A`) +- Brief description (1-2 sentences) +- Card background: White (`#FFFFFF`) +- Subtle shadow for depth +- Border-radius: 8px +- Padding: 24px + +### AC5: Service Descriptions + +**Given** each service card +**When** displayed +**Then** show appropriate descriptions: + +**Legal Consultations:** +- EN: "Expert legal advice tailored to your specific situation and needs." +- AR: "استشارات قانونية متخصصة مصممة وفقاً لوضعك واحتياجاتك." + +**Court Representation:** +- EN: "Professional representation before courts and judicial bodies at all stages." +- AR: "تمثيل احترافي أمام المحاكم والهيئات القضائية في جميع المراحل." + +**Litigation Management:** +- EN: "Complete case management from pleadings and memoranda to appeals." +- AR: "إدارة كاملة للقضايا من اللوائح والمذكرات إلى الاستئنافات." + +**Contract Services:** +- EN: "Drafting, review, and legal compliance for all your contractual needs." +- AR: "صياغة ومراجعة العقود والامتثال القانوني لجميع احتياجاتكم التعاقدية." + +### AC6: Grid Layout + +**Given** different screen sizes +**When** viewing the services section: +- **Desktop (≥992px):** 4 columns (1 row of 4 cards) +- **Tablet (576-991px):** 2 columns (2 rows of 2 cards) +- **Mobile (<576px):** 1 column (4 rows, stacked) + +### AC7: RTL Support + +**Given** Arabic language is selected +**When** viewing the services section +**Then** cards maintain proper alignment and text direction + +## Technical Notes + +### Files to Modify +- `resources/views/pages/home.blade.php` - Add services section +- `lang/en/home.php` - Add translations +- `lang/ar/home.php` - Add translations + +### HTML Structure + +```blade +
+
+
+

+ {{ __('home.services_title') }} +

+

+ {{ __('home.services_subtitle') }} +

+
+ +
+ @foreach(['consultations', 'representation', 'litigation', 'contracts'] as $service) +
+
+ +
+

+ {{ __('home.services.' . $service . '.title') }} +

+

+ {{ __('home.services.' . $service . '.description') }} +

+
+ @endforeach +
+
+
+``` + +### Translation Keys + +```php +// lang/en/home.php (additions) +'services_title' => 'Our Services', +'services_subtitle' => 'Comprehensive legal solutions for individuals and businesses', +'services' => [ + 'consultations' => [ + 'icon' => 'chat-bubble-left-right', + 'title' => 'Legal Consultations', + 'description' => 'Expert legal advice tailored to your specific situation and needs.', + ], + 'representation' => [ + 'icon' => 'scale', + 'title' => 'Court Representation', + 'description' => 'Professional representation before courts and judicial bodies at all stages.', + ], + 'litigation' => [ + 'icon' => 'document-text', + 'title' => 'Litigation Management', + 'description' => 'Complete case management from pleadings and memoranda to appeals.', + ], + 'contracts' => [ + 'icon' => 'pencil-square', + 'title' => 'Contract Services', + 'description' => 'Drafting, review, and legal compliance for all your contractual needs.', + ], +], + +// lang/ar/home.php (additions) +'services_title' => 'خدماتنا', +'services_subtitle' => 'حلول قانونية شاملة للأفراد والشركات', +'services' => [ + 'consultations' => [ + 'icon' => 'chat-bubble-left-right', + 'title' => 'الاستشارات القانونية', + 'description' => 'استشارات قانونية متخصصة مصممة وفقاً لوضعك واحتياجاتك.', + ], + 'representation' => [ + 'icon' => 'scale', + 'title' => 'التمثيل أمام المحاكم', + 'description' => 'تمثيل احترافي أمام المحاكم والهيئات القضائية في جميع المراحل.', + ], + 'litigation' => [ + 'icon' => 'document-text', + 'title' => 'إدارة الدعاوى', + 'description' => 'إدارة كاملة للقضايا من اللوائح والمذكرات إلى الاستئنافات.', + ], + 'contracts' => [ + 'icon' => 'pencil-square', + 'title' => 'خدمات العقود', + 'description' => 'صياغة ومراجعة العقود والامتثال القانوني لجميع احتياجاتكم التعاقدية.', + ], +], +``` + +### Icon Options + +Using Heroicons (available in Flux UI): +- `chat-bubble-left-right` - Consultations +- `scale` - Court Representation +- `document-text` - Litigation +- `pencil-square` - Contracts + +## Dev Checklist + +- [ ] Create services section HTML structure +- [ ] Add section heading and subtitle with translations +- [ ] Implement 4 service cards with icons +- [ ] Add all service titles with translations +- [ ] Add all service descriptions with translations +- [ ] Style cards with proper shadows and borders +- [ ] Implement responsive grid layout +- [ ] Verify icons display correctly +- [ ] Test RTL layout +- [ ] Ensure proper spacing between cards + +## Estimation + +**Complexity:** Low +**Risk:** Low - Standard card grid layout + +## Dependencies + +- Stories 14.1 and 14.2 for page structure +- Flux UI icons available diff --git a/docs/stories/story-14.4-values-section.md b/docs/stories/story-14.4-values-section.md new file mode 100644 index 0000000..9971473 --- /dev/null +++ b/docs/stories/story-14.4-values-section.md @@ -0,0 +1,240 @@ +# Story 14.4: Values Section + +## Story + +**As a** website visitor +**I want to** understand Libra's core values +**So that** I can assess if their principles align with my expectations + +## Acceptance Criteria + +### AC1: Section Container + +**Given** a visitor scrolls to the values section +**When** viewing the section +**Then** display with: +- White (`#FFFFFF`) background +- Section ID `id="values"` for anchor linking +- Adequate padding (64px vertical on desktop) + +### AC2: Section Heading + +**Given** the values section +**When** displayed +**Then** show a section heading: +- English: "Our Values" +- Arabic: "قيمنا" +- Optional subheading about values starting in the field and returning to the people +- Typography: H2, SemiBold, Forest Green (`#2D322A`) +- Centered alignment + +### AC3: Six Value Items + +**Given** the values section +**When** displayed +**Then** show 6 values: + +| # | English | Arabic | Icon Suggestion | +|---|---------|--------|-----------------| +| 1 | Integrity | النزاهة | shield-check | +| 2 | Justice | العدالة | scale | +| 3 | Knowledge | المعرفة | academic-cap | +| 4 | Women's Empowerment | تمكين المرأة | user-group / heart | +| 5 | Professionalism | الاحترافية | briefcase | +| 6 | Social Innovation | الابتكار الاجتماعي | light-bulb | + +### AC4: Value Item Design + +**Given** each value item +**When** displayed +**Then** include: +- Icon: Warm Gold (`#A68966`) color, 40-48px size +- Value name: Bold, Forest Green (`#2D322A`) +- Clean, minimal design (no heavy descriptions) +- Centered alignment within item +- Optional: subtle hover effect + +### AC5: Grid Layout + +**Given** different screen sizes +**When** viewing the values section: +- **Desktop (≥992px):** 6 columns (1 row) or 3 columns (2 rows) +- **Tablet (576-991px):** 3 columns (2 rows) +- **Mobile (<576px):** 2 columns (3 rows) + +### AC6: Visual Style Options + +**Given** the values display +**When** implemented +**Then** choose one of these styles: +- **Option A:** Simple icon + text (minimal) +- **Option B:** Card-based with subtle background +- **Option C:** Icon badges with circular background + +Recommendation: Option A (minimal) or Option C (icon badges) for elegance + +### AC7: RTL Support + +**Given** Arabic language is selected +**When** viewing the values section +**Then** items maintain proper alignment and text direction + +## Technical Notes + +### Files to Modify +- `resources/views/pages/home.blade.php` - Add values section +- `lang/en/home.php` - Add translations +- `lang/ar/home.php` - Add translations + +### HTML Structure (Option A - Minimal) + +```blade +
+
+
+

+ {{ __('home.values_title') }} +

+

+ {{ __('home.values_subtitle') }} +

+
+ +
+ @foreach(['integrity', 'justice', 'knowledge', 'empowerment', 'professionalism', 'innovation'] as $value) +
+
+ +
+

+ {{ __('home.values.' . $value . '.title') }} +

+
+ @endforeach +
+
+
+``` + +### HTML Structure (Option C - Icon Badges) + +```blade +
+
+
+

+ {{ __('home.values_title') }} +

+
+ +
+ @foreach(['integrity', 'justice', 'knowledge', 'empowerment', 'professionalism', 'innovation'] as $value) +
+
+ +
+

+ {{ __('home.values.' . $value . '.title') }} +

+
+ @endforeach +
+
+
+``` + +### Translation Keys + +```php +// lang/en/home.php (additions) +'values_title' => 'Our Values', +'values_subtitle' => 'These start in the field and return to the people', +'values' => [ + 'integrity' => [ + 'icon' => 'shield-check', + 'title' => 'Integrity', + ], + 'justice' => [ + 'icon' => 'scale', + 'title' => 'Justice', + ], + 'knowledge' => [ + 'icon' => 'academic-cap', + 'title' => 'Knowledge', + ], + 'empowerment' => [ + 'icon' => 'heart', + 'title' => "Women's Empowerment", + ], + 'professionalism' => [ + 'icon' => 'briefcase', + 'title' => 'Professionalism', + ], + 'innovation' => [ + 'icon' => 'light-bulb', + 'title' => 'Social Innovation', + ], +], + +// lang/ar/home.php (additions) +'values_title' => 'قيمنا', +'values_subtitle' => 'تبدأ من الميدان وتعود إلى الناس', +'values' => [ + 'integrity' => [ + 'icon' => 'shield-check', + 'title' => 'النزاهة', + ], + 'justice' => [ + 'icon' => 'scale', + 'title' => 'العدالة', + ], + 'knowledge' => [ + 'icon' => 'academic-cap', + 'title' => 'المعرفة', + ], + 'empowerment' => [ + 'icon' => 'heart', + 'title' => 'تمكين المرأة', + ], + 'professionalism' => [ + 'icon' => 'briefcase', + 'title' => 'الاحترافية', + ], + 'innovation' => [ + 'icon' => 'light-bulb', + 'title' => 'الابتكار الاجتماعي', + ], +], +``` + +### Icon Options (Heroicons) + +- `shield-check` - Integrity +- `scale` - Justice +- `academic-cap` - Knowledge +- `heart` - Women's Empowerment +- `briefcase` - Professionalism +- `light-bulb` - Social Innovation + +## Dev Checklist + +- [ ] Create values section HTML structure +- [ ] Add section heading with translations +- [ ] Add optional subtitle with translations +- [ ] Implement 6 value items with icons +- [ ] Add all value titles with translations (EN + AR) +- [ ] Choose and implement visual style (minimal or badges) +- [ ] Implement responsive grid layout +- [ ] Verify icons display correctly +- [ ] Test RTL layout +- [ ] Ensure even spacing and alignment + +## Estimation + +**Complexity:** Low +**Risk:** Low - Simple grid of icons and text + +## Dependencies + +- Previous stories for page structure +- Flux UI icons available diff --git a/docs/stories/story-14.5-latest-posts-section.md b/docs/stories/story-14.5-latest-posts-section.md new file mode 100644 index 0000000..8340e8c --- /dev/null +++ b/docs/stories/story-14.5-latest-posts-section.md @@ -0,0 +1,246 @@ +# Story 14.5: Latest Posts Section + +## Story + +**As a** website visitor +**I want to** see recent legal articles and updates on the home page +**So that** I can access valuable legal content and see that the firm is active + +## Acceptance Criteria + +### AC1: Section Container + +**Given** a visitor scrolls to the latest posts section +**When** viewing the section +**Then** display with: +- Warm Cream (`#F4F1EA`) background +- Section ID `id="posts"` for anchor linking +- Adequate padding (64px vertical on desktop) + +### AC2: Section Heading + +**Given** the latest posts section +**When** displayed +**Then** show a section heading: +- English: "Latest Articles" or "Legal Insights" +- Arabic: "أحدث المقالات" or "رؤى قانونية" +- Typography: H2, SemiBold, Forest Green (`#2D322A`) +- Centered alignment + +### AC3: Display 3 Latest Posts + +**Given** the posts section +**When** posts exist in the database +**Then** display the 3 most recent published posts showing: +- Post title +- Publication date +- Brief excerpt (first 100-150 characters of body) +- "Read More" link + +### AC4: Post Card Design + +**Given** each post card +**When** displayed +**Then** include: +- Card background: White (`#FFFFFF`) +- Title: Bold, Forest Green (`#2D322A`), clickable link +- Date: Small text, muted color +- Excerpt: Body text, truncated with ellipsis +- "Read More" link: Warm Gold (`#A68966`) +- Subtle shadow and border-radius +- Hover effect on card or title + +### AC5: Empty State + +**Given** the posts section +**When** no published posts exist +**Then** either: +- Hide the entire section, OR +- Show a message: "Articles coming soon" / "المقالات قريباً" + +### AC6: View All Link + +**Given** the posts section +**When** posts are displayed +**Then** show a "View All Articles" / "عرض جميع المقالات" link: +- Links to `/posts` +- Styled as secondary button or text link with arrow +- Positioned below the post cards, centered + +### AC7: Grid Layout + +**Given** different screen sizes +**When** viewing the posts section: +- **Desktop (≥992px):** 3 columns (1 row of 3 cards) +- **Tablet (576-991px):** 2 columns + 1 below, or 3 columns +- **Mobile (<576px):** 1 column (3 rows, stacked) + +### AC8: RTL Support + +**Given** Arabic language is selected +**When** viewing the posts section +**Then** cards and text align right-to-left correctly + +### AC9: Dynamic Data + +**Given** the posts section +**When** rendered +**Then** query posts from database: +```php +Post::where('status', 'published') + ->latest() + ->take(3) + ->get() +``` + +## Technical Notes + +### Files to Modify +- `resources/views/pages/home.blade.php` - Add posts section with data query +- `lang/en/home.php` - Add translations +- `lang/ar/home.php` - Add translations + +### Controller/Page Component + +The home page needs to pass posts data. Options: +1. Use a Livewire/Volt component to fetch posts +2. Pass posts via route closure or controller + +**Option 1: Volt Component (Recommended)** + +Convert `home.blade.php` to a Volt component: + +```php + Post::where('status', 'published') + ->latest() + ->take(3) + ->get(), + ]; + } +}; ?> +``` + +**Option 2: Route with data** + +```php +// routes/web.php +Route::get('/', function () { + return view('pages.home', [ + 'latestPosts' => Post::where('status', 'published') + ->latest() + ->take(3) + ->get(), + ]); +})->name('home'); +``` + +### HTML Structure + +```blade +@if($latestPosts->count() > 0) +
+
+
+

+ {{ __('home.posts_title') }} +

+
+ +
+ @foreach($latestPosts as $post) + + @endforeach +
+ +
+ + {{ __('home.view_all_posts') }} + +
+
+
+@endif +``` + +### Translation Keys + +```php +// lang/en/home.php (additions) +'posts_title' => 'Latest Articles', +'read_more' => 'Read More', +'view_all_posts' => 'View All Articles', +'posts_empty' => 'Articles coming soon', + +// lang/ar/home.php (additions) +'posts_title' => 'أحدث المقالات', +'read_more' => 'اقرأ المزيد', +'view_all_posts' => 'عرض جميع المقالات', +'posts_empty' => 'المقالات قريباً', +``` + +### Post Model Reference + +Existing Post model fields: +- `title` - Post title (bilingual stored via JSON or separate fields) +- `body` - Post content +- `status` - 'draft' or 'published' +- `created_at` - Timestamp + +### Date Formatting + +Use Laravel's `translatedFormat()` for bilingual dates: +```php +$post->created_at->translatedFormat('j F Y') +// English: "15 January 2026" +// Arabic: "15 يناير 2026" +``` + +## Dev Checklist + +- [ ] Determine data passing method (Volt component or route) +- [ ] Create posts section HTML structure +- [ ] Add section heading with translations +- [ ] Implement post card design +- [ ] Query and display 3 latest published posts +- [ ] Add date formatting with translation support +- [ ] Implement excerpt truncation +- [ ] Add "Read More" links to individual posts +- [ ] Add "View All" link to posts index +- [ ] Handle empty state (hide section or show message) +- [ ] Implement responsive grid layout +- [ ] Test RTL layout +- [ ] Verify links work correctly + +## Estimation + +**Complexity:** Medium (requires data fetching) +**Risk:** Low - Uses existing Post model and routes + +## Dependencies + +- Previous stories for page structure +- Existing Post model +- Posts routes (`posts.index`, `posts.show`) diff --git a/docs/stories/story-14.6-footer-update.md b/docs/stories/story-14.6-footer-update.md new file mode 100644 index 0000000..da9ecc6 --- /dev/null +++ b/docs/stories/story-14.6-footer-update.md @@ -0,0 +1,183 @@ +# Story 14.6: Footer Contact Information Update + +## Story + +**As a** website visitor +**I want to** see accurate contact information in the footer +**So that** I can reach out to Libra through the correct phone number and address + +## Acceptance Criteria + +### AC1: Update Phone Number + +**Given** the website footer +**When** displayed +**Then** show the phone number: `+970599353502` +- Clickable `tel:` link for mobile devices +- Properly formatted for readability + +### AC2: Update Address + +**Given** the website footer +**When** displayed +**Then** show the address: +- Arabic: "العمارة الأمريكية - بجانب الشني - الطابق الرابع" +- English: "American Building - Next to Al-Shini - 4th Floor" +- Note: City/region may need to be added if known + +### AC3: Phone Display Format + +**Given** the phone number in footer +**When** displayed +**Then** format as: +- Display: `+970 599 353 502` (with spaces for readability) +- Link: `tel:+970599353502` (no spaces) + +### AC4: Contact Section Layout + +**Given** the footer contact area +**When** displayed +**Then** include: +- Phone icon + phone number (clickable) +- Location/map icon + address +- Optionally: Email if available + +### AC5: RTL Support + +**Given** Arabic language is selected +**When** viewing the footer +**Then** address displays in Arabic and layout adjusts for RTL + +### AC6: Consistency Check + +**Given** the footer update +**When** completed +**Then** ensure footer displays correctly on: +- Home page +- All public pages (posts, booking, etc.) +- Auth pages (if footer is shown) + +## Technical Notes + +### File to Modify +- `resources/views/components/layouts/public.blade.php` - Main footer location +- OR `resources/views/components/footer.blade.php` - If footer is a separate component + +### Current Footer Location + +Check these potential locations: +``` +resources/views/components/layouts/public.blade.php +resources/views/components/footer.blade.php +resources/views/components/public/footer.blade.php +``` + +### HTML Structure Update + +```blade + +``` + +### Translation Keys + +```php +// lang/en/footer.php (create or update existing) +return [ + 'tagline' => 'Committed to Justice – Grounded in Dignity – Driven to Advocate', + 'contact_title' => 'Contact Us', + 'address' => 'American Building - Next to Al-Shini - 4th Floor', + 'links_title' => 'Quick Links', + 'link_booking' => 'Book a Consultation', + 'link_posts' => 'Articles', + 'link_login' => 'Client Login', + 'copyright' => '© :year Libra for Rights. All rights reserved.', +]; + +// lang/ar/footer.php (create or update existing) +return [ + 'tagline' => 'ملتزمون بالعدالة – متجذرون بالكرامة – مدفوعون للدفاع', + 'contact_title' => 'تواصل معنا', + 'address' => 'العمارة الأمريكية - بجانب الشني - الطابق الرابع', + 'links_title' => 'روابط سريعة', + 'link_booking' => 'احجز استشارة', + 'link_posts' => 'المقالات', + 'link_login' => 'دخول العملاء', + 'copyright' => '© :year ليبرا للحقوق. جميع الحقوق محفوظة.', +]; +``` + +### Contact Information Summary + +| Field | Value | +|-------|-------| +| Phone | +970599353502 | +| Phone (formatted) | +970 599 353 502 | +| Address (AR) | العمارة الأمريكية - بجانب الشني - الطابق الرابع | +| Address (EN) | American Building - Next to Al-Shini - 4th Floor | + +## Dev Checklist + +- [ ] Locate current footer implementation +- [ ] Update phone number to +970599353502 +- [ ] Add clickable tel: link for phone +- [ ] Update address with bilingual support +- [ ] Add appropriate icons (phone, map-pin) +- [ ] Create/update translation files for footer +- [ ] Test footer displays on all public pages +- [ ] Test RTL layout for Arabic +- [ ] Verify phone link works on mobile +- [ ] Ensure visual consistency with existing footer design + +## Estimation + +**Complexity:** Low +**Risk:** Low - Simple content update + +## Dependencies + +- Existing footer component/layout +- No dependencies on other Epic 14 stories (can be done in parallel)