@extends('layouts.frontend.app')
@section('content')


<div class="container text-center" style="padding: 80px 15px;">
    <h1 style="font-size: 8rem; font-weight: 700; color: #f36d6d;">404</h1>
    <h2 style="font-size: 2rem; margin-bottom: 20px;">Oops! Page Not Found</h2>
    <p style="font-size: 1rem; color: #6c757d; margin-bottom: 30px;">
        We can't find the page you're looking for. It might have been removed, renamed, or did not exist in the first place.
    </p>

   

    <a href="{{ route('index') }}" class="btn btn-outline-secondary" style="margin-bottom: 50px;">Back to Home</a>

    <div class="suggested-categories" style="margin-top: 50px;">
        <h4 style="margin-bottom: 20px;  color: #e52525ff;">popconindia</h4>
        <div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 15px;">
             <a href="{{ route('products.load', ['type' => 'shop']) }}" class="btn btn-outline-secondary" style="margin-bottom: 50px;">Shop</a>
        </div>
    </div>
</div>
@endsection