235 lines
10 KiB
PHP
235 lines
10 KiB
PHP
<?php
|
|
|
|
use App\Models\Post;
|
|
use Livewire\Attributes\Layout;
|
|
use Livewire\Volt\Component;
|
|
|
|
new #[Layout('components.layouts.public')] class extends Component
|
|
{
|
|
public function with(): array
|
|
{
|
|
return [
|
|
'latestPosts' => Post::published()
|
|
->latest('published_at')
|
|
->take(3)
|
|
->get(),
|
|
];
|
|
}
|
|
}; ?>
|
|
|
|
<div>
|
|
{{-- Hero Section --}}
|
|
<section class="bg-background py-8 sm:py-12 lg:py-16">
|
|
<div class="container mx-auto px-4 text-center">
|
|
{{-- Tagline --}}
|
|
<h1 class="text-[1.75rem] sm:text-[2rem] lg:text-[2.5rem] font-bold text-text mb-6">
|
|
{{ __('home.tagline') }}
|
|
</h1>
|
|
|
|
{{-- Introductory Text --}}
|
|
<p class="text-text text-base sm:text-lg max-w-[800px] mx-auto mb-8">
|
|
{{ __('home.intro') }}
|
|
</p>
|
|
|
|
{{-- CTA Buttons --}}
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="{{ route('booking') }}" class="btn-primary">
|
|
{{ __('home.cta_book') }}
|
|
</a>
|
|
<a href="#services" class="btn-secondary">
|
|
{{ __('home.cta_services') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- About Section --}}
|
|
<section id="about" class="py-16 lg:py-20 bg-card">
|
|
<div class="container mx-auto px-4">
|
|
<h2 class="text-2xl lg:text-3xl font-semibold text-text text-center mb-12">
|
|
{{ __('home.about_title') }}
|
|
</h2>
|
|
|
|
<div class="flex flex-col lg:flex-row items-center gap-8 lg:gap-12 max-w-5xl mx-auto">
|
|
{{-- Photo --}}
|
|
<div class="flex-shrink-0">
|
|
<img
|
|
src="{{ asset('images/huda-armouche.jpg') }}"
|
|
alt="{{ __('home.lawyer_name') }}"
|
|
class="w-48 h-48 lg:w-64 lg:h-64 rounded-full object-cover shadow-lg"
|
|
>
|
|
</div>
|
|
|
|
{{-- Bio --}}
|
|
<div class="text-center lg:text-start">
|
|
<h3 class="text-xl lg:text-2xl font-bold text-text mb-1">
|
|
{{ __('home.lawyer_name') }}
|
|
</h3>
|
|
<p class="text-cta font-medium mb-4">
|
|
{{ __('home.lawyer_title') }}
|
|
</p>
|
|
<p class="text-body leading-relaxed">
|
|
{{ __('home.lawyer_bio') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- Services Section --}}
|
|
<section id="services" class="py-16 lg:py-20 bg-background">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-2xl lg:text-3xl font-semibold text-text mb-4">
|
|
{{ __('home.services_title') }}
|
|
</h2>
|
|
<p class="text-body max-w-2xl mx-auto">
|
|
{{ __('home.services_subtitle') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{{-- Legal Consultations & Representation --}}
|
|
<div class="bg-card p-6 rounded-lg shadow-card text-center">
|
|
<div class="text-cta mb-4">
|
|
<flux:icon name="scale" class="w-12 h-12 mx-auto" />
|
|
</div>
|
|
<h3 class="text-lg font-bold text-text mb-4">
|
|
{{ __('home.service_consultation_title') }}
|
|
</h3>
|
|
<ul class="text-sm text-body space-y-2 text-start">
|
|
@foreach(__('home.service_consultation_items') as $item)
|
|
<li class="flex items-center gap-2">
|
|
<span class="w-1.5 h-1.5 bg-cta rounded-full flex-shrink-0"></span>
|
|
{{ $item }}
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
|
|
{{-- Women's & Family Law --}}
|
|
<div class="bg-card p-6 rounded-lg shadow-card text-center">
|
|
<div class="text-cta mb-4">
|
|
<flux:icon name="heart" class="w-12 h-12 mx-auto" />
|
|
</div>
|
|
<h3 class="text-lg font-bold text-text mb-4">
|
|
{{ __('home.service_family_title') }}
|
|
</h3>
|
|
<ul class="text-sm text-body space-y-2 text-start">
|
|
@foreach(__('home.service_family_items') as $item)
|
|
<li class="flex items-center gap-2">
|
|
<span class="w-1.5 h-1.5 bg-cta rounded-full flex-shrink-0"></span>
|
|
{{ $item }}
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
|
|
{{-- Civil & Commercial Disputes --}}
|
|
<div class="bg-card p-6 rounded-lg shadow-card text-center">
|
|
<div class="text-cta mb-4">
|
|
<flux:icon name="building-office" class="w-12 h-12 mx-auto" />
|
|
</div>
|
|
<h3 class="text-lg font-bold text-text mb-4">
|
|
{{ __('home.service_civil_title') }}
|
|
</h3>
|
|
<ul class="text-sm text-body space-y-2 text-start">
|
|
@foreach(__('home.service_civil_items') as $item)
|
|
<li class="flex items-center gap-2">
|
|
<span class="w-1.5 h-1.5 bg-cta rounded-full flex-shrink-0"></span>
|
|
{{ $item }}
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
|
|
{{-- Business Legal Services --}}
|
|
<div class="bg-card p-6 rounded-lg shadow-card text-center">
|
|
<div class="text-cta mb-4">
|
|
<flux:icon name="briefcase" class="w-12 h-12 mx-auto" />
|
|
</div>
|
|
<h3 class="text-lg font-bold text-text mb-4">
|
|
{{ __('home.service_business_title') }}
|
|
</h3>
|
|
<ul class="text-sm text-body space-y-2 text-start">
|
|
@foreach(__('home.service_business_items') as $item)
|
|
<li class="flex items-center gap-2">
|
|
<span class="w-1.5 h-1.5 bg-cta rounded-full flex-shrink-0"></span>
|
|
{{ $item }}
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- Values Section --}}
|
|
<section id="values" class="py-16 lg:py-20 bg-card">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-2xl lg:text-3xl font-semibold text-text mb-4">
|
|
{{ __('home.values_title') }}
|
|
</h2>
|
|
<p class="text-body max-w-2xl mx-auto">
|
|
{{ __('home.values_subtitle') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-6">
|
|
@foreach(['integrity', 'justice', 'knowledge', 'empowerment', 'professionalism', 'innovation'] as $value)
|
|
<div class="text-center group">
|
|
<div class="w-16 h-16 lg:w-20 lg:h-20 rounded-full bg-cta/10 flex items-center justify-center mx-auto mb-3 transition-colors group-hover:bg-cta/20">
|
|
<flux:icon name="{{ __('home.values.' . $value . '.icon') }}" class="w-8 h-8 lg:w-10 lg:h-10 text-cta" />
|
|
</div>
|
|
<h3 class="text-sm lg:text-base font-bold text-text">
|
|
{{ __('home.values.' . $value . '.title') }}
|
|
</h3>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- Latest Posts Section --}}
|
|
@if($latestPosts->count() > 0)
|
|
<section id="posts" class="py-16 lg:py-20 bg-background">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-2xl lg:text-3xl font-semibold text-text mb-4">
|
|
{{ __('home.posts_title') }}
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
|
@foreach($latestPosts as $post)
|
|
<article class="bg-card p-6 rounded-lg shadow-card hover:shadow-card-hover transition-shadow">
|
|
<time class="text-xs text-body/70 mb-2 block">
|
|
{{ $post->published_at?->translatedFormat('j F Y') ?? $post->created_at->translatedFormat('j F Y') }}
|
|
</time>
|
|
<h3 class="text-lg font-bold text-text mb-3">
|
|
<a href="{{ route('posts.show', $post) }}" class="hover:text-cta transition-colors" wire:navigate>
|
|
{{ $post->getTitle() }}
|
|
</a>
|
|
</h3>
|
|
<p class="text-body text-sm mb-4 line-clamp-3">
|
|
{{ $post->getExcerpt() }}
|
|
</p>
|
|
<a href="{{ route('posts.show', $post) }}" class="text-cta font-medium text-sm hover:text-cta-hover" wire:navigate>
|
|
{{ __('home.read_more') }} →
|
|
</a>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<a href="{{ route('posts.index') }}" class="btn-secondary inline-flex items-center gap-2" wire:navigate>
|
|
{{ __('home.view_all_posts') }}
|
|
<span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
</div>
|