@extends('layouts.app')

@section('page-title')
    Accueil
@stop

@section('content')
<section id="home-welcome" class="container cover" style="height:600px;background-position:100% 0;background-image:url('./images/stock-photo-successful-girl-listening-to-music-with-headphones-and-glasses-isolated-in-the-studio-378315976.jpg');">
    <div class="wrapper jumbotron-container">
        <div class="jumbotron">
            <h3 class="mb-1">Découvrez les spécialités <br>de votre opticien</h3>
            <p class="emphase">Voir les services disponibles dans notre boutique de Saint-Louis.</p>
            <a href="{{ URL::to('magasin') }}" class="mt-3 more btn btn-size-1 btn-blue">En savoir plus</a>
        </div>
    </div>
</section>
@include('includes.breadcrumb')
<section id="home-infos" class="container">
    <div class="wrapper">
        <div class="grid grid-phone-1 grid-tablet-1 grid-2 grid-m-5">
            <div id="timetable" class="cell cell-phone-12 cell-tablet-12 cell-6 mb-phone-6 mb-tablet-6">
                <h3 class="heading mb-3"><i class="fa fa-clock-o mr-4" aria-hidden="true"></i>Horaires</h3>
                <timetable :hours="hours" :days="days"></timetable>
            </div>
            <div class="cell cell-phone-12 cell-tablet-12 cell-6">
                <h3 class="heading mb-3"><i class="fa fa-map mr-4" aria-hidden="true"></i>Localisation et accès</h3>
                <div class="grid grid-phone-1 grid-2 grid-m-1">
                    <article class="cell cell-phone-12 cell-8 mb-phone-4">
                        <h5 class="heading mb-2">Adresse :</h5>
                        <p class="mb-6 mb-phone-3">8 la croisée des Lys<br>68300 Saint-Louis</p>

                        <h5 class="heading mb-2">Informations complémentaires :</h5>
                        <ul class="list">
                            <li><span class="icon mr-3"><i class="fa fa-phone" aria-hidden="true"></i></span><a href="tel:03.89.70.17.30">03.89.70.17.30</a></li>
                            <li><span class="icon mr-3">P</span>Parking disponible</li>
                            <li><span class="icon mr-3"><i class="fa fa-wheelchair" aria-hidden="true"></i></span>Accessible aux personnes handicapés</li>
                        </ul>
                    </article>
                    <aside class="cell cell-phone-12 cell-4">
                        <div class="grid grid-1 grid-m-1 grid-phone-2">
                            <div class="cell cell-12 cell-phone-6 mb-4">
                                <a href="{{ URL::to('rendez-vous') }}" class="btn btn-stroke btn-orange align-left">
                                    <span>Prendre <br>rendez-vous</span>
                                </a>
                            </div>
                            <div class="cell cell-12 cell-phone-6">
                                <a href="{{ URL::to('contact') }}" class="btn btn-stroke btn-orange align-left">
                                    <span>Nous <br>contacter</span>
                                </a>
                            </div>
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="home-map" class="container" style="height:400px;">
    <div class="wrapper">

    </div>
</section>
<section id="home-brands" class="container">
    <div class="wrapper">
        <h3 class="heading mb-4 align-center">Quelques marques disponibles...</h3>
        <div class="grid grid-phone-1 grid-tablet-1 grid-2 grid-m-6">
            <div class="cell cell-phone-12 cell-tablet-12 cell-6 mb-phone-6 mb-tablet-6">
                <h4 class="heading heading-t2 heading-square mb-5 cover" style="background-image:url(images/portrait.jpeg);">
                    <span>Lunettes de soleil</span>
                </h4>
                <div class="grid grid-phone-2 grid-3 grid-m-2">
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-soleil?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo2.png') }}" alt="logo 2"></a></div>
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-soleil?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo1.png') }}" alt="logo 1"></a></div>
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-soleil?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo2.png') }}" alt="logo 2"></a></div>
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-soleil?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo1.png') }}" alt="logo 1"></a></div>
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-soleil?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo2.png') }}" alt="logo 2"></a></div>
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-soleil?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo1.png') }}" alt="logo 1"></a></div>
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-soleil?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo2.png') }}" alt="logo 2"></a></div>
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-soleil?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo1.png') }}" alt="logo 1"></a></div>
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-soleil?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo2.png') }}" alt="logo 2"></a></div>
                </div>
                <div class="mt-3"><a href="{{ URL::to('marques', 'lunettes-de-soleil') }}" class="link">Voir plus de marques...</a></div>
            </div>
            <div class="cell cell-phone-12 cell-tablet-12 cell-6">
                <h4 class="heading heading-t2 heading-square mb-5 cover" style="background-image:url(images/stock-photo-business-man-on-a-yellow-background-667471006.jpg);">
                    <span>Lunettes de vue</span>
                </h4>
                <div class="grid grid-phone-2 grid-3 grid-m-2">
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-vue?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo2.png') }}" alt="logo 2"></a></div>
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-vue?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo1.png') }}" alt="logo 1"></a></div>
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-vue?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo2.png') }}" alt="logo 2"></a></div>
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-vue?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo1.png') }}" alt="logo 1"></a></div>
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-vue?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo2.png') }}" alt="logo 2"></a></div>
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-vue?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo1.png') }}" alt="logo 1"></a></div>
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-vue?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo2.png') }}" alt="logo 2"></a></div>
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-vue?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo1.png') }}" alt="logo 1"></a></div>
                    <div class="cell cell-phone-6 cell-4 brand"><a href="{{ URL::to('lunettes-de-vue?marque=kam-dhillion') }}"><img src="{{ URL::asset('images/brands/logo2.png') }}" alt="logo 2"></a></div>
                </div>
                <div class="mt-3"><a href="{{ URL::to('marques', 'lunettes-de-vue') }}" class="link">Voir plus de marques...</a></div>
            </div>
        </div>
    </div>
</section>
<section id="home-guaranties" class="container">
    <div class="wrapper">
        <h3 class="heading mb-4 align-center">Les garanties en magasin</h3>
        <div class="grid grid-phone-1 grid-tablet-2 grid-4 grid-m-3">
            <div class="cell cell-phone-12 cell-tablet-6 cell-3 guarantee mb-phone-4 mb-tablet-4">
                <i class="fa fa-comments guarantee-icon" aria-hidden="true"></i>
                <h4>Un opticien diplômé à votre disposition</h4>
                <p>Un professionnel de la santé visuelle compétent et soucieux de votre bien être.</p>
            </div>
            <div class="cell cell-phone-12 cell-tablet-6 cell-3 guarantee mb-phone-4 mb-tablet-4">
                <i class="fa fa-magic guarantee-icon" aria-hidden="true"></i>
                <h4>Des mesures précises</h4>
                <p>Pour vous assurer le meilleur confort visuel possible.</p>
            </div>
            <div class="cell cell-phone-12 cell-tablet-6 cell-3 guarantee mb-phone-4 mb-tablet-4">
                <i class="fa fa-truck guarantee-icon" aria-hidden="true"></i>
                <h4>Qualité et traçabilité des produits</h4>
                <p>Un produit optique contrefait peut avoir de graves conséquences sur votre santé visuelle.</p>
            </div>
            <div class="cell cell-phone-12 cell-tablet-6 cell-3 guarantee mb-phone-4 mb-tablet-4">
                <i class="fa fa-wrench guarantee-icon" aria-hidden="true"></i>
                <h4>Service après vente</h4>
                <p>Effectuer en magasin le réajustage de vos lunettes.</p>
            </div>
        </div>
    </div>
</section>
@stop