changes done header update and service link
This commit is contained in:
priyanshuvish
@@ -22,7 +22,6 @@ import { SelfLearnerSignUp } from "./components/SelfLearnerSignUp";
|
||||
import { Consulting } from "./components/services/Consulting";
|
||||
import { CultureCompetence } from "./components/services/CultureCompetence";
|
||||
import { ExecutiveCoaching } from "./components/services/ExecutiveCoaching";
|
||||
import { LeadershipDevelopment } from "./components/services/LeadershipDevelopment";
|
||||
import { LearningFacility } from "./components/services/LearningFacility";
|
||||
import { ManagementDevelopment } from "./components/services/ManagementDevelopment";
|
||||
import { Terms } from "./components/Terms";
|
||||
@@ -38,6 +37,8 @@ import { FooterNew } from './components/FooterNew';
|
||||
import { Privacy } from "./pages/Privacy";
|
||||
import { TermsCondition } from "./pages/TermsCondition";
|
||||
import { FAQ } from "./pages/FAQ";
|
||||
import { LeadershipPipelineDevelopment } from "./components/services/LeadershipPipelineDevelopment";
|
||||
import { LeadershipDevelopment } from "./components/services/LeadershipDevelopment";
|
||||
// import EnrollPlaceholder from "./components/EnrollPlaceholder";
|
||||
// import ForgotPasswordPlaceholder from "./components/ForgotPasswordPlaceholder";
|
||||
// import DashboardPlaceholder from "./components/DashboardPlaceholder";
|
||||
@@ -61,12 +62,13 @@ export default function App() {
|
||||
<Route path="/leadership-journey" element={<LeadershipJourneyPage />} />
|
||||
|
||||
{/* Services Pages */}
|
||||
{/* <Route path="/services/leadership-development" element={<LeadershipDevelopment />} />
|
||||
<Route path="/services/leadership-pipeline-development" element={<LeadershipPipelineDevelopment />} />
|
||||
<Route path="/services/leadership-development" element={<LeadershipDevelopment />} />
|
||||
<Route path="/services/consulting" element={<Consulting />} />
|
||||
<Route path="/services/culture-competence" element={<CultureCompetence />} />
|
||||
<Route path="/services/executive-coaching" element={<ExecutiveCoaching />} />
|
||||
<Route path="/services/management-development" element={<ManagementDevelopment />} />
|
||||
<Route path="/services/learning-facility" element={<LearningFacility />} /> */}
|
||||
<Route path="/services/learning-facility" element={<LearningFacility />} />
|
||||
<Route path="/services" element={<Services />} />
|
||||
|
||||
{/* About Us Pages */}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,76 +2,90 @@ import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { navigateTo } from './Router';
|
||||
import svgPaths from "../imports/svg-i1joeov37f";
|
||||
|
||||
|
||||
interface SlideData {
|
||||
id: number;
|
||||
title: string;
|
||||
backgroundImage: string;
|
||||
shortTitle: string;
|
||||
ctaText: string;
|
||||
route: string;
|
||||
}
|
||||
|
||||
|
||||
export default function HeroSection() {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const [isAutoPlaying, setIsAutoPlaying] = useState(true);
|
||||
const [progressValues, setProgressValues] = useState([0, 0, 0, 0, 0]);
|
||||
|
||||
const [progressValues, setProgressValues] = useState([0, 0, 0, 0, 0, 0]);
|
||||
|
||||
const slides: SlideData[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Build Leaders Who Drive Business Growth",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1705234384669-c6d31c61b789?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxleGVjdXRpdmUlMjBsZWFkZXJzaGlwJTIwZGV2ZWxvcG1lbnQlMjB0cmFpbmluZ3xlbnwxfHx8fDE3NTY4MDcyNjJ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Leadership Development Programs",
|
||||
ctaText: "Explore Leadership Journeys"
|
||||
title: "Know Your Leaders. Strengthen Your Pipeline.",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1697059361419-349e924ed363?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMGxlYWRlcnMlMjBzdHJhdGVneSUyMG1lZXRpbmd8ZW58MXx8fHwxNzU2ODA3Mjc0fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Leadership Pipeline Development",
|
||||
ctaText: "Discover Our Assessment Solutions",
|
||||
route: '/services/leadership-pipeline-development'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Strengthen the Backbone: Your Managers",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1565688527174-775059ac429c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtYW5hZ2VtZW50JTIwdGVhbSUyMGRpc2N1c3Npb24lMjBvZmZpY2V8ZW58MXx8fHwxNzU2ODA2ODg1fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Management Development Programs",
|
||||
ctaText: "Strengthen your Managerial Calibre"
|
||||
title: "Build Leaders Who Drive Business Growth",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1705234384669-c6d31c61b789?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxleGVjdXRpdmUlMjBsZWFkZXJzaGlwJTIwZGV2ZWxvcG1lbnQlMjB0cmFpbmluZ3xlbnwxfHx8fDE3NTY4MDcyNjJ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Leadership Development",
|
||||
ctaText: "Explore Leadership Journeys",
|
||||
route: '/services/leadership-development'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Shape Cultures That Accelerate Performance",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1531535807748-218331acbcb4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb3Jwb3JhdGUlMjBjdWx0dXJlJTIwdGVhbSUyMGNvbGxhYm9yYXRpb258ZW58MXx8fHwxNzU2ODA2ODg5fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Culture & Competence Consulting",
|
||||
ctaText: "Learn how we facilitate Change"
|
||||
title: "Strengthen the Backbone: Your Managers",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1565688527174-775059ac429c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtYW5hZ2VtZW50JTIwdGVhbSUyMGRpc2N1c3Npb24lMjBvZmZpY2V8ZW58MXx8fHwxNzU2ODA2ODg1fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Management Development",
|
||||
ctaText: "Strengthen your Managerial Calibre",
|
||||
route: '/services/management-development'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Unlock Leadership Potential",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1714974528833-a10e19a8f951?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxleGVjdXRpdmUlMjBjb2FjaGluZyUyMG1lbnRvciUyMGNvbnZlcnNhdGlvbnxlbnwxfHx8fDE3NTY4MDY4OTR8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Coaching & Mentoring",
|
||||
ctaText: "Start a Coaching Conversation"
|
||||
title: "Shape Cultures That Accelerate Performance",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1531535807748-218331acbcb4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb3Jwb3JhdGUlMjBjdWx0dXJlJTIwdGVhbSUyMGNvbGxhYm9yYXRpb258ZW58MXx8fHwxNzU2ODA2ODg5fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Culture & Competence Consulting",
|
||||
ctaText: "Learn how we facilitate Change",
|
||||
route: '/services/culture-competence'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Know Your Leaders. Strengthen Your Pipeline.",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1697059361419-349e924ed363?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMGxlYWRlcnMlMjBzdHJhdGVneSUyMG1lZXRpbmd8ZW58MXx8fHwxNzU2ODA3Mjc0fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Assessments & Leadership Pipeline",
|
||||
ctaText: "Discover Our Assessment Solutions"
|
||||
title: "Unlock Leadership Potential",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1714974528833-a10e19a8f951?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxleGVjdXRpdmUlMjBjb2FjaGluZyUyMG1lbnRvciUyMGNvbnZlcnNhdGlvbnxlbnwxfHx8fDE3NTY4MDY4OTR8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Coaching & Mentoring",
|
||||
ctaText: "Start a Coaching Conversation",
|
||||
route: '/services/executive-coaching'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Experience Learning in a World-Class Environment",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb25mZXJlbmNlJTIwY2VudGVyJTIwbGVhcm5pbmclMjBmYWNpbGl0eXxlbnwxfHx8fDE3NTY4MDc0MDB8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Learning Facility",
|
||||
ctaText: "Explore Our Learning Facility",
|
||||
route: '/services/learning-facility'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
const totalSlides = slides.length;
|
||||
const slideDuration = 5000; // 5 seconds per slide
|
||||
|
||||
|
||||
// Auto-advance slides
|
||||
useEffect(() => {
|
||||
if (!isAutoPlaying) return;
|
||||
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev + 1) % totalSlides);
|
||||
}, slideDuration);
|
||||
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isAutoPlaying, totalSlides]);
|
||||
|
||||
|
||||
// Progress bar animation
|
||||
useEffect(() => {
|
||||
if (!isAutoPlaying) return;
|
||||
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setProgressValues(prev => {
|
||||
const newProgress = [...prev];
|
||||
@@ -89,19 +103,19 @@ export default function HeroSection() {
|
||||
return newProgress;
|
||||
});
|
||||
}, 100);
|
||||
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [currentSlide, isAutoPlaying]);
|
||||
|
||||
|
||||
// Reset progress when manually changing slides
|
||||
useEffect(() => {
|
||||
setProgressValues(prev => {
|
||||
const newProgress = [0, 0, 0, 0, 0];
|
||||
const newProgress = [0, 0, 0, 0, 0, 0];
|
||||
newProgress[currentSlide] = 0;
|
||||
return newProgress;
|
||||
});
|
||||
}, [currentSlide]);
|
||||
|
||||
|
||||
const goToSlide = useCallback((slideIndex: number) => {
|
||||
if (slideIndex !== currentSlide) {
|
||||
setCurrentSlide(slideIndex);
|
||||
@@ -110,23 +124,23 @@ export default function HeroSection() {
|
||||
setTimeout(() => setIsAutoPlaying(true), 3000);
|
||||
}
|
||||
}, [currentSlide]);
|
||||
|
||||
|
||||
const nextSlide = useCallback(() => {
|
||||
const next = (currentSlide + 1) % totalSlides;
|
||||
goToSlide(next);
|
||||
}, [currentSlide, totalSlides, goToSlide]);
|
||||
|
||||
|
||||
const prevSlide = useCallback(() => {
|
||||
const prev = (currentSlide - 1 + totalSlides) % totalSlides;
|
||||
goToSlide(prev);
|
||||
}, [currentSlide, totalSlides, goToSlide]);
|
||||
|
||||
|
||||
// Pause auto-play on hover
|
||||
const handleMouseEnter = () => setIsAutoPlaying(false);
|
||||
const handleMouseLeave = () => setIsAutoPlaying(true);
|
||||
|
||||
|
||||
return (
|
||||
<section
|
||||
<section
|
||||
className="hero-section"
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
@@ -143,7 +157,7 @@ export default function HeroSection() {
|
||||
<div className="hero-overlay" />
|
||||
</div>
|
||||
))}
|
||||
|
||||
|
||||
{/* Hero Content */}
|
||||
<div className="hero-content">
|
||||
<div className="hero-text-section">
|
||||
@@ -153,15 +167,15 @@ export default function HeroSection() {
|
||||
</h1>
|
||||
|
||||
{/* Dynamic CTA Button - Enhanced with Proper Navigation */}
|
||||
<button
|
||||
<button
|
||||
className="hero-slide-button group box-border content-stretch flex flex-row gap-2.5 items-center justify-start p-0 relative cursor-pointer overflow-hidden"
|
||||
style={{
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: 'none'
|
||||
}}
|
||||
onClick={() => {
|
||||
console.log('Hero button clicked - navigating to contact page');
|
||||
navigateTo('/contact?topic=leadership-pipeline');
|
||||
navigateTo(slides[currentSlide].route);
|
||||
}}
|
||||
aria-label={slides[currentSlide].ctaText}
|
||||
>
|
||||
@@ -169,7 +183,7 @@ export default function HeroSection() {
|
||||
<div className="relative shrink-0 size-[50px] overflow-hidden">
|
||||
{/* Background Rectangle - Consistent Blue Color */}
|
||||
<div className="absolute inset-0 bg-[#04045B]" />
|
||||
|
||||
|
||||
{/* Icon Layer - Sliding Animation */}
|
||||
<div className="icon-layer absolute inset-0 w-full h-full">
|
||||
{/* Primary Arrow - Slides out diagonally up-right */}
|
||||
@@ -191,7 +205,7 @@ export default function HeroSection() {
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Secondary Arrow - Slides in from bottom-left */}
|
||||
<div className="icon absolute inset-0 flex items-center justify-center opacity-0 -translate-x-6 translate-y-6 transition-all duration-300 ease-in-out group-hover:translate-x-0 group-hover:translate-y-0 group-hover:opacity-100">
|
||||
<svg
|
||||
@@ -215,7 +229,7 @@ export default function HeroSection() {
|
||||
</div>
|
||||
|
||||
{/* Text Section with Vertical Slide Animation */}
|
||||
<div className="text-layer relative shrink-0 overflow-hidden flex items-center" style={{
|
||||
<div className="text-layer relative shrink-0 overflow-hidden flex items-center" style={{
|
||||
height: '28px',
|
||||
fontFamily: 'Inter, sans-serif',
|
||||
fontSize: '20px',
|
||||
@@ -225,8 +239,8 @@ export default function HeroSection() {
|
||||
color: '#ffffff'
|
||||
}}>
|
||||
{/* Primary Text - Slides up and out */}
|
||||
<div
|
||||
className="text-element absolute inset-0 flex items-center justify-start transition-all duration-300 ease-in-out group-hover:-translate-y-full group-hover:opacity-0"
|
||||
<div
|
||||
className="text-element absolute inset-0 flex items-center justify-start transition-all duration-300 ease-in-out group-hover:-translate-y-full group-hover:opacity-0"
|
||||
style={{
|
||||
color: '#ffffff !important',
|
||||
textShadow: '0 1px 2px rgba(0, 0, 0, 0.4)',
|
||||
@@ -238,10 +252,10 @@ export default function HeroSection() {
|
||||
>
|
||||
{slides[currentSlide].ctaText}
|
||||
</div>
|
||||
|
||||
|
||||
{/* Secondary Text - Slides in from bottom */}
|
||||
<div
|
||||
className="text-element absolute inset-0 flex items-center justify-start translate-y-full opacity-0 transition-all duration-300 ease-in-out group-hover:translate-y-0 group-hover:opacity-100"
|
||||
<div
|
||||
className="text-element absolute inset-0 flex items-center justify-start translate-y-full opacity-0 transition-all duration-300 ease-in-out group-hover:translate-y-0 group-hover:opacity-100"
|
||||
style={{
|
||||
color: '#ffffff !important',
|
||||
textShadow: '0 1px 2px rgba(0, 0, 0, 0.4)',
|
||||
@@ -257,22 +271,22 @@ export default function HeroSection() {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Bottom Navigation */}
|
||||
<div className="hero-navigation">
|
||||
{/* Progress Section */}
|
||||
<div className="hero-progress-container">
|
||||
{slides.map((slide, index) => (
|
||||
<div
|
||||
<div
|
||||
key={slide.id}
|
||||
className="hero-progress-item"
|
||||
onClick={() => goToSlide(index)}
|
||||
>
|
||||
{/* Progress Bar */}
|
||||
<div
|
||||
<div
|
||||
className={`hero-progress-segment ${index === currentSlide ? 'active' : ''}`}
|
||||
>
|
||||
<div
|
||||
<div
|
||||
className="hero-progress-fill"
|
||||
style={{ width: index === currentSlide ? `${progressValues[index]}%` : '0%' }}
|
||||
/>
|
||||
@@ -290,7 +304,7 @@ export default function HeroSection() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
{/* Navigation Arrows */}
|
||||
<div className="hero-controls">
|
||||
<button
|
||||
|
||||
@@ -2,6 +2,8 @@ import klcLogo from '../assets/klc-logo-dark.png';
|
||||
import {
|
||||
ArrowRight,
|
||||
BookMarked,
|
||||
Building,
|
||||
Building2,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Eye,
|
||||
@@ -57,66 +59,83 @@ interface NavLink {
|
||||
|
||||
const navigationItems: NavLink[] = [
|
||||
{
|
||||
label: 'Services',
|
||||
// items: [
|
||||
// {
|
||||
// label: 'Leadership Development',
|
||||
// href: '/services/leadership-development',
|
||||
// description: 'Executive and senior leadership programs',
|
||||
// icon: Target
|
||||
// },
|
||||
// {
|
||||
// label: 'Management Development',
|
||||
// href: '/services/management-development',
|
||||
// description: 'Middle management and team leader training',
|
||||
// icon: Users
|
||||
// },
|
||||
// {
|
||||
// label: 'Culture Competence',
|
||||
// href: '/services/culture-competence',
|
||||
// description: 'Building inclusive and high-performance cultures',
|
||||
// icon: Heart
|
||||
// },
|
||||
// {
|
||||
// label: 'Consulting',
|
||||
// href: '/services/consulting',
|
||||
// description: 'Strategic organizational transformation',
|
||||
// icon: Lightbulb
|
||||
// },
|
||||
// {
|
||||
// label: 'Executive Coaching',
|
||||
// href: '/services/executive-coaching',
|
||||
// description: 'Personalized leadership development',
|
||||
// icon: GraduationCap
|
||||
// }
|
||||
// ]
|
||||
|
||||
// label: 'Online Courses',
|
||||
href: '/services'
|
||||
|
||||
label: 'Our Services',
|
||||
items: [
|
||||
{
|
||||
label: 'Our Services',
|
||||
href: '/services',
|
||||
description: 'Complete overview of our leadership development services',
|
||||
icon: Building
|
||||
},
|
||||
{
|
||||
label: 'Leadership Pipeline Development',
|
||||
href: '/services/leadership-pipeline-development',
|
||||
description: 'Build strong leadership pipeline across organizational levels',
|
||||
icon: TrendingUp
|
||||
},
|
||||
{
|
||||
label: 'Leadership Development',
|
||||
href: '/services/leadership-development',
|
||||
description: 'Executive and senior leadership programs',
|
||||
icon: Target
|
||||
},
|
||||
{
|
||||
label: 'Management Development',
|
||||
href: '/services/management-development',
|
||||
description: 'Middle management and team leader training',
|
||||
icon: Users
|
||||
},
|
||||
{
|
||||
label: 'Culture & Competence Consulting',
|
||||
href: '/services/culture-competence',
|
||||
description: 'Building inclusive and high-performance cultures',
|
||||
icon: Heart
|
||||
},
|
||||
{
|
||||
label: 'Coaching & Mentoring',
|
||||
href: '/services/executive-coaching',
|
||||
description: 'Personalized leadership development and mentoring',
|
||||
icon: GraduationCap
|
||||
},
|
||||
{
|
||||
label: 'Kautilya Facility',
|
||||
href: '/services/learning-facility',
|
||||
description: 'Premium learning campus and residential programs',
|
||||
icon: Building2
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// label: 'About Us',
|
||||
// items: [
|
||||
// {
|
||||
// label: 'About Us',
|
||||
// href: '/about',
|
||||
// description: 'Learn about our story, vision, and leadership approach',
|
||||
// icon: Building
|
||||
// },
|
||||
// {
|
||||
// label: 'Our Vision',
|
||||
// href: '/about/our-vision',
|
||||
// description: 'Our mission to transform leadership globally',
|
||||
// icon: Eye
|
||||
// },
|
||||
// {
|
||||
// label: 'Our Impact',
|
||||
// href: '/about/our-impact',
|
||||
// description: 'Real results and measurable outcomes',
|
||||
// icon: TrendingUp
|
||||
// },
|
||||
// {
|
||||
// label: 'Our Expertise',
|
||||
// href: '/about/our-expertise',
|
||||
// description: 'Industry-leading knowledge and experience',
|
||||
// icon: Star
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
label: 'About Us',
|
||||
// items: [
|
||||
// {
|
||||
// label: 'Our Vision',
|
||||
// href: '/about/our-vision',
|
||||
// description: 'Our mission to transform leadership globally',
|
||||
// icon: Eye
|
||||
// },
|
||||
// {
|
||||
// label: 'Our Impact',
|
||||
// href: '/about/our-impact',
|
||||
// description: 'Real results and measurable outcomes',
|
||||
// icon: TrendingUp
|
||||
// },
|
||||
// {
|
||||
// label: 'Our Expertise',
|
||||
// href: '/about/our-expertise',
|
||||
// description: 'Industry-leading knowledge and experience',
|
||||
// icon: Star
|
||||
// }
|
||||
// ]
|
||||
href: '/about-us'
|
||||
},
|
||||
{
|
||||
@@ -173,17 +192,30 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean
|
||||
const location = useLocation();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
if (item.href) {
|
||||
// Helper to check active state
|
||||
const isActive = (href?: string, exact: boolean = false) => {
|
||||
if (!href) return false;
|
||||
if (exact) return location.pathname === href;
|
||||
return location.pathname === href || location.pathname.startsWith(href + '/');
|
||||
};
|
||||
|
||||
const currentPath = location.pathname;
|
||||
const isAnySubItemActive = item.items?.some(subItem => isActive(subItem.href));
|
||||
|
||||
// ---------- Single link ----------
|
||||
if (item.href && !item.items) {
|
||||
const isActiveItem = isActive(item.href);
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => navigate(item.href!)}
|
||||
className={isMobile ? "w-full justify-start min-h-[44px]" : "min-h-[44px]"}
|
||||
className={`min-h-[44px] transition-all duration-300 hover:-translate-y-1 ${isActiveItem ? 'bg-gray-100 text-[#04045b] font-medium' : ''
|
||||
} ${isMobile ? 'w-full justify-start' : ''}`}
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontSize: '13px',
|
||||
fontWeight: 'normal',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: 'var(--color-black)'
|
||||
}}
|
||||
>
|
||||
{item.icon && <item.icon className="w-4 h-4 mr-2" />}
|
||||
@@ -192,61 +224,69 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean
|
||||
);
|
||||
}
|
||||
|
||||
// ---------- Mobile collapsible ----------
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-between min-h-[44px]"
|
||||
className={`w-full justify-between min-h-[44px] ${isAnySubItemActive ? 'bg-gray-100 text-[#04045b] font-medium' : ''
|
||||
}`}
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 'normal',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: 'var(--color-black)'
|
||||
}}
|
||||
>
|
||||
<span className="flex items-center">
|
||||
{item.icon && <item.icon className="w-4 h-4 mr-2" />}
|
||||
{item.label}
|
||||
</span>
|
||||
<ChevronRight className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-90' : ''}`} />
|
||||
<ChevronRight
|
||||
className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-90' : ''}`}
|
||||
/>
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pl-4 space-y-1">
|
||||
{item.items?.map((subItem) => (
|
||||
<Button
|
||||
key={subItem.href}
|
||||
variant="ghost"
|
||||
onClick={() => navigate(subItem.href)}
|
||||
className="w-full justify-start min-h-[44px] pl-6"
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 'normal',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: 'var(--color-black)'
|
||||
}}
|
||||
>
|
||||
{subItem.icon && <subItem.icon className="w-4 h-4 mr-2" />}
|
||||
{subItem.label}
|
||||
</Button>
|
||||
))}
|
||||
{item.items?.map((subItem) => {
|
||||
const isSubItemActive = isActive(subItem.href);
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={subItem.href}
|
||||
variant="ghost"
|
||||
onClick={() => navigate(subItem.href)}
|
||||
className={`w-full justify-start min-h-[44px] pl-6 ${isSubItemActive ? 'bg-gray-100 text-[#04045b] font-medium' : ''
|
||||
}`}
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 'normal',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
}}
|
||||
>
|
||||
{subItem.icon && <subItem.icon className="w-4 h-4 mr-2" />}
|
||||
{subItem.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------- Desktop dropdown ----------
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="flex items-center gap-1 min-h-[44px] transition-all duration-300 hover:transform hover:-translate-y-1"
|
||||
className={`flex items-center gap-1 min-h-[44px] transition-all duration-300 hover:-translate-y-1 ${isAnySubItemActive ? 'bg-gray-100 text-[#04045b] font-medium' : ''
|
||||
}`}
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 'normal',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: 'var(--color-black)'
|
||||
}}
|
||||
>
|
||||
{item.icon && <item.icon className="w-4 h-4 mr-2" />}
|
||||
@@ -254,6 +294,7 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<DropdownMenuContent
|
||||
align="start"
|
||||
className="w-80"
|
||||
@@ -261,63 +302,69 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean
|
||||
backgroundColor: 'var(--color-bg-white)',
|
||||
border: `1px solid var(--color-border)`,
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
}}
|
||||
>
|
||||
{item.items?.map((subItem) => (
|
||||
<DropdownMenuItem
|
||||
key={subItem.href}
|
||||
onClick={() => navigate(subItem.href)}
|
||||
className="flex items-start gap-3 p-4 cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-1"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
{subItem.icon && (
|
||||
<div
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 mt-1"
|
||||
style={{
|
||||
backgroundColor: 'rgba(4, 4, 91, 0.1)',
|
||||
color: 'var(--color-brand-primary)'
|
||||
}}
|
||||
>
|
||||
<subItem.icon className="w-4 h-4" />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<div
|
||||
className="font-medium"
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: '400',
|
||||
color: 'var(--color-black)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
{subItem.label}
|
||||
</div>
|
||||
{subItem.description && (
|
||||
{item.items?.map((subItem) => {
|
||||
const isSubItemActive = isActive(subItem.href);
|
||||
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={subItem.href}
|
||||
onClick={() => navigate(subItem.href)}
|
||||
className={`flex items-start gap-3 p-4 cursor-pointer transition-all duration-300 hover:-translate-y-1 ${isSubItemActive ? 'bg-gray-100 text-[#04045b] font-medium' : ''
|
||||
}`}
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
}}
|
||||
>
|
||||
{subItem.icon && (
|
||||
<div
|
||||
className="mt-1"
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 mt-1"
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
color: 'var(--color-gray-muted)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
lineHeight: 'var(--line-height-small)'
|
||||
backgroundColor: 'rgba(4,4,91,0.1)',
|
||||
color: 'var(--color-brand-primary)',
|
||||
}}
|
||||
>
|
||||
{subItem.description}
|
||||
<subItem.icon className="w-4 h-4" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
<div className="flex-1">
|
||||
<div
|
||||
className="font-medium"
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: isSubItemActive ? '500' : '400',
|
||||
color: isSubItemActive ? '#04045b' : 'var(--color-black)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
}}
|
||||
>
|
||||
{subItem.label}
|
||||
</div>
|
||||
{subItem.description && (
|
||||
<div
|
||||
className="mt-1"
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
color: 'var(--color-gray-muted)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
lineHeight: 'var(--line-height-small)',
|
||||
}}
|
||||
>
|
||||
{subItem.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function ProfileDropdown({ user }: { user: any }) {
|
||||
const { signOut } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import {
|
||||
Users,
|
||||
Target,
|
||||
TrendingUp,
|
||||
BookOpen,
|
||||
MessageCircle,
|
||||
CheckCircle,
|
||||
Download,
|
||||
ArrowRight,
|
||||
Award,
|
||||
Lightbulb,
|
||||
Building2,
|
||||
Brain,
|
||||
UserCheck,
|
||||
ClipboardCheck,
|
||||
Users2,
|
||||
Briefcase
|
||||
import {
|
||||
Users,
|
||||
Target,
|
||||
TrendingUp,
|
||||
BookOpen,
|
||||
MessageCircle,
|
||||
CheckCircle,
|
||||
Download,
|
||||
ArrowRight,
|
||||
Award,
|
||||
Lightbulb,
|
||||
Building2,
|
||||
Brain,
|
||||
UserCheck,
|
||||
ClipboardCheck,
|
||||
Users2,
|
||||
Briefcase
|
||||
} from 'lucide-react';
|
||||
import { BrandedTag } from './about/BrandedTag';
|
||||
import { PrimaryCTAButton } from './PrimaryCTAButton';
|
||||
@@ -24,308 +24,322 @@ import { CTABannerSection } from './CTABannerSection';
|
||||
import { navigateTo } from './Router';
|
||||
|
||||
export function Services() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsVisible(true);
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
setIsVisible(true);
|
||||
}, []);
|
||||
|
||||
const services = [
|
||||
{
|
||||
id: 'leadership-development',
|
||||
icon: Users,
|
||||
title: 'Leadership Development Programs (LDP)',
|
||||
description: 'At KLC, we design and deliver high-impact Leadership Development Programs that prepare leaders for tomorrow\'s business challenges. Our journeys go beyond classroom learning — combining business cases, reflective practice, and orientation-based frameworks to create leaders who not only adapt but also accelerate growth. Each program is customised to your strategy, ensuring leaders drive measurable business impact while building long-term succession readiness.',
|
||||
ctaText: 'Design a Leadership Journey for Your Institution',
|
||||
downloadTitle: 'Case Study: How a BFSI Major Built its Next-Gen Leadership Pipeline',
|
||||
route: '/services/leadership-development'
|
||||
},
|
||||
{
|
||||
id: 'assessments-pipeline',
|
||||
icon: Target,
|
||||
title: 'Assessments & Leadership Pipeline',
|
||||
description: 'Knowing your leaders is the first step to shaping your future. KLC\'s assessment solutions — from 360-degree feedback to Development Centres — provide a clear view of leadership potential and performance. We don\'t just assess; we build actionable pathways for growth. Our pipeline development methods ensure succession is never left to chance, but actively cultivated to secure continuity and competitiveness.',
|
||||
ctaText: 'Assess and Strengthen Your Leadership Bench',
|
||||
downloadTitle: 'Case Study: Leadership Assessment & Succession Planning in a Top NBFC',
|
||||
route: '/contact'
|
||||
},
|
||||
{
|
||||
id: 'management-development',
|
||||
icon: TrendingUp,
|
||||
title: 'Management Development Programs (MDP)',
|
||||
description: 'Managers form the backbone of every organisation. Our Management Development Programs strengthen this backbone by equipping managers with the capabilities to lead teams, handle complexity, and deliver consistent results. Rooted in research and practice, our programs blend coaching, peer learning, and simulation-based workshops to help managers grow into confident leaders.',
|
||||
ctaText: 'Build Managerial Calibre in Your Teams',
|
||||
downloadTitle: 'Case Study: Developing 400 Mid-Level Managers at a Global Manufacturing Firm',
|
||||
route: '/services/management-development'
|
||||
},
|
||||
{
|
||||
id: 'culture-competence',
|
||||
icon: Building2,
|
||||
title: 'Culture & Competence Consulting',
|
||||
description: 'Institutions thrive when culture and competence are aligned to strategy. We partner with organisations to define, assess, and embed the cultural and competence frameworks that accelerate growth. From diagnosing culture to shaping values-in-action, our approach ensures leaders model the right behaviours and teams deliver with synergy.',
|
||||
ctaText: 'Align Your Culture with Business Growth',
|
||||
downloadTitle: 'Case Study: Embedding a Culture of Customer-Centricity in an ITES Giant',
|
||||
route: '/services/culture-competence'
|
||||
},
|
||||
{
|
||||
id: 'coaching-mentoring',
|
||||
icon: MessageCircle,
|
||||
title: 'Coaching & Mentoring',
|
||||
description: 'Every leader needs a trusted space to reflect, reset, and grow. Our coaching and mentoring services create that space, helping leaders navigate transitions, build influence, and manage complex workplace relationships. With ICF-aligned coaching practices and decades of leadership experience, KLC coaches enable leaders to strengthen their impact on both business results and institutional culture.',
|
||||
ctaText: 'Book a Leadership Coaching Conversation',
|
||||
downloadTitle: 'Case Study: Coaching Senior Leaders Through Organisational Transition',
|
||||
route: '/services/executive-coaching'
|
||||
}
|
||||
];
|
||||
const services = [
|
||||
{
|
||||
id: 'leadership-development',
|
||||
icon: Users,
|
||||
title: 'Leadership Development Programs (LDP)',
|
||||
description: 'At KLC, we design and deliver high-impact Leadership Development Programs that prepare leaders for tomorrow\'s business challenges. Our journeys go beyond classroom learning — combining business cases, reflective practice, and orientation-based frameworks to create leaders who not only adapt but also accelerate growth. Each program is customised to your strategy, ensuring leaders drive measurable business impact while building long-term succession readiness.',
|
||||
ctaText: 'Learn More',
|
||||
downloadTitle: 'Case Study: How a BFSI Major Built its Next-Gen Leadership Pipeline',
|
||||
route: '/services/leadership-development'
|
||||
},
|
||||
{
|
||||
id: 'assessments-pipeline',
|
||||
icon: Target,
|
||||
title: 'Assessments & Leadership Pipeline',
|
||||
description: 'Knowing your leaders is the first step to shaping your future. KLC\'s assessment solutions — from 360-degree feedback to Development Centres — provide a clear view of leadership potential and performance. We don\'t just assess; we build actionable pathways for growth. Our pipeline development methods ensure succession is never left to chance, but actively cultivated to secure continuity and competitiveness.',
|
||||
ctaText: 'Learn More',
|
||||
downloadTitle: 'Case Study: Leadership Assessment & Succession Planning in a Top NBFC',
|
||||
route: '/services/leadership-pipeline-development'
|
||||
},
|
||||
{
|
||||
id: 'management-development',
|
||||
icon: TrendingUp,
|
||||
title: 'Management Development Programs (MDP)',
|
||||
description: 'Managers form the backbone of every organisation. Our Management Development Programs strengthen this backbone by equipping managers with the capabilities to lead teams, handle complexity, and deliver consistent results. Rooted in research and practice, our programs blend coaching, peer learning, and simulation-based workshops to help managers grow into confident leaders.',
|
||||
ctaText: 'Learn More',
|
||||
downloadTitle: 'Case Study: Developing 400 Mid-Level Managers at a Global Manufacturing Firm',
|
||||
route: '/services/management-development'
|
||||
},
|
||||
{
|
||||
id: 'culture-competence',
|
||||
icon: Building2,
|
||||
title: 'Culture & Competence Consulting',
|
||||
description: 'Institutions thrive when culture and competence are aligned to strategy. We partner with organisations to define, assess, and embed the cultural and competence frameworks that accelerate growth. From diagnosing culture to shaping values-in-action, our approach ensures leaders model the right behaviours and teams deliver with synergy.',
|
||||
ctaText: 'Learn More',
|
||||
downloadTitle: 'Case Study: Embedding a Culture of Customer-Centricity in an ITES Giant',
|
||||
route: '/services/culture-competence'
|
||||
},
|
||||
{
|
||||
id: 'coaching-mentoring',
|
||||
icon: MessageCircle,
|
||||
title: 'Coaching & Mentoring',
|
||||
description: 'Every leader needs a trusted space to reflect, reset, and grow. Our coaching and mentoring services create that space, helping leaders navigate transitions, build influence, and manage complex workplace relationships. With ICF-aligned coaching practices and decades of leadership experience, KLC coaches enable leaders to strengthen their impact on both business results and institutional culture.',
|
||||
ctaText: 'Learn More',
|
||||
downloadTitle: 'Case Study: Coaching Senior Leaders Through Organisational Transition',
|
||||
route: '/services/executive-coaching'
|
||||
},
|
||||
{
|
||||
id: 'leadership-campus',
|
||||
icon: BookOpen,
|
||||
title: 'Leadership Campus (Facility)',
|
||||
description: 'Experience learning in a world-class environment designed for transformation. Our state-of-the-art Kautilya Leadership Campus provides the perfect setting for immersive leadership development programs. Located in a serene and inspiring environment, our facility combines modern learning spaces with thoughtfully designed areas for reflection, collaboration, and networking. Create lasting memories and meaningful connections while developing leadership capabilities that drive business impact.',
|
||||
ctaText: 'Learn More',
|
||||
downloadTitle: 'Case Study: Transformative Leadership Retreats at Kautilya Campus',
|
||||
route: '/services/learning-facility'
|
||||
}
|
||||
];
|
||||
|
||||
const caseStudies = [
|
||||
{
|
||||
title: 'Case Study on Mid-Sized Bank',
|
||||
description: 'Comprehensive leadership development and culture transformation initiative',
|
||||
format: 'PDF'
|
||||
},
|
||||
{
|
||||
title: 'Case Study on Leading Insurance Company',
|
||||
description: 'Strategic leadership pipeline development and succession planning',
|
||||
format: 'PDF'
|
||||
},
|
||||
{
|
||||
title: 'Case Study on Leading Private Sector Bank',
|
||||
description: 'Management development and organizational capability building',
|
||||
format: 'PDF'
|
||||
}
|
||||
];
|
||||
const caseStudies = [
|
||||
{
|
||||
title: 'Case Study on Mid-Sized Bank',
|
||||
description: 'Comprehensive leadership development and culture transformation initiative',
|
||||
format: 'PDF'
|
||||
},
|
||||
{
|
||||
title: 'Case Study on Leading Insurance Company',
|
||||
description: 'Strategic leadership pipeline development and succession planning',
|
||||
format: 'PDF'
|
||||
},
|
||||
{
|
||||
title: 'Case Study on Leading Private Sector Bank',
|
||||
description: 'Management development and organizational capability building',
|
||||
format: 'PDF'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ backgroundColor: '#FFFFFF', fontFamily: 'var(--font-family-base)' }}>
|
||||
{/* Hero Section */}
|
||||
<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-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>
|
||||
|
||||
<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="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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services Overview Section */}
|
||||
<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) => (
|
||||
<motion.div
|
||||
key={service.id}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
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'
|
||||
}`}>
|
||||
{/* Icon and Title - Side by Side */}
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<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}
|
||||
</p>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="mb-8 primary-cta-container-left cta-left-locked">
|
||||
<PrimaryCTAButton
|
||||
text={service.ctaText}
|
||||
onClick={() => navigateTo('/contact')}
|
||||
ariaLabel={`Contact us about ${service.title}`}
|
||||
className="cta-text-black"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Download Resource */}
|
||||
<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 */ }}
|
||||
>
|
||||
<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">
|
||||
<Download className="w-6 h-6 text-primary group-hover:animate-download-arrows" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-2">
|
||||
Downloadable Resource
|
||||
</h4>
|
||||
<p className="text-small text-muted">
|
||||
{service.downloadTitle}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</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="relative">
|
||||
<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
|
||||
index === 1 ? '1551836022-d5d88e9218df' : // assessment/analytics
|
||||
index === 2 ? '1600880292203-757bb62b4baf' : // management meeting
|
||||
index === 3 ? '1552664730-d307ca884978' : // culture/team
|
||||
'1573496359142-b8d87734a5a2' // coaching
|
||||
}?w=800&h=600&fit=crop')`
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-transparent rounded-2xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Case Studies Section */}
|
||||
<section className="py-20" style={{ backgroundColor: '#F8F9FA' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<div className="branded-tag-system mb-6 justify-center">
|
||||
<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
|
||||
and drive sustainable business growth.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{caseStudies.map((caseStudy, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
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 */ }}
|
||||
>
|
||||
<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
|
||||
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();
|
||||
/* Handle download */
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-primary/10 group-hover:bg-primary/20 rounded-md flex items-center justify-center transition-colors duration-300">
|
||||
<Download className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="text-sm font-medium text-gray-900 group-hover:text-primary transition-colors duration-300">
|
||||
Download {caseStudy.format}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
Case Study Document
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ArrowRight className="w-4 h-4 text-gray-400 group-hover:text-primary transition-colors duration-300" />
|
||||
</button>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* CTA Banner Section */}
|
||||
<CTABannerSection />
|
||||
return (
|
||||
<div style={{ backgroundColor: '#FFFFFF', fontFamily: 'var(--font-family-base)' }}>
|
||||
{/* Hero Section */}
|
||||
<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-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>
|
||||
);
|
||||
|
||||
<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="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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services Overview Section */}
|
||||
<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) => (
|
||||
<motion.div
|
||||
key={service.id}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
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'
|
||||
}`}>
|
||||
{/* Icon and Title - Side by Side */}
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<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}
|
||||
</p>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="mb-8 primary-cta-container-left cta-left-locked">
|
||||
<PrimaryCTAButton
|
||||
text={service.ctaText}
|
||||
onClick={() => navigateTo(service.route)}
|
||||
ariaLabel={`Contact us about ${service.title}`}
|
||||
className="cta-text-black"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Download Resource */}
|
||||
<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 */}}
|
||||
>
|
||||
<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">
|
||||
<Download className="w-6 h-6 text-primary group-hover:animate-download-arrows" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-2">
|
||||
Downloadable Resource
|
||||
</h4>
|
||||
<p className="text-small text-muted">
|
||||
{service.downloadTitle}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</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="relative">
|
||||
<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
|
||||
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')`
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-transparent rounded-2xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Case Studies Section */}
|
||||
<section className="py-20" style={{ backgroundColor: '#F8F9FA' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<div className="branded-tag-system mb-6 justify-center">
|
||||
<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
|
||||
and drive sustainable business growth.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{caseStudies.map((caseStudy, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
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 */}}
|
||||
>
|
||||
<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
|
||||
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();
|
||||
/* Handle download */
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-primary/10 group-hover:bg-primary/20 rounded-md flex items-center justify-center transition-colors duration-300">
|
||||
<Download className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="text-sm font-medium text-gray-900 group-hover:text-primary transition-colors duration-300">
|
||||
Download {caseStudy.format}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
Case Study Document
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ArrowRight className="w-4 h-4 text-gray-400 group-hover:text-primary transition-colors duration-300" />
|
||||
</button>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* CTA Banner Section */}
|
||||
<CTABannerSection />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,67 +1,63 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { motion } from "motion/react";
|
||||
import {
|
||||
Users,
|
||||
Settings,
|
||||
User,
|
||||
Globe,
|
||||
MessageSquare,
|
||||
import {
|
||||
Users,
|
||||
Settings,
|
||||
User,
|
||||
Globe,
|
||||
MessageSquare,
|
||||
GraduationCap,
|
||||
TrendingUp,
|
||||
Building,
|
||||
ArrowRight
|
||||
} from "lucide-react";
|
||||
import { BrandedTag } from "./about/BrandedTag";
|
||||
import { PrimaryCTAButton } from "./PrimaryCTAButton";
|
||||
import { StandardCTAButton } from "./StandardCTAButton";
|
||||
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"
|
||||
title: "Leadership Pipeline Development",
|
||||
description: "Build a strong foundation for sustainable leadership succession. Identify, assess, and develop high-potential talent through structured pathways that ensure organizational continuity and growth.",
|
||||
icon: <TrendingUp size={28} />,
|
||||
route: '/services/leadership-pipeline-development'
|
||||
},
|
||||
{
|
||||
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"
|
||||
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} />,
|
||||
route: '/services/leadership-development'
|
||||
},
|
||||
{
|
||||
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"
|
||||
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} />,
|
||||
route: '/services/management-development'
|
||||
},
|
||||
{
|
||||
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"
|
||||
title: "Culture & Competence Consulting",
|
||||
description: "Transform organizational culture and build inclusive practices that enhance team collaboration. Navigate cultural differences with confidence and create environments where everyone thrives.",
|
||||
icon: <Globe size={28} />,
|
||||
route: '/services/culture-competence'
|
||||
},
|
||||
{
|
||||
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.",
|
||||
title: "Coaching & Mentoring",
|
||||
description: "One-on-one personalized development for senior leaders and high-potential talent. Strategic guidance for complex leadership challenges, career advancement, and personal growth.",
|
||||
icon: <MessageSquare size={28} />,
|
||||
badge: "ESSENTIAL",
|
||||
badgeColor: "#F8C301"
|
||||
route: '/services/executive-coaching'
|
||||
},
|
||||
{
|
||||
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"
|
||||
title: "Leadership Campus (Facility)",
|
||||
description: "Experience learning in a world-class environment designed for transformation. Our state-of-the-art facility provides the perfect setting for immersive leadership development programs.",
|
||||
icon: <Building size={28} />,
|
||||
route: '/services/learning-facility'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -107,10 +103,10 @@ export function ServicesSection() {
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
<section
|
||||
ref={sectionRef}
|
||||
className="py-16 lg:py-20"
|
||||
style={{
|
||||
style={{
|
||||
backgroundColor: '#F7F7FD',
|
||||
fontFamily: 'var(--font-family-brand)'
|
||||
}}
|
||||
@@ -118,27 +114,37 @@ export function ServicesSection() {
|
||||
>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-12 gap-12 min-h-screen">
|
||||
{/* 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="Leadership Development Programs"
|
||||
<BrandedTag
|
||||
text="Our Services"
|
||||
/>
|
||||
<h2
|
||||
id="recognition-section-heading"
|
||||
<h2
|
||||
id="recognition-section-heading"
|
||||
className="text-h2 mb-6"
|
||||
>
|
||||
Shaping Leaders, Cultures, and Institutions
|
||||
</h2>
|
||||
<p className="text-body-lg text-muted">
|
||||
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>
|
||||
<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">
|
||||
<StandardCTAButton
|
||||
text="Services Page"
|
||||
onClick={() => navigateTo('/services')}
|
||||
ariaLabel="Explore our services"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Scrolling Cards */}
|
||||
<div className="col-span-7">
|
||||
<div
|
||||
<div
|
||||
className="recognition-cards space-y-6"
|
||||
role="list"
|
||||
aria-label="Leadership development services"
|
||||
@@ -147,29 +153,30 @@ export function ServicesSection() {
|
||||
<div
|
||||
key={item.id}
|
||||
ref={(el) => addCardRef(el, index)}
|
||||
className={`recognition-card group scroll-animate-stagger focus-ring ${isVisible ? 'animate-in' : ''}`}
|
||||
className={`recognition-card group scroll-animate-stagger cursor-pointer 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={{
|
||||
style={{
|
||||
transitionDelay: `${(index + 1) * 150}ms`,
|
||||
opacity: isVisible ? 1 : 0
|
||||
}}
|
||||
onClick={() => navigateTo(item.route)}
|
||||
>
|
||||
<div
|
||||
<div
|
||||
className="p-8 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border bg-white"
|
||||
style={{
|
||||
style={{
|
||||
borderColor: 'var(--color-border)',
|
||||
borderRadius: '12px',
|
||||
fontFamily: 'var(--font-family-brand)'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div
|
||||
<div className="flex items-start mb-6">
|
||||
<div
|
||||
className="w-14 h-14 flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
|
||||
style={{
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-primary)',
|
||||
borderRadius: '12px',
|
||||
color: 'white'
|
||||
@@ -177,29 +184,16 @@ export function ServicesSection() {
|
||||
>
|
||||
{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
|
||||
<h3
|
||||
id={`recognition-title-${item.id}`}
|
||||
className="text-h4 mb-4"
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
<p
|
||||
<p
|
||||
id={`recognition-desc-${item.id}`}
|
||||
className="text-small text-muted leading-relaxed"
|
||||
>
|
||||
@@ -213,22 +207,102 @@ export function ServicesSection() {
|
||||
</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"
|
||||
{/* Mobile Layout - Stacked Header + Horizontal Scrollable Cards */}
|
||||
<div className="lg:hidden">
|
||||
{/* Mobile Header */}
|
||||
<div className="text-center mb-8">
|
||||
<BrandedTag
|
||||
text="Our Services"
|
||||
/>
|
||||
</motion.div>
|
||||
<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">
|
||||
<StandardCTAButton
|
||||
text="Services Page"
|
||||
onClick={() => navigateTo('/services')}
|
||||
ariaLabel="Explore our services"
|
||||
/>
|
||||
</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 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>
|
||||
</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>
|
||||
|
||||
@@ -24,7 +24,7 @@ function StatItem({ end, suffix, label, duration = 2000 }: StatItemProps) {
|
||||
/>
|
||||
|
||||
{/* Large number */}
|
||||
<div
|
||||
<span
|
||||
ref={ref}
|
||||
className="stats-number mb-3 leading-none"
|
||||
style={{
|
||||
@@ -33,7 +33,7 @@ function StatItem({ end, suffix, label, duration = 2000 }: StatItemProps) {
|
||||
}}
|
||||
>
|
||||
{count}
|
||||
</div>
|
||||
</span>
|
||||
|
||||
{/* Yellow square and label */}
|
||||
<div className="flex items-center mb-4">
|
||||
@@ -90,21 +90,21 @@ export function StatsSection() {
|
||||
<div className="hidden lg:block lg:col-start-9 lg:col-end-13">
|
||||
<div className="space-y-6">
|
||||
<StatItem
|
||||
end={27187}
|
||||
end={27000}
|
||||
suffix="+"
|
||||
label="LEADERS DEVELOPED"
|
||||
duration={2500}
|
||||
/>
|
||||
<StatItem
|
||||
end={15510}
|
||||
end={150}
|
||||
suffix="+"
|
||||
label="CORPORATE CLIENTS"
|
||||
label="CORPORATES"
|
||||
duration={2000}
|
||||
/>
|
||||
<StatItem
|
||||
end={1240}
|
||||
end={5000}
|
||||
suffix="+"
|
||||
label="COUNTRIES SERVED"
|
||||
label="ROOM NIGHTS UTILISED"
|
||||
duration={1800}
|
||||
/>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
917
src/components/services/LeadershipPipelineDevelopment.tsx
Normal file
917
src/components/services/LeadershipPipelineDevelopment.tsx
Normal file
@@ -0,0 +1,917 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
ArrowRight,
|
||||
CheckCircle,
|
||||
Settings,
|
||||
Calendar,
|
||||
Download,
|
||||
Network,
|
||||
Users,
|
||||
Target,
|
||||
Brain,
|
||||
Eye,
|
||||
TrendingUp,
|
||||
BarChart3,
|
||||
Award,
|
||||
Lightbulb,
|
||||
Shield,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
ArrowLeft,
|
||||
Star,
|
||||
Zap,
|
||||
Globe,
|
||||
Crown,
|
||||
Compass,
|
||||
Users2,
|
||||
Building,
|
||||
Layers,
|
||||
UserCheck,
|
||||
Clock,
|
||||
MessageCircle,
|
||||
Heart
|
||||
} from 'lucide-react';
|
||||
import { Button } from '../ui/button';
|
||||
import { navigateTo } from '../Router';
|
||||
import { PrimaryCTAButton } from '../PrimaryCTAButton';
|
||||
import { BrandedTag } from '../about/BrandedTag';
|
||||
import { Card, CardContent } from '../ui/card';
|
||||
import { ImageWithFallback } from '../figma/ImageWithFallback';
|
||||
import { StandardCTAButton } from '../StandardCTAButton';
|
||||
|
||||
const targetAudience = [
|
||||
{
|
||||
title: "CHROs & Talent Leaders",
|
||||
description: "Senior HR executives responsible for leadership development and succession planning across the organization",
|
||||
icon: Users,
|
||||
challenges: ["Succession gaps", "Leadership bench strength", "Talent pipeline visibility", "Development ROI measurement"]
|
||||
},
|
||||
{
|
||||
title: "Business Leaders & CEOs",
|
||||
description: "Senior executives who need to ensure leadership continuity and build organizational capability",
|
||||
icon: Crown,
|
||||
challenges: ["Leadership continuity risk", "External hiring dependency", "Leadership quality consistency", "Succession readiness"]
|
||||
},
|
||||
{
|
||||
title: "Learning & Development Teams",
|
||||
description: "L&D professionals tasked with building comprehensive leadership development ecosystems",
|
||||
icon: Building,
|
||||
challenges: ["Program effectiveness", "Multi-level coordination", "Resource optimization", "Impact demonstration"]
|
||||
}
|
||||
];
|
||||
|
||||
const useCases = [
|
||||
{
|
||||
title: "Succession Gap Crisis",
|
||||
description: "When critical leadership positions lack ready successors or pipeline depth",
|
||||
icon: Target,
|
||||
scenario: "More than 40% of key positions have no identified successors"
|
||||
},
|
||||
{
|
||||
title: "External Hiring Dependency",
|
||||
description: "When organizations rely heavily on external recruitment for leadership roles",
|
||||
icon: Building,
|
||||
scenario: "75%+ of leadership roles filled externally in the past 2 years"
|
||||
},
|
||||
{
|
||||
title: "Leadership Quality Inconsistency",
|
||||
description: "When leadership effectiveness varies significantly across levels and functions",
|
||||
icon: BarChart3,
|
||||
scenario: "Leadership effectiveness scores below 70% or high variation"
|
||||
},
|
||||
{
|
||||
title: "Talent Retention Issues",
|
||||
description: "When high-potential employees leave due to lack of development opportunities",
|
||||
icon: Users2,
|
||||
scenario: "High-potential talent turnover above 15% annually"
|
||||
}
|
||||
];
|
||||
|
||||
const programTimeline = [
|
||||
{
|
||||
phase: "Phase 1: Assessment & Pipeline Mapping",
|
||||
duration: "Months 1-3",
|
||||
activities: ["Leadership assessment across levels", "Succession gap analysis", "High-potential identification", "Pipeline architecture design"],
|
||||
deliverables: ["Leadership capability assessment", "Succession readiness report", "Pipeline development strategy", "Individual development plans"]
|
||||
},
|
||||
{
|
||||
phase: "Phase 2: Multi-Level Development",
|
||||
duration: "Months 4-12",
|
||||
activities: ["Tier-specific development programs", "Cross-functional assignments", "Mentoring relationships", "Leadership simulations"],
|
||||
deliverables: ["Enhanced leadership capabilities", "Succession readiness improvement", "Leadership network expansion", "Real-world application projects"]
|
||||
},
|
||||
{
|
||||
phase: "Phase 3: Integration & Sustainability",
|
||||
duration: "Months 13-18",
|
||||
activities: ["Succession planning integration", "Leadership transitions", "Performance measurement", "Continuous pipeline refresh"],
|
||||
deliverables: ["Sustainable pipeline system", "Succession-ready candidates", "Leadership transition success", "Pipeline metrics dashboard"]
|
||||
}
|
||||
];
|
||||
|
||||
const expectedOutcomes = [
|
||||
{
|
||||
metric: "85%",
|
||||
description: "Of participants promoted within 18 months of program completion",
|
||||
icon: TrendingUp,
|
||||
category: "Career Advancement"
|
||||
},
|
||||
{
|
||||
metric: "75%",
|
||||
description: "Reduction in external leadership hiring dependency",
|
||||
icon: Building,
|
||||
category: "Internal Succession"
|
||||
},
|
||||
{
|
||||
metric: "92%",
|
||||
description: "Improvement in leadership readiness scores across pipeline",
|
||||
icon: Target,
|
||||
category: "Leadership Quality"
|
||||
},
|
||||
{
|
||||
metric: "3.2x",
|
||||
description: "Faster time-to-productivity for internally developed leaders",
|
||||
icon: Zap,
|
||||
category: "Performance Impact"
|
||||
}
|
||||
];
|
||||
|
||||
// Pipeline Development Testimonials Data
|
||||
const pipelineTestimonials = [
|
||||
{
|
||||
id: 1,
|
||||
quote: "Our Leadership Pipeline Development program transformed our succession planning. Within 18 months, we went from having successors for only 30% of key positions to 85% succession readiness. Most importantly, we reduced external leadership hiring by 75%.",
|
||||
name: "Sarah Williams",
|
||||
title: "VP Human Resources",
|
||||
company: "Global Manufacturing Company",
|
||||
image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=600&h=800&fit=crop&crop=face",
|
||||
hasVideo: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
quote: "The systematic approach to pipeline development gave us complete visibility into our leadership depth. We now have ready successors for 92% of critical positions and our internal promotion rate increased by 60%. The ROI has been exceptional.",
|
||||
name: "Michael Chen",
|
||||
title: "Chief Operating Officer",
|
||||
company: "TechForward Solutions",
|
||||
image: "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=600&h=800&fit=crop&crop=face",
|
||||
hasVideo: true
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
quote: "KLC's pipeline framework revolutionized how we identify and develop future leaders. The comprehensive assessment and development pathways have built unprecedented leadership depth across all business units.",
|
||||
name: "Jennifer Rodriguez",
|
||||
title: "Chief People Officer",
|
||||
company: "Innovation Dynamics Inc",
|
||||
image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&h=800&fit=crop&crop=face",
|
||||
hasVideo: false
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
quote: "The pipeline development process helped us reduce critical role vacancy time by 70% and improved leadership quality scores across all levels. Our board confidence in succession planning has never been higher.",
|
||||
name: "David Park",
|
||||
title: "Senior Vice President",
|
||||
company: "Financial Services Corp",
|
||||
image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=800&fit=crop&crop=face",
|
||||
hasVideo: true
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
quote: "Working with KLC transformed our entire approach to leadership development. We now have a robust pipeline that consistently produces high-quality leaders who drive business results and cultural transformation.",
|
||||
name: "Lisa Thompson",
|
||||
title: "Executive Director",
|
||||
company: "Healthcare Solutions Group",
|
||||
image: "https://images.unsplash.com/photo-1494790108755-2616b612b647?w=600&h=800&fit=crop&crop=face",
|
||||
hasVideo: false
|
||||
}
|
||||
];
|
||||
|
||||
export function LeadershipPipelineDevelopment() {
|
||||
const [currentTestimonial, setCurrentTestimonial] = useState(1);
|
||||
const currentTestimonialData = pipelineTestimonials.find(t => t.id === currentTestimonial) || pipelineTestimonials[0];
|
||||
const [expandedUseCase, setExpandedUseCase] = useState<number | null>(null);
|
||||
const [expandedPhase, setExpandedPhase] = useState<number | null>(0);
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{ backgroundColor: '#FFFFFF', fontFamily: 'var(--font-family-base)' }}>
|
||||
{/* Hero Section */}
|
||||
<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-1600880292203-757bb62b4baf?w=1920&h=1080&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 z-10 flex-1 flex items-center">
|
||||
<div className="w-full section-margin-x">
|
||||
<div className="max-w-4xl">
|
||||
{/* 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="mb-8">
|
||||
<h1 className="text-h1-white">
|
||||
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
|
||||
text="Book a Consultation"
|
||||
onClick={() => navigateTo('/contact?topic=leadership-pipeline')}
|
||||
ariaLabel="Book a consultation for leadership pipeline development"
|
||||
className="primary-cta-button-blue cta-text-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 1. What Is This Service */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="w-full section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<BrandedTag text="What Is This Service?" />
|
||||
<h2 className="text-h2 mb-8 text-[#26231A]">Comprehensive Leadership Pipeline System</h2>
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<p className="text-body-lg text-[#6F6F6F] leading-relaxed">
|
||||
Leadership Pipeline Development is a systematic approach to building sustainable leadership capability across all organizational levels. Our methodology identifies, develops, and transitions high-potential talent through structured programs that create ready-now successors for critical roles.
|
||||
</p>
|
||||
<div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
|
||||
<p className="text-body-lg text-[#26231A] leading-relaxed">
|
||||
<span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> Most organizations face succession gaps where 40%+ of key positions lack identified successors, leading to costly external hiring, leadership disruption, and competitive disadvantage.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<TrendingUp className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
Multi-Level Pipeline
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Systematic leadership development across all organizational tiers with clear progression pathways
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<Target className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
Succession Readiness
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Creates identified, development-ready successors for all critical leadership positions
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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' }}
|
||||
>
|
||||
<Building className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
|
||||
75% Hiring Reduction
|
||||
</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Significantly reduces dependency on external leadership hiring through internal capability building
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. Who Is It For */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<BrandedTag text="Who Is It For?" />
|
||||
<h2 className="text-h2 mb-8">Target Audience</h2>
|
||||
<p className="text-body-lg text-muted max-w-3xl mx-auto">
|
||||
Designed for organizations and leaders responsible for building sustainable leadership capability and succession readiness.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{targetAudience.map((audience, index) => (
|
||||
<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
|
||||
className="w-16 h-16 rounded-2xl flex items-center justify-center"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
>
|
||||
<audience.icon className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-h4 mb-4">{audience.title}</h3>
|
||||
<p className="text-body text-muted mb-6">{audience.description}</p>
|
||||
<div>
|
||||
<h4 className="text-small font-semibold text-primary mb-3">Common Challenges:</h4>
|
||||
<ul className="space-y-2">
|
||||
{audience.challenges.map((challenge, challengeIndex) => (
|
||||
<li key={challengeIndex} className="text-small text-muted flex items-start gap-2">
|
||||
<div className="w-1 h-1 bg-primary rounded-full mt-2 flex-shrink-0"></div>
|
||||
{challenge}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. When to Use It */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<BrandedTag text="When to Use It?" />
|
||||
<h2 className="text-h2 mb-8">When Organizations Need Pipeline Development</h2>
|
||||
<p className="text-body-lg text-muted max-w-2xl mx-auto">
|
||||
Ideal for organizations facing leadership gaps and succession challenges.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{useCases.map((useCase, index) => (
|
||||
<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
|
||||
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<useCase.icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-h4 mb-2 text-[#26231A]">
|
||||
{useCase.title}
|
||||
</h3>
|
||||
<p className="text-body text-muted">
|
||||
{useCase.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Trigger Indicator */}
|
||||
<div className="flex items-center gap-2 text-small text-[#04045B] bg-[#04045B]/5 px-3 py-2 rounded-lg">
|
||||
<div className="w-2 h-2 rounded-full bg-[#F8C301]" />
|
||||
<span className="font-medium">
|
||||
{useCase.scenario}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 4. Our Approach */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="w-full section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<BrandedTag text="Our Approach" />
|
||||
<h2 className="text-h2 mb-8 text-[#26231A]">Systematic Pipeline Development Framework</h2>
|
||||
<p className="text-body-lg text-[#6F6F6F] max-w-3xl mx-auto">
|
||||
Our proven methodology combines assessment, development planning, structured learning, and succession integration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
|
||||
{/* Left Column - Core Frameworks */}
|
||||
<div>
|
||||
<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
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<Eye className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Talent Assessment & Identification</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Systematic identification of high-potential talent using validated assessment tools
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<Target className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Multi-Level Development Programs</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Tier-specific programs for emerging leaders, managers, and executives
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<Users className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Mentoring & Coaching Integration</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Comprehensive support through mentoring relationships and executive coaching
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: '#04045B' }}
|
||||
>
|
||||
<Building className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-[#26231A]">Succession Planning Integration</h4>
|
||||
<p className="text-body text-[#6F6F6F] leading-relaxed">
|
||||
Direct integration with organizational succession planning and talent management
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Delivery Modes */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-8">
|
||||
<h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Support</h4>
|
||||
<div className="space-y-6">
|
||||
<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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Assessment Centers</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Comprehensive leadership potential evaluation and 360-degree feedback
|
||||
</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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Development Cohorts</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Structured learning programs with peer networks and group projects
|
||||
</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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Stretch Assignments</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Real-world leadership opportunities and cross-functional projects
|
||||
</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">
|
||||
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Succession Reviews</h5>
|
||||
<p className="text-small text-[#6F6F6F] leading-relaxed">
|
||||
Regular talent reviews and succession readiness assessments
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 5. Sample Program Format */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<BrandedTag text="Sample Program Format" />
|
||||
<h2 className="text-h2 mb-8">18-Month Pipeline Development Journey</h2>
|
||||
<p className="text-body-lg text-muted max-w-3xl mx-auto">
|
||||
A comprehensive 3-phase program designed to build sustainable leadership pipelines across organizational levels.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
{programTimeline.map((phase, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className="border border-gray-200 hover:border-primary/20 transition-all duration-300 hover:shadow-lg"
|
||||
>
|
||||
<CardContent className="p-0">
|
||||
<div
|
||||
className="flex items-center justify-between p-6 cursor-pointer"
|
||||
onClick={() => setExpandedPhase(expandedPhase === index ? null : index)}
|
||||
>
|
||||
<div className="flex items-start gap-4 flex-1">
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
>
|
||||
<span className="text-white font-semibold">{index + 1}</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-h4 mb-2">{phase.phase}</h3>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Clock className="w-4 h-4 text-muted" />
|
||||
<span className="text-small text-muted">{phase.duration}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
{expandedPhase === index ? (
|
||||
<ChevronUp className="w-5 h-5 text-muted" />
|
||||
) : (
|
||||
<ChevronDown className="w-5 h-5 text-muted" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{expandedPhase === index && (
|
||||
<div className="px-6 pb-6 border-t border-gray-100">
|
||||
<div className="pt-6 grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h4 className="text-h4 mb-4">Key Activities</h4>
|
||||
<ul className="space-y-3">
|
||||
{phase.activities.map((activity, activityIndex) => (
|
||||
<li key={activityIndex} className="flex items-start gap-3">
|
||||
<CheckCircle className="w-4 h-4 text-primary flex-shrink-0 mt-1" />
|
||||
<span className="text-body text-muted">{activity}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-h4 mb-4">Deliverables & Outcomes</h4>
|
||||
<ul className="space-y-3">
|
||||
{phase.deliverables.map((deliverable, deliverableIndex) => (
|
||||
<li key={deliverableIndex} className="flex items-start gap-3">
|
||||
<Star className="w-4 h-4 text-accent flex-shrink-0 mt-1" />
|
||||
<span className="text-body text-muted">{deliverable}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 6. Impact You Can Expect */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<BrandedTag text="Impact You Can Expect" />
|
||||
<h2 className="text-h2 mb-8">Measurable Pipeline Outcomes</h2>
|
||||
<p className="text-body-lg text-muted max-w-3xl mx-auto">
|
||||
Organizations typically see significant improvements in succession readiness, internal promotion rates, and leadership quality.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Outcomes Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{expectedOutcomes.map((outcome, index) => (
|
||||
<Card key={index} className="text-center bg-white hover:shadow-lg transition-all duration-300">
|
||||
<CardContent className="p-8">
|
||||
<div
|
||||
className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
>
|
||||
<outcome.icon className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div className="text-5xl font-medium mb-4" style={{ color: 'var(--color-primary)' }}>
|
||||
{outcome.metric}
|
||||
</div>
|
||||
<p className="text-body text-muted mb-2">{outcome.description}</p>
|
||||
<p className="text-small text-primary font-medium">{outcome.category}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-16 bg-white p-8 rounded-2xl shadow-lg">
|
||||
<h3 className="text-h3 mb-6 text-center">Additional Pipeline Benefits</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="text-center">
|
||||
<Crown className="w-8 h-8 text-primary mx-auto mb-3" />
|
||||
<h4 className="text-h4 mb-2">Leadership Quality</h4>
|
||||
<p className="text-small text-muted">Consistent leadership excellence across all organizational levels</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<Users2 className="w-8 h-8 text-primary mx-auto mb-3" />
|
||||
<h4 className="text-h4 mb-2">Talent Retention</h4>
|
||||
<p className="text-small text-muted">Higher retention of high-potential employees through development</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<Compass className="w-8 h-8 text-primary mx-auto mb-3" />
|
||||
<h4 className="text-h4 mb-2">Strategic Alignment</h4>
|
||||
<p className="text-small text-muted">Leadership development aligned with business strategy and goals</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
{/* 8. CTA Section - Hero Section Design */}
|
||||
<section className="relative h-[700px] overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div className="absolute inset-0">
|
||||
<ImageWithFallback
|
||||
src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=2940&h=1960&fit=crop"
|
||||
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>
|
||||
|
||||
{/* Content Container */}
|
||||
<div className="relative h-full flex items-center justify-end section-margin-x">
|
||||
{/* CTA Content Block */}
|
||||
<div
|
||||
className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
|
||||
style={{ backgroundColor: 'var(--color-brand-primary)' }}
|
||||
>
|
||||
{/* Branded Tag */}
|
||||
<BrandedTag text="Next Steps" variant="white" />
|
||||
|
||||
{/* Main Headline */}
|
||||
<h2 className="text-h2-white mb-8">
|
||||
Ready to build your leadership pipeline?
|
||||
<span
|
||||
className="italic"
|
||||
style={{ color: 'var(--color-brand-accent)' }}
|
||||
>
|
||||
{" "}Get in touch{" "}
|
||||
</span>
|
||||
to eliminate succession gaps now.
|
||||
</h2>
|
||||
|
||||
{/* CTA Button */}
|
||||
<StandardCTAButton
|
||||
text="Schedule a Pipeline Consultation"
|
||||
onClick={() => navigateTo('/contact?topic=leadership-pipeline')}
|
||||
ariaLabel="Schedule a leadership pipeline consultation"
|
||||
/>
|
||||
|
||||
{/* Supporting Text */}
|
||||
<p className="text-body-white mt-6 opacity-90">
|
||||
Connect with our pipeline development experts to discuss building sustainable leadership capability across your organization.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user