Added country code to form/ updated Subnets

package.json

@@ -25,6 +25,7 @@
     "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "^7.51.2",
     "react-intersection-observer": "^9.8.1",
+    "react-phone-input-2": "^2.15.1",
     "react-redux": "^9.1.1",
     "react-router-dom": "^6.22.3",
     "swiper": "^11.1.0"

src/components/Contact/Form.jsx

@@ -29,6 +29,8 @@ import forml from "../../assets/images/forml.png";
 import { Link } from "react-router-dom";
 import ReCAPTCHA from "react-google-recaptcha";
 import { contactUs } from "../../service/api";
+import PhoneInput from "react-phone-input-2";
+import "react-phone-input-2/lib/style.css";
 
 const Contact = () => {
   const {
@@ -45,6 +47,11 @@ const Contact = () => {
 
   // const email = "rubix@gmail.com";
 
+  const preprocessPhoneNumber = (value) => {
+    // Remove any non-digit characters from the phone number
+    return value.replace(/\D/g, "");
+  };
+
   const handleVerify = (token) => {
     setRecaptchaToken(token);
   };
@@ -58,6 +65,7 @@ const Contact = () => {
 
     //   reset();
     // }
+    console.log(data.phone);
     try {
       const result = await contactUs(data);
       if (result.status) {
@@ -432,7 +440,7 @@ const Contact = () => {
                         value: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                         message: "Please enter a valid email address",
                       },
-                      required: true,
+                      required: "Email ID is required",
                     })}
                   />
                   {errors.email && (
@@ -453,34 +461,55 @@ const Contact = () => {
                   >
                     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,
-                    })}
+                  <Controller
+                    name="phone"
+                    control={control}
+                    defaultValue=""
+                    render={({ field }) => (
+                      <PhoneInput
+                        // autoFormat={false}
+                        placeholder
+                        type="tel"
+                        enableSearch={true}
+                        // country={"in"}
+                        inputStyle={{
+                          display: "block",
+                          marginBottom: "5px !important",
+                          background: "#1E1E23",
+                          color: "#fff",
+                          marginTop: "10px !important",
+                          borderRadius: "5px",
+                          border: "none",
+                          width: "100%",
+                          height: "43px",
+                        }}
+                        {...field}
+                        inputProps={{
+                          name: "phone",
+                          ...register("phone", {
+                            pattern: {
+                              // value: /^[0-9]*$/,
+                              value: /^[+()?[\d -]+$/,
+                              message:
+                                "Phone number should contain only digits",
+                            },
+                            maxLength: {
+                              value: 17, //including the space and other non digits
+                              message:
+                                "Phone number should not exceed 10 digits",
+                            },
+                            minLength: {
+                              value: 15,
+                              message:
+                                "Phone number should be at least 10 digits",
+                            },
+                            required: "Please enter a valid phone number",
+                          }),
+                        }}
+                      />
+                    )}
                   />
+                  {/* <PhoneInput country={"in"} enableSearch={true} type="tel" /> */}
                   {errors.phone && (
                     <p style={{ fontSize: "13px", color: "red" }}>
                       {errors.phone.message}
@@ -528,6 +557,7 @@ const Contact = () => {
                       <option value="investing">Investing</option>
                       <option value="events">Events</option>
                       <option value="media">Media</option>
+                      <option value="career">Career</option>
                     </select>
                   )}
                 />

src/components/SubnetsComponent/NewSubnetComp.jsx

@@ -462,7 +462,7 @@ export const NewSubnetComp = () => {
                   >
                     51.4 Million RBT
                   </Text>
-                  <Text fontSize={"16px"}>Fixed Supply.Hardcapped </Text>
+                  <Text fontSize={"16px"}>Fixed Supply. Hardcapped </Text>
                 </Box>
               </Box>
             </Box>

src/index.css

@@ -167,6 +167,16 @@ span.swiper-pagination-bullet {
   font-weight: 900 !important;
 }
 
+.react-tel-input .form-control {
+  margin-top: 10px !important;
+  margin-bottom: 5px !important;
+}
+
+.react-tel-input .flag-dropdown {
+  background-color: #de858e;
+  border: none;
+}
+
 @media only screen and (max-width: 600px) {
   .swiper-button-prev:after,
   .swiper-button-next:after {