<x-layouts.public>
    <div class="text-center py-8 sm:py-12">
        <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-body mb-4">{{ __('Libra Law Firm') }}</h1>
        <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-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-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-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>
    </div>
</x-layouts.public>
