changes done header update and service link
This commit is contained in:
priyanshuvish
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
917
src/components/services/LeadershipPipelineDevelopment.tsx
Normal file
917
src/components/services/LeadershipPipelineDevelopment.tsx
Normal file
@@ -0,0 +1,917 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
ArrowRight,
|
||||
CheckCircle,
|
||||
Settings,
|
||||
Calendar,
|
||||
Download,
|
||||
Network,
|
||||
Users,
|
||||
Target,
|
||||
Brain,
|
||||
Eye,
|
||||
TrendingUp,
|
||||
BarChart3,
|
||||
Award,
|
||||
Lightbulb,
|
||||
Shield,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
ArrowLeft,
|
||||
Star,
|
||||
Zap,
|
||||
Globe,
|
||||
Crown,
|
||||
Compass,
|
||||
Users2,
|
||||
Building,
|
||||
Layers,
|
||||
UserCheck,
|
||||
Clock,
|
||||
MessageCircle,
|
||||
Heart
|
||||
} from 'lucide-react';
|
||||
import { Button } from '../ui/button';
|
||||
import { navigateTo } from '../Router';
|
||||
import { PrimaryCTAButton } from '../PrimaryCTAButton';
|
||||
import { BrandedTag } from '../about/BrandedTag';
|
||||
import { Card, CardContent } from '../ui/card';
|
||||
import { ImageWithFallback } from '../figma/ImageWithFallback';
|
||||
import { StandardCTAButton } from '../StandardCTAButton';
|
||||
|
||||
const targetAudience = [
|
||||
{
|
||||
title: "CHROs & Talent Leaders",
|
||||
description: "Senior HR executives responsible for leadership development and succession planning across the organization",
|
||||
icon: Users,
|
||||
challenges: ["Succession gaps", "Leadership bench strength", "Talent pipeline visibility", "Development ROI measurement"]
|
||||
},
|
||||
{
|
||||
title: "Business Leaders & CEOs",
|
||||
description: "Senior executives who need to ensure leadership continuity and build organizational capability",
|
||||
icon: Crown,
|
||||
challenges: ["Leadership continuity risk", "External hiring dependency", "Leadership quality consistency", "Succession readiness"]
|
||||
},
|
||||
{
|
||||
title: "Learning & Development Teams",
|
||||
description: "L&D professionals tasked with building comprehensive leadership development ecosystems",
|
||||
icon: Building,
|
||||
challenges: ["Program effectiveness", "Multi-level coordination", "Resource optimization", "Impact demonstration"]
|
||||
}
|
||||
];
|
||||
|
||||
const useCases = [
|
||||
{
|
||||
title: "Succession Gap Crisis",
|
||||
description: "When critical leadership positions lack ready successors or pipeline depth",
|
||||
icon: Target,
|
||||
scenario: "More than 40% of key positions have no identified successors"
|
||||
},
|
||||
{
|
||||
title: "External Hiring Dependency",
|
||||
description: "When organizations rely heavily on external recruitment for leadership roles",
|
||||
icon: Building,
|
||||
scenario: "75%+ of leadership roles filled externally in the past 2 years"
|
||||
},
|
||||
{
|
||||
title: "Leadership Quality Inconsistency",
|
||||
description: "When leadership effectiveness varies significantly across levels and functions",
|
||||
icon: BarChart3,
|
||||
scenario: "Leadership effectiveness scores below 70% or high variation"
|
||||
},
|
||||
{
|
||||
title: "Talent Retention Issues",
|
||||
description: "When high-potential employees leave due to lack of development opportunities",
|
||||
icon: Users2,
|
||||
scenario: "High-potential talent turnover above 15% annually"
|
||||
}
|
||||
];
|
||||
|
||||
const programTimeline = [
|
||||
{
|
||||
phase: "Phase 1: Assessment & Pipeline Mapping",
|
||||
duration: "Months 1-3",
|
||||
activities: ["Leadership assessment across levels", "Succession gap analysis", "High-potential identification", "Pipeline architecture design"],
|
||||
deliverables: ["Leadership capability assessment", "Succession readiness report", "Pipeline development strategy", "Individual development plans"]
|
||||
},
|
||||
{
|
||||
phase: "Phase 2: Multi-Level Development",
|
||||
duration: "Months 4-12",
|
||||
activities: ["Tier-specific development programs", "Cross-functional assignments", "Mentoring relationships", "Leadership simulations"],
|
||||
deliverables: ["Enhanced leadership capabilities", "Succession readiness improvement", "Leadership network expansion", "Real-world application projects"]
|
||||
},
|
||||
{
|
||||
phase: "Phase 3: Integration & Sustainability",
|
||||
duration: "Months 13-18",
|
||||
activities: ["Succession planning integration", "Leadership transitions", "Performance measurement", "Continuous pipeline refresh"],
|
||||
deliverables: ["Sustainable pipeline system", "Succession-ready candidates", "Leadership transition success", "Pipeline metrics dashboard"]
|
||||
}
|
||||
];
|
||||
|
||||
const expectedOutcomes = [
|
||||
{
|
||||
metric: "85%",
|
||||
description: "Of participants promoted within 18 months of program completion",
|
||||
icon: TrendingUp,
|
||||
category: "Career Advancement"
|
||||
},
|
||||
{
|
||||
metric: "75%",
|
||||
description: "Reduction in external leadership hiring dependency",
|
||||
icon: Building,
|
||||
category: "Internal Succession"
|
||||
},
|
||||
{
|
||||
metric: "92%",
|
||||
description: "Improvement in leadership readiness scores across pipeline",
|
||||
icon: Target,
|
||||
category: "Leadership Quality"
|
||||
},
|
||||
{
|
||||
metric: "3.2x",
|
||||
description: "Faster time-to-productivity for internally developed leaders",
|
||||
icon: Zap,
|
||||
category: "Performance Impact"
|
||||
}
|
||||
];
|
||||
|
||||
// Pipeline Development Testimonials Data
|
||||
const pipelineTestimonials = [
|
||||
{
|
||||
id: 1,
|
||||
quote: "Our Leadership Pipeline Development program transformed our succession planning. Within 18 months, we went from having successors for only 30% of key positions to 85% succession readiness. Most importantly, we reduced external leadership hiring by 75%.",
|
||||
name: "Sarah Williams",
|
||||
title: "VP Human Resources",
|
||||
company: "Global Manufacturing Company",
|
||||
image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=600&h=800&fit=crop&crop=face",
|
||||
hasVideo: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
quote: "The systematic approach to pipeline development gave us complete visibility into our leadership depth. We now have ready successors for 92% of critical positions and our internal promotion rate increased by 60%. The ROI has been exceptional.",
|
||||
name: "Michael Chen",
|
||||
title: "Chief Operating Officer",
|
||||
company: "TechForward Solutions",
|
||||
image: "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=600&h=800&fit=crop&crop=face",
|
||||
hasVideo: true
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
quote: "KLC's pipeline framework revolutionized how we identify and develop future leaders. The comprehensive assessment and development pathways have built unprecedented leadership depth across all business units.",
|
||||
name: "Jennifer Rodriguez",
|
||||
title: "Chief People Officer",
|
||||
company: "Innovation Dynamics Inc",
|
||||
image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&h=800&fit=crop&crop=face",
|
||||
hasVideo: false
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
quote: "The pipeline development process helped us reduce critical role vacancy time by 70% and improved leadership quality scores across all levels. Our board confidence in succession planning has never been higher.",
|
||||
name: "David Park",
|
||||
title: "Senior Vice President",
|
||||
company: "Financial Services Corp",
|
||||
image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=800&fit=crop&crop=face",
|
||||
hasVideo: true
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
quote: "Working with KLC transformed our entire approach to leadership development. We now have a robust pipeline that consistently produces high-quality leaders who drive business results and cultural transformation.",
|
||||
name: "Lisa Thompson",
|
||||
title: "Executive Director",
|
||||
company: "Healthcare Solutions Group",
|
||||
image: "https://images.unsplash.com/photo-1494790108755-2616b612b647?w=600&h=800&fit=crop&crop=face",
|
||||
hasVideo: false
|
||||
}
|
||||
];
|
||||
|
||||
export function LeadershipPipelineDevelopment() {
|
||||
const [currentTestimonial, setCurrentTestimonial] = useState(1);
|
||||
const currentTestimonialData = pipelineTestimonials.find(t => t.id === currentTestimonial) || pipelineTestimonials[0];
|
||||
const [expandedUseCase, setExpandedUseCase] = useState<number | null>(null);
|
||||
const [expandedPhase, setExpandedPhase] = useState<number | null>(0);
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{ backgroundColor: '#FFFFFF', fontFamily: 'var(--font-family-base)' }}>
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-[85vh] flex flex-col">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<div
|
||||
className="w-full h-full bg-cover bg-center bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: `url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1920&h=1080&fit=crop')`
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/85 via-black/75 to-black/65"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex-1 flex items-center">
|
||||
<div className="w-full section-margin-x">
|
||||
<div className="max-w-4xl">
|
||||
{/* Back Navigation */}
|
||||
<div className="mb-8">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => navigateTo('/services')}
|
||||
className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Back to Services
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h1 className="text-h1-white">
|
||||
Leadership Pipeline Development
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<p className="text-body-lg-white mb-8 max-w-3xl">
|
||||
<strong>Build sustainable leadership pipelines that eliminate succession gaps and reduce external hiring by 75%.</strong>
|
||||
</p>
|
||||
|
||||
<div className="flex justify-start">
|
||||
<PrimaryCTAButton
|
||||
text="Book a Consultation"
|
||||
onClick={() => navigateTo('/contact?topic=leadership-pipeline')}
|
||||
ariaLabel="Book a consultation for leadership pipeline development"
|
||||
className="primary-cta-button-blue cta-text-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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 Leadership Pipeline System</h2>
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<p className="text-body-lg text-[#6F6F6F] leading-relaxed">
|
||||
Leadership Pipeline Development is a systematic approach to building sustainable leadership capability across all organizational levels. Our methodology identifies, develops, and transitions high-potential talent through structured programs that create ready-now successors for critical 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> Most organizations face succession gaps where 40%+ of key positions lack identified successors, leading to costly external hiring, leadership disruption, and competitive disadvantage.
|
||||
</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' }}
|
||||
>
|
||||
<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">
|
||||
Multi-Level Pipeline
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Systematic leadership development across all organizational tiers with clear progression pathways
|
||||
</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">
|
||||
Succession Readiness
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Creates identified, development-ready successors for all critical leadership positions
|
||||
</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' }}
|
||||
>
|
||||
<Building className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
75% Hiring Reduction
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Significantly reduces dependency on external leadership hiring through internal capability building
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. Who Is It For */}
|
||||
<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="Who Is It For?" />
|
||||
<h2 className="text-h2 mb-8">Target Audience</h2>
|
||||
<p className="text-body-lg text-muted max-w-3xl mx-auto">
|
||||
Designed for organizations and leaders responsible for building sustainable leadership capability and succession readiness.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{targetAudience.map((audience, index) => (
|
||||
<Card key={index} className="h-full hover:shadow-lg transition-all duration-300">
|
||||
<CardContent className="p-8">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div
|
||||
className="w-16 h-16 rounded-2xl flex items-center justify-center"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
>
|
||||
<audience.icon className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-h4 mb-4">{audience.title}</h3>
|
||||
<p className="text-body text-muted mb-6">{audience.description}</p>
|
||||
<div>
|
||||
<h4 className="text-small font-semibold text-primary mb-3">Common Challenges:</h4>
|
||||
<ul className="space-y-2">
|
||||
{audience.challenges.map((challenge, challengeIndex) => (
|
||||
<li key={challengeIndex} className="text-small text-muted flex items-start gap-2">
|
||||
<div className="w-1 h-1 bg-primary rounded-full mt-2 flex-shrink-0"></div>
|
||||
{challenge}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. When to Use It */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<BrandedTag text="When to Use It?" />
|
||||
<h2 className="text-h2 mb-8">When Organizations Need Pipeline Development</h2>
|
||||
<p className="text-body-lg text-muted max-w-2xl mx-auto">
|
||||
Ideal for organizations facing leadership gaps and succession challenges.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{useCases.map((useCase, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-xl border border-gray-200 p-6 hover:border-[#04045B] hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
{/* Icon and Title */}
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<div
|
||||
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<useCase.icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-h4 mb-2 text-[#26231A]">
|
||||
{useCase.title}
|
||||
</h3>
|
||||
<p className="text-body text-muted">
|
||||
{useCase.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Trigger Indicator */}
|
||||
<div className="flex items-center gap-2 text-small text-[#04045B] bg-[#04045B]/5 px-3 py-2 rounded-lg">
|
||||
<div className="w-2 h-2 rounded-full bg-[#F8C301]" />
|
||||
<span className="font-medium">
|
||||
{useCase.scenario}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<BrandedTag text="Our Approach" />
|
||||
<h2 className="text-h2 mb-8 text-[#26231A]">Systematic Pipeline Development Framework</h2>
|
||||
<p className="text-body-lg text-[#6F6F6F] max-w-3xl mx-auto">
|
||||
Our proven methodology combines assessment, development planning, structured learning, and succession integration.
|
||||
</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
|
||||
</p>
|
||||
</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>
|
||||
</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
|
||||
</p>
|
||||
</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" />
|
||||
</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
|
||||
</p>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 5. Sample Program Format */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<BrandedTag text="Sample Program Format" />
|
||||
<h2 className="text-h2 mb-8">18-Month Pipeline Development Journey</h2>
|
||||
<p className="text-body-lg text-muted max-w-3xl mx-auto">
|
||||
A comprehensive 3-phase program designed to build sustainable leadership pipelines across organizational levels.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
{programTimeline.map((phase, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className="border border-gray-200 hover:border-primary/20 transition-all duration-300 hover:shadow-lg"
|
||||
>
|
||||
<CardContent className="p-0">
|
||||
<div
|
||||
className="flex items-center justify-between p-6 cursor-pointer"
|
||||
onClick={() => setExpandedPhase(expandedPhase === index ? null : index)}
|
||||
>
|
||||
<div className="flex items-start gap-4 flex-1">
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
>
|
||||
<span className="text-white font-semibold">{index + 1}</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-h4 mb-2">{phase.phase}</h3>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Clock className="w-4 h-4 text-muted" />
|
||||
<span className="text-small text-muted">{phase.duration}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
{expandedPhase === index ? (
|
||||
<ChevronUp className="w-5 h-5 text-muted" />
|
||||
) : (
|
||||
<ChevronDown className="w-5 h-5 text-muted" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{expandedPhase === index && (
|
||||
<div className="px-6 pb-6 border-t border-gray-100">
|
||||
<div className="pt-6 grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h4 className="text-h4 mb-4">Key Activities</h4>
|
||||
<ul className="space-y-3">
|
||||
{phase.activities.map((activity, activityIndex) => (
|
||||
<li key={activityIndex} className="flex items-start gap-3">
|
||||
<CheckCircle className="w-4 h-4 text-primary flex-shrink-0 mt-1" />
|
||||
<span className="text-body text-muted">{activity}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-h4 mb-4">Deliverables & Outcomes</h4>
|
||||
<ul className="space-y-3">
|
||||
{phase.deliverables.map((deliverable, deliverableIndex) => (
|
||||
<li key={deliverableIndex} className="flex items-start gap-3">
|
||||
<Star className="w-4 h-4 text-accent flex-shrink-0 mt-1" />
|
||||
<span className="text-body text-muted">{deliverable}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 6. Impact You Can Expect */}
|
||||
<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="Impact You Can Expect" />
|
||||
<h2 className="text-h2 mb-8">Measurable Pipeline Outcomes</h2>
|
||||
<p className="text-body-lg text-muted max-w-3xl mx-auto">
|
||||
Organizations typically see significant improvements in succession readiness, internal promotion rates, and leadership quality.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Outcomes Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{expectedOutcomes.map((outcome, index) => (
|
||||
<Card key={index} className="text-center bg-white hover:shadow-lg transition-all duration-300">
|
||||
<CardContent className="p-8">
|
||||
<div
|
||||
className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
>
|
||||
<outcome.icon className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div className="text-5xl font-medium mb-4" style={{ color: 'var(--color-primary)' }}>
|
||||
{outcome.metric}
|
||||
</div>
|
||||
<p className="text-body text-muted mb-2">{outcome.description}</p>
|
||||
<p className="text-small text-primary font-medium">{outcome.category}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-16 bg-white p-8 rounded-2xl shadow-lg">
|
||||
<h3 className="text-h3 mb-6 text-center">Additional Pipeline Benefits</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="text-center">
|
||||
<Crown className="w-8 h-8 text-primary mx-auto mb-3" />
|
||||
<h4 className="text-h4 mb-2">Leadership Quality</h4>
|
||||
<p className="text-small text-muted">Consistent leadership excellence across all organizational levels</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<Users2 className="w-8 h-8 text-primary mx-auto mb-3" />
|
||||
<h4 className="text-h4 mb-2">Talent Retention</h4>
|
||||
<p className="text-small text-muted">Higher retention of high-potential employees through development</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<Compass className="w-8 h-8 text-primary mx-auto mb-3" />
|
||||
<h4 className="text-h4 mb-2">Strategic Alignment</h4>
|
||||
<p className="text-small text-muted">Leadership development aligned with business strategy and goals</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 7. Client Examples / Testimonials - Hero Section Design */}
|
||||
<section
|
||||
className="relative py-20 flex items-center"
|
||||
style={{ backgroundColor: '#F7F7FD' }}
|
||||
>
|
||||
<div className="w-full section-margin-x">
|
||||
{/* Branded Tag */}
|
||||
<div className="flex justify-center mb-12">
|
||||
<div className="inline-flex items-center gap-3 bg-[rgba(248,195,1,0.1)] px-4 py-2 rounded-lg">
|
||||
<div className="w-[7px] h-[7px] bg-[#f8c301] rounded-full" />
|
||||
<span className="text-[#26231a] text-lg lg:text-lg md:text-base sm:text-sm uppercase tracking-wider font-light">
|
||||
Client Success Stories
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main heading */}
|
||||
<h2
|
||||
className="text-h2 leading-tight mb-8 text-center"
|
||||
style={{ color: 'var(--color-brand-primary)' }}
|
||||
>
|
||||
Pipeline Development Success
|
||||
</h2>
|
||||
|
||||
{/* Navigation Controls */}
|
||||
<div className="flex justify-end mb-6">
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
className="w-12 h-12 rounded-full border-2 border-[#E5E7EB] bg-white flex items-center justify-center hover:border-[#04045B] hover:bg-[#04045B] hover:text-white transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
onClick={() => {
|
||||
const currentIndex = pipelineTestimonials.findIndex(t => t.id === currentTestimonial);
|
||||
const prevIndex = currentIndex > 0 ? currentIndex - 1 : pipelineTestimonials.length - 1;
|
||||
setCurrentTestimonial(pipelineTestimonials[prevIndex].id);
|
||||
}}
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
className="w-12 h-12 rounded-full border-2 border-[#E5E7EB] bg-white flex items-center justify-center hover:border-[#04045B] hover:bg-[#04045B] hover:text-white transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
onClick={() => {
|
||||
const currentIndex = pipelineTestimonials.findIndex(t => t.id === currentTestimonial);
|
||||
const nextIndex = currentIndex < pipelineTestimonials.length - 1 ? currentIndex + 1 : 0;
|
||||
setCurrentTestimonial(pipelineTestimonials[nextIndex].id);
|
||||
}}
|
||||
>
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Split Layout Container with Max Width - Exact Home Page Design */}
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="flex h-[400px] rounded-2xl overflow-hidden shadow-2xl">
|
||||
{/* Left Side - Video Testimonial */}
|
||||
<div
|
||||
className="flex-1 relative group cursor-pointer"
|
||||
onClick={() => {
|
||||
// Video testimonial click handler
|
||||
console.log('Play video testimonial');
|
||||
}}
|
||||
>
|
||||
<div className="relative w-full h-full overflow-hidden">
|
||||
{/* Video Thumbnail */}
|
||||
<ImageWithFallback
|
||||
src={currentTestimonialData.image}
|
||||
alt={currentTestimonialData.name}
|
||||
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
|
||||
{/* Dark overlay on hover */}
|
||||
<div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
|
||||
{/* Centered Play Button Overlay */}
|
||||
{currentTestimonialData.hasVideo && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="flex items-center justify-center w-16 h-16 bg-white/90 backdrop-blur-sm rounded-full shadow-lg group-hover:scale-110 transition-all duration-300">
|
||||
<ArrowRight
|
||||
className="w-7 h-7 ml-1 text-blue-600"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Watch Video Text */}
|
||||
{currentTestimonialData.hasVideo && (
|
||||
<div className="absolute bottom-4 left-4 text-white">
|
||||
<div className="bg-black/30 backdrop-blur-sm rounded-lg px-3 py-1">
|
||||
<span className="text-xs font-medium">▶ Video</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Text Testimonial with White Background */}
|
||||
<div
|
||||
className="flex-1 flex items-center justify-center p-8 relative"
|
||||
style={{ backgroundColor: 'white' }}
|
||||
>
|
||||
{/* Large Opening Quotation Mark */}
|
||||
<div
|
||||
className="absolute top-4 left-4 text-3xl opacity-30"
|
||||
style={{ color: 'var(--color-brand-primary)' }}
|
||||
>
|
||||
"
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 max-w-lg relative z-10">
|
||||
{/* Quote with Compact Typography */}
|
||||
<blockquote
|
||||
className="text-lg leading-relaxed font-medium transition-all duration-500"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-brand)',
|
||||
color: 'var(--color-brand-black)'
|
||||
}}
|
||||
>
|
||||
{currentTestimonialData.quote}
|
||||
</blockquote>
|
||||
|
||||
{/* Attribution */}
|
||||
<div className="space-y-1 pt-3">
|
||||
<div
|
||||
className="text-base font-semibold transition-all duration-500"
|
||||
style={{ color: 'var(--color-brand-primary)' }}
|
||||
>
|
||||
{currentTestimonialData.name}
|
||||
</div>
|
||||
<div
|
||||
className="text-xs transition-all duration-500"
|
||||
style={{ color: 'var(--color-brand-gray-muted)' }}
|
||||
>
|
||||
{currentTestimonialData.title} {currentTestimonialData.company && `at ${currentTestimonialData.company}`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonial Navigation Dots */}
|
||||
<div className="flex items-center space-x-2 pt-4">
|
||||
{pipelineTestimonials.map((testimonial, index) => (
|
||||
<button
|
||||
key={testimonial.id}
|
||||
className={`w-2 h-2 rounded-full transition-all duration-300 ${
|
||||
testimonial.id === currentTestimonial
|
||||
? 'opacity-100'
|
||||
: 'opacity-30 hover:opacity-60'
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: testimonial.id === currentTestimonial
|
||||
? 'var(--color-brand-accent)'
|
||||
: 'var(--color-brand-gray-muted)'
|
||||
}}
|
||||
onClick={() => setCurrentTestimonial(testimonial.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Large Closing Quotation Mark */}
|
||||
<div
|
||||
className="absolute bottom-4 right-4 text-3xl opacity-30"
|
||||
style={{ color: 'var(--color-brand-primary)' }}
|
||||
>
|
||||
"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 8. CTA Section - Hero Section Design */}
|
||||
<section className="relative h-[700px] overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div className="absolute inset-0">
|
||||
<ImageWithFallback
|
||||
src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=2940&h=1960&fit=crop"
|
||||
alt="Professional team collaborating in modern office"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
{/* Subtle dark overlay for overall image */}
|
||||
<div className="absolute inset-0 bg-black/30" />
|
||||
|
||||
{/* Gradient overlay for better text readability */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
|
||||
</div>
|
||||
|
||||
{/* Content Container */}
|
||||
<div className="relative h-full flex items-center justify-end section-margin-x">
|
||||
{/* CTA Content Block */}
|
||||
<div
|
||||
className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
|
||||
style={{ backgroundColor: 'var(--color-brand-primary)' }}
|
||||
>
|
||||
{/* Branded Tag */}
|
||||
<BrandedTag text="Next Steps" variant="white" />
|
||||
|
||||
{/* Main Headline */}
|
||||
<h2 className="text-h2-white mb-8">
|
||||
Ready to build your leadership pipeline?
|
||||
<span
|
||||
className="italic"
|
||||
style={{ color: 'var(--color-brand-accent)' }}
|
||||
>
|
||||
{" "}Get in touch{" "}
|
||||
</span>
|
||||
to eliminate succession gaps now.
|
||||
</h2>
|
||||
|
||||
{/* CTA Button */}
|
||||
<StandardCTAButton
|
||||
text="Schedule a Pipeline Consultation"
|
||||
onClick={() => navigateTo('/contact?topic=leadership-pipeline')}
|
||||
ariaLabel="Schedule a leadership pipeline consultation"
|
||||
/>
|
||||
|
||||
{/* Supporting Text */}
|
||||
<p className="text-body-white mt-6 opacity-90">
|
||||
Connect with our pipeline development experts to discuss building sustainable leadership capability across your organization.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user