@extends('layout.error_app', ['title' => '404 | Page not found'])

@push('style')
@endpush

@section('content')
  <div class="page-wrap flex-grow-1">
    <div class="p-4 position-relative">
      <div>
        <img src="{{ asset('img/error/page404.png') }}" alt="" class="w-100">
      </div>

      <div class="position-absolute d-flex flex-column top-50 start-0 translate-middle-y ms-5 ps-5">
        <div class="">
          <span class="fs-48 fw-bold">
            Ooops...
          </span>
        </div>
        <div class="d-flex pb-1">
          <span class="fs-48">Page not found</span>
        </div>
        <div class="d-flex mt-4 mb-5">
          <span class="fs-18 mw-50">
            A massa, interdum pretium, ut sit est nec. Convallis fames proin lacus cras. 
          </span>
        </div>
        <div class="d-flex mt-5 pt-2">
          <a href="{{ route('landingpage') }}" class="btn-pill btn-pill-fill px-4 py-3 text-decoration-none">
            <span class="fs-13 fw-bold">
              Về trang chủ
            </span>
            <span>
              <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.5208 15.1734L16.6944 10.9998L12.5208 6.82617" stroke="white" stroke-width="1.66944" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M3.33887 16.0083V14.3389C3.33887 13.4534 3.69064 12.6041 4.3168 11.9779C4.94297 11.3518 5.79223 11 6.67776 11H16.6944" stroke="white" stroke-width="1.66944" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>              
            </span> 
          </a>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('script')
  {{-- @vite('resources/js/landing.js') --}}
@endpush