KLC/KLC-Website-Frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

other changes like hero sec align left

Browse Source
This commit is contained in:
priyanshuvish
2025-09-25 16:45:18 +05:30
parent 43b894604d
commit 38a7b6a260
9 changed files with 327 additions and 939 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/components/services/CultureCompetence.tsx
View File

@@ -7,7 +7,7 @@ import { navigateTo } from '../Router';
import { BrandedTag } from '../about/BrandedTag';
import { PrimaryCTAButton } from '../PrimaryCTAButton';
import { StandardCTAButton } from '../StandardCTAButton';
import {
import {
ArrowRight,
CheckCircle,
Settings,
@@ -37,6 +37,7 @@ import {
Compass,
Briefcase
} from 'lucide-react';
import { TestimonialsSection } from '../TestimonialsSection';
const targetAudience = [
{
@@ -147,7 +148,7 @@ export function CultureCompetence() {
{/* Hero Section */}
<section className="relative min-h-[85vh] flex flex-col">
<div className="absolute inset-0 z-0">
<div
<div
className="w-full h-full bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1920&h=1080&fit=crop')`
@@ -161,8 +162,8 @@ export function CultureCompetence() {
<div className="max-w-4xl">
{/* Back Navigation */}
<div className="mb-8">
<Button
variant="ghost"
<Button
variant="ghost"
onClick={() => navigateTo('/services')}
className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
>
@@ -176,13 +177,13 @@ export function CultureCompetence() {
Culture & Competence Consulting
</h1>
</div>
<p className="text-body-lg-white mb-8 max-w-3xl">
<strong>Transform organizational culture and build strategic competencies that drive 73% better engagement and business performance.</strong>
</p>
<div className="flex justify-start">
<PrimaryCTAButton
<PrimaryCTAButton
text="Book a Consultation"
onClick={() => navigateTo('/contact?topic=culture-competence')}
ariaLabel="Book a consultation for culture and competence consulting"
@@ -217,7 +218,7 @@ export function CultureCompetence() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
@@ -234,7 +235,7 @@ export function CultureCompetence() {
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
@@ -251,7 +252,7 @@ export function CultureCompetence() {
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
@@ -288,7 +289,7 @@ export function CultureCompetence() {
<Card key={index} className="h-full hover:shadow-lg transition-all duration-300">
<CardContent className="p-8">
<div className="flex items-center gap-4 mb-6">
<div
<div
className="w-16 h-16 rounded-2xl flex items-center justify-center"
style={{ backgroundColor: 'var(--color-primary)' }}
>
@@ -330,13 +331,13 @@ export function CultureCompetence() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{useCases.map((useCase, index) => (
<div
<div
key={index}
className="bg-white rounded-xl border border-gray-200 p-6 hover:border-[#04045B] hover:shadow-lg transition-all duration-300"
>
{/* Icon and Title */}
<div className="flex items-start gap-4 mb-4">
<div
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -385,7 +386,7 @@ export function CultureCompetence() {
<h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
<div className="space-y-8">
<div className="flex items-start gap-4">
<div
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -398,9 +399,9 @@ export function CultureCompetence() {
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -413,9 +414,9 @@ export function CultureCompetence() {
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -428,9 +429,9 @@ export function CultureCompetence() {
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -459,7 +460,7 @@ export function CultureCompetence() {
</p>
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
<div className="flex-1">
@@ -469,7 +470,7 @@ export function CultureCompetence() {
</p>
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
<div className="flex-1">
@@ -479,7 +480,7 @@ export function CultureCompetence() {
</p>
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
<div className="flex-1">
@@ -511,7 +512,7 @@ export function CultureCompetence() {
<div className="space-y-8">
{programTimeline.map((phase, index) => (
<Card
<Card
key={index}
className="border border-gray-200 hover:border-primary/20 transition-all duration-300 hover:shadow-lg"
>
@@ -521,7 +522,7 @@ export function CultureCompetence() {
onClick={() => setExpandedPhase(expandedPhase === index ? null : index)}
>
<div className="flex items-start gap-4 flex-1">
<div
<div
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'var(--color-primary)' }}
>
@@ -597,7 +598,7 @@ export function CultureCompetence() {
{expectedOutcomes.map((outcome, index) => (
<Card key={index} className="text-center bg-white hover:shadow-lg transition-all duration-300">
<CardContent className="p-8">
<div
<div
className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6"
style={{ backgroundColor: 'var(--color-primary)' }}
>
@@ -638,97 +639,11 @@ export function CultureCompetence() {
</section>
{/* 7. Client Examples / Testimonials - Hero Section Design */}
<section
className="relative py-20 flex items-center"
style={{ backgroundColor: '#F7F7FD' }}
>
<div className="w-full section-margin-x">
{/* Branded Tag */}
<div className="flex justify-center mb-12">
<div className="inline-flex items-center gap-3 bg-[rgba(248,195,1,0.1)] px-4 py-2 rounded-lg">
<div className="w-[7px] h-[7px] bg-[#f8c301] rounded-full" />
<span className="text-[#26231a] text-lg lg:text-lg md:text-base sm:text-sm uppercase tracking-wider font-light">
Client Success Stories
</span>
</div>
</div>
{/* Main heading */}
<h2
className="text-h2 leading-tight mb-12 text-center"
style={{ color: 'var(--color-brand-primary)' }}
>
Culture Transformation Success
</h2>
{/* Split Layout Container with Max Width */}
<div className="max-w-5xl mx-auto">
<div className="flex h-[400px] rounded-2xl overflow-hidden shadow-2xl">
{/* Left Side - Image */}
<div className="flex-1 relative">
<div className="relative w-full h-full overflow-hidden">
<ImageWithFallback
src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=600&h=800&fit=crop"
alt="Culture Transformation Success"
className="w-full h-full object-cover"
/>
</div>
</div>
{/* Right Side - Quote Content with White Background */}
<div
className="flex-1 flex items-center justify-center p-8 relative"
style={{ backgroundColor: 'white' }}
>
{/* Large Opening Quotation Mark */}
<div
className="absolute top-4 left-4 text-3xl opacity-30"
style={{ color: 'var(--color-brand-primary)' }}
>
"
</div>
<div className="space-y-4 max-w-lg relative z-10">
{/* Quote */}
<blockquote
className="text-lg leading-relaxed font-medium"
style={{
fontFamily: 'var(--font-family-base)',
color: 'var(--color-brand-black)'
}}
>
The Culture & Competence transformation program revolutionized our organization. Employee engagement increased by 73%, and we achieved 68% better alignment between our culture and business strategy. The competency development component built critical capabilities.
</blockquote>
{/* Attribution */}
<div className="space-y-1 pt-3">
<div
className="text-base font-semibold"
style={{ color: 'var(--color-brand-primary)' }}
>
Financial Services Company
</div>
<div
className="text-xs"
style={{ color: 'var(--color-brand-gray-muted)' }}
>
5,000+ employees • 73% engagement improvement • 68% culture alignment increase
</div>
</div>
</div>
{/* Large Closing Quotation Mark */}
<div
className="absolute bottom-4 right-4 text-3xl opacity-30"
style={{ color: 'var(--color-brand-primary)' }}
>
"
</div>
</div>
</div>
</div>
</div>
</section>
<TestimonialsSection
title="Culture Transformation Success"
subtitle=""
tagText="Client Success Stories"
/>
{/* 8. CTA Section - Hero Section Design */}
<section className="relative h-[700px] overflow-hidden">
@@ -739,10 +654,10 @@ export function CultureCompetence() {
alt="Professional team collaborating in modern office"
className="w-full h-full object-cover"
/>
{/* Subtle dark overlay for overall image */}
<div className="absolute inset-0 bg-black/30" />
{/* Gradient overlay for better text readability */}
<div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
</div>
@@ -750,7 +665,7 @@ export function CultureCompetence() {
{/* Content Container */}
<div className="relative h-full flex items-center justify-end section-margin-x">
{/* CTA Content Block */}
<div
<div
className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
style={{ backgroundColor: 'var(--color-brand-primary)' }}
>
@@ -759,8 +674,8 @@ export function CultureCompetence() {
{/* Main Headline */}
<h2 className="text-h2-white mb-8">
Ready to transform your culture?
<span
Ready to transform your culture?
<span
className="italic"
style={{ color: 'var(--color-brand-accent)' }}
>
@@ -770,7 +685,7 @@ export function CultureCompetence() {
</h2>
{/* CTA Button */}
<StandardCTAButton
<StandardCTAButton
text="Schedule a Culture Consultation"
onClick={() => navigateTo('/contact?topic=culture-competence')}
ariaLabel="Schedule a culture and competence consultation"

139
src/components/services/ExecutiveCoaching.tsx
View File

@@ -7,7 +7,7 @@ import { navigateTo } from '../Router';
import { BrandedTag } from '../about/BrandedTag';
import { PrimaryCTAButton } from '../PrimaryCTAButton';
import { StandardCTAButton } from '../StandardCTAButton';
import {
import {
ArrowRight,
CheckCircle,
Settings,
@@ -38,6 +38,7 @@ import {
User,
UserCheck
} from 'lucide-react';
import { TestimonialsSection } from '../TestimonialsSection';
const targetAudience = [
{
@@ -148,7 +149,7 @@ export function ExecutiveCoaching() {
{/* Hero Section */}
<section className="relative min-h-[85vh] flex flex-col">
<div className="absolute inset-0 z-0">
<div
<div
className="w-full h-full bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=1920&h=1080&fit=crop')`
@@ -162,8 +163,8 @@ export function ExecutiveCoaching() {
<div className="max-w-4xl">
{/* Back Navigation */}
<div className="mb-8">
<Button
variant="ghost"
<Button
variant="ghost"
onClick={() => navigateTo('/services')}
className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
>
@@ -177,13 +178,13 @@ export function ExecutiveCoaching() {
Coaching & Mentoring
</h1>
</div>
<p className="text-body-lg-white mb-8 max-w-3xl">
<strong>Develop exceptional leaders through personalized coaching that drives 87% improvement in leadership effectiveness and accelerates career advancement.</strong>
</p>
<div className="flex justify-start">
<PrimaryCTAButton
<PrimaryCTAButton
text="Book a Consultation"
onClick={() => navigateTo('/contact?topic=coaching-mentoring')}
ariaLabel="Book a consultation for coaching and mentoring"
@@ -218,7 +219,7 @@ export function ExecutiveCoaching() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
@@ -235,7 +236,7 @@ export function ExecutiveCoaching() {
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
@@ -252,7 +253,7 @@ export function ExecutiveCoaching() {
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
@@ -289,7 +290,7 @@ export function ExecutiveCoaching() {
<Card key={index} className="h-full hover:shadow-lg transition-all duration-300">
<CardContent className="p-8">
<div className="flex items-center gap-4 mb-6">
<div
<div
className="w-16 h-16 rounded-2xl flex items-center justify-center"
style={{ backgroundColor: 'var(--color-primary)' }}
>
@@ -331,7 +332,7 @@ export function ExecutiveCoaching() {
<div className="space-y-6">
{useCases.map((useCase, index) => (
<Card
<Card
key={index}
className="border border-gray-200 hover:border-primary/20 transition-all duration-300 hover:shadow-lg"
>
@@ -341,7 +342,7 @@ export function ExecutiveCoaching() {
onClick={() => setExpandedUseCase(expandedUseCase === index ? null : index)}
>
<div className="flex items-start gap-4 flex-1">
<div
<div
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'var(--color-accent)' }}
>
@@ -465,7 +466,7 @@ export function ExecutiveCoaching() {
<div className="space-y-8">
{programTimeline.map((phase, index) => (
<Card
<Card
key={index}
className="border border-gray-200 hover:border-primary/20 transition-all duration-300 hover:shadow-lg"
>
@@ -475,7 +476,7 @@ export function ExecutiveCoaching() {
onClick={() => setExpandedPhase(expandedPhase === index ? null : index)}
>
<div className="flex items-start gap-4 flex-1">
<div
<div
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'var(--color-primary)' }}
>
@@ -551,7 +552,7 @@ export function ExecutiveCoaching() {
{expectedOutcomes.map((outcome, index) => (
<Card key={index} className="text-center bg-white hover:shadow-lg transition-all duration-300">
<CardContent className="p-8">
<div
<div
className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6"
style={{ backgroundColor: 'var(--color-primary)' }}
>
@@ -592,97 +593,11 @@ export function ExecutiveCoaching() {
</section>
{/* 7. Client Examples / Testimonials - Hero Section Design */}
<section
className="relative py-20 flex items-center"
style={{ backgroundColor: '#F7F7FD' }}
>
<div className="w-full section-margin-x">
{/* Branded Tag */}
<div className="flex justify-center mb-12">
<div className="inline-flex items-center gap-3 bg-[rgba(248,195,1,0.1)] px-4 py-2 rounded-lg">
<div className="w-[7px] h-[7px] bg-[#f8c301] rounded-full" />
<span className="text-[#26231a] text-lg lg:text-lg md:text-base sm:text-sm uppercase tracking-wider font-light">
Client Success Stories
</span>
</div>
</div>
{/* Main heading */}
<h2
className="text-h2 leading-tight mb-12 text-center"
style={{ color: 'var(--color-brand-primary)' }}
>
Coaching & Mentoring Success
</h2>
{/* Split Layout Container with Max Width */}
<div className="max-w-5xl mx-auto">
<div className="flex h-[400px] rounded-2xl overflow-hidden shadow-2xl">
{/* Left Side - Image */}
<div className="flex-1 relative">
<div className="relative w-full h-full overflow-hidden">
<ImageWithFallback
src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&h=800&fit=crop"
alt="Executive Coaching Success"
className="w-full h-full object-cover"
/>
</div>
</div>
{/* Right Side - Quote Content with White Background */}
<div
className="flex-1 flex items-center justify-center p-8 relative"
style={{ backgroundColor: 'white' }}
>
{/* Large Opening Quotation Mark */}
<div
className="absolute top-4 left-4 text-3xl opacity-30"
style={{ color: 'var(--color-brand-primary)' }}
>
"
</div>
<div className="space-y-4 max-w-lg relative z-10">
{/* Quote */}
<blockquote
className="text-lg leading-relaxed font-medium"
style={{
fontFamily: 'var(--font-family-base)',
color: 'var(--color-brand-black)'
}}
>
The executive coaching program was transformational for my leadership journey. My coach helped me navigate a complex organizational restructuring while developing my strategic thinking capabilities. Within 12 months, I was promoted to CEO and credit much of my success to personalized coaching.
</blockquote>
{/* Attribution */}
<div className="space-y-1 pt-3">
<div
className="text-base font-semibold"
style={{ color: 'var(--color-brand-primary)' }}
>
Technology Company
</div>
<div
className="text-xs"
style={{ color: 'var(--color-brand-gray-muted)' }}
>
Senior Vice President → CEO • 87% improvement in leadership effectiveness
</div>
</div>
</div>
{/* Large Closing Quotation Mark */}
<div
className="absolute bottom-4 right-4 text-3xl opacity-30"
style={{ color: 'var(--color-brand-primary)' }}
>
"
</div>
</div>
</div>
</div>
</div>
</section>
<TestimonialsSection
title="Coaching & Mentoring Success"
subtitle=""
tagText="Client Success Stories"
/>
{/* 8. CTA Section - Hero Section Design */}
<section className="relative h-[700px] overflow-hidden">
@@ -693,10 +608,10 @@ export function ExecutiveCoaching() {
alt="Professional team collaborating in modern office"
className="w-full h-full object-cover"
/>
{/* Subtle dark overlay for overall image */}
<div className="absolute inset-0 bg-black/30" />
{/* Gradient overlay for better text readability */}
<div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
</div>
@@ -704,7 +619,7 @@ export function ExecutiveCoaching() {
{/* Content Container */}
<div className="relative h-full flex items-center justify-end section-margin-x">
{/* CTA Content Block */}
<div
<div
className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
style={{ backgroundColor: 'var(--color-brand-primary)' }}
>
@@ -713,8 +628,8 @@ export function ExecutiveCoaching() {
{/* Main Headline */}
<h2 className="text-h2-white mb-8">
Ready to accelerate your leadership?
<span
Ready to accelerate your leadership?
<span
className="italic"
style={{ color: 'var(--color-brand-accent)' }}
>
@@ -724,7 +639,7 @@ export function ExecutiveCoaching() {
</h2>
{/* CTA Button */}
<StandardCTAButton
<StandardCTAButton
text="Schedule a Coaching Consultation"
onClick={() => navigateTo('/contact?topic=coaching-mentoring')}
ariaLabel="Schedule a coaching and mentoring consultation"

283
src/components/services/LeadershipDevelopment.tsx
View File

@@ -7,7 +7,7 @@ import { navigateTo } from '../Router';
import { BrandedTag } from '../about/BrandedTag';
import { PrimaryCTAButton } from '../PrimaryCTAButton';
import { StandardCTAButton } from '../StandardCTAButton';
import {
import {
ArrowRight,
CheckCircle,
Settings,
@@ -37,6 +37,7 @@ import {
Building,
UserCheck
} from 'lucide-react';
import { TestimonialsSection } from '../TestimonialsSection';
const targetAudience = [
{
@@ -147,7 +148,7 @@ export function LeadershipDevelopment() {
{/* Hero Section */}
<section className="relative min-h-[85vh] flex flex-col">
<div className="absolute inset-0 z-0">
<div
<div
className="w-full h-full bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url('https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=1920&h=1080&fit=crop')`
@@ -161,8 +162,8 @@ export function LeadershipDevelopment() {
<div className="max-w-4xl">
{/* Back Navigation */}
<div className="mb-8">
<Button
variant="ghost"
<Button
variant="ghost"
onClick={() => navigateTo('/services')}
className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
>
@@ -176,13 +177,13 @@ export function LeadershipDevelopment() {
Leadership Development
</h1>
</div>
<p className="text-body-lg-white mb-8 max-w-3xl">
<strong>Transform senior executives into visionary leaders who drive 94% better strategic outcomes and organizational performance.</strong>
</p>
<div className="flex justify-start">
<PrimaryCTAButton
<PrimaryCTAButton
text="Book a Consultation"
onClick={() => navigateTo('/contact?topic=leadership-development')}
ariaLabel="Book a consultation for leadership development"
@@ -217,7 +218,7 @@ export function LeadershipDevelopment() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
@@ -234,7 +235,7 @@ export function LeadershipDevelopment() {
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
@@ -251,7 +252,7 @@ export function LeadershipDevelopment() {
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
@@ -288,7 +289,7 @@ export function LeadershipDevelopment() {
<Card key={index} className="h-full hover:shadow-lg transition-all duration-300">
<CardContent className="p-8">
<div className="flex items-center gap-4 mb-6">
<div
<div
className="w-16 h-16 rounded-2xl flex items-center justify-center"
style={{ backgroundColor: 'var(--color-primary)' }}
>
@@ -330,13 +331,13 @@ export function LeadershipDevelopment() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{useCases.map((useCase, index) => (
<div
<div
key={index}
className="bg-white rounded-xl border border-gray-200 p-6 hover:border-[#04045B] hover:shadow-lg transition-all duration-300"
>
{/* Icon and Title */}
<div className="flex items-start gap-4 mb-4">
<div
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -385,7 +386,7 @@ export function LeadershipDevelopment() {
<h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
<div className="space-y-8">
<div className="flex items-start gap-4">
<div
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -398,9 +399,9 @@ export function LeadershipDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -413,9 +414,9 @@ export function LeadershipDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -428,9 +429,9 @@ export function LeadershipDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -459,7 +460,7 @@ export function LeadershipDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
<div className="flex-1">
@@ -469,7 +470,7 @@ export function LeadershipDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
<div className="flex-1">
@@ -479,7 +480,7 @@ export function LeadershipDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
<div className="flex-1">
@@ -511,7 +512,7 @@ export function LeadershipDevelopment() {
<div className="space-y-8">
{programTimeline.map((phase, index) => (
<Card
<Card
key={index}
className="border border-gray-200 hover:border-primary/20 transition-all duration-300 hover:shadow-lg"
>
@@ -521,7 +522,7 @@ export function LeadershipDevelopment() {
onClick={() => setExpandedPhase(expandedPhase === index ? null : index)}
>
<div className="flex items-start gap-4 flex-1">
<div
<div
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'var(--color-primary)' }}
>
@@ -597,7 +598,7 @@ export function LeadershipDevelopment() {
{expectedOutcomes.map((outcome, index) => (
<Card key={index} className="text-center bg-white hover:shadow-lg transition-all duration-300">
<CardContent className="p-8">
<div
<div
className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6"
style={{ backgroundColor: 'var(--color-primary)' }}
>
@@ -638,221 +639,11 @@ export function LeadershipDevelopment() {
</section>
{/* 7. Client Examples / Testimonials - Hero Section Design */}
<section
className="relative py-20 flex items-center"
style={{ backgroundColor: '#F7F7FD' }}
>
<div className="w-full section-margin-x">
{/* Branded Tag */}
<div className="flex justify-center mb-8">
<div className="inline-flex items-center gap-3 bg-[rgba(248,195,1,0.1)] px-4 py-2 rounded-lg">
<div className="w-[7px] h-[7px] bg-[#f8c301] rounded-full" />
<span className="text-[#26231a] text-base uppercase tracking-wider font-light">
SUCCESS STORIES
</span>
</div>
</div>
{/* Main heading */}
<h2 className="text-h2 text-center mb-6 text-[#26231A]">
What Our Leaders Say
</h2>
{/* Subtitle */}
<p className="text-center text-[#6F6F6F] text-lg max-w-2xl mx-auto mb-12">
Hear from executives and managers who have transformed their leadership approach through our comprehensive development programs.
</p>
{/* Navigation Controls */}
<div className="flex justify-end mb-6">
<div className="flex gap-2">
<button
className="w-12 h-12 rounded-full border-2 border-[#E5E7EB] bg-white flex items-center justify-center hover:border-[#04045B] hover:bg-[#04045B] hover:text-white transition-all duration-300"
onClick={() => {
const container = document.getElementById('testimonials-container');
if (container) {
container.scrollBy({ left: -400, behavior: 'smooth' });
}
}}
>
<ArrowLeft className="w-5 h-5" />
</button>
<button
className="w-12 h-12 rounded-full border-2 border-[#E5E7EB] bg-white flex items-center justify-center hover:border-[#04045B] hover:bg-[#04045B] hover:text-white transition-all duration-300"
onClick={() => {
const container = document.getElementById('testimonials-container');
if (container) {
container.scrollBy({ left: 400, behavior: 'smooth' });
}
}}
>
<ArrowRight className="w-5 h-5" />
</button>
</div>
</div>
{/* Testimonials Carousel */}
<div
id="testimonials-container"
className="flex gap-6 overflow-x-auto scrollbar-hide pb-4"
style={{ scrollSnapType: 'x mandatory' }}
>
{/* Testimonial Card 1 */}
<div className="flex-shrink-0 w-[380px] bg-white rounded-xl shadow-lg overflow-hidden" style={{ scrollSnapAlign: 'start' }}>
<div className="relative h-48 bg-gradient-to-br from-[#04045B] to-[#030359]">
<div className="absolute top-4 left-4 bg-[#04045B] text-white px-2 py-1 rounded text-xs font-medium">
VIDEO
</div>
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center">
<ArrowRight className="w-8 h-8 text-[#04045B] ml-1" />
</div>
</div>
<div className="absolute bottom-4 left-4 flex items-center gap-3">
<ImageWithFallback
src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=100&h=100&fit=crop&crop=face"
alt="David Thompson"
className="w-12 h-12 rounded-full border-2 border-white"
/>
<div>
<div className="text-white font-semibold text-sm">David Thompson</div>
<div className="text-white/80 text-xs">Senior VP</div>
<div className="text-white/60 text-xs">Enterprise Solutions</div>
</div>
</div>
<div className="absolute bottom-4 right-4 flex gap-1">
{[...Array(5)].map((_, i) => (
<Star key={i} className="w-4 h-4 fill-[#F8C301] text-[#F8C301]" />
))}
</div>
</div>
<div className="p-6">
<p className="text-[#26231A] text-sm leading-relaxed">
The personalized coaching and development programs have been game-changing for our organization's leadership pipeline and succession planning initiatives.
</p>
</div>
</div>
{/* Testimonial Card 2 */}
<div className="flex-shrink-0 w-[380px] bg-white rounded-xl shadow-lg overflow-hidden" style={{ scrollSnapAlign: 'start' }}>
<div className="relative h-48">
<ImageWithFallback
src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=380&h=192&fit=crop"
alt="Team meeting"
className="w-full h-full object-cover"
/>
<div className="absolute top-4 left-4 bg-[#04045B] text-white px-2 py-1 rounded text-xs font-medium">
VIDEO
</div>
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center">
<ArrowRight className="w-8 h-8 text-[#04045B] ml-1" />
</div>
</div>
<div className="absolute bottom-4 left-4 flex items-center gap-3">
<ImageWithFallback
src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop&crop=face"
alt="Lisa Wang"
className="w-12 h-12 rounded-full border-2 border-white"
/>
<div>
<div className="text-white font-semibold text-sm">Lisa Wang</div>
<div className="text-white/80 text-xs">Product Manager</div>
<div className="text-white/60 text-xs">Digital Innovation</div>
</div>
</div>
<div className="absolute bottom-4 right-4 flex gap-1">
{[...Array(5)].map((_, i) => (
<Star key={i} className="w-4 h-4 fill-[#F8C301] text-[#F8C301]" />
))}
</div>
</div>
<div className="p-6">
<p className="text-[#26231A] text-sm leading-relaxed">
The leadership development program fundamentally transformed my approach to strategic leadership. Within 6 months, our strategic execution improved by 65%.
</p>
</div>
</div>
{/* Testimonial Card 3 */}
<div className="flex-shrink-0 w-[380px] bg-white rounded-xl shadow-lg overflow-hidden" style={{ scrollSnapAlign: 'start' }}>
<div className="relative h-48 bg-gradient-to-br from-[#04045B] to-[#030359]">
<div className="absolute top-4 left-4 bg-[#04045B] text-white px-2 py-1 rounded text-xs font-medium">
VIDEO
</div>
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center">
<ArrowRight className="w-8 h-8 text-[#04045B] ml-1" />
</div>
</div>
<div className="absolute bottom-4 left-4 flex items-center gap-3">
<ImageWithFallback
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face"
alt="Robert Kim"
className="w-12 h-12 rounded-full border-2 border-white"
/>
<div>
<div className="text-white font-semibold text-sm">Robert Kim</div>
<div className="text-white/80 text-xs">Regional Director</div>
<div className="text-white/60 text-xs">Global Corp</div>
</div>
</div>
<div className="absolute bottom-4 right-4 flex gap-1">
{[...Array(5)].map((_, i) => (
<Star key={i} className="w-4 h-4 fill-[#F8C301] text-[#F8C301]" />
))}
</div>
</div>
<div className="p-6">
<p className="text-[#26231A] text-sm leading-relaxed">
The leadership development programs provided by KLC have been instrumental in building a more cohesive and effective leadership team across our organization.
</p>
</div>
</div>
{/* Testimonial Card 4 */}
<div className="flex-shrink-0 w-[380px] bg-white rounded-xl shadow-lg overflow-hidden" style={{ scrollSnapAlign: 'start' }}>
<div className="relative h-48">
<ImageWithFallback
src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=380&h=192&fit=crop"
alt="Executive meeting"
className="w-full h-full object-cover"
/>
<div className="absolute top-4 left-4 bg-[#04045B] text-white px-2 py-1 rounded text-xs font-medium">
VIDEO
</div>
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center">
<ArrowRight className="w-8 h-8 text-[#04045B] ml-1" />
</div>
</div>
<div className="absolute bottom-4 left-4 flex items-center gap-3">
<ImageWithFallback
src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=100&h=100&fit=crop&crop=face"
alt="Sarah Chen"
className="w-12 h-12 rounded-full border-2 border-white"
/>
<div>
<div className="text-white font-semibold text-sm">Sarah Chen</div>
<div className="text-white/80 text-xs">Chief Executive Officer</div>
<div className="text-white/60 text-xs">TechForward Solutions</div>
</div>
</div>
<div className="absolute bottom-4 right-4 flex gap-1">
{[...Array(5)].map((_, i) => (
<Star key={i} className="w-4 h-4 fill-[#F8C301] text-[#F8C301]" />
))}
</div>
</div>
<div className="p-6">
<p className="text-[#26231A] text-sm leading-relaxed">
KLC's leadership development programs have completely changed how we approach team building and strategic planning. The results speak for themselves.
</p>
</div>
</div>
</div>
</div>
</section>
<TestimonialsSection
title="What Our Leaders Say"
subtitle="Hear from executives and managers who have transformed their leadership approach through our comprehensive development programs."
tagText="SUCCESS STORIES"
/>
{/* 8. CTA Section - Hero Section Design */}
<section className="relative h-[700px] overflow-hidden">
@@ -863,10 +654,10 @@ export function LeadershipDevelopment() {
alt="Professional team collaborating in modern office"
className="w-full h-full object-cover"
/>
{/* Subtle dark overlay for overall image */}
<div className="absolute inset-0 bg-black/30" />
{/* Gradient overlay for better text readability */}
<div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
</div>
@@ -874,7 +665,7 @@ export function LeadershipDevelopment() {
{/* Content Container */}
<div className="relative h-full flex items-center justify-end section-margin-x">
{/* CTA Content Block */}
<div
<div
className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
style={{ backgroundColor: 'var(--color-brand-primary)' }}
>
@@ -883,8 +674,8 @@ export function LeadershipDevelopment() {
{/* Main Headline */}
<h2 className="text-h2-white mb-8">
Ready to transform your leadership?
<span
Ready to transform your leadership?
<span
className="italic"
style={{ color: 'var(--color-brand-accent)' }}
>
@@ -894,7 +685,7 @@ export function LeadershipDevelopment() {
</h2>
{/* CTA Button */}
<StandardCTAButton
<StandardCTAButton
text="Schedule a Leadership Consultation"
onClick={() => navigateTo('/contact?topic=leadership-development')}
ariaLabel="Schedule a leadership development consultation"

236
src/components/services/LeadershipPipelineDevelopment.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import {
import {
ArrowRight,
CheckCircle,
Settings,
@@ -38,6 +38,7 @@ import { BrandedTag } from '../about/BrandedTag';
import { Card, CardContent } from '../ui/card';
import { ImageWithFallback } from '../figma/ImageWithFallback';
import { StandardCTAButton } from '../StandardCTAButton';
import { TestimonialsSection } from '../TestimonialsSection';
const targetAudience = [
{
@@ -199,7 +200,7 @@ export function LeadershipPipelineDevelopment() {
{/* Hero Section */}
<section className="relative min-h-[85vh] flex flex-col">
<div className="absolute inset-0 z-0">
<div
<div
className="w-full h-full bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1920&h=1080&fit=crop')`
@@ -213,8 +214,8 @@ export function LeadershipPipelineDevelopment() {
<div className="max-w-4xl">
{/* Back Navigation */}
<div className="mb-8">
<Button
variant="ghost"
<Button
variant="ghost"
onClick={() => navigateTo('/services')}
className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
>
@@ -228,13 +229,13 @@ export function LeadershipPipelineDevelopment() {
Leadership Pipeline Development
</h1>
</div>
<p className="text-body-lg-white mb-8 max-w-3xl">
<strong>Build sustainable leadership pipelines that eliminate succession gaps and reduce external hiring by 75%.</strong>
</p>
<div className="flex justify-start">
<PrimaryCTAButton
<PrimaryCTAButton
text="Book a Consultation"
onClick={() => navigateTo('/contact?topic=leadership-pipeline')}
ariaLabel="Book a consultation for leadership pipeline development"
@@ -269,7 +270,7 @@ export function LeadershipPipelineDevelopment() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
@@ -286,7 +287,7 @@ export function LeadershipPipelineDevelopment() {
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
@@ -303,7 +304,7 @@ export function LeadershipPipelineDevelopment() {
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
@@ -340,7 +341,7 @@ export function LeadershipPipelineDevelopment() {
<Card key={index} className="h-full hover:shadow-lg transition-all duration-300">
<CardContent className="p-8">
<div className="flex items-center gap-4 mb-6">
<div
<div
className="w-16 h-16 rounded-2xl flex items-center justify-center"
style={{ backgroundColor: 'var(--color-primary)' }}
>
@@ -382,13 +383,13 @@ export function LeadershipPipelineDevelopment() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{useCases.map((useCase, index) => (
<div
<div
key={index}
className="bg-white rounded-xl border border-gray-200 p-6 hover:border-[#04045B] hover:shadow-lg transition-all duration-300"
>
{/* Icon and Title */}
<div className="flex items-start gap-4 mb-4">
<div
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -437,7 +438,7 @@ export function LeadershipPipelineDevelopment() {
<h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
<div className="space-y-8">
<div className="flex items-start gap-4">
<div
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -450,9 +451,9 @@ export function LeadershipPipelineDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -465,9 +466,9 @@ export function LeadershipPipelineDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -480,9 +481,9 @@ export function LeadershipPipelineDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -511,7 +512,7 @@ export function LeadershipPipelineDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
<div className="flex-1">
@@ -521,7 +522,7 @@ export function LeadershipPipelineDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
<div className="flex-1">
@@ -531,7 +532,7 @@ export function LeadershipPipelineDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
<div className="flex-1">
@@ -563,7 +564,7 @@ export function LeadershipPipelineDevelopment() {
<div className="space-y-8">
{programTimeline.map((phase, index) => (
<Card
<Card
key={index}
className="border border-gray-200 hover:border-primary/20 transition-all duration-300 hover:shadow-lg"
>
@@ -573,7 +574,7 @@ export function LeadershipPipelineDevelopment() {
onClick={() => setExpandedPhase(expandedPhase === index ? null : index)}
>
<div className="flex items-start gap-4 flex-1">
<div
<div
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'var(--color-primary)' }}
>
@@ -649,7 +650,7 @@ export function LeadershipPipelineDevelopment() {
{expectedOutcomes.map((outcome, index) => (
<Card key={index} className="text-center bg-white hover:shadow-lg transition-all duration-300">
<CardContent className="p-8">
<div
<div
className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6"
style={{ backgroundColor: 'var(--color-primary)' }}
>
@@ -690,174 +691,11 @@ export function LeadershipPipelineDevelopment() {
</section>
{/* 7. Client Examples / Testimonials - Hero Section Design */}
<section
className="relative py-20 flex items-center"
style={{ backgroundColor: '#F7F7FD' }}
>
<div className="w-full section-margin-x">
{/* Branded Tag */}
<div className="flex justify-center mb-12">
<div className="inline-flex items-center gap-3 bg-[rgba(248,195,1,0.1)] px-4 py-2 rounded-lg">
<div className="w-[7px] h-[7px] bg-[#f8c301] rounded-full" />
<span className="text-[#26231a] text-lg lg:text-lg md:text-base sm:text-sm uppercase tracking-wider font-light">
Client Success Stories
</span>
</div>
</div>
{/* Main heading */}
<h2
className="text-h2 leading-tight mb-8 text-center"
style={{ color: 'var(--color-brand-primary)' }}
>
Pipeline Development Success
</h2>
{/* Navigation Controls */}
<div className="flex justify-end mb-6">
<div className="flex gap-2">
<button
className="w-12 h-12 rounded-full border-2 border-[#E5E7EB] bg-white flex items-center justify-center hover:border-[#04045B] hover:bg-[#04045B] hover:text-white transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
onClick={() => {
const currentIndex = pipelineTestimonials.findIndex(t => t.id === currentTestimonial);
const prevIndex = currentIndex > 0 ? currentIndex - 1 : pipelineTestimonials.length - 1;
setCurrentTestimonial(pipelineTestimonials[prevIndex].id);
}}
>
<ArrowLeft className="w-5 h-5" />
</button>
<button
className="w-12 h-12 rounded-full border-2 border-[#E5E7EB] bg-white flex items-center justify-center hover:border-[#04045B] hover:bg-[#04045B] hover:text-white transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
onClick={() => {
const currentIndex = pipelineTestimonials.findIndex(t => t.id === currentTestimonial);
const nextIndex = currentIndex < pipelineTestimonials.length - 1 ? currentIndex + 1 : 0;
setCurrentTestimonial(pipelineTestimonials[nextIndex].id);
}}
>
<ArrowRight className="w-5 h-5" />
</button>
</div>
</div>
{/* Split Layout Container with Max Width - Exact Home Page Design */}
<div className="max-w-5xl mx-auto">
<div className="flex h-[400px] rounded-2xl overflow-hidden shadow-2xl">
{/* Left Side - Video Testimonial */}
<div
className="flex-1 relative group cursor-pointer"
onClick={() => {
// Video testimonial click handler
console.log('Play video testimonial');
}}
>
<div className="relative w-full h-full overflow-hidden">
{/* Video Thumbnail */}
<ImageWithFallback
src={currentTestimonialData.image}
alt={currentTestimonialData.name}
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
/>
{/* Dark overlay on hover */}
<div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
{/* Centered Play Button Overlay */}
{currentTestimonialData.hasVideo && (
<div className="absolute inset-0 flex items-center justify-center">
<div className="flex items-center justify-center w-16 h-16 bg-white/90 backdrop-blur-sm rounded-full shadow-lg group-hover:scale-110 transition-all duration-300">
<ArrowRight
className="w-7 h-7 ml-1 text-blue-600"
fill="currentColor"
/>
</div>
</div>
)}
{/* Watch Video Text */}
{currentTestimonialData.hasVideo && (
<div className="absolute bottom-4 left-4 text-white">
<div className="bg-black/30 backdrop-blur-sm rounded-lg px-3 py-1">
<span className="text-xs font-medium">▶ Video</span>
</div>
</div>
)}
</div>
</div>
{/* Right Side - Text Testimonial with White Background */}
<div
className="flex-1 flex items-center justify-center p-8 relative"
style={{ backgroundColor: 'white' }}
>
{/* Large Opening Quotation Mark */}
<div
className="absolute top-4 left-4 text-3xl opacity-30"
style={{ color: 'var(--color-brand-primary)' }}
>
"
</div>
<div className="space-y-4 max-w-lg relative z-10">
{/* Quote with Compact Typography */}
<blockquote
className="text-lg leading-relaxed font-medium transition-all duration-500"
style={{
fontFamily: 'var(--font-family-brand)',
color: 'var(--color-brand-black)'
}}
>
{currentTestimonialData.quote}
</blockquote>
{/* Attribution */}
<div className="space-y-1 pt-3">
<div
className="text-base font-semibold transition-all duration-500"
style={{ color: 'var(--color-brand-primary)' }}
>
{currentTestimonialData.name}
</div>
<div
className="text-xs transition-all duration-500"
style={{ color: 'var(--color-brand-gray-muted)' }}
>
{currentTestimonialData.title} {currentTestimonialData.company && `at ${currentTestimonialData.company}`}
</div>
</div>
{/* Testimonial Navigation Dots */}
<div className="flex items-center space-x-2 pt-4">
{pipelineTestimonials.map((testimonial, index) => (
<button
key={testimonial.id}
className={`w-2 h-2 rounded-full transition-all duration-300 ${
testimonial.id === currentTestimonial
? 'opacity-100'
: 'opacity-30 hover:opacity-60'
}`}
style={{
backgroundColor: testimonial.id === currentTestimonial
? 'var(--color-brand-accent)'
: 'var(--color-brand-gray-muted)'
}}
onClick={() => setCurrentTestimonial(testimonial.id)}
/>
))}
</div>
</div>
{/* Large Closing Quotation Mark */}
<div
className="absolute bottom-4 right-4 text-3xl opacity-30"
style={{ color: 'var(--color-brand-primary)' }}
>
"
</div>
</div>
</div>
</div>
</div>
</section>
<TestimonialsSection
title="Pipeline Development Success"
subtitle=""
tagText="Client Success Stories"
/>
{/* 8. CTA Section - Hero Section Design */}
<section className="relative h-[700px] overflow-hidden">
@@ -868,10 +706,10 @@ export function LeadershipPipelineDevelopment() {
alt="Professional team collaborating in modern office"
className="w-full h-full object-cover"
/>
{/* Subtle dark overlay for overall image */}
<div className="absolute inset-0 bg-black/30" />
{/* Gradient overlay for better text readability */}
<div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
</div>
@@ -879,7 +717,7 @@ export function LeadershipPipelineDevelopment() {
{/* Content Container */}
<div className="relative h-full flex items-center justify-end section-margin-x">
{/* CTA Content Block */}
<div
<div
className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
style={{ backgroundColor: 'var(--color-brand-primary)' }}
>
@@ -888,8 +726,8 @@ export function LeadershipPipelineDevelopment() {
{/* Main Headline */}
<h2 className="text-h2-white mb-8">
Ready to build your leadership pipeline?
<span
Ready to build your leadership pipeline?
<span
className="italic"
style={{ color: 'var(--color-brand-accent)' }}
>
@@ -899,7 +737,7 @@ export function LeadershipPipelineDevelopment() {
</h2>
{/* CTA Button */}
<StandardCTAButton
<StandardCTAButton
text="Schedule a Pipeline Consultation"
onClick={() => navigateTo('/contact?topic=leadership-pipeline')}
ariaLabel="Schedule a leadership pipeline consultation"

159
src/components/services/ManagementDevelopment.tsx
View File

@@ -7,7 +7,7 @@ import { navigateTo } from '../Router';
import { BrandedTag } from '../about/BrandedTag';
import { PrimaryCTAButton } from '../PrimaryCTAButton';
import { StandardCTAButton } from '../StandardCTAButton';
import {
import {
ArrowRight,
CheckCircle,
Settings,
@@ -36,6 +36,7 @@ import {
UserCheck,
Heart
} from 'lucide-react';
import { TestimonialsSection } from '../TestimonialsSection';
const targetAudience = [
{
@@ -146,7 +147,7 @@ export function ManagementDevelopment() {
{/* Hero Section */}
<section className="relative min-h-[85vh] flex flex-col">
<div className="absolute inset-0 z-0">
<div
<div
className="w-full h-full bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url('https://images.unsplash.com/photo-1552664730-d307ca884978?w=1920&h=1080&fit=crop')`
@@ -160,8 +161,8 @@ export function ManagementDevelopment() {
<div className="max-w-4xl">
{/* Back Navigation */}
<div className="mb-8">
<Button
variant="ghost"
<Button
variant="ghost"
onClick={() => navigateTo('/services')}
className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
>
@@ -175,13 +176,13 @@ export function ManagementDevelopment() {
Management Development
</h1>
</div>
<p className="text-body-lg-white mb-8 max-w-3xl">
<strong>Build exceptional managers who drive 89% better team performance and reduce turnover by 76%.</strong>
</p>
<div className="flex justify-start">
<PrimaryCTAButton
<PrimaryCTAButton
text="Talk to Us"
onClick={() => navigateTo('/contact?topic=management-development')}
ariaLabel="Talk to us about management development"
@@ -216,7 +217,7 @@ export function ManagementDevelopment() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
@@ -233,7 +234,7 @@ export function ManagementDevelopment() {
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
@@ -250,7 +251,7 @@ export function ManagementDevelopment() {
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
@@ -287,7 +288,7 @@ export function ManagementDevelopment() {
<Card key={index} className="h-full hover:shadow-lg transition-all duration-300">
<CardContent className="p-8">
<div className="flex items-center gap-4 mb-6">
<div
<div
className="w-16 h-16 rounded-2xl flex items-center justify-center"
style={{ backgroundColor: 'var(--color-primary)' }}
>
@@ -329,13 +330,13 @@ export function ManagementDevelopment() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{useCases.map((useCase, index) => (
<div
<div
key={index}
className="bg-white rounded-xl border border-gray-200 p-6 hover:border-[#04045B] hover:shadow-lg transition-all duration-300"
>
{/* Icon and Title */}
<div className="flex items-start gap-4 mb-4">
<div
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -384,7 +385,7 @@ export function ManagementDevelopment() {
<h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
<div className="space-y-8">
<div className="flex items-start gap-4">
<div
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -397,9 +398,9 @@ export function ManagementDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -412,9 +413,9 @@ export function ManagementDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -427,9 +428,9 @@ export function ManagementDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
@@ -458,7 +459,7 @@ export function ManagementDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
<div className="flex-1">
@@ -468,7 +469,7 @@ export function ManagementDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
<div className="flex-1">
@@ -478,7 +479,7 @@ export function ManagementDevelopment() {
</p>
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
<div className="flex-1">
@@ -510,7 +511,7 @@ export function ManagementDevelopment() {
<div className="space-y-8">
{programTimeline.map((phase, index) => (
<Card
<Card
key={index}
className="border border-gray-200 hover:border-primary/20 transition-all duration-300 hover:shadow-lg"
>
@@ -520,7 +521,7 @@ export function ManagementDevelopment() {
onClick={() => setExpandedPhase(expandedPhase === index ? null : index)}
>
<div className="flex items-start gap-4 flex-1">
<div
<div
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'var(--color-primary)' }}
>
@@ -596,7 +597,7 @@ export function ManagementDevelopment() {
{expectedOutcomes.map((outcome, index) => (
<Card key={index} className="text-center bg-white hover:shadow-lg transition-all duration-300">
<CardContent className="p-8">
<div
<div
className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6"
style={{ backgroundColor: 'var(--color-primary)' }}
>
@@ -637,97 +638,11 @@ export function ManagementDevelopment() {
</section>
{/* 7. Client Examples / Testimonials - Hero Section Design */}
<section
className="relative py-20 flex items-center"
style={{ backgroundColor: '#F7F7FD' }}
>
<div className="w-full section-margin-x">
{/* Branded Tag */}
<div className="flex justify-center mb-12">
<div className="inline-flex items-center gap-3 bg-[rgba(248,195,1,0.1)] px-4 py-2 rounded-lg">
<div className="w-[7px] h-[7px] bg-[#f8c301] rounded-full" />
<span className="text-[#26231a] text-lg lg:text-lg md:text-base sm:text-sm uppercase tracking-wider font-light">
Client Success Stories
</span>
</div>
</div>
{/* Main heading */}
<h2
className="text-h2 leading-tight mb-12 text-center"
style={{ color: 'var(--color-brand-primary)' }}
>
Management Development Success
</h2>
{/* Split Layout Container with Max Width */}
<div className="max-w-5xl mx-auto">
<div className="flex h-[400px] rounded-2xl overflow-hidden shadow-2xl">
{/* Left Side - Image */}
<div className="flex-1 relative">
<div className="relative w-full h-full overflow-hidden">
<ImageWithFallback
src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=800&fit=crop"
alt="Management Development Success"
className="w-full h-full object-cover"
/>
</div>
</div>
{/* Right Side - Quote Content with White Background */}
<div
className="flex-1 flex items-center justify-center p-8 relative"
style={{ backgroundColor: 'white' }}
>
{/* Large Opening Quotation Mark */}
<div
className="absolute top-4 left-4 text-3xl opacity-30"
style={{ color: 'var(--color-brand-primary)' }}
>
"
</div>
<div className="space-y-4 max-w-lg relative z-10">
{/* Quote */}
<blockquote
className="text-lg leading-relaxed font-medium"
style={{
fontFamily: 'var(--font-family-base)',
color: 'var(--color-brand-black)'
}}
>
Our Management Development program transformed our middle management layer. Within 9 months, we saw 89% improvement in team performance metrics and a 76% reduction in turnover. Most importantly, our managers now have the confidence and skills to lead effectively.
</blockquote>
{/* Attribution */}
<div className="space-y-1 pt-3">
<div
className="text-base font-semibold"
style={{ color: 'var(--color-brand-primary)' }}
>
Retail Chain Organization
</div>
<div
className="text-xs"
style={{ color: 'var(--color-brand-gray-muted)' }}
>
800+ employees • 120 managers trained • 89% team performance improvement
</div>
</div>
</div>
{/* Large Closing Quotation Mark */}
<div
className="absolute bottom-4 right-4 text-3xl opacity-30"
style={{ color: 'var(--color-brand-primary)' }}
>
"
</div>
</div>
</div>
</div>
</div>
</section>
<TestimonialsSection
title="Management Development Success"
subtitle=""
tagText="Client Success Stories"
/>
{/* 8. CTA Section - Hero Section Design */}
<section className="relative h-[700px] overflow-hidden">
@@ -738,10 +653,10 @@ export function ManagementDevelopment() {
alt="Professional team collaborating in modern office"
className="w-full h-full object-cover"
/>
{/* Subtle dark overlay for overall image */}
<div className="absolute inset-0 bg-black/30" />
{/* Gradient overlay for better text readability */}
<div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
</div>
@@ -749,7 +664,7 @@ export function ManagementDevelopment() {
{/* Content Container */}
<div className="relative h-full flex items-center justify-end section-margin-x">
{/* CTA Content Block */}
<div
<div
className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
style={{ backgroundColor: 'var(--color-brand-primary)' }}
>
@@ -758,8 +673,8 @@ export function ManagementDevelopment() {
{/* Main Headline */}
<h2 className="text-h2-white mb-8">
Ready to build exceptional managers?
<span
Ready to build exceptional managers?
<span
className="italic"
style={{ color: 'var(--color-brand-accent)' }}
>
@@ -769,7 +684,7 @@ export function ManagementDevelopment() {
</h2>
{/* CTA Button */}
<StandardCTAButton
<StandardCTAButton
text="Schedule a Management Consultation"
onClick={() => navigateTo('/contact?topic=management-development')}
ariaLabel="Schedule a management development consultation"