266 lines
11 KiB
JavaScript
266 lines
11 KiB
JavaScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
export default function Footer3() {
|
|
const [success, setSuccess] = useState(true);
|
|
const [showMessage, setShowMessage] = useState(false);
|
|
|
|
const handleShowMessage = () => {
|
|
setShowMessage(true);
|
|
setTimeout(() => {
|
|
setShowMessage(false);
|
|
}, 2000);
|
|
};
|
|
|
|
const sendEmail = async (e) => {
|
|
e.preventDefault(); // Prevent default form submission behavior
|
|
const email = e.target.email.value;
|
|
|
|
try {
|
|
const response = await axios.post(
|
|
"https://express-brevomail.vercel.app/api/contacts",
|
|
{
|
|
email,
|
|
}
|
|
);
|
|
|
|
if ([200, 201].includes(response.status)) {
|
|
e.target.reset(); // Reset the form
|
|
setSuccess(true); // Set success state
|
|
handleShowMessage();
|
|
} else {
|
|
setSuccess(false); // Handle unexpected responses
|
|
handleShowMessage();
|
|
}
|
|
} catch (error) {
|
|
console.error("Error:", error.response?.data || "An error occurred");
|
|
setSuccess(false); // Set error state
|
|
handleShowMessage();
|
|
e.target.reset(); // Reset the form
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const headings = document.querySelectorAll(".footer-heading-mobile");
|
|
|
|
const toggleOpen = (event) => {
|
|
const parent = event.target.closest(".footer-col-block");
|
|
const content = parent.querySelector(".tf-collapse-content");
|
|
|
|
if (parent.classList.contains("open")) {
|
|
parent.classList.remove("open");
|
|
content.style.height = "0px";
|
|
} else {
|
|
parent.classList.add("open");
|
|
content.style.height = content.scrollHeight + 10 + "px";
|
|
}
|
|
};
|
|
|
|
headings.forEach((heading) => {
|
|
heading.addEventListener("click", toggleOpen);
|
|
});
|
|
|
|
// Clean up event listeners when the component unmounts
|
|
return () => {
|
|
headings.forEach((heading) => {
|
|
heading.removeEventListener("click", toggleOpen);
|
|
});
|
|
};
|
|
}, []); // Empty dependency array means this will run only once on mount
|
|
|
|
return (
|
|
<footer id="footer" className="footer style-2" style={{ backgroundColor: '#272727' }}>
|
|
<div className="footer-wrap">
|
|
<div className="tf-container">
|
|
<div className="footer-body">
|
|
<div className="row">
|
|
<div className="col-lg-4">
|
|
<div className="footer-about">
|
|
<Link href={`/`} className="footer-logo">
|
|
<svg
|
|
width="139.5"
|
|
height={40}
|
|
viewBox="0 0 140 40"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M18.2183 15.7033L29.395 34.7289C29.4936 34.8967 29.6741 34.9994 29.8687 34.9985L41.1397 34.9463C41.3308 34.9455 41.5075 34.8448 41.6058 34.6809L47.5 24.8527L35.944 24.8365C35.7518 24.8362 35.5738 24.7349 35.4754 24.5698L23.9713 5.2667C23.8727 5.10131 23.6944 5 23.5019 5L12.3005 5C12.1083 5 11.9302 5.10099 11.8315 5.26594L5.91087 15.1639L0.167756 24.7208C0.0644005 24.8928 0.0636223 25.1076 0.165723 25.2804L5.75222 34.7316C5.85055 34.8979 6.02941 35 6.22264 35L16.7708 35C17.1948 35 17.4573 34.538 17.2402 34.1738L5.91087 15.1639L17.276 15.1639C17.6635 15.1639 18.022 15.3691 18.2183 15.7033Z"
|
|
fill="white"
|
|
/>
|
|
<text
|
|
x="55"
|
|
y="30"
|
|
fontFamily="Arial, sans-serif"
|
|
fontSize="20"
|
|
fill="white"
|
|
>
|
|
Keystone
|
|
</text>
|
|
</svg>
|
|
</Link>
|
|
<div className="footer-info mb_51">
|
|
<a href="#" className="link text-body-2" style={{ color: 'white' }}>
|
|
themesflat@gmail.com
|
|
</a>
|
|
<div className="text-body-2" style={{ color: 'white' }}>
|
|
No. 3A, 1st Floor, Balaji Nagar,<br />
|
|
Dharapadavedu, Vellore - 632007,<br />
|
|
Tamil Nadu, India
|
|
</div>
|
|
<div className="text-body-2" style={{ color: 'white' }}>+91 90954 50005</div>
|
|
</div>
|
|
<div className="tf-social">
|
|
<a href="#" className="icon-twitter-x" style={{ color: 'white' }} />
|
|
<a href="#" className="icon-facebook-f" style={{ color: 'white' }} />
|
|
<a href="#" className="icon-github" style={{ color: 'white' }} />
|
|
<a href="#" className="icon-instagram" style={{ color: 'white' }} />
|
|
<a href="#" className="icon-youtube" style={{ color: 'white' }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-2 col-md-6">
|
|
<div className="footer-col-block">
|
|
<h6 className="footer-heading footer-heading-mobile fw-6" style={{ color: 'white' }}>
|
|
Company
|
|
</h6>
|
|
<div className="tf-collapse-content">
|
|
<ul className="footer-menu-list">
|
|
<li className="text-body-2">
|
|
<Link href={`/about`} className="link footer-menu_item" style={{ color: 'white' }}>
|
|
About Keystone
|
|
</Link>
|
|
</li>
|
|
<li className="text-body-2">
|
|
<Link
|
|
href={`/contact-us`}
|
|
className="link footer-menu_item"
|
|
style={{ color: 'white' }}
|
|
>
|
|
Contact us
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="text-body-2">
|
|
<Link href={`/career`} className="link footer-menu_item" style={{ color: 'white' }}>
|
|
Careers
|
|
</Link>
|
|
</li>
|
|
{/* <li className="text-body-2">
|
|
<Link
|
|
href={`/#`}
|
|
className="link footer-menu_item"
|
|
style={{ color: 'white' }}
|
|
>
|
|
Career
|
|
</Link>
|
|
</li> */}
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-2 col-md-6">
|
|
{/* Links section commented out */}
|
|
</div>
|
|
<div className="col-lg-4">
|
|
<div className="footer-newsletter">
|
|
<h6 className="footer-heading fw-6" style={{ color: 'white' }}>
|
|
Contact Us
|
|
</h6>
|
|
<div className="tf-collapse-content">
|
|
<div className="wrap-newsletter">
|
|
<p className="text-body-2 mb_17" style={{ color: 'white' }}>
|
|
Get in touch with us for your data processing needs.
|
|
<br />
|
|
We're here to help with your business requirements!
|
|
</p>
|
|
<div
|
|
className={`tfSubscribeMsg footer-sub-element ${showMessage ? "active" : ""
|
|
}`}
|
|
>
|
|
{success ? (
|
|
<p style={{ color: "rgb(52, 168, 83)" }}>
|
|
Your message has been sent successfully.
|
|
</p>
|
|
) : (
|
|
<p style={{ color: "red" }}>Something went wrong</p>
|
|
)}
|
|
</div>
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
sendEmail(e);
|
|
}}
|
|
id="subscribe-form"
|
|
className="form-newsletter style-1 subscribe-form mb_18"
|
|
>
|
|
<div
|
|
id="subscribe-content"
|
|
className="subscribe-content"
|
|
>
|
|
<fieldset className="email">
|
|
<input
|
|
id="subscribe-email"
|
|
type="email"
|
|
name="email"
|
|
className="subscribe-email style-2"
|
|
placeholder="Enter your e-mail"
|
|
tabIndex={0}
|
|
aria-required="true"
|
|
style={{ backgroundColor: 'white', color: '#272727' }}
|
|
/>
|
|
</fieldset>
|
|
<div className="button-submit">
|
|
<button
|
|
id="subscribe-button"
|
|
className="subscribe-button tf-btn btn-dark"
|
|
type="submit"
|
|
>
|
|
<span>Submit</span>
|
|
<span className="bg-effect" />
|
|
</button>
|
|
</div>
|
|
<div className="icon">
|
|
<i className="icon-envelope-solid" style={{ color: 'white' }} />
|
|
</div>
|
|
</div>
|
|
<div id="subscribe-msg" className="subscribe-msg" />
|
|
</form>
|
|
<p className="description text-body-2" style={{ color: 'white' }}>
|
|
By contacting us, you agree to our{" "}
|
|
<a href="#" className="link" style={{ color: 'white', textDecoration: 'underline' }}>
|
|
Privacy Policy
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="footer-bottom" style={{ backgroundColor: '#1f1f1f', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
|
|
<div className="tf-container">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="wrapper d-flex align-items-center flex-wrap gap_12">
|
|
<p className="text-body-2 m-0" style={{ color: 'white' }}>
|
|
© {new Date().getFullYear()} Copyright by{" "}
|
|
<a href="#" className="link-black text-body-3" style={{ color: 'white', fontWeight: '600' }}>
|
|
Keystone
|
|
</a>{" "}
|
|
. All Rights Reserved.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
} |