695 lines
31 KiB
TypeScript
695 lines
31 KiB
TypeScript
|
import React, { useEffect, useState } from 'react';
|
||
|
|
import { Button } from '../ui/button';
|
||
|
|
import { Badge } from '../ui/badge';
|
||
|
|
import { Card, CardContent } from '../ui/card';
|
||
|
|
import { ImageWithFallback } from '../figma/ImageWithFallback';
|
||
|
|
import { navigateTo } from '../Router';
|
||
|
|
import { BrandedTag } from '../about/BrandedTag';
|
||
|
|
import { TestimonialsSection } from '../TestimonialsSection';
|
||
|
|
import { CTABannerSection } from '../CTABannerSection';
|
||
|
|
import StackedOfferSection from '../StackedOfferSection';
|
||
|
|
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
|
||
|
|
} from 'lucide-react';
|
||
|
|
import { PrimaryCTAButton } from '../PrimaryCTAButton';
|
||
|
|
|
||
|
|
const targetAudience = [
|
||
|
|
{
|
||
|
|
title: "C-Suite Executives",
|
||
|
|
description: "CEOs, Presidents, and C-level executives leading organizational transformation and strategic initiatives",
|
||
|
|
icon: Crown,
|
||
|
|
characteristics: ["Strategic leadership", "Organizational vision", "Board governance", "Executive presence"]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Senior Directors",
|
||
|
|
description: "Directors and Vice Presidents responsible for major business units and strategic functions",
|
||
|
|
icon: Users2,
|
||
|
|
characteristics: ["Business unit leadership", "Strategic execution", "Cross-functional leadership", "P&L responsibility"]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "High-Potential Leaders",
|
||
|
|
description: "Emerging leaders identified for accelerated development and future executive roles",
|
||
|
|
icon: Star,
|
||
|
|
characteristics: ["Leadership potential", "Career advancement", "Executive readiness", "Strategic capability"]
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
const outcomes = [
|
||
|
|
{
|
||
|
|
title: "Strategic Leadership Excellence",
|
||
|
|
description: "Enhanced strategic thinking, vision development, and organizational leadership capabilities",
|
||
|
|
icon: Compass,
|
||
|
|
metrics: "94% of executives report improved strategic leadership effectiveness within 6 months"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Enhanced Executive Presence",
|
||
|
|
description: "Strengthened executive presence, communication skills, and stakeholder influence",
|
||
|
|
icon: Crown,
|
||
|
|
metrics: "91% improvement in executive presence and stakeholder confidence ratings"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Organizational Impact",
|
||
|
|
description: "Measurable improvements in organizational performance, culture, and strategic outcomes",
|
||
|
|
icon: TrendingUp,
|
||
|
|
metrics: "83% improvement in organizational performance metrics and strategic goal achievement"
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
const approachSteps = [
|
||
|
|
{
|
||
|
|
step: "01",
|
||
|
|
title: "Leadership Assessment",
|
||
|
|
description: "Comprehensive 360-degree assessment of current leadership capabilities and strategic readiness. Together, we make your vision manifest through comprehensive assessment methodologies and proven frameworks.",
|
||
|
|
details: ["Executive assessment", "Leadership competency analysis", "Strategic readiness evaluation", "Development priorities"],
|
||
|
|
icon: Eye
|
||
|
|
},
|
||
|
|
{
|
||
|
|
step: "02",
|
||
|
|
title: "Strategic Program Design",
|
||
|
|
description: "Customized executive development curriculum aligned with organizational strategy and leadership needs. Together, we make your vision manifest through comprehensive design methodologies and proven frameworks.",
|
||
|
|
details: ["Executive curriculum", "Strategic alignment", "Leadership development", "Program customization"],
|
||
|
|
icon: Brain
|
||
|
|
},
|
||
|
|
{
|
||
|
|
step: "03",
|
||
|
|
title: "Executive Learning",
|
||
|
|
description: "High-impact leadership development through executive coaching, peer learning, and strategic simulations. Together, we make your vision manifest through comprehensive learning methodologies and proven frameworks.",
|
||
|
|
details: ["Executive workshops", "Strategic simulations", "Peer learning groups", "Leadership coaching"],
|
||
|
|
icon: Network
|
||
|
|
},
|
||
|
|
{
|
||
|
|
step: "04",
|
||
|
|
title: "Impact & Sustainability",
|
||
|
|
description: "Ongoing support and measurement to ensure leadership transformation and organizational impact. Together, we make your vision manifest through comprehensive review methodologies and proven frameworks.",
|
||
|
|
details: ["Leadership application", "Impact measurement", "Ongoing coaching", "Sustainability planning"],
|
||
|
|
icon: BarChart3
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
// Leadership development cards data for the stacking section
|
||
|
|
const leadershipCards = [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
title: "Executive Leadership Program",
|
||
|
|
subtitle: "C-Suite & Senior Executive Development",
|
||
|
|
description:
|
||
|
|
"Transform senior executives into visionary leaders who drive organizational transformation, strategic excellence, and sustainable business growth through proven executive development methodologies.",
|
||
|
|
badge: "Featured",
|
||
|
|
color: "from-blue-600 to-blue-700",
|
||
|
|
icon: Crown,
|
||
|
|
features: ["Strategic Vision", "Executive Presence", "Organizational Impact", "Crisis Leadership"],
|
||
|
|
stats: [
|
||
|
|
{ label: "Success Rate", value: "94%" },
|
||
|
|
{ label: "Executives Trained", value: "500+" },
|
||
|
|
{ label: "Duration", value: "6-12 Mo" }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
title: "Senior Management Development",
|
||
|
|
subtitle: "Advanced Leadership for Directors & VPs",
|
||
|
|
description:
|
||
|
|
"Comprehensive leadership development for directors and vice presidents leading major business units and strategic functions across the organization.",
|
||
|
|
badge: "Popular",
|
||
|
|
color: "from-purple-600 to-purple-700",
|
||
|
|
icon: Users2,
|
||
|
|
features: ["Change Management", "Strategic Execution", "Cross-functional Leadership", "P&L Responsibility"],
|
||
|
|
stats: [
|
||
|
|
{ label: "Success Rate", value: "91%" },
|
||
|
|
{ label: "Managers Trained", value: "800+" },
|
||
|
|
{ label: "Duration", value: "4-8 Mo" }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
title: "Leadership Pipeline Building",
|
||
|
|
subtitle: "Succession Planning & Development",
|
||
|
|
description:
|
||
|
|
"Systematic development of future leaders and comprehensive succession planning initiatives to build organizational leadership capacity.",
|
||
|
|
badge: "Strategic",
|
||
|
|
color: "from-green-600 to-green-700",
|
||
|
|
icon: TrendingUp,
|
||
|
|
features: ["Succession Planning", "High-potential Development", "Leadership Assessment", "Career Progression"],
|
||
|
|
stats: [
|
||
|
|
{ label: "Pipeline Success", value: "87%" },
|
||
|
|
{ label: "Leaders Identified", value: "1,200+" },
|
||
|
|
{ label: "Duration", value: "12-18 Mo" }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 4,
|
||
|
|
title: "Leadership Transformation",
|
||
|
|
subtitle: "Organizational Culture Change",
|
||
|
|
description:
|
||
|
|
"Comprehensive organizational leadership culture transformation initiatives that create lasting change and sustainable business performance.",
|
||
|
|
badge: "Comprehensive",
|
||
|
|
color: "from-orange-600 to-orange-700",
|
||
|
|
icon: Target,
|
||
|
|
features: ["Culture Change", "Leadership Alignment", "Transformation Strategy", "Capability Building"],
|
||
|
|
stats: [
|
||
|
|
{ label: "Transformation Rate", value: "89%" },
|
||
|
|
{ label: "Organizations", value: "150+" },
|
||
|
|
{ label: "Duration", value: "6-24 Mo" }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
export function LeadershipDevelopment() {
|
||
|
|
const [expandedAudienceIndex, setExpandedAudienceIndex] = useState<number | null>(0);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
window.scrollTo(0, 0);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const toggleAudienceExpanded = (index: number) => {
|
||
|
|
setExpandedAudienceIndex(expandedAudienceIndex === index ? null : index);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen" style={{ backgroundColor: '#F7F7FD' }}>
|
||
|
|
{/* Hero Section */}
|
||
|
|
<section className="relative min-h-[90vh] flex flex-col">
|
||
|
|
<div className="absolute inset-0 z-0">
|
||
|
|
<ImageWithFallback
|
||
|
|
src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=1920&h=1080&fit=crop"
|
||
|
|
alt="Executive leadership meeting - leadership development"
|
||
|
|
className="w-full h-full object-cover"
|
||
|
|
/>
|
||
|
|
<div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/70 to-black/60"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="relative z-10 flex-1 flex items-center">
|
||
|
|
<div className="container mx-auto section-margin-x">
|
||
|
|
<div className="text-center max-w-5xl mx-auto">
|
||
|
|
<div className="branded-tag-system-white mb-8 justify-center">
|
||
|
|
<div className="dot"></div>
|
||
|
|
<span className="text">Executive Excellence</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h1 className="text-h1-white mb-6">
|
||
|
|
Leadership Development Services
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
<p className="text-body-lg-white mb-8 max-w-2xl mx-auto">
|
||
|
|
Transform your executive leadership capabilities and organizational impact through
|
||
|
|
comprehensive leadership development programs designed for senior leaders.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div className="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
||
|
|
<PrimaryCTAButton
|
||
|
|
text="Book a consultation"
|
||
|
|
onClick={() => navigateTo('/contact')}
|
||
|
|
className="management-dev-primary-cta"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
onClick={() => window.open('/executive-overview', '_blank')}
|
||
|
|
className="management-dev-glassmorphic-btn text-body px-8 py-4 min-h-[52px] border text-white transition-all duration-300"
|
||
|
|
style={{
|
||
|
|
fontFamily: 'var(--font-family-base)'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Download className="w-5 h-5 mr-2" />
|
||
|
|
Download Overview
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="relative z-10 border-t border-white/20 backdrop-blur-sm bg-black/20">
|
||
|
|
<div className="container mx-auto section-margin-x py-8">
|
||
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center max-w-5xl mx-auto">
|
||
|
|
<div>
|
||
|
|
<div className="text-h2-white mb-2">94%</div>
|
||
|
|
<div className="text-small-white opacity-90">Leadership effectiveness improvement</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div className="text-h2-white mb-2">500+</div>
|
||
|
|
<div className="text-small-white opacity-90">Executives developed</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div className="text-h2-white mb-2">65%</div>
|
||
|
|
<div className="text-small-white opacity-90">Faster strategic execution</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div className="text-h2-white mb-2">89%</div>
|
||
|
|
<div className="text-small-white opacity-90">Organizational impact rating</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Stacked Offer Section */}
|
||
|
|
<StackedOfferSection cards={leadershipCards} />
|
||
|
|
|
||
|
|
{/* Who It's For Section */}
|
||
|
|
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
|
||
|
|
<div className="container mx-auto section-margin-x">
|
||
|
|
<div className="grid lg:grid-cols-2 gap-16 items-start max-w-7xl mx-auto">
|
||
|
|
<div className="lg:pr-8">
|
||
|
|
<h2 className="text-h2 mb-6 text-black leading-tight">
|
||
|
|
Who It's <span className="text-primary">For</span>
|
||
|
|
</h2>
|
||
|
|
<p className="text-body-lg text-muted leading-relaxed">
|
||
|
|
Our leadership development programs are designed for senior executives, directors, and
|
||
|
|
high-potential leaders who drive organizational strategy and transformation.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-1">
|
||
|
|
{targetAudience.map((audience, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="border-b border-gray-400 last:border-b-0"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
onClick={() => toggleAudienceExpanded(index)}
|
||
|
|
className="w-full py-6 px-0 flex items-center justify-between text-left hover:bg-transparent focus:outline-none group transition-all duration-200"
|
||
|
|
style={{ backgroundColor: 'transparent' }}
|
||
|
|
>
|
||
|
|
<span className="text-h4 text-black group-hover:text-primary transition-colors duration-200 pr-4">
|
||
|
|
{audience.title}
|
||
|
|
</span>
|
||
|
|
<div className="flex-shrink-0 ml-4">
|
||
|
|
{expandedAudienceIndex === index ? (
|
||
|
|
<ChevronUp className="w-6 h-6 text-primary transition-transform duration-200" />
|
||
|
|
) : (
|
||
|
|
<ChevronDown className="w-6 h-6 text-gray-400 group-hover:text-primary transition-all duration-200" />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div className={`overflow-hidden transition-all duration-300 ease-in-out ${
|
||
|
|
expandedAudienceIndex === index ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
|
||
|
|
}`}>
|
||
|
|
<div className="pb-6 pr-8">
|
||
|
|
<p className="text-body text-muted leading-relaxed mb-4">
|
||
|
|
{audience.description}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div className="flex flex-wrap gap-2">
|
||
|
|
{audience.characteristics.map((characteristic, charIndex) => (
|
||
|
|
<Badge key={charIndex} variant="outline" className="text-small" style={{ fontFamily: 'var(--font-family-base)' }}>
|
||
|
|
{characteristic}
|
||
|
|
</Badge>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Expected Outcomes Section */}
|
||
|
|
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
|
||
|
|
<div className="container mx-auto section-margin-x">
|
||
|
|
<div className="text-center mb-16 max-w-4xl mx-auto">
|
||
|
|
<h2 className="text-h2 mb-6">
|
||
|
|
Expected <span className="text-primary">Outcomes</span>
|
||
|
|
</h2>
|
||
|
|
<p className="text-body-lg text-muted">
|
||
|
|
Our leadership development programs deliver measurable improvements in strategic leadership,
|
||
|
|
executive effectiveness, and organizational performance.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Three-Column Layout - Reference Design Style */}
|
||
|
|
<div className="grid lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
|
||
|
|
|
||
|
|
{/* Strategic Leadership Excellence */}
|
||
|
|
<div className="bg-white p-10 rounded-2xl border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300">
|
||
|
|
<div className="mb-8">
|
||
|
|
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center mb-6">
|
||
|
|
<Compass className="w-10 h-10 text-primary" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 className="text-h3 text-black mb-4">
|
||
|
|
Strategic Leadership Excellence
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<p className="text-body text-muted leading-relaxed mb-8">
|
||
|
|
Enhance strategic thinking capabilities, vision development, and organizational
|
||
|
|
leadership effectiveness where it matters most.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Strategic Leadership Visualization */}
|
||
|
|
<div className="space-y-6">
|
||
|
|
<div className="flex justify-between items-center">
|
||
|
|
<span className="text-small text-muted font-medium">Strategic Effectiveness</span>
|
||
|
|
<span className="text-h4 text-green-600 font-bold">+94%</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="relative">
|
||
|
|
<div className="flex items-end space-x-1 h-24 mb-4">
|
||
|
|
<div className="bg-gray-200 h-8 w-4 rounded-sm"></div>
|
||
|
|
<div className="bg-gray-300 h-12 w-4 rounded-sm"></div>
|
||
|
|
<div className="bg-gray-200 h-16 w-4 rounded-sm"></div>
|
||
|
|
<div className="bg-gray-300 h-10 w-4 rounded-sm"></div>
|
||
|
|
<div className="bg-green-400 h-20 w-4 rounded-sm"></div>
|
||
|
|
<div className="bg-green-500 h-24 w-4 rounded-sm"></div>
|
||
|
|
<div className="bg-green-600 h-22 w-4 rounded-sm"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-2 gap-4">
|
||
|
|
<div className="text-center p-3 bg-green-50 rounded-lg border border-green-100">
|
||
|
|
<div className="text-xl font-bold text-green-600">91%</div>
|
||
|
|
<div className="text-small text-muted">Vision Clarity</div>
|
||
|
|
</div>
|
||
|
|
<div className="text-center p-3 bg-blue-50 rounded-lg border border-blue-100">
|
||
|
|
<div className="text-xl font-bold text-primary">88%</div>
|
||
|
|
<div className="text-small text-muted">Strategic Impact</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Enhanced Executive Presence */}
|
||
|
|
<div className="bg-white p-10 rounded-2xl border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300">
|
||
|
|
<div className="mb-8">
|
||
|
|
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-yellow-50 to-yellow-100 flex items-center justify-center mb-6">
|
||
|
|
<Crown className="w-10 h-10 text-accent" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 className="text-h3 text-black mb-4">
|
||
|
|
Enhanced Executive Presence
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<p className="text-body text-muted leading-relaxed mb-8">
|
||
|
|
Strengthen executive presence, stakeholder influence, and communication
|
||
|
|
effectiveness for enhanced leadership impact.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Executive Presence Metrics */}
|
||
|
|
<div className="space-y-6">
|
||
|
|
<div className="flex items-center justify-between mb-4">
|
||
|
|
<span className="text-small text-muted font-medium">Executive Presence</span>
|
||
|
|
<div className="flex items-center">
|
||
|
|
<TrendingUp className="w-4 h-4 text-green-500 mr-1" />
|
||
|
|
<span className="text-small text-green-600 font-medium">+91%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="relative bg-gray-100 rounded-full h-3 mb-6">
|
||
|
|
<div
|
||
|
|
className="bg-gradient-to-r from-yellow-400 to-yellow-500 h-3 rounded-full transition-all duration-1000"
|
||
|
|
style={{ width: '91%' }}
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-3">
|
||
|
|
<div className="flex justify-between items-center py-2">
|
||
|
|
<span className="text-small text-muted">Communication Impact</span>
|
||
|
|
<div className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-small font-medium">
|
||
|
|
93%
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-between items-center py-2">
|
||
|
|
<span className="text-small text-muted">Stakeholder Confidence</span>
|
||
|
|
<div className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-small font-medium">
|
||
|
|
89%
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-between items-center py-2">
|
||
|
|
<span className="text-small text-muted">Leadership Influence</span>
|
||
|
|
<div className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-small font-medium">
|
||
|
|
91%
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Organizational Impact */}
|
||
|
|
<div className="bg-white p-10 rounded-2xl border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300">
|
||
|
|
<div className="mb-8">
|
||
|
|
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-purple-50 to-purple-100 flex items-center justify-center mb-6">
|
||
|
|
<TrendingUp className="w-10 h-10 text-primary" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 className="text-h3 text-black mb-4">
|
||
|
|
Organizational Impact
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<p className="text-body text-muted leading-relaxed mb-8">
|
||
|
|
Drive measurable organizational performance improvements and strategic
|
||
|
|
goal achievement through enhanced leadership effectiveness.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Organizational Impact KPIs */}
|
||
|
|
<div className="space-y-6">
|
||
|
|
<div className="grid grid-cols-2 gap-4">
|
||
|
|
<div className="text-center p-3 bg-blue-50 rounded-lg border border-blue-100">
|
||
|
|
<div className="flex items-center justify-center mb-1">
|
||
|
|
<span className="text-small text-muted mr-2">Performance</span>
|
||
|
|
<TrendingUp className="w-3 h-3 text-green-500" />
|
||
|
|
</div>
|
||
|
|
<div className="text-xl font-bold text-primary">83%</div>
|
||
|
|
</div>
|
||
|
|
<div className="text-center p-3 bg-red-50 rounded-lg border border-red-100">
|
||
|
|
<div className="flex items-center justify-center mb-1">
|
||
|
|
<span className="text-small text-muted mr-2">Goal Achievement</span>
|
||
|
|
<div className="w-3 h-3 flex items-center justify-center">
|
||
|
|
<div className="w-0 h-0 border-l-2 border-r-2 border-b-3 border-transparent border-b-green-500"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="text-xl font-bold text-green-500">89%</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-gray-50 rounded-lg p-4">
|
||
|
|
<div className="flex justify-between items-center mb-2">
|
||
|
|
<span className="text-small text-muted font-medium">Leadership Impact</span>
|
||
|
|
<span className="text-small text-primary font-bold">Annual ROI</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-end justify-between">
|
||
|
|
<div className="text-2xl font-bold text-primary">87%</div>
|
||
|
|
<div className="text-2xl font-bold text-green-600">$2.3M</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-3 gap-2">
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="text-lg font-bold text-primary">83%</div>
|
||
|
|
<div className="text-xs text-muted">Performance</div>
|
||
|
|
</div>
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="text-lg font-bold text-green-600">+28%</div>
|
||
|
|
<div className="text-xs text-muted">Revenue</div>
|
||
|
|
</div>
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="text-lg font-bold text-blue-500">89%</div>
|
||
|
|
<div className="text-xs text-muted">Goals</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Results Confirmation Banner */}
|
||
|
|
<div className="mt-16 max-w-4xl mx-auto">
|
||
|
|
<div className="bg-gradient-to-r from-green-50 to-blue-50 rounded-xl p-6 border border-green-200">
|
||
|
|
<div className="flex items-center justify-center gap-3">
|
||
|
|
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
|
||
|
|
<CheckCircle className="w-5 h-5 text-green-600" />
|
||
|
|
</div>
|
||
|
|
<p className="text-body text-center" style={{ fontWeight: 'var(--font-weight-subhead)', color: '#059669' }}>
|
||
|
|
All outcomes measured within 6 months of program completion
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Our Approach Section - Carousel Design */}
|
||
|
|
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
|
||
|
|
<div className="container mx-auto section-margin-x">
|
||
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start max-w-7xl mx-auto">
|
||
|
|
|
||
|
|
{/* Left Side - Title, Description & Navigation */}
|
||
|
|
<div className="lg:col-span-5 lg:pr-8">
|
||
|
|
<h2 className="text-h2 mb-6 leading-tight">
|
||
|
|
Our <span className="text-primary">Approach</span>
|
||
|
|
</h2>
|
||
|
|
<p className="text-body-lg text-muted leading-relaxed mb-8">
|
||
|
|
Comprehensive leadership development journey combining strategic assessment, customized
|
||
|
|
program design, and ongoing support for sustained executive excellence.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{/* Navigation Controls */}
|
||
|
|
<div className="flex gap-3">
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
const container = document.getElementById('approach-carousel');
|
||
|
|
if (container) {
|
||
|
|
container.scrollBy({ left: -384, behavior: 'smooth' });
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="w-12 h-12 rounded-full bg-gray-100 hover:bg-primary hover:text-white transition-all duration-300 flex items-center justify-center border border-gray-200 hover:border-primary"
|
||
|
|
aria-label="Previous approach step"
|
||
|
|
>
|
||
|
|
<ArrowLeft className="w-5 h-5" />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
const container = document.getElementById('approach-carousel');
|
||
|
|
if (container) {
|
||
|
|
container.scrollBy({ left: 384, behavior: 'smooth' });
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="w-12 h-12 rounded-full bg-gray-100 hover:bg-primary hover:text-white transition-all duration-300 flex items-center justify-center border border-gray-200 hover:border-primary"
|
||
|
|
aria-label="Next approach step"
|
||
|
|
>
|
||
|
|
<ArrowRight className="w-5 h-5" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Right Side - Scrollable Approach Cards */}
|
||
|
|
<div className="lg:col-span-7 relative">
|
||
|
|
<div
|
||
|
|
id="approach-carousel"
|
||
|
|
className="flex gap-6 overflow-x-auto pb-4"
|
||
|
|
style={{
|
||
|
|
scrollSnapType: 'x mandatory',
|
||
|
|
WebkitOverflowScrolling: 'touch',
|
||
|
|
msOverflowStyle: 'none',
|
||
|
|
scrollbarWidth: 'none'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{approachSteps.map((step, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="flex-shrink-0 w-96 bg-white rounded-2xl border border-gray-200 p-8 shadow-md hover:shadow-2xl transition-all duration-300 hover:transform hover:scale-[1.02]"
|
||
|
|
style={{ scrollSnapAlign: 'start' }}
|
||
|
|
>
|
||
|
|
{/* Step Number */}
|
||
|
|
<div className="flex items-center justify-between mb-6">
|
||
|
|
<div
|
||
|
|
className="leading-none font-medium"
|
||
|
|
style={{
|
||
|
|
fontSize: 'var(--font-h2)',
|
||
|
|
fontWeight: '500',
|
||
|
|
lineHeight: 'var(--line-height-h2)',
|
||
|
|
color: 'var(--color-accent)',
|
||
|
|
fontFamily: 'var(--font-family-base)'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{step.step}
|
||
|
|
</div>
|
||
|
|
<div className="w-16 h-0.5 bg-gradient-to-r from-accent to-transparent opacity-40"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Step Title */}
|
||
|
|
<h3
|
||
|
|
className="leading-tight mb-6"
|
||
|
|
style={{
|
||
|
|
fontSize: 'var(--font-h3)',
|
||
|
|
fontWeight: 'var(--font-weight-h3)',
|
||
|
|
lineHeight: 'var(--line-height-h3)',
|
||
|
|
fontFamily: 'var(--font-family-base)',
|
||
|
|
color: 'var(--color-black)'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{step.title}
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
{/* Step Description */}
|
||
|
|
<p
|
||
|
|
className="leading-relaxed mb-6"
|
||
|
|
style={{
|
||
|
|
fontSize: 'var(--font-body)',
|
||
|
|
lineHeight: 'var(--line-height-body)',
|
||
|
|
fontFamily: 'var(--font-family-base)',
|
||
|
|
color: 'var(--color-gray-muted)'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{step.description}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{/* Bullet Points */}
|
||
|
|
<div className="space-y-3">
|
||
|
|
{step.details.map((detail, detailIndex) => (
|
||
|
|
<div key={detailIndex} className="flex items-start gap-3">
|
||
|
|
<div className="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0 mt-2"></div>
|
||
|
|
<span
|
||
|
|
className="leading-relaxed"
|
||
|
|
style={{
|
||
|
|
fontSize: 'var(--font-small)',
|
||
|
|
lineHeight: 'var(--line-height-small)',
|
||
|
|
fontFamily: 'var(--font-family-base)',
|
||
|
|
color: 'var(--color-black)'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{detail}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Right Side Fade Overlay */}
|
||
|
|
<div
|
||
|
|
className="absolute top-0 right-0 h-full w-16 pointer-events-none z-10"
|
||
|
|
style={{
|
||
|
|
background: 'linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0) 100%)'
|
||
|
|
}}
|
||
|
|
></div>
|
||
|
|
|
||
|
|
{/* Hide scrollbar with CSS */}
|
||
|
|
<style>{`
|
||
|
|
#approach-carousel::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
`}</style>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<TestimonialsSection
|
||
|
|
title="What Our Executives Say"
|
||
|
|
subtitle="Hear from senior leaders who have transformed their leadership effectiveness and organizational impact through our development programs."
|
||
|
|
tagText="Executive Success"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<CTABannerSection />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|