Siddhesh.More/wdi-landing-page
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

NAN

Browse Source
This commit is contained in:
npcdazai
2024-09-25 19:13:52 +05:30
parent d2a2bafd2c
commit fcb11548e1
2 changed files with 294 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -9,5 +9,6 @@
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
</body> </body>
</html> </html>

574
src/components/Form.jsx
View File

@@ -1,4 +1,4 @@
import { useState } from "react"; import { useState, useRef, React, createRef } from "react";
import { import {
Box, Box,
Button, Button,
@@ -26,7 +26,6 @@ import ReCAPTCHA from "react-google-recaptcha";
import { Spinner } from "@chakra-ui/react"; import { Spinner } from "@chakra-ui/react";
import { TbNumber2Small } from "react-icons/tb"; import { TbNumber2Small } from "react-icons/tb";
const Form = () => { const Form = () => {
const [sliderValue, setSliderValue] = useState(0); const [sliderValue, setSliderValue] = useState(0);
const [fileAdded, setFileAdded] = useState(false); const [fileAdded, setFileAdded] = useState(false);
@@ -35,8 +34,7 @@ const Form = () => {
const [success, setSuccess] = useState(null); const [success, setSuccess] = useState(null);
const [formError, setformError] = useState(null); const [formError, setformError] = useState(null);
const [captchaValue, setCaptchaValue] = useState(null); const [captchaValue, setCaptchaValue] = useState(null);
const recaptchaRef = createRef();
const { const {
register, register,
handleSubmit, handleSubmit,
@@ -52,6 +50,9 @@ const Form = () => {
return; return;
} }
const recaptchaValue = recaptchaRef.current.getValue();
this.props.onSubmit(recaptchaValue);
const handleCaptcha = (value) => { const handleCaptcha = (value) => {
setCaptchaValue(value); setCaptchaValue(value);
}; };
@@ -125,7 +126,12 @@ const Form = () => {
}; };
return ( return (
<Container id="contact-section" maxW="container.2xl" p={{ base: "1rem", lg: "3rem" }} bg="black"> <Container
id="contact-section"
maxW="container.2xl"
p={{ base: "1rem", lg: "3rem" }}
bg="black"
>
<Box <Box
bg="#0F0F0F" bg="#0F0F0F"
display="flex" display="flex"
@@ -151,272 +157,272 @@ const Form = () => {
p={"2rem"} p={"2rem"}
w={"100%"} w={"100%"}
> >
{/* <form> */} {/* <form onSubmit={handleSubmit(onSubmit)}> */}
<FormControl <FormControl
display="flex" display="flex"
flexDirection="column" flexDirection="column"
alignItems="center" alignItems="center"
gap={4}
w="100%"
>
<Box
px={"4rem"}
display="grid"
gridTemplateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }}
gap={4} gap={4}
justifyItems="center"
w="100%" w="100%"
> >
{[ <Box
{ label: "Enter your name", type: "text", name: "name" }, px={"4rem"}
{ display="grid"
label: "Enter your email address", gridTemplateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }}
type: "email", gap={4}
name: "email", justifyItems="center"
}, w="100%"
{ >
label: "Enter your contact number", {[
type: "number", { label: "Enter your name", type: "text", name: "name" },
name: "contactnumber", {
}, label: "Enter your email address",
].map((field, index) => ( type: "email",
<Box w="100%" key={index}> name: "email",
<FormLabel color="#FFFFFF">{field.label}</FormLabel> },
<Input {
{...register(field.name, { label: "Enter your contact number",
required: `${field.label} is required`, type: "number",
pattern: name: "contactnumber",
field.type === "email" },
? /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/ ].map((field, index) => (
: undefined, <Box w="100%" key={index}>
})} <FormLabel color="#FFFFFF">{field.label}</FormLabel>
border="1px solid #E5195E" <Input
w="100%" {...register(field.name, {
focusBorderColor="#E5195E" required: `${field.label} is required`,
type={field.type} pattern:
backgroundColor="#E5195E0A" field.type === "email"
color="white" ? /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/
/> : undefined,
{errors[field.name] && ( })}
<Text color="red.400" mt={2}> border="1px solid #E5195E"
{errors[field.name].message} w="100%"
</Text> focusBorderColor="#E5195E"
)} type={field.type}
</Box> backgroundColor="#E5195E0A"
))} color="white"
{[ />
{ {errors[field.name] && (
label: "Select your country", <Text color="red.400" mt={2}>
options: ["Country 1", "Country 2", "Country 3"], {errors[field.name].message}
name: "country", </Text>
}, )}
{ </Box>
label: "Select your services", ))}
options: ["Service 1", "Service 2", "Service 3"], {[
name: "services", {
}, label: "Select your country",
{ options: ["Country 1", "Country 2", "Country 3"],
label: "Where did you hear about us? *", name: "country",
options: ["Source 1", "Source 2", "Source 3"], },
name: "aboutus", {
}, label: "Select your services",
].map((selectField, index) => ( options: ["Service 1", "Service 2", "Service 3"],
<Box w="100%" key={index + 3}> name: "services",
<FormLabel color="#FFFFFF">{selectField.label}</FormLabel> },
{
label: "Where did you hear about us? *",
options: ["Source 1", "Source 2", "Source 3"],
name: "aboutus",
},
].map((selectField, index) => (
<Box w="100%" key={index + 3}>
<FormLabel color="#FFFFFF">{selectField.label}</FormLabel>
<Select
{...register(selectField.name, {
required: `${selectField.label} is required`,
})}
border="1px solid #E5195E"
w="100%"
color="white"
placeholder="Select an option"
>
{selectField.options.map((option, idx) => (
<option
key={idx}
value={option.toLowerCase().replace(/\s/g, "")}
>
{option}
</option>
))}
</Select>
{errors[selectField.name] && (
<Text color="red.400" mt={2}>
{errors[selectField.name].message}
</Text>
)}
</Box>
))}
</Box>
<Box w="100%" px={"4rem"}>
<FormLabel color="#FFFFFF">
Tell us about your project and business challenge.
</FormLabel>
<Textarea
{...register("project_challenges", {
required: "Project details are required",
})}
border="1px solid #E5195E"
w="100%"
focusBorderColor="#E5195E"
backgroundColor="#E5195E0A"
color="white"
minH="65px"
/>
{errors.project_challenges && (
<Text color="red.400" mt={2}>
{errors.project_challenges.message}
</Text>
)}
</Box>
<Box
display="grid"
gridTemplateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }}
gap={5}
justifyItems="center"
w="100%"
px={"4rem"}
>
<Box w="100%">
<FormLabel color="#FFFFFF">
When would you like to start
</FormLabel>
<Select <Select
{...register(selectField.name, { {...register("would_like_start", {
required: `${selectField.label} is required`, required: "Start date is required",
})} })}
border="1px solid #E5195E" border="1px solid #E5195E"
w="100%" w="100%"
color="white" color="white"
placeholder="Select an option" placeholder="Select an option"
> >
{selectField.options.map((option, idx) => ( <option value="option1">Option 1</option>
<option <option value="option2">Option 2</option>
key={idx} <option value="option3">Option 3</option>
value={option.toLowerCase().replace(/\s/g, "")}
>
{option}
</option>
))}
</Select> </Select>
{errors[selectField.name] && ( {errors.would_like_start && (
<Text color="red.400" mt={2}> <Text color="red.400" mt={2}>
{errors[selectField.name].message} {errors.would_like_start.message}
</Text> </Text>
)} )}
</Box> </Box>
))}
</Box>
<Box w="100%" px={"4rem"}> <Box w="100%">
<FormLabel color="#FFFFFF"> <FormLabel color="#FFFFFF">Attach file</FormLabel>
Tell us about your project and business challenge. <Input
</FormLabel> id="fileInput"
<Textarea type="file"
{...register("project_challenges", { {...register("fileInput", {
required: "Project details are required", validate: (file) =>
})} file &&
border="1px solid #E5195E" ["image/png", "image/jpeg", "application/pdf"].includes(
w="100%" file.type
focusBorderColor="#E5195E" ) &&
backgroundColor="#E5195E0A" file.size <= 5 * 1024 * 1024
color="white" ? true
minH="65px" : "Invalid file type or size. Only PNG, JPEG, and PDF files under 5MB are allowed.",
/> })}
{errors.project_challenges && ( onChange={(e) => {
<Text color="red.400" mt={2}> handleChange(e);
{errors.project_challenges.message} setFileAdded(true);
</Text> }}
)} display="none"
</Box> />
<Button
<Box onClick={handleClick}
display="grid" leftIcon={<Icon as={FiPaperclip} />}
gridTemplateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }} variant="outline"
gap={5} bg="#E5195E12"
justifyItems="center" border="1px solid #E5195E"
w="100%" borderRadius="10px"
px={"4rem"} size="md"
> _hover={{ bg: "#E5195E12" }}
<Box w="100%"> w="100%"
<FormLabel color="#FFFFFF"> color="#fff"
When would you like to start >
</FormLabel> Attach file
<Select </Button>
{...register("would_like_start", { {errors.fileInput && (
required: "Start date is required", <Text color="red.400" mt={2}>
})} {errors.fileInput.message}
border="1px solid #E5195E" </Text>
w="100%" )}
color="white" {fileAdded && !errors.fileInput && (
placeholder="Select an option" <Text color="green.400" mt={2}>
> File added successfully!
<option value="option1">Option 1</option> </Text>
<option value="option2">Option 2</option> )}
<option value="option3">Option 3</option> </Box>
</Select>
{errors.would_like_start && (
<Text color="red.400" mt={2}>
{errors.would_like_start.message}
</Text>
)}
</Box> </Box>
<Box w="100%"> <Box w="100%" px={"4rem"} color="white" borderRadius="md">
<FormLabel color="#FFFFFF">Attach file</FormLabel> <Text mb={4} fontWeight="400" fontSize="18px">
<Input What is the budget of your project?
id="fileInput" </Text>
type="file" <Slider
{...register("fileInput", { aria-label="budget-slider"
validate: (file) => min={0}
file && max={500000}
["image/png", "image/jpeg", "application/pdf"].includes( step={100000}
file.type value={sliderValue}
) && onChange={(value) => {
file.size <= 5 * 1024 * 1024 setSliderValue(value);
? true setValue("budget", value);
: "Invalid file type or size. Only PNG, JPEG, and PDF files under 5MB are allowed.",
})}
onChange={(e) => {
handleChange(e);
setFileAdded(true);
}} }}
display="none" colorScheme="pink"
/>
<Button
onClick={handleClick}
leftIcon={<Icon as={FiPaperclip} />}
variant="outline"
bg="#E5195E12"
border="1px solid #E5195E"
borderRadius="10px"
size="md"
_hover={{ bg: "#E5195E12" }}
w="100%"
color="#fff"
> >
Attach file <SliderTrack bg="#999999" height="2px">
</Button> <SliderFilledTrack bg="#E5195E" />
{errors.fileInput && ( </SliderTrack>
<SliderThumb boxSize={4} bg="#E5195E"></SliderThumb>
</Slider>
{errors.budget && (
<Text color="red.400" mt={2}> <Text color="red.400" mt={2}>
{errors.fileInput.message} {errors.budget.message}
</Text> </Text>
)} )}
{fileAdded && !errors.fileInput && ( <Flex justify="space-between" mt={4}>
<Text color="green.400" mt={2}> {[0, 100000, 200000, 300000, 400000, 500000].map(
File added successfully! (val, index) => (
</Text>
)}
</Box>
</Box>
<Box w="100%" px={"4rem"} color="white" borderRadius="md">
<Text mb={4} fontWeight="400" fontSize="18px">
What is the budget of your project?
</Text>
<Slider
aria-label="budget-slider"
min={0}
max={500000}
step={100000}
value={sliderValue}
onChange={(value) => {
setSliderValue(value);
setValue("budget", value);
}}
colorScheme="pink"
>
<SliderTrack bg="#999999" height="2px">
<SliderFilledTrack bg="#E5195E" />
</SliderTrack>
<SliderThumb boxSize={4} bg="#E5195E"></SliderThumb>
</Slider>
{errors.budget && (
<Text color="red.400" mt={2}>
{errors.budget.message}
</Text>
)}
<Flex justify="space-between" mt={4}>
{[0, 100000, 200000, 300000, 400000, 500000].map(
(val, index) => (
<Box
key={index}
display="flex"
flexDirection="column"
alignItems="center"
>
<Box <Box
top="11px" key={index}
as="button" display="flex"
borderRadius="50%" flexDirection="column"
w="8.34px" alignItems="center"
h="8.34px" >
px="0" <Box
marginTop="-2.8rem" top="11px"
position="relative" as="button"
mb={"3rem"} borderRadius="50%"
bg={sliderValue >= val ? "#E5195E" : "gray.600"} w="8.34px"
></Box> h="8.34px"
<Text color="gray.400" fontSize="sm" mt={"-1.7rem"}> px="0"
{val / 1000}k marginTop="-2.8rem"
</Text> position="relative"
</Box> mb={"3rem"}
) bg={sliderValue >= val ? "#E5195E" : "gray.600"}
)} ></Box>
</Flex> <Text color="gray.400" fontSize="sm" mt={"-1.7rem"}>
</Box> {val / 1000}k
<Box </Text>
w="100%" </Box>
maxW="1186px" )
display="flex" )}
flexDirection="column" </Flex>
alignItems="center" </Box>
gap={4} <Box
py={4} w="100%"
> maxW="1186px"
{/* <FormLabel color="#FFFFFF"> display="flex"
flexDirection="column"
alignItems="center"
gap={4}
py={4}
>
{/* <FormLabel color="#FFFFFF">
Please type the letters below Please type the letters below
</FormLabel> </FormLabel>
<Textarea <Textarea
@@ -435,42 +441,48 @@ const Form = () => {
{errors.captcha.message} {errors.captcha.message}
</Text> </Text>
)} */} )} */}
<Box> <Box>
{/* <ReCAPTCHA {/* <ReCAPTCHA
sitekey='6Ldhwk4qAAAAAB-Xbyvp8BtmnyrBqBbpnC1skOb6' ref={recaptchaRef}
onChange={onCaptchaChange} sitekey="6LeJxU4qAAAAAO9S71T7dh4xc0N1g5vrfT0Vaoi-"
/> */} onChange={onCaptchaChange}
/> */}
{/* <Box
className="g-recaptcha"
// data-sitekey="6Lel4Z4UAAAAAOa8LO1Q9mqKRUiMYl_00o5mXJrR"
datasitekey="6Ldhwk4qAAAAAB-Xbyvp8BtmnyrBqBbpnC1skOb6"
></Box> */}
</Box>
</Box> </Box>
</Box>
<Box w="100%" display="flex" justifyContent="center"> <Box w="100%" display="flex" justifyContent="center">
<Button <Button
bg="#E5195E" bg="#E5195E"
w="100%" w="100%"
maxW="912px" maxW="912px"
h="55px" h="55px"
color="white" color="white"
borderRadius="0px" borderRadius="0px"
type="submit" type="submit"
onClick={handleSubmit(onSubmit)} onClick={handleSubmit(onSubmit)}
isLoading={loading} isLoading={loading}
_hover={{ bg: "#D41554" }} _hover={{ bg: "#D41554" }}
disabled={loading} // Disable button when loading disabled={loading} // Disable button when loading
> >
{loading ? ( {loading ? (
<Spinner <Spinner
thickness="4px" thickness="4px"
speed="0.65s" speed="0.65s"
emptyColor="gray.200" emptyColor="gray.200"
color="blue.500" color="blue.500"
size="xl" size="xl"
/> />
) : ( ) : (
"Submit" "Submit"
)} )}
</Button> </Button>
</Box> </Box>
</FormControl> </FormControl>
{/* </form> */} {/* </form> */}
</Box> </Box>
</Box> </Box>