From 38a7b6a2609ba751e56e92ab18b66a4d2ecd4b1b Mon Sep 17 00:00:00 2001
From: priyanshuvish <vishpriyanshu172@gmail.com>
Date: Thu, 25 Sep 2025 16:45:18 +0530
Subject: [PATCH] other changes like hero sec align left

---
 src/components/AboutUs.tsx                    |  74 ++---
 src/components/LearningOnline.tsx             |  74 +++--
 src/components/Services.tsx                   | 140 +++++----
 src/components/ServicesSection.tsx            |   2 +-
 src/components/services/CultureCompetence.tsx | 159 +++-------
 src/components/services/ExecutiveCoaching.tsx | 139 ++-------
 .../services/LeadershipDevelopment.tsx        | 283 +++---------------
 .../LeadershipPipelineDevelopment.tsx         | 236 +++------------
 .../services/ManagementDevelopment.tsx        | 159 +++-------
 9 files changed, 327 insertions(+), 939 deletions(-)

diff --git a/src/components/AboutUs.tsx b/src/components/AboutUs.tsx
index d783fef..429f556 100644
--- a/src/components/AboutUs.tsx
+++ b/src/components/AboutUs.tsx
@@ -17,7 +17,8 @@ import {
   Eye,
   BookOpen,
   Puzzle,
-  Building
+  Building,
+  ArrowLeft
 } from 'lucide-react';
 import { BrandedTag } from './about/BrandedTag';
 import { PrimaryCTAButton } from './PrimaryCTAButton';
@@ -25,6 +26,7 @@ import { CTABannerSection } from './CTABannerSection';
 import { TestimonialsSection } from './TestimonialsSection';
 import { TeamMemberModal } from './TeamMemberModal';
 import { navigateTo } from './Router';
+import { Button } from './ui/button';
 
 // Leadership Orientations Data
 const leadershipOrientations = [
@@ -276,53 +278,53 @@ export function AboutUs() {
   return (
     <div style={{ backgroundColor: '#FFFFFF', fontFamily: 'var(--font-family-base)' }}>
       {/* Hero Section - Our Vision Page Style */}
-      <section className="relative min-h-[90vh] flex flex-col">
+      <section className="relative min-h-[85vh] flex flex-col">
         <div className="absolute inset-0 z-0">
-          <div 
+          <div
             className="w-full h-full bg-cover bg-center bg-no-repeat"
             style={{
-              backgroundImage: `url('https://images.unsplash.com/photo-1552664730-d307ca884978?w=1920&h=1080&fit=crop')`
+          backgroundImage: `url('https://images.unsplash.com/photo-1552664730-d307ca884978?w=1920&h=1080&fit=crop')`
             }}
           />
-          <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/70 to-black/60"></div>
+          <div className="absolute inset-0 bg-gradient-to-r from-black/85 via-black/75 to-black/65"></div>
         </div>
 
         <div className="relative z-10 flex-1 flex items-center">
-          <div className="container mx-auto section-margin-x">
-            <div className="text-center max-w-5xl mx-auto">
-              <motion.div
-                initial={{ opacity: 0, y: 30 }}
-                animate={{ opacity: isVisible ? 1 : 0, y: isVisible ? 0 : 30 }}
-                transition={{ duration: 0.8 }}
-              >
-                <div className="branded-tag-system-white mb-8 justify-center">
-                  <div className="dot"></div>
-                  <span className="text">About Kautilya Leadership Centre</span>
-                </div>
-                
-                <h1 className="text-h1-white about-hero-title mb-6 mx-auto">
-                  Transforming Leadership Through<br />Research and Practice
-                </h1>
-                
-                <p className="text-body-lg-white mb-8 max-w-2xl mx-auto">
-                  Founded in 2016 with the vision of being a world class institution in the thought and practice of leadership. 
-                  We facilitate institutions to build Leadership capacity and capability while helping individuals unleash their potential.
-                </p>
+          <div className="w-full section-margin-x">
+            <div className="max-w-6xl">
+              {/* Back Navigation */}
+              <div className="mb-8">
+                <Button
+                  variant="ghost"
+                  onClick={() => navigateTo('/services')}
+                  className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
+                >
+                  <ArrowLeft className="w-4 h-4 mr-2" />
+                  Back to Services
+                </Button>
+              </div>
 
-                <div className="flex justify-center mb-12">
-                  <PrimaryCTAButton
-                    text="Discover Our Approach"
-                    onClick={() => navigateTo('/contact')}
-                    ariaLabel="Contact us to discover our leadership approach"
-                    className="management-dev-primary-cta"
-                  />
-                </div>
-              </motion.div>
+              <div className="mb-8">
+                <h1 className="text-h1-white">
+                  Advancing Leadership Through Insight
+                </h1>
+              </div>
+
+              <p className="text-body-lg-white mb-8 max-w-3xl">
+                <strong>Founded in 2016 with the vision of being a world class institution in the thought and practice of leadership. We facilitate institutions to build Leadership capacity and capability while helping individuals unleash their potential.</strong>
+              </p>
+
+              <div className="flex justify-start">
+                <PrimaryCTAButton
+                  text="Talk to Us"
+                  onClick={() => navigateTo('/contact?topic=management-development')}
+                  ariaLabel="Talk to us about management development"
+                  className="primary-cta-button-blue cta-text-white"
+                />
+              </div>
             </div>
           </div>
         </div>
-
-
       </section>
 
       {/* Section 1: Our Promise */}
diff --git a/src/components/LearningOnline.tsx b/src/components/LearningOnline.tsx
index fca97a3..37262c4 100644
--- a/src/components/LearningOnline.tsx
+++ b/src/components/LearningOnline.tsx
@@ -33,7 +33,8 @@ import {
   List,
   X,
   DollarSign,
-  ShoppingCart
+  ShoppingCart,
+  ArrowLeft
 } from 'lucide-react';
 import { motion } from 'motion/react';
 import { navigateTo } from './Router';
@@ -341,40 +342,53 @@ export function LearningOnline() {
   return (
     <div style={{ backgroundColor: '#FFFFFF' }}>
       {/* Hero Banner – Digital Learning - Blog Style */}
-      <section className="relative py-16 overflow-hidden">
-        <div
-          className="absolute inset-0"
-          style={{
-            backgroundImage: 'url(https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1200&h=600&fit=crop)',
-            backgroundSize: 'cover',
-            backgroundPosition: 'center'
-          }}
-        >
-          <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/60 to-black/40" />
+    <section className="relative min-h-[85vh] flex flex-col">
+        <div className="absolute inset-0 z-0">
+          <div
+            className="w-full h-full bg-cover bg-center bg-no-repeat"
+            style={{
+        backgroundImage: 'url(https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1200&h=600&fit=crop)',
+            }}
+          />
+          <div className="absolute inset-0 bg-gradient-to-r from-black/85 via-black/75 to-black/65"></div>
         </div>
 
-        <div className="relative section-margin-x">
-          <div className="max-w-4xl mx-auto text-center">
-            <motion.div
-              initial={{ opacity: 0, y: 30 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.8 }}
-            >
-              {/* Eyebrow Text */}
-              <div className="branded-tag-system-white mb-6 justify-center">
-                <div className="dot"></div>
-                <span className="text">DIGITAL LEARNING PLATFORM</span>
+        <div className="relative z-10 flex-1 flex items-center">
+          <div className="w-full section-margin-x">
+            <div className="max-w-6xl">
+              {/* Back Navigation */}
+              <div className="mb-8">
+                <Button
+                  variant="ghost"
+                  onClick={() => navigateTo('/services')}
+                  className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
+                >
+                  <ArrowLeft className="w-4 h-4 mr-2" />
+                  Back to Services
+                </Button>
               </div>
 
-              {/* Main Header */}
-              <h1 className="text-h1-white mb-8" style={{ lineHeight: 'var(--line-height-h1)' }}>
-                Discover Your Leadership
-                Potential Online
-              </h1>
+              <div className="mb-8">
+                <h1 className="text-h1-white">
+                 Grow as a Leader, Anytime
+                </h1>
+              </div>
 
-              <h2 className='text text-white'>Our Leadership Courses are structured packages which are targeted towards building your leadership abilities. Each course is a wholesome package which not only helps you gain awareness about your leadership style but also gives insights to build your leadership abilities. Every course contains curated content targeted towards a specific leadership ability. Each course consists of our proprietary profiling instruments – Leadership Profilers, conceptual videos and experiences of leaders – Leadership Webcasts, as well as additional content to supplement learning.
-              </h2>
-            </motion.div>
+              <p className="text-body-lg-white mb-8 max-w-3xl">
+                <strong>
+                  Our Leadership Courses are designed to build your leadership abilities through targeted, structured packages. Each course increases self-awareness of your leadership style and provides practical insights to strengthen your skills. Courses feature curated content focused on specific abilities, including our proprietary Leadership Profilers, conceptual videos, leader webcasts, and supplemental resources.
+                </strong>
+              </p>
+
+              <div className="flex justify-start">
+                <PrimaryCTAButton
+                  text="Talk to Us"
+                  onClick={() => navigateTo('/contact?topic=management-development')}
+                  ariaLabel="Talk to us about management development"
+                  className="primary-cta-button-blue cta-text-white"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </section>
diff --git a/src/components/Services.tsx b/src/components/Services.tsx
index d575846..1381ee1 100644
--- a/src/components/Services.tsx
+++ b/src/components/Services.tsx
@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react';
 import { motion } from 'motion/react';
-import { 
-  Users, 
-  Target, 
-  TrendingUp, 
-  BookOpen, 
+import {
+  Users,
+  Target,
+  TrendingUp,
+  BookOpen,
   MessageCircle,
   CheckCircle,
   Download,
@@ -16,12 +16,14 @@ import {
   UserCheck,
   ClipboardCheck,
   Users2,
-  Briefcase
+  Briefcase,
+  ArrowLeft
 } from 'lucide-react';
 import { BrandedTag } from './about/BrandedTag';
 import { PrimaryCTAButton } from './PrimaryCTAButton';
 import { CTABannerSection } from './CTABannerSection';
 import { navigateTo } from './Router';
+import { Button } from './ui/button';
 
 export function Services() {
   const [isVisible, setIsVisible] = useState(false);
@@ -110,48 +112,48 @@ export function Services() {
       {/* Hero Section */}
       <section className="relative min-h-[85vh] flex flex-col">
         <div className="absolute inset-0 z-0">
-          <div 
+          <div
             className="w-full h-full bg-cover bg-center bg-no-repeat"
             style={{
               backgroundImage: `url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1920&h=1080&fit=crop')`
             }}
           />
-          <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/70 to-black/60"></div>
+          <div className="absolute inset-0 bg-gradient-to-r from-black/85 via-black/75 to-black/65"></div>
         </div>
 
         <div className="relative z-10 flex-1 flex items-center">
-          <div className="container mx-auto section-margin-x">
-            <div className="text-center max-w-5xl mx-auto">
-              <motion.div
-                initial={{ opacity: 0, y: 30 }}
-                animate={{ opacity: isVisible ? 1 : 0, y: isVisible ? 0 : 30 }}
-                transition={{ duration: 0.8 }}
-              >
-                <div className="branded-tag-system-white mb-8 justify-center">
-                  <div className="dot"></div>
-                  <span className="text">Our Services</span>
-                </div>
-                
-                <h1 className="text-h1-white mb-6">
-                  Building Leadership Capacity<br />
-                  That Drives Results
-                </h1>
-                
-                <p className="text-body-lg-white mb-8 max-w-3xl mx-auto">
-                  At Kautilya Leadership Centre, we enable institutions and individuals to build leadership capacity, 
-                  align culture with strategy, and create enduring value. Our services span leadership development, 
-                  consulting, coaching, assessments, and digital learning — each designed with research, context, and practice at the core.
-                </p>
+          <div className="w-full section-margin-x">
+            <div className="max-w-6xl">
+              {/* Back Navigation */}
+              <div className="mb-8">
+                <Button
+                  variant="ghost"
+                  onClick={() => navigateTo('/services')}
+                  className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
+                >
+                  <ArrowLeft className="w-4 h-4 mr-2" />
+                  Back to Services
+                </Button>
+              </div>
 
-                {/* <div className="flex justify-center">
-                  <PrimaryCTAButton
-                    text="Explore Our Approach"
-                    onClick={() => navigateTo('/contact')}
-                    ariaLabel="Contact us to explore our services approach"
-                    className="cta-text-white"
-                  />
-                </div> */}
-              </motion.div>
+              <div className="mb-8">
+                <h1 className="text-h1-white">
+                  Building Leaders, Driving Impact
+                </h1>
+              </div>
+
+              <p className="text-body-lg-white mb-8 max-w-3xl">
+                <strong>At Kautilya Leadership Centre, we enable institutions and individuals to build leadership capacity, align culture with strategy, and create enduring value. Our services span leadership development, consulting, coaching, assessments, and digital learning — each designed with research, context, and practice at the core.</strong>
+              </p>
+
+              <div className="flex justify-start">
+                <PrimaryCTAButton
+                  text="Talk to Us"
+                  onClick={() => navigateTo('/contact?topic=management-development')}
+                  ariaLabel="Talk to us about management development"
+                  className="primary-cta-button-blue cta-text-white"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -161,7 +163,7 @@ export function Services() {
       <section className="py-20 lg:py-28" style={{ backgroundColor: '#FFFFFF' }}>
         <div className="section-margin-x">
           <div className="max-w-7xl mx-auto">
-            
+
             {/* Services Grid */}
             <div className="space-y-24">
               {services.map((service, index) => (
@@ -173,26 +175,24 @@ export function Services() {
                   viewport={{ once: true }}
                   className="max-w-7xl mx-auto"
                 >
-                  <div className={`grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start ${
-                    index % 2 === 1 ? 'lg:direction-reverse' : ''
-                  }`}>
-                    
-                    {/* Content Section */}
-                    <div className={`lg:col-span-7 ${
-                      index % 2 === 1 ? 'lg:col-start-6 lg:order-2' : 'lg:col-start-1 lg:order-1'
+                  <div className={`grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start ${index % 2 === 1 ? 'lg:direction-reverse' : ''
                     }`}>
+
+                    {/* Content Section */}
+                    <div className={`lg:col-span-7 ${index % 2 === 1 ? 'lg:col-start-6 lg:order-2' : 'lg:col-start-1 lg:order-1'
+                      }`}>
                       {/* Icon and Title - Side by Side */}
                       <div className="flex items-start gap-4 mb-6">
-                        <div 
+                        <div
                           className="w-16 h-16 rounded-xl flex items-center justify-center flex-shrink-0"
                           style={{ backgroundColor: 'var(--color-primary)' }}
                         >
                           <service.icon className="w-8 h-8 text-white" />
                         </div>
-                        
+
                         <h2 className="text-h2 leading-tight">{service.title}</h2>
                       </div>
-                      
+
                       {/* Description */}
                       <p className="text-body-lg text-muted mb-8 leading-relaxed">
                         {service.description}
@@ -209,9 +209,9 @@ export function Services() {
                       </div>
 
                       {/* Download Resource */}
-                      <button 
+                      <button
                         className="w-full p-6 bg-gray-50 rounded-xl border border-gray-100 hover:shadow-lg hover:shadow-primary/10 hover:border-primary/20 transition-all duration-300 cursor-pointer group text-left"
-                        onClick={() => {/* Handle download */}}
+                        onClick={() => {/* Handle download */ }}
                       >
                         <div className="flex items-start gap-4">
                           <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0 transition-all duration-300 relative overflow-hidden">
@@ -230,21 +230,19 @@ export function Services() {
                     </div>
 
                     {/* Image Section */}
-                    <div className={`lg:col-span-5 ${
-                      index % 2 === 1 ? 'lg:col-start-1 lg:order-1' : 'lg:col-start-8 lg:order-2'
-                    }`}>
+                    <div className={`lg:col-span-5 ${index % 2 === 1 ? 'lg:col-start-1 lg:order-1' : 'lg:col-start-8 lg:order-2'
+                      }`}>
                       <div className="relative">
-                        <div 
+                        <div
                           className="w-full aspect-[4/3] rounded-2xl bg-cover bg-center bg-no-repeat"
                           style={{
-                            backgroundImage: `url('https://images.unsplash.com/photo-${
-                              index === 0 ? '1522071820-d3ca7b99e0dd' : // leadership team
+                            backgroundImage: `url('https://images.unsplash.com/photo-${index === 0 ? '1522071820-d3ca7b99e0dd' : // leadership team
                               index === 1 ? '1551836022-d5d88e9218df' : // assessment/analytics
-                              index === 2 ? '1600880292203-757bb62b4baf' : // management meeting
-                              index === 3 ? '1552664730-d307ca884978' : // culture/team
-                              index === 4 ? '1573496359142-b8d87734a5a2' : // coaching
-                              '1582213782179-e0d53f98f2ca' // leadership campus/facility
-                            }?w=800&h=600&fit=crop')`
+                                index === 2 ? '1600880292203-757bb62b4baf' : // management meeting
+                                  index === 3 ? '1552664730-d307ca884978' : // culture/team
+                                    index === 4 ? '1573496359142-b8d87734a5a2' : // coaching
+                                      '1582213782179-e0d53f98f2ca' // leadership campus/facility
+                              }?w=800&h=600&fit=crop')`
                           }}
                         >
                           <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-transparent rounded-2xl"></div>
@@ -275,13 +273,13 @@ export function Services() {
                 <div className="dot"></div>
                 <span className="text">Case Studies</span>
               </div>
-              
+
               <h2 className="text-h2 mb-6">
                 Real Impact, Real Results
               </h2>
-              
+
               <p className="text-body-lg text-muted max-w-2xl mx-auto">
-                Discover how we've helped organizations transform their leadership capabilities 
+                Discover how we've helped organizations transform their leadership capabilities
                 and drive sustainable business growth.
               </p>
             </motion.div>
@@ -295,19 +293,19 @@ export function Services() {
                   transition={{ duration: 0.6, delay: index * 0.1 }}
                   viewport={{ once: true }}
                   className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-lg transition-shadow cursor-pointer"
-                  onClick={() => {/* Handle case study view */}}
+                  onClick={() => {/* Handle case study view */ }}
                 >
                   <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                     <Award className="w-6 h-6 text-primary" />
                   </div>
-                  
+
                   <h3 className="text-h4 mb-3">{caseStudy.title}</h3>
-                  
+
                   <p className="text-small text-muted mb-4">
                     {caseStudy.description}
                   </p>
-                  
-                  <button 
+
+                  <button
                     className="w-full flex items-center justify-between p-3 bg-gray-50 hover:bg-primary/5 border border-gray-100 hover:border-primary/20 rounded-lg transition-all duration-300 cursor-pointer group"
                     onClick={(e) => {
                       e.stopPropagation();
diff --git a/src/components/ServicesSection.tsx b/src/components/ServicesSection.tsx
index 1ffcfa5..e7a2c8c 100644
--- a/src/components/ServicesSection.tsx
+++ b/src/components/ServicesSection.tsx
@@ -107,7 +107,7 @@ export function ServicesSection() {
       ref={sectionRef}
       className="py-16 lg:py-20"
       style={{ 
-        backgroundColor: '#F7F7FD',
+        backgroundColor: '#fff',
         fontFamily: 'var(--font-family-brand)'
       }}
       aria-labelledby="recognition-section-heading"
diff --git a/src/components/services/CultureCompetence.tsx b/src/components/services/CultureCompetence.tsx
index 37f8e91..c2df7ff 100644
--- a/src/components/services/CultureCompetence.tsx
+++ b/src/components/services/CultureCompetence.tsx
@@ -7,7 +7,7 @@ import { navigateTo } from '../Router';
 import { BrandedTag } from '../about/BrandedTag';
 import { PrimaryCTAButton } from '../PrimaryCTAButton';
 import { StandardCTAButton } from '../StandardCTAButton';
-import { 
+import {
   ArrowRight,
   CheckCircle,
   Settings,
@@ -37,6 +37,7 @@ import {
   Compass,
   Briefcase
 } from 'lucide-react';
+import { TestimonialsSection } from '../TestimonialsSection';
 
 const targetAudience = [
   {
@@ -147,7 +148,7 @@ export function CultureCompetence() {
       {/* Hero Section */}
       <section className="relative min-h-[85vh] flex flex-col">
         <div className="absolute inset-0 z-0">
-          <div 
+          <div
             className="w-full h-full bg-cover bg-center bg-no-repeat"
             style={{
               backgroundImage: `url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1920&h=1080&fit=crop')`
@@ -161,8 +162,8 @@ export function CultureCompetence() {
             <div className="max-w-4xl">
               {/* Back Navigation */}
               <div className="mb-8">
-                <Button 
-                  variant="ghost" 
+                <Button
+                  variant="ghost"
                   onClick={() => navigateTo('/services')}
                   className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
                 >
@@ -176,13 +177,13 @@ export function CultureCompetence() {
                   Culture & Competence Consulting
                 </h1>
               </div>
-              
+
               <p className="text-body-lg-white mb-8 max-w-3xl">
                 <strong>Transform organizational culture and build strategic competencies that drive 73% better engagement and business performance.</strong>
               </p>
 
               <div className="flex justify-start">
-                <PrimaryCTAButton 
+                <PrimaryCTAButton
                   text="Book a Consultation"
                   onClick={() => navigateTo('/contact?topic=culture-competence')}
                   ariaLabel="Book a consultation for culture and competence consulting"
@@ -217,7 +218,7 @@ export function CultureCompetence() {
               <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                   <div className="flex flex-col items-center text-center">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -234,7 +235,7 @@ export function CultureCompetence() {
 
                 <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                   <div className="flex flex-col items-center text-center">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -251,7 +252,7 @@ export function CultureCompetence() {
 
                 <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                   <div className="flex flex-col items-center text-center">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -288,7 +289,7 @@ export function CultureCompetence() {
                 <Card key={index} className="h-full hover:shadow-lg transition-all duration-300">
                   <CardContent className="p-8">
                     <div className="flex items-center gap-4 mb-6">
-                      <div 
+                      <div
                         className="w-16 h-16 rounded-2xl flex items-center justify-center"
                         style={{ backgroundColor: 'var(--color-primary)' }}
                       >
@@ -330,13 +331,13 @@ export function CultureCompetence() {
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
               {useCases.map((useCase, index) => (
-                <div 
+                <div
                   key={index}
                   className="bg-white rounded-xl border border-gray-200 p-6 hover:border-[#04045B] hover:shadow-lg transition-all duration-300"
                 >
                   {/* Icon and Title */}
                   <div className="flex items-start gap-4 mb-4">
-                    <div 
+                    <div
                       className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -385,7 +386,7 @@ export function CultureCompetence() {
                   <h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
                   <div className="space-y-8">
                     <div className="flex items-start gap-4">
-                      <div 
+                      <div
                         className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                         style={{ backgroundColor: '#04045B' }}
                       >
@@ -398,9 +399,9 @@ export function CultureCompetence() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4">
-                      <div 
+                      <div
                         className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                         style={{ backgroundColor: '#04045B' }}
                       >
@@ -413,9 +414,9 @@ export function CultureCompetence() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4">
-                      <div 
+                      <div
                         className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                         style={{ backgroundColor: '#04045B' }}
                       >
@@ -428,9 +429,9 @@ export function CultureCompetence() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4">
-                      <div 
+                      <div
                         className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                         style={{ backgroundColor: '#04045B' }}
                       >
@@ -459,7 +460,7 @@ export function CultureCompetence() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                       <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
                       <div className="flex-1">
@@ -469,7 +470,7 @@ export function CultureCompetence() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                       <div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
                       <div className="flex-1">
@@ -479,7 +480,7 @@ export function CultureCompetence() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                       <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
                       <div className="flex-1">
@@ -511,7 +512,7 @@ export function CultureCompetence() {
 
             <div className="space-y-8">
               {programTimeline.map((phase, index) => (
-                <Card 
+                <Card
                   key={index}
                   className="border border-gray-200 hover:border-primary/20 transition-all duration-300 hover:shadow-lg"
                 >
@@ -521,7 +522,7 @@ export function CultureCompetence() {
                       onClick={() => setExpandedPhase(expandedPhase === index ? null : index)}
                     >
                       <div className="flex items-start gap-4 flex-1">
-                        <div 
+                        <div
                           className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                           style={{ backgroundColor: 'var(--color-primary)' }}
                         >
@@ -597,7 +598,7 @@ export function CultureCompetence() {
               {expectedOutcomes.map((outcome, index) => (
                 <Card key={index} className="text-center bg-white hover:shadow-lg transition-all duration-300">
                   <CardContent className="p-8">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6"
                       style={{ backgroundColor: 'var(--color-primary)' }}
                     >
@@ -638,97 +639,11 @@ export function CultureCompetence() {
       </section>
 
       {/* 7. Client Examples / Testimonials - Hero Section Design */}
-      <section 
-        className="relative py-20 flex items-center"
-        style={{ backgroundColor: '#F7F7FD' }}
-      >
-        <div className="w-full section-margin-x">
-          {/* Branded Tag */}
-          <div className="flex justify-center mb-12">
-            <div className="inline-flex items-center gap-3 bg-[rgba(248,195,1,0.1)] px-4 py-2 rounded-lg">
-              <div className="w-[7px] h-[7px] bg-[#f8c301] rounded-full" />
-              <span className="text-[#26231a] text-lg lg:text-lg md:text-base sm:text-sm uppercase tracking-wider font-light">
-                Client Success Stories
-              </span>
-            </div>
-          </div>
-
-          {/* Main heading */}
-          <h2 
-            className="text-h2 leading-tight mb-12 text-center"
-            style={{ color: 'var(--color-brand-primary)' }}
-          >
-            Culture Transformation Success
-          </h2>
-
-          {/* Split Layout Container with Max Width */}
-          <div className="max-w-5xl mx-auto">
-            <div className="flex h-[400px] rounded-2xl overflow-hidden shadow-2xl">
-              {/* Left Side - Image */}
-              <div className="flex-1 relative">
-                <div className="relative w-full h-full overflow-hidden">
-                  <ImageWithFallback
-                    src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=600&h=800&fit=crop"
-                    alt="Culture Transformation Success"
-                    className="w-full h-full object-cover"
-                  />
-                </div>
-              </div>
-
-              {/* Right Side - Quote Content with White Background */}
-              <div 
-                className="flex-1 flex items-center justify-center p-8 relative"
-                style={{ backgroundColor: 'white' }}
-              >
-                {/* Large Opening Quotation Mark */}
-                <div 
-                  className="absolute top-4 left-4 text-3xl opacity-30"
-                  style={{ color: 'var(--color-brand-primary)' }}
-                >
-                  "
-                </div>
-
-                <div className="space-y-4 max-w-lg relative z-10">
-                  {/* Quote */}
-                  <blockquote 
-                    className="text-lg leading-relaxed font-medium"
-                    style={{ 
-                      fontFamily: 'var(--font-family-base)',
-                      color: 'var(--color-brand-black)'
-                    }}
-                  >
-                    The Culture & Competence transformation program revolutionized our organization. Employee engagement increased by 73%, and we achieved 68% better alignment between our culture and business strategy. The competency development component built critical capabilities.
-                  </blockquote>
-
-                  {/* Attribution */}
-                  <div className="space-y-1 pt-3">
-                    <div 
-                      className="text-base font-semibold"
-                      style={{ color: 'var(--color-brand-primary)' }}
-                    >
-                      Financial Services Company
-                    </div>
-                    <div 
-                      className="text-xs"
-                      style={{ color: 'var(--color-brand-gray-muted)' }}
-                    >
-                      5,000+ employees • 73% engagement improvement • 68% culture alignment increase
-                    </div>
-                  </div>
-                </div>
-
-                {/* Large Closing Quotation Mark */}
-                <div 
-                  className="absolute bottom-4 right-4 text-3xl opacity-30"
-                  style={{ color: 'var(--color-brand-primary)' }}
-                >
-                  "
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
+      <TestimonialsSection
+        title="Culture Transformation Success"
+        subtitle=""
+        tagText="Client Success Stories"
+      />
 
       {/* 8. CTA Section - Hero Section Design */}
       <section className="relative h-[700px] overflow-hidden">
@@ -739,10 +654,10 @@ export function CultureCompetence() {
             alt="Professional team collaborating in modern office"
             className="w-full h-full object-cover"
           />
-          
+
           {/* Subtle dark overlay for overall image */}
           <div className="absolute inset-0 bg-black/30" />
-          
+
           {/* Gradient overlay for better text readability */}
           <div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
         </div>
@@ -750,7 +665,7 @@ export function CultureCompetence() {
         {/* Content Container */}
         <div className="relative h-full flex items-center justify-end section-margin-x">
           {/* CTA Content Block */}
-          <div 
+          <div
             className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
             style={{ backgroundColor: 'var(--color-brand-primary)' }}
           >
@@ -759,8 +674,8 @@ export function CultureCompetence() {
 
             {/* Main Headline */}
             <h2 className="text-h2-white mb-8">
-              Ready to transform your culture? 
-              <span 
+              Ready to transform your culture?
+              <span
                 className="italic"
                 style={{ color: 'var(--color-brand-accent)' }}
               >
@@ -770,7 +685,7 @@ export function CultureCompetence() {
             </h2>
 
             {/* CTA Button */}
-            <StandardCTAButton 
+            <StandardCTAButton
               text="Schedule a Culture Consultation"
               onClick={() => navigateTo('/contact?topic=culture-competence')}
               ariaLabel="Schedule a culture and competence consultation"
diff --git a/src/components/services/ExecutiveCoaching.tsx b/src/components/services/ExecutiveCoaching.tsx
index b28da1d..64e66d5 100644
--- a/src/components/services/ExecutiveCoaching.tsx
+++ b/src/components/services/ExecutiveCoaching.tsx
@@ -7,7 +7,7 @@ import { navigateTo } from '../Router';
 import { BrandedTag } from '../about/BrandedTag';
 import { PrimaryCTAButton } from '../PrimaryCTAButton';
 import { StandardCTAButton } from '../StandardCTAButton';
-import { 
+import {
   ArrowRight,
   CheckCircle,
   Settings,
@@ -38,6 +38,7 @@ import {
   User,
   UserCheck
 } from 'lucide-react';
+import { TestimonialsSection } from '../TestimonialsSection';
 
 const targetAudience = [
   {
@@ -148,7 +149,7 @@ export function ExecutiveCoaching() {
       {/* Hero Section */}
       <section className="relative min-h-[85vh] flex flex-col">
         <div className="absolute inset-0 z-0">
-          <div 
+          <div
             className="w-full h-full bg-cover bg-center bg-no-repeat"
             style={{
               backgroundImage: `url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=1920&h=1080&fit=crop')`
@@ -162,8 +163,8 @@ export function ExecutiveCoaching() {
             <div className="max-w-4xl">
               {/* Back Navigation */}
               <div className="mb-8">
-                <Button 
-                  variant="ghost" 
+                <Button
+                  variant="ghost"
                   onClick={() => navigateTo('/services')}
                   className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
                 >
@@ -177,13 +178,13 @@ export function ExecutiveCoaching() {
                   Coaching & Mentoring
                 </h1>
               </div>
-              
+
               <p className="text-body-lg-white mb-8 max-w-3xl">
                 <strong>Develop exceptional leaders through personalized coaching that drives 87% improvement in leadership effectiveness and accelerates career advancement.</strong>
               </p>
 
               <div className="flex justify-start">
-                <PrimaryCTAButton 
+                <PrimaryCTAButton
                   text="Book a Consultation"
                   onClick={() => navigateTo('/contact?topic=coaching-mentoring')}
                   ariaLabel="Book a consultation for coaching and mentoring"
@@ -218,7 +219,7 @@ export function ExecutiveCoaching() {
               <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                   <div className="flex flex-col items-center text-center">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -235,7 +236,7 @@ export function ExecutiveCoaching() {
 
                 <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                   <div className="flex flex-col items-center text-center">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -252,7 +253,7 @@ export function ExecutiveCoaching() {
 
                 <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                   <div className="flex flex-col items-center text-center">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -289,7 +290,7 @@ export function ExecutiveCoaching() {
                 <Card key={index} className="h-full hover:shadow-lg transition-all duration-300">
                   <CardContent className="p-8">
                     <div className="flex items-center gap-4 mb-6">
-                      <div 
+                      <div
                         className="w-16 h-16 rounded-2xl flex items-center justify-center"
                         style={{ backgroundColor: 'var(--color-primary)' }}
                       >
@@ -331,7 +332,7 @@ export function ExecutiveCoaching() {
 
             <div className="space-y-6">
               {useCases.map((useCase, index) => (
-                <Card 
+                <Card
                   key={index}
                   className="border border-gray-200 hover:border-primary/20 transition-all duration-300 hover:shadow-lg"
                 >
@@ -341,7 +342,7 @@ export function ExecutiveCoaching() {
                       onClick={() => setExpandedUseCase(expandedUseCase === index ? null : index)}
                     >
                       <div className="flex items-start gap-4 flex-1">
-                        <div 
+                        <div
                           className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                           style={{ backgroundColor: 'var(--color-accent)' }}
                         >
@@ -465,7 +466,7 @@ export function ExecutiveCoaching() {
 
             <div className="space-y-8">
               {programTimeline.map((phase, index) => (
-                <Card 
+                <Card
                   key={index}
                   className="border border-gray-200 hover:border-primary/20 transition-all duration-300 hover:shadow-lg"
                 >
@@ -475,7 +476,7 @@ export function ExecutiveCoaching() {
                       onClick={() => setExpandedPhase(expandedPhase === index ? null : index)}
                     >
                       <div className="flex items-start gap-4 flex-1">
-                        <div 
+                        <div
                           className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                           style={{ backgroundColor: 'var(--color-primary)' }}
                         >
@@ -551,7 +552,7 @@ export function ExecutiveCoaching() {
               {expectedOutcomes.map((outcome, index) => (
                 <Card key={index} className="text-center bg-white hover:shadow-lg transition-all duration-300">
                   <CardContent className="p-8">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6"
                       style={{ backgroundColor: 'var(--color-primary)' }}
                     >
@@ -592,97 +593,11 @@ export function ExecutiveCoaching() {
       </section>
 
       {/* 7. Client Examples / Testimonials - Hero Section Design */}
-      <section 
-        className="relative py-20 flex items-center"
-        style={{ backgroundColor: '#F7F7FD' }}
-      >
-        <div className="w-full section-margin-x">
-          {/* Branded Tag */}
-          <div className="flex justify-center mb-12">
-            <div className="inline-flex items-center gap-3 bg-[rgba(248,195,1,0.1)] px-4 py-2 rounded-lg">
-              <div className="w-[7px] h-[7px] bg-[#f8c301] rounded-full" />
-              <span className="text-[#26231a] text-lg lg:text-lg md:text-base sm:text-sm uppercase tracking-wider font-light">
-                Client Success Stories
-              </span>
-            </div>
-          </div>
-
-          {/* Main heading */}
-          <h2 
-            className="text-h2 leading-tight mb-12 text-center"
-            style={{ color: 'var(--color-brand-primary)' }}
-          >
-            Coaching & Mentoring Success
-          </h2>
-
-          {/* Split Layout Container with Max Width */}
-          <div className="max-w-5xl mx-auto">
-            <div className="flex h-[400px] rounded-2xl overflow-hidden shadow-2xl">
-              {/* Left Side - Image */}
-              <div className="flex-1 relative">
-                <div className="relative w-full h-full overflow-hidden">
-                  <ImageWithFallback
-                    src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&h=800&fit=crop"
-                    alt="Executive Coaching Success"
-                    className="w-full h-full object-cover"
-                  />
-                </div>
-              </div>
-
-              {/* Right Side - Quote Content with White Background */}
-              <div 
-                className="flex-1 flex items-center justify-center p-8 relative"
-                style={{ backgroundColor: 'white' }}
-              >
-                {/* Large Opening Quotation Mark */}
-                <div 
-                  className="absolute top-4 left-4 text-3xl opacity-30"
-                  style={{ color: 'var(--color-brand-primary)' }}
-                >
-                  "
-                </div>
-
-                <div className="space-y-4 max-w-lg relative z-10">
-                  {/* Quote */}
-                  <blockquote 
-                    className="text-lg leading-relaxed font-medium"
-                    style={{ 
-                      fontFamily: 'var(--font-family-base)',
-                      color: 'var(--color-brand-black)'
-                    }}
-                  >
-                    The executive coaching program was transformational for my leadership journey. My coach helped me navigate a complex organizational restructuring while developing my strategic thinking capabilities. Within 12 months, I was promoted to CEO and credit much of my success to personalized coaching.
-                  </blockquote>
-
-                  {/* Attribution */}
-                  <div className="space-y-1 pt-3">
-                    <div 
-                      className="text-base font-semibold"
-                      style={{ color: 'var(--color-brand-primary)' }}
-                    >
-                      Technology Company
-                    </div>
-                    <div 
-                      className="text-xs"
-                      style={{ color: 'var(--color-brand-gray-muted)' }}
-                    >
-                      Senior Vice President → CEO • 87% improvement in leadership effectiveness
-                    </div>
-                  </div>
-                </div>
-
-                {/* Large Closing Quotation Mark */}
-                <div 
-                  className="absolute bottom-4 right-4 text-3xl opacity-30"
-                  style={{ color: 'var(--color-brand-primary)' }}
-                >
-                  "
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
+      <TestimonialsSection
+        title="Coaching & Mentoring Success"
+        subtitle=""
+        tagText="Client Success Stories"
+      />
 
       {/* 8. CTA Section - Hero Section Design */}
       <section className="relative h-[700px] overflow-hidden">
@@ -693,10 +608,10 @@ export function ExecutiveCoaching() {
             alt="Professional team collaborating in modern office"
             className="w-full h-full object-cover"
           />
-          
+
           {/* Subtle dark overlay for overall image */}
           <div className="absolute inset-0 bg-black/30" />
-          
+
           {/* Gradient overlay for better text readability */}
           <div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
         </div>
@@ -704,7 +619,7 @@ export function ExecutiveCoaching() {
         {/* Content Container */}
         <div className="relative h-full flex items-center justify-end section-margin-x">
           {/* CTA Content Block */}
-          <div 
+          <div
             className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
             style={{ backgroundColor: 'var(--color-brand-primary)' }}
           >
@@ -713,8 +628,8 @@ export function ExecutiveCoaching() {
 
             {/* Main Headline */}
             <h2 className="text-h2-white mb-8">
-              Ready to accelerate your leadership? 
-              <span 
+              Ready to accelerate your leadership?
+              <span
                 className="italic"
                 style={{ color: 'var(--color-brand-accent)' }}
               >
@@ -724,7 +639,7 @@ export function ExecutiveCoaching() {
             </h2>
 
             {/* CTA Button */}
-            <StandardCTAButton 
+            <StandardCTAButton
               text="Schedule a Coaching Consultation"
               onClick={() => navigateTo('/contact?topic=coaching-mentoring')}
               ariaLabel="Schedule a coaching and mentoring consultation"
diff --git a/src/components/services/LeadershipDevelopment.tsx b/src/components/services/LeadershipDevelopment.tsx
index d357cd9..81ad90b 100644
--- a/src/components/services/LeadershipDevelopment.tsx
+++ b/src/components/services/LeadershipDevelopment.tsx
@@ -7,7 +7,7 @@ import { navigateTo } from '../Router';
 import { BrandedTag } from '../about/BrandedTag';
 import { PrimaryCTAButton } from '../PrimaryCTAButton';
 import { StandardCTAButton } from '../StandardCTAButton';
-import { 
+import {
   ArrowRight,
   CheckCircle,
   Settings,
@@ -37,6 +37,7 @@ import {
   Building,
   UserCheck
 } from 'lucide-react';
+import { TestimonialsSection } from '../TestimonialsSection';
 
 const targetAudience = [
   {
@@ -147,7 +148,7 @@ export function LeadershipDevelopment() {
       {/* Hero Section */}
       <section className="relative min-h-[85vh] flex flex-col">
         <div className="absolute inset-0 z-0">
-          <div 
+          <div
             className="w-full h-full bg-cover bg-center bg-no-repeat"
             style={{
               backgroundImage: `url('https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=1920&h=1080&fit=crop')`
@@ -161,8 +162,8 @@ export function LeadershipDevelopment() {
             <div className="max-w-4xl">
               {/* Back Navigation */}
               <div className="mb-8">
-                <Button 
-                  variant="ghost" 
+                <Button
+                  variant="ghost"
                   onClick={() => navigateTo('/services')}
                   className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
                 >
@@ -176,13 +177,13 @@ export function LeadershipDevelopment() {
                   Leadership Development
                 </h1>
               </div>
-              
+
               <p className="text-body-lg-white mb-8 max-w-3xl">
                 <strong>Transform senior executives into visionary leaders who drive 94% better strategic outcomes and organizational performance.</strong>
               </p>
 
               <div className="flex justify-start">
-                <PrimaryCTAButton 
+                <PrimaryCTAButton
                   text="Book a Consultation"
                   onClick={() => navigateTo('/contact?topic=leadership-development')}
                   ariaLabel="Book a consultation for leadership development"
@@ -217,7 +218,7 @@ export function LeadershipDevelopment() {
               <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                   <div className="flex flex-col items-center text-center">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -234,7 +235,7 @@ export function LeadershipDevelopment() {
 
                 <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                   <div className="flex flex-col items-center text-center">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -251,7 +252,7 @@ export function LeadershipDevelopment() {
 
                 <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                   <div className="flex flex-col items-center text-center">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -288,7 +289,7 @@ export function LeadershipDevelopment() {
                 <Card key={index} className="h-full hover:shadow-lg transition-all duration-300">
                   <CardContent className="p-8">
                     <div className="flex items-center gap-4 mb-6">
-                      <div 
+                      <div
                         className="w-16 h-16 rounded-2xl flex items-center justify-center"
                         style={{ backgroundColor: 'var(--color-primary)' }}
                       >
@@ -330,13 +331,13 @@ export function LeadershipDevelopment() {
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
               {useCases.map((useCase, index) => (
-                <div 
+                <div
                   key={index}
                   className="bg-white rounded-xl border border-gray-200 p-6 hover:border-[#04045B] hover:shadow-lg transition-all duration-300"
                 >
                   {/* Icon and Title */}
                   <div className="flex items-start gap-4 mb-4">
-                    <div 
+                    <div
                       className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -385,7 +386,7 @@ export function LeadershipDevelopment() {
                   <h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
                   <div className="space-y-8">
                     <div className="flex items-start gap-4">
-                      <div 
+                      <div
                         className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                         style={{ backgroundColor: '#04045B' }}
                       >
@@ -398,9 +399,9 @@ export function LeadershipDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4">
-                      <div 
+                      <div
                         className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                         style={{ backgroundColor: '#04045B' }}
                       >
@@ -413,9 +414,9 @@ export function LeadershipDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4">
-                      <div 
+                      <div
                         className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                         style={{ backgroundColor: '#04045B' }}
                       >
@@ -428,9 +429,9 @@ export function LeadershipDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4">
-                      <div 
+                      <div
                         className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                         style={{ backgroundColor: '#04045B' }}
                       >
@@ -459,7 +460,7 @@ export function LeadershipDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                       <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
                       <div className="flex-1">
@@ -469,7 +470,7 @@ export function LeadershipDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                       <div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
                       <div className="flex-1">
@@ -479,7 +480,7 @@ export function LeadershipDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                       <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
                       <div className="flex-1">
@@ -511,7 +512,7 @@ export function LeadershipDevelopment() {
 
             <div className="space-y-8">
               {programTimeline.map((phase, index) => (
-                <Card 
+                <Card
                   key={index}
                   className="border border-gray-200 hover:border-primary/20 transition-all duration-300 hover:shadow-lg"
                 >
@@ -521,7 +522,7 @@ export function LeadershipDevelopment() {
                       onClick={() => setExpandedPhase(expandedPhase === index ? null : index)}
                     >
                       <div className="flex items-start gap-4 flex-1">
-                        <div 
+                        <div
                           className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                           style={{ backgroundColor: 'var(--color-primary)' }}
                         >
@@ -597,7 +598,7 @@ export function LeadershipDevelopment() {
               {expectedOutcomes.map((outcome, index) => (
                 <Card key={index} className="text-center bg-white hover:shadow-lg transition-all duration-300">
                   <CardContent className="p-8">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6"
                       style={{ backgroundColor: 'var(--color-primary)' }}
                     >
@@ -638,221 +639,11 @@ export function LeadershipDevelopment() {
       </section>
 
       {/* 7. Client Examples / Testimonials - Hero Section Design */}
-      <section 
-        className="relative py-20 flex items-center"
-        style={{ backgroundColor: '#F7F7FD' }}
-      >
-        <div className="w-full section-margin-x">
-          {/* Branded Tag */}
-          <div className="flex justify-center mb-8">
-            <div className="inline-flex items-center gap-3 bg-[rgba(248,195,1,0.1)] px-4 py-2 rounded-lg">
-              <div className="w-[7px] h-[7px] bg-[#f8c301] rounded-full" />
-              <span className="text-[#26231a] text-base uppercase tracking-wider font-light">
-                SUCCESS STORIES
-              </span>
-            </div>
-          </div>
-
-          {/* Main heading */}
-          <h2 className="text-h2 text-center mb-6 text-[#26231A]">
-            What Our Leaders Say
-          </h2>
-
-          {/* Subtitle */}
-          <p className="text-center text-[#6F6F6F] text-lg max-w-2xl mx-auto mb-12">
-            Hear from executives and managers who have transformed their leadership approach through our comprehensive development programs.
-          </p>
-
-          {/* Navigation Controls */}
-          <div className="flex justify-end mb-6">
-            <div className="flex gap-2">
-              <button 
-                className="w-12 h-12 rounded-full border-2 border-[#E5E7EB] bg-white flex items-center justify-center hover:border-[#04045B] hover:bg-[#04045B] hover:text-white transition-all duration-300"
-                onClick={() => {
-                  const container = document.getElementById('testimonials-container');
-                  if (container) {
-                    container.scrollBy({ left: -400, behavior: 'smooth' });
-                  }
-                }}
-              >
-                <ArrowLeft className="w-5 h-5" />
-              </button>
-              <button 
-                className="w-12 h-12 rounded-full border-2 border-[#E5E7EB] bg-white flex items-center justify-center hover:border-[#04045B] hover:bg-[#04045B] hover:text-white transition-all duration-300"
-                onClick={() => {
-                  const container = document.getElementById('testimonials-container');
-                  if (container) {
-                    container.scrollBy({ left: 400, behavior: 'smooth' });
-                  }
-                }}
-              >
-                <ArrowRight className="w-5 h-5" />
-              </button>
-            </div>
-          </div>
-
-          {/* Testimonials Carousel */}
-          <div 
-            id="testimonials-container"
-            className="flex gap-6 overflow-x-auto scrollbar-hide pb-4"
-            style={{ scrollSnapType: 'x mandatory' }}
-          >
-            {/* Testimonial Card 1 */}
-            <div className="flex-shrink-0 w-[380px] bg-white rounded-xl shadow-lg overflow-hidden" style={{ scrollSnapAlign: 'start' }}>
-              <div className="relative h-48 bg-gradient-to-br from-[#04045B] to-[#030359]">
-                <div className="absolute top-4 left-4 bg-[#04045B] text-white px-2 py-1 rounded text-xs font-medium">
-                  VIDEO
-                </div>
-                <div className="absolute inset-0 flex items-center justify-center">
-                  <div className="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center">
-                    <ArrowRight className="w-8 h-8 text-[#04045B] ml-1" />
-                  </div>
-                </div>
-                <div className="absolute bottom-4 left-4 flex items-center gap-3">
-                  <ImageWithFallback
-                    src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=100&h=100&fit=crop&crop=face"
-                    alt="David Thompson"
-                    className="w-12 h-12 rounded-full border-2 border-white"
-                  />
-                  <div>
-                    <div className="text-white font-semibold text-sm">David Thompson</div>
-                    <div className="text-white/80 text-xs">Senior VP</div>
-                    <div className="text-white/60 text-xs">Enterprise Solutions</div>
-                  </div>
-                </div>
-                <div className="absolute bottom-4 right-4 flex gap-1">
-                  {[...Array(5)].map((_, i) => (
-                    <Star key={i} className="w-4 h-4 fill-[#F8C301] text-[#F8C301]" />
-                  ))}
-                </div>
-              </div>
-              <div className="p-6">
-                <p className="text-[#26231A] text-sm leading-relaxed">
-                  The personalized coaching and development programs have been game-changing for our organization's leadership pipeline and succession planning initiatives.
-                </p>
-              </div>
-            </div>
-
-            {/* Testimonial Card 2 */}
-            <div className="flex-shrink-0 w-[380px] bg-white rounded-xl shadow-lg overflow-hidden" style={{ scrollSnapAlign: 'start' }}>
-              <div className="relative h-48">
-                <ImageWithFallback
-                  src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=380&h=192&fit=crop"
-                  alt="Team meeting"
-                  className="w-full h-full object-cover"
-                />
-                <div className="absolute top-4 left-4 bg-[#04045B] text-white px-2 py-1 rounded text-xs font-medium">
-                  VIDEO
-                </div>
-                <div className="absolute inset-0 flex items-center justify-center">
-                  <div className="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center">
-                    <ArrowRight className="w-8 h-8 text-[#04045B] ml-1" />
-                  </div>
-                </div>
-                <div className="absolute bottom-4 left-4 flex items-center gap-3">
-                  <ImageWithFallback
-                    src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop&crop=face"
-                    alt="Lisa Wang"
-                    className="w-12 h-12 rounded-full border-2 border-white"
-                  />
-                  <div>
-                    <div className="text-white font-semibold text-sm">Lisa Wang</div>
-                    <div className="text-white/80 text-xs">Product Manager</div>
-                    <div className="text-white/60 text-xs">Digital Innovation</div>
-                  </div>
-                </div>
-                <div className="absolute bottom-4 right-4 flex gap-1">
-                  {[...Array(5)].map((_, i) => (
-                    <Star key={i} className="w-4 h-4 fill-[#F8C301] text-[#F8C301]" />
-                  ))}
-                </div>
-              </div>
-              <div className="p-6">
-                <p className="text-[#26231A] text-sm leading-relaxed">
-                  The leadership development program fundamentally transformed my approach to strategic leadership. Within 6 months, our strategic execution improved by 65%.
-                </p>
-              </div>
-            </div>
-
-            {/* Testimonial Card 3 */}
-            <div className="flex-shrink-0 w-[380px] bg-white rounded-xl shadow-lg overflow-hidden" style={{ scrollSnapAlign: 'start' }}>
-              <div className="relative h-48 bg-gradient-to-br from-[#04045B] to-[#030359]">
-                <div className="absolute top-4 left-4 bg-[#04045B] text-white px-2 py-1 rounded text-xs font-medium">
-                  VIDEO
-                </div>
-                <div className="absolute inset-0 flex items-center justify-center">
-                  <div className="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center">
-                    <ArrowRight className="w-8 h-8 text-[#04045B] ml-1" />
-                  </div>
-                </div>
-                <div className="absolute bottom-4 left-4 flex items-center gap-3">
-                  <ImageWithFallback
-                    src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face"
-                    alt="Robert Kim"
-                    className="w-12 h-12 rounded-full border-2 border-white"
-                  />
-                  <div>
-                    <div className="text-white font-semibold text-sm">Robert Kim</div>
-                    <div className="text-white/80 text-xs">Regional Director</div>
-                    <div className="text-white/60 text-xs">Global Corp</div>
-                  </div>
-                </div>
-                <div className="absolute bottom-4 right-4 flex gap-1">
-                  {[...Array(5)].map((_, i) => (
-                    <Star key={i} className="w-4 h-4 fill-[#F8C301] text-[#F8C301]" />
-                  ))}
-                </div>
-              </div>
-              <div className="p-6">
-                <p className="text-[#26231A] text-sm leading-relaxed">
-                  The leadership development programs provided by KLC have been instrumental in building a more cohesive and effective leadership team across our organization.
-                </p>
-              </div>
-            </div>
-
-            {/* Testimonial Card 4 */}
-            <div className="flex-shrink-0 w-[380px] bg-white rounded-xl shadow-lg overflow-hidden" style={{ scrollSnapAlign: 'start' }}>
-              <div className="relative h-48">
-                <ImageWithFallback
-                  src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=380&h=192&fit=crop"
-                  alt="Executive meeting"
-                  className="w-full h-full object-cover"
-                />
-                <div className="absolute top-4 left-4 bg-[#04045B] text-white px-2 py-1 rounded text-xs font-medium">
-                  VIDEO
-                </div>
-                <div className="absolute inset-0 flex items-center justify-center">
-                  <div className="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center">
-                    <ArrowRight className="w-8 h-8 text-[#04045B] ml-1" />
-                  </div>
-                </div>
-                <div className="absolute bottom-4 left-4 flex items-center gap-3">
-                  <ImageWithFallback
-                    src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=100&h=100&fit=crop&crop=face"
-                    alt="Sarah Chen"
-                    className="w-12 h-12 rounded-full border-2 border-white"
-                  />
-                  <div>
-                    <div className="text-white font-semibold text-sm">Sarah Chen</div>
-                    <div className="text-white/80 text-xs">Chief Executive Officer</div>
-                    <div className="text-white/60 text-xs">TechForward Solutions</div>
-                  </div>
-                </div>
-                <div className="absolute bottom-4 right-4 flex gap-1">
-                  {[...Array(5)].map((_, i) => (
-                    <Star key={i} className="w-4 h-4 fill-[#F8C301] text-[#F8C301]" />
-                  ))}
-                </div>
-              </div>
-              <div className="p-6">
-                <p className="text-[#26231A] text-sm leading-relaxed">
-                  KLC's leadership development programs have completely changed how we approach team building and strategic planning. The results speak for themselves.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
+      <TestimonialsSection
+        title="What Our Leaders Say"
+        subtitle="Hear from executives and managers who have transformed their leadership approach through our comprehensive development programs."
+        tagText="SUCCESS STORIES"
+      />
 
       {/* 8. CTA Section - Hero Section Design */}
       <section className="relative h-[700px] overflow-hidden">
@@ -863,10 +654,10 @@ export function LeadershipDevelopment() {
             alt="Professional team collaborating in modern office"
             className="w-full h-full object-cover"
           />
-          
+
           {/* Subtle dark overlay for overall image */}
           <div className="absolute inset-0 bg-black/30" />
-          
+
           {/* Gradient overlay for better text readability */}
           <div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
         </div>
@@ -874,7 +665,7 @@ export function LeadershipDevelopment() {
         {/* Content Container */}
         <div className="relative h-full flex items-center justify-end section-margin-x">
           {/* CTA Content Block */}
-          <div 
+          <div
             className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
             style={{ backgroundColor: 'var(--color-brand-primary)' }}
           >
@@ -883,8 +674,8 @@ export function LeadershipDevelopment() {
 
             {/* Main Headline */}
             <h2 className="text-h2-white mb-8">
-              Ready to transform your leadership? 
-              <span 
+              Ready to transform your leadership?
+              <span
                 className="italic"
                 style={{ color: 'var(--color-brand-accent)' }}
               >
@@ -894,7 +685,7 @@ export function LeadershipDevelopment() {
             </h2>
 
             {/* CTA Button */}
-            <StandardCTAButton 
+            <StandardCTAButton
               text="Schedule a Leadership Consultation"
               onClick={() => navigateTo('/contact?topic=leadership-development')}
               ariaLabel="Schedule a leadership development consultation"
diff --git a/src/components/services/LeadershipPipelineDevelopment.tsx b/src/components/services/LeadershipPipelineDevelopment.tsx
index 4b07c0c..cc333f2 100644
--- a/src/components/services/LeadershipPipelineDevelopment.tsx
+++ b/src/components/services/LeadershipPipelineDevelopment.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { 
+import {
   ArrowRight,
   CheckCircle,
   Settings,
@@ -38,6 +38,7 @@ import { BrandedTag } from '../about/BrandedTag';
 import { Card, CardContent } from '../ui/card';
 import { ImageWithFallback } from '../figma/ImageWithFallback';
 import { StandardCTAButton } from '../StandardCTAButton';
+import { TestimonialsSection } from '../TestimonialsSection';
 
 const targetAudience = [
   {
@@ -199,7 +200,7 @@ export function LeadershipPipelineDevelopment() {
       {/* Hero Section */}
       <section className="relative min-h-[85vh] flex flex-col">
         <div className="absolute inset-0 z-0">
-          <div 
+          <div
             className="w-full h-full bg-cover bg-center bg-no-repeat"
             style={{
               backgroundImage: `url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1920&h=1080&fit=crop')`
@@ -213,8 +214,8 @@ export function LeadershipPipelineDevelopment() {
             <div className="max-w-4xl">
               {/* Back Navigation */}
               <div className="mb-8">
-                <Button 
-                  variant="ghost" 
+                <Button
+                  variant="ghost"
                   onClick={() => navigateTo('/services')}
                   className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
                 >
@@ -228,13 +229,13 @@ export function LeadershipPipelineDevelopment() {
                   Leadership Pipeline Development
                 </h1>
               </div>
-              
+
               <p className="text-body-lg-white mb-8 max-w-3xl">
                 <strong>Build sustainable leadership pipelines that eliminate succession gaps and reduce external hiring by 75%.</strong>
               </p>
 
               <div className="flex justify-start">
-                <PrimaryCTAButton 
+                <PrimaryCTAButton
                   text="Book a Consultation"
                   onClick={() => navigateTo('/contact?topic=leadership-pipeline')}
                   ariaLabel="Book a consultation for leadership pipeline development"
@@ -269,7 +270,7 @@ export function LeadershipPipelineDevelopment() {
               <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                   <div className="flex flex-col items-center text-center">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -286,7 +287,7 @@ export function LeadershipPipelineDevelopment() {
 
                 <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                   <div className="flex flex-col items-center text-center">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -303,7 +304,7 @@ export function LeadershipPipelineDevelopment() {
 
                 <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                   <div className="flex flex-col items-center text-center">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -340,7 +341,7 @@ export function LeadershipPipelineDevelopment() {
                 <Card key={index} className="h-full hover:shadow-lg transition-all duration-300">
                   <CardContent className="p-8">
                     <div className="flex items-center gap-4 mb-6">
-                      <div 
+                      <div
                         className="w-16 h-16 rounded-2xl flex items-center justify-center"
                         style={{ backgroundColor: 'var(--color-primary)' }}
                       >
@@ -382,13 +383,13 @@ export function LeadershipPipelineDevelopment() {
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
               {useCases.map((useCase, index) => (
-                <div 
+                <div
                   key={index}
                   className="bg-white rounded-xl border border-gray-200 p-6 hover:border-[#04045B] hover:shadow-lg transition-all duration-300"
                 >
                   {/* Icon and Title */}
                   <div className="flex items-start gap-4 mb-4">
-                    <div 
+                    <div
                       className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -437,7 +438,7 @@ export function LeadershipPipelineDevelopment() {
                   <h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
                   <div className="space-y-8">
                     <div className="flex items-start gap-4">
-                      <div 
+                      <div
                         className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                         style={{ backgroundColor: '#04045B' }}
                       >
@@ -450,9 +451,9 @@ export function LeadershipPipelineDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4">
-                      <div 
+                      <div
                         className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                         style={{ backgroundColor: '#04045B' }}
                       >
@@ -465,9 +466,9 @@ export function LeadershipPipelineDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4">
-                      <div 
+                      <div
                         className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                         style={{ backgroundColor: '#04045B' }}
                       >
@@ -480,9 +481,9 @@ export function LeadershipPipelineDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4">
-                      <div 
+                      <div
                         className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                         style={{ backgroundColor: '#04045B' }}
                       >
@@ -511,7 +512,7 @@ export function LeadershipPipelineDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                       <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
                       <div className="flex-1">
@@ -521,7 +522,7 @@ export function LeadershipPipelineDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                       <div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
                       <div className="flex-1">
@@ -531,7 +532,7 @@ export function LeadershipPipelineDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                       <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
                       <div className="flex-1">
@@ -563,7 +564,7 @@ export function LeadershipPipelineDevelopment() {
 
             <div className="space-y-8">
               {programTimeline.map((phase, index) => (
-                <Card 
+                <Card
                   key={index}
                   className="border border-gray-200 hover:border-primary/20 transition-all duration-300 hover:shadow-lg"
                 >
@@ -573,7 +574,7 @@ export function LeadershipPipelineDevelopment() {
                       onClick={() => setExpandedPhase(expandedPhase === index ? null : index)}
                     >
                       <div className="flex items-start gap-4 flex-1">
-                        <div 
+                        <div
                           className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                           style={{ backgroundColor: 'var(--color-primary)' }}
                         >
@@ -649,7 +650,7 @@ export function LeadershipPipelineDevelopment() {
               {expectedOutcomes.map((outcome, index) => (
                 <Card key={index} className="text-center bg-white hover:shadow-lg transition-all duration-300">
                   <CardContent className="p-8">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6"
                       style={{ backgroundColor: 'var(--color-primary)' }}
                     >
@@ -690,174 +691,11 @@ export function LeadershipPipelineDevelopment() {
       </section>
 
       {/* 7. Client Examples / Testimonials - Hero Section Design */}
-      <section 
-        className="relative py-20 flex items-center"
-        style={{ backgroundColor: '#F7F7FD' }}
-      >
-        <div className="w-full section-margin-x">
-          {/* Branded Tag */}
-          <div className="flex justify-center mb-12">
-            <div className="inline-flex items-center gap-3 bg-[rgba(248,195,1,0.1)] px-4 py-2 rounded-lg">
-              <div className="w-[7px] h-[7px] bg-[#f8c301] rounded-full" />
-              <span className="text-[#26231a] text-lg lg:text-lg md:text-base sm:text-sm uppercase tracking-wider font-light">
-                Client Success Stories
-              </span>
-            </div>
-          </div>
-
-          {/* Main heading */}
-          <h2 
-            className="text-h2 leading-tight mb-8 text-center"
-            style={{ color: 'var(--color-brand-primary)' }}
-          >
-            Pipeline Development Success
-          </h2>
-
-          {/* Navigation Controls */}
-          <div className="flex justify-end mb-6">
-            <div className="flex gap-2">
-              <button 
-                className="w-12 h-12 rounded-full border-2 border-[#E5E7EB] bg-white flex items-center justify-center hover:border-[#04045B] hover:bg-[#04045B] hover:text-white transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
-                onClick={() => {
-                  const currentIndex = pipelineTestimonials.findIndex(t => t.id === currentTestimonial);
-                  const prevIndex = currentIndex > 0 ? currentIndex - 1 : pipelineTestimonials.length - 1;
-                  setCurrentTestimonial(pipelineTestimonials[prevIndex].id);
-                }}
-              >
-                <ArrowLeft className="w-5 h-5" />
-              </button>
-              <button 
-                className="w-12 h-12 rounded-full border-2 border-[#E5E7EB] bg-white flex items-center justify-center hover:border-[#04045B] hover:bg-[#04045B] hover:text-white transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
-                onClick={() => {
-                  const currentIndex = pipelineTestimonials.findIndex(t => t.id === currentTestimonial);
-                  const nextIndex = currentIndex < pipelineTestimonials.length - 1 ? currentIndex + 1 : 0;
-                  setCurrentTestimonial(pipelineTestimonials[nextIndex].id);
-                }}
-              >
-                <ArrowRight className="w-5 h-5" />
-              </button>
-            </div>
-          </div>
-
-          {/* Split Layout Container with Max Width - Exact Home Page Design */}
-          <div className="max-w-5xl mx-auto">
-            <div className="flex h-[400px] rounded-2xl overflow-hidden shadow-2xl">
-              {/* Left Side - Video Testimonial */}
-              <div 
-                className="flex-1 relative group cursor-pointer"
-                onClick={() => {
-                  // Video testimonial click handler
-                  console.log('Play video testimonial');
-                }}
-              >
-                <div className="relative w-full h-full overflow-hidden">
-                  {/* Video Thumbnail */}
-                  <ImageWithFallback
-                    src={currentTestimonialData.image}
-                    alt={currentTestimonialData.name}
-                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
-                  />
-                  
-                  {/* Dark overlay on hover */}
-                  <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-                  
-                  {/* Centered Play Button Overlay */}
-                  {currentTestimonialData.hasVideo && (
-                    <div className="absolute inset-0 flex items-center justify-center">
-                      <div className="flex items-center justify-center w-16 h-16 bg-white/90 backdrop-blur-sm rounded-full shadow-lg group-hover:scale-110 transition-all duration-300">
-                        <ArrowRight 
-                          className="w-7 h-7 ml-1 text-blue-600" 
-                          fill="currentColor"
-                        />
-                      </div>
-                    </div>
-                  )}
-
-                  {/* Watch Video Text */}
-                  {currentTestimonialData.hasVideo && (
-                    <div className="absolute bottom-4 left-4 text-white">
-                      <div className="bg-black/30 backdrop-blur-sm rounded-lg px-3 py-1">
-                        <span className="text-xs font-medium">▶ Video</span>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              {/* Right Side - Text Testimonial with White Background */}
-              <div 
-                className="flex-1 flex items-center justify-center p-8 relative"
-                style={{ backgroundColor: 'white' }}
-              >
-                {/* Large Opening Quotation Mark */}
-                <div 
-                  className="absolute top-4 left-4 text-3xl opacity-30"
-                  style={{ color: 'var(--color-brand-primary)' }}
-                >
-                  "
-                </div>
-
-                <div className="space-y-4 max-w-lg relative z-10">
-                  {/* Quote with Compact Typography */}
-                  <blockquote 
-                    className="text-lg leading-relaxed font-medium transition-all duration-500"
-                    style={{ 
-                      fontFamily: 'var(--font-family-brand)',
-                      color: 'var(--color-brand-black)'
-                    }}
-                  >
-                    {currentTestimonialData.quote}
-                  </blockquote>
-
-                  {/* Attribution */}
-                  <div className="space-y-1 pt-3">
-                    <div 
-                      className="text-base font-semibold transition-all duration-500"
-                      style={{ color: 'var(--color-brand-primary)' }}
-                    >
-                      {currentTestimonialData.name}
-                    </div>
-                    <div 
-                      className="text-xs transition-all duration-500"
-                      style={{ color: 'var(--color-brand-gray-muted)' }}
-                    >
-                      {currentTestimonialData.title} {currentTestimonialData.company && `at ${currentTestimonialData.company}`}
-                    </div>
-                  </div>
-
-                  {/* Testimonial Navigation Dots */}
-                  <div className="flex items-center space-x-2 pt-4">
-                    {pipelineTestimonials.map((testimonial, index) => (
-                      <button
-                        key={testimonial.id}
-                        className={`w-2 h-2 rounded-full transition-all duration-300 ${
-                          testimonial.id === currentTestimonial 
-                            ? 'opacity-100' 
-                            : 'opacity-30 hover:opacity-60'
-                        }`}
-                        style={{ 
-                          backgroundColor: testimonial.id === currentTestimonial 
-                            ? 'var(--color-brand-accent)' 
-                            : 'var(--color-brand-gray-muted)' 
-                        }}
-                        onClick={() => setCurrentTestimonial(testimonial.id)}
-                      />
-                    ))}
-                  </div>
-                </div>
-
-                {/* Large Closing Quotation Mark */}
-                <div 
-                  className="absolute bottom-4 right-4 text-3xl opacity-30"
-                  style={{ color: 'var(--color-brand-primary)' }}
-                >
-                  "
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
+      <TestimonialsSection
+        title="Pipeline Development Success"
+        subtitle=""
+        tagText="Client Success Stories"
+      />
 
       {/* 8. CTA Section - Hero Section Design */}
       <section className="relative h-[700px] overflow-hidden">
@@ -868,10 +706,10 @@ export function LeadershipPipelineDevelopment() {
             alt="Professional team collaborating in modern office"
             className="w-full h-full object-cover"
           />
-          
+
           {/* Subtle dark overlay for overall image */}
           <div className="absolute inset-0 bg-black/30" />
-          
+
           {/* Gradient overlay for better text readability */}
           <div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
         </div>
@@ -879,7 +717,7 @@ export function LeadershipPipelineDevelopment() {
         {/* Content Container */}
         <div className="relative h-full flex items-center justify-end section-margin-x">
           {/* CTA Content Block */}
-          <div 
+          <div
             className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
             style={{ backgroundColor: 'var(--color-brand-primary)' }}
           >
@@ -888,8 +726,8 @@ export function LeadershipPipelineDevelopment() {
 
             {/* Main Headline */}
             <h2 className="text-h2-white mb-8">
-              Ready to build your leadership pipeline? 
-              <span 
+              Ready to build your leadership pipeline?
+              <span
                 className="italic"
                 style={{ color: 'var(--color-brand-accent)' }}
               >
@@ -899,7 +737,7 @@ export function LeadershipPipelineDevelopment() {
             </h2>
 
             {/* CTA Button */}
-            <StandardCTAButton 
+            <StandardCTAButton
               text="Schedule a Pipeline Consultation"
               onClick={() => navigateTo('/contact?topic=leadership-pipeline')}
               ariaLabel="Schedule a leadership pipeline consultation"
diff --git a/src/components/services/ManagementDevelopment.tsx b/src/components/services/ManagementDevelopment.tsx
index 39da83b..5bdaddd 100644
--- a/src/components/services/ManagementDevelopment.tsx
+++ b/src/components/services/ManagementDevelopment.tsx
@@ -7,7 +7,7 @@ import { navigateTo } from '../Router';
 import { BrandedTag } from '../about/BrandedTag';
 import { PrimaryCTAButton } from '../PrimaryCTAButton';
 import { StandardCTAButton } from '../StandardCTAButton';
-import { 
+import {
   ArrowRight,
   CheckCircle,
   Settings,
@@ -36,6 +36,7 @@ import {
   UserCheck,
   Heart
 } from 'lucide-react';
+import { TestimonialsSection } from '../TestimonialsSection';
 
 const targetAudience = [
   {
@@ -146,7 +147,7 @@ export function ManagementDevelopment() {
       {/* Hero Section */}
       <section className="relative min-h-[85vh] flex flex-col">
         <div className="absolute inset-0 z-0">
-          <div 
+          <div
             className="w-full h-full bg-cover bg-center bg-no-repeat"
             style={{
               backgroundImage: `url('https://images.unsplash.com/photo-1552664730-d307ca884978?w=1920&h=1080&fit=crop')`
@@ -160,8 +161,8 @@ export function ManagementDevelopment() {
             <div className="max-w-4xl">
               {/* Back Navigation */}
               <div className="mb-8">
-                <Button 
-                  variant="ghost" 
+                <Button
+                  variant="ghost"
                   onClick={() => navigateTo('/services')}
                   className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
                 >
@@ -175,13 +176,13 @@ export function ManagementDevelopment() {
                   Management Development
                 </h1>
               </div>
-              
+
               <p className="text-body-lg-white mb-8 max-w-3xl">
                 <strong>Build exceptional managers who drive 89% better team performance and reduce turnover by 76%.</strong>
               </p>
 
               <div className="flex justify-start">
-                <PrimaryCTAButton 
+                <PrimaryCTAButton
                   text="Talk to Us"
                   onClick={() => navigateTo('/contact?topic=management-development')}
                   ariaLabel="Talk to us about management development"
@@ -216,7 +217,7 @@ export function ManagementDevelopment() {
               <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                   <div className="flex flex-col items-center text-center">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -233,7 +234,7 @@ export function ManagementDevelopment() {
 
                 <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                   <div className="flex flex-col items-center text-center">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -250,7 +251,7 @@ export function ManagementDevelopment() {
 
                 <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                   <div className="flex flex-col items-center text-center">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -287,7 +288,7 @@ export function ManagementDevelopment() {
                 <Card key={index} className="h-full hover:shadow-lg transition-all duration-300">
                   <CardContent className="p-8">
                     <div className="flex items-center gap-4 mb-6">
-                      <div 
+                      <div
                         className="w-16 h-16 rounded-2xl flex items-center justify-center"
                         style={{ backgroundColor: 'var(--color-primary)' }}
                       >
@@ -329,13 +330,13 @@ export function ManagementDevelopment() {
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
               {useCases.map((useCase, index) => (
-                <div 
+                <div
                   key={index}
                   className="bg-white rounded-xl border border-gray-200 p-6 hover:border-[#04045B] hover:shadow-lg transition-all duration-300"
                 >
                   {/* Icon and Title */}
                   <div className="flex items-start gap-4 mb-4">
-                    <div 
+                    <div
                       className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -384,7 +385,7 @@ export function ManagementDevelopment() {
                   <h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
                   <div className="space-y-8">
                     <div className="flex items-start gap-4">
-                      <div 
+                      <div
                         className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                         style={{ backgroundColor: '#04045B' }}
                       >
@@ -397,9 +398,9 @@ export function ManagementDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4">
-                      <div 
+                      <div
                         className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                         style={{ backgroundColor: '#04045B' }}
                       >
@@ -412,9 +413,9 @@ export function ManagementDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4">
-                      <div 
+                      <div
                         className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                         style={{ backgroundColor: '#04045B' }}
                       >
@@ -427,9 +428,9 @@ export function ManagementDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4">
-                      <div 
+                      <div
                         className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                         style={{ backgroundColor: '#04045B' }}
                       >
@@ -458,7 +459,7 @@ export function ManagementDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                       <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
                       <div className="flex-1">
@@ -468,7 +469,7 @@ export function ManagementDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                       <div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
                       <div className="flex-1">
@@ -478,7 +479,7 @@ export function ManagementDevelopment() {
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                       <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
                       <div className="flex-1">
@@ -510,7 +511,7 @@ export function ManagementDevelopment() {
 
             <div className="space-y-8">
               {programTimeline.map((phase, index) => (
-                <Card 
+                <Card
                   key={index}
                   className="border border-gray-200 hover:border-primary/20 transition-all duration-300 hover:shadow-lg"
                 >
@@ -520,7 +521,7 @@ export function ManagementDevelopment() {
                       onClick={() => setExpandedPhase(expandedPhase === index ? null : index)}
                     >
                       <div className="flex items-start gap-4 flex-1">
-                        <div 
+                        <div
                           className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                           style={{ backgroundColor: 'var(--color-primary)' }}
                         >
@@ -596,7 +597,7 @@ export function ManagementDevelopment() {
               {expectedOutcomes.map((outcome, index) => (
                 <Card key={index} className="text-center bg-white hover:shadow-lg transition-all duration-300">
                   <CardContent className="p-8">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6"
                       style={{ backgroundColor: 'var(--color-primary)' }}
                     >
@@ -637,97 +638,11 @@ export function ManagementDevelopment() {
       </section>
 
       {/* 7. Client Examples / Testimonials - Hero Section Design */}
-      <section 
-        className="relative py-20 flex items-center"
-        style={{ backgroundColor: '#F7F7FD' }}
-      >
-        <div className="w-full section-margin-x">
-          {/* Branded Tag */}
-          <div className="flex justify-center mb-12">
-            <div className="inline-flex items-center gap-3 bg-[rgba(248,195,1,0.1)] px-4 py-2 rounded-lg">
-              <div className="w-[7px] h-[7px] bg-[#f8c301] rounded-full" />
-              <span className="text-[#26231a] text-lg lg:text-lg md:text-base sm:text-sm uppercase tracking-wider font-light">
-                Client Success Stories
-              </span>
-            </div>
-          </div>
-
-          {/* Main heading */}
-          <h2 
-            className="text-h2 leading-tight mb-12 text-center"
-            style={{ color: 'var(--color-brand-primary)' }}
-          >
-            Management Development Success
-          </h2>
-
-          {/* Split Layout Container with Max Width */}
-          <div className="max-w-5xl mx-auto">
-            <div className="flex h-[400px] rounded-2xl overflow-hidden shadow-2xl">
-              {/* Left Side - Image */}
-              <div className="flex-1 relative">
-                <div className="relative w-full h-full overflow-hidden">
-                  <ImageWithFallback
-                    src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=800&fit=crop"
-                    alt="Management Development Success"
-                    className="w-full h-full object-cover"
-                  />
-                </div>
-              </div>
-
-              {/* Right Side - Quote Content with White Background */}
-              <div 
-                className="flex-1 flex items-center justify-center p-8 relative"
-                style={{ backgroundColor: 'white' }}
-              >
-                {/* Large Opening Quotation Mark */}
-                <div 
-                  className="absolute top-4 left-4 text-3xl opacity-30"
-                  style={{ color: 'var(--color-brand-primary)' }}
-                >
-                  "
-                </div>
-
-                <div className="space-y-4 max-w-lg relative z-10">
-                  {/* Quote */}
-                  <blockquote 
-                    className="text-lg leading-relaxed font-medium"
-                    style={{ 
-                      fontFamily: 'var(--font-family-base)',
-                      color: 'var(--color-brand-black)'
-                    }}
-                  >
-                    Our Management Development program transformed our middle management layer. Within 9 months, we saw 89% improvement in team performance metrics and a 76% reduction in turnover. Most importantly, our managers now have the confidence and skills to lead effectively.
-                  </blockquote>
-
-                  {/* Attribution */}
-                  <div className="space-y-1 pt-3">
-                    <div 
-                      className="text-base font-semibold"
-                      style={{ color: 'var(--color-brand-primary)' }}
-                    >
-                      Retail Chain Organization
-                    </div>
-                    <div 
-                      className="text-xs"
-                      style={{ color: 'var(--color-brand-gray-muted)' }}
-                    >
-                      800+ employees • 120 managers trained • 89% team performance improvement
-                    </div>
-                  </div>
-                </div>
-
-                {/* Large Closing Quotation Mark */}
-                <div 
-                  className="absolute bottom-4 right-4 text-3xl opacity-30"
-                  style={{ color: 'var(--color-brand-primary)' }}
-                >
-                  "
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
+      <TestimonialsSection
+        title="Management Development Success"
+        subtitle=""
+        tagText="Client Success Stories"
+      />
 
       {/* 8. CTA Section - Hero Section Design */}
       <section className="relative h-[700px] overflow-hidden">
@@ -738,10 +653,10 @@ export function ManagementDevelopment() {
             alt="Professional team collaborating in modern office"
             className="w-full h-full object-cover"
           />
-          
+
           {/* Subtle dark overlay for overall image */}
           <div className="absolute inset-0 bg-black/30" />
-          
+
           {/* Gradient overlay for better text readability */}
           <div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
         </div>
@@ -749,7 +664,7 @@ export function ManagementDevelopment() {
         {/* Content Container */}
         <div className="relative h-full flex items-center justify-end section-margin-x">
           {/* CTA Content Block */}
-          <div 
+          <div
             className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
             style={{ backgroundColor: 'var(--color-brand-primary)' }}
           >
@@ -758,8 +673,8 @@ export function ManagementDevelopment() {
 
             {/* Main Headline */}
             <h2 className="text-h2-white mb-8">
-              Ready to build exceptional managers? 
-              <span 
+              Ready to build exceptional managers?
+              <span
                 className="italic"
                 style={{ color: 'var(--color-brand-accent)' }}
               >
@@ -769,7 +684,7 @@ export function ManagementDevelopment() {
             </h2>
 
             {/* CTA Button */}
-            <StandardCTAButton 
+            <StandardCTAButton
               text="Schedule a Management Consultation"
               onClick={() => navigateTo('/contact?topic=management-development')}
               ariaLabel="Schedule a management development consultation"