first commit
This commit is contained in:
priyanshuvish
237
src/components/ServicesSection.tsx
Normal file
237
src/components/ServicesSection.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
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 ServicesSection() {
|
||||
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">
|
||||
<div className="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="Leadership Development Programs"
|
||||
/>
|
||||
<h2
|
||||
id="recognition-section-heading"
|
||||
className="text-h2 mb-6"
|
||||
>
|
||||
Services That Shape Stronger Leaders
|
||||
</h2>
|
||||
<p className="text-body-lg text-muted">
|
||||
Our comprehensive leadership development programs are designed to build future-ready leaders who thrive in complexity and drive measurable organizational impact.
|
||||
</p>
|
||||
</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>
|
||||
|
||||
{/* CTA Button - Updated to redirect to leadership journey */}
|
||||
<div className="flex justify-center mt-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<PrimaryCTAButton
|
||||
text="Get Started Today"
|
||||
onClick={() => navigateTo('/leadership-journey')}
|
||||
ariaLabel="Get started with leadership development programs"
|
||||
className="get-started-cta-override"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user