mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-27 23:45:50 +00:00
611 lines
19 KiB
JavaScript
611 lines
19 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,
|
|
} from "@chakra-ui/react";
|
|
import BGimage from "../../assets/images/form.webp";
|
|
import formx from "../../assets/images/formx.png";
|
|
import formfb from "../../assets/images/formfb.png";
|
|
import forml from "../../assets/images/forml.png";
|
|
import { Link } from "react-router-dom";
|
|
|
|
const Contact = () => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
control,
|
|
formState: { errors },
|
|
} = useForm();
|
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const email = "rubix@gmail.com";
|
|
|
|
const onSubmit = async (data) => {
|
|
// console.log(data);
|
|
setIsLoading(true);
|
|
try {
|
|
const formdata = new FormData();
|
|
formdata.append("Email", data.Email);
|
|
formdata.append("Phone", data.Phone);
|
|
formdata.append("Text", data.Text);
|
|
formdata.append("firstName", data.firstName);
|
|
formdata.append("lastName", data.lastName);
|
|
formdata.append(
|
|
"subject",
|
|
`Thank you for cantact us | ${data.firstName + " " + data.lastName}`
|
|
);
|
|
// formdata.append("html", html);
|
|
// await contactUs(formdata);
|
|
setIsLoading(false);
|
|
} catch (error) {
|
|
setIsLoading(false);
|
|
console.log(error);
|
|
}
|
|
reset();
|
|
onOpen();
|
|
};
|
|
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",
|
|
},
|
|
"@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" },
|
|
"@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">
|
|
<Image src={formx} />
|
|
</Link>
|
|
<Link to="https://www.facebook.com/RubixChain">
|
|
<Image src={formfb} />
|
|
</Link>
|
|
<Link to="https://www.linkedin.com/company/rubixnet/">
|
|
<Image src={forml} />
|
|
</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: true,
|
|
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: true,
|
|
})}
|
|
/>
|
|
{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="selectOption"
|
|
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="option1">Option 1</option>
|
|
<option value="option2">Option 2</option>
|
|
<option value="option3">Option 3</option>
|
|
</select>
|
|
)}
|
|
/>
|
|
{errors.selectOption && (
|
|
<p style={{ fontSize: "13px", color: "red" }}>
|
|
{errors.selectOption.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"}
|
|
borderRadius="5px"
|
|
type="text"
|
|
required
|
|
{...register("Text", { required: true })}
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
border={"none"}
|
|
isLoading={isLoading}
|
|
loadingText="Submitting"
|
|
fontFamily={"poppins"}
|
|
fontSize={"22px"}
|
|
variant="outline"
|
|
margin={"4rem 0"}
|
|
background={"#DE858E"}
|
|
minWidth={"210px"}
|
|
color={"#fff"}
|
|
fontWeight={"400"}
|
|
minHeight={"55px"}
|
|
padding={"0rem 2rem 0rem 2rem"}
|
|
_hover={{
|
|
background: "DE858E",
|
|
color: "#fff",
|
|
}}
|
|
>
|
|
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;
|