naser/libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

24-2: navigation and footer — implemented, QA Review

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Naser Mansour
2026-10-31 18:43:25 +02:00
parent 5f5d1d2b31
commit 8b2c35f76f
9 changed files with 303 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/footer.blade.php
+33 -58
View File
@@ -1,68 +1,43 @@
<footer class="bg-primary mt-auto" data-test="main-footer">
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Logo & Description -->
<div class="text-center sm:text-start">
<x-logo size="lg" class="logo-badge" />
<p class="mt-3 text-cta text-sm">
{{ __('footer.description') }}
</p>
<footer class="site-footer" data-test="main-footer">
<span class="foot-band" aria-hidden="true"></span>
<div class="wrap">
<div class="foot">
<div>
<a href="{{ route('home') }}" class="brand" aria-label="{{ __('site.brand_label') }}" wire:navigate>
<span class="seal" style="background-image:url('{{ asset('images/logo.png') }}')"></span>
<span>
<b>{{ __('site.brand_name') }}</b>
<small>{{ __('site.brand_sub') }}</small>
</span>
</a>
<p>{{ __('home.tagline') }}</p>
</div>
<!-- Contact Information -->
<div class="text-center sm:text-start">
<h3 class="text-off-white font-semibold mb-3">{{ __('footer.contact') }}</h3>
<address class="text-cta text-sm not-italic space-y-2">
<p class="flex items-center justify-center sm:justify-start gap-2">
<flux:icon name="phone" class="w-4 h-4 text-cta flex-shrink-0" />
<a href="tel:+970599353502" class="hover:text-cta-light transition-colors ltr-inline" data-test="footer-phone">
+970 599 353 502
</a>
</p>
<p class="flex items-start justify-center sm:justify-start gap-2">
<flux:icon name="map-pin" class="w-4 h-4 text-cta flex-shrink-0 mt-0.5" />
<span data-test="footer-address">{{ __('footer.address') }}</span>
</p>
<p class="flex items-center justify-center sm:justify-start gap-2">
<flux:icon name="envelope" class="w-4 h-4 text-cta flex-shrink-0" />
<a href="mailto:{{ __('footer.email') }}" class="hover:text-cta-light transition-colors ltr-inline" data-test="footer-email">
{{ __('footer.email') }}
</a>
</p>
</address>
<div>
<h4>{{ __('site.footer_explore') }}</h4>
<a href="{{ route('about') }}" wire:navigate>{{ __('site.nav_about') }}</a>
<a href="{{ route('home') }}#services" wire:navigate>{{ __('site.nav_services') }}</a>
<a href="{{ route('posts.index') }}" wire:navigate>{{ __('site.nav_articles') }}</a>
<a href="{{ route('booking') }}" wire:navigate>{{ __('site.nav_booking') }}</a>
</div>
<!-- Legal Links -->
<div class="text-center sm:text-start sm:col-span-2 lg:col-span-1">
<h3 class="text-off-white font-semibold mb-3">{{ __('footer.legal') }}</h3>
<ul class="space-y-2 flex flex-row sm:flex-col gap-4 sm:gap-0 justify-center sm:justify-start">
<li>
<a
href="{{ route('terms') }}"
class="text-cta hover:text-cta-light transition-colors text-sm min-h-[44px] inline-flex items-center"
data-test="footer-terms"
>
{{ __('footer.terms') }}
</a>
</li>
<li>
<a
href="{{ route('privacy') }}"
class="text-cta hover:text-cta-light transition-colors text-sm min-h-[44px] inline-flex items-center"
data-test="footer-privacy"
>
{{ __('footer.privacy') }}
</a>
</li>
</ul>
<div>
<h4>{{ __('site.footer_clients') }}</h4>
<a href="{{ route('login') }}" wire:navigate>{{ __('site.nav_login') }}</a>
<a href="{{ route('terms') }}" wire:navigate data-test="footer-terms">{{ __('site.footer_terms') }}</a>
<a href="{{ route('privacy') }}" wire:navigate data-test="footer-privacy">{{ __('site.footer_privacy') }}</a>
</div>
<div>
<h4>{{ __('site.footer_contact') }}</h4>
<a href="tel:+970599353502" dir="ltr" data-test="footer-phone">{{ __('footer.phone') }}</a>
<a href="mailto:{{ __('footer.email') }}" data-test="footer-email">{{ __('footer.email') }}</a>
<span data-test="footer-address">{{ __('footer.address') }}</span>
</div>
</div>
<!-- Copyright -->
<div class="mt-6 sm:mt-8 pt-4 sm:pt-6 border-t border-cta/20 text-center">
<p class="text-cta text-xs sm:text-sm" data-test="footer-copyright">
&copy; {{ date('Y') }} {{ __('footer.copyright') }}
</p>
<div class="legal">
<span data-test="footer-copyright">&copy; {{ date('Y') }} {{ __('footer.copyright') }}</span>
</div>
</div>
</footer>