<?php $this->extend('layouts/master') ?>

<?php $this->section('content') ?>

<!-- Hero Section Start -->
<div class="hero">
    <div class="hero-section bg-section parallaxie">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <!-- Hero Content Start -->
                    <div class="hero-content">
                        <div class="section-title">
                            <h3 class="wow fadeInUp">welcome to JohnBull</h3>
                            <h1 class="text-anime-style-3" data-cursor="-opaque">Looking to save more on your rental van?</h1>
                            <p class="wow fadeInUp" data-wow-delay="0.25s">Do you need to move material to the work site, relocate, or meet essential business needs? We offer a wide range of vehicles to suit your needs.</p>
                        </div>

                        <div class="hero-content-body wow fadeInUp" data-wow-delay="0.5s">
                            <a href="/book" class="btn-default">book a van</a>
                            <a href="/#services" class="btn-default btn-highlighted">learn more</a>
                        </div>
                    </div>
                    <!-- Hero Content End -->
                </div>
            </div>
        </div>
    </div>

</div>
<!-- Hero Section End -->

<!-- Our Services Section Start -->
<div class="our-services bg-section" id="services">
    <div class="container">
        <div class="row section-row">
            <div class="col-lg-12">
                <!-- Section Title Start -->
                <div class="section-title">
                    <h3 class="wow fadeInUp">our services</h3>
                    <h2 class="text-anime-style-3" data-cursor="-opaque">Fleet Management services</h2>
                </div>
<!--                <div style="font-size: 16px; font-weight: bold; flex-direction: column; text-align: center;">-->
<!--                    <div>-->
<!--                        Priority Business Van Rentals: Rentals to support various mission critical/essential businesses such as Ecommerce, delivery and medical supplies.-->
<!--                    </div>-->
<!--                    <div>  Moving Rental: Rentals for moving furniture or household items-->
<!--                    </div>-->
<!--                    <div>     Home improvement/renovation supplies Rental: Rentals for moving purchases from stores to site.-->
<!--                    </div>-->
<!--                </div>-->

                <!-- Section Title End -->
            </div>
        </div>

        <div class="row">
            <div class="col-lg-3 col-md-6">
                <!-- Service Item Start -->
                <div class="service-item wow fadeInUp">
                    <div class="icon-box">
                        <img src="/assets/images/icon-service-1.svg" alt="">
                    </div>
                    <div class="service-content">
                        <h3>Priority Business</h3>
                        <p>Rentals to support various mission critical/essential businesses .</p>
                    </div>
                    <div class="service-footer">
                        <a href="/book" class="section-icon-btn"><img src="/assets/images/arrow-white.svg" alt=""></a>
                    </div>
                </div>
                <!-- Service Item End -->
            </div>

            <div class="col-lg-3 col-md-6">
                <!-- Service Item Start -->
                <div class="service-item wow fadeInUp" data-wow-delay="0.25s">
                    <div class="icon-box">
                        <img src="/assets/images/icon-service-2.svg" alt="">
                    </div>
                    <div class="service-content">
                        <h3>Moving Rental</h3>
                        <p>Rentals for moving furniture or household items.</p>
                    </div>
                    <div class="service-footer">
                        <a href="/book" class="section-icon-btn"><img src="/assets/images/arrow-white.svg" alt=""></a>
                    </div>
                </div>
                <!-- Service Item End -->
            </div>

            <div class="col-lg-3 col-md-6">
                <!-- Service Item Start -->
                <div class="service-item wow fadeInUp" data-wow-delay="0.5s">
                    <div class="icon-box">
                        <img src="/assets/images/icon-service-3.svg" alt="">
                    </div>
                    <div class="service-content">
                        <h3>Home improvement</h3>
                        <p>Rentals for moving purchases from stores to site.</p>
                    </div>
                    <div class="service-footer">
                        <a href="#" class="section-icon-btn"><img src="/assets/images/arrow-white.svg" alt=""></a>
                    </div>
                </div>
                <!-- Service Item End -->
            </div>

            <div class="col-lg-3 col-md-6">
                <!-- Service Item Start -->
                <div class="service-item wow fadeInUp" data-wow-delay="0.75s">
                    <div class="icon-box">
                        <img src="/assets/images/icon-service-4.svg" alt="">
                    </div>
                    <div class="service-content">
                        <h3>Learn More.</h3>
                        <p>Learn more about how we serve your rental need.</p>
                    </div>
                    <div class="service-footer">
                        <a href="/our-service" class="section-icon-btn"><img src="/assets/images/arrow-white.svg" alt=""></a>
                    </div>
                </div>
                <!-- Service Item End -->
            </div>

<!--            <div class="col-lg-12">-->
<!--                <div class="services-box-footer wow fadeInUp" data-wow-delay="1s">-->
<!--                    <p>Discover our range of car rental services designed to meet all your travel needs. From a diverse fleet of vehicles to flexible rental plans.</p>-->
<!--                    <a href="#" class="btn-default">view all service</a>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </div>
</div>
<!-- Our Services Section End -->


<!-- Perfect Fleets Section Start -->
<div class="perfect-fleet bg-section">
    <div class="container-fluid">
        <div class="row section-row">
            <div class="col-lg-12">
                <!-- Section Title Start -->
                <div class="section-title">
                    <h3 class="wow fadeInUp">our fleets</h3>
                    <h2 class="text-anime-style-3" data-cursor="-opaque">Explore our perfect and extensive fleet</h2>
                </div>
                <!-- Section Title End -->
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <!-- Testimonial Slider Start -->
                <div class="car-details-slider">
                    <div class="swiper">
                        <div class="swiper-wrapper" data-cursor-text="Drag">

                            <?php
                            foreach ($fleet as $item){
                             ?>
                                <div class="swiper-slide">
                                    <!-- Perfect Fleets Item Start -->
                                    <div class="perfect-fleet-item">
                                        <!-- Image Box Start -->
                                        <div class="image-box">
                                            <img src="<?=$item["image"]?>" alt="">
                                        </div>
                                        <!-- Image Box End -->

                                        <!-- Perfect Fleets Content Start -->
                                        <div class="perfect-fleet-content">
                                            <!-- Perfect Fleets Title Start -->
                                            <div class="perfect-fleet-title">
<!--                                                <h3>luxury car</h3>-->
                                                <h2><?=$item["title"]?></h2>
                                            </div>
                                            <!-- Perfect Fleets Content End -->

                                            <!-- Perfect Fleets Footer Start -->
                                            <div class="perfect-fleet-footer">
                                                <!-- Perfect Fleets Btn Start -->
                                                <div class="perfect-fleet-btn">
                                                    <a href="/book" class="section-icon-btn"><img src="/assets/images/arrow-white.svg" alt=""></a>
                                                </div>
                                                <!-- Perfect Fleets Btn End -->
                                            </div>
                                            <!-- Perfect Fleets Footer End -->
                                        </div>
                                        <!-- Perfect Fleets Content End -->
                                    </div>
                                    <!-- Perfect Fleets Item End -->
                                </div>
                               <?php
                            }
                            ?>
                        </div>
                        <div class="car-details-btn">
                            <div class="car-button-prev"></div>
                            <div class="car-button-next"></div>
                        </div>
                    </div>
                </div>
                <!-- Testimonial Slider End -->
            </div>
        </div>
    </div>
</div>
<!-- Perfect Fleets Section End -->



<?= $this->endSection() ?>

