Footer Updated & Contact form integration updated

This commit is contained in:
akash 2025-09-06 14:35:31 +05:30
parent 2f799e045b
commit 0b0429de10
6 changed files with 476 additions and 299 deletions

View File

@ -19,8 +19,7 @@ export default function Footer2({ }) {
<div className="pd_bottom_35" /> <div className="pd_bottom_35" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="position-relative color_white"> <div className="position-relative color_white">
Sed ut perspiciatis omnis laudantium natus errors voluptatem accusantium Move your stuff in a ZIP
doloremque laudantium totam
</div> </div>
<div className="logo_box"> <div className="logo_box">
<Link href="#" className="logo navbar-brand"> <Link href="#" className="logo navbar-brand">
@ -38,7 +37,7 @@ export default function Footer2({ }) {
</div> </div>
<div className="social-icons"> <div className="social-icons">
<ul> <ul>
<li> {/* <li>
<Link href="#" className="m_icon"> <Link href="#" className="m_icon">
<i className="fab fa-facebook" /> <i className="fab fa-facebook" />
</Link> </Link>
@ -52,7 +51,7 @@ export default function Footer2({ }) {
<Link href="#" className="m_icon"> <Link href="#" className="m_icon">
<i className="fab fa-skype" /> <i className="fab fa-skype" />
</Link> </Link>
</li> </li> */}
<li> <li>
<Link href="#" className="m_icon"> <Link href="#" className="m_icon">
<i className="fab fa-instagram" /> <i className="fab fa-instagram" />
@ -67,7 +66,7 @@ export default function Footer2({ }) {
<div className="col-lg-6"> <div className="col-lg-6">
<div className="footer_widgets_box pd_bottom_30"> <div className="footer_widgets_box pd_bottom_30">
<div className="fwidget_title"> <div className="fwidget_title">
<h2 className="title color_white"> Services </h2> <h2 className="title color_white"> Areas we serve </h2>
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_bottom_25" /> <div className="pd_bottom_25" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
@ -80,7 +79,7 @@ export default function Footer2({ }) {
<i className="fi-rr-arrow-small-right color_white" /> <i className="fi-rr-arrow-small-right color_white" />
</div> </div>
<Link className="links color_white" href="#"> <Link className="links color_white" href="#">
House Insurance Greater Toronto Area
</Link> </Link>
</div> </div>
</li> </li>
@ -90,7 +89,7 @@ export default function Footer2({ }) {
<i className="fi-rr-arrow-small-right color_white" /> <i className="fi-rr-arrow-small-right color_white" />
</div> </div>
<Link className="links color_white" href="#"> <Link className="links color_white" href="#">
Medical Insurance Greater Hamilton Area
</Link> </Link>
</div> </div>
</li> </li>
@ -100,47 +99,8 @@ export default function Footer2({ }) {
<i className="fi-rr-arrow-small-right color_white" /> <i className="fi-rr-arrow-small-right color_white" />
</div> </div>
<Link className="links color_white" href="#"> <Link className="links color_white" href="#">
Car Insurance Kitchener-Waterloo-
</Link> Cambridge Area
</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>
</div> </div>
</li> </li>
@ -163,61 +123,21 @@ export default function Footer2({ }) {
<div className="icon trans"> <div className="icon trans">
<i className="fi-rr-arrow-small-right color_white" /> <i className="fi-rr-arrow-small-right color_white" />
</div> </div>
<Link className="links color_white" href="#"> <Link className="links color_white" href="/about-us">
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="#">
About Us About Us
</Link> </Link>
</div> </div>
</li> </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> </ul>
</div> </div>
</div> </div>
@ -234,7 +154,8 @@ export default function Footer2({ }) {
</div> </div>
<div className="bottom_content"> <div className="bottom_content">
<div className="color_white position_p_relative"> <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> </div>
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_bottom_25" /> <div className="pd_bottom_25" />
@ -253,11 +174,13 @@ export default function Footer2({ }) {
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
</div> </div>
<div className="d-flex align-items-center contact_header_one"> <div className="d-flex align-items-center contact_header_one">
<div className="icon_s"> {/* <div className="icon_s">
<i className=" fi-rr-headphones" /></div> <i className=" fi-rr-headphones" /></div> */}
<div className="content"> <div className="content">
<h6 className="tite color_white">Need Help?</h6> <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> </div>
</div> </div>
@ -273,23 +196,26 @@ export default function Footer2({ }) {
<section className="mottom_content position-relative z_99"> <section className="mottom_content position-relative z_99">
<div className="auto-container"> <div className="auto-container">
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-lg-6 col-md-6 col-sm-12"> <div className="col-lg-7 col-md-6 col-sm-12">
<div className="position-relative"> <div className="position-relative">
<ul className="list_box linline"> <ul className="list_box linline">
<li> <li>
<div className="d-flex align-items-center"> <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" /> <img src="/assets/images/shield.svg" className="img-fluid" alt="img" />
</div> </div>
<Link className="links color_white" href="#"> <span className="links color_white mb-0">
Copyright {new Date().getFullYear()}, Vankine. All Rights Reserved Copyright 2025 © ZipVan. Powered by{" "}
</Link> <Link href="https://metatroncubesolutions.com/" target="_blank" className="bold">
MetatronCube
</Link>. All Rights Reserved.
</span>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</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"> <div className="position-relative">
<ul className="list_box color_one linline"> <ul className="list_box color_one linline">
<li> <li>
@ -298,7 +224,7 @@ export default function Footer2({ }) {
<i className=" fi-rr-clock" /> <i className=" fi-rr-clock" />
</div> </div>
<Link className="links color_white" href="#"> <Link className="links color_white" href="#">
Working Hours : Sun-monday, 09am-5pm Working Hours : 24/7 365 Days a Year
</Link> </Link>
</div> </div>
</li> </li>
@ -308,9 +234,7 @@ export default function Footer2({ }) {
</div> </div>
</div> </div>
</section> </section>
{/*-============spacing==========-*/}
<div className="pd_bottom_50" />
{/*-============spacing==========-*/}
<div className="patter_bottom"> <div className="patter_bottom">
<img src="/assets/images/shape/wave-pattern-1.png" className="img-fluid" alt="img" /> <img src="/assets/images/shape/wave-pattern-1.png" className="img-fluid" alt="img" />
</div> </div>

138
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "name", "name": "name",
"version": "2.1.0", "version": "2.1.0",
"dependencies": { "dependencies": {
"axios": "^1.11.0",
"eslint": "8.40.0", "eslint": "8.40.0",
"eslint-config-next": "13.4.1", "eslint-config-next": "13.4.1",
"isotope-layout": "^3.0.6", "isotope-layout": "^3.0.6",
@ -15,6 +16,7 @@
"react": "18.2.0", "react": "18.2.0",
"react-countup": "^6.4.2", "react-countup": "^6.4.2",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-google-recaptcha": "^3.1.0",
"react-modal-video": "^2.0.0", "react-modal-video": "^2.0.0",
"react-scroll-trigger": "^0.6.14", "react-scroll-trigger": "^0.6.14",
"react-slick": "^0.29.0", "react-slick": "^0.29.0",
@ -1360,6 +1362,12 @@
"node": ">= 0.4" "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": { "node_modules/available-typed-arrays": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@ -1384,6 +1392,17 @@
"node": ">=4" "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": { "node_modules/axobject-query": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@ -1575,6 +1594,18 @@
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"license": "MIT" "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": { "node_modules/concat-map": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@ -1732,6 +1763,15 @@
"url": "https://github.com/sponsors/ljharb" "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": { "node_modules/desandro-matches-selector": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz", "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==", "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
"license": "ISC" "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": { "node_modules/for-each": {
"version": "0.3.5", "version": "0.3.5",
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@ -2562,6 +2622,22 @@
"url": "https://github.com/sponsors/ljharb" "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": { "node_modules/fs.realpath": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@ -2867,6 +2943,15 @@
"node": ">= 0.4" "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": { "node_modules/ignore": {
"version": "5.3.2", "version": "5.3.2",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@ -3579,6 +3664,27 @@
"node": ">=8.6" "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": { "node_modules/minimatch": {
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@ -4030,6 +4136,12 @@
"react-is": "^16.13.1" "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": { "node_modules/punycode": {
"version": "2.3.1", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@ -4071,6 +4183,19 @@
"node": ">=0.10.0" "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": { "node_modules/react-countup": {
"version": "6.5.3", "version": "6.5.3",
"resolved": "https://registry.npmjs.org/react-countup/-/react-countup-6.5.3.tgz", "resolved": "https://registry.npmjs.org/react-countup/-/react-countup-6.5.3.tgz",
@ -4096,6 +4221,19 @@
"react": "^18.2.0" "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": { "node_modules/react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

View File

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

View File

@ -1,177 +1,287 @@
import Layout from "@/components/layout/Layout" "use client";
import Link from "next/link"
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() { export default function Contact() {
const [formData, setFormData] = useState({
username: "",
email: "",
subject: "",
message: "",
});
return ( const [formErrors, setFormErrors] = useState({});
<> const [captchaToken, setCaptchaToken] = useState(null);
<Layout breadcrumbTitle="Contact"> const [alert, setAlert] = useState({ show: false, type: "", message: "" });
{/*-contact*/}
<section className="contact-section"> const handleChange = (e) => {
{/*-============spacing==========-*/} const { name, value } = e.target;
<div className="pd_top_80" /> setFormData((prev) => ({ ...prev, [name]: value }));
{/*-============spacing==========-*/} };
<div className="container">
<div className="row"> const handleCaptchaChange = (token) => {
<div className="col-lg-4 col-md-6 col-sm-12">
<div className="contact_box_content"> setCaptchaToken(token);
<div className="icon trans"> };
<img src="/assets/images/cont-1.png" alt="img" className="img-fluid" />
</div> const handleSubmit = async (e) => {
<div className="contact-infor"> e.preventDefault();
<h6 className="title_no_a_24"> Location</h6>
<span>55 Main Street, 2nd Block const errors = {};
melbourne, Australia</span> if (!formData.username.trim()) errors.username = "Name is required.";
</div> if (!formData.email.trim()) errors.email = "Email is required.";
</div> if (!formData.subject.trim()) errors.subject = "Subject is required.";
{/*-============spacing==========-*/} if (!formData.message.trim()) errors.message = "Message is required.";
<div className="pd_bottom_30" /> if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
{/*-============spacing==========-*/}
</div> setFormErrors(errors);
<div className="col-lg-4 col-md-6 col-sm-12">
<div className="contact_box_content"> if (Object.keys(errors).length > 0) {
<div className="icon trans"> return;
<img src="/assets/images/cont-2.png" alt="img" className="img-fluid" /> }
</div>
<div className="contact-infor"> const emailData = {
<h6 className="title_no_a_24">Email</h6> ...formData,
<Link href="mailto:support@gmail.com">support@gmail.com message: `Subject: ${formData.subject}<br /><br />Message: ${formData.message}`,
</Link> to: "info@zipvan.ca",
<Link href="mailto:infoinsurace.com">infoinsurace.com</Link> senderName: "ZipVan Contact Page",
</div> recaptchaToken: captchaToken,
</div> };
{/*-============spacing==========-*/}
<div className="pd_bottom_30" /> try {
{/*-============spacing==========-*/}
</div> const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, {
<div className="col-lg-4 col-md-6 col-sm-12"> headers: { "Content-Type": "application/json" },
<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*/}
</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 Were Here to Help</h2>
</div>
<p>
Get in touch with us for bookings, pricing, or any questions. Were 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>
</>
);
}

View File

@ -34,18 +34,15 @@ export default function Faq() {
<div className="section_title type_one"> <div className="section_title type_one">
<h4 className="sm_title"> Faq's</h4> <h4 className="sm_title"> Faq's</h4>
<div className="title_whole"> <div className="title_whole">
<h2 className="title"> Frequently Asked <h2 className="title"> Moving Services FAQ Everything You Need to Know</h2>
Questions!</h2>
</div> </div>
<p> Sed ut perspiciatis unde natus voluptatem accusantium doloremque laudantium <p> Have questions about our moving services? Weve put together a list of the most common questions our customers ask about bookings, costs, last-minute moves, and more. Whether youre planning a small apartment move or need quick help transporting items, this FAQ will give you clear answers before you book.</p>
aperiam
inventore veritatis architecto beatae</p>
</div> </div>
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="pd_bottom_40" /> <div className="pd_bottom_40" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
<div className="theme_btn_all"> <div className="theme_btn_all">
<Link href="#" className="theme_btn big rotate"> <Link href="/contact" className="theme_btn big rotate">
Contact Us <span> <i className=" fi-rr-arrow-small-up" /></span> Contact Us <span> <i className=" fi-rr-arrow-small-up" /></span>
</Link> </Link>
</div> </div>
@ -196,7 +193,7 @@ export default function Faq() {
className="answer accordion-content" className="answer accordion-content"
style={{ display: `${isActive.key == 9 ? "block" : "none"}` }} style={{ display: `${isActive.key == 9 ? "block" : "none"}` }}
> >
<h4>Heres the deal:</h4> <span>Heres the deal:</span>
<ul> <ul>
<li> <li>
Unlike U-Haul, you dont have to drive, pay extra insurance, or waste Unlike U-Haul, you dont have to drive, pay extra insurance, or waste
@ -214,7 +211,7 @@ export default function Faq() {
</div> </div>
</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={isActive.key == 7 ? "question faq_header active" : "question faq_header"} onClick={() => handleToggle(7)}>
<div className="question_box "> <div className="question_box ">
<div className="title_no_a_18 trans">What areas do you serve? <div className="title_no_a_18 trans">What areas do you serve?
@ -223,7 +220,7 @@ export default function Faq() {
</div> </div>
</div> </div>
<div className="answer accordion-content" style={{ display: `${isActive.key == 7 ? "block" : "none"}` }}> <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 well confirm. We currently serve [insert city/region here] and surrounding areas. Not sure if we reach you? Send us a quick message and well confirm.
</div> </div>
</div> </div>
@ -259,7 +256,7 @@ export default function Faq() {
<div className="pd_bottom_40" /> <div className="pd_bottom_40" />
{/*-============spacing==========-*/} {/*-============spacing==========-*/}
</section> </section>
</Layout> </Layout>

View File

@ -6173,7 +6173,7 @@ body .service_post.style_one .owl-carousel .owl-dots {
} }
.list_box li a { .list_box li a {
color: var(--heading-color-one); color: #ff6600
} }
.list_box.weight_500 li a { .list_box.weight_500 li a {
@ -16909,6 +16909,12 @@ input[type=range i]:focus::-webkit-slider-thumb {
background: #1f1b1f; background: #1f1b1f;
} }
/* .bold{
font-weight: bold;
} */
.footer.style_two .newsteller_simple.button_style_one input[type=submit] { .footer.style_two .newsteller_simple.button_style_one input[type=submit] {
background: var(--color-set-two-three-1); background: var(--color-set-two-three-1);
} }