pagination added in artical and other changes
This commit is contained in:
priyanshuvish
@@ -198,73 +198,71 @@ export function CultureCompetence() {
|
||||
{/* 1. What Is This Service */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="w-full section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<BrandedTag text="What Is This Service?" />
|
||||
<h2 className="text-h2 mb-8 text-[#26231A]">Culture & Competence Transformation</h2>
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<p className="text-body-lg text-[#6F6F6F] leading-relaxed">
|
||||
Culture & Competence Consulting is a comprehensive approach to transforming organizational culture and building strategic competencies that drive business performance. Our methodology combines culture assessment, competency development, and change management to create high-performing, engaged organizations.
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<BrandedTag text="What Is This Service?" />
|
||||
<h2 className="text-h2 mb-8 text-[#26231A]">Culture & Competence Transformation</h2>
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<p className="text-body-lg text-[#6F6F6F] leading-relaxed">
|
||||
Culture & Competence Consulting is a comprehensive approach to transforming organizational culture and building strategic competencies that drive business performance. Our methodology combines culture assessment, competency development, and change management to create high-performing, engaged organizations.
|
||||
</p>
|
||||
<div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
|
||||
<p className="text-body-lg text-[#26231A] leading-relaxed">
|
||||
<span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> Many organizations struggle with misaligned cultures that hinder performance, low engagement scores, and competency gaps that prevent strategic goal achievement. Our consulting helps organizations build cultures that support their strategy while developing critical capabilities for success.
|
||||
</p>
|
||||
<div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
|
||||
<p className="text-body-lg text-[#26231A] leading-relaxed">
|
||||
<span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> Many organizations struggle with misaligned cultures that hinder performance, low engagement scores, and competency gaps that prevent strategic goal achievement. Our consulting helps organizations build cultures that support their strategy while developing critical capabilities for success.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<Heart className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
Culture Transformation
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Align organizational culture with business strategy and values for sustainable success
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<Heart className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
Culture Transformation
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Align organizational culture with business strategy and values for sustainable success
|
||||
</p>
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<Target className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
Competency Development
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Build strategic capabilities and organizational competencies for competitive advantage
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<Target className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
Competency Development
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Build strategic capabilities and organizational competencies for competitive advantage
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<TrendingUp className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
73% Performance Impact
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Proven results with 73% improvement in engagement and business performance metrics
|
||||
</p>
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<TrendingUp className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
73% Performance Impact
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Proven results with 73% improvement in engagement and business performance metrics
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -370,7 +368,7 @@ export function CultureCompetence() {
|
||||
{/* 4. Our Approach */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="w-full section-margin-x">
|
||||
<div className="w-full">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<BrandedTag text="Our Approach" />
|
||||
@@ -380,116 +378,371 @@ export function CultureCompetence() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
|
||||
{/* Left Column - Core Frameworks */}
|
||||
<div>
|
||||
<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
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<Eye className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Culture Assessment & Diagnosis</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Comprehensive evaluation of current culture, values alignment, and engagement drivers
|
||||
{/* Flowchart Container with Connecting Lines */}
|
||||
<div className="relative mb-16 flex flex-col items-center">
|
||||
{/* Desktop: Horizontal Flowchart */}
|
||||
<div className="hidden lg:block w-full max-w-5xl">
|
||||
<div className="relative">
|
||||
{/* Row 1: Frameworks, Pedagogy, Delivery */}
|
||||
<div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
|
||||
{/* Frameworks */}
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Compass className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Culture Frameworks</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Diagnostic models and competency frameworks for transformation
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Culture Assessment
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Competency Models
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Values Alignment
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow 1→2 */}
|
||||
<div className="absolute top-1/2 left-[calc(33.33%-2rem)] -translate-y-1/2 z-0 flex items-center">
|
||||
<div className="w-16 h-0.5 bg-[#F8C301]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#F8C301] -ml-1" />
|
||||
</div>
|
||||
|
||||
{/* Pedagogy */}
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<Brain className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Change management and organizational learning approaches
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Experiential Learning
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Change Management
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Organizational Learning
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow 2→3 */}
|
||||
<div className="absolute top-1/2 left-[calc(66.66%-2rem)] -translate-y-1/2 z-0 flex items-center">
|
||||
<div className="w-16 h-0.5 bg-[#04045B]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
|
||||
</div>
|
||||
|
||||
{/* Delivery Modes */}
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Settings className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Multiple formats for culture and competency transformation
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Culture Workshops
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Leadership Alignment
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Development Programs
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<Target className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Strategic Competency Modeling</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Strategic competency frameworks aligned with business objectives and future needs
|
||||
</p>
|
||||
{/* Vertical Connector - Center Flow Down */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-0.5 h-12 bg-[#F8C301]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<Settings className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Change Management Integration</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Structured change approach for sustainable culture and competency transformation
|
||||
{/* Row 2: Assessment, Coaching */}
|
||||
<div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
|
||||
{/* Assessment Integration */}
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<BarChart3 className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Comprehensive measurement to track culture transformation
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Engagement Surveys
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Culture Analytics
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Progress Tracking
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow 4→5 */}
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 flex items-center">
|
||||
<div className="w-16 h-0.5 bg-[#04045B]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
|
||||
</div>
|
||||
|
||||
{/* Coaching Integration */}
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Heart className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Leadership support for culture change and capability building
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Executive Coaching
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Team Coaching
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Change Leadership
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<BarChart3 className="w-5 h-5 text-white" />
|
||||
{/* Final Vertical Connector - Center Flow Down to Outcome */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-0.5 h-12 bg-[#04045B]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Measurement & Analytics</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Robust measurement framework to track progress and demonstrate impact
|
||||
</div>
|
||||
|
||||
{/* Row 3: Expected Outcome - Centered */}
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="bg-[#04045B] text-white rounded-xl p-8 w-full max-w-2xl border-4 border-[#F8C301] shadow-xl">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
|
||||
<h3 className="text-h4 text-white">Expected Outcome</h3>
|
||||
</div>
|
||||
<p className="text-body text-white mb-4">
|
||||
A thriving organizational culture aligned with strategy, powered by competencies that drive performance and engagement.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-[#F8C301]">
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
<span className="text-body text-white">Sustainable Culture Transformation</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Delivery Modes */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-8">
|
||||
<h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Support</h4>
|
||||
<div className="space-y-6">
|
||||
<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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Culture Workshops</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Interactive sessions to define and embed desired organizational culture
|
||||
</p>
|
||||
{/* Tablet & Mobile: Vertical Flowchart */}
|
||||
<div className="lg:hidden space-y-8">
|
||||
{/* Frameworks */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Compass className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Culture Frameworks</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Diagnostic models and competency frameworks for transformation
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Culture Assessment
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Competency Models
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Values Alignment
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
|
||||
</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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Competency Development</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Targeted programs to build critical organizational capabilities and skills
|
||||
</p>
|
||||
{/* Pedagogy */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<Brain className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Change management and organizational learning approaches
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Experiential Learning
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Change Management
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Organizational Learning
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
|
||||
</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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Leadership Alignment</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Executive sessions to ensure leadership commitment and cultural modeling
|
||||
</p>
|
||||
{/* Delivery Modes */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Settings className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Multiple formats for culture and competency transformation
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Culture Workshops
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Leadership Alignment
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Development Programs
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
|
||||
</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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Continuous Monitoring</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Ongoing assessment and adjustment to ensure sustainable transformation
|
||||
</p>
|
||||
{/* Assessment Integration */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<BarChart3 className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Comprehensive measurement to track culture transformation
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Engagement Surveys
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Culture Analytics
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Progress Tracking
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Coaching Integration */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Heart className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Leadership support for culture change and capability building
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Executive Coaching
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Team Coaching
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Change Leadership
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expected Outcome */}
|
||||
<div className="bg-[#04045B] text-white rounded-xl p-8 border-4 border-[#F8C301] shadow-xl">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
|
||||
<h3 className="text-h4 text-white">Expected Outcome</h3>
|
||||
</div>
|
||||
<p className="text-body text-white mb-4">
|
||||
A thriving organizational culture aligned with strategy, powered by competencies that drive performance and engagement.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-[#F8C301]">
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
<span className="text-body text-white">Sustainable Culture Transformation</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Framework Effectiveness */}
|
||||
<div className="bg-gray-50 rounded-xl p-8">
|
||||
<div className="text-center mb-8">
|
||||
<h3 className="text-h3 text-[#26231A] mb-4">Framework Effectiveness</h3>
|
||||
<p className="text-body text-[#6F6F6F] max-w-2xl mx-auto">
|
||||
Our systematic approach delivers measurable results across key culture and competency metrics.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="text-center bg-white rounded-lg p-6">
|
||||
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<Target className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="text-h2 text-[#04045B] mb-2">87%</div>
|
||||
<p className="text-body text-[#6F6F6F]">Culture Alignment Increase</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center bg-white rounded-lg p-6">
|
||||
<div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<Users className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="text-h2 text-[#04045B] mb-2">91%</div>
|
||||
<p className="text-body text-[#6F6F6F]">Employee Engagement Growth</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center bg-white rounded-lg p-6">
|
||||
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<TrendingUp className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="text-h2 text-[#04045B] mb-2">82%</div>
|
||||
<p className="text-body text-[#6F6F6F]">Competency Development Impact</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -199,73 +199,71 @@ export function ExecutiveCoaching() {
|
||||
{/* 1. What Is This Service */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="w-full section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<BrandedTag text="What Is This Service?" />
|
||||
<h2 className="text-h2 mb-8 text-[#26231A]">Personalized Leadership Development</h2>
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<p className="text-body-lg text-[#6F6F6F] leading-relaxed">
|
||||
Coaching & Mentoring is a personalized leadership development approach that combines one-on-one executive coaching with strategic mentoring relationships. Our certified coaches work with leaders to enhance their effectiveness, navigate complex challenges, and accelerate their professional growth through tailored development experiences.
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<BrandedTag text="What Is This Service?" />
|
||||
<h2 className="text-h2 mb-8 text-[#26231A]">Personalized Leadership Development</h2>
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<p className="text-body-lg text-[#6F6F6F] leading-relaxed">
|
||||
Coaching & Mentoring is a personalized leadership development approach that combines one-on-one executive coaching with strategic mentoring relationships. Our certified coaches work with leaders to enhance their effectiveness, navigate complex challenges, and accelerate their professional growth through tailored development experiences.
|
||||
</p>
|
||||
<div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
|
||||
<p className="text-body-lg text-[#26231A] leading-relaxed">
|
||||
<span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> Many talented leaders struggle to reach their full potential due to lack of personalized guidance, limited feedback, and insufficient support during critical transitions. Our coaching and mentoring programs provide the individualized attention and expertise needed for exceptional leadership development.
|
||||
</p>
|
||||
<div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
|
||||
<p className="text-body-lg text-[#26231A] leading-relaxed">
|
||||
<span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> Many talented leaders struggle to reach their full potential due to lack of personalized guidance, limited feedback, and insufficient support during critical transitions. Our coaching and mentoring programs provide the individualized attention and expertise needed for exceptional leadership development.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<MessageCircle className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
Executive Coaching
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Personalized coaching for senior leaders and executives to enhance performance and impact
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<MessageCircle className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
Executive Coaching
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Personalized coaching for senior leaders and executives to enhance performance and impact
|
||||
</p>
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<Network className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
Strategic Mentoring
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Long-term mentoring relationships for career development and leadership growth
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<Network className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
Strategic Mentoring
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Long-term mentoring relationships for career development and leadership growth
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<TrendingUp className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
87% Success Rate
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Proven track record with 87% of leaders reporting improved effectiveness and performance
|
||||
</p>
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<TrendingUp className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
87% Success Rate
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Proven track record with 87% of leaders reporting improved effectiveness and performance
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -375,75 +373,381 @@ export function ExecutiveCoaching() {
|
||||
{/* 4. Our Approach */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<BrandedTag text="Our Approach" />
|
||||
<h2 className="text-h2 mb-8">Comprehensive Coaching & Mentoring Framework</h2>
|
||||
<p className="text-body-lg text-muted max-w-3xl mx-auto">
|
||||
Our proven methodology combines individual coaching, strategic mentoring, and continuous development for sustainable leadership growth.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<BrandedTag text="Our Approach" />
|
||||
<h2 className="text-h2 mb-8 text-[#26231A]">Comprehensive Coaching & Mentoring Framework</h2>
|
||||
<p className="text-body-lg text-[#6F6F6F] max-w-3xl mx-auto">
|
||||
Our proven methodology combines individual coaching, strategic mentoring, and continuous development for sustainable leadership growth.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h3 className="text-h3 mb-6">Core Frameworks & Methodologies</h3>
|
||||
<div className="space-y-6">
|
||||
<div className="flex gap-4">
|
||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Eye className="w-4 h-4 text-white" />
|
||||
{/* Flowchart Container with Connecting Lines */}
|
||||
<div className="relative mb-16 flex flex-col items-center">
|
||||
{/* Desktop: Horizontal Flowchart */}
|
||||
<div className="hidden lg:block w-full max-w-5xl">
|
||||
<div className="relative">
|
||||
{/* Row 1: Frameworks, Pedagogy, Delivery */}
|
||||
<div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
|
||||
{/* Frameworks */}
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Eye className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Frameworks</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Comprehensive profiling and leadership capability evaluation
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Leadership Profiling
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
360° Feedback
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Psychometric Tools
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow 1→2 */}
|
||||
<div className="absolute top-1/2 left-[calc(33.33%-2rem)] -translate-y-1/2 z-0 flex items-center">
|
||||
<div className="w-16 h-0.5 bg-[#F8C301]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#F8C301] -ml-1" />
|
||||
</div>
|
||||
|
||||
{/* Pedagogy */}
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<Brain className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Pedagogy</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Evidence-based coaching methodologies for transformation
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Solution-Focused
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Strengths-Based
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Goal-Oriented
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow 2→3 */}
|
||||
<div className="absolute top-1/2 left-[calc(66.66%-2rem)] -translate-y-1/2 z-0 flex items-center">
|
||||
<div className="w-16 h-0.5 bg-[#04045B]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
|
||||
</div>
|
||||
|
||||
{/* Delivery Modes */}
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Settings className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Flexible coaching formats for executive schedules
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
One-on-One Coaching
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Virtual & In-Person
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Mentoring Circles
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-h4 mb-2">Leadership Assessment & Profiling</h4>
|
||||
<p className="text-body text-muted">Comprehensive evaluation of leadership strengths, development areas, and growth potential</p>
|
||||
|
||||
{/* Vertical Connector - Center Flow Down */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-0.5 h-12 bg-[#F8C301]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 2: Assessment, Coaching */}
|
||||
<div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
|
||||
{/* Progress Tracking */}
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<BarChart3 className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Progress Tracking</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Continuous measurement of development and impact
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Goal Achievement
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Behavior Change
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Impact Metrics
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow 4→5 */}
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 flex items-center">
|
||||
<div className="w-16 h-0.5 bg-[#04045B]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
|
||||
</div>
|
||||
|
||||
{/* Mentoring Integration */}
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Network className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Mentoring Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Strategic guidance for long-term career development
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Senior Mentors
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Peer Networks
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Career Strategy
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Final Vertical Connector - Center Flow Down to Outcome */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-0.5 h-12 bg-[#04045B]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 3: Expected Outcome - Centered */}
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="bg-[#04045B] text-white rounded-xl p-8 w-full max-w-2xl border-4 border-[#F8C301] shadow-xl">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
|
||||
<h3 className="text-h4 text-white">Expected Outcome</h3>
|
||||
</div>
|
||||
<p className="text-body text-white mb-4">
|
||||
Accelerated leadership development with sustained behavior change, enhanced performance, and career advancement.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-[#F8C301]">
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
<span className="text-body text-white">Transformational Leadership Growth</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<User className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
|
||||
{/* Tablet & Mobile: Vertical Flowchart */}
|
||||
<div className="lg:hidden space-y-8">
|
||||
{/* Frameworks */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Eye className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Frameworks</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Comprehensive profiling and leadership capability evaluation
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Leadership Profiling
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
360° Feedback
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Psychometric Tools
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-h4 mb-2">Personalized Coaching Sessions</h4>
|
||||
<p className="text-body text-muted">One-on-one coaching tailored to individual needs, goals, and development priorities</p>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Network className="w-4 h-4 text-white" />
|
||||
|
||||
{/* Pedagogy */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<Brain className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Pedagogy</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Evidence-based coaching methodologies for transformation
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Solution-Focused
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Strengths-Based
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Goal-Oriented
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-h4 mb-2">Strategic Mentoring Relationships</h4>
|
||||
<p className="text-body text-muted">Long-term mentoring partnerships for career guidance and strategic development</p>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<BarChart3 className="w-4 h-4 text-white" />
|
||||
|
||||
{/* Delivery Modes */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Settings className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Flexible coaching formats for executive schedules
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
One-on-One Coaching
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Virtual & In-Person
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Mentoring Circles
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-h4 mb-2">Progress Tracking & Measurement</h4>
|
||||
<p className="text-body text-muted">Continuous assessment and measurement of development progress and impact</p>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Tracking */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<BarChart3 className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Progress Tracking</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Continuous measurement of development and impact
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Goal Achievement
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Behavior Change
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Impact Metrics
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mentoring Integration */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Network className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Mentoring Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Strategic guidance for long-term career development
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Senior Mentors
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Peer Networks
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Career Strategy
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expected Outcome */}
|
||||
<div className="bg-[#04045B] text-white rounded-xl p-8 border-4 border-[#F8C301] shadow-xl">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
|
||||
<h3 className="text-h4 text-white">Expected Outcome</h3>
|
||||
</div>
|
||||
<p className="text-body text-white mb-4">
|
||||
Accelerated leadership development with sustained behavior change, enhanced performance, and career advancement.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-[#F8C301]">
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
<span className="text-body text-white">Transformational Leadership Growth</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white p-8 rounded-2xl shadow-lg">
|
||||
<h4 className="text-h4 mb-6">Delivery Modes & Support</h4>
|
||||
<div className="space-y-4">
|
||||
<div className="border-l-4 border-primary pl-4">
|
||||
<h5 className="font-semibold text-body mb-1">Individual Coaching</h5>
|
||||
<p className="text-small text-muted">One-on-one sessions with certified executive coaches</p>
|
||||
|
||||
{/* Framework Effectiveness */}
|
||||
<div className="bg-gray-50 rounded-xl p-8">
|
||||
<div className="text-center mb-8">
|
||||
<h3 className="text-h3 text-[#26231A] mb-4">Framework Effectiveness</h3>
|
||||
<p className="text-body text-[#6F6F6F] max-w-2xl mx-auto">
|
||||
Our systematic approach delivers measurable results across key coaching and mentoring metrics.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="text-center bg-white rounded-lg p-6">
|
||||
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<Target className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="text-h2 text-[#04045B] mb-2">94%</div>
|
||||
<p className="text-body text-[#6F6F6F]">Goal Achievement Rate</p>
|
||||
</div>
|
||||
<div className="border-l-4 border-accent pl-4">
|
||||
<h5 className="font-semibold text-body mb-1">360-Degree Feedback</h5>
|
||||
<p className="text-small text-muted">Comprehensive feedback from peers, supervisors, and direct reports</p>
|
||||
|
||||
<div className="text-center bg-white rounded-lg p-6">
|
||||
<div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<Users className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="text-h2 text-[#04045B] mb-2">88%</div>
|
||||
<p className="text-body text-[#6F6F6F]">Leadership Effectiveness Growth</p>
|
||||
</div>
|
||||
<div className="border-l-4 border-primary pl-4">
|
||||
<h5 className="font-semibold text-body mb-1">Mentoring Circles</h5>
|
||||
<p className="text-small text-muted">Group mentoring sessions with peer leaders and senior executives</p>
|
||||
</div>
|
||||
<div className="border-l-4 border-accent pl-4">
|
||||
<h5 className="font-semibold text-body mb-1">Virtual & In-Person Options</h5>
|
||||
<p className="text-small text-muted">Flexible delivery modes to accommodate busy executive schedules</p>
|
||||
|
||||
<div className="text-center bg-white rounded-lg p-6">
|
||||
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<TrendingUp className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="text-h2 text-[#04045B] mb-2">86%</div>
|
||||
<p className="text-body text-[#6F6F6F]">Career Advancement Success</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -198,7 +198,6 @@ export function LeadershipDevelopment() {
|
||||
{/* 1. What Is This Service */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="w-full section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<BrandedTag text="What Is This Service?" />
|
||||
@@ -268,7 +267,6 @@ export function LeadershipDevelopment() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -370,7 +368,7 @@ export function LeadershipDevelopment() {
|
||||
{/* 4. Our Approach */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="w-full section-margin-x">
|
||||
<div className="w-full">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<BrandedTag text="Our Approach" />
|
||||
@@ -380,116 +378,371 @@ export function LeadershipDevelopment() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
|
||||
{/* Left Column - Core Frameworks */}
|
||||
<div>
|
||||
<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
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<Eye className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">360-Degree Leadership Assessment</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Comprehensive evaluation of leadership capabilities, strategic readiness, and executive presence
|
||||
{/* Flowchart Container with Connecting Lines */}
|
||||
<div className="relative mb-16 flex flex-col items-center">
|
||||
{/* Desktop: Horizontal Flowchart */}
|
||||
<div className="hidden lg:block w-full max-w-5xl">
|
||||
<div className="relative">
|
||||
{/* Row 1: Frameworks, Pedagogy, Delivery */}
|
||||
<div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
|
||||
{/* Frameworks */}
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Lightbulb className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Strategic Frameworks</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Executive leadership models and strategic thinking frameworks
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Leadership Models
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Strategic Thinking
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Vision Creation
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow 1→2 */}
|
||||
<div className="absolute top-1/2 left-[calc(33.33%-2rem)] -translate-y-1/2 z-0 flex items-center">
|
||||
<div className="w-16 h-0.5 bg-[#F8C301]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#F8C301] -ml-1" />
|
||||
</div>
|
||||
|
||||
{/* Pedagogy */}
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<Brain className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Executive development through experiential and action learning
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Experiential Learning
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Action Learning
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Peer Learning
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow 2→3 */}
|
||||
<div className="absolute top-1/2 left-[calc(66.66%-2rem)] -translate-y-1/2 z-0 flex items-center">
|
||||
<div className="w-16 h-0.5 bg-[#04045B]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
|
||||
</div>
|
||||
|
||||
{/* Delivery Modes */}
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Settings className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Flexible formats designed for executive schedules
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Executive Workshops
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Leadership Simulations
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Strategic Projects
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<Brain className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Strategic Leadership Development</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Frameworks for strategic thinking, vision creation, and organizational transformation
|
||||
</p>
|
||||
{/* Vertical Connector - Center Flow Down */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-0.5 h-12 bg-[#F8C301]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<Network className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Executive Coaching Integration</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
One-on-one coaching support with experienced executive coaches throughout the journey
|
||||
{/* Row 2: Assessment, Coaching */}
|
||||
<div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
|
||||
{/* Assessment Integration */}
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<BarChart3 className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Comprehensive evaluation to measure executive readiness
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
360° Feedback
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Leadership Assessment
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Impact Measurement
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow 4→5 */}
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 flex items-center">
|
||||
<div className="w-16 h-0.5 bg-[#04045B]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
|
||||
</div>
|
||||
|
||||
{/* Coaching Integration */}
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<UserCheck className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Personalized executive coaching throughout development
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Executive Coaching
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Strategic Advisement
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Peer Coaching
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<BarChart3 className="w-5 h-5 text-white" />
|
||||
{/* Final Vertical Connector - Center Flow Down to Outcome */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-0.5 h-12 bg-[#04045B]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Real-World Application</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Strategic projects and business challenges that drive immediate organizational impact
|
||||
</div>
|
||||
|
||||
{/* Row 3: Expected Outcome - Centered */}
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="bg-[#04045B] text-white rounded-xl p-8 w-full max-w-2xl border-4 border-[#F8C301] shadow-xl">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
|
||||
<h3 className="text-h4 text-white">Expected Outcome</h3>
|
||||
</div>
|
||||
<p className="text-body text-white mb-4">
|
||||
Transformational executive leaders with strategic capability, executive presence, and proven business impact.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-[#F8C301]">
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
<span className="text-body text-white">Enhanced Leadership Effectiveness</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Delivery Modes */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-8">
|
||||
<h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Assessments</h4>
|
||||
<div className="space-y-6">
|
||||
<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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Executive Workshops</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Intensive strategic leadership workshops with peer learning and expert facilitation
|
||||
</p>
|
||||
{/* Tablet & Mobile: Vertical Flowchart */}
|
||||
<div className="lg:hidden space-y-8">
|
||||
{/* Frameworks */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Lightbulb className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Strategic Frameworks</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Executive leadership models and strategic thinking frameworks
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Leadership Models
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Strategic Thinking
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Vision Creation
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
|
||||
</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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Leadership Simulations</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Business simulations and strategic decision-making exercises for practical application
|
||||
</p>
|
||||
{/* Pedagogy */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<Brain className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Executive development through experiential and action learning
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Experiential Learning
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Action Learning
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Peer Learning
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
|
||||
</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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Executive Coaching</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Individual coaching sessions with experienced executive coaches for personalized development
|
||||
</p>
|
||||
{/* Delivery Modes */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Settings className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Flexible formats designed for executive schedules
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Executive Workshops
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Leadership Simulations
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Strategic Projects
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
|
||||
</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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Impact Measurement</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Ongoing assessment and measurement of leadership effectiveness and business impact
|
||||
</p>
|
||||
{/* Assessment Integration */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<BarChart3 className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Comprehensive evaluation to measure executive readiness
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
360° Feedback
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Leadership Assessment
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Impact Measurement
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Coaching Integration */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<UserCheck className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Personalized executive coaching throughout development
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Executive Coaching
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Strategic Advisement
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Peer Coaching
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expected Outcome */}
|
||||
<div className="bg-[#04045B] text-white rounded-xl p-8 border-4 border-[#F8C301] shadow-xl">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
|
||||
<h3 className="text-h4 text-white">Expected Outcome</h3>
|
||||
</div>
|
||||
<p className="text-body text-white mb-4">
|
||||
Transformational executive leaders with strategic capability, executive presence, and proven business impact.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-[#F8C301]">
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
<span className="text-body text-white">Enhanced Leadership Effectiveness</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Framework Effectiveness */}
|
||||
<div className="bg-gray-50 rounded-xl p-8">
|
||||
<div className="text-center mb-8">
|
||||
<h3 className="text-h3 text-[#26231A] mb-4">Framework Effectiveness</h3>
|
||||
<p className="text-body text-[#6F6F6F] max-w-2xl mx-auto">
|
||||
Our systematic approach delivers measurable results across key leadership development metrics.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="text-center bg-white rounded-lg p-6">
|
||||
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<Target className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="text-h2 text-[#04045B] mb-2">92%</div>
|
||||
<p className="text-body text-[#6F6F6F]">Leadership Effectiveness Increase</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center bg-white rounded-lg p-6">
|
||||
<div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<Users className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="text-h2 text-[#04045B] mb-2">88%</div>
|
||||
<p className="text-body text-[#6F6F6F]">Executive Presence Enhancement</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center bg-white rounded-lg p-6">
|
||||
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<TrendingUp className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="text-h2 text-[#04045B] mb-2">85%</div>
|
||||
<p className="text-body text-[#6F6F6F]">Strategic Impact Improvement</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -213,7 +213,7 @@ export function LeadershipPipelineDevelopment() {
|
||||
<div className="w-full section-margin-x">
|
||||
<div className="max-w-4xl">
|
||||
{/* Back Navigation */}
|
||||
<div className="mb-8">
|
||||
{/* <div className="mb-8">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => navigateTo('/services')}
|
||||
@@ -222,7 +222,7 @@ export function LeadershipPipelineDevelopment() {
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Back to Services
|
||||
</Button>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className="mb-8">
|
||||
<h1 className="text-h1-white">
|
||||
@@ -250,7 +250,6 @@ export function LeadershipPipelineDevelopment() {
|
||||
{/* 1. What Is This Service */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="w-full section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<BrandedTag text="What Is This Service?" />
|
||||
@@ -320,7 +319,6 @@ export function LeadershipPipelineDevelopment() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -422,7 +420,7 @@ export function LeadershipPipelineDevelopment() {
|
||||
{/* 4. Our Approach */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="w-full section-margin-x">
|
||||
<div className="w-full">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<BrandedTag text="Our Approach" />
|
||||
@@ -432,116 +430,372 @@ export function LeadershipPipelineDevelopment() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
|
||||
{/* Left Column - Core Frameworks */}
|
||||
<div>
|
||||
<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
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<Eye className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Talent Assessment & Identification</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Systematic identification of high-potential talent using validated assessment tools
|
||||
{/* Clean Grid Layout */}
|
||||
{/* Flowchart Container with Connecting Lines */}
|
||||
<div className="relative mb-16 flex flex-col items-center">
|
||||
{/* Desktop: Horizontal Flowchart */}
|
||||
<div className="hidden lg:block w-full max-w-5xl">
|
||||
<div className="relative">
|
||||
{/* Row 1: Frameworks, Pedagogy, Delivery */}
|
||||
<div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
|
||||
{/* Frameworks */}
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Layers className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Frameworks Used</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Establish competency models and leadership progression pathways
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Competency Models
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Leadership Levels
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Career Pathways
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow 1→2 */}
|
||||
<div className="absolute top-1/2 left-[calc(33.33%-2rem)] -translate-y-1/2 z-0 flex items-center">
|
||||
<div className="w-16 h-0.5 bg-[#F8C301]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#F8C301] -ml-1" />
|
||||
</div>
|
||||
|
||||
{/* Pedagogy */}
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<Brain className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Apply evidence-based learning approaches for maximum impact
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Experiential Learning
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Action Learning
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Peer Learning
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow 2→3 */}
|
||||
<div className="absolute top-1/2 left-[calc(66.66%-2rem)] -translate-y-1/2 z-0 flex items-center">
|
||||
<div className="w-16 h-0.5 bg-[#04045B]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
|
||||
</div>
|
||||
|
||||
{/* Delivery Modes */}
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Settings className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Flexible options to suit organizational needs and schedules
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Workshops
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Online Modules
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Cohort Programs
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<Target className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Multi-Level Development Programs</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Tier-specific programs for emerging leaders, managers, and executives
|
||||
</p>
|
||||
{/* Vertical Connector - Center Flow Down */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-0.5 h-12 bg-[#F8C301]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<Users className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Mentoring & Coaching Integration</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Comprehensive support through mentoring relationships and executive coaching
|
||||
{/* Row 2: Assessment, Coaching */}
|
||||
<div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
|
||||
{/* Assessment Integration */}
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<BarChart3 className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Comprehensive evaluation methods to measure progress and potential
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
360° Feedback
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Psychometrics
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Simulations
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow 4→5 */}
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 flex items-center">
|
||||
<div className="w-16 h-0.5 bg-[#04045B]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
|
||||
</div>
|
||||
|
||||
{/* Coaching Integration */}
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Heart className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Personalized support throughout the development journey
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Executive Coaching
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Mentoring
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Peer Coaching
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<Building className="w-5 h-5 text-white" />
|
||||
{/* Final Vertical Connector - Center Flow Down to Outcome */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-0.5 h-12 bg-[#04045B]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Succession Planning Integration</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Direct integration with organizational succession planning and talent management
|
||||
</div>
|
||||
|
||||
{/* Row 3: Expected Outcome - Centered */}
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="bg-[#04045B] text-white rounded-xl p-8 w-full max-w-2xl border-4 border-[#F8C301] shadow-xl">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
|
||||
<h3 className="text-h4 text-white">Expected Outcome</h3>
|
||||
</div>
|
||||
<p className="text-body text-white mb-4">
|
||||
A systematic, measurable leadership pipeline that accelerates talent development and succession readiness.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-[#F8C301]">
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
<span className="text-body text-white">Proven ROI on Leadership Investment</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Delivery Modes */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-8">
|
||||
<h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Support</h4>
|
||||
<div className="space-y-6">
|
||||
<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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Assessment Centers</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Comprehensive leadership potential evaluation and 360-degree feedback
|
||||
</p>
|
||||
{/* Tablet & Mobile: Vertical Flowchart */}
|
||||
<div className="lg:hidden space-y-8">
|
||||
{/* Frameworks */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Layers className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Frameworks Used</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Establish competency models and leadership progression pathways
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Competency Models
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Leadership Levels
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Career Pathways
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
|
||||
</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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Development Cohorts</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Structured learning programs with peer networks and group projects
|
||||
</p>
|
||||
{/* Pedagogy */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<Brain className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Apply evidence-based learning approaches for maximum impact
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Experiential Learning
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Action Learning
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Peer Learning
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
|
||||
</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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Stretch Assignments</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Real-world leadership opportunities and cross-functional projects
|
||||
</p>
|
||||
{/* Delivery Modes */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Settings className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Flexible options to suit organizational needs and schedules
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Workshops
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Online Modules
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Cohort Programs
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
|
||||
</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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Succession Reviews</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Regular talent reviews and succession readiness assessments
|
||||
</p>
|
||||
{/* Assessment Integration */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<BarChart3 className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Comprehensive evaluation methods to measure progress and potential
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
360° Feedback
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Psychometrics
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Simulations
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Coaching Integration */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Heart className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Personalized support throughout the development journey
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Executive Coaching
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Mentoring
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Peer Coaching
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expected Outcome */}
|
||||
<div className="bg-[#04045B] text-white rounded-xl p-8 border-4 border-[#F8C301] shadow-xl">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
|
||||
<h3 className="text-h4 text-white">Expected Outcome</h3>
|
||||
</div>
|
||||
<p className="text-body text-white mb-4">
|
||||
A systematic, measurable leadership pipeline that accelerates talent development and succession readiness.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-[#F8C301]">
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
<span className="text-body text-white">Proven ROI on Leadership Investment</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Framework Effectiveness */}
|
||||
<div className="bg-gray-50 rounded-xl p-8">
|
||||
<div className="text-center mb-8">
|
||||
<h3 className="text-h3 text-[#26231A] mb-4">Framework Effectiveness</h3>
|
||||
<p className="text-body text-[#6F6F6F] max-w-2xl mx-auto">
|
||||
Our systematic approach delivers measurable results across key leadership development metrics.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="text-center bg-white rounded-lg p-6">
|
||||
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<Target className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="text-h2 text-[#04045B] mb-2">85%</div>
|
||||
<p className="text-body text-[#6F6F6F]">Promotion Readiness Acceleration</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center bg-white rounded-lg p-6">
|
||||
<div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<Users className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="text-h2 text-[#04045B] mb-2">92%</div>
|
||||
<p className="text-body text-[#6F6F6F]">Talent Retention Improvement</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center bg-white rounded-lg p-6">
|
||||
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<TrendingUp className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="text-h2 text-[#04045B] mb-2">78%</div>
|
||||
<p className="text-body text-[#6F6F6F]">Succession Planning Effectiveness</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -197,73 +197,71 @@ export function ManagementDevelopment() {
|
||||
{/* 1. What Is This Service */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="w-full section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<BrandedTag text="What Is This Service?" />
|
||||
<h2 className="text-h2 mb-8 text-[#26231A]">Comprehensive Management Development</h2>
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<p className="text-body-lg text-[#6F6F6F] leading-relaxed">
|
||||
Management Development is a structured program designed to build exceptional people leaders who can effectively manage teams, drive performance, and create positive work environments. Our approach combines practical management skills with leadership development to create managers who inspire and deliver results.
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<BrandedTag text="What Is This Service?" />
|
||||
<h2 className="text-h2 mb-8 text-[#26231A]">Comprehensive Management Development</h2>
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<p className="text-body-lg text-[#6F6F6F] leading-relaxed">
|
||||
Management Development is a structured program designed to build exceptional people leaders who can effectively manage teams, drive performance, and create positive work environments. Our approach combines practical management skills with leadership development to create managers who inspire and deliver results.
|
||||
</p>
|
||||
<div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
|
||||
<p className="text-body-lg text-[#26231A] leading-relaxed">
|
||||
<span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> Many organizations promote high-performing individual contributors to management roles without proper training, leading to poor team performance, high turnover, and frustrated employees. Our program ensures managers have the skills, confidence, and tools to succeed in their leadership roles.
|
||||
</p>
|
||||
<div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
|
||||
<p className="text-body-lg text-[#26231A] leading-relaxed">
|
||||
<span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> Many organizations promote high-performing individual contributors to management roles without proper training, leading to poor team performance, high turnover, and frustrated employees. Our program ensures managers have the skills, confidence, and tools to succeed in their leadership roles.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<Users className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
People Leadership
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Essential skills for managing and developing teams effectively with modern leadership principles
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<Users className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
People Leadership
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Essential skills for managing and developing teams effectively with modern leadership principles
|
||||
</p>
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<TrendingUp className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
Performance Focus
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Tools and techniques to drive team performance and achieve measurable business results
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<TrendingUp className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
Performance Focus
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Tools and techniques to drive team performance and achieve measurable business results
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<Award className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
89% Success Rate
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Proven track record with 89% of managers showing improved team performance within 6 months
|
||||
</p>
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<Award className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
89% Success Rate
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Proven track record with 89% of managers showing improved team performance within 6 months
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -369,7 +367,7 @@ export function ManagementDevelopment() {
|
||||
{/* 4. Our Approach */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="w-full section-margin-x">
|
||||
<div className="w-full">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<BrandedTag text="Our Approach" />
|
||||
@@ -379,116 +377,371 @@ export function ManagementDevelopment() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
|
||||
{/* Left Column - Core Frameworks */}
|
||||
<div>
|
||||
<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
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<Users className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">People Management Fundamentals</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Essential skills for team leadership, delegation, and performance management
|
||||
{/* Flowchart Container with Connecting Lines */}
|
||||
<div className="relative mb-16 flex flex-col items-center">
|
||||
{/* Desktop: Horizontal Flowchart */}
|
||||
<div className="hidden lg:block w-full max-w-5xl">
|
||||
<div className="relative">
|
||||
{/* Row 1: Frameworks, Pedagogy, Delivery */}
|
||||
<div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
|
||||
{/* Frameworks */}
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Users className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Management Frameworks</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Core management models and team leadership principles
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
People Management
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Performance Systems
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Team Development
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow 1→2 */}
|
||||
<div className="absolute top-1/2 left-[calc(33.33%-2rem)] -translate-y-1/2 z-0 flex items-center">
|
||||
<div className="w-16 h-0.5 bg-[#F8C301]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#F8C301] -ml-1" />
|
||||
</div>
|
||||
|
||||
{/* Pedagogy */}
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<Brain className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Practical learning through application and peer exchange
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Experiential Learning
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Action Learning
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Peer Learning
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow 2→3 */}
|
||||
<div className="absolute top-1/2 left-[calc(66.66%-2rem)] -translate-y-1/2 z-0 flex items-center">
|
||||
<div className="w-16 h-0.5 bg-[#04045B]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
|
||||
</div>
|
||||
|
||||
{/* Delivery Modes */}
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Settings className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Flexible formats for manager development needs
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Interactive Workshops
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Peer Cohorts
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Action Projects
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<MessageCircle className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Communication Excellence</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Advanced communication skills for difficult conversations and team engagement
|
||||
</p>
|
||||
{/* Vertical Connector - Center Flow Down */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-0.5 h-12 bg-[#F8C301]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<Target className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Performance Management Systems</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Tools and techniques for setting goals, providing feedback, and driving results
|
||||
{/* Row 2: Assessment, Coaching */}
|
||||
<div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
|
||||
{/* Assessment Integration */}
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<BarChart3 className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Comprehensive evaluation to track manager effectiveness
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
360° Feedback
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Performance Metrics
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Team Engagement
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow 4→5 */}
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 flex items-center">
|
||||
<div className="w-16 h-0.5 bg-[#04045B]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
|
||||
</div>
|
||||
|
||||
{/* Coaching Integration */}
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<MessageCircle className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Personalized coaching support for manager challenges
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Individual Coaching
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Group Coaching
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Peer Coaching
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<Award className="w-5 h-5 text-white" />
|
||||
{/* Final Vertical Connector - Center Flow Down to Outcome */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-0.5 h-12 bg-[#04045B]"></div>
|
||||
<ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Team Development Strategies</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Building high-performing teams and fostering collaborative work environments
|
||||
</div>
|
||||
|
||||
{/* Row 3: Expected Outcome - Centered */}
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="bg-[#04045B] text-white rounded-xl p-8 w-full max-w-2xl border-4 border-[#F8C301] shadow-xl">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
|
||||
<h3 className="text-h4 text-white">Expected Outcome</h3>
|
||||
</div>
|
||||
<p className="text-body text-white mb-4">
|
||||
Effective people managers who build high-performing teams, drive business results, and create positive work environments.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-[#F8C301]">
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
<span className="text-body text-white">Enhanced Management Effectiveness</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Delivery Modes */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-8">
|
||||
<h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Support</h4>
|
||||
<div className="space-y-6">
|
||||
<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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Interactive Workshops</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Hands-on learning with real-world scenarios and case studies for immediate application
|
||||
</p>
|
||||
{/* Tablet & Mobile: Vertical Flowchart */}
|
||||
<div className="lg:hidden space-y-8">
|
||||
{/* Frameworks */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Users className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Management Frameworks</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Core management models and team leadership principles
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
People Management
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Performance Systems
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Team Development
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
|
||||
</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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Peer Learning Cohorts</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Manager groups for shared learning and best practice exchange across teams
|
||||
</p>
|
||||
{/* Pedagogy */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<Brain className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Practical learning through application and peer exchange
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Experiential Learning
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Action Learning
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Peer Learning
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
|
||||
</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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Individual Coaching</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
One-on-one support for personalized development needs and leadership challenges
|
||||
</p>
|
||||
{/* Delivery Modes */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<Settings className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Flexible formats for manager development needs
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Interactive Workshops
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Peer Cohorts
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Action Projects
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
|
||||
</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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Action Learning Projects</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Real workplace challenges for immediate application and measurable business impact
|
||||
</p>
|
||||
{/* Assessment Integration */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
|
||||
<BarChart3 className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Comprehensive evaluation to track manager effectiveness
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
360° Feedback
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Performance Metrics
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Team Engagement
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Coaching Integration */}
|
||||
<div className="relative">
|
||||
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
|
||||
<MessageCircle className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
|
||||
<p className="text-body text-[#6F6F6F] mb-4">
|
||||
Personalized coaching support for manager challenges
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Individual Coaching
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Group Coaching
|
||||
</div>
|
||||
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
|
||||
Peer Coaching
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connector Arrow */}
|
||||
<div className="flex justify-center my-4">
|
||||
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expected Outcome */}
|
||||
<div className="bg-[#04045B] text-white rounded-xl p-8 border-4 border-[#F8C301] shadow-xl">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
|
||||
<h3 className="text-h4 text-white">Expected Outcome</h3>
|
||||
</div>
|
||||
<p className="text-body text-white mb-4">
|
||||
Effective people managers who build high-performing teams, drive business results, and create positive work environments.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-[#F8C301]">
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
<span className="text-body text-white">Enhanced Management Effectiveness</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Framework Effectiveness */}
|
||||
<div className="bg-gray-50 rounded-xl p-8">
|
||||
<div className="text-center mb-8">
|
||||
<h3 className="text-h3 text-[#26231A] mb-4">Framework Effectiveness</h3>
|
||||
<p className="text-body text-[#6F6F6F] max-w-2xl mx-auto">
|
||||
Our systematic approach delivers measurable results across key management development metrics.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="text-center bg-white rounded-lg p-6">
|
||||
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<Target className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="text-h2 text-[#04045B] mb-2">89%</div>
|
||||
<p className="text-body text-[#6F6F6F]">Manager Effectiveness Increase</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center bg-white rounded-lg p-6">
|
||||
<div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<Users className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="text-h2 text-[#04045B] mb-2">85%</div>
|
||||
<p className="text-body text-[#6F6F6F]">Team Performance Improvement</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center bg-white rounded-lg p-6">
|
||||
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<TrendingUp className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="text-h2 text-[#04045B] mb-2">78%</div>
|
||||
<p className="text-body text-[#6F6F6F]">Employee Engagement Growth</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user