import Layout from "@/components/layout/Layout"
import Link from "next/link"
export default function Contact() {

    return (
        <>
            <Layout breadcrumbTitle="Book Now" footerStyle={2}>
                <section className="about-section">
                    {/*-============spacing==========-*/}
                    <div className="pd_top_90" />
                    {/*-============spacing==========-*/}
                    <div className="container">
                        <div className="row align-items-center">
                            <div className="col-lg-6">
                                <div className="image">
                                    <img src="/assets/images/about/about-2-11.png" className="img-fluid" alt="img" />
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_40" />
                                {/*-============spacing==========-*/}
                            </div>
                            <div className="col-lg-6">
                                <div className="section_title type_two">
                                    <h4 className="sm_title"> Amazing Company</h4>
                                    <div className="title_whole">
                                        <h2 className="title"> Get Your Instant Price in Seconds </h2>
                                    </div>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_30" />
                                {/*-============spacing==========-*/}
                                <div className="position-relative border_left_abolute_5px pd_left_40">
                                    No phone calls. No waiting. No “we’ll email you a quote.”
                                    Just enter your pickup & drop-off addresses below, and our system will show you:
                                </div>
                                <div className="position-relative mt-3">
                                    <ul className="list_box list color_two">
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                <Link className="links" href="#">
                                                    Your exact price (including distance & time) </Link>
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                <Link className="links" href="#">
                                                    How much space you’ll have in the van (with dimensions)</Link>
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                <Link className="links" href="#">
                                                    The best time slots available</Link>
                                            </div>
                                        </li>
                                    </ul>
                                    <p>
                                        If you like what you see, hit Book Now — and your confirmation will be sent instantly.
                                    </p>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_40" />
                                {/*-============spacing==========-*/}
                                <div className="row gutter_15px">
                                    <div className="col-lg-5">
                                        <div className="theme_btn_all">
                                            <Link href="#" className="theme_btn color_two rotate big">
                                                Learn More <span> <i className=" fi-rr-arrow-small-up" /></span>
                                            </Link>
                                        </div>
                                        {/*-============spacing==========-*/}
                                        <div className="pd_bottom_20" />
                                        {/*-============spacing==========-*/}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section className="content-section bg_op_4" style={{ backgroundImage: 'url(assets/images/wave-pat-1.png)' }}>
                    {/*-============spacing==========-*/}
                    <div className="pd_top_90" />
                    {/*-============spacing==========-*/}
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-4 col-md-6 col-sm-12">
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_60 d_md_none" />
                                {/*-============spacing==========-*/}
                                <div className="section_title medium type_one">
                                    <h4 className="sm_title"> Great Offer For Customer</h4>
                                    <div className="title_whole">
                                        <h2 className="title"> Why Book with Zip Van?</h2>
                                    </div>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_40" />
                                {/*-============spacing==========-*/}
                            </div>
                            <div className="col-lg-4 col-md-6 col-sm-12">
                                <div className="icon_box_only type_eight">
                                    <div className="icon_image">
                                        <img src="/assets/images/img-icon-1.png" className="img-fluid" alt="img" />
                                    </div>
                                    <div className="section_title type_one">
                                        <div className="title_whole">
                                            <h2 className="title"> Upfront pricing</h2>
                                        </div>
                                        <p> The price you see here is the price you pay. No hidden fees, no insurance add-ons.</p>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-4 col-md-6 col-sm-12">
                                <div className="icon_box_only type_eight">
                                    <div className="icon_image">
                                        <img src="/assets/images/img-icon-2.png" className="img-fluid" alt="img" />
                                    </div>
                                    <div className="section_title type_one">
                                        <div className="title_whole">
                                            <h2 className="title"> Insurance included</h2>
                                        </div>
                                        <p>  Unlike U-Haul, we don’t charge you extra for coverage. Your items are fully protected.</p>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-4 col-md-6 col-sm-12">
                                <div className="icon_box_only type_eight">
                                    <div className="icon_image">
                                        <img src="/assets/images/img-icon-2.png" className="img-fluid" alt="img" />
                                    </div>
                                    <div className="section_title type_one">
                                        <div className="title_whole">
                                            <h2 className="title"> Right-sized vans</h2>
                                        </div>
                                        <p>Big enough for couches, beds, appliances & furniture. Easy to load, easy to move.</p>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-4 col-md-6 col-sm-12">
                                <div className="icon_box_only type_eight">
                                    <div className="icon_image">
                                        <img src="/assets/images/img-icon-2.png" className="img-fluid" alt="img" />
                                    </div>
                                    <div className="section_title type_one">
                                        <div className="title_whole">
                                            <h2 className="title"> We drive for you</h2>
                                        </div>
                                        <p> No wrestling with oversized vans in traffic. Sit back, we’ve got the wheel.</p>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-4 col-md-6 col-sm-12">
                                <div className="icon_box_only type_eight">
                                    <div className="icon_image">
                                        <img src="/assets/images/img-icon-2.png" className="img-fluid" alt="img" />
                                    </div>
                                    <div className="section_title type_one">
                                        <div className="title_whole">
                                            <h2 className="title"> Quick & simple</h2>
                                        </div>
                                        <p>  Book in 2 minutes. Move stress-free.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/*-============spacing==========-*/}
                    <div className="pd_bottom_90" />
                    {/*-============spacing==========-*/}
                </section>

                <section className="form-section">
                    <div className="auto-container">
                        <div className="row align-items-center">
                            <div className="col-lg-6">
                                {/*-============spacing==========-*/}
                                <div className="pd_top_50" />
                                {/*-============spacing==========-*/}
                                <div className="image_box_only  type_two">
                                    <div className="bg" />
                                    <div className="left">
                                        <div className="image one">
                                            <img src="/assets/images/portfolio/project-1-min.png" alt="img" className="img-fluid" />
                                        </div>
                                        <div className="image two">
                                            <img src="/assets/images/form-2-min.png" alt="img" className="img-fluid" />
                                        </div>
                                    </div>
                                    <div className="right">
                                        <div className="image three">
                                            <img src="/assets/images/form-1-min.png" alt="img" className="img-fluid" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-6 col-md-12">
                                <div className="section_title type_one">
                                    <h4 className="sm_title"> Amazing Company</h4>
                                    <div className="title_whole">
                                        <h2 className="title"> How Booking Works</h2>
                                    </div>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_20" />
                                {/*-============spacing==========-*/}
                                <div className="position-relative">
                                    <ul className="list_box list color_two">
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                <Link className="links" href="#">
                                                    Enter your pickup & drop-off details.</Link>
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                <Link className="links" href="#">
                                                    Get your instant price & van dimensions.</Link>
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                <Link className="links" href="#">
                                                    Confirm your time slot.</Link>
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                <Link className="links" href="#">
                                                    Receive your booking confirmation by email.</Link>
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                <Link className="links" href="#">
                                                    On moving day, we show up on time — you load, we drive, done!</Link>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                     {/*-============spacing==========-*/}
                    <div className="pd_bottom_90" />
                    {/*-============spacing==========-*/}
                </section>

                <section className="call-to-action-section position-relative bg_op_1" style={{ backgroundImage: 'url(assets/images/call-bg-h4-min.jpg)' }}>
                    <div className="background_overlay bg_11 z_0" />
                    {/*-============spacing==========-*/}
                    <div className="pd_top_50" />
                    {/*-============spacing==========-*/}
                    <div className="large-container">
                        <div className="row align-items-center">
                            <div className="col-lg-2">
                                <div className="image-layer position-relative z_1">
                                    <img src="/assets/images/call-1-min.png" className="img-fluid" alt="img" />
                                </div>
                            </div>
                            <div className="col-lg-6">
                                <div className="section_title color_white">
                                    <div className="title_whole">
                                        <h2 className="title">
                                            Questions or prefer to book by phone?</h2>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-2">
                                <div className="theme_btn_all text-md-center">
                                    <Link href="#" className="theme_btn big color_white_two rotate">
                                        Call us at (647)360-2507 <span> <i className="fi-rr-arrow-small-up" /></span>
                                    </Link>
                                </div>
                            </div>
                            <div className="col-lg-2">
                                <div className="image-layer position-relative z_1">
                                    <img src="/assets/images/call-2-min.png" className="img-fluid" alt="img" />
                                </div>
                            </div>
                        </div>
                    </div>
                    {/*-============spacing==========-*/}
                    <div className="pd_bottom_50" />
                    {/*-============spacing==========-*/}
                </section>
            </Layout>
        </>
    )
}