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

other changes like hero sec align left

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

74
src/components/AboutUs.tsx
View File

@@ -17,7 +17,8 @@ import {
Eye,
BookOpen,
Puzzle,
Building
Building,
ArrowLeft
} from 'lucide-react';
import { BrandedTag } from './about/BrandedTag';
import { PrimaryCTAButton } from './PrimaryCTAButton';
@@ -25,6 +26,7 @@ import { CTABannerSection } from './CTABannerSection';
import { TestimonialsSection } from './TestimonialsSection';
import { TeamMemberModal } from './TeamMemberModal';
import { navigateTo } from './Router';
import { Button } from './ui/button';
// Leadership Orientations Data
const leadershipOrientations = [
@@ -276,53 +278,53 @@ export function AboutUs() {
return (
<div style={{ backgroundColor: '#FFFFFF', fontFamily: 'var(--font-family-base)' }}>
{/* Hero Section - Our Vision Page Style */}
<section className="relative min-h-[90vh] flex flex-col">
<section className="relative min-h-[85vh] flex flex-col">
<div className="absolute inset-0 z-0">
<div
<div
className="w-full h-full bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url('https://images.unsplash.com/photo-1552664730-d307ca884978?w=1920&h=1080&fit=crop')`
backgroundImage: `url('https://images.unsplash.com/photo-1552664730-d307ca884978?w=1920&h=1080&fit=crop')`
}}
/>
<div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/70 to-black/60"></div>
<div className="absolute inset-0 bg-gradient-to-r from-black/85 via-black/75 to-black/65"></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">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: isVisible ? 1 : 0, y: isVisible ? 0 : 30 }}
transition={{ duration: 0.8 }}
>
<div className="branded-tag-system-white mb-8 justify-center">
<div className="dot"></div>
<span className="text">About Kautilya Leadership Centre</span>
</div>
<h1 className="text-h1-white about-hero-title mb-6 mx-auto">
Transforming Leadership Through<br />Research and Practice
</h1>
<p className="text-body-lg-white mb-8 max-w-2xl mx-auto">
Founded in 2016 with the vision of being a world class institution in the thought and practice of leadership.
We facilitate institutions to build Leadership capacity and capability while helping individuals unleash their potential.
</p>
<div className="w-full section-margin-x">
<div className="max-w-6xl">
{/* Back Navigation */}
<div className="mb-8">
<Button
variant="ghost"
onClick={() => navigateTo('/services')}
className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
>
<ArrowLeft className="w-4 h-4 mr-2" />
Back to Services
</Button>
</div>
<div className="flex justify-center mb-12">
<PrimaryCTAButton
text="Discover Our Approach"
onClick={() => navigateTo('/contact')}
ariaLabel="Contact us to discover our leadership approach"
className="management-dev-primary-cta"
/>
</div>
</motion.div>
<div className="mb-8">
<h1 className="text-h1-white">
Advancing Leadership Through Insight
</h1>
</div>
<p className="text-body-lg-white mb-8 max-w-3xl">
<strong>Founded in 2016 with the vision of being a world class institution in the thought and practice of leadership. We facilitate institutions to build Leadership capacity and capability while helping individuals unleash their potential.</strong>
</p>
<div className="flex justify-start">
<PrimaryCTAButton
text="Talk to Us"
onClick={() => navigateTo('/contact?topic=management-development')}
ariaLabel="Talk to us about management development"
className="primary-cta-button-blue cta-text-white"
/>
</div>
</div>
</div>
</div>
</section>
{/* Section 1: Our Promise */}

74
src/components/LearningOnline.tsx
View File

@@ -33,7 +33,8 @@ import {
List,
X,
DollarSign,
ShoppingCart
ShoppingCart,
ArrowLeft
} from 'lucide-react';
import { motion } from 'motion/react';
import { navigateTo } from './Router';
@@ -341,40 +342,53 @@ export function LearningOnline() {
return (
<div style={{ backgroundColor: '#FFFFFF' }}>
{/* Hero Banner – Digital Learning - Blog Style */}
<section className="relative py-16 overflow-hidden">
<div
className="absolute inset-0"
style={{
backgroundImage: 'url(https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1200&h=600&fit=crop)',
backgroundSize: 'cover',
backgroundPosition: 'center'
}}
>
<div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/60 to-black/40" />
<section className="relative min-h-[85vh] flex flex-col">
<div className="absolute inset-0 z-0">
<div
className="w-full h-full bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: 'url(https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1200&h=600&fit=crop)',
}}
/>
<div className="absolute inset-0 bg-gradient-to-r from-black/85 via-black/75 to-black/65"></div>
</div>
<div className="relative section-margin-x">
<div className="max-w-4xl mx-auto text-center">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
{/* Eyebrow Text */}
<div className="branded-tag-system-white mb-6 justify-center">
<div className="dot"></div>
<span className="text">DIGITAL LEARNING PLATFORM</span>
<div className="relative z-10 flex-1 flex items-center">
<div className="w-full section-margin-x">
<div className="max-w-6xl">
{/* Back Navigation */}
<div className="mb-8">
<Button
variant="ghost"
onClick={() => navigateTo('/services')}
className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
>
<ArrowLeft className="w-4 h-4 mr-2" />
Back to Services
</Button>
</div>
{/* Main Header */}
<h1 className="text-h1-white mb-8" style={{ lineHeight: 'var(--line-height-h1)' }}>
Discover Your Leadership
Potential Online
</h1>
<div className="mb-8">
<h1 className="text-h1-white">
Grow as a Leader, Anytime
</h1>
</div>
<h2 className='text text-white'>Our Leadership Courses are structured packages which are targeted towards building your leadership abilities. Each course is a wholesome package which not only helps you gain awareness about your leadership style but also gives insights to build your leadership abilities. Every course contains curated content targeted towards a specific leadership ability. Each course consists of our proprietary profiling instruments – Leadership Profilers, conceptual videos and experiences of leaders – Leadership Webcasts, as well as additional content to supplement learning.
</h2>
</motion.div>
<p className="text-body-lg-white mb-8 max-w-3xl">
<strong>
Our Leadership Courses are designed to build your leadership abilities through targeted, structured packages. Each course increases self-awareness of your leadership style and provides practical insights to strengthen your skills. Courses feature curated content focused on specific abilities, including our proprietary Leadership Profilers, conceptual videos, leader webcasts, and supplemental resources.
</strong>
</p>
<div className="flex justify-start">
<PrimaryCTAButton
text="Talk to Us"
onClick={() => navigateTo('/contact?topic=management-development')}
ariaLabel="Talk to us about management development"
className="primary-cta-button-blue cta-text-white"
/>
</div>
</div>
</div>
</div>
</section>

140
src/components/Services.tsx
View File

@@ -1,10 +1,10 @@
import { useState, useEffect } from 'react';
import { motion } from 'motion/react';
import {
Users,
Target,
TrendingUp,
BookOpen,
import {
Users,
Target,
TrendingUp,
BookOpen,
MessageCircle,
CheckCircle,
Download,
@@ -16,12 +16,14 @@ import {
UserCheck,
ClipboardCheck,
Users2,
Briefcase
Briefcase,
ArrowLeft
} from 'lucide-react';
import { BrandedTag } from './about/BrandedTag';
import { PrimaryCTAButton } from './PrimaryCTAButton';
import { CTABannerSection } from './CTABannerSection';
import { navigateTo } from './Router';
import { Button } from './ui/button';
export function Services() {
const [isVisible, setIsVisible] = useState(false);
@@ -110,48 +112,48 @@ export function Services() {
{/* Hero Section */}
<section className="relative min-h-[85vh] flex flex-col">
<div className="absolute inset-0 z-0">
<div
<div
className="w-full h-full bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1920&h=1080&fit=crop')`
}}
/>
<div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/70 to-black/60"></div>
<div className="absolute inset-0 bg-gradient-to-r from-black/85 via-black/75 to-black/65"></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">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: isVisible ? 1 : 0, y: isVisible ? 0 : 30 }}
transition={{ duration: 0.8 }}
>
<div className="branded-tag-system-white mb-8 justify-center">
<div className="dot"></div>
<span className="text">Our Services</span>
</div>
<h1 className="text-h1-white mb-6">
Building Leadership Capacity<br />
That Drives Results
</h1>
<p className="text-body-lg-white mb-8 max-w-3xl mx-auto">
At Kautilya Leadership Centre, we enable institutions and individuals to build leadership capacity,
align culture with strategy, and create enduring value. Our services span leadership development,
consulting, coaching, assessments, and digital learning — each designed with research, context, and practice at the core.
</p>
<div className="w-full section-margin-x">
<div className="max-w-6xl">
{/* Back Navigation */}
<div className="mb-8">
<Button
variant="ghost"
onClick={() => navigateTo('/services')}
className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
>
<ArrowLeft className="w-4 h-4 mr-2" />
Back to Services
</Button>
</div>
{/* <div className="flex justify-center">
<PrimaryCTAButton
text="Explore Our Approach"
onClick={() => navigateTo('/contact')}
ariaLabel="Contact us to explore our services approach"
className="cta-text-white"
/>
</div> */}
</motion.div>
<div className="mb-8">
<h1 className="text-h1-white">
Building Leaders, Driving Impact
</h1>
</div>
<p className="text-body-lg-white mb-8 max-w-3xl">
<strong>At Kautilya Leadership Centre, we enable institutions and individuals to build leadership capacity, align culture with strategy, and create enduring value. Our services span leadership development, consulting, coaching, assessments, and digital learning — each designed with research, context, and practice at the core.</strong>
</p>
<div className="flex justify-start">
<PrimaryCTAButton
text="Talk to Us"
onClick={() => navigateTo('/contact?topic=management-development')}
ariaLabel="Talk to us about management development"
className="primary-cta-button-blue cta-text-white"
/>
</div>
</div>
</div>
</div>
@@ -161,7 +163,7 @@ export function Services() {
<section className="py-20 lg:py-28" style={{ backgroundColor: '#FFFFFF' }}>
<div className="section-margin-x">
<div className="max-w-7xl mx-auto">
{/* Services Grid */}
<div className="space-y-24">
{services.map((service, index) => (
@@ -173,26 +175,24 @@ export function Services() {
viewport={{ once: true }}
className="max-w-7xl mx-auto"
>
<div className={`grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start ${
index % 2 === 1 ? 'lg:direction-reverse' : ''
}`}>
{/* Content Section */}
<div className={`lg:col-span-7 ${
index % 2 === 1 ? 'lg:col-start-6 lg:order-2' : 'lg:col-start-1 lg:order-1'
<div className={`grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start ${index % 2 === 1 ? 'lg:direction-reverse' : ''
}`}>
{/* Content Section */}
<div className={`lg:col-span-7 ${index % 2 === 1 ? 'lg:col-start-6 lg:order-2' : 'lg:col-start-1 lg:order-1'
}`}>
{/* Icon and Title - Side by Side */}
<div className="flex items-start gap-4 mb-6">
<div
<div
className="w-16 h-16 rounded-xl flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'var(--color-primary)' }}
>
<service.icon className="w-8 h-8 text-white" />
</div>
<h2 className="text-h2 leading-tight">{service.title}</h2>
</div>
{/* Description */}
<p className="text-body-lg text-muted mb-8 leading-relaxed">
{service.description}
@@ -209,9 +209,9 @@ export function Services() {
</div>
{/* Download Resource */}
<button
<button
className="w-full p-6 bg-gray-50 rounded-xl border border-gray-100 hover:shadow-lg hover:shadow-primary/10 hover:border-primary/20 transition-all duration-300 cursor-pointer group text-left"
onClick={() => {/* Handle download */}}
onClick={() => {/* Handle download */ }}
>
<div className="flex items-start gap-4">
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0 transition-all duration-300 relative overflow-hidden">
@@ -230,21 +230,19 @@ export function Services() {
</div>
{/* Image Section */}
<div className={`lg:col-span-5 ${
index % 2 === 1 ? 'lg:col-start-1 lg:order-1' : 'lg:col-start-8 lg:order-2'
}`}>
<div className={`lg:col-span-5 ${index % 2 === 1 ? 'lg:col-start-1 lg:order-1' : 'lg:col-start-8 lg:order-2'
}`}>
<div className="relative">
<div
<div
className="w-full aspect-[4/3] rounded-2xl bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url('https://images.unsplash.com/photo-${
index === 0 ? '1522071820-d3ca7b99e0dd' : // leadership team
backgroundImage: `url('https://images.unsplash.com/photo-${index === 0 ? '1522071820-d3ca7b99e0dd' : // leadership team
index === 1 ? '1551836022-d5d88e9218df' : // assessment/analytics
index === 2 ? '1600880292203-757bb62b4baf' : // management meeting
index === 3 ? '1552664730-d307ca884978' : // culture/team
index === 4 ? '1573496359142-b8d87734a5a2' : // coaching
'1582213782179-e0d53f98f2ca' // leadership campus/facility
}?w=800&h=600&fit=crop')`
index === 2 ? '1600880292203-757bb62b4baf' : // management meeting
index === 3 ? '1552664730-d307ca884978' : // culture/team
index === 4 ? '1573496359142-b8d87734a5a2' : // coaching
'1582213782179-e0d53f98f2ca' // leadership campus/facility
}?w=800&h=600&fit=crop')`
}}
>
<div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-transparent rounded-2xl"></div>
@@ -275,13 +273,13 @@ export function Services() {
<div className="dot"></div>
<span className="text">Case Studies</span>
</div>
<h2 className="text-h2 mb-6">
Real Impact, Real Results
</h2>
<p className="text-body-lg text-muted max-w-2xl mx-auto">
Discover how we've helped organizations transform their leadership capabilities
Discover how we've helped organizations transform their leadership capabilities
and drive sustainable business growth.
</p>
</motion.div>
@@ -295,19 +293,19 @@ export function Services() {
transition={{ duration: 0.6, delay: index * 0.1 }}
viewport={{ once: true }}
className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-lg transition-shadow cursor-pointer"
onClick={() => {/* Handle case study view */}}
onClick={() => {/* Handle case study view */ }}
>
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
<Award className="w-6 h-6 text-primary" />
</div>
<h3 className="text-h4 mb-3">{caseStudy.title}</h3>
<p className="text-small text-muted mb-4">
{caseStudy.description}
</p>
<button
<button
className="w-full flex items-center justify-between p-3 bg-gray-50 hover:bg-primary/5 border border-gray-100 hover:border-primary/20 rounded-lg transition-all duration-300 cursor-pointer group"
onClick={(e) => {
e.stopPropagation();

2
src/components/ServicesSection.tsx
View File

@@ -107,7 +107,7 @@ export function ServicesSection() {
ref={sectionRef}
className="py-16 lg:py-20"
style={{
backgroundColor: '#F7F7FD',
backgroundColor: '#fff',
fontFamily: 'var(--font-family-brand)'
}}
aria-labelledby="recognition-section-heading"

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

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

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

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

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

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

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

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

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

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