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

        <!-- Wrapper -->
        <div class="wrapper">
            <section class="section kf-started-inner">
                <div class="kf-parallax-bg js-parallax" style="background-image: url(template/images/history_inner_bg.jpg);"></div>
                <div class="container">

                    <h1 class="kf-h-title text-anim-1 scroll-animate" data-splitting="chars" data-animate="active">
                        Quelques menus
                    </h1>

                </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-filter kf-filter-menu element-anim-1 scroll-animate" data-animate="active">
                        <a href="#" data-href=".all" class="active">All</a>
                        <a href="#" data-href=".fast-food">Fast food</a>
                        <a href="#" data-href=".hot-coffee">Hot coffee</a>
                        <a href="#" data-href=".dessert">Dessert</a>
                    </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 class="section kf-cta kf-parallax" style="background-image: url(template/images/cta_bg.jpg);">
                <div class="container">

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

                            <div class="kf-titles">
                                
                                <h3 class="kf-title element-anim-1 scroll-animate" data-animate="active">
                                    Réserver une table ou faire une commande spéciale par WhatsApp
                                </h3>
                            </div>

                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 align-self-center align-right">

                            <a href="https://wa.me/22870167374" class="kf-btn element-anim-1 scroll-animate" data-animate="active">
                                <span>WhatsApp</span>
                                <i class="fas fa-chevron-right"></i>
                            </a>

                        </div>
                    </div>

                </div>
            </section>
        </div>
@endsection