@extends('front.layouts.app')

@section('content')

 <section class="main-slider main-slider--inner p-0" id="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-slide">
                <div class="slide-inner bg-image" data-background="images/mainBnnr.webp">
                    <div class="container">
                        <div class="row aic">
                            <div class="col-lg-6">
                                <div class="slideOne">
                                    <h1>Services</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="rent-sec rent--inner">
        <div class="container">
            <div class="row align-items-end">
                <div class="col-md-6" data-aos="fade-up">
                    <div class="rent-content">
                        <h3 class="sub-head">Rent A Car</h3>
                        <h2 class="main-head">Comprehensive Ride and Delivery Solutions</h2>
                        <figure class="rent-sub">
                            <img src="images/rent-sub-1.webp" class="img-fluid" alt="">
                            <div class="rent-sub-ct">
                                <h3>Effortless Booking Experience</h3>
                                <p>
                                    Quick Ride simplifies transportation with fast and flexible ride bookings and reliable delivery services, catering to your individual needs.
                                </p>
                            </div>
                        </figure>
                        <figure class="rent-sub">
                            <img src="images/rent-sub-1.webp" class="img-fluid" alt="">
                            <div class="rent-sub-ct">
                                <h3>Commitment to Safety and Reliability</h3>
                                <p>
                                    Our platform ensures peace of mind with verified drivers and dedicated support, prioritizing your safety on every journey.
                                </p>
                            </div>
                        </figure>
                    </div>
                </div>
                <div class="col-md-6" data-aos="fade-up">
                    <div class="rent-right">
                        <form class="rent-form">
                            <p>Enter your details, and choose the driver that fits the best for your journey.</p>
                            <div class="row">
                                <div class="col-md-12" data-aos="fade-up">
                                    <div class="form-group">
                                        <label>First Name</label>
                                        <input type="text" class="form-control" placeholder="First Name">
                                    </div>
                                </div>
                                <div class="col-md-12" data-aos="fade-up">
                                    <div class="form-group">
                                        <label>Email</label>
                                        <input type="text" class="form-control" placeholder="Email">
                                    </div>
                                </div>
                                <div class="col-md-6" data-aos="fade-up">
                                    <div class="form-group">
                                        <label>Pikup Date</label>
                                        <input type="date" class="form-control" placeholder="mm/dd/yyyy">
                                    </div>
                                </div>
                                <div class="col-md-6" data-aos="fade-up">
                                    <div class="form-group">
                                        <label>Dropup Date</label>
                                        <input type="date" class="form-control" placeholder="mm/dd/yyyy">
                                    </div>
                                </div>
                                <div class="col-md-12" data-aos="fade-up">
                                    <div class="form-group">
                                        <label>Person</label>
                                        <input type="text" class="form-control" placeholder="Person">
                                    </div>
                                </div>
                                <div class="col-md-12" data-aos="fade-up">
                                    <button class="themeBtn">Book Now!</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="ride-sec">
        <div class="container">
            <div class="row justify-content-end">
                <div class="col-md-8" data-aos="fade-up">
                    <div class="ride-Conetnt">
                        <h2>Stay Connected for Innovative Updates</h2>
                        <p>
                            Get exclusive updates, tips, and offers from Quick Ride directly to your inbox.
                        </p>
                        <form class="ride-form">
                            <div class="row">
                                <div class="col-md-12" data-aos="fade-up">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Email Address...">
                                        <button class="themeBtn">Subscribe Newsletter</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="choose-sec">
        <div class="container">
            <div class="row">
                <div class="col-md-4" data-aos="fade-up">
                    <div class="choose-left">
                        <h3 class="sub-head">Choose your Best Deal</h3>
                        <h2 class="main-head">Find the Best Ride Options!</h2>
                        <p>Browse our diverse fleet of cars, complete with details, to find your ideal ride!</p>
                    </div>
                </div>
                <div class="col-md-8" data-aos="fade-up">
                    <div class="swiper choose-slider">

                        <div class="swiper-wrapper">


                            <div class="swiper-slide">
                                <div class="choose-wrapp">
                                    <figure class="choose-Imag">
                                        <img src="images/choose-1.webp" class="img-fluid" alt="">

                                    </figure>
                                    <div class="choose-content">
                                        <h3>Toyota Camry (1982)</h3>
                                        <ul>
                                            <li>Base Rate: $10</li>
                                            <li>Per Mile/KM: $20</li>
                                            <li> Passengers: 6</li>
                                            <li>Ratting:
                                                <span>
                                                    <div class="stars">
                                                        <i class="fas fa-star"></i>
                                                        <i class="fas fa-star"></i>
                                                        <i class="fas fa-star"></i>
                                                        <i class="fas fa-star"></i>
                                                        <i class="fas fa-star"></i>
                                                    </div>
                                                </span>
                                            </li>
                                        </ul>
                                        <a href="" class="themeBtn">Book Now <i class="far fa-arrow-up"></i></a>
                                    </div>
                                </div>
                            </div>


                            <div class="swiper-slide">
                                <div class="choose-wrapp">
                                    <figure class="choose-Imag">
                                        <img src="images/choose-2.webp" class="img-fluid" alt="">
                                    </figure>
                                    <div class="choose-content">
                                        <h3>Toyota Camry (1982)</h3>
                                        <ul>
                                            <li>Base Rate: $10</li>
                                            <li>Per Mile/KM: $20</li>
                                            <li> Passengers: 6</li>
                                            <li>Ratting:
                                                <span>
                                                    <div class="stars">
                                                        <i class="fas fa-star"></i>
                                                        <i class="fas fa-star"></i>
                                                        <i class="fas fa-star"></i>
                                                        <i class="fas fa-star"></i>
                                                        <i class="fas fa-star"></i>
                                                    </div>
                                                </span>
                                            </li>
                                        </ul>
                                        <a href="" class="themeBtn">Book Now <i class="far fa-arrow-up"></i></a>
                                    </div>
                                </div>
                            </div>



                            <div class="swiper-slide">
                                <div class="choose-wrapp">
                                    <figure class="choose-Imag">
                                        <img src="images/choose-3.webp" class="img-fluid" alt="">

                                    </figure>
                                    <div class="choose-content">
                                        <h3>Toyota Camry (1982)</h3>
                                        <ul>
                                            <li>Base Rate: $10</li>
                                            <li>Per Mile/KM: $20</li>
                                            <li> Passengers: 6</li>
                                            <li>Ratting:
                                                <span>
                                                    <div class="stars">
                                                        <i class="fas fa-star"></i>
                                                        <i class="fas fa-star"></i>
                                                        <i class="fas fa-star"></i>
                                                        <i class="fas fa-star"></i>
                                                        <i class="fas fa-star"></i>
                                                    </div>
                                                </span>
                                            </li>
                                        </ul>
                                        <a href="" class="themeBtn">Book Now <i class="far fa-arrow-up"></i></a>
                                    </div>
                                </div>
                            </div>



                            <div class="swiper-slide">
                                <div class="choose-wrapp">
                                    <figure class="choose-Imag">
                                        <img src="images/choose-4.webp" class="img-fluid" alt="">

                                    </figure>
                                    <div class="choose-content">
                                        <h3>Toyota Camry (1982)</h3>
                                        <ul>
                                            <li>Base Rate: $10</li>
                                            <li>Per Mile/KM: $20</li>
                                            <li> Passengers: 6</li>
                                            <li>Ratting:
                                                <span>
                                                    <div class="stars">
                                                        <i class="fas fa-star"></i>
                                                        <i class="fas fa-star"></i>
                                                        <i class="fas fa-star"></i>
                                                        <i class="fas fa-star"></i>
                                                        <i class="fas fa-star"></i>
                                                    </div>
                                                </span>
                                            </li>
                                        </ul>
                                        <a href="" class="themeBtn">Book Now <i class="far fa-arrow-up"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-button-next"><i class="fas fa-angle-right"></i></div>
            <div class="swiper-button-prev"><i class="fas fa-angle-left"></i></div>
        </div>
    </section>

    <section class="packegs-section">
        <div class="container">
            <div class="packegs-top" data-aos="fade-up">
                <h3 class="sub-head">Pricing action</h3>
                <h2 class="main-head">Packages Designed for Convenience</h2>
            </div>
            <div class="row align-items-center">
                <div class="col-md-4" data-aos="fade-up">
                    <div class="packeg-wrap">
                        <figure>
                            <img src="images/pack1.webp" class="img-fluid" alt="">
                        </figure>
                        <h3>Economy Rides</h3>
                        <p>Experience budget-friendly travel without compromising on comfort. Ideal for daily commutes
                            and short trips.</p>
                        <ul class="price-packg">
                            <li>Initial charge: <span>$05</span></li>
                            <li>Additional Kilometre: <span>$01.50</span></li>
                            <li>Per Minute Stopped Traffic: <span>$02</span></li>
                            <li>Waiting Charge: <span>$00.50</span></li>
                        </ul>
                        <a href="" class="themeBtn">Book Now! <i class="far fa-long-arrow-right"></i></a>
                    </div>
                </div>
                <div class="col-md-4" data-aos="fade-up">
                    <div class="packeg-wrap">
                        <figure>
                            <img src="images/pack2.webp" class="img-fluid" alt="">
                        </figure>
                        <h3>Premium Rides</h3>
                        <p>
                            Enjoy a luxurious ride experience with premium features and superior comfort for special
                            occasions.
                        </p>
                        <ul class="price-packg">
                            <li>Initial charge: <span>$10</span></li>
                            <li>Additional Kilometre: <span>$02.50</span></li>
                            <li>Per Minute Stopped Traffic: <span>$03</span></li>
                            <li>Waiting Charge: <span>$01</span></li>
                        </ul>
                        <a href="" class="themeBtn">Book Now! <i class="far fa-long-arrow-right"></i></a>
                    </div>
                </div>
                <div class="col-md-4" data-aos="fade-up">
                    <div class="packeg-wrap">
                        <figure>
                            <img src="images/pack3.webp" class="img-fluid" alt="">
                        </figure>
                        <h3>Delivery Services</h3>
                        <p>Reliable and efficient delivery solutions for your packages, ensuring safe transit and timely
                            arrivals.</p>
                        <ul class="price-packg">
                            <li>Initial charge: <span>$07</span></li>
                            <li>Additional Kilometre: <span>$02</span></li>
                            <li>Per Minute Stopped Traffic: <span>$03</span></li>
                            <li>Waiting Charge: <span>$01</span></li>
                        </ul>
                        <a href="" class="themeBtn">Book Now! <i class="far fa-long-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="get-keysection">
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-md-6" data-aos="fade-up">
                    <div class="keyhead">
                        <h2>Groove Your Way to Wherever You Want!</h2>
                    </div>
                </div>
                <div class="col-md-3">
                    <figure class="getfigure">
                        <img src="images/getkey1.webp" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-2">
                    <a href="" class="themeBtn">Contact Us <i class="far fa-long-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </section>

    <section class="video-section video--inner">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-12" data-aos="fade-up">
                    <figure class="videowrap">
                        <img src="images/playvideo1.webp" class="img-fluid" alt="">
                        <a href=""><i class="fas fa-play"></i></a>
                    </figure>
                </div>
            </div>
        </div>
    </section>
    
@endsection