first commit
This commit is contained in:
priyanshuvish
693
src/components/services/Consulting.tsx
Normal file
693
src/components/services/Consulting.tsx
Normal file
@@ -0,0 +1,693 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button } from '../ui/button';
|
||||
import { Card, CardContent } from '../ui/card';
|
||||
import { Badge } from '../ui/badge';
|
||||
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 {
|
||||
Users,
|
||||
Target,
|
||||
ArrowRight,
|
||||
CheckCircle,
|
||||
Lightbulb,
|
||||
Brain,
|
||||
Eye,
|
||||
TrendingUp,
|
||||
MessageCircle,
|
||||
BarChart3,
|
||||
Compass,
|
||||
Shield,
|
||||
Network,
|
||||
Zap,
|
||||
Settings,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
ArrowLeft,
|
||||
Download,
|
||||
Crown
|
||||
} from 'lucide-react';
|
||||
import { PrimaryCTAButton } from '../PrimaryCTAButton';
|
||||
|
||||
// Strategic consulting cards data for the stacking section
|
||||
const consultingCards = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Organizational Structure Design",
|
||||
subtitle: "Strategic Design & Optimization",
|
||||
description:
|
||||
"Comprehensive organizational design services that optimize structure, roles, and reporting relationships for enhanced performance and strategic alignment across all business functions.",
|
||||
badge: "Featured",
|
||||
color: "from-blue-600 to-blue-700",
|
||||
icon: Network,
|
||||
features: ["Organizational Assessment", "Structure Optimization", "Role Clarification", "Governance Design"],
|
||||
stats: [
|
||||
{ label: "Success Rate", value: "96%" },
|
||||
{ label: "Organizations", value: "250+" },
|
||||
{ label: "Duration", value: "3-6 Mo" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Vision & Mission Redefinition",
|
||||
subtitle: "Purpose-Driven Strategic Alignment",
|
||||
description:
|
||||
"Collaborative development of inspiring vision and mission statements that drive organizational alignment, stakeholder engagement, and sustainable competitive advantage.",
|
||||
badge: "Strategic",
|
||||
color: "from-purple-600 to-purple-700",
|
||||
icon: Compass,
|
||||
features: ["Stakeholder Engagement", "Values Articulation", "Purpose Definition", "Strategic Narrative"],
|
||||
stats: [
|
||||
{ label: "Alignment Rate", value: "92%" },
|
||||
{ label: "Leaders Engaged", value: "500+" },
|
||||
{ label: "Duration", value: "2-4 Mo" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Leadership Capability Building",
|
||||
subtitle: "Strategic Leadership Development",
|
||||
description:
|
||||
"Systematic development of leadership capabilities aligned with organizational strategy, including succession planning, talent development, and leadership pipeline optimization.",
|
||||
badge: "Popular",
|
||||
color: "from-green-600 to-green-700",
|
||||
icon: TrendingUp,
|
||||
features: ["Capability Frameworks", "Leadership Pipeline", "Succession Planning", "Talent Development"],
|
||||
stats: [
|
||||
{ label: "Development Rate", value: "89%" },
|
||||
{ label: "Leaders Developed", value: "1,000+" },
|
||||
{ label: "Duration", value: "6-12 Mo" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Strategic Transformation",
|
||||
subtitle: "End-to-End Change Management",
|
||||
description:
|
||||
"Complete transformation support for major organizational change initiatives, including change strategy, stakeholder alignment, and cultural integration for sustainable success.",
|
||||
badge: "Comprehensive",
|
||||
color: "from-orange-600 to-orange-700",
|
||||
icon: Zap,
|
||||
features: ["Change Strategy", "Stakeholder Alignment", "Implementation Roadmap", "Culture Integration"],
|
||||
stats: [
|
||||
{ label: "Success Rate", value: "91%" },
|
||||
{ label: "Transformations", value: "180+" },
|
||||
{ label: "Duration", value: "12-24 Mo" }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const targetAudience = [
|
||||
{
|
||||
title: "Founders & CXOs",
|
||||
description: "Visionary leaders driving organizational transformation and strategic growth",
|
||||
icon: Lightbulb,
|
||||
characteristics: ["Strategic vision", "Growth focus", "Change leadership", "Stakeholder management"]
|
||||
},
|
||||
{
|
||||
title: "Boards",
|
||||
description: "Board members seeking governance excellence and strategic oversight capabilities",
|
||||
icon: Shield,
|
||||
characteristics: ["Governance focus", "Risk oversight", "Strategic guidance", "Performance monitoring"]
|
||||
},
|
||||
{
|
||||
title: "OD Leaders",
|
||||
description: "Organizational development professionals implementing systematic change initiatives",
|
||||
icon: Settings,
|
||||
characteristics: ["Change expertise", "System thinking", "Process optimization", "Culture development"]
|
||||
}
|
||||
];
|
||||
|
||||
const outcomes = [
|
||||
{
|
||||
title: "Clarity in Leadership Direction",
|
||||
description: "Clear strategic direction with aligned leadership behaviors and decision-making",
|
||||
icon: Compass,
|
||||
metrics: "96% of leadership teams report improved strategic clarity and alignment"
|
||||
},
|
||||
{
|
||||
title: "Scalable Org Models",
|
||||
description: "Organizational structures that support growth while maintaining operational efficiency",
|
||||
icon: Network,
|
||||
metrics: "78% improvement in organizational agility and decision-making speed"
|
||||
},
|
||||
{
|
||||
title: "Faster Decision-Making & Alignment",
|
||||
description: "Streamlined processes that enable rapid, informed decision-making across the organization",
|
||||
icon: Zap,
|
||||
metrics: "65% reduction in decision cycle time with improved cross-functional alignment"
|
||||
}
|
||||
];
|
||||
|
||||
const approachSteps = [
|
||||
{
|
||||
step: "01",
|
||||
title: "Strategic Assessment",
|
||||
description: "Comprehensive analysis of organizational current state, strategic challenges, and transformation opportunities. Together, we make your vision manifest through proven assessment methodologies and frameworks.",
|
||||
details: ["Organizational scan", "Stakeholder interviews", "Performance analysis", "Gap assessment"],
|
||||
icon: Eye
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
title: "Co-Creation Process",
|
||||
description: "Collaborative design sessions with leadership to develop tailored strategic solutions and alignment. Together, we make your vision manifest through structured co-creation methodologies and proven frameworks.",
|
||||
details: ["Leadership workshops", "Co-design sessions", "Stakeholder alignment", "Solution development"],
|
||||
icon: Users
|
||||
},
|
||||
{
|
||||
step: "03",
|
||||
title: "Implementation Support",
|
||||
description: "Hands-on guidance and support throughout the strategic transformation implementation journey. Together, we make your vision manifest through comprehensive support methodologies and proven frameworks.",
|
||||
details: ["Change management", "Project oversight", "Training delivery", "Progress monitoring"],
|
||||
icon: TrendingUp
|
||||
},
|
||||
{
|
||||
step: "04",
|
||||
title: "Continuous Optimization",
|
||||
description: "Ongoing refinement and optimization to ensure sustainable transformation success and impact. Together, we make your vision manifest through continuous improvement methodologies and proven frameworks.",
|
||||
details: ["Performance tracking", "Feedback integration", "Process refinement", "Capability building"],
|
||||
icon: BarChart3
|
||||
}
|
||||
];
|
||||
|
||||
export function Consulting() {
|
||||
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: '#FFFFFF' }}>
|
||||
{/* 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="Strategic consulting meeting - business transformation"
|
||||
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">Strategic Advisory</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-h1-white mb-6">
|
||||
Strategic Consulting Services
|
||||
</h1>
|
||||
|
||||
<p className="text-body-lg-white mb-8 max-w-2xl mx-auto">
|
||||
Expert strategic guidance for organizational transformation. Drive clarity,
|
||||
alignment, and sustainable business growth through proven consulting methodologies.
|
||||
</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('/strategic-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">96%</div>
|
||||
<div className="text-small-white opacity-90">Strategic alignment improvement</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">250+</div>
|
||||
<div className="text-small-white opacity-90">Organizations transformed</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">78%</div>
|
||||
<div className="text-small-white opacity-90">Faster decision-making</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">91%</div>
|
||||
<div className="text-small-white opacity-90">Client satisfaction rating</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stacked Offer Section */}
|
||||
<StackedOfferSection cards={consultingCards} />
|
||||
|
||||
{/* 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 strategic consulting services are designed for leaders and organizations
|
||||
committed to transformation, growth, and sustainable competitive advantage.
|
||||
</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 strategic consulting delivers measurable improvements in organizational
|
||||
clarity, agility, and decision-making effectiveness across all business functions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Three-Column Layout - Reference Design Style */}
|
||||
<div className="grid lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
|
||||
|
||||
{/* Clarity in Leadership Direction */}
|
||||
<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">
|
||||
Clarity in Leadership Direction
|
||||
</h3>
|
||||
|
||||
<p className="text-body text-muted leading-relaxed mb-8">
|
||||
Clear strategic direction with aligned leadership behaviors and
|
||||
decision-making frameworks for enhanced organizational effectiveness.
|
||||
</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 Clarity</span>
|
||||
<span className="text-h4 text-green-600 font-bold">+96%</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-blue-50 rounded-lg border border-blue-100">
|
||||
<div className="text-xl font-bold text-primary">94%</div>
|
||||
<div className="text-small text-muted">Alignment</div>
|
||||
</div>
|
||||
<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">Direction</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scalable Org Models */}
|
||||
<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">
|
||||
<Network className="w-10 h-10 text-accent" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-h3 text-black mb-4">
|
||||
Scalable Org Models
|
||||
</h3>
|
||||
|
||||
<p className="text-body text-muted leading-relaxed mb-8">
|
||||
Organizational structures that support growth while maintaining
|
||||
operational efficiency and strategic flexibility.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Scalable Organization Metrics */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="text-small text-muted font-medium">Organizational Agility</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">+78%</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: '78%' }}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-small text-muted">Decision Speed</span>
|
||||
<div className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-small font-medium">
|
||||
82%
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-small text-muted">Structure Efficiency</span>
|
||||
<div className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-small font-medium">
|
||||
76%
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-small text-muted">Growth Readiness</span>
|
||||
<div className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-small font-medium">
|
||||
84%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Faster Decision-Making & Alignment */}
|
||||
<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">
|
||||
<Zap className="w-10 h-10 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-h3 text-black mb-4">
|
||||
Faster Decision-Making & Alignment
|
||||
</h3>
|
||||
|
||||
<p className="text-body text-muted leading-relaxed mb-8">
|
||||
Streamlined processes that enable rapid, informed decision-making
|
||||
with improved cross-functional alignment.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Decision-Making 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">Speed</span>
|
||||
<TrendingUp className="w-3 h-3 text-green-500" />
|
||||
</div>
|
||||
<div className="text-xl font-bold text-primary">65%</div>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-green-50 rounded-lg border border-green-100">
|
||||
<div className="flex items-center justify-center mb-1">
|
||||
<span className="text-small text-muted mr-2">Alignment</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">Decision Impact</span>
|
||||
<span className="text-small text-primary font-bold">Cycle Time</span>
|
||||
</div>
|
||||
<div className="flex items-end justify-between">
|
||||
<div className="text-2xl font-bold text-primary">91%</div>
|
||||
<div className="text-2xl font-bold text-green-600">-65%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-primary">91%</div>
|
||||
<div className="text-xs text-muted">Quality</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-green-600">-65%</div>
|
||||
<div className="text-xs text-muted">Time Reduction</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-blue-500">89%</div>
|
||||
<div className="text-xs text-muted">Alignment</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 4-6 months of engagement 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">
|
||||
Co-creation model with leadership using proven strategic methodologies: organizational
|
||||
assessments, stakeholder interviews, and collaborative consulting for maximum impact.
|
||||
</p>
|
||||
|
||||
{/* Navigation Controls */}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
const container = document.getElementById('consulting-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('consulting-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="consulting-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>{`
|
||||
#consulting-approach-carousel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials Section - Using home page testimonials with custom headers */}
|
||||
<TestimonialsSection
|
||||
title="What Our Clients Say"
|
||||
subtitle="Success stories from CXOs, founders, and board members who have achieved transformational results through our strategic consulting services."
|
||||
tagText="Client Success Stories"
|
||||
/>
|
||||
|
||||
{/* CTA Section - Using standardized home page CTA */}
|
||||
<CTABannerSection />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
695
src/components/services/CultureCompetence.tsx
Normal file
695
src/components/services/CultureCompetence.tsx
Normal file
@@ -0,0 +1,695 @@
|
||||
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,
|
||||
Heart,
|
||||
Users2,
|
||||
Sparkles
|
||||
} from 'lucide-react';
|
||||
import { PrimaryCTAButton } from '../PrimaryCTAButton';
|
||||
|
||||
// Culture competence cards data for the stacking section
|
||||
const cultureCards = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Inclusive Leadership Development",
|
||||
subtitle: "Building Inclusive Excellence",
|
||||
description:
|
||||
"Comprehensive inclusive leadership development that creates belonging, drives performance, and transforms organizational culture through proven methodologies and sustainable practices.",
|
||||
badge: "Featured",
|
||||
color: "from-blue-600 to-blue-700",
|
||||
icon: Heart,
|
||||
features: ["Inclusive Leadership", "Cultural Intelligence", "Bias Mitigation", "Equity Practices"],
|
||||
stats: [
|
||||
{ label: "Success Rate", value: "87%" },
|
||||
{ label: "Leaders Trained", value: "2,000+" },
|
||||
{ label: "Duration", value: "6-12 Mo" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Cultural Transformation",
|
||||
subtitle: "Comprehensive Culture Change",
|
||||
description:
|
||||
"End-to-end organizational culture transformation initiatives that create sustainable change, enhanced engagement, and measurable business impact through strategic implementation.",
|
||||
badge: "Popular",
|
||||
color: "from-purple-600 to-purple-700",
|
||||
icon: Sparkles,
|
||||
features: ["Culture Assessment", "Change Strategy", "Implementation Support", "Sustainability Planning"],
|
||||
stats: [
|
||||
{ label: "Transformation Rate", value: "92%" },
|
||||
{ label: "Organizations", value: "300+" },
|
||||
{ label: "Duration", value: "12-18 Mo" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Diversity & Inclusion Programs",
|
||||
subtitle: "Strategic D&I Excellence",
|
||||
description:
|
||||
"Strategic diversity and inclusion initiatives that create measurable organizational impact, enhanced representation, and inclusive cultures that drive innovation and performance.",
|
||||
badge: "Strategic",
|
||||
color: "from-green-600 to-green-700",
|
||||
icon: Users2,
|
||||
features: ["D&I Strategy", "Program Development", "Metrics & Measurement", "Stakeholder Engagement"],
|
||||
stats: [
|
||||
{ label: "Inclusion Score", value: "+79%" },
|
||||
{ label: "Programs Delivered", value: "500+" },
|
||||
{ label: "Duration", value: "8-15 Mo" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "High-Performance Culture Building",
|
||||
subtitle: "Excellence-Driven Cultures",
|
||||
description:
|
||||
"Create high-performance cultures that drive exceptional results, employee engagement, and organizational excellence through strategic culture design and implementation.",
|
||||
badge: "Comprehensive",
|
||||
color: "from-orange-600 to-orange-700",
|
||||
icon: Target,
|
||||
features: ["Performance Culture", "Engagement Strategies", "Recognition Systems", "Values Integration"],
|
||||
stats: [
|
||||
{ label: "Performance Lift", value: "+68%" },
|
||||
{ label: "Engagement Increase", value: "+79%" },
|
||||
{ label: "Duration", value: "9-18 Mo" }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const targetAudience = [
|
||||
{
|
||||
title: "Chief Diversity Officers",
|
||||
description: "CDOs and diversity leaders responsible for creating inclusive organizational cultures and D&I strategy",
|
||||
icon: Heart,
|
||||
characteristics: ["D&I strategy", "Cultural transformation", "Inclusive leadership", "Organizational change"]
|
||||
},
|
||||
{
|
||||
title: "HR Leadership",
|
||||
description: "CHROs and HR leaders driving culture change, employee engagement, and organizational development",
|
||||
icon: Users2,
|
||||
characteristics: ["Culture development", "Employee engagement", "Organizational design", "Change management"]
|
||||
},
|
||||
{
|
||||
title: "Executive Teams",
|
||||
description: "Senior leadership teams committed to building inclusive, high-performance organizational cultures",
|
||||
icon: Star,
|
||||
characteristics: ["Executive commitment", "Culture strategy", "Performance excellence", "Inclusive leadership"]
|
||||
}
|
||||
];
|
||||
|
||||
const outcomes = [
|
||||
{
|
||||
title: "Inclusive Culture Excellence",
|
||||
description: "Enhanced inclusive leadership capabilities and organizational belonging measures",
|
||||
icon: Heart,
|
||||
metrics: "87% improvement in inclusion scores and employee belonging metrics within 12 months"
|
||||
},
|
||||
{
|
||||
title: "Enhanced Employee Engagement",
|
||||
description: "Significant improvements in employee engagement, retention, and performance outcomes",
|
||||
icon: Sparkles,
|
||||
metrics: "79% increase in employee engagement scores and 23% improvement in retention rates"
|
||||
},
|
||||
{
|
||||
title: "Organizational Performance",
|
||||
description: "Measurable business impact through improved culture, innovation, and team effectiveness",
|
||||
icon: TrendingUp,
|
||||
metrics: "68% improvement in team performance and 31% increase in innovation metrics"
|
||||
}
|
||||
];
|
||||
|
||||
const approachSteps = [
|
||||
{
|
||||
step: "01",
|
||||
title: "Culture Assessment",
|
||||
description: "Comprehensive organizational culture and inclusion assessment using proven methodologies. Together, we make your vision manifest through comprehensive assessment methodologies and proven frameworks.",
|
||||
details: ["Culture diagnostic", "Inclusion assessment", "Employee insights", "Gap analysis"],
|
||||
icon: Eye
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
title: "Strategy Development",
|
||||
description: "Customized culture and inclusion strategy aligned with organizational goals and values. Together, we make your vision manifest through comprehensive design methodologies and proven frameworks.",
|
||||
details: ["Culture strategy", "D&I roadmap", "Leadership alignment", "Success metrics"],
|
||||
icon: Brain
|
||||
},
|
||||
{
|
||||
step: "03",
|
||||
title: "Implementation & Training",
|
||||
description: "Comprehensive implementation with leadership development, training, and change support. Together, we make your vision manifest through comprehensive learning methodologies and proven frameworks.",
|
||||
details: ["Leadership development", "Culture training", "Change support", "Skills building"],
|
||||
icon: Network
|
||||
},
|
||||
{
|
||||
step: "04",
|
||||
title: "Measurement & Sustainability",
|
||||
description: "Ongoing measurement, reinforcement, and continuous improvement for sustained culture change. Together, we make your vision manifest through comprehensive review methodologies and proven frameworks.",
|
||||
details: ["Progress tracking", "Impact measurement", "Continuous improvement", "Sustainability planning"],
|
||||
icon: BarChart3
|
||||
}
|
||||
];
|
||||
|
||||
export function CultureCompetence() {
|
||||
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: '#FFFFFF' }}>
|
||||
{/* 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-1522202176988-66273c2fd55f?w=1920&h=1080&fit=crop"
|
||||
alt="Diverse team collaboration - culture competence"
|
||||
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">Culture Excellence</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-h1-white mb-6">
|
||||
Culture Competence Services
|
||||
</h1>
|
||||
|
||||
<p className="text-body-lg-white mb-8 max-w-2xl mx-auto">
|
||||
Build inclusive, high-performance cultures that drive organizational excellence,
|
||||
employee engagement, and sustainable business success.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
||||
<PrimaryCTAButton
|
||||
text="Start culture assessment"
|
||||
onClick={() => navigateTo('/contact')}
|
||||
className="management-dev-primary-cta"
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={() => window.open('/culture-guide', '_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 Culture Guide
|
||||
</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">87%</div>
|
||||
<div className="text-small-white opacity-90">Inclusion score improvement</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">300+</div>
|
||||
<div className="text-small-white opacity-90">Organizations transformed</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">79%</div>
|
||||
<div className="text-small-white opacity-90">Engagement increase</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">92%</div>
|
||||
<div className="text-small-white opacity-90">Culture satisfaction rating</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stacked Offer Section */}
|
||||
<StackedOfferSection cards={cultureCards} />
|
||||
|
||||
{/* 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 culture competence programs are designed for diversity leaders, HR executives,
|
||||
and senior leadership teams committed to building inclusive, high-performance cultures.
|
||||
</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: 'rgba(247, 247, 253, 0.5)' }}>
|
||||
<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 culture competence programs deliver measurable improvements in inclusion,
|
||||
employee engagement, and organizational performance outcomes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Three-Column Layout - Reference Design Style */}
|
||||
<div className="grid lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
|
||||
|
||||
{/* Inclusive Culture 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">
|
||||
<Heart className="w-10 h-10 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-h3 text-black mb-4">
|
||||
Inclusive Culture Excellence
|
||||
</h3>
|
||||
|
||||
<p className="text-body text-muted leading-relaxed mb-8">
|
||||
Build inclusive leadership capabilities and organizational belonging measures
|
||||
that drive engagement and performance excellence.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Culture Excellence Visualization */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-small text-muted font-medium">Inclusion Score</span>
|
||||
<span className="text-h4 text-green-600 font-bold">+87%</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">89%</div>
|
||||
<div className="text-small text-muted">Belonging</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">84%</div>
|
||||
<div className="text-small text-muted">Inclusion</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Employee Engagement */}
|
||||
<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">
|
||||
<Sparkles className="w-10 h-10 text-accent" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-h3 text-black mb-4">
|
||||
Enhanced Employee Engagement
|
||||
</h3>
|
||||
|
||||
<p className="text-body text-muted leading-relaxed mb-8">
|
||||
Significant improvements in employee engagement, retention rates,
|
||||
and overall organizational satisfaction metrics.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Engagement Metrics */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="text-small text-muted font-medium">Engagement Level</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">+79%</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: '79%' }}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-small text-muted">Employee Satisfaction</span>
|
||||
<div className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-small font-medium">
|
||||
82%
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-small text-muted">Retention Rate</span>
|
||||
<div className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-small font-medium">
|
||||
77%
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-small text-muted">Culture Rating</span>
|
||||
<div className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-small font-medium">
|
||||
85%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Organizational Performance */}
|
||||
<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 Performance
|
||||
</h3>
|
||||
|
||||
<p className="text-body text-muted leading-relaxed mb-8">
|
||||
Measurable business impact through improved culture, innovation metrics,
|
||||
and team effectiveness outcomes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Performance 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">68%</div>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-purple-50 rounded-lg border border-purple-100">
|
||||
<div className="flex items-center justify-center mb-1">
|
||||
<span className="text-small text-muted mr-2">Innovation</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-purple-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xl font-bold text-purple-500">31%</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">Culture Impact</span>
|
||||
<span className="text-small text-primary font-bold">Business ROI</span>
|
||||
</div>
|
||||
<div className="flex items-end justify-between">
|
||||
<div className="text-2xl font-bold text-primary">74%</div>
|
||||
<div className="text-2xl font-bold text-green-600">$1.8M</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-primary">68%</div>
|
||||
<div className="text-xs text-muted">Performance</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-green-600">+31%</div>
|
||||
<div className="text-xs text-muted">Innovation</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-purple-500">23%</div>
|
||||
<div className="text-xs text-muted">Retention</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 12 months of program implementation
|
||||
</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 culture transformation journey combining assessment, strategic planning,
|
||||
implementation support, and measurement for sustainable organizational change.
|
||||
</p>
|
||||
|
||||
{/* Navigation Controls */}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
const container = document.getElementById('approach-carousel');
|
||||
if (container) {
|
||||
container.scrollBy({ left: -320, 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: 320, 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-80 bg-white rounded-2xl border border-gray-100 p-8 hover:shadow-lg 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 Culture Leaders Say"
|
||||
subtitle="Hear from diversity officers and HR leaders who have transformed their organizational cultures through our comprehensive programs."
|
||||
tagText="Culture Success"
|
||||
/>
|
||||
|
||||
<CTABannerSection />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
693
src/components/services/ExecutiveCoaching.tsx
Normal file
693
src/components/services/ExecutiveCoaching.tsx
Normal file
@@ -0,0 +1,693 @@
|
||||
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 {
|
||||
Users,
|
||||
Target,
|
||||
ArrowRight,
|
||||
CheckCircle,
|
||||
Award,
|
||||
Lightbulb,
|
||||
Brain,
|
||||
UserCheck,
|
||||
Eye,
|
||||
TrendingUp,
|
||||
MessageCircle,
|
||||
Calendar,
|
||||
BarChart3,
|
||||
Shield,
|
||||
Star,
|
||||
User,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
ArrowLeft,
|
||||
Download
|
||||
} from 'lucide-react';
|
||||
import { PrimaryCTAButton } from '../PrimaryCTAButton';
|
||||
|
||||
// Executive coaching cards data for the stacking section
|
||||
const coachingCards = [
|
||||
{
|
||||
id: 1,
|
||||
title: "1:1 Coaching Programs",
|
||||
subtitle: "Personalized Executive Development",
|
||||
description:
|
||||
"Confidential, personalized executive coaching programs tailored to individual leadership challenges and growth goals, designed for maximum impact and sustainable change.",
|
||||
badge: "Featured",
|
||||
color: "from-blue-600 to-blue-700",
|
||||
icon: User,
|
||||
features: ["Individual Assessment", "Customized Development Plan", "Regular Coaching Sessions", "Progress Tracking"],
|
||||
stats: [
|
||||
{ label: "Success Rate", value: "91%" },
|
||||
{ label: "Executives Coached", value: "450+" },
|
||||
{ label: "Duration", value: "3-6 Mo" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "360° Feedback Debriefs",
|
||||
subtitle: "Comprehensive Leadership Assessment",
|
||||
description:
|
||||
"Expert-facilitated 360-degree feedback analysis and development planning based on multi-source insights that drive meaningful behavioral change and leadership effectiveness.",
|
||||
badge: "Popular",
|
||||
color: "from-purple-600 to-purple-700",
|
||||
icon: Eye,
|
||||
features: ["Multi-source Feedback", "Behavioral Analysis", "Strengths Identification", "Development Prioritization"],
|
||||
stats: [
|
||||
{ label: "Awareness Increase", value: "+88%" },
|
||||
{ label: "Leaders Assessed", value: "800+" },
|
||||
{ label: "Duration", value: "4-8 Wks" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Executive Presence & Transition Support",
|
||||
subtitle: "Leadership Transition Excellence",
|
||||
description:
|
||||
"Specialized coaching for leadership transitions and executive presence enhancement that ensures successful role transitions and enhanced stakeholder confidence.",
|
||||
badge: "Strategic",
|
||||
color: "from-green-600 to-green-700",
|
||||
icon: Award,
|
||||
features: ["Presence Development", "Transition Planning", "Stakeholder Management", "Communication Skills"],
|
||||
stats: [
|
||||
{ label: "Transition Success", value: "96%" },
|
||||
{ label: "Leaders Transitioned", value: "300+" },
|
||||
{ label: "Duration", value: "6-12 Mo" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Strategic Leadership Coaching",
|
||||
subtitle: "Complex Challenge Navigation",
|
||||
description:
|
||||
"Advanced coaching for complex strategic challenges and organizational transformation that develops exceptional strategic thinking and decision-making capabilities.",
|
||||
badge: "Comprehensive",
|
||||
color: "from-orange-600 to-orange-700",
|
||||
icon: Target,
|
||||
features: ["Strategic Thinking", "Decision-Making", "Change Leadership", "Organizational Impact"],
|
||||
stats: [
|
||||
{ label: "Strategic Impact", value: "+79%" },
|
||||
{ label: "Strategic Leaders", value: "250+" },
|
||||
{ label: "Duration", value: "6-18 Mo" }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const targetAudience = [
|
||||
{
|
||||
title: "CXOs",
|
||||
description: "Chief executives seeking to enhance their leadership effectiveness and organizational impact",
|
||||
icon: Award,
|
||||
characteristics: ["Strategic leadership", "Organizational vision", "Stakeholder management", "Performance accountability"]
|
||||
},
|
||||
{
|
||||
title: "Senior Leaders Taking on New Roles",
|
||||
description: "Executives transitioning into expanded responsibilities or new organizational contexts",
|
||||
icon: TrendingUp,
|
||||
characteristics: ["Role transition", "New challenges", "Expanded scope", "Stakeholder expectations"]
|
||||
},
|
||||
{
|
||||
title: "High-Potential Successors",
|
||||
description: "Emerging leaders being prepared for senior executive roles and strategic responsibilities",
|
||||
icon: Star,
|
||||
characteristics: ["Leadership potential", "Career acceleration", "Strategic development", "Future leadership"]
|
||||
}
|
||||
];
|
||||
|
||||
const outcomes = [
|
||||
{
|
||||
title: "Heightened Self-Awareness",
|
||||
description: "Deep understanding of leadership strengths, blind spots, and impact on others",
|
||||
icon: Brain,
|
||||
metrics: "91% of executives report significantly increased self-awareness and emotional intelligence"
|
||||
},
|
||||
{
|
||||
title: "Enhanced Leadership Confidence",
|
||||
description: "Increased confidence in leadership abilities and decision-making in complex situations",
|
||||
icon: Shield,
|
||||
metrics: "88% improvement in leadership confidence and presence in challenging situations"
|
||||
},
|
||||
{
|
||||
title: "Clearer Strategic Execution",
|
||||
description: "Improved ability to translate strategy into action and drive organizational results",
|
||||
icon: Target,
|
||||
metrics: "79% better strategic execution effectiveness and organizational impact"
|
||||
}
|
||||
];
|
||||
|
||||
const approachSteps = [
|
||||
{
|
||||
step: "01",
|
||||
title: "Assessment & Goal Setting",
|
||||
description: "Comprehensive leadership assessment to understand current state and define specific coaching objectives. Together, we make your vision manifest through proven assessment methodologies and frameworks.",
|
||||
details: ["Leadership assessment", "360-degree feedback", "Goal clarification", "Success metrics"],
|
||||
icon: Eye
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
title: "Coach Matching",
|
||||
description: "Careful matching with ICF-certified executive coaches based on industry experience and leadership style compatibility. Together, we make your vision manifest through proven matching methodologies and frameworks.",
|
||||
details: ["Coach selection", "Chemistry session", "Approach alignment", "Relationship building"],
|
||||
icon: UserCheck
|
||||
},
|
||||
{
|
||||
step: "03",
|
||||
title: "Coaching Journey",
|
||||
description: "Confidential, goal-oriented coaching engagement over 3–6 months with regular sessions and ongoing support. Together, we make your vision manifest through proven coaching methodologies and frameworks.",
|
||||
details: ["Regular sessions", "Action planning", "Skill development", "Progress monitoring"],
|
||||
icon: TrendingUp
|
||||
},
|
||||
{
|
||||
step: "04",
|
||||
title: "Impact Measurement",
|
||||
description: "Comprehensive evaluation of coaching impact and integration of learning into ongoing leadership practice. Together, we make your vision manifest through proven measurement methodologies and frameworks.",
|
||||
details: ["Progress review", "Impact assessment", "Learning integration", "Sustained development"],
|
||||
icon: BarChart3
|
||||
}
|
||||
];
|
||||
|
||||
export function ExecutiveCoaching() {
|
||||
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: '#FFFFFF' }}>
|
||||
{/* 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-1573164713714-d95e436ab8d6?w=1920&h=1080&fit=crop"
|
||||
alt="Executive coaching session - 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">
|
||||
Executive Coaching Services
|
||||
</h1>
|
||||
|
||||
<p className="text-body-lg-white mb-8 max-w-2xl mx-auto">
|
||||
Transform your leadership effectiveness through confidential, personalized coaching
|
||||
tailored to your unique challenges and growth objectives.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
||||
<PrimaryCTAButton
|
||||
text="Match me with a coach"
|
||||
onClick={() => navigateTo('/contact')}
|
||||
className="management-dev-primary-cta"
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={() => window.open('/coaching-guide', '_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 Coaching Guide
|
||||
</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">91%</div>
|
||||
<div className="text-small-white opacity-90">Self-awareness improvement</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">450+</div>
|
||||
<div className="text-small-white opacity-90">Executives coached</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">88%</div>
|
||||
<div className="text-small-white opacity-90">Leadership confidence boost</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">96%</div>
|
||||
<div className="text-small-white opacity-90">Client satisfaction rating</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stacked Offer Section */}
|
||||
<StackedOfferSection cards={coachingCards} />
|
||||
|
||||
{/* 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 executive coaching programs serve senior leaders and high-potential executives
|
||||
who are committed to accelerating their leadership impact and effectiveness.
|
||||
</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 executive coaching delivers transformational results in leadership effectiveness,
|
||||
confidence, and strategic execution capabilities for sustained success.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Three-Column Layout - Reference Design Style */}
|
||||
<div className="grid lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
|
||||
|
||||
{/* Heightened Self-Awareness */}
|
||||
<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">
|
||||
<Brain className="w-10 h-10 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-h3 text-black mb-4">
|
||||
Heightened Self-Awareness
|
||||
</h3>
|
||||
|
||||
<p className="text-body text-muted leading-relaxed mb-8">
|
||||
Deep understanding of leadership strengths, blind spots, and impact on
|
||||
others for enhanced emotional intelligence and effectiveness.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Self-Awareness Visualization */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-small text-muted font-medium">Self-Awareness Growth</span>
|
||||
<span className="text-h4 text-green-600 font-bold">+91%</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-blue-50 rounded-lg border border-blue-100">
|
||||
<div className="text-xl font-bold text-primary">88%</div>
|
||||
<div className="text-small text-muted">EQ Improvement</div>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-green-50 rounded-lg border border-green-100">
|
||||
<div className="text-xl font-bold text-green-600">94%</div>
|
||||
<div className="text-small text-muted">Impact Clarity</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Leadership Confidence */}
|
||||
<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">
|
||||
<Shield className="w-10 h-10 text-accent" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-h3 text-black mb-4">
|
||||
Enhanced Leadership Confidence
|
||||
</h3>
|
||||
|
||||
<p className="text-body text-muted leading-relaxed mb-8">
|
||||
Increased confidence in leadership abilities and decision-making
|
||||
in complex and challenging situations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Leadership Confidence Metrics */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="text-small text-muted font-medium">Leadership Confidence</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">+88%</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: '88%' }}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-small text-muted">Decision Making</span>
|
||||
<div className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-small font-medium">
|
||||
91%
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-small text-muted">Complex Situations</span>
|
||||
<div className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-small font-medium">
|
||||
85%
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-small text-muted">Executive Presence</span>
|
||||
<div className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-small font-medium">
|
||||
89%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Clearer Strategic Execution */}
|
||||
<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">
|
||||
<Target className="w-10 h-10 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-h3 text-black mb-4">
|
||||
Clearer Strategic Execution
|
||||
</h3>
|
||||
|
||||
<p className="text-body text-muted leading-relaxed mb-8">
|
||||
Improved ability to translate strategy into action and drive
|
||||
measurable organizational results and impact.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Strategic Execution 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">Strategy</span>
|
||||
<TrendingUp className="w-3 h-3 text-green-500" />
|
||||
</div>
|
||||
<div className="text-xl font-bold text-primary">79%</div>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-green-50 rounded-lg border border-green-100">
|
||||
<div className="flex items-center justify-center mb-1">
|
||||
<span className="text-small text-muted mr-2">Execution</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">86%</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">Strategic Impact</span>
|
||||
<span className="text-small text-primary font-bold">Result Quality</span>
|
||||
</div>
|
||||
<div className="flex items-end justify-between">
|
||||
<div className="text-2xl font-bold text-primary">83%</div>
|
||||
<div className="text-2xl font-bold text-green-600">92%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-primary">79%</div>
|
||||
<div className="text-xs text-muted">Execution</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-green-600">+24%</div>
|
||||
<div className="text-xs text-muted">Results</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-blue-500">92%</div>
|
||||
<div className="text-xs text-muted">Impact</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 3-6 months of coaching engagement
|
||||
</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">
|
||||
Confidential, goal-oriented coaching over 3–6 months matched with ICF-certified
|
||||
executive coaches for maximum leadership impact and sustainable transformation.
|
||||
</p>
|
||||
|
||||
{/* Navigation Controls */}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
const container = document.getElementById('coaching-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('coaching-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="coaching-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>{`
|
||||
#coaching-approach-carousel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials Section - Using home page testimonials with custom headers */}
|
||||
<TestimonialsSection
|
||||
title="Success Stories"
|
||||
subtitle="Private success stories from executives who have achieved breakthrough results through our confidential coaching programs."
|
||||
tagText="Executive Success"
|
||||
/>
|
||||
|
||||
{/* CTA Section - Using standardized home page CTA */}
|
||||
<CTABannerSection />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
695
src/components/services/LeadershipDevelopment.tsx
Normal file
695
src/components/services/LeadershipDevelopment.tsx
Normal file
@@ -0,0 +1,695 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
1577
src/components/services/LearningFacility.tsx
Normal file
1577
src/components/services/LearningFacility.tsx
Normal file
File diff suppressed because it is too large
Load Diff
692
src/components/services/ManagementDevelopment.tsx
Normal file
692
src/components/services/ManagementDevelopment.tsx
Normal file
@@ -0,0 +1,692 @@
|
||||
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
|
||||
} from 'lucide-react';
|
||||
import { PrimaryCTAButton } from '../PrimaryCTAButton';
|
||||
|
||||
// Management development cards data for the stacking section
|
||||
const managementCards = [
|
||||
{
|
||||
id: 1,
|
||||
title: "First-Time Manager Programs",
|
||||
subtitle: "Essential Leadership Transition",
|
||||
description:
|
||||
"Comprehensive programs for new supervisors transitioning from individual contributor roles to leadership positions, building essential management skills and confidence.",
|
||||
badge: "Featured",
|
||||
color: "from-blue-600 to-blue-700",
|
||||
icon: Users,
|
||||
features: ["Team Leadership Basics", "Delegation Skills", "Performance Conversations", "Time Management"],
|
||||
stats: [
|
||||
{ label: "Success Rate", value: "92%" },
|
||||
{ label: "Managers Trained", value: "1,800+" },
|
||||
{ label: "Duration", value: "6-12 Wks" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Operational Excellence Training",
|
||||
subtitle: "Process & Quality Management",
|
||||
description:
|
||||
"Advanced training in process optimization, quality management, and operational efficiency that drives measurable business results and team performance improvements.",
|
||||
badge: "Popular",
|
||||
color: "from-purple-600 to-purple-700",
|
||||
icon: Settings,
|
||||
features: ["Process Improvement", "Quality Systems", "Lean Methodologies", "Performance Metrics"],
|
||||
stats: [
|
||||
{ label: "Efficiency Gain", value: "+76%" },
|
||||
{ label: "Teams Trained", value: "900+" },
|
||||
{ label: "Duration", value: "8-16 Wks" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Team Development & Coaching",
|
||||
subtitle: "High-Performance Team Building",
|
||||
description:
|
||||
"Develop skills to build high-performing teams through effective coaching, feedback delivery, and conflict resolution that creates lasting team effectiveness.",
|
||||
badge: "Strategic",
|
||||
color: "from-green-600 to-green-700",
|
||||
icon: Network,
|
||||
features: ["Team Dynamics", "Coaching Skills", "Feedback Delivery", "Conflict Resolution"],
|
||||
stats: [
|
||||
{ label: "Team Performance", value: "+89%" },
|
||||
{ label: "Coaches Trained", value: "1,200+" },
|
||||
{ label: "Duration", value: "10-20 Wks" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Performance Management Systems",
|
||||
subtitle: "Goal-Driven Excellence",
|
||||
description:
|
||||
"Comprehensive training in goal setting, performance tracking, and accountability frameworks that drive consistent results and organizational success.",
|
||||
badge: "Comprehensive",
|
||||
color: "from-orange-600 to-orange-700",
|
||||
icon: Target,
|
||||
features: ["Goal Setting", "KPI Development", "Performance Reviews", "Accountability Systems"],
|
||||
stats: [
|
||||
{ label: "Goal Achievement", value: "+93%" },
|
||||
{ label: "Systems Deployed", value: "650+" },
|
||||
{ label: "Duration", value: "4-12 Wks" }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const targetAudience = [
|
||||
{
|
||||
title: "First-Time Managers",
|
||||
description: "New supervisors and team leaders learning essential management skills and responsibilities",
|
||||
icon: Users,
|
||||
characteristics: ["New to management", "Team oversight", "Skill development", "Leadership transition"]
|
||||
},
|
||||
{
|
||||
title: "Operations Managers",
|
||||
description: "Managers focused on operational efficiency, process improvement, and team performance",
|
||||
icon: Settings,
|
||||
characteristics: ["Operational focus", "Process optimization", "Team performance", "Quality management"]
|
||||
},
|
||||
{
|
||||
title: "Department Heads",
|
||||
description: "Mid-level managers responsible for multiple teams and cross-functional collaboration",
|
||||
icon: Award,
|
||||
characteristics: ["Multi-team leadership", "Cross-functional work", "Strategic execution", "Resource management"]
|
||||
}
|
||||
];
|
||||
|
||||
const outcomes = [
|
||||
{
|
||||
title: "Improved Team Performance",
|
||||
description: "Measurable improvements in team productivity, engagement, and operational effectiveness",
|
||||
icon: TrendingUp,
|
||||
metrics: "89% of managers report improved team performance and productivity within 90 days"
|
||||
},
|
||||
{
|
||||
title: "Enhanced Management Confidence",
|
||||
description: "Increased confidence in handling management responsibilities and challenging situations",
|
||||
icon: Shield,
|
||||
metrics: "92% improvement in management confidence and decision-making effectiveness"
|
||||
},
|
||||
{
|
||||
title: "Better Operational Results",
|
||||
description: "Improved operational metrics, process efficiency, and quality outcomes",
|
||||
icon: BarChart3,
|
||||
metrics: "76% improvement in operational KPIs and process efficiency measures"
|
||||
}
|
||||
];
|
||||
|
||||
const approachSteps = [
|
||||
{
|
||||
step: "01",
|
||||
title: "Skills Assessment",
|
||||
description: "Comprehensive assessment of current management skills and development needs. Together, we make your vision manifest through comprehensive assessment methodologies and proven frameworks.",
|
||||
details: ["Management assessment", "Skills gap analysis", "360-degree feedback", "Development priorities"],
|
||||
icon: Eye
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
title: "Program Design",
|
||||
description: "Customized curriculum design based on assessment results and operational context. Together, we make your vision manifest through comprehensive design methodologies and proven frameworks.",
|
||||
details: ["Curriculum development", "Learning objectives", "Practical application", "Timeline planning"],
|
||||
icon: Brain
|
||||
},
|
||||
{
|
||||
step: "03",
|
||||
title: "Interactive Learning",
|
||||
description: "Hands-on workshops and peer learning sessions with real-world application. Together, we make your vision manifest through comprehensive learning methodologies and proven frameworks.",
|
||||
details: ["Management workshops", "Peer collaboration", "Case studies", "Skills practice"],
|
||||
icon: Network
|
||||
},
|
||||
{
|
||||
step: "04",
|
||||
title: "Application & Review",
|
||||
description: "Ongoing support and progress tracking to ensure skills transfer and improvement. Together, we make your vision manifest through comprehensive review methodologies and proven frameworks.",
|
||||
details: ["Skills application", "Progress tracking", "Feedback sessions", "Continuous improvement"],
|
||||
icon: BarChart3
|
||||
}
|
||||
];
|
||||
|
||||
export function ManagementDevelopment() {
|
||||
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: '#FFFFFF' }}>
|
||||
{/* 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-1521737711867-e3b97375f902?w=1920&h=1080&fit=crop"
|
||||
alt="Professional business meeting - management 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">Management Excellence</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-h1-white mb-6">
|
||||
Management Development Services
|
||||
</h1>
|
||||
|
||||
<p className="text-body-lg-white mb-8 max-w-2xl mx-auto">
|
||||
As your trusted management development partner, we bring the expertise and
|
||||
experience to ensure your leadership workforce aligns seamlessly with your goals.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
||||
<PrimaryCTAButton
|
||||
text="Book a demo"
|
||||
onClick={() => navigateTo('/contact')}
|
||||
className="management-dev-primary-cta"
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={() => window.open('/curriculum-download', '_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 Curriculum
|
||||
</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">85%</div>
|
||||
<div className="text-small-white opacity-90">Improvement in team performance</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">1,800+</div>
|
||||
<div className="text-small-white opacity-90">Managers trained</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">40%</div>
|
||||
<div className="text-small-white opacity-90">Faster decision making</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">93%</div>
|
||||
<div className="text-small-white opacity-90">Project completion rate</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stacked Offer Section */}
|
||||
<StackedOfferSection cards={managementCards} />
|
||||
|
||||
{/* 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 management development programs cater to professionals at various stages of their
|
||||
management journey, from first-time supervisors to experienced leaders.
|
||||
</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 - Redesigned to Match Reference */}
|
||||
<section className="py-20" style={{ backgroundColor: 'rgba(247, 247, 253, 0.5)' }}>
|
||||
<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 management development programs deliver tangible improvements in team performance,
|
||||
operational efficiency, and leadership effectiveness.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Three-Column Layout - Reference Design Style */}
|
||||
<div className="grid lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
|
||||
|
||||
{/* Improved Team Performance */}
|
||||
<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">
|
||||
<TrendingUp className="w-10 h-10 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-h3 text-black mb-4">
|
||||
Improved Team Performance
|
||||
</h3>
|
||||
|
||||
<p className="text-body text-muted leading-relaxed mb-8">
|
||||
Smooth out team inefficiencies, conserve leadership capital, and invest
|
||||
in your management capabilities where it matters most.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Performance Visualization */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-small text-muted font-medium">Team Productivity</span>
|
||||
<span className="text-h4 text-green-600 font-bold">+89%</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">85%</div>
|
||||
<div className="text-small text-muted">Engagement</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">92%</div>
|
||||
<div className="text-small text-muted">Retention</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Management Confidence */}
|
||||
<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">
|
||||
<Shield className="w-10 h-10 text-accent" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-h3 text-black mb-4">
|
||||
Enhanced Management Confidence
|
||||
</h3>
|
||||
|
||||
<p className="text-body text-muted leading-relaxed mb-8">
|
||||
Close confidence gaps and streamline decision-making processes
|
||||
without compromising leadership relationships.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Confidence Metrics */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="text-small text-muted font-medium">Confidence Level</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">+92%</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: '92%' }}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-small text-muted">Decision Making</span>
|
||||
<div className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-small font-medium">
|
||||
95%
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-small text-muted">Team Leadership</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">Conflict Resolution</span>
|
||||
<div className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-small font-medium">
|
||||
87%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Better Operational Results */}
|
||||
<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">
|
||||
<BarChart3 className="w-10 h-10 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-h3 text-black mb-4">
|
||||
Better Operational Results
|
||||
</h3>
|
||||
|
||||
<p className="text-body text-muted leading-relaxed mb-8">
|
||||
Seize control of your operational KPIs and build towards your
|
||||
performance goals without barriers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Operational 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">Process Efficiency</span>
|
||||
<TrendingUp className="w-3 h-3 text-green-500" />
|
||||
</div>
|
||||
<div className="text-xl font-bold text-primary">76%</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">Cost Reduction</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-red-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xl font-bold text-red-500">12%</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">Quality Metrics</span>
|
||||
<span className="text-small text-primary font-bold">Annual Revenue</span>
|
||||
</div>
|
||||
<div className="flex items-end justify-between">
|
||||
<div className="text-2xl font-bold text-primary">82%</div>
|
||||
<div className="text-2xl font-bold text-green-600">$1.7M</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-primary">76%</div>
|
||||
<div className="text-xs text-muted">Efficiency</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-green-600">+25%</div>
|
||||
<div className="text-xs text-muted">Revenue</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-red-500">-12%</div>
|
||||
<div className="text-xs text-muted">Costs</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">
|
||||
Programmatic journey over 6–12 weeks combining practical application with peer learning
|
||||
for maximum management effectiveness.
|
||||
</p>
|
||||
|
||||
{/* Navigation Controls */}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
const container = document.getElementById('approach-carousel');
|
||||
if (container) {
|
||||
container.scrollBy({ left: -320, 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: 320, 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-80 bg-white rounded-2xl border border-gray-100 p-8 hover:shadow-lg 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 Managers Say"
|
||||
subtitle="Hear from participants who have enhanced their management effectiveness and operational results through our development programs."
|
||||
tagText="Management Success"
|
||||
/>
|
||||
|
||||
<CTABannerSection />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user