@extends('front.layouts.app')

@section('content')

    <!--Add lists-->




    <div class="row content w-100">

        <nav class="navbar navbar-expand-lg navbar-light p-3 bg-info w-100 text-white mb-4 align-center">
            <p class="mb-0 pr-2 ls1 font-weight-bold text-center"><i class="fas fa-heart-broken"></i>
                @if (!empty($exception))
                    {{ __($exception->getMessage()) }}
                @else
                    {{ __('Üzgünüm. Websitesinde beklenmedik bir durum oluştu.') }}
                @endif
            </p>
            <p class="mb-0 pr-2 ls1 font-weight-bold">Websitemizde gezinti için aşağıdaki linkleri kullanabilirsin.</p>
        </nav>

            @component('front.components.search-bar', ['id' => 'ara'])@endcomponent
    </div>


    <div class="row w-100">
        <div class="card col-md-4 p-2">
            <img class="card-img-top" src="https://www.dogalhayat.org/image.php?width=250px&image=/storage/uploads/determinations/files%2F2013%2F04%2FIMG_8575-1365443606.jpg" >
            <div class="card-body">
                <h5 class="card-title">Hayvanlar</h5>
                <a href="/kategoriler/5/tespitler" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <div class="card col-md-4 p-2">
            <img class="card-img-top" src="https://www.dogalhayat.org/image.php?width=250px&image=/storage/uploads/determinations/files%2F2014%2F01%2Ff5a59d68bacc00ab9359e0983ebbf77e-1390070310.jpg" >
            <div class="card-body">
                <h5 class="card-title">Bitkiler</h5>
                <a href="/kategoriler/2/tespitler" class="btn btn-primary">Bitkiler</a>
            </div>
        </div>
        <div class="card col-md-4 p-2">
            <img class="card-img-top" src="https://www.dogalhayat.org/image.php?width=250px&image=/storage/uploads/determinations/files%2F2014%2F10%2F3137ce41f1f6ab6f177030f8faa8b6d2-1413848520.jpg" >
            <div class="card-body">
                <h5 class="card-title">Mantarlar</h5>

                <a href="/kategoriler/4/tespitler" class="btn btn-primary">Mantarlar</a>
            </div>
        </div>
        <div class="card col-md-4 p-2">
            <img class="card-img-top" src="https://www.dogalhayat.org/image.php?width=250px&image=/storage/uploads/determinations/files%2F2015%2F12%2F86d00a92e62817fbadb7469f3300d828-1449535888.jpg" >
            <div class="card-body">
                <h5 class="card-title">Yaşam Alanı(Habitat)</h5>

                <a href="/kategoriler/1/tespitler" class="btn btn-primary">Yaşam Alanı(Habitat)</a>
            </div>
        </div>
        <div class="card col-md-4 p-2">
            <img class="card-img-top" src="https://www.dogalhayat.org/image.php?width=250px&image=/storage/uploads/determinations/files%2F2013%2F11%2F333c2e7c6d88e72f9f40f48f758c2a68-1383686675.jpg" >
            <div class="card-body">
                <h5 class="card-title">Tanımsızlar</h5>
                <a href="/tespitler/tanimsizlar" class="btn btn-primary">Tanımsızlar</a>
            </div>
        </div>
        <div class="card col-md-4 p-2">
            <img class="card-img-top" src="https://www.dogalhayat.org/image.php?width=250px&image=/storage/uploads/determinations/files%2F2020%2F12%2F7d674bc2c5b231fba4b0748ffdb63f95-1607431178.jpg" >
            <div class="card-body">
                <h5 class="card-title">Gözlem Haritası</h5>
                <a href="/gozlem-haritasi" class="btn btn-primary">Gözlem Haritası</a>
            </div>
        </div>
    </div>

    </div>
    <!--/Add lists-->

@endsection