Implemented Breadcrumbing

components/reuseables/PageBanner.js

 import React from "react";
 import Link from "next/link";
 import Image from "next/image";
+import { useRouter } from "next/router";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Pagination, Autoplay } from "swiper/modules";
 import { Container } from "react-bootstrap";
 
 const PageBanner = ({ banners = [] }) => {
+  const router = useRouter();
+
+  // Function to generate breadcrumbs for client servicing pages
+  const generateClientServicingBreadcrumbs = () => {
+    const pathname = router.asPath;
+    
+    // Only apply custom breadcrumbing for client-servicing pages
+    if (!pathname.includes('/client-servicing')) {
+      return null;
+    }
+
+    const pathSegments = pathname.split('/').filter(segment => segment);
+    const breadcrumbs = [];
+
+    // Create breadcrumb mapping for better display names
+    const segmentNameMap = {
+      'client-servicing': 'Client Servicing',
+      // Virtual Finance Office section
+      'virtual-finance-office': 'Virtual Finance Office',
+      'virtual-cfo': 'Virtual CFO Services',
+      'virtual-fc': 'Virtual FC Services',
+      'book-closures-audit': 'Book Closures and Audit Support',
+      'apc': 'Accounting Payroll & Compliance',
+      // Advisory Services section
+      'advisory-services': 'Advisory Services',
+      'transaction-advisory': 'Transaction Advisory',
+      'risk-advisory': 'Risk Advisory',
+      'business-advisory': 'Business Advisory',
+      // GCC as a Service
+      'gcc-as-a-service': 'GCC as a Service',
+      // Digital Transformation
+      'digital-transformation': 'Digital Transformation',
+      // Empowering Finance Consultants
+      'empowering-finance-consultants': 'Empowering Finance Consultants',
+      // Bespoke Services
+      'bespoke-services': 'Bespoke Services',
+      // Legacy mappings for existing pages
+      'cfo': 'CFO',
+      'ba': 'BA',
+      'ta': 'TA',
+      'ra': 'RA'
+    };
+
+    // Build breadcrumbs from path segments
+    let currentPath = '';
+    pathSegments.forEach((segment, index) => {
+      currentPath += `/${segment}`;
+      const displayName = segmentNameMap[segment] || segment.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+      
+      breadcrumbs.push({
+        name: displayName,
+        url: currentPath,
+        isLast: index === pathSegments.length - 1
+      });
+    });
+
+    return breadcrumbs;
+  };
+
+  const clientServicingBreadcrumbs = generateClientServicingBreadcrumbs();
   return (
     <Swiper
       spaceBetween={30}
@@ -48,10 +109,26 @@ const PageBanner = ({ banners = [] }) => {
               <div className="page-title-content">
                 <h2>{banner.pageTitle}</h2>
                 <ul>
-                  <li>
-                    <Link href={banner.homePageUrl}>{banner.homePageText}</Link>
-                  </li>
-                  <li>{banner.activePageText}</li>
+                  {clientServicingBreadcrumbs ? (
+                    // Custom breadcrumbs for client servicing pages
+                    clientServicingBreadcrumbs.map((breadcrumb, breadcrumbIndex) => (
+                      <li key={breadcrumbIndex}>
+                        {breadcrumb.isLast ? (
+                          breadcrumb.name
+                        ) : (
+                          <Link href={breadcrumb.url}>{breadcrumb.name}</Link>
+                        )}
+                      </li>
+                    ))
+                  ) : (
+                    // Default breadcrumbs for other pages
+                    <>
+                      <li>
+                        <Link href={banner.homePageUrl}>{banner.homePageText}</Link>
+                      </li>
+                      <li>{banner.activePageText}</li>
+                    </>
+                  )}
                 </ul>
               </div>
             </Container>