319 lines
19 KiB
JavaScript
319 lines
19 KiB
JavaScript
import ZipvanQuote from "@/components/sections/ZipvanQuote"
|
||
import Layout from "@/components/layout/Layout";
|
||
import Link from "next/link"
|
||
export default function Contact() {
|
||
|
||
return (
|
||
<>
|
||
<Layout breadcrumbTitle="Book Now" footerStyle={2} background={"/assets/images/BookNow/book-now-banner.webp"}>
|
||
<section className="about-section">
|
||
{/* <div className="pd_top_90" /> */}
|
||
<div className="container">
|
||
<div className="row align-items-center">
|
||
|
||
{/* Left Column → Text first, then Image */}
|
||
<div className="col-lg-6 order-1 order-lg-1">
|
||
{/* Text Content */}
|
||
<div className="section_title type_two">
|
||
<div className="pd_top_90" />
|
||
<h4 className="sm_title text-center"> Fast Pricing</h4>
|
||
<div className="title_whole">
|
||
<h2 className="title text-center">Get Your Instant <br /> Price Now</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pd_bottom_30" />
|
||
<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 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 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 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>
|
||
|
||
<div className="pd_bottom_40" />
|
||
|
||
{/* CTA Button */}
|
||
<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>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Image Below Content */}
|
||
<div className="image mt-5">
|
||
<img
|
||
src="/assets/images/BookNow/amazing-company.webp"
|
||
className="img-fluid mx-auto d-block"
|
||
alt="img"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Column (Booking Tool or Any Content) */}
|
||
<div className="col-lg-6 order-2 order-lg-2">
|
||
<div className="booking-tool-box">
|
||
{/* Call your component or iframe here */}
|
||
<ZipvanQuote />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="pd_top_90" />
|
||
</section>
|
||
|
||
<section className="content-section bg_op_4 theme_alter-bg" 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"> Special Deals</h4> */}
|
||
<div className="title_whole">
|
||
<h2 className="title text-white">Reasons to Choose 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/BookNow/icons/upfront-pricing.webp" 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/BookNow/icons/insurance-included.webp" 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/BookNow/icons/right-sized-vans.webp" 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/BookNow/icons/we-drive-for-you.webp" 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/BookNow/icons/quick-simple.webp" 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="pd_bottom_90" />
|
||
|
||
<div className="auto-container">
|
||
<div className="row align-items-center">
|
||
<div className="col-lg-6 order-2 order-lg-1 text-center">
|
||
<div className="image_box_only type_two">
|
||
<div className="bg" />
|
||
<div className="left">
|
||
<div className="image one">
|
||
<img src="/assets/images/BookNow/amazing-company/240-269.webp" alt="img" className="img-fluid" />
|
||
</div>
|
||
<div className="image two">
|
||
<img src="/assets/images/BookNow/amazing-company/220-220.webp" alt="img" className="img-fluid" />
|
||
</div>
|
||
</div>
|
||
<div className="right">
|
||
<div className="image three">
|
||
<img src="/assets/images/BookNow/amazing-company/230-270.webp" 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"> Easy Steps</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 bg_11" 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/BookNow/team-left.webp" className="img-fluid" alt="img" />
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-5">
|
||
<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-3">
|
||
<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 <br /> +1 (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/BookNow/team-right.webp" className="img-fluid" alt="img" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/*-============spacing==========-*/}
|
||
<div className="pd_bottom_50" />
|
||
{/*-============spacing==========-*/}
|
||
</section>
|
||
</Layout>
|
||
</>
|
||
)
|
||
} |