Pending image and faq contact integration updated

pages/faq.js

@@ -1,11 +1,12 @@
-import Accordion from 'react-bootstrap/Accordion';
-import React, { useState } from "react";
+import Accordion from "react-bootstrap/Accordion";
+import React, { useState, useEffect } from "react";
 import Layout from "@/src/layout/Layout";
 import Link from "next/link";
-
 import Ffaq from "@/src/components/services-details-banner/ffaq.js";
-import SubCard from '@/src/components/AboveFooter';
-import ConsenHead from '@/src/ConsenHead';
+import SubCard from "@/src/components/AboveFooter";
+import ConsenHead from "@/src/ConsenHead";
+import ReCAPTCHA from "react-google-recaptcha";
+import axios from "axios";
 
 
 
@@ -28,7 +29,7 @@ const Faq = () => {
                         <strong>Cross-platform apps</strong> (like Flutter or React Native) deliver near-native performance with the advantage of working on both Android and iOS.
                     </li>
                     <li>
-                       Our experts help you choose the right approach based on your budget, goals, and target audience.
+                        Our experts help you choose the right approach based on your budget, goals, and target audience.
                     </li>
                 </ul>
             ),
@@ -70,6 +71,93 @@ const Faq = () => {
     const [active, setActive] = useState(faqsDataPart1[0].id);
     const [data, setData] = useState(faqDataPart1[0].id);
 
+    // ------------------ CONTACT FORM LOGIC ------------------
+    const [formData, setFormData] = useState({
+        name: "",
+        email: "",
+        phone: "",
+        service: "",
+        message: "",
+    });
+    const [formErrors, setFormErrors] = useState({});
+    const [captchaToken, setCaptchaToken] = useState(null);
+    const [alert, setAlert] = useState({ show: false, type: "", message: "" });
+
+    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.name.trim()) errors.name = "Name is required.";
+        if (!formData.email.trim()) errors.email = "Email is required.";
+        if (!formData.phone.trim()) errors.phone = "Phone is required.";
+        if (!formData.service.trim()) errors.service = "Please select a service.";
+        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.name,
+            email: formData.email,
+            phone: formData.phone,
+            subject: formData.web || "FAQ Contact Form",
+            message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
+            to: "info@metatroncubesolutions.com",
+            senderName: "Metatroncube FAQ Page",
+            recaptchaToken: captchaToken,
+        };
+
+        try {
+            const res = await axios.post(
+                "https://mailserver.metatronnest.com/send",
+                emailData,
+                { headers: { "Content-Type": "application/json" } }
+            );
+
+            setAlert({
+                show: true,
+                type: "success",
+                message: res?.data?.message || "Message sent successfully!",
+            });
+
+            setFormData({
+                name: "",
+                email: "",
+                phone: "",
+                service: "",
+                message: "",
+            });
+            setCaptchaToken(null);
+            setFormErrors({});
+        } catch (error) {
+            setAlert({
+                show: true,
+                type: "danger",
+                message: "Failed to send message. Please try again later.",
+            });
+        }
+    };
+
+    useEffect(() => {
+        if (alert.show) {
+            const timer = setTimeout(() => {
+                setAlert((prev) => ({ ...prev, show: false }));
+            }, 5000);
+            return () => clearTimeout(timer);
+        }
+    }, [alert.show]);
+
+
 
 
     return (
@@ -277,92 +365,109 @@ const Faq = () => {
                                     <h3 className="meta">Reach Out to MetatronCube India</h3>
                                     <h6>We value your thoughts & queries.</h6>
                                 </div>
-                                <form onSubmit={(e) => e.preventDefault()} method="POST" id="dreamit-form">
+
+                                {alert.show && (
+                                    <div className={`alert alert-${alert.type}`}>{alert.message}</div>
+                                )}
+
+                                <form onSubmit={handleSubmit}>
                                     <div className="row">
                                         <div className="col-lg-6">
                                             <div className="form_box mb-3">
-                                                <input type="text" name="name" placeholder="Full Name" className="form-control" />
+                                                <input
+                                                    type="text"
+                                                    name="name"
+                                                    placeholder="Full Name"
+                                                    value={formData.name}
+                                                    onChange={handleChange}
+                                                    className="form-control"
+                                                />
+                                                {formErrors.name && <small className="text-danger">{formErrors.name}</small>}
                                             </div>
                                         </div>
+
                                         <div className="col-lg-6">
                                             <div className="form_box mb-3">
-                                                <input type="email" name="email" placeholder="Email Address" className="form-control" />
+                                                <input
+                                                    type="email"
+                                                    name="email"
+                                                    placeholder="Email Address"
+                                                    value={formData.email}
+                                                    onChange={handleChange}
+                                                    className="form-control"
+                                                />
+                                                {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
                                             </div>
                                         </div>
+
                                         <div className="col-lg-6">
                                             <div className="form_box mb-3">
-                                                <input type="text" name="phone" placeholder="Phone Number" className="form-control" />
+                                                <input
+                                                    type="text"
+                                                    name="phone"
+                                                    placeholder="Phone Number"
+                                                    value={formData.phone}
+                                                    onChange={handleChange}
+                                                    className="form-control"
+                                                />
+                                                {formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
                                             </div>
                                         </div>
+
                                         <div className="col-lg-6">
                                             <div className="form_box mb-3">
-                                                <input type="text" name="web" placeholder="Subject" className="form-control" />
+                                                <select
+                                                    name="service"
+                                                    value={formData.service}
+                                                    onChange={handleChange}
+                                                    className="form-control"
+                                                >
+                                                    <option value="">Select Service</option>
+                                                    <option value="Website Development">Website Development</option>
+                                                    <option value="Mobile Application Development">Mobile Application Development</option>
+                                                    <option value="Graphic Designing">Graphic Designing</option>
+                                                    <option value="UI / UX Designing ">UI / UX Designing </option>
+                                                    <option value="SEO & Content Writing">SEO & Content Writing</option>
+                                                    <option value="Digital Marketing">Digital Marketing</option>
+                                                </select>
+                                                {formErrors.service && <small className="text-danger">{formErrors.service}</small>}
                                             </div>
                                         </div>
+
                                         <div className="col-lg-12">
                                             <div className="form_box mb-3">
                                                 <textarea
                                                     name="message"
-                                                    id="message"
-                                                    cols={30}
-                                                    rows={5}
                                                     placeholder="Write Message"
+                                                    value={formData.message}
+                                                    onChange={handleChange}
                                                     className="form-control"
                                                 />
+                                                {formErrors.message && <small className="text-danger">{formErrors.message}</small>}
                                             </div>
-                                            <div className="quote_button text-center">
+                                        </div>
+
+                                        <div className="col-lg-12 mb-3">
+                                            <ReCAPTCHA
+                                                sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
+                                                onChange={handleCaptchaChange}
+                                            />
+                                            {formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
+                                        </div>
+
+                                        <div className="quote_button text-center col-lg-12">
                                                 <button className="btn btn-primary" type="submit">
                                                     Send A Message
                                                 </button>
                                             </div>
-                                        </div>
                                     </div>
                                 </form>
-                                <div id="status" />
                             </div>
                         </div>
-
-
-                        {/* <div className="color-bg pb-90 pt-90">
-                        <div className="container">
-                            <div className="row sub-bgmn align-items-center change-bg">
-                                <div className="col-lg-4 col-md-6 p-0">
-                                    <div className="sub-left-thumb justify-content-center align-items-center">
-                                        <img src="assets/images/faq/schedule-consultation.webp" className="myImage" alt="Newsletter" />
-                                    </div>
-                                </div>
-                                <div className="col-lg-6 col-md-6">
-                                    <div className="subscribe-right-bx">
-                                        <h4 className="mb-3 text-center card-color ml-5 myText">
-                                            Take the First Step Towards Digital Excellence. Book Your Personalized Consultation with Our Experts Today.
-                                        </h4>
-
-                                        <div className="col-lg-12">
-                                            <div className="service-bottom-text pt-0 pb-0">
-                                                <p>
-                                                    {" "}
-
-
-                                                    <Link legacyBehavior href="https://calendly.com/metatroncubeswsolutions/request-consultation?month=2025-05">
-                                                        <a className="mt-4 border">Schedule Consultation</a>
-                                                    </Link>
-
-                                                </p>
-
-
-
-                                            </div>
-                                        </div>
-                                        <div id="status" />
-                                    </div>
-                                </div>
-                                <div className="col-lg-2" />
-                            </div>
-                        </div>
-                    </div> */}
                     </div>
                 </div>
 
+
                 <div className="call-do-action-section">
                     <div className="container">
                         <div className="row">

public/assets/css/style.css

@@ -7380,7 +7380,7 @@ span.fill {
 
 .blogb-area {
   background: linear-gradient(rgba(19, 19, 35, 0.6), rgba(0, 0, 0, 0.5)),
-    url(../images/home/blog/4.webp) no-repeat center/cover;
+    url(../images/service-details/innerbanner/4.webp) no-repeat center/cover;
   height: 350px;
   position: relative;
 }

utils/constant.utils.js

@@ -6,10 +6,10 @@ export const BlogData = [
     seoTitle: "Top Web Development Trends 2025 - MetatronCube Web Design",
     seoDesc: "Discover key web development trends for 2025. From AI to PWAs and responsive design, see how future-ready websites drive business growth.",
     image: "/assets/images/blog/blog-cards/blog-1.webp",
-    big_image: "/assets/images/blog/blog-details/viral-content.webp",
-    date: "MARCH 20, 2025",
+    big_image: "/assets/images/blog/blog-details/blog-1-big-img.webp",
+    date: "MARCH 25, 2025",
     user: "Admin",
-    category: "Digital Marketing",
+    category: "Web Development",
     slug: "top-web-development-trends-to-watch-in-2025",
     description: `
     <p>The world of technology is evolving at lightning speed, and <b>website development</b> continues to stand at the core of digital transformation. For businesses in 2025, having a strong online presence is no longer optional - it’s essential. Whether you’re a startup looking for <b>affordable website development</b> or an enterprise seeking <b>custom website development</b>, keeping up with the latest trends will determine how competitive your brand remains.</p>
@@ -102,10 +102,10 @@ export const BlogData = [
     seoTitle: "Why Startups Need Mobile Apps in 2025 - MetatronCube India",
     seoDesc: "Discover why startups in 2025 need mobile apps. Android, iOS, and cross-platform app development drive growth, visibility, and engagement.",
     image: "/assets/images/blog/blog-cards/blog-2-new.webp",
-    big_image: "/assets/images/blog/blog-details/blog-large-2.webp",
-    date: "FEBURUARY 27, 2025",
+    big_image: "/assets/images/blog/blog-details/blog-2-big-img.webp",
+    date: "FEBURUARY 29, 2025",
     user: "Admin",
-    category: "Digital Marketing",
+    category: "Application Development",
     slug: "why-every-startup-needs-a-mobile-app-in-2025",
     description: `
     <p>The startup ecosystem is booming, and in 2025, the race to stand out has never been more competitive. With millions of businesses launching each year, startups must leverage technology that gives them a clear edge. One of the most powerful tools at their disposal? Mobile applications.</p>
@@ -195,8 +195,8 @@ export const BlogData = [
     seoTitle: "How SEO & Content Writing Boost Sales - MetatronCube India",
     seoDesc: "See how SEO and content writing boost online sales. Learn strategies to improve rankings, drive traffic, and convert leads into loyal customers.",
     image: "/assets/images/blog/blog-cards/blog-3.webp",
-    big_image: "/assets/images/blog/blog-details/local-seo.webp",
-    date: "NOVEMBER 26, 2024",
+    big_image: "/assets/images/blog/blog-details/blog-3-big-img.webp",
+    date: "NOVEMBER 29, 2024",
     user: "Admin",
     category: "SEO",
     slug: "how-seo-content-writing-boost-online-sales",