redone 12.3

This commit is contained in:
Naser Mansour
2026-01-04 02:04:03 +02:00
parent 1796bdb51e
commit 204c73646d
17 changed files with 139 additions and 99 deletions
+6 -6
View File
@@ -4,7 +4,7 @@
<!-- Logo & Description -->
<div class="text-center sm:text-start">
<x-logo size="lg" class="logo-badge" />
<p class="mt-3 text-accent text-sm">
<p class="mt-3 text-cta text-sm">
{{ __('footer.description') }}
</p>
</div>
@@ -12,7 +12,7 @@
<!-- Contact Information -->
<div class="text-center sm:text-start">
<h3 class="text-off-white font-semibold mb-3">{{ __('footer.contact') }}</h3>
<address class="text-accent text-sm not-italic space-y-1">
<address class="text-cta text-sm not-italic space-y-1">
<p>{{ __('footer.address') }}</p>
<p><span class="ltr-inline">{{ __('footer.phone') }}</span></p>
<p><span class="ltr-inline">{{ __('footer.email') }}</span></p>
@@ -26,7 +26,7 @@
<li>
<a
href="{{ route('terms') }}"
class="text-accent hover:text-off-white transition-colors text-sm min-h-[44px] inline-flex items-center"
class="text-cta hover:text-cta-light transition-colors text-sm min-h-[44px] inline-flex items-center"
data-test="footer-terms"
>
{{ __('footer.terms') }}
@@ -35,7 +35,7 @@
<li>
<a
href="{{ route('privacy') }}"
class="text-accent hover:text-off-white transition-colors text-sm min-h-[44px] inline-flex items-center"
class="text-cta hover:text-cta-light transition-colors text-sm min-h-[44px] inline-flex items-center"
data-test="footer-privacy"
>
{{ __('footer.privacy') }}
@@ -46,8 +46,8 @@
</div>
<!-- Copyright -->
<div class="mt-6 sm:mt-8 pt-4 sm:pt-6 border-t border-accent/20 text-center">
<p class="text-accent text-xs sm:text-sm" data-test="footer-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>
@@ -5,25 +5,25 @@
href="{{ route('language.switch', 'ar') }}"
@class([
'text-sm px-2 py-1 rounded transition-colors min-h-[32px] flex items-center',
'bg-amber-500 text-white font-bold' => app()->getLocale() === 'ar',
'text-off-white hover:text-accent' => app()->getLocale() !== 'ar' && $variant === 'dark',
'text-body/70 hover:text-body' => app()->getLocale() !== 'ar' && $variant === 'light',
'bg-active text-white font-bold' => app()->getLocale() === 'ar',
'text-off-white hover:text-cta hover:bg-active-hover' => app()->getLocale() !== 'ar' && $variant === 'dark',
'text-body/70 hover:text-body hover:bg-active-hover' => app()->getLocale() !== 'ar' && $variant === 'light',
])
data-test="language-switch-ar"
>
العربية
</a>
<span @class([
'text-accent/50' => $variant === 'dark',
'text-cta/50' => $variant === 'dark',
'text-body/30' => $variant === 'light',
])>|</span>
<a
href="{{ route('language.switch', 'en') }}"
@class([
'text-sm px-2 py-1 rounded transition-colors min-h-[32px] flex items-center',
'bg-amber-500 text-white font-bold' => app()->getLocale() === 'en',
'text-off-white hover:text-accent' => app()->getLocale() !== 'en' && $variant === 'dark',
'text-body/70 hover:text-body' => app()->getLocale() !== 'en' && $variant === 'light',
'bg-active text-white font-bold' => app()->getLocale() === 'en',
'text-off-white hover:text-cta hover:bg-active-hover' => app()->getLocale() !== 'en' && $variant === 'dark',
'text-body/70 hover:text-body hover:bg-active-hover' => app()->getLocale() !== 'en' && $variant === 'light',
])
data-test="language-switch-en"
>
@@ -3,7 +3,7 @@
<head>
@include('partials.head')
</head>
<body class="min-h-screen flex flex-col bg-off-white" style="font-family: var(--font-{{ app()->getLocale() === 'ar' ? 'arabic' : 'english' }})">
<body class="min-h-screen flex flex-col bg-background" style="font-family: var(--font-{{ app()->getLocale() === 'ar' ? 'arabic' : 'english' }})">
<!-- Skip to content link for keyboard accessibility -->
<a href="#main-content" class="skip-link" data-test="skip-to-content">
{{ __('accessibility.skip_to_content') }}
+24 -24
View File
@@ -17,7 +17,7 @@
<!-- Hamburger Button -->
<button
@click="mobileMenuOpen = !mobileMenuOpen"
class="p-2 text-off-white hover:text-accent focus:outline-none min-h-[44px] min-w-[44px] flex items-center justify-center"
class="p-2 text-off-white hover:text-cta focus:outline-none min-h-[44px] min-w-[44px] flex items-center justify-center"
:aria-expanded="mobileMenuOpen"
aria-label="{{ __('Toggle navigation menu') }}"
data-test="mobile-menu-button"
@@ -46,8 +46,8 @@
<a
href="{{ route('home') }}"
@class([
'text-off-white hover:text-accent transition-colors py-2',
'border-b-2 border-accent' => request()->routeIs('home'),
'text-off-white hover:text-cta transition-colors py-2',
'border-b-2 border-cta' => request()->routeIs('home'),
])
wire:navigate
data-test="nav-home"
@@ -57,8 +57,8 @@
<a
href="{{ route('booking') }}"
@class([
'text-off-white hover:text-accent transition-colors py-2',
'border-b-2 border-accent' => request()->routeIs('booking*'),
'text-off-white hover:text-cta transition-colors py-2',
'border-b-2 border-cta' => request()->routeIs('booking*'),
])
wire:navigate
data-test="nav-booking"
@@ -68,8 +68,8 @@
<a
href="{{ route('posts.index') }}"
@class([
'text-off-white hover:text-accent transition-colors py-2',
'border-b-2 border-accent' => request()->routeIs('posts*'),
'text-off-white hover:text-cta transition-colors py-2',
'border-b-2 border-cta' => request()->routeIs('posts*'),
])
wire:navigate
data-test="nav-posts"
@@ -84,8 +84,8 @@
<a
href="{{ $dashboardRoute }}"
@class([
'text-off-white hover:text-accent transition-colors py-2',
'border-b-2 border-accent' => request()->routeIs('*.dashboard'),
'text-off-white hover:text-cta transition-colors py-2',
'border-b-2 border-cta' => request()->routeIs('*.dashboard'),
])
wire:navigate
data-test="nav-dashboard"
@@ -96,7 +96,7 @@
@csrf
<button
type="submit"
class="text-off-white hover:text-accent transition-colors py-2"
class="text-off-white hover:text-cta transition-colors py-2"
data-test="nav-logout"
>
{{ __('navigation.logout') }}
@@ -106,8 +106,8 @@
<a
href="{{ route('login') }}"
@class([
'text-off-white hover:text-accent transition-colors py-2',
'border-b-2 border-accent' => request()->routeIs('login'),
'text-off-white hover:text-cta transition-colors py-2',
'border-b-2 border-cta' => request()->routeIs('login'),
])
wire:navigate
data-test="nav-login"
@@ -137,7 +137,7 @@
x-cloak
@click.away="mobileMenuOpen = false"
@keydown.escape.window="mobileMenuOpen = false"
class="md:hidden bg-primary border-t border-accent/20"
class="md:hidden bg-primary border-t border-cta/20"
role="dialog"
aria-modal="true"
aria-label="{{ __('Mobile navigation menu') }}"
@@ -147,8 +147,8 @@
<a
href="{{ route('home') }}"
@class([
'block px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center',
'bg-primary-hover border-s-2 border-accent' => request()->routeIs('home'),
'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
'bg-active border-s-2 border-cta' => request()->routeIs('home'),
])
wire:navigate
@click="mobileMenuOpen = false"
@@ -159,8 +159,8 @@
<a
href="{{ route('booking') }}"
@class([
'block px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center',
'bg-primary-hover border-s-2 border-accent' => request()->routeIs('booking*'),
'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
'bg-active border-s-2 border-cta' => request()->routeIs('booking*'),
])
wire:navigate
@click="mobileMenuOpen = false"
@@ -171,8 +171,8 @@
<a
href="{{ route('posts.index') }}"
@class([
'block px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center',
'bg-primary-hover border-s-2 border-accent' => request()->routeIs('posts*'),
'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
'bg-active border-s-2 border-cta' => request()->routeIs('posts*'),
])
wire:navigate
@click="mobileMenuOpen = false"
@@ -188,8 +188,8 @@
<a
href="{{ $dashboardRoute }}"
@class([
'block px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center',
'bg-primary-hover border-s-2 border-accent' => request()->routeIs('*.dashboard'),
'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
'bg-active border-s-2 border-cta' => request()->routeIs('*.dashboard'),
])
wire:navigate
@click="mobileMenuOpen = false"
@@ -201,7 +201,7 @@
@csrf
<button
type="submit"
class="w-full text-start px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center"
class="w-full text-start px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center"
data-test="mobile-nav-logout"
>
{{ __('navigation.logout') }}
@@ -211,8 +211,8 @@
<a
href="{{ route('login') }}"
@class([
'block px-3 py-3 text-off-white hover:text-accent hover:bg-primary-hover rounded-md min-h-[44px] flex items-center',
'bg-primary-hover border-s-2 border-accent' => request()->routeIs('login'),
'block px-3 py-3 text-off-white hover:text-cta hover:bg-primary-light rounded-md min-h-[44px] flex items-center',
'bg-active border-s-2 border-cta' => request()->routeIs('login'),
])
wire:navigate
@click="mobileMenuOpen = false"
+1 -1
View File
@@ -15,7 +15,7 @@
<div {{ $attributes->merge(['class' => $inline ? 'inline-flex items-center gap-2' : 'flex items-center gap-2']) }}>
<svg
class="animate-spin {{ $sizeClass }} text-primary"
class="animate-spin {{ $sizeClass }} text-cta"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
+1 -1
View File
@@ -43,7 +43,7 @@
'bg-success text-white': toast.type === 'success',
'bg-danger text-white': toast.type === 'error',
'bg-warning text-body': toast.type === 'warning',
'bg-primary text-white': toast.type === 'info' || !toast.type
'bg-cta text-white': toast.type === 'info' || !toast.type
}"
role="alert"
>
+3 -3
View File
@@ -5,7 +5,7 @@
])
@php
$classes = 'bg-off-white rounded-lg p-6';
$classes = 'bg-card rounded-lg p-6';
// Variant-based shadow (default uses custom shadow from specs: 0 2px 8px rgba(0,0,0,0.1))
$classes .= match($variant) {
@@ -18,9 +18,9 @@
$classes .= ' hover:shadow-card-hover hover:-translate-y-0.5 transition-all duration-200 cursor-pointer';
}
// Light Olive highlight border (uses border-s for RTL support)
// Gold Light highlight border (uses border-s for RTL support)
if ($highlight) {
$classes .= ' border-s-4 border-accent';
$classes .= ' border-s-4 border-cta-light';
}
@endphp
@@ -8,8 +8,8 @@
<x-ui.card>
<div class="flex items-center gap-4">
@if($icon)
<div class="p-3 bg-accent/10 rounded-lg">
<flux:icon :name="$icon" class="w-6 h-6 text-primary" />
<div class="p-3 bg-cta-light/20 rounded-lg">
<flux:icon :name="$icon" class="w-6 h-6 text-cta" />
</div>
@endif
<div>
@@ -33,7 +33,7 @@ new #[Layout('components.layouts.public')] class extends Component
return preg_replace(
'/('.preg_quote($escapedSearch, '/').')/iu',
'<mark class="bg-accent/30 rounded px-1">$1</mark>',
'<mark class="bg-cta/30 rounded px-1">$1</mark>',
$escapedText
);
}
@@ -94,9 +94,9 @@ new #[Layout('components.layouts.public')] class extends Component
<!-- Posts List -->
<div class="mt-6 sm:mt-8 space-y-4 sm:space-y-6">
@forelse($posts as $post)
<article wire:key="post-{{ $post->id }}" class="bg-white p-4 sm:p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<h2 class="text-lg sm:text-xl font-semibold text-body">
<a href="{{ route('posts.show', $post) }}" class="hover:text-primary" wire:navigate>
<article wire:key="post-{{ $post->id }}" class="bg-card p-4 sm:p-6 rounded-lg shadow-card hover:shadow-card-hover transition-shadow">
<h2 class="text-lg sm:text-xl font-semibold text-text">
<a href="{{ route('posts.show', $post) }}" class="hover:text-cta" wire:navigate>
@if($search)
{!! $this->highlightSearch($post->getTitle(), $search) !!}
@else
@@ -117,12 +117,12 @@ new #[Layout('components.layouts.public')] class extends Component
@endif
</p>
<a href="{{ route('posts.show', $post) }}" class="text-primary hover:underline mt-3 sm:mt-4 inline-flex items-center min-h-[44px]" wire:navigate>
<a href="{{ route('posts.show', $post) }}" class="text-cta hover:text-cta-hover hover:underline mt-3 sm:mt-4 inline-flex items-center min-h-[44px]" wire:navigate>
{{ __('posts.read_more') }} &rarr;
</a>
</article>
@empty
<div class="empty-state bg-white rounded-lg">
<div class="empty-state bg-card rounded-lg">
@if($search)
<flux:icon name="magnifying-glass" class="empty-state-icon text-body/30" />
<p class="text-body/70">{{ __('posts.no_results', ['query' => $search]) }}</p>
@@ -31,8 +31,8 @@ new #[Layout('components.layouts.public')] class extends Component
{!! $post->getBody() !!}
</div>
<footer class="mt-12 pt-6 border-t border-accent/20">
<a href="{{ route('posts.index') }}" class="text-primary hover:underline" wire:navigate>
<footer class="mt-12 pt-6 border-t border-cta/20">
<a href="{{ route('posts.index') }}" class="text-cta hover:text-cta-hover hover:underline" wire:navigate>
&larr; {{ __('posts.back_to_posts') }}
</a>
</footer>
+2 -2
View File
@@ -1,7 +1,7 @@
<x-layouts.public>
<div class="py-8">
<h1 class="text-3xl font-bold text-body mb-6">{{ __('navigation.booking') }}</h1>
<div class="bg-white p-8 rounded-lg shadow-md">
<h1 class="text-3xl font-bold text-text mb-6">{{ __('navigation.booking') }}</h1>
<div class="bg-card p-8 rounded-lg shadow-card">
<p class="text-body">{{ __('Booking form will be implemented in a future story.') }}</p>
</div>
</div>
+6 -6
View File
@@ -4,16 +4,16 @@
<p class="text-body text-base sm:text-lg mb-6 sm:mb-8 px-4">{{ __('Professional legal services with integrity and excellence.') }}</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8 mt-8 sm:mt-12">
<div class="bg-white p-4 sm:p-6 rounded-lg shadow-md">
<h3 class="text-lg sm:text-xl font-semibold text-body mb-2">{{ __('Expert Consultations') }}</h3>
<div class="bg-card p-4 sm:p-6 rounded-lg shadow-card">
<h3 class="text-lg sm:text-xl font-semibold text-text mb-2">{{ __('Expert Consultations') }}</h3>
<p class="text-body text-sm sm:text-base">{{ __('Professional legal advice tailored to your needs.') }}</p>
</div>
<div class="bg-white p-4 sm:p-6 rounded-lg shadow-md">
<h3 class="text-lg sm:text-xl font-semibold text-body mb-2">{{ __('Case Management') }}</h3>
<div class="bg-card p-4 sm:p-6 rounded-lg shadow-card">
<h3 class="text-lg sm:text-xl font-semibold text-text mb-2">{{ __('Case Management') }}</h3>
<p class="text-body text-sm sm:text-base">{{ __('Track your cases and stay informed every step of the way.') }}</p>
</div>
<div class="bg-white p-4 sm:p-6 rounded-lg shadow-md sm:col-span-2 lg:col-span-1">
<h3 class="text-lg sm:text-xl font-semibold text-body mb-2">{{ __('Legal Resources') }}</h3>
<div class="bg-card p-4 sm:p-6 rounded-lg shadow-card sm:col-span-2 lg:col-span-1">
<h3 class="text-lg sm:text-xl font-semibold text-text mb-2">{{ __('Legal Resources') }}</h3>
<p class="text-body text-sm sm:text-base">{{ __('Access our library of legal insights and articles.') }}</p>
</div>
</div>
+3 -3
View File
@@ -1,14 +1,14 @@
<x-layouts.public>
<div class="py-8">
<h1 class="mb-6 text-3xl font-bold text-body dark:text-off-white">{{ $page->getTitle() }}</h1>
<div class="prose max-w-none rounded-lg bg-white p-8 shadow-md dark:bg-zinc-800 dark:prose-invert" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
<h1 class="mb-6 text-3xl font-bold text-text dark:text-off-white">{{ $page->getTitle() }}</h1>
<div class="prose prose-brand max-w-none rounded-lg bg-card p-8 shadow-card dark:bg-zinc-800 dark:prose-invert" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
@if ($page->getContent())
{!! clean($page->getContent()) !!}
@else
<p class="text-body dark:text-zinc-400">{{ __('pages.content_coming_soon') }}</p>
@endif
</div>
<p class="mt-4 text-sm text-zinc-500 dark:text-zinc-400">
<p class="mt-4 text-sm text-body/70 dark:text-zinc-400">
{{ __('pages.last_updated') }}: {{ $page->updated_at->format('M d, Y') }}
</p>
</div>
+2 -2
View File
@@ -1,7 +1,7 @@
<x-layouts.public>
<div class="py-8">
<h1 class="text-3xl font-bold text-body mb-6">{{ __('footer.privacy') }}</h1>
<div class="bg-white p-8 rounded-lg shadow-md prose max-w-none">
<h1 class="text-3xl font-bold text-text mb-6">{{ __('footer.privacy') }}</h1>
<div class="bg-card p-8 rounded-lg shadow-card prose prose-brand max-w-none">
<p class="text-body">{{ __('Privacy policy content will be added here.') }}</p>
</div>
</div>
+2 -2
View File
@@ -1,7 +1,7 @@
<x-layouts.public>
<div class="py-8">
<h1 class="text-3xl font-bold text-body mb-6">{{ __('footer.terms') }}</h1>
<div class="bg-white p-8 rounded-lg shadow-md prose max-w-none">
<h1 class="text-3xl font-bold text-text mb-6">{{ __('footer.terms') }}</h1>
<div class="bg-card p-8 rounded-lg shadow-card prose prose-brand max-w-none">
<p class="text-body">{{ __('Terms of service content will be added here.') }}</p>
</div>
</div>