complete story 16.1
This commit is contained in:
Naser Mansour
parent
04fa6b399c
commit
877569e6e8
|
|
@ -170,19 +170,19 @@ return [
|
|||
|
||||
## 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
|
||||
- [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
|
||||
|
||||
|
|
@ -194,3 +194,90 @@ return [
|
|||
- 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.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<?php
|
||||
|
||||
return [
|
||||
'title' => 'من نحن',
|
||||
'tagline' => 'ملتزمون بالعدالة – متجذرون بالكرامة – مدفوعون للدفاع',
|
||||
'identity' => 'مؤسسة قانونية منسوجة من نسيج المجتمع، تستخدم البحث كأداة قوة لخدمة العدالة.',
|
||||
];
|
||||
|
|
@ -12,6 +12,7 @@ return [
|
|||
'repository' => 'المستودع',
|
||||
'documentation' => 'التوثيق',
|
||||
'home' => 'الرئيسية',
|
||||
'about' => 'من نحن',
|
||||
'booking' => 'حجز استشارة',
|
||||
'posts' => 'مقالات قانونية',
|
||||
'back' => 'رجوع',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<?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.',
|
||||
];
|
||||
|
|
@ -12,6 +12,7 @@ return [
|
|||
'repository' => 'Repository',
|
||||
'documentation' => 'Documentation',
|
||||
'home' => 'Home',
|
||||
'about' => 'About Us',
|
||||
'booking' => 'Book Consultation',
|
||||
'posts' => 'Legal Insights',
|
||||
'back' => 'Back',
|
||||
|
|
|
|||
|
|
@ -54,6 +54,17 @@
|
|||
>
|
||||
{{ __('navigation.home') }}
|
||||
</a>
|
||||
<a
|
||||
href="{{ route('about') }}"
|
||||
@class([
|
||||
'text-off-white hover:text-cta transition-colors py-2',
|
||||
'border-b-2 border-cta' => request()->routeIs('about'),
|
||||
])
|
||||
wire:navigate
|
||||
data-test="nav-about"
|
||||
>
|
||||
{{ __('navigation.about') }}
|
||||
</a>
|
||||
<a
|
||||
href="{{ route('booking') }}"
|
||||
@class([
|
||||
|
|
@ -156,6 +167,18 @@
|
|||
>
|
||||
{{ __('navigation.home') }}
|
||||
</a>
|
||||
<a
|
||||
href="{{ route('about') }}"
|
||||
@class([
|
||||
'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
|
||||
'bg-active border-s-2 border-cta' => request()->routeIs('about'),
|
||||
])
|
||||
wire:navigate
|
||||
@click="mobileMenuOpen = false"
|
||||
data-test="mobile-nav-about"
|
||||
>
|
||||
{{ __('navigation.about') }}
|
||||
</a>
|
||||
<a
|
||||
href="{{ route('booking') }}"
|
||||
@class([
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
<?php
|
||||
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new #[Layout('components.layouts.public')] class extends Component
|
||||
{
|
||||
//
|
||||
}; ?>
|
||||
|
||||
<div>
|
||||
{{-- Hero Section --}}
|
||||
<section class="bg-[#2D3624] py-10 sm:py-[60px] lg:py-20 -mx-4 sm:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
{{-- Page Title --}}
|
||||
<h1 class="text-[2rem] sm:text-[2.5rem] lg:text-[3rem] font-bold text-white mb-4">
|
||||
{{ __('about.title') }}
|
||||
</h1>
|
||||
|
||||
{{-- Tagline --}}
|
||||
<p class="text-xl sm:text-2xl text-white/80 max-w-[800px] mx-auto mb-6">
|
||||
{{ __('about.tagline') }}
|
||||
</p>
|
||||
|
||||
{{-- Identity Statement --}}
|
||||
<p class="text-lg text-white/70 max-w-[700px] 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 --}}
|
||||
</div>
|
||||
|
|
@ -8,6 +8,7 @@ use Laravel\Fortify\Features;
|
|||
use Livewire\Volt\Volt;
|
||||
|
||||
Volt::route('/', 'pages.home')->name('home');
|
||||
Volt::route('/about', 'pages.about')->name('about');
|
||||
|
||||
Volt::route('/booking', 'pages.booking')->name('booking');
|
||||
Volt::route('/booking/success', 'pages.booking-success')->name('booking.success');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,115 @@
|
|||
<?php
|
||||
|
||||
// AC1: Route & Navigation
|
||||
test('about page is accessible at /about', function () {
|
||||
$this->get('/about')
|
||||
->assertOk();
|
||||
});
|
||||
|
||||
test('about page route is named about', function () {
|
||||
expect(route('about'))->toEndWith('/about');
|
||||
});
|
||||
|
||||
// AC2: Page Structure
|
||||
test('about page uses public layout', function () {
|
||||
$this->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('data-test="main-navigation"', false)
|
||||
->assertSee('<footer', false);
|
||||
});
|
||||
|
||||
// AC3: Hero Section Container
|
||||
test('about page hero section has dark forest green background', function () {
|
||||
$this->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('bg-[#2D3624]', false);
|
||||
});
|
||||
|
||||
// AC4: Page Title
|
||||
test('about page displays title in English', function () {
|
||||
$this->withSession(['locale' => 'en'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('About Us');
|
||||
});
|
||||
|
||||
test('about page displays title in Arabic', function () {
|
||||
$this->withSession(['locale' => 'ar'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('من نحن');
|
||||
});
|
||||
|
||||
// AC5: Tagline Display
|
||||
test('about page displays tagline in English', function () {
|
||||
$this->withSession(['locale' => 'en'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('Committed to Justice – Grounded in Dignity – Driven to Advocate');
|
||||
});
|
||||
|
||||
test('about page displays tagline in Arabic', function () {
|
||||
$this->withSession(['locale' => 'ar'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('ملتزمون بالعدالة – متجذرون بالكرامة – مدفوعون للدفاع');
|
||||
});
|
||||
|
||||
// AC6: Identity Statement
|
||||
test('about page displays identity statement in English', function () {
|
||||
$this->withSession(['locale' => 'en'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('A legal institution woven from the fabric of society, using research as a tool of power to serve justice.');
|
||||
});
|
||||
|
||||
test('about page displays identity statement in Arabic', function () {
|
||||
$this->withSession(['locale' => 'ar'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('مؤسسة قانونية منسوجة من نسيج المجتمع، تستخدم البحث كأداة قوة لخدمة العدالة.');
|
||||
});
|
||||
|
||||
// AC8: RTL Support - Verified via locale setting (RTL is handled by layout)
|
||||
test('about page sets correct language direction for Arabic', function () {
|
||||
$this->withSession(['locale' => 'ar'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('dir="rtl"', false);
|
||||
});
|
||||
|
||||
test('about page sets correct language direction for English', function () {
|
||||
$this->withSession(['locale' => 'en'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('dir="ltr"', false);
|
||||
});
|
||||
|
||||
// Navigation Link Tests
|
||||
test('navigation contains about us link in English', function () {
|
||||
$this->withSession(['locale' => 'en'])
|
||||
->get('/')
|
||||
->assertOk()
|
||||
->assertSee('About Us')
|
||||
->assertSee('href="'.route('about').'"', false);
|
||||
});
|
||||
|
||||
test('navigation contains about us link in Arabic', function () {
|
||||
$this->withSession(['locale' => 'ar'])
|
||||
->get('/')
|
||||
->assertOk()
|
||||
->assertSee('من نحن')
|
||||
->assertSee('href="'.route('about').'"', false);
|
||||
});
|
||||
|
||||
test('about link in navigation has data-test attribute', function () {
|
||||
$this->get('/')
|
||||
->assertOk()
|
||||
->assertSee('data-test="nav-about"', false);
|
||||
});
|
||||
|
||||
test('mobile navigation contains about us link', function () {
|
||||
$this->get('/')
|
||||
->assertOk()
|
||||
->assertSee('data-test="mobile-nav-about"', false);
|
||||
});
|
||||
Loading…
Reference in New Issue