7.7 KiB

Raw Blame History

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

<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

// 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)

Dev Agent Record

Status

Ready for Review

Agent Model Used

Claude Opus 4.5 (claude-opus-4-5-20251101)

File List

File	Action
`resources/views/components/footer.blade.php`	Modified (added icons, clickable phone/email links)
`lang/en/footer.php`	Modified (updated address and phone)
`lang/ar/footer.php`	Modified (updated address and phone)
`tests/Feature/NavigationTest.php`	Modified (added 5 footer tests)

Change Log

Updated footer contact section with phone icon and clickable tel:+970599353502 link
Added map-pin icon for address display
Added envelope icon with clickable mailto: link for email
Updated English address to "American Building - Next to Al-Shini - 4th Floor"
Updated Arabic address to "العمارة الأمريكية - بجانب الشني - الطابق الرابع"
Updated phone number to formatted display "+970 599 353 502"
Updated email to info@libra.adv.ps
Added data-test attributes for footer-phone, footer-address, footer-email
Added 3 new footer component tests (phone, address, email)
Added 4 new translation assertions (address and phone for EN/AR)

Debug Log References

None - implementation completed without issues

Completion Notes

All acceptance criteria met
Phone number clickable with proper tel: link format
Address displays in correct language based on locale
Icons added using flux:icon components (phone, map-pin, envelope)
RTL support inherited from existing layout structure
All 9 footer tests pass (27 assertions)
69 home page tests pass confirming footer displays correctly

7.7 KiB Raw Blame History Unescape Escape