naser
/
libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
libra/docs/stories/story-16.3-values-section.md

7.9 KiB
Raw Blame History

Story 16.3: Values Section

Story

As a website visitor I want to see Libra's core values So that I understand the principles that guide their work

Acceptance Criteria

AC1: Values Section Container

Given the About Us page below the mission section When displayed Then show a values section with:

  • White (#FFFFFF) background
  • Full-width container
  • Adequate vertical padding (60px desktop, 48px tablet, 32px mobile)

AC2: Values Section Header

Given the values section When displayed Then show section header:

  • English: "Our Values"
  • Arabic: "قيمنا"
  • Typography: H2, Bold, Forest Green (#2D322A)
  • Warm Gold underline accent
  • Centered

AC3: Values Introduction

Given the values section below the header When displayed Then show introductory text:

  • English: "These values start in the field and return to the people."
  • Arabic: "هذه القيم تبدأ من الميدان وتعود إلى الناس."
  • Typography: Body text, Regular, Forest Green with opacity
  • Centered, max-width 600px

AC4: Six Value Cards

Given the values section When displayed Then show 6 value cards:

  1. Integrity

    • Icon: Shield/Check icon
    • EN: "Integrity"
    • AR: "النزاهة"

  2. Justice

    • Icon: Scale icon
    • EN: "Justice"
    • AR: "العدالة"

  3. Knowledge

    • Icon: Book/Academic icon
    • EN: "Knowledge"
    • AR: "المعرفة"

  4. Women's Empowerment

    • Icon: Heart/Users icon
    • EN: "Women's Empowerment"
    • AR: "تمكين المرأة"

  5. Professionalism

    • Icon: Briefcase icon
    • EN: "Professionalism"
    • AR: "الاحترافية"

  6. Social Innovation

    • Icon: Lightbulb icon
    • EN: "Social Innovation"
    • AR: "الابتكار الاجتماعي"

AC5: Value Card Styling

Given each value card When displayed Then style with:

  • Warm Cream (#F4F1EA) background
  • Rounded corners (12px)
  • Icon: Warm Gold (#A68966), 40px size, centered
  • Value name: H4, Semi-bold, Forest Green, centered
  • Padding: 24px vertical, 16px horizontal
  • Subtle hover effect (slight lift/shadow)

AC6: Responsive Grid

Given different screen sizes When viewing value cards:

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

AC7: RTL Support

Given Arabic language is selected When viewing the values section Then all cards and text align correctly for RTL

Technical Notes

HTML Structure

{{-- Values Section --}}
<section class="bg-white py-12 lg:py-16">
    <div class="container mx-auto px-4">
        <h2 class="text-2xl lg:text-3xl font-bold text-text text-center mb-2">
            {{ __('about.values_title') }}
        </h2>
        <div class="w-20 h-1 bg-accent mx-auto mb-4"></div>
        <p class="text-center text-text/70 max-w-xl mx-auto mb-12">
            {{ __('about.values_intro') }}
        </p>

        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 lg:gap-6">
            {{-- Integrity --}}
            <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                <div class="text-accent mb-3">
                    <flux:icon name="shield-check" class="w-10 h-10 mx-auto" />
                </div>
                <h4 class="font-semibold text-text">
                    {{ __('about.value_integrity') }}
                </h4>
            </div>

            {{-- Justice --}}
            <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                <div class="text-accent mb-3">
                    <flux:icon name="scale" class="w-10 h-10 mx-auto" />
                </div>
                <h4 class="font-semibold text-text">
                    {{ __('about.value_justice') }}
                </h4>
            </div>

            {{-- Knowledge --}}
            <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                <div class="text-accent mb-3">
                    <flux:icon name="academic-cap" class="w-10 h-10 mx-auto" />
                </div>
                <h4 class="font-semibold text-text">
                    {{ __('about.value_knowledge') }}
                </h4>
            </div>

            {{-- Women's Empowerment --}}
            <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                <div class="text-accent mb-3">
                    <flux:icon name="heart" class="w-10 h-10 mx-auto" />
                </div>
                <h4 class="font-semibold text-text">
                    {{ __('about.value_women') }}
                </h4>
            </div>

            {{-- Professionalism --}}
            <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                <div class="text-accent mb-3">
                    <flux:icon name="briefcase" class="w-10 h-10 mx-auto" />
                </div>
                <h4 class="font-semibold text-text">
                    {{ __('about.value_professionalism') }}
                </h4>
            </div>

            {{-- Social Innovation --}}
            <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                <div class="text-accent mb-3">
                    <flux:icon name="light-bulb" class="w-10 h-10 mx-auto" />
                </div>
                <h4 class="font-semibold text-text">
                    {{ __('about.value_innovation') }}
                </h4>
            </div>
        </div>
    </div>
</section>

Translation Keys to Add

// lang/en/about.php - add these keys
'values_title' => 'Our Values',
'values_intro' => 'These values start in the field and return to the people.',
'value_integrity' => 'Integrity',
'value_justice' => 'Justice',
'value_knowledge' => 'Knowledge',
'value_women' => 'Women\'s Empowerment',
'value_professionalism' => 'Professionalism',
'value_innovation' => 'Social Innovation',

// lang/ar/about.php - add these keys
'values_title' => 'قيمنا',
'values_intro' => 'هذه القيم تبدأ من الميدان وتعود إلى الناس.',
'value_integrity' => 'النزاهة',
'value_justice' => 'العدالة',
'value_knowledge' => 'المعرفة',
'value_women' => 'تمكين المرأة',
'value_professionalism' => 'الاحترافية',
'value_innovation' => 'الابتكار الاجتماعي',

Dev Checklist

  • Add values section to about.blade.php
  • Style section header with gold underline
  • Add intro text
  • Create 6 value cards with icons
  • Implement responsive grid (6 → 3 → 2 columns)
  • Add hover effects to cards
  • Add all English translations
  • Add all Arabic translations
  • Test RTL layout
  • Test responsive breakpoints

Estimation

Complexity: Low Risk: Low - Standard card grid

Dependencies

  • Story 16.2 completed (mission section exists above)
  • Flux icons available

Dev Agent Record

Status

Ready for Review

Agent Model Used

claude-opus-4-5-20251101

Completion Notes

  • Added values section with 6 value cards following the exact HTML structure from technical notes
  • Implemented responsive grid: 2 cols mobile, 3 cols tablet, 6 cols desktop
  • Added all English and Arabic translations for values section
  • Used Flux icons: shield-check, scale, academic-cap, heart, briefcase, light-bulb
  • Added hover shadow effect on cards
  • All 19 new tests pass (52 total AboutPageTest tests pass)
  • RTL support works automatically with centered text and grid layout

File List

  • resources/views/livewire/pages/about.blade.php (modified)
  • lang/en/about.php (modified)
  • lang/ar/about.php (modified)
  • tests/Feature/Public/AboutPageTest.php (modified)

Change Log

  • 2026-01-11: Implemented Story 16.3 values section with all acceptance criteria met