112 lines
3.2 KiB
JavaScript
112 lines
3.2 KiB
JavaScript
import {
|
|
Box,
|
|
Button,
|
|
FormControl,
|
|
FormHelperText,
|
|
FormLabel,
|
|
Heading,
|
|
Input,
|
|
SimpleGrid,
|
|
Textarea,
|
|
} from "@chakra-ui/react";
|
|
import React from "react";
|
|
import HeroHeader from "../Components/HeroHeader";
|
|
|
|
const Contact = () => {
|
|
return (
|
|
<Box>
|
|
<HeroHeader
|
|
title="Contact Us"
|
|
content="Fill out the form below and we will get back to you soon."
|
|
/>
|
|
<Box w={"100%"} h={"100%"} p={36} pt={16} pb={20}>
|
|
<Box p={14} borderRadius={'5px'}
|
|
boxShadow={
|
|
"rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;"
|
|
}
|
|
>
|
|
<Heading fontSize={"26px"} textAlign={"center"} mb={"3rem"}>
|
|
Send as a Message
|
|
</Heading>
|
|
<form>
|
|
<SimpleGrid columns={2} spacingX="40px" spacingY="20px">
|
|
<FormControl>
|
|
<FormLabel
|
|
color={"#404040"}
|
|
fontSize={"16px"}
|
|
fontWeight={"400"}
|
|
>
|
|
First Name *
|
|
</FormLabel>
|
|
<Input focusBorderColor="#002F0F" type="email" />
|
|
</FormControl>
|
|
<FormControl>
|
|
<FormLabel
|
|
color={"#404040"}
|
|
fontSize={"16px"}
|
|
fontWeight={"400"}
|
|
>
|
|
Last Name *
|
|
</FormLabel>
|
|
<Input focusBorderColor="#002F0F" type="email" />
|
|
</FormControl>
|
|
<FormControl>
|
|
<FormLabel
|
|
color={"#404040"}
|
|
fontSize={"16px"}
|
|
fontWeight={"400"}
|
|
>
|
|
E-mail Address *
|
|
</FormLabel>
|
|
<Input focusBorderColor="#002F0F" type="email" />
|
|
</FormControl>
|
|
<FormControl>
|
|
<FormLabel
|
|
color={"#404040"}
|
|
fontSize={"16px"}
|
|
fontWeight={"400"}
|
|
>
|
|
Phone Number *
|
|
</FormLabel>
|
|
<Input focusBorderColor="#002F0F" type="email" />
|
|
</FormControl>
|
|
</SimpleGrid>
|
|
<FormControl w={"100%"} mt={"20px"}>
|
|
<FormLabel color={"#404040"} fontSize={"18px"} fontWeight={"400"}>
|
|
Message *
|
|
</FormLabel>
|
|
<Textarea
|
|
focusBorderColor="#002F0F"
|
|
h={"180px"}
|
|
resize={"none"}
|
|
/>
|
|
</FormControl>
|
|
<Box textAlign={"center"}>
|
|
<Button
|
|
backgroundColor={"#002F0F"}
|
|
color={"#fff"}
|
|
ps={"5rem"}
|
|
pe={"5rem"}
|
|
pb={1}
|
|
rounded={"xl"}
|
|
mt={"40px"}
|
|
size={"lg"}
|
|
fontSize={"md"}
|
|
_hover={{
|
|
backgroundColor: "#002F0F",
|
|
transform: "translateY(-6px)",
|
|
}} // Ensuring hover background color remains the same
|
|
transition={"0.5s all"}
|
|
>
|
|
Submit
|
|
</Button>
|
|
</Box>
|
|
</form>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Contact;
|