From 20a4f4696505af716287f75cac529f2d75739efb Mon Sep 17 00:00:00 2001
From: selvi <selvi@metatroncube.in>
Date: Wed, 30 Jul 2025 22:08:53 +0530
Subject: [PATCH] contact form updated

---
 components/contact/ContactForm.jsx    | 237 +++++++++++++------
 components/homes/home-1/Blogs.jsx     |   4 +-
 components/homes/home-1/project.jsx   |   2 +-
 components/turnkey-solutions/page.jsx |   2 +-
 package-lock.json                     | 316 ++++++++++++++++++++++++++
 package.json                          |   2 +
 public/assets/css/main.css            |   4 +-
 public/assets/scss/_contact.scss      |   2 +-
 public/assets/scss/_section.scss      |   4 +-
 utlis/constant.utils.js               |   6 +-
 10 files changed, 499 insertions(+), 80 deletions(-)

diff --git a/components/contact/ContactForm.jsx b/components/contact/ContactForm.jsx
index 0444442..d1f574b 100644
--- 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
diff --git a/components/homes/home-1/Blogs.jsx b/components/homes/home-1/Blogs.jsx
index b67e5c8..429159a 100644
--- 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"
diff --git a/components/homes/home-1/project.jsx b/components/homes/home-1/project.jsx
index 1ed86e7..50dbde8 100644
--- 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"
           >
diff --git a/components/turnkey-solutions/page.jsx b/components/turnkey-solutions/page.jsx
index 8d5dcd8..ea2aa2a 100644
--- 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}
diff --git a/package-lock.json b/package-lock.json
index 05f127f..b3f5338 100644
--- 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",
diff --git a/package.json b/package.json
index d24b651..bcd5c4c 100644
--- 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",
diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index 0a22a8d..ea32c2b 100644
--- 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;
   }
 }
diff --git a/public/assets/scss/_contact.scss b/public/assets/scss/_contact.scss
index 3a1e3b7..c937058 100644
--- 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;
diff --git a/public/assets/scss/_section.scss b/public/assets/scss/_section.scss
index 94789a5..5f07382 100644
--- 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;
   }
 }
diff --git a/utlis/constant.utils.js b/utlis/constant.utils.js
index 21e3a65..63ff03e 100644
--- 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",