8.8 KiB

Raw Blame History

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:

Empowering Students
- EN: "Empowering students to present Palestinian messages globally"
- AR: "تمكين الطلاب من تقديم الرسائل الفلسطينية عالمياً"
Opening Discussions
- EN: "Opening ongoing discussions about Palestinian reality"
- AR: "فتح نقاشات مستمرة حول الواقع الفلسطيني"
Protecting Rights
- EN: "Protecting intellectual property rights"
- AR: "حماية حقوق الملكية الفكرية"
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

{{-- Scholarship Aspiration Section --}}
<section class="bg-[#2D3624] py-12 lg:py-16">
    <div class="container mx-auto px-4">
        <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-4xl 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 $aspiration)
                <div class="flex items-center gap-3 text-white/90">
                    <flux:icon name="check-circle" class="w-6 h-6 text-accent flex-shrink-0" />
                    <span>{{ $aspiration }}</span>
                </div>
            @endforeach
        </div>
    </div>
</section>

Translation Keys to Add

// 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

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

8.8 KiB Raw Blame History