new section and conatct inetegration and testimonial integration are updated

src/app/careers/page.tsx

@@ -12,7 +12,7 @@ import ServiceSection from "@/components/careers/ServiceSection";
 import WorkProcessSection from "@/components/careers/WorkProcessSection";
 import FeaturesSection from "@/components/home/home-1/FeaturesSection";
 import PageHeader from "@/components/common/PageHeader";
-import AboutService from "@/components/services/AboutService";
+import AboutService from "@/components/services-digital-solutions/AboutService";
 import AboutThree from "@/components/home/AboutThree";
 import FaqFour from "@/components/home/FaqFour";
 

src/app/faq/page.tsx

@@ -7,6 +7,7 @@ import InnerBanner from "@/components/common/InnerBanner";
 import FaqPageSection from "@/components/faq/FaqPageSection";
 import FaqVideoSection from "@/components/careers/FaqVideoSection";
 import PageHeader from "@/components/common/PageHeader";
+import FaqSection from "@/components/home/home-3/FaqSection";
 
 export default function FaqPage() {
     useEffect(() => {
@@ -27,6 +28,7 @@ export default function FaqPage() {
                 <PageHeader title="FAQ" />
                 <FaqPageSection />
                 <FaqVideoSection />
+                <FaqSection/>
             </main>
             <Footer1 />
         </>

src/app/page.tsx

@@ -46,9 +46,9 @@ export default function MainPage() {
             <main>
                 <BannerSection />
                 <AboutSection />
-                <MedicalServices />
-                <CounsellingSolutions />
                 <ChooseSection />
+                <CounsellingSolutions />
+                <MedicalServices />
                 <BrandSection />
                 <CallAreaThree />
                 <CounterAreaTwo />

src/app/services-digital-solutions/[slug]/page.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Header1 from "@/components/layout/Header1";
 import Footer1 from "@/components/layout/Footer1";
 import PageHeader from "@/components/common/PageHeader";
-import ServiceDetails from "@/components/services/ServiceDetails";
+import ServiceDetails from "@/components/services-digital-solutions/ServiceDetails";
 import { psychologyServices } from "@/utils/data";
 import { notFound } from "next/navigation";
 

src/app/services-digital-solutions/page.tsx

@@ -21,7 +21,7 @@ import Header1 from "@/components/layout/Header1";
 import WorkProcessSection from "@/components/home/home-2/WorkProcessSection";
 import ServiceSection2 from "@/components/careers/ServiceSection";
 import WorkProcessSection2 from "@/components/careers/WorkProcessSection";
-import AboutService from "@/components/services/AboutService";
+import AboutService from "@/components/services-digital-solutions/AboutService";
 import PageHeader from "@/components/common/PageHeader";
 import AboutTwo from "@/components/home/AboutTwo";
 

src/components/about/WhyChooseUs.tsx

@@ -65,167 +65,6 @@ const WhyChooseUs = () => {
                 </div>
             </div>
 
-            <style jsx>{`
-                .why-choose-us {
-                    padding: 80px 0;
-                    background: #eaf0f9;
-                }
-                @media (max-width: 767px) {
-                    .why-choose-us {
-                        padding: 60px 0;
-                    }
-                }
-                .section-subtitle {
-                    color: #3779b9;
-                    font-weight: 700;
-                    margin-bottom: 15px;
-                    display: flex;
-                    align-items: center;
-                    gap: 12px;
-                    font-size: 15px;
-                    text-transform: uppercase;
-                    letter-spacing: 1px;
-                }
-                .rotate-triangle {
-                    font-size: 14px;
-                    transform: rotate(-30deg);
-                    margin-top: -2px;
-                }
-                .section-title {
-                    font-size: 44px;
-                    font-weight: 800;
-                    color: #1a1a1a;
-                    line-height: 1.2;
-                    margin-bottom: 25px;
-                }
-                .section-desc {
-                    font-size: 16px;
-                    color: #666;
-                    line-height: 1.7;
-                    margin-bottom: 35px;
-                }
-                .feature-item {
-                    padding: 25px 0;
-                }
-                .border-top-line {
-                    border-top: 1px solid #eee;
-                }
-                .feature-icon {
-                    width: 70px;
-                    height: 70px;
-                    background: #3779b9;
-                    border-radius: 6px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    margin-right: 25px;
-                    flex-shrink: 0;
-                    color: #fff;
-                    font-size: 28px;
-                }
-                .feature-content h4 {
-                    font-size: 22px;
-                    font-weight: 700;
-                    margin-bottom: 8px;
-                    color: #1a1a1a;
-                }
-                .feature-content p {
-                    font-size: 15px;
-                    color: #666;
-                    margin: 0;
-                }
-                .bottom-note {
-                    padding-top: 30px;
-                    border-top: 1px solid #eee;
-                }
-                .note-item {
-                    display: flex;
-                    align-items: flex-start;
-                    gap: 15px;
-                }
-                .note-item i {
-                    color: #1a1a1a;
-                    font-size: 18px;
-                    margin-top: 3px;
-                }
-                .note-item span {
-                    font-size: 16px;
-                    color: #444;
-                    font-weight: 500;
-                    line-height: 1.5;
-                }
-                .image-area-wrapper {
-                    padding-left: 20px;
-                }
-                .main-image {
-                    width: 100%;
-                    border-radius: 4px;
-                    overflow: hidden;
-                    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
-                }
-                .main-image img {
-                    width: 100%;
-                    display: block;
-                }
-                .circular-image {
-                    position: absolute;
-                    top: 50%;
-                    left: -80px;
-                    transform: translateY(-50%);
-                    width: 280px;
-                    height: 280px;
-                    background: #fff;
-                    padding: 10px;
-                    border-radius: 50%;
-                    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
-                    z-index: 2;
-                }
-                .inner-circle {
-                    width: 100%;
-                    height: 100%;
-                    border-radius: 50%;
-                    overflow: hidden;
-                    border: 2px solid #fff;
-                }
-                .inner-circle img {
-                    width: 100%;
-                    height: 100%;
-                    object-fit: cover;
-                }
-                @media (max-width: 1199px) {
-                    .circular-image {
-                        width: 220px;
-                        height: 220px;
-                        left: -50px;
-                    }
-                    .section-title {
-                        font-size: 36px;
-                    }
-                }
-                @media (max-width: 991px) {
-                    .content-area {
-                        padding-right: 0;
-                        margin-bottom: 60px;
-                    }
-                    .image-area-wrapper {
-                        padding-left: 0;
-                    }
-                    .circular-image {
-                        width: 200px;
-                        height: 200px;
-                        left: -30px;
-                    }
-                }
-                @media (max-width: 575px) {
-                    .circular-image {
-                        position: relative;
-                        top: 0;
-                        left: 0;
-                        transform: none;
-                        margin: -60px auto 0;
-                    }
-                }
-            `}</style>
         </section>
     );
 };

src/components/careers/ContactSection.tsx

@@ -1,9 +1,31 @@
 "use client";
 
-import React, { useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
+import ReCAPTCHA from "react-google-recaptcha";
+import axios from "axios";
 
 const ContactSection = () => {
     const sectionRef = useRef<HTMLDivElement>(null);
+    const [formData, setFormData] = useState({
+        name: "",
+        phone: "",
+        email: "",
+        service: "",
+        message: "",
+    });
+
+    const [formErrors, setFormErrors] = useState<any>({});
+    const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+    const [alert, setAlert] = useState({ show: false, type: "", message: "" });
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+        const { name, value } = e.target;
+        setFormData((prev) => ({ ...prev, [name]: value }));
+    };
+
+    const handleCaptchaChange = (token: string | null) => {
+        setCaptchaToken(token);
+    };
 
     useEffect(() => {
         const observer = new IntersectionObserver(
@@ -42,15 +64,71 @@ const ContactSection = () => {
         return () => observer.disconnect();
     }, []);
 
-    const handleSubmit = (e: React.FormEvent) => {
+    const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
-        // Handle form submission logic here
+
+        const errors: any = {};
+        if (!formData.name.trim()) errors.name = "Name is required.";
+        if (!formData.phone.trim()) errors.phone = "Phone is required.";
+        if (!formData.email.trim()) errors.email = "Email 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 = {
+            ...formData,
+            message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
+            to: "info@metatroncubesolutions.com",
+            senderName: "Metatroncube Careers Contact",
+            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: "",
+                phone: "",
+                email: "",
+                service: "",
+                message: "",
+            });
+            setCaptchaToken(null);
+            setFormErrors({});
+        } catch (error) {
+            console.error("❌ Error sending email:", 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 (
         <section ref={sectionRef} className="contact-one">
             <div className="container">
-                <div className="row">
+                <div className="row align-items-center">
                     <div className="col-lg-8">
                         <div className="contact-one__info wow fadeInLeft" data-wow-delay="100ms" style={{ visibility: "hidden" }}>
                             <div className="contact-one__info__icon">
@@ -60,8 +138,9 @@ const ContactSection = () => {
                                 Let&apos;s call together just <span>contact</span> line
                             </h3>
                             <p className="contact-one__info__text">
-                                <a href="tel:255225551">++255225551</a>, <a href="tel:6544144444">+6544144444</a>
+                                <a href="tel:+16476797651">+1-647-679-7651</a>
                             </p>
+
                         </div>
                     </div>
                     <div className="col-lg-4">
@@ -95,23 +174,93 @@ const ContactSection = () => {
                                         Get free Business touch Customers me.
                                     </h3>
                                 </div>
-                                <p className="contact-one__content__text">
+
-                                    Business tailored it design, management &amp; support services <br />business agency elit, sed do eiusmod tempor.
+                                {alert.show && (
-                                </p>
+                                    <div className={`alert alert-${alert.type === 'danger' ? 'danger' : 'success'} mb-4`} style={{ padding: '15px', color: '#fff', backgroundColor: alert.type === 'danger' ? 'rgba(255, 107, 107, 0.2)' : 'rgba(76, 175, 80, 0.2)', border: alert.type === 'danger' ? '1px solid #ff6b6b' : '1px solid #4CAF50', borderRadius: '8px' }}>
+                                        {alert.message}
+                                    </div>
+                                )}
+
                                 <form className="contact-one__form form-one" onSubmit={handleSubmit}>
                                     <div className="form-one__group">
-                                        <div className="form-one__control">
+                                        <div className="mb-20">
-                                            <input type="text" name="name" placeholder="Your Name" required />
+                                            <label className="form-label">Full Name</label>
+                                            <input
+                                                type="text"
+                                                name="name"
+                                                placeholder="Full Name"
+                                                value={formData.name}
+                                                onChange={handleChange}
+                                                className="form-input"
+                                            />
+                                            {formErrors.name && <small className="text-danger">{formErrors.name}</small>}
                                         </div>
-                                        <div className="form-one__control">
+                                        <div className="mb-20">
-                                            <input type="email" name="email" placeholder="Email address" required />
+                                            <label className="form-label">Email Address</label>
+                                            <input
+                                                type="email"
+                                                name="email"
+                                                placeholder="Email Address"
+                                                value={formData.email}
+                                                onChange={handleChange}
+                                                className="form-input"
+                                            />
+                                            {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
                                         </div>
-                                        <div className="form-one__control form-one__control--full">
+                                        <div className="mb-20">
-                                            <textarea name="message" placeholder="Message" rows={6} required></textarea>
+                                            <label className="form-label">Phone Number</label>
+                                            <input
+                                                type="text"
+                                                name="phone"
+                                                placeholder="Phone Number"
+                                                value={formData.phone}
+                                                onChange={handleChange}
+                                                className="form-input"
+                                            />
+                                            {formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
                                         </div>
-                                        <div className="form-one__control form-one__control--full">
+                                        <div className="mb-20">
-                                            <button type="submit" className="tolak-btn">
+                                            <label className="form-label">Select Service</label>
-                                                <b>Send Request</b>
+                                            <select
+                                                name="service"
+                                                value={formData.service}
+                                                onChange={handleChange}
+                                                className="form-select-custom"
+                                            >
+                                                <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 className="form-one__control--full mb-20">
+                                            <label className="form-label">Write Message</label>
+                                            <textarea
+                                                name="message"
+                                                placeholder="Write Message"
+                                                rows={4}
+                                                value={formData.message}
+                                                onChange={handleChange}
+                                                className="form-textarea"
+                                            ></textarea>
+                                            {formErrors.message && <small className="text-danger">{formErrors.message}</small>}
+                                        </div>
+
+                                        <div className="form-one__control--full mb-3 mt-3">
+                                            <ReCAPTCHA
+                                                sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
+                                                onChange={handleCaptchaChange}
+                                            />
+                                            {formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
+                                        </div>
+
+                                        <div className="form-one__control--full">
+                                            <button type="submit" className="submit-btn tolak-btn w-100">
+                                                <b>SEND A Message</b>
                                                 <span></span>
                                             </button>
                                         </div>

src/components/careers/FaqVideoSection.tsx

@@ -1,10 +1,88 @@
 "use client";
 
-import React from "react";
+import React, { useState, useEffect } from "react";
+import ReCAPTCHA from "react-google-recaptcha";
+import axios from "axios";
 
 const FaqVideoSection = () => {
+    const [formData, setFormData] = useState({
+        name: "",
+        phone: "",
+        email: "",
+        service: "",
+        message: "",
+    });
+
+    const [formErrors, setFormErrors] = useState<any>({});
+    const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+    const [alert, setAlert] = useState({ show: false, type: "", message: "" });
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+        const { name, value } = e.target;
+        setFormData((prev) => ({ ...prev, [name]: value }));
+    };
+
+    const handleCaptchaChange = (token: string | null) => {
+        setCaptchaToken(token);
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        const errors: any = {};
+        if (!formData.name.trim()) errors.name = "Name is required.";
+        if (!formData.phone.trim()) errors.phone = "Phone is required.";
+        if (!formData.email.trim()) errors.email = "Email 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 = {
+            ...formData,
+            message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
+            to: "info@metatroncubesolutions.com",
+            senderName: "Metatroncube FAQ Section Contact",
+            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: "", phone: "", email: "", service: "", message: "" });
+            setCaptchaToken(null);
+            setFormErrors({});
+        } catch (error) {
+            console.error("Error sending email:", 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 (
-        <>
+        <React.Fragment>
             <section className="faq-two">
                 <div
                     className="faq-two__bg jarallax"
@@ -18,22 +96,84 @@ const FaqVideoSection = () => {
                                     <span className="section-subtitle">Get In Touch</span>
                                     <h2 className="section-heading text-white">Have a Project in Mind?</h2>
                                 </div>
-                                <form className="faq-contact-form">
+
+                                {alert.show && (
+                                    <div className={`faq-alert alert-${alert.type}`}>
+                                        {alert.message}
+                                    </div>
+                                )}
+
+                                <form className="faq-contact-form" onSubmit={handleSubmit}>
                                     <div className="row">
                                         <div className="col-md-6 mb-20">
-                                            <input type="text" placeholder="Your Name" required />
+                                            <label className="faq-form-label">Full Name</label>
+                                            <input
+                                                type="text"
+                                                name="name"
+                                                placeholder="Full Name"
+                                                value={formData.name}
+                                                onChange={handleChange}
+                                            />
+                                            {formErrors.name && <small className="faq-error">{formErrors.name}</small>}
                                         </div>
                                         <div className="col-md-6 mb-20">
-                                            <input type="email" placeholder="Email Address" required />
+                                            <label className="faq-form-label">Email Address</label>
+                                            <input
+                                                type="email"
+                                                name="email"
+                                                placeholder="Email Address"
+                                                value={formData.email}
+                                                onChange={handleChange}
+                                            />
+                                            {formErrors.email && <small className="faq-error">{formErrors.email}</small>}
                                         </div>
                                         <div className="col-md-6 mb-20">
-                                            <input type="tel" placeholder="Phone Number" required />
+                                            <label className="faq-form-label">Phone Number</label>
+                                            <input
+                                                type="tel"
+                                                name="phone"
+                                                placeholder="Phone Number"
+                                                value={formData.phone}
+                                                onChange={handleChange}
+                                            />
+                                            {formErrors.phone && <small className="faq-error">{formErrors.phone}</small>}
                                         </div>
                                         <div className="col-md-6 mb-20">
-                                            <input type="text" placeholder="Subject" required />
+                                            <label className="faq-form-label">Select Service</label>
+                                            <select
+                                                name="service"
+                                                value={formData.service}
+                                                onChange={handleChange}
+                                                className="faq-select"
+                                            >
+                                                <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="faq-error">{formErrors.service}</small>}
                                         </div>
                                         <div className="col-md-12 mb-20">
-                                            <textarea placeholder="Write a Message" rows={7} required></textarea>
+                                            <label className="faq-form-label">Write Message</label>
+                                            <textarea
+                                                name="message"
+                                                placeholder="Write a Message"
+                                                rows={5}
+                                                value={formData.message}
+                                                onChange={handleChange}
+                                            ></textarea>
+                                            {formErrors.message && <small className="faq-error">{formErrors.message}</small>}
+                                        </div>
+                                        <div className="col-md-12 mb-20">
+                                            <ReCAPTCHA
+                                                sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
+                                                onChange={handleCaptchaChange}
+                                                theme="dark"
+                                            />
+                                            {formErrors.captcha && <small className="faq-error">{formErrors.captcha}</small>}
                                         </div>
                                         <div className="col-md-12 text-center">
                                             <button type="submit" className="primary-btn-1">
@@ -68,142 +208,7 @@ const FaqVideoSection = () => {
                     </div>
                 </div>
             </section>
-
+        </React.Fragment>
-            <style jsx>{`
-                .faq-two {
-                    padding: 120px 0 200px;
-                    position: relative;
-                    background-color: #0f172a;
-                    clip-path: none !important;
-                }
-                .faq-two__bg {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    bottom: 0;
-                    background-attachment: fixed;
-                    background-size: cover;
-                    opacity: 0.15;
-                }
-                .contact-form-card {
-                    background: rgba(26, 31, 43, 0.8);
-                    backdrop-filter: blur(10px);
-                    padding: 60px;
-                    border-radius: 30px;
-                    border: 1px solid rgba(255, 255, 255, 0.05);
-                    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
-                    margin-bottom: 20px;
-                }
-                .section-subtitle {
-                    color: #3779b9;
-                    text-transform: uppercase;
-                    letter-spacing: 2px;
-                    font-weight: 700;
-                    font-size: 14px;
-                    display: block;
-                    margin-bottom: 15px;
-                }
-                .section-heading {
-                    font-size: 42px;
-                    font-weight: 800;
-                    margin-bottom: 0;
-                }
-                .faq-contact-form input,
-                .faq-contact-form textarea {
-                    width: 100%;
-                    background: rgba(255, 255, 255, 0.03);
-                    border: 1px solid rgba(255, 255, 255, 0.1);
-                    padding: 18px 25px;
-                    border-radius: 12px;
-                    color: #fff;
-                    outline: none;
-                    transition: all 0.3s ease;
-                }
-                .faq-contact-form textarea {
-                    min-height: 220px;
-                    resize: vertical;
-                }
-                .faq-contact-form input:focus,
-                .faq-contact-form textarea:focus {
-                    background: rgba(255, 255, 255, 0.05);
-                    border-color: #3779b9;
-                    box-shadow: 0 0 15px rgba(55, 121, 185, 0.2);
-                }
-                .primary-btn-1, .primary-btn-1-link {
-                    background: #3779b9;
-                    color: #fff;
-                    padding: 18px 45px;
-                    border-radius: 50px;
-                    font-weight: 700;
-                    border: none;
-                    cursor: pointer;
-                    display: inline-flex;
-                    align-items: center;
-                    gap: 10px;
-                    transition: all 0.3s ease;
-                    text-transform: uppercase;
-                    font-size: 14px;
-                    letter-spacing: 1px;
-                    margin-top: 25px;
-                }
-                .primary-btn-1:hover, .primary-btn-1-link:hover {
-                    transform: translateY(-3px);
-                    box-shadow: 0 15px 30px rgba(55, 121, 185, 0.4);
-                    color: #fff;
-                }
-                .video-three__inner {
-                    border-radius: 30px;
-                    overflow: hidden;
-                    min-height: 500px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    position: relative;
-                }
-                .video-three__inner::before {
-                    content: '';
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                    background: rgba(15, 23, 42, 0.6);
-                }
-                .video-content-overlay {
-                    position: relative;
-                    z-index: 1;
-                    text-align: center;
-                    max-width: 800px;
-                    padding: 0 20px;
-                }
-                .consultation-title {
-                    font-size: 48px;
-                    color: #fff;
-                    font-weight: 800;
-                    line-height: 1.2;
-                    margin-bottom: 20px;
-                }
-                .consultation-text {
-                    font-size: 20px;
-                    color: rgba(255, 255, 255, 0.8);
-                    margin-bottom: 0;
-                }
-                @media (max-width: 991px) {
-                    .consultation-title {
-                        font-size: 36px;
-                    }
-                    .contact-form-card {
-                        padding: 40px 30px;
-                    }
-                }
-                @media (max-width: 767px) {
-                    .consultation-title {
-                        font-size: 30px;
-                    }
-                }
-            `}</style>
-        </>
     );
 };
 

src/components/careers/ServiceSection.tsx

@@ -80,7 +80,7 @@ const ServiceSection2 = () => {
                                         <span className={service.icon}></span>
                                     </div>
                                     <h3 className="service-three__item__title">
-                                        <Link href={`/services/${service.slug}`}>{service.title}</Link>
+                                        <Link href={`/services-digital-solutions/${service.slug}`}>{service.title}</Link>
                                     </h3>
                                     <p className="service-three__item__text">{service.description}</p>
                                 </div>

src/components/common/ContactPopup/ContactPopup.tsx

@@ -3,12 +3,6 @@ import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import ReCAPTCHA from "react-google-recaptcha";
 import axios from "axios";
-
-interface ContactPopupProps {
-    isOpen: boolean;
-    onClose: () => void;
-}
-
 import ContactStatus from '../../contact/ContactStatus';
 
 interface ContactPopupProps {
@@ -35,7 +29,6 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
         setMounted(true);
     }, []);
 
-    // Close on ESC key
     useEffect(() => {
         const handleEsc = (e: KeyboardEvent) => {
             if (e.key === 'Escape') onClose();
@@ -63,7 +56,7 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
         if (!formData.businessName.trim()) errors.businessName = "Business name requested.";
         if (!formData.projectRequirement.trim()) errors.projectRequirement = "Requirement details needed.";
         if (!formData.budgetRange) errors.budgetRange = "Please select a budget range.";
-        // if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
+        if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
 
         setFormErrors(errors);
         if (Object.keys(errors).length > 0) return;
@@ -73,7 +66,7 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
         const emailData = {
             ...formData,
             message: `Business: ${formData.businessName}<br />Budget: ${formData.budgetRange}<br /><br />Requirement: ${formData.projectRequirement}`,
-            to: "akashlucaas@gmail.com",
+            to: "info@metatroncubesolutions.com",
             senderName: "Metatroncube Contact Popup",
             recaptchaToken: captchaToken,
         };
@@ -149,7 +142,6 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
                         </div>
                     </div>
 
-                    {/* Right Side: Form */}
                     <div className="col-lg-7 form-panel">
                         <button onClick={onClose} className="close-btn">
                             <i className="fa-solid fa-xmark"></i>
@@ -160,19 +152,19 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
                                 <h3 className="form-title">Start Your Project</h3>
                                 <form className="contact-form" onSubmit={handleSubmit}>
                                     <div className="row g-3">
-                                        <div className="col-md-6">
+                                        <div className="col-sm-6">
                                             <input type="text" name="name" placeholder="Full Name" value={formData.name} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
                                             {formErrors.name && <small className="text-danger">{formErrors.name}</small>}
                                         </div>
-                                        <div className="col-md-6">
+                                        <div className="col-sm-6">
                                             <input type="email" name="email" placeholder="Email Address" value={formData.email} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
                                             {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
                                         </div>
-                                        <div className="col-md-6">
+                                        <div className="col-sm-6">
                                             <input type="text" name="phone" placeholder="Phone Number" value={formData.phone} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
                                             {formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
                                         </div>
-                                        <div className="col-md-6">
+                                        <div className="col-sm-6">
                                             <input type="text" name="businessName" placeholder="Business Name" value={formData.businessName} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
                                             {formErrors.businessName && <small className="text-danger">{formErrors.businessName}</small>}
                                         </div>
@@ -222,239 +214,6 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
                     </div>
                 </div>
             </div>
-
-            <style jsx>{`
-                .status-wrapper {
-                    height: 100%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                }
-                .contact-popup-overlay {
-                    position: fixed;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                    background: rgba(2, 6, 11, 0.85);
-                    backdrop-filter: blur(8px);
-                    z-index: 9999;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    padding: 15px;
-                    opacity: 0;
-                    visibility: hidden;
-                    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-                }
-                .contact-popup-overlay.active {
-                    opacity: 1;
-                    visibility: visible;
-                }
-                .contact-popup-content {
-                    background: #fff;
-                    width: 100%;
-                    max-width: 1000px;
-                    max-height: 95vh;
-                    border-radius: 20px;
-                    overflow: hidden;
-                    box-shadow: 0 40px 100px rgba(0,0,0,0.4);
-                    position: relative;
-                    display: flex;
-                    flex-direction: column;
-                }
-                .info-panel {
-                    padding: 50px;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                }
-                .info-inner {
-                    position: relative;
-                    z-index: 1;
-                }
-                .title {
-                    font-size: 28px;
-                    font-weight: 800;
-                    margin-bottom: 15px;
-                    line-height: 1.2;
-                    color: #ffffff !important;
-                }
-                .desc {
-                    font-size: 15px;
-                    color: #ffffff !important;
-                    line-height: 1.5;
-                }
-                .contact-details {
-                    margin-top: 30px;
-                    margin-bottom: 25px;
-                }
-                .detail-item {
-                    display: flex;
-                    align-items: center;
-                    margin-bottom: 15px;
-                    gap: 12px;
-                }
-                .icon {
-                    width: 40px;
-                    height: 40px;
-                    border-radius: 50%;
-                    background: rgba(255,255,255,0.1);
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 14px;
-                }
-                .text p {
-                    margin: 0;
-                    color: #ffffff !important;
-                    font-size: 12px;
-                }
-                .text h5 {
-                    margin: 0;
-                    font-size: 15px;
-                    color: #ffffff !important;
-                }
-                .social-links {
-                    display: flex;
-                    gap: 10px;
-                }
-                .social-icon {
-                    width: 32px;
-                    height: 32px;
-                    border-radius: 50%;
-                    background: rgba(255,255,255,0.1);
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    color: #fff;
-                    transition: 0.3s;
-                    font-size: 13px;
-                }
-                .social-icon:hover {
-                    background: #fff;
-                    color: #3779b9;
-                }
-
-                .form-panel {
-                    padding: 40px 50px;
-                    position: relative;
-                    background: #fff;
-                    overflow-y: auto;
-                    scrollbar-width: thin;
-                    scrollbar-color: #3779b9 #f1f1f1;
-                }
-                .form-panel::-webkit-scrollbar { width: 6px; }
-                .form-panel::-webkit-scrollbar-track { background: #f1f1f1; }
-                .form-panel::-webkit-scrollbar-thumb { background: #3779b9; border-radius: 10px; }
-
-                .close-btn {
-                    position: absolute;
-                    top: 20px;
-                    right: 20px;
-                    background: #f3f4f6;
-                    border: none;
-                    width: 35px;
-                    height: 35px;
-                    border-radius: 50%;
-                    font-size: 18px;
-                    cursor: pointer;
-                    color: #1a1f2b;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    transition: all 0.3s;
-                    z-index: 100;
-                }
-                .close-btn:hover {
-                    background: #3779b9;
-                    color: #fff;
-                    transform: rotate(90deg);
-                }
-                .form-title {
-                    font-size: 24px;
-                    font-weight: 700;
-                    margin-bottom: 20px;
-                    color: #1a1f2b;
-                }
-                .form-input, .form-textarea, .form-select {
-                    width: 100%;
-                    padding: 10px 15px;
-                    border-radius: 8px;
-                    border: 1px solid #e2e8f0;
-                    outline: none;
-                    background: #f8fafc;
-                    transition: 0.2s;
-                    font-size: 13.5px;
-                }
-                .form-input:focus, .form-textarea:focus, .form-select:focus {
-                    border-color: #3779b9;
-                    background: #fff;
-                    box-shadow: 0 0 0 3px rgba(55,121,185,0.1);
-                }
-                .form-textarea { resize: none; }
-                .submit-btn {
-                    width: 100%;
-                    border: none;
-                    padding: 14px;
-                    border-radius: 8px;
-                    margin-top: 15px;
-                    background: #3779b9;
-                    color: #fff;
-                    font-weight: 700;
-                    font-size: 14px;
-                    cursor: pointer;
-                    transition: all 0.3s;
-                }
-                .submit-btn:hover:not(:disabled) {
-                    background: #1a1f2b;
-                    transform: translateY(-1px);
-                }
-
-                /* Mobile Optimizations */
-                @media (max-width: 991px) {
-                    .info-panel { display: none; }
-                    .form-panel { padding: 40px 30px; }
-                    .contact-popup-content { max-width: 550px; }
-                }
-
-                @media (max-width: 575px) {
-                    .contact-popup-overlay { padding: 10px; }
-                    .contact-popup-content { border-radius: 15px; }
-                    .form-panel { padding: 30px 20px; }
-                    .form-title { font-size: 20px; margin-bottom: 15px; }
-                    .form-input, .form-textarea, .form-select { font-size: 13px; padding: 8px 12px; }
-                    
-                    /* Scale ReCAPTCHA for small screens */
-                    .g-recaptcha {
-                        transform: scale(0.85);
-                        -webkit-transform: scale(0.85);
-                        transform-origin: 0 0;
-                        -webkit-transform-origin: 0 0;
-                    }
-                }
-
-                @media (max-width: 375px) {
-                    .form-panel { padding: 25px 15px; }
-                    .g-recaptcha {
-                        transform: scale(0.77);
-                        -webkit-transform: scale(0.77);
-                    }
-                }
-
-                @media (max-width: 320px) {
-                    .form-panel { padding: 15px 10px; }
-                    .form-title { font-size: 16px; margin-bottom: 8px; }
-                    .form-input, .form-textarea, .form-select { font-size: 12px; padding: 6px 10px; }
-                    .submit-btn { padding: 10px; font-size: 12px; margin-top: 10px; }
-                    .row.g-3 { --bs-gutter-y: 0.5rem; --bs-gutter-x: 0.5rem; }
-                    .mt-3 { margin-top: 0.5rem !important; }
-                    .g-recaptcha {
-                        transform: scale(0.68);
-                        -webkit-transform: scale(0.68);
-                    }
-                }
-            `}</style>
         </div>
     );
 

src/components/common/GoogleReviewsBranding.tsx

@@ -2,22 +2,10 @@ import React from 'react';
 
 const GoogleReviewsBranding = ({ centered = false }) => {
     return (
-        <div className="google-reviews-branding" style={{
+        <div className="google-reviews-branding-global" style={{
-            marginTop: '15px',
+            alignItems: centered ? 'center' : 'flex-start'
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: centered ? 'center' : 'flex-start',
-            gap: '0px'
-        }}>
-            <div style={{
-                fontSize: '28px',
-                fontWeight: '700',
-                lineHeight: '1.2',
-                letterSpacing: '3px',
-                fontFamily: '"Product Sans", "Google Sans", Roboto, Arial, sans-serif',
-                display: 'flex',
-                alignItems: 'center'
         }}>
+            <div className="google-logo">
                 <span style={{ color: '#4285F4' }}>G</span>
                 <span style={{ color: '#EA4335' }}>o</span>
                 <span style={{ color: '#FBBC04' }}>o</span>
@@ -25,23 +13,9 @@ const GoogleReviewsBranding = ({ centered = false }) => {
                 <span style={{ color: '#34A853' }}>l</span>
                 <span style={{ color: '#EA4335' }}>e</span>
             </div>
-            <div style={{
+            <div className="reviews-text-stars">
-                fontSize: '13px',
-                fontWeight: '700',
-                lineHeight: '1.2',
-                fontFamily: '"Product Sans", "Google Sans", Roboto, Arial, sans-serif',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '5px',
-                marginTop: '-2px'
-            }}>
                 <span style={{ color: '#fff' }}>Reviews</span>
-                <div style={{
+                <div className="stars-container">
-                    display: 'flex',
-                    gap: '1px',
-                    fontSize: '13px',
-                    lineHeight: '1'
-                }}>
                     <span style={{ color: '#FBBC04' }}>★</span>
                     <span style={{ color: '#FBBC04' }}>★</span>
                     <span style={{ color: '#FBBC04' }}>★</span>

src/components/contact/ContactSection.tsx

@@ -1,19 +1,106 @@
-import React from "react";
+"use client";
+
+import React, { useState, useEffect } from "react";
+import ReCAPTCHA from "react-google-recaptcha";
+import axios from "axios";
 
 const ContactSection = () => {
+    const [formData, setFormData] = useState({
+        name: "",
+        phone: "",
+        email: "",
+        service: "",
+        message: "",
+    });
+
+    const [formErrors, setFormErrors] = useState<any>({});
+    const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+    const [alert, setAlert] = useState({ show: false, type: "", message: "" });
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+        const { name, value } = e.target;
+        setFormData((prev) => ({ ...prev, [name]: value }));
+    };
+
+    const handleCaptchaChange = (token: string | null) => {
+        setCaptchaToken(token);
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        const errors: any = {};
+        if (!formData.name.trim()) errors.name = "Name is required.";
+        if (!formData.phone.trim()) errors.phone = "Phone is required.";
+        if (!formData.email.trim()) errors.email = "Email 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 = {
+            ...formData,
+            message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
+            to: "info@metatroncubesolutions.com",
+            senderName: "Metatroncube Contact 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: "",
+                phone: "",
+                email: "",
+                service: "",
+                message: "",
+            });
+            setCaptchaToken(null);
+            setFormErrors({});
+        } catch (error) {
+            console.error("❌ Error sending email:", 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 (
+        <>
             <section className="contact-area section-space">
                 <div className="container">
                     <div className="row">
                         <div className="col-lg-5 col-md-12">
                             <div className="contact-info-wrapper">
-                            <div className="sec-title-wrapper mb-40">
+                                <div className="sec-title-wrapper">
                                     <div className="sec-title">
                                         <div className="sec-title__shape"></div>
                                         <h6 className="sec-title__tagline">CONTACT WITH US</h6>
                                         <h3 className="sec-title__title">Feel Free to Get in Touch</h3>
                                     </div>
-                                {/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */}
+                                    <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
                                 </div>
                                 <div className="contact-info-list">
                                     <div className="contact-info-item d-flex align-items-center mb-30">
@@ -22,7 +109,7 @@ const ContactSection = () => {
                                         </div>
                                         <div className="content">
                                             <span>Call Anytime</span>
-                                        <h6><a href="tel:+8898006802">+ 88 ( 9800 ) 6802</a></h6>
+                                            <h6><a href="tel:+16476797651">+1-647-679-7651</a></h6>
                                         </div>
                                     </div>
                                     <div className="contact-info-item d-flex align-items-center mb-30">
@@ -31,7 +118,7 @@ const ContactSection = () => {
                                         </div>
                                         <div className="content">
                                             <span>Send Email</span>
-                                        <h6><a href="mailto:needhelp@company.com">needhelp@company.com</a></h6>
+                                            <h6><a href="mailto:info@metatroncubesolutions.com">info@metatroncubesolutions.com</a></h6>
                                         </div>
                                     </div>
                                     <div className="contact-info-item d-flex align-items-center">
@@ -40,7 +127,7 @@ const ContactSection = () => {
                                         </div>
                                         <div className="content">
                                             <span>Visit Now</span>
-                                        <h6>88 Broklyn Golden Street. New York, USA</h6>
+                                            <h6>Canada</h6>
                                         </div>
                                     </div>
                                 </div>
@@ -48,24 +135,94 @@ const ContactSection = () => {
                         </div>
                         <div className="col-lg-7 col-md-12">
                             <div className="contact-form-wrapper bg-color-light p-relative">
-                            <form action="#" className="contact-form">
+                                <form className="contact-form" onSubmit={handleSubmit}>
-                                <div className="row">
+                                    {alert.show && (
-                                    <div className="col-md-6 mb-20">
+                                        <div className={`alert alert-${alert.type === 'danger' ? 'danger' : 'success'} mb-4`} style={{ padding: '15px', borderRadius: '12px' }}>
-                                        <input type="text" placeholder="Your Name" required />
+                                            {alert.message}
                                         </div>
-                                    <div className="col-md-6 mb-20">
+                                    )}
-                                        <input type="email" placeholder="Email Address" required />
+                                    <div className="form-one__group">
+                                        <div className="mb-20">
+                                            <label className="form-label">Full Name</label>
+                                            <input
+                                                type="text"
+                                                name="name"
+                                                placeholder="Full Name"
+                                                value={formData.name}
+                                                onChange={handleChange}
+                                            />
+                                            {formErrors.name && <small className="text-danger">{formErrors.name}</small>}
                                         </div>
-                                    <div className="col-md-6 mb-20">
+                                        <div className="mb-20">
-                                        <input type="tel" placeholder="Phone Number" required />
+                                            <label className="form-label">Email Address</label>
+                                            <input
+                                                type="email"
+                                                name="email"
+                                                placeholder="Email Address"
+                                                value={formData.email}
+                                                onChange={handleChange}
+                                            />
+                                            {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
                                         </div>
-                                    <div className="col-md-6 mb-20">
+                                        <div className="mb-20">
-                                        <input type="text" placeholder="Subject" required />
+                                            <label className="form-label">Phone Number</label>
+                                            <input
+                                                type="tel"
+                                                name="phone"
+                                                placeholder="Phone Number"
+                                                value={formData.phone}
+                                                onChange={handleChange}
+                                            />
+                                            {formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
                                         </div>
-                                    <div className="col-md-12 mb-20">
+                                        <div className="mb-20">
-                                        <textarea placeholder="Write a Message" rows={7} required></textarea>
+                                            <label className="form-label">Select Service</label>
+                                            <select
+                                                name="service"
+                                                value={formData.service}
+                                                onChange={handleChange}
+                                                style={{
+                                                    width: '100%',
+                                                    padding: '18px 25px',
+                                                    border: '1px solid #e2e8f0',
+                                                    backgroundColor: '#fff',
+                                                    borderRadius: '12px',
+                                                    outline: 'none',
+                                                    fontSize: '15px',
+                                                    color: '#1e293b'
+                                                }}
+                                            >
+                                                <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 className="col-md-12">
+                                        <div className="form-one__control--full mb-20">
+                                            <label className="form-label">Write Message</label>
+                                            <textarea
+                                                name="message"
+                                                placeholder="Write a Message"
+                                                rows={5}
+                                                value={formData.message}
+                                                onChange={handleChange}
+                                            ></textarea>
+                                            {formErrors.message && <small className="text-danger">{formErrors.message}</small>}
+                                        </div>
+
+                                        <div className="form-one__control--full mb-4">
+                                            <ReCAPTCHA
+                                                sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
+                                                onChange={handleCaptchaChange}
+                                            />
+                                            {formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
+                                        </div>
+
+                                        <div className="form-one__control--full">
                                             <button type="submit" className="primary-btn-1 w-100">
                                                 SEND A MESSAGE
                                             </button>
@@ -76,147 +233,8 @@ const ContactSection = () => {
                         </div>
                     </div>
                 </div>
-            <style jsx>{`
-                .contact-area {
-                    padding: 80px 0;
-                    background: #fff;
-                }
-                @media (max-width: 767px) {
-                    .contact-area {
-                        padding: 60px 0;
-                    }
-                }
-                .section-subtitle {
-                    color: #3779b9;
-                    font-weight: 600;
-                    margin-bottom: 12px;
-                    display: flex;
-                    align-items: center;
-                    gap: 12px;
-                    font-size: 16px;
-                    text-transform: uppercase;
-                    letter-spacing: 1px;
-                }
-                .section-subtitle .dash {
-                    width: 25px;
-                    height: 2px;
-                    background: #3779b9;
-                    display: inline-block;
-                }
-                .section-title {
-                    font-size: 52px;
-                    font-weight: 800;
-                    color: #0f172a;
-                    line-height: 1.1;
-                    margin-bottom: 45px;
-                }
-                .contact-info-item .icon {
-                    width: 75px;
-                    height: 75px;
-                    background: #fff;
-                    border: 1px solid rgba(99, 102, 241, 0.2);
-                    border-radius: 50%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    margin-right: 25px;
-                    color: #3779b9;
-                    font-size: 28px;
-                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-                    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.1);
-                }
-                .contact-info-item:hover .icon {
-                    background: #3779b9;
-                    color: #fff;
-                    transform: scale(1.1) rotate(10deg);
-                    box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3);
-                }
-                .contact-info-item .content span {
-                    display: block;
-                    font-size: 13px;
-                    color: #64748b;
-                    margin-bottom: 6px;
-                    text-transform: uppercase;
-                    letter-spacing: 1px;
-                    font-weight: 600;
-                }
-                .contact-info-item .content h6 {
-                    font-size: 22px;
-                    font-weight: 700;
-                    margin: 0;
-                    color: #1e293b;
-                }
-                .contact-info-item .content h6 a {
-                    color: inherit;
-                    text-decoration: none;
-                    transition: color 0.3s ease;
-                }
-                .contact-info-item .content h6 a:hover {
-                    color: #3779b9;
-                }
-                .contact-form-wrapper {
-                    background: #1a1f2b;
-                    padding: 60px;
-                    border-radius: 24px;
-                    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.03);
-                }
-                .contact-form input,
-                .contact-form textarea {
-                    width: 100%;
-                    padding: 18px 25px;
-                    border: 1px solid #e2e8f0;
-                    background: #fff;
-                    border-radius: 12px;
-                    outline: none;
-                    transition: all 0.3s ease;
-                    font-size: 15px;
-                    color: #1e293b;
-                }
-                .contact-form textarea {
-                    min-height: 180px;
-                    resize: vertical;
-                }
-                .contact-form input:focus,
-                .contact-form textarea:focus {
-                    border-color: #3779b9;
-                    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
-                }
-                .primary-btn-1 {
-                    background: #3779b9;
-                    color: #fff;
-                    padding: 20px 30px;
-                    border: none;
-                    border-radius: 12px;
-                    font-weight: 700;
-                    cursor: pointer;
-                    transition: all 0.3s ease;
-                    text-transform: uppercase;
-                    letter-spacing: 1.5px;
-                    font-size: 15px;
-                    margin-top: 10px;
-                    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
-                }
-                .primary-btn-1:hover {
-                    background: #3779b9;
-                    transform: translateY(-3px);
-                    box-shadow: 0 15px 30px rgba(55, 121, 185, 0.5);
-                }
-                @media (max-width: 991px) {
-                    .contact-form-wrapper {
-                        margin-top: 60px;
-                        padding: 40px;
-                    }
-                    .section-title {
-                        font-size: 36px;
-                    }
-                }
-                @media (max-width: 575px) {
-                    .contact-form-wrapper {
-                        padding: 25px;
-                    }
-                }
-            `}</style>
             </section>
+        </>
     );
 };
 

src/components/contact/ContactStatus.tsx

@@ -41,170 +41,6 @@ const ContactStatus: React.FC<ContactStatusProps> = ({ type, message, onClose })
                 </button>
             </div>
 
-            <style jsx>{`
-                .status-container {
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    width: 100%;
-                    min-height: 400px;
-                    padding: 20px;
-                    animation: fadeIn 0.5s ease-out;
-                }
-
-                .status-card {
-                    background: #fff;
-                    width: 100%;
-                    max-width: 400px;
-                    padding: 60px 40px;
-                    border-radius: 24px;
-                    text-align: center;
-                    position: relative;
-                    overflow: hidden;
-                    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
-                    animation: slideUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-                }
-
-                .bubbles {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                    pointer-events: none;
-                }
-
-                .bubble {
-                    position: absolute;
-                    border-radius: 50%;
-                    opacity: 0.6;
-                }
-
-                /* Success Bubbles */
-                .success .bubble { background: #87b031; }
-                /* Error Bubbles */
-                .error .bubble { background: #f1595d; }
-
-                .bubble-1 { width: 12px; height: 12px; top: 15%; left: 10%; animation: float 3s infinite ease-in-out; }
-                .bubble-2 { width: 8px; height: 8px; top: 25%; right: 15%; animation: float 4s infinite ease-in-out; }
-                .bubble-3 { width: 15px; height: 15px; bottom: 20%; left: 15%; animation: float 5s infinite ease-in-out; }
-                .bubble-4 { width: 10px; height: 10px; bottom: 15%; right: 10%; animation: float 3.5s infinite ease-in-out; }
-                .bubble-5 { width: 6px; height: 6px; top: 40%; left: 5%; animation: float 6s infinite ease-in-out; }
-                .bubble-6 { width: 14px; height: 14px; top: 60%; right: 5%; animation: float 4.5s infinite ease-in-out; }
-                .bubble-7 { width: 9px; height: 9px; top: 10%; right: 30%; animation: float 3.2s infinite ease-in-out; }
-                .bubble-8 { width: 11px; height: 11px; bottom: 10%; left: 40%; animation: float 4.8s infinite ease-in-out; }
-                .bubble-9 { width: 7px; height: 7px; top: 50%; left: 20%; animation: float 5.5s infinite ease-in-out; }
-                .bubble-10 { width: 13px; height: 13px; bottom: 40%; right: 25%; animation: float 3.8s infinite ease-in-out; }
-                .bubble-11 { width: 8px; height: 8px; top: 70%; left: 35%; animation: float 4.2s infinite ease-in-out; }
-                .bubble-12 { width: 10px; height: 10px; top: 5%; left: 50%; animation: float 3.6s infinite ease-in-out; }
-
-                @keyframes float {
-                    0%, 100% { transform: translateY(0) scale(1); }
-                    50% { transform: translateY(-15px) scale(1.1); }
-                }
-
-                .icon-wrapper {
-                    margin-bottom: 30px;
-                    display: flex;
-                    justify-content: center;
-                    animation: bounce 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s both;
-                }
-
-                .icon-circle {
-                    width: 100px;
-                    height: 100px;
-                    border-radius: 50%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 40px;
-                    position: relative;
-                }
-
-                .success .icon-circle {
-                    background: rgba(135, 176, 49, 0.15);
-                    color: #87b031;
-                    border: 4px solid #87b031;
-                }
-
-                .error .icon-circle {
-                    background: rgba(241, 89, 93, 0.15);
-                    color: #f1595d;
-                    border: 4px solid #f1595d;
-                }
-
-                .status-title {
-                    font-size: 32px;
-                    font-weight: 800;
-                    margin-bottom: 12px;
-                    animation: fadeIn 0.5s ease-out 0.5s both;
-                }
-
-                .success .status-title { color: #87b031; }
-                .error .status-title { color: #f1595d; }
-
-                .status-message {
-                    font-size: 16px;
-                    color: #64748b;
-                    margin-bottom: 40px;
-                    line-height: 1.6;
-                    animation: fadeIn 0.5s ease-out 0.6s both;
-                }
-
-                .status-btn {
-                    padding: 16px 40px;
-                    border: none;
-                    border-radius: 14px;
-                    font-weight: 700;
-                    font-size: 16px;
-                    cursor: pointer;
-                    transition: all 0.3s ease;
-                    width: 100%;
-                    max-width: 200px;
-                    animation: fadeIn 0.5s ease-out 0.7s both;
-                }
-
-                .success .status-btn {
-                    background: #87b031;
-                    color: #fff;
-                    box-shadow: 0 10px 20px rgba(135, 176, 49, 0.3);
-                }
-
-                .success .status-btn:hover {
-                    background: #769a2b;
-                    transform: translateY(-3px);
-                    box-shadow: 0 15px 30px rgba(135, 176, 49, 0.4);
-                }
-
-                .error .status-btn {
-                    background: #f1595d;
-                    color: #fff;
-                    box-shadow: 0 10px 20px rgba(241, 89, 93, 0.3);
-                }
-
-                .error .status-btn:hover {
-                    background: #e04a4e;
-                    transform: translateY(-3px);
-                    box-shadow: 0 15px 30px rgba(241, 89, 93, 0.4);
-                }
-
-                @keyframes fadeIn {
-                    from { opacity: 0; }
-                    to { opacity: 1; }
-                }
-
-                @keyframes slideUp {
-                    from { opacity: 0; transform: translateY(40px) scale(0.9); }
-                    to { opacity: 1; transform: translateY(0) scale(1); }
-                }
-
-                @keyframes bounce {
-                    0% { transform: scale(0); }
-                    60% { transform: scale(1.1); }
-                    80% { transform: scale(0.95); }
-                    100% { transform: scale(1); }
-                }
-            `}</style>
         </div>
     );
 };

src/components/contact/MapSection.tsx

@@ -17,25 +17,6 @@ const MapSection = () => {
                     ></iframe>
                 </div>
             </div>
-            <style jsx>{`
-                .map-area {
-                    margin-bottom: -10px; /* Adjust as needed to align with footer */
-                }
-                .map-wrapper {
-                    height: 500px;
-                    width: 100%;
-                    overflow: hidden;
-                    border: none;
-                }
-                iframe {
-                    display: block;
-                    width: 100%;
-                    height: 100%;
-                    border: none;
-                    background: transparent;
-                    filter: grayscale(1); /* Optional: Adjust to match the design */
-                }
-            `}</style>
         </section>
     );
 };

src/components/faq/FaqPageSection.tsx

@@ -229,143 +229,6 @@ const FaqPageSection = () => {
                 </div>
             </div>
 
-            <style jsx>{`
-                .faq-page-section {
-                    background: #f8fbff;
-                    padding: 80px 0;
-                }
-                .section-subtitle {
-                    color: #3779b9;
-                    font-weight: 700;
-                    margin-bottom: 15px;
-                    display: inline-flex;
-                    align-items: center;
-                    gap: 10px;
-                    text-transform: uppercase;
-                    letter-spacing: 1px;
-                    font-size: 14px;
-                }
-                .subtitle-icon {
-                    width: 20px;
-                    height: 20px;
-                    object-fit: contain;
-                }
-                .section-title {
-                    font-size: 48px;
-                    font-weight: 800;
-                    color: #1a1f2b;
-                    margin-bottom: 20px;
-                }
-                .section-desc {
-                    color: #64748b;
-                    font-size: 16px;
-                }
-                @media (max-width: 991px) {
-                    .section-desc {
-                        margin-top: 20px !important;
-                        padding-left: 0 !important;
-                        border-left: none !important;
-                    }
-                }
-                .faq-item {
-                    background: #fff;
-                    border-radius: 12px;
-                    border: 1px solid #e2e8f0;
-                    margin-bottom: 15px;
-                    overflow: hidden;
-                    transition: all 0.3s ease;
-                    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
-                }
-                .faq-item.active {
-                    border-color: #3779b9;
-                    box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
-                }
-                .faq-question {
-                    width: 100%;
-                    padding: 18px 25px;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    background: none;
-                    border: none;
-                    text-align: left;
-                    cursor: pointer;
-                    outline: none;
-                }
-                .question-text {
-                    font-size: 15px;
-                    font-weight: 700;
-                    color: #1a1f2b;
-                    line-height: 1.4;
-                }
-                .faq-item.active .question-text {
-                    color: #3779b9;
-                }
-                .faq-icon {
-                    width: 28px;
-                    height: 28px;
-                    min-width: 28px;
-                    background: #f1f5f9;
-                    border-radius: 50%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 11px;
-                    color: #64748b;
-                    transition: all 0.3s ease;
-                }
-                .faq-item.active .faq-icon {
-                    background: #3779b9;
-                    color: #fff;
-                    transform: rotate(180deg);
-                }
-                .faq-answer {
-                    max-height: 0;
-                    overflow: hidden;
-                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-                }
-                .faq-answer.show {
-                    max-height: 300px;
-                }
-                .answer-inner {
-                    padding: 0 25px 20px;
-                    color: #64748b;
-                    line-height: 1.6;
-                    font-size: 14px;
-                }
-                .faq-center-image-wrap {
-                    padding: 0 15px;
-                }
-                .main-faq-img {
-                    width: 100%;
-                    max-width: 400px;
-                    border-radius: 20px;
-                    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
-                }
-                @media (max-width: 991px) {
-                    .col-lg-4 {
-                        margin-bottom: 30px;
-                    }
-                    .faq-center-image-wrap {
-                        order: -1;
-                        margin-bottom: 40px;
-                    }
-                    .section-title {
-                        font-size: 36px;
-                    }
-                }
-                .cta-box h3 {
-                    font-size: 32px;
-                    font-weight: 800;
-                    color: #1a1f2b;
-                    margin-bottom: 15px;
-                }
-                .cta-box p {
-                    color: #64748b;
-                    font-size: 18px;
-                    margin-bottom: 30px;
-                }
-            `}</style>
         </section>
     );
 };

src/components/home/CounsellingSolutions.tsx

@@ -6,6 +6,27 @@ const CounsellingSolutions: React.FC = () => {
         <section className="counselling-solutions">
             <div className="container">
                 <div className="row">
+
+                    <div className="col-lg-6">
+                        <div className="counselling-solutions__image">
+                            <img
+                                src="https://bracketweb.com/pelocishtml/assets/images/resources/counselling-solutions-1-1.png"
+                                alt="pelocis"
+                                className="counselling-solutions__image__one"
+                            />
+                            <img
+                                src="https://bracketweb.com/pelocishtml/assets/images/resources/counselling-solutions-1-2.png"
+                                alt="pelocis"
+                                className="counselling-solutions__image__two"
+                            />
+                            <div className="counselling-solutions__image__watch-btn">
+                                <Link href="https://www.youtube.com/watch?v=h9MbznbxlLc" className="video-popup">
+                                    <i className="icon-play"></i>
+                                </Link>
+                                <span>WATCH VIDEO</span>
+                            </div>
+                        </div>
+                    </div>
                                         <div className="col-lg-6">
                         <div className="counselling-solutions__title">
                             <div className="sec-title">
@@ -34,32 +55,13 @@ const CounsellingSolutions: React.FC = () => {
                                     The right therapist can help you develop the skills to manage
                                 </li>
                             </ul>
-                            <Link href="#" className="pelocis-btn">
+                            <div className="about-btn-box mt-4">
-                                <span>
+                                <Link className="primary-btn-1 btn-hover" href="/about">
-                                    Discover More <i className="icon-right-arrow-white"></i>
+                                    Discover More &nbsp; | <i className="fa-solid fa-arrow-right"></i>
-                                </span>
+                                    <span className="btn-hover-span"></span>
                                 </Link>
                             </div>
                         </div>
-                    <div className="col-lg-6">
-                        <div className="counselling-solutions__image">
-                            <img
-                                src="https://bracketweb.com/pelocishtml/assets/images/resources/counselling-solutions-1-1.png"
-                                alt="pelocis"
-                                className="counselling-solutions__image__one"
-                            />
-                            <img
-                                src="https://bracketweb.com/pelocishtml/assets/images/resources/counselling-solutions-1-2.png"
-                                alt="pelocis"
-                                className="counselling-solutions__image__two"
-                            />
-                            <div className="counselling-solutions__image__watch-btn">
-                                <Link href="https://www.youtube.com/watch?v=h9MbznbxlLc" className="video-popup">
-                                    <i className="icon-play"></i>
-                                </Link>
-                                <span>WATCH VIDEO</span>
-                            </div>
-                        </div>
                     </div>
                 </div>
             </div>

src/components/home/HomeContactOne.tsx

@@ -1,14 +1,92 @@
 "use client";
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import ReCAPTCHA from "react-google-recaptcha";
+import axios from "axios";
 
 const HomeContactOne = () => {
-    const [distance, setDistance] = useState(7000);
+    const [formData, setFormData] = useState({
+        name: "",
+        phone: "",
+        email: "",
+        service: "",
+        message: "",
+    });
 
-    const handleRangeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const [formErrors, setFormErrors] = useState<any>({});
-        setDistance(parseInt(e.target.value));
+    const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+    const [alert, setAlert] = useState({ show: false, type: "", message: "" });
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+        const { name, value } = e.target;
+        setFormData((prev) => ({ ...prev, [name]: value }));
     };
 
+    const handleCaptchaChange = (token: string | null) => {
+        setCaptchaToken(token);
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        const errors: any = {};
+        if (!formData.name.trim()) errors.name = "Name is required.";
+        if (!formData.phone.trim()) errors.phone = "Phone is required.";
+        if (!formData.email.trim()) errors.email = "Email 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 = {
+            ...formData,
+            message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
+            to: "info@metatroncubesolutions.com",
+            senderName: "Metatroncube Home Contact",
+            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: "",
+                phone: "",
+                email: "",
+                service: "",
+                message: "",
+            });
+            setCaptchaToken(null);
+            setFormErrors({});
+        } catch (error) {
+            console.error("❌ Error sending email:", 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 (
         <section className="home-contact-one">
             <div
@@ -17,8 +95,8 @@ const HomeContactOne = () => {
             ></div>
             <div className="container">
                 <div className="row">
-                    <div className="col-xl-6">
+                    <div className="col-xl-6 d-flex align-items-center justify-content-center">
-                        <div className="home-contact__card ">
+                        <div className="home-contact__card" style={{ margin: '0 auto' }}>
                             <div className="home-contact__card__content">
                                 <ul className="home-contact__card__list">
                                     <li>
@@ -26,7 +104,7 @@ const HomeContactOne = () => {
                                         <div className="pl-5">
                                             <h3 className="home-contact__card__list__title">Get Contact Now</h3>
                                             <p className="home-contact__card__list__text">
-                                                <a href="tel:+11234751328">+11234 751 328</a>
+                                                <a href="tel:+16476797651">+1-647-679-7651</a>
                                             </p>
                                         </div>
                                         <div className="home-contact__card__list__shape"></div>
@@ -36,7 +114,7 @@ const HomeContactOne = () => {
                                         <div className="pl-5">
                                             <h3 className="home-contact__card__list__title">Sent Email</h3>
                                             <p className="home-contact__card__list__text">
-                                                <a href="mailto:pelocis@envato.com">pelocis@envato.com</a>
+                                                <a href="mailto:info@metatroncubesolutions.com">info@metatroncubesolutions.com</a>
                                             </p>
                                         </div>
                                         <div className="home-contact__card__list__shape"></div>
@@ -45,7 +123,7 @@ const HomeContactOne = () => {
                                         <span className="fa-solid fa-location-dot"></span>
                                         <div className="pl-5">
                                             <h3 className="home-contact__card__list__title">Location</h3>
-                                            <p className="home-contact__card__list__text">8/05 Mozilla Golden</p>
+                                            <p className="home-contact__card__list__text">Canada</p>
                                         </div>
                                         <div className="home-contact__card__list__shape"></div>
                                     </li>
@@ -66,9 +144,10 @@ const HomeContactOne = () => {
                         </div>
                     </div>
                     <div className="col-xl-6">
+                        <div className="home-contact-form-container-global">
                             <form
                                 className="appointment__form contact-form-validated form-one"
-                            action="#"
+                                onSubmit={handleSubmit}
                                 noValidate
                             >
                                 <div className="appointment__form__top">
@@ -84,54 +163,98 @@ const HomeContactOne = () => {
                                             className="appointment__form__title__shape"
                                         />
                                     </div>
-                                <p className="appointment__form__text">
-                                    Business tailored design, management &amp; support services Business
-                                    business agency elit, sed do eiusmod tempor majority have
-                                    in some we form, by injected humour solution.
-                                </p>
                                 </div>
-                            <div className="form-one__group row">
+
-                                <div className="form-one__control col-md-6">
+                                {alert.show && (
-                                    <label htmlFor="name" className="appointment__form__lable">Name</label>
+                                    <div className={`alert alert-${alert.type === 'danger' ? 'danger' : 'success'} mb-4`} style={{ padding: '15px', borderRadius: '12px' }}>
-                                    <input id="name" type="text" name="name" placeholder="Select Name *" />
+                                        {alert.message}
                                     </div>
-                                <div className="form-one__control col-md-6">
+                                )}
-                                    <label htmlFor="email" className="appointment__form__lable">Email</label>
+
-                                    <input id="email" type="email" name="email" placeholder="Select Email *" />
+                                <div className="form-one__group">
+                                    <div className="mb-20">
+                                        <label htmlFor="name" className="form-label-custom-global">Full Name</label>
+                                        <input
+                                            id="name"
+                                            type="text"
+                                            name="name"
+                                            placeholder="Full Name"
+                                            value={formData.name}
+                                            onChange={handleChange}
+                                            className="form-input-custom-global"
+                                        />
+                                        {formErrors.name && <small className="text-danger">{formErrors.name}</small>}
                                     </div>
-                                <div className="form-one__control col-md-6">
+                                    <div className="mb-20">
-                                    <label htmlFor="phone" className="appointment__form__lable">Phone</label>
+                                        <label htmlFor="email" className="form-label-custom-global">Email Address</label>
-                                    <input id="phone" type="text" name="phone" placeholder="Select a Phone" />
+                                        <input
+                                            id="email"
+                                            type="email"
+                                            name="email"
+                                            placeholder="Email Address"
+                                            value={formData.email}
+                                            onChange={handleChange}
+                                            className="form-input-custom-global"
+                                        />
+                                        {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
                                     </div>
-                                <div className="form-one__control form-one__control--full col-md-6">
+                                    <div className="mb-20">
-                                    <label htmlFor="program-select" className="appointment__form__lable">Program</label>
+                                        <label htmlFor="phone" className="form-label-custom-global">Phone Number</label>
-                                    <div className="form-one__control__select">
+                                        <input
+                                            id="phone"
+                                            type="text"
+                                            name="phone"
+                                            placeholder="Phone Number"
+                                            value={formData.phone}
+                                            onChange={handleChange}
+                                            className="form-input-custom-global"
+                                        />
+                                        {formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
+                                    </div>
+                                    <div className="mb-20">
+                                        <label htmlFor="service" className="form-label-custom-global">Select Service</label>
                                         <select
-                                            className="form-select selectpicker"
+                                            name="service"
-                                            id="program-select"
+                                            id="service"
-                                            defaultValue="Select program"
+                                            value={formData.service}
-                                            style={{
+                                            onChange={handleChange}
-                                                width: '100%',
+                                            className="form-select-custom-styled-global"
-                                                padding: '12px 20px',
-                                                borderRadius: '5px',
-                                                border: '1px solid #ddd',
-                                                fontSize: '14px'
-                                            }}
                                         >
-                                            <option value="Select program">Select a Program</option>
+                                            <option value="">Select Service</option>
-                                            <option value="Web Development">Web Development</option>
+                                            <option value="Website Development">Website Development</option>
-                                            <option value="Mobile App Development">Mobile App Development</option>
+                                            <option value="Mobile Application Development">Mobile Application Development</option>
-                                            <option value="UI/UX Design">UI/UX Design</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 className="form-one__control--full mb-20">
+                                        <label htmlFor="message" className="form-label-custom-global">Write Message</label>
+                                        <textarea
+                                            id="message"
+                                            name="message"
+                                            placeholder="Write Message"
+                                            value={formData.message}
+                                            onChange={handleChange}
+                                            rows={4}
+                                            className="form-textarea-custom-global"
+                                        ></textarea>
+                                        {formErrors.message && <small className="text-danger">{formErrors.message}</small>}
                                     </div>
-                                <div className="form-one__control mt-30">
+
-                                    <button type="submit" className="pelocis-btn">
+                                    <div className="form-one__control--full mb-4">
-                                        <span>
+                                        <ReCAPTCHA
-                                            SEND Request
+                                            sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
-                                            <i className="fa-solid fa-arrow-right-long" style={{ marginLeft: '8px' }}></i>
+                                            onChange={handleCaptchaChange}
-                                        </span>
+                                        />
+                                        {formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
+                                    </div>
+
+                                    <div className="form-one__control--full">
+                                        <button type="submit" className="submit-btn-custom-global">
+                                            SEND A MESSAGE
                                         </button>
                                     </div>
                                 </div>
@@ -139,6 +262,7 @@ const HomeContactOne = () => {
                         </div>
                     </div>
                 </div>
+            </div>
         </section >
     );
 };

src/components/home/MedicalServices.tsx

@@ -5,45 +5,45 @@ import React, { useState, useEffect } from "react";
 const services = [
     {
         id: 0,
-        title: "Excellent infection prevention",
+        title: "Website Development",
-        text: "Lorem ipsum dolor sit amet, conse ctetur adipiscing eliteiusmod tempor incididunt",
+        text: "Custom website development tailored to your business needs.",
         icon: "/assets/imgs/icon/icon-6.png",
-        link: "service-details.html",
+        link: "/services-digital-solutions/web-development",
     },
     {
         id: 1,
-        title: "Health patients comprehensive",
+        title: "Mobile Application Development",
-        text: "From its medieval origins to the digital era , learn everything there is to know",
+        text: "High-performance mobile apps for iOS and Android.",
         icon: "/assets/imgs/icon/icon-2.png",
-        link: "service-details.html",
+        link: "/services-digital-solutions/mobile-app-development",
     },
     {
         id: 2,
-        title: "Pediatric Hematology Oncology",
+        title: "Graphic Designing",
-        text: "Creation timelines for the standard lorem ipsum passage vary, with some citing the",
+        text: "Creative graphic design solutions for your brand.",
         icon: "/assets/imgs/icon/icon-3.png",
-        link: "service-details.html",
+        link: "/services-digital-solutions/graphic-designing",
     },
     {
         id: 3,
-        title: "Care Pediatric & Medicine",
+        title: "UI / UX Designing",
-        text: "Letraset's dry-transfer sheets, and later entered the digital world via Aldus",
+        text: "User-centric design experiences that engage and convert.",
         icon: "/assets/imgs/icon/icon-4.png",
-        link: "service-details.html",
+        link: "/services-digital-solutions/ui-ux-designing",
     },
     {
         id: 4,
-        title: "Labor & Delivery: The Birthplace",
+        title: "SEO & Content Writing",
-        text: "Some claim lorem ipsum threatens to promote design over content, while others defend",
+        text: "Optimization and content that drives organic growth.",
         icon: "/assets/imgs/icon/icon-5.png",
-        link: "service-details.html",
+        link: "/services-digital-solutions/seo-content-writing",
     },
     {
         id: 5,
-        title: "Urogynecology & Pelvic Health",
+        title: "Digital Marketing",
-        text: "Generally, lorem ipsum is best suited to keeping templates from looking bare or",
+        text: "Strategic digital marketing to grow your online presence.",
         icon: "/assets/imgs/icon/icon-6.png",
-        link: "service-details.html",
+        link: "/services-digital-solutions/digital-marketing",
     },
 ];
 
@@ -91,7 +91,7 @@ const MedicalServices = () => {
 
             <div className="container p-relative" style={{ zIndex: 5 }}>
                 <div
-                    className="sec-title-wrapper text-center wow fadeInUp animated mb-50"
+                    className="sec-title-wrapper text-center wow fadeInUp animated"
                     data-wow-delay="0.3s"
                 >
                     <div className="sec-title">

src/components/home/PortfolioSection.tsx

@@ -210,6 +210,13 @@ export default function PortfolioSection() {
     return (
         <section className="pf-section">
             <div className="pf-container">
+                <div className="sec-title-wrapper text-center wow fadeInUp animated" data-wow-delay="0.3s">
+                    <div className="sec-title">
+                        <div className="sec-title__shape"></div>
+                        <h6 className="sec-title__tagline">PORTFOLIO</h6>
+                        <h3 className="sec-title__title">Our Latest <span className="inner-text">Work </span></h3>
+                    </div>
+                </div>
 
                 {/* ── Filter Tabs ── */}
                 <div className="pf-tabs">

src/components/home/WhyChooseTwo.tsx

@@ -65,7 +65,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
                         </div>
                     </div>
                     <div className="col-xl-6">
-                        <div className="pelocis-stretch-element-inside-column" style={reverse ? { marginLeft: '-227.812px', marginRight: '0px' } : { marginLeft: '0px', marginRight: '-367.812px' }}>
+                        <div className="pelocis-stretch-element-inside-column" style={reverse ? { marginLeft: '-227.812px', marginRight: '0px' } : { marginLeft: '0px', marginRight: '-267.812px' }}>
                             <div className="why-choose-two__shape-one">
                                 <img src="https://bracketweb.com/pelocishtml/assets/images/resources/why-choose-two-img-1.png" alt="pelocis" />
                             </div>

src/components/home/home-1/BlogSection.tsx

@@ -48,59 +48,6 @@ const BlogSection = ({ hideHeader = false }: { hideHeader?: boolean }) => (
             </div>
         </div>
 
-        <style jsx>{`
-            .relative { position: relative; }
-            .blog-image { position: relative; display: block; overflow: hidden; border-radius: 20px 20px 0 0; }
-            .blog-image img { width: 100%; border-radius: 20px 20px 0 0; }
-            .blog-category-tag {
-                position: absolute;
-                bottom: 0px;
-                right: 0px;
-                background: #3779b9;
-                color: #fff;
-                padding: 10px 20px;
-                font-size: 13px;
-                font-weight: 700;
-                text-transform: uppercase;
-                z-index: 2;
-                border-radius: 12px 0 0 0;
-                letter-spacing: 0.5px;
-            }
-            .blog-style-one {
-                border-left: 1px solid #e2e8f0;
-                border-right: 1px solid #e2e8f0;
-                border-bottom: 1px solid #e2e8f0;
-                border-radius: 20px 20px 15px 15px;
-                background: #fff;
-                transition: all 0.3s ease;
-            }
-            .blog-style-one:hover {
-                border-color: #3779b9;
-                box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
-            }
-            .blog-content {
-                padding: 30px 25px;
-            }
-            .blog-title {
-                display: -webkit-box;
-                -webkit-line-clamp: 2;
-                -webkit-box-orient: vertical;
-                overflow: hidden;
-                line-height: 1.5;
-                height: 3em;
-            }
-            .post-meta span {
-                display: inline-flex;
-                align-items: center;
-                gap: 8px;
-                margin-right: 15px;
-                font-size: 14px;
-                color: #64748b;
-            }
-            .post-meta i {
-                color: #3779b9;
-            }
-        `}</style>
     </section>
 );
 

src/components/home/home-1/BrandSection.tsx

@@ -9,7 +9,6 @@ const BrandSection = () => {
                     tagline="OUR PARTNERS"
                     title="Trusted by <span class='inner-text'>Leaders</span> Worldwide"
                     centered={true}
-                    className="mb-50"
                 />
                 <div className="small-container">
                     <div className="swiper brand-active">

src/components/home/home-1/ProjectsSection.tsx

@@ -7,7 +7,7 @@ const ProjectsSection = () => {
             <div className="small-container">
                 <div className="row">
                     <div className="col-xxl-6">
-                        <div className="title-box mb-50 wow fadeInLeft" data-wow-delay=".5s">
+                        <div className="title-box wow fadeInLeft" data-wow-delay=".5s">
                             <span className="section-sub-title">PROJECTS</span>
                             <h3 className="section-title mt-10">Our Latest Projects</h3>
                         </div>

src/components/home/home-1/ServiceSliderSection.tsx

@@ -16,7 +16,7 @@ const ServiceSliderSection = () => {
             <div className="small-container">
                 <div className="row">
                     <div className="col-xxl-6">
-                        <div className="title-box mb-50 wow fadeInLeft" data-wow-delay=".5s">
+                        <div className="title-box wow fadeInLeft" data-wow-delay=".5s">
                             <span className="section-sub-title">SERVICES WE’RE OFFERING</span>
                             <h3 className="section-title mt-10">Exclusive IT Services</h3>
                         </div>

src/components/home/home-1/ServiceThreeSlider.tsx

@@ -27,7 +27,7 @@ const ServiceThreeSlider = () => {
                         </div>
                     </div>
                     <div className="col-xxl-6 col-xl-6">
-                        <div className="service_1_navigation__wrapprer position-relative z-1 text-end mt-30 mb-50">
+                        <div className="service_1_navigation__wrapprer position-relative z-1 text-end mt-30">
                             <div className="common-slider-navigation">
                                 <button className="service-1-button-prev slider-nav-btn"><i className="fa-solid fa-chevron-left"></i></button>
                                 <button className="service-1-button-next slider-nav-btn"><i className="fa-solid fa-chevron-right"></i></button>
@@ -46,7 +46,7 @@ const ServiceThreeSlider = () => {
                                             <span className={service.icon}></span>
                                         </div>
                                         <h3 className="service-three__item__title">
-                                            <Link href={`/services/${service.slug}`}>{service.title}</Link>
+                                            <Link href={`/services-digital-solutions/${service.slug}`}>{service.title}</Link>
                                         </h3>
                                         <p className="service-three__item__text text-white">{service.description}</p>
                                     </div>

src/components/home/home-1/TeamSection.tsx

@@ -5,7 +5,7 @@ const TeamSection = () => (
         <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-13.png)" }}></div>
         <div className="shape-2 float-bob-y" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-14.png)" }}></div>
         <div className="small-container">
-            <div className="title-box text-center mb-50 wow fadeInLeft" data-wow-delay=".5s">
+            <div className="title-box text-center wow fadeInLeft" data-wow-delay=".5s">
                 <span className="section-sub-title">OUR team</span>
                 <h3 className="section-title mt-10">Our Leadership Team</h3>
             </div>

src/components/home/home-1/TestimonialsSection.tsx

@@ -1,7 +1,72 @@
-import React from "react";
+"use client";
-import { testimonialSlides } from "@/utils/data";
+import React, { useState, useEffect } from "react";
+import Slider from "react-slick";
+import GoogleReviewsBranding from "@/components/common/GoogleReviewsBranding";
 
-const TestimonialsSection = () => (
+const TestimonialsSection = () => {
+    const [reviews, setReviews] = useState<any[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        async function loadReviews() {
+            try {
+                const res = await fetch("/api/reviews");
+                const data = await res.json();
+                const cleaned = (data.reviews || []).filter((r: any) =>
+                    (r.snippet || r.text || r.review_text || r.description || r.body || r.content)
+                );
+                setReviews(cleaned);
+            } catch (error) {
+                console.error("Failed to fetch reviews", error);
+            } finally {
+                setLoading(false);
+            }
+        }
+        loadReviews();
+    }, []);
+
+    const displayedReviews = reviews.length > 0 && reviews.length < 4
+        ? [...reviews, ...reviews, ...reviews]
+        : reviews;
+
+    const settings = {
+        dots: true,
+        arrows: false,
+        infinite: displayedReviews.length > 2,
+        speed: 600,
+        slidesToShow: 2,
+        slidesToScroll: 1,
+        autoplay: true,
+        autoplaySpeed: 5000,
+        dotsClass: "testimonial-dot-inner",
+        responsive: [
+            {
+                breakpoint: 1200,
+                settings: {
+                    slidesToShow: 2,
+                }
+            },
+            {
+                breakpoint: 991,
+                settings: {
+                    slidesToShow: 1,
+                }
+            }
+        ]
+    };
+
+    function getReviewText(r: any) {
+        return r.text || r.description || r.snippet || r.review_text || r.body || r.content || "";
+    }
+
+    function getProfileImage(r: any, index: number) {
+        const url = r.user?.thumbnail || r.profile_photo_url || r.author_profile_photo_url || r.user?.profile_photo_url || r.thumbnail || r.profile_picture || r.avatar || r.author_image;
+        if (!url) return `/assets/imgs/resources/testimonials-${(index % 2) + 1}.png`;
+        if (typeof url === 'string' && url.startsWith("http")) return url;
+        return `https://lh3.googleusercontent.com/${url}`;
+    }
+
+    return (
         <section className="testimonials-two-section fix section-space-bottom">
             <div className="container-fluid g-0">
                 <div className="row g-0">
@@ -16,36 +81,69 @@ const TestimonialsSection = () => (
                         </div>
                     </div>
                     <div className="col-xxl-8 col-xl-8 col-lg-12">
-                    <div className="testimonials-two-area section-space-medium bg-color-1 p-relative">
+                        <div className="testimonials-two-area section-space-medium p-relative parallax-bg" style={{
-                        <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-36.png)" }}></div>
+                            backgroundImage: 'url(/assets/img/home/bg/bg-4.webp)',
-                        <div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s">
+                            backgroundSize: 'cover',
+                            backgroundPosition: 'center'
+                        }}>
+                            <div className="section-overlay" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'rgba(26, 31, 43, 0.82)', zIndex: 0 }}></div>
+                            <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-36.png)", zIndex: 1 }}></div>
+
+                            <div className="sec-title-wrapper" style={{ position: 'relative', zIndex: 2 }}>
                                 <div className="sec-title">
                                     <div className="sec-title__shape"></div>
                                     <h6 className="sec-title__tagline">TESTIMONIALS</h6>
                                     <h3 className="sec-title__title text-white">Our Client Feedback</h3>
+                                    <div className="space20"></div>
+                                    <div className="d-flex justify-content-start">
+                                        <GoogleReviewsBranding />
+                                    </div>
                                 </div>
                                 <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
                             </div>
-                        <div className="swiper testimonial-active-2">
+
-                            <div className="swiper-wrapper">
+                            <div className="testi-slider-wrapper" style={{ position: 'relative', zIndex: 2, marginTop: '70px' }}>
-                                {[1, 2, 1].map((num, i) => (
+                                {loading ? (
-                                    <div key={i} className="swiper-slide">
+                                    <div className="text-center py-5">
-                                        <div className="testimonials-two-box">
+                                        <p className="text-white">Loading reviews from Google...</p>
-                                            <div className="author-image"><img src={`/assets/imgs/resources/testimonials-${num}.png`} alt="" /></div>
-                                            <div className="icon-1"><i className="fa-solid fa-quote-right"></i></div>
-                                            <h4>Kathryn Murphy</h4>
-                                            <span>Engineering</span>
-                                            <ul className="ratings">
-                                                {[1, 2, 3, 4, 5].map((r) => <li key={r}><i className="fa-solid fa-star"></i></li>)}
-                                            </ul>
-                                            <p>“ Consectetur adipiscing elit. Integer is nunc viverra laoreet est the is porta pretium metus aliquam eget maecenas porta is nunc viverra Aenean ”</p>
                                     </div>
+                                ) : displayedReviews.length > 0 ? (
+                                    <Slider {...settings}>
+                                        {displayedReviews.map((slide, index) => {
+                                            const profileImg = getProfileImage(slide, index);
+                                            const name = slide.user?.name || slide.author_name || "Valued Client";
+                                            const rating = slide.rating || 5;
+                                            return (
+                                                <div key={index} style={{ outline: 'none', padding: '10px 15px 40px 10px' }}>
+                                                    <div className="testimonials-two-box-solid">
+                                                        <div className="author-image-solid">
+                                                            <img src={profileImg} alt={name} />
                                                         </div>
+                                                        <div className="icon-quote-testi">
+                                                            <i className="fa-solid fa-quote-right"></i>
+                                                        </div>
+                                                        <div className="content-solid">
+                                                            <h4>{name}</h4>
+                                                            <span className="tag">Verified Google Review</span>
+                                                            <ul className="ratings-solid">
+                                                                {[...Array(rating)].map((_, i) => (
+                                                                    <li key={i}><i className="fa-solid fa-star"></i></li>
                                                                 ))}
+                                                            </ul>
+                                                            <p>
+                                                                &quot;{getReviewText(slide)}&quot;
+                                                            </p>
                                                         </div>
                                                     </div>
-                        <div className="testimonial-dot-inner text-center mt-60">
+                                                </div>
-                            <div className="testimonial-swiper-dot"></div>
+                                            );
+                                        })}
+                                    </Slider>
+                                ) : (
+                                    <div className="text-center py-5">
+                                        <p className="text-white">No reviews found.</p>
+                                    </div>
+                                )}
                             </div>
                         </div>
                     </div>
@@ -53,5 +151,6 @@ const TestimonialsSection = () => (
             </div>
         </section>
     );
+};
 
 export default TestimonialsSection;

src/components/home/home-2/Blog2Section.tsx

@@ -64,48 +64,6 @@ const Blog2Section = () => (
             </div>
         </div>
 
-        <style jsx>{`
-            .relative { position: relative; }
-            .blog-image { position: relative; display: block; overflow: hidden; border-radius: 20px 20px 0 0; }
-            .blog-image img { width: 100%; border-radius: 20px 20px 0 0; }
-            .blog-category-tag {
-                position: absolute;
-                bottom: 0px;
-                right: 0px;
-                background: #3779b9;
-                color: #fff;
-                padding: 10px 20px;
-                font-size: 11px;
-                font-weight: 700;
-                text-transform: uppercase;
-                z-index: 2;
-                border-radius: 12px 0 0 0;
-            }
-            .blog-style-two {
-                border-left: 1px solid #e2e8f0;
-                border-right: 1px solid #e2e8f0;
-                border-bottom: 1px solid #e2e8f0;
-                border-radius: 20px 20px 15px 15px;
-                background: #fff;
-                transition: all 0.3s ease;
-                height: 100%;
-            }
-            .blog-style-two:hover {
-                border-color: #3779b9;
-                box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
-            }
-            .blog-content-area {
-                padding: 30px 25px;
-            }
-            .blog-title {
-                display: -webkit-box;
-                -webkit-line-clamp: 2;
-                -webkit-box-orient: vertical;
-                overflow: hidden;
-                line-height: 1.5;
-                height: 3em;
-            }
-        `}</style>
     </section>
 );
 

src/components/home/home-3/BlogSection.tsx

@@ -2,7 +2,7 @@ import { blogs } from "@/utils/data";
 import Link from "next/link";
 
 const BlogSection = () => (
-    <section className="blog-section-one section-space">
+    <section className="blog-section-three section-space">
         <div className="small-container">
             <div className="blog-title-box mb-40">
                 <div className="title-box wow fadeInLeft" data-wow-delay=".5s">
@@ -47,48 +47,6 @@ const BlogSection = () => (
                 ))}
             </div>
         </div>
-
-        <style jsx>{`
-            .relative { position: relative; }
-            .blog-image { position: relative; display: block; overflow: hidden; border-radius: 20px 20px 0 0; }
-            .blog-image img { width: 100%; border-radius: 20px 20px 0 0; }
-            .blog-category-tag {
-                position: absolute;
-                bottom: 0px;
-                right: 0px;
-                background: #3779b9;
-                color: #fff;
-                padding: 10px 25px;
-                font-size: 14px;
-                font-weight: 700;
-                text-transform: uppercase;
-                z-index: 2;
-                border-radius: 12px 0 0 0;
-            }
-            .blog-style-one {
-                border-left: 1px solid #e2e8f0;
-                border-right: 1px solid #e2e8f0;
-                border-bottom: 1px solid #e2e8f0;
-                border-radius: 20px 20px 15px 15px;
-                background: #fff;
-                transition: all 0.3s ease;
-            }
-            .blog-style-one:hover {
-                border-color: #3779b9;
-                box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
-            }
-            .blog-content {
-                padding: 30px 25px;
-            }
-            .blog-title {
-                display: -webkit-box;
-                -webkit-line-clamp: 2;
-                -webkit-box-orient: vertical;
-                overflow: hidden;
-                line-height: 1.5;
-                height: 3em;
-            }
-        `}</style>
     </section>
 );
 

src/components/home/home-3/ProjectsSection.tsx

@@ -7,7 +7,7 @@ const ProjectsSection = () => {
             <div className="small-container">
                 <div className="row">
                     <div className="col-xxl-6">
-                        <div className="title-box mb-50 wow fadeInLeft" data-wow-delay=".5s">
+                        <div className="title-box wow fadeInLeft" data-wow-delay=".5s">
                             <span className="section-sub-title no-border">PROJECTS</span>
                             <h3 className="section-title mt-10">Explore Our Recent Projects</h3>
                         </div>

src/components/home/home-3/ServiceSection.tsx

@@ -36,7 +36,7 @@ const ServiceSection = () => {
             <div className="shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-47.png)" }}></div>
             <div className="shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-48.png)" }}></div>
             <div className="small-container">
-                <div className="service-3-title-box mb-50">
+                <div className="service-3-title-box">
                     <div className="title-box wow fadeInLeft" data-wow-delay=".5s">
                         <span className="section-sub-title no-border">SERVICES WE’RE OFFERING</span>
                         <h3 className="section-title mt-10 text-white">Exclusive IT Services</h3>

src/components/layout/NavMenu.tsx

@@ -3,24 +3,24 @@ import Link from "next/link";
 
 const NavMenu = () => (
     <ul>
-        <li><Link href="/">Home</Link></li>
+        <li><Link href="/">HOME</Link></li>
-        <li><Link href="/about-us">About</Link></li>
         <li className="has-dropdown">
-            <Link href="/services">Services</Link>
+            <Link href="/services-digital-solutions">SERVICE <i className="fa-solid fa-angle-down ms-1"></i></Link>
             <ul className="submenu">
-                <li><Link href="/">Website Development</Link></li>
+                <li><Link href="/services-digital-solutions/web-development">WEBSITE DEVELOPMENT</Link></li>
-                <li><Link href="/">Mobile Application Development</Link></li>
+                <li><Link href="/services-digital-solutions/mobile-app-development">MOBILE APPLICATION DEVELOPMENT</Link></li>
-                <li><Link href="/">Graphic Designing</Link></li>
+                <li><Link href="/services-digital-solutions/graphic-designing">GRAPHIC DESIGNING</Link></li>
-                <li><Link href="/">UI / UX Designing</Link></li>
+                <li><Link href="/services-digital-solutions/ui-ux-designing">UI / UX DESIGNING</Link></li>
-                <li><Link href="/">SEO & Content Writing</Link></li>
+                <li><Link href="/services-digital-solutions/seo-content-writing">SEO & CONTENT WRITING</Link></li>
-                <li><Link href="/">Digital Marketing</Link></li>
+                <li><Link href="/services-digital-solutions/digital-marketing">DIGITAL MARKETING</Link></li>
             </ul>
         </li>
-        <li><Link href="/careers">Careers</Link></li>
+        <li><Link href="/portfolio">PORTFOLIO</Link></li>
-        <li><Link href="/portfolio">Portfolio</Link></li>
+        <li><Link href="/about-us">ABOUT</Link></li>
+        <li><Link href="/careers">CAREERS</Link></li>
+        <li><Link href="/blog">BLOG</Link></li>
+        <li><Link href="/contact">CONTACT</Link></li>
         <li><Link href="/faq">FAQ</Link></li>
-        <li><Link href="/blog">Blog</Link></li>
-        <li><Link href="/contact">Contact</Link></li>
     </ul>
 );
 

src/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import ReCAPTCHA from "react-google-recaptcha";
 import axios from "axios";
+import ContactStatus from '@/components/contact/ContactStatus';
 
 interface ContactPopupProps {
     isOpen: boolean;
@@ -10,6 +11,7 @@ interface ContactPopupProps {
 }
 
 const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
+    const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
     const [formData, setFormData] = useState({
         name: "",
         phone: "",
@@ -17,12 +19,11 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
         businessName: "",
         projectRequirement: "",
         budgetRange: "",
+        appType: "",
     });
 
     const [formErrors, setFormErrors] = useState<any>({});
     const [captchaToken, setCaptchaToken] = useState<string | null>(null);
-    const [alert, setAlert] = useState({ show: false, type: "", message: "" });
-    const [isSubmitting, setIsSubmitting] = useState(false);
     const [mounted, setMounted] = useState(false);
 
     useEffect(() => {
@@ -57,32 +58,27 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
         if (!formData.businessName.trim()) errors.businessName = "Business name requested.";
         if (!formData.projectRequirement.trim()) errors.projectRequirement = "Requirement details needed.";
         if (!formData.budgetRange) errors.budgetRange = "Please select a budget range.";
-        // if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
+        if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
 
         setFormErrors(errors);
         if (Object.keys(errors).length > 0) return;
 
-        setIsSubmitting(true);
+        setStatus('submitting');
 
         const emailData = {
             ...formData,
-            message: `Business: ${formData.businessName}<br />Budget: ${formData.budgetRange}<br /><br />Requirement: ${formData.projectRequirement}`,
+            message: `Business: ${formData.businessName}<br />App Type: ${formData.appType}<br />Budget: ${formData.budgetRange}<br /><br />Requirement: ${formData.projectRequirement}`,
-            to: "selvipalanikumarn@gmail.com",
+            to: "info@metatroncubesolutions.com",
             senderName: "Metatroncube Contact Popup",
             recaptchaToken: captchaToken,
         };
 
         try {
-            const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, {
+            await axios.post("https://mailserver.metatronnest.com/send", emailData, {
                 headers: { "Content-Type": "application/json" },
             });
 
-            setAlert({
+            setStatus('success');
-                show: true,
-                type: "success",
-                message: res?.data?.message || "Message sent successfully!",
-            });
-
             setFormData({
                 name: "",
                 phone: "",
@@ -90,31 +86,24 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
                 businessName: "",
                 projectRequirement: "",
                 budgetRange: "",
+                appType: "",
             });
             setCaptchaToken(null);
             setFormErrors({});
-            // Close after delay
-            setTimeout(onClose, 2000);
         } catch (error) {
             console.error("❌ Error sending email:", error);
-            setAlert({
+            setStatus('error');
-                show: true,
-                type: "danger",
-                message: "Failed to send message. Please try again later.",
-            });
-        } finally {
-            setIsSubmitting(false);
         }
     };
 
-    useEffect(() => {
+    const handleCloseStatus = () => {
-        if (alert.show) {
+        if (status === 'success') {
-            const timer = setTimeout(() => {
+            onClose();
-                setAlert((prev) => ({ ...prev, show: false }));
+            setStatus('idle');
-            }, 5000);
+        } else {
-            return () => clearTimeout(timer);
+            setStatus('idle');
         }
-    }, [alert.show]);
+    };
 
     if (!mounted || !isOpen) return null;
 
@@ -126,22 +115,22 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
                     <div className="col-lg-5 info-panel" style={{ color: '#fff', position: 'relative' }}>
                         <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'linear-gradient(135deg, #1a1f2b 0%, #3779b9 100%)', zIndex: 0 }}></div>
                         <div className="info-inner" style={{ position: 'relative', zIndex: 1 }}>
-                            <h2 className="title text-white">Let’s Discuss Your App Idea</h2>
+                            <h2 className="title">Let&apos;s Discuss Your App Idea</h2>
-                            <p className="desc text-white">Fill out the form and our team will contact you within 24 hours.</p>
+                            <p className="desc">Fill out the form and our team will contact you within 24 hours.</p>
 
                             <div className="contact-details">
                                 <div className="detail-item">
                                     <div className="icon"><i className="fa-solid fa-envelope"></i></div>
                                     <div className="text">
-                                        <p className='text-white'>Email Us</p>
+                                        <p>Email Us</p>
-                                        <h5 className='text-white'>info@metatroncubesolutions.com</h5>
+                                        <h5>info@metatroncubesolutions.com</h5>
                                     </div>
                                 </div>
                                 <div className="detail-item">
                                     <div className="icon"><i className="fa-solid fa-phone"></i></div>
                                     <div className="text">
-                                        <p className='text-white'>Call Us Free</p>
+                                        <p>Call Us Free</p>
-                                        <h5 className='text-white'><a href="tel:+16476797651" style={{ color: 'inherit', textDecoration: 'none' }}>+1-647-679-7651</a></h5>
+                                        <h5><a href="tel:+16476797651" style={{ color: 'inherit', textDecoration: 'none' }}>+1-647-679-7651</a></h5>
                                     </div>
                                 </div>
                             </div>
@@ -156,49 +145,43 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
                         </div>
                     </div>
 
-                    {/* Right Side: Form */}
+                    {/* Right Side: Form or Status */}
                     <div className="col-lg-7 form-panel">
                         <button onClick={onClose} className="close-btn">
                             <i className="fa-solid fa-xmark"></i>
                         </button>
 
+                        {status === 'idle' || status === 'submitting' ? (
+                            <>
                                 <h3 className="form-title">Start Your Project</h3>
-
-                        {alert.show && (
-                            <div className={`alert alert-${alert.type === 'danger' ? 'danger' : 'success'} mb-4`}>
-                                {alert.message}
-                            </div>
-                        )}
-
                                 <form className="contact-form" onSubmit={handleSubmit}>
                                     <div className="row g-3">
-                                <div className="col-md-6">
+                                        <div className="col-sm-6">
-                                    <input type="text" name="name" placeholder="Full Name" value={formData.name} onChange={handleChange} className="form-input" />
+                                            <input type="text" name="name" placeholder="Full Name" value={formData.name} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
                                             {formErrors.name && <small className="text-danger">{formErrors.name}</small>}
                                         </div>
-                                <div className="col-md-6">
+                                        <div className="col-sm-6">
-                                    <input type="email" name="email" placeholder="Email Address" value={formData.email} onChange={handleChange} className="form-input" />
+                                            <input type="email" name="email" placeholder="Email Address" value={formData.email} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
                                             {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
                                         </div>
-                                <div className="col-md-6">
+                                        <div className="col-sm-6">
-                                    <input type="text" name="phone" placeholder="Phone Number" value={formData.phone} onChange={handleChange} className="form-input" />
+                                            <input type="text" name="phone" placeholder="Phone Number" value={formData.phone} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
                                             {formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
                                         </div>
-                                <div className="col-md-6">
+                                        <div className="col-sm-6">
-                                    <input type="text" name="businessName" placeholder="Business Name" value={formData.businessName} onChange={handleChange} className="form-input" />
+                                            <input type="text" name="businessName" placeholder="Business Name" value={formData.businessName} onChange={handleChange} className="form-input" disabled={status === 'submitting'} />
                                             {formErrors.businessName && <small className="text-danger">{formErrors.businessName}</small>}
                                         </div>
-                                <div className="col-12">
+                                        <div className="col-sm-6">
-                                    <select name="budgetRange" value={formData.budgetRange} onChange={handleChange} className="form-input form-select">
+                                            <select name="appType" value={formData.appType} onChange={handleChange} className="form-input form-select" disabled={status === 'submitting'}>
                                                 <option value="">App Type</option>
                                                 <option value="Android">Android</option>
                                                 <option value="iOS">iOS</option>
                                                 <option value="Both">Both</option>
                                             </select>
-                                    {formErrors.budgetRange && <small className="text-danger">{formErrors.budgetRange}</small>}
                                         </div>
-                                <div className="col-12">
+                                        <div className="col-sm-6">
-                                    <select name="budgetRange" value={formData.budgetRange} onChange={handleChange} className="form-input form-select">
+                                            <select name="budgetRange" value={formData.budgetRange} onChange={handleChange} className="form-input form-select" disabled={status === 'submitting'}>
                                                 <option value="">Select Budget Range</option>
                                                 <option value="$1,000 - $5,000">$1,000 - $5,000</option>
                                                 <option value="$5,000 - $10,000">$5,000 - $10,000</option>
@@ -216,6 +199,7 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
                                         value={formData.projectRequirement}
                                         onChange={handleChange}
                                         className="form-textarea mt-3"
+                                        disabled={status === 'submitting'}
                                     ></textarea>
                                     {formErrors.projectRequirement && <small className="text-danger">{formErrors.projectRequirement}</small>}
 
@@ -229,10 +213,16 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
                                         {formErrors.captcha && <small className="text-danger d-block mt-1">{formErrors.captcha}</small>}
                                     </div>
 
-                            <button type="submit" className="vl-btn1 submit-btn" disabled={isSubmitting}>
+                                    <button type="submit" className="vl-btn1 submit-btn" disabled={status === 'submitting'}>
-                                {isSubmitting ? 'Sending...' : 'Submit & Get Free Proposal'} <i className="fa-solid fa-angle-right"></i>
+                                        {status === 'submitting' ? 'Sending...' : 'Submit & Get Free Proposal'} <i className="fa-solid fa-arrow-right"></i>
                                     </button>
                                 </form>
+                            </>
+                        ) : (
+                            <div className="status-wrapper">
+                                <ContactStatus type={status as 'success' | 'error'} onClose={handleCloseStatus} />
+                            </div>
+                        )}
                     </div>
                 </div>
             </div>
@@ -417,6 +407,14 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
                     transform: translateY(-1px);
                 }
 
+                .status-wrapper {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    height: 100%;
+                    min-height: 400px;
+                }
+
                 /* Mobile Optimizations */
                 @media (max-width: 991px) {
                     .info-panel { display: none; }

src/components/services-digital-solutions/AboutService.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+
+const AboutService = () => {
+    return (
+        <section className="about-service section-space">
+            <div className="container">
+                <div className="row align-items-center">
+                    <div className="col-lg-6">
+                        <div className="about-image-stack p-relative">
+                            {/* Experience Box */}
+                            {/* <div className="experience-box animate-bounce-y">
+                                <h3>37+</h3>
+                                <span>Years Experience</span>
+                            </div> */}
+
+                            {/* Background Image */}
+                            <div className="main-img-wrap">
+                                <img src="/assets/img/about/about-img1.png" alt="Office Meeting" />
+                            </div>
+
+                            {/* Foreground Curved Image */}
+                            <div className="curved-img-wrap">
+                                <img src="/assets/img/about/about-img13.png" alt="Collaborative Work" />
+                            </div>
+
+                            {/* Decorative Dots */}
+                            <div className="dots-shape">
+                                <img src="/assets/imgs/shapes/shape-6.png" alt="dots" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-6">
+                        <div className="content-area pl-60">
+                            <div className="sec-title-wrapper mb-30">
+                                <div className="sec-title">
+                                    <div className="sec-title__shape"></div>
+                                    <h6 className="sec-title__tagline">OUR ABOUT US</h6>
+                                    <h3 className="sec-title__title">We Provide Professional Advice<br />About This Business.</h3>
+                                </div>
+                                <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
+                                <p className="section-desc">
+                                    Business tailored design, management &amp; support services Business business agency elit,
+                                    sed do eiusmod tempor majority have in some we form, by injected humour solution.
+                                </p>
+                            </div>
+
+                            <div className="single-format-content mb-40">
+                                <div className="format-row d-flex align-items-start gap-4">
+                                    {/* <div className="small-feature-img">
+                                        <img src="/assets/img/about/about-img10.png" alt="Team" className="rounded-3" />
+                                    </div> */}
+                                    <div className="feature-bullets">
+                                        <div className="bullet-item d-flex align-items-center mb-15">
+                                            <i className="fa-solid fa-circle-check maroon-icon"></i>
+                                            <span>Great solution for your business growth.</span>
+                                        </div>
+                                        <div className="bullet-item d-flex align-items-center">
+                                            <i className="fa-solid fa-circle-check maroon-icon"></i>
+                                            <span>Remind yourself Business know fact.</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="btn-wrapper">
+                                <a href="/about-us" className="about-more-btn">
+                                    <span>ABOUT MORE</span>
+                                    <div className="icon-circle">
+                                        <i className="fa-solid fa-chevron-right"></i>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </section>
+    );
+};
+
+export default AboutService;

src/components/services-digital-solutions/ServiceDetails.tsx

@@ -32,7 +32,7 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
                                 <ul className="list-unstyled service-sidebar__nav">
                                     {psychologyServices.map((item) => (
                                         <li key={item.id} className={item.slug === service.slug ? "active" : ""}>
-                                            <Link href={`/services/${item.slug}`}>
+                                            <Link href={`/services-digital-solutions/${item.slug}`}>
                                                 {item.title}
                                                 <i className="fa-solid fa-chevron-right"></i>
                                             </Link>

src/components/services/AboutService.tsx

@@ -1,275 +0,0 @@
-import React from "react";
-
-const AboutService = () => {
-    return (
-        <section className="about-service section-space">
-            <div className="container">
-                <div className="row align-items-center">
-                    <div className="col-lg-6">
-                        <div className="about-image-stack p-relative">
-                            {/* Experience Box */}
-                            {/* <div className="experience-box animate-bounce-y">
-                                <h3>37+</h3>
-                                <span>Years Experience</span>
-                            </div> */}
-
-                            {/* Background Image */}
-                            <div className="main-img-wrap">
-                                <img src="/assets/img/about/about-img1.png" alt="Office Meeting" />
-                            </div>
-
-                            {/* Foreground Curved Image */}
-                            <div className="curved-img-wrap">
-                                <img src="/assets/img/about/about-img13.png" alt="Collaborative Work" />
-                            </div>
-
-                            {/* Decorative Dots */}
-                            <div className="dots-shape">
-                                <img src="/assets/imgs/shapes/shape-6.png" alt="dots" />
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="col-lg-6">
-                        <div className="content-area pl-60">
-                            <div className="sec-title-wrapper mb-30">
-                                <div className="sec-title">
-                                    <div className="sec-title__shape"></div>
-                                    <h6 className="sec-title__tagline">OUR ABOUT US</h6>
-                                    <h3 className="sec-title__title">We Provide Professional Advice<br />About This Business.</h3>
-                                </div>
-                                <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
-                                <p className="section-desc">
-                                    Business tailored design, management &amp; support services Business business agency elit,
-                                    sed do eiusmod tempor majority have in some we form, by injected humour solution.
-                                </p>
-                            </div>
-
-                            <div className="single-format-content mb-40">
-                                <div className="format-row d-flex align-items-start gap-4">
-                                    {/* <div className="small-feature-img">
-                                        <img src="/assets/img/about/about-img10.png" alt="Team" className="rounded-3" />
-                                    </div> */}
-                                    <div className="feature-bullets">
-                                        <div className="bullet-item d-flex align-items-center mb-15">
-                                            <i className="fa-solid fa-circle-check maroon-icon"></i>
-                                            <span>Great solution for your business growth.</span>
-                                        </div>
-                                        <div className="bullet-item d-flex align-items-center">
-                                            <i className="fa-solid fa-circle-check maroon-icon"></i>
-                                            <span>Remind yourself Business know fact.</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div className="btn-wrapper">
-                                <a href="/about-us" className="about-more-btn">
-                                    <span>ABOUT MORE</span>
-                                    <div className="icon-circle">
-                                        <i className="fa-solid fa-chevron-right"></i>
-                                    </div>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <style jsx>{`
-                .about-service {
-                    padding: 80px 0;
-                    background: #fff;
-                    overflow: hidden;
-                }
-                @media (max-width: 767px) {
-                    .about-service {
-                        padding: 60px 0;
-                    }
-                }
-                // .about-image-stack {
-                //     padding-top: 50px;
-                //     padding-left: 30px;
-                // }
-                .experience-box {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    background: #3779b9;
-                    color: #fff;
-                    padding: 40px 30px;
-                    z-index: 3;
-                    text-align: center;
-                    border-radius: 4px;
-                    box-shadow: 0 10px 30px rgba(60, 114, 252, 0.3);
-                }
-                .experience-box h3 {
-                    font-size: 54px;
-                    font-weight: 800;
-                    margin: 0;
-                    line-height: 1;
-                }
-                .experience-box span {
-                    font-size: 16px;
-                    font-weight: 600;
-                    display: block;
-                    margin-top: 5px;
-                    line-height: 1.2;
-                }
-                .main-img-wrap {
-                    width: 100%;
-                    max-width: 450px;
-                    border-radius: 10px;
-                    overflow: hidden;
-                    margin-left: auto;
-                    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
-                }
-                .main-img-wrap img {
-                    width: 100%;
-                    display: block;
-                }
-                .curved-img-wrap {
-                    position: absolute;
-                    bottom: -40px;
-                    left: -20px;
-                    width: 320px;
-                    height: 320px;
-                    border-radius: 100px 30px 100px 100px;
-                    overflow: hidden;
-                    border: 8px solid #fff;
-                    z-index: 2;
-                    box-shadow: 0 15px 45px rgba(0,0,0,0.12);
-                }
-                .curved-img-wrap img {
-                    width: 100%;
-                    height: 100%;
-                    object-fit: cover;
-                }
-                .dots-shape {
-                    position: absolute;
-                    top: 80px;
-                    left: -40px;
-                    z-index: 1;
-                    opacity: 0.4;
-                }
-                .section-subtitle {
-                    color: #3779b9;
-                    font-weight: 700;
-                    margin-bottom: 15px;
-                    display: flex;
-                    align-items: center;
-                    gap: 12px;
-                    font-size: 15px;
-                    text-transform: uppercase;
-                    letter-spacing: 1.5px;
-                }
-                .rotate-triangle {
-                    font-size: 14px;
-                    transform: rotate(-30deg);
-                }
-                .section-title {
-                    font-size: 46px;
-                    font-weight: 800;
-                    color: #0f172a;
-                    line-height: 1.2;
-                    margin-bottom: 25px;
-                }
-                .section-desc {
-                    font-size: 16px;
-                    color: #64748b;
-                    line-height: 1.8;
-                    margin-bottom: 35px;
-                }
-                .small-feature-img {
-                    width: 140px;
-                    flex-shrink: 0;
-                }
-                .small-feature-img img {
-                    width: 100%;
-                }
-                .maroon-icon {
-                    color: #0f172a;
-                    font-size: 18px;
-                    margin-right: 12px;
-                }
-                .bullet-item span {
-                    font-size: 16px;
-                    font-weight: 600;
-                    color: #0f172a;
-                }
-                .about-more-btn {
-                    display: inline-flex;
-                    align-items: center;
-                    background: #3779b9;
-                    color: #fff;
-                    padding: 8px 8px 8px 25px;
-                    border-radius: 6px;
-                    text-decoration: none;
-                    font-weight: 700;
-                    font-size: 14px;
-                    letter-spacing: 1px;
-                    transition: all 0.3s ease;
-                }
-                .about-more-btn:hover {
-                    background: #2563eb;
-                    transform: translateY(-2px);
-                }
-                .icon-circle {
-                    width: 40px;
-                    height: 40px;
-                    background: #fff;
-                    color: #3779b9;
-                    border-radius: 4px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    margin-left: 20px;
-                }
-                .animate-bounce-y {
-                    animation: bounceY 4s infinite ease-in-out;
-                }
-                @keyframes bounceY {
-                    0%, 100% { transform: translateY(0); }
-                    50% { transform: translateY(-15px); }
-                }
-                @media (max-width: 1199px) {
-                    .content-area {
-                        padding-left: 30px;
-                    }
-                    .section-title {
-                        font-size: 38px;
-                    }
-                    .curved-img-wrap {
-                        width: 260px;
-                        height: 260px;
-                    }
-                }
-                @media (max-width: 991px) {
-                    .about-image-stack {
-                        margin-bottom: 80px;
-                        padding-left: 0;
-                    }
-                    .content-area {
-                        padding-left: 0;
-                    }
-                }
-                @media (max-width: 575px) {
-                    .curved-img-wrap {
-                        width: 200px;
-                        height: 200px;
-                        bottom: -20px;
-                        left: 0;
-                    }
-                    .experience-box {
-                        padding: 25px 20px;
-                    }
-                    .experience-box h3 {
-                        font-size: 40px;
-                    }
-                }
-            `}</style>
-        </section>
-    );
-};
-
-export default AboutService;

src/utils/data.ts

@@ -550,9 +550,9 @@ export const pricingPlans: PricingType[] = [
 export const psychologyServices = [
     {
         id: 1,
-        title: "Cognitive Psychology",
+        title: "Website Development",
-        slug: "cognitive-psychology",
+        slug: "web-development",
-        icon: "fa-solid fa-brain",
+        icon: "fa-solid fa-code",
       image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
         description: "Business tailored design, management & support services Business for free.",
         content: `
@@ -583,9 +583,9 @@ export const psychologyServices = [
     },
     {
         id: 2,
-        title: "Academic Psychology",
+        title: "Mobile Application Development",
-        slug: "academic-psychology",
+        slug: "mobile-app-development",
-        icon: "fa-solid fa-graduation-cap",
+        icon: "fa-solid fa-mobile-screen-button",
        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
         description: "Business tailored design, management & support services Business for free.",
         content: `
@@ -616,9 +616,9 @@ export const psychologyServices = [
     },
     {
         id: 3,
-        title: "Career Counseling",
+        title: "Graphic Designing",
-        slug: "career-counseling",
+        slug: "graphic-designing",
-        icon: "fa-solid fa-user-tie",
+        icon: "fa-solid fa-palette",
         image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
         description: "Business tailored design, management & support services Business for free.",
         content: `
@@ -649,9 +649,9 @@ export const psychologyServices = [
     },
     {
         id: 4,
-        title: "Clinical Psychology",
+        title: "UI / UX Designing",
-        slug: "clinical-psychology",
+        slug: "ui-ux-designing",
-        icon: "fa-solid fa-stethoscope",
+        icon: "fa-solid fa-palette",
         image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
         description: "Business tailored design, management & support services Business for free.",
         content: `
@@ -682,9 +682,9 @@ export const psychologyServices = [
     },
     {
         id: 5,
-        title: "Psychiatric Treatment",
+        title: "SEO & Content Writing",
-        slug: "psychiatric-treatment",
+        slug: "seo-content-writing",
-        icon: "fa-solid fa-hospital-user",
+        icon: "fa-solid fa-palette",
       image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
         description: "Business tailored design, management & support services Business for free.",
         content: `
@@ -715,9 +715,9 @@ export const psychologyServices = [
     },
     {
         id: 6,
-        title: "Family Therapy",
+        title: "Digital Marketing",
-        slug: "family-therapy",
+        slug: "digital-marketing",
-        icon: "fa-solid fa-hospital-user",
+        icon: "fa-solid fa-palette",
        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
         description: "Business tailored design, management & support services Business for free.",
         content: `