libra/resources/views/livewire/pages/home.blade.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">
                @foreach(['consultations', 'representation', 'litigation', 'contracts'] as $service)
                    <div class="bg-card p-6 rounded-lg shadow-card text-center">
                        <div class="text-cta mb-4">
                            <flux:icon name="{{ __('home.services.' . $service . '.icon') }}" class="w-12 h-12 mx-auto" />
                        </div>
                        <h3 class="text-lg font-bold text-text mb-2">
                            {{ __('home.services.' . $service . '.title') }}
                        </h3>
                        <p class="text-body text-sm">
                            {{ __('home.services.' . $service . '.description') }}
                        </p>
                    </div>
                @endforeach
            </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>