book now page created

This commit is contained in:
Selvi 2025-09-05 17:36:48 +05:30
parent 4aec86074e
commit 03774eb251
10 changed files with 465 additions and 14 deletions

View File

@ -55,7 +55,7 @@ export default function Banner1() {
</div> </div>
<div className="section_title abso type_one"> <div className="section_title abso type_one">
<div className="title_whole"> <div className="title_whole">
<h2 className="title"> INSURANCE</h2> <h2 className="title">#ZIPVan</h2>
</div> </div>
</div> </div>
</section> </section>

View File

@ -0,0 +1,62 @@
import Layout from "@/components/layout/Layout";
import Link from "next/link";
export default function Contact() {
return (
<>
<section className="contact-map-section">
<div className="container">
<div className="row">
<div className="col-lg-4 col-md-6 col-sm-12">
<section className="map-section">
<div className="map-outer">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.835434508135!2d144.95565131531697!3d-37.8172099797516!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577a2a97f4953b2!2s55%20Main%20St%2C%20Melbourne%20VIC%2C%20Australia!5e0!3m2!1sen!2sau!4v1678975266976!5m2!1sen!2sau"
height={300}
style={{ border: 0, width: "100%" }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
</section>
</div>
<div className="col-lg-4 col-md-6 col-sm-12">
<section className="map-section">
<div className="map-outer">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3311.835434508135!2d151.20929531531697!3d-33.8688190797516!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b12ae3c5c30e7d7%3A0xf577a2a97f4953b2!2s120%20Green%20Avenue%2C%20Sydney%20NSW%2C%20Australia!5e0!3m2!1sen!2sau!4v1678975266977!5m2!1sen!2sau"
height={300}
style={{ border: 0, width: "100%" }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
</section>
</div>
<div className="col-lg-4 col-md-6 col-sm-12">
<section className="map-section">
<div className="map-outer">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3521.835434508135!2d153.02603411531697!3d-27.4701259797516!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b93724ef9e3b5e7%3A0xf577a2a97f4953b2!2s75%20Ocean%20View%20Rd%2C%20Brisbane%20QLD%2C%20Australia!5e0!3m2!1sen!2sau!4v1678975266978!5m2!1sen!2sau"
height={300}
style={{ border: 0, width: "100%" }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
</section>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_90" />
{/*-============spacing==========-*/}
</section>
</>
);
}

View File

@ -6,7 +6,7 @@ export default function Process3() {
<> <>
<section className="process-section"> <section className="process-section">
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_top_80" /> <div className="pd_top_90" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="container"> <div className="container">
<div className="row"> <div className="row">
@ -102,7 +102,7 @@ export default function Process3() {
</div> </div>
</div> </div>
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_bottom_80" /> <div className="pd_bottom_90" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
</section> </section>

View File

@ -0,0 +1,78 @@
import { Autoplay, Navigation, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
const swiperOptions = {
modules: [Autoplay, Navigation, Pagination],
slidesPerView: 1,
spaceBetween: 0,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
};
export default function Slider2() {
return (
<section className="slider d-flex justify-content-center align-items-center"
style={{ padding: "90px 0 0" }}>
<div className="slider-wrapper" style={{ maxWidth: "1920px", width: "100%" }}>
<Swiper {...swiperOptions} className="theme_carousel position-relative">
{/* Slide 1 */}
<SwiperSlide>
<img
src="assets/images/slider/1.png"
alt="Slide 1"
style={{
width: "100%",
height: "auto",
display: "block",
}}
/>
</SwiperSlide>
{/* Slide 2 */}
<SwiperSlide>
<img
src="assets/images/slider/2.png"
alt="Slide 2"
style={{
width: "100%",
height: "auto",
display: "block",
}}
/>
</SwiperSlide>
{/* Slide 3 */}
<SwiperSlide>
<img
src="assets/images/slider/3.png"
alt="Slide 3"
style={{
width: "100%",
height: "auto",
display: "block",
}}
/>
</SwiperSlide>
<div className="swiper-button-prev"></div>
<div className="swiper-button-next"></div>
</Swiper>
</div>
</section>
);
}

306
pages/book-now.js Normal file
View File

@ -0,0 +1,306 @@
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 well 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 youll 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 dont 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, weve 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>
</>
)
}

View File

@ -10,23 +10,27 @@ import Process3 from "@/components/sections/Process3"
import Service6 from "@/components/sections/Service6" import Service6 from "@/components/sections/Service6"
import Service7 from "@/components/sections/Service7" import Service7 from "@/components/sections/Service7"
import Testimonial3 from "@/components/sections/Testimonial3" import Testimonial3 from "@/components/sections/Testimonial3"
import Slider2 from "@/components/sections/slider"
import Location from "@/components/sections/Location"
export default function Home4() { export default function Home4() {
return ( return (
<> <>
<Layout headerStyle={4} footerStyle={2}> <Layout headerStyle={4} footerStyle={2}>
<Banner1 /> <Banner1 />
<Service6 /> <Slider2 />
<About4 /> {/* <Service6 /> */}
<Service7 /> {/* <About4 /> */}
<Content5 /> {/* <Service7 /> */}
{/* <Content5 /> */}
<Process3 /> <Process3 />
<Funfacts2 /> <Location />
<Form3 /> {/* <Funfacts2 /> */}
<Testimonial3 /> {/* <Form3 /> */}
<Client3 /> {/* <Testimonial3 /> */}
<div className="divider" /> {/* <Client3 /> */}
<Blog4 /> {/* <div className="divider" /> */}
{/* <Blog4 /> */}
</Layout> </Layout>
</> </>
) )

View File

@ -3610,6 +3610,7 @@ body .slick-dots li {
-ms-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out;
min-height: 265px;
} }
.icon_box_only.type_eight .section_title .title { .icon_box_only.type_eight .section_title .title {
@ -14659,7 +14660,7 @@ body .wp-block-rss li a {
} }
.theme_btn.big { .theme_btn.big {
padding: 7px 30px 14px 34px !important; padding: 7px 9px 14px 9px !important;
} }
.theme_btn.big2 { .theme_btn.big2 {

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB