@extends('layouts.app')

@section('title', __('site.error_404_title').' — '.config('site.brand.name'))

@section('content')
    <section class="mx-auto flex max-w-2xl flex-col items-center px-4 py-28 text-center sm:px-6 lg:px-8">
        <img src="{{ asset('images/logo-header.png') }}" alt="{{ config('site.brand.name') }}" class="h-16 w-auto opacity-70">
        <h1 class="mt-8 text-2xl font-semibold text-brand-ink sm:text-3xl sm:font-bold lg:text-4xl">{{ __('site.error_404_title') }}</h1>
        <p class="mt-3 text-brand-ink/60">{{ __('site.error_404_body') }}</p>
        <a href="{{ route('home', ['locale' => app()->getLocale()]) }}" class="btn-primary mt-8">
            {{ __('site.error_404_button') }}
        </a>
    </section>
@endsection