8.2 KiB

Raw Blame History

Story 14.4: Values Section

Story

As a website visitor I want to understand Libra's core values So that I can assess if their principles align with my expectations

Acceptance Criteria

AC1: Section Container

Given a visitor scrolls to the values section When viewing the section Then display with:

White (#FFFFFF) background
Section ID id="values" for anchor linking
Adequate padding (64px vertical on desktop)

AC2: Section Heading

Given the values section When displayed Then show a section heading:

English: "Our Values"
Arabic: "قيمنا"
Optional subheading about values starting in the field and returning to the people
Typography: H2, SemiBold, Forest Green (#2D322A)
Centered alignment

AC3: Six Value Items

Given the values section When displayed Then show 6 values:

#	English	Arabic	Icon Suggestion
1	Integrity	النزاهة	shield-check
2	Justice	العدالة	scale
3	Knowledge	المعرفة	academic-cap
4	Women's Empowerment	تمكين المرأة	user-group / heart
5	Professionalism	الاحترافية	briefcase
6	Social Innovation	الابتكار الاجتماعي	light-bulb

AC4: Value Item Design

Given each value item When displayed Then include:

Icon: Warm Gold (#A68966) color, 40-48px size
Value name: Bold, Forest Green (#2D322A)
Clean, minimal design (no heavy descriptions)
Centered alignment within item
Optional: subtle hover effect

AC5: Grid Layout

Given different screen sizes When viewing the values section:

Desktop (≥992px): 6 columns (1 row) or 3 columns (2 rows)
Tablet (576-991px): 3 columns (2 rows)
Mobile (<576px): 2 columns (3 rows)

AC6: Visual Style Options

Given the values display When implemented Then choose one of these styles:

Option A: Simple icon + text (minimal)
Option B: Card-based with subtle background
Option C: Icon badges with circular background

Recommendation: Option A (minimal) or Option C (icon badges) for elegance

AC7: RTL Support

Given Arabic language is selected When viewing the values section Then items maintain proper alignment and text direction

Technical Notes

Files to Modify

resources/views/pages/home.blade.php - Add values section
lang/en/home.php - Add translations
lang/ar/home.php - Add translations

HTML Structure (Option A - Minimal)

<section id="values" class="py-16 lg:py-20 bg-card">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="text-2xl lg:text-3xl font-semibold text-text mb-4">
                {{ __('home.values_title') }}
            </h2>
            <p class="text-body max-w-2xl mx-auto">
                {{ __('home.values_subtitle') }}
            </p>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-8">
            @foreach(['integrity', 'justice', 'knowledge', 'empowerment', 'professionalism', 'innovation'] as $value)
                <div class="text-center">
                    <div class="text-cta mb-3">
                        <flux:icon name="{{ __('home.values.' . $value . '.icon') }}" class="w-10 h-10 mx-auto" />
                    </div>
                    <h3 class="text-sm lg:text-base font-semibold text-text">
                        {{ __('home.values.' . $value . '.title') }}
                    </h3>
                </div>
            @endforeach
        </div>
    </div>
</section>

HTML Structure (Option C - Icon Badges)

<section id="values" class="py-16 lg:py-20 bg-card">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="text-2xl lg:text-3xl font-semibold text-text mb-4">
                {{ __('home.values_title') }}
            </h2>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-6">
            @foreach(['integrity', 'justice', 'knowledge', 'empowerment', 'professionalism', 'innovation'] as $value)
                <div class="text-center">
                    <div class="w-16 h-16 lg:w-20 lg:h-20 rounded-full bg-cta/10 flex items-center justify-center mx-auto mb-3">
                        <flux:icon name="{{ __('home.values.' . $value . '.icon') }}" class="w-8 h-8 lg:w-10 lg:h-10 text-cta" />
                    </div>
                    <h3 class="text-sm lg:text-base font-semibold text-text">
                        {{ __('home.values.' . $value . '.title') }}
                    </h3>
                </div>
            @endforeach
        </div>
    </div>
</section>

Translation Keys

// lang/en/home.php (additions)
'values_title' => 'Our Values',
'values_subtitle' => 'These start in the field and return to the people',
'values' => [
    'integrity' => [
        'icon' => 'shield-check',
        'title' => 'Integrity',
    ],
    'justice' => [
        'icon' => 'scale',
        'title' => 'Justice',
    ],
    'knowledge' => [
        'icon' => 'academic-cap',
        'title' => 'Knowledge',
    ],
    'empowerment' => [
        'icon' => 'heart',
        'title' => "Women's Empowerment",
    ],
    'professionalism' => [
        'icon' => 'briefcase',
        'title' => 'Professionalism',
    ],
    'innovation' => [
        'icon' => 'light-bulb',
        'title' => 'Social Innovation',
    ],
],

// lang/ar/home.php (additions)
'values_title' => 'قيمنا',
'values_subtitle' => 'تبدأ من الميدان وتعود إلى الناس',
'values' => [
    'integrity' => [
        'icon' => 'shield-check',
        'title' => 'النزاهة',
    ],
    'justice' => [
        'icon' => 'scale',
        'title' => 'العدالة',
    ],
    'knowledge' => [
        'icon' => 'academic-cap',
        'title' => 'المعرفة',
    ],
    'empowerment' => [
        'icon' => 'heart',
        'title' => 'تمكين المرأة',
    ],
    'professionalism' => [
        'icon' => 'briefcase',
        'title' => 'الاحترافية',
    ],
    'innovation' => [
        'icon' => 'light-bulb',
        'title' => 'الابتكار الاجتماعي',
    ],
],

Icon Options (Heroicons)

shield-check - Integrity
scale - Justice
academic-cap - Knowledge
heart - Women's Empowerment
briefcase - Professionalism
light-bulb - Social Innovation

Dev Checklist

Create values section HTML structure
Add section heading with translations
Add optional subtitle with translations
Implement 6 value items with icons
Add all value titles with translations (EN + AR)
Choose and implement visual style (minimal or badges)
Implement responsive grid layout
Verify icons display correctly
Test RTL layout
Ensure even spacing and alignment

Estimation

Complexity: Low Risk: Low - Simple grid of icons and text

Dependencies

Previous stories for page structure
Flux UI icons available

Dev Agent Record

Status

Ready for Review

Agent Model Used

Claude Opus 4.5 (claude-opus-4-5-20251101)

File List

File	Action
`resources/views/pages/home.blade.php`	Modified - Added values section
`lang/en/home.php`	Modified - Added values translations
`lang/ar/home.php`	Modified - Added values translations
`tests/Feature/Public/HomePageTest.php`	Modified - Added 17 tests for values section

Change Log

Implemented values section using Option C (Icon Badges) style with circular backgrounds
Added subtle hover effect on icon badges (bg-cta/10 to bg-cta/20 transition)
Added all 6 values with icons: shield-check, scale, academic-cap, heart, briefcase, light-bulb
Added bilingual translations (EN/AR) for title, subtitle, and all 6 value names
Implemented responsive grid: 2 cols mobile, 3 cols tablet, 6 cols desktop
Added 17 new tests covering section ID, titles, subtitles, and all values in both languages

Completion Notes

All acceptance criteria met (AC1-AC7)
Chose Option C (Icon Badges) per recommendation for elegance
RTL support automatic via existing layout infrastructure
All 52 HomePageTest tests passing (17 new + 35 existing)

8.2 KiB Raw Blame History