@extends('layouts.master')
@section('content')

        <!-- Wrapper -->
        <div class="wrapper">

            <!-- Section Started Slider -->
            <section class="section kf-started-slider">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">

                            <div class="kf-started-item">
                                <div class="slide js-parallax" style="background-image: url(template/images/accueil1.png);"></div>
                                <div class="container">
                                    <div class="description align-left element-anim-1">
                                        <div class="subtitles">
                                            Bienvenue au restaurant
                                        </div>
                                        <h2 class="name text-anim-1" data-splitting="chars">
                                            LUXOTIS
                                        </h2>
                                        <div class="kf-bts">
                                            <a href="{{url('#reservation')}}" class="kf-btn">
                                                <span>Réserver une table</span>
                                                <i class="fas fa-chevron-right"></i>
                                            </a>
                                            <a href="{{url('contact')}}" class="kf-btn dark-btn">
                                                <span>Contactez-nous</span>
                                                <i class="fas fa-chevron-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="swiper-slide">

                            <div class="kf-started-item">
                                <div class="slide js-parallax" style="background-image: url(template/images/accueil2.png);"></div>
                                <div class="container">
                                    <div class="description align-left element-anim-1">
                                        <div class="subtitles">
                                            Venez apprécier nos 
                                        </div>
                                        <h2 class="name text-anim-1" data-splitting="chars">
                                            délicieux plats
                                        </h2>
                                        <div class="kf-bts">
                                            <a href="#reservation" class="kf-btn">
                                                <span>Réserver une table</span>
                                                <i class="fas fa-chevron-right"></i>
                                            </a>
                                            <a href="{{url('contact')}}" class="kf-btn dark-btn">
                                                <span>Contactez-nous</span>
                                                <i class="fas fa-chevron-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="swiper-slide">

                            <div class="kf-started-item">
                                <div class="slide js-parallax" style="background-image: url(template/images/accueil3.png);"></div>
                                <div class="container">
                                    <div class="description align-left element-anim-1">
                                        
                                        <h2 class="name text-anim-1" data-splitting="chars">
                                            Service <br>traiteur
                                        </h2>
                                        <div class="kf-bts">
                                            <a href="#reservation" class="kf-btn">
                                                <span>Réserver une table</span>
                                                <i class="fas fa-chevron-right"></i>
                                            </a>
                                            <a href="{{url('contact')}}" class="kf-btn dark-btn">
                                                <span>Contactez-nous</span>
                                                <i class="fas fa-chevron-right"></i>
                                            </a>
                                        </div>                                    
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                </div>
            </section>

            <!-- Section Category -->
            <section class="section kf-category" style="background-image: url(template/images/category_bg.jpg);">
                <div class="container">

                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">

                            <div class="kf-category-items element-anim-1 scroll-animate" data-animate="active">
                                <div class="kf-category-item">
                                    <div class="image kf-image-hover">
                                        <a href="javascript:void(0)"><img src="template/images/cat1.jpg" alt="" /></a>
                                    </div>
                                    <div class="desc">
                                        <h5 class="name">Plats principaux</h5>
                                    </div>
                                </div>
                                <div class="kf-category-item">
                                    <div class="image kf-image-hover">
                                        <a href="javascript:void(0)"><img src="template/images/cat2.jpg" alt="" /></a>
                                    </div>
                                    <div class="desc">
                                        <h5 class="name">Entrées</h5>
                                    </div>
                                </div>
                                <div class="kf-category-item">
                                    <div class="image kf-image-hover">
                                        <a href="javascript:void(0)"><img src="template/images/cat3.jpg" alt="" /></a>
                                    </div>
                                    <div class="desc">
                                        <h5 class="name">Boissons & Cocktails</h5>
                                    </div>
                                </div>
                                <div class="kf-category-item">
                                    <div class="image kf-image-hover">
                                        <a href="javascript:void(0)"><img src="template/images/cat4.jpg" alt="" /></a>
                                    </div>
                                    <div class="desc">
                                        <h5 class="name">Spécialités africaines</h5>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-5 offset-lg-1 align-self-center">

                            <div class="kf-titles">
                                <div class="kf-subtitle element-anim-1 scroll-animate" data-animate="active">
                                    Catégories principales
                                </div>
                                <h3 class="kf-title element-anim-1 scroll-animate" data-animate="active">
                                    Découvrez de nombreux plats <br>dans différentes catégories
                                </h3>
                            </div>

                            <div class="kf-text element-anim-1 scroll-animate" data-animate="active">
                                <p>
                                    Explorez une variété de saveurs dans nos diverses catégories culinaires. Trouvez des plats exquis adaptés à tous les goûts et préférences. Laissez-vous tenter par une aventure gastronomique riche en découvertes.
                                </p>
                            </div>

                            <a href="{{url('menu')}}" class="kf-btn element-anim-1 scroll-animate" data-animate="active">
                                <span>Découvrez notre menu</span>
                                <i class="fas fa-chevron-right"></i>
                            </a>

                        </div>
                    </div>
                </div>
            </section>

            <!-- Section Menu -->
            <section class="section kf-menu kf-menu-tabs" style="padding-top: 20px !important;">
                <div class="container">

                    <div class="kf-titles align-center">
                        <div class="kf-subtitle element-anim-1 scroll-animate" data-animate="active">
                            Menus
                        </div>
                        <h3 class="kf-title element-anim-1 scroll-animate" data-animate="active">
                            Quelques plats / menu
                        </h3>
                    </div>

                    <div class="kf-menu-items" style="background-image: url(template/images/menu_logo.png);">
                        <div class="row">

                            <div class="kf-menu-item-col col-xs-12 col-sm-12 col-md-12 col-lg-6 all hot-coffee">
                                <div class="kf-menu-item element-anim-1 scroll-animate" data-animate="active">
                                    <div class="image kf-image-hover">
                                        <a href="{{url('template/images/menu1.jpg')}}" class="has-popup-image"><img src="{{url('template/images/menu1.jpg')}}" alt="" /></a>
                                    </div>
                                    <div class="desc">
                                        <h5 class="name">Spaghetti</h5>
                                        <div class="subname">1 plat de Spaghetti a l'oeuf de caille</div>
                                        <div class="price">1000 XOF</div>
                                    </div>
                                </div>
                            </div>

                            <div class="kf-menu-item-col col-xs-12 col-sm-12 col-md-12 col-lg-6 all hot-coffee">
                                <div class="kf-menu-item element-anim-1 scroll-animate" data-animate="active">
                                    <div class="image kf-image-hover">
                                        <a href="{{url('template/images/menu2.jpg')}}" class="has-popup-image"><img src="{{url('template/images/menu2.jpg')}}" alt="" /></a>
                                    </div>
                                    <div class="desc">
                                        <h5 class="name">Salade</h5>
                                        <div class="subname"> livraison partout à Lomé</div>
                                        <div class="price">700 / 1000 XOF</div>
                                    </div>
                                </div>
                            </div>

                            <div class="kf-menu-item-col col-xs-12 col-sm-12 col-md-12 col-lg-6 all dessert">
                                <div class="kf-menu-item element-anim-1 scroll-animate" data-animate="active">
                                    <div class="image kf-image-hover">
                                        <a href="{{url('template/images/menu3.jpg')}}" class="has-popup-image"><img src="{{url('template/images/menu3.jpg')}}" alt="" /></a>
                                    </div>
                                    <div class="desc">
                                        <h5 class="name">Atieké poisson aloko</h5>
                                        <div class="subname">Atieké poisson aloko</div>
                                        <div class="price">1000 / 1500 XOF</div>
                                    </div>
                                </div>
                            </div>

                            <div class="kf-menu-item-col col-xs-12 col-sm-12 col-md-12 col-lg-6 all hot-coffee">
                                <div class="kf-menu-item element-anim-1 scroll-animate" data-animate="active">
                                    <div class="image kf-image-hover">
                                        <a href="{{url('template/images/menu4.jpg')}}" class="has-popup-image"><img src="{{url('template/images/menu4.jpg')}}" alt="" /></a>
                                    </div>
                                    <div class="desc">
                                        <h5 class="name">Yaourt</h5>
                                        <div class="subname">Du bon yaourt</div>
                                        <div class="price">750/250/450 XOF</div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </section>

            <!-- Section Reservation -->
            <section class="section kf-reservation kf-section-no-margin">
                <div class="container" id="reservation">

                    <div class="kf-reservation-form element-anim-1 scroll-animate" data-animate="active">

                        <div class="image-left" style="background-image: url(template/images/reservation5.jpg);"></div>
                        <div class="image-right" style="background-image: url(template/images/reservation6.jpg);"></div>

                        <div class="kf-titles align-center">
                            <div class="kf-subtitle">
                                Réservation
                            </div>
                            <h3 class="kf-title">
                                Faire une réservation
                            </h3>
                        </div>

                        <form id="rform" method="post">
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                    <div class="kf-field">
                                        <input type="text" name="name" placeholder="Votre nom complet" />
                                        <i class="far fa-user"></i>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                    <div class="kf-field">
                                        <input type="email" name="email" placeholder="Votre Email" />
                                        <i class="fas fa-at"></i>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                    <div class="kf-field">
                                        <input type="tel" name="tel" placeholder="Votre numero de téléphone" />
                                        <i class="fas fa-mobile-alt"></i>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                    <div class="kf-field">
                                        <select name="persons">
                                            <option>1 Personne</option>
                                            <option>2 Personnes</option>
                                            <option>3 Personnes</option>
                                            <option>4 Personnes</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                    <div class="kf-field">
                                        <input type="date" name="date" />
                                        <i class="far fa-calendar-alt"></i>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                    <div class="kf-field">
                                        <input type="text" name="time" placeholder="Heure" />
                                        <i class="far fa-clock"></i>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <div class="kf-bts">
                                        <a href="#reservation" class="kf-btn">
                                            <span>Réserver une table</span>
                                            <i class="fas fa-chevron-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="alert-success" style="display: none;">
                            <p>Merci, Votre message a bien été envoyé.</p>
                        </div>

                    </div>

                </div>
            </section>


        </div>
@endsection