275 lines
13 KiB
Markdown
275 lines
13 KiB
Markdown
# 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 --}}
|
|
<section class="bg-white py-12 lg:py-16">
|
|
<div class="container mx-auto px-4">
|
|
<h2 class="text-2xl lg:text-3xl font-bold text-text text-center mb-2">
|
|
{{ __('about.vision_title') }}
|
|
</h2>
|
|
<div class="w-20 h-1 bg-accent mx-auto mb-8"></div>
|
|
<blockquote class="max-w-4xl mx-auto text-center text-lg text-text/90 italic">
|
|
<span class="text-4xl text-accent leading-none">"</span>
|
|
{{ __('about.vision_text') }}
|
|
<span class="text-4xl text-accent leading-none">"</span>
|
|
</blockquote>
|
|
</div>
|
|
</section>
|
|
```
|
|
|
|
### HTML Structure - Mission Section
|
|
|
|
```blade
|
|
{{-- Mission Section --}}
|
|
<section class="bg-background py-12 lg:py-16">
|
|
<div class="container mx-auto px-4">
|
|
<h2 class="text-2xl lg:text-3xl font-bold text-text text-center mb-2">
|
|
{{ __('about.mission_title') }}
|
|
</h2>
|
|
<div class="w-20 h-1 bg-accent mx-auto mb-12"></div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{{-- Card 1: For Institution --}}
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
<div class="text-accent mb-4">
|
|
<flux:icon name="building-office" class="w-12 h-12" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-text mb-3">
|
|
{{ __('about.mission_institution_title') }}
|
|
</h3>
|
|
<p class="text-text/80">
|
|
{{ __('about.mission_institution_text') }}
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Card 2: For Society --}}
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
<div class="text-accent mb-4">
|
|
<flux:icon name="user-group" class="w-12 h-12" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-text mb-3">
|
|
{{ __('about.mission_society_title') }}
|
|
</h3>
|
|
<p class="text-text/80">
|
|
{{ __('about.mission_society_text') }}
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Card 3: For Diaspora --}}
|
|
<div class="bg-white rounded-lg shadow-sm p-6 md:col-span-2 lg:col-span-1">
|
|
<div class="text-accent mb-4">
|
|
<flux:icon name="globe-alt" class="w-12 h-12" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-text mb-3">
|
|
{{ __('about.mission_diaspora_title') }}
|
|
</h3>
|
|
<p class="text-text/80">
|
|
{{ __('about.mission_diaspora_text') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
```
|
|
|
|
### 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
|
|
|
|
- [x] Add vision section to about.blade.php
|
|
- [x] Style vision header with gold underline
|
|
- [x] Add vision statement with decorative quotes
|
|
- [x] Add mission section with cream background
|
|
- [x] Style mission header with gold underline
|
|
- [x] Create 3 mission cards with icons
|
|
- [x] Implement responsive grid (3 cols → 2 cols → 1 col)
|
|
- [x] Add all English translations
|
|
- [x] Add all Arabic translations
|
|
- [x] Test RTL layout
|
|
- [x] Test responsive breakpoints
|
|
|
|
## Estimation
|
|
|
|
**Complexity:** Medium
|
|
**Risk:** Low - Straightforward content sections
|
|
|
|
## Dependencies
|
|
|
|
- Story 16.1 completed (page structure exists)
|
|
- Flux icons available
|
|
|
|
---
|
|
|
|
## Dev Agent Record
|
|
|
|
### Status
|
|
Ready for Review
|
|
|
|
### Agent Model Used
|
|
claude-opus-4-5-20251101
|
|
|
|
### File List
|
|
| File | Action |
|
|
|------|--------|
|
|
| `resources/views/livewire/pages/about.blade.php` | Modified |
|
|
| `lang/en/about.php` | Modified |
|
|
| `lang/ar/about.php` | Modified |
|
|
| `tests/Feature/Public/AboutPageTest.php` | Modified |
|
|
|
|
### Change Log
|
|
- Added Vision section with white background, H2 header with gold underline, and decorative quote styling
|
|
- Added Mission section with cream background, H2 header with gold underline
|
|
- Implemented 3 mission cards (Institution, Society, Diaspora) with Flux icons
|
|
- Added responsive grid: 3 cols desktop, 2 cols tablet, 1 col mobile
|
|
- Added all English translations (vision_title, vision_text, mission_title, mission cards)
|
|
- Added all Arabic translations
|
|
- Added 17 new tests covering all acceptance criteria
|
|
- All 33 About page tests pass
|
|
|
|
### Completion Notes
|
|
- RTL support verified via existing layout tests (dir="rtl" applied correctly)
|
|
- Responsive grid tested via CSS class assertions
|
|
- Flux icons render as inline SVGs (test updated to check for SVG presence)
|
|
- Pre-existing test failure in AuthBackgroundPatternTest (unrelated to this story)
|