@extends('shop.layouts.app')

    @section('content')
            <section class="banner">
        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="{{ asset('assets/shop/img/banner-1.jpg') }}" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h2>Great Meals</h2>
                        <p>Prepared, Packed & Delivered the same day</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('assets/shop/img/banner-1.jpg') }}" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h2>Great Meals2</h2>
                        <p>Prepared, Packed & Delivered the same day</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('assets/shop/img/banner-1.jpg') }}" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h2>Great Meals3</h2>
                        <p>Prepared, Packed & Delivered the same day</p>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

    </section>
    <section>
        <div class="container yellow-section">
            <div class="row">
                <div class="del-details">
                    <ul>
                        <li><img src="{{ asset('assets/shop/img/24-hrs.png') }}" alt=""> <span class="bd-txt">24/7</span></li>
                        <li><img src="{{ asset('assets/shop/img/vegetables.png') }}" alt=""><span class="bd-txt">Best Veg food</span></li>
                        <li><img src="{{ asset('assets/shop/img/chicken.png') }}" alt=""><span class="bd-txt">Best Non-Veg food</span></li>
                        <li><img src="{{ asset('assets/shop/img/delivery-bike.png') }}" alt=""><span class="bd-txt">Scheduled Delivery</span></li>

                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section class="why-choose">
        <div class="container">
            <div class="text-center">
                <h2 class="text-center">Why People Choose Us</h2>
                <p class="w-50 text-center mx-auto">Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content.</p>
            </div>
            <div class="row pt-4">
                <div class="col-md-4">
                    <div class="row">
                        <h3 class="choose-title w-90 text-right">30,000 Restaurant<br> Menus <span class="number">1</span></h3>
                        <p class="text-right">Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document</p>
                    </div>
                    <div class="row pt-4">
                        <h3 class="choose-title w-90 text-right">Easy Ordering by <br>Phone <span class="number">2</span></h3>
                        <p class="text-right">Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document</p>
                    </div>
                    <div class="row pt-4">
                        <h3 class="choose-title w-90 text-right">Free Mobile<br> Applications <span class="number">3</span></h3>
                        <p class="text-right">Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <img src="{{ asset('assets/shop/img/phone.png') }}" class="img-fluid phone-img" alt="">
                </div>
                <div class="col-md-4 r-2">
                    <div class="row">
                        <h3 class="choose-title text-left pl-4 ml-5 w-75"><span class="number">4</span> Easy Online<br> Ordering </h3>
                        <p class="text-left">Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document</p>
                    </div>
                    <div class="row pt-4">
                        <h3 class="choose-title text-left pl-4 ml-5 w-75"><span class="number">5</span>100% Positive <br> Feedbacks </h3>
                        <p class="text-left">Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document</p>
                    </div>
                    <div class="row pt-4">
                        <h3 class="choose-title text-left pl-4 ml-5 w-75"><span class="number">6</span> Fast Guaranteed<br> Delivery </h3>
                        <p class="text-left">Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="testimm">
        <div class="text-center">
            <h2 class="text-center text-white">Clients About Us</h2>
            <p class="w-50 text-center mx-auto text-warning">Testimonials</p>
        </div>
        <div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-ride="carousel">

            <div class="carousel-inner">
                <div class="carousel-item active">
                    <div class="carousel-caption d-none d-md-block">
                        <p class="w-50 mx-auto">Nulla vitae elit libero, a pharetra augue mollis interdum. Nulla vitae elit libero, a pharetra augue mollis interdum. Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                        <img src="{{ asset('assets/shop/img/user4.jpg') }}" alt="">
                        <h5 class="text-warning mt-3">First slide label</h5>

                    </div>
                </div>
                <div class="carousel-item">
                    <!-- <img src="img/testi-bg.jpg" class="d-block w-100" alt="..."> -->
                    <div class="carousel-caption d-none d-md-block">
                        <p class="w-50 mx-auto">Nulla vitae elit libero, a pharetra augue mollis interdum. Nulla vitae elit libero, a pharetra augue mollis interdum. Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                        <img src="{{ asset('assets/shop/img/user4.jpg') }}" alt="">
                        <h5 class="text-warning mt-3">John MAthew</h5>

                    </div>
                </div>
                <div class="carousel-item">
                    <!-- <img src="img/testi-bg.jpg" class="d-block w-100" alt="..."> -->
                    <div class="carousel-caption d-none d-md-block">
                        <p class="w-50 mx-auto">Nulla vitae elit libero, a pharetra augue mollis interdum. Nulla vitae elit libero, a pharetra augue mollis interdum. Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                        <img src="{{ asset('assets/shop/img/user4.jpg') }}" alt="">
                        <h5 class="text-warning mt-3">Peter </h5>

                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

    </section>

    <section class="works">
        <div class="container">
            <div class="text-center">
                <h2 class="text-center">How it Works</h2>
                <p class="w-50 text-center mx-auto">Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content.</p>
            </div>
            <div class="row pt-4">
                <div class="col-md-3">
                    <div class="text-center">
                        <img src="{{ asset('assets/shop/img/planner.jpg') }}" class="img-fluid work-img" alt="">
                    </div>
                    <h3 class="text-center">Choose the <br> Plan</h3>
                </div>
                <div class="col-md-3">
                    <div class="text-center">
                        <img src="{{ asset('assets/shop/img/indian-food.jpg') }}" class="img-fluid work-img" alt="">
                    </div>
                    <h3 class="text-center">Customize Your <br> Plan</h3>
                </div>
                <div class="col-md-3">
                    <div class="text-center">
                        <img src="{{ asset('assets/shop/img/delivery.jpg') }}" class="img-fluid work-img" alt="">
                    </div>
                    <h3 class="text-center">Fast Delivery at <br> your Doorstep</h3>
                </div>
                <div class="col-md-3">
                    <div class="text-center">
                        <img src="{{ asset('assets/shop/img/woman-eating.jpg') }}" class="img-fluid work-img" alt="">
                    </div>
                    <h3 class="text-center">All you have to <br> do is heat & eat</h3>
                </div>

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

    <section class="app-sec">
        <div class="container">

            <div class="row pt-4">
                <div class="col-md-6">
                    <div class="text-center">
                        <img src="{{ asset('assets/shop/img/food-order.png') }}" class="img-fluid odd-img" alt="">
                    </div>

                </div>
                <div class="col-md-6">
                    <h3 class="text-left text-black">The Best Delivery App</h3>
                    <p class="text-black">Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content.Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document
                        or a typeface without relying on meaningful content.</p>
                    <div class="row">
                        <div class="col-md-4">
                            <a href="#"><img src="{{ asset('assets/shop/img/google-play.png') }}" class="img-fluid" alt=""></a>
                        </div>
                        <div class="col-md-4">
                            <a href="#"><img src="{{ asset('assets/shop/img/apple-store.png') }}" class="img-fluid" alt=""></a>
                        </div>
                        <div class="col-md-4">
                            <a href="#"><img src="{{ asset('assets/shop/img/scooty.png') }}" class="img-fluid sct-img" alt=""></a>
                        </div>
                    </div>
                </div>


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




