From 04fa6b399c36d0d5db594529c583b3a87ad757ac Mon Sep 17 00:00:00 2001 From: Naser Mansour Date: Sun, 11 Jan 2026 20:28:24 +0200 Subject: [PATCH] added epic 16 and stories to creat the about us page --- docs/epics/epic-16-about-us-page.md | 273 +++++++++++++++ docs/epics/index.md | 4 +- .../story-16.1-about-page-layout-hero.md | 196 +++++++++++ .../story-16.2-vision-mission-section.md | 240 +++++++++++++ docs/stories/story-16.3-values-section.md | 229 ++++++++++++ docs/stories/story-16.4-goals-section.md | 179 ++++++++++ .../story-16.5-legal-services-section.md | 325 ++++++++++++++++++ .../stories/story-16.6-scholarship-section.md | 185 ++++++++++ 8 files changed, 1630 insertions(+), 1 deletion(-) create mode 100644 docs/epics/epic-16-about-us-page.md create mode 100644 docs/stories/story-16.1-about-page-layout-hero.md create mode 100644 docs/stories/story-16.2-vision-mission-section.md create mode 100644 docs/stories/story-16.3-values-section.md create mode 100644 docs/stories/story-16.4-goals-section.md create mode 100644 docs/stories/story-16.5-legal-services-section.md create mode 100644 docs/stories/story-16.6-scholarship-section.md diff --git a/docs/epics/epic-16-about-us-page.md b/docs/epics/epic-16-about-us-page.md new file mode 100644 index 0000000..1ee8fa3 --- /dev/null +++ b/docs/epics/epic-16-about-us-page.md @@ -0,0 +1,273 @@ +# Epic 16: About Us Page + +## Epic Goal + +Create a comprehensive "About Us" page that presents Libra for Rights' identity, vision, mission, values, goals, legal services, strategy, and scholarship aspiration, providing visitors with a complete understanding of the organization's purpose and offerings. + +## Epic Description + +### Existing System Context + +- **Current state:** No dedicated About Us page exists; some content shown on home page +- **Technology stack:** Laravel 12, Livewire 3/Volt, Flux UI, Tailwind CSS 4 +- **Route to add:** `/about` (public) +- **Public layout:** `resources/views/components/layouts/public.blade.php` +- **Brand colors:** Dark Forest Green (#2D3624), Warm Gold (#A68966), Warm Cream (#F4F1EA) + +### Content Source + +All content derived from "LIBRA For Rights - Vision, Mission, Values and Goals" document: + +**Identity:** +- A for-profit, "socialism" legal institution that uses research as a tool of power +- Not an NGO - seeks to establish a trusted institution as an alternative to civil society organizations +- Develops the concept of "al-Awnah" (Palestinian cooperative) within legal/human rights framework + +**Vision:** +- Libra is woven from the fabric of society, investigating problems, documenting them, uncovering their roots, and offering solutions to mend social pains through collaboration and field research rooted in real engagement with the market. + +**Mission (Three-fold):** +1. **For Itself:** Works at the heart of society capturing its pulse, investigating challenges, documenting them, transforming them into knowledge and innovative legal solutions. Accompanies individuals and institutions with honesty and professionalism, striving to advance justice, empower women, and foster a healthy business environment. +2. **For Society:** Aspires to establish the "Libra Scholarship for Law and Palestinian Arts", reconnect society with its history and legal heritage, and serve as a trusted partner to the judiciary. +3. **For Palestinians in Diaspora:** Platform for listening to Palestinians abroad, strengthening their connection to Palestinian land by helping research families, history, and lands. + +**Values:** +- Integrity (النزاهة) +- Justice (العدالة) +- Knowledge (المعرفة) +- Women's Empowerment (تمكين المرأة) +- Professionalism (الاحترافية) +- Social Innovation (الابتكار الاجتماعي) + +**Goals (7):** +1. Supporting Palestinian legal professionals and developing their professional and research capabilities +2. Documenting and analyzing community cases to produce legal knowledge grounded in reality +3. Preparing and writing research papers that address contemporary legal issues in depth +4. Launching legal awareness programs that raise community awareness of rights and obligations +5. Strengthening the connection between society and its legal history through knowledge-based and cultural initiatives +6. Developing innovative legal solutions based on field research reflecting the Palestinian social context +7. Promoting justice and empowering women through specialized and accessible legal services + +**Legal Services:** +- Legal advice +- Court representation and litigation management +- Pleadings, memoranda, and legal appeals +- Women's and family law (divorce, alimony, custody, protection from violence) +- Civil and commercial disputes, partnership cases, financial claims +- Business sector services (contract drafting/review, governance, compliance, arbitration, ADR) + +**Strategy:** +- Integrating legal practice with research-driven insight +- Engaging directly with community realities +- Financial sustainability while investing in knowledge production, women's empowerment, capacity-building +- Strategic partnerships and professional development +- Working toward research center accreditation + +**Scholarship Aspiration:** +- Libra Scholarship for Law and Palestinian Arts +- Empowering students to present Palestinian messages globally +- Opening discussions about Palestinian situation +- Protecting intellectual property rights +- Enabling participation in local and international exhibitions + +### Enhancement Details + +**Page Sections:** + +1. **Hero Section** + - Page title: "About Us" / "من نحن" + - Subtitle with tagline + - Brief identity statement + +2. **Vision Section** + - Vision statement with decorative background + - Full-width elegant presentation + +3. **Mission Section** + - Three mission cards (For Itself, For Society, For Diaspora) + - Clear visual distinction between each + - Icons for each category + +4. **Values Section** + - 6 values displayed as cards with icons + - Both Arabic and English labels + +5. **Goals Section** + - 7 goals presented as numbered list or cards + - Visually organized for easy scanning + +6. **Legal Services Section** + - Service categories with descriptions + - Clear presentation of practice areas + +7. **Scholarship Aspiration Section** + - Vision for the scholarship program + - Art and culture focus highlighted + +**Success criteria:** +- About Us page accessible at `/about` +- All 7 sections display correctly +- Professional appearance consistent with brand guidelines +- Responsive design (mobile, tablet, desktop) +- Bilingual support (Arabic RTL / English LTR) +- Navigation includes About Us link +- All text in translation files + +--- + +## Stories + +### Story 16.1: About Page Layout & Hero +**File:** `story-16.1-about-page-layout-hero.md` + +Create the About Us page route, layout structure, and hero section with page title and identity statement. + +### Story 16.2: Vision & Mission Section +**File:** `story-16.2-vision-mission-section.md` + +Implement the vision statement section and the three-fold mission (For Itself, For Society, For Diaspora) with card-based layout. + +### Story 16.3: Values Section +**File:** `story-16.3-values-section.md` + +Display the 6 core values (Integrity, Justice, Knowledge, Women's Empowerment, Professionalism, Social Innovation) as visually appealing cards with icons. + +### Story 16.4: Goals Section +**File:** `story-16.4-goals-section.md` + +Present the 7 organizational goals in a scannable, numbered format. + +### Story 16.5: Legal Services Section +**File:** `story-16.5-legal-services-section.md` + +Display all legal service offerings organized by category (consultations, litigation, family law, business services). + +### Story 16.6: Scholarship Aspiration Section +**File:** `story-16.6-scholarship-section.md` + +Present the Libra Scholarship for Law and Palestinian Arts aspiration, highlighting the art/culture mission. + +--- + +## Compatibility Requirements + +- [x] Existing navigation structure - add About Us link +- [x] RTL (Arabic) and LTR (English) support required +- [x] Mobile responsiveness required +- [x] Brand color scheme (Dark Forest Green, Warm Gold, Warm Cream) +- [x] Public layout used +- [x] No authentication required + +## Technical Considerations + +### Route Addition + +```php +// routes/web.php +Route::get('/about', function () { + return view('pages.about'); +})->name('about'); +``` + +### Layout Structure + +``` ++------------------------------------------+ +| NAVIGATION | ++------------------------------------------+ +| | +| HERO SECTION | +| Title: About Us / من نحن | +| Subtitle + Identity Statement | +| | ++------------------------------------------+ +| | +| VISION SECTION | +| "Libra is woven from..." | +| | ++------------------------------------------+ +| | +| MISSION SECTION | +| [For Itself] [For Society] [Diaspora] | +| | ++------------------------------------------+ +| | +| VALUES SECTION | +| [Icon] [Icon] [Icon] | +| [Icon] [Icon] [Icon] | +| | ++------------------------------------------+ +| | +| GOALS SECTION | +| 1. Goal one | +| 2. Goal two... | +| | ++------------------------------------------+ +| | +| LEGAL SERVICES SECTION | +| [Category] [Category] [Category] | +| | ++------------------------------------------+ +| | +| SCHOLARSHIP SECTION | +| Vision for Libra Scholarship | +| | ++------------------------------------------+ +| FOOTER | ++------------------------------------------+ +``` + +### Color Usage + +```css +/* Hero background */ +--color-background: #F4F1EA; /* Warm Cream */ + +/* Section alternating */ +--color-card: #FFFFFF; /* White */ +--color-background: #F4F1EA; /* Warm Cream */ + +/* Accent elements */ +--color-accent: #A68966; /* Warm Gold */ + +/* Text */ +--color-text: #2D322A; /* Forest Green */ +``` + +### Translation Files + +New files to create: +- `lang/en/about.php` +- `lang/ar/about.php` + +--- + +## Risk Mitigation + +- **Primary Risk:** Large amount of content may overwhelm visitors +- **Mitigation:** Use collapsible sections, clear visual hierarchy, and scannable formatting +- **Rollback Plan:** Page can be hidden from navigation if needed + +## Definition of Done + +- [ ] All 6 stories completed with acceptance criteria met +- [ ] About Us page accessible at `/about` +- [ ] Navigation updated with About Us link +- [ ] Hero section displays title and identity statement +- [ ] Vision section displays full vision statement +- [ ] Mission section displays all three mission categories +- [ ] Values section displays 6 values with icons +- [ ] Goals section displays 7 goals +- [ ] Legal services section displays all service categories +- [ ] Scholarship section displays aspiration content +- [ ] 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 + +## Dependencies + +- Epic 12 (Branding Refresh) completed - for consistent colors +- Epic 14 (Home Page) completed - for consistent styling patterns +- Public layout available diff --git a/docs/epics/index.md b/docs/epics/index.md index b6b316a..6ec8d48 100644 --- a/docs/epics/index.md +++ b/docs/epics/index.md @@ -32,8 +32,9 @@ This document provides an index of all epics for the Libra Law Firm platform dev | 13 | [Auth Page Design Enhancement](./epic-13-auth-page-design.md) | 5 | Medium | Epic 12 | | 14 | [Home Page Redesign](./epic-14-home-page-redesign.md) | 6 | Medium | Epic 12 | | 15 | [Potential Clients Management](./epic-15-potential-clients.md) | 3 | Medium | Epic 6 | +| 16 | [About Us Page](./epic-16-about-us-page.md) | 6 | Medium | Epic 12, 14 | -**Total Stories:** 92 +**Total Stories:** 98 --- @@ -82,6 +83,7 @@ Epic 1 (Core Foundation) └── Epic 12 (Branding Refresh) └── Epic 13 (Auth Page Design) └── Epic 14 (Home Page Redesign) + └── Epic 16 (About Us Page) ``` --- diff --git a/docs/stories/story-16.1-about-page-layout-hero.md b/docs/stories/story-16.1-about-page-layout-hero.md new file mode 100644 index 0000000..05d8a37 --- /dev/null +++ b/docs/stories/story-16.1-about-page-layout-hero.md @@ -0,0 +1,196 @@ +# Story 16.1: About Page Layout & Hero Section + +## Story + +**As a** website visitor +**I want to** access a dedicated About Us page +**So that** I can learn about Libra for Rights' identity and purpose + +## Acceptance Criteria + +### AC1: Route & Navigation + +**Given** a visitor on any page +**When** they look at the main navigation +**Then** an "About Us" / "من نحن" link is visible + +**When** they click the About Us link +**Then** they are navigated to `/about` + +### AC2: Page Structure + +**Given** a visitor accesses `/about` +**When** the page loads +**Then** the page uses the public layout with: +- Navigation header +- Main content area +- Footer + +### AC3: Hero Section Container + +**Given** the About Us page loads +**When** displayed +**Then** show a hero section with: +- Dark Forest Green (`#2D3624`) background +- Full-width container +- Adequate vertical padding (80px desktop, 60px tablet, 40px mobile) +- Centered white text + +### AC4: Page Title + +**Given** the hero section +**When** viewed in English +**Then** display title: "About Us" + +**When** viewed in Arabic +**Then** display title: "من نحن" + +- Typography: H1, Bold, White +- Responsive font size: 3rem desktop, 2.5rem tablet, 2rem mobile + +### AC5: Tagline Display + +**Given** the hero section below the title +**When** displayed +**Then** show the tagline: +- English: "Committed to Justice – Grounded in Dignity – Driven to Advocate" +- Arabic: "ملتزمون بالعدالة – متجذرون بالكرامة – مدفوعون للدفاع" +- Typography: H2, Regular, White with opacity +- Max-width: 800px centered + +### AC6: Identity Statement + +**Given** the hero section below the tagline +**When** displayed +**Then** show the identity statement: +- English: "A legal institution woven from the fabric of society, using research as a tool of power to serve justice." +- Arabic: "مؤسسة قانونية منسوجة من نسيج المجتمع، تستخدم البحث كأداة قوة لخدمة العدالة." +- Typography: Body text, Regular, White +- Max-width: 700px centered + +### AC7: 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):** Compact spacing, stacked layout + +### AC8: RTL Support + +**Given** Arabic language is selected +**When** viewing the page +**Then** all text and elements align right-to-left correctly + +## Technical Notes + +### Files to Create + +- `resources/views/pages/about.blade.php` - Main page +- `lang/en/about.php` - English translations +- `lang/ar/about.php` - Arabic translations + +### Route to Add + +```php +// routes/web.php +Route::get('/about', function () { + return view('pages.about'); +})->name('about'); +``` + +### Navigation Update + +Update `resources/views/components/layouts/public.blade.php` to include About Us link: + +```blade +{{ __('nav.about') }} +``` + +### HTML Structure + +```blade + + {{-- Hero Section --}} +
+
+

+ {{ __('about.title') }} +

+

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

+

+ {{ __('about.identity') }} +

+
+
+ + {{-- Vision Section - Story 16.2 --}} + + {{-- Mission Section - Story 16.2 --}} + + {{-- Values Section - Story 16.3 --}} + + {{-- Goals Section - Story 16.4 --}} + + {{-- Services Section - Story 16.5 --}} + + {{-- Scholarship Section - Story 16.6 --}} + +``` + +### Translation Keys + +```php +// lang/en/about.php +return [ + 'title' => 'About Us', + 'tagline' => 'Committed to Justice – Grounded in Dignity – Driven to Advocate', + 'identity' => 'A legal institution woven from the fabric of society, using research as a tool of power to serve justice.', +]; + +// lang/ar/about.php +return [ + 'title' => 'من نحن', + 'tagline' => 'ملتزمون بالعدالة – متجذرون بالكرامة – مدفوعون للدفاع', + 'identity' => 'مؤسسة قانونية منسوجة من نسيج المجتمع، تستخدم البحث كأداة قوة لخدمة العدالة.', +]; +``` + +### Navigation Translation Keys + +```php +// Add to lang/en/nav.php +'about' => 'About Us', + +// Add to lang/ar/nav.php +'about' => 'من نحن', +``` + +## Dev Checklist + +- [ ] Add route for `/about` in `routes/web.php` +- [ ] Create `resources/views/pages/about.blade.php` +- [ ] Create `lang/en/about.php` with initial translations +- [ ] Create `lang/ar/about.php` with initial translations +- [ ] Add About Us link to navigation +- [ ] Implement hero section with dark green background +- [ ] Style page title with correct typography +- [ ] Add tagline below title +- [ ] Add identity statement +- [ ] Test responsive layout (mobile, tablet, desktop) +- [ ] Test RTL layout (Arabic) +- [ ] Test LTR layout (English) +- [ ] Verify navigation link works correctly + +## Estimation + +**Complexity:** Low +**Risk:** Low - Standard page creation + +## Dependencies + +- Public layout exists +- Navigation component exists +- Brand colors defined in CSS diff --git a/docs/stories/story-16.2-vision-mission-section.md b/docs/stories/story-16.2-vision-mission-section.md new file mode 100644 index 0000000..b289982 --- /dev/null +++ b/docs/stories/story-16.2-vision-mission-section.md @@ -0,0 +1,240 @@ +# Story 16.2: Vision & Mission Section + +## Story + +**As a** website visitor +**I want to** read Libra's vision and mission statements +**So that** I understand the organization's purpose and who they serve + +## Acceptance Criteria + +### AC1: Vision Section Container + +**Given** the About Us page below the hero +**When** displayed +**Then** show a vision section with: +- White (`#FFFFFF`) background +- Full-width container +- Adequate vertical padding (60px desktop, 48px tablet, 32px mobile) + +### AC2: Vision Section Header + +**Given** the vision section +**When** displayed +**Then** show section header: +- English: "Our Vision" +- Arabic: "رؤيتنا" +- Typography: H2, Bold, Forest Green (`#2D322A`) +- Warm Gold underline accent + +### AC3: Vision Statement + +**Given** the vision section +**When** displayed +**Then** show the full vision statement: +- English: "Libra is woven from the fabric of society, investigating problems, documenting them, uncovering their roots, and offering solutions to mend social pains, even the small ones, through collaboration and by developing field research rooted in real engagement with the market." +- Arabic: "ليبرا منسوجة من نسيج المجتمع، تحقق في المشكلات، وتوثقها، وتكشف جذورها، وتقدم حلولاً لمعالجة الآلام الاجتماعية، حتى الصغيرة منها، من خلال التعاون وتطوير البحث الميداني المتجذر في التفاعل الحقيقي مع السوق." +- Typography: Body text, Regular, Forest Green +- Max-width: 900px centered +- Elegant quote styling (optional: large decorative quotes) + +### AC4: Mission Section Container + +**Given** the About Us page below the vision +**When** displayed +**Then** show a mission section with: +- Warm Cream (`#F4F1EA`) background +- Full-width container +- Adequate vertical padding (60px desktop, 48px tablet, 32px mobile) + +### AC5: Mission Section Header + +**Given** the mission section +**When** displayed +**Then** show section header: +- English: "Our Mission" +- Arabic: "مهمتنا" +- Typography: H2, Bold, Forest Green (`#2D322A`) +- Warm Gold underline accent + +### AC6: Mission Cards - Three Categories + +**Given** the mission section +**When** displayed +**Then** show 3 mission cards in a responsive grid: + +**Card 1 - For Itself:** +- Icon: Building/Institution icon +- Title (EN): "For Our Institution" +- Title (AR): "لمؤسستنا" +- Content (EN): "Libra works at the heart of society capturing its pulse, investigating its challenges, documenting them, and transforming them into knowledge and innovative legal solutions. We accompany individuals and institutions with honesty and professionalism, striving to advance justice, empower women, and foster a healthy business environment through law, research, and fieldwork." +- Content (AR): "تعمل ليبرا في قلب المجتمع ملتقطةً نبضه، محققةً في تحدياته، موثقةً إياها، ومحولةً لها إلى معرفة وحلول قانونية مبتكرة. نرافق الأفراد والمؤسسات بأمانة واحترافية، ساعين لتحقيق العدالة، وتمكين المرأة، وتعزيز بيئة أعمال صحية من خلال القانون والبحث والعمل الميداني." + +**Card 2 - For Society:** +- Icon: Community/People icon +- Title (EN): "For Society" +- Title (AR): "للمجتمع" +- Content (EN): "Libra aspires to establish the 'Libra Scholarship for Law and Palestinian Arts', reconnect society with its history and legal heritage, and serve as a trusted partner to the judiciary." +- Content (AR): "تطمح ليبرا إلى إنشاء 'منحة ليبرا للقانون والفنون الفلسطينية'، وإعادة ربط المجتمع بتاريخه وإرثه القانوني، والعمل كشريك موثوق للقضاء." + +**Card 3 - For Diaspora:** +- Icon: Globe/Connection icon +- Title (EN): "For Palestinians in the Diaspora" +- Title (AR): "للفلسطينيين في الشتات" +- Content (EN): "Libra is a platform for listening to Palestinians in the diaspora and strengthening their connection to the Palestinian land by helping them research and investigate their families and history, research and investigate their lands, and providing them with a platform to hear their views on the Palestinian issue and Palestinian communities abroad." +- Content (AR): "ليبرا منصة للاستماع إلى الفلسطينيين في الشتات وتعزيز ارتباطهم بالأرض الفلسطينية من خلال مساعدتهم في البحث والتحقيق في عائلاتهم وتاريخهم، والبحث في أراضيهم، وتوفير منصة للاستماع إلى آرائهم حول القضية الفلسطينية والمجتمعات الفلسطينية في الخارج." + +### AC7: Mission Card Styling + +**Given** each mission card +**When** displayed +**Then** style with: +- White background +- Subtle shadow +- Rounded corners (8px) +- Icon: Warm Gold color, 48px size +- Title: H3, Bold, Forest Green +- Content: Body text, Forest Green +- Padding: 24px + +### AC8: Responsive Grid + +**Given** different screen sizes +**When** viewing mission cards: +- **Desktop (≥992px):** 3 columns side by side +- **Tablet (768-991px):** 2 columns (third card spans full or below) +- **Mobile (<768px):** 1 column stacked + +### AC9: RTL Support + +**Given** Arabic language is selected +**When** viewing both sections +**Then** all text and cards align right-to-left correctly + +## Technical Notes + +### HTML Structure - Vision Section + +```blade +{{-- Vision Section --}} +
+
+

+ {{ __('about.vision_title') }} +

+
+
+ " + {{ __('about.vision_text') }} + " +
+
+
+``` + +### HTML Structure - Mission Section + +```blade +{{-- Mission Section --}} +
+
+

+ {{ __('about.mission_title') }} +

+
+ +
+ {{-- Card 1: For Institution --}} +
+
+ +
+

+ {{ __('about.mission_institution_title') }} +

+

+ {{ __('about.mission_institution_text') }} +

+
+ + {{-- Card 2: For Society --}} +
+
+ +
+

+ {{ __('about.mission_society_title') }} +

+

+ {{ __('about.mission_society_text') }} +

+
+ + {{-- Card 3: For Diaspora --}} +
+
+ +
+

+ {{ __('about.mission_diaspora_title') }} +

+

+ {{ __('about.mission_diaspora_text') }} +

+
+
+
+
+``` + +### Translation Keys to Add + +```php +// lang/en/about.php - add these keys +'vision_title' => 'Our Vision', +'vision_text' => 'Libra is woven from the fabric of society, investigating problems, documenting them, uncovering their roots, and offering solutions to mend social pains, even the small ones, through collaboration and by developing field research rooted in real engagement with the market.', + +'mission_title' => 'Our Mission', +'mission_institution_title' => 'For Our Institution', +'mission_institution_text' => 'Libra works at the heart of society capturing its pulse, investigating its challenges, documenting them, and transforming them into knowledge and innovative legal solutions. We accompany individuals and institutions with honesty and professionalism, striving to advance justice, empower women, and foster a healthy business environment through law, research, and fieldwork.', +'mission_society_title' => 'For Society', +'mission_society_text' => 'Libra aspires to establish the "Libra Scholarship for Law and Palestinian Arts", reconnect society with its history and legal heritage, and serve as a trusted partner to the judiciary.', +'mission_diaspora_title' => 'For Palestinians in the Diaspora', +'mission_diaspora_text' => 'Libra is a platform for listening to Palestinians in the diaspora and strengthening their connection to the Palestinian land by helping them research and investigate their families and history, research and investigate their lands, and providing them with a platform to hear their views on the Palestinian issue and Palestinian communities abroad.', + +// lang/ar/about.php - add these keys +'vision_title' => 'رؤيتنا', +'vision_text' => 'ليبرا منسوجة من نسيج المجتمع، تحقق في المشكلات، وتوثقها، وتكشف جذورها، وتقدم حلولاً لمعالجة الآلام الاجتماعية، حتى الصغيرة منها، من خلال التعاون وتطوير البحث الميداني المتجذر في التفاعل الحقيقي مع السوق.', + +'mission_title' => 'مهمتنا', +'mission_institution_title' => 'لمؤسستنا', +'mission_institution_text' => 'تعمل ليبرا في قلب المجتمع ملتقطةً نبضه، محققةً في تحدياته، موثقةً إياها، ومحولةً لها إلى معرفة وحلول قانونية مبتكرة. نرافق الأفراد والمؤسسات بأمانة واحترافية، ساعين لتحقيق العدالة، وتمكين المرأة، وتعزيز بيئة أعمال صحية من خلال القانون والبحث والعمل الميداني.', +'mission_society_title' => 'للمجتمع', +'mission_society_text' => 'تطمح ليبرا إلى إنشاء "منحة ليبرا للقانون والفنون الفلسطينية"، وإعادة ربط المجتمع بتاريخه وإرثه القانوني، والعمل كشريك موثوق للقضاء.', +'mission_diaspora_title' => 'للفلسطينيين في الشتات', +'mission_diaspora_text' => 'ليبرا منصة للاستماع إلى الفلسطينيين في الشتات وتعزيز ارتباطهم بالأرض الفلسطينية من خلال مساعدتهم في البحث والتحقيق في عائلاتهم وتاريخهم، والبحث في أراضيهم، وتوفير منصة للاستماع إلى آرائهم حول القضية الفلسطينية والمجتمعات الفلسطينية في الخارج.', +``` + +## Dev Checklist + +- [ ] Add vision section to about.blade.php +- [ ] Style vision header with gold underline +- [ ] Add vision statement with decorative quotes +- [ ] Add mission section with cream background +- [ ] Style mission header with gold underline +- [ ] Create 3 mission cards with icons +- [ ] Implement responsive grid (3 cols → 2 cols → 1 col) +- [ ] Add all English translations +- [ ] Add all Arabic translations +- [ ] Test RTL layout +- [ ] Test responsive breakpoints + +## Estimation + +**Complexity:** Medium +**Risk:** Low - Straightforward content sections + +## Dependencies + +- Story 16.1 completed (page structure exists) +- Flux icons available diff --git a/docs/stories/story-16.3-values-section.md b/docs/stories/story-16.3-values-section.md new file mode 100644 index 0000000..b01ead6 --- /dev/null +++ b/docs/stories/story-16.3-values-section.md @@ -0,0 +1,229 @@ +# Story 16.3: Values Section + +## Story + +**As a** website visitor +**I want to** see Libra's core values +**So that** I understand the principles that guide their work + +## Acceptance Criteria + +### AC1: Values Section Container + +**Given** the About Us page below the mission section +**When** displayed +**Then** show a values section with: +- White (`#FFFFFF`) background +- Full-width container +- Adequate vertical padding (60px desktop, 48px tablet, 32px mobile) + +### AC2: Values Section Header + +**Given** the values section +**When** displayed +**Then** show section header: +- English: "Our Values" +- Arabic: "قيمنا" +- Typography: H2, Bold, Forest Green (`#2D322A`) +- Warm Gold underline accent +- Centered + +### AC3: Values Introduction + +**Given** the values section below the header +**When** displayed +**Then** show introductory text: +- English: "These values start in the field and return to the people." +- Arabic: "هذه القيم تبدأ من الميدان وتعود إلى الناس." +- Typography: Body text, Regular, Forest Green with opacity +- Centered, max-width 600px + +### AC4: Six Value Cards + +**Given** the values section +**When** displayed +**Then** show 6 value cards: + +1. **Integrity** + - Icon: Shield/Check icon + - EN: "Integrity" + - AR: "النزاهة" + +2. **Justice** + - Icon: Scale icon + - EN: "Justice" + - AR: "العدالة" + +3. **Knowledge** + - Icon: Book/Academic icon + - EN: "Knowledge" + - AR: "المعرفة" + +4. **Women's Empowerment** + - Icon: Heart/Users icon + - EN: "Women's Empowerment" + - AR: "تمكين المرأة" + +5. **Professionalism** + - Icon: Briefcase icon + - EN: "Professionalism" + - AR: "الاحترافية" + +6. **Social Innovation** + - Icon: Lightbulb icon + - EN: "Social Innovation" + - AR: "الابتكار الاجتماعي" + +### AC5: Value Card Styling + +**Given** each value card +**When** displayed +**Then** style with: +- Warm Cream (`#F4F1EA`) background +- Rounded corners (12px) +- Icon: Warm Gold (`#A68966`), 40px size, centered +- Value name: H4, Semi-bold, Forest Green, centered +- Padding: 24px vertical, 16px horizontal +- Subtle hover effect (slight lift/shadow) + +### AC6: Responsive Grid + +**Given** different screen sizes +**When** viewing value cards: +- **Desktop (≥992px):** 6 columns (1 row of 6) or 3 columns (2 rows of 3) +- **Tablet (768-991px):** 3 columns (2 rows) +- **Mobile (<768px):** 2 columns (3 rows) + +### AC7: RTL Support + +**Given** Arabic language is selected +**When** viewing the values section +**Then** all cards and text align correctly for RTL + +## Technical Notes + +### HTML Structure + +```blade +{{-- Values Section --}} +
+
+

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

+
+

+ {{ __('about.values_intro') }} +

+ +
+ {{-- Integrity --}} +
+
+ +
+

+ {{ __('about.value_integrity') }} +

+
+ + {{-- Justice --}} +
+
+ +
+

+ {{ __('about.value_justice') }} +

+
+ + {{-- Knowledge --}} +
+
+ +
+

+ {{ __('about.value_knowledge') }} +

+
+ + {{-- Women's Empowerment --}} +
+
+ +
+

+ {{ __('about.value_women') }} +

+
+ + {{-- Professionalism --}} +
+
+ +
+

+ {{ __('about.value_professionalism') }} +

+
+ + {{-- Social Innovation --}} +
+
+ +
+

+ {{ __('about.value_innovation') }} +

+
+
+
+
+``` + +### Translation Keys to Add + +```php +// lang/en/about.php - add these keys +'values_title' => 'Our Values', +'values_intro' => 'These values start in the field and return to the people.', +'value_integrity' => 'Integrity', +'value_justice' => 'Justice', +'value_knowledge' => 'Knowledge', +'value_women' => 'Women\'s Empowerment', +'value_professionalism' => 'Professionalism', +'value_innovation' => 'Social Innovation', + +// lang/ar/about.php - add these keys +'values_title' => 'قيمنا', +'values_intro' => 'هذه القيم تبدأ من الميدان وتعود إلى الناس.', +'value_integrity' => 'النزاهة', +'value_justice' => 'العدالة', +'value_knowledge' => 'المعرفة', +'value_women' => 'تمكين المرأة', +'value_professionalism' => 'الاحترافية', +'value_innovation' => 'الابتكار الاجتماعي', +``` + +## Dev Checklist + +- [ ] Add values section to about.blade.php +- [ ] Style section header with gold underline +- [ ] Add intro text +- [ ] Create 6 value cards with icons +- [ ] Implement responsive grid (6 → 3 → 2 columns) +- [ ] Add hover effects to cards +- [ ] Add all English translations +- [ ] Add all Arabic translations +- [ ] Test RTL layout +- [ ] Test responsive breakpoints + +## Estimation + +**Complexity:** Low +**Risk:** Low - Standard card grid + +## Dependencies + +- Story 16.2 completed (mission section exists above) +- Flux icons available diff --git a/docs/stories/story-16.4-goals-section.md b/docs/stories/story-16.4-goals-section.md new file mode 100644 index 0000000..abfb18d --- /dev/null +++ b/docs/stories/story-16.4-goals-section.md @@ -0,0 +1,179 @@ +# Story 16.4: Goals Section + +## Story + +**As a** website visitor +**I want to** see Libra's organizational goals +**So that** I understand what they are working to achieve + +## Acceptance Criteria + +### AC1: Goals Section Container + +**Given** the About Us page below the values section +**When** displayed +**Then** show a goals section with: +- Warm Cream (`#F4F1EA`) background +- Full-width container +- Adequate vertical padding (60px desktop, 48px tablet, 32px mobile) + +### AC2: Goals Section Header + +**Given** the goals section +**When** displayed +**Then** show section header: +- English: "Our Goals" +- Arabic: "أهدافنا" +- Typography: H2, Bold, Forest Green (`#2D322A`) +- Warm Gold underline accent +- Centered + +### AC3: Seven Goals Display + +**Given** the goals section +**When** displayed +**Then** show all 7 goals: + +1. **Goal 1:** + - EN: "Supporting Palestinian legal professionals and developing their professional and research capabilities." + - AR: "دعم المهنيين القانونيين الفلسطينيين وتطوير قدراتهم المهنية والبحثية." + +2. **Goal 2:** + - EN: "Documenting and analyzing community cases to produce legal knowledge grounded in reality." + - AR: "توثيق وتحليل القضايا المجتمعية لإنتاج معرفة قانونية متجذرة في الواقع." + +3. **Goal 3:** + - EN: "Preparing and writing research papers that address contemporary legal issues in depth and systematically." + - AR: "إعداد وكتابة أوراق بحثية تعالج القضايا القانونية المعاصرة بعمق ومنهجية." + +4. **Goal 4:** + - EN: "Launching legal awareness programs that raise community awareness of rights and obligations." + - AR: "إطلاق برامج توعية قانونية ترفع وعي المجتمع بحقوقه وواجباته." + +5. **Goal 5:** + - EN: "Strengthening the connection between society and its legal history through knowledge-based and cultural initiatives." + - AR: "تعزيز الصلة بين المجتمع وتاريخه القانوني من خلال المبادرات المعرفية والثقافية." + +6. **Goal 6:** + - EN: "Developing innovative legal solutions based on field research that reflects the Palestinian social context." + - AR: "تطوير حلول قانونية مبتكرة قائمة على البحث الميداني الذي يعكس السياق الاجتماعي الفلسطيني." + +7. **Goal 7:** + - EN: "Promoting justice and empowering women through specialized and accessible legal services." + - AR: "تعزيز العدالة وتمكين المرأة من خلال خدمات قانونية متخصصة وميسّرة." + +### AC4: Goals List Styling + +**Given** the goals list +**When** displayed +**Then** style as: +- Two-column layout on desktop (left: goals 1-4, right: goals 5-7) +- Single column on mobile +- Each goal has a numbered circle (Warm Gold background, white number) +- Goal text: Body text, Forest Green +- Adequate spacing between items (16px) +- White card container with padding + +### AC5: Numbered Circle Style + +**Given** each goal number +**When** displayed +**Then** style the number with: +- Circle shape (32px diameter) +- Warm Gold (`#A68966`) background +- White text +- Bold font +- Inline with goal text + +### AC6: Responsive Layout + +**Given** different screen sizes +**When** viewing goals: +- **Desktop (≥992px):** 2 columns side by side +- **Tablet (768-991px):** 2 columns +- **Mobile (<768px):** 1 column stacked + +### AC7: RTL Support + +**Given** Arabic language is selected +**When** viewing the goals section +**Then** numbers align on the right, text flows RTL + +## Technical Notes + +### HTML Structure + +```blade +{{-- Goals Section --}} +
+
+

+ {{ __('about.goals_title') }} +

+
+ +
+
+ @foreach(__('about.goals') as $index => $goal) +
+ + {{ $index + 1 }} + +

{{ $goal }}

+
+ @endforeach +
+
+
+
+``` + +### Translation Keys to Add + +```php +// lang/en/about.php - add these keys +'goals_title' => 'Our Goals', +'goals' => [ + 'Supporting Palestinian legal professionals and developing their professional and research capabilities.', + 'Documenting and analyzing community cases to produce legal knowledge grounded in reality.', + 'Preparing and writing research papers that address contemporary legal issues in depth and systematically.', + 'Launching legal awareness programs that raise community awareness of rights and obligations.', + 'Strengthening the connection between society and its legal history through knowledge-based and cultural initiatives.', + 'Developing innovative legal solutions based on field research that reflects the Palestinian social context.', + 'Promoting justice and empowering women through specialized and accessible legal services.', +], + +// lang/ar/about.php - add these keys +'goals_title' => 'أهدافنا', +'goals' => [ + 'دعم المهنيين القانونيين الفلسطينيين وتطوير قدراتهم المهنية والبحثية.', + 'توثيق وتحليل القضايا المجتمعية لإنتاج معرفة قانونية متجذرة في الواقع.', + 'إعداد وكتابة أوراق بحثية تعالج القضايا القانونية المعاصرة بعمق ومنهجية.', + 'إطلاق برامج توعية قانونية ترفع وعي المجتمع بحقوقه وواجباته.', + 'تعزيز الصلة بين المجتمع وتاريخه القانوني من خلال المبادرات المعرفية والثقافية.', + 'تطوير حلول قانونية مبتكرة قائمة على البحث الميداني الذي يعكس السياق الاجتماعي الفلسطيني.', + 'تعزيز العدالة وتمكين المرأة من خلال خدمات قانونية متخصصة وميسّرة.', +], +``` + +## Dev Checklist + +- [ ] Add goals section to about.blade.php +- [ ] Style section header with gold underline +- [ ] Create white card container +- [ ] Implement 2-column grid layout +- [ ] Style numbered circles (gold background, white text) +- [ ] Display all 7 goals with proper spacing +- [ ] Add English translations (array format) +- [ ] Add Arabic translations (array format) +- [ ] Test RTL layout (numbers on right) +- [ ] Test responsive breakpoints + +## Estimation + +**Complexity:** Low +**Risk:** Low - Standard list display + +## Dependencies + +- Story 16.3 completed (values section exists above) diff --git a/docs/stories/story-16.5-legal-services-section.md b/docs/stories/story-16.5-legal-services-section.md new file mode 100644 index 0000000..785efed --- /dev/null +++ b/docs/stories/story-16.5-legal-services-section.md @@ -0,0 +1,325 @@ +# Story 16.5: Legal Services Section + +## Story + +**As a** website visitor +**I want to** see Libra's comprehensive legal services +**So that** I know what services they offer and if they can help with my legal needs + +## Acceptance Criteria + +### AC1: Services Section Container + +**Given** the About Us page below the goals section +**When** displayed +**Then** show a services section with: +- White (`#FFFFFF`) background +- Full-width container +- Adequate vertical padding (60px desktop, 48px tablet, 32px mobile) + +### AC2: Services Section Header + +**Given** the services section +**When** displayed +**Then** show section header: +- English: "Our Legal Services" +- Arabic: "خدماتنا القانونية" +- Typography: H2, Bold, Forest Green (`#2D322A`) +- Warm Gold underline accent +- Centered + +### AC3: Services Introduction + +**Given** the services section below the header +**When** displayed +**Then** show introductory text: +- English: "Libra provides comprehensive legal services as a for-profit law firm, combining traditional legal practice with research-driven insight." +- Arabic: "تقدم ليبرا خدمات قانونية شاملة كمكتب محاماة ربحي، يجمع بين الممارسة القانونية التقليدية والرؤية المبنية على البحث." +- Typography: Body text, Forest Green with opacity +- Centered, max-width 800px + +### AC4: Four Service Categories + +**Given** the services section +**When** displayed +**Then** show 4 service category cards: + +**Card 1 - Legal Consultations & Representation:** +- Icon: Scale/Gavel icon +- Title (EN): "Legal Consultations & Representation" +- Title (AR): "الاستشارات والتمثيل القانوني" +- Items: + - Legal advice / الاستشارات القانونية + - Court representation / التمثيل أمام المحاكم + - Litigation management / إدارة التقاضي + - Pleadings & appeals / المذكرات والاستئناف + +**Card 2 - Women's & Family Law:** +- Icon: Heart/Family icon +- Title (EN): "Women's & Family Law" +- Title (AR): "قانون المرأة والأسرة" +- Items: + - Divorce proceedings / إجراءات الطلاق + - Alimony cases / قضايا النفقة + - Child custody / حضانة الأطفال + - Protection from violence / الحماية من العنف + +**Card 3 - Civil & Commercial:** +- Icon: Building icon +- Title (EN): "Civil & Commercial Disputes" +- Title (AR): "النزاعات المدنية والتجارية" +- Items: + - Partnership cases / قضايا الشراكة + - Financial claims / المطالبات المالية + - Civil disputes / النزاعات المدنية + - Commercial litigation / التقاضي التجاري + +**Card 4 - Business Services:** +- Icon: Briefcase icon +- Title (EN): "Business Legal Services" +- Title (AR): "الخدمات القانونية للأعمال" +- Items: + - Contract drafting & review / صياغة ومراجعة العقود + - Governance & compliance / الحوكمة والامتثال + - Arbitration / التحكيم + - Alternative dispute resolution / الحل البديل للنزاعات + +### AC5: Service Card Styling + +**Given** each service card +**When** displayed +**Then** style with: +- Warm Cream (`#F4F1EA`) background +- Rounded corners (12px) +- Icon: Warm Gold (`#A68966`), 48px, top-centered +- Title: H3, Bold, Forest Green, centered +- List items: Bullet points, Forest Green text +- Padding: 32px +- Subtle border or shadow + +### AC6: Responsive Grid + +**Given** different screen sizes +**When** viewing service cards: +- **Desktop (≥992px):** 4 columns +- **Tablet (768-991px):** 2 columns (2x2) +- **Mobile (<768px):** 1 column stacked + +### AC7: CTA Button + +**Given** the services section +**When** displayed below the cards +**Then** show a CTA button: +- Label (EN): "Book a Consultation" +- Label (AR): "احجز استشارة" +- Style: Warm Gold background, white text +- Link: `/booking` +- Centered + +### AC8: RTL Support + +**Given** Arabic language is selected +**When** viewing the services section +**Then** all cards, lists, and text align correctly for RTL + +## Technical Notes + +### HTML Structure + +```blade +{{-- Legal Services Section --}} +
+
+

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

+
+

+ {{ __('about.services_intro') }} +

+ +
+ {{-- Consultations & Representation --}} +
+
+ +
+

+ {{ __('about.service_consultation_title') }} +

+
    + @foreach(__('about.service_consultation_items') as $item) +
  • + + {{ $item }} +
    • + @endforeach +
+
+ + {{-- Women's & Family Law --}} +
+
+ +
+

+ {{ __('about.service_family_title') }} +

+
    + @foreach(__('about.service_family_items') as $item) +
  • + + {{ $item }} +
    • + @endforeach +
+
+ + {{-- Civil & Commercial --}} +
+
+ +
+

+ {{ __('about.service_civil_title') }} +

+
    + @foreach(__('about.service_civil_items') as $item) +
  • + + {{ $item }} +
    • + @endforeach +
+
+ + {{-- Business Services --}} +
+
+ +
+

+ {{ __('about.service_business_title') }} +

+
    + @foreach(__('about.service_business_items') as $item) +
  • + + {{ $item }} +
    • + @endforeach +
+
+
+ +
+ + {{ __('about.services_cta') }} + +
+
+
+``` + +### Translation Keys to Add + +```php +// lang/en/about.php - add these keys +'services_title' => 'Our Legal Services', +'services_intro' => 'Libra provides comprehensive legal services as a for-profit law firm, combining traditional legal practice with research-driven insight.', +'services_cta' => 'Book a Consultation', + +'service_consultation_title' => 'Legal Consultations & Representation', +'service_consultation_items' => [ + 'Legal advice', + 'Court representation', + 'Litigation management', + 'Pleadings & appeals', +], + +'service_family_title' => 'Women\'s & Family Law', +'service_family_items' => [ + 'Divorce proceedings', + 'Alimony cases', + 'Child custody', + 'Protection from violence', +], + +'service_civil_title' => 'Civil & Commercial Disputes', +'service_civil_items' => [ + 'Partnership cases', + 'Financial claims', + 'Civil disputes', + 'Commercial litigation', +], + +'service_business_title' => 'Business Legal Services', +'service_business_items' => [ + 'Contract drafting & review', + 'Governance & compliance', + 'Arbitration', + 'Alternative dispute resolution', +], + +// lang/ar/about.php - add these keys +'services_title' => 'خدماتنا القانونية', +'services_intro' => 'تقدم ليبرا خدمات قانونية شاملة كمكتب محاماة ربحي، يجمع بين الممارسة القانونية التقليدية والرؤية المبنية على البحث.', +'services_cta' => 'احجز استشارة', + +'service_consultation_title' => 'الاستشارات والتمثيل القانوني', +'service_consultation_items' => [ + 'الاستشارات القانونية', + 'التمثيل أمام المحاكم', + 'إدارة التقاضي', + 'المذكرات والاستئناف', +], + +'service_family_title' => 'قانون المرأة والأسرة', +'service_family_items' => [ + 'إجراءات الطلاق', + 'قضايا النفقة', + 'حضانة الأطفال', + 'الحماية من العنف', +], + +'service_civil_title' => 'النزاعات المدنية والتجارية', +'service_civil_items' => [ + 'قضايا الشراكة', + 'المطالبات المالية', + 'النزاعات المدنية', + 'التقاضي التجاري', +], + +'service_business_title' => 'الخدمات القانونية للأعمال', +'service_business_items' => [ + 'صياغة ومراجعة العقود', + 'الحوكمة والامتثال', + 'التحكيم', + 'الحل البديل للنزاعات', +], +``` + +## Dev Checklist + +- [ ] Add services section to about.blade.php +- [ ] Style section header with gold underline +- [ ] Add intro text +- [ ] Create 4 service category cards with icons +- [ ] Add bullet list items to each card +- [ ] Implement responsive grid (4 → 2 → 1 columns) +- [ ] Add CTA button linking to /booking +- [ ] Add all English translations (arrays) +- [ ] Add all Arabic translations (arrays) +- [ ] Test RTL layout +- [ ] Test responsive breakpoints + +## Estimation + +**Complexity:** Medium +**Risk:** Low - Standard card grid with lists + +## Dependencies + +- Story 16.4 completed (goals section exists above) +- Booking route exists at `/booking` +- Flux icons available diff --git a/docs/stories/story-16.6-scholarship-section.md b/docs/stories/story-16.6-scholarship-section.md new file mode 100644 index 0000000..54dcadb --- /dev/null +++ b/docs/stories/story-16.6-scholarship-section.md @@ -0,0 +1,185 @@ +# Story 16.6: Scholarship Aspiration Section + +## Story + +**As a** website visitor +**I want to** learn about Libra's scholarship aspiration +**So that** I understand their vision for supporting Palestinian arts and law students + +## Acceptance Criteria + +### AC1: Scholarship Section Container + +**Given** the About Us page below the services section +**When** displayed +**Then** show a scholarship section with: +- Dark Forest Green (`#2D3624`) background +- Full-width container +- Adequate vertical padding (60px desktop, 48px tablet, 32px mobile) + +### AC2: Scholarship Section Header + +**Given** the scholarship section +**When** displayed +**Then** show section header: +- English: "Our Aspiration: Libra Scholarship" +- Arabic: "طموحنا: منحة ليبرا" +- Typography: H2, Bold, White +- Warm Gold underline accent +- Centered + +### AC3: Scholarship Description + +**Given** the scholarship section +**When** displayed +**Then** show the scholarship description with two paragraphs: + +**Paragraph 1:** +- English: "Art is the ambassador of Historical Palestine and the Palestinian people. Through the Libra Scholarship for Law and Palestinian Arts, Libra seeks to empower students to present Palestinian messages around the world." +- Arabic: "الفن هو سفير فلسطين التاريخية والشعب الفلسطيني. من خلال منحة ليبرا للقانون والفنون الفلسطينية، تسعى ليبرا لتمكين الطلاب من تقديم رسائل فلسطينية حول العالم." + +**Paragraph 2:** +- English: "We aim to open ongoing discussions about the Palestinian situation and reality, protect intellectual property rights, and enable participation in international exhibitions, starting with local cultural platforms." +- Arabic: "نهدف إلى فتح نقاشات مستمرة حول الوضع والواقع الفلسطيني، وحماية حقوق الملكية الفكرية، وتمكين المشاركة في المعارض الدولية، بدءاً من المنصات الثقافية المحلية." + +- Typography: Body text, White with opacity +- Max-width: 900px centered + +### AC4: Key Aspirations List + +**Given** the scholarship section below the description +**When** displayed +**Then** show 4 key aspirations as highlight items: + +1. **Empowering Students** + - EN: "Empowering students to present Palestinian messages globally" + - AR: "تمكين الطلاب من تقديم الرسائل الفلسطينية عالمياً" + +2. **Opening Discussions** + - EN: "Opening ongoing discussions about Palestinian reality" + - AR: "فتح نقاشات مستمرة حول الواقع الفلسطيني" + +3. **Protecting Rights** + - EN: "Protecting intellectual property rights" + - AR: "حماية حقوق الملكية الفكرية" + +4. **Enabling Participation** + - EN: "Enabling participation in local and international exhibitions" + - AR: "تمكين المشاركة في المعارض المحلية والدولية" + +### AC5: Aspiration Item Styling + +**Given** each aspiration item +**When** displayed +**Then** style with: +- Warm Gold (`#A68966`) check/star icon +- White text +- Horizontal layout on desktop, vertical on mobile +- Subtle separator between items + +### AC6: Visual Accent + +**Given** the scholarship section +**When** displayed +**Then** include: +- Decorative wheat/botanical icon (subtle, Warm Gold, semi-transparent) +- OR simple gold border/frame accent +- Elegant, aspirational feel + +### AC7: Responsive Layout + +**Given** different screen sizes +**When** viewing the scholarship section: +- **Desktop (≥992px):** 4 aspirations in 1 row, centered text above +- **Tablet (768-991px):** 2x2 grid of aspirations +- **Mobile (<768px):** Stacked aspirations, compact text + +### AC8: RTL Support + +**Given** Arabic language is selected +**When** viewing the scholarship section +**Then** all text and items align correctly for RTL + +## Technical Notes + +### HTML Structure + +```blade +{{-- Scholarship Aspiration Section --}} +
+
+

+ {{ __('about.scholarship_title') }} +

+
+ +
+

+ {{ __('about.scholarship_text_1') }} +

+

+ {{ __('about.scholarship_text_2') }} +

+
+ +
+ @foreach(__('about.scholarship_aspirations') as $aspiration) +
+ + {{ $aspiration }} +
+ @endforeach +
+
+
+``` + +### Translation Keys to Add + +```php +// lang/en/about.php - add these keys +'scholarship_title' => 'Our Aspiration: Libra Scholarship', +'scholarship_text_1' => 'Art is the ambassador of Historical Palestine and the Palestinian people. Through the Libra Scholarship for Law and Palestinian Arts, Libra seeks to empower students to present Palestinian messages around the world.', +'scholarship_text_2' => 'We aim to open ongoing discussions about the Palestinian situation and reality, protect intellectual property rights, and enable participation in international exhibitions, starting with local cultural platforms.', +'scholarship_aspirations' => [ + 'Empowering students to present Palestinian messages globally', + 'Opening ongoing discussions about Palestinian reality', + 'Protecting intellectual property rights', + 'Enabling participation in local and international exhibitions', +], + +// lang/ar/about.php - add these keys +'scholarship_title' => 'طموحنا: منحة ليبرا', +'scholarship_text_1' => 'الفن هو سفير فلسطين التاريخية والشعب الفلسطيني. من خلال منحة ليبرا للقانون والفنون الفلسطينية، تسعى ليبرا لتمكين الطلاب من تقديم رسائل فلسطينية حول العالم.', +'scholarship_text_2' => 'نهدف إلى فتح نقاشات مستمرة حول الوضع والواقع الفلسطيني، وحماية حقوق الملكية الفكرية، وتمكين المشاركة في المعارض الدولية، بدءاً من المنصات الثقافية المحلية.', +'scholarship_aspirations' => [ + 'تمكين الطلاب من تقديم الرسائل الفلسطينية عالمياً', + 'فتح نقاشات مستمرة حول الواقع الفلسطيني', + 'حماية حقوق الملكية الفكرية', + 'تمكين المشاركة في المعارض المحلية والدولية', +], +``` + +## Dev Checklist + +- [ ] Add scholarship section to about.blade.php +- [ ] Style section with dark green background +- [ ] Style header with gold underline +- [ ] Add two-paragraph description +- [ ] Create 4 aspiration items with icons +- [ ] Implement responsive grid (4 → 2 → 1 columns) +- [ ] Add English translations +- [ ] Add Arabic translations +- [ ] Test RTL layout +- [ ] Test responsive breakpoints +- [ ] Ensure visual contrast is accessible (WCAG) + +## Estimation + +**Complexity:** Low +**Risk:** Low - Final content section + +## Dependencies + +- Story 16.5 completed (services section exists above) +- Flux icons available