284 lines
9.2 KiB
Markdown
284 lines
9.2 KiB
Markdown
# 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
|
||
<a href="{{ route('about') }}">{{ __('nav.about') }}</a>
|
||
```
|
||
|
||
### HTML Structure
|
||
|
||
```blade
|
||
<x-layouts.public>
|
||
{{-- Hero Section --}}
|
||
<section class="bg-[#2D3624] py-16 lg:py-20">
|
||
<div class="container mx-auto px-4 text-center">
|
||
<h1 class="text-4xl lg:text-5xl font-bold text-white mb-4">
|
||
{{ __('about.title') }}
|
||
</h1>
|
||
<p class="text-xl lg:text-2xl text-white/80 max-w-3xl mx-auto mb-6">
|
||
{{ __('about.tagline') }}
|
||
</p>
|
||
<p class="text-lg text-white/70 max-w-2xl mx-auto">
|
||
{{ __('about.identity') }}
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- 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 --}}
|
||
</x-layouts.public>
|
||
```
|
||
|
||
### 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
|
||
|
||
- [x] Add route for `/about` in `routes/web.php`
|
||
- [x] Create `resources/views/pages/about.blade.php`
|
||
- [x] Create `lang/en/about.php` with initial translations
|
||
- [x] Create `lang/ar/about.php` with initial translations
|
||
- [x] Add About Us link to navigation
|
||
- [x] Implement hero section with dark green background
|
||
- [x] Style page title with correct typography
|
||
- [x] Add tagline below title
|
||
- [x] Add identity statement
|
||
- [x] Test responsive layout (mobile, tablet, desktop)
|
||
- [x] Test RTL layout (Arabic)
|
||
- [x] Test LTR layout (English)
|
||
- [x] 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
|
||
|
||
---
|
||
|
||
## Dev Agent Record
|
||
|
||
### Status
|
||
Ready for Review
|
||
|
||
### Agent Model Used
|
||
Claude Opus 4.5 (claude-opus-4-5-20251101)
|
||
|
||
### File List
|
||
| File | Action |
|
||
|------|--------|
|
||
| `routes/web.php` | Modified - Added `/about` route |
|
||
| `resources/views/livewire/pages/about.blade.php` | Created - About page Volt component with hero section |
|
||
| `lang/en/about.php` | Created - English translations |
|
||
| `lang/ar/about.php` | Created - Arabic translations |
|
||
| `lang/en/navigation.php` | Modified - Added 'about' key |
|
||
| `lang/ar/navigation.php` | Modified - Added 'about' key |
|
||
| `resources/views/components/navigation.blade.php` | Modified - Added About Us links to desktop and mobile navigation |
|
||
| `tests/Feature/Public/AboutPageTest.php` | Created - 16 tests covering all acceptance criteria |
|
||
|
||
### Change Log
|
||
- Added Volt route for `/about` page with named route 'about'
|
||
- Created About page Volt component using class-based pattern with public layout
|
||
- Implemented hero section with Dark Forest Green (#2D3624) background
|
||
- Added responsive typography (2rem mobile, 2.5rem tablet, 3rem desktop)
|
||
- Added tagline with white/80 opacity and 800px max-width
|
||
- Added identity statement with white/70 opacity and 700px max-width
|
||
- Created English and Arabic translation files for about page content
|
||
- Added 'about' navigation translation keys to both language files
|
||
- Updated navigation component with About Us link in desktop and mobile views
|
||
- Added data-test attributes for navigation links (nav-about, mobile-nav-about)
|
||
- Created comprehensive test suite with 16 tests covering all acceptance criteria
|
||
|
||
### Completion Notes
|
||
- All acceptance criteria implemented and tested
|
||
- 16 tests passing with 33 assertions
|
||
- RTL/LTR support verified through existing public layout
|
||
- Responsive layout implemented with Tailwind breakpoints
|
||
- Hero section extends full-width with negative margins to override container padding
|
||
- Placeholder comments added for future story sections (Vision, Mission, Values, Goals, Services, Scholarship)
|
||
|
||
### DoD Checklist
|
||
|
||
1. **Requirements Met:**
|
||
- [x] All functional requirements specified in the story are implemented.
|
||
- [x] All acceptance criteria defined in the story are met.
|
||
|
||
2. **Coding Standards & Project Structure:**
|
||
- [x] All new/modified code strictly adheres to `Operational Guidelines`.
|
||
- [x] All new/modified code aligns with `Project Structure` (file locations, naming, etc.).
|
||
- [x] Adherence to `Tech Stack` for technologies/versions used.
|
||
- [N/A] Adherence to `Api Reference` and `Data Models` - No API or data model changes.
|
||
- [x] Basic security best practices applied.
|
||
- [x] No new linter errors or warnings introduced.
|
||
- [x] Code is well-commented where necessary.
|
||
|
||
3. **Testing:**
|
||
- [x] All required unit tests implemented (16 tests for About page).
|
||
- [N/A] Integration tests - Not applicable for static page.
|
||
- [x] All tests pass successfully (16 passed, 33 assertions).
|
||
- [x] Test coverage meets project standards.
|
||
|
||
4. **Functionality & Verification:**
|
||
- [x] Functionality verified via automated tests.
|
||
- [x] Edge cases handled (RTL/LTR, both languages).
|
||
|
||
5. **Story Administration:**
|
||
- [x] All tasks within the story file are marked as complete.
|
||
- [x] Clarifications documented in Dev Agent Record.
|
||
- [x] Story wrap up section completed.
|
||
|
||
6. **Dependencies, Build & Configuration:**
|
||
- [x] Project builds successfully without errors.
|
||
- [x] Project linting passes (273 files checked).
|
||
- [N/A] No new dependencies added.
|
||
- [N/A] No new environment variables introduced.
|
||
|
||
7. **Documentation:**
|
||
- [x] Inline code documentation complete (placeholders for future sections).
|
||
- [N/A] No user-facing documentation changes needed.
|
||
- [N/A] No architectural changes requiring technical documentation.
|
||
|
||
**Final Confirmation:**
|
||
- [x] I, the Developer Agent, confirm that all applicable items above have been addressed.
|