329 lines
19 KiB
JavaScript
329 lines
19 KiB
JavaScript
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">
|
||
{/* Image Column */}
|
||
<div className="col-lg-6 order-2 order-lg-1 text-center">
|
||
<div className="image">
|
||
<img
|
||
src="/assets/images/about/about-2-11.png"
|
||
className="img-fluid mx-auto d-block"
|
||
alt="img"
|
||
/>
|
||
</div>
|
||
{/*-============spacing==========-*/}
|
||
<div className="pd_bottom_40" />
|
||
{/*-============spacing==========-*/}
|
||
</div>
|
||
|
||
{/* Content Column */}
|
||
<div className="col-lg-6 order-1 order-lg-2">
|
||
<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">
|
||
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>
|
||
|
||
Your exact price (including distance & time)
|
||
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div className="d-flex align-items-center">
|
||
<div className="icon trans">
|
||
<i aria-hidden="false" className="fas fa-check-circle" />
|
||
</div>
|
||
|
||
How much space you’ll have in the van (with dimensions)
|
||
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div className="d-flex align-items-center">
|
||
<div className="icon trans">
|
||
<i aria-hidden="false" className="fas fa-check-circle" />
|
||
</div>
|
||
|
||
The best time slots available
|
||
|
||
</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="/contact" 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 g-4">
|
||
<div className="col-lg-4 col-md-6 col-sm-12 d-flex">
|
||
<div className="w-100">
|
||
{/*-============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>
|
||
|
||
<div className="col-lg-4 col-md-6 col-sm-12 d-flex">
|
||
<div className="icon_box_only type_eight h-100 w-100 d-flex flex-column">
|
||
<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 d-flex">
|
||
<div className="icon_box_only type_eight h-100 w-100 d-flex flex-column">
|
||
<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 d-flex">
|
||
<div className="icon_box_only type_eight h-100 w-100 d-flex flex-column">
|
||
<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 d-flex">
|
||
<div className="icon_box_only type_eight h-100 w-100 d-flex flex-column">
|
||
<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 d-flex">
|
||
<div className="icon_box_only type_eight h-100 w-100 d-flex flex-column">
|
||
<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 order-2 order-lg-1 text-center">
|
||
{/*-============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 order-1 order-lg-2">
|
||
<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>
|
||
|
||
Enter your pickup & drop-off details.
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div className="d-flex align-items-center">
|
||
<div className="icon trans">
|
||
<i aria-hidden="false" className="fas fa-check-circle" /></div>
|
||
|
||
Get your instant price & van dimensions.
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div className="d-flex align-items-center">
|
||
<div className="icon trans">
|
||
<i aria-hidden="false" className="fas fa-check-circle" /></div>
|
||
|
||
Confirm your time slot.
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div className="d-flex align-items-center">
|
||
<div className="icon trans">
|
||
<i aria-hidden="false" className="fas fa-check-circle" /></div>
|
||
|
||
Receive your booking confirmation by email.
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div className="d-flex align-items-center">
|
||
<div className="icon trans">
|
||
<i aria-hidden="false" className="fas fa-check-circle" /></div>
|
||
|
||
On moving day, we show up on time — you load, we drive, done!
|
||
</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="tel:+(647) 360-2075" className="theme_btn big color_white_two rotate">
|
||
Call us at (647) 360-2075 <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>
|
||
</>
|
||
)
|
||
} |