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

8.3 KiB
Raw Blame History

Story 14.2: About Section with Lawyer Profile

Story

As a website visitor I want to see information about the lawyer behind Libra So that I can trust the firm and understand who will be handling my case

Acceptance Criteria

AC1: Section Container

Given a visitor scrolls past the hero section When viewing the about section Then display a section with:

  • White (#FFFFFF) background to contrast with hero
  • Section ID id="about" for anchor linking
  • Adequate padding (64px vertical on desktop)

AC2: Section Heading

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

  • English: "About Us" or "Meet the Founder"
  • Arabic: "من نحن" or "تعرف على المؤسسة"
  • Typography: H2, SemiBold, Forest Green (#2D322A)

AC3: Lawyer Photo

Given the about section When displayed Then show Huda Armouche's professional photo:

  • Rounded corners or circular crop
  • Appropriate size (200-300px width on desktop)
  • Shadow for depth
  • Alt text for accessibility

AC4: Lawyer Name and Title

Given the about section When displayed Then show:

  • Name (EN): "Huda Armouche"
  • Name (AR): "هدى عرموش"
  • Title (EN): "Attorney at Law"
  • Title (AR): "محامية"
  • Name: Bold, larger font
  • Title: Regular, Warm Gold accent color

AC5: Bio Text

Given the about section When displayed Then show a professional bio:

  • English: "Huda Armouche founded Libra for Rights with a vision to create a legal institution woven from the fabric of society. With a commitment to justice and dignity, she leads a practice that investigates challenges, documents them, and transforms them into innovative legal solutions. Libra accompanies individuals and institutions with honesty and professionalism, striving to advance justice and empower women through law, research, and fieldwork."
  • Arabic: "أسست هدى عرموش ليبرا للحقوق برؤية لإنشاء مؤسسة قانونية منسوجة من نسيج المجتمع. بالتزامها بالعدالة والكرامة، تقود ممارسة تحقق في التحديات وتوثقها وتحولها إلى حلول قانونية مبتكرة. تُرافق ليبرا الأفراد والمؤسسات بأمانة واحترافية، ساعية لتعزيز العدالة وتمكين المرأة من خلال القانون والبحث والعمل الميداني."
  • Typography: Body text, readable line height
  • Max-width for comfortable reading

AC6: Layout Structure

Given different screen sizes When viewing the about section:

  • Desktop: Two-column layout (photo left/right, text opposite)
  • Tablet: Two-column or stacked
  • Mobile: Stacked (photo above, text below)

AC7: RTL Support

Given Arabic language is selected When viewing the about section Then layout mirrors appropriately (photo on right in RTL if it was on left in LTR)

Technical Notes

Files to Modify/Create

  • resources/views/pages/home.blade.php - Add about section
  • lang/en/home.php - Add translations
  • lang/ar/home.php - Add translations
  • public/images/huda-armouche.jpg - Lawyer photo (to be added)

HTML Structure

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

        <div class="flex flex-col lg:flex-row items-center gap-8 lg:gap-12 max-w-5xl mx-auto">
            <!-- Photo -->
            <div class="flex-shrink-0">
                <img
                    src="{{ asset('images/huda-armouche.jpg') }}"
                    alt="{{ __('home.lawyer_name') }}"
                    class="w-48 h-48 lg:w-64 lg:h-64 rounded-full object-cover shadow-lg"
                >
            </div>

            <!-- Bio -->
            <div class="text-center lg:text-start">
                <h3 class="text-xl lg:text-2xl font-bold text-text mb-1">
                    {{ __('home.lawyer_name') }}
                </h3>
                <p class="text-cta font-medium mb-4">
                    {{ __('home.lawyer_title') }}
                </p>
                <p class="text-body leading-relaxed">
                    {{ __('home.lawyer_bio') }}
                </p>
            </div>
        </div>
    </div>
</section>

Translation Keys

// lang/en/home.php (additions)
'about_title' => 'Meet the Founder',
'lawyer_name' => 'Huda Armouche',
'lawyer_title' => 'Attorney at Law',
'lawyer_bio' => 'Huda Armouche founded Libra for Rights with a vision to create a legal institution woven from the fabric of society. With a commitment to justice and dignity, she leads a practice that investigates challenges, documents them, and transforms them into innovative legal solutions. Libra accompanies individuals and institutions with honesty and professionalism, striving to advance justice and empower women through law, research, and fieldwork.',

// lang/ar/home.php (additions)
'about_title' => 'تعرف على المؤسِّسة',
'lawyer_name' => 'هدى عرموش',
'lawyer_title' => 'محامية',
'lawyer_bio' => 'أسست هدى عرموش ليبرا للحقوق برؤية لإنشاء مؤسسة قانونية منسوجة من نسيج المجتمع. بالتزامها بالعدالة والكرامة، تقود ممارسة تحقق في التحديات وتوثقها وتحولها إلى حلول قانونية مبتكرة. تُرافق ليبرا الأفراد والمؤسسات بأمانة واحترافية، ساعية لتعزيز العدالة وتمكين المرأة من خلال القانون والبحث والعمل الميداني.',

Image Requirements

  • File: public/images/huda-armouche.jpg
  • Source: WhatsApp Image 2026-01-07 at 5.34.23 PM.jpeg (provided by client)
  • Processing: May need to crop/resize for optimal display
  • Recommended dimensions: 400x400px minimum for retina displays

Dev Checklist

  • Copy and rename lawyer photo to public/images/huda-armouche.jpg
  • Create about section HTML structure
  • Add section heading with translations
  • Implement photo display with proper styling
  • Add name and title with correct typography
  • Add bio text with translations
  • Implement responsive layout (flex column on mobile, row on desktop)
  • Test RTL layout mirrors correctly
  • Verify image loads and displays correctly
  • Ensure accessible alt text on image

Estimation

Complexity: Low Risk: Low - Content section with image

Dependencies

  • Story 14.1 (Hero) should be completed first for page structure
  • Lawyer photo file must be placed in public/images/

Dev Agent Record

Status

Ready for Review

Agent Model Used

Claude Opus 4.5

File List

File Action
public/images/huda-armouche.jpg Created (copied from source)
lang/en/home.php Modified (added about_title, lawyer_name, lawyer_title, lawyer_bio)
lang/ar/home.php Modified (added about_title, lawyer_name, lawyer_title, lawyer_bio)
resources/views/pages/home.blade.php Modified (added about section)
tests/Feature/Public/HomePageTest.php Modified (added 12 about section tests)

Change Log

  • Copied lawyer photo from WhatsApp Image 2026-01-07 at 5.34.23 PM.jpeg to public/images/huda-armouche.jpg
  • Added English translations for about section (about_title, lawyer_name, lawyer_title, lawyer_bio)
  • Added Arabic translations for about section
  • Created about section in home page with:
    • White background (bg-card)
    • Section ID id="about" for anchor linking
    • 64px/80px vertical padding (py-16 lg:py-20)
    • H2 heading with translations
    • Circular photo with shadow (w-48/lg:w-64, rounded-full, object-cover, shadow-lg)
    • Name in bold, title in warm gold color (text-cta)
    • Bio text with readable line height (leading-relaxed)
    • Responsive layout: stacked on mobile, two-column on desktop (flex-col lg:flex-row)
    • RTL support via Tailwind's text-start class
  • Added 12 comprehensive tests for about section covering both locales

Completion Notes

  • All acceptance criteria met
  • All 23 HomePageTest tests pass (including 12 new about section tests)
  • All 61 public page tests pass
  • Code formatted with Pint
  • RTL layout automatically handled by Tailwind's flex-row and text-start utilities