libra/docs/stories/story-16.1-about-page-layout-hero.md

Story 16.1: About Page Layout & Hero Section

Story

As a website visitor I want to access a dedicated About Us page So that I can learn about Libra for Rights' identity and purpose

Acceptance Criteria

AC1: Route & Navigation

Given a visitor on any page When they look at the main navigation Then an "About Us" / "من نحن" link is visible

When they click the About Us link Then they are navigated to /about

AC2: Page Structure

Given a visitor accesses /about When the page loads Then the page uses the public layout with:

• Navigation header
• Main content area
• Footer

AC3: Hero Section Container

Given the About Us page loads When displayed Then show a hero section with:

• Dark Forest Green (#2D3624) background
• Full-width container
• Adequate vertical padding (80px desktop, 60px tablet, 40px mobile)
• Centered white text

AC4: Page Title

Given the hero section When viewed in English Then display title: "About Us"

When viewed in Arabic Then display title: "من نحن"

• Typography: H1, Bold, White
• Responsive font size: 3rem desktop, 2.5rem tablet, 2rem mobile

AC5: Tagline Display

Given the hero section below the title When displayed Then show the tagline:

• English: "Committed to Justice – Grounded in Dignity – Driven to Advocate"
• Arabic: "ملتزمون بالعدالة – متجذرون بالكرامة – مدفوعون للدفاع"
• Typography: H2, Regular, White with opacity
• Max-width: 800px centered

AC6: Identity Statement

Given the hero section below the tagline When displayed Then show the identity statement:

• English: "A legal institution woven from the fabric of society, using research as a tool of power to serve justice."
• Arabic: "مؤسسة قانونية منسوجة من نسيج المجتمع، تستخدم البحث كأداة قوة لخدمة العدالة."
• Typography: Body text, Regular, White
• Max-width: 700px centered

AC7: Responsive Layout

Given different screen sizes When viewing the hero section:

• Desktop (≥992px): Full layout with comfortable spacing
• Tablet (576-991px): Reduced padding, slightly smaller text
• Mobile (<576px): Compact spacing, stacked layout

AC8: RTL Support

Given Arabic language is selected When viewing the page Then all text and elements align right-to-left correctly

Technical Notes

Files to Create

• resources/views/pages/about.blade.php - Main page
• lang/en/about.php - English translations
• lang/ar/about.php - Arabic translations

Route to Add

// routes/web.php
Route::get('/about', function () {
    return view('pages.about');
})->name('about');

Navigation Update

Update resources/views/components/layouts/public.blade.php to include About Us link:

<a href="{{ route('about') }}">{{ __('nav.about') }}</a>

HTML Structure

<x-layouts.public>
    {{-- Hero Section --}}
    <section class="bg-[#2D3624] py-16 lg:py-20">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl lg:text-5xl font-bold text-white mb-4">
                {{ __('about.title') }}
            </h1>
            <p class="text-xl lg:text-2xl text-white/80 max-w-3xl mx-auto mb-6">
                {{ __('about.tagline') }}
            </p>
            <p class="text-lg text-white/70 max-w-2xl mx-auto">
                {{ __('about.identity') }}
            </p>
        </div>
    </section>

    {{-- Vision Section - Story 16.2 --}}

    {{-- Mission Section - Story 16.2 --}}

    {{-- Values Section - Story 16.3 --}}

    {{-- Goals Section - Story 16.4 --}}

    {{-- Services Section - Story 16.5 --}}

    {{-- Scholarship Section - Story 16.6 --}}
</x-layouts.public>

Translation Keys

// lang/en/about.php
return [
    'title' => 'About Us',
    'tagline' => 'Committed to Justice – Grounded in Dignity – Driven to Advocate',
    'identity' => 'A legal institution woven from the fabric of society, using research as a tool of power to serve justice.',
];

// lang/ar/about.php
return [
    'title' => 'من نحن',
    'tagline' => 'ملتزمون بالعدالة – متجذرون بالكرامة – مدفوعون للدفاع',
    'identity' => 'مؤسسة قانونية منسوجة من نسيج المجتمع، تستخدم البحث كأداة قوة لخدمة العدالة.',
];

Navigation Translation Keys

// Add to lang/en/nav.php
'about' => 'About Us',

// Add to lang/ar/nav.php
'about' => 'من نحن',

Dev Checklist

• Add route for /about in routes/web.php
• Create resources/views/pages/about.blade.php
• Create lang/en/about.php with initial translations
• Create lang/ar/about.php with initial translations
• Add About Us link to navigation
• Implement hero section with dark green background
• Style page title with correct typography
• Add tagline below title
• Add identity statement
• Test responsive layout (mobile, tablet, desktop)
• Test RTL layout (Arabic)
• Test LTR layout (English)
• Verify navigation link works correctly

Estimation

Complexity: Low Risk: Low - Standard page creation

Dependencies

• Public layout exists
• Navigation component exists
• Brand colors defined in CSS