New add on

package-lock.json

@@ -11,9 +11,11 @@
         "@chakra-ui/react": "^2.8.2",
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
+        "axios": "^1.7.7",
         "framer-motion": "^11.3.31",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-google-recaptcha": "^3.1.0",
         "react-hook-form": "^7.53.0",
         "react-icons": "^5.3.0",
         "react-router-dom": "^6.26.1"
@@ -2775,6 +2777,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -2790,6 +2797,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-plugin-macros": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
@@ -2946,6 +2963,17 @@
       "resolved": "https://registry.npmjs.org/color2k/-/color2k-2.0.3.tgz",
       "integrity": "sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog=="
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/compute-scroll-into-view": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.0.3.tgz",
@@ -3120,6 +3148,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@@ -3735,6 +3771,25 @@
         "node": ">=10"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -3744,6 +3799,19 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/framer-motion": {
       "version": "11.3.31",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.31.tgz",
@@ -4597,6 +4665,25 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4907,6 +4994,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4947,6 +5039,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-async-script": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
+      "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
     "node_modules/react-clientside-effect": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz",
@@ -4997,6 +5101,18 @@
         }
       }
     },
+    "node_modules/react-google-recaptcha": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
+      "integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
+      "dependencies": {
+        "prop-types": "^15.5.0",
+        "react-async-script": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.53.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.0.tgz",

package.json

@@ -13,9 +13,11 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "axios": "^1.7.7",
     "framer-motion": "^11.3.31",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "^7.53.0",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.1"

src/components/Connect.jsx

@@ -0,0 +1,38 @@
+import { Box, Container, Image, Text } from "@chakra-ui/react";
+import React from "react";
+import text from "../assets/textff.png";
+import circles from "../assets/wdisolar.png";
+import WdiButton from "../components/ui/Button";
+const Connect = () => {
+  return (
+    <Container
+      maxW="container.xxl"
+      bgColor="#1A1A1A"
+      display="flex"
+      flexDirection="row"
+      justifyContent="space-between"
+      p={"2.9rem"}
+      alignItems={"center"}
+      gap={6}
+    >
+      <Box
+        zIndex={1}
+        w="50%"
+        display="flex"
+        flexDirection="column"
+        alignItems="flex-start"
+        gap={4}
+      >
+        <Image src={text} h="140px" />
+        <Text fontSize="large" color="#FFFFFF" fontWeight={500}>
+          We put you at the centre of everything we do. Top class service and a
+          memorable experience awaits..
+        </Text>
+        <WdiButton Context="Let’s Talk" />
+      </Box>
+      <Image w="50%" zIndex={0} src={circles} />
+    </Container>
+  );
+};
+
+export default Connect;

src/components/Form.jsx

@@ -21,10 +21,13 @@ import {
 import { useForm } from "react-hook-form";
 import { FiPaperclip } from "react-icons/fi";
 import captcha from "../assets/captcha.png";
+import axios from "axios";
+import ReCAPTCHA from "react-google-recaptcha";
 
 const Form = () => {
   const [sliderValue, setSliderValue] = useState(0);
   const [fileAdded, setFileAdded] = useState(false);
+  const [captchaToken, setCaptchaToken] = useState(null);
 
   const {
     register,
@@ -35,7 +38,28 @@ const Form = () => {
   } = useForm();
 
   const onSubmit = (data) => {
-    console.log(data);
+    if (!captchaToken) {
+      console.log("Please complete the CAPTCHA");
+      return;
+    }
+
+    const formData = { ...data, captchaToken };
+
+    try {
+      const response = axios.post("/api/submit", formData, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      console.log(response.data); // Handle the response from the backend
+    } catch (error) {
+      console.error("Error submitting the form", error);
+    }
+  };
+
+  const onCaptchaChange = (value) => {
+    setCaptchaToken(value);
+    console.log("Captcha value:", value); // The token to send to the backend
   };
 
   const handleClick = () => {
@@ -375,7 +399,10 @@ const Form = () => {
                 </Text>
               )}
               <Box>
-                {/* <Image src={captcha} w="147px" h="55px" borderRadius="1px" /> */}
+                <ReCAPTCHA
+                  sitekey="6LcAjUYqAAAAALCkNuAJKR3tT1D1QqWzXo-MECPE"
+                  onChange={onCaptchaChange}
+                />
               </Box>
             </Box>
 

src/components/Header.jsx

@@ -53,14 +53,14 @@ const Header = () => {
       <Box>
         <Flex
           // px={{ base: "0px", md: "1.5rem", lg: "1.8rem" }}
-          py={{ base: 1, md: 1.3, lg: 2 }}
+          py={{ base: 1, md: 1.3, lg: 1.9 }}
           justifyContent="space-between"
           alignItems="center"
         >
           <Image
             ml={{ base: "10px", md: "1rem", lg: "2rem" }}
             src={logo}
-            h={{ base: "40px", md: "50px", lg: "67px" }}
+            h={{ base: "40px", md: "50px", lg: "60px" }}
             w="66px"
             alt="WDI"
           />

src/pages/Home.jsx

@@ -23,6 +23,7 @@ import FormMobile from "../components/ui/Mobile/FormMobile";
 import FAQMobile from "../components/ui/Mobile/FQAMobile";
 import FooterMobile from "../components/ui/Mobile/FooterMobile";
 import FooterComMobile from "../components/ui/Mobile/FooterComMobile"
+import Connect from "../components/Connect"
 
 const Home = () => {
   const heroComponent = useBreakpointValue({
@@ -93,6 +94,7 @@ const Home = () => {
       {form}
       {/* <FAQs/> */}
       {faq}
+      <Connect/>
       {footer}
       {footercom}
       {/* <Footer /> */}