libra/docs/stories/story-14.6-footer-update.md

# Story 14.6: Footer Contact Information Update

## Story

**As a** website visitor
**I want to** see accurate contact information in the footer
**So that** I can reach out to Libra through the correct phone number and address

## Acceptance Criteria

### AC1: Update Phone Number

**Given** the website footer
**When** displayed
**Then** show the phone number: `+970599353502`
- Clickable `tel:` link for mobile devices
- Properly formatted for readability

### AC2: Update Address

**Given** the website footer
**When** displayed
**Then** show the address:
- Arabic: "العمارة الأمريكية - بجانب الشني - الطابق الرابع"
- English: "American Building - Next to Al-Shini - 4th Floor"
- Note: City/region may need to be added if known

### AC3: Phone Display Format

**Given** the phone number in footer
**When** displayed
**Then** format as:
- Display: `+970 599 353 502` (with spaces for readability)
- Link: `tel:+970599353502` (no spaces)

### AC4: Contact Section Layout

**Given** the footer contact area
**When** displayed
**Then** include:
- Phone icon + phone number (clickable)
- Location/map icon + address
- Optionally: Email if available

### AC5: RTL Support

**Given** Arabic language is selected
**When** viewing the footer
**Then** address displays in Arabic and layout adjusts for RTL

### AC6: Consistency Check

**Given** the footer update
**When** completed
**Then** ensure footer displays correctly on:
- Home page
- All public pages (posts, booking, etc.)
- Auth pages (if footer is shown)

## Technical Notes

### File to Modify
- `resources/views/components/layouts/public.blade.php` - Main footer location
- OR `resources/views/components/footer.blade.php` - If footer is a separate component

### Current Footer Location

Check these potential locations:
```
resources/views/components/layouts/public.blade.php
resources/views/components/footer.blade.php
resources/views/components/public/footer.blade.php
```

### HTML Structure Update

```blade
<footer class="bg-primary text-off-white py-12">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Logo/Brand -->
            <div>
                <img src="{{ asset('images/logo-light.svg') }}" alt="Libra" class="h-12 mb-4">
                <p class="text-sm text-off-white/80">
                    {{ __('footer.tagline') }}
                </p>
            </div>

            <!-- Contact Info -->
            <div>
                <h4 class="font-semibold mb-4">{{ __('footer.contact_title') }}</h4>
                <ul class="space-y-3 text-sm">
                    <li class="flex items-center gap-2">
                        <flux:icon name="phone" class="w-5 h-5 text-cta" />
                        <a href="tel:+970599353502" class="hover:text-cta transition-colors">
                            +970 599 353 502
                        </a>
                    </li>
                    <li class="flex items-start gap-2">
                        <flux:icon name="map-pin" class="w-5 h-5 text-cta flex-shrink-0 mt-0.5" />
                        <span>{{ __('footer.address') }}</span>
                    </li>
                </ul>
            </div>

            <!-- Quick Links -->
            <div>
                <h4 class="font-semibold mb-4">{{ __('footer.links_title') }}</h4>
                <ul class="space-y-2 text-sm">
                    <li><a href="{{ route('booking') }}" class="hover:text-cta transition-colors">{{ __('footer.link_booking') }}</a></li>
                    <li><a href="{{ route('posts.index') }}" class="hover:text-cta transition-colors">{{ __('footer.link_posts') }}</a></li>
                    <li><a href="{{ route('login') }}" class="hover:text-cta transition-colors">{{ __('footer.link_login') }}</a></li>
                </ul>
            </div>
        </div>

        <!-- Copyright -->
        <div class="border-t border-off-white/20 mt-8 pt-8 text-center text-sm text-off-white/60">
            <p>{{ __('footer.copyright', ['year' => date('Y')]) }}</p>
        </div>
    </div>
</footer>
```

### Translation Keys

```php
// lang/en/footer.php (create or update existing)
return [
    'tagline' => 'Committed to Justice – Grounded in Dignity – Driven to Advocate',
    'contact_title' => 'Contact Us',
    'address' => 'American Building - Next to Al-Shini - 4th Floor',
    'links_title' => 'Quick Links',
    'link_booking' => 'Book a Consultation',
    'link_posts' => 'Articles',
    'link_login' => 'Client Login',
    'copyright' => '© :year Libra for Rights. All rights reserved.',
];

// lang/ar/footer.php (create or update existing)
return [
    'tagline' => 'ملتزمون بالعدالة – متجذرون بالكرامة – مدفوعون للدفاع',
    'contact_title' => 'تواصل معنا',
    'address' => 'العمارة الأمريكية - بجانب الشني - الطابق الرابع',
    'links_title' => 'روابط سريعة',
    'link_booking' => 'احجز استشارة',
    'link_posts' => 'المقالات',
    'link_login' => 'دخول العملاء',
    'copyright' => '© :year ليبرا للحقوق. جميع الحقوق محفوظة.',
];
```

### Contact Information Summary

| Field | Value |
|-------|-------|
| Phone | +970599353502 |
| Phone (formatted) | +970 599 353 502 |
| Address (AR) | العمارة الأمريكية - بجانب الشني - الطابق الرابع |
| Address (EN) | American Building - Next to Al-Shini - 4th Floor |

## Dev Checklist

- [ ] Locate current footer implementation
- [ ] Update phone number to +970599353502
- [ ] Add clickable tel: link for phone
- [ ] Update address with bilingual support
- [ ] Add appropriate icons (phone, map-pin)
- [ ] Create/update translation files for footer
- [ ] Test footer displays on all public pages
- [ ] Test RTL layout for Arabic
- [ ] Verify phone link works on mobile
- [ ] Ensure visual consistency with existing footer design

## Estimation

**Complexity:** Low
**Risk:** Low - Simple content update

## Dependencies

- Existing footer component/layout
- No dependencies on other Epic 14 stories (can be done in parallel)