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

Compare commits

base: MetatroncubeSoftwareSolutions:4723ae04cdbc9ce92236adf21b24f4ec29ccbe52
Branches Tags
MetatroncubeSoftwareSolutions:main
MetatroncubeSoftwareSolutions:team
...
compare: MetatroncubeSoftwareSolutions:e0a1eb1bf56c41520c0810ffe8a16766b8de6199
Branches Tags
MetatroncubeSoftwareSolutions:team
MetatroncubeSoftwareSolutions:main

37 Commits
4723ae04cd ... e0a1eb1bf5

Author SHA1 Message Date
akash
e0a1eb1bf5 Container width updated 2025-09-12 21:12:03 +05:30
selvi
9e46760945 image updated 2025-09-12 19:58:37 +05:30
selvi
aaee9cc460 corrections updated 2025-09-12 18:13:06 +05:30
vidhubk
a3873cc93b counter change 2025-09-11 18:23:07 +05:30
selvi
88b15d4df4 corrections updated 2025-09-11 17:51:50 +05:30
selvi
41ec9f91d1 corrections updated 2025-09-11 17:50:27 +05:30
vidhubk
dc516bc1f9 color- changes updated 2025-09-10 23:01:17 +05:30
vidhubk
5af7a81cb3 Merge branch 'team' of https://git.metatroncube.in/MetatroncubeSoftwareSolutions/zip-van into team 2025-09-10 22:30:49 +05:30
vidhubk
f0b3ee9389 preloaded updated 2025-09-10 22:30:34 +05:30
akash
91e2e97339 Banner map color old one updated 2025-09-10 21:42:06 +05:30
selvi
33ae4560cd images updated 2025-09-10 20:45:45 +05:30
selvi
9ce8197add images updated 2025-09-10 20:45:30 +05:30
vidhubk
7d7e060986 Merge branch 'team' of https://git.metatroncube.in/MetatroncubeSoftwareSolutions/zip-van into team 2025-09-10 20:25:40 +05:30
vidhubk
48d34819e1 about- color changed 2025-09-10 20:25:22 +05:30
selvi
fc585845d7 images updated 2025-09-10 20:24:20 +05:30
vidhubk
7684019326 Merge branch 'team' of https://git.metatroncube.in/MetatroncubeSoftwareSolutions/zip-van into team 2025-09-10 19:32:45 +05:30
vidhubk
04f4300f2b color-updated 2025-09-10 19:32:34 +05:30
selvi
538bdce926 location title updated 2025-09-10 19:03:05 +05:30
akash
bf4f26089a about and book now page correction updated 2025-09-10 17:39:33 +05:30
akash
ec3516be10 Favicon Updated 2025-09-10 11:51:43 +05:30
akash
d0b1f0b704 Faq, BookNow, Contact pages, images updated and heading and sub heading lenght aligned equaly 2025-09-10 11:27:10 +05:30
selvi
b77dad1ee2 images, title updated 2025-09-10 11:15:18 +05:30
vidhubk
9fe4e87d48 dynamic banner img format-updated 2025-09-09 16:45:48 +05:30
akash
260fab3178 Header link updated 2025-09-09 12:44:41 +05:30
akash
36a7c2ee4c Header link updated 2025-09-09 12:44:23 +05:30
selvi
a520d7a307 script component upadted 2025-09-08 18:22:45 +05:30
selvi
3b80b3a86c responsive checked 2025-09-06 15:53:48 +05:30
akash
c5112c95cd Contact, Book Now , Faq pages responsive and spacing updated build checked 2025-09-06 15:39:09 +05:30
selvi
c9dc989a86 corrections updated 2025-09-06 14:37:11 +05:30
selvi
6b25457517 corrections updated 2025-09-06 14:36:56 +05:30
akash
0b0429de10 Footer Updated & Contact form integration updated 2025-09-06 14:35:31 +05:30
vidhubk
2f799e045b logo update, header link color update 2025-09-06 00:23:53 +05:30
vidhubk
414e70f16a Header, home, trailing slash added 2025-09-05 22:59:34 +05:30
selvi
03774eb251 book now page created 2025-09-05 17:36:48 +05:30
selvi
4aec86074e about us page updated 2025-09-04 20:21:42 +05:30
akash
9fe0920596 Faq page content updated 2025-09-04 20:15:57 +05:30
akash
caebd72d2d Banner New sliding updated 2025-09-04 13:24:33 +05:30
102 changed files with 8054 additions and 2181 deletions
Show Stats Expand all files Collapse all files

7
components/layout/Breadcrumb.js
View File

@ -1,10 +1,11 @@
import Link from "next/link"
export default function Breadcrumb({breadcrumbTitle}) {
export default function Breadcrumb({breadcrumbTitle, background}) {
return (
<>
<section className="page_header_default pg_bg_cover alignment_center">
<div className="bakground_cover" style={{ backgroundImage: 'url(assets/images/page-image-1-min.jpg)' }} />
<div className="bakground_cover"
style={{ backgroundImage: `url(${background})` }} />
<div className="page_header_content">
<div className="container">
<div className="row">
@ -16,7 +17,7 @@ export default function Breadcrumb({breadcrumbTitle}) {
</div>
<div className="col-lg-12 vankine">
<ul className="breadcrumb m-auto">
<li><Link href="#">Home</Link> </li>
<li><Link href="/">Home</Link> </li>
<li className="active">{breadcrumbTitle}</li>
</ul>
</div>

4
components/layout/Layout.js
View File

@ -17,7 +17,7 @@ import Header3 from "./header/Header3"
import Header4 from "./header/Header4"
import Header5 from "./header/Header5"
import Header6 from "./header/Header6"
export default function Layout({ headerStyle, footerStyle, pageCls, breadcrumbTitle, children }) {
export default function Layout({ headerStyle, footerStyle, pageCls, breadcrumbTitle, background, children }) {
// Search
const [isSearch, setSearch] = useState(false)
const handleSearch = () => setSearch(!isSearch)
@ -57,7 +57,7 @@ export default function Layout({ headerStyle, footerStyle, pageCls, breadcrumbTi
<StickyHeader scroll={scroll} handleSearch={handleSearch} handleOptionalPanel={handleOptionalPanel} handleMobileMenu={handleMobileMenu} />
<div id="wrapper_full" className="content_all_warpper">
{breadcrumbTitle && <Breadcrumb breadcrumbTitle={breadcrumbTitle} />}
{breadcrumbTitle && <Breadcrumb breadcrumbTitle={breadcrumbTitle} background={background} />}
<div id="content" className="site-content">
{children}
</div>

16
components/layout/MobileMenu.js
View File

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

117
components/layout/NavbarNav.js
View File

@ -10,7 +10,7 @@ export default function NavbarNav() {
<Link href="/" className="nav_link">
<span className="text-link"> Home </span>
</Link>
<ul className="sub_menu">
{/* <ul className="sub_menu">
<li className="menu-item nav-item vankine_menu_image">
<Link href="/" className="nav_link image_big_on_menu_two">
<span className="img-link">
@ -60,54 +60,16 @@ export default function NavbarNav() {
</Link>
</li>
</ul>
<div className="dropdown-btn"><span className="fa fa-angle-down" /></div>
<div className="dropdown-btn"><span className="fa fa-angle-down" /></div> */}
</li>
<li className="menu-item menu-item-has-children dropdown mennucolumn_ nav-item">
<Link href="#" className="nav_link">
<li className="menu-item mennucolumn_ nav-item">
<Link href="/faqs" className="nav_link">
<span className="text-link">
Pages
FAQ
</span>
</Link>
<ul className="sub_menu">
<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’s
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/pricing" className="nav_link">
<span className="text-link">
Pricing
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/team" className="nav_link">
<span className="text-link">
Team
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/team-detail" className="nav_link">
<span className="text-link"> Team
Detail
</span>
</Link>
</li>
</ul>
<div className="dropdown-btn"><span className="fa fa-angle-down" /></div>
</li>
<li className="menu-item menu-item-has-children dropdown nav-item">
</li>
{/* <li className="menu-item menu-item-has-children dropdown nav-item">
<Link href="#" className="nav_link">
<span className="text-link">
Services
@ -165,8 +127,53 @@ export default function NavbarNav() {
</li>
</ul>
<div className="dropdown-btn"><span className="fa fa-angle-down" /></div>
</li> */}
<li className="menu-item mennucolumn_ nav-item">
<Link href="/about-us" className="nav_link">
<span className="text-link">
About Us
</span>
</Link>
{/* <ul className="sub_menu">
<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’s
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/pricing" className="nav_link">
<span className="text-link">
Pricing
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/team" className="nav_link">
<span className="text-link">
Team
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/team-detail" className="nav_link">
<span className="text-link"> Team
Detail
</span>
</Link>
</li>
</ul>
<div className="dropdown-btn"><span className="fa fa-angle-down" /></div> */}
</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">
<span className="text-link">
Portfolio
@ -196,8 +203,8 @@ export default function NavbarNav() {
</li>
</ul>
<div className="dropdown-btn"><span className="fa fa-angle-down" /></div>
</li>
<li className="menu-item menu-item-has-children dropdown mennucolumn_two nav-item">
</li> */}
{/* <li className="menu-item menu-item-has-children dropdown mennucolumn_two nav-item">
<Link href="/blog" className="nav_link">
<span className="text-link">
Blog
@ -263,8 +270,8 @@ export default function NavbarNav() {
</li>
</ul>
<div className="dropdown-btn"><span className="fa fa-angle-down" /></div>
</li>
<li className="menu-item menu-item-has-children dropdown mennucolumn_ nav-item">
</li> */}
{/* <li className="menu-item menu-item-has-children dropdown mennucolumn_ nav-item">
<Link href="/shop" className="nav_link">
<span className="text-link">
Shop
@ -308,7 +315,15 @@ export default function NavbarNav() {
</li>
</ul>
<div className="dropdown-btn"><span className="fa fa-angle-down" /></div>
</li>
</li> */}
{/* <li className="menu-item nav-item">
<Link href="/book-now" className="nav_link">
<span className="text-link">
Book Now
</span>
</Link>
</li> */}
<li className="menu-item nav-item">
<Link href="/contact" className="nav_link">
<span className="text-link">

2
components/layout/OptionalPanel.js
View File

@ -38,7 +38,7 @@ export default function OptionalPanel({ isOptionalPanel, handleOptionalPanel })
<div className="option_content scrollbarcolor ">
<div className="log_bx">
<Link href="#" className="logo navbar-brand">
<img src="/assets/images/theme-logo.png" alt="Vankine" className="logo_default" />
<img src="/assets/images/theme-logo.png" alt="Zip Van" className="logo_default" />
</Link>
<div className="about_company"> Denounce with righteous indignation and dislike men who are beguiled
and demoralized by the charms pleasure moment so blinded desire that they cannot foresee the

33
components/layout/Sidebar.js
View File

@ -26,7 +26,7 @@ export default function Sidebar() {
<Link href="/" className="nav_link">
<span className="text-link"> Home </span>
</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">
<Link href="/" className="nav_link image_big_on_menu_two">
<span className="img-link">
@ -75,10 +75,10 @@ export default function Sidebar() {
<span className="text-link"> Home 6 </span>
</Link>
</li>
</ul>
<div className="dropdown-btn" onClick={() => handleToggle(1)}><span className="fa fa-angle-down" /></div>
</ul> */}
{/* <div className="dropdown-btn" onClick={() => handleToggle(1)}><span className="fa fa-angle-down" /></div> */}
</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">
<span className="text-link">
Pages
@ -181,8 +181,8 @@ export default function Sidebar() {
</li>
</ul>
<div className="dropdown-btn" onClick={() => handleToggle(3)}><span className="fa fa-angle-down" /></div>
</li>
<li className="menu-item menu-item-has-children dropdown mennucolumn_ nav-item">
</li> */}
{/* <li className="menu-item menu-item-has-children dropdown mennucolumn_ nav-item">
<Link href="#" className="nav_link">
<span className="text-link">
Portfolio
@ -324,6 +324,27 @@ export default function Sidebar() {
</li>
</ul>
<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" className="nav_link">
<span className="text-link">
Book Now
</span>
</Link>
</li>
<li className="menu-item nav-item">
<Link href="/contact" className="nav_link">

14
components/layout/StickyHeader.js
View File

@ -12,16 +12,16 @@ export default function StickyHeader({ scroll, handleSearch, handleOptionalPanel
<div className="col-xl-2 col-lg-12 col-md-5 col-sm-5 col-xs-5">
<div className="logobox">
<Link href="/" className="logo navbar-brand">
<img src="/assets/images/theme-logo.png" alt="Vankine" className="logo_default" />
<img src="/assets/images/logo/logo.png" alt="Zip Van" className="logo_default" />
</Link>
</div>
</div>
<div className="col-xl-8 col-lg-9 col-md-0 col-sm-0 col-xs-0 column_menu">
<div className="navbar_content d-flex align-items-center">
<NavbarNav />
<div className="search search-toggler" onClick={handleSearch}>
{/* <div className="search search-toggler" onClick={handleSearch}>
<i className="fi-rs-search" />
</div>
</div> */}
</div>
</div>
<div className="col-xl-2 col-lg-3 col-md-7 col-sm-7 col-xs-7 nav_tog_column">
@ -34,19 +34,19 @@ export default function StickyHeader({ scroll, handleSearch, handleOptionalPanel
</div>
{/*menu icon*/}
<div className="button">
<Link href="#" className="theme_btn">
Get A Quote
<Link href="/book" className="theme_btn">
Book Now
<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" />
</svg>
</Link>
</div>
<div className="contact-toggler" onClick={handleOptionalPanel}>
{/* <div className="contact-toggler" onClick={handleOptionalPanel}>
<svg width={18} height={19} viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.75 3.25C0.75 2.65326 0.987053 2.08097 1.40901 1.65901C1.83097 1.23705 2.40326 1 3 1H5.25C5.84674 1 6.41903 1.23705 6.84099 1.65901C7.26295 2.08097 7.5 2.65326 7.5 3.25V5.5C7.5 6.09674 7.26295 6.66903 6.84099 7.09099C6.41903 7.51295 5.84674 7.75 5.25 7.75H3C2.40326 7.75 1.83097 7.51295 1.40901 7.09099C0.987053 6.66903 0.75 6.09674 0.75 5.5V3.25ZM0.75 13C0.75 12.4033 0.987053 11.831 1.40901 11.409C1.83097 10.9871 2.40326 10.75 3 10.75H5.25C5.84674 10.75 6.41903 10.9871 6.84099 11.409C7.26295 11.831 7.5 12.4033 7.5 13V15.25C7.5 15.8467 7.26295 16.419 6.84099 16.841C6.41903 17.2629 5.84674 17.5 5.25 17.5H3C2.40326 17.5 1.83097 17.2629 1.40901 16.841C0.987053 16.419 0.75 15.8467 0.75 15.25V13ZM10.5 3.25C10.5 2.65326 10.7371 2.08097 11.159 1.65901C11.581 1.23705 12.1533 1 12.75 1H15C15.5967 1 16.169 1.23705 16.591 1.65901C17.0129 2.08097 17.25 2.65326 17.25 3.25V5.5C17.25 6.09674 17.0129 6.66903 16.591 7.09099C16.169 7.51295 15.5967 7.75 15 7.75H12.75C12.1533 7.75 11.581 7.51295 11.159 7.09099C10.7371 6.66903 10.5 6.09674 10.5 5.5V3.25ZM10.5 13C10.5 12.4033 10.7371 11.831 11.159 11.409C11.581 10.9871 12.1533 10.75 12.75 10.75H15C15.5967 10.75 16.169 10.9871 16.591 11.409C17.0129 11.831 17.25 12.4033 17.25 13V15.25C17.25 15.8467 17.0129 16.419 16.591 16.841C16.169 17.2629 15.5967 17.5 15 17.5H12.75C12.1533 17.5 11.581 17.2629 11.159 16.841C10.7371 16.419 10.5 15.8467 10.5 15.25V13Z" stroke="#0F3567" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg>
</div>
</div> */}
</div>
</div>
</div>

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

@ -15,17 +15,16 @@ export default function Footer2({ }) {
<div className="row">
<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="logo_box">
<Link href="#" className="logo navbar-brand">
<img src="/assets/images/footer-logo-green.png" alt="Vankine" className="logo_default" />
</Link>
<div className="fwidget_title">
<h2 className="title color_white"> Move your stuff in a ZIP </h2>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_35" />
{/*-============spacing==========-*/}
<div className="position-relative color_white">
Sed ut perspiciatis omnis laudantium natus errors voluptatem accusantium
doloremque laudantium totam
<div className="logo_box">
<Link href="/" className="logo navbar-brand">
<img src="/assets/images/1.png" alt="Vankine" className="logo_default" />
</Link>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
@ -38,7 +37,7 @@ export default function Footer2({ }) {
</div>
<div className="social-icons">
<ul>
<li>
{/* <li>
<Link href="#" className="m_icon">
<i className="fab fa-facebook" />
</Link>
@ -52,9 +51,14 @@ export default function Footer2({ }) {
<Link href="#" className="m_icon">
<i className="fab fa-skype" />
</Link>
</li>
</li> */}
<li>
<Link href="#" className="m_icon">
<Link
href="https://www.instagram.com/zipvan.ca?igsh=aTRvdXhhOHk4cXM0"
className="m_icon"
target="_blank"
rel="noopener noreferrer"
>
<i className="fab fa-instagram" />
</Link>
</li>
@ -67,7 +71,7 @@ export default function Footer2({ }) {
<div className="col-lg-6">
<div className="footer_widgets_box pd_bottom_30">
<div className="fwidget_title">
<h2 className="title color_white"> Services </h2>
<h2 className="title color_white"> Areas we serve </h2>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
{/*-============spacing==========-*/}
@ -75,73 +79,34 @@ export default function Footer2({ }) {
<div className="position-relative">
<ul className="list_box list">
<li>
<div className="d-flex align-items-center">
<div className="d-flex align-items-center color_white">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
House Insurance
</Link>
{/* <Link className="links color_white" href="#"> */}
Greater Toronto Area
{/* </Link> */}
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="d-flex align-items-center color_white">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Medical Insurance
</Link>
{/* <Link className="links color_white" href="#"> */}
Greater Hamilton Area
{/* </Link> */}
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="d-flex align-items-center color_white">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Car Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Business Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Travel Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Fire Insurance
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Marrige Insurance
</Link>
{/* <Link className="links color_white" href="#"> */}
Kitchener-Waterloo-
Cambridge Area
{/* </Link> */}
</div>
</li>
</ul>
@ -163,61 +128,21 @@ export default function Footer2({ }) {
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
My Account
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Need A Career?
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
News &amp; Blog
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Payment Way
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
Team Member
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="#">
<Link className="links color_white" href="/about-us">
About Us
</Link>
</div>
</li>
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" />
</div>
<Link className="links color_white" href="/faqs">
FAQ
</Link>
</div>
</li>
</ul>
</div>
</div>
@ -234,7 +159,8 @@ export default function Footer2({ }) {
</div>
<div className="bottom_content">
<div className="color_white position_p_relative">
Sed ut perspiciatis unde omniste natus errors volupta accus
Drop your email to learn about our
new services and promotions
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_25" />
@ -253,11 +179,13 @@ export default function Footer2({ }) {
{/*-============spacing==========-*/}
</div>
<div className="d-flex align-items-center contact_header_one">
<div className="icon_s">
<i className=" fi-rr-headphones" /></div>
{/* <div className="icon_s">
<i className=" fi-rr-headphones" /></div> */}
<div className="content">
<h6 className="tite color_white">Need Help?</h6>
<div className="title_20"><Link href="tel:+000(123)45688" className="color_white">+000(123)456 88</Link>
<div className="title_20">
<Link href="mailto:info@zipvan.ca" className="color_white mb-2">info@zipvan.ca</Link>
<Link href="tel:(647) 360-2075" className="color_white">(647) 360-2075</Link>
</div>
</div>
</div>
@ -273,33 +201,34 @@ export default function Footer2({ }) {
<section className="mottom_content position-relative z_99">
<div className="auto-container">
<div className="row align-items-center">
<div className="col-lg-6 col-md-6 col-sm-12">
<div className="col-lg-7 col-md-6 col-sm-12">
<div className="position-relative">
<ul className="list_box linline">
<li>
<div className="d-flex align-items-center">
<div className="icon trans">
<div className="icon trans me-2">
<img src="/assets/images/shield.svg" className="img-fluid" alt="img" />
</div>
<Link className="links color_white" href="#">
Copyright {new Date().getFullYear()}, Vankine. All Rights Reserved
</Link>
<span className="links color_white mb-0">
Copyright 2025 © ZipVan. Powered by{" "}
<Link href="https://metatroncubesolutions.com/" target="_blank" className="bold">
MetatronCube
</Link>. All Rights Reserved.
</span>
</div>
</li>
</ul>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 text-md-end">
<div className="col-lg-5 col-md-6 col-sm-12 text-md-end">
<div className="position-relative">
<ul className="list_box color_one linline">
<li>
<div className="d-flex align-items-center">
<div className="d-flex align-items-center color_white">
<div className="icon trans">
<i className=" fi-rr-clock" />
</div>
<Link className="links color_white" href="#">
Working Hours : Sun-monday, 09am-5pm
</Link>
Working Hours : 24/7 365 Days a Year
</div>
</li>
</ul>
@ -308,9 +237,7 @@ export default function Footer2({ }) {
</div>
</div>
</section>
{/*-============spacing==========-*/}
<div className="pd_bottom_50" />
{/*-============spacing==========-*/}
<div className="patter_bottom">
<img src="/assets/images/shape/wave-pattern-1.png" className="img-fluid" alt="img" />
</div>

28
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">
<header className="header-area header-style-1 htype_one">
<div className="top_bar">
{/* <div className="top_bar">
<div className="large-container">
<div className="row align-items-center">
<div className="col-xl-2 col-lg-0 col-md-0 col-sm-0 col-xs-0">
@ -75,31 +75,23 @@ export default function Header1({ handleSearch, handleOptionalPanel, handleMobil
</div>
</div>
</div>
</div>
</div> */}
<div className="main_header_content default_header">
<div className="large-container">
<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="logo_box">
{/*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-one-1)">
</path>
</svg>
{/*logo-shape*/}
{/*logo*/}
<div className="logobox">
<Link href="/" className="logo navbar-brand">
<img src="/assets/images/logo-white.svg" alt="Vankine" className="logo_default" />
<img src="/assets/images/logo/logo.png" alt="Vankine" className="logo_default" />
</Link>
{/*logo*/}
</div>
</div>
<div className="col-xl-8 col-lg-9 col-md-0 col-sm-0 col-xs-0 column_menu">
<div className="navbar_content d-flex align-items-center">
<NavbarNav />
<div className="search search-toggler" onClick={handleSearch}>
{/* <div className="search search-toggler" onClick={handleSearch}>
<i className="fi-rs-search" />
</div>
</div> */}
</div>
</div>
<div className="col-xl-2 col-lg-3 col-md-7 col-sm-7 col-xs-7 nav_tog_column">
@ -112,19 +104,19 @@ export default function Header1({ handleSearch, handleOptionalPanel, handleMobil
</div>
{/*menu icon*/}
<div className="button">
<Link href="#" className="theme_btn">
Get A Quote
<Link href="/book" className="theme_btn">
Book Now
<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" />
</svg>
</Link>
</div>
<div className="contact-toggler" onClick={handleOptionalPanel}>
{/* <div className="contact-toggler" onClick={handleOptionalPanel}>
<svg width={18} height={19} viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.75 3.25C0.75 2.65326 0.987053 2.08097 1.40901 1.65901C1.83097 1.23705 2.40326 1 3 1H5.25C5.84674 1 6.41903 1.23705 6.84099 1.65901C7.26295 2.08097 7.5 2.65326 7.5 3.25V5.5C7.5 6.09674 7.26295 6.66903 6.84099 7.09099C6.41903 7.51295 5.84674 7.75 5.25 7.75H3C2.40326 7.75 1.83097 7.51295 1.40901 7.09099C0.987053 6.66903 0.75 6.09674 0.75 5.5V3.25ZM0.75 13C0.75 12.4033 0.987053 11.831 1.40901 11.409C1.83097 10.9871 2.40326 10.75 3 10.75H5.25C5.84674 10.75 6.41903 10.9871 6.84099 11.409C7.26295 11.831 7.5 12.4033 7.5 13V15.25C7.5 15.8467 7.26295 16.419 6.84099 16.841C6.41903 17.2629 5.84674 17.5 5.25 17.5H3C2.40326 17.5 1.83097 17.2629 1.40901 16.841C0.987053 16.419 0.75 15.8467 0.75 15.25V13ZM10.5 3.25C10.5 2.65326 10.7371 2.08097 11.159 1.65901C11.581 1.23705 12.1533 1 12.75 1H15C15.5967 1 16.169 1.23705 16.591 1.65901C17.0129 2.08097 17.25 2.65326 17.25 3.25V5.5C17.25 6.09674 17.0129 6.66903 16.591 7.09099C16.169 7.51295 15.5967 7.75 15 7.75H12.75C12.1533 7.75 11.581 7.51295 11.159 7.09099C10.7371 6.66903 10.5 6.09674 10.5 5.5V3.25ZM10.5 13C10.5 12.4033 10.7371 11.831 11.159 11.409C11.581 10.9871 12.1533 10.75 12.75 10.75H15C15.5967 10.75 16.169 10.9871 16.591 11.409C17.0129 11.831 17.25 12.4033 17.25 13V15.25C17.25 15.8467 17.0129 16.419 16.591 16.841C16.169 17.2629 15.5967 17.5 15 17.5H12.75C12.1533 17.5 11.581 17.2629 11.159 16.841C10.7371 16.419 10.5 15.8467 10.5 15.25V13Z" stroke="#0F3567" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg>
</div>
</div> */}
</div>
</div>
</div>

2
components/layout/header/Header2.js
View File

@ -105,7 +105,7 @@ export default function Header2({ handleSearch, handleOptionalPanel, handleMobil
<span className="line" />
</div>
<div className="button">
<Link href="#" className="theme_btn">
<Link href="/zipvan-quote" className="theme_btn">
Get A Quote
<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" />

14
components/layout/header/Header4.js
View File

@ -12,16 +12,16 @@ export default function Header4({ handleSearch, handleOptionalPanel, handleMobil
<div className="col-xl-2 col-lg-12 col-md-5 col-sm-5 col-xs-5">
<div className="logobox">
<Link href="/" className="logo navbar-brand">
<img src="/assets/images/Logo-green.png" alt="Vankine" className="logo_default" />
<img src="/assets/images/logo/logo.png" alt="Vankine" className="logo_default" />
</Link>
</div>
</div>
<div className="col-xl-8 col-lg-9 col-md-0 col-sm-0 col-xs-0 column_menu">
<div className="navbar_content d-flex align-items-center">
<NavbarNav />
<div className="search search-toggler" onClick={handleSearch}>
{/* <div className="search search-toggler" onClick={handleSearch}>
<i className="fi-rs-search" />
</div>
</div> */}
</div>
</div>
<div className="col-xl-2 col-lg-3 col-md-7 col-sm-7 col-xs-7 nav_tog_column">
@ -34,19 +34,19 @@ export default function Header4({ handleSearch, handleOptionalPanel, handleMobil
</div>
{/*menu icon*/}
<div className="button">
<Link href="#" className="theme_btn">
Get A Quote
<Link href="/book" className="theme_btn">
Book Now
<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" />
</svg>
</Link>
</div>
<div className="contact-toggler" onClick={handleOptionalPanel}>
{/* <div className="contact-toggler" onClick={handleOptionalPanel}>
<svg width={18} height={19} viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.75 3.25C0.75 2.65326 0.987053 2.08097 1.40901 1.65901C1.83097 1.23705 2.40326 1 3 1H5.25C5.84674 1 6.41903 1.23705 6.84099 1.65901C7.26295 2.08097 7.5 2.65326 7.5 3.25V5.5C7.5 6.09674 7.26295 6.66903 6.84099 7.09099C6.41903 7.51295 5.84674 7.75 5.25 7.75H3C2.40326 7.75 1.83097 7.51295 1.40901 7.09099C0.987053 6.66903 0.75 6.09674 0.75 5.5V3.25ZM0.75 13C0.75 12.4033 0.987053 11.831 1.40901 11.409C1.83097 10.9871 2.40326 10.75 3 10.75H5.25C5.84674 10.75 6.41903 10.9871 6.84099 11.409C7.26295 11.831 7.5 12.4033 7.5 13V15.25C7.5 15.8467 7.26295 16.419 6.84099 16.841C6.41903 17.2629 5.84674 17.5 5.25 17.5H3C2.40326 17.5 1.83097 17.2629 1.40901 16.841C0.987053 16.419 0.75 15.8467 0.75 15.25V13ZM10.5 3.25C10.5 2.65326 10.7371 2.08097 11.159 1.65901C11.581 1.23705 12.1533 1 12.75 1H15C15.5967 1 16.169 1.23705 16.591 1.65901C17.0129 2.08097 17.25 2.65326 17.25 3.25V5.5C17.25 6.09674 17.0129 6.66903 16.591 7.09099C16.169 7.51295 15.5967 7.75 15 7.75H12.75C12.1533 7.75 11.581 7.51295 11.159 7.09099C10.7371 6.66903 10.5 6.09674 10.5 5.5V3.25ZM10.5 13C10.5 12.4033 10.7371 11.831 11.159 11.409C11.581 10.9871 12.1533 10.75 12.75 10.75H15C15.5967 10.75 16.169 10.9871 16.591 11.409C17.0129 11.831 17.25 12.4033 17.25 13V15.25C17.25 15.8467 17.0129 16.419 16.591 16.841C16.169 17.2629 15.5967 17.5 15 17.5H12.75C12.1533 17.5 11.581 17.2629 11.159 16.841C10.7371 16.419 10.5 15.8467 10.5 15.25V13Z" stroke="#0F3567" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
</path>
</svg>
</div>
</div> */}
</div>
</div>
</div>

65
components/sections/Banner1-old.js Normal file
View File

@ -0,0 +1,65 @@
export default function Banner1() {
return (
<>
<section className="single_banner style_one">
<div className="image_bg">
<img src="/assets/images/slider/banner-single-4-bg.png" className="img-fluid" alt="img" />
</div>
<div className="content_box">
<div className="large-container">
<div className="row align-items-center">
<div className="col-lg-5">
<div className="section_title type_one">
<div className="title_whole">
<h2 className="title">
Need it Moved Today?
</h2>
<h2 className="title" style={{ color: "#ff6600" }}>
Done!
</h2>
</div>
<h3>
Same day pick & delivery across <br />southern Ontario!
</h3>
</div>
{/* <div className="newsteller_simple">
<div className="input_group">
<form method="post">
<input type="email" name="EMAIL" placeholder="Your email address" required />
<input type="submit" value="Sign up" />
</form>
</div>
</div> */}
{/* <div className="review_box d-flex align-items-center">
<div className="rimage">
<img src="/assets/images/slider/review-girls.png" className="img-fluid" alt="img" />
</div>
<div className="section_title type_one">
<div className="title_whole">
<h2 className="title"> Excellent 12,534+ reviews</h2>
</div>
<p>4.8 of 5 <small><i className="fa fa-star" /> <i className="fa fa-star" /> <i className="fa fa-star" /> <i className="fa fa-star" /> <i className="fa fa-star" /></small></p>
</div>
</div> */}
</div>
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="image">
<img src="/assets/images/slider/banner-single-4-1.jpg" className="img-fluid" alt="img" />
</div>
</div>
</div>
</div>
</div>
<div className="section_title abso type_one">
<div className="title_whole">
<h2 className="title">#ZIPVan</h2>
</div>
</div>
</section>
</>
)
}

200
components/sections/Banner1.js
View File

@ -1,65 +1,165 @@
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination } from "swiper";
import "swiper/css";
import "swiper/css/pagination";
export default function Banner1() {
return (
<>
<section className="single_banner style_one">
<div className="image_bg">
<img src="/assets/images/slider/banner-single-4-bg.png" className="img-fluid" alt="img" />
</div>
<div className="content_box">
<div className="large-container">
<div className="row align-items-center">
<div className="col-lg-5">
<div className="section_title type_one">
<div className="title_whole">
<h2 className="title">
Put your insurance
lead generation on
autopilot
</h2>
</div>
<p>
Sit amet consectetur volutpat luctus ultrices sagittis justo. Integer
nibh nisi adipiscingrna eleifend nunc consecteture
</p>
</div>
<div className="newsteller_simple">
<div className="input_group">
<form method="post">
<input type="email" name="EMAIL" placeholder="Your email address" required />
<input type="submit" value="Sign up" />
</form>
</div>
</div>
<div className="review_box d-flex align-items-center">
<div className="rimage">
<img src="/assets/images/slider/review-girls.png" className="img-fluid" alt="img" />
</div>
<Swiper
modules={[Autoplay, Pagination]}
slidesPerView={1}
spaceBetween={0}
loop={true}
autoplay={{
delay: 3000,
disableOnInteraction: false,
}}
pagination={{ clickable: true }}
className="banner-swiper"
>
{/* Banner 1 */}
<SwiperSlide>
<section className="single_banner style_one">
<div className="image_bg">
<img
src="/assets/images/home/banner/map-light-orange.webp"
className="img-fluid"
alt="img"
/>
</div>
<div className="content_box">
<div className="large-container">
<div className="row align-items-center">
<div className="col-lg-5">
<div className="section_title type_one">
<div className="title_whole">
<h2 className="title"> Excellent 12,534+ reviews</h2>
<h2 className="title">Need it Moved Today?</h2>
<h2
className="title"
style={{ color: "#ff6600" }}
>
Done!
</h2>
</div>
<p>4.8 of 5 <small><i className="fa fa-star" /> <i className="fa fa-star" /> <i className="fa fa-star" /> <i className="fa fa-star" /> <i className="fa fa-star" /></small></p>
<h3>
Same day pick & delivery across <br />southern Ontario!
</h3>
</div>
</div>
</div>
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="image">
<img src="/assets/images/slider/banner-single-4-1.jpg" className="img-fluid" alt="img" />
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="image">
<img
src="/assets/images/home/banner/home-banner-1.webp"
className="img-fluid"
alt="img"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="section_title abso type_one">
<div className="title_whole">
<h2 className="title"> INSURANCE</h2>
<div className="section_title abso type_one">
<div className="title_whole">
<h2 className="title">#ZIPVan</h2>
</div>
</div>
</div>
</section>
</section>
</SwiperSlide>
</>
)
{/* Banner 2 */}
<SwiperSlide>
<section className="single_banner style_one">
<div className="image_bg">
<img
src="/assets/images/home/banner/map-light-orange.webp"
className="img-fluid"
alt="img"
/>
</div>
<div className="content_box">
<div className="large-container">
<div className="row align-items-center">
<div className="col-lg-5">
<div className="section_title type_one">
<div className="title_whole">
<h2 className="title">Packing Worries?</h2>
<h2 className="title" style={{ color: "#ff6600" }}>
Gone!
</h2>
</div>
<h3>
Professional packing and careful handling <br />so your items arrive safe & sound.
</h3>
</div>
</div>
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="image">
<img
src="/assets/images/home/banner/home-banner-2.webp"
className="img-fluid"
alt="img"
/>
</div>
</div>
</div>
</div>
</div>
<div className="section_title abso type_one">
<div className="title_whole">
<h2 className="title">#ZIPVan</h2>
</div>
</div>
</section>
</SwiperSlide>
{/* Banner 3 */}
<SwiperSlide>
<section className="single_banner style_one">
<div className="image_bg">
<img
src="/assets/images/home/banner/map-light-orange.webp"
className="img-fluid"
alt="img"
/>
</div>
<div className="content_box">
<div className="large-container">
<div className="row align-items-center">
<div className="col-lg-5">
<div className="section_title type_one">
<div className="title_whole">
<h2 className="title">Worried About Cost?</h2>
<h2 className="title" style={{ color: "#ff6600" }}>
Don’t Be!
</h2>
</div>
<h3>
Transparent pricing, no hidden fees, <br />and flexible options for every move.
</h3>
</div>
</div>
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="image">
<img
src="/assets/images/home/banner/home-banner-3.webp"
className="img-fluid"
alt="img"
/>
</div>
</div>
</div>
</div>
</div>
<div className="section_title abso type_one">
<div className="title_whole">
<h2 className="title">#ZIPVan</h2>
</div>
</div>
</section>
</SwiperSlide>
</Swiper>
);
}

125
components/sections/Choose.js Normal file
View File

@ -0,0 +1,125 @@
"use client";
import React from "react";
export default function ReasonsToChoose() {
return (
<section
className="content-section bg_op_4 theme_alter-bg"
style={{ backgroundImage: "url(assets/images/wave-pat-1.png)" }}
>
<div className="pd_top_90" />
<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">
<div className="pd_bottom_60 d_md_none" />
<div className="section_title medium type_one">
{/* Removed "Special Deals" since you mentioned earlier */}
<div className="title_whole">
<h2 className="title text-white">Reasons to Choose Zip Van</h2>
</div>
</div>
<div className="pd_bottom_40" />
</div>
</div>
{/* Upfront Pricing */}
<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="Upfront Pricing"
/>
</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>
{/* Insurance Included */}
<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="Insurance Included"
/>
</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>
{/* Right-Sized Vans */}
<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="Right-Sized Vans"
/>
</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>
{/* We Drive For You */}
<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="We Drive For You"
/>
</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>
{/* Quick & Simple */}
<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="Quick & Simple"
/>
</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>
<div className="pd_bottom_90" />
</section>
);
}

4
components/sections/Funfacts2.js
View File

@ -34,10 +34,10 @@ export default function Funfacts2() {
<div className="fun_facts type_one color_three text-start">
<h4>
<CounterUp count={36} time={1} />
<CounterUp count={3} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Years Of Experience</h6>
<h6 className="title_no_a_18">Years of Experience</h6>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-6 w_50_after_max_768">

75
components/sections/Funfacts4.js
View File

@ -6,25 +6,30 @@ const CounterUp = dynamic(() => import('../elements/CounterUp'), {
export default function Funfacts4() {
return (
<>
<section className="fub-fact-section position-relative z_2 bg_op_1 overflow-hidden" style={{ backgroundImage: 'url(assets/images/page-image-1-min.jpg)' }}>
<section className="fub-fact-section position-relative z_2 bg_op_1 overflow-hidden">
{/* <section className="fub-fact-section position-relative z_2 bg_op_1 overflow-hidden" style={{ backgroundImage: 'url(assets/images/page-image-1-min.jpg)' }}> */}
{/*-============spacing==========-*/}
<div className="pd_top_60" />
{/*-============spacing==========-*/}
<div className="medium-container">
<div className="background_overlay z_0" />
<div className="row">
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="row funfacts-row">
<div className="col-lg-3 col-md-6 col-sm-12 col-xs-12">
<div className="fun_facts type_three">
<div className="icon trans">
<i className="color_white flaticon-satisfaction" />
<img
src="/assets/images/home/icons/customers-served.webp"
alt="Satisfaction Icon"
className="img-fluid"
/>
</div>
<div className="content">
<h4>
<CounterUp count={8563} time={1} color="color_white" />
<CounterUp count={1000} time={1} color="color_white" />
<small className="color_white"> + </small>
</h4>
<h6 className="title_no_a_18 color_white">Saticfied Custimer</h6>
<h6 className="title_no_a_18 color_white">Customers Served</h6>
</div>
</div>
{/*-============spacing==========-*/}
@ -34,15 +39,19 @@ export default function Funfacts4() {
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_three">
<div className="icon trans">
<i className="color_white flaticon-business-people" />
<img
src="/assets/images/home/icons/cities.webp"
alt="Satisfaction Icon"
className="img-fluid"
/>
</div>
<div className="content">
<h4>
<CounterUp count={263} time={1} color="color_white" />
<CounterUp count={10} time={1} color="color_white" />
<small className="color_white"> + </small>
</h4>
<h6 className="title_no_a_18 color_white">Experience Team</h6>
<h6 className="title_no_a_18 color_white">Cities</h6>
</div>
</div>
{/*-============spacing==========-*/}
@ -52,31 +61,39 @@ export default function Funfacts4() {
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_three">
<div className="icon trans">
<i className="color_white flaticon-reviews" />
<img
src="/assets/images/home/icons/vehicles.webp"
alt="Satisfaction Icon"
className="img-fluid"
/>
</div>
<div className="content">
<h4>
<CounterUp count={100} time={1} color="color_white" />
<small className="color_white"> % </small>
</h4>
<h6 className="title_no_a_18 color_white">Satisfaction Rate</h6>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_three">
<div className="icon trans">
<i className="color_white flaticon-trophy" />
</div>
<div className="content">
<h4>
<CounterUp count={15} time={1} color="color_white" />
<CounterUp count={4} time={1} color="color_white" />
<small className="color_white"> + </small>
</h4>
<h6 className="title_no_a_18 color_white">Awards Winning</h6>
<h6 className="title_no_a_18 color_white">Number of Vehicles</h6>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_three">
<div className="icon trans">
<img
src="/assets/images/home/icons/experience.webp"
alt="Satisfaction Icon"
className="img-fluid"
/>
</div>
<div className="content">
<h4>
<CounterUp count={3} time={1} color="color_white" />
<small className="color_white"> + </small>
</h4>
<h6 className="title_no_a_18 color_white">Years of Experience</h6>
</div>
</div>
{/*-============spacing==========-*/}

110
components/sections/Location.js Normal file
View File

@ -0,0 +1,110 @@
import Layout from "@/components/layout/Layout";
import Link from "next/link";
export default function Contact() {
return (
<>
<section className="contact-map-section">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center type_five">
<h4 className="sm_title">Areas We Serve</h4>
<div className="title_whole">
<h2 className="title">Serving Cities Across Southern Ontario</h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="row">
{/* Greater Toronto Area */}
<div className="col-lg-4 col-md-6 col-sm-12 mb-4">
<section className="map-section text-center">
<div className="map-outer">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d28910.8478211405!2d-79.4756152!3d43.653226!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b34d7c3a8f7a7%3A0x6e7dff2c5e2f7f11!2sToronto%2C%20ON%2C%20Canada!5e0!3m2!1sen!2sca!4v1678975266976!5m2!1sen!2sca"
height={300}
style={{ border: 0, width: "100%" }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
<h5 className="location-name mt-3">Greater Toronto Area</h5>
</section>
</div>
{/* Greater Hamilton Area */}
<div className="col-lg-4 col-md-6 col-sm-12 mb-4">
<section className="map-section text-center">
<div className="map-outer">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d28932.7767939088!2d-79.8916582!3d43.2557206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882c99a40aa9b15f%3A0xa13b3b3b3b3b3b3!2sHamilton%2C%20ON%2C%20Canada!5e0!3m2!1sen!2sca!4v1678975266977!5m2!1sen!2sca"
height={300}
style={{ border: 0, width: "100%" }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
<h5 className="location-name mt-3">Greater Hamilton Area</h5>
</section>
</div>
{/* Kitchener-Waterloo-Cambridge Area */}
<div className="col-lg-4 col-md-6 col-sm-12 mb-4">
<section className="map-section text-center">
<div className="map-outer">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d28940.53596836324!2d-80.4829871!3d43.4516395!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882bf3b3b3b3b3b3%3A0x3b3b3b3b3b3b3b3!2sKitchener%2C%20ON%2C%20Canada!5e0!3m2!1sen!2sca!4v1678975266978!5m2!1sen!2sca"
height={300}
style={{ border: 0, width: "100%" }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
<h5 className="location-name mt-3">Kitchener-Waterloo-Cambridge Area</h5>
</section>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_90" />
{/*-============spacing==========-*/}
</section>
<style jsx>{`
.location-name {
font-size: 18px;
font-weight: 600;
color: #222;
}
@media (max-width: 992px) {
.map-section iframe {
height: 250px;
}
}
@media (max-width: 576px) {
.map-section iframe {
height: 220px;
}
.location-name {
font-size: 16px;
}
}
`}</style>
</>
);
}

188
components/sections/Offer1 copy.js Normal file
View File

@ -0,0 +1,188 @@
import Link from "next/link"
import { Autoplay, Navigation, Pagination } from "swiper"
import { Swiper, SwiperSlide } from "swiper/react"
const swiperOptions = {
modules: [Autoplay, Pagination, Navigation],
slidesPerView: 3,
spaceBetween: 30,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
loop: true,
// Navigation
navigation: {
nextEl: '.h1n',
prevEl: '.h1p',
},
// Pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 30,
},
575: {
slidesPerView: 2,
spaceBetween: 30,
},
767: {
slidesPerView: 2,
spaceBetween: 30,
},
991: {
slidesPerView: 2,
spaceBetween: 30,
},
1199: {
slidesPerView: 3,
spaceBetween: 30,
},
1350: {
slidesPerView: 3,
spaceBetween: 30,
},
}
}
export default function Offer1() {
return (
<>
<section className="what-we-offer bg_light_2">
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-end">
<div className="col-lg-6 col-md-12">
<div className="section_title type_four">
<h4 className="sm_title"> What We Offer</h4>
<div className="title_whole">
<h2 className="title"> Key Features For your Insurance Business</h2>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
</div>
<div className="col-lg-6 col-md-12">
<div className="position-relative position_p_relative">
Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque
laudanti totam aperiam eaquecy epsa abillo inventore veritatis architecto beatae
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="service_post style_two position-relative position_one nav_false dot_false">
<Swiper {...swiperOptions} className="theme_carousel ">
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/service/other-ser-1.jpg" alt="service" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans">
<i className=" flaticon-business-trip trans" />
</div>
</div>
<div className="content">
<Link className="rd_more trans" href="/service">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white">
</path>
</svg>
</Link>
<div className="title_22">
<Link href="/service">
Corporate Professional Insurance Liability
</Link>
</div>
<p className="trans">
Sit amet consectetur adipiscing elites varius
montes, massa blandit orci.
</p>
</div>
</SwiperSlide>
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/service/other-ser-2.jpg" alt="service" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans">
<i className=" flaticon-salary trans" />
</div>
</div>
<div className="content">
<Link className="rd_more trans" href="/service">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white">
</path>
</svg>
</Link>
<div className="title_22">
<Link href="/service">
Easy System &amp; Trusted, Save your Money
</Link>
</div>
<p className="trans">
Sit amet consectetur adipiscing elites varius
montes, massa blandit orci.
</p>
</div>
</SwiperSlide>
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/service/other-ser-3.jpg" alt="service" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans">
<i className=" flaticon-management trans" />
</div>
</div>
<div className="content">
<Link className="rd_more trans" href="/service">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white">
</path>
</svg>
</Link>
<div className="title_22">
<Link href="/service">
Dedicated Customer Support Team Member
</Link>
</div>
<p className="trans">
Sit amet consectetur adipiscing elites varius
montes, massa blandit orci.
</p>
</div>
</SwiperSlide>
</Swiper>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
{/*-============spacing==========-*/}
</section>
</>
)
}

221
components/sections/Offer1.js
View File

@ -1,10 +1,13 @@
import Link from "next/link"
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, Pagination, Navigation],
slidesPerView: 3,
slidesPerView: 1,
spaceBetween: 30,
autoplay: {
delay: 2500,
@ -23,166 +26,76 @@ const swiperOptions = {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 30,
},
575: {
slidesPerView: 2,
spaceBetween: 30,
},
767: {
slidesPerView: 2,
spaceBetween: 30,
},
991: {
slidesPerView: 2,
spaceBetween: 30,
},
1199: {
slidesPerView: 3,
spaceBetween: 30,
},
1350: {
slidesPerView: 3,
spaceBetween: 30,
},
}
}
export default function Offer1() {
return (
<>
<section className="what-we-offer bg_light_2">
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-end">
<div className="col-lg-6 col-md-12">
<div className="section_title type_four">
<h4 className="sm_title"> What We Offer</h4>
<div className="title_whole">
<h2 className="title"> Key Features For your Insurance Business</h2>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
</div>
<div className="col-lg-6 col-md-12">
<div className="position-relative position_p_relative">
Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque
laudanti totam aperiam eaquecy epsa abillo inventore veritatis architecto beatae
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="service_post style_two position-relative position_one nav_false dot_false">
<Swiper {...swiperOptions} className="theme_carousel ">
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/service/other-ser-1.jpg" alt="service" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans">
<i className=" flaticon-business-trip trans" />
</div>
</div>
<div className="content">
<Link className="rd_more trans" href="/service">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white">
</path>
</svg>
</Link>
<div className="title_22">
<Link href="/service">
Corporate Professional Insurance Liability
</Link>
</div>
<p className="trans">
Sit amet consectetur adipiscing elites varius
montes, massa blandit orci.
</p>
</div>
</SwiperSlide>
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/service/other-ser-2.jpg" alt="service" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans">
<i className=" flaticon-salary trans" />
</div>
</div>
<div className="content">
<Link className="rd_more trans" href="/service">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white">
</path>
</svg>
</Link>
<div className="title_22">
<Link href="/service">
Easy System &amp; Trusted, Save your Money
</Link>
</div>
<p className="trans">
Sit amet consectetur adipiscing elites varius
montes, massa blandit orci.
</p>
</div>
</SwiperSlide>
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/service/other-ser-3.jpg" alt="service" className="img-fluid" />
<div className="oh ho_1" />
<div className="oh ho_2" />
<div className="oh ho_3" />
<div className="oh ho_4" />
<div className="icon trans">
<i className=" flaticon-management trans" />
</div>
</div>
<div className="content">
<Link className="rd_more trans" href="/service">
<svg width={21} height={21} viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.60161 0H19.6641C19.9128 0 20.1512 0.0987719 20.327 0.274587C20.5028 0.450403 20.6016 0.68886 20.6016 0.9375V15C20.6016 15.2486 20.5028 15.4871 20.327 15.6629C20.1512 15.8387 19.9128 15.9375 19.6641 15.9375C19.4155 15.9375 19.177 15.8387 19.0012 15.6629C18.8254 15.4871 18.7266 15.2486 18.7266 15V3.2L1.57661 20.35C1.3989 20.5156 1.16384 20.6058 0.920961 20.6015C0.678085 20.5972 0.446354 20.4988 0.274588 20.327C0.102821 20.1553 0.00443133 19.9235 0.000146059 19.6807C-0.00413921 19.4378 0.0860148 19.2027 0.251615 19.025L17.4016 1.875H5.60161C5.35297 1.875 5.11452 1.77623 4.9387 1.60041C4.76289 1.4246 4.66411 1.18614 4.66411 0.9375C4.66411 0.68886 4.76289 0.450403 4.9387 0.274587C5.11452 0.0987719 5.35297 0 5.60161 0Z" fill="white">
</path>
</svg>
</Link>
<div className="title_22">
<Link href="/service">
Dedicated Customer Support Team Member
</Link>
</div>
<p className="trans">
Sit amet consectetur adipiscing elites varius
montes, massa blandit orci.
</p>
</div>
</SwiperSlide>
</Swiper>
<section className="what-we-offer">
<div className="pd_top_90" />
<div className="container">
<div className="row align-items-end">
<div className="col-lg-12 col-md-12">
<div className="section_title type_four text-center">
<h4 className="sm_title">Smooth Journey</h4>
<div className="title_whole">
<h2 className="title">How It Works</h2>
<p>Booking with us is simple—just enter your pickup and drop-off details to get an instant price. We’ll handle the rest, from pickup to delivery, while you relax and track your move live.</p>
</div>
<div className="pd_bottom_40" />
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
{/*-============spacing==========-*/}
</section>
</>
<div className="row">
<div className="col-lg-12">
<div className="service_post style_two position-relative position_one nav_false dot_false">
<Swiper {...swiperOptions} className="theme_carousel">
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/process/step-1.webp" alt="service" className="img-fluid" />
</div>
<div className="content">
<div className="title_22">
<h4 className="text-white">Step 1: Don’t panic</h4>
</div>
<p className="trans">
Found a deal on IKEA, Facebook Marketplace, or Kijiji?
Skip the stress—we’ve got wheels.
</p>
</div>
</SwiperSlide>
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/process/step-2.webp" alt="service" className="img-fluid" />
</div>
<div className="content">
<div className="title_22">
<h4 className="text-white">Step 2: Go to zipvan.ca/book</h4>
</div>
<p className="trans">
Enter pickup & drop-off. See your instant, final price
and pick a time—no surprises.
</p>
</div>
</SwiperSlide>
<SwiperSlide className="process_box type_two hover_1_get color_two">
<div className="image_box hover_1">
<img src="/assets/images/process/step-3.webp" alt="service" className="img-fluid" />
</div>
<div className="content">
<div className="title_22">
<h4 className="text-white">Step 3: We handle it. You relax.</h4>
</div>
<p className="trans">
We coordinate pickup, load with blankets & straps,
deliver to your door. Track us live; pay on delivery.
</p>
</div>
</SwiperSlide>
</Swiper>
</div>
</div>
</div>
</div>
</section>
)
}

52
components/sections/Process3.js
View File

@ -6,15 +6,15 @@ export default function Process3() {
<>
<section className="process-section">
{/*-============spacing==========-*/}
<div className="pd_top_80" />
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center type_five">
<h4 className="sm_title"> Our performance</h4>
<h4 className="sm_title">Move Smarter, Stress Less</h4>
<div className="title_whole">
<h2 className="title"> How To Get Online Insurance Loan</h2>
<h2 className="title">Fast, Reliable & Hassle-Free Moves</h2>
</div>
</div>
</div>
@ -23,10 +23,10 @@ export default function Process3() {
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="process_box type_four color_two">
<div className="icon trans">
<img src="/assets/images/home-6-icon-1.png" className="img-fluid" alt="img" />
<img src="/assets/images/home/icons/step-1.webp" className="img-fluid" alt="img" />
<p className="step bg_2">1</p>
<svg width={123} height={16} viewBox="0 0 123 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M122.354 8.35355C122.549 8.15829 122.549 7.84171 122.354 7.64645L119.172 4.46447C118.976 4.2692 118.66 4.2692 118.464 4.46447C118.269 4.65973 118.269 4.97631 118.464 5.17157L121.293 8L118.464 10.8284C118.269 11.0237 118.269 11.3403 118.464 11.5355C118.66 11.7308 118.976 11.7308 119.172 11.5355L122.354 8.35355ZM0 8.5H3.05V7.5H0V8.5ZM9.15 8.5H15.25V7.5H9.15V8.5ZM21.35 8.5H27.45V7.5H21.35V8.5ZM33.55 8.5H39.65V7.5H33.55V8.5ZM45.75 8.5H51.85V7.5H45.75V8.5ZM57.95 8.5H64.05V7.5H57.95V8.5ZM70.15 8.5H76.25V7.5H70.15V8.5ZM82.35 8.5H88.45V7.5H82.35V8.5ZM94.55 8.5H100.65V7.5H94.55V8.5ZM106.75 8.5H112.85V7.5H106.75V8.5ZM118.95 8.5H122V7.5H118.95V8.5ZM122.707 8.70711C123.098 8.31658 123.098 7.68342 122.707 7.29289L116.343 0.928932C115.953 0.538408 115.319 0.538408 114.929 0.928932C114.538 1.31946 114.538 1.95262 114.929 2.34315L120.586 8L114.929 13.6569C114.538 14.0474 114.538 14.6805 114.929 15.0711C115.319 15.4616 115.953 15.4616 116.343 15.0711L122.707 8.70711ZM0 9H3.05V7H0V9ZM9.15 9H15.25V7H9.15V9ZM21.35 9H27.45V7H21.35V9ZM33.55 9H39.65V7H33.55V9ZM45.75 9H51.85V7H45.75V9ZM57.95 9H64.05V7H57.95V9ZM70.15 9H76.25V7H70.15V9ZM82.35 9H88.45V7H82.35V9ZM94.55 9H100.65V7H94.55V9ZM106.75 9H112.85V7H106.75V9ZM118.95 9H122V7H118.95V9Z" fill="#181818" />
@ -36,20 +36,16 @@ export default function Process3() {
<div className="con_top">
<div className="title_20">
<Link href="#">
Download and
complete your Data </Link></div>
<p>Sed ut persiciatis omnis
natus errorsit voluptatem
accusantium doloremue
laudantium totam rem</p>
Step 1: Don’t panic, we’ve got wheels </Link></div>
<p>Scored a deal on IKEA, Facebook Marketplace, or Kijiji? No need to stress about squeezing a sofa into your hatchback. Zip Van to the rescue.</p>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="process_box type_four color_two">
<div className="icon trans">
<img src="/assets/images/home-6-icon-2.png" className="img-fluid" alt="img" />
<img src="/assets/images/home/icons/step-2.webp" className="img-fluid" alt="img" />
<p className="step bg_15">2</p>
<svg width={123} height={16} viewBox="0 0 123 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M122.354 8.35355C122.549 8.15829 122.549 7.84171 122.354 7.64645L119.172 4.46447C118.976 4.2692 118.66 4.2692 118.464 4.46447C118.269 4.65973 118.269 4.97631 118.464 5.17157L121.293 8L118.464 10.8284C118.269 11.0237 118.269 11.3403 118.464 11.5355C118.66 11.7308 118.976 11.7308 119.172 11.5355L122.354 8.35355ZM0 8.5H3.05V7.5H0V8.5ZM9.15 8.5H15.25V7.5H9.15V8.5ZM21.35 8.5H27.45V7.5H21.35V8.5ZM33.55 8.5H39.65V7.5H33.55V8.5ZM45.75 8.5H51.85V7.5H45.75V8.5ZM57.95 8.5H64.05V7.5H57.95V8.5ZM70.15 8.5H76.25V7.5H70.15V8.5ZM82.35 8.5H88.45V7.5H82.35V8.5ZM94.55 8.5H100.65V7.5H94.55V8.5ZM106.75 8.5H112.85V7.5H106.75V8.5ZM118.95 8.5H122V7.5H118.95V8.5ZM122.707 8.70711C123.098 8.31658 123.098 7.68342 122.707 7.29289L116.343 0.928932C115.953 0.538408 115.319 0.538408 114.929 0.928932C114.538 1.31946 114.538 1.95262 114.929 2.34315L120.586 8L114.929 13.6569C114.538 14.0474 114.538 14.6805 114.929 15.0711C115.319 15.4616 115.953 15.4616 116.343 15.0711L122.707 8.70711ZM0 9H3.05V7H0V9ZM9.15 9H15.25V7H9.15V9ZM21.35 9H27.45V7H21.35V9ZM33.55 9H39.65V7H33.55V9ZM45.75 9H51.85V7H45.75V9ZM57.95 9H64.05V7H57.95V9ZM70.15 9H76.25V7H70.15V9ZM82.35 9H88.45V7H82.35V9ZM94.55 9H100.65V7H94.55V9ZM106.75 9H112.85V7H106.75V9ZM118.95 9H122V7H118.95V9Z" fill="#181818" />
@ -59,40 +55,32 @@ export default function Process3() {
<div className="con_top">
<div className="title_20">
<Link href="#">
Verification to get
a Credit limit </Link></div>
<p>Sed ut persiciatis omnis
natus errorsit voluptatem
accusantium doloremue
laudantium totam rem</p>
Step 2: Book in 60 seconds </Link></div>
<p>Head to zipvan.ca/book, drop in your pickup & drop-off details, and see your instant, final price (no hidden fees, no surprises). Pick your time and you’re locked in.</p>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="process_box type_four">
<div className="icon trans">
<img src="/assets/images/home-6-icon-3.png" className="img-fluid" alt="img" />
<img src="/assets/images/home/icons/step-3.webp" className="img-fluid" alt="img" />
<p className="step bg_14">3</p>
<svg width={123} height={16} viewBox="0 0 123 16" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* <svg width={123} height={16} viewBox="0 0 123 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M122.354 8.35355C122.549 8.15829 122.549 7.84171 122.354 7.64645L119.172 4.46447C118.976 4.2692 118.66 4.2692 118.464 4.46447C118.269 4.65973 118.269 4.97631 118.464 5.17157L121.293 8L118.464 10.8284C118.269 11.0237 118.269 11.3403 118.464 11.5355C118.66 11.7308 118.976 11.7308 119.172 11.5355L122.354 8.35355ZM0 8.5H3.05V7.5H0V8.5ZM9.15 8.5H15.25V7.5H9.15V8.5ZM21.35 8.5H27.45V7.5H21.35V8.5ZM33.55 8.5H39.65V7.5H33.55V8.5ZM45.75 8.5H51.85V7.5H45.75V8.5ZM57.95 8.5H64.05V7.5H57.95V8.5ZM70.15 8.5H76.25V7.5H70.15V8.5ZM82.35 8.5H88.45V7.5H82.35V8.5ZM94.55 8.5H100.65V7.5H94.55V8.5ZM106.75 8.5H112.85V7.5H106.75V8.5ZM118.95 8.5H122V7.5H118.95V8.5ZM122.707 8.70711C123.098 8.31658 123.098 7.68342 122.707 7.29289L116.343 0.928932C115.953 0.538408 115.319 0.538408 114.929 0.928932C114.538 1.31946 114.538 1.95262 114.929 2.34315L120.586 8L114.929 13.6569C114.538 14.0474 114.538 14.6805 114.929 15.0711C115.319 15.4616 115.953 15.4616 116.343 15.0711L122.707 8.70711ZM0 9H3.05V7H0V9ZM9.15 9H15.25V7H9.15V9ZM21.35 9H27.45V7H21.35V9ZM33.55 9H39.65V7H33.55V9ZM45.75 9H51.85V7H45.75V9ZM57.95 9H64.05V7H57.95V9ZM70.15 9H76.25V7H70.15V9ZM82.35 9H88.45V7H82.35V9ZM94.55 9H100.65V7H94.55V9ZM106.75 9H112.85V7H106.75V9ZM118.95 9H122V7H118.95V9Z" fill="#181818" />
</svg>
</svg> */}
</div>
<div className="content_no">
<div className="con_top">
<div className="title_20">
<Link href="#">
Select Truncations
and funding </Link></div>
<p>Sed ut persiciatis omnis
natus errorsit voluptatem
accusantium doloremue
laudantium totam rem</p>
Step 3: We drive, you chill </Link></div>
<p>On moving day, we roll up on time, load with straps & blankets, and handle the driving (because who really wants to wrestle a U-Haul van through traffic?). You track us live, we deliver to your door. Easy, done.</p>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
{/* <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="process_box type_four">
<div className="icon trans">
<img src="/assets/images/home-6-icon-4.png" className="img-fluid" alt="img" />
@ -110,11 +98,11 @@ export default function Process3() {
</div>
</div>
</div>
</div>
</div> */}
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
<div className="pd_bottom_90" />
{/*-============spacing==========-*/}
</section>

421
components/sections/ZipvanQuote.js Normal file
View File

@ -0,0 +1,421 @@
// src/components/ZipvanQuote.js
import React, { useEffect, useRef, useState } from "react";
export default function ZipvanQuote() {
const CONFIG = {
GOOGLE_MAPS_API_KEY:
process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY ||
"AIzaSyAxWCXjM3_iYRKdWPUceRo79DlvIU9xnZQ",
CALENDLY_EVENT_URL: "https://calendly.com/zipvan/new-meeting",
PUBLIC_RATES: { booking_flat: 25, km_rate_under_equal_15: 3, km_rate_over_15: 2 },
TAX_RATE: 0.13,
BOUNDS: { SW: { lat: 42.8, lng: -81.0 }, NE: { lat: 44.3, lng: -78.5 } },
};
const pickupRef = useRef(null);
const dropoffRef = useRef(null);
const mapRef = useRef(null);
const schedRef = useRef(null);
const mapObj = useRef(null);
const dirSvc = useRef(null);
const dirRenderer = useRef(null);
const geocoder = useRef(null);
const markerP = useRef(null);
const markerD = useRef(null);
const routeToken = useRef(0);
const [quote, setQuote] = useState({
km: 0,
min: 0,
subtotal: 0,
tax: 0,
grand: 0,
});
const [mapsReady, setMapsReady] = useState(false);
const [mapsError, setMapsError] = useState(null);
const money = (n) => "$" + Number(n).toFixed(2);
const q = (p) =>
Object.entries(p)
.filter(([, v]) => v !== "" && v != null)
.map(([k, v]) => encodeURIComponent(k) + "=" + encodeURIComponent(v))
.join("&");
const showMapStatus = (m) => {
const el = document.getElementById("mapStatus");
if (el) {
el.style.display = "block";
el.textContent = m;
}
};
const debounce = (fn, wait = 700) => {
let t;
return (...a) => {
clearTimeout(t);
t = setTimeout(() => fn(...a), wait);
};
};
function loadGoogleMaps() {
return new Promise((resolve, reject) => {
if (window.google && window.google.maps && window.google.maps.places) {
resolve(window.google);
return;
}
if (document.getElementById("zipvan-google-maps")) {
const existing = document.getElementById("zipvan-google-maps");
existing.addEventListener("load", () => {
if (window.google) resolve(window.google);
else reject(new Error("Google loaded but window.google missing"));
});
existing.addEventListener("error", () => reject(new Error("Google Maps script error")));
return;
}
const s = document.createElement("script");
s.id = "zipvan-google-maps";
s.src =
"https://maps.googleapis.com/maps/api/js?key=" +
encodeURIComponent(CONFIG.GOOGLE_MAPS_API_KEY) +
"&libraries=places&v=weekly";
s.async = true;
s.defer = true;
s.onload = () => {
if (window.google) resolve(window.google);
else reject(new Error("Google Maps loaded but window.google missing"));
};
s.onerror = () => reject(new Error("Google Maps failed to load (network or invalid key)"));
document.head.appendChild(s);
});
}
function calcAndSetTotals({ km, min }) {
const rate = km <= 15 ? CONFIG.PUBLIC_RATES.km_rate_under_equal_15 : CONFIG.PUBLIC_RATES.km_rate_over_15;
const distanceCost = km * rate;
const subtotal = CONFIG.PUBLIC_RATES.booking_flat + distanceCost;
const tax = +(subtotal * CONFIG.TAX_RATE).toFixed(2);
const grand = +(subtotal + tax).toFixed(2);
setQuote({
km: +km.toFixed(2),
min: Math.round(min),
subtotal: +subtotal.toFixed(2),
tax,
grand,
});
}
function openCalendly() {
const url =
CONFIG.CALENDLY_EVENT_URL +
"?" +
q({
hide_event_type_details: 1,
background_color: "ffffff",
text_color: "0a0a0a",
a1: pickupRef.current ? pickupRef.current.value : "",
a2: dropoffRef.current ? dropoffRef.current.value : "",
a3: quote.km ? quote.km.toFixed(1) + " km" : "",
a4: money(quote.subtotal),
a5: money(quote.grand),
_cb: Date.now(),
});
const holder = schedRef.current ?? document.getElementById("sched");
if (!holder) return;
const existing = document.getElementById("calendly-embed-iframe");
if (existing) existing.src = url;
else {
const ifr = document.createElement("iframe");
ifr.id = "calendly-embed-iframe";
ifr.src = url;
ifr.allow = "payment *; clipboard-write *";
ifr.style.width = "100%";
ifr.style.minHeight = "980px";
ifr.style.border = "0";
holder.appendChild(ifr);
}
holder.scrollIntoView({ behavior: "smooth" });
}
function initMap() {
if (!window.google) {
setMapsError("Google Maps not available.");
return;
}
if (!mapRef.current) {
setMapsError("Map container not found.");
return;
}
mapObj.current = new window.google.maps.Map(mapRef.current, {
center: { lat: 43.65, lng: -79.38 },
zoom: 10,
gestureHandling: "greedy",
});
dirSvc.current = new window.google.maps.DirectionsService();
dirRenderer.current = new window.google.maps.DirectionsRenderer({ suppressMarkers: true, preserveViewport: false });
geocoder.current = new window.google.maps.Geocoder();
dirRenderer.current.setMap(mapObj.current);
const biasBounds = new window.google.maps.LatLngBounds(CONFIG.BOUNDS.SW, CONFIG.BOUNDS.NE);
const acOpts = {
types: ["address"],
componentRestrictions: { country: "ca" },
bounds: biasBounds,
strictBounds: false,
fields: ["formatted_address", "geometry"],
};
if (pickupRef.current) {
const acP = new window.google.maps.places.Autocomplete(pickupRef.current, acOpts);
acP.addListener("place_changed", () => handlePlace(acP, "pickup"));
}
if (dropoffRef.current) {
const acD = new window.google.maps.places.Autocomplete(dropoffRef.current, acOpts);
acD.addListener("place_changed", () => handlePlace(acD, "dropoff"));
}
const onBlurPick = () => geocodeManual("pickup");
const onBlurDrop = () => geocodeManual("dropoff");
pickupRef.current && pickupRef.current.addEventListener("blur", onBlurPick);
dropoffRef.current && dropoffRef.current.addEventListener("blur", onBlurDrop);
const geocodeDebounced = debounce((which) => {
const el = which === "pickup" ? pickupRef.current : dropoffRef.current;
const val = el ? el.value.trim() : "";
if (!val) return;
geocoder.current.geocode({ address: val, componentRestrictions: { country: "CA" }, bounds: biasBounds }, (res, st) => {
if (st === "OK" && res && res[0]) {
dropMarker(which, res[0].geometry.location, res[0].formatted_address);
requestRoute();
}
});
}, 400);
function geocodeManual(which) {
geocodeDebounced(which);
}
function handlePlace(ac, which) {
const p = ac.getPlace();
if (!p || !p.geometry) {
geocodeManual(which);
return;
}
dropMarker(which, p.geometry.location, p.formatted_address || (which === "pickup" ? pickupRef.current.value : dropoffRef.current.value));
requestRoute();
}
function dropMarker(which, latlng, label) {
const L = which === "pickup" ? "P" : "D";
const opts = {
position: latlng,
map: mapObj.current,
label: { text: L, color: "#fff", fontWeight: "700" },
title: (which === "pickup" ? "Pick up" : "Drop off") + ": " + label,
};
if (which === "pickup") {
if (markerP.current) markerP.current.setMap(null);
markerP.current = new window.google.maps.Marker(opts);
} else {
if (markerD.current) markerD.current.setMap(null);
markerD.current = new window.google.maps.Marker(opts);
}
}
function requestRoute() {
if (!markerP.current || !markerD.current) return;
const my = ++routeToken.current;
dirSvc.current.route(
{
origin: markerP.current.getPosition(),
destination: markerD.current.getPosition(),
travelMode: window.google.maps.TravelMode.DRIVING,
},
(res, st) => {
if (my !== routeToken.current) return;
if (st === "OK" && res?.routes?.[0]?.legs?.[0]) {
dirRenderer.current.setDirections(res);
const leg = res.routes[0].legs[0];
const km = +(leg.distance.value / 1000).toFixed(2);
const mins = Math.round(leg.duration.value / 60);
const mapStatusEl = document.getElementById("mapStatus");
if (mapStatusEl) mapStatusEl.style.display = "none";
const b = new window.google.maps.LatLngBounds();
b.extend(markerP.current.getPosition());
b.extend(markerD.current.getPosition());
mapObj.current.fitBounds(b);
calcAndSetTotals({ km, min: mins });
} else {
showMapStatus("Couldn't compute the driving route. Check Ontario addresses.");
}
}
);
}
if (!document.getElementById("zipvan-calendly-script")) {
const cs = document.createElement("script");
cs.id = "zipvan-calendly-script";
cs.src = "https://assets.calendly.com/assets/external/widget.js";
cs.async = true;
document.head.appendChild(cs);
}
setMapsReady(true);
initMap._cleanup = () => {
pickupRef.current && pickupRef.current.removeEventListener("blur", onBlurPick);
dropoffRef.current && dropoffRef.current.removeEventListener("blur", onBlurDrop);
};
}
useEffect(() => {
let mounted = true;
if (!CONFIG.GOOGLE_MAPS_API_KEY) {
setMapsError("Google Maps API key missing. Put it into CONFIG or NEXT_PUBLIC_GOOGLE_MAPS_KEY.");
return;
}
loadGoogleMaps()
.then(() => {
if (!mounted) return;
initMap();
})
.catch((err) => {
console.error("Google Maps load failed:", err);
setMapsError("Google Maps failed to load. Check API key, billing and allowed referrers.");
showMapStatus("Google Maps failed to load. See console for details.");
});
return () => {
mounted = false;
try {
if (initMap._cleanup) initMap._cleanup();
if (markerP.current) markerP.current.setMap(null);
if (markerD.current) markerD.current.setMap(null);
if (dirRenderer.current) dirRenderer.current.setMap(null);
} catch (e) { }
};
}, []);
const canBook = Boolean(quote.km && quote.min);
return (
<div className="zip-wrap" style={{ maxWidth: 1100, margin: "0 auto" }}>
<div className="pd_top_90" />
<div className="section_title type_four text-center">
<h4 className="sm_title">Fast Checkout</h4>
<div className="title_whole">
<h2 className="title">See Your All-In Price in 10 Seconds</h2>
<p>Enter pickup & drop-off. Your price is locked—no fuel or weekend fees.</p>
</div>
<div className="pd_bottom_40" />
</div>
<style>{`
:root{
--zip-orange:#ff6500; --zip-black:#0a0a0a; --ink:#0f1720; --muted:#6b7280;
--surface:#ffffff; --border:#e6e8eb; --radius:16px;
}
.zip-wrap{max-width:1100px;margin:0 auto;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
box-shadow:0 10px 28px rgba(15,23,32,.07);overflow:hidden}
.card-head{padding:20px 22px;background:var(--zip-black);color:#fff;display:flex;justify-content:space-between;align-items:center}
.card-head h2{margin:0;font-size:22px}
.card-body{padding:22px}
.addr-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media(max-width:760px){ .addr-row{grid-template-columns:1fr} }
.input{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;
font-size:16px;background:#fff;color:var(--ink);min-height:46px;box-sizing:border-box}
.input:focus{outline:0;border-color:#cfd3d8;box-shadow:0 0 0 3px rgba(255,101,0,.12)}
.map{height:390px;border-radius:12px;overflow:hidden;border:1px solid var(--border);
background:#f6f7f8;display:flex;align-items:center;justify-content:center;margin-top:14px}
.map .err{color:var(--muted);font-size:14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.stat{border:1px solid var(--border);border-radius:12px;background:#fff;padding:12px 14px}
.stat label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.stat .value{font-size:16px;font-weight:750;color:var(--ink)}
.totalbar{display:flex;align-items:center;gap:18px;margin-top:16px}
.grand{margin-left:auto;font-size:22px;font-weight:850}
.breakdown{margin-top:12px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.brow{display:flex;justify-content:space-between;padding:10px 12px;font-size:14px;background:#fff}
.brow:nth-child(odd){background:#fbfbfc}
.brow .lbl{color:#6b7280}
.brow.total{font-weight:800;border-top:1px solid var(--border)}
.hint{font-size:12px;color:#6b7280;margin-top:8px}
.cta{display:flex;justify-content:flex-end;margin-top:16px}
.btn{appearance:none;border:0;background:var(--zip-orange);color:#fff;font-weight:850;letter-spacing:.2px;
padding:12px 18px;border-radius:999px;font-size:16px;cursor:pointer;transition:.15s transform,.2s opacity}
.btn[disabled]{background:#c9ccd1;cursor:not-allowed;opacity:.85}
.btn:active{transform:translateY(1px)}
#sched{margin-top:26px}
#calendly-embed-iframe{width:100%;min-height:980px;border:0}
`}</style>
<div className="card">
<div className="card-head">
<h2 className="text-white">Book a Pickup</h2>
<div style={{ opacity: ".9", fontSize: 13 }}>Transparent pricing — distance + booking</div>
</div>
<div className="card-body">
<div className="addr-row">
<input id="pickup" ref={pickupRef} className="input" type="text" placeholder="Pick up address (Canada)" aria-label="Pick up" autoComplete="off" />
<input id="dropoff" ref={dropoffRef} className="input" type="text" placeholder="Drop off address (Canada)" aria-label="Drop off" autoComplete="off" />
</div>
<div id="map" ref={mapRef} className="map">
<div className="err" id="mapStatus">Enter Pick up and Drop off to see your route, distance, and price.</div>
</div>
<div className="stats">
<div className="stat">
<label>Service</label>
<div className="value">Curbside</div>
</div>
<div className="stat">
<label>Crew</label>
<div className="value">1 mover</div>
</div>
<div className="stat">
<label>Distance & Time</label>
<div className="value">
<span id="distanceKm">{quote.km ? quote.km.toFixed(1) : "—"}</span> km • <span id="driveMin">{quote.min ? Math.round(quote.min) : "—"}</span> min
</div>
</div>
</div>
<div className="totalbar">
<div className="grand">Grand total: <span id="grandTotal">{quote.km ? money(quote.grand) : "—"}</span></div>
</div>
<div className="breakdown" id="breakdownBox" style={{ display: quote.km ? "block" : "none" }}>
<div className="brow"><div className="lbl">Booking fee</div><div id="bkFee">{money(CONFIG.PUBLIC_RATES.booking_flat)}</div></div>
<div className="brow"><div className="lbl">Distance (<span id="rateLabel">${quote.km && quote.km <= 15 ? CONFIG.PUBLIC_RATES.km_rate_under_equal_15 : CONFIG.PUBLIC_RATES.km_rate_over_15}</span>/km)</div><div id="distAmt">{quote.km ? money((quote.km) * (quote.km <= 15 ? CONFIG.PUBLIC_RATES.km_rate_under_equal_15 : CONFIG.PUBLIC_RATES.km_rate_over_15)) : money(0)}</div></div>
<div className="brow"><div className="lbl">Subtotal</div><div id="subAmt">{quote.km ? money(quote.subtotal) : money(0)}</div></div>
<div className="brow"><div className="lbl">HST (13%)</div><div id="taxAmt">{quote.km ? money(quote.tax) : money(0)}</div></div>
<div className="brow total"><div>Grand total</div><div id="grandAmt">{quote.km ? money(quote.grand) : money(0)}</div></div>
</div>
<div className="hint">Final price shown before you pay. Name, phone, and email are collected in the next step.</div>
<div className="cta">
<button id="bookNow" className="btn" disabled={!canBook} onClick={() => { if (canBook) openCalendly(); }}>
Continue to Scheduling
</button>
</div>
</div>
</div>
<div id="sched" ref={schedRef}></div>
{mapsError && (
<div style={{ marginTop: 12, padding: 12, background: "#fff6f6", color: "#b91c1c", borderRadius: 8 }}>
<strong>Map error:</strong> {mapsError}
</div>
)}
</div>
);
}

22
components/sections/pricing-tool.js Normal file
View File

@ -0,0 +1,22 @@
import Offer1 from "@/components/sections/Offer1"
import ZipvanQuote from "@/components/sections/ZipvanQuote"
export default function ZipvanSection() {
return (
<section>
<div className="container">
<div className="row align-items-center">
{/* Left Column */}
<div className="col-lg-6 col-md-12 mb-4 mb-lg-0">
<ZipvanQuote />
</div>
{/* Right Column */}
<div className="col-lg-6 col-md-12">
<Offer1 />
</div>
</div>
</div>
</section>
);
}

78
components/sections/slider.js Normal file
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.webp"
alt="Slide 1"
style={{
width: "100%",
height: "auto",
display: "block",
}}
/>
</SwiperSlide>
{/* Slide 2 */}
<SwiperSlide>
<img
src="assets/images/slider/2.webp"
alt="Slide 2"
style={{
width: "100%",
height: "auto",
display: "block",
}}
/>
</SwiperSlide>
{/* Slide 3 */}
<SwiperSlide>
<img
src="assets/images/slider/3.webp"
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>
);
}

5
next.config.js
View File

@ -1,6 +1,11 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
output: "export",
trailingSlash: true,
images: {
unoptimized: true,
},
}
module.exports = nextConfig

138
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "name",
"version": "2.1.0",
"dependencies": {
"axios": "^1.11.0",
"eslint": "8.40.0",
"eslint-config-next": "13.4.1",
"isotope-layout": "^3.0.6",
@ -15,6 +16,7 @@
"react": "18.2.0",
"react-countup": "^6.4.2",
"react-dom": "18.2.0",
"react-google-recaptcha": "^3.1.0",
"react-modal-video": "^2.0.0",
"react-scroll-trigger": "^0.6.14",
"react-slick": "^0.29.0",
@ -1360,6 +1362,12 @@
"node": ">= 0.4"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"license": "MIT"
},
"node_modules/available-typed-arrays": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@ -1384,6 +1392,17 @@
"node": ">=4"
}
},
"node_modules/axios": {
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
"integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==",
"license": "MIT",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.4",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/axobject-query": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@ -1575,6 +1594,18 @@
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"license": "MIT"
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"license": "MIT",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@ -1732,6 +1763,15 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"license": "MIT",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/desandro-matches-selector": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz",
@ -2547,6 +2587,26 @@
"integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
"license": "ISC"
},
"node_modules/follow-redirects": {
"version": "1.15.11",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
"integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"license": "MIT",
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/for-each": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@ -2562,6 +2622,22 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/form-data": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
"integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
"license": "MIT",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"es-set-tostringtag": "^2.1.0",
"hasown": "^2.0.2",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@ -2867,6 +2943,15 @@
"node": ">= 0.4"
}
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"license": "BSD-3-Clause",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/ignore": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@ -3579,6 +3664,27 @@
"node": ">=8.6"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"license": "MIT",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@ -4030,6 +4136,12 @@
"react-is": "^16.13.1"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
"license": "MIT"
},
"node_modules/punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@ -4071,6 +4183,19 @@
"node": ">=0.10.0"
}
},
"node_modules/react-async-script": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
"integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
"license": "MIT",
"dependencies": {
"hoist-non-react-statics": "^3.3.0",
"prop-types": "^15.5.0"
},
"peerDependencies": {
"react": ">=16.4.1"
}
},
"node_modules/react-countup": {
"version": "6.5.3",
"resolved": "https://registry.npmjs.org/react-countup/-/react-countup-6.5.3.tgz",
@ -4096,6 +4221,19 @@
"react": "^18.2.0"
}
},
"node_modules/react-google-recaptcha": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
"integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
"license": "MIT",
"dependencies": {
"prop-types": "^15.5.0",
"react-async-script": "^1.2.0"
},
"peerDependencies": {
"react": ">=16.4.1"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

4
package.json
View File

@ -10,6 +10,7 @@
"sass": "sass --watch public/assets/css/theme.scss:public/assets/css/theme.css"
},
"dependencies": {
"axios": "^1.11.0",
"eslint": "8.40.0",
"eslint-config-next": "13.4.1",
"isotope-layout": "^3.0.6",
@ -17,6 +18,7 @@
"react": "18.2.0",
"react-countup": "^6.4.2",
"react-dom": "18.2.0",
"react-google-recaptcha": "^3.1.0",
"react-modal-video": "^2.0.0",
"react-scroll-trigger": "^0.6.14",
"react-slick": "^0.29.0",
@ -31,4 +33,4 @@
"resolutions": {
"react-countup/countup.js": "2.5.0"
}
}
}

2
pages/_document.js
View File

@ -5,7 +5,7 @@ export default function Document() {
<Html lang="en">
<Head />
<link rel="shortcut icon" href="/assets/images/favicon.ico" />
<title>Vankine - Insurance & Consulting Business NextJS Template</title>
<title>Zip Van - Furniture Moving & Pickup</title>
<link rel="preconnect" href="https://fonts.bunny.net" />
<link href="https://fonts.bunny.net/css?family=dm-sans:400,400i,500,500i,700,700i" rel="stylesheet" />
<body className='theme-vankine scrollbarcolor'>

935
pages/about-us-2.js Normal file
View File

@ -0,0 +1,935 @@
import VideoBox from "@/components/elements/VideoBox"
import Layout from "@/components/layout/Layout"
import Testimonial4 from "@/components/sections/Testimonial4"
import dynamic from 'next/dynamic'
import Link from "next/link"
import { useState } from "react"
const CounterUp = dynamic(() => import('@/components/elements/CounterUp'), {
ssr: false,
})
export default function AboutUs() {
const [activeIndex, setActiveIndex] = useState(1)
const handleOnClick = (index) => {
setActiveIndex(index)
}
return (
<>
<Layout breadcrumbTitle="About Us">
{/*-about*/}
<section className="about-section position-relative">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="auto-container">
<div className="row align-items-start">
<div className="col-lg-6 col-md-12">
<div className="image_box_only type_seven">
<div className="icon_box_only type_four inline_box trans">
<div className="icon">
<img src="/assets/images/icon-image-1.png" alt="img" className="img-fluid" />
</div>
<div className="content">
<div className="title_18">
<Link href="#">
Life Insurance
</Link>
</div>
</div>
<Link className="link" href="#">
<svg width={30} height={32} viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={15} cy={17} r={15} fill="var(--color-set-two-three-6)">
</circle>
<g clipPath="url(#clip0_117_28461)">
<path d="M15.0757 24.3888C15.8841 25.207 17.6847 24.9358 17.8785 23.6492C19.0847 15.6614 25.1202 8.92269 29.6876 2.57279C30.954 0.813155 28.042 -0.858436 26.7921 0.88025C22.6184 6.68227 17.3578 12.7875 15.2998 19.828C12.948 17.4244 10.5867 15.0437 7.94892 12.9317C6.27842 11.5936 3.88886 13.951 5.57736 15.3031C9.01404 18.0559 11.984 21.2659 15.0757 24.3888Z" fill="var(--color-set-two-three-5)" />
</g>
<defs>
<clipPath id="clip0_117_28461">
<rect width={25} height={25} fill="white" transform="translate(5)" />
</clipPath>
</defs>
</svg>
</Link>
</div>
<div className="icon_box_only type_four position_two trans">
<div className="icon">
<img src="/assets/images/icon-image-2.png" alt="img" className="img-fluid" />
</div>
<div className="content">
<div className="title_18">
<Link href="#">
Health Insurance
</Link>
</div>
</div>
<Link className="link" href="#">
<svg width={30} height={32} viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx={15} cy={17} r={15} fill="var(--color-set-two-three-6)">
</circle>
<g clipPath="url(#clip0_117_2846)">
<path d="M15.0757 24.3888C15.8841 25.207 17.6847 24.9358 17.8785 23.6492C19.0847 15.6614 25.1202 8.92269 29.6876 2.57279C30.954 0.813155 28.042 -0.858436 26.7921 0.88025C22.6184 6.68227 17.3578 12.7875 15.2998 19.828C12.948 17.4244 10.5867 15.0437 7.94892 12.9317C6.27842 11.5936 3.88886 13.951 5.57736 15.3031C9.01404 18.0559 11.984 21.2659 15.0757 24.3888Z" fill="var(--color-set-two-three-5)" />
</g>
<defs>
<clipPath id="clip0_117_2846">
<rect width={25} height={25} fill="white" transform="translate(5)" />
</clipPath>
</defs>
</svg>
</Link>
</div>
<div className="fun_facts type_two">
<h4>
<CounterUp count={25} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_26">Years Of
Experience</h6>
</div>
<div className="m_image">
<img src="/assets/images/about/about-1-min.png" alt="img" className="img-fluid" />
</div>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 pd_left_30">
<div className="section_title type_one">
<h4 className="sm_title"> About Company</h4>
<div className="title_whole">
<h2 className="title"> We’re a Trusted and Professional Insurance Company </h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="mr_bottom_20" />
{/*-============spacing==========-*/}
<div className="fom_tab_box custom_tabs only_tab_content">
<ul className="nav nav-tabs links trans" role="tablist">
<li className="nav-item" onClick={() => handleOnClick(1)}>
<button className={activeIndex === 1 ? "nav-link active" : "nav-link"}>
About Us <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" />
</svg>
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(2)}>
<button className={activeIndex === 2 ? "nav-link active" : "nav-link"}>
Mission <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" />
</svg>
</button>
</li>
<li className="nav-item" onClick={() => handleOnClick(3)}>
<button className={activeIndex === 3 ? "nav-link active" : "nav-link"}>
Vision <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" />
</svg>
</button>
</li>
</ul>
<div className="s_tabs_content tab-content">
<div className={activeIndex === 1 ? "tab-pane active" : "tab-pane"}>
<div className="tab_content_box">
<div className="content">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam aperiam, eaquecy
epsa abillo inventore veritatis architecto beatae </div>
<div className="d-flex">
<ul>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Best Insurance Agency
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Trusted &amp; Experience
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Dedicated Support &amp; Security</span>
</li>
</ul>
<ul>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Board Composition</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Key Managerial Persons</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Board Committees</span>
</li>
</ul>
</div>
</div>
</div>
<div className={activeIndex === 2 ? "tab-pane active" : "tab-pane"}>
<div className="tab_content_box">
<div className="content">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam aperiam, eaquecy epsa
abillo inventore veritatis architecto beatae </div>
<div className="d-flex">
<ul>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Best Insurance Agency
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Trusted &amp; Experience Insurance
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Dedicated Support &amp; Security</span>
</li>
</ul>
<ul>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Best Insurance Agency
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Trusted &amp; Experience Insurance
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Dedicated Support &amp; Security</span>
</li>
</ul>
</div>
</div>
</div>
<div className={activeIndex === 3 ? "tab-pane active" : "tab-pane"}>
<div className="tab_content_box">
<div className="content">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam aperiam, eaquecy epsa
abillo inventore veritatis architecto beatae </div>
<div className="d-flex">
<ul>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Best Insurance Agency
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Trusted &amp; Experience Insurance
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Dedicated Support &amp; Security</span>
</li>
</ul>
<ul>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Best Insurance Agency
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Trusted &amp; Experience Insurance
</span>
</li>
<li>
<svg width={25} height={25} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#36DB9F">
</circle>
<g>
<path d="M11.8363 18.7066C12.2244 19.0994 13.0886 18.9692 13.1817 18.3516C13.7607 14.5175 16.6577 11.2829 18.85 8.23494C19.4579 7.39031 18.0602 6.58795 17.4602 7.42252C15.4568 10.2075 12.9317 13.138 11.9439 16.5174C10.815 15.3637 9.68161 14.221 8.41548 13.2072C7.61364 12.5649 6.46665 13.6965 7.27713 14.3455C8.92674 15.6668 10.3523 17.2076 11.8363 18.7066Z" fill="white" />
</g>
<defs>
<clipPath>
<rect width={12} height={12} fill="white" transform="translate(7 7)" />
</clipPath>
</defs>
</svg>
<span> Dedicated Support &amp; Security</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
<div className="theme_btn_all">
<Link href="#" className="theme_btn">
More About Us
<span> <i className=" fi-rr-arrow-small-up" /></span>
</Link>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_70" />
{/*-============spacing==========-*/}
</div>
</div>
</div>
<div className="ab_img_right_bottom z_minus_1">
<img src="/assets/images/bg-2.png" className="img-fluid" alt="img" />
</div>
</section>
{/*-about end*/}
{/*service*/}
<section className="service-section">
{/*-============spacing==========-*/}
<div className="pd_top_60" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center type_one">
<h4 className="sm_title"> Great Offer For Customer</h4>
<div className="title_whole">
<h2 className="title"> Amazing Features For Insurance</h2>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_top_40" />
{/*-============spacing==========-*/}
</div>
</div>
<div className="row">
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="icon_box_only border_color_1 bg_light_1 type_seven">
<div className="icon">
<i className=" flaticon-insurance-2" /></div>
<div className="title_24">
<Link href="#">
Insurance Services </Link></div>
<p>Sed ut perspiciatis unde omnis
natus errr voluptatem accusantium doloremue laudant totam</p>
<Link className="rd_more" href="#">
Read More<i className="icontb fi-rs-arrow-small-right" />
</Link>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="icon_box_only border_color_1 bg_light_1 type_seven">
<div className="icon">
<i className=" flaticon-insurance-2" /></div>
<div className="title_24">
<Link href="#">
Insurance Services </Link></div>
<p>Sed ut perspiciatis unde omnis
natus errr voluptatem accusantium doloremue laudant totam</p>
<Link className="rd_more" href="#">
Read More<i className="icontb fi-rs-arrow-small-right" />
</Link>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="icon_box_only border_color_1 bg_light_1 type_seven">
<div className="icon">
<i className=" flaticon-iteration" /></div>
<div className="title_24">
<Link href="#">
Easy &amp; Fast Process </Link></div>
<p>Sed ut perspiciatis unde omnis
natus errr voluptatem accusantium doloremue laudant totam</p>
<Link className="rd_more" href="#">
Read More<i className="icontb fi-rs-arrow-small-right" />
</Link>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_60" />
{/*-============spacing==========-*/}
</section>
{/*service*/}
{/*content*/}
<section className="content-section">
<div className="container">
<div className="row">
<div className="col-lg-6">
<div className="section_title type_one">
<h4 className="sm_title"> Why Choose Us</h4>
<div className="title_whole">
<h2 className="title"> We Help you to Build
for Better Future</h2>
</div>
<p> Sit amet consectetur adiscin varius montes massa
blandit orci. Sed egestas tellus est aliqueget tristique
nisley nullam pharetra tempor sed epsum</p>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="theme_btn_all">
<Link href="#" className="theme_btn">
Learn More <span><i className=" fi-rr-arrow-small-up" /></span>
</Link>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-6">
<div className="image_video_box_only type_one mr_bottom_minus_90 z_1">
<div className="image one height_530px">
<img src="/assets/images/why-choose-1.png" alt="img" className="img-fluid height_530px" />
<div className="video_box video-inner text-center">
<VideoBox />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/*content*/}
{/*funfacts*/}
<section className="analysis-section position-relative bg_1 overflow-hidden">
{/*-============spacing==========-*/}
<div className="pd_top_170" />
{/*-============spacing==========-*/}
<div className="ab_img_left_top z_0 mr_top_minus_150">
<img src="/assets/images/shape/wave-pattern-2.png" className="img-fluid" alt="img" />
</div>
<div className="medium-container-two">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center color_white type_one">
<h4 className="sm_title">Company Statistics Analysis</h4>
<div className="title_whole">
<h2 className="title">Great Achievement For Insurance</h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-1 col-md-6 col-sm-6 col-xs-12" />
<div className="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_one color_white">
<div className="icon trans">
<div className="icon_in trans">
<i className=" flaticon-satisfaction" /></div>
</div>
<h4>
<CounterUp count={8563} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Saticfied Custimer</h6>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_one color_white">
<div className="icon trans">
<div className="icon_in trans">
<i className=" flaticon-business-people" /></div>
</div>
<h4>
<CounterUp count={2630} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Experience Members</h6>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_one color_white">
<div className="icon trans">
<div className="icon_in trans">
<i className=" flaticon-reviews" /></div>
</div>
<h4>
<CounterUp count={100} time={1} />
<small>
% </small></h4>
<h6 className="title_no_a_18">Satisfaction Rate</h6>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_one color_white">
<div className="icon trans">
<div className="icon_in trans">
<i className=" flaticon-presenter" /></div>
</div>
<h4>
<CounterUp count={25} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Years Experience</h6>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<div className="fun_facts type_one color_white">
<div className="icon trans">
<div className="icon_in trans">
<i className=" flaticon-trophy" /></div>
</div>
<h4>
<CounterUp count={963} time={1} />
<small>
+ </small></h4>
<h6 className="title_no_a_18">Awards Winning</h6>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-1 col-md-6 col-sm-6 col-xs-12" />
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_50" />
{/*-============spacing==========-*/}
<div className="ab_img_right_bottom z_0 mr_bottom_minus_250">
<img src="/assets/images/shape/wave-pattern-1.png" className="img-fluid" alt="img" />
</div>
</section>
{/*funfacts*/}
{/*team*/}
<section className="team-section">
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="section_title text-center type_one">
<h4 className="sm_title"> Our Team Member</h4>
<div className="title_whole">
<h2 className="title"> Meet Our Amazing Team</h2>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="row">
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="team_box type_two">
<div className="team_box_inner">
<div className="contnet">
<h6 className="title_22">
<Link href="#">
Harry R. Blackston </Link></h6>
<p> Senior Manager</p>
</div>
<div className="image_box">
<img src="/assets/images/team/team-1-min.png" alt="img" className="img-fluid" />
<div className="social-icons trans">
<ul>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-facebook" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-twitter" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-skype" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-instagram" />
</Link></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="team_box type_two">
<div className="team_box_inner">
<div className="contnet">
<h6 className="title_22">
<Link href="#">
Guillermo V. Hanson </Link></h6>
<p> Business Consultant</p>
</div>
<div className="image_box">
<img src="/assets/images/team/team-2-min.png" alt="img" className="img-fluid" />
<div className="social-icons trans">
<ul>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-facebook" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-twitter" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-skype" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-instagram" />
</Link></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="team_box type_two">
<div className="team_box_inner">
<div className="contnet">
<h6 className="title_22">
<Link href="#">
Michael A. Yates </Link></h6>
<p> Junior Manager</p>
</div>
<div className="image_box">
<img src="/assets/images/team/team-3-min.png" alt="img" className="img-fluid" />
<div className="social-icons trans">
<ul>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-facebook" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-twitter" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-skype" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-instagram" />
</Link></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div className="team_box type_two">
<div className="team_box_inner">
<div className="contnet">
<h6 className="title_22">
<Link href="#">
Mark M. McClure </Link></h6>
<p> Sr Engineer</p>
</div>
<div className="image_box">
<img src="/assets/images/team/team-4-min.png" alt="img" className="img-fluid" />
<div className="social-icons trans">
<ul>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-facebook" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-twitter" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-skype" />
</Link></li>
<li>
<Link href="#" className="m_icon">
<i className="fab fa-instagram" />
</Link></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_80" />
{/*-============spacing==========-*/}
</section>
{/*team*/}
{/*client*/}
<section className="client-section bg_light_1">
{/*-============spacing==========-*/}
<div className="pd_top_40" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-center">
<div className="col-lg-4 col-md-12 pd_right_60">
<div className="section_title type_one small">
<h4 className="sm_title"> Popular Clients</h4>
<div className="title_whole">
<h2 className="title"> We’ve 1520+ Global
Premium Clients</h2>
</div>
</div>
</div>
<div className="col-lg-8 col-md-12">
<div className="row">
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-1.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-2.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-3.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-4.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-5.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div className="iamge mr_bottom_20 mr_top_20">
<img src="/assets/images/client-6.png" className="img-fluid m-auto" alt="client" />
</div>
</div>
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</section>
{/*client*/}
{/*testimonial*/}
<Testimonial4 />
{/*testimonial*/}
</Layout>
</>
)
}

972
pages/about-us.js
View File

File diff suppressed because it is too large Load Diff

4
pages/blog-details-left-sidebar.js
View File

@ -273,7 +273,7 @@ export default function BlogDetailsLeftSidebar() {
</div>
<div className="single_content_lower">
<div className="tags_and_cat yes_tags yes_share">
<div className="d-flex">
{/* <div className="d-flex">
<div className="left_one d-flex">
<div className="title">Tags</div>
<Link className="tags" href="/blog-details-left-sidebar"># Health</Link>
@ -285,7 +285,7 @@ export default function BlogDetailsLeftSidebar() {
<Link className="cats" href="/blog-details-left-sidebar"> Business Insurance</Link>
<Link className="cats" href="/blog-details-left-sidebar"> Life Insurance</Link>
</div>
</div>
</div> */}
</div>
<div className="social-icons single-share">
<h6> Share This :</h6>

4
pages/blog-details-right-sidebar.js
View File

@ -112,7 +112,7 @@ export default function BlogDetailsRightSidebar() {
</div>
<div className="single_content_lower">
<div className="tags_and_cat yes_tags yes_share">
<div className="d-flex">
{/* <div className="d-flex">
<div className="left_one d-flex">
<div className="title">Tags</div>
<Link className="tags" href="/blog-details-left-sidebar"># Health</Link>
@ -124,7 +124,7 @@ export default function BlogDetailsRightSidebar() {
<Link className="cats" href="/blog-details-left-sidebar"> Business Insurance</Link>
<Link className="cats" href="/blog-details-left-sidebar"> Life Insurance</Link>
</div>
</div>
</div> */}
</div>
<div className="social-icons single-share">
<h6> Share This :</h6>

4
pages/blog-details.js
View File

@ -142,7 +142,7 @@ export default function BlogDetails() {
</div>
<div className="single_content_lower">
<div className="tags_and_cat yes_tags yes_share">
<div className="d-flex">
{/* <div className="d-flex">
<div className="left_one d-flex">
<div className="title">Tags</div>
<Link className="tags" href="/blog-details-left-sidebar"># Health</Link>
@ -154,7 +154,7 @@ export default function BlogDetails() {
<Link className="cats" href="/blog-details-left-sidebar"> Business Insurance</Link>
<Link className="cats" href="/blog-details-left-sidebar"> Life Insurance</Link>
</div>
</div>
</div> */}
</div>
<div className="social-icons single-share">
<h6> Share This :</h6>

4
pages/blog/[id].js
View File

@ -162,7 +162,7 @@ const BlogDetails = () => {
</div>
<div className="single_content_lower">
<div className="tags_and_cat yes_tags yes_share">
<div className="d-flex">
{/* <div className="d-flex">
<div className="left_one d-flex">
<div className="title">Tags</div>
<Link className="tags" href="/blog-details-left-sidebar"># Health</Link>
@ -174,7 +174,7 @@ const BlogDetails = () => {
<Link className="cats" href="/blog-details-left-sidebar"> Business Insurance</Link>
<Link className="cats" href="/blog-details-left-sidebar"> Life Insurance</Link>
</div>
</div>
</div> */}
</div>
<div className="social-icons single-share">
<h6> Share This :</h6>

319
pages/book.js Normal file
View File

@ -0,0 +1,319 @@
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" 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>
</>
)
}

462
pages/contact.js
View File

@ -1,177 +1,293 @@
import Layout from "@/components/layout/Layout"
import Link from "next/link"
"use client";
import { useState, useEffect } from "react";
import ReCAPTCHA from "react-google-recaptcha";
import axios from "axios";
import Layout from "@/components/layout/Layout";
import Link from "next/link";
export default function Contact() {
const [formData, setFormData] = useState({
username: "",
email: "",
subject: "",
message: "",
});
return (
<>
<Layout breadcrumbTitle="Contact">
{/*-contact*/}
<section className="contact-section">
{/*-============spacing==========-*/}
<div className="pd_top_80" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-4 col-md-6 col-sm-12">
<div className="contact_box_content">
<div className="icon trans">
<img src="/assets/images/cont-1.png" alt="img" className="img-fluid" />
</div>
<div className="contact-infor">
<h6 className="title_no_a_24"> Location</h6>
<span>55 Main Street, 2nd Block
melbourne, Australia</span>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-4 col-md-6 col-sm-12">
<div className="contact_box_content">
<div className="icon trans">
<img src="/assets/images/cont-2.png" alt="img" className="img-fluid" />
</div>
<div className="contact-infor">
<h6 className="title_no_a_24">Email</h6>
<Link href="mailto:support@gmail.com">support@gmail.com
</Link>
<Link href="mailto:infoinsurace.com">infoinsurace.com</Link>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-4 col-md-6 col-sm-12">
<div className="contact_box_content">
<div className="icon trans">
<img src="/assets/images/cont-3.png" alt="img" className="img-fluid" />
</div>
<div className="contact-infor">
<h6 className="title_no_a_24">Call Us</h6>
<Link href="tel:+00012345688">+000 (123) 456 88
</Link>
<Link href="tel:+12345678">+12345 678</Link>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</section>
{/*-contact end*/}\
{/*map*/}
<section className="contact-map-section">
<div className="container-no">
<div className="row">
<div className="col-lg-12">
<section className="map-section">
{/*Map Outer*/}
<div className="map-outer">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2643.6895046810805!2d-122.52642526124438!3d38.00014098339506!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085976736097a2f%3A0xbe014d20e6e22654!2sSan%20Rafael%2C%20California%2C%20Hoa%20K%E1%BB%B3!5e0!3m2!1svi!2s!4v1678975266976!5m2!1svi!2s" height={570} style={{ border: 0, width: "100%" }} allowFullScreen loading="lazy" referrerPolicy="no-referrer-when-downgrade" />
</div>
</section>
</div>
</div>
</div>
</section>
{/*map*/}
{/*form*/}
<section className="form-section bg_light_1 position-relative">
{/*-============spacing==========-*/}
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row">
<div className="col-lg-4 col-md-12">
<div className="section_title type_one">
<h4 className="sm_title"> Get In Touch</h4>
<div className="title_whole">
<h2 className="title"> Need Any Help?
Or Looking For
an Agent</h2>
</div>
<p> On the other hand denounce righteousy indignation and dislike men</p>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="social-icons">
<ul>
<li><Link href="#" className="m_icon"> <i className="fab fa-facebook" />
</Link></li>
<li><Link href="#" className="m_icon"> <i className="fab fa-twitter" />
</Link></li>
<li><Link href="#" className="m_icon"> <i className="fab fa-skype" />
</Link></li>
<li><Link href="#" className="m_icon"> <i className="fab fa-instagram" />
</Link></li>
</ul>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="col-lg-8 col-md-12">
<section className="contact_form_box_all">
<div className="contact_form_shortcode">
<form id="contact-form" method="post" action="contact.php" role="form">
<div className="messages" />
<div className="controls">
<div className="row">
<div className="col-md-6 col-sm-12">
<div className="form-group">
<input type="text" name="name" placeholder="Your Name *" required="required" data-error="Enter Your Name" />
<div className="help-block with-errors" />
</div>
</div>
<div className="col-md-6 col-sm-12">
<div className="form-group">
<input type="text" name="email" required="required" placeholder="Email *" data-error="Enter Your Email Id" />
<div className="help-block with-errors" />
</div>
</div>
<div className="col-sm-12">
<div className="form-group">
<input type="text" name="subject" required="required" placeholder=" Subject (Optional)" />
</div>
</div>
<div className="col-sm-12">
<div className="form-group">
<textarea name="message" placeholder="Additional Information... (Optional) " rows={3} required="required" data-error="Please, leave us a message." />
<div className="help-block with-errors" />
</div>
</div>
<div className="col-sm-12">
<div className="form-group mg_top apbtn">
<button className="theme_btn" type="submit">Send Message</button>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
<div className="ab_img_left_bottom z_0 mr_top_minus_150">
<img src="/assets/images/bg-1.png" className="img-fluid" alt="img" />
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_90" />
{/*-============spacing==========-*/}
</section>
{/*form*/}
const [formErrors, setFormErrors] = useState({});
const [captchaToken, setCaptchaToken] = useState(null);
const [alert, setAlert] = useState({ show: false, type: "", message: "" });
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
};
const handleCaptchaChange = (token) => {
setCaptchaToken(token);
};
const handleSubmit = async (e) => {
e.preventDefault();
const errors = {};
if (!formData.username.trim()) errors.username = "Name is required.";
if (!formData.email.trim()) errors.email = "Email is required.";
if (!formData.subject.trim()) errors.subject = "Subject is required.";
if (!formData.message.trim()) errors.message = "Message is required.";
if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
setFormErrors(errors);
if (Object.keys(errors).length > 0) {
return;
}
const emailData = {
...formData,
message: `Subject: ${formData.subject}<br /><br />Message: ${formData.message}`,
to: "info@zipvan.ca",
senderName: "ZipVan Contact Page",
recaptchaToken: captchaToken,
};
try {
const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, {
headers: { "Content-Type": "application/json" },
});
</Layout>
</>
)
}
setAlert({
show: true,
type: "success",
message: res?.data?.message || "Message sent successfully!",
});
setFormData({ username: "", email: "", subject: "", message: "" });
setCaptchaToken(null);
setFormErrors({});
} catch (error) {
setAlert({
show: true,
type: "danger",
message: "Failed to send message. Please try again later.",
});
}
};
// Auto-hide alert
useEffect(() => {
if (alert.show) {
const timer = setTimeout(() => {
setAlert((prev) => ({ ...prev, show: false }));
}, 5000);
return () => clearTimeout(timer);
}
}, [alert.show]);
return (
<>
<Layout breadcrumbTitle="Contact" background="/assets/images/contact/contact-banner.webp" footerStyle={2}>
<section className="contact-section">
<div className="pd_top_90" />
<div className="container">
{/* 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="contact_box_content h-100 d-flex flex-column justify-content-center">
<div className="icon trans">
<img src="/assets/images/cont-1.png" alt="img" className="img-fluid" />
</div>
<div className="contact-infor">
<h6 className="title_no_a_24">Location</h6>
<span>Southern Ontario, Canada</span>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-12">
<div className="contact_box_content h-100 d-flex flex-column justify-content-center">
<div className="icon trans">
<img src="/assets/images/cont-2.png" alt="img" className="img-fluid" />
</div>
<div className="contact-infor">
<h6 className="title_no_a_24">Email</h6>
<Link href="mailto:info@zipvan.ca">info@zipvan.ca</Link>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 col-sm-12">
<div className="contact_box_content h-100 d-flex flex-column justify-content-center">
<div className="icon trans">
<img src="/assets/images/cont-3.png" alt="img" className="img-fluid" />
</div>
<div className="contact-infor">
<h6 className="title_no_a_24">Call Us</h6>
<Link href="tel:(647) 360-2075">(647) 360-2075</Link>
</div>
</div>
</div>
</div>
</div>
<div className="pd_bottom_90" />
</section>
{/* form */}
<section className="form-section bg_light_1 position-relative">
<div className="pd_top_90" />
<div className="container">
<div className="row">
<div className="col-lg-4 col-md-12">
<div className="section_title type_one">
<h4 className="sm_title"> Get In Touch</h4>
<div className="title_whole">
<h2 className="title"> Contact Zip Van We’re Here to Help</h2>
</div>
<p>
Get in touch with us for bookings, pricing, or any questions. We’re here to help you move with ease.
</p>
</div>
<div className="pd_bottom_40" />
<div className="social-icons">
<ul>
<li>
<Link
href="https://www.instagram.com/zipvan.ca?igsh=aTRvdXhhOHk4cXM0"
className="m_icon"
target="_blank"
rel="noopener noreferrer"
>
<i className="fab fa-instagram" />
</Link>
</li>
</ul>
</div>
<div className="pd_bottom_20" />
</div>
<div className="col-lg-8 col-md-12">
<section className="contact_form_box_all">
<div className="contact_form_shortcode">
{alert.show && (
<div className={`alert alert-${alert.type}`}>{alert.message}</div>
)}
<form onSubmit={handleSubmit} role="form">
<div className="controls">
<div className="row">
<div className="col-md-6 col-sm-12">
<div className="form-group">
<input
type="text"
name="username"
placeholder="Your Name *"
value={formData.username}
onChange={handleChange}
/>
{formErrors.username && (
<small className="text-danger">{formErrors.username}</small>
)}
</div>
</div>
<div className="col-md-6 col-sm-12">
<div className="form-group">
<input
type="email"
name="email"
placeholder="Email *"
value={formData.email}
onChange={handleChange}
/>
{formErrors.email && (
<small className="text-danger">{formErrors.email}</small>
)}
</div>
</div>
<div className="col-sm-12">
<div className="form-group">
<input
type="text"
name="subject"
placeholder="Subject *"
value={formData.subject}
onChange={handleChange}
/>
{formErrors.subject && (
<small className="text-danger">{formErrors.subject}</small>
)}
</div>
</div>
<div className="col-sm-12">
<div className="form-group">
<textarea
name="message"
placeholder="Additional Information..."
rows={3}
value={formData.message}
onChange={handleChange}
/>
{formErrors.message && (
<small className="text-danger">{formErrors.message}</small>
)}
</div>
</div>
<div className="col-sm-12 mb-3">
<ReCAPTCHA
sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
onChange={handleCaptchaChange}
/>
{formErrors.captcha && (
<small className="text-danger">{formErrors.captcha}</small>
)}
</div>
<div className="col-sm-12">
<div className="form-group mg_top apbtn">
<button className="theme_btn" type="submit">
Send Message
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
{/* <div className="ab_img_left_bottom z_0 mr_top_minus_150">
<img src="/assets/images/bg-1.png" className="img-fluid" alt="img" />
</div> */}
<div className="pd_bottom_90" />
</section>
<section className="contact-map-section">
<div className="container-no">
<div className="row">
<div className="col-lg-12">
<section className="map-section">
<div className="map-outer">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d463241.8464937742!2d-79.3832!3d43.6532!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b34d64d54a7ab%3A0x6d5f8f8d3df7a25f!2sToronto%2C%20ON!5e0!3m2!1sen!2sca!4v1694170812345!5m2!1sen!2sca"
height={570}
style={{ border: 0, width: "100%" }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
</section>
</div>
</div>
</div>
</section>
</Layout>
</>
);
}

275
pages/faqs.js
View File

@ -2,27 +2,17 @@ import Layout from "@/components/layout/Layout"
import Testimonial4 from "@/components/sections/Testimonial4"
import Link from "next/link"
import { useState } from "react"
export default function Faq() {
const [isActive, setIsActive] = useState({
status: false,
key: 1,
})
const [activeKey, setActiveKey] = useState(null)
const handleToggle = (key) => {
if (isActive.key === key) {
setIsActive({
status: false,
})
} else {
setIsActive({
status: true,
key,
})
}
setActiveKey(activeKey === key ? null : key)
}
return (
<>
<Layout breadcrumbTitle="Faq's">
<Layout breadcrumbTitle="FAQ" footerStyle={2} background={"/assets/images/faq/faq-banner.webp"}>
{/*-faq*/}
<section className="faq-section">
{/*-============spacing==========-*/}
@ -32,239 +22,220 @@ export default function Faq() {
<div className="row">
<div className="col-lg-5">
<div className="section_title type_one">
<h4 className="sm_title"> Faqs</h4>
<h4 className="sm_title"> Faq's</h4>
<div className="title_whole">
<h2 className="title"> Frequently Asked
Questions!</h2>
<h2 className="title">Moving Services FAQs</h2>
</div>
<p> Sed ut perspiciatis unde natus voluptatem accusantium doloremque laudantium
aperiam
inventore veritatis architecto beatae</p>
<p> Have questions about our moving services? We’ve put together a list of the most common questions our customers ask about bookings, costs, last-minute moves, and more. Whether you’re planning a small apartment move or need quick help transporting items, this FAQ will give you clear answers before you book.</p>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
<div className="theme_btn_all">
<Link href="#" className="theme_btn big rotate">
<Link href="/contact" className="theme_btn big rotate">
Contact Us <span> <i className=" fi-rr-arrow-small-up" /></span>
</Link>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/* <div className="pd_bottom_30" /> */}
{/*-============spacing==========-*/}
</div>
<div className="col-lg-7">
<section className="block_faq">
<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="title_no_a_18 trans">What Is Insurance Services?
</div>
<div className="title_no_a_18 trans"> What kind of moves do you do?</div>
<span className="icon_fq trans fi-rs-arrow-small-right" />
</div>
</div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
Serenity Is Multi-Faceted Blockchain Based Ecosystem, Energy
Retailer
For The People, Focusing On The Promotion Of Sustainable Living,
Renewable Energy Production And Smart Energy Grid Utility Services.
<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.
</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)}>
{/* 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">How Many Service We Provide ?
</div>
<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" />
</div>
</div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 2 ? "block" : "none"}` }}>
Quis autem vel eum iure reprehenderit ea voluptate esse molestiae
consequatur veillum voluptas nullaes
<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.
Bonus: every van comes with a dolly + straps to keep your items safe.
</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="title_no_a_18 trans">How Much Experience Our Team
Member
?</div>
<div className="title_no_a_18 trans">Can I book extra help if I don’t want to lift?</div>
<span className="icon_fq trans fi-rs-arrow-small-right" />
</div>
</div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 3 ? "block" : "none"}` }}>
Serenity Is Multi-Faceted Blockchain Based Ecosystem, Energy
Retailer
For The People, Focusing On The Promotion Of Sustainable Living,
Renewable Energy Production And Smart Energy Grid Utility Services.
<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.
</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="title_no_a_18 trans">Why We Are The Best Company?
</div>
<div className="title_no_a_18 trans"> How long do I get for loading/unloading?</div>
<span className="icon_fq trans fi-rs-arrow-small-right" />
</div>
</div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 4 ? "block" : "none"}` }}>
Serenity Is Multi-Faceted Blockchain Based Ecosystem, Energy
Retailer
For The People, Focusing On The Promotion Of Sustainable Living,
Renewable Energy Production And Smart Energy Grid Utility Services.
<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.
</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="title_no_a_18 trans">Build your Business ?</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" />
</div>
</div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 5 ? "block" : "none"}` }}>
Serenity Is Multi-Faceted Blockchain Based Ecosystem, Energy
Retailer
For The People, Focusing On The Promotion Of Sustainable Living,
Renewable Energy Production And Smart Energy Grid Utility Services.
</div>
</div>
<div className={isActive.key == 6 ? "accordion active-block" : "accordion"}>
<div className={isActive.key == 6 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(6)}>
<div className="question_box ">
<div className="title_no_a_18 trans">How Much Experience Our Team
Member
?</div>
<span className="icon_fq trans fi-rs-arrow-small-right" />
</div>
</div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 6 ? "block" : "none"}` }}>
Serenity Is Multi-Faceted Blockchain Based Ecosystem, Energy
Retailer
For The People, Focusing On The Promotion Of Sustainable Living,
Renewable Energy Production And Smart Energy Grid Utility Services.
<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.
</div>
</div>
</div>
</section>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
<div className="pd_bottom_90" />
{/*-============spacing==========-*/}
</section>
{/*-faq end*/}
{/*-faqs*/}
{/*-faqs section with images*/}
<section className="faq-section">
{/*-============spacing==========-*/}
<div className="pd_top_60" />
<div className="pd_top_90" />
{/*-============spacing==========-*/}
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6 col-md-6 col-sm-12">
<div className="section_title type_one">
<h4 className="sm_title"> Amazing Company</h4>
<div className="title_whole">
<h2 className="title"> Great Insurance your Solutions For Business</h2>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_20" />
{/*-============spacing==========-*/}
</div>
<div className="position-relative br_left_3px_theme_color pd_left_10">
Sed ut perspiciatis unde omnis iste natus voluptatem accusantium doloremque
laudantium aperiam eaquecy
inventore veritatis architecto beatae
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_30" />
{/*-============spacing==========-*/}
<div className="col-lg-6 col-md-12 col-sm-12">
<div className="block_faq">
<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)}>
<div className="question_box ">
<div className="title_no_a_18 trans">What Is Insurance Services?
</div>
<span className="icon_fq trans fi-rs-arrow-small-right" />
</div>
</div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 7 ? "block" : "none"}` }}>
Serenity Is Multi-Faceted Blockchain Based Ecosystem, Energy
Retailer
For The People, Focusing On The Promotion Of Sustainable Living,
Renewable Energy Production And Smart Energy Grid Utility Services.
</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 1 */}
<div className={activeKey === 7 ? "accordion active-block" : "accordion"}>
<div className={activeKey === 7 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(7)}>
<div className="question_box">
<div className="title_no_a_18 trans">How Many Service We Provide ?
</div>
<div className="title_no_a_18 trans">Are you licensed and insured?</div>
<span className="icon_fq trans fi-rs-arrow-small-right" />
</div>
</div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 8 ? "block" : "none"}` }}>
Quis autem vel eum iure reprehenderit ea voluptate esse molestiae
consequatur veillum voluptas nullaes
<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.
</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)}>
<div className="question_box ">
<div className="title_no_a_18 trans">
How Much Experience Our Team Member ?
</div>
{/* 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="title_no_a_18 trans">How much does it cost?</div>
<span className="icon_fq trans fi-rs-arrow-small-right" />
</div>
</div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 9 ? "block" : "none"}` }}>
Serenity Is Multi-Faceted Blockchain Based Ecosystem, Energy
Retailer
For The People, Focusing On The Promotion Of Sustainable Living,
Renewable Energy Production And Smart Energy Grid Utility Services.
<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.
</div>
</div>
{/* FAQ 3 */}
<div className={activeKey === 9 ? "accordion active-block" : "accordion"}>
<div className={activeKey === 9 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(9)}>
<div className="question_box">
<div className="title_no_a_18 trans">Do you do last-minute moves?</div>
<span className="icon_fq trans fi-rs-arrow-small-right" />
</div>
</div>
<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.
</div>
</div>
{/* FAQ 4 */}
<div className={activeKey === 10 ? "accordion active-block" : "accordion"}>
<div className={activeKey === 10 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(10)}>
<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" />
</div>
</div>
<div className="answer accordion-content" style={{ display: activeKey === 10 ? "block" : "none" }}>
<span>Here’s the deal:</span>
<ul>
<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>
<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>
</div>
</div>
{/* FAQ 5 */}
<div className={activeKey === 11 ? "accordion active-block" : "accordion"}>
<div className={activeKey === 11 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(11)}>
<div className="question_box">
<div className="title_no_a_18 trans">What areas do you serve?</div>
<span className="icon_fq trans fi-rs-arrow-small-right" />
</div>
</div>
<div className="answer accordion-content" style={{ display: activeKey === 11 ? "block" : "none" }}>
We currently serve Greater Toronto Area, Greater Hamilton Area, Kitchener-Waterloo- Cambridge Area
and surrounding areas. Not sure if we reach you? Send us a quick message and we’ll confirm.
</div>
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
</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="image one">
<img src=" assets/images/about/about-2-1.jpg" alt="img" className="img-fluid" />
<img src="/assets/images/faq/370-370.webp" alt="img" className="img-fluid" />
</div>
<div className="image two">
<img src=" assets/images/about/about-2-3.jpg" alt="img" className="img-fluid" />
<img src="/assets/images/faq/370-257.webp" alt="img" className="img-fluid" />
</div>
</div>
<div className="right">
<div className="image three">
<img src=" assets/images/about/about-2-2.jpg" alt="img" className="img-fluid" />
<img src="/assets/images/faq/253-439.webp" alt="img" className="img-fluid" />
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
{/*-============spacing==========-*/}
{/* <div className="pd_bottom_40" /> */}
</div>
</div>
</div>
{/*-============spacing==========-*/}
<div className="pd_bottom_40" />
<div className="pd_bottom_90" />
{/*-============spacing==========-*/}
</section>
{/*-faqs end*/}
{/*testimonial*/}
<Testimonial4 />
{/*testimonial*/}
</Layout>
</>
)
}
}

32
pages/home-1.js Normal file
View File

@ -0,0 +1,32 @@
import Layout from "@/components/layout/Layout"
import About1 from "@/components/sections/About1"
import Blog1 from "@/components/sections/Blog1"
import Client1 from "@/components/sections/Client1"
import Faq1 from "@/components/sections/Faq1"
import Form1 from "@/components/sections/Form1"
import Funfacts1 from "@/components/sections/Funfacts1"
import Process1 from "@/components/sections/Process1"
import Service1 from "@/components/sections/Service1"
import Service2 from "@/components/sections/Service2"
import Slider1 from "@/components/sections/Slider1"
import Testimonial1 from "@/components/sections/Testimonial1"
export default function Home1() {
return (
<>
<Layout headerStyle={1} footerStyle={1}>
<Slider1 />
<Service1 />
<About1 />
<Service2 />
<Faq1 />
<Funfacts1 />
<Form1 />
<Process1 />
<Testimonial1 />
<Client1 />
<Blog1 />
</Layout>
</>
)
}

26
pages/home-4.js
View File

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

64
pages/index.js
View File

@ -1,31 +1,47 @@
import Layout from "@/components/layout/Layout"
import About1 from "@/components/sections/About1"
import Blog1 from "@/components/sections/Blog1"
import Client1 from "@/components/sections/Client1"
import Faq1 from "@/components/sections/Faq1"
import Form1 from "@/components/sections/Form1"
import Funfacts1 from "@/components/sections/Funfacts1"
import Process1 from "@/components/sections/Process1"
import Service1 from "@/components/sections/Service1"
import Service2 from "@/components/sections/Service2"
import Slider1 from "@/components/sections/Slider1"
import Testimonial1 from "@/components/sections/Testimonial1"
export default function Home1() {
import About4 from "@/components/sections/About4"
import Banner1 from "@/components/sections/Banner1"
import Blog4 from "@/components/sections/Blog4"
import Client3 from "@/components/sections/Client3"
import Content5 from "@/components/sections/Content5"
import Form3 from "@/components/sections/Form3"
import Funfacts2 from "@/components/sections/Funfacts2"
import Process3 from "@/components/sections/Process3"
import Service6 from "@/components/sections/Service6"
import Service7 from "@/components/sections/Service7"
import Testimonial3 from "@/components/sections/Testimonial3"
import Slider2 from "@/components/sections/slider"
import Funfacts4 from "@/components/sections/Funfacts4"
import Location from "@/components/sections/Location"
import Offer1 from "@/components/sections/Offer1"
import ZipvanQuote from "@/components/sections/ZipvanQuote"
import ZipvanSection from "@/components/sections/pricing-tool"
import ReasonsToChoose from "@/components/sections/Choose"
export default function Home4() {
return (
<>
<Layout headerStyle={1} footerStyle={1}>
<Slider1 />
<Service1 />
<About1 />
<Service2 />
<Faq1 />
<Funfacts1 />
<Form1 />
<Process1 />
<Testimonial1 />
<Client1 />
<Blog1 />
<Layout headerStyle={4} footerStyle={2}>
<Banner1 />
<Funfacts4 />
<ZipvanSection />
<Slider2 />
<ReasonsToChoose />
{/* <Service6 /> */}
{/* <About4 /> */}
{/* <Service7 /> */}
{/* <Content5 /> */}
{/* <Process3 /> */}
{/* <Offer1 /> */}
{/* <ZipvanQuote /> */}
<Location />
{/* <Funfacts2 /> */}
{/* <Form3 /> */}
{/* <Testimonial3 /> */}
{/* <Client3 /> */}
{/* <div className="divider" /> */}
{/* <Blog4 /> */}
</Layout>
</>
)

430
pages/zipvan-quote.js Normal file
View File

@ -0,0 +1,430 @@
import Layout from "@/components/layout/Layout"
import dynamic from 'next/dynamic'
import Link from "next/link"
import React, { useEffect, useRef, useState } from "react";
const CounterUp = dynamic(() => import('@/components/elements/CounterUp'), {
ssr: false,
})
export default function ZipvanQuote() {
const CONFIG = {
GOOGLE_MAPS_API_KEY:
process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY ||
"AIzaSyAxWCXjM3_iYRKdWPUceRo79DlvIU9xnZQ",
CALENDLY_EVENT_URL: "https://calendly.com/zipvan/new-meeting",
PUBLIC_RATES: { booking_flat: 25, km_rate_under_equal_15: 3, km_rate_over_15: 2 },
TAX_RATE: 0.13,
BOUNDS: { SW: { lat: 42.8, lng: -81.0 }, NE: { lat: 44.3, lng: -78.5 } },
};
const pickupRef = useRef(null);
const dropoffRef = useRef(null);
const mapRef = useRef(null);
const schedRef = useRef(null);
const mapObj = useRef(null);
const dirSvc = useRef(null);
const dirRenderer = useRef(null);
const geocoder = useRef(null);
const markerP = useRef(null);
const markerD = useRef(null);
const routeToken = useRef(0);
const [quote, setQuote] = useState({
km: 0,
min: 0,
subtotal: 0,
tax: 0,
grand: 0,
});
const [mapsReady, setMapsReady] = useState(false);
const [mapsError, setMapsError] = useState(null);
const money = (n) => "$" + Number(n).toFixed(2);
const q = (p) =>
Object.entries(p)
.filter(([, v]) => v !== "" && v != null)
.map(([k, v]) => encodeURIComponent(k) + "=" + encodeURIComponent(v))
.join("&");
const showMapStatus = (m) => {
const el = document.getElementById("mapStatus");
if (el) {
el.style.display = "block";
el.textContent = m;
}
};
const debounce = (fn, wait = 700) => {
let t;
return (...a) => {
clearTimeout(t);
t = setTimeout(() => fn(...a), wait);
};
};
function loadGoogleMaps() {
return new Promise((resolve, reject) => {
if (window.google && window.google.maps && window.google.maps.places) {
resolve(window.google);
return;
}
if (document.getElementById("zipvan-google-maps")) {
const existing = document.getElementById("zipvan-google-maps");
existing.addEventListener("load", () => {
if (window.google) resolve(window.google);
else reject(new Error("Google loaded but window.google missing"));
});
existing.addEventListener("error", () => reject(new Error("Google Maps script error")));
return;
}
const s = document.createElement("script");
s.id = "zipvan-google-maps";
s.src =
"https://maps.googleapis.com/maps/api/js?key=" +
encodeURIComponent(CONFIG.GOOGLE_MAPS_API_KEY) +
"&libraries=places&v=weekly";
s.async = true;
s.defer = true;
s.onload = () => {
if (window.google) resolve(window.google);
else reject(new Error("Google Maps loaded but window.google missing"));
};
s.onerror = () => reject(new Error("Google Maps failed to load (network or invalid key)"));
document.head.appendChild(s);
});
}
function calcAndSetTotals({ km, min }) {
const rate = km <= 15 ? CONFIG.PUBLIC_RATES.km_rate_under_equal_15 : CONFIG.PUBLIC_RATES.km_rate_over_15;
const distanceCost = km * rate;
const subtotal = CONFIG.PUBLIC_RATES.booking_flat + distanceCost;
const tax = +(subtotal * CONFIG.TAX_RATE).toFixed(2);
const grand = +(subtotal + tax).toFixed(2);
setQuote({
km: +km.toFixed(2),
min: Math.round(min),
subtotal: +subtotal.toFixed(2),
tax,
grand,
});
}
function openCalendly() {
const url =
CONFIG.CALENDLY_EVENT_URL +
"?" +
q({
hide_event_type_details: 1,
background_color: "ffffff",
text_color: "0a0a0a",
a1: pickupRef.current ? pickupRef.current.value : "",
a2: dropoffRef.current ? dropoffRef.current.value : "",
a3: quote.km ? quote.km.toFixed(1) + " km" : "",
a4: money(quote.subtotal),
a5: money(quote.grand),
_cb: Date.now(),
});
const holder = schedRef.current ?? document.getElementById("sched");
if (!holder) return;
const existing = document.getElementById("calendly-embed-iframe");
if (existing) existing.src = url;
else {
const ifr = document.createElement("iframe");
ifr.id = "calendly-embed-iframe";
ifr.src = url;
ifr.allow = "payment *; clipboard-write *";
ifr.style.width = "100%";
ifr.style.minHeight = "980px";
ifr.style.border = "0";
holder.appendChild(ifr);
}
holder.scrollIntoView({ behavior: "smooth" });
}
function initMap() {
if (!window.google) {
setMapsError("Google Maps not available.");
return;
}
if (!mapRef.current) {
setMapsError("Map container not found.");
return;
}
mapObj.current = new window.google.maps.Map(mapRef.current, {
center: { lat: 43.65, lng: -79.38 },
zoom: 10,
gestureHandling: "greedy",
});
dirSvc.current = new window.google.maps.DirectionsService();
dirRenderer.current = new window.google.maps.DirectionsRenderer({ suppressMarkers: true, preserveViewport: false });
geocoder.current = new window.google.maps.Geocoder();
dirRenderer.current.setMap(mapObj.current);
const biasBounds = new window.google.maps.LatLngBounds(CONFIG.BOUNDS.SW, CONFIG.BOUNDS.NE);
const acOpts = {
types: ["address"],
componentRestrictions: { country: "ca" },
bounds: biasBounds,
strictBounds: false,
fields: ["formatted_address", "geometry"],
};
if (pickupRef.current) {
const acP = new window.google.maps.places.Autocomplete(pickupRef.current, acOpts);
acP.addListener("place_changed", () => handlePlace(acP, "pickup"));
}
if (dropoffRef.current) {
const acD = new window.google.maps.places.Autocomplete(dropoffRef.current, acOpts);
acD.addListener("place_changed", () => handlePlace(acD, "dropoff"));
}
const onBlurPick = () => geocodeManual("pickup");
const onBlurDrop = () => geocodeManual("dropoff");
pickupRef.current && pickupRef.current.addEventListener("blur", onBlurPick);
dropoffRef.current && dropoffRef.current.addEventListener("blur", onBlurDrop);
const geocodeDebounced = debounce((which) => {
const el = which === "pickup" ? pickupRef.current : dropoffRef.current;
const val = el ? el.value.trim() : "";
if (!val) return;
geocoder.current.geocode({ address: val, componentRestrictions: { country: "CA" }, bounds: biasBounds }, (res, st) => {
if (st === "OK" && res && res[0]) {
dropMarker(which, res[0].geometry.location, res[0].formatted_address);
requestRoute();
}
});
}, 400);
function geocodeManual(which) {
geocodeDebounced(which);
}
function handlePlace(ac, which) {
const p = ac.getPlace();
if (!p || !p.geometry) {
geocodeManual(which);
return;
}
dropMarker(which, p.geometry.location, p.formatted_address || (which === "pickup" ? pickupRef.current.value : dropoffRef.current.value));
requestRoute();
}
function dropMarker(which, latlng, label) {
const L = which === "pickup" ? "P" : "D";
const opts = {
position: latlng,
map: mapObj.current,
label: { text: L, color: "#fff", fontWeight: "700" },
title: (which === "pickup" ? "Pick up" : "Drop off") + ": " + label,
};
if (which === "pickup") {
if (markerP.current) markerP.current.setMap(null);
markerP.current = new window.google.maps.Marker(opts);
} else {
if (markerD.current) markerD.current.setMap(null);
markerD.current = new window.google.maps.Marker(opts);
}
}
function requestRoute() {
if (!markerP.current || !markerD.current) return;
const my = ++routeToken.current;
dirSvc.current.route(
{
origin: markerP.current.getPosition(),
destination: markerD.current.getPosition(),
travelMode: window.google.maps.TravelMode.DRIVING,
},
(res, st) => {
if (my !== routeToken.current) return;
if (st === "OK" && res?.routes?.[0]?.legs?.[0]) {
dirRenderer.current.setDirections(res);
const leg = res.routes[0].legs[0];
const km = +(leg.distance.value / 1000).toFixed(2);
const mins = Math.round(leg.duration.value / 60);
const mapStatusEl = document.getElementById("mapStatus");
if (mapStatusEl) mapStatusEl.style.display = "none";
const b = new window.google.maps.LatLngBounds();
b.extend(markerP.current.getPosition());
b.extend(markerD.current.getPosition());
mapObj.current.fitBounds(b);
calcAndSetTotals({ km, min: mins });
} else {
showMapStatus("Couldn't compute the driving route. Check Ontario addresses.");
}
}
);
}
if (!document.getElementById("zipvan-calendly-script")) {
const cs = document.createElement("script");
cs.id = "zipvan-calendly-script";
cs.src = "https://assets.calendly.com/assets/external/widget.js";
cs.async = true;
document.head.appendChild(cs);
}
setMapsReady(true);
initMap._cleanup = () => {
pickupRef.current && pickupRef.current.removeEventListener("blur", onBlurPick);
dropoffRef.current && dropoffRef.current.removeEventListener("blur", onBlurDrop);
};
}
useEffect(() => {
let mounted = true;
if (!CONFIG.GOOGLE_MAPS_API_KEY) {
setMapsError("Google Maps API key missing. Put it into CONFIG or NEXT_PUBLIC_GOOGLE_MAPS_KEY.");
return;
}
loadGoogleMaps()
.then(() => {
if (!mounted) return;
initMap();
})
.catch((err) => {
console.error("Google Maps load failed:", err);
setMapsError("Google Maps failed to load. Check API key, billing and allowed referrers.");
showMapStatus("Google Maps failed to load. See console for details.");
});
return () => {
mounted = false;
try {
if (initMap._cleanup) initMap._cleanup();
if (markerP.current) markerP.current.setMap(null);
if (markerD.current) markerD.current.setMap(null);
if (dirRenderer.current) dirRenderer.current.setMap(null);
} catch (e) { }
};
}, []);
const canBook = Boolean(quote.km && quote.min);
return (
<>
<Layout breadcrumbTitle="Get A Quote" footerStyle={2} background="/assets/images/contact/quote-banner.webp">
<div className="zip-wrap" style={{ maxWidth: 1100, margin: "0 auto" }}>
<div className="pd_top_90" />
<div className="section_title type_four text-center">
<h4 className="sm_title">Fast Checkout</h4>
<div className="title_whole">
<h2 className="title">See Your All-In Price in 10 Seconds</h2>
<p>Enter pickup & drop-off. Your price is locked—no fuel or weekend fees.</p>
</div>
<div className="pd_bottom_40" />
</div>
<style>{`
:root{
--zip-orange:#ff6500; --zip-black:#0a0a0a; --ink:#0f1720; --muted:#6b7280;
--surface:#ffffff; --border:#e6e8eb; --radius:16px;
}
.zip-wrap{max-width:1100px;margin:0 auto;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
box-shadow:0 10px 28px rgba(15,23,32,.07);overflow:hidden}
.card-head{padding:20px 22px;background:var(--zip-black);color:#fff;display:flex;justify-content:space-between;align-items:center}
.card-head h2{margin:0;font-size:22px}
.card-body{padding:22px}
.addr-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media(max-width:760px){ .addr-row{grid-template-columns:1fr} }
.input{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;
font-size:16px;background:#fff;color:var(--ink);min-height:46px;box-sizing:border-box}
.input:focus{outline:0;border-color:#cfd3d8;box-shadow:0 0 0 3px rgba(255,101,0,.12)}
.map{height:390px;border-radius:12px;overflow:hidden;border:1px solid var(--border);
background:#f6f7f8;display:flex;align-items:center;justify-content:center;margin-top:14px}
.map .err{color:var(--muted);font-size:14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.stat{border:1px solid var(--border);border-radius:12px;background:#fff;padding:12px 14px}
.stat label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.stat .value{font-size:16px;font-weight:750;color:var(--ink)}
.totalbar{display:flex;align-items:center;gap:18px;margin-top:16px}
.grand{margin-left:auto;font-size:22px;font-weight:850}
.breakdown{margin-top:12px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.brow{display:flex;justify-content:space-between;padding:10px 12px;font-size:14px;background:#fff}
.brow:nth-child(odd){background:#fbfbfc}
.brow .lbl{color:#6b7280}
.brow.total{font-weight:800;border-top:1px solid var(--border)}
.hint{font-size:12px;color:#6b7280;margin-top:8px}
.cta{display:flex;justify-content:flex-end;margin-top:16px}
.btn{appearance:none;border:0;background:var(--zip-orange);color:#fff;font-weight:850;letter-spacing:.2px;
padding:12px 18px;border-radius:999px;font-size:16px;cursor:pointer;transition:.15s transform,.2s opacity}
.btn[disabled]{background:#c9ccd1;cursor:not-allowed;opacity:.85}
.btn:active{transform:translateY(1px)}
#sched{margin-top:26px}
#calendly-embed-iframe{width:100%;min-height:980px;border:0}
`}</style>
<div className="card">
<div className="card-head">
<h2 className="text-white">Book a Pickup</h2>
<div style={{ opacity: ".9", fontSize: 13 }}>Transparent pricing — distance + booking</div>
</div>
<div className="card-body">
<div className="addr-row">
<input id="pickup" ref={pickupRef} className="input" type="text" placeholder="Pick up address (Canada)" aria-label="Pick up" autoComplete="off" />
<input id="dropoff" ref={dropoffRef} className="input" type="text" placeholder="Drop off address (Canada)" aria-label="Drop off" autoComplete="off" />
</div>
<div id="map" ref={mapRef} className="map">
<div className="err" id="mapStatus">Enter Pick up and Drop off to see your route, distance, and price.</div>
</div>
<div className="stats">
<div className="stat">
<label>Service</label>
<div className="value">Curbside</div>
</div>
<div className="stat">
<label>Crew</label>
<div className="value">1 mover</div>
</div>
<div className="stat">
<label>Distance & Time</label>
<div className="value">
<span id="distanceKm">{quote.km ? quote.km.toFixed(1) : "—"}</span> km • <span id="driveMin">{quote.min ? Math.round(quote.min) : "—"}</span> min
</div>
</div>
</div>
<div className="totalbar">
<div className="grand">Grand total: <span id="grandTotal">{quote.km ? money(quote.grand) : "—"}</span></div>
</div>
<div className="breakdown" id="breakdownBox" style={{ display: quote.km ? "block" : "none" }}>
<div className="brow"><div className="lbl">Booking fee</div><div id="bkFee">{money(CONFIG.PUBLIC_RATES.booking_flat)}</div></div>
<div className="brow"><div className="lbl">Distance (<span id="rateLabel">${quote.km && quote.km <= 15 ? CONFIG.PUBLIC_RATES.km_rate_under_equal_15 : CONFIG.PUBLIC_RATES.km_rate_over_15}</span>/km)</div><div id="distAmt">{quote.km ? money((quote.km) * (quote.km <= 15 ? CONFIG.PUBLIC_RATES.km_rate_under_equal_15 : CONFIG.PUBLIC_RATES.km_rate_over_15)) : money(0)}</div></div>
<div className="brow"><div className="lbl">Subtotal</div><div id="subAmt">{quote.km ? money(quote.subtotal) : money(0)}</div></div>
<div className="brow"><div className="lbl">HST (13%)</div><div id="taxAmt">{quote.km ? money(quote.tax) : money(0)}</div></div>
<div className="brow total"><div>Grand total</div><div id="grandAmt">{quote.km ? money(quote.grand) : money(0)}</div></div>
</div>
<div className="hint">Final price shown before you pay. Name, phone, and email are collected in the next step.</div>
<div className="cta">
<button id="bookNow" className="btn" disabled={!canBook} onClick={() => { if (canBook) openCalendly(); }}>
Continue to Scheduling
</button>
</div>
</div>
</div>
<div id="sched" ref={schedRef}></div>
{mapsError && (
<div style={{ marginTop: 12, padding: 12, background: "#fff6f6", color: "#b91c1c", borderRadius: 8 }}>
<strong>Map error:</strong> {mapsError}
</div>
)}
<div className="pd_bottom_90" />
</div>
</Layout>
</>
)
}

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

File diff suppressed because it is too large Load Diff

BIN
public/assets/images/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 343 KiB

BIN
public/assets/images/BookNow/amazing-company.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
public/assets/images/BookNow/amazing-company/220-220.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
public/assets/images/BookNow/amazing-company/230-270.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
public/assets/images/BookNow/amazing-company/240-269.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
public/assets/images/BookNow/book-now-banner.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
public/assets/images/BookNow/icons/insurance-included.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
public/assets/images/BookNow/icons/quick-simple.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
public/assets/images/BookNow/icons/right-sized-vans.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
public/assets/images/BookNow/icons/upfront-pricing.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
public/assets/images/BookNow/icons/we-drive-for-you.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
public/assets/images/BookNow/team-left.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
public/assets/images/BookNow/team-right.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
public/assets/images/about-us/about-banner.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/assets/images/about-us/about-company.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
public/assets/images/about-us/amazing-company.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/assets/images/about-us/icons/cities.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
public/assets/images/about-us/icons/customers-served.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
public/assets/images/about-us/icons/experience.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
public/assets/images/about-us/icons/local-moves.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
public/assets/images/about-us/icons/pickups.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
public/assets/images/about-us/icons/vehicles.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
public/assets/images/about-us/our-mission.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/assets/images/about-us/why-choose-us-left.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
public/assets/images/about-us/why-choose-us-right.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
public/assets/images/contact/contact-banner.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
public/assets/images/contact/contact-banner.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
public/assets/images/contact/quote-banner.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
public/assets/images/faq/253-439.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/assets/images/faq/370-257.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
public/assets/images/faq/370-370.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
public/assets/images/faq/faq-banner.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
public/assets/images/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 206 KiB

BIN
public/assets/images/home/banner/home-banner-1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
public/assets/images/home/banner/home-banner-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
public/assets/images/home/banner/home-banner-3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
public/assets/images/home/banner/map-blue.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
public/assets/images/home/banner/map-light-orange.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
public/assets/images/home/icons/cities.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
public/assets/images/home/icons/customers-served.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
public/assets/images/home/icons/experience.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
public/assets/images/home/icons/step-1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
public/assets/images/home/icons/step-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
public/assets/images/home/icons/step-3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
public/assets/images/home/icons/vehicles.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
public/assets/images/logo/logo-orange.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
public/assets/images/logo/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
public/assets/images/process/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB

BIN
public/assets/images/process/1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
public/assets/images/process/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 KiB

BIN
public/assets/images/process/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

BIN
public/assets/images/process/step-1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/assets/images/process/step-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/assets/images/process/step-3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
public/assets/images/slider/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

BIN
public/assets/images/slider/1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
public/assets/images/slider/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

BIN
public/assets/images/slider/2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
public/assets/images/slider/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

Some files were not shown because too many files have changed in this diff Show More