complete story 16.6
This commit is contained in:
Naser Mansour
parent
5a23b35e19
commit
abde8698ee
|
|
@ -162,17 +162,17 @@
|
|||
|
||||
## 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)
|
||||
- [x] Add scholarship section to about.blade.php
|
||||
- [x] Style section with dark green background
|
||||
- [x] Style header with gold underline
|
||||
- [x] Add two-paragraph description
|
||||
- [x] Create 4 aspiration items with icons
|
||||
- [x] Implement responsive grid (4 → 2 → 1 columns)
|
||||
- [x] Add English translations
|
||||
- [x] Add Arabic translations
|
||||
- [x] Test RTL layout
|
||||
- [x] Test responsive breakpoints
|
||||
- [x] Ensure visual contrast is accessible (WCAG)
|
||||
|
||||
## Estimation
|
||||
|
||||
|
|
@ -183,3 +183,40 @@
|
|||
|
||||
- Story 16.5 completed (services section exists above)
|
||||
- Flux icons available
|
||||
|
||||
---
|
||||
|
||||
## Dev Agent Record
|
||||
|
||||
### Status
|
||||
Ready for Review
|
||||
|
||||
### Agent Model Used
|
||||
Claude Opus 4.5
|
||||
|
||||
### File List
|
||||
| File | Action |
|
||||
|------|--------|
|
||||
| `resources/views/livewire/pages/about.blade.php` | Modified - Added scholarship aspiration section |
|
||||
| `lang/en/about.php` | Modified - Added scholarship translation keys |
|
||||
| `lang/ar/about.php` | Modified - Added scholarship translation keys |
|
||||
| `tests/Feature/Public/AboutPageTest.php` | Modified - Added 18 tests for scholarship section |
|
||||
|
||||
### Debug Log References
|
||||
None - implementation completed without issues.
|
||||
|
||||
### Completion Notes
|
||||
- Implemented scholarship section with Dark Forest Green (#2D3624) background per AC1
|
||||
- Added decorative gold border frame accent (border-accent/20) for elegant visual appeal per AC6
|
||||
- Responsive padding: 60px desktop (lg:py-[60px]), 48px tablet (sm:py-12), 32px mobile (py-8)
|
||||
- Responsive grid: 4 columns on desktop, 2x2 on tablet, single column on mobile per AC7
|
||||
- Added subtle separators between aspiration items using border-s classes
|
||||
- RTL support works automatically via Tailwind's logical properties (border-s, ps-6)
|
||||
- All 18 new tests pass covering both English and Arabic content
|
||||
- All 225 Public tests pass, no regressions
|
||||
- Pint linting passes
|
||||
|
||||
### Change Log
|
||||
| Date | Change |
|
||||
|------|--------|
|
||||
| 2026-01-11 | Initial implementation of scholarship aspiration section |
|
||||
|
|
|
|||
|
|
@ -76,4 +76,15 @@ return [
|
|||
'التحكيم',
|
||||
'الحل البديل للنزاعات',
|
||||
],
|
||||
|
||||
// Scholarship Section
|
||||
'scholarship_title' => 'طموحنا: منحة ليبرا',
|
||||
'scholarship_text_1' => 'الفن هو سفير فلسطين التاريخية والشعب الفلسطيني. من خلال منحة ليبرا للقانون والفنون الفلسطينية، تسعى ليبرا لتمكين الطلاب من تقديم رسائل فلسطينية حول العالم.',
|
||||
'scholarship_text_2' => 'نهدف إلى فتح نقاشات مستمرة حول الوضع والواقع الفلسطيني، وحماية حقوق الملكية الفكرية، وتمكين المشاركة في المعارض الدولية، بدءاً من المنصات الثقافية المحلية.',
|
||||
'scholarship_aspirations' => [
|
||||
'تمكين الطلاب من تقديم الرسائل الفلسطينية عالمياً',
|
||||
'فتح نقاشات مستمرة حول الواقع الفلسطيني',
|
||||
'حماية حقوق الملكية الفكرية',
|
||||
'تمكين المشاركة في المعارض المحلية والدولية',
|
||||
],
|
||||
];
|
||||
|
|
|
|||
|
|
@ -76,4 +76,15 @@ return [
|
|||
'Arbitration',
|
||||
'Alternative dispute resolution',
|
||||
],
|
||||
|
||||
// Scholarship Section
|
||||
'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',
|
||||
],
|
||||
];
|
||||
|
|
|
|||
|
|
@ -286,5 +286,34 @@ new #[Layout('components.layouts.public')] class extends Component
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{{-- Scholarship Section - Story 16.6 --}}
|
||||
{{-- Scholarship Aspiration Section --}}
|
||||
<section class="bg-[#2D3624] py-8 sm:py-12 lg:py-[60px] relative overflow-hidden">
|
||||
{{-- Decorative accent - subtle gold border frame --}}
|
||||
<div class="absolute inset-4 sm:inset-8 lg:inset-12 border border-accent/20 rounded-lg pointer-events-none"></div>
|
||||
|
||||
<div class="container mx-auto px-4 relative">
|
||||
<h2 class="text-2xl lg:text-3xl font-bold text-white text-center mb-2">
|
||||
{{ __('about.scholarship_title') }}
|
||||
</h2>
|
||||
<div class="w-20 h-1 bg-accent mx-auto mb-8"></div>
|
||||
|
||||
<div class="max-w-[900px] mx-auto text-center mb-12">
|
||||
<p class="text-white/90 text-lg mb-4">
|
||||
{{ __('about.scholarship_text_1') }}
|
||||
</p>
|
||||
<p class="text-white/80">
|
||||
{{ __('about.scholarship_text_2') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
|
||||
@foreach(__('about.scholarship_aspirations') as $index => $aspiration)
|
||||
<div class="flex items-center gap-3 text-white/90 {{ $index > 0 ? 'sm:border-s sm:border-white/10 sm:ps-6 lg:ps-6' : '' }}">
|
||||
<flux:icon name="check-circle" class="w-6 h-6 text-accent flex-shrink-0" />
|
||||
<span>{{ $aspiration }}</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -759,3 +759,140 @@ test('about page services CTA links to booking page', function () {
|
|||
->assertOk()
|
||||
->assertSee('href="'.route('booking').'"', false);
|
||||
});
|
||||
|
||||
// Story 16.6: Scholarship Aspiration Section Tests
|
||||
|
||||
// AC1: Scholarship Section Container
|
||||
test('about page has scholarship section with dark forest green background', function () {
|
||||
$this->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('bg-[#2D3624] py-8 sm:py-12 lg:py-[60px]', false);
|
||||
});
|
||||
|
||||
// AC2: Scholarship Section Header
|
||||
test('about page displays scholarship title in English', function () {
|
||||
$this->withSession(['locale' => 'en'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('Our Aspiration: Libra Scholarship');
|
||||
});
|
||||
|
||||
test('about page displays scholarship title in Arabic', function () {
|
||||
$this->withSession(['locale' => 'ar'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('طموحنا: منحة ليبرا');
|
||||
});
|
||||
|
||||
// AC3: Scholarship Description
|
||||
test('about page displays scholarship description paragraph 1 in English', function () {
|
||||
$this->withSession(['locale' => 'en'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('Art is the ambassador of Historical Palestine and the Palestinian people.');
|
||||
});
|
||||
|
||||
test('about page displays scholarship description paragraph 1 in Arabic', function () {
|
||||
$this->withSession(['locale' => 'ar'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('الفن هو سفير فلسطين التاريخية والشعب الفلسطيني.');
|
||||
});
|
||||
|
||||
test('about page displays scholarship description paragraph 2 in English', function () {
|
||||
$this->withSession(['locale' => 'en'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('We aim to open ongoing discussions about the Palestinian situation and reality');
|
||||
});
|
||||
|
||||
test('about page displays scholarship description paragraph 2 in Arabic', function () {
|
||||
$this->withSession(['locale' => 'ar'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('نهدف إلى فتح نقاشات مستمرة حول الوضع والواقع الفلسطيني');
|
||||
});
|
||||
|
||||
// AC4: Key Aspirations List
|
||||
test('about page displays aspiration 1 in English', function () {
|
||||
$this->withSession(['locale' => 'en'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('Empowering students to present Palestinian messages globally');
|
||||
});
|
||||
|
||||
test('about page displays aspiration 1 in Arabic', function () {
|
||||
$this->withSession(['locale' => 'ar'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('تمكين الطلاب من تقديم الرسائل الفلسطينية عالمياً');
|
||||
});
|
||||
|
||||
test('about page displays aspiration 2 in English', function () {
|
||||
$this->withSession(['locale' => 'en'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('Opening ongoing discussions about Palestinian reality');
|
||||
});
|
||||
|
||||
test('about page displays aspiration 2 in Arabic', function () {
|
||||
$this->withSession(['locale' => 'ar'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('فتح نقاشات مستمرة حول الواقع الفلسطيني');
|
||||
});
|
||||
|
||||
test('about page displays aspiration 3 in English', function () {
|
||||
$this->withSession(['locale' => 'en'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('Protecting intellectual property rights');
|
||||
});
|
||||
|
||||
test('about page displays aspiration 3 in Arabic', function () {
|
||||
$this->withSession(['locale' => 'ar'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('حماية حقوق الملكية الفكرية');
|
||||
});
|
||||
|
||||
test('about page displays aspiration 4 in English', function () {
|
||||
$this->withSession(['locale' => 'en'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('Enabling participation in local and international exhibitions');
|
||||
});
|
||||
|
||||
test('about page displays aspiration 4 in Arabic', function () {
|
||||
$this->withSession(['locale' => 'ar'])
|
||||
->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('تمكين المشاركة في المعارض المحلية والدولية');
|
||||
});
|
||||
|
||||
// AC5: Aspiration Item Styling (icons in scholarship section)
|
||||
test('about page scholarship aspirations have icons', function () {
|
||||
$this->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('w-6 h-6 text-accent flex-shrink-0', false);
|
||||
});
|
||||
|
||||
// AC6: Visual Accent (decorative border)
|
||||
test('about page scholarship section has decorative accent', function () {
|
||||
$this->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('border-accent/20', false);
|
||||
});
|
||||
|
||||
// AC7: Responsive Layout
|
||||
test('about page scholarship aspirations use responsive grid', function () {
|
||||
$this->get('/about')
|
||||
->assertOk()
|
||||
->assertSee('grid-cols-1 sm:grid-cols-2 lg:grid-cols-4', false);
|
||||
});
|
||||
|
||||
// AC8: All 4 aspirations are present
|
||||
test('about page displays all 4 scholarship aspirations', function () {
|
||||
$this->withSession(['locale' => 'en'])->get('/about')->assertOk();
|
||||
expect(count(__('about.scholarship_aspirations')))->toBe(4);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue