all new section alteration are updated

src/app/about-us/page.tsx

@@ -26,6 +26,8 @@ import WhyChooseSection from "@/components/careers/WhyChooseSection";
 import PageHeader from "@/components/common/PageHeader";
 import HistoryTwo from "@/components/home/HistoryTwo";
 import WhyChooseTwo from "@/components/home/WhyChooseTwo";
+import ContactSection from "@/components/careers/ContactSection";
+import CouterAreaThree from "@/components/home/CounterAreaThree";
 
 export default function Home2() {
     useEffect(() => {
@@ -46,10 +48,12 @@ export default function Home2() {
                 <PageHeader title="About Us" />
                 {/* <FeaturesSection /> */}
                 <About2Section />
-                <IconCounterSection />
+                {/* <CounterAreaTwo /> */}
+                <CouterAreaThree />
+                {/* <IconCounterSection /> */}
                 <WhyChooseTwo />
-                <BrandSection />
+                
-                <HelpFormSection />
+                {/* <HelpFormSection /> */}
                 {/* <WhyChooseSection /> */}
                 {/* <WhyChooseUs /> */}
                 {/* <ServiceTabSection /> */}
@@ -57,7 +61,9 @@ export default function Home2() {
                 {/* <TextSliderSection /> */}
                 {/* <WorkProcessSection /> */}
                 <HistoryTwo />
+                <BrandSection />
                 <TestimonialsSection />
+                <ContactSection />
                 {/* <FaqSection /> */}
 
 

src/app/blog/page.tsx

@@ -5,6 +5,7 @@ import Header1 from "@/components/layout/Header1";
 import Footer1 from "@/components/layout/Footer1";
 import BlogSection from "@/components/home/home-1/BlogSection";
 import PageHeader from "@/components/common/PageHeader";
+import SectionTitle from "@/components/common/SectionTitle";
 
 export default function BlogPage() {
     useEffect(() => {
@@ -18,6 +19,21 @@ export default function BlogPage() {
             <Header1 />
             <main>
                 <PageHeader title="Our Blog" />
+                <div className="container section-space-top">
+                    <SectionTitle
+                        tagline="LATEST NEWS"
+                        title="Latest Blog & News"
+                        centered={true}
+                    />
+                    <div className="row justify-content-center">
+                        <div className="col-lg-8 text-center pt-20">
+                            <p className="sec-text">
+                                Stay updated with our latest industry insights, success stories, and technical guides.
+                                We share our expertise to help your business grow and stay ahead in the digital landscape.
+                            </p>
+                        </div>
+                    </div>
+                </div>
                 <BlogSection hideHeader={true} />
             </main>
             <Footer1 />

src/app/services/[slug]/page.tsx

@@ -0,0 +1,34 @@
+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 { psychologyServices } from "@/utils/data";
+import { notFound } from "next/navigation";
+
+export async function generateStaticParams() {
+    return psychologyServices.map((service) => ({
+        slug: service.slug,
+    }));
+}
+
+export default async function ServiceDetailsPage({ params }: { params: Promise<{ slug: string }> }) {
+    const { slug } = await params;
+
+    const service = psychologyServices.find((s) => s.slug === slug);
+
+    if (!service) {
+        notFound();
+    }
+
+    return (
+        <>
+            <Header1 />
+            <main>
+                <PageHeader title={service.title} />
+                <ServiceDetails service={service} />
+            </main>
+            <Footer1 />
+        </>
+    );
+}

src/components/about/WhyChooseUs.tsx

@@ -19,15 +19,15 @@ const WhyChooseUs = () => {
                     </div>
                     <div className="col-lg-6">
                         <div className="content-area pr-50">
-                            <div className="section-title-wrapper mb-30">
+                            <div className="sec-title-wrapper mb-30">
-                                <span className="section-subtitle">
+                                <div className="sec-title">
-                                    <i className="fa-solid fa-play rotate-triangle"></i> WHY CHOOSE US
+                                    <div className="sec-title__shape"></div>
-                                </span>
+                                    <h6 className="sec-title__tagline">WHY CHOOSE US</h6>
-                                <h2 className="section-title">
+                                    <h3 className="sec-title__title">Consulting Solutions For Your<br />Business Development.</h3>
-                                    Consulting Solutions For Your Business Development.
+                                </div>
-                                </h2>
+                                <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 & support services Business business agency elit,
+                                    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>

src/components/careers/ServiceSection.tsx

@@ -2,6 +2,7 @@
 
 import React, { useEffect, useRef } from "react";
 import Link from "next/link";
+import { psychologyServices } from "@/utils/data";
 
 const ServiceSection2 = () => {
     const sectionRef = useRef<HTMLDivElement>(null);
@@ -43,50 +44,7 @@ const ServiceSection2 = () => {
         return () => observer.disconnect();
     }, []);
 
-    const services = [
+    const services = psychologyServices;
-        {
-            title: "Network Infrastructure",
-            text: "Solution the connection, we create platforms business Solution",
-            icon: "fa-solid fa-network-wired",
-            image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-1.jpg",
-            link: "/business-growth"
-        },
-        {
-            title: "Data Management",
-            text: "Solution the connection, we create platforms business Solution",
-            icon: "fa-solid fa-database",
-            image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-2.jpg",
-            link: "/business-support"
-        },
-        {
-            title: "Technology Solution",
-            text: "Solution the connection, we create platforms business Solution",
-            icon: "fa-solid fa-microchip",
-            image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-3.jpg",
-            link: "/technology-services"
-        },
-        {
-            title: "Technology Solution",
-            text: "Solution the connection, we create platforms business Solution",
-            icon: "fa-solid fa-microchip",
-            image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-3.jpg",
-            link: "/technology-services"
-        },
-             {
-            title: "Data Management",
-            text: "Solution the connection, we create platforms business Solution",
-            icon: "fa-solid fa-database",
-            image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-2.jpg",
-            link: "/business-support"
-        },
-        {
-            title: "Network Infrastructure",
-            text: "Solution the connection, we create platforms business Solution",
-            icon: "fa-solid fa-network-wired",
-            image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-1.jpg",
-            link: "/business-growth"
-        },
-    ];
 
     return (
         <section ref={sectionRef} className="service-three">
@@ -99,13 +57,13 @@ const ServiceSection2 = () => {
                 style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/shapes/service-shape-3.png)" }}
             ></div>
             <div className="container">
-                <div className="sec-title-three">
+                <div className="sec-title-wrapper text-center mb-50 wow fadeInUp" data-wow-delay=".3s">
-                    <h6 className="sec-title-three__tagline">
+                    <div className="sec-title">
-                        <span className="sec-title-three__tagline__left-border"></span>
+                        <div className="sec-title__shape"></div>
-                        OUR BEST SERVICE
+                        <h6 className="sec-title__tagline">OUR BEST SERVICE</h6>
-                        <span className="sec-title-three__tagline__right-border"></span>
+                        <h3 className="sec-title__title">We Are Service Your Business</h3>
-                    </h6>
+                    </div>
-                    <h3 className="sec-title-three__title">We Are Service Your Business</h3>
+                    <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
                 </div>
 
                 <div className="row">
@@ -122,9 +80,9 @@ const ServiceSection2 = () => {
                                         <span className={service.icon}></span>
                                     </div>
                                     <h3 className="service-three__item__title">
-                                        <Link href={service.link}>{service.title}</Link>
+                                        <Link href={`/services/${service.slug}`}>{service.title}</Link>
                                     </h3>
-                                    <p className="service-three__item__text">{service.text}</p>
+                                    <p className="service-three__item__text">{service.description}</p>
                                 </div>
                                 <div className="service-three__item__image">
                                     <img src={service.image} alt={service.title} />

src/components/careers/WorkProcessSection.tsx

@@ -66,18 +66,18 @@ const WorkProcessSection2 = () => {
                     <div className="row gy-5 gx-70 align-items-center">
                         <div className="col-xl-5">
                             <div className="work-process-content">
-                                <div className="section-title">
+                                <div className="sec-title-wrapper mb-30 wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
-                                    <div className="subtitle text-white wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
+                                    <div className="sec-title">
-                                        <span className="section-sub-title">How we do</span>
+                                        <div className="sec-title__shape"></div>
+                                        <h6 className="sec-title__tagline">HOW WE DO</h6>
+                                        <h3 className="sec-title__title">Amazing Solutions<br />For Business</h3>
                                     </div>
-                                    <h2 className="title wow" data-wow-delay="0.6s" style={{ visibility: "hidden" }}>
+                                    <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
-                                        Amazing Solutions <br /> For business
-                                    </h2>
-                                    <p className="wow text-dark" data-wow-delay="0.5s" style={{ visibility: "hidden" }}>
-                                        We don&apos;t believe in a one-size-fit-all approach. Our services are carefully
-                                        customized to suit your specific need, ensuring you to achieve your goals.
-                                    </p>
                                 </div>
+                                <p className="wow text-dark" data-wow-delay="0.5s" style={{ visibility: "hidden" }}>
+                                    We don&apos;t believe in a one-size-fit-all approach. Our services are carefully
+                                    customized to suit your specific need, ensuring you to achieve your goals.
+                                </p>
                             </div>
                         </div>
 

src/components/common/ContactPopup/ContactPopup.tsx

@@ -9,7 +9,15 @@ interface ContactPopupProps {
     onClose: () => void;
 }
 
+import ContactStatus from '../../contact/ContactStatus';
+
+interface ContactPopupProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
 const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
+    const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
     const [formData, setFormData] = useState({
         name: "",
         phone: "",
@@ -21,8 +29,6 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
 
     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 +63,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}`,
-            to: "info@metatroncubesolutions.com",
+            to: "akashlucaas@gmail.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: "",
@@ -93,28 +94,20 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
             });
             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;
 
@@ -148,7 +141,7 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
 
                             <div className="social-links">
                                 <a href="https://www.facebook.com/metatroncubecanada" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-facebook-f"></i></a>
-                                <a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-x-twitter"></i></a>
+                                <a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-twitter"></i></a>
                                 <a href="https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-linkedin-in"></i></a>
                                 <a href="https://www.instagram.com/metatron_digitalagency" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-instagram"></i></a>
                                 <a href="https://www.youtube.com/@metatron_digitalagency" target="_blank" rel="noopener noreferrer" className="social-icon"><i className="fa-brands fa-youtube"></i></a>
@@ -162,73 +155,81 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
                             <i className="fa-solid fa-xmark"></i>
                         </button>
 
-                        <h3 className="form-title">Start Your Project</h3>
+                        {status === 'idle' || status === 'submitting' ? (
+                            <>
+                                <h3 className="form-title">Start Your Project</h3>
+                                <form className="contact-form" onSubmit={handleSubmit}>
+                                    <div className="row g-3">
+                                        <div className="col-md-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">
+                                            <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">
+                                            <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">
+                                            <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">
+                                            <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>
+                                                <option value="$10,000 - $25,000">$10,000 - $25,000</option>
+                                                <option value="$25,000+">$25,000+</option>
+                                            </select>
+                                            {formErrors.budgetRange && <small className="text-danger">{formErrors.budgetRange}</small>}
+                                        </div>
+                                    </div>
 
-                        {alert.show && (
+                                    <textarea
-                            <div className={`alert alert-${alert.type === 'danger' ? 'danger' : 'success'} mb-4`}>
+                                        name="projectRequirement"
-                                {alert.message}
+                                        placeholder="Your Project Requirements"
+                                        rows={3}
+                                        value={formData.projectRequirement}
+                                        onChange={handleChange}
+                                        className="form-textarea mt-3"
+                                        disabled={status === 'submitting'}
+                                    ></textarea>
+                                    {formErrors.projectRequirement && <small className="text-danger">{formErrors.projectRequirement}</small>}
+
+                                    <div className="mt-3 g-recaptcha-container">
+                                        <div className="g-recaptcha">
+                                            <ReCAPTCHA
+                                                sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
+                                                onChange={handleCaptchaChange}
+                                            />
+                                        </div>
+                                        {formErrors.captcha && <small className="text-danger d-block mt-1">{formErrors.captcha}</small>}
+                                    </div>
+
+                                    <button type="submit" className="vl-btn1 submit-btn" disabled={status === 'submitting'}>
+                                        {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>
                         )}
-
-                        <form className="contact-form" onSubmit={handleSubmit}>
-                            <div className="row g-3">
-                                <div className="col-md-6">
-                                    <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="col-md-6">
-                                    <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="col-md-6">
-                                    <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="col-md-6">
-                                    <input type="text" name="businessName" placeholder="Business Name" value={formData.businessName} onChange={handleChange} className="form-input" />
-                                    {formErrors.businessName && <small className="text-danger">{formErrors.businessName}</small>}
-                                </div>
-                                <div className="col-12">
-                                    <select name="budgetRange" value={formData.budgetRange} onChange={handleChange} className="form-input form-select">
-                                        <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>
-                                        <option value="$10,000 - $25,000">$10,000 - $25,000</option>
-                                        <option value="$25,000+">$25,000+</option>
-                                    </select>
-                                    {formErrors.budgetRange && <small className="text-danger">{formErrors.budgetRange}</small>}
-                                </div>
-                            </div>
-
-                            <textarea
-                                name="projectRequirement"
-                                placeholder="Your Project Requirements"
-                                rows={3}
-                                value={formData.projectRequirement}
-                                onChange={handleChange}
-                                className="form-textarea mt-3"
-                            ></textarea>
-                            {formErrors.projectRequirement && <small className="text-danger">{formErrors.projectRequirement}</small>}
-
-                            <div className="mt-3 g-recaptcha-container">
-                                <div className="g-recaptcha">
-                                    <ReCAPTCHA
-                                        sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
-                                        onChange={handleCaptchaChange}
-                                    />
-                                </div>
-                                {formErrors.captcha && <small className="text-danger d-block mt-1">{formErrors.captcha}</small>}
-                            </div>
-
-                            <button type="submit" className="vl-btn1 submit-btn" disabled={isSubmitting}>
-                                {isSubmitting ? 'Sending...' : 'Submit & Get Free Proposal'} <i className="fa-solid fa-arrow-right"></i>
-                            </button>
-                        </form>
                     </div>
                 </div>
             </div>
 
             <style jsx>{`
+                .status-wrapper {
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
                 .contact-popup-overlay {
                     position: fixed;
                     top: 0;
@@ -277,10 +278,11 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
                     font-weight: 800;
                     margin-bottom: 15px;
                     line-height: 1.2;
+                    color: #ffffff !important;
                 }
                 .desc {
                     font-size: 15px;
-                    opacity: 0.9;
+                    color: #ffffff !important;
                     line-height: 1.5;
                 }
                 .contact-details {
@@ -305,12 +307,13 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
                 }
                 .text p {
                     margin: 0;
-                    opacity: 0.7;
+                    color: #ffffff !important;
                     font-size: 12px;
                 }
                 .text h5 {
                     margin: 0;
                     font-size: 15px;
+                    color: #ffffff !important;
                 }
                 .social-links {
                     display: flex;

src/components/common/SectionTitle.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+interface SectionTitleProps {
+    tagline: string;
+    title: string;
+    centered?: boolean;
+    light?: boolean;
+    showShape?: boolean;
+    className?: string;
+}
+
+const SectionTitle: React.FC<SectionTitleProps> = ({
+    tagline,
+    title,
+    centered = false,
+    light = false,
+    showShape = true,
+    className = "",
+}) => {
+    return (
+        <div className={`sec-title-wrapper p-relative ${centered ? "text-center" : ""} ${className}`}>
+            <div className={`sec-title ${light ? "sec-title--light" : ""}`}>
+                <div className="sec-title__shape"></div>
+                <h6 className="sec-title__tagline">{tagline}</h6>
+                <h3 className={`sec-title__title ${light ? "text-white" : ""}`}
+                    dangerouslySetInnerHTML={{ __html: title }}
+                />
+            </div>
+            {showShape && (
+                <img
+                    src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png"
+                    alt=""
+                    className="sec-title__text-shape"
+                />
+            )}
+        </div>
+    );
+};
+
+export default SectionTitle;

src/components/contact/ContactSection.tsx

@@ -7,11 +7,13 @@ const ContactSection = () => {
                 <div className="row">
                     <div className="col-lg-5 col-md-12">
                         <div className="contact-info-wrapper">
-                            <div className="section-title-wrapper mb-40">
+                            <div className="sec-title-wrapper mb-40">
-                                <span className="section-subtitle">
+                                <div className="sec-title">
-                                    <span className="dash"></span> Contact With Us
+                                    <div className="sec-title__shape"></div>
-                                </span>
+                                    <h6 className="sec-title__tagline">CONTACT WITH US</h6>
-                                <h1 className="section-title">Feel Free to Get in Touch</h1>
+                                    <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" />
                             </div>
                             <div className="contact-info-list">
                                 <div className="contact-info-item d-flex align-items-center mb-30">

src/components/contact/ContactStatus.tsx

@@ -0,0 +1,212 @@
+import React from 'react';
+
+interface ContactStatusProps {
+    type: 'success' | 'error';
+    message?: string;
+    onClose: () => void;
+}
+
+const ContactStatus: React.FC<ContactStatusProps> = ({ type, message, onClose }) => {
+    const isSuccess = type === 'success';
+
+    return (
+        <div className={`status-container ${type}`}>
+            <div className="status-card">
+                <div className="bubbles">
+                    {[...Array(12)].map((_, i) => (
+                        <span key={i} className={`bubble bubble-${i + 1}`}></span>
+                    ))}
+                </div>
+
+                <div className="icon-wrapper">
+                    <div className="icon-circle">
+                        {isSuccess ? (
+                            <i className="fa-solid fa-check"></i>
+                        ) : (
+                            <i className="fa-solid fa-xmark"></i>
+                        )}
+                    </div>
+                </div>
+
+                <h3 className="status-title">
+                    {isSuccess ? 'Success' : 'Oooops'}
+                </h3>
+
+                <p className="status-message">
+                    {message || (isSuccess ? 'Your message has been sent successfully.' : 'Something went wrong. Please try again.')}
+                </p>
+
+                <button className="status-btn" onClick={onClose}>
+                    {isSuccess ? 'Continue' : 'Try again'}
+                </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>
+    );
+};
+
+export default ContactStatus;

src/components/home/CallAreaThree.tsx

@@ -3,25 +3,27 @@ import Link from 'next/link';
 
 const CallAreaThree: React.FC = () => {
     return (
-        <section className="call-area-three">
+        <section className="call-area-three parallax-section section-space-top">
             <div
-                className="call-area-three__bg"
+                className="call-area-three__bg parallax-bg"
                 style={{ backgroundImage: 'url(https://bracketweb.com/pelocishtml/assets/images/backgrounds/counter-area-two-bg.png)' }}
             ></div>
             <div className="container">
                 <div className="call-area-three__content">
-                    <h2 className="call-area-three__title">
+                    <h2 className="call-area-three__title wow fadeInUp" data-wow-delay="0.1s">
                         We Are Always Ready For Every Challenge <br /> Please Trust Us
                     </h2>
-                    <p className="call-area-three__text">
+                    <p className="call-area-three__text wow fadeInUp" data-wow-delay="0.2s">
                         Business tailored design, management &amp; support services Business agency, sed <br />
                         tempor &nbsp;majority have in some we form, by injected solution.
                     </p>
-                    <Link href="/contact" className="pelocis-btn">
+                    <div className="call-area-three__btn-wrapper wow fadeInUp" data-wow-delay="0.3s">
-                        <span>
+                        <Link href="/contact" className="pelocis-btn pelocis-btn--premium">
-                            Get A Free Quote <i className="icon-right-arrow-white"></i>
+                            <span>
-                        </span>
+                                Get A Free Quote <i className="icon-right-arrow-white"></i>
-                    </Link>
+                            </span>
+                        </Link>
+                    </div>
                 </div>
             </div>
         </section>

src/components/home/CounterAreaThree.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from 'react';
+
+interface CounterProps {
+    end: number;
+    duration?: number;
+}
+
+const Counter: React.FC<CounterProps> = ({ end, duration = 2000 }) => {
+    const [count, setCount] = useState(0);
+    const countRef = useRef<HTMLSpanElement>(null);
+    const [hasStarted, setHasStarted] = useState(false);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting && !hasStarted) {
+                    setHasStarted(true);
+                }
+            },
+            { threshold: 0.1 }
+        );
+
+        if (countRef.current) {
+            observer.observe(countRef.current);
+        }
+
+        return () => observer.disconnect();
+    }, [hasStarted]);
+
+    useEffect(() => {
+        if (!hasStarted) return;
+
+        let startTimestamp: number | null = null;
+        const step = (timestamp: number) => {
+            if (!startTimestamp) startTimestamp = timestamp;
+            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+            setCount(Math.floor(progress * end));
+            if (progress < 1) {
+                window.requestAnimationFrame(step);
+            }
+        };
+        window.requestAnimationFrame(step);
+    }, [hasStarted, end, duration]);
+
+    return <span ref={countRef}>{count}</span>;
+};
+
+const counterItems = [
+    {
+        icon: "/assets/imgs/icon/icon-1.png",
+        count: 950,
+        suffix: "k+",
+        text: "Projects Succefull"
+    },
+    {
+        icon: "/assets/imgs/icon/icon-2.png",
+        count: 256,
+        suffix: "k+",
+        text: "Happy Customers"
+    },
+    {
+        icon: "/assets/imgs/icon/icon-3.png",
+        count: 852,
+        suffix: "k+",
+        text: "Consultants Planing"
+    },
+    {
+        icon: "/assets/imgs/icon/icon-4.png",
+        count: 965,
+        suffix: "+",
+        text: "Awards Winners"
+    }
+];
+
+const CounterAreaThree: React.FC = () => {
+    return (
+        <section className="counter-area-three">
+            <div className="container">
+                <ul className="counter-area-three__list">
+                    {counterItems.map((item, index) => (
+                        <li key={index} className="counter-area-three__item count-box">
+                            <div className="counter-area-three__icon">
+                                <img src={item.icon} alt="icon" />
+                            </div>
+                            <div className="counter-area-three__content">
+                                <h3 className="counter-area-three__count">
+                                    <Counter end={item.count} />
+                                    {item.suffix}
+                                </h3>
+                                <p className="counter-area-three__text">{item.text}</p>
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </section>
+    );
+};
+
+export default CounterAreaThree;

src/components/home/CounterAreaTwo.tsx

@@ -49,25 +49,25 @@ const Counter: React.FC<CounterProps> = ({ end, duration = 2000 }) => {
 
 const counterItems = [
     {
-        icon: "icon-succefull",
+        icon: "/assets/imgs/icon/icon-1.png",
         count: 950,
         suffix: "k+",
         text: "Projects Succefull"
     },
     {
-        icon: "icon-customers",
+        icon: "/assets/imgs/icon/icon-2.png",
         count: 256,
         suffix: "k+",
         text: "Happy Customers"
     },
     {
-        icon: "icon-planing",
+        icon: "/assets/imgs/icon/icon-3.png",
         count: 852,
         suffix: "k+",
         text: "Consultants Planing"
     },
     {
-        icon: "icon-awards",
+        icon: "/assets/imgs/icon/icon-4.png",
         count: 965,
         suffix: "+",
         text: "Awards Winners"
@@ -82,7 +82,7 @@ const CounterAreaTwo: React.FC = () => {
                     {counterItems.map((item, index) => (
                         <li key={index} className="counter-area-two__item count-box">
                             <div className="counter-area-two__icon">
-                                <span className={item.icon}></span>
+                                <img src={item.icon} alt="icon" />
                             </div>
                             <div className="counter-area-two__content">
                                 <h3 className="counter-area-two__count">

src/components/home/HomeContactOne.tsx

@@ -67,9 +67,7 @@ const HomeContactOne = () => {
                     </div>
                     <div className="col-xl-6">
                         <form
-                            className="appointment__form contact-form-validated form-one wow fadeInUp animated"
+                            className="appointment__form contact-form-validated form-one"
-                            data-wow-duration="1500ms"
-                            data-wow-delay="100ms"
                             action="#"
                             noValidate
                         >
@@ -121,8 +119,10 @@ const HomeContactOne = () => {
                                             }}
                                         >
                                             <option value="Select program">Select a Program</option>
-                                            <option value="Select program 01">Select Program 01</option>
+                                            <option value="Web Development">Web Development</option>
-                                            <option value="Select program 02">Select Program 02</option>
+                                            <option value="Mobile App Development">Mobile App Development</option>
+                                            <option value="UI/UX Design">UI/UX Design</option>
+                                            <option value="Digital Marketing">Digital Marketing</option>
                                         </select>
                                     </div>
                                 </div>

src/components/home/MedicalServices.tsx

@@ -7,42 +7,42 @@ const services = [
         id: 0,
         title: "Excellent infection prevention",
         text: "Lorem ipsum dolor sit amet, conse ctetur adipiscing eliteiusmod tempor incididunt",
-        icon: "/assets/imgs/icon/icon-7.png",
+        icon: "/assets/imgs/icon/icon-6.png",
         link: "service-details.html",
     },
     {
         id: 1,
         title: "Health patients comprehensive",
         text: "From its medieval origins to the digital era , learn everything there is to know",
-        icon: "/assets/imgs/icon/icon-7.png",
+        icon: "/assets/imgs/icon/icon-2.png",
         link: "service-details.html",
     },
     {
         id: 2,
         title: "Pediatric Hematology Oncology",
         text: "Creation timelines for the standard lorem ipsum passage vary, with some citing the",
-        icon: "/assets/imgs/icon/icon-7.png",
+        icon: "/assets/imgs/icon/icon-3.png",
         link: "service-details.html",
     },
     {
         id: 3,
         title: "Care Pediatric & Medicine",
         text: "Letraset's dry-transfer sheets, and later entered the digital world via Aldus",
-        icon: "/assets/imgs/icon/icon-7.png",
+        icon: "/assets/imgs/icon/icon-4.png",
         link: "service-details.html",
     },
     {
         id: 4,
         title: "Labor & Delivery: The Birthplace",
         text: "Some claim lorem ipsum threatens to promote design over content, while others defend",
-        icon: "/assets/imgs/icon/icon-7.png",
+        icon: "/assets/imgs/icon/icon-5.png",
         link: "service-details.html",
     },
     {
         id: 5,
         title: "Urogynecology & Pelvic Health",
         text: "Generally, lorem ipsum is best suited to keeping templates from looking bare or",
-        icon: "/assets/imgs/icon/icon-7.png",
+        icon: "/assets/imgs/icon/icon-6.png",
         link: "service-details.html",
     },
 ];
@@ -50,13 +50,6 @@ const services = [
 const MedicalServices = () => {
     const [activeTab, setActiveTab] = useState(0);
 
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setActiveTab((prev) => (prev + 1) % services.length);
-        }, 5000);
-
-        return () => clearInterval(interval);
-    }, []);
 
     const handleTabClick = (e: React.MouseEvent, id: number) => {
         e.preventDefault();
@@ -65,24 +58,54 @@ const MedicalServices = () => {
 
     return (
         <section
-            className="medical-services-section space"
+            className="medical-services-circle p-relative overflow-hidden"
-            style={{ backgroundImage: `url('/assets/img/bg/sr-bg-5-1.jpg')` }}
+            style={{
-            data-bg-src="/assets/img/bg/sr-bg-5-1.jpg"
+                backgroundImage: `url('https://bracketweb.com/pelocishtml/assets/images/backgrounds/contact-bg-1.jpg')`,
+                backgroundAttachment: 'fixed',
+                backgroundPosition: 'center',
+                backgroundRepeat: 'no-repeat',
+                backgroundSize: 'cover'
+            }}
         >
-            <div className="container">
+            {/* Background Overlay */}
+            <div className="section-overlay" style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                background: 'rgba(7, 23, 43, 0.65)',
+                zIndex: 1
+            }}></div>
+
+            {/* Decorative Elements - 4 Left, 4 Right */}
+            <div className="decorative-element elem-left-1"><img src="/assets/img/elements/elements24.png" alt="shape" /></div>
+            <div className="decorative-element elem-left-2"><img src="/assets/img/elements/elements23.png" alt="shape" /></div>
+            {/* <div className="decorative-element elem-left-3"><img src="/assets/img/elements/elements25.png" alt="shape" style={{ opacity: 0.4 }} /></div> */}
+            <div className="decorative-element elem-left-4"><img src="/assets/img/elements/elements47.png" alt="shape" style={{ opacity: 0.3 }} /></div>
+
+            <div className="decorative-element elem-right-1"><img src="/assets/img/elements/elements25.png" alt="shape" /></div>
+            <div className="decorative-element elem-right-2"><img src="/assets/img/elements/elements24.png" alt="shape" /></div>
+            {/* <div className="decorative-element elem-right-3"><img src="/assets/img/elements/elements23.png" alt="shape" style={{ opacity: 0.4 }} /></div> */}
+            <div className="decorative-element elem-right-4"><img src="/assets/img/elements/elements47.png" alt="shape" style={{ opacity: 0.3 }} /></div>
+
+            <div className="container p-relative" style={{ zIndex: 5 }}>
                 <div
-                    className="section-title text-center wow fadeInUp animated"
+                    className="sec-title-wrapper text-center wow fadeInUp animated mb-50"
                     data-wow-delay="0.3s"
-                    style={{ visibility: "visible", animationDelay: "0.3s", animationName: "g" }}
                 >
-                    <h2 className="sec-title h1">Medical <span className="inner-text">Services</span></h2>
+                    <div className="sec-title">
-                    <p className="sec-text">Search or browse by hospital, treatment or consultant to see what can do for you</p>
+                        <div className="sec-title__shape"></div>
-                   
+                        <h6 className="sec-title__tagline text-white">MEDICAL SERVICES</h6>
+                        <h3 className="sec-title__title text-white">Medical <span className="inner-text">Services</span></h3>
+                    </div>
+
+                    <p className="sec-text mt-15 text-white">It is a long established fact that a reader will be distracted the readable content of <br /> a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
                 </div>
                 <div
                     className="service-circle wow fadeInUp animated"
                     data-wow-delay="0.4s"
-                    style={{ visibility: "visible", animationDelay: "0.4s", animationName: "g" }}
+                    style={{ visibility: "visible", animationDelay: "0.4s" }}
                 >
                     <div className="service-circle__lines">
                         <div className="line"></div>
@@ -95,14 +118,24 @@ const MedicalServices = () => {
                             {services.map((service, index) => (
                                 <li
                                     key={service.id}
+                                    style={{ "--rotate-item": `${index * 60}deg` } as React.CSSProperties}
                                     className={activeTab === index ? "active" : ""}
                                 >
+                                    {activeTab === index && <div className="active-tab-pointer"></div>}
                                     <a
                                         href="#"
                                         onClick={(e) => handleTabClick(e, index)}
                                         data-tab-link={index}
                                     >
-                                        <img src={service.icon} alt="icon" />
+                                        <img
+                                            src={service.icon}
+                                            alt="icon"
+                                            style={{
+                                                "--rotate-icon": `${-(index * 60)}deg`,
+                                                "--icon-top": "30%",
+                                                "--icon-left": "50%"
+                                            } as React.CSSProperties}
+                                        />
                                     </a>
                                 </li>
                             ))}
@@ -116,9 +149,9 @@ const MedicalServices = () => {
                                 data-tab-no={index}
                             >
                                 <h3 className="service-circle__title h4">
-                                    <a href={service.link}>{service.title}</a>
+                                    <a href={service.link} className="text-white">{service.title}</a>
                                 </h3>
-                                <p className="service-circle__text">{service.text}</p>
+                                <p className="service-circle__text text-white">{service.text}</p>
                             </div>
                         ))}
                     </div>

src/components/home/MedicalServicesCircle.tsx

@@ -1,131 +0,0 @@
-"use client";
-
-import React, { useState, useEffect } from 'react';
-import Link from 'next/link';
-
-interface ServiceItem {
-    id: number;
-    icon: string;
-    title: string;
-    text: string;
-}
-
-const services: ServiceItem[] = [
-    {
-        id: 0,
-        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-1.jpg", // Using logical equivalents
-        title: "Excellent infection prevention",
-        text: "Lorem ipsum dolor sit amet, conse ctetur adipiscing eliteiusmod tempor incididunt"
-    },
-    {
-        id: 1,
-        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-2.jpg",
-        title: "Health patients comprehensive",
-        text: "From its medieval origins to the digital era , learn everything there is to know"
-    },
-    {
-        id: 2,
-        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-3.jpg",
-        title: "Pediatric Hematology Oncology",
-        text: "Creation timelines for the standard lorem ipsum passage vary, with some citing the"
-    },
-    {
-        id: 3,
-        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-4.jpg",
-        title: "Care Pediatric & Medicine",
-        text: "Letraset's dry-transfer sheets, and later entered the digital world via Aldus"
-    },
-    {
-        id: 4,
-        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-5.jpg",
-        title: "Labor & Delivery: The Birthplace",
-        text: "Some claim lorem ipsum threatens to promote design over content, while others defend"
-    },
-    {
-        id: 5,
-        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-6.jpg",
-        title: "Urogynecology & Pelvic Health",
-        text: "Generally, lorem ipsum is best suited to keeping templates from looking bare or"
-    }
-];
-
-const MedicalServicesCircle: React.FC = () => {
-    const [activeTab, setActiveTab] = useState(0);
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setActiveTab((prev) => (prev + 1) % services.length);
-        }, 5000);
-        return () => clearInterval(interval);
-    }, []);
-
-    const handleTabClick = (e: React.MouseEvent, id: number) => {
-        e.preventDefault();
-        setActiveTab(id);
-    };
-
-    return (
-        <section className="medical-services-circle space" style={{ backgroundImage: 'url(https://bracketweb.com/pelocishtml/assets/images/backgrounds/video-one-bg.jpg)' }}>
-            <div className="container">
-                <div className="section-title text-center">
-                    <h2 className="sec-title h1">Medical <span className="inner-text">Services</span></h2>
-                    <p className="sec-text">Search or browse by hospital, treatment or consultant to see what can do for you</p>
-                    <div className="sec-icon2">
-                        <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/sec-title-shape-1.png" alt="icon" />
-                    </div>
-                </div>
-
-                <div className="service-circle">
-                    <div className="service-circle__lines">
-                        <div className="line"></div>
-                        <div className="line"></div>
-                        <div className="line"></div>
-                        <div className="line"></div>
-                    </div>
-
-                    <nav className="service-circle__menu">
-                        <ul>
-                            {services.map((service, index) => (
-                                <li
-                                    key={service.id}
-                                    className={activeTab === service.id ? 'active' : ''}
-                                    style={{ '--rotate-item': `${index * 60}deg` } as React.CSSProperties}
-                                >
-                                    <a href="#" onClick={(e) => handleTabClick(e, service.id)}>
-                                        <img
-                                            src={service.icon}
-                                            alt="icon"
-                                            style={{
-                                                '--rotate-icon': `-${index * 60}deg`,
-                                                '--icon-left': index === 2 || index === 3 ? '46%' : index === 4 ? '48%' : '50%',
-                                                '--icon-top': index === 2 ? '34%' : '35%'
-                                            } as React.CSSProperties}
-                                        />
-                                    </a>
-                                </li>
-                            ))}
-                        </ul>
-                    </nav>
-
-                    <div className="service-circle__center">
-                        {services.map((service) => (
-                            <div
-                                key={service.id}
-                                className={`service-circle__item ${activeTab === service.id ? 'active' : ''}`}
-                            >
-                                <div className="service-circle__item-inner">
-                                    <h3 className="service-circle__title h4">
-                                        <Link href="/service-details">{service.title}</Link>
-                                    </h3>
-                                    <p className="service-circle__text">{service.text}</p>
-                                </div>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default MedicalServicesCircle;

src/components/home/ProjectsSection.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+
+const projectsData = [
+    {
+        id: 1,
+        title: "Cognitive Psychology",
+        description: "Supporting individuals in overcoming and for their quality of life whether solution.",
+        image: "/assets/imgs/project/project-1.jpg",
+        category: "counseling"
+    },
+    {
+        id: 2,
+        title: "Relationship Counseling",
+        description: "Helping couples build stronger connections and resolve conflicts effectively.",
+        image: "/assets/imgs/project/project-2.jpg",
+        category: "relationship"
+    },
+    {
+        id: 3,
+        title: "Team Support",
+        description: "Enhancing workplace dynamics and providing support for professional teams.",
+        image: "/assets/imgs/project/project-3.jpg",
+        category: "team-support"
+    },
+    {
+        id: 4,
+        title: "Family Therapy",
+        description: "Guidance for families navigating transitions and challenging situations.",
+        image: "/assets/imgs/project/project-4.jpg",
+        category: "counseling"
+    },
+    {
+        id: 5,
+        title: "Executive Coaching",
+        description: "Professional development and mental wellness for corporate leaders.",
+        image: "/assets/imgs/project/project-5.jpg",
+        category: "team-support"
+    },
+    {
+        id: 6,
+        title: "Child Psychology",
+        description: "Specialized support for children's emotional and behavioral development.",
+        image: "/assets/imgs/project/project-6.jpg",
+        category: "counseling"
+    }
+];
+
+const categories = [
+    { label: "All", filter: "all" },
+    { label: "Counseling", filter: "counseling" },
+    { label: "Relationship", filter: "relationship" },
+    { label: "Team Support", filter: "team-support" }
+];
+
+const ProjectsSection = () => {
+    const [activeFilter, setActiveFilter] = useState("all");
+
+    const filteredProjects = projectsData.filter(project =>
+        activeFilter === "all" || project.category.includes(activeFilter)
+    );
+
+    return (
+        <section className="projects-one">
+            <div className="container">
+                <div className="text-center projects-one__title">
+                    <div className="sec-title">
+                        <div className="sec-title__shape"></div>
+                        <h6 className="sec-title__tagline">Our Recent Work</h6>
+                        <h3 className="sec-title__title">Our Case Studies Best Quality <br /> Psychology & Counseling</h3>
+                    </div>
+                </div>
+
+                <ul className="list-unstyled post-filter projects-one__filter__list">
+                    {categories.map((cat, idx) => (
+                        <li
+                            key={idx}
+                            className={activeFilter === cat.filter ? "active" : ""}
+                            onClick={() => setActiveFilter(cat.filter)}
+                        >
+                            {cat.label}
+                        </li>
+                    ))}
+                </ul>
+
+                <div className="projects-grid">
+                    {filteredProjects.map((project) => (
+                        <div key={project.id} className="project-item">
+                            <div className="projects-one__card">
+                                <img src={project.image} alt={project.title} />
+                                <div className="projects-one__card__hover d-flex">
+                                    <div className="projects-one__card__hover-mask"></div>
+                                    <div className="projects-one__card__hover-content-inner">
+                                        <div className="projects-one__card__hover-text">
+                                            <h3><Link href="/projects-details">{project.title}</Link></h3>
+                                            <p>{project.description}</p>
+                                        </div>
+                                        <div className="projects-one__card__hover-item"></div>
+                                        <Link href="/projects-details" className="projects-one__card__hover-link">
+                                            <i className="fa fa-arrow-right"></i>
+                                        </Link>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default ProjectsSection;

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: '-367.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: '-367.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/AboutSection.tsx

@@ -39,9 +39,13 @@ const AboutSection = () => {
                     </div>
                     <div className="col-xxl-6 col-xl-6 col-lg-6">
                         <div className="about-us-content-area p-relative z-1 pl-30">
-                            <div className="title-box mb-35 wow fadeInLeft" data-wow-delay=".5s">
+                            <div className="sec-title-wrapper wow fadeInLeft mb-35" data-wow-delay=".5s">
-                                <span className="section-sub-title">About Us</span>
+                                <div className="sec-title">
-                                <h3 className="section-title mt-10">Selecting the Finest IT Service Provider</h3>
+                                    <div className="sec-title__shape"></div>
+                                    <h6 className="sec-title__tagline">ABOUT US</h6>
+                                    <h3 className="sec-title__title">Selecting the Finest IT<br />Service Provider</h3>
+                                </div>
+                                <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
                             </div>
                             <p className="mb-35 wow fadeInLeft" data-wow-delay=".5s">It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
                             <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".8s">

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

@@ -5,9 +5,13 @@ const BlogSection = ({ hideHeader = false }: { hideHeader?: boolean }) => (
     <section className="blog-section-one section-space">
         <div className="small-container">
             {!hideHeader && (
-                <div className="title-box mb-40 wow fadeInLeft" data-wow-delay=".5s">
+                <div className="sec-title-wrapper wow fadeInLeft mb-50" data-wow-delay=".5s">
-                    <span className="section-sub-title">LATEST blog</span>
+                    <div className="sec-title">
-                    <h3 className="section-title mt-10">Latest Blog Insights</h3>
+                        <div className="sec-title__shape"></div>
+                        <h6 className="sec-title__tagline">LATEST BLOG</h6>
+                        <h3 className="sec-title__title">Latest Blog Insights</h3>
+                    </div>
+                    <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
                 </div>
             )}
             <div className="row g-4">

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

@@ -1,20 +1,29 @@
-import React, { useEffect } from "react";
+import React from "react";
+import SectionTitle from "@/components/common/SectionTitle";
 
 const BrandSection = () => {
     return (
-        <div className="brand-section section-space-top section-space-bottom">
+        <section className="brand-section section-space-top section-space-bottom">
-            <div className="small-container">
+            <div className="container">
-                <div className="swiper brand-active">
+                <SectionTitle
-                    <div className="swiper-wrapper">
+                    tagline="OUR PARTNERS"
-                        {[1, 2, 3, 4, 1].map((num, i) => (
+                    title="Trusted by <span class='inner-text'>Leaders</span> Worldwide"
-                            <div key={i} className="swiper-slide">
+                    centered={true}
-                                <span><a href="#"><img src={`/assets/imgs/resources/brand-${num}.png`} alt="" /></a></span>
+                    className="mb-50"
-                            </div>
+                />
-                        ))}
+                <div className="small-container">
+                    <div className="swiper brand-active">
+                        <div className="swiper-wrapper">
+                            {[1, 2, 3, 4, 1].map((num, i) => (
+                                <div key={i} className="swiper-slide">
+                                    <span><a href="#"><img src={`/assets/imgs/resources/brand-${num}.png`} alt="" /></a></span>
+                                </div>
+                            ))}
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </section>
     );
 };
 

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

@@ -7,9 +7,13 @@ const ChooseSection = () => (
         <div className="small-container">
             <div className="row g-4">
                 <div className="col-xxl-6 col-xl-6 col-lg-6 p-relative section-space-medium-bottom">
-                    <div className="title-box mb-50 wow fadeInLeft" data-wow-delay=".5s">
+                    <div className="sec-title-wrapper wow fadeInLeft mb-50" data-wow-delay=".5s">
-                        <span className="section-sub-title">why choose us</span>
+                        <div className="sec-title">
-                        <h3 className="section-title mt-10">What's Make Us Different</h3>
+                            <div className="sec-title__shape"></div>
+                            <h6 className="sec-title__tagline">WHY CHOOSE US</h6>
+                            <h3 className="sec-title__title">What&apos;s Make Us Different</h3>
+                        </div>
+                        <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
                     </div>
                     {[
                         { icon: "fa-solid fa-building", title: "Commercial Service", delay: ".5s" },

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

@@ -2,52 +2,11 @@
 
 import React from "react";
 import Link from "next/link";
+import { psychologyServices } from "@/utils/data";
+import { ServiceType } from "@/types";
 
 const ServiceThreeSlider = () => {
-    const services = [
+    const services: ServiceType[] = psychologyServices;
-        {
-            title: "Network Infrastructure",
-            text: "Solution the connection, we create platforms business Solution",
-            icon: "fa-solid fa-network-wired",
-            image: "/assets/img/about/about-img14.png",
-            link: "/services"
-        },
-        {
-            title: "Data Management",
-            text: "Solution the connection, we create platforms business Solution",
-            icon: "fa-solid fa-database",
-            image: "/assets/img/about/about-img15.png",
-            link: "/services"
-        },
-        {
-            title: "Technology Solution",
-            text: "Solution the connection, we create platforms business Solution",
-            icon: "fa-solid fa-microchip",
-            image: "/assets/img/about/about-img13.png",
-            link: "/services"
-        },
-        {
-            title: "Cloud Computing",
-            text: "Solution the connection, we create platforms business Solution",
-            icon: "fa-solid fa-cloud",
-            image: "/assets/img/about/about-img14.png",
-            link: "/services"
-        },
-        {
-            title: "Cyber Security",
-            text: "Solution the connection, we create platforms business Solution",
-            icon: "fa-solid fa-shield-halved",
-            image: "/assets/img/about/about-img15.png",
-            link: "/services"
-        },
-        {
-            title: "IT Consultancy",
-            text: "Solution the connection, we create platforms business Solution",
-            icon: "fa-solid fa-user-tie",
-            image: "/assets/img/about/about-img13.png",
-            link: "/services"
-        }
-    ];
 
     return (
         <section className="service-slider-section service-three section-space dark-bg p-relative" style={{ background: "#07172b" }}>
@@ -58,9 +17,13 @@ const ServiceThreeSlider = () => {
             <div className="small-container">
                 <div className="row align-items-end">
                     <div className="col-xxl-6 col-xl-6">
-                        <div className="title-box mb-50 wow fadeInLeft" data-wow-delay=".5s">
+                        <div className="sec-title-wrapper mb-50 wow fadeInLeft" data-wow-delay=".5s">
-                            <span className="section-sub-title no-border text-white">OUR BEST SERVICE</span>
+                            <div className="sec-title sec-title--light">
-                            <h3 className="section-title mt-10 text-white">We Are Service Your Business</h3>
+                                <div className="sec-title__shape"></div>
+                                <h6 className="sec-title__tagline">OUR BEST SERVICE</h6>
+                                <h3 className="sec-title__title text-white">We Are Service Your Business</h3>
+                            </div>
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
                         </div>
                     </div>
                     <div className="col-xxl-6 col-xl-6">
@@ -83,9 +46,9 @@ const ServiceThreeSlider = () => {
                                             <span className={service.icon}></span>
                                         </div>
                                         <h3 className="service-three__item__title">
-                                            <Link href={service.link}>{service.title}</Link>
+                                            <Link href={`/services/${service.slug}`}>{service.title}</Link>
                                         </h3>
-                                        <p className="service-three__item__text text-white">{service.text}</p>
+                                        <p className="service-three__item__text text-white">{service.description}</p>
                                     </div>
                                     <div className="service-three__item__image">
                                         <img src={service.image} alt={service.title} className="service-img-fixed" />
@@ -96,89 +59,6 @@ const ServiceThreeSlider = () => {
                     </div>
                 </div>
             </div>
-            <style jsx>{`
-                .dark-bg {
-                    background: #07172b !important;
-                }
-                .text-white {
-                    color: #ffffff !important;
-                }
-                .section-sub-title.text-white::before {
-                    background-color: #ffffff;
-                }
-                .service-three__item {
-                    margin-top: 40px;
-                    // background: #fff;
-                    border-radius: 20px;
-                    overflow: hidden;
-                    transition: all 500ms ease;
-                }
-                .service-three__item__content {
-                    padding: 0 28px 30px;
-                }
-                .service-three__item__icon {
-                    position: relative;
-                    top: -40px;
-                    width: 84px;
-                    height: 84px;
-                    background-color: #f1f5f9;
-                    border-radius: 50%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    margin: 0 auto -20px;
-                    color: #3779b9;
-                    font-size: 36px;
-                    transition: all 500ms ease;
-                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
-                }
-                .service-three__item:hover .service-three__item__icon {
-                    background-color: #3779b9;
-                    color: #fff;
-                }
-                .service-three__item__title {
-                    font-size: 22px;
-                    font-weight: 700;
-                    margin-bottom: 12px;
-                }
-                .service-three__item__title a {
-                    color: #1a1f2b !important;
-                }
-                .service-three__item__text {
-                    font-size: 15px;
-                    color: #64748b;
-                    line-height: 1.6;
-                    margin-bottom: 0;
-                }
-                .service-three__item__image {
-                    position: relative;
-                    overflow: hidden;
-                    line-height: 0;
-                }
-                .service-img-fixed {
-                    width: 100%;
-                    height: 250px !important;
-                    object-fit: cover;
-                    clip-path: polygon(0% 0%, 100% 0, 100% 69%, 50% 100%, 0 69%);
-                    transition: all 500ms ease;
-                }
-                .service-three__item:hover .service-img-fixed {
-                    transform: scale(1.05);
-                }
-                .slider-nav-btn {
-                    border: 1px solid rgba(255, 255, 255, 0.2);
-                    background: transparent;
-                    color: #fff;
-                    width: 50px;
-                    height: 50px;
-                    border-radius: 50%;
-                    transition: all 0.3s ease;
-                }
-                .slider-nav-btn:hover {
-                    background: #3779b9;
-                    border-color: #3779b9;
-                }
-            `}</style>
         </section>
     );
 };

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

@@ -18,9 +18,13 @@ const TestimonialsSection = () => (
                 <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="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-36.png)" }}></div>
-                        <div className="title-box wow fadeInLeft mb-60" data-wow-delay=".5s">
+                        <div className="sec-title-wrapper wow fadeInLeft mb-60" data-wow-delay=".5s">
-                            <span className="section-sub-title">Testimonials</span>
+                            <div className="sec-title">
-                            <h3 className="section-title mt-10">Our Client Feedback</h3>
+                                <div className="sec-title__shape"></div>
+                                <h6 className="sec-title__tagline">TESTIMONIALS</h6>
+                                <h3 className="sec-title__title">Our Client Feedback</h3>
+                            </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">

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

@@ -28,9 +28,13 @@ const About2Section = () => (
                 </div>
                 <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-12">
                     <div className="about-2-content-area pl-50">
-                        <div className="title-box mb-35 wow fadeInRight" data-wow-delay=".5s">
+                        <div className="sec-title-wrapper wow fadeInRight mb-35" data-wow-delay=".5s">
-                            <span className="section-sub-title">About Us</span>
+                            <div className="sec-title">
-                            <h3 className="section-title mt-10">We Strive To Offer Intelligent Business Solutions</h3>
+                                <div className="sec-title__shape"></div>
+                                <h6 className="sec-title__tagline">ABOUT US</h6>
+                                <h3 className="sec-title__title">We Strive To Offer Intelligent<br />Business Solutions</h3>
+                            </div>
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
                         </div>
                         <p className="mb-35">It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
                         <div className="row mb-45">

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

@@ -4,9 +4,13 @@ const WorkProcessSection = () => (
     <section className="work-process-section section-space p-relative" style={{ backgroundImage: "url(/assets/imgs/bg/process-bg.png)" }}>
         <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/bg/line.png)" }}></div>
         <div className="small-container">
-            <div className="title-box text-center mb-60 wow fadeInLeft" data-wow-delay=".5s">
+            <div className="sec-title-wrapper text-center mb-60 wow fadeInLeft" data-wow-delay=".5s">
-                <span className="section-sub-title">Working Process</span>
+                <div className="sec-title">
-                <h3 className="section-title mt-10">Our Development Process</h3>
+                    <div className="sec-title__shape"></div>
+                    <h6 className="sec-title__tagline">WORKING PROCESS</h6>
+                    <h3 className="sec-title__title">Our Development Process</h3>
+                </div>
+                <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
             </div>
             <div className="row g-4">
                 {[

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

@@ -1,4 +1,5 @@
 import React from "react";
+import SectionTitle from "@/components/common/SectionTitle";
 
 const ChooseSection = () => (
     <section className="choose-3-section p-relative section-space" style={{ backgroundImage: "url(/assets/imgs/bg/choose-bg-2.png)" }}>
@@ -26,10 +27,11 @@ const ChooseSection = () => (
                 </div>
                 <div className="col-xxl-6 col-xl-6 col-lg-6">
                     <div className="choose-3-content-area pl-60 pt-20 p-relative">
-                        <div className="title-box mb-25 wow fadeInLeft" data-wow-delay=".5s">
+                        <SectionTitle
-                            <span className="section-sub-title no-border">WHY Choose US</span>
+                            tagline="WHY CHOOSE US"
-                            <h3 className="section-title mt-10">Elevate Your Achievements Using Premier IT Solutions</h3>
+                            title="Elevate Your Achievements Using Premier IT Solutions"
-                        </div>
+                            className="mb-25 wow fadeInLeft"
+                        />
                         <p>It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
                         <div className="row g-4 pt-35">
                             {[

src/components/layout/Header1.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Link from "next/link";
 import NavMenu from "./NavMenu";

src/components/services/AboutService.tsx

@@ -32,15 +32,15 @@ const AboutService = () => {
 
                     <div className="col-lg-6">
                         <div className="content-area pl-60">
-                            <div className="section-title-wrapper mb-30">
+                            <div className="sec-title-wrapper mb-30">
-                                <span className="section-subtitle">
+                                <div className="sec-title">
-                                    <i className="fa-solid fa-play rotate-triangle"></i> OUR ABOUT US
+                                    <div className="sec-title__shape"></div>
-                                </span>
+                                    <h6 className="sec-title__tagline">OUR ABOUT US</h6>
-                                <h2 className="section-title">
+                                    <h3 className="sec-title__title">We Provide Professional Advice<br />About This Business.</h3>
-                                    We Provide Professional Advice About This Business.
+                                </div>
-                                </h2>
+                                <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 & support services Business business agency elit,
+                                    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>

src/components/services/ServiceDetails.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import React, { useEffect } from "react";
+import Link from "next/link";
+import { ServiceType } from "@/types";
+import { psychologyServices } from "@/utils/data";
+
+interface ServiceDetailsProps {
+    service: ServiceType;
+}
+
+const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
+    useEffect(() => {
+        const init = () => {
+            if (typeof window !== "undefined" && (window as any).initMetatron && (window as any).jQuery) {
+                (window as any).initMetatron();
+            } else {
+                setTimeout(init, 100);
+            }
+        };
+        init();
+    }, []);
+
+    return (
+        <section className="service-details section-space">
+            <div className="container">
+                <div className="row gutter-y-30">
+                       <div className="col-md-12 col-lg-4">
+                        <div className="service-sidebar">
+                            <div className="service-sidebar__single">
+                                <h3 className="service-sidebar__title">All Services</h3>
+                                <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}`}>
+                                                {item.title}
+                                                <i className="fa-solid fa-chevron-right"></i>
+                                            </Link>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </div>
+
+                            <div className="service-sidebar__single">
+                                <div className="service-sidebar__contact">
+                                    <div className="service-sidebar__contact-bg" style={{ backgroundImage: "url(/assets/imgs/resources/service-sidebar-contact-bg.jpg)" }}></div>
+                                    <div className="service-sidebar__contact-icon">
+                                        <i className="fa-solid fa-phone-volume"></i>
+                                    </div>
+                                    <h3 className="service-sidebar__contact-title">Free for This <br /> First Contact Now</h3>
+                                    <p className="service-sidebar__contact-phone">
+                                        <a href="tel:+11234751328">+11234 751 328</a>
+                                    </p>
+                                    <div className="service-sidebar__contact-btn">
+                                        <Link href="/contact" className="theme-btn">
+                                            CALL NOW
+                                        </Link>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-md-12 col-lg-8">
+                        <div className="service-details__content">
+                            <div className="service-details__thumbnail">
+                                <img src={service.image} alt={service.title} />
+                            </div>
+                            <h3 className="service-details__title">{service.title}</h3>
+                            <p className="service-details__text">{service.description}</p>
+
+                            {service.content && (
+                                <div
+                                    className="service-details__dynamic-content"
+                                    dangerouslySetInnerHTML={{ __html: service.content }}
+                                />
+                            )}
+                        </div>
+                    </div>
+
+                 
+                </div>
+            </div>
+
+        </section>
+    );
+};
+
+export default ServiceDetails;

src/types/index.ts

@@ -4,6 +4,8 @@ export interface ServiceType {
     image?: string;
     title: string;
     description: string;
+    slug?: string;
+    content?: string;
 }
 
 export interface CaseStudyType {

src/utils/data.ts

@@ -545,4 +545,205 @@ export const pricingPlans: PricingType[] = [
         ],
         link: '#'
     }
-];
+];
+
+export const psychologyServices = [
+    {
+        id: 1,
+        title: "Cognitive Psychology",
+        slug: "cognitive-psychology",
+        icon: "fa-solid fa-brain",
+        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        description: "Business tailored design, management & support services Business for free.",
+        content: `
+            <h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
+            <p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+            <div class="service-details__benefit">
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__img">
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__content">
+                            <h3 class="service-details__benefit__title">Our Benefits</h3>
+                            <p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
+                            <ul class="list-unstyled service-details__benefit__list">
+                                <li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
+                                <li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
+            <p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+        `
+    },
+    {
+        id: 2,
+        title: "Academic Psychology",
+        slug: "academic-psychology",
+        icon: "fa-solid fa-graduation-cap",
+        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        description: "Business tailored design, management & support services Business for free.",
+        content: `
+            <h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
+            <p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+            <div class="service-details__benefit">
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__img">
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__content">
+                            <h3 class="service-details__benefit__title">Our Benefits</h3>
+                            <p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
+                            <ul class="list-unstyled service-details__benefit__list">
+                                <li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
+                                <li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
+            <p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+        `
+    },
+    {
+        id: 3,
+        title: "Career Counseling",
+        slug: "career-counseling",
+        icon: "fa-solid fa-user-tie",
+        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        description: "Business tailored design, management & support services Business for free.",
+        content: `
+            <h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
+            <p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+            <div class="service-details__benefit">
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__img">
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__content">
+                            <h3 class="service-details__benefit__title">Our Benefits</h3>
+                            <p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
+                            <ul class="list-unstyled service-details__benefit__list">
+                                <li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
+                                <li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
+            <p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+        `
+    },
+    {
+        id: 4,
+        title: "Clinical Psychology",
+        slug: "clinical-psychology",
+        icon: "fa-solid fa-stethoscope",
+        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        description: "Business tailored design, management & support services Business for free.",
+        content: `
+            <h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
+            <p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+            <div class="service-details__benefit">
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__img">
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__content">
+                            <h3 class="service-details__benefit__title">Our Benefits</h3>
+                            <p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
+                            <ul class="list-unstyled service-details__benefit__list">
+                                <li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
+                                <li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
+            <p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+        `
+    },
+    {
+        id: 5,
+        title: "Psychiatric Treatment",
+        slug: "psychiatric-treatment",
+        icon: "fa-solid fa-hospital-user",
+        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        description: "Business tailored design, management & support services Business for free.",
+        content: `
+            <h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
+            <p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+            <div class="service-details__benefit">
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__img">
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__content">
+                            <h3 class="service-details__benefit__title">Our Benefits</h3>
+                            <p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
+                            <ul class="list-unstyled service-details__benefit__list">
+                                <li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
+                                <li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
+            <p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+        `
+    },
+    {
+        id: 6,
+        title: "Family Therapy",
+        slug: "family-therapy",
+        icon: "fa-solid fa-hospital-user",
+        image: "https://bracketweb.com/pelocishtml/assets/images/resources/service-d-2.jpg",
+        description: "Business tailored design, management & support services Business for free.",
+        content: `
+            <h3 class="service-details__content-title">Essential Tips For Managing Over Whelming Situations</h3>
+            <p class="service-details__text">Lorem ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+            <div class="service-details__benefit">
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__img">
+                            <img src="https://bracketweb.com/pelocishtml/assets/images/resources/service-details-2.png" alt="benefit">
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="service-details__benefit__content">
+                            <h3 class="service-details__benefit__title">Our Benefits</h3>
+                            <p class="service-details__benefit__text">There are many variations of passages of this business magical therapy.</p>
+                            <ul class="list-unstyled service-details__benefit__list">
+                                <li><i class="fa-solid fa-circle-check"></i> There are many variations of passages of this business magical therapy.</li>
+                                <li><i class="fa-solid fa-circle-check"></i> We available but simply free text available in the market sit majority.</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <p class="service-details__text">We ipsum dolor business agency elit, sed do eiusmod tempor majority have this best we are in some we form, by injected humour solution toil & pain can procure him.</p>
+            <p class="service-details__text">Therapy Benefits dolor business agency elit, sed do eiusmod tempor majority have this best we in some we form, by injected humour solution toil & pain can procure him some great pleasure solution being able to do solution.</p>
+        `
+    }
+];