@extends('layout')
@section('content')

    <main id="page-home">
        @component('header-logo')@endcomponent
        <!-- The navigation -->
        <nav class="strokes">
            <ul id="navigation">
                <li>
                    <div class="no-link">
                        <section>
                            <h1>Qui sommes nous ?</h1>
                            <h5 class="badge-rounded"><a href="{{route('corpo')}}" data-transition="slide-to-top">Découvrez nous</a></h5><br/>
                        </section>
                        <footer>
                            <i class="icon icon-CommentwithLines"></i>
                            <h5 class="serif">Notre histoire</h5>
                            <p>En savoir plus</p>
                        </footer>
                    </div>
                </li>

                @foreach($categories as $category)
                <li>
                    <a class="no-link" href="{{route('category', ['categorySlug' => $category->slug])}}" data-transition="slide-to-top">
                        <section>
                            <h1>{{$category->title}}</h1>
                            <h5 class="badge-rounded">{{$category->description}}</h5>
                        </section>
                        <footer>
                            <i class="icon icon-Diary"></i>
                            <h5 class="serif">Notre flotte</h5>
                            <p>est à votre disposition</p>
                        </footer>
                    </a>
                </li>
                @endforeach
            </ul>
        </nav>
        <!-- End navigation -->
        <div class="overlay"></div>
        <div data-remodal-id="modal">
            <i class="icon bg icon-CommentwithLines"></i>
            <button data-remodal-action="close" class="remodal-close"></button>
            <h1></h1>
            <p></p>
            <div class="signature center">
                <h6>-FONDATEUR-</h6>
                <h5>Norkaan</h5>
            </div>
        </div>
    </main>

    @stop