MetatroncubeSoftwareSolutions/zip-van
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive checked

Browse Source
This commit is contained in:
Selvi 2025-09-06 15:53:48 +05:30
commit 3b80b3a86c
13 changed files with 280 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/layout/Breadcrumb.js
View File

@ -16,7 +16,7 @@ export default function Breadcrumb({breadcrumbTitle}) {
</div> </div>
<div className="col-lg-12 vankine"> <div className="col-lg-12 vankine">
<ul className="breadcrumb m-auto"> <ul className="breadcrumb m-auto">
<li><Link href="#">Home</Link> </li> <li><Link href="/">Home</Link> </li>
<li className="active">{breadcrumbTitle}</li> <li className="active">{breadcrumbTitle}</li>
</ul> </ul>
</div> </div>

16
components/layout/MobileMenu.js
View File

@ -11,12 +11,12 @@ export default function MobileMenu({ handleMobileMenu, isMobileMenu }) {
<div className="close-btn" onClick={handleMobileMenu}> <div className="close-btn" onClick={handleMobileMenu}>
<i className="fi-rr-cross" /> <i className="fi-rr-cross" />
</div> </div>
<form role="search" method="get" action="#"> {/* <form role="search" method="get" action="#">
<input type="search" className="search" placeholder="Search..." name="s" title="Search" /> <input type="search" className="search" placeholder="Search..." name="s" title="Search" />
<button type="submit" className="sch_btn"> <button type="submit" className="sch_btn">
<i className="fa fa-search" /> <i className="fa fa-search" />
</button> </button>
</form> </form> */}
<div className="menu-outer"> <div className="menu-outer">
<div className="navigation_menu"> <div className="navigation_menu">
<Sidebar /> <Sidebar />
@ -24,18 +24,18 @@ export default function MobileMenu({ handleMobileMenu, isMobileMenu }) {
</div> </div>
<div className="mobile-header-info-wrap"> <div className="mobile-header-info-wrap">
<div className="single-mobile-header-info"> <div className="single-mobile-header-info">
<Link href="tel:9806071234" className="cnt"> <Link href="tel:+647360-2075" className="cnt">
<i className="fi-rs-headphones" />9806071234 </Link> <i className="fi-rs-headphones" />(647) 360-2075 </Link>
</div> </div>
<div className="single-mobile-header-info cont_over"> <div className="single-mobile-header-info cont_over">
<Link href="mailto:sendmail@example.com" className="cnt"> <Link href="mailto:info@zipvan.ca" className="cnt">
<i className="fi-rs-envelope" />sendmail@example.com </Link> <i className="fi-rs-envelope" />info@zipvan.ca </Link>
</div> </div>
<div className="single-mobile-header-info"> <div className="single-mobile-header-info">
<Link href="#" className="theme_btn tp_one">Contact</Link> <Link href="/contact" className="theme_btn tp_one">Contact</Link>
</div> </div>
<div className="single-mobile-header-info"> <div className="single-mobile-header-info">
<Link href="#" className="theme_btn">Service</Link> <Link href="/contact" className="theme_btn">Service</Link>
</div> </div>
</div> </div>
</nav> </nav>

33
components/layout/Sidebar.js
View File

@ -26,7 +26,7 @@ export default function Sidebar() {
<Link href="/" className="nav_link"> <Link href="/" className="nav_link">
<span className="text-link"> Home </span> <span className="text-link"> Home </span>
</Link> </Link>
<ul className="sub_menu" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}> {/* <ul className="sub_menu" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
<li className="menu-item nav-item vankine_menu_image"> <li className="menu-item nav-item vankine_menu_image">
<Link href="/" className="nav_link image_big_on_menu_two"> <Link href="/" className="nav_link image_big_on_menu_two">
<span className="img-link"> <span className="img-link">
@ -75,10 +75,10 @@ export default function Sidebar() {
<span className="text-link"> Home 6 </span> <span className="text-link"> Home 6 </span>
</Link> </Link>
</li> </li>
</ul> </ul> */}
<div className="dropdown-btn" onClick={() => handleToggle(1)}><span className="fa fa-angle-down" /></div> {/* <div className="dropdown-btn" onClick={() => handleToggle(1)}><span className="fa fa-angle-down" /></div> */}
</li> </li>
<li className="menu-item menu-item-has-children dropdown mennucolumn_ nav-item"> {/* <li className="menu-item menu-item-has-children dropdown mennucolumn_ nav-item">
<Link href="#" className="nav_link"> <Link href="#" className="nav_link">
<span className="text-link"> <span className="text-link">
Pages Pages
@ -181,8 +181,8 @@ export default function Sidebar() {
</li> </li>
</ul> </ul>
<div className="dropdown-btn" onClick={() => handleToggle(3)}><span className="fa fa-angle-down" /></div> <div className="dropdown-btn" onClick={() => handleToggle(3)}><span className="fa fa-angle-down" /></div>
</li> </li> */}
<li className="menu-item menu-item-has-children dropdown mennucolumn_ nav-item"> {/* <li className="menu-item menu-item-has-children dropdown mennucolumn_ nav-item">
<Link href="#" className="nav_link"> <Link href="#" className="nav_link">
<span className="text-link"> <span className="text-link">
Portfolio Portfolio
@ -324,6 +324,27 @@ export default function Sidebar() {
</li> </li>
</ul> </ul>
<div className="dropdown-btn" onClick={() => handleToggle(1)}><span className="fa fa-angle-down" /></div> <div className="dropdown-btn" onClick={() => handleToggle(1)}><span className="fa fa-angle-down" /></div>
</li> */}
<li className="menu-item nav-item">
<Link href="/about-us" className="nav_link">
<span className="text-link">
About Us
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/faqs" className="nav_link">
<span className="text-link">
FAQ
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/book-now" className="nav_link">
<span className="text-link">
Book Now
</span>
</Link>
</li> </li>
<li className="menu-item nav-item"> <li className="menu-item nav-item">
<Link href="/contact" className="nav_link"> <Link href="/contact" className="nav_link">

34
components/layout/footer/Footer2.js
View File

@ -15,14 +15,14 @@ export default function Footer2({ }) {
<div className="row"> <div className="row">
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12 pd_right_70"> <div className="col-lg-4 col-md-6 col-sm-6 col-xs-12 pd_right_70">
<div className="footer_widgets_box pd_bottom_30"> <div className="footer_widgets_box pd_bottom_30">
{/*-============spacing==========-*/}
<div className="pd_bottom_35" />
{/*-============spacing==========-*/} <div className="fwidget_title">
<div className="position-relative color_white"> <h2 className="title color_white"> Move your stuff in a ZIP </h2>
Move your stuff in a ZIP
</div> </div>
<div className="logo_box"> <div className="logo_box">
<Link href="#" className="logo navbar-brand"> <Link href="/" className="logo navbar-brand">
<img src="/assets/images/1.png" alt="Vankine" className="logo_default" /> <img src="/assets/images/1.png" alt="Vankine" className="logo_default" />
</Link> </Link>
</div> </div>
@ -74,34 +74,34 @@ export default function Footer2({ }) {
<div className="position-relative"> <div className="position-relative">
<ul className="list_box list"> <ul className="list_box list">
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center color_white">
<div className="icon trans"> <div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" /> <i className="fi-rr-arrow-small-right color_white" />
</div> </div>
<Link className="links color_white" href="#"> {/* <Link className="links color_white" href="#"> */}
Greater Toronto Area Greater Toronto Area
</Link> {/* </Link> */}
</div> </div>
</li> </li>
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center color_white">
<div className="icon trans"> <div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" /> <i className="fi-rr-arrow-small-right color_white" />
</div> </div>
<Link className="links color_white" href="#"> {/* <Link className="links color_white" href="#"> */}
Greater Hamilton Area Greater Hamilton Area
</Link> {/* </Link> */}
</div> </div>
</li> </li>
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center color_white">
<div className="icon trans"> <div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" /> <i className="fi-rr-arrow-small-right color_white" />
</div> </div>
<Link className="links color_white" href="#"> {/* <Link className="links color_white" href="#"> */}
Kitchener-Waterloo- Kitchener-Waterloo-
Cambridge Area Cambridge Area
</Link> {/* </Link> */}
</div> </div>
</li> </li>
</ul> </ul>
@ -219,13 +219,11 @@ export default function Footer2({ }) {
<div className="position-relative"> <div className="position-relative">
<ul className="list_box color_one linline"> <ul className="list_box color_one linline">
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center color_white">
<div className="icon trans"> <div className="icon trans">
<i className=" fi-rr-clock" /> <i className=" fi-rr-clock" />
</div> </div>
<Link className="links color_white" href="#">
Working Hours : 24/7 365 Days a Year Working Hours : 24/7 365 Days a Year
</Link>
</div> </div>
</li> </li>
</ul> </ul>

18
components/layout/header/Header1.js
View File

@ -6,7 +6,7 @@ export default function Header1({ handleSearch, handleOptionalPanel, handleMobil
<> <>
<div className="header_area " id="header_contents"> <div className="header_area " id="header_contents">
<header className="header-area header-style-1 htype_one"> <header className="header-area header-style-1 htype_one">
<div className="top_bar"> {/* <div className="top_bar">
<div className="large-container"> <div className="large-container">
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-xl-2 col-lg-0 col-md-0 col-sm-0 col-xs-0"> <div className="col-xl-2 col-lg-0 col-md-0 col-sm-0 col-xs-0">
@ -75,23 +75,15 @@ export default function Header1({ handleSearch, handleOptionalPanel, handleMobil
</div> </div>
</div> </div>
</div> </div>
</div> </div> */}
<div className="main_header_content default_header"> <div className="main_header_content default_header">
<div className="large-container"> <div className="large-container">
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-xl-2 col-lg-12 col-md-5 col-sm-5 col-xs-5"> <div className="col-xl-2 col-lg-12 col-md-5 col-sm-5 col-xs-5">
<div className="logo_box"> <div className="logobox">
{/*logo-shape*/}
<svg width={286} height={120} viewBox="0 0 286 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 15.1694C0 10.2921 3.885 6.30231 8.76058 6.17256L234.506 0.165147C238.242 0.0657277 241.65 2.2855 243.07 5.74252L284.899 107.581C287.331 113.503 282.976 120 276.574 120H9C4.02943 120 0 115.971 0 111V15.1694Z" fill="var(--color-set-four-1)">
</path>
</svg>
{/*logo-shape*/}
{/*logo*/}
<Link href="/" className="logo navbar-brand"> <Link href="/" className="logo navbar-brand">
<img src="/assets/images/logo/logo-orange.png" alt="Zip Van" className="logo_default" /> <img src="/assets/images/logo/logo.png" alt="Vankine" className="logo_default" />
</Link> </Link>
{/*logo*/}
</div> </div>
</div> </div>
<div className="col-xl-8 col-lg-9 col-md-0 col-sm-0 col-xs-0 column_menu"> <div className="col-xl-8 col-lg-9 col-md-0 col-sm-0 col-xs-0 column_menu">
@ -112,7 +104,7 @@ export default function Header1({ handleSearch, handleOptionalPanel, handleMobil
</div> </div>
{/*menu icon*/} {/*menu icon*/}
<div className="button"> <div className="button">
<Link href="#" className="theme_btn"> <Link href="/contact" className="theme_btn">
Get A Quote Get A Quote
<svg width={12} height={12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width={12} height={12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 11L11 1M11 1H3.5M11 1V8.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> <path d="M1 11L11 1M11 1H3.5M11 1V8.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />

4
components/sections/Funfacts4.js
View File

@ -13,8 +13,8 @@ export default function Funfacts4() {
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="medium-container"> <div className="medium-container">
<div className="background_overlay z_0" /> <div className="background_overlay z_0" />
<div className="row"> <div className="row funfacts-row">
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12"> <div className="col-lg-3 col-md-6 col-sm-12 col-xs-12">
<div className="fun_facts type_three"> <div className="fun_facts type_three">
<div className="icon trans"> <div className="icon trans">
<i className="color_white flaticon-satisfaction" /> <i className="color_white flaticon-satisfaction" />

3
components/sections/Location.js
View File

@ -5,6 +5,9 @@ export default function Contact() {
return ( return (
<> <>
<section className="contact-map-section"> <section className="contact-map-section">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-lg-4 col-md-6 col-sm-12"> <div className="col-lg-4 col-md-6 col-sm-12">

59
pages/about-us.js
View File

@ -89,7 +89,7 @@ export default function AboutUs() {
</div> </div>
</div> </div>
</div> </div>
<div className="col-lg-6 col-md-6 col-sm-12 pd_left_30"> <div className="col-lg-6 col-md-12 col-sm-12 pd_left_80">
<div className="section_title type_one"> <div className="section_title type_one">
<h4 className="sm_title"> About Company</h4> <h4 className="sm_title"> About Company</h4>
<div className="title_whole"> <div className="title_whole">
@ -111,16 +111,16 @@ export default function AboutUs() {
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#"> <p>
Big moving companies charging premium prices for even the smallest jobs. </Link> Big moving companies charging premium prices for even the smallest jobs. </p>
</div> </div>
</li> </li>
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#"> <p>
DIY rentals like U-Haul — which meant driving oversized vans, paying for insurance add-ons, and wasting time at rental centers.</Link> DIY rentals like U-Haul — which meant driving oversized vans, paying for insurance add-ons, and wasting time at rental centers.</p>
</div> </div>
</li> </li>
</ul> </ul>
@ -135,14 +135,11 @@ export default function AboutUs() {
<div className="pd_bottom_30" /> <div className="pd_bottom_30" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="theme_btn_all"> <div className="theme_btn_all">
<Link href="#" className="theme_btn"> <Link href="/contact" className="theme_btn">
More About Us More About Us
<span> <i className=" fi-rr-arrow-small-up" /></span> <span> <i className=" fi-rr-arrow-small-up" /></span>
</Link> </Link>
</div> </div>
{/*-============spacing==========-*/}
<div className="pd_bottom_70" />
{/*-============spacing==========-*/}
</div> </div>
</div> </div>
</div> </div>
@ -156,7 +153,7 @@ export default function AboutUs() {
{/*-about end*/} {/*-about end*/}
<section className="content-section bg_light_2"> <section className="content-section bg_light_2">
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_top_95" /> <div className="pd_top_90" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="container"> <div className="container">
<div className="row"> <div className="row">
@ -177,32 +174,32 @@ export default function AboutUs() {
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#"> <p>
Furniture moving & pickup – IKEA, Facebook Marketplace, Costco, Home Depot… if you bought it, we’ll bring it home. </Link> Furniture moving & pickup – IKEA, Facebook Marketplace, Costco, Home Depot… if you bought it, we’ll bring it home. </p>
</div> </div>
</li> </li>
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#"> <p>
Appliance delivery – Fridges, washers, stoves, you name it.</Link> Appliance delivery – Fridges, washers, stoves, you name it.</p>
</div> </div>
</li> </li>
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#"> <p>
Small moves – Perfect for apartments, dorms, and condo living.</Link> Small moves – Perfect for apartments, dorms, and condo living.</p>
</div> </div>
</li> </li>
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#"> <p>
Quick hauls – When a full moving truck is too much, we’re just right.</Link> Quick hauls – When a full moving truck is too much, we’re just right.</p>
</div> </div>
</li> </li>
</ul> </ul>
@ -235,7 +232,7 @@ export default function AboutUs() {
</div> </div>
</div> </div>
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_bottom_70" /> <div className="pd_bottom_90" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
</section> </section>
<section className="content-section bg_light_1 position-relative overflow-hidden"> <section className="content-section bg_light_1 position-relative overflow-hidden">
@ -276,40 +273,40 @@ export default function AboutUs() {
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#"> <p>
We drive, you don’t. No wrestling with giant vans in city traffic. </Link> We drive, you don’t. No wrestling with giant vans in city traffic. </p>
</div> </div>
</li> </li>
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#"> <p>
We’re insured, always. No surprise $30/day fees like U-Haul.</Link> We’re insured, always. No surprise $30/day fees like U-Haul.</p>
</div> </div>
</li> </li>
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#"> <p>
We come to you. No lineups at a rental center — we show up at your door.</Link> We come to you. No lineups at a rental center — we show up at your door.</p>
</div> </div>
</li> </li>
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#"> <p>
Transparent pricing. The price you see is the price you pay.</Link> Transparent pricing. The price you see is the price you pay.</p>
</div> </div>
</li> </li>
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#"> <p>
Fast & flexible. Same-day or next-day moves available.</Link> Fast & flexible. Same-day or next-day moves available.</p>
</div> </div>
</li> </li>
</ul> </ul>
@ -318,7 +315,7 @@ export default function AboutUs() {
</div> </div>
</div> </div>
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_bottom_80" /> <div className="pd_bottom_90" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="ab_img_right_bottom z_0"> <div className="ab_img_right_bottom z_0">
<img src="/assets/images/bg-2-2.png" className="img-fluid" alt="img" /> <img src="/assets/images/bg-2-2.png" className="img-fluid" alt="img" />
@ -344,7 +341,7 @@ export default function AboutUs() {
<div className="pd_bottom_40" /> <div className="pd_bottom_40" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="theme_btn_all"> <div className="theme_btn_all">
<Link href="#" className="theme_btn"> <Link href="/contact" className="theme_btn">
Learn More <span><i className=" fi-rr-arrow-small-up" /></span> Learn More <span><i className=" fi-rr-arrow-small-up" /></span>
</Link> </Link>
</div> </div>

127
pages/book-now.js
View File

@ -11,15 +11,22 @@ export default function Contact() {
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="container"> <div className="container">
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-lg-6"> {/* Image Column */}
<div className="col-lg-6 order-2 order-lg-1 text-center">
<div className="image"> <div className="image">
<img src="/assets/images/about/about-2-11.png" className="img-fluid" alt="img" /> <img
src="/assets/images/about/about-2-11.png"
className="img-fluid mx-auto d-block"
alt="img"
/>
</div> </div>
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_bottom_40" /> <div className="pd_bottom_40" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
</div> </div>
<div className="col-lg-6">
{/* Content Column */}
<div className="col-lg-6 order-1 order-lg-2">
<div className="section_title type_two"> <div className="section_title type_two">
<h4 className="sm_title"> Amazing Company</h4> <h4 className="sm_title"> Amazing Company</h4>
<div className="title_whole"> <div className="title_whole">
@ -29,7 +36,7 @@ export default function Contact() {
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_bottom_30" /> <div className="pd_bottom_30" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="position-relative border_left_abolute_5px pd_left_40"> <div className="position-relative">
No phone calls. No waiting. No “we’ll email you a quote.” 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: Just enter your pickup & drop-off addresses below, and our system will show you:
</div> </div>
@ -38,25 +45,31 @@ export default function Contact() {
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" />
<Link className="links" href="#"> </div>
Your exact price (including distance & time) </Link>
Your exact price (including distance & time)
</div> </div>
</li> </li>
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" />
<Link className="links" href="#"> </div>
How much space you’ll have in the van (with dimensions)</Link>
How much space you’ll have in the van (with dimensions)
</div> </div>
</li> </li>
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" />
<Link className="links" href="#"> </div>
The best time slots available</Link>
The best time slots available
</div> </div>
</li> </li>
</ul> </ul>
@ -70,8 +83,8 @@ export default function Contact() {
<div className="row gutter_15px"> <div className="row gutter_15px">
<div className="col-lg-5"> <div className="col-lg-5">
<div className="theme_btn_all"> <div className="theme_btn_all">
<Link href="#" className="theme_btn color_two rotate big"> <Link href="/contact" className="theme_btn color_two rotate big">
Learn More <span> <i className=" fi-rr-arrow-small-up" /></span> Learn More <span><i className="fi-rr-arrow-small-up" /></span>
</Link> </Link>
</div> </div>
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
@ -81,6 +94,7 @@ export default function Contact() {
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
@ -89,23 +103,26 @@ export default function Contact() {
<div className="pd_top_90" /> <div className="pd_top_90" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="container"> <div className="container">
<div className="row"> <div className="row g-4">
<div className="col-lg-4 col-md-6 col-sm-12"> <div className="col-lg-4 col-md-6 col-sm-12 d-flex">
{/*-============spacing==========-*/} <div className="w-100">
<div className="pd_bottom_60 d_md_none" /> {/*-============spacing==========-*/}
{/*-============spacing==========-*/} <div className="pd_bottom_60 d_md_none" />
<div className="section_title medium type_one"> {/*-============spacing==========-*/}
<h4 className="sm_title"> Great Offer For Customer</h4> <div className="section_title medium type_one">
<div className="title_whole"> <h4 className="sm_title"> Great Offer For Customer</h4>
<h2 className="title"> Why Book with Zip Van?</h2> <div className="title_whole">
<h2 className="title"> Why Book with Zip Van?</h2>
</div>
</div> </div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div> </div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div> </div>
<div className="col-lg-4 col-md-6 col-sm-12">
<div className="icon_box_only type_eight"> <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"> <div className="icon_image">
<img src="/assets/images/img-icon-1.png" className="img-fluid" alt="img" /> <img src="/assets/images/img-icon-1.png" className="img-fluid" alt="img" />
</div> </div>
@ -117,8 +134,9 @@ export default function Contact() {
</div> </div>
</div> </div>
</div> </div>
<div className="col-lg-4 col-md-6 col-sm-12">
<div className="icon_box_only type_eight"> <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"> <div className="icon_image">
<img src="/assets/images/img-icon-2.png" className="img-fluid" alt="img" /> <img src="/assets/images/img-icon-2.png" className="img-fluid" alt="img" />
</div> </div>
@ -130,8 +148,9 @@ export default function Contact() {
</div> </div>
</div> </div>
</div> </div>
<div className="col-lg-4 col-md-6 col-sm-12">
<div className="icon_box_only type_eight"> <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"> <div className="icon_image">
<img src="/assets/images/img-icon-2.png" className="img-fluid" alt="img" /> <img src="/assets/images/img-icon-2.png" className="img-fluid" alt="img" />
</div> </div>
@ -143,8 +162,9 @@ export default function Contact() {
</div> </div>
</div> </div>
</div> </div>
<div className="col-lg-4 col-md-6 col-sm-12">
<div className="icon_box_only type_eight"> <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"> <div className="icon_image">
<img src="/assets/images/img-icon-2.png" className="img-fluid" alt="img" /> <img src="/assets/images/img-icon-2.png" className="img-fluid" alt="img" />
</div> </div>
@ -156,8 +176,9 @@ export default function Contact() {
</div> </div>
</div> </div>
</div> </div>
<div className="col-lg-4 col-md-6 col-sm-12">
<div className="icon_box_only type_eight"> <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"> <div className="icon_image">
<img src="/assets/images/img-icon-2.png" className="img-fluid" alt="img" /> <img src="/assets/images/img-icon-2.png" className="img-fluid" alt="img" />
</div> </div>
@ -170,6 +191,7 @@ export default function Contact() {
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_bottom_90" /> <div className="pd_bottom_90" />
@ -179,7 +201,7 @@ export default function Contact() {
<section className="form-section"> <section className="form-section">
<div className="auto-container"> <div className="auto-container">
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-lg-6"> <div className="col-lg-6 order-2 order-lg-1 text-center">
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_top_50" /> <div className="pd_top_50" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
@ -200,7 +222,7 @@ export default function Contact() {
</div> </div>
</div> </div>
</div> </div>
<div className="col-lg-6 col-md-12"> <div className="col-lg-6 col-md-12 order-1 order-lg-2">
<div className="section_title type_one"> <div className="section_title type_one">
<h4 className="sm_title"> Amazing Company</h4> <h4 className="sm_title"> Amazing Company</h4>
<div className="title_whole"> <div className="title_whole">
@ -216,40 +238,40 @@ export default function Contact() {
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#">
Enter your pickup & drop-off details.</Link> Enter your pickup & drop-off details.
</div> </div>
</li> </li>
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#">
Get your instant price & van dimensions.</Link> Get your instant price & van dimensions.
</div> </div>
</li> </li>
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#">
Confirm your time slot.</Link> Confirm your time slot.
</div> </div>
</li> </li>
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <i aria-hidden="false" className="fas fa-check-circle" /></div>
<Link className="links" href="#">
Receive your booking confirmation by email.</Link> Receive your booking confirmation by email.
</div> </div>
</li> </li>
<li> <li>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div className="icon trans"> <div className="icon trans">
<i aria-hidden="false" className="fas fa-check-circle" /></div> <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> On moving day, we show up on time — you load, we drive, done!
</div> </div>
</li> </li>
</ul> </ul>
@ -257,7 +279,7 @@ export default function Contact() {
</div> </div>
</div> </div>
</div> </div>
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_bottom_90" /> <div className="pd_bottom_90" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
</section> </section>
@ -284,10 +306,11 @@ export default function Contact() {
</div> </div>
<div className="col-lg-2"> <div className="col-lg-2">
<div className="theme_btn_all text-md-center"> <div className="theme_btn_all text-md-center">
<Link href="#" className="theme_btn big color_white_two rotate"> <Link href="tel:+(647) 360-2075" className="theme_btn big color_white_two rotate">
Call us at (647)360-2507 <span> <i className="fi-rr-arrow-small-up" /></span> Call us at (647) 360-2075 <span> <i className="fi-rr-arrow-small-up" /></span>
</Link> </Link>
</div> </div>
</div> </div>
<div className="col-lg-2"> <div className="col-lg-2">
<div className="image-layer position-relative z_1"> <div className="image-layer position-relative z_1">

21
pages/contact.js
View File

@ -91,23 +91,24 @@ export default function Contact() {
<> <>
<Layout breadcrumbTitle="Contact" footerStyle={2}> <Layout breadcrumbTitle="Contact" footerStyle={2}>
<section className="contact-section"> <section className="contact-section">
<div className="pd_top_80" /> <div className="pd_top_90" />
<div className="container"> <div className="container">
<div className="row"> {/* Use g-4 to add spacing between all cards responsively */}
<div className="row align-items-stretch g-4">
<div className="col-lg-4 col-md-6 col-sm-12"> <div className="col-lg-4 col-md-6 col-sm-12">
<div className="contact_box_content"> <div className="contact_box_content h-100 d-flex flex-column justify-content-center">
<div className="icon trans"> <div className="icon trans">
<img src="/assets/images/cont-1.png" alt="img" className="img-fluid" /> <img src="/assets/images/cont-1.png" alt="img" className="img-fluid" />
</div> </div>
<div className="contact-infor"> <div className="contact-infor">
<h6 className="title_no_a_24"> Location</h6> <h6 className="title_no_a_24">Location</h6>
<span>55 Main Street, 2nd Block melbourne, Australia</span> <span>55 Main Street, 2nd Block melbourne, Australia</span>
</div> </div>
</div> </div>
<div className="pd_bottom_30" />
</div> </div>
<div className="col-lg-4 col-md-6 col-sm-12"> <div className="col-lg-4 col-md-6 col-sm-12">
<div className="contact_box_content"> <div className="contact_box_content h-100 d-flex flex-column justify-content-center">
<div className="icon trans"> <div className="icon trans">
<img src="/assets/images/cont-2.png" alt="img" className="img-fluid" /> <img src="/assets/images/cont-2.png" alt="img" className="img-fluid" />
</div> </div>
@ -116,10 +117,10 @@ export default function Contact() {
<Link href="mailto:info@zipvan.ca">info@zipvan.ca</Link> <Link href="mailto:info@zipvan.ca">info@zipvan.ca</Link>
</div> </div>
</div> </div>
<div className="pd_bottom_30" />
</div> </div>
<div className="col-lg-4 col-md-6 col-sm-12"> <div className="col-lg-4 col-md-6 col-sm-12">
<div className="contact_box_content"> <div className="contact_box_content h-100 d-flex flex-column justify-content-center">
<div className="icon trans"> <div className="icon trans">
<img src="/assets/images/cont-3.png" alt="img" className="img-fluid" /> <img src="/assets/images/cont-3.png" alt="img" className="img-fluid" />
</div> </div>
@ -128,11 +129,11 @@ export default function Contact() {
<Link href="tel:(647) 360-2075">(647) 360-2075</Link> <Link href="tel:(647) 360-2075">(647) 360-2075</Link>
</div> </div>
</div> </div>
<div className="pd_bottom_30" />
</div> </div>
</div> </div>
</div> </div>
<div className="pd_bottom_40" />
<div className="pd_bottom_90" />
</section> </section>
{/* form */} {/* form */}

186
pages/faqs.js
View File

@ -2,24 +2,14 @@ import Layout from "@/components/layout/Layout"
import Testimonial4 from "@/components/sections/Testimonial4" import Testimonial4 from "@/components/sections/Testimonial4"
import Link from "next/link" import Link from "next/link"
import { useState } from "react" import { useState } from "react"
export default function Faq() { export default function Faq() {
const [isActive, setIsActive] = useState({ const [activeKey, setActiveKey] = useState(null) // single state
status: false,
key: 1,
})
const handleToggle = (key) => { const handleToggle = (key) => {
if (isActive.key === key) { setActiveKey(activeKey === key ? null : key) // toggle only clicked FAQ
setIsActive({
status: false,
})
} else {
setIsActive({
status: true,
key,
})
}
} }
return ( return (
<> <>
<Layout breadcrumbTitle="FAQ" footerStyle={2}> <Layout breadcrumbTitle="FAQ" footerStyle={2}>
@ -47,71 +37,75 @@ export default function Faq() {
</Link> </Link>
</div> </div>
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_bottom_30" /> {/* <div className="pd_bottom_30" /> */}
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
</div> </div>
<div className="col-lg-7"> <div className="col-lg-7">
<section className="block_faq"> <section className="block_faq">
<div className="accordion-box"> <div className="accordion-box">
<div className={isActive.key == 1 ? "accordion active-block" : "accordion"}>
<div className={isActive.key == 1 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(1)}> {/* FAQ 1 */}
<div className={activeKey === 1 ? "accordion active-block" : "accordion"}>
<div className={activeKey === 1 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(1)}>
<div className="question_box "> <div className="question_box ">
<div className="title_no_a_18 trans"> What kind of moves do you do? <div className="title_no_a_18 trans"> What kind of moves do you do?</div>
</div>
<span className="icon_fq trans fi-rs-arrow-small-right" /> <span className="icon_fq trans fi-rs-arrow-small-right" />
</div> </div>
</div> </div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}> <div className="answer accordion-content" style={{ display: activeKey === 1 ? "block" : "none" }}>
We’re all about quick, simple, affordable moves. Think IKEA hauls, Facebook Marketplace treasures, new appliances, or that couch your friend finally gave you. If it fits in our van, we’ll move it. We’re all about quick, simple, affordable moves. Think IKEA hauls, Facebook Marketplace treasures, new appliances, or that couch your friend finally gave you. If it fits in our van, we’ll move it.
</div> </div>
</div> </div>
<div className={isActive.key == 2 ? "accordion active-block" : "accordion"}>
<div className={isActive.key == 2 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(2)}>
<div className="question_box ">
<div className="title_no_a_18 trans">Do I need to lift stuff, or do you do it all?
</div> {/* FAQ 2 */}
<div className={activeKey === 2 ? "accordion active-block" : "accordion"}>
<div className={activeKey === 2 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(2)}>
<div className="question_box ">
<div className="title_no_a_18 trans">Do I need to lift stuff, or do you do it all?</div>
<span className="icon_fq trans fi-rs-arrow-small-right" /> <span className="icon_fq trans fi-rs-arrow-small-right" />
</div> </div>
</div> </div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 2 ? "block" : "none"}` }}> <div className="answer accordion-content" style={{ display: activeKey === 2 ? "block" : "none" }}>
Our standard bookings come with just the driver. That means you (and maybe a buddy) should be ready to load your things. The driver will help, but they can’t move a fridge solo — they’re drivers, not superheroes. Our standard bookings come with just the driver. That means you (and maybe a buddy) should be ready to load your things. The driver will help, but they can’t move a fridge solo — they’re drivers, not superheroes.
Bonus: every van comes with a dolly + straps to keep your items safe. Bonus: every van comes with a dolly + straps to keep your items safe.
</div> </div>
</div> </div>
<div className={isActive.key == 3 ? "accordion active-block" : "accordion"}>
<div className={isActive.key == 3 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(3)}> {/* FAQ 3 */}
<div className={activeKey === 3 ? "accordion active-block" : "accordion"}>
<div className={activeKey === 3 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(3)}>
<div className="question_box"> <div className="question_box">
<div className="title_no_a_18 trans">Can I book extra help if I don’t want to lift <div className="title_no_a_18 trans">Can I book extra help if I don’t want to lift?</div>
?</div>
<span className="icon_fq trans fi-rs-arrow-small-right" /> <span className="icon_fq trans fi-rs-arrow-small-right" />
</div> </div>
</div> </div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 3 ? "block" : "none"}` }}> <div className="answer accordion-content" style={{ display: activeKey === 3 ? "block" : "none" }}>
Absolutely. If you need muscle power, just let us know in advance and we’ll arrange additional labor. You relax, we handle the heavy stuff. Absolutely. If you need muscle power, just let us know in advance and we’ll arrange additional labor. You relax, we handle the heavy stuff.
</div> </div>
</div> </div>
<div className={isActive.key == 4 ? "accordion active-block" : "accordion"}>
<div className={isActive.key == 4 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(4)}> {/* FAQ 4 */}
<div className={activeKey === 4 ? "accordion active-block" : "accordion"}>
<div className={activeKey === 4 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(4)}>
<div className="question_box "> <div className="question_box ">
<div className="title_no_a_18 trans"> How long do I get for loading/unloading? <div className="title_no_a_18 trans"> How long do I get for loading/unloading?</div>
</div>
<span className="icon_fq trans fi-rs-arrow-small-right" /> <span className="icon_fq trans fi-rs-arrow-small-right" />
</div> </div>
</div> </div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 4 ? "block" : "none"}` }}> <div className="answer accordion-content" style={{ display: activeKey === 4 ? "block" : "none" }}>
We allocate 20–30 minutes for loading and unloading. To keep things smooth, have your items ready at the door or curbside when we arrive. We allocate 20–30 minutes for loading and unloading. To keep things smooth, have your items ready at the door or curbside when we arrive.
</div> </div>
</div> </div>
<div className={isActive.key == 5 ? "accordion active-block" : "accordion"}>
<div className={isActive.key == 5 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(5)}> {/* FAQ 5 */}
<div className={activeKey === 5 ? "accordion active-block" : "accordion"}>
<div className={activeKey === 5 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(5)}>
<div className="question_box "> <div className="question_box ">
<div className="title_no_a_18 trans">What if I need to cancel?</div> <div className="title_no_a_18 trans">What if I need to cancel?</div>
<span className="icon_fq trans fi-rs-arrow-small-right" /> <span className="icon_fq trans fi-rs-arrow-small-right" />
</div> </div>
</div> </div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 5 ? "block" : "none"}` }}> <div className="answer accordion-content" style={{ display: activeKey === 5 ? "block" : "none" }}>
Life happens! That’s why reservations are refundable up to 24 hours before your appointment time. Stress-free, no penalties. Life happens! That’s why reservations are refundable up to 24 hours before your appointment time. Stress-free, no penalties.
</div> </div>
</div> </div>
@ -122,104 +116,87 @@ export default function Faq() {
</div> </div>
</div> </div>
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_bottom_40" /> <div className="pd_bottom_90" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
</section> </section>
{/*-faq end*/}
{/*-faqs*/} {/*-faqs section with images*/}
<section className="faq-section"> <section className="faq-section">
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_top_60" /> {/* <div className="pd_top_60" /> */}
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="container"> <div className="container">
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-lg-6 col-md-6 col-sm-12"> <div className="col-lg-6 col-md-12 col-sm-12">
<div className="block_faq"> <div className="block_faq">
<div className="accordion-box"> <div className="accordion-box">
<div className={isActive.key == 7 ? "accordion active-block" : "accordion"}>
<div className={isActive.key == 7 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(7)}> {/* FAQ 1 */}
<div className="question_box "> <div className={activeKey === 7 ? "accordion active-block" : "accordion"}>
<div className="title_no_a_18 trans"> Are you licensed and insured? <div className={activeKey === 7 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(7)}>
</div> <div className="question_box">
<div className="title_no_a_18 trans">Are you licensed and insured?</div>
<span className="icon_fq trans fi-rs-arrow-small-right" /> <span className="icon_fq trans fi-rs-arrow-small-right" />
</div> </div>
</div> </div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 7 ? "block" : "none"}` }}> <div className="answer accordion-content" style={{ display: activeKey === 7 ? "block" : "none" }}>
Yes — we’re fully licensed and insured. Unlike U-Haul, you don’t need to pay an extra $30/day for coverage. Your items are protected, and our vans are covered. Yes — we’re fully licensed and insured. Unlike U-Haul, you don’t need to pay an extra $30/day for coverage. Your items are protected, and our vans are covered.
</div> </div>
</div> </div>
<div className={isActive.key == 8 ? "accordion active-block" : "accordion"}>
<div className={isActive.key == 8 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(8)}> {/* FAQ 2 */}
<div className={activeKey === 8 ? "accordion active-block" : "accordion"}>
<div className={activeKey === 8 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(8)}>
<div className="question_box"> <div className="question_box">
<div className="title_no_a_18 trans">How much does it cost? <div className="title_no_a_18 trans">How much does it cost?</div>
</div>
<span className="icon_fq trans fi-rs-arrow-small-right" /> <span className="icon_fq trans fi-rs-arrow-small-right" />
</div> </div>
</div> </div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 8 ? "block" : "none"}` }}> <div className="answer accordion-content" style={{ display: activeKey === 8 ? "block" : "none" }}>
We believe in fair, upfront pricing. The price you see online is the price you pay (plus taxes where applicable). No hidden fees, no insurance add-ons, no mileage math. We believe in fair, upfront pricing. The price you see online is the price you pay (plus taxes where applicable). No hidden fees, no insurance add-ons, no mileage math.
</div> </div>
</div> </div>
<div className={isActive.key == 9 ? "accordion active-block" : "accordion"}>
<div className={isActive.key == 9 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(9)}> {/* FAQ 3 */}
<div className="question_box "> <div className={activeKey === 9 ? "accordion active-block" : "accordion"}>
<div className="title_no_a_18 trans"> <div className={activeKey === 9 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(9)}>
Do you do last-minute moves? <div className="question_box">
</div> <div className="title_no_a_18 trans">Do you do last-minute moves?</div>
<span className="icon_fq trans fi-rs-arrow-small-right" /> <span className="icon_fq trans fi-rs-arrow-small-right" />
</div> </div>
</div> </div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 9 ? "block" : "none"}` }}> <div className="answer accordion-content" style={{ display: activeKey === 9 ? "block" : "none" }}>
Yep! If a van is free, we can often swoop in same-day or next-day. Perfect for that Marketplace deal you just can’t pass up. Yep! If a van is free, we can often swoop in same-day or next-day. Perfect for that Marketplace deal you just can’t pass up.
</div> </div>
</div> </div>
<div className={isActive.key == 9 ? "accordion active-block" : "accordion"}> {/* FAQ 4 */}
<div <div className={activeKey === 10 ? "accordion active-block" : "accordion"}>
className={ <div className={activeKey === 10 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(10)}>
isActive.key == 9 ? "question faq_header active" : "question faq_header" <div className="question_box">
} <div className="title_no_a_18 trans">Why Zip Van instead of U-Haul or big movers?</div>
onClick={() => handleToggle(9)}
>
<div className="question_box ">
<div className="title_no_a_18 trans">
Why Zip Van instead of U-Haul or big movers?
</div>
<span className="icon_fq trans fi-rs-arrow-small-right" /> <span className="icon_fq trans fi-rs-arrow-small-right" />
</div> </div>
</div> </div>
<div <div className="answer accordion-content" style={{ display: activeKey === 10 ? "block" : "none" }}>
className="answer accordion-content"
style={{ display: `${isActive.key == 9 ? "block" : "none"}` }}
>
<span>Here’s the deal:</span> <span>Here’s the deal:</span>
<ul> <ul>
<li> <li>Unlike U-Haul, you don’t have to drive, pay extra insurance, or waste time picking up and returning a van. We come straight to you.</li>
Unlike U-Haul, you don’t have to drive, pay extra insurance, or waste <li>Unlike big moving companies, you don’t pay premium prices for small jobs. We’re fast, affordable, and designed for everyday moves.</li>
time picking up and returning a van. We come straight to you. <li>We’re the perfect middle ground — professional, flexible, and budget-friendly.</li>
</li>
<li>
Unlike big moving companies, you don’t pay premium prices for small
jobs. We’re fast, affordable, and designed for everyday moves.
</li>
<li>
We’re the perfect middle ground — professional, flexible, and
budget-friendly.
</li>
</ul> </ul>
</div> </div>
</div> </div>
<div className={isActive.key == 7 ? "accordion active-block" : "accordion"}> {/* FAQ 5 */}
<div className={isActive.key == 7 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(7)}> <div className={activeKey === 11 ? "accordion active-block" : "accordion"}>
<div className="question_box "> <div className={activeKey === 11 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(11)}>
<div className="title_no_a_18 trans">What areas do you serve? <div className="question_box">
</div> <div className="title_no_a_18 trans">What areas do you serve?</div>
<span className="icon_fq trans fi-rs-arrow-small-right" /> <span className="icon_fq trans fi-rs-arrow-small-right" />
</div> </div>
</div> </div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 7 ? "block" : "none"}` }}> <div className="answer accordion-content" style={{ display: activeKey === 11 ? "block" : "none" }}>
We currently serve [insert city/region here] and surrounding areas. Not sure if we reach you? Send us a quick message and we’ll confirm. We currently serve [insert city/region here] and surrounding areas. Not sure if we reach you? Send us a quick message and we’ll confirm.
</div> </div>
</div> </div>
@ -228,10 +205,10 @@ export default function Faq() {
</div> </div>
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_bottom_40" /> <div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div> </div>
<div className="col-lg-6 col-md-6 col-sm-12 pd_left_30">
<div className="image_box_only type_three"> <div className="col-lg-6 col-md-12 col-sm-12 pd_left_30">
<div className="image_box_only type_three">
<div className="left"> <div className="left">
<div className="image one"> <div className="image one">
<img src="/assets/images/about/about-2-1.jpg" alt="img" className="img-fluid" /> <img src="/assets/images/about/about-2-1.jpg" alt="img" className="img-fluid" />
@ -247,19 +224,16 @@ export default function Faq() {
</div> </div>
</div> </div>
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_bottom_40" /> {/* <div className="pd_bottom_40" /> */}
{/*-============spacing==========-*/}
</div> </div>
</div> </div>
</div> </div>
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_bottom_40" /> <div className="pd_bottom_90" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
</section> </section>
</Layout> </Layout>
</> </>
) )
} }

1
pages/index.js
View File

@ -29,7 +29,6 @@ export default function Home4() {
{/* <Content5 /> */} {/* <Content5 /> */}
<Process3 /> <Process3 />
<Offer1 /> <Offer1 />
<Location /> <Location />
{/* <Funfacts2 /> */} {/* <Funfacts2 /> */}
{/* <Form3 /> */} {/* <Form3 /> */}

29
public/assets/css/theme.css
View File

@ -40,7 +40,7 @@
--color-set-one-bor-3: #E7EBF0; --color-set-one-bor-3: #E7EBF0;
--color-set-one-bor-4: #DCE8F0; --color-set-one-bor-4: #DCE8F0;
--color-white: #faffff; --color-white: #faffff;
--heading-color-one: #1f1b1f; --heading-color-one: #1f1b1f;
--heading-color-two: #213438; --heading-color-two: #213438;
--heading-color-three: #1f1b1f; --heading-color-three: #1f1b1f;
--content-color-one: #696E77; --content-color-one: #696E77;
@ -3723,7 +3723,7 @@ body .slick-dots li {
} }
.section_title.type_four .sm_title { .section_title.type_four .sm_title {
color: var(--color-set-two-three-6); color: #ff6600;
} }
.section_title.type_four .title { .section_title.type_four .title {
@ -14609,11 +14609,11 @@ body .wp-block-rss li a {
line-height: 26px; line-height: 26px;
font-size: 16px; font-size: 16px;
padding: 8px 20px; padding: 8px 20px;
background: var(--color-set-one-1); background: #ff6600;
color: var(--color-white); color: var(--color-white);
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
border: 1px solid var(--color-set-one-1); /* border: 1px solid var(--color-set-one-1); */
transition: 0.5s ease-in-out; transition: 0.5s ease-in-out;
-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;
@ -17360,4 +17360,23 @@ input[type=range i]:focus::-webkit-slider-thumb {
color: var(--color-set-four-1); color: var(--color-set-four-1);
} }
/*# sourceMappingURL=theme.css.map */ /*# sourceMappingURL=theme.css.map */
@media (max-width: 1024px) {
.funfacts-row>div {
flex: 0 0 50%;
max-width: 50%;
}
}
@media (max-width: 425px) {
.funfacts-row>div {
flex: 0 0 100%;
max-width: 100%;
}
}
@media (max-width: 425px) {
.process_box.type_four .icon svg {
display: none;
}
}