@include('themes.theme4.header')

<section class="page_slider">
    <div class="flexslider" data-nav="false" data-dots="true">
        <ul class="slides">
            @foreach($banners as $banner)
            <li class="ds bs cover-image flex-slide">
                <span class="flexslider-overlay"></span>
                <img src="{{asset('uploads/banners/'.$banner->image)}}" alt="">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="intro_layers_wrapper justify-content-center">
                                {{-- <div class="intro_layers rotate_layers">
                                    <div class="intro_layer" data-animation="fadeInRightBig">
                                        <h2 class="text-uppercase intro_before_featured_word text-left">
                                            All Makes &
                                        </h2>
                                    </div>
                                    <div class="intro_layer gradient-layer text-center" data-animation="fadeInRight">
                                        <h2 class="text-uppercase">
                                            <span class="text-layer">
                                                <span class="color-main2">$20</span> Off Towing!
                                            </span>
                                        </h2>
                                    </div>
                                    <div class="intro_layer text-right" data-animation="fadeInLeftBig">
                                        <h2 class="text-uppercase intro_after_featured_word">
                                            Models Welcome
                                        </h2>
                                    </div>
                                </div> <!-- eof .intro_layers --> --}}

                            </div> <!-- eof .intro_layers_wrapper -->
                        </div> <!-- eof .col-* -->
                    </div><!-- eof .row -->
                </div><!-- eof .container-fluid -->
                <div class="ds social-flex d-none d-lg-block">
                    <p class="social-icons with-border">
                        <span><a href="#" class="fa fa-facebook border-icon rounded-icon"
                                title="facebook"></a></span>
                        <span><a href="#" class="fa fa-paper-plane border-icon rounded-icon"
                                title="telegram"></a></span>
                        <span><a href="#" class="fa fa-instagram border-icon rounded-icon"
                                title="instagram"></a></span>
                    </p>
                </div>
            </li>
            @endforeach

        </ul>
    </div> <!-- eof flexslider -->
</section>

<section class="s-pt-55 s-pb-0 s-pt-md-50  s-pb-lg-145 ls ms text-center steps-section" id="steps">
    <div class="container">
        <div class="col-12 text-center mb-55">
            <h4>How<span class="text-gradient">We Work</span></h4>
            <p>Autospa Hand Wash is an eco-friendly, hand car wash and detailing service based in Portland. Our company
                was founded back in 2005 by a team of experts with more then 10 years of professional car wash
                experience.</p>
            <div class="divider-60 d-none d-xl-block"></div>
        </div>


        <div class="row justify-content c-mb-60 c-mb-lg-0">
            <div class="col-lg-4 ">
                <article
                    class="vertical-item text-center content-padding post type-post status-publish format-standard has-post-thumbnail bordered ls">
                    <div class="item-media post-thumbnail">
                        <img src="images/blog/10.jpg" alt="">
                        <div class="media-links">
                            <a class="abs-link" title="" href="#"></a>
                        </div>
                    </div><!-- .post-thumbnail -->
                    <div class="item-content">
                        <header class="entry-header">
                            <h4 class="entry-title">
                                <a href="#" rel="bookmark">
                                    Life is either a great adverture
                                </a>
                            </h4>
                        </header><!-- .entry-header -->
                    </div><!-- .item-content -->
                </article><!-- #post-## -->
            </div>

            <div class="col-lg-4 ">
                <article
                    class="vertical-item text-center content-padding post type-post status-publish format-standard has-post-thumbnail bordered ls">
                    <div class="item-media post-thumbnail">
                        <img src="images/blog/10.jpg" alt="">
                        <div class="media-links">
                            <a class="abs-link" title="" href="#"></a>
                        </div>
                    </div><!-- .post-thumbnail -->
                    <div class="item-content">
                        <header class="entry-header">
                            <h4 class="entry-title">
                                <a href="#" rel="bookmark">
                                    Life is either a great adverture
                                </a>
                            </h4>
                        </header><!-- .entry-header -->
                    </div><!-- .item-content -->
                </article><!-- #post-## -->
            </div>

            <div class="col-lg-4 ">
                <article
                    class="vertical-item text-center content-padding post type-post status-publish format-standard has-post-thumbnail bordered ls">
                    <div class="item-media post-thumbnail">
                        <img src="images/blog/10.jpg" alt="">
                        <div class="media-links">
                            <a class="abs-link" title="" href="#"></a>
                        </div>
                    </div><!-- .post-thumbnail -->
                    <div class="item-content">
                        <header class="entry-header">
                            <h4 class="entry-title">
                                <a href="#" rel="bookmark">
                                    Life is either a great adverture
                                </a>
                            </h4>
                        </header><!-- .entry-header -->
                    </div><!-- .item-content -->
                </article><!-- #post-## -->
            </div>

            <div class="col-lg-4 ">
                <br>
                <article
                    class="vertical-item text-center content-padding post type-post status-publish format-standard has-post-thumbnail bordered ls">
                    <div class="item-media post-thumbnail">
                        <img src="images/blog/10.jpg" alt="">
                        <div class="media-links">
                            <a class="abs-link" title="" href="#"></a>
                        </div>
                    </div><!-- .post-thumbnail -->
                    <div class="item-content">
                        <header class="entry-header">
                            <h4 class="entry-title">
                                <a href="#" rel="bookmark">
                                    Life is either a great adverture
                                </a>
                            </h4>
                        </header><!-- .entry-header -->
                    </div><!-- .item-content -->
                </article><!-- #post-## -->
            </div>

            <div class="col-lg-4 ">
                <br>
                <article
                    class="vertical-item text-center content-padding post type-post status-publish format-standard has-post-thumbnail bordered ls">
                    <div class="item-media post-thumbnail">
                        <img src="images/blog/10.jpg" alt="">
                        <div class="media-links">
                            <a class="abs-link" title="" href="#"></a>
                        </div>
                    </div><!-- .post-thumbnail -->
                    <div class="item-content">
                        <header class="entry-header">
                            <h4 class="entry-title">
                                <a href="#" rel="bookmark">
                                    Life is either a great adverture
                                </a>
                            </h4>
                        </header><!-- .entry-header -->
                    </div><!-- .item-content -->
                </article><!-- #post-## -->
            </div>
            <div class="col-lg-4 ">
                <br>
                <article
                    class="vertical-item text-center content-padding post type-post status-publish format-standard has-post-thumbnail bordered ls">
                    <div class="item-media post-thumbnail">
                        <img src="images/blog/10.jpg" alt="">
                        <div class="media-links">
                            <a class="abs-link" title="" href="#"></a>
                        </div>
                    </div><!-- .post-thumbnail -->
                    <div class="item-content">
                        <header class="entry-header">
                            <h4 class="entry-title">
                                <a href="#" rel="bookmark">
                                    Life is either a great adverture
                                </a>
                            </h4>
                        </header><!-- .entry-header -->
                    </div><!-- .item-content -->
                </article><!-- #post-## -->
            </div>

        </div>

</section>

<section class="ds s-pt-60  s-pb-0 s-pb-md-15 s-pb-lg-150 choose-us-section c-gutter-10 overflow-visible"
    id="choose-us">
    <div class="container">
        <br>
        <div class="row c-mb-45 c-mb-lg-0">
            <div class="divider-40 d-block d-lg-none"></div>
            <div class="offset-lg-2 col-lg-8 item-content text-center">
                <h3 class="special-heading text-center">About <span class="text-gradient">Our </span> Company</h3>


                <p>{{$companyprofile->about_company??''}}</p>
                <div class="row text-left c-gutter-60">
                    <div class="divider-35"></div>
                    <div class="col-md-4">
                        <div class="icon-box text-center">
                            <div class="icon-styled color-main2 fs-40">
                                <i class="ico-mechanic"></i>
                            </div>
                            <p>
                                We offer multiple services at a great value
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="icon-box text-center">
                            <div class="icon-styled color-main2 fs-40">
                                <i class="ico-car-wash"></i>
                            </div>
                            <p>
                                Multiple car wash locations throughout Portland
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="icon-box text-center">
                            <div class="icon-styled color-main2 fs-40">
                                <i class="ico-painting"></i>
                            </div>
                            <p>
                                Biodegradable and eco-friendly products
                            </p>
                        </div>
                    </div>
                </div>
                <div class="divider-33 d-none d-lg-block"></div>
                <div>
                    <a href="#" class="btn btn-small btn-maincolor">Read more</a>
                </div>
            </div>
        </div>
        <div class="divider-50 d-none d-lg-block"></div>
    </div>
</section>


<br>
<br>
<br>

<section class="up-sells upsells products">
    <div class="col-12 mb-60">
        <h3 class="special-heading text-center">Our <span class="text-gradient">Products</span></h3>

    </div>
    <ul class="products">

        @foreach($products as $product)
        <article
            class="vertical-item text-center content-padding post type-post status-publish format-standard has-post-thumbnail bordered ls">
            <div class="item-media post-thumbnail">
                <img src="{{asset('uploads/products/'.$product->image)}}" alt="">
                <div class="media-links">
                    <a class="abs-link" title="" href="#"></a>
                </div>
            </div><!-- .post-thumbnail -->
            <div class="item-content">
                <header class="entry-header">
                    <h4 class="entry-title">
                        <a href="#" rel="bookmark">
                            {{$product->name??''}}
                        </a>
                    </h4>
                </header><!-- .entry-header -->
            </div><!-- .item-content -->
        </article><!-- #post-## -->
        @endforeach




    </ul>
</section>

<br>

<section class="ds bs s-py-60 s-pt-lg-145 s-pb-lg-150 call-to-action s-parallax s-overlay text-center text-lg-left"
    id="action">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-8 col-xl-7">
                <h3 class="special-heading">$25 Off<span class="text-gradient">Any Repair</span> Or Service</h3>
                <div class="divider-35 d-none d-md-block"></div>
                <p class="big fw-400">$25 off repairs totaling $150 or more in labor expenses. One coupon per visit.
                    Not valid with other offer or special. Coupon must be presented.</p>
                <div class="divider-43 d-none d-md-block"></div>
                <a href="#" class="btn btn-small btn-maincolor">Get Started</a>
                <a href="#" class="btn btn-small btn-outline-maincolor">Schedule Maintenance</a>
            </div>
        </div>
    </div>
</section>





<section class="ls ms contact-section text-center text-md-left">
    <div class="row align-items-center c-gutter-0">
        <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12">
            <div class="animate page_map animated scaleAppear" data-animation="scaleAppear">
                <div class="marker">
                    <div class="marker-address">sydney, australia, Liverpool street, 2</div>
                    <div class="marker-title">Fourth Marker</div>
                    <div class="marker-description">
                        <p><strong>Sydney, Australia, Liverpool Street, 2</strong>.<br>
                            Lorem ipsum dolor sit amet,
                            consectetur adipisicing elit. Aliquid cumque,
                            deserunt dolor.
                        </p>
                    </div>
                    <img class="marker-icon" src="images/map_marker_icon.png" alt="">P
                </div>
                <!-- .marker -->
            </div>
            <!--.col-* -->
        </div>
        <div class="col-xl-3 col-md-6 col-10">
            <div class="divider-55 d-md-none"></div>
            <div class="item-content content-left-padding">
                <h3 class="special-heading">Find<span class="text-gradient">Us</span></h3>
                {{-- <p>Pro inimicus sapientem an, ad cibo velit mollis mei, ne vim adhuc gubergren.</p> --}}
                {{-- <h6 class="fw-700">New Yourk</h6> --}}
                <div class="media side-icon-box">
                    <div class="icon-styled color-main">
                        <i class="fa fa-map-marker"></i>
                    </div>
                    <p class="media-body">{{$companyprofile->address??''}}<br> {{$companyprofile->city??''}}<br>{{$companyprofile->state??''}} </p>
                </div>
                <div class="media side-icon-box">
                    <div class="icon-styled color-main">
                        <i class="fa fa-phone"></i>
                    </div>

                    <p class="media-body">{{$companyprofile->phone??''}}</p>
                </div>
                <div class="media side-icon-box">
                    <div class="icon-styled color-main fs-14">
                        <i class="fa fa-envelope"></i>
                    </div>
                    <p class="media-body links-grey">
                        <a href="#">{{$companyprofile->email??''}}</a>
                    </p>
                </div>
                <a href="#" class="btn btn-small btn-outline-maincolor">Contact us</a>
            </div>
            <div class="divider-60 d-md-none"></div>
        </div>
        <!--.col-* -->
    </div>
</section>

@include('themes.theme4.footer')