contact form updated

2025-07-30 22:08:53 +05:30 · 2025-07-30 22:08:53 +05:30 · 20a4f46965
commit 20a4f46965
parent 16638b2f0b
10 changed files with 499 additions and 80 deletions
--- a/components/contact/ContactForm.jsx
+++ b/components/contact/ContactForm.jsx
@ -1,44 +1,92 @@
 "use client";
-import emailjs from "@emailjs/browser";
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import { toast } from "react-toastify";
+import ReCAPTCHA from "react-google-recaptcha";
+import axios from "axios";
 import "react-toastify/dist/ReactToastify.css";
 import AnimatedText from "../common/AnimatedText";

 export default function ContactForm() {
  const form = useRef();

-  const sandMail = (e) => {
-    e.preventDefault();
-    emailjs
-      .sendForm("service_noj8796", "template_fs3xchn", form.current, {
-        publicKey: "iG4SCmR-YtJagQ4gV",
-      })
-      .then((res) => {
-        if (res.status == 200) {
-          toast.success("Message Sent successfully!", {
-            position: "bottom-right",
-            autoClose: 5000,
-            hideProgressBar: false,
-            closeOnClick: true,
-            pauseOnHover: true,
-            draggable: true,
-            progress: undefined,
-          });
-          form.current.reset();
-        } else {
-          toast.error("Ops Message not Sent!", {
-            position: "bottom-right",
-            autoClose: 5000,
-            hideProgressBar: false,
-            closeOnClick: true,
-            pauseOnHover: true,
-            draggable: true,
-            progress: undefined,
-          });
-        }
-      });
+  const [formData, setFormData] = useState({
+    firstName: "",
+    email: "",
+    number: "",
+    message: "",
+    product: "",
+  });
+
+  const [formErrors, setFormErrors] = useState({});
+  const [captchaToken, setCaptchaToken] = useState(null);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
  };
+
+  const handleCaptchaChange = (token) => {
+    setCaptchaToken(token);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    const errors = {};
+    if (!formData.firstName.trim()) errors.firstName = "First name is required.";
+    if (!formData.email.trim()) errors.email = "Email is required.";
+    if (!formData.number.trim()) errors.number = "Phone number is required.";
+    if (!formData.product.trim()) errors.product = "Please select a product.";
+    if (!formData.message.trim()) errors.message = "Message is required.";
+    if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
+
+    setFormErrors(errors);
+    if (Object.keys(errors).length > 0) return;
+
+    const emailData = {
+      name: formData.firstName,
+      email: formData.email,
+      phone: formData.number,
+      service: formData.product,
+      message: `Message: ${formData.message}`,
+      to: "lead@metatroncube.in",
+      senderName: "Metatroncube Landing",
+      recaptchaToken: captchaToken,
+    };
+
+    try {
+      const res = await axios.post(
+        "https://mailserver.metatronnest.com/send",
+        emailData,
+        { headers: { "Content-Type": "application/json" } }
+      );
+
+      toast.success(res?.data?.message || "Message sent successfully!", {
+        position: "bottom-right",
+        autoClose: 5000,
+      });
+
+      setFormData({
+        firstName: "",
+        email: "",
+        number: "",
+        message: "",
+        product: "",
+      });
+      setCaptchaToken(null);
+      setFormErrors({});
+      form.current.reset();
+    } catch (err) {
+      toast.error("Failed to send message. Please try again later.", {
+        position: "bottom-right",
+        autoClose: 5000,
+      });
+    }
+  };
+
  return (
    <section className="contact-section-22">
      <div className="container">
@ -48,78 +96,131 @@ export default function ContactForm() {
              <AnimatedText text="Get In Touch" />
            </h2>
          </div>
-          <form ref={form} onSubmit={sandMail}>
+          <form ref={form} onSubmit={handleSubmit}>
            <div className="row g-4">
              <div className="col-lg-6 wow fadeInUp" data-wow-delay=".2s">
                <div className="form-clt">
                  <input
                    type="text"
-                    name="name"
-                    id="name"
-                    placeholder="Fast Name"
+                    name="firstName"
+                    placeholder="Your Name"
+                    value={formData.firstName}
+                    onChange={handleChange}
                    required
                  />
                  <div className="icon">
                    <i className="fa-regular fa-user" />
                  </div>
+                  {formErrors.firstName && (
+                    <div className="text-danger mt-1">{formErrors.firstName}</div>
+                  )}
                </div>
              </div>
+
              <div className="col-lg-6 wow fadeInUp" data-wow-delay=".4s">
                <div className="form-clt">
                  <input
-                    type="text"
-                    name="name"
-                    id="name12"
-                    placeholder="Last Name"
-                    required
-                  />
-                  <div className="icon">
-                    <i className="fa-regular fa-user" />
-                  </div>
-                </div>
-              </div>
-              <div className="col-lg-6 wow fadeInUp" data-wow-delay=".2s">
-                <div className="form-clt">
-                  <input
-                    type="text"
-                    name="number"
-                    id="number"
-                    placeholder="Phone Number"
-                    required
-                  />
-                  <div className="icon">
-                    <i className="fa-regular fa-phone" />
-                  </div>
-                </div>
-              </div>
-              <div className="col-lg-6 wow fadeInUp" data-wow-delay=".4s">
-                <div className="form-clt">
-                  <input
-                    type="text"
+                    type="email"
                    name="email"
-                    id="email3"
                    placeholder="Email Address"
+                    value={formData.email}
+                    onChange={handleChange}
                    required
                  />
                  <div className="icon">
                    <i className="fa-regular fa-envelope" />
                  </div>
+                  {formErrors.email && (
+                    <div className="text-danger mt-1">{formErrors.email}</div>
+                  )}
                </div>
              </div>
+
+              <div className="col-lg-6 wow fadeInUp" data-wow-delay=".2s">
+                <div className="form-clt">
+                  <input
+                    type="text"
+                    name="number"
+                    placeholder="Phone Number"
+                    value={formData.number}
+                    onChange={handleChange}
+                    required
+                  />
+                  <div className="icon">
+                    <i className="fa-regular fa-phone" />
+                  </div>
+                  {formErrors.number && (
+                    <div className="text-danger mt-1">{formErrors.number}</div>
+                  )}
+                </div>
+              </div>
+
+              <div className="col-lg-6 wow fadeInUp" data-wow-delay=".4s">
+                <div className="form-clt">
+                  <select
+                    name="product"
+                    value={formData.product}
+                    onChange={handleChange}
+                    required
+                    className="form-select"
+                  >
+                    <option value="">-- Select Product --</option>
+                    <option value="Coconut Deshelling Machine">
+                      Coconut Deshelling Machine
+                    </option>
+                    <option value="Coconut Dryer (Hot Air / Tray Type)">
+                      Coconut Dryer (Hot Air / Tray Type)
+                    </option>
+                    <option value="Coconut Pulverizer & Grinder">
+                      Coconut Pulverizer & Grinder
+                    </option>
+                    <option value="Coconut Milk Extractor">
+                      Coconut Milk Extractor
+                    </option>
+                    <option value="Virgin Coconut Oil (VCO) Processing Equipment">
+                      Virgin Coconut Oil (VCO) Processing Equipment
+                    </option>
+                    <option value="Coconut Water Processing Unit">
+                      Coconut Water Processing Unit
+                    </option>
+                  </select>
+                  <div className="icon">
+                    <i className="fa-solid fa-box" />
+                  </div>
+                  {formErrors.product && (
+                    <div className="text-danger mt-1">{formErrors.product}</div>
+                  )}
+                </div>
+              </div>
+
              <div className="col-lg-12 wow fadeInUp" data-wow-delay=".2s">
                <div className="form-clt">
                  <textarea
                    name="message"
-                    id="message"
                    placeholder="What’s on your mind"
-                    defaultValue={""}
+                    value={formData.message}
+                    onChange={handleChange}
                    required
                  />
                  <div className="icon">
                    <i className="fa-sharp fa-light fa-pencil" />
                  </div>
+                  {formErrors.message && (
+                    <div className="text-danger mt-1">{formErrors.message}</div>
+                  )}
                </div>
              </div>
+
+              <div className="col-lg-12 wow fadeInUp" data-wow-delay=".3s">
+                <ReCAPTCHA
+                  sitekey="6Ldtl20rAAAAAONa5g1txlhj8XqhLIX5SaKgFATk"
+                  onChange={handleCaptchaChange}
+                />
+                {formErrors.captcha && (
+                  <div className="text-danger mt-2">{formErrors.captcha}</div>
+                )}
+              </div>
+
              <div className="col-lg-12 wow fadeInUp" data-wow-delay=".4s">
                <button type="submit" className="theme-btn w-100">
                  SEND MESSAGE NOW
--- a/components/homes/home-1/Blogs.jsx
+++ b/components/homes/home-1/Blogs.jsx
@ -53,7 +53,7 @@ export default function Blogs() {
              <div
                key={leftBlog.id}
                className="news-image-items bg-cover"
-                style={{ backgroundImage: `url("${leftBlog.image}")` }}
+                style={{ backgroundImage: `url("${leftBlog.images}")` }}
              >
                <div className="news-content">
                  <ul>
@ -122,7 +122,7 @@ export default function Blogs() {
                  </div>
                  <div className="news-image">
                    <Image
-                      src={item.image}
+                      src={item.images}
                      width={247}
                      height={258}
                      alt="img"
--- a/components/homes/home-1/project.jsx
+++ b/components/homes/home-1/project.jsx
@ -132,7 +132,7 @@ export default function ProjectsHomePreview() {
        {/* View More Button */}
        <div className="text-center mt-5">
          <Link
-            href="/projects"
+            href="/project"
            className="theme-btn theme-color wow fadeInUp"
            data-wow-delay=".6s"
          >
--- a/components/turnkey-solutions/page.jsx
+++ b/components/turnkey-solutions/page.jsx
@ -11,7 +11,7 @@ export default function About() {
        id="about"
        className="about-section fix section-padding2 scrollSpySection"
      >
-        <div className="about-shape-1 float-bob-x">
+        <div className="about-shape-1 float-bob-x" style={{ opacity: 0.3 }}>
          <Image
            src="/assets/img/turnkey-solutions/top-element.webp"
            width={114}
--- a/package-lock.json
+++ b/package-lock.json
@ -9,11 +9,13 @@
      "version": "0.1.0",
      "dependencies": {
        "@emailjs/browser": "^4.4.1",
+        "axios": "^1.11.0",
        "bootstrap": "^5.3.3",
        "next": "14.2.5",
        "photoswipe": "^5.4.4",
        "react": "^18",
        "react-dom": "^18",
+        "react-google-recaptcha": "^3.1.0",
        "react-modal-video": "^2.0.2",
        "react-photoswipe-gallery": "^3.0.2",
        "react-toastify": "^10.0.5",
@ -228,6 +230,23 @@
        "node": ">= 8"
      }
    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
+      "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "node_modules/binary-extensions": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@ -282,6 +301,19 @@
        "node": ">=10.16.0"
      }
    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/caniuse-lite": {
      "version": "1.0.30001651",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
@ -339,6 +371,18 @@
        "node": ">=6"
      }
    },
+    "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==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/core-js": {
      "version": "3.38.0",
      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.0.tgz",
@ -356,6 +400,15 @@
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
      "license": "MIT"
    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/dom-helpers": {
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
@ -366,6 +419,65 @@
        "csstype": "^3.0.2"
      }
    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/fill-range": {
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@ -378,6 +490,42 @@
        "node": ">=8"
      }
    },
+    "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"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/fsevents": {
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@ -392,6 +540,52 @@
        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
      }
    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/glob-parent": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@ -404,11 +598,71 @@
        "node": ">= 6"
      }
    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/graceful-fs": {
      "version": "4.2.11",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
    "node_modules/immutable": {
      "version": "4.3.7",
      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
@ -473,6 +727,36 @@
        "loose-envify": "cli.js"
      }
    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "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==",
+      "license": "MIT",
+      "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==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/nanoid": {
      "version": "3.3.7",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@ -621,6 +905,12 @@
        "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==",
+      "license": "MIT"
+    },
    "node_modules/react": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@ -632,6 +922,19 @@
        "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==",
+      "license": "MIT",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
    "node_modules/react-dom": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@ -644,6 +947,19 @@
        "react": "^18.3.1"
      }
    },
+    "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==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.5.0",
+        "react-async-script": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
--- a/package.json
+++ b/package.json
@ -10,11 +10,13 @@
  },
  "dependencies": {
    "@emailjs/browser": "^4.4.1",
+    "axios": "^1.11.0",
    "bootstrap": "^5.3.3",
    "next": "14.2.5",
    "photoswipe": "^5.4.4",
    "react": "^18",
    "react-dom": "^18",
+    "react-google-recaptcha": "^3.1.0",
    "react-modal-video": "^2.0.2",
    "react-photoswipe-gallery": "^3.0.2",
    "react-toastify": "^10.0.5",
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@ -5861,12 +5861,12 @@ background-color: #0b2273;
  padding: 0 0 120px;
 }
@media (max-width: 1199px) {
-  .section-padding2 {
+  .section-padding3 {
    padding: 0 0 100px ;
  }
 }
@media (max-width: 991px) {
-  .section-padding2 {
+  .section-padding3 {
    padding: 0 0 80px;
  }
 }
--- a/public/assets/scss/_contact.scss
+++ b/public/assets/scss/_contact.scss
@ -168,7 +168,7 @@
    .form-clt {
        position: relative;

-        input,textarea {
+        input,textarea, select {
            padding: 16px 30px;
            border: none;
            outline: none;
--- a/public/assets/scss/_section.scss
+++ b/public/assets/scss/_section.scss
@ -107,12 +107,12 @@
  padding: 0 0 120px;
 }
@media (max-width: 1199px) {
-  .section-padding2 {
+  .section-padding3 {
    padding: 0 0 100px ;
  }
 }
@media (max-width: 991px) {
-  .section-padding2 {
+  .section-padding3 {
    padding: 0 0 80px;
  }
 }
--- a/utlis/constant.utils.js
+++ b/utlis/constant.utils.js
@ -4,7 +4,7 @@ export const allBlogs = [
    slug: "rise-of-turnkey-coconut-processing-plants",
    image: "/assets/img/blog/blog-1.webp",
    bannerImage: "/assets/img/blog/blog-details-1.webp",
-    images: ["/assets/img/blog/blog-card1.webp", "/assets/img/blog/blog-card1.webp"],
+    images: "/assets/img/blog/blog-card1.webp",
    category: "Coconut Tech",
    date: "07 July 2024",
    title: "Revolutionizing Coconut Processing: The Rise of Turnkey Plants",
@ -83,7 +83,7 @@ export const allBlogs = [
    slug: "coconut-deshelling-machine-upgrades",
    image: "/assets/img/blog/blog-2.webp",
    bannerImage: "/assets/img/blog/blog-details-2.webp",
-    images: ["/assets/img/blog/blog-card2.webp", "/assets/img/blog/blog-card2.webp"],
+    images: "/assets/img/blog/blog-card2.webp",
    category: "Machine Insights",
    date: "07 July 2024",
    title: "Deshelling Machine Upgrades: What You Need to Know",
@ -155,7 +155,7 @@ export const allBlogs = [
    slug: "choosing-the-right-coconut-dryer",
    image: "/assets/img/blog/blog-3.webp",
    bannerImage: "/assets/img/blog/blog-details-3.webp",
-    images: ["/assets/img/blog/blog-card3.webp", "/assets/img/blog/blog-card3.webp"],
+    images: "/assets/img/blog/blog-card3.webp",
    category: "Operational Tips",
    date: "07 July 2024",
    title: "Dry Smarter: Choosing the Right Coconut Dryer for Your Facility",