@extends('frontend.layout.app')
@section('content')
<!--Start breadcrumb area paroller-->
<section class="breadcrumb-area">
    <div class="breadcrumb-area-bg" style="background-image: url(frontend/images/breadcrumb/breadcrumb-1.jpg);"></div>
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="inner-content text-center">
                    <div class="title">
                       <h2>Our Services</h2>
                    </div>
                    <div class="breadcrumb-menu">
                        <ul>
                            <li><a href="{{route('front.index')}}">Home</a></li>
                            <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                            <li class="active">Services</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--End breadcrumb area-->

<!--Start Service Style1 Area-->
<section class="service-style1-area service-page-sec1">
    <div class="service-page-sec1-bg" style="background-image: url(frontend/images/pattern/service-page-sec1-bg.png);"></div>
    <div class="container">
        <div class="sec-title">
            <div class="sub-title">
                <h5>Main Services</h5>
            </div>
            <h2>Your people deserve <br>great water.</h2>
            <div class="decor">
                <img src="frontend/images/shape/decor.png" alt="">
            </div>
        </div>
        <div class="row">
            <!--Start Single Service Style1-->
            @foreach($data as $value)
            <div class="col-xl-4 col-lg-4">
                <div class="single-service-style1 text-center">
                    <div class="single-service-style1__bg" style="background-image: url(frontend/images/shape/single-service-box-bg-2.png);"></div>
                    <div class="img-holder">
                        <div class="inner">
                            <img src="{{asset('storage/service/' . $value->image)}}" alt="">
                        </div>
                        <div class="overlay-icon">
                            <a href="#"><span class=" icon-water-bottle"></span></a>
                        </div>
                    </div>
                    <div class="title-holder">
                        <h3><a href="{{route('front.service-detail', $value->slug)}}">{{$value->title}}</a></h3>
                        <div class="inner-text">
                            <p>{{$value->description}}</p>
                        </div>
                    </div>
                    <div class="btn-box mt-3">
                        <a class="btn-one" href="{{route('front.service-detail', $value->slug)}}">
                            <div class="round"></div>
                            <span class="txt">View Details</span>
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
            <!--End Single Service Style1-->
        </div>
    </div>
</section>
<!--End Service Style1 Area-->

<!--Start Features Style2 Area-->
<section class="features-style2-area">
    <div class="features-style2-area--bg-2" style="background-image: url(frontend/images/parallax-background/features-style2-bg-2.jpg);"></div>
    <div class="container">
        <div class="row">

            <div class="col-xl-4">
                <div class="features-style1_one-content features-style1_content-box-style3">
                    <div class="inner-content">
                        <div class="sec-title">
                            <div class="sub-title">
                                <h5>Water & You</h5>
                            </div>
                            <h2 class="clr_white">Essential <br>for good health</h2>
                            <div class="decor">
                                <img src="frontend/images/shape/decor.png" alt="">
                            </div>
                        </div>
                        <div class="text">
                            <p>Righteous indignation & dislike men who<br> are beguiled the charms.</p>
                            <ul>
                                <li><span class="icon-water-drop"></span>Carrying nutrients & oxygen</li>
                                <li><span class="icon-water-drop"></span>Aiding digestion</li>
                                <li><span class="icon-water-drop"></span>Normalizing blood pressure</li>
                                <li><span class="icon-water-drop"></span>Stabilizing the heartbeat</li>
                            </ul>
                            <div class="btns-box">
                                <a class="btn-one" href="#">
                                    <div class="round"></div>
                                    <span class="txt">Read More</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-8">
                <div class="video-holder-box1">
                    <div class="video-holder-box1-bg" style="background-image: url(frontend/images/water-you.png);"></div>
                </div>
            </div>

        </div>
    </div>
</section>
<!--End Features Style2 Area-->

<!--Start Testimonials Style2 area -->
{{-- <section class="testimonials-style2-area testimonials-style2_in-style3">
    <div class="container">
        <div class="sec-title text-center">
            <div class="sub-title">
                <h5>Testimonials</h5>
            </div>
            <h2>Here's what our customers<br> say about us</h2>
            <div class="decor">
                <img src="{{asset('frontend/images/shape/decor.png')}}" alt="">
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="theme_carousel testimonials-carousel_2 owl-theme owl-carousel" data-options='{"loop": true, "margin": 30, "autoheight":true, "lazyload":true, "nav": false, "dots": false, "autoplay": true, "autoplayTimeout": 6000, "smartSpeed": 300, "responsive":{ "0" :{ "items": "1" }, "600" :{ "items" : "1" }, "768" :{ "items" : "1" } , "992":{ "items" : "2" }, "1200":{ "items" : "3" }}}'>

                    <!--Start Single Testimonials Style2-->
                    <div class="single-testimonials-style2">
                        <div class="icon">
                            <span class="icon-left-quote"></span>
                        </div>
                        <div class="inner-content">
                            <div class="rateing-box">
                                <ul>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                </ul>
                            </div>
                            <p>Have used their service for five years & can say the service has always been amazing. Delivery driver is friendly & we recommend.</p>
                            <div class="bottom">
                                <div class="img-box">
                                    <img src="frontend/images/user.png" alt=""/>
                                </div>
                                <div class="author-name">
                                    <h6><a href="#">Shailesh Gupta</a></h6>
                                    <p>Varanasi</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Single Testimonials Style2-->
                    <!--Start Single Testimonials Style2-->
                    <div class="single-testimonials-style2">
                        <div class="icon">
                            <span class="icon-left-quote"></span>
                        </div>
                        <div class="inner-content">
                            <div class="rateing-box">
                                <ul>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                </ul>
                            </div>
                            <p>I went to the Aguapure water office to speak with someone in person about Aguapure services. The  team was very professional.</p>
                            <div class="bottom">
                                <div class="img-box">
                                    <img src="frontend/images/user.png" alt=""/>
                                </div>
                                <div class="author-name">
                                    <h6><a href="#">Shailesh Gupta</a></h6>
                                    <p>Varanasi</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Single Testimonials Style2-->
                    <!--Start Single Testimonials Style2-->
                    <div class="single-testimonials-style2">
                        <div class="icon">
                            <span class="icon-left-quote"></span>
                        </div>
                        <div class="inner-content">
                            <div class="rateing-box">
                                <ul>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                </ul>
                            </div>
                            <p>I have been receiving spring water from Aguapure for about a years now. The water is delicious, remind you of delivery dates.</p>
                            <div class="bottom">
                                <div class="img-box">
                                    <img src="frontend/images/user.png" alt=""/>
                                </div>
                                <div class="author-name">
                                    <h6><a href="#">Shailesh Gupta</a></h6>
                                    <p>Varanasi</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Single Testimonials Style2-->

                </div>
            </div>
        </div>
    </div>
</section> --}}
<!--End Testimonials Style2 area -->
@endsection