@extends('frontend.layouts.app')
@section('title', '404')
@section('content')
    <!-- ============================ header area ============================ -->
    @include('frontend.includes.headers.headerOne')
    <!-- ============================ header area end ============================ -->

    <!-- ==== error section start ==== -->
    <section class="error">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-xl-7">
                    <div class="error__content text-center" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300">
                        <div class="thumb">
                            <img src="{{ asset('assets/images/error.png') }}" alt="Image">
                        </div>
                        <!-- <h2 class="title-animation">404</h2> -->
                        <h3 class="title-animation">Page Not Found</h3>
                        <p>It could have been removed, renamed, or temporarily unavailable. Try searching for what you're
                            looking for.</p>
                        <div class="cta">
                            <a href="{{ route('home') }}" aria-label="back to home" title="back to home" class="btn--primary">Back To
                                Home <i class="fa-solid fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="spade">
            <img src="{{ asset('assets/images/blog/spade-base.png') }}" alt="Image" class="base-img">
        </div>
        <div class="spade-green">
            <img src="{{ asset('assets/images/sprade-green.png') }}" alt="Image">
        </div>
    </section>
    <!-- ==== / error section end ==== -->

    <!-- ========================== footer area ============================ -->
    @include('frontend.includes.footers.footerOne')
    <!-- ========================== footer area end ============================ -->

@endsection