@extends('layouts.frontend.app')
@section('title', "Bienvenue sur notre boutique")
@section('css')
    <style>
        .container.text-center{
            display: none;
        }
        .card{
            border-radius: 1.25em;
        }
        .card-img-top{
            min-width: 100%;
            max-height: 200px;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
        }
        .promo-badge {
            background-color: #047112;
            position: absolute;
            right: 0;
            width: 20%;
            text-align: center;
            top: 20px;
            border-top-right-radius: 0px !important;
            border-bottom-right-radius: 0px !important;
            padding: 6px;
        }
        .pagination>li>a, .pagination>li>span { border-radius: 50% !important;margin: 0 5px;}
    </style>
@endsection
@section('content')
    <br>
    <div class="container">
        <h4 style="color: #068d18;"><a href="{{route('welcome')}}"> < Retour à l'accueil</a> </h4><br><br>
        <div class="row align-content-lg-stretch text-center">
            <div class=" col-12 text-center">
                <div class="row" style="color: #068d18;">
                    <div class="row m-auto">
                        <div class="text-center type-buy" style="margin-right:20px">
                            <img src="{{asset('frontend/images/icon-2.png')}}" alt="icône drive"><br>
                            Drive
                        </div>
                    </div>
                    <br>
                </div>
                <br>
                <h4 style="color: #068d18;"> Trouvez un AfroShop Drive le plus proche </h4>
                <p style="color: #068d18;">Nous vous proposons les AfroShop situés à une distance de 50km de vous</p>

            </div>
            <form class="ps-form--quick-search mx-auto" action="#" method="get">
                <input style="border: 1px solid lightgray;" class="form-control" type="search" placeholder="Limoge">
                <button style="background-color: #068d18;"><i class="fa fa-search"></i></button>
            </form>
        </div>
        <br><br>

        <div class="row">
            <div class="col-md-4">
                <div class="card card-01">
                    <img class="card-img-top mx-auto" src="{{ asset('frontend/images/slide-supplier.jpg') }}" alt="Card image cap">
                    <span class="promo-badge rounded-pill">Ouvert </span>
                    <div class="card-body" style="border-top: 1px solid lightgray;">
                        <div class="row mx-auto" style="margin-top: -55px;">
                            <img src="{{ asset('frontend/images/logo-temp.png') }}" class="img-responsive rounded-circle mx-auto img-thumbnail"
                                 style="height: 80px; width: 80px;" alt=""><br>
                        </div>
                        <div class="row mx-auto">
                            <h4 class="card-title mx-auto" style="color: #068d18;">Farm to market</h4>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="card-text" style="color: #068d18;">Situé à 12km de vous</p>
                            </div>
                            <div class="col-md-6">
                                <a href="#" class="btn pull-right" style="width: 110px; color: white; font-size: 12px; background-color: #e1c406;">
                                    Visiter &nbsp;&nbsp;<i class="fa fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-01">
                    <img class="card-img-top mx-auto" src="{{ asset('frontend/images/slide-supplier.jpg') }}" alt="Card image cap">
                    <span class="promo-badge rounded-pill" style="background-color: red">Fermé </span>
                    <div class="card-body" style="border-top: 1px solid lightgray;">
                        <div class="row mx-auto" style="margin-top: -55px;">
                            <img src="{{ asset('frontend/images/logo-temp.png') }}" class="img-responsive rounded-circle mx-auto img-thumbnail"
                                 style="height: 80px; width: 80px;" alt=""><br>
                        </div>
                        <div class="row mx-auto">
                            <h4 class="card-title mx-auto" style="color: #068d18;">Farm to market</h4>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="card-text" style="color: #068d18;">Situé à 12km de vous</p>
                            </div>
                            <div class="col-md-6">
                                <a href="#" class="btn pull-right" style="width: 110px; color: white; font-size: 12px; background-color: #e1c406;">
                                    Visiter &nbsp;&nbsp;<i class="fa fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-01">
                    <img class="card-img-top mx-auto" src="{{ asset('frontend/images/slide-supplier.jpg') }}" alt="Card image cap">
                    <span class="promo-badge rounded-pill">Ouvert </span>
                    <div class="card-body" style="border-top: 1px solid lightgray;">
                        <div class="row mx-auto" style="margin-top: -55px;">
                            <img src="{{ asset('frontend/images/logo-temp.png') }}" class="img-responsive rounded-circle mx-auto img-thumbnail"
                                 style="height: 80px; width: 80px;" alt=""><br>
                        </div>
                        <div class="row mx-auto">
                            <h4 class="card-title mx-auto" style="color: #068d18;">Farm to market</h4>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="card-text" style="color: #068d18;">Situé à 12km de vous</p>
                            </div>
                            <div class="col-md-6">
                                <a href="#" class="btn pull-right" style="width: 110px; color: white; font-size: 12px; background-color: #e1c406;">
                                    Visiter &nbsp;&nbsp;<i class="fa fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-md-4">
                <div class="card card-01">
                    <img class="card-img-top mx-auto" src="{{ asset('frontend/images/slide-supplier.jpg') }}" alt="Card image cap">
                    <span class="promo-badge rounded-pill" style="background-color: red">Fermé </span>
                    <div class="card-body" style="border-top: 1px solid lightgray;">
                        <div class="row mx-auto" style="margin-top: -55px;">
                            <img src="{{ asset('frontend/images/logo-temp.png') }}" class="img-responsive rounded-circle mx-auto img-thumbnail"
                                 style="height: 80px; width: 80px;" alt=""><br>
                        </div>
                        <div class="row mx-auto">
                            <h4 class="card-title mx-auto" style="color: #068d18;">Farm to market</h4>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="card-text" style="color: #068d18;">Situé à 12km de vous</p>
                            </div>
                            <div class="col-md-6">
                                <a href="#" class="btn pull-right" style="width: 110px; color: white; font-size: 12px; background-color: #e1c406;">
                                    Visiter &nbsp;&nbsp;<i class="fa fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-01">
                    <img class="card-img-top mx-auto" src="{{ asset('frontend/images/slide-supplier.jpg') }}" alt="Card image cap">
                    <span class="promo-badge rounded-pill">Ouvert </span>
                    <div class="card-body" style="border-top: 1px solid lightgray;">
                        <div class="row mx-auto" style="margin-top: -55px;">
                            <img src="{{ asset('frontend/images/logo-temp.png') }}" class="img-responsive rounded-circle mx-auto img-thumbnail"
                                 style="height: 80px; width: 80px;" alt=""><br>
                        </div>
                        <div class="row mx-auto">
                            <h4 class="card-title mx-auto" style="color: #068d18;">Farm to market</h4>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="card-text" style="color: #068d18;">Situé à 12km de vous</p>
                            </div>
                            <div class="col-md-6">
                                <a href="#" class="btn pull-right" style="width: 110px; color: white; font-size: 12px; background-color: #e1c406;">
                                    Visiter &nbsp;&nbsp;<i class="fa fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-01">
                    <img class="card-img-top mx-auto" src="{{ asset('frontend/images/slide-supplier.jpg') }}" alt="Card image cap">
                    <span class="promo-badge rounded-pill">Ouvert </span>
                    <div class="card-body" style="border-top: 1px solid lightgray;">
                        <div class="row mx-auto" style="margin-top: -55px;">
                            <img src="{{ asset('frontend/images/logo-temp.png') }}" class="img-responsive rounded-circle mx-auto img-thumbnail"
                                 style="height: 80px; width: 80px;" alt=""><br>
                        </div>
                        <div class="row mx-auto">
                            <h4 class="card-title mx-auto" style="color: #068d18;">Farm to market</h4>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="card-text" style="color: #068d18;">Situé à 12km de vous</p>
                            </div>
                            <div class="col-md-6">
                                <a href="#" class="btn pull-right" style="width: 110px; color: white; font-size: 12px; background-color: #e1c406;">
                                    Visiter &nbsp;&nbsp;<i class="fa fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br><br>
        <div class="row">
            <ul class="pagination mx-auto">
                <li class="disabled"><a href="#">«</a></li>
                <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">»</a></li>
            </ul>
        </div>
    </div><br><br>

    <div class="contact-us mt-10 mb-50">
        <div class="container" >
            <div class="row p-4">
                <div class="col-md-12 row" style="background:#e1c406; border-radius:10px;padding:30px 10px;">
                    <div class="col-md-8">
                        <div class="d-block" style="width: 110px;float: left;margin-top: 15px;">
                            <img src="{{asset('frontend/images/icon-newsletter.png')}}" style="width: 80px;margin-top: 10px;float:left; margin-right:15px;padding:35px ​10px;">
                        </div>
                        <p style="color: #fff;font-size: 25px;line-height: 27px;">
                            Abonnez-vous à notre newsletter afin de suivre nos programmes de ventes et promotions.<br>
                            <span style="font-size: 13px;">Nous ne partagerons jamais votre adresse avec un tier</span>
                        </p>
                    </div>
                    <div class="col-md-4">
                        <form class="mt-20 ps-form--download-app" action="#" method="post">
                            <div class="form-group--nest">
                                <input class="form-control" type="Email" placeholder="Email">
                                <button class="ps-btn btn-white">S'abonner</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="contact-us mt-10 mb-50">
        <div class="container" >
            <div class="row">
                <div class="col-md-12 text-center"  style="font-size: 35px;padding: 0 80px;color: #068d18;">
                    Nous comptabilisons <b>1,450,300</b> utilisateurs inscrits sur VotreAfroShop.com
                </div>
            </div>
        </div>
    </div>
    <div class="contact-us mt-10 mb-50">
        <div class="container">
            <div class="ps-block--site-features-2" style="border-radius:10px;box-shadow: 1px 2px 2px #ccc;padding: 20px 10px;border: 1px solid #ede7e780;">
                <div class="d-block" style="width: 15%;float: left;margin-top: 10px;padding-left: 20px;">
                    <img src="{{asset('frontend/images/logo_france.png')}}" style="width: 120px;float:left; margin-right:15px;">
                </div>
                <div style="font-size: 18px;width:85%;line-height: 27px;padding-left:40px">
                    <span style="color:red">Interdiction de vente des boissons alcooliques aux mineurs de moins de 18 ans</span><br>
                    <span style="font-size: 13px;">La preuve de la majorité de l'acheteur est demandée au moment de la vente en ligne.</span><br>
                    <span>CODE DE LA SANTE PUBLIQUE, ART.L.3342.-1 et L.3353-3</span>
                </div>
            </div>
        </div>
    </div>

@endsection