added epic 16 and stories to creat the about us page

2026-01-11 20:28:24 +02:00
parent 8ac0d2b9d7
commit 04fa6b399c
8 changed files with 1630 additions and 1 deletions
@@ -0,0 +1,196 @@
+# 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
+
+```php
+// 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:
+
+```blade
+<a href="{{ route('about') }}">{{ __('nav.about') }}</a>
+```
+
+### HTML Structure
+
+```blade
+<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
+
+```php
+// 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
+
+```php
+// 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