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

api intergration

Browse Source
This commit is contained in:
npcdazai
2024-09-25 13:49:58 +05:30
parent 0298122dad
commit f360679ec9
5 changed files with 167 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/Form.jsx
View File

@@ -23,11 +23,16 @@ import { FiPaperclip } from "react-icons/fi";
import captcha from "../assets/captcha.png";
import axios from "axios";
import ReCAPTCHA from "react-google-recaptcha";
import { Spinner } from "@chakra-ui/react";
import { TbNumber2Small } from "react-icons/tb";
const Form = () => {
const [sliderValue, setSliderValue] = useState(0);
const [fileAdded, setFileAdded] = useState(false);
const [captchaToken, setCaptchaToken] = useState(null);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(null);
const [formError, setformError] = useState(null);
const {
register,
@@ -35,31 +40,54 @@ const Form = () => {
formState: { errors },
setValue,
trigger,
reset,
} = useForm();
const onSubmit = (data) => {
if (!captchaToken) {
console.log("Please complete the CAPTCHA");
return;
}
const onSubmit = async (data) => {
// if (!captchaToken) {
// console.log("Please complete the CAPTCHA");
// return;
// }
const formData = { ...data, captchaToken };
console.log(formData);
setLoading(true);
setformError(null);
try {
const response = axios.post("/api/submit", formData, {
headers: {
"Content-Type": "application/json",
},
});
console.log(response.data); // Handle the response from the backend
const response = await axios.post(
"https://contact.wdipl.com/api/v1/mails/client-enquiry-for-idea",
formData,
{
headers: {
"Content-Type": "application/json",
},
}
);
console.log(response);
if (response.status === 200) {
console.log(response);
setSuccess("Your message has been sent successfully");
setformError(null);
reset();
setSliderValue(0);
} else {
setformError("Failed to send message");
}
} catch (error) {
console.error("Error submitting the form", error);
setformError("There was an error submitting the form.");
} finally {
setTimeout(() => {
setLoading(false);
}, 3000);
}
};
const onCaptchaChange = (value) => {
setCaptchaToken(value);
console.log("Captcha value:", value); // The token to send to the backend
console.log("Captcha value:", value);
};
const handleClick = () => {
@@ -141,8 +169,8 @@ const Form = () => {
},
{
label: "Enter your contact number",
type: "text",
name: "contact",
type: "number",
name: "contactnumber",
},
].map((field, index) => (
<Box w="100%" key={index}>
@@ -183,7 +211,7 @@ const Form = () => {
{
label: "Where did you hear about us? *",
options: ["Source 1", "Source 2", "Source 3"],
name: "source",
name: "aboutus",
},
].map((selectField, index) => (
<Box w="100%" key={index + 3}>
@@ -220,7 +248,7 @@ const Form = () => {
Tell us about your project and business challenge.
</FormLabel>
<Textarea
{...register("projectDetails", {
{...register("project_challenges", {
required: "Project details are required",
})}
border="1px solid #E5195E"
@@ -230,9 +258,9 @@ const Form = () => {
color="white"
minH="65px"
/>
{errors.projectDetails && (
{errors.project_challenges && (
<Text color="red.400" mt={2}>
{errors.projectDetails.message}
{errors.project_challenges.message}
</Text>
)}
</Box>
@@ -250,7 +278,7 @@ const Form = () => {
When would you like to start
</FormLabel>
<Select
{...register("startDate", {
{...register("would_like_start", {
required: "Start date is required",
})}
border="1px solid #E5195E"
@@ -262,9 +290,9 @@ const Form = () => {
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</Select>
{errors.startDate && (
{errors.would_like_start && (
<Text color="red.400" mt={2}>
{errors.startDate.message}
{errors.would_like_start.message}
</Text>
)}
</Box>
@@ -401,10 +429,10 @@ const Form = () => {
</Text>
)} */}
<Box>
<ReCAPTCHA
{/* <ReCAPTCHA
sitekey="6LcAjUYqAAAAALCkNuAJKR3tT1D1QqWzXo-MECPE"
onChange={onCaptchaChange}
/>
/> */}
</Box>
</Box>
@@ -417,8 +445,21 @@ const Form = () => {
borderRadius="0px"
type="submit"
onClick={handleSubmit(onSubmit)}
isLoading={loading}
_hover={{ bg: "#D41554" }}
disabled={loading} // Disable button when loading
>
Submit
{loading ? (
<Spinner
thickness="4px"
speed="0.65s"
emptyColor="gray.200"
color="blue.500"
size="xl"
/>
) : (
"Submit"
)}
</Button>
</Box>
</FormControl>

28
src/components/OS/AIML.jsx
View File

@@ -15,9 +15,7 @@ const techStack = [
// { name: "Tableau", image: tableau },
// { name: "Machine Learning", image: machineLearning },
];
const backend = [
{ name: "java", image: java },
];
const backend = [{ name: "java", image: java }];
const Hybrid = () => {
return (
@@ -53,7 +51,13 @@ const Hybrid = () => {
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
_hover={{
filter: "grayscale(0%)",
bgColor: "#1F1F1F",
transform: "translateY(-5px)",
transitionDuration: "0.4s",
transitionTimingFunction: "ease-in-out",
}}
>
<Image src={tech.image} h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -81,7 +85,13 @@ const Hybrid = () => {
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
_hover={{
filter: "grayscale(0%)",
bgColor: "#1F1F1F",
transform: "translateY(-5px)",
transitionDuration: "0.4s",
transitionTimingFunction: "ease-in-out",
}}
>
<Image src={tech.image} h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -116,7 +126,13 @@ const Hybrid = () => {
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
_hover={{
filter: "grayscale(0%)",
bgColor: "#1F1F1F",
transform: "translateY(-5px)",
transitionDuration: "0.4s",
transitionTimingFunction: "ease-in-out",
}}
>
<Image src={tech.image} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">

32
src/components/OS/Android.jsx
View File

@@ -56,7 +56,13 @@ const Hybrid = () => {
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
_hover={{
filter: "grayscale(0%)",
bgColor: "#1F1F1F",
transform: "translateY(-5px)",
transitionDuration: "0.4s",
transitionTimingFunction: "ease-in-out",
}}
>
<Image src={tech.image} h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -84,7 +90,13 @@ const Hybrid = () => {
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
_hover={{
filter: "grayscale(0%)",
bgColor: "#1F1F1F",
transform: "translateY(-5px)",
transitionDuration: "0.4s",
transitionTimingFunction: "ease-in-out",
}}
>
<Image src={tech.image} h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -119,7 +131,13 @@ const Hybrid = () => {
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
_hover={{
filter: "grayscale(0%)",
bgColor: "#1F1F1F",
transform: "translateY(-5px)",
transitionDuration: "0.4s",
transitionTimingFunction: "ease-in-out",
}}
>
<Image src={tech.image} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -147,7 +165,13 @@ const Hybrid = () => {
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
_hover={{
filter: "grayscale(0%)",
bgColor: "#1F1F1F",
transform: "translateY(-5px)",
transitionDuration: "0.4s",
transitionTimingFunction: "ease-in-out",
}}
>
<Image src={tech.image} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">

31
src/components/OS/Hybrid.jsx
View File

@@ -6,8 +6,8 @@ import codeIgniter from "../../assets/codeigniter.png";
import java from "../../assets/java.png";
import angular from "../../assets/anugular.png";
import vue from "../../assets/vue.png";
import lavarel from "../../assets/lavarel.png"
import nodejs from "../../assets/nodejs.png"
import lavarel from "../../assets/lavarel.png";
import nodejs from "../../assets/nodejs.png";
import fluter from "../../assets/fluter.png";
import reactNative from "../../assets/reactNative.png";
const techStack = [
@@ -21,11 +21,10 @@ const techStack = [
{ name: "Fluter", image: fluter },
];
const backEnd = [
// { name: "lavarel", image: lavarel },
// { name: "node", image: nodejs },
{ name: "Java", image: java },
// { name: "Angular", image: angular },
// { name: "Vue", image: vue },
@@ -65,7 +64,13 @@ const Hybrid = () => {
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
_hover={{
filter: "grayscale(0%)",
bgColor: "#1F1F1F",
transform: "translateY(-5px)",
transitionDuration: "0.4s",
transitionTimingFunction: "ease-in-out",
}}
>
<Image src={tech.image} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -93,7 +98,13 @@ const Hybrid = () => {
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
_hover={{
filter: "grayscale(0%)",
bgColor: "#1F1F1F",
transform: "translateY(-5px)",
transitionDuration: "0.4s",
transitionTimingFunction: "ease-in-out",
}}
>
<Image src={tech.image} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -128,7 +139,13 @@ const Hybrid = () => {
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
_hover={{
filter: "grayscale(0%)",
bgColor: "#1F1F1F",
transform: "translateY(-5px)",
transitionDuration: "0.4s",
transitionTimingFunction: "ease-in-out",
}}
>
<Image src={tech.image} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">

32
src/components/OS/IOS.jsx
View File

@@ -57,7 +57,13 @@ const Hybrid = () => {
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
_hover={{
filter: "grayscale(0%)",
bgColor: "#1F1F1F",
transform: "translateY(-5px)",
transitionDuration: "0.4s",
transitionTimingFunction: "ease-in-out",
}}
>
<Image src={tech.image} h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -85,7 +91,13 @@ const Hybrid = () => {
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
_hover={{
filter: "grayscale(0%)",
bgColor: "#1F1F1F",
transform: "translateY(-5px)",
transitionDuration: "0.4s",
transitionTimingFunction: "ease-in-out",
}}
>
<Image src={tech.image} h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -120,7 +132,13 @@ const Hybrid = () => {
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
_hover={{
filter: "grayscale(0%)",
bgColor: "#1F1F1F",
transform: "translateY(-5px)",
transitionDuration: "0.4s",
transitionTimingFunction: "ease-in-out",
}}
>
<Image src={tech.image} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
@@ -148,7 +166,13 @@ const Hybrid = () => {
justifyContent="space-between"
alignItems="center"
filter="grayscale(100%)"
_hover={{ filter: "grayscale(0%)", bgColor: "#1F1F1F" }}
_hover={{
filter: "grayscale(0%)",
bgColor: "#1F1F1F",
transform: "translateY(-5px)",
transitionDuration: "0.4s",
transitionTimingFunction: "ease-in-out",
}}
>
<Image src={tech.image} w="45.31px" h="50px" />
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">