620ddcaa8e
All checks were successful
CodeAnt AI Review - Stage 1 / codeant-review (pull_request) Successful in 1m4s
998 lines
45 KiB
TypeScript
998 lines
45 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { navigateTo } from '../Router';
|
|
import { PrimaryCTAButton } from '../PrimaryCTAButton';
|
|
import { Button } from '../ui/button';
|
|
import { Card, CardContent } from '../ui/card';
|
|
import { Badge } from '../ui/badge';
|
|
import { ImageWithFallback } from '../figma/ImageWithFallback';
|
|
import { BrandedTag } from './BrandedTag';
|
|
import {
|
|
Eye,
|
|
Target,
|
|
Users,
|
|
Brain,
|
|
TrendingUp,
|
|
Lightbulb,
|
|
ArrowRight,
|
|
CheckCircle,
|
|
Globe,
|
|
BarChart3,
|
|
Layers,
|
|
Compass
|
|
} from 'lucide-react';
|
|
|
|
// Vision pillars data
|
|
const visionPillars = [
|
|
{
|
|
title: "World-Class Institution in Leadership",
|
|
description: "Establishing ourselves as a premier global institution recognized for excellence in leadership thought and practice, setting industry standards for development methodologies.",
|
|
icon: Globe,
|
|
gradient: "from-blue-600 to-blue-700",
|
|
mainStat: {
|
|
label: "Global Recognition",
|
|
value: "+96%",
|
|
color: "text-primary"
|
|
},
|
|
chartData: [
|
|
{ label: "2020", value: 20 },
|
|
{ label: "2021", value: 45 },
|
|
{ label: "2022", value: 70 },
|
|
{ label: "2023", value: 85 },
|
|
{ label: "2024", value: 96 }
|
|
],
|
|
metrics: [
|
|
{ label: "Excellence", value: "94%", color: "text-primary" },
|
|
{ label: "Recognition", value: "91%", color: "text-primary" }
|
|
]
|
|
},
|
|
{
|
|
title: "Partnership-Driven Capacity Building",
|
|
description: "Collaborating with institutions to build sustainable leadership capacity and capability that drives organizational transformation and long-term success.",
|
|
icon: Users,
|
|
gradient: "from-yellow-500 to-yellow-600",
|
|
mainStat: {
|
|
label: "Partnership Growth",
|
|
value: "+78%",
|
|
color: "text-primary"
|
|
},
|
|
progressMetrics: [
|
|
{ label: "Partner Satisfaction", value: 82, color: "#F8C301" },
|
|
{ label: "Capacity Building", value: 76, color: "#04045B" },
|
|
{ label: "Retention Rate", value: 84, color: "#F8C301" }
|
|
],
|
|
metrics: []
|
|
},
|
|
{
|
|
title: "Individual Leadership Discovery",
|
|
description: "Facilitating individuals to discover and develop their personal leadership resources, unlocking their unique potential to create meaningful impact.",
|
|
icon: Compass,
|
|
gradient: "from-purple-600 to-indigo-600",
|
|
mainStat: {
|
|
label: "Development Speed",
|
|
value: "65%",
|
|
color: "text-primary"
|
|
},
|
|
topMetrics: [
|
|
{ label: "Speed", value: "65%", color: "text-primary" },
|
|
{ label: "Alignment", value: "89%", color: "text-primary" }
|
|
],
|
|
bottomMetrics: [
|
|
{ label: "Quality", value: "91%", color: "text-primary" },
|
|
{ label: "Time Reduction", value: "-65%", color: "text-primary" },
|
|
{ label: "Impact", value: "89%", color: "text-primary" }
|
|
]
|
|
}
|
|
];
|
|
|
|
// Approach timeline data
|
|
const approachSteps = [
|
|
{
|
|
title: "Client Context Alignment",
|
|
description: "Deep understanding of unique organizational challenges, culture, and strategic objectives through comprehensive assessment and stakeholder engagement.",
|
|
details: [
|
|
"Organizational diagnostic and culture assessment",
|
|
"Leadership capability gap analysis",
|
|
"Strategic business alignment review",
|
|
"Stakeholder needs analysis"
|
|
],
|
|
icon: Target
|
|
},
|
|
{
|
|
title: "Research Anchored Methodology",
|
|
description: "Evidence-based methodologies and frameworks grounded in behavioral science, leadership psychology, and proven best practices from global research.",
|
|
details: [
|
|
"Latest research in leadership effectiveness",
|
|
"Behavioral science applications",
|
|
"Validated assessment tools and frameworks",
|
|
"Global best practice integration"
|
|
],
|
|
icon: Brain
|
|
},
|
|
{
|
|
title: "Co-Created Program Design",
|
|
description: "Collaborative program development with clients, ensuring solutions are tailored, practical, and aligned with specific organizational needs and constraints.",
|
|
details: [
|
|
"Joint design workshops with key stakeholders",
|
|
"Customized learning journeys and pathways",
|
|
"Practical application focus",
|
|
"Measurable outcome definition"
|
|
],
|
|
icon: Lightbulb
|
|
}
|
|
];
|
|
|
|
// Leadership orientations preview
|
|
const leadershipOrientations = [
|
|
{
|
|
orientation: "Thinking",
|
|
description: "How leaders process information, make decisions, and approach complex challenges",
|
|
aspects: ["Strategic thinking", "Systems thinking", "Critical analysis", "Creative problem-solving"]
|
|
},
|
|
{
|
|
orientation: "Risk Appetite",
|
|
description: "Leaders' comfort with uncertainty, innovation, and calculated risk-taking",
|
|
aspects: ["Innovation tolerance", "Change agility", "Calculated risk-taking", "Uncertainty navigation"]
|
|
},
|
|
{
|
|
orientation: "Power",
|
|
description: "How leaders use influence, authority, and positional power to drive results",
|
|
aspects: ["Influence strategies", "Authority dynamics", "Empowerment approaches", "Decision rights"]
|
|
},
|
|
{
|
|
orientation: "Interpersonal/Political",
|
|
description: "Leaders' ability to navigate relationships, coalitions, and organizational dynamics",
|
|
aspects: ["Relationship building", "Coalition management", "Stakeholder engagement", "Political savvy"]
|
|
}
|
|
];
|
|
|
|
export function OurVision() {
|
|
const [activeStep, setActiveStep] = useState(0);
|
|
|
|
useEffect(() => {
|
|
document.title = 'Our Vision - About Us | KLC';
|
|
window.scrollTo(0, 0);
|
|
}, []);
|
|
|
|
// Auto-advance timeline steps
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setActiveStep((prev) => (prev + 1) % approachSteps.length);
|
|
}, 4000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="min-h-screen" style={{ backgroundColor: '#FFFFFF' }}>
|
|
{/* Hero Section - Our Impact Page Style */}
|
|
<section className="relative min-h-[90vh] flex flex-col">
|
|
<div className="absolute inset-0 z-0">
|
|
<ImageWithFallback
|
|
src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=1920&h=1080&fit=crop"
|
|
alt="Leadership vision and transformation - Our Vision"
|
|
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="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">Knowledge Leadership Centre</span>
|
|
</div>
|
|
|
|
<h1 className="text-h1-white mb-6">
|
|
Our Vision
|
|
</h1>
|
|
|
|
<p className="text-body-lg-white mb-8 max-w-2xl mx-auto">
|
|
Building the next generation of transformational leaders who drive organizational
|
|
success and create lasting positive impact worldwide through excellence in leadership development.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
|
<PrimaryCTAButton
|
|
text="Explore Our Approach"
|
|
onClick={() => document.getElementById('vision-pillars')?.scrollIntoView({ behavior: 'smooth' })}
|
|
className="management-dev-primary-cta"
|
|
/>
|
|
|
|
<Button
|
|
onClick={() => navigateTo('/contact')}
|
|
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)'
|
|
}}
|
|
>
|
|
<ArrowRight className="w-5 h-5 mr-2" />
|
|
Get Started
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Vision Statistics Section - Embedded in Hero */}
|
|
<div className="relative z-10 border-t border-white/20 backdrop-blur-sm bg-black/20">
|
|
<div className="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">3</div>
|
|
<div className="text-small-white opacity-90">Vision Pillars</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-h2-white mb-2">96%</div>
|
|
<div className="text-small-white opacity-90">Client Success Rate</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-h2-white mb-2">25+</div>
|
|
<div className="text-small-white opacity-90">Years Experience</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-h2-white mb-2">Global</div>
|
|
<div className="text-small-white opacity-90">Impact Reach</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Vision Pillars - Redesigned */}
|
|
<section id="vision-pillars" className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
|
|
<div className="mx-auto section-margin-x">
|
|
<div className="text-center mb-16">
|
|
<Badge
|
|
className="mb-6 text-body px-4 py-2"
|
|
style={{
|
|
backgroundColor: 'rgba(4, 4, 91, 0.1)',
|
|
color: 'var(--color-primary)',
|
|
border: 'none'
|
|
}}
|
|
>
|
|
Foundation
|
|
</Badge>
|
|
<h2 className="text-h2 mb-6">Three Pillars of Our Vision</h2>
|
|
<p className="text-body-lg text-muted max-w-3xl mx-auto leading-relaxed">
|
|
Our comprehensive approach to leadership development is built on three foundational pillars
|
|
that guide everything we do and drive measurable transformation.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid lg:grid-cols-3 gap-12 max-w-7xl mx-auto">
|
|
{visionPillars.map((pillar, index) => (
|
|
<div key={pillar.title} className="group">
|
|
<Card
|
|
className="border-0 shadow-sm hover:shadow-xl transition-all duration-300 h-full bg-white p-0"
|
|
>
|
|
<CardContent className="p-8">
|
|
{/* Icon */}
|
|
<div
|
|
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"
|
|
style={{ backgroundColor: 'rgba(4, 4, 91, 0.08)' }}
|
|
>
|
|
{React.createElement(pillar.icon, {
|
|
className: "w-8 h-8 text-primary"
|
|
})}
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h3 className="text-h4 mb-4 text-black leading-tight">
|
|
{pillar.title}
|
|
</h3>
|
|
|
|
{/* Description */}
|
|
<p className="text-body text-muted leading-relaxed mb-6">
|
|
{pillar.description}
|
|
</p>
|
|
|
|
{/* Main Stat */}
|
|
<div className="mb-6">
|
|
<div className="text-small text-muted mb-1">{pillar.mainStat.label}</div>
|
|
<div className={`text-3xl font-bold ${pillar.mainStat.color}`}>
|
|
{pillar.mainStat.value}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Data Visualization Section */}
|
|
{/* First Pillar: Bar Chart */}
|
|
{index === 0 && (
|
|
<>
|
|
<div className="mb-6">
|
|
<div className="flex items-end justify-between gap-1 h-20 mb-2">
|
|
{pillar.chartData.map((item, barIndex) => (
|
|
<div key={item.label} className="flex flex-col items-center flex-1">
|
|
<div
|
|
className="w-full rounded-t-sm transition-all duration-1000 delay-300"
|
|
style={{
|
|
height: `${item.value}%`,
|
|
backgroundColor: barIndex >= 3 ? '#04045B' : '#E5E7EB',
|
|
minHeight: '8px'
|
|
}}
|
|
></div>
|
|
<div className="text-xs text-muted mt-1">{item.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{pillar.metrics.map((metric, metricIndex) => (
|
|
<div key={metric.label} className="text-center">
|
|
<div className={`text-2xl font-bold ${metric.color}`}>
|
|
{metric.value}
|
|
</div>
|
|
<div className="text-small text-muted">
|
|
{metric.label}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Second Pillar: Progress Bars */}
|
|
{index === 1 && (
|
|
<div className="space-y-4">
|
|
{pillar.progressMetrics.map((metric, metricIndex) => (
|
|
<div key={metric.label}>
|
|
<div className="flex justify-between items-center mb-2">
|
|
<span className="text-small text-muted">{metric.label}</span>
|
|
<span className="text-small font-medium text-black">{metric.value}%</span>
|
|
</div>
|
|
<div className="w-full bg-gray-200 rounded-full h-2">
|
|
<div
|
|
className="h-2 rounded-full transition-all duration-1000"
|
|
style={{
|
|
width: `${metric.value}%`,
|
|
backgroundColor: metric.color,
|
|
animationDelay: `${(metricIndex + 1) * 200}ms`
|
|
}}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Third Pillar: Multiple Metrics Grid */}
|
|
{index === 2 && (
|
|
<>
|
|
{/* Top Metrics */}
|
|
<div className="grid grid-cols-2 gap-4 mb-6">
|
|
{pillar.topMetrics.map((metric, metricIndex) => (
|
|
<div key={metric.label} className="text-center">
|
|
<div className="text-small text-muted mb-1">{metric.label}</div>
|
|
<div className={`text-2xl font-bold ${metric.color}`}>
|
|
{metric.value}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Bottom Metrics */}
|
|
<div className="grid grid-cols-3 gap-3">
|
|
{pillar.bottomMetrics.map((metric, metricIndex) => (
|
|
<div key={metric.label} className="text-center">
|
|
<div className={`text-lg font-bold ${metric.color}`}>
|
|
{metric.value}
|
|
</div>
|
|
<div className="text-xs text-muted">
|
|
{metric.label}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* How Our Work Aligns - Redesigned Interactive Timeline */}
|
|
<section className="py-20" style={{ background: 'linear-gradient(135deg, rgba(247, 247, 253, 0.3) 0%, rgba(248, 195, 1, 0.05) 100%)' }}>
|
|
<div className="mx-auto section-margin-x">
|
|
<div className="text-center mb-16">
|
|
<Badge
|
|
className="mb-6 text-body px-4 py-2"
|
|
style={{
|
|
backgroundColor: 'rgba(4, 4, 91, 0.1)',
|
|
color: 'var(--color-primary)',
|
|
border: 'none'
|
|
}}
|
|
>
|
|
Methodology
|
|
</Badge>
|
|
<h2 className="text-h2 mb-6">Our Strategic Approach</h2>
|
|
<p className="text-body-lg text-muted max-w-3xl mx-auto leading-relaxed">
|
|
A clear step-by-step process that drives measurable impact and lasting transformation.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col lg:flex-row gap-12 max-w-6xl mx-auto">
|
|
{/* Timeline Steps - Left Side */}
|
|
<div className="flex lg:flex-col gap-6 lg:w-1/3">
|
|
{/* Progress Indicator */}
|
|
<div className="hidden lg:block text-center mb-6">
|
|
<div className="text-small text-muted font-medium">
|
|
Step {activeStep + 1} of {approachSteps.length}
|
|
</div>
|
|
<div className="w-full rounded-full h-2 mt-2" style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}>
|
|
<div
|
|
className="h-2 rounded-full transition-all duration-500 ease-out"
|
|
style={{
|
|
backgroundColor: 'var(--color-primary)',
|
|
width: `${((activeStep + 1) / approachSteps.length) * 100}%`
|
|
}}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step Buttons */}
|
|
{approachSteps.map((step, index) => (
|
|
<button
|
|
key={step.title}
|
|
onClick={() => setActiveStep(index)}
|
|
className={`group flex items-center gap-4 px-6 py-4 rounded-xl border-2 transition-all duration-300 text-left w-full
|
|
${activeStep === index
|
|
? 'bg-primary text-white border-primary shadow-lg'
|
|
: 'bg-white text-black hover:shadow-md hover:scale-105'
|
|
}
|
|
`}
|
|
style={{
|
|
borderColor: activeStep === index ? 'var(--color-primary)' : 'rgba(4, 4, 91, 0.2)',
|
|
backgroundColor: activeStep === index ? 'var(--color-primary)' : '#FFFFFF'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (activeStep !== index) {
|
|
e.currentTarget.style.borderColor = 'var(--color-primary)';
|
|
}
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (activeStep !== index) {
|
|
e.currentTarget.style.borderColor = 'rgba(4, 4, 91, 0.2)';
|
|
}
|
|
}}
|
|
>
|
|
{/* Step Number */}
|
|
<div
|
|
className={`w-10 h-10 flex items-center justify-center rounded-full font-bold text-lg transition-all duration-300
|
|
${activeStep === index
|
|
? 'bg-white text-primary'
|
|
: 'bg-primary text-white group-hover:scale-110'
|
|
}
|
|
`}
|
|
>
|
|
{index + 1}
|
|
</div>
|
|
|
|
{/* Step Info */}
|
|
<div className="flex-1 min-w-0">
|
|
<div
|
|
className={`font-medium text-body leading-tight transition-colors duration-300
|
|
${activeStep === index ? 'text-white' : 'text-black'}
|
|
`}
|
|
>
|
|
{step.title}
|
|
</div>
|
|
|
|
{/* Step Icon */}
|
|
<div className="mt-2">
|
|
{React.createElement(step.icon, {
|
|
className: `w-5 h-5 transition-all duration-300 ${
|
|
activeStep === index ? 'text-white' : 'text-primary'
|
|
}`
|
|
})}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Active Step Content - Right Side */}
|
|
<div className="flex-1 lg:w-2/3">
|
|
<Card
|
|
className="border-0 shadow-xl transition-all duration-500 ease-out bg-white"
|
|
style={{ minHeight: '500px' }}
|
|
>
|
|
<CardContent className="p-8 lg:p-10">
|
|
{/* Mobile Progress Indicator */}
|
|
<div className="lg:hidden text-center mb-6">
|
|
<div className="text-small text-muted font-medium">
|
|
Step {activeStep + 1} of {approachSteps.length}
|
|
</div>
|
|
<div className="w-full rounded-full h-2 mt-2" style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}>
|
|
<div
|
|
className="h-2 rounded-full transition-all duration-500 ease-out"
|
|
style={{
|
|
backgroundColor: 'var(--color-primary)',
|
|
width: `${((activeStep + 1) / approachSteps.length) * 100}%`
|
|
}}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step Content */}
|
|
<div className="mb-8 fade-in animate-in duration-700">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div
|
|
className="w-16 h-16 rounded-xl flex items-center justify-center transition-transform duration-300 hover:scale-110"
|
|
style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
|
|
>
|
|
{React.createElement(approachSteps[activeStep].icon, {
|
|
className: "w-8 h-8 text-primary"
|
|
})}
|
|
</div>
|
|
<div>
|
|
<h3 className="text-h3 text-black leading-tight">
|
|
{approachSteps[activeStep].title}
|
|
</h3>
|
|
<div className="text-small text-primary font-medium mt-1">
|
|
Step {activeStep + 1} of {approachSteps.length}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-body-lg text-muted leading-relaxed mb-8">
|
|
{approachSteps[activeStep].description}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Key Components Accordion-Style */}
|
|
<div className="mb-8">
|
|
<h4 className="text-h4 text-black mb-6">Key Components</h4>
|
|
<div className="space-y-3">
|
|
{approachSteps[activeStep].details.map((detail, index) => (
|
|
<div key={index} className="group">
|
|
<div
|
|
className="flex items-start gap-3 p-4 rounded-lg transition-all duration-300 cursor-pointer hover:scale-102"
|
|
style={{
|
|
backgroundColor: 'rgba(4, 4, 91, 0.05)',
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.backgroundColor = 'rgba(4, 4, 91, 0.08)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.backgroundColor = 'rgba(4, 4, 91, 0.05)';
|
|
}}
|
|
>
|
|
<div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center flex-shrink-0 mt-0.5 group-hover:scale-110 transition-transform duration-300">
|
|
<CheckCircle className="w-4 h-4 text-white" />
|
|
</div>
|
|
<span className="text-body text-black leading-relaxed">{detail}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA Button - Always Visible */}
|
|
<div className="pt-6" style={{ borderTop: '1px solid rgba(4, 4, 91, 0.1)' }}>
|
|
<PrimaryCTAButton
|
|
text="Learn More About Our Approach"
|
|
onClick={() => navigateTo('/services/consulting')}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Leadership Framework CTA - Redesigned */}
|
|
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
|
|
<div className="mx-auto section-margin-x">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
|
{/* Content Side */}
|
|
<div>
|
|
{/* Modern Pill Badge */}
|
|
<div className="inline-flex items-center gap-3 px-6 py-3 rounded-full mb-8 shadow-sm transition-all duration-300 hover:shadow-md"
|
|
style={{
|
|
backgroundColor: 'rgba(248, 195, 1, 0.12)',
|
|
border: '1px solid rgba(248, 195, 1, 0.2)'
|
|
}}>
|
|
<div className="w-3 h-3 rounded-full animate-pulse"
|
|
style={{ backgroundColor: 'var(--color-accent)' }} />
|
|
<span className="text-small font-semibold text-black uppercase tracking-wide">
|
|
Proprietary Framework
|
|
</span>
|
|
</div>
|
|
|
|
<h3 className="text-h2 mb-8 text-black leading-tight">
|
|
Leadership Orientations Framework
|
|
</h3>
|
|
|
|
<p className="text-body-lg text-muted mb-10 leading-relaxed">
|
|
Our research-backed framework examines four critical dimensions that define
|
|
leadership effectiveness and drive organizational results. This proprietary
|
|
methodology helps leaders understand their natural orientations and develop
|
|
adaptive capabilities.
|
|
</p>
|
|
|
|
{/* Enhanced Framework Items */}
|
|
<div className="grid grid-cols-2 gap-6 mb-12">
|
|
{[
|
|
{
|
|
label: 'Thinking',
|
|
desc: 'Strategic & analytical approaches',
|
|
icon: Brain,
|
|
color: '#FFFFFF',
|
|
accentColor: 'var(--color-primary)'
|
|
},
|
|
{
|
|
label: 'Risk Appetite',
|
|
desc: 'Innovation & change tolerance',
|
|
icon: TrendingUp,
|
|
color: '#FFFFFF',
|
|
accentColor: 'var(--color-primary)'
|
|
},
|
|
{
|
|
label: 'Power',
|
|
desc: 'Influence & authority usage',
|
|
icon: Target,
|
|
color: '#FFFFFF',
|
|
accentColor: 'var(--color-primary)'
|
|
},
|
|
{
|
|
label: 'Interpersonal',
|
|
desc: 'Relationship & political navigation',
|
|
icon: Users,
|
|
color: '#FFFFFF',
|
|
accentColor: 'var(--color-primary)'
|
|
}
|
|
].map((item, index) => {
|
|
const Icon = item.icon;
|
|
return (
|
|
<Card
|
|
key={item.label}
|
|
className="border border-gray-200 shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-2 cursor-pointer group overflow-hidden"
|
|
style={{ backgroundColor: item.color }}
|
|
>
|
|
<CardContent className="p-6 relative">
|
|
{/* Subtle background pattern */}
|
|
<div
|
|
className="absolute inset-0 opacity-5 transition-opacity duration-300 group-hover:opacity-10"
|
|
style={{
|
|
backgroundImage: 'radial-gradient(circle at 80% 20%, rgba(4,4,91,0.1) 0%, transparent 50%)'
|
|
}}
|
|
/>
|
|
|
|
<div className="relative z-10">
|
|
<div className="flex items-start gap-4 mb-4">
|
|
<div
|
|
className="w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300 group-hover:scale-110 group-hover:rotate-3"
|
|
style={{
|
|
backgroundColor: item.accentColor,
|
|
boxShadow: '0 4px 12px rgba(4,4,91,0.25)'
|
|
}}
|
|
>
|
|
<Icon
|
|
className="w-6 h-6 text-white"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex-1">
|
|
<h4 className="text-subhead text-black mb-2 font-semibold group-hover:text-primary transition-colors">
|
|
{item.label}
|
|
</h4>
|
|
<p className="text-small text-muted leading-relaxed">
|
|
{item.desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Enhanced progress indicator */}
|
|
<div className="mt-4">
|
|
<div className="h-1.5 bg-gray-100 rounded-full overflow-hidden shadow-inner">
|
|
<div
|
|
className="h-full rounded-full transition-all duration-1000 group-hover:w-full"
|
|
style={{
|
|
width: '60%',
|
|
backgroundColor: item.accentColor,
|
|
boxShadow: '0 0 8px rgba(4,4,91,0.3)'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Floating accent */}
|
|
<div
|
|
className="absolute top-4 right-4 w-2 h-2 rounded-full opacity-60 group-hover:opacity-100 transition-opacity duration-300"
|
|
style={{ backgroundColor: item.accentColor }}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<PrimaryCTAButton
|
|
text="Explore Our Framework"
|
|
onClick={() => navigateTo('/about/our-expertise')}
|
|
/>
|
|
</div>
|
|
|
|
{/* Enhanced Visual Side */}
|
|
<div className="relative">
|
|
<Card
|
|
className="border border-gray-200 shadow-2xl overflow-hidden"
|
|
style={{
|
|
background: '#FFFFFF'
|
|
}}
|
|
>
|
|
<CardContent className="p-10 relative">
|
|
{/* Sophisticated Background Pattern */}
|
|
<div
|
|
className="absolute inset-0 opacity-5"
|
|
style={{
|
|
backgroundImage: `
|
|
radial-gradient(circle at 25% 25%, rgba(4,4,91,0.3) 0%, transparent 40%),
|
|
radial-gradient(circle at 75% 75%, rgba(4,4,91,0.1) 0%, transparent 40%),
|
|
linear-gradient(45deg, rgba(4,4,91,0.05) 0%, transparent 30%, rgba(4,4,91,0.05) 70%, transparent 100%)
|
|
`
|
|
}}
|
|
/>
|
|
|
|
{/* Geometric accent elements */}
|
|
<div className="absolute top-8 right-8 w-16 h-16 border border-blue-300 opacity-30 rounded-lg rotate-12" />
|
|
<div className="absolute bottom-8 left-8 w-12 h-12 bg-blue-300 opacity-15 rounded-full" />
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10">
|
|
{/* Header */}
|
|
<div className="text-center mb-10">
|
|
<div
|
|
className="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6 relative overflow-hidden"
|
|
style={{
|
|
backgroundColor: 'var(--color-primary)',
|
|
border: '1px solid rgba(4, 4, 91, 0.3)'
|
|
}}
|
|
>
|
|
{/* Inner glow */}
|
|
<div className="absolute inset-2 rounded-xl bg-gradient-to-br from-white/20 to-transparent" />
|
|
<BarChart3 className="w-10 h-10 text-white relative z-10" />
|
|
</div>
|
|
<h4 className="text-h4 text-black mb-3 font-semibold">Framework Impact</h4>
|
|
<p className="text-body text-muted">
|
|
Proven results across organizations
|
|
</p>
|
|
</div>
|
|
|
|
{/* Enhanced Infographic Stats */}
|
|
<div className="space-y-8">
|
|
{/* Leadership Effectiveness */}
|
|
<div className="flex items-center gap-6">
|
|
<div className="relative">
|
|
{/* Circular progress ring */}
|
|
<svg className="w-20 h-20 transform -rotate-90" viewBox="0 0 80 80">
|
|
<circle
|
|
cx="40"
|
|
cy="40"
|
|
r="30"
|
|
stroke="rgba(4, 4, 91, 0.2)"
|
|
strokeWidth="4"
|
|
fill="none"
|
|
/>
|
|
<circle
|
|
cx="40"
|
|
cy="40"
|
|
r="30"
|
|
stroke="var(--color-primary)"
|
|
strokeWidth="4"
|
|
fill="none"
|
|
strokeDasharray={`${2 * Math.PI * 30}`}
|
|
strokeDashoffset={`${2 * Math.PI * 30 * (1 - 89 / 100)}`}
|
|
className="transition-all duration-2000 ease-out"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<span className="text-xl font-bold text-blue-600">89%</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-body-lg text-black font-semibold mb-2">Leadership Effectiveness</div>
|
|
<div className="text-small text-muted mb-3">Improvement in 6 months</div>
|
|
{/* Horizontal progress bar */}
|
|
<div className="h-2 bg-gray-200 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full rounded-full transition-all duration-2000 ease-out"
|
|
style={{
|
|
width: '89%',
|
|
background: 'linear-gradient(90deg, var(--color-primary) 0%, rgba(4, 4, 91, 0.8) 100%)'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Self-Awareness Growth */}
|
|
<div className="flex items-center gap-6">
|
|
<div className="relative">
|
|
{/* Circular progress ring */}
|
|
<svg className="w-20 h-20 transform -rotate-90" viewBox="0 0 80 80">
|
|
<circle
|
|
cx="40"
|
|
cy="40"
|
|
r="30"
|
|
stroke="rgba(4, 4, 91, 0.2)"
|
|
strokeWidth="4"
|
|
fill="none"
|
|
/>
|
|
<circle
|
|
cx="40"
|
|
cy="40"
|
|
r="30"
|
|
stroke="var(--color-primary)"
|
|
strokeWidth="4"
|
|
fill="none"
|
|
strokeDasharray={`${2 * Math.PI * 30}`}
|
|
strokeDashoffset={`${2 * Math.PI * 30 * (1 - 92 / 100)}`}
|
|
className="transition-all duration-2000 ease-out"
|
|
strokeLinecap="round"
|
|
style={{ transitionDelay: '0.5s' }}
|
|
/>
|
|
</svg>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<span className="text-xl font-bold text-blue-600">92%</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-body-lg text-black font-semibold mb-2">Self-Awareness Growth</div>
|
|
<div className="text-small text-muted mb-3">Better decision making</div>
|
|
{/* Horizontal progress bar */}
|
|
<div className="h-2 bg-gray-200 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full rounded-full transition-all duration-2000 ease-out"
|
|
style={{
|
|
width: '92%',
|
|
background: 'linear-gradient(90deg, var(--color-primary) 0%, rgba(4, 4, 91, 0.8) 100%)',
|
|
transitionDelay: '0.5s'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Team Performance */}
|
|
<div className="flex items-center gap-6">
|
|
<div className="relative">
|
|
{/* Circular progress ring */}
|
|
<svg className="w-20 h-20 transform -rotate-90" viewBox="0 0 80 80">
|
|
<circle
|
|
cx="40"
|
|
cy="40"
|
|
r="30"
|
|
stroke="rgba(4, 4, 91, 0.2)"
|
|
strokeWidth="4"
|
|
fill="none"
|
|
/>
|
|
<circle
|
|
cx="40"
|
|
cy="40"
|
|
r="30"
|
|
stroke="var(--color-primary)"
|
|
strokeWidth="4"
|
|
fill="none"
|
|
strokeDasharray={`${2 * Math.PI * 30}`}
|
|
strokeDashoffset={`${2 * Math.PI * 30 * (1 - 76 / 100)}`}
|
|
className="transition-all duration-2000 ease-out"
|
|
strokeLinecap="round"
|
|
style={{ transitionDelay: '1s' }}
|
|
/>
|
|
</svg>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<span className="text-xl font-bold text-blue-600">76%</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-body-lg text-black font-semibold mb-2">Team Performance</div>
|
|
<div className="text-small text-muted mb-3">Enhanced collaboration</div>
|
|
{/* Horizontal progress bar */}
|
|
<div className="h-2 bg-gray-200 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full rounded-full transition-all duration-2000 ease-out"
|
|
style={{
|
|
width: '76%',
|
|
background: 'linear-gradient(90deg, var(--color-primary) 0%, rgba(4, 4, 91, 0.8) 100%)',
|
|
transitionDelay: '1s'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom accent with trust indicator */}
|
|
<div className="flex items-center justify-center mt-10 pt-8 border-t border-gray-200">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle className="w-5 h-5 text-blue-500" />
|
|
<span className="text-small text-black font-medium">500+ Organizations</span>
|
|
</div>
|
|
<div className="w-1 h-1 bg-blue-500 rounded-full" />
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle className="w-5 h-5 text-blue-500" />
|
|
<span className="text-small text-black font-medium">Proven Results</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* CTA Section - Vision Banner Style */}
|
|
<section className="relative h-[700px] overflow-hidden">
|
|
{/* Background Image */}
|
|
<div className="absolute inset-0">
|
|
<ImageWithFallback
|
|
src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=2940&h=1200&fit=crop"
|
|
alt="Visionary leadership team planning strategy"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
|
|
{/* Subtle dark overlay for overall image */}
|
|
<div className="absolute inset-0 bg-black/30" />
|
|
|
|
{/* Gradient overlay for better text readability */}
|
|
<div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
|
|
</div>
|
|
|
|
{/* Content Container */}
|
|
<div className="relative h-full flex items-center justify-end section-margin-x">
|
|
{/* CTA Content Block */}
|
|
<div
|
|
className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
|
|
style={{
|
|
backgroundColor: 'var(--color-primary)'
|
|
}}
|
|
>
|
|
{/* Branded Tag */}
|
|
<div className="mb-6">
|
|
<div className="branded-tag-system-white">
|
|
<div className="dot"></div>
|
|
<span className="text">
|
|
Transform Your Vision
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Headline */}
|
|
<h2 className="text-h2-white leading-tight mb-8">
|
|
Ready to Build Your Leadership Vision?
|
|
<span
|
|
className="italic"
|
|
style={{ color: 'var(--color-accent)' }}
|
|
>
|
|
{" "}Start your transformation{" "}
|
|
</span>
|
|
journey today.
|
|
</h2>
|
|
|
|
{/* CTA Button */}
|
|
<PrimaryCTAButton
|
|
text="Explore Our Services"
|
|
onClick={() => navigateTo('/services/leadership-development')}
|
|
ariaLabel="Explore our leadership development services"
|
|
className="cta-banner-yellow"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
);
|
|
}
|