2025-08-28 13:14:51 +05:30
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" >
2025-09-05 12:20:05 +05:30
< div className = "mx-auto section-margin-x" >
2025-08-28 13:14:51 +05:30
< 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" >
2025-09-05 12:20:05 +05:30
< div className = "mx-auto section-margin-x py-8" >
2025-08-28 13:14:51 +05:30
< 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' } } >
2025-09-05 12:20:05 +05:30
< div className = "mx-auto section-margin-x" >
2025-08-28 13:14:51 +05:30
< 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' } } >
2025-09-05 12:20:05 +05:30
< div className = "mx-auto section-margin-x" >
2025-08-28 13:14:51 +05:30
< 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 . 3 M < / 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' } } >
2025-09-05 12:20:05 +05:30
< div className = "mx-auto section-margin-x" >
2025-08-28 13:14:51 +05:30
< 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 >
) ;
}
