Footer Updated & Contact form integration updated
This commit is contained in:
akash
parent
2f799e045b
commit
0b0429de10
@ -19,8 +19,7 @@ export default function Footer2({ }) {
|
||||
<div className="pd_bottom_35" />
|
||||
{/*-============spacing==========-*/}
|
||||
<div className="position-relative color_white">
|
||||
Sed ut perspiciatis omnis laudantium natus errors voluptatem accusantium
|
||||
doloremque laudantium totam
|
||||
Move your stuff in a ZIP
|
||||
</div>
|
||||
<div className="logo_box">
|
||||
<Link href="#" className="logo navbar-brand">
|
||||
@ -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,7 +51,7 @@ export default function Footer2({ }) {
|
||||
<Link href="#" className="m_icon">
|
||||
<i className="fab fa-skype" />
|
||||
</Link>
|
||||
</li>
|
||||
</li> */}
|
||||
<li>
|
||||
<Link href="#" className="m_icon">
|
||||
<i className="fab fa-instagram" />
|
||||
@ -67,7 +66,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==========-*/}
|
||||
@ -80,7 +79,7 @@ export default function Footer2({ }) {
|
||||
<i className="fi-rr-arrow-small-right color_white" />
|
||||
</div>
|
||||
<Link className="links color_white" href="#">
|
||||
House Insurance
|
||||
Greater Toronto Area
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
@ -90,7 +89,7 @@ export default function Footer2({ }) {
|
||||
<i className="fi-rr-arrow-small-right color_white" />
|
||||
</div>
|
||||
<Link className="links color_white" href="#">
|
||||
Medical Insurance
|
||||
Greater Hamilton Area
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
@ -100,47 +99,8 @@ export default function Footer2({ }) {
|
||||
<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
|
||||
Kitchener-Waterloo-
|
||||
Cambridge Area
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
@ -163,61 +123,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 & 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 +154,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 +174,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,23 +196,26 @@ 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">
|
||||
<img src="/assets/images/shield.svg" className="img-fluid" alt="img" />
|
||||
<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>
|
||||
@ -298,7 +224,7 @@ export default function Footer2({ }) {
|
||||
<i className=" fi-rr-clock" />
|
||||
</div>
|
||||
<Link className="links color_white" href="#">
|
||||
Working Hours : Sun-monday, 09am-5pm
|
||||
Working Hours : 24/7 365 Days a Year
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
@ -308,9 +234,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>
|
||||
|
||||
138
package-lock.json
generated
138
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
456
pages/contact.js
456
pages/contact.js
@ -1,177 +1,287 @@
|
||||
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" footerStyle={2}>
|
||||
<section className="contact-section">
|
||||
<div className="pd_top_80" />
|
||||
<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>
|
||||
<div className="pd_bottom_30" />
|
||||
</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:info@zipvan.ca">info@zipvan.ca</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pd_bottom_30" />
|
||||
</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:(647) 360-2075">(647) 360-2075</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pd_bottom_30" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pd_bottom_40" />
|
||||
</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="#" className="m_icon">
|
||||
<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=!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!5e0!3m2!1sen!2s!4v1678975266976!5m2!1sen!2s"
|
||||
height={570}
|
||||
style={{ border: 0, width: "100%" }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -34,18 +34,15 @@ export default function Faq() {
|
||||
<div className="section_title type_one">
|
||||
<h4 className="sm_title"> Faq's</h4>
|
||||
<div className="title_whole">
|
||||
<h2 className="title"> Frequently Asked
|
||||
Questions!</h2>
|
||||
<h2 className="title"> Moving Services FAQ – Everything You Need to Know</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>
|
||||
@ -196,7 +193,7 @@ export default function Faq() {
|
||||
className="answer accordion-content"
|
||||
style={{ display: `${isActive.key == 9 ? "block" : "none"}` }}
|
||||
>
|
||||
<h4>Here’s the deal:</h4>
|
||||
<span>Here’s the deal:</span>
|
||||
<ul>
|
||||
<li>
|
||||
Unlike U-Haul, you don’t have to drive, pay extra insurance, or waste
|
||||
@ -214,7 +211,7 @@ export default function Faq() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={isActive.key == 7 ? "accordion active-block" : "accordion"}>
|
||||
<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 areas do you serve?
|
||||
@ -223,7 +220,7 @@ export default function Faq() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="answer accordion-content" style={{ display: `${isActive.key == 7 ? "block" : "none"}` }}>
|
||||
We currently serve [insert city/region here] and surrounding areas. Not sure if we reach you? Send us a quick message and we’ll confirm.
|
||||
We currently serve [insert city/region here] and surrounding areas. Not sure if we reach you? Send us a quick message and we’ll confirm.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -259,7 +256,7 @@ export default function Faq() {
|
||||
<div className="pd_bottom_40" />
|
||||
{/*-============spacing==========-*/}
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
</Layout>
|
||||
|
||||
@ -6173,7 +6173,7 @@ body .service_post.style_one .owl-carousel .owl-dots {
|
||||
}
|
||||
|
||||
.list_box li a {
|
||||
color: var(--heading-color-one);
|
||||
color: #ff6600
|
||||
}
|
||||
|
||||
.list_box.weight_500 li a {
|
||||
@ -16909,6 +16909,12 @@ input[type=range i]:focus::-webkit-slider-thumb {
|
||||
background: #1f1b1f;
|
||||
}
|
||||
|
||||
/* .bold{
|
||||
|
||||
font-weight: bold;
|
||||
|
||||
} */
|
||||
|
||||
.footer.style_two .newsteller_simple.button_style_one input[type=submit] {
|
||||
background: var(--color-set-two-three-1);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user