mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-28 21:25:50 +00:00
641 lines
20 KiB
JavaScript
641 lines
20 KiB
JavaScript
/* eslint-disable no-unused-vars */
|
|
import {
|
|
Box,
|
|
Heading,
|
|
Text,
|
|
Container,
|
|
useDisclosure,
|
|
Image,
|
|
Badge,
|
|
Textarea,
|
|
} from "@chakra-ui/react";
|
|
|
|
import { Controller, useForm } from "react-hook-form";
|
|
import { useEffect, useState } from "react";
|
|
import {
|
|
Modal,
|
|
ModalOverlay,
|
|
ModalContent,
|
|
ModalHeader,
|
|
ModalBody,
|
|
ModalFooter,
|
|
Button,
|
|
Spinner,
|
|
} from "@chakra-ui/react";
|
|
import BGimage from "../../assets/images/form.webp";
|
|
import formx from "../../assets/images/formx.png";
|
|
import discord from "../../assets/images/contactDiscord.png";
|
|
import forml from "../../assets/images/forml.png";
|
|
import { Link } from "react-router-dom";
|
|
import ReCAPTCHA from "react-google-recaptcha";
|
|
import { contactUs } from "../../service/api";
|
|
|
|
const Contact = () => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
control,
|
|
formState: { errors },
|
|
} = useForm();
|
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [recaptchaToken, setRecaptchaToken] = useState(null);
|
|
const [captchaError, setCaptchaError] = useState("");
|
|
|
|
// const email = "rubix@gmail.com";
|
|
|
|
const handleVerify = (token) => {
|
|
setRecaptchaToken(token);
|
|
};
|
|
|
|
console.log(errors);
|
|
const onSubmit = async (data) => {
|
|
// if (!recaptchaToken) {
|
|
// setCaptchaError("Please complete the reCAPTCHA.");
|
|
// } else {
|
|
// setIsLoading(true);
|
|
|
|
// reset();
|
|
// }
|
|
try {
|
|
const result = await contactUs(data);
|
|
if (result.status) {
|
|
onOpen();
|
|
}
|
|
setIsLoading(false);
|
|
} catch (error) {
|
|
setIsLoading(false);
|
|
setCaptchaError("Failed to submit the form. Please try again.");
|
|
console.log(error);
|
|
}
|
|
reset();
|
|
};
|
|
|
|
useEffect(() => {
|
|
window.scrollTo(0, 0);
|
|
}, []);
|
|
|
|
return (
|
|
<Box
|
|
backgroundImage={`url(${BGimage})`}
|
|
paddingTop={"4rem"}
|
|
backgroundRepeat={"no-repeat"}
|
|
backgroundSize={"cover"}
|
|
backgroundPosition={"0 25%"}
|
|
>
|
|
<Container
|
|
maxW="container.xl"
|
|
backgroundColor={"transparent"}
|
|
display={"flex"}
|
|
justifyContent={"start"}
|
|
alignItems={"baseline"}
|
|
gap={"2rem"}
|
|
paddingTop={"5rem"}
|
|
sx={{
|
|
"@media (max-width: 2160px)": {},
|
|
"@media (max-width: 1440px)": {},
|
|
"@media (max-width: 1080px)": {
|
|
flexDirection: "column",
|
|
paddingTop: "2rem",
|
|
},
|
|
"@media (max-width: 1024px)": {
|
|
flexDirection: "column",
|
|
},
|
|
"@media (max-width: 820px)": {},
|
|
"@media (max-width: 535px)": {},
|
|
"@media (max-width: 375px)": {},
|
|
}}
|
|
>
|
|
<Box
|
|
textAlign={"left"}
|
|
left={"0"}
|
|
right={"0"}
|
|
marginLeft={"auto"}
|
|
marginRight={"auto"}
|
|
zIndex={"99"}
|
|
backgroundColor={"#transparent"}
|
|
// width={"30%"}
|
|
padding={"4rem"}
|
|
minH={"583px"}
|
|
// flex={"1"}
|
|
sx={{
|
|
"@media (max-width: 2160px)": {
|
|
width: "60%",
|
|
minH: "621px",
|
|
},
|
|
"@media (max-width: 1440px)": {
|
|
width: "60%",
|
|
},
|
|
"@media (max-width: 1080px)": {
|
|
width: "42%",
|
|
minH: "490px",
|
|
},
|
|
"@media (max-width: 820px)": { width: "55%" },
|
|
"@media (max-width: 535px)": {
|
|
width: "95%",
|
|
padding: "10px",
|
|
minH: "auto",
|
|
},
|
|
"@media (max-width: 375px)": {},
|
|
}}
|
|
>
|
|
<Badge
|
|
textAlign={"left"}
|
|
background={"transparent"}
|
|
color={"#fff"}
|
|
textTransform={"capitalize"}
|
|
fontWeight={"500"}
|
|
fontFamily={"Poppins"}
|
|
fontSize={"18px"}
|
|
marginBottom={"10px"}
|
|
>
|
|
Contact Us
|
|
</Badge>
|
|
<Box textAlign={"left"} marginBottom={"3rem"}>
|
|
<Text
|
|
as={"h2"}
|
|
className="rubix-text-title"
|
|
fontWeight={"600"}
|
|
textTransform={"capitalize"}
|
|
lineHeight={"47px"}
|
|
sx={{
|
|
"@media (max-width: 1024px)": {},
|
|
"@media (max-width: 768px)": {},
|
|
"@media (max-width: 535px)": {},
|
|
}}
|
|
>
|
|
Start reaching <br /> your digital goals
|
|
</Text>
|
|
</Box>
|
|
<Box marginBottom={"3em"}>
|
|
<Badge
|
|
textAlign={"left"}
|
|
background={"transparent"}
|
|
color={"#fff"}
|
|
textTransform={"capitalize"}
|
|
fontWeight={"500"}
|
|
fontFamily={"Poppins"}
|
|
fontSize={"18px"}
|
|
>
|
|
Social Media
|
|
</Badge>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
marginTop={"20px"}
|
|
gap={"2rem"}
|
|
>
|
|
<Link to="https://twitter.com/rubixchain" target="_blank">
|
|
<Image src={formx} />
|
|
</Link>
|
|
<Link
|
|
to="https://www.linkedin.com/company/rubixnet/"
|
|
target="_blank"
|
|
>
|
|
<Image src={forml} />
|
|
</Link>
|
|
<Link to="https://discord.com/invite/MNYPfhFEEk" target="_blank">
|
|
<Image src={discord} width={"46px"} height={"46px"} />
|
|
</Link>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* <Box marginBottom={"3rem"}>
|
|
<Badge
|
|
textAlign={"left"}
|
|
background={"transparent"}
|
|
color={"#fff"}
|
|
textTransform={"capitalize"}
|
|
fontWeight={"500"}
|
|
fontFamily={"Poppins"}
|
|
fontSize={"18px"}
|
|
padding={"0px"}
|
|
>
|
|
Chat to us
|
|
</Badge>
|
|
<Box marginTop={"10px"}>
|
|
<Link
|
|
to={`mailto:${email}`}
|
|
style={{
|
|
fontSize: "18px",
|
|
color: "#969696",
|
|
fontWeight: "400",
|
|
fontFamily: "Poppins",
|
|
}}
|
|
>
|
|
rubix@gmail.com
|
|
</Link>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box>
|
|
<Badge
|
|
textAlign={"left"}
|
|
background={"transparent"}
|
|
color={"#fff"}
|
|
textTransform={"capitalize"}
|
|
fontWeight={"500"}
|
|
fontFamily={"Poppins"}
|
|
fontSize={"18px"}
|
|
padding={"0px"}
|
|
>
|
|
Call us
|
|
</Badge>
|
|
<Box marginTop={"10px"}>
|
|
<Text
|
|
style={{
|
|
fontSize: "18px",
|
|
color: "#969696",
|
|
fontWeight: "400",
|
|
fontFamily: "Poppins",
|
|
}}
|
|
>
|
|
914 578 1245
|
|
</Text>
|
|
</Box>
|
|
</Box> */}
|
|
</Box>
|
|
|
|
{/* Form */}
|
|
<Container
|
|
maxW="container.xl"
|
|
textAlign={"left"}
|
|
marginLeft={"auto"}
|
|
marginRight={"auto"}
|
|
backgroundColor={"transparent"}
|
|
sx={{
|
|
"@media (max-width: 1080px)": {
|
|
maxW: "container.lg",
|
|
},
|
|
"@media (max-width: 768px)": {},
|
|
"@media (max-width: 535px)": {},
|
|
}}
|
|
// flex={"1"}
|
|
>
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<Box
|
|
padding={"0rem 2rem 0rem 2rem"}
|
|
gap={"20px"}
|
|
sx={{
|
|
"@media (max-width: 1024px)": {},
|
|
"@media (max-width: 768px)": {},
|
|
"@media (max-width: 535px)": {
|
|
flexDirection: "column",
|
|
gap: "0rem",
|
|
padding: "0rem",
|
|
},
|
|
}}
|
|
>
|
|
<Box
|
|
textAlign={"left"}
|
|
display={"flex"}
|
|
justifyContent={"space-between"}
|
|
alignItems={"center"}
|
|
gap={"20px"}
|
|
sx={{
|
|
"@media (max-width: 2160px)": {},
|
|
"@media (max-width: 1440px)": {},
|
|
"@media (max-width: 1080px)": {},
|
|
"@media (max-width: 1024px)": {
|
|
flexDirection: "column",
|
|
},
|
|
"@media (max-width: 820px)": {},
|
|
"@media (max-width: 535px)": {
|
|
gap: "0px",
|
|
},
|
|
"@media (max-width: 375px)": {},
|
|
}}
|
|
>
|
|
<Box width={"100%"} minH={"120px"}>
|
|
<label
|
|
style={{
|
|
fontSize: "20px",
|
|
color: "#DFDFDF",
|
|
fontFamily: "Poppins",
|
|
fontWeight: "400",
|
|
}}
|
|
>
|
|
First Name*
|
|
</label>
|
|
<input
|
|
style={{
|
|
width: "100%",
|
|
marginBottom: "5px",
|
|
background: "#1E1E23",
|
|
color: "#fff",
|
|
padding: "10px",
|
|
marginTop: "10px",
|
|
borderRadius: "5px",
|
|
}}
|
|
// placeholder="First Name"
|
|
{...register("firstname", {
|
|
pattern: {
|
|
value: /^[A-Za-z]+$/i,
|
|
message:
|
|
"Please enter a valid First Name with only letters",
|
|
},
|
|
required: "First Name is required",
|
|
maxLength: 20,
|
|
})}
|
|
/>
|
|
{errors.firstname && (
|
|
<p style={{ fontSize: "13px", color: "red" }}>
|
|
{errors.firstname.message}
|
|
</p>
|
|
)}
|
|
</Box>
|
|
<Box width={"100%"} minH={"120px"}>
|
|
<label
|
|
style={{
|
|
fontSize: "20px",
|
|
color: "#DFDFDF",
|
|
fontFamily: "Poppins",
|
|
fontWeight: "400",
|
|
}}
|
|
>
|
|
Last Name*
|
|
</label>
|
|
<input
|
|
style={{
|
|
width: "100%",
|
|
marginBottom: "5px",
|
|
background: "#1E1E23",
|
|
color: "#fff",
|
|
padding: "10px",
|
|
marginTop: "10px",
|
|
borderRadius: "5px",
|
|
}}
|
|
// placeholder="Last Name"
|
|
{...register("lastname", {
|
|
pattern: {
|
|
value: /^[A-Za-z]+$/i,
|
|
message:
|
|
"Please enter a valid Last Name with only letters",
|
|
},
|
|
required: "Last Name is required",
|
|
})}
|
|
/>
|
|
{errors.lastname && (
|
|
<p style={{ fontSize: "13px", color: "red" }}>
|
|
{errors.lastname.message}
|
|
</p>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box
|
|
textAlign={"left"}
|
|
display={"flex"}
|
|
justifyContent={"space-between"}
|
|
alignItems={"center"}
|
|
gap={"20px"}
|
|
sx={{
|
|
"@media (max-width: 2160px)": {},
|
|
"@media (max-width: 1440px)": {},
|
|
"@media (max-width: 1080px)": {},
|
|
"@media (max-width: 1024px)": {
|
|
flexDirection: "column",
|
|
},
|
|
"@media (max-width: 820px)": {},
|
|
"@media (max-width: 535px)": {
|
|
gap: "0px",
|
|
},
|
|
"@media (max-width: 375px)": {},
|
|
}}
|
|
>
|
|
<Box width={"100%"} minH={"120px"}>
|
|
<label
|
|
style={{
|
|
fontSize: "20px",
|
|
color: "#DFDFDF",
|
|
fontFamily: "Poppins",
|
|
fontWeight: "400",
|
|
}}
|
|
>
|
|
Email*
|
|
</label>
|
|
<input
|
|
style={{
|
|
width: "100%",
|
|
marginBottom: "5px",
|
|
background: "#1E1E23",
|
|
color: "#fff",
|
|
padding: "10px",
|
|
marginTop: "10px",
|
|
borderRadius: "5px",
|
|
}}
|
|
// placeholder="Email"
|
|
type="email"
|
|
{...register("email", {
|
|
pattern: {
|
|
value: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
|
|
message: "Please enter a valid email address",
|
|
},
|
|
required: true,
|
|
})}
|
|
/>
|
|
{errors.email && (
|
|
<p style={{ fontSize: "13px", color: "red" }}>
|
|
{errors.email.message}
|
|
</p>
|
|
)}
|
|
</Box>
|
|
|
|
<Box width={"100%"} minH={"120px"}>
|
|
<label
|
|
style={{
|
|
fontSize: "20px",
|
|
color: "#DFDFDF",
|
|
fontFamily: "Poppins",
|
|
fontWeight: "400",
|
|
}}
|
|
>
|
|
Phone*
|
|
</label>
|
|
<input
|
|
style={{
|
|
width: "100%",
|
|
marginBottom: "5px",
|
|
background: "#1E1E23",
|
|
color: "#fff",
|
|
padding: "10px",
|
|
marginTop: "10px",
|
|
borderRadius: "5px",
|
|
}}
|
|
// placeholder="Phone"
|
|
type="tel"
|
|
{...register("phone", {
|
|
pattern: {
|
|
value: /^[0-9]*$/,
|
|
message: "Phone number should contain only digits",
|
|
},
|
|
minLength: {
|
|
value: 10,
|
|
message: "Phone number should be at least 10 digits",
|
|
},
|
|
maxLength: {
|
|
value: 10,
|
|
message: "Phone number should not exceed 10 digits",
|
|
},
|
|
required: true,
|
|
})}
|
|
/>
|
|
{errors.phone && (
|
|
<p style={{ fontSize: "13px", color: "red" }}>
|
|
{errors.phone.message}
|
|
</p>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
<Box width={"100%"} minH={"120px"}>
|
|
<label
|
|
style={{
|
|
fontSize: "20px",
|
|
color: "#DFDFDF",
|
|
fontFamily: "Poppins",
|
|
fontWeight: "400",
|
|
}}
|
|
>
|
|
Choose type of inquiry
|
|
</label>
|
|
|
|
<Controller
|
|
name="typeofenquiry"
|
|
control={control}
|
|
defaultValue=""
|
|
rules={{ required: "Please select an option" }}
|
|
render={({ field }) => (
|
|
<select
|
|
{...field}
|
|
placeholder="Select option"
|
|
style={{
|
|
width: "100%",
|
|
marginBottom: "5px",
|
|
background: "#1E1E23",
|
|
color: "#fff",
|
|
padding: "15px",
|
|
marginTop: "10px",
|
|
borderRadius: "5px",
|
|
textAlign: "left",
|
|
}}
|
|
>
|
|
<option value="" disabled>
|
|
Select Options
|
|
</option>
|
|
<option value="general">General</option>
|
|
<option value="support">Support</option>
|
|
<option value="investing">Investing</option>
|
|
<option value="events">Events</option>
|
|
<option value="media">Media</option>
|
|
</select>
|
|
)}
|
|
/>
|
|
{errors.typeofenquiry && (
|
|
<p style={{ fontSize: "13px", color: "red" }}>
|
|
{errors.typeofenquiry.message}
|
|
</p>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
<Container
|
|
maxW="container.lg"
|
|
padding={"0rem 2rem 0rem 2rem"}
|
|
textAlign={"left"}
|
|
sx={{
|
|
"@media (max-width: 1024px)": {},
|
|
"@media (max-width: 768px)": {},
|
|
"@media (max-width: 535px)": {
|
|
padding: "0rem",
|
|
},
|
|
}}
|
|
>
|
|
<label
|
|
style={{
|
|
fontSize: "20px",
|
|
color: "#DFDFDF",
|
|
fontFamily: "Poppins",
|
|
fontWeight: "400",
|
|
}}
|
|
>
|
|
Message*
|
|
</label>
|
|
<Textarea
|
|
// placeholder="Type your message here..."
|
|
size="xl"
|
|
resize="vertical"
|
|
minH={"200px"}
|
|
padding={"1rem"}
|
|
color={"#fff"}
|
|
backgroundColor={"#1E1E23"}
|
|
border={"none"}
|
|
marginTop={"10px"}
|
|
marginBottom={"30px"}
|
|
borderRadius="5px"
|
|
type="text"
|
|
required
|
|
{...register("message", { required: true })}
|
|
/>
|
|
{/* <ReCAPTCHA
|
|
style={{ display: "grid", placeContent: "left" }}
|
|
sitekey="6LfV87gpAAAAAMAAhyjTuaVjS7y6T_dXtMiLhsGJ"
|
|
onChange={handleVerify}
|
|
/>
|
|
{captchaError && (
|
|
<div style={{ color: "red", fontSize: "1.2rem" }}>
|
|
{captchaError}
|
|
</div>
|
|
)} */}
|
|
<Button
|
|
type="submit"
|
|
border={"none"}
|
|
isLoading={isLoading}
|
|
loadingText="Submitting"
|
|
fontFamily={"poppins"}
|
|
fontSize={"22px"}
|
|
variant="outline"
|
|
margin={"3rem 0"}
|
|
background={"#DE858E"}
|
|
minWidth={"210px"}
|
|
color={"#fff"}
|
|
fontWeight={"400"}
|
|
minHeight={"55px"}
|
|
padding={"0rem 2rem 0rem 2rem"}
|
|
_hover={{
|
|
background: "DE858E",
|
|
color: "#fff",
|
|
}}
|
|
>
|
|
{isLoading ? <Spinner /> : "Submit"}
|
|
</Button>
|
|
</Container>
|
|
</form>
|
|
</Container>
|
|
</Container>
|
|
|
|
<Modal isOpen={isOpen}>
|
|
<ModalOverlay />
|
|
<ModalContent backgroundColor="#1E1E23" color="#fff">
|
|
<ModalHeader>Success!</ModalHeader>
|
|
<ModalBody>Your form has been submitted successfully.</ModalBody>
|
|
<ModalFooter>
|
|
<Button
|
|
backgroundColor={"#DE858E"}
|
|
color="#fff"
|
|
onClick={onClose}
|
|
_hover={{
|
|
backgroundColor: "#DE858E",
|
|
color: "#fff",
|
|
}}
|
|
>
|
|
Close
|
|
</Button>
|
|
</ModalFooter>
|
|
</ModalContent>
|
|
</Modal>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Contact;
|