620ddcaa8e
All checks were successful
CodeAnt AI Review - Stage 1 / codeant-review (pull_request) Successful in 1m4s
342 lines
18 KiB
TypeScript
342 lines
18 KiB
TypeScript
import { useState, useEffect, useRef } from "react";
|
|
import { motion } from "motion/react";
|
|
import {
|
|
Users,
|
|
Settings,
|
|
User,
|
|
Globe,
|
|
MessageSquare,
|
|
GraduationCap,
|
|
ArrowRight
|
|
} from "lucide-react";
|
|
import { BrandedTag } from "./about/BrandedTag";
|
|
import { PrimaryCTAButton } from "./PrimaryCTAButton";
|
|
import { navigateTo } from "./Router";
|
|
|
|
// Services data
|
|
const recognitionItems = [
|
|
{
|
|
id: 1,
|
|
title: "Leadership Development",
|
|
description: "Comprehensive programs designed to cultivate strategic thinking and emotional intelligence. Develop capabilities that drive organizational success through authentic leadership practices.",
|
|
icon: <Users size={28} />,
|
|
badge: "CORE PROGRAM",
|
|
badgeColor: "#F8C301"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Management Development",
|
|
description: "Essential skills training for first-time and experienced managers seeking growth. Focus on communication, delegation, and performance management excellence.",
|
|
icon: <Settings size={28} />,
|
|
badge: "POPULAR",
|
|
badgeColor: "#04045B"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Culture Competence",
|
|
description: "Build cultural awareness and inclusive practices that enhance team collaboration. Navigate cultural differences with confidence and create inclusive environments.",
|
|
icon: <Globe size={28} />,
|
|
badge: "GLOBAL FOCUS",
|
|
badgeColor: "#F8C301"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Executive Coaching",
|
|
description: "One-on-one personalized development for senior leaders and high-potential talent. Strategic guidance for complex leadership challenges and career advancement.",
|
|
icon: <User size={28} />,
|
|
badge: "PREMIUM",
|
|
badgeColor: "#04045B"
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "Communication Excellence",
|
|
description: "Master the art of influential communication across all organizational levels. Develop presentation skills, difficult conversation navigation, and stakeholder engagement.",
|
|
icon: <MessageSquare size={28} />,
|
|
badge: "ESSENTIAL",
|
|
badgeColor: "#F8C301"
|
|
},
|
|
{
|
|
id: 6,
|
|
title: "Change Leadership",
|
|
description: "Guide organizations through transformation with confidence and clarity. Learn frameworks for managing resistance, building momentum, and sustaining change initiatives.",
|
|
icon: <GraduationCap size={28} />,
|
|
badge: "STRATEGIC",
|
|
badgeColor: "#04045B"
|
|
}
|
|
];
|
|
|
|
export function ServicesSectionNew() {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
|
|
const sectionRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Add card refs helper
|
|
const addCardRef = (el: HTMLDivElement | null, index: number) => {
|
|
cardRefs.current[index] = el;
|
|
};
|
|
|
|
// Intersection observer for animations
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
setIsVisible(true);
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.2 }
|
|
);
|
|
|
|
if (sectionRef.current) {
|
|
observer.observe(sectionRef.current);
|
|
}
|
|
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
// Keyboard navigation
|
|
const handleKeyDown = (e: React.KeyboardEvent, index: number) => {
|
|
if (e.key === 'ArrowDown' && index < cardRefs.current.length - 1) {
|
|
cardRefs.current[index + 1]?.focus();
|
|
e.preventDefault();
|
|
} else if (e.key === 'ArrowUp' && index > 0) {
|
|
cardRefs.current[index - 1]?.focus();
|
|
e.preventDefault();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section
|
|
ref={sectionRef}
|
|
className="py-16 lg:py-20"
|
|
style={{
|
|
backgroundColor: '#F7F7FD',
|
|
fontFamily: 'var(--font-family-brand)'
|
|
}}
|
|
aria-labelledby="recognition-section-heading"
|
|
>
|
|
<div className="section-margin-x">
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Desktop Layout - Grid with Sticky Sidebar */}
|
|
<div className="hidden lg:grid grid-cols-12 gap-12 min-h-screen">
|
|
{/* Left Side - Sticky Content */}
|
|
<div className="col-span-5 sticky top-24 self-start">
|
|
<div className="recognition-header pr-8">
|
|
<BrandedTag
|
|
text="Our Services"
|
|
/>
|
|
<h2
|
|
id="recognition-section-heading"
|
|
className="text-h2 mb-6"
|
|
>
|
|
Shaping Leaders, Cultures, and Institutions
|
|
</h2>
|
|
<p className="text-body-lg text-muted mb-8">
|
|
No two institutions are alike — and neither are their leadership needs. That's why every KLC service is rooted in research, tailored to context, and aligned with strategy. From shaping leaders and managers to shaping culture, developing talent frameworks, and offering practical high impact learning, we partner with you to create leadership solutions that deliver lasting value.
|
|
</p>
|
|
{/* CTA Button - Left aligned */}
|
|
<div className="primary-cta-container-left cta-left-locked">
|
|
<PrimaryCTAButton
|
|
text="Services Page"
|
|
onClick={() => navigateTo('/services')}
|
|
ariaLabel="Explore our services"
|
|
className="services-cta-override"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Side - Scrolling Cards */}
|
|
<div className="col-span-7">
|
|
<div
|
|
className="recognition-cards space-y-6"
|
|
role="list"
|
|
aria-label="Leadership development services"
|
|
>
|
|
{recognitionItems.map((item, index) => (
|
|
<div
|
|
key={item.id}
|
|
ref={(el) => addCardRef(el, index)}
|
|
className={`recognition-card group scroll-animate-stagger focus-ring ${isVisible ? 'animate-in' : ''}`}
|
|
role="listitem"
|
|
aria-labelledby={`recognition-title-${item.id}`}
|
|
aria-describedby={`recognition-desc-${item.id}`}
|
|
tabIndex={0}
|
|
onKeyDown={(e) => handleKeyDown(e, index)}
|
|
style={{
|
|
transitionDelay: `${(index + 1) * 150}ms`,
|
|
opacity: isVisible ? 1 : 0
|
|
}}
|
|
>
|
|
<div
|
|
className="p-8 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border bg-white"
|
|
style={{
|
|
borderColor: 'var(--color-border)',
|
|
borderRadius: '12px',
|
|
fontFamily: 'var(--font-family-brand)'
|
|
}}
|
|
>
|
|
<div className="flex items-start justify-between mb-6">
|
|
<div
|
|
className="w-14 h-14 flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
|
|
style={{
|
|
backgroundColor: 'var(--color-brand-primary)',
|
|
borderRadius: '12px',
|
|
color: 'white'
|
|
}}
|
|
>
|
|
{item.icon}
|
|
</div>
|
|
{item.badge && (
|
|
<div
|
|
className="px-3 py-1 text-xs font-bold uppercase tracking-wider"
|
|
style={{
|
|
backgroundColor: item.badgeColor,
|
|
color: item.badgeColor === '#F8C301' ? 'var(--color-brand-black)' : 'white',
|
|
borderRadius: '20px',
|
|
fontFamily: 'var(--font-family-brand)'
|
|
}}
|
|
>
|
|
{item.badge}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="recognition-card-content">
|
|
<h3
|
|
id={`recognition-title-${item.id}`}
|
|
className="text-h4 mb-4"
|
|
>
|
|
{item.title}
|
|
</h3>
|
|
<p
|
|
id={`recognition-desc-${item.id}`}
|
|
className="text-small text-muted leading-relaxed"
|
|
>
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Layout - Stacked Header + Horizontal Scrollable Cards */}
|
|
<div className="lg:hidden">
|
|
{/* Mobile Header */}
|
|
<div className="text-center mb-8">
|
|
<BrandedTag
|
|
text="Our Services"
|
|
/>
|
|
<h2
|
|
id="recognition-section-heading-mobile"
|
|
className="text-h2 mb-6"
|
|
>
|
|
Shaping Leaders, Cultures, and Institutions
|
|
</h2>
|
|
<p className="text-body-lg text-muted mb-8">
|
|
No two institutions are alike — and neither are their leadership needs. That's why every KLC service is rooted in research, tailored to context, and aligned with strategy. From shaping leaders and managers to shaping culture, developing talent frameworks, and offering practical high impact learning, we partner with you to create leadership solutions that deliver lasting value.
|
|
</p>
|
|
{/* CTA Button - Left aligned for mobile */}
|
|
<div className="primary-cta-container-left cta-left-locked">
|
|
<PrimaryCTAButton
|
|
text="Services Page"
|
|
onClick={() => navigateTo('/services')}
|
|
ariaLabel="Explore our services"
|
|
className="services-cta-override"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Horizontal Scrollable Cards */}
|
|
<div className="relative">
|
|
<div
|
|
className="flex gap-6 overflow-x-auto scrollbar-hide pb-4"
|
|
style={{
|
|
scrollSnapType: 'x mandatory',
|
|
WebkitOverflowScrolling: 'touch'
|
|
}}
|
|
role="list"
|
|
aria-label="Leadership development services"
|
|
>
|
|
{recognitionItems.map((item, index) => (
|
|
<div
|
|
key={item.id}
|
|
className={`recognition-card-mobile group focus-ring flex-shrink-0 ${isVisible ? 'animate-in' : ''}`}
|
|
role="listitem"
|
|
aria-labelledby={`recognition-title-mobile-${item.id}`}
|
|
aria-describedby={`recognition-desc-mobile-${item.id}`}
|
|
tabIndex={0}
|
|
onKeyDown={(e) => handleKeyDown(e, index)}
|
|
style={{
|
|
scrollSnapAlign: 'start',
|
|
width: '320px',
|
|
transitionDelay: `${(index + 1) * 150}ms`,
|
|
opacity: isVisible ? 1 : 0
|
|
}}
|
|
>
|
|
<div
|
|
className="p-6 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border bg-white h-full"
|
|
style={{
|
|
borderColor: 'var(--color-border)',
|
|
borderRadius: '12px',
|
|
fontFamily: 'var(--font-family-brand)'
|
|
}}
|
|
>
|
|
<div className="flex items-start justify-between mb-6">
|
|
<div
|
|
className="w-12 h-12 flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
|
|
style={{
|
|
backgroundColor: 'var(--color-brand-primary)',
|
|
borderRadius: '12px',
|
|
color: 'white'
|
|
}}
|
|
>
|
|
{item.icon}
|
|
</div>
|
|
{item.badge && (
|
|
<div
|
|
className="px-2 py-1 text-xs font-bold uppercase tracking-wider"
|
|
style={{
|
|
backgroundColor: item.badgeColor,
|
|
color: item.badgeColor === '#F8C301' ? 'var(--color-brand-black)' : 'white',
|
|
borderRadius: '20px',
|
|
fontFamily: 'var(--font-family-brand)'
|
|
}}
|
|
>
|
|
{item.badge}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="recognition-card-content">
|
|
<h3
|
|
id={`recognition-title-mobile-${item.id}`}
|
|
className="text-h4 mb-4"
|
|
>
|
|
{item.title}
|
|
</h3>
|
|
<p
|
|
id={`recognition-desc-mobile-${item.id}`}
|
|
className="text-small text-muted leading-relaxed"
|
|
>
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|