contact details updated

app/(blogs)/news-details/[slug]/page.jsx

@@ -49,7 +49,7 @@ export default function Page({ params }) {
                 <li>
                   <i className="fa-sharp fa-solid fa-slash-forward" />
                 </li>
-                <li>Blog Details</li>
+                <li>{newsItem.title}</li>
               </ul>
             </div>
             <div className="breadcrumb-image" />

app/(homes)/home-1/page.jsx

@@ -14,6 +14,7 @@ import Services from "@/components/homes/home-1/Services";
 import Skills from "@/components/homes/home-1/Skills";
 import Team from "@/components/homes/home-1/Team";
 import Testimonials from "@/components/homes/home-1/Testimonials";
+import ProjectsData from "@/components/homes/home-1/project";
 export const metadata = {
   title: "Home 1 || Xbuild - Constriction nextjs Template",
   description: "Xbuild - Constriction nextjs Template",
@@ -28,12 +29,14 @@ export default function Home1() {
       <Services />
       <Skills />
       <Cta />
+      <ProjectsData />
       <Testimonials />
-      <Projects />
+      <Team />
+      {/* <Projects /> */}
       <Faq />
-      <div className="brand-section fix section-padding">
+      {/* <div className="brand-section fix section-padding">
         <Brands />
-      </div>
+      </div> */}
       {/* <Team /> */}
       {/* <Contact /> */}
       <Blogs />

app/(products)/product-details/[slug]/page.jsx

@@ -0,0 +1,55 @@
+import Footer1 from "@/components/footers/Footer1";
+import Header1 from "@/components/headers/Header1";
+import ProductDetails from "@/components/homes/home-1/Products/product-details";
+import { allProducts } from "@/utlis/constant.utils";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+
+export const metadata = {
+  title: "Product Details || Xbuild - Construction Next.js Template",
+  description: "Xbuild - Construction Next.js Template",
+};
+
+export async function generateStaticParams() {
+  return allProducts.map((item) => ({ slug: item.slug }));
+}
+
+export default function Page({ params }) {
+  const productItem = allProducts.find((item) => item.slug === params.slug);
+
+  if (!productItem) {
+    notFound();
+  }
+
+  return (
+    <>
+      <Header1 />
+      <div
+        className="breadcrumb-wrapper bg-cover"
+        style={{ backgroundImage: `url(${productItem.bannerImage})` }} 
+      >
+        <div className="container">
+          <div className="breadcrumb-wrapper-items">
+            <div className="page-heading">
+              <div className="breadcrumb-sub-title">
+                <h1 className="wow fadeInUp" data-wow-delay=".3s">
+                  {productItem.title}
+                </h1>
+              </div>
+              <ul className="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
+                <li><Link href="/">Home</Link></li>
+                <li><i className="fa-sharp fa-solid fa-slash-forward" /></li>
+                <li>{productItem.title}</li>
+              </ul>
+            </div>
+            <div className="breadcrumb-image" />
+          </div>
+        </div>
+      </div>
+
+      <ProductDetails productItem={productItem} />
+
+      <Footer1 />
+    </>
+  );
+}

app/layout.jsx

@@ -2,6 +2,7 @@
 
 import { useEffect } from "react";
 import "../public/assets/scss/styles.scss";
+import "yet-another-react-lightbox/styles.css";
 import BackToTop from "@/components/common/BackToTop";
 import Mouse from "@/components/common/Mouse";
 import { usePathname } from "next/navigation";

components/blogs/BlogDetails.jsx

@@ -17,12 +17,12 @@ export default function BlogDetails({ newsItem }) {
                 />
                 <div className="post-content">
                   <ul className="post-list d-flex align-items-center">
-                    <li>
+                    {/* <li>
                       <i className="fa-regular fa-user" /> {newsItem.author?.name || "Admin"}
                     </li>
                     <li>
                       <i className="fa-solid fa-calendar-days" /> {newsItem.date}
-                    </li>
+                    </li> */}
                     <li>
                       <i className="fa-solid fa-tag" /> {newsItem.category}
                     </li>

components/blogs/Blogs.jsx

@@ -32,7 +32,7 @@ export default function Blogs() {
                 <div className="news-content">
                   <ul className="post-list">
                     <li>{news.category}</li>
-                    <li>{news.date}</li>
+                    {/* <li>{news.date}</li> */}
                   </ul>
                   <h4>
                     <Link href={`/news-details/${news.slug}`}>
@@ -40,7 +40,7 @@ export default function Blogs() {
                     </Link>
                   </h4>
                   <div className="author-items">
-                    <div className="author-info">
+                    {/* <div className="author-info">
                       <Image
                         src={news.author.image}
                         width={40}
@@ -51,7 +51,7 @@ export default function Blogs() {
                         <h6>Admin</h6>
                         <p>{news.author.name}</p>
                       </div>
-                    </div>
+                    </div> */}
                     <Link
                       href={`/news-details/${news.slug}`}
                       className="link-btn"

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="6LcmnZYrAAAAAL62hHdDnlbvznuOpcHfZIc3DN5b"
+                  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

components/contact/ContactInfo.jsx

@@ -17,7 +17,7 @@ export default function ContactInfo() {
         </div>
         <div className="row">
           <div
-            className="col-xxl-4 col-xl-6 col-lg-6 col-md-6 wow fadeInUp"
+            className="col-xxl-6 col-xl-6 col-lg-6 col-md-6 wow fadeInUp"
             data-wow-delay=".2s"
           >
             <div className="contact-box-items">
@@ -32,15 +32,15 @@ export default function ContactInfo() {
               <div className="content">
                 <h3>Our Address</h3>
                 <p>
-                  2715 Ash Dr. San Jose,
-                  <br />
-                  South Dakota 83475
+                  Address: SF NO 181/2,
+                  BS NAGAR, SULUR,
+                  IRUGUR, COIMBATORE PIN CODE : 641402
                 </p>
               </div>
             </div>
           </div>
           <div
-            className="col-xxl-4 col-xl-6 col-lg-6 col-md-6 wow fadeInUp"
+            className="col-xxl-6 col-xl-6 col-lg-6 col-md-6 wow fadeInUp"
             data-wow-delay=".4s"
           >
             <div className="contact-box-items">
@@ -55,31 +55,9 @@ export default function ContactInfo() {
               <div className="content">
                 <h3>Email Address</h3>
                 <p>
-                  Mobile :<a href="tel:984756123695">9847 5612 3695</a> <br />
+                  Mobile :<a href="tel:984756123695"> +91-9751463748</a> <br />
                   Email :
-                  <a href="mailto:example@gmail.com">example@gmail.com</a>
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            className="col-xxl-4 col-xl-6 col-lg-6 col-md-6 wow fadeInUp"
-            data-wow-delay=".6s"
-          >
-            <div className="contact-box-items">
-              <div className="icon">
-                <Image
-                  src="/assets/img/icon/20.svg"
-                  width={50}
-                  height={50}
-                  alt="img"
-                />
-              </div>
-              <div className="content">
-                <h3>Hours of Operation</h3>
-                <p>
-                  Monday-Saturday : 8:00 - <br />
-                  9:00 Sunday : Closed
+                  <a href="mailto:example@gmail.com"> info@cibusindustries.com</a>
                 </p>
               </div>
             </div>

components/footers/Footer1.jsx

@@ -2,6 +2,7 @@
 import Link from "next/link";
 import Image from "next/image";
 import { services2 } from "@/data/services";
+import { allProducts } from "@/utlis/constant.utils";
 import { footerLinks } from "@/data/menu";
 import { Gallery, Item } from "react-photoswipe-gallery";
 import { galleryImages } from "@/data/gallery";
@@ -35,7 +36,7 @@ export default function Footer1() {
             </div>
             <div className="content">
               <p>Office location</p>
-              <h3>4648 Rocky, New York</h3>
+              <h3>181/2, Sulur, Coimbatore</h3>
             </div>
           </div>
           <div className="contact-info-items wow fadeInUp" data-wow-delay=".6s">
@@ -45,7 +46,7 @@ export default function Footer1() {
             <div className="content">
               <p>send email</p>
               <h3>
-                <a href="mailto:example@gmail.com">example@gmail.com</a>
+                <a href="mailto:example@gmail.com">info@cibusindustries.com</a>
               </h3>
             </div>
           </div>
@@ -54,9 +55,9 @@ export default function Footer1() {
               <i className="fa-solid fa-phone-volume" />
             </div>
             <div className="content">
-              <p>call emergency</p>
+              <p>call us</p>
               <h3>
-                <a href="tel:+88012365499">+88 0123 654 99</a>
+                <a href="tel:+88012365499">+91-9751463748</a>
               </h3>
             </div>
           </div>
@@ -69,13 +70,14 @@ export default function Footer1() {
             >
               <div className="single-footer-widget">
                 <div className="widget-head">
-                  <h5>About Company</h5>
+                  <h5>About Cibus Industries</h5>
                 </div>
                 <div className="footer-content">
                   <p>
-                    Nullam interdum libero vitae pretium aliquam <br />
-                    donec nibh purus laoreet in ullamcorper vel <br />
-                    malesuada sit amet enim.
+                    Engineering high-performance coconut <br />
+                    processing machinery that drives efficiency,   <br />
+                    scalability, and sustainability for businesses <br /> 
+                    across the globe.
                   </p>
                   <div className="social-icon d-flex align-items-center">
                     {socialLinks.map((elm, i) => (
@@ -113,12 +115,12 @@ export default function Footer1() {
             >
               <div className="single-footer-widget">
                 <div className="widget-head">
-                  <h5>Our Services</h5>
+                  <h5>Our Products</h5>
                 </div>
                 <ul className="list-area">
-                  {services2.map((elm, i) => (
+                  {allProducts.map((elm, i) => (
                     <li key={i}>
-                      <Link href={`/service-details/${elm.id}`}>
+                      <Link href={`/product-details/${elm.slug}`}>
                         <i className="fa-solid fa-chevrons-right" />
                         {elm.title}
                       </Link>
@@ -133,7 +135,7 @@ export default function Footer1() {
             >
               <div className="single-footer-widget">
                 <div className="widget-head">
-                  <h5>Instagram</h5>
+                  <h5>Our Projects</h5>
                 </div>
                 <Gallery>
                   <div className="footer-gallery">

components/headers/Nav.jsx

@@ -4,10 +4,12 @@ import { menuData } from "@/data/menu";
 import { useState } from "react";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
+
 export default function Nav() {
   const [parentActive, setParentActive] = useState(-1);
   const [subparentActive, setsubParentActive] = useState(-1);
   const pathname = usePathname();
+
   const isMenuActive = (menuItem = menuData[0]) => {
     let active = false;
     if (menuItem.href?.includes("/")) {
@@ -22,11 +24,21 @@ export default function Nav() {
             active = true;
           }
         }
+        if (elm2.slug) {
+          if (`/product-details/${elm2.slug}`.split("/")[2] === pathname.split("/")[2]) {
+            active = true;
+          }
+        }
         if (elm2.submenu) {
           elm2.submenu.forEach((elm3) => {
-            if (elm3.href.split("/")[1] == pathname.split("/")[1]) {
+            if (elm3.href?.split("/")[1] == pathname.split("/")[1]) {
               active = true;
             }
+            if (elm3.slug) {
+              if (`/product-details/${elm3.slug}`.split("/")[2] === pathname.split("/")[2]) {
+                active = true;
+              }
+            }
           });
         }
         if (elm2.homeMenuItems) {
@@ -57,8 +69,10 @@ export default function Nav() {
               setParentActive((pre) => (pre == index ? -1 : index))
             }
           >
-            {item.label} {item.iconClass && <i className={item.iconClass}></i>}{" "}
+            {item.label}{" "}
+            {item.iconClass && <i className={item.iconClass}></i>}{" "}
           </Link>
+
           {item.submenu && (
             <ul
               className={`submenu ${
@@ -91,7 +105,9 @@ export default function Nav() {
                             </div>
                           </div>
                           <div className="homemenu-content text-center">
-                            <h4 className="homemenu-title">{homeItem.title}</h4>
+                            <h4 className="homemenu-title">
+                              {homeItem.title}
+                            </h4>
                           </div>
                         </div>
                       ))}
@@ -100,7 +116,11 @@ export default function Nav() {
                 ) : (
                   <li key={subIndex} className={subItem.className || ""}>
                     <Link
-                      href={subItem.href}
+                      href={
+                        subItem.slug
+                          ? `/product-details/${subItem.slug}`
+                          : subItem.href
+                      }
                       className={isMenuActive(subItem) ? "menuActive" : ""}
                       onClick={() =>
                         setsubParentActive((pre) =>
@@ -113,6 +133,7 @@ export default function Nav() {
                         <i className={subItem.iconClass}></i>
                       )}
                     </Link>
+
                     {subItem.submenu && (
                       <ul
                         className={`submenu  ${
@@ -125,7 +146,11 @@ export default function Nav() {
                               className={
                                 isMenuActive(nestedItem) ? "menuActive" : ""
                               }
-                              href={nestedItem.href}
+                              href={
+                                nestedItem.slug
+                                  ? `/product-details/${nestedItem.slug}`
+                                  : nestedItem.href
+                              }
                             >
                               {nestedItem.label}
                             </Link>

components/headers/Offcanvas.jsx

@@ -32,9 +32,10 @@ export default function Offcanvas({ children }) {
                 </div>
               </div>
               <p className="text d-none d-xl-block">
-                Nullam dignissim, ante scelerisque the is euismod fermentum odio
-                sem semper the is erat, a feugiat leo urna eget eros. Duis
-                Aenean a imperdiet risus.
+                Engineering high-performance coconut
+                processing machinery that drives efficiency,
+                scalability, and sustainability for businesses
+                across the globe.
               </p>
               <div className="mobile-menu fix mb-3 mean-container">
                 <div className="mean-bar">
@@ -64,7 +65,11 @@ export default function Offcanvas({ children }) {
                     </div>
                     <div className="offcanvas__contact-text">
                       <a target="_blank" href="#">
-                        Main Street, Melbourne, Australia
+                        SF NO 181/2,
+                        BS NAGAR, SULUR,
+                        IRUGUR,
+                        COIMBATORE
+                        PIN CODE : 641402
                       </a>
                     </div>
                   </li>
@@ -75,12 +80,12 @@ export default function Offcanvas({ children }) {
                     <div className="offcanvas__contact-text">
                       <a href="mailto:info@example.com">
                         <span className="mailto:info@example.com">
-                          info@example.com
+                          info@cibusindustries.com
                         </span>
                       </a>
                     </div>
                   </li>
-                  <li className="d-flex align-items-center">
+                  {/* <li className="d-flex align-items-center">
                     <div className="offcanvas__contact-icon mr-15">
                       <i className="fal fa-clock" />
                     </div>
@@ -89,18 +94,18 @@ export default function Offcanvas({ children }) {
                         Mod-friday, 09am -05pm
                       </a>
                     </div>
-                  </li>
+                  </li> */}
                   <li className="d-flex align-items-center">
                     <div className="offcanvas__contact-icon mr-15">
                       <i className="far fa-phone" />
                     </div>
                     <div className="offcanvas__contact-text">
-                      <a href="tel:+11002345909">+11002345909</a>
+                      <a href="tel:+11002345909">+91-9751463748</a>
                     </div>
                   </li>
                 </ul>
                 <div className="header-button mt-4">
-                  <a href="contact.html" className="theme-btn text-center">
+                  <a href="/contact" className="theme-btn text-center">
                     <span>
                       Get A Quote
                       <i className="fa-solid fa-arrow-right-long" />

components/homes/home-1/Blogs.jsx

@@ -53,14 +53,14 @@ 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>
-                    <li>
+                    {/* <li>
                       <i className="fa-regular fa-user" />
                       {leftBlog.author.name}
-                    </li>
+                    </li> */}
                     <li>
                       <i className="fa-solid fa-tag" />
                       {leftBlog.category}
@@ -96,10 +96,10 @@ export default function Blogs() {
                 >
                   <div className="news-content">
                     <ul>
-                      <li>
+                      {/* <li>
                         <i className="fa-regular fa-user" />
                         {item.author.name}
-                      </li>
+                      </li> */}
                       <li>
                         <i className="fa-solid fa-tag" />
                         {item.category}
@@ -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"

components/homes/home-1/Hero.jsx

@@ -29,7 +29,7 @@ export default function Hero() {
       title: "Smart Coconut",
       subtitle: "Solutions",
       text: "Efficient machines for deshelling to drying coconut.",
-      buttonText: "Get A Quote",
+      buttonText: "Start Exploring",
       buttonLink: "/about",
     },
     {
@@ -39,16 +39,16 @@ export default function Hero() {
       subtitle: "Engineering",
       text: "Automation and precision for coconut processing plants.",
       buttonText: "Discover Our Innovations",
-      buttonLink: "/about",
+      buttonLink: "/product",
     },
     {
       id: 3,
       image: "/assets/img/home/banner/banner-3.webp",
-      title: "Global Processing",
-      subtitle: "Impact",
+      title: "Global Reach",
+      subtitle: "Effect",
       text: "Trusted coconut machinery in 20+ countries worldwide.",
       buttonText: "Explore Global Projects",
-      buttonLink: "/about",
+      buttonLink: "/project",
     },
   ];
 

components/homes/home-1/Products/product-details.jsx

@@ -0,0 +1,73 @@
+"use client";
+
+import Image from "next/image";
+
+export default function ProductDetails({ productItem }) {
+  if (!productItem) {
+    return (
+      <section className="product-details-simple fix section-padding">
+        <div className="container">
+          <p className="text-center text-danger">Product not found.</p>
+        </div>
+      </section>
+    );
+  }
+
+  const groupedImages = [];
+  for (let i = 0; i < productItem.images.length; i += 2) {
+    groupedImages.push(productItem.images.slice(i, i + 2));
+  }
+
+  return (
+    <section className="product-details-simple fix section-padding">
+      <div className="container">
+        <div className="row g-4">
+          <div className="col-12">
+            <div className="single-product-post">
+              <div
+                className="post-featured-thumb bg-cover rounded"
+                style={{
+                  backgroundImage: `url(${productItem.bigImage})`,
+                  height: "400px",
+                  backgroundSize: "cover",
+                  backgroundPosition: "center",
+                  borderRadius: "12px",
+                  marginBottom: "30px",
+                }}
+              />
+
+              <h2 className="product-title mb-3">{productItem.title}</h2>
+
+              <div
+                className="post-description product-description"
+                dangerouslySetInnerHTML={{ __html: productItem.description }}
+              />
+
+              {groupedImages.map((imagePair, index) => (
+                <div className="row mt-5 mb-5" key={index}>
+                  {imagePair.map((imgSrc, subIndex) => (
+                    <div
+                      className={`${
+                        subIndex === 0 ? "col-lg-6" : "col-lg-6 col-md-12"
+                      } mt-2`}
+                      key={subIndex}
+                    >
+                      <div className="details-image">
+                        <Image
+                          src={imgSrc}
+                          width={633}
+                          height={460}
+                          alt={`Product Image ${index * 2 + subIndex + 1}`}
+                        />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/homes/home-1/Products/product.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Pagination from "@/components/common/Pagination";
 import { services } from "@/data/services";
-import { products } from "@/data/services";
+import { allProducts } from "@/utlis/constant.utils";
 import Link from "next/link";
 import Image from "next/image";
 import AnimatedText from "@/components/common/AnimatedText";
@@ -20,7 +20,7 @@ export default function Products() {
           </h2>
         </div>
         <div className="row">
-          {products.map((product) => (
+          {allProducts.map((product) => (
             <div
               key={product.id}
               className={`col-xl-4 col-lg-6 col-md-6 wow fadeInUp ${product.id === 33 ? "highlight-product" : ""}`}
@@ -44,20 +44,21 @@ export default function Products() {
                   </div>
                 </div>
                 <div className="service-content">
-                  {/* <h2 className="number">{product.number}</h2>     */}
+                  {/* <h2 className="number">{product.number}</h2> */}
                   <h3>
-                    <Link href={`/service-details/${product.id}`}>
+                    <Link href={`/product-details/${product.slug}`}>
                       {product.title}
                     </Link>
                   </h3>
-                  <p>{product.description}</p>
+                  <p>{product.para}</p>
                   <Link
-                    href={`/service-details/${product.id}`}
+                    href={`/product-details/${product.slug}`}
                     className="link-btn"
                   >
                     Explore More <i className="fa-solid fa-arrow-right" />
                   </Link>
                 </div>
+
               </div>
             </div>
           ))}

components/homes/home-1/Services.jsx

@@ -74,7 +74,10 @@ export default function Services() {
       <div className="container-fluid">
         <Swiper {...swiperOptions} className="swiper service-slider">
           {serviceItems.map((item, index) => (
-            <SwiperSlide className="swiper-slide" key={index}>
+            <SwiperSlide
+              className={`swiper-slide ${index === 2 ? "custom-padding-card" : ""}`}
+              key={index}
+            >
               <div className="service-box-items">
                 <div className="service-thumb">
                   <Image src={item.imgSrc} width={346} height={236} alt="img" />
@@ -90,15 +93,12 @@ export default function Services() {
                 <div className="service-content">
                   <h2 className="number">{item.number}</h2>
                   <h3>
-                    <Link href={`/service-details/${item.id}`}>
+                    <Link href={`/product-details/${item.slug}`}>
                       {item.title}
                     </Link>
                   </h3>
                   <p>{item.description}</p>
-                  <Link
-                    href={`/service-details/${item.id}`}
-                    className="link-btn"
-                  >
+                  <Link href={`/product-details/${item.slug}`} className="link-btn">
                     Explore More <i className="fa-solid fa-arrow-right"></i>
                   </Link>
                 </div>

components/homes/home-1/Team.jsx

@@ -1,60 +1,66 @@
-import { teamMembers } from "@/data/team";
-import React from "react";
+import { teamMembers2 } from "@/data/team";
 import Link from "next/link";
 import Image from "next/image";
 import AnimatedText from "@/components/common/AnimatedText";
 export default function Team() {
   return (
-    <section
-      id="team"
-      className="team-section fix section-padding bg-cover  scrollSpySection"
-      style={{ backgroundImage: 'url("/assets/img/team/bg-shape.png")' }}
-    >
+    <section className="team-section section-padding">
+      <div className="shape-1 float-bob-y">
+        <Image
+          src="/assets/img/about-page/left-top-element.webp"
+          width={161}
+          height={250}
+          alt="img"
+        />
+      </div>
+      <div className="shape-2">
+        <Image
+          src="/assets/img/about-page/right-bottom3.webp"
+          width={352}
+          height={428}
+          alt="img"
+        />
+      </div>
       <div className="container">
         <div className="section-title text-center">
           <h6 className="wow fadeInUp">
             <i className="fa-regular fa-arrow-left-long" />
-            our team
+            OUR CORE OPERATIONS
             <i className="fa-regular fa-arrow-right-long" />
           </h6>
           <h2 className="splt-txt wow">
-            <AnimatedText text="Our Expert Team" />
+            <AnimatedText text="Experience our efficient" />
             <br />
-            <AnimatedText text="Members" />
+            <AnimatedText text="workflows and expert handling" />
           </h2>
         </div>
         <div className="row">
-          {teamMembers.map((member) => (
+          {teamMembers2.map((member) => (
             <div
               key={member.id}
-              className="col-xl-3 col-lg-4 col-md-6 wow fadeInUp"
+              className={`col-xl-3 col-lg-4 col-md-6 col-sm-6 wow fadeInUp${member.active ? " active" : ""
+                }`}
               data-wow-delay={member.delay}
             >
-              <div
-                className={`team-card-items ${member.active ? "active" : ""}`}
-              >
+              <div className="team-box-items">
                 <div className="team-image">
                   <Image
                     src={member.image}
-                    width={238}
-                    height={294}
-                    alt="img"
+                    width={305}
+                    height={358}
+                    alt="Team"
                   />
-                  <div className="social-icon d-flex align-items-center">
-                    {member.socials.map((link, index) => (
-                      <a key={index} href={link.href}>
-                        <i className={link.iconClass} />
-                      </a>
-                    ))}
-                  </div>
                 </div>
                 <div className="team-content">
-                  <span>{member.role}</span>
-                  <h3>
-                    <Link href={`/team-details/${member.id}`}>
+                  <h5>
+                    <Link href={member.link}>
                       {member.name}
                     </Link>
-                  </h3>
+                  </h5>
+                  {/* <p>{member.role}</p> */}
+                  <Link href={member.link} className="icon">
+                    <i className="fa-solid fa-link" />
+                  </Link>
                 </div>
               </div>
             </div>

components/homes/home-1/Team2.jsx

@@ -0,0 +1,66 @@
+import { teamMembers } from "@/data/team";
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import AnimatedText from "@/components/common/AnimatedText";
+export default function Team() {
+  return (
+    <section
+      id="team"
+      className="team-section fix section-padding bg-cover  scrollSpySection"
+      style={{ backgroundImage: 'url("/assets/img/team/bg-shape.png")' }}
+    >
+      <div className="container">
+        <div className="section-title text-center">
+          <h6 className="wow fadeInUp">
+            <i className="fa-regular fa-arrow-left-long" />
+            our team
+            <i className="fa-regular fa-arrow-right-long" />
+          </h6>
+          <h2 className="splt-txt wow">
+            <AnimatedText text="Our Expert Team" />
+            <br />
+            <AnimatedText text="Members" />
+          </h2>
+        </div>
+        <div className="row">
+          {teamMembers.map((member) => (
+            <div
+              key={member.id}
+              className="col-xl-3 col-lg-4 col-md-6 wow fadeInUp"
+              data-wow-delay={member.delay}
+            >
+              <div
+                className={`team-card-items ${member.active ? "active" : ""}`}
+              >
+                <div className="team-image">
+                  <Image
+                    src={member.image}
+                    width={238}
+                    height={294}
+                    alt="img"
+                  />
+                  <div className="social-icon d-flex align-items-center">
+                    {member.socials.map((link, index) => (
+                      <a key={index} href={link.href}>
+                        <i className={link.iconClass} />
+                      </a>
+                    ))}
+                  </div>
+                </div>
+                <div className="team-content">
+                  <span>{member.role}</span>
+                  <h3>
+                    <Link href={`/team-details/${member.id}`}>
+                      {member.name}
+                    </Link>
+                  </h3>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

components/homes/home-1/project.jsx

@@ -0,0 +1,146 @@
+"use client";
+import { useState } from "react";
+import { projectsData } from "@/data/projects";
+import React from "react";
+import Image from "next/image";
+import AnimatedText from "@/components/common/AnimatedText";
+import Link from "next/link";
+import Lightbox from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+
+const tabOptions = [
+  { key: "desiccated", label: "Coconut Milk Extraction" },
+  { key: "virgin", label: "Coconut Dryer Projects" },
+  { key: "pare", label: "Coconut Pulverizing & Grinding" },
+];
+
+export default function ProjectsHomePreview() {
+  const [activeTab, setActiveTab] = useState("desiccated");
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxImages, setLightboxImages] = useState([]);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+
+  // Filter and limit projects based on tab
+  const filteredProjects = projectsData
+    .filter(
+      (project) =>
+        project.category &&
+        project.category.toLowerCase().includes(activeTab)
+    )
+    .slice(0, 6); // Limit to 6 per tab
+
+  // Get all image URLs from filtered projects
+  const imageList = filteredProjects.map((project) => project.images[0]);
+
+  // Handle lightbox opening
+  const handleImageClick = (imageSrc) => {
+    const index = imageList.findIndex((img) => img === imageSrc);
+    const slides = imageList.map((img) => ({ src: img }));
+    setLightboxImages(slides);
+    setCurrentImageIndex(index >= 0 ? index : 0);
+    setLightboxOpen(true);
+  };
+
+  return (
+    <section className="project-section section-padding3 fix">
+      <div className="container">
+        {/* Section Title */}
+        <div className="section-title text-center">
+          <h6>
+            <i className="fa-regular fa-arrow-left-long" />
+            Our Global Footprint
+            <i className="fa-regular fa-arrow-right-long" />
+          </h6>
+          <h2 className="splt-txt">
+            <AnimatedText text=" Featured Turnkey Coconut" />
+            <br />
+            <AnimatedText text=" Processing Projects" />
+          </h2>
+
+          {/* Tabs */}
+          <div className="project-tabs mt-4 d-flex justify-content-center gap-4">
+            {tabOptions.map((tab) => (
+              <button
+                key={tab.key}
+                onClick={() => setActiveTab(tab.key)}
+                className={`nav-link ${activeTab === tab.key ? "active fw-bold text-dark" : ""}`}
+                style={{
+                  border: "none",
+                  background: "transparent",
+                  fontSize: "1rem",
+                  position: "relative",
+                }}
+              >
+                {tab.label}
+                {activeTab === tab.key && (
+                  <div
+                    style={{
+                      height: "3px",
+                      backgroundColor: "#ff5502",
+                      width: "100%",
+                      position: "absolute",
+                      bottom: "-4px",
+                      left: 0,
+                      borderRadius: "2px",
+                    }}
+                  />
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Project Cards */}
+        <div className="row g-4 mt-5">
+          {filteredProjects.map((project) => (
+            <div key={project.id} className="col-xl-4 col-lg-6 col-md-6">
+              <div className="project-card-items">
+                <div
+                  className="project-image"
+                  style={{ cursor: "pointer" }}
+                  onClick={() => handleImageClick(project.images[0])}
+                >
+                  <Image
+                    width={370}
+                    height={331}
+                    src={project.images[0]}
+                    alt={project.title}
+                    style={{
+                      width: "100%",
+                      height: "auto",
+                      display: "block",
+                      background: "transparent",
+                      transition: "none",
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Lightbox */}
+        {lightboxOpen && (
+          <Lightbox
+            open={lightboxOpen}
+            close={() => setLightboxOpen(false)}
+            slides={lightboxImages}
+            index={currentImageIndex}
+          />
+        )}
+
+        {/* View More Button */}
+        <div className="text-center mt-5">
+          <Link
+            href="/project"
+            className="theme-btn theme-color wow fadeInUp"
+            data-wow-delay=".6s"
+          >
+            View More Projects
+            <i className="fa-regular fa-arrow-right" />
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}

components/project/Projects2.jsx

@@ -4,6 +4,8 @@ import { projectsData } from "@/data/projects";
 import React from "react";
 import Image from "next/image";
 import AnimatedText from "../common/AnimatedText";
+import Lightbox from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
 
 const tabOptions = [
   { key: "desiccated", label: "Coconut Milk Extraction" },
@@ -13,25 +15,45 @@ const tabOptions = [
 
 export default function ProjectsData() {
   const [activeTab, setActiveTab] = useState("desiccated");
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxImages, setLightboxImages] = useState([]);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
 
+  // Filtered projects based on active tab
   const filteredProjects = projectsData.filter(
     (project) =>
       project.category &&
       project.category.toLowerCase().includes(activeTab)
   );
 
+  // Collect unique images from filtered projects
+  const displayedImages = Array.from(
+    new Set(
+      filteredProjects.map((project) => project.images[0]) // Only first image
+    )
+  );
+
+  // Open lightbox
+  const handleImageClick = (imageSrc) => {
+    const index = displayedImages.findIndex((img) => img === imageSrc);
+    const slides = displayedImages.map((img) => ({ src: img }));
+    setLightboxImages(slides);
+    setCurrentImageIndex(index >= 0 ? index : 0);
+    setLightboxOpen(true);
+  };
 
   return (
     <section className="project-section section-padding fix">
       <div className="container">
         <div className="section-title text-center">
-          <h6 className="wow fadeInUp">
+          <h6>
             <i className="fa-regular fa-arrow-left-long" />
             Our Global Footprint
             <i className="fa-regular fa-arrow-right-long" />
           </h6>
-          <h2 className="splt-txt wow">
-            <AnimatedText text=" Featured Turnkey Coconut" /><br />
+          <h2 className="splt-txt">
+            <AnimatedText text=" Featured Turnkey Coconut" />
+            <br />
             <AnimatedText text=" Processing Projects" />
           </h2>
 
@@ -41,8 +63,7 @@ export default function ProjectsData() {
               <button
                 key={tab.key}
                 onClick={() => setActiveTab(tab.key)}
-                className={`nav-link ${activeTab === tab.key ? "active fw-bold text-dark" : ""
-                  }`}
+                className={`nav-link ${activeTab === tab.key ? "active fw-bold text-dark" : ""}`}
                 style={{
                   border: "none",
                   background: "transparent",
@@ -71,28 +92,42 @@ export default function ProjectsData() {
 
         <div className="row g-4 mt-5">
           {filteredProjects.map((project) => (
-            <div
-              key={project.id}
-              className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp"
-              data-wow-delay={project.delay}
-            >
+            <div key={project.id} className="col-xl-4 col-lg-6 col-md-6">
               <div className="project-card-items">
-                <div className="project-image">
-                  {project.images.map((image, index) => (
-                    <Image
-                      key={index}
-                      width={370}
-                      height={331}
-                      src={image}
-                      alt="img"
-                    />
-                  ))}
+                <div
+                  className="project-image"
+                  style={{ cursor: "pointer" }}
+                  onClick={() => handleImageClick(project.images[0])}
+                >
+                  <Image
+                    width={370}
+                    height={331}
+                    src={project.images[0]}
+                    alt={project.title}
+                    style={{
+                      width: "100%",
+                      height: "auto",
+                      display: "block",
+                      background: "transparent",
+                      transition: "none",
+                    }}
+                  />
                 </div>
               </div>
             </div>
           ))}
         </div>
       </div>
+
+      {/* Lightbox */}
+      {lightboxOpen && (
+        <Lightbox
+          open={lightboxOpen}
+          close={() => setLightboxOpen(false)}
+          slides={lightboxImages}
+          index={currentImageIndex}
+        />
+      )}
     </section>
   );
 }

components/turnkey-solutions/page.jsx

@@ -9,9 +9,9 @@ export default function About() {
     <>
       <section
         id="about"
-        className="about-section fix section-padding scrollSpySection"
+        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}

data/gallery.js

@@ -1,26 +1,26 @@
 export const galleryImages = [
   {
-    href: "/assets/img/footer/gallery-1.jpg",
-    src: "/assets/img/footer/gallery-1.jpg",
+    href: "/assets/img/project/chaff-cutter.webp",
+    src: "/assets/img/project/chaff-cutter.webp",
   },
   {
-    href: "/assets/img/footer/gallery-2.jpg",
-    src: "/assets/img/footer/gallery-2.jpg",
+    href: "/assets/img/project/coconut-buffer-tank.webp",
+    src: "/assets/img/project/coconut-buffer-tank.webp",
   },
   {
-    href: "/assets/img/footer/gallery-3.jpg",
-    src: "/assets/img/footer/gallery-3.jpg",
+    href: "/assets/img/project/conveyor.webp",
+    src: "/assets/img/project/conveyor.webp",
   },
   {
-    href: "/assets/img/footer/gallery-4.jpg",
-    src: "/assets/img/footer/gallery-4.jpg",
+    href: "/assets/img/project/deshelling-machine.webp",
+    src: "/assets/img/project/deshelling-machine.webp",
   },
   {
-    href: "/assets/img/footer/gallery-5.jpg",
-    src: "/assets/img/footer/gallery-5.jpg",
+    href: "/assets/img/project/leaf-dryer.webp",
+    src: "/assets/img/project/leaf-dryer.webp",
   },
   {
-    href: "/assets/img/footer/gallery-6.jpg",
-    src: "/assets/img/footer/gallery-6.jpg",
+    href: "/assets/img/project/winnowing.webp",
+    src: "/assets/img/project/winnowing.webp",
   },
 ];

data/menu.js

@@ -67,11 +67,20 @@ export const menuData = [
   //     { label: "Service Details", href: "/service-details/1" },
   //   ],
   // },
-    {
+  {
     label: "Products",
     href: "/product",
+    iconClass: "fa-regular fa-plus",
+    submenu: [
+      { label: "Coconut Deshelling Machine", slug: "coconut-deshelling-machine" },
+      { label: "Coconut Dryer (Hot Air / Tray Type)", slug: "coconut-dryer-hot-air-tray-type" },
+      { label: "Coconut Pulverizer & Grinder", slug: "coconut-pulverizer-grinder" },
+      { label: "Coconut Milk Extractor", slug: "coconut-milk-extractor" },
+      { label: "Virgin Coconut Oil (VCO) Processing Equipment", slug: "virgin-coconut-oil-vco-processing-equipment" },
+      { label: "Coconut Water Processing Unit", slug: "coconut-water-processing-unit" },
+    ],
   },
-      {
+  {
     label: "Turnkey Solutions",
     href: "/turnkey-solutions",
   },
@@ -110,9 +119,11 @@ export const onepageLinks = [
 ];
 
 export const footerLinks = [
-  { name: "About Us", href: "/about" },
-  { name: "Contact Us", href: "/contact" },
-  { name: "Blog & News", href: "/news" },
-  { name: "FAQ’S", href: "/faq" },
-  { name: "Login / Register", href: "/contact" },
+  { name: "Home", href: "/" },
+  { name: "About", href: "/about" },
+  { name: "Turnkey Solutions", href: "/turnkey-solutions" },
+  { name: "Blog", href: "/blog" },
+  { name: "Contact", href: "/contact" },
+  // { name: "FAQ’S", href: "/faq" },
+  // { name: "Login / Register", href: "/contact" },
 ];

data/services.js

@@ -1,70 +1,61 @@
 export const serviceItems = [
   {
     id: 1,
-    imgSrc: "/assets/img/home/explore/coconut-shell-removal.webp",
-    iconSrc: "/assets/img/home/explore/icon-1.webp",
+    slug: "coconut-deshelling-machine",
+    imgSrc: "/assets/img/products/coconut-deshelling.webp",
+    iconSrc: "/assets/img/products/icon-1.webp",
     number: "01",
-    title: "Coconut Shell Removal System",
-    description: "Remove shells effortlessly with coconut deshelling machines. Built for durability and speed.",
+    title: "Coconut Deshelling Machine",
+    description: "Remove coconut shells with high-speed, durable, low-maintenance, energy-efficient, robust deshellers built for continuous production.",
   },
   {
     id: 2,
-    imgSrc: "/assets/img/home/explore/energy-efficient-coconut-dryer.webp",
-    iconSrc: "/assets/img/home/explore/icon-2.webp",
+    slug: "coconut-dryer-hot-air-tray-type",
+    imgSrc: "/assets/img/products/coconut-dryer.webp",
+    iconSrc: "/assets/img/products/icon-2.webp",
     number: "02",
-    title: "Energy-Efficient Coconut Dryer",
-    description: "Accelerate your drying process with coconut dryers designed for uniform moisture removal.",
+    title: "Coconut Dryer (Hot Air / Tray Type)",
+    description: "Achieve uniform drying with our energy-efficient, high-capacity dryers designed to preserve quality and extend shelf life.",
   },
   {
     id: 3,
-    imgSrc: "/assets/img/home/explore/coconut-processing-machinery.webp",
-    iconSrc: "/assets/img/home/explore/icon-3.webp",
+    slug: "coconut-pulverizer-grinder",
+    imgSrc: "/assets/img/products/coconut-grinder.webp",
+    iconSrc: "/assets/img/products/icon-3.webp",
     number: "03",
-    title: "Coconut Processing Machinery",
-    description: "Custom-engineered coconut processing machinery tailored to your production line.",
+    title: "Coconut Pulverizer & Grinder",
+    description: "Grind dried coconut into fine powder with consistent, reliable output, low power, high efficiency, and smooth automated operation.",
   },
   {
     id: 4,
-    imgSrc: "/assets/img/home/explore/coconut-processing-equipment.webp",
-    iconSrc: "/assets/img/home/explore/icon-4.webp",
+    slug: "coconut-milk-extractor",
+    imgSrc: "/assets/img/products/coconut-milk-extractor.webp",
+    iconSrc: "/assets/img/products/icon-4.webp",
     number: "04",
-    title: "Coconut Processing Equipment",
-    description: "Reliable and compact coconut processing equipment suitable for small to large-scale industries.",
+    title: "Coconut Milk Extractor",
+    description: "Extract rich, pure coconut milk with hygienic, food-grade, corrosion-resistant machinery suitable for small and industrial-scale operations.",
   },
   {
     id: 5,
-    imgSrc: "/assets/img/home/explore/coconut-shell-removal.webp",
-    iconSrc: "/assets/img/home/explore/icon-1.webp",
-    number: "01",
-    title: "Coconut Shell Removal System",
-    description: "Remove shells effortlessly with coconut deshelling machines. Built for durability and speed.",
+    slug: "virgin-coconut-oil-vco-processing-equipment",
+    imgSrc: "/assets/img/products/coconut-oil.webp",
+    iconSrc: "/assets/img/products/icon-5.webp",
+    number: "05",
+    title: "Virgin Coconut Oil (VCO) Processing Equipment",
+    description: "From cold press systems to filtration and bottling, complete VCO machinery for production.",
   },
   {
     id: 6,
-    imgSrc: "/assets/img/home/explore/energy-efficient-coconut-dryer.webp",
-    iconSrc: "/assets/img/home/explore/icon-2.webp",
-    number: "02",
-    title: "Energy-Efficient Coconut Dryer",
-    description: "Accelerate your drying process with coconut dryers designed for uniform moisture removal.",
-  },
-  {
-    id: 7,
-    imgSrc: "/assets/img/home/explore/coconut-processing-machinery.webp",
-    iconSrc: "/assets/img/home/explore/icon-3.webp",
-    number: "03",
-    title: "Coconut Processing Machinery",
-    description: "Custom-engineered coconut processing machinery tailored to your production line.",
-  },
-  {
-    id: 8,
-    imgSrc: "/assets/img/home/explore/coconut-processing-equipment.webp",
-    iconSrc: "/assets/img/home/explore/icon-4.webp",
-    number: "04",
-    title: "Coconut Processing Equipment",
-    description: "Reliable and compact coconut processing equipment suitable for small to large-scale industries.",
-  },
+    slug: "coconut-water-processing-unit",
+    imgSrc: "/assets/img/products/coconut-water.webp",
+    iconSrc: "/assets/img/products/icon-6.webp",
+    number: "06",
+    title: "Coconut Water Processing Unit",
+    description: "Sterilize, filter, and bottle coconut water with modular setups. Designed for scalability, Ensure purity and stability.",
+  }
 ];
 
+
 export const serviceItems2 = [
   {
     id: 9,
@@ -208,23 +199,27 @@ export const services = [
 export const services2 = [
   {
     id: 23,
-    title: "Construction",
+    title: "Coconut Deshelling Machine",
   },
   {
     id: 24,
-    title: "House Renovation",
+    title: "Coconut Dryer (Hot Air / Tray Type)",
   },
   {
     id: 25,
-    title: "Material Supply",
+    title: "Coconut Pulverizer & Grinder",
   },
   {
     id: 26,
-    title: "Project Management",
+    title: "Coconut Milk Extractor",
   },
   {
     id: 27,
-    title: "Heating and Water",
+    title: "Virgin Coconut Oil (VCO) Processing Equipment",
+  },
+  {
+    id: 28,
+    title: "Coconut Water Processing Unit",
   },
 ];
 

data/skills.js

@@ -10,8 +10,8 @@ export const skills = [
     delay: ".4s",
   },
   {
-    title: "Minimal Maintenance with Maximum Uptime",
-    percentage: 75,
+    title: "Maintenance with Maximum Uptime",
+    percentage: 87,
     delay: ".2s",
   },
 ];

package-lock.json

@@ -9,17 +9,20 @@
       "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",
         "sass": "^1.77.8",
         "swiper": "^11.1.9",
-        "wowjs": "^1.1.3"
+        "wowjs": "^1.1.3",
+        "yet-another-react-lightbox": "^3.25.0"
       }
     },
     "node_modules/@babel/runtime": {
@@ -227,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",
@@ -281,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",
@@ -338,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",
@@ -355,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",
@@ -365,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",
@@ -377,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",
@@ -391,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",
@@ -403,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",
@@ -472,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",
@@ -620,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",
@@ -631,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",
@@ -643,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",
@@ -827,6 +1144,29 @@
       "dependencies": {
         "animate.css": "latest"
       }
+    },
+    "node_modules/yet-another-react-lightbox": {
+      "version": "3.25.0",
+      "resolved": "https://registry.npmjs.org/yet-another-react-lightbox/-/yet-another-react-lightbox-3.25.0.tgz",
+      "integrity": "sha512-NaCeEXCpdwoTvoOpxNK9gdW8+oHs79yVH+D2YeVQWRjH5i32e5CoXndAAFP2p8awzVYfSonherrE9JMTpfD3EA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@types/react": "^16 || ^17 || ^18 || ^19",
+        "@types/react-dom": "^16 || ^17 || ^18 || ^19",
+        "react": "^16.8.0 || ^17 || ^18 || ^19",
+        "react-dom": "^16.8.0 || ^17 || ^18 || ^19"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
     }
   }
 }

package.json

@@ -10,16 +10,19 @@
   },
   "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",
     "sass": "^1.77.8",
     "swiper": "^11.1.9",
-    "wowjs": "^1.1.3"
+    "wowjs": "^1.1.3",
+    "yet-another-react-lightbox": "^3.25.0"
   }
 }

public/assets/css/main.css

@@ -5843,6 +5843,34 @@ background-color: #0b2273;
   }
 }
 
+.section-padding2 {
+  padding: 120px 0 0;
+}
+@media (max-width: 1199px) {
+  .section-padding2 {
+    padding: 100px 0 0;
+  }
+}
+@media (max-width: 991px) {
+  .section-padding2 {
+    padding: 80px 0 0;
+  }
+}
+
+.section-padding3 {
+  padding: 0 0 120px;
+}
+@media (max-width: 1199px) {
+  .section-padding3 {
+    padding: 0 0 100px ;
+  }
+}
+@media (max-width: 991px) {
+  .section-padding3 {
+    padding: 0 0 80px;
+  }
+}
+
 .service-section {
   position: relative;
   z-index: 9;

public/assets/scss/_contact.scss

@@ -110,11 +110,11 @@
     @include flex;
     gap: 20px;
     background-color: #F2F5FA;
-    padding: 50px;
+    padding: 36px;
 
     @include breakpoint (max-lg){
         flex-wrap: wrap;
-        padding: 40px 50px;
+        padding: 27px 13px;
     }
 
     .icon {
@@ -168,7 +168,7 @@
     .form-clt {
         position: relative;
 
-        input,textarea {
+        input,textarea, select {
             padding: 16px 30px;
             border: none;
             outline: none;

public/assets/scss/_header.scss

@@ -974,7 +974,7 @@
 	.page-heading {
 
 		h1 {
-			color: $white;
+			color: #0b2273;
 			font-size: 74px;
 			position: relative;
 			z-index: 9;

public/assets/scss/_hero.scss

@@ -72,7 +72,7 @@
         }
 
         h1 {
-            color: $white;
+            color: #0b2273;
             text-transform: uppercase;
 
             .break-line {

public/assets/scss/_news.scss

@@ -128,7 +128,7 @@
 
 .news-section {
     position: relative;
-    background-image: url('/assets/img/home/blog/blog-bg.webp');
+    // background-image: url('/assets/img/home/blog/blog-bg.webp');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;

public/assets/scss/_project.scss

@@ -308,22 +308,22 @@
     right: 0;
   }
 
-  &:hover {
-    .project-image {
-      img {
-        &:nth-child(1) {
-          transform-origin: bottom center;
-          transform: translateX(-100%) translateX(150px) scaleX(0)
-            rotateY(90deg);
-        }
+  // &:hover {
+  //   .project-image {
+  //     img {
+  //       &:nth-child(1) {
+  //         transform-origin: bottom center;
+  //         transform: translateX(-100%) translateX(150px) scaleX(0)
+  //           rotateY(90deg);
+  //       }
 
-        &:nth-child(2) {
-          transition: transform 500ms ease, top 500ms ease;
-          transform: translateX(0%) translateX(0px) scaleX(1) rotateY(0deg);
-        }
-      }
-    }
-  }
+  //       &:nth-child(2) {
+  //         transition: transform 500ms ease, top 500ms ease;
+  //         transform: translateX(0%) translateX(0px) scaleX(1) rotateY(0deg);
+  //       }
+  //     }
+  //   }
+  // }
 }
 
 .project-details-wrapper {

public/assets/scss/_section.scss

@@ -88,5 +88,34 @@
 		padding: 80px 0;
 	}
 }
+
+.section-padding2 {
+  padding: 120px 0 0;
+}
+@media (max-width: 1199px) {
+  .section-padding2 {
+    padding: 100px 0 0;
+  }
+}
+@media (max-width: 991px) {
+  .section-padding2 {
+    padding: 80px 0 0;
+  }
+}
+
+.section-padding3 {
+  padding: 0 0 120px;
+}
+@media (max-width: 1199px) {
+  .section-padding3 {
+    padding: 0 0 100px ;
+  }
+}
+@media (max-width: 991px) {
+  .section-padding3 {
+    padding: 0 0 80px;
+  }
+}
+
 //>>>>> Basic Css End <<<<<//
 

public/assets/scss/_service.scss

@@ -398,3 +398,26 @@
   }
 }
 
+.custom-highlight-box {
+  background-color: #F2F5FA;
+  border-left: 4px solid #f55b1f;
+  padding: 20px 24px;
+  position: relative;
+  font-style: italic;
+  color: #000;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.custom-highlight-box .quote-icon {
+  flex-shrink: 0;
+}
+.product-title{
+    font-size: 30px;
+}
+@media (min-width: 1440px) and (max-width: 1920px) {
+  .custom-padding-card .service-box-items .service-content {
+    padding: 0 28px 30px 28px !important; 
+  }
+}

utlis/constant.utils.js

@@ -2,9 +2,9 @@ export const allBlogs = [
   {
     id: 1,
     slug: "rise-of-turnkey-coconut-processing-plants",
-    image: "/assets/img/home/blog/blog-1.webp",
+    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",
@@ -81,9 +81,9 @@ export const allBlogs = [
   {
     id: 2,
     slug: "coconut-deshelling-machine-upgrades",
-    image: "/assets/img/home/blog/blog-2.webp",
+    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",
@@ -153,9 +153,9 @@ export const allBlogs = [
   {
     id: 3,
     slug: "choosing-the-right-coconut-dryer",
-    image: "/assets/img/home/blog/blog-3.webp",
+    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",
@@ -467,4 +467,334 @@ export const allBlogs = [
 
 `
   },
-];
+];
+export const allProducts = [
+  {
+    id: 28,
+    slug: "coconut-deshelling-machine",
+    bannerImage: "/assets/img/product-details/deshelling/deshelling-banner.webp",
+    bigImage: "/assets/img/product-details/deshelling/big-img.webp",
+    image: "/assets/img/products/coconut-deshelling.webp",
+    icon: "/assets/img/products/icon-1.webp",
+    number: "01",
+    title: "Coconut Deshelling Machine",
+    para: "Effortlessly remove coconut shells with high-speed, durable, low-maintenance, energy-efficient deshellers built for continuous production.",
+    description: `
+    <p>
+      Cibus Industries’ approach to deshelling automation starts with the recognition that this is one of the most manually taxing stages in the coconut processing line. Our engineering team focuses on precision-mechanical dynamics - designing blade alignments, kernel preservation systems, and adaptive shell removal mechanisms that ensure consistent performance across varying coconut sizes and shell hardness levels. In the fabrication workflow, we treat every desheller unit as a standalone mechanical project, calibrating torque ratios, drive shaft tolerances, and blade curvature based on projected throughput. Rather than mass-producing to a single standard, we tailor motor speeds, safety enclosure access points, and emergency stop integrations based on plant ergonomics and operational rhythm. 
+    </p>
+    <div class="custom-highlight-box mt-4 mb-4">
+  <p>
+    <em>
+      At Cibus, we treat deshelling as more than a step it’s the foundation of precision processing. Every machine is built to protect the purity of the kernel from the very first cut.
+    </em>
+  </p>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 36 36"
+    fill="none"
+    class="quote-icon"
+  >
+    <path
+      d="M7.71428 20.0711H0.5V5.64258H14.9286V20.4531L9.97665 30.3568H3.38041L8.16149 20.7947L8.5233 20.0711H7.71428Z"
+      stroke="#F55B1F"
+    />
+    <path
+      d="M28.2846 20.0711H21.0703V5.64258H35.4989V20.4531L30.547 30.3568H23.9507L28.7318 20.7947L29.0936 20.0711H28.2846Z"
+      stroke="#F55B1F"
+    />
+  </svg>
+</div>
+
+    <p>
+      In our quality trials, we use actual tender and mature coconuts to simulate batch variation and shell toughness, evaluating output accuracy, rejection rate, and operator handling feedback. This hands-on, trial-based refinement ensures the machine performs not just on specs, but in real-world conditions where reliability and safety matter. The result is a rugged, high-performance desheller that reduces labor dependency, protects the integrity of the coconut kernel, and maintains steady output - even across multi-shift operations.
+    </p>
+    <p class="mt-3">
+      Each deshelling system we ship is backed by custom integration support, allowing easy retrofitting into legacy lines or seamless onboarding within new, turnkey plant environments. From smart start-up routines to preventive maintenance planning, our after-sales engineering team works directly with your floor supervisors to maximize uptime and system longevity. Over the years, we've also optimized blade change protocols and access design to cut maintenance downtime by nearly 40% compared to conventional deshelling units. Whether you're scaling up production or replacing outdated equipment, the Cibus deshelling machine becomes more than just a tool - it becomes a dependable link in your processing chain that adds precision, repeatability, and long-term value to your operations.
+    </p>
+  `,
+    images: [
+      "/assets/img/product-details/deshelling/1.webp",
+      "/assets/img/product-details/deshelling/2.webp",
+      "/assets/img/product-details/deshelling/3.webp",
+      "/assets/img/product-details/deshelling/4.webp"
+    ],
+    delay: ".2s",
+  },
+  {
+    id: 29,
+    slug: "coconut-dryer-hot-air-tray-type",
+    bannerImage: "/assets/img/product-details/dryer/dryer-banner.webp",
+    bigImage: "/assets/img/product-details/dryer/big-img.webp",
+    image: "/assets/img/products/coconut-dryer.webp",
+    icon: "/assets/img/products/icon-2.webp",
+    number: "02",
+    title: "Coconut Dryer (Hot Air / Tray Type)",
+    para: "Achieve uniform drying with our energy-efficient, high-capacity dryers designed to preserve quality and extend shelf life.",
+    description: `
+    <p>
+       The Coconut Dryer by Cibus Industries is designed not as a generic drying chamber, but as a precision-engineered thermal system built to preserve the nutritional quality, color, and shelf stability of coconut-based products. Every dryer is developed with a tailored airflow profile based on client requirements - taking into account local ambient humidity, power infrastructure, tray density, and desired output textures. We use thermal simulation data and airflow modeling to refine heat circulation patterns inside the chamber, ensuring consistent temperature distribution across every tray and minimizing hot or cold zones. 
+    </p>
+    <div class="custom-highlight-box mt-4 mb-4">
+  <p>
+    <em>
+      Even, efficient drying is the heartbeat of shelf-stable coconut products. Our systems are designed to deliver consistency batch after batch, without compromising quality.
+    </em>
+  </p>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 36 36"
+    fill="none"
+    class="quote-icon"
+  >
+    <path
+      d="M7.71428 20.0711H0.5V5.64258H14.9286V20.4531L9.97665 30.3568H3.38041L8.16149 20.7947L8.5233 20.0711H7.71428Z"
+      stroke="#F55B1F"
+    />
+    <path
+      d="M28.2846 20.0711H21.0703V5.64258H35.4989V20.4531L30.547 30.3568H23.9507L28.7318 20.7947L29.0936 20.0711H28.2846Z"
+      stroke="#F55B1F"
+    />
+  </svg>
+</div>
+
+    <p>
+      Our engineering team integrates fine-tuned exhaust systems, insulation layering, and humidity venting mechanisms that are typically absent in off-the-shelf dryers. This makes the Cibus Tray Dryer ideal for delicate products like desiccated coconut or coconut flour base, where uneven drying can lead to color loss or rejection in QA. Moreover, the dryer can be configured to support electric, biomass, or hybrid energy sources, giving processors in remote or fuel-volatile regions greater flexibility in operational costs and carbon footprint.
+    </p>
+    <p class="mt-3">
+      Each dryer is assembled in our high-spec facility under stringent material and fabrication protocols - from the SS304 internal contact surfaces to the load-bearing tray rails tested for continuous high-heat cycles. We run pre-dispatch test batches using client-specified material samples, measuring not only the drying time but also batch uniformity, moisture residuals, and energy consumption per kilogram. Unlike conventional dryers that often require manual adjustments, our smart control panel supports programmable temperature stages, real-time feedback alerts, and optional IoT integration for remote diagnostics. This level of detail makes our tray dryers more than just drying units - they function as process control instruments. For clients scaling from batch to semi-continuous production, we also provide modular expansion support so that additional dryer units can be phased into the system with minimal disruption. It’s this attention to process behavior, energy economics, and product outcomes that distinguishes Cibus dryers across global markets.
+    </p>
+  `,
+    images: [
+      "/assets/img/product-details/dryer/1.webp",
+      "/assets/img/product-details/dryer/2.webp",
+      "/assets/img/product-details/dryer/3.webp",
+      "/assets/img/product-details/dryer/4.webp",
+    ],
+    delay: ".4s",
+  },
+  {
+    id: 30,
+    slug: "coconut-pulverizer-grinder",
+    bannerImage: "/assets/img/product-details/grinder/grinder-banner.webp",
+    bigImage: "/assets/img/product-details/grinder/big-img.webp",
+    image: "/assets/img/products/coconut-grinder.webp",
+    icon: "/assets/img/products/icon-3.webp",
+    number: "03",
+    title: "Coconut Pulverizer & Grinder",
+    para: "Grind dried coconut into fine powder with consistent output, low power consumption, minimal maintenance, high efficiency, and smooth operation.",
+    description: `
+    <p>
+       Cibus Industries’ Coconut Pulverizer & Grinder is engineered to close the gap between drying and final formulation - where product quality, texture consistency, and processing efficiency converge. Unlike generic grinders adapted from spice or grain lines, this machine is purpose-built for the fibrous and oil-rich nature of dried coconut. Our engineering team developed a direct-drive grinding system paired with heavy-duty bearings and a high-torque, low-RPM motor that ensures fine grinding with minimal heat generation. This mechanical configuration helps preserve the nutritional value, color, and aromatic integrity of the product - which are often compromised in high-speed friction-based systems. 
+    </p>
+    <div class="custom-highlight-box mt-4 mb-4">
+  <p>
+    <em>
+      Grind quality defines product quality and we engineer every detail to deliver uniform texture, low heat, and unmatched reliability in continuous-duty operation.
+    </em>
+  </p>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 36 36"
+    fill="none"
+    class="quote-icon"
+  >
+    <path
+      d="M7.71428 20.0711H0.5V5.64258H14.9286V20.4531L9.97665 30.3568H3.38041L8.16149 20.7947L8.5233 20.0711H7.71428Z"
+      stroke="#F55B1F"
+    />
+    <path
+      d="M28.2846 20.0711H21.0703V5.64258H35.4989V20.4531L30.547 30.3568H23.9507L28.7318 20.7947L29.0936 20.0711H28.2846Z"
+      stroke="#F55B1F"
+    />
+  </svg>
+</div>
+
+    <p>
+      We also incorporated variable mesh configuration to allow processors to switch between food-grade flour, medium-coarse powders, and feed-grade materials without needing multiple machines. The grinding chamber is built entirely from SS304 stainless steel with a mirror-polished interior and tool-free access, ensuring zero microbial buildup and ease of sanitation - even during back-to-back shifts.During production, we simulate continuous-duty load cycles using desiccated and semi-dried coconut flakes to verify powder consistency and particle dispersion. This attention to real-world behavior enables our grinder to maintain a stable micron profile across varying feedstock densities. 
+    </p>
+   <p class="mt-3">
+      The cyclone discharge system is engineered with pneumatic assist for faster evacuation, preventing regrinding and thermal buildup inside the chamber. Additionally, our noise-controlled enclosures ensure smoother operation at <75 dB, which is critical for urban facilities or processors working under food-grade safety compliance. Beyond its mechanical design, the machine is also modular in layout - it can be placed inline between dryers and packaging systems, or configured as a stand-alone grinding unit for co-packing and export units. We understand that in today’s market, coconut flour is not just a by-product; it’s a high-value ingredient in health food, baking, beverage and nutraceutical sectors. That’s why our grinders are not just robust - they’re tuned for repeatability, hygiene, and performance under the pressure of commercial-scale demand.
+    </p>
+  `,
+    images: [
+      "/assets/img/product-details/grinder/1.webp",
+      "/assets/img/product-details/grinder/2.webp",
+      "/assets/img/product-details/grinder/3.webp",
+      "/assets/img/product-details/grinder/4.webp"
+    ],
+    delay: ".6s",
+  },
+  {
+    id: 31,
+    slug: "coconut-milk-extractor",
+    bannerImage: "/assets/img/product-details/milk/milk-extractor-banner.webp",
+    bigImage: "/assets/img/product-details/milk/big-img.webp",
+    image: "/assets/img/products/coconut-milk-extractor.webp",
+    icon: "/assets/img/products/icon-4.webp",
+    number: "04",
+    title: "Coconut Milk Extractor",
+    para: "Extract rich, pure coconut milk with hygienic, food-grade, corrosion-resistant machinery suitable for small and industrial-scale operations.",
+    description: `
+    <p>
+       The Coconut Milk Extractor from Cibus Industries is built with one purpose in mind: to maximize yield without compromising on purity, texture, or nutritional value. Unlike generic screw presses or modified juice extractors, our machine is engineered specifically for the structural complexity of grated coconut - balancing pressure, separation, and emulsion behavior in a single, fine-tuned system. At the heart of the design is a robust SS304/SS316-grade extraction chamber that operates with low-vibration, food-safe mechanics and precision-pressed seals to prevent leakage or contamination. 
+    </p>
+    <div class="custom-highlight-box mt-4 mb-4">
+  <p>
+    <em>
+      Coconut milk extraction is an art of yield, hygiene, and taste retention. Our extractors are designed to preserve the natural richness in every drop.
+    </em>
+  </p>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 36 36"
+    fill="none"
+    class="quote-icon"
+  >
+    <path
+      d="M7.71428 20.0711H0.5V5.64258H14.9286V20.4531L9.97665 30.3568H3.38041L8.16149 20.7947L8.5233 20.0711H7.71428Z"
+      stroke="#F55B1F"
+    />
+    <path
+      d="M28.2846 20.0711H21.0703V5.64258H35.4989V20.4531L30.547 30.3568H23.9507L28.7318 20.7947L29.0936 20.0711H28.2846Z"
+      stroke="#F55B1F"
+    />
+  </svg>
+</div>
+
+    <p>
+      The extractor is available in both batch and continuous models, enabling seamless alignment with upstream graters or deshellers and downstream cream separation or pasteurization setups. Built for clients who need consistent extraction ratios - whether they’re producing fresh coconut milk beverages, condensed milk for desserts, or dairy-alternative bases - this machine delivers 90–95% milk recovery with minimal foaming and virtually no kernel residue in the output.
+    </p>
+    <p class="mt-3">
+      Our engineering process begins with an understanding of the end application: beverage, culinary, or industrial. Based on this, we customize pressure profiles, screw pitch geometry, and optional filtration modules to deliver the exact viscosity, fat content, and mouthfeel required by the processor. The drive systems are torque-optimized to prevent fiber jamming, while precision bearings ensure low-friction movement even in high-volume operations. 
+
+    </p>
+    <p class="mt-3">
+      During QA testing, we use Brix and viscosity meters to benchmark milk consistency, and batch flow sensors to validate real-time output rates. Each extractor is run with freshly grated coconut - not water-soaked pulp - so we can tune extraction cycles based on natural fiber elasticity and moisture retention. For clients producing cream-grade or fermented coconut milk, we also offer customizable mesh filtration and inline homogenizer compatibility to refine product uniformity right at the source.
+    </p>
+  `,
+    images: [
+      "/assets/img/product-details/milk/1.webp",
+      "/assets/img/product-details/milk/2.webp",
+      "/assets/img/product-details/milk/3.webp",
+      "/assets/img/product-details/milk/4.webp"
+    ],
+    delay: ".2s",
+  },
+  {
+    id: 32,
+    slug: "virgin-coconut-oil-vco-processing-equipment",
+    bannerImage: "/assets/img/product-details/oil/oil-processing-banner.webp",
+    bigImage:"/assets/img/product-details/oil/big-img.webp",
+    image: "/assets/img/products/coconut-oil.webp",
+    icon: "/assets/img/products/icon-5.webp",
+    number: "05",
+    title: "Virgin Coconut Oil (VCO) Processing Equipment",
+    para: "From cold press systems to filtration and bottling, complete VCO machinery for value-added production.",
+    description: `
+    <p>
+       The Virgin Coconut Oil Processing Equipment from Cibus Industries is the result of decades of iterative engineering focused on purity, efficiency, and product integrity. Unlike general-purpose oil extractors or modular add-ons, our VCO systems are designed from the ground up to serve a complete cold-process oil line - from grated coconut to filtered, ready-to-bottle virgin oil. Built for both wet and dry processing methods, our system includes low-shear cold presses, centrifugal separation units, multi-stage filtration modules, and temperature-stabilized storage tanks, each fabricated with GMP-grade SS304 or SS316 material. The cold press is designed to operate below 40°C to preserve vital micronutrients and antioxidants, ensuring the final oil retains its natural aroma, flavor, and health benefits. 
+    </p>
+    <div class="custom-highlight-box mt-4 mb-4">
+  <p>
+    <em>
+      We engineer every VCO system to preserve what matters most purity, aroma, and nutrient integrity. From cold pressing to final filtration, precision drives every step.
+    </em>
+  </p>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 36 36"
+    fill="none"
+    class="quote-icon"
+  >
+    <path
+      d="M7.71428 20.0711H0.5V5.64258H14.9286V20.4531L9.97665 30.3568H3.38041L8.16149 20.7947L8.5233 20.0711H7.71428Z"
+      stroke="#F55B1F"
+    />
+    <path
+      d="M28.2846 20.0711H21.0703V5.64258H35.4989V20.4531L30.547 30.3568H23.9507L28.7318 20.7947L29.0936 20.0711H28.2846Z"
+      stroke="#F55B1F"
+    />
+  </svg>
+</div>
+
+    <p>
+      Whether the requirement is a compact system for artisanal producers or a fully automated line for industrial-scale exporters, our VCO equipment adapts with modular architecture, precision controls, and customization flexibility.Every system is pre-engineered to match your expected output volume, energy infrastructure, and target oil recovery rate. We begin the design process by studying your raw material type - copra, grated wet coconut, or hybrid inputs and build out a line that optimizes oil yield while reducing waste. The integrated filter press is tuned for flow velocity, plate mesh grade, and oil clarity, enabling consistent results even during volume fluctuations. In many installations, our clients have reported recovery efficiencies as high as 65% from grated coconut, with significant reductions in product sedimentation and storage instability. 
+    </p>
+    <p class="mt-3">
+      The centrifugal units are balanced for long-run operation with minimal wear, and the output channels are designed to integrate directly with bottling or barrel-packing units. We also provide optional degumming and deodorizing modules for markets requiring enhanced shelf stability or cosmetic-grade refinement.Our production facility treats each VCO setup not just as a machine build - but as a cleanroom-grade ecosystem. All units are assembled in HEPA-filtered zones with pre-sterilized contact parts and undergo food safety validation before dispatch. During commissioning, our engineering team simulates complete production cycles using your actual coconut feedstock to fine-tune extraction torque, filtration pressure, and oil retention metrics.
+    </p>
+  `,
+    images: [
+      "/assets/img/product-details/oil/1.webp",
+      "/assets/img/product-details/oil/2.webp",
+      "/assets/img/product-details/oil/3.webp",
+      "/assets/img/product-details/oil/4.webp"
+    ],
+    delay: ".4s",
+  },
+  {
+    id: 33,
+    slug: "coconut-water-processing-unit",
+    bannerImage: "/assets/img/product-details/water/water-processing-banner.webp",
+    bigImage:"/assets/img/product-details/water/big-img.webp",
+    image: "/assets/img/products/coconut-water.webp",
+    icon: "/assets/img/products/icon-6.webp",
+    number: "06",
+    title: "Coconut Water Processing Unit",
+    para: "Sterilize, filter, and bottle coconut water with our modular, maintainable setups. Designed for scalability, these systems ensure purity and shelf stability.",
+    description: `
+    <p>
+       Cibus Industries’ Coconut Water Processing Unit is purpose-built to protect the most sensitive coconut derivative - a clear, nutrient-rich liquid that spoils easily, oxidizes rapidly, and is highly reactive to heat and contamination. Unlike conventional liquid fillers or beverage plants adapted for coconut water, our system is engineered ground-up with one core objective: retain freshness and purity while achieving commercial-scale shelf life. At the core of this system is a triple-stage filtration module that eliminates suspended solids and microbial impurities without altering flavor or transparency. This is followed by a sterilization stage, which can be configured as UV, flash pasteurization (HTST), or hybrid thermal treatment depending on the client's end-market and regulatory goals. Built using high-grade SS316 materials for corrosion resistance and bio-compatibility, every surface that touches the product is polished to pharmaceutical-level hygiene - reducing the risk of microbial adherence, even during long production cycles.
+    </p>
+    <div class="custom-highlight-box mt-4 mb-4">
+  <p>
+    <em>
+      Coconut water demands care at every second  from filtration to filling. Our systems are built to lock in freshness, clarity, and shelf-life without compromise.
+    </em>
+  </p>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 36 36"
+    fill="none"
+    class="quote-icon"
+  >
+    <path
+      d="M7.71428 20.0711H0.5V5.64258H14.9286V20.4531L9.97665 30.3568H3.38041L8.16149 20.7947L8.5233 20.0711H7.71428Z"
+      stroke="#F55B1F"
+    />
+    <path
+      d="M28.2846 20.0711H21.0703V5.64258H35.4989V20.4531L30.547 30.3568H23.9507L28.7318 20.7947L29.0936 20.0711H28.2846Z"
+      stroke="#F55B1F"
+    />
+  </svg>
+</div>
+
+    <p>
+      What distinguishes the Cibus unit is the way we manage the flow of the liquid - not just the treatment. The fluid path is engineered to avoid turbulence, back-splash, or air contact, which are leading causes of oxidation and loss of freshness in coconut water. Anti-foaming nozzles, laminar flow pipes, and bubble traps are integrated into the filling sequence to ensure smooth transfer from holding tanks to bottles or pouches. The Clean-Fill system is supported by a smart panel that monitors every variable - from temperature to flow rate and tank pressure - ensuring real-time control and traceability. Whether you are serving premium bottled coconut water, flavored RTD beverages, or fortified hydration products, this system provides the sterile, modular platform needed for clean-label production.
+    </p>
+    <p class="mt-3">
+      Our units are designed with growth in mind. For early-stage brands, we offer semi-automatic versions that require minimal operator training and offer excellent per-liter ROI. For high-output facilities, the fully automated lines can process up to 2,000 liters per hour, with optional integration into CIP systems, filling and capping machines, and packaging conveyors. During commissioning, we work with your actual water samples to calibrate microbial load handling, taste retention, and shelf life expectations - adjusting sterilization time, contact temperature, and filtration porosity accordingly. Our experience across Southeast Asia, Africa, and the Middle East has helped us engineer systems that can adapt to varied coconut varieties, ambient temperatures, and utility infrastructures.
+    </p>
+  `,
+    images: [
+      "/assets/img/product-details/water/1.webp",
+      "/assets/img/product-details/water/2.webp",
+      "/assets/img/product-details/water/3.webp",
+      "/assets/img/product-details/water/4.webp"
+    ],
+    delay: ".6s",
+  },
+];