diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..6b892d6
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,32 @@
+# Node modules
+node_modules/
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Environment files
+.env
+.env.local
+.env.*.local
+
+# Build output
+dist/
+build/
+.next/
+out/
+
+# IDE files
+.vscode/
+.idea/
+*.swp
+
+# Mac / Linux / Windows system files
+.DS_Store
+Thumbs.db
+
+# Temporary
+*.tmp
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..308126e
--- /dev/null
+++ b/README.md
@@ -0,0 +1,11 @@
+
+ # KLC Public website
+
+ This is a code bundle for KLC Public website. The original project is available at https://www.figma.com/design/HKsCupXQAAtHdsmq0gcuEE/KLC-Public-website.
+
+ ## Running the code
+
+ Run `npm i` to install the dependencies.
+
+ Run `npm run dev` to start the development server.
+
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0196ba8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+ Ask me about programs, facilities, or upcoming events
+
+
+
+ )}
+
+ )}
+ >
+ );
+}
\ No newline at end of file
diff --git a/src/components/AboutSection.tsx b/src/components/AboutSection.tsx
new file mode 100644
index 0000000..e508906
--- /dev/null
+++ b/src/components/AboutSection.tsx
@@ -0,0 +1,244 @@
+export function AboutSection() {
+ return (
+
+
+ {/* Section Header with Branded Tag */}
+
+
+
+
+ WHO WE ARE
+
+
+
+ About KLC
+
+
+ Transforming businesses through strategic expertise, innovative solutions, and lasting partnerships that drive sustainable growth.
+
+
+
+ {/* Three Column Layout */}
+
+ {/* Our Vision */}
+
+
+
+
+
+ Our Vision
+
+
+ To be the leading catalyst for business transformation, empowering organizations to unlock their full potential through innovative strategies and cutting-edge solutions.
+
+
+ We envision a future where every business can thrive in an ever-evolving marketplace through strategic foresight and adaptive excellence.
+
+
+
+ {/* Our Impact */}
+
+
+
+
+
+ Our Impact
+
+
+ Over two decades of delivering measurable results for Fortune 500 companies and emerging businesses alike, driving over $2.5 billion in combined client value creation.
+
+
+ Our strategic interventions have transformed operational efficiency by an average of 40% and accelerated growth trajectories across diverse industries.
+
+
+
+ {/* Our Expertise */}
+
+
+
+
+
+ Our Expertise
+
+
+ Deep domain knowledge spanning strategic consulting, digital transformation, operational excellence, and change management across multiple industry verticals.
+
+
+ Our multidisciplinary team combines analytical rigor with creative problem-solving to deliver solutions that are both innovative and pragmatic.
+
+
+
+
+ {/* CTA Section */}
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/AboutUs.tsx b/src/components/AboutUs.tsx
new file mode 100644
index 0000000..682af19
--- /dev/null
+++ b/src/components/AboutUs.tsx
@@ -0,0 +1,996 @@
+import {
+ BookOpen,
+ Brain,
+ CheckCircle,
+ Heart,
+ Puzzle,
+ Shield,
+ Target,
+ TrendingUp,
+ Users,
+ Zap
+} from 'lucide-react';
+import { motion } from 'motion/react';
+import { useEffect, useState } from 'react';
+import Aparna from '../assets/Aparna-Nair.png';
+import Balaji from '../assets/Balaji-Chandrakumar.jpeg';
+import Diju from '../assets/Diju.jpeg';
+import Ramkumar from '../assets/K-Ramkumar.png';
+import Muralidharan from '../assets/R-Muralidharan.png';
+import Ramesh from '../assets/Ramesh-Padmanabhan.jpeg';
+import Swaminathan from '../assets/v-Swaminathan.jpg';
+import svgPaths from '../imports/svg-kw7r0ellyk';
+import { useGetAboutUsQuery } from '../redux/services/aboutUsApi';
+import { BrandedTag } from './about/BrandedTag';
+import { CTABannerSection } from './CTABannerSection';
+import { PrimaryCTAButton } from './PrimaryCTAButton';
+import { navigateTo } from './Router';
+import { TeamMemberModal } from './TeamMemberModal';
+import { TestimonialsSection } from './TestimonialsSection';
+import { Button } from './ui/button';
+import { FullScreenLoader } from './FullScreenLoader';
+
+
+// Static detailed team member data for modal
+const staticTeamMembersDetails = {
+ 'Mr. K Ramkumar': {
+ name: 'Mr. K Ramkumar',
+ role: 'Managing Director',
+ image: Ramkumar,
+ experience: 'Over 40 years of experience in HR, Business, and Leadership Development.',
+ fullBio: `Mr. K. Ramkumar is the founder of Kautilya Leadership Centre, an organisation dedicated to building world-class thought and practice in leadership consulting, research and development. He retired as Executive Director on the Board of ICICI Bank and was also on the Boards of ICICI Prudential Life Insurance and ICICI Ventures. Prior to his retirement, he was President of ICICI Foundation, the CSR arm of ICICI Group.
+
+Over a 40-year career, Ram worked with HAL, Hindustan Unilever, ICI and ICICI Bank. His passion has always been leadership development, with a focus on enabling individuals to discover and expand their leadership resources. He played a key role in making ICICI Group a recognized Leadership Factory.
+
+He co-created the ICICI Manipal Academy for Banking and Insurance, which inducted over 12,000 young leaders, and envisioned the ICICI Academy for Skills, now skilling 35,000 youth annually across 23 centers.`,
+ expertise: [
+ 'Leadership Development',
+ 'HR & Business Strategy',
+ 'Organizational Capability Building',
+ 'CSR Initiatives',
+ 'Talent Pipeline Development'
+ ],
+ education: 'Graduate in Science; further leadership and management exposure through senior executive roles.',
+ achievements: [
+ 'Founded Kautilya Leadership Centre',
+ 'Executive Director on ICICI Bank Board',
+ 'Created ICICI Manipal Academy (12,000 leaders trained)',
+ 'Founded ICICI Academy for Skills (35,000+ youth skilled)',
+ 'Author of "Leveraging Human Capital" (McGraw Hill)'
+ ],
+ clientWork: 'Guided leadership development across ICICI Group and worked with Manipal Global Education to groom future banking leaders.',
+ boardRoles: 'Former Board Member of ICICI Prudential Life, ICICI Ventures; served on CSR and leadership committees.'
+ },
+ 'Mr. R. Muralidharan': {
+ name: 'Mr. R. Muralidharan',
+ role: 'Practice Head – Leadership Development',
+ image: Muralidharan,
+ experience: 'Over 33 years in Banking, Financial Services, and Leadership roles.',
+ fullBio: `Muralidharan (Murali) has 33+ years of experience in BFSI. He has held top leadership roles including CEO/COO positions at ICICI Bank, Dhanlaxmi Bank, and L&T Financial Services. His experience spans corporate and retail banking, strategy, technology, operations, and transformational projects.
+
+At ICICI Bank, he was part of the founding team in 1994 and rose to become GM – Global Operations Group. His work at Dhanlaxmi Bank as COO won The Asian Banker Award (2012). At L&T Financial Services, he led operations, technology, credit, and CSR across retail, rural, and infrastructure finance.`,
+ expertise: [
+ 'Banking & Financial Services',
+ 'Transformational Projects',
+ 'Customer Experience',
+ 'Leadership Development',
+ 'Strategy & Operations'
+ ],
+ education: 'B.Sc. (Mathematics, Statistics, Physics), M.A. in Economics (Gold Medallist), Executive Education at Wharton & Stanford GSB.',
+ achievements: [
+ 'Helped set up ICICI Bank in 1994',
+ 'Asian Banker Award (2012) for transformation',
+ 'Group Head at L&T Financial Services',
+ 'Held Board and leadership committee roles',
+ 'Speaker at NIBM, TMTC, and industry fora'
+ ],
+ clientWork: 'Worked with public and private banks, financial services firms, and non-profits on leadership and customer service transformation.',
+ boardRoles: 'Held board positions in business and non-profits; Vice-Chair, Customer Service Excellence Foundation.'
+ },
+ 'Ms. Aparna Nair': {
+ name: 'Ms. Aparna Nair',
+ role: 'Practice Head – Leadership Development',
+ image: Aparna,
+ experience: 'Over 25 years in leadership consulting, HR, and organizational development.',
+ fullBio: `Aparna is a founding member of Kautilya Leadership Centre and has been instrumental in building it since 2016. She advises Boards and Management Committees on leadership bench strength, designs CXO-level interventions, and consults on culture, performance, and talent management.
+
+She is certified in MBTI and OPQ, has applied Balanced Scorecard frameworks, and built proprietary psychometric tools for KLC. Her prior roles include ICICI Bank and Blue Dart-FedEx, and she has engaged with leading organizations across multiple industries.`,
+ expertise: [
+ 'Leadership Consulting',
+ 'Psychometric Tools (MBTI, OPQ)',
+ 'Culture & Strategy Alignment',
+ 'Performance Management',
+ 'HR Mentorship'
+ ],
+ education: 'MBA in Marketing, Bachelor’s in Commerce; Accredited facilitator from SMR, Malaysia.',
+ achievements: [
+ 'Co-founded KLC',
+ 'Developed proprietary psychometric tools',
+ 'Advised Boards across industries',
+ 'Mentored HR professionals',
+ 'Independent Director on a startup board'
+ ],
+ clientWork: 'Worked with Godrej & Boyce, ICICI Prudential, Citi WAI, WNS, ThyssenKrupp, and others across pharma, BFSI, retail, auto, and private equity.',
+ boardRoles: 'Independent Woman Director; held leadership positions at ICICI Bank and Blue Dart-FedEx.'
+ },
+ 'Mr. V. Swaminathan': {
+ name: 'Mr. V. Swaminathan',
+ role: 'Practice Head – Leadership Development',
+ image: Swaminathan,
+ experience: 'Over 31 years in BFSI and office automation; 26 years in leadership at Kotak Group.',
+ fullBio: `Swami spent 26 years at Kotak Group in leadership roles across consumer banking, investment banking, asset management, and asset finance. He has built businesses from concept to scale and handled P&L responsibilities across divisions.
+
+He stepped down as Joint President of Kotak Mahindra Bank in 2021 before joining KLC. He was on Kotak’s Management Committee and led strategic initiatives, talent development, and capability building across the group.`,
+ expertise: [
+ 'Banking & Financial Services',
+ 'P&L Management',
+ 'Change Management',
+ 'Leadership Pipeline Development',
+ 'Business Strategy'
+ ],
+ education: 'PGDBM (Finance & Marketing), Gujarat University; Bachelor of Commerce; Senior Management programs at IIM Ahmedabad, IIM Bangalore, ISB Hyderabad.',
+ achievements: [
+ 'Joint President at Kotak Mahindra Bank',
+ 'Built and scaled multiple Kotak business units',
+ 'Led strategic and leadership initiatives',
+ 'Mentored talent pipelines across Kotak',
+ 'Joined KLC as Practice Head in 2021'
+ ],
+ clientWork: 'Extensive work with BFSI organizations and leadership development initiatives at scale.',
+ boardRoles: 'Key member of Kotak’s Management Committee; contributor to strategic boards within Kotak divisions.'
+ },
+ 'Mr. Balaji Chandrakumar': {
+ name: 'Mr. Balaji Chandrakumar',
+ role: 'Practice Head – Leadership Development',
+ image: Balaji,
+ experience: '25+ years across Sales, HR Consulting, and HR leadership in India and SE Asia.',
+ fullBio: `Balaji has led HR leadership across India and SE Asia, including roles at Etisalat (India) and Goodhope Asia Holdings (Singapore). He has expertise in organization design, succession management, change management, and policy development.
+
+Earlier, he worked in consulting with top Indian firms and began his HR journey with NIS Sparta after regional sales roles at Sandvik Asia.`,
+ expertise: [
+ 'HR Leadership & Consulting',
+ 'Organization Design',
+ 'Succession Management',
+ 'Change Management',
+ 'Leadership Hiring'
+ ],
+ education: 'Bachelor’s in Engineering, Master’s in HR, Postgraduate in Management; Chartered Fellow of CIPD.',
+ achievements: [
+ 'HR Leadership roles at Etisalat and Goodhope Asia',
+ 'Consulted for top Indian companies',
+ 'Built people and performance initiatives across industries',
+ 'Certified in multiple HR programs',
+ 'CIPD Chartered Fellow'
+ ],
+ clientWork: 'Worked with leading companies in telecom, food, and HR consulting sectors across India and SE Asia.',
+ boardRoles: 'Advisor in HR capability building across organizations.'
+ },
+ 'Mr. Ramesh Padmanabhan': {
+ name: 'Mr. Ramesh Padmanabhan',
+ role: 'Practice Head – Leadership Development',
+ image: Ramesh,
+ experience: '30+ years in BFSI, with leadership roles at ICICI Bank, Dhanlaxmi Bank, and ADCB India.',
+ fullBio: `Ramesh has worked with SBI, ICICI Bank, Dhanlaxmi Bank, and ADCB India across corporate credit, retail banking, operations, and training. He has built leadership pipelines among branch and middle managers, and at ADCB India created products for NRIs and centralized operations.
+
+He has consistently worked on capability building and leadership development alongside business roles.`,
+ expertise: [
+ 'Banking & Financial Services',
+ 'Leadership Development',
+ 'Capability Building',
+ 'Operations & Process Design',
+ 'Retail & Corporate Banking'
+ ],
+ education: 'Bachelor’s in Commerce; senior leadership roles provided extensive global exposure.',
+ achievements: [
+ 'Built leadership pipelines in ICICI and ADCB',
+ 'Part of ICICI for 13 years',
+ 'Created NRI-focused products at ADCB India',
+ 'Set up centralized operations at ADCB',
+ '30 years in BFSI leadership'
+ ],
+ clientWork: 'Significant work in BFSI sector; tailored leadership development for managers and executives.',
+ boardRoles: 'Served on MANCOM and strategic boards in ICICI, Dhanlaxmi, and ADCB India.'
+ },
+ 'Ms. Diju S': {
+ name: 'Ms. Diju S',
+ role: 'Practice Head – Leadership Development',
+ image: Diju,
+ experience: '15+ years in leadership development, banking, and people-centric initiatives.',
+ fullBio: `Diju began at ICICI Bank, leading initiatives in customer service, Six Sigma, workplace induction (SWIFT), and branch operations. She drove business growth, mentored teams, and implemented technology projects.
+
+After a career break, she joined KLC as Practice Head. She now co-creates leadership program designs with clients and manages knowledge business and learning facilities.`,
+ expertise: [
+ 'Leadership Program Design',
+ 'Customer Experience',
+ 'Operational Excellence',
+ 'Women Leadership & Diversity',
+ 'Project Management'
+ ],
+ education: 'B.Com (Honours), Delhi University; MBA (Finance & Marketing), Symbiosis Institute of Management Studies.',
+ achievements: [
+ 'Led Six Sigma rollout at ICICI Bank branches',
+ 'Part of SWIFT trainer team',
+ 'Head of Customer Service at ICICI',
+ 'Built leadership learning facility at KLC',
+ 'Special focus on diversity & inclusion'
+ ],
+ clientWork: 'Worked with BFSI clients and KLC partners to create custom leadership programs.',
+ boardRoles: 'Active in leadership forums and project management at KLC.'
+ }
+};
+
+// Helper function to get member details by name
+const getMemberDetails = (nameRole: string) => {
+ // Extract the name from "Name - Role" format
+ const name = nameRole.split(' - ')[0];
+ return staticTeamMembersDetails[name as keyof typeof staticTeamMembersDetails] || null;
+};
+
+export function AboutUs() {
+ const [isVisible, setIsVisible] = useState(false);
+ const [expandedValue, setExpandedValue] = useState('context');
+ const [selectedMember, setSelectedMember] = useState(null);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ // Fetch About Us data from API
+ const { data: aboutUsData, isLoading, isError, error } = useGetAboutUsQuery();
+
+ const transformTestimonials = (apiTestimonials: any[]) => {
+ if (!apiTestimonials || apiTestimonials.length === 0) return [];
+
+ return apiTestimonials.map((testimonial, index) => ({
+ id: testimonial.id || index,
+ name: testimonial.name || "Anonymous",
+ role: testimonial.designation || "Client",
+ company: undefined,
+ avatar: testimonial.profile_photo_url || undefined,
+ image: testimonial.profile_photo_url || undefined,
+ quote: testimonial.content || "",
+ rating: 5,
+ isVideo: !!testimonial.video_url,
+ videoThumbnail: testimonial.video_thumbnail_url || testimonial.profile_photo_url,
+ videoUrl: testimonial.video_url || undefined
+ }));
+ };
+
+ // Transform the testimonials
+ const testimonialsData = transformTestimonials(aboutUsData?.testimonials || []);
+
+ // Get team members from API
+ const apiTeamMembers = aboutUsData?.our_team || [];
+
+ const handleMemberClick = (member: any) => {
+ // Get detailed static data for the clicked member
+ const memberDetails = getMemberDetails(member.name_role);
+ if (memberDetails) {
+ setSelectedMember(memberDetails);
+ } else {
+ // Fallback to API data if no static details found
+ setSelectedMember({
+ name: member.name_role.split(' - ')[0],
+ role: member.name_role.split(' - ')[1] || 'Team Member',
+ image: member.photo_url,
+ experience: member.bio,
+ fullBio: member.bio,
+ expertise: [],
+ education: '',
+ achievements: [],
+ clientWork: '',
+ boardRoles: ''
+ });
+ }
+ setIsModalOpen(true);
+ };
+
+ const handleCloseModal = () => {
+ setIsModalOpen(false);
+ setSelectedMember(null);
+ };
+
+ // Prevent background scroll when modal is open
+ useEffect(() => {
+ if (isModalOpen) {
+ document.body.style.overflow = 'hidden';
+ } else {
+ document.body.style.overflow = '';
+ }
+
+ return () => {
+ document.body.style.overflow = '';
+ };
+ }, [isModalOpen]);
+
+ useEffect(() => {
+ setIsVisible(true);
+
+ const handleScroll = () => {
+ const timelineSection = document.querySelector('#timeline-fill-line') as HTMLElement | null;
+ const timelineContainer = timelineSection?.parentElement;
+
+ if (!timelineSection || !timelineContainer) return;
+
+ const rect = timelineContainer.getBoundingClientRect();
+ const windowHeight = window.innerHeight;
+
+ const sectionTop = rect.top;
+ const sectionHeight = rect.height;
+ const visibleTop = Math.max(0, windowHeight - sectionTop);
+ const visibleHeight = Math.min(visibleTop, sectionHeight);
+ const scrollProgress = Math.max(0, Math.min(1, visibleHeight / sectionHeight));
+
+ const maxFillHeight = 'calc(100% - 1rem)';
+
+ if (scrollProgress >= 0.9) {
+ timelineSection.style.height = maxFillHeight;
+ } else {
+ timelineSection.style.height = `${scrollProgress * 90}%`;
+ }
+ };
+
+ window.addEventListener('scroll', handleScroll);
+ handleScroll();
+
+ return () => {
+ window.removeEventListener('scroll', handleScroll);
+ };
+ }, []);
+
+ if (isLoading) {
+ return (
+
+
+
+ );
+ }
+
+ if (isError) {
+ return (
+
+
+
Error Loading Page
+
Failed to load About Us content. Please try again later.
+
+
+
+ );
+ }
+
+ return (
+
+ {/* Hero Section - Dynamic from API */}
+
+
+
+
+
+
+
+
+
+
+
+ {aboutUsData?.hero_section?.headline || "Advancing Leadership Through Insight"}
+
+
+
+
+
+ {aboutUsData?.hero_section?.subtext || "Founded in 2016 with the vision of being a world class institution in the thought and practice of leadership. We facilitate institutions to build Leadership capacity and capability while helping individuals unleash their potential."}
+
+
+
+
+ navigateTo(aboutUsData?.hero_section?.cta_destination || '/contact?topic=management-development')}
+ ariaLabel="Talk to us about management development"
+ className="primary-cta-button-blue cta-text-white"
+ />
+
+
+
+
+
+
+ {/* Section 1: Our Promise - Dynamic from API */}
+
+
+
+
+
+
+ We build leaders who deliver business results.
+
+
+
+
+
+
+ {/* Section 2: How We Work - Dynamic from API */}
+
+
+
+
+ {/* Section 4: Our Team - Dynamic from API (outer grid from API, modal from static) */}
+
+
+
+
+
+
{aboutUsData?.our_team_title || "Our Team"}
+
+
+ {aboutUsData?.our_team_description || "We have a team of 7 consultants and 4 young consultants. All our senior Consultants are ex-business professionals with experience ranging from 15-30 years in varied business functions and carry a deep understanding of the area they are engaging in. Two of them bring in Board room experience. – Meet them"}
+
+
+
+
+ {/* Team Members Grid - Using API data for outer display */}
+
+ );
+ }
+
+ // Handle error state
+ if (isBlogsError) {
+ return (
+
+
+
+
+
+
Failed to load articles
+
Please try again later
+
+
+
+ );
+ }
+
+ return (
+
+ {/* Hero Section */}
+
+
+
+
+
+
+
+
+
+
+ INSIGHTS & KNOWLEDGE
+
+
+
+ Articles & Research
+
+
+
+ Discover cutting-edge insights, research findings, and expert perspectives on leadership development, management strategies, and organizational excellence.
+
+ The Kautilya Leadership Center team is dedicated to providing cutting-edge insights and research on leadership development, management strategies, and organizational excellence.
+
+
+
+
+
+
+
+
+ {/* Related Articles Section with Balanced Grid Layout */}
+ {relatedPosts.length > 0 && (
+
+
+
+
+
+
+ Continue Learning
+
+
+ Explore More Leadership Insights
+
+
+ Discover additional strategies and frameworks to enhance your leadership effectiveness
+
+ {relatedPosts.map((post: any) => (
+ {
+ // Use the same pattern as the main articles with full UUID
+ const url = getSlugWithId(post.slug, post.id);
+ navigate(`/learning/articles/${url}`);
+ }}
+ style={{ backgroundColor: '#FFFFFF' }}
+ >
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Blogs.tsx b/src/components/Blogs.tsx
new file mode 100644
index 0000000..4192df1
--- /dev/null
+++ b/src/components/Blogs.tsx
@@ -0,0 +1,483 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Badge } from './ui/badge';
+import { Calendar, Clock, User, ChevronLeft, ChevronRight, Search, Filter } from 'lucide-react';
+import { Input } from './ui/input';
+import { navigateTo } from './Router';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+
+// Mock blog data
+const blogPosts = [
+ {
+ id: '1',
+ slug: 'future-of-leadership-development',
+ title: 'The Future of Leadership Development: Trends and Innovations',
+ excerpt: 'Explore emerging trends in leadership development, from AI-powered coaching to virtual reality training experiences that are reshaping how leaders learn and grow.',
+ content: 'Full blog content would go here...',
+ author: 'Dr. Sarah Mitchell',
+ authorRole: 'Chief Learning Officer',
+ publishDate: '2024-02-15',
+ readTime: '8 min read',
+ category: 'Leadership',
+ tags: ['Leadership Development', 'Innovation', 'Future Trends', 'Technology'],
+ thumbnail: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=400&fit=crop',
+ featured: true
+ },
+ {
+ id: '2',
+ slug: 'building-emotional-intelligence',
+ title: 'Building Emotional Intelligence: A Leader\'s Guide to Self-Awareness',
+ excerpt: 'Discover practical strategies for developing emotional intelligence and how self-aware leaders create more engaged and productive teams.',
+ content: 'Full blog content would go here...',
+ author: 'Marcus Rodriguez',
+ authorRole: 'Leadership Coach',
+ publishDate: '2024-02-10',
+ readTime: '6 min read',
+ category: 'Personal Development',
+ tags: ['Emotional Intelligence', 'Self-Awareness', 'Team Building', 'Communication'],
+ thumbnail: 'https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=600&h=400&fit=crop',
+ featured: false
+ },
+ {
+ id: '3',
+ slug: 'remote-leadership-strategies',
+ title: 'Remote Leadership Strategies: Managing Distributed Teams Effectively',
+ excerpt: 'Learn proven strategies for leading remote teams, maintaining culture, and driving performance in a distributed work environment.',
+ content: 'Full blog content would go here...',
+ author: 'Dr. Emily Chen',
+ authorRole: 'Remote Work Expert',
+ publishDate: '2024-02-05',
+ readTime: '10 min read',
+ category: 'Remote Work',
+ tags: ['Remote Leadership', 'Virtual Teams', 'Digital Communication', 'Performance Management'],
+ thumbnail: 'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=600&h=400&fit=crop',
+ featured: true
+ },
+ {
+ id: '4',
+ slug: 'diversity-inclusion-leadership',
+ title: 'Diversity and Inclusion: Leading Change in Your Organization',
+ excerpt: 'A comprehensive guide to implementing meaningful diversity and inclusion initiatives that drive real organizational change.',
+ content: 'Full blog content would go here...',
+ author: 'Jennifer Adams',
+ authorRole: 'D&I Consultant',
+ publishDate: '2024-01-28',
+ readTime: '12 min read',
+ category: 'Diversity & Inclusion',
+ tags: ['Diversity', 'Inclusion', 'Organizational Change', 'Culture'],
+ thumbnail: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&h=400&fit=crop',
+ featured: false
+ },
+ {
+ id: '5',
+ slug: 'agile-leadership-mindset',
+ title: 'Developing an Agile Leadership Mindset for Rapid Change',
+ excerpt: 'Explore how agile principles can transform your leadership approach and help organizations navigate uncertainty and rapid change.',
+ content: 'Full blog content would go here...',
+ author: 'David Park',
+ authorRole: 'Agile Coach',
+ publishDate: '2024-01-20',
+ readTime: '7 min read',
+ category: 'Agile Leadership',
+ tags: ['Agile', 'Change Management', 'Adaptability', 'Innovation'],
+ thumbnail: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=400&fit=crop',
+ featured: false
+ },
+ {
+ id: '6',
+ slug: 'coaching-vs-mentoring',
+ title: 'Coaching vs. Mentoring: Understanding the Difference and When to Use Each',
+ excerpt: 'Learn the key differences between coaching and mentoring, and discover when each approach is most effective for leadership development.',
+ content: 'Full blog content would go here...',
+ author: 'Lisa Thompson',
+ authorRole: 'Executive Coach',
+ publishDate: '2024-01-15',
+ readTime: '9 min read',
+ category: 'Coaching',
+ tags: ['Coaching', 'Mentoring', 'Leadership Development', 'Professional Growth'],
+ thumbnail: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=400&fit=crop',
+ featured: false
+ }
+];
+
+export function Blogs() {
+ const [searchTerm, setSearchTerm] = useState('');
+ const [selectedCategory, setSelectedCategory] = useState('All');
+ const [currentPage, setCurrentPage] = useState(1);
+ const postsPerPage = 6;
+
+ // Get unique categories
+ const categories = ['All', ...Array.from(new Set(blogPosts.map(post => post.category)))];
+
+ // Filter posts based on search and category
+ const filteredPosts = blogPosts.filter(post => {
+ const matchesSearch = post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ post.excerpt.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ post.author.toLowerCase().includes(searchTerm.toLowerCase());
+ const matchesCategory = selectedCategory === 'All' || post.category === selectedCategory;
+ return matchesSearch && matchesCategory;
+ });
+
+ // Paginate results
+ const totalPages = Math.ceil(filteredPosts.length / postsPerPage);
+ const currentPosts = filteredPosts.slice((currentPage - 1) * postsPerPage, currentPage * postsPerPage);
+
+ const formatDate = (dateString: string) => {
+ return new Date(dateString).toLocaleDateString('en-US', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric'
+ });
+ };
+
+ return (
+
+ {/* Header Section */}
+
+
+
+
+
+ INSIGHTS & EXPERTISE
+
+
+
+ Leadership Insights Blog
+
+
+
+ Discover thought-provoking articles, expert insights, and practical strategies from leading voices in organizational development and leadership excellence.
+
+ We encountered an issue processing your payment. Your booking is still reserved
+ for the next 30 minutes. Please try again or contact our support team.
+
+
+
+
+
+ Your booking reference {bookingConfirmation?.referenceId} is
+ temporarily held. Please complete payment within 30 minutes to confirm your booking.
+
+
+
+
+
+ Total
+
+
+ ₹{total.toLocaleString('en-IN')}
+
+
+
+
+ {/* Proceed to Payment Button */}
+
+
+ {/* Security Features */}
+
+
+
+
+ Secure payment processing
+
+
+
+
+
+ Instant course access
+
+
+
+
+
+ Certificate upon completion
+
+
+
+
+ {/* Security Note */}
+
+
+
+
+ Need help with payment?
+ Our AI assistant can guide you through the checkout process and answer questions about course enrollment. Click the chat icon to get started.
+
+
+
+
+
+
+
+ )}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/CartContext.tsx b/src/components/CartContext.tsx
new file mode 100644
index 0000000..9193a2a
--- /dev/null
+++ b/src/components/CartContext.tsx
@@ -0,0 +1,99 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { CartItem } from './CartPopup';
+
+interface CartContextType {
+ cartItems: CartItem[];
+ cartCount: number;
+ addToCart: (item: CartItem) => void;
+ removeFromCart: (itemId: string) => void;
+ clearCart: () => void;
+ getCartTotal: () => number;
+}
+
+const CartContext = createContext(undefined);
+
+export function CartProvider({ children }: { children: React.ReactNode }) {
+ const [cartItems, setCartItems] = useState([]);
+
+ // Load cart from localStorage on mount
+ useEffect(() => {
+ const savedCart = localStorage.getItem('klc-cart');
+ if (savedCart) {
+ try {
+ const parsedCart = JSON.parse(savedCart);
+ if (Array.isArray(parsedCart)) {
+ setCartItems(parsedCart);
+ }
+ } catch (error) {
+ console.error('Error loading cart from localStorage:', error);
+ }
+ }
+ }, []);
+
+ // Save cart to localStorage whenever it changes
+ useEffect(() => {
+ localStorage.setItem('klc-cart', JSON.stringify(cartItems));
+ }, [cartItems]);
+
+ // Parse price helper function
+ const parsePrice = (priceStr: string) => {
+ const cleanPrice = priceStr.replace(/[₹$,]/g, '');
+ const numValue = parseFloat(cleanPrice);
+ return isNaN(numValue) ? 0 : numValue;
+ };
+
+ const addToCart = (item: CartItem) => {
+ setCartItems(prevItems => {
+ // Check if item already exists
+ const existingItem = prevItems.find(cartItem => cartItem.id === item.id);
+
+ if (existingItem) {
+ // Item already in cart, don't add duplicate
+ return prevItems;
+ }
+
+ // Add new item
+ return [...prevItems, item];
+ });
+ };
+
+ const removeFromCart = (itemId: string) => {
+ setCartItems(prevItems => prevItems.filter(item => item.id !== itemId));
+ };
+
+ const clearCart = () => {
+ setCartItems([]);
+ };
+
+ const getCartTotal = () => {
+ return cartItems.reduce((total, item) => {
+ const price = parsePrice(item.price);
+ return total + price;
+ }, 0);
+ };
+
+ const cartCount = cartItems.length;
+
+ const value: CartContextType = {
+ cartItems,
+ cartCount,
+ addToCart,
+ removeFromCart,
+ clearCart,
+ getCartTotal
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useCart() {
+ const context = useContext(CartContext);
+ if (context === undefined) {
+ throw new Error('useCart must be used within a CartProvider');
+ }
+ return context;
+}
\ No newline at end of file
diff --git a/src/components/CartPopup.tsx b/src/components/CartPopup.tsx
new file mode 100644
index 0000000..e092316
--- /dev/null
+++ b/src/components/CartPopup.tsx
@@ -0,0 +1,575 @@
+import React, { useState, useEffect } from 'react';
+import { X, CheckCircle, ShoppingCart, Trash2, Shield, ArrowRight } from 'lucide-react';
+import { motion, AnimatePresence } from 'motion/react';
+import { Button } from './ui/button';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { navigateTo } from './Router';
+import { useCart } from './CartContext';
+
+export interface CartItem {
+ id: string;
+ title: string;
+ thumbnail: string;
+ price: string;
+ originalPrice?: string;
+ category: string;
+ level: string;
+ type?: string;
+}
+
+interface CartPopupProps {
+ isOpen: boolean;
+ onClose: () => void;
+ // cartItems: CartItem[]; // Legacy prop - no longer used but kept for backward compatibility
+ // onRemoveItem: (itemId: string) => void; // Legacy prop - no longer used but kept for backward compatibility
+ recentlyAddedItem?: CartItem | null;
+}
+
+export function CartPopup({
+ isOpen,
+ onClose,
+ // cartItems: legacyCartItems, // Renamed to avoid confusion
+ // onRemoveItem: legacyOnRemoveItem, // Renamed to avoid confusion
+ recentlyAddedItem
+}: CartPopupProps) {
+ const [showSuccess, setShowSuccess] = useState(false);
+
+ // Use global cart context instead of props
+ const { cartItems, removeFromCart, getCartTotal } = useCart();
+
+ useEffect(() => {
+ if (recentlyAddedItem && isOpen) {
+ setShowSuccess(true);
+ const timer = setTimeout(() => setShowSuccess(false), 3000);
+ return () => clearTimeout(timer);
+ }
+ }, [recentlyAddedItem, isOpen]);
+
+ // Prevent background scrolling when popup is open
+ useEffect(() => {
+ if (isOpen) {
+ // Save current scroll position
+ const scrollY = window.scrollY;
+
+ // Prevent scrolling
+ document.body.style.overflow = 'hidden';
+ document.body.style.position = 'fixed';
+ document.body.style.top = `-${scrollY}px`;
+ document.body.style.width = '100%';
+
+ return () => {
+ // Restore scrolling
+ document.body.style.overflow = '';
+ document.body.style.position = '';
+ document.body.style.top = '';
+ document.body.style.width = '';
+
+ // Restore scroll position
+ window.scrollTo(0, scrollY);
+ };
+ }
+ }, [isOpen]);
+
+ // Fixed price parsing function - handles both ₹ and $ formats
+ const parsePrice = (priceStr: string) => {
+ // Remove currency symbols and commas, then parse
+ const cleanPrice = priceStr.replace(/[₹$,]/g, '');
+ const numValue = parseFloat(cleanPrice);
+ return isNaN(numValue) ? 0 : numValue;
+ };
+
+ // Convert to rupees - improved handling
+ const convertToRupees = (priceStr: string) => {
+ const numValue = parsePrice(priceStr);
+
+ // If already in rupees, return as is
+ if (priceStr.includes('₹')) {
+ return `₹${numValue.toLocaleString('en-IN')}`;
+ }
+
+ // Convert from USD to INR
+ return `₹${(numValue * 83).toLocaleString('en-IN')}`;
+ };
+
+ // Use global cart total instead of calculating locally
+ const subtotal = getCartTotal();
+ const estimatedTotal = subtotal; // No taxes for now
+
+ const handleProceedToCheckout = () => {
+ // Navigate to checkout page (placeholder)
+ navigateTo('/checkout');
+ onClose();
+ };
+
+ const handleContinueShopping = () => {
+ onClose();
+ };
+
+ // Handle backdrop click - close popup only if clicking on backdrop
+ const handleBackdropClick = (e: React.MouseEvent) => {
+ if (e.target === e.currentTarget) {
+ onClose();
+ }
+ };
+
+ return (
+
+ {isOpen && (
+ <>
+ {/* Backdrop with higher z-index than navbar */}
+
+
+ {/* Cart Popup with highest z-index */}
+
+ {/* Header */}
+
+
+
+
+
+
+
+ Added to Cart
+
+
+ {cartItems.length} programme{cartItems.length !== 1 ? 's' : ''} in your cart
+
+ )}
+
+ >
+ )}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Chatbot.tsx b/src/components/Chatbot.tsx
new file mode 100644
index 0000000..44305e3
--- /dev/null
+++ b/src/components/Chatbot.tsx
@@ -0,0 +1,250 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { MessageCircle, X, Send, User, Bot, Minimize2 } from 'lucide-react';
+import { Button } from './ui/button';
+import exampleImage from 'figma:asset/a28d79dd35b730f689b77dbb30452ca27bd25759.png';
+
+interface Message {
+ id: string;
+ text: string;
+ sender: 'user' | 'bot';
+ timestamp: Date;
+}
+
+export function Chatbot() {
+ const [isOpen, setIsOpen] = useState(false);
+ const [messages, setMessages] = useState([
+ {
+ id: '1',
+ text: 'Hello! I\'m here to help you learn more about Kautilya Leadership Centre. How can I assist you today?',
+ sender: 'bot',
+ timestamp: new Date()
+ }
+ ]);
+ const [inputValue, setInputValue] = useState('');
+ const [isTyping, setIsTyping] = useState(false);
+ const messagesEndRef = useRef(null);
+
+ const scrollToBottom = () => {
+ messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+ };
+
+ useEffect(() => {
+ scrollToBottom();
+ }, [messages]);
+
+ const predefinedResponses: { [key: string]: string } = {
+ 'hello': 'Hello! Welcome to Kautilya Leadership Centre. I\'m here to help you with information about our programs, services, and how we can support your leadership development journey.',
+ 'programs': 'We offer comprehensive leadership development programs including executive coaching, team development, strategic leadership training, and virtual learning experiences. Would you like to know more about any specific program?',
+ 'services': 'Our services include Leadership Development, Executive Coaching, Team Building, Strategic Planning, Organizational Development, and Virtual Learning Platforms. Each is designed to enhance leadership capabilities.',
+ 'contact': 'You can reach us through our contact form on the website, or feel free to schedule a consultation. We\'d be happy to discuss how we can support your leadership development goals.',
+ 'virtual': 'Our virtual learning platform offers flexible, interactive leadership development experiences. You can access courses, participate in live sessions, and connect with other leaders from anywhere.',
+ 'coaching': 'Our executive coaching program provides personalized one-on-one guidance to help leaders develop their skills, overcome challenges, and achieve their professional goals.',
+ 'team': 'Our team development services focus on building high-performing teams through collaborative workshops, communication training, and strategic alignment exercises.',
+ 'webinar': 'Join our upcoming leadership webinars! We regularly host sessions covering various leadership topics. Check our webinars section for schedules and registration.',
+ 'default': 'That\'s a great question! For detailed information about our specific programs and services, I\'d recommend exploring our website or contacting our team directly. Is there anything specific about leadership development I can help you with?'
+ };
+
+ const getBotResponse = (userMessage: string): string => {
+ const lowerMessage = userMessage.toLowerCase();
+
+ for (const [key, response] of Object.entries(predefinedResponses)) {
+ if (key !== 'default' && lowerMessage.includes(key)) {
+ return response;
+ }
+ }
+
+ return predefinedResponses.default;
+ };
+
+ const handleSendMessage = async () => {
+ if (!inputValue.trim()) return;
+
+ const userMessage: Message = {
+ id: Date.now().toString(),
+ text: inputValue,
+ sender: 'user',
+ timestamp: new Date()
+ };
+
+ setMessages(prev => [...prev, userMessage]);
+ setInputValue('');
+ setIsTyping(true);
+
+ // Simulate typing delay
+ setTimeout(() => {
+ const botMessage: Message = {
+ id: (Date.now() + 1).toString(),
+ text: getBotResponse(inputValue),
+ sender: 'bot',
+ timestamp: new Date()
+ };
+
+ setMessages(prev => [...prev, botMessage]);
+ setIsTyping(false);
+ }, 1500);
+ };
+
+ const handleKeyPress = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ handleSendMessage();
+ }
+ };
+
+ const formatTime = (date: Date) => {
+ return date.toLocaleTimeString('en-US', {
+ hour: '2-digit',
+ minute: '2-digit',
+ hour12: true
+ });
+ };
+
+ return (
+ <>
+ {/* Chatbot Toggle Button */}
+
+ We've received your message and will get back to you within 24 hours.
+ Our leadership development experts are excited to help transform your organization.
+
+
+
+ navigateTo('/')}
+ ariaLabel="Return to homepage"
+ />
+
+
+
+
+ );
+ }
+
+ return (
+
+ {/* Hero Section with Google Map Background */}
+
+ {/* Google Map Background */}
+
+
+
+ {/* Dark overlay for better text readability */}
+
+
+
+ {/* Content Container */}
+
+ {/* Hero Content Block */}
+
+ {/* Branded Tag */}
+
+
+ {/* Main Headline */}
+
+ Reach us
+
+
+ {/* Supporting Text */}
+
+ Get in touch with us to start your leadership development journey.
+
+
+
+
+
+ {/* Main Content Section */}
+
+
+
+ {/* Contact Information - Enhanced Design */}
+
+
+ {/* Contact Info Header */}
+
+
Contact Information
+
+ We're here to help you on your leadership journey
+
+
+
+ {/* Subtle dark overlay for overall image */}
+
+
+
+
+
+ {/* Content Container */}
+
+ {/* CTA Content Block */}
+
+ {/* Branded Tag */}
+
+
+ {/* Main Headline */}
+
+ Ready to transform your leadership?
+
+ {" "}Get in touch{" "}
+
+ to start your development journey now.
+
+
+ navigateTo('/contact?topic=consulting')}
+ ariaLabel="Schedule a consultation with our leadership experts"
+ className="cta-banner-yellow"
+ />
+
+ {/* Supporting Text */}
+
+ Connect with our leadership experts to discuss your organization's specific development needs.
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/CorporateSignIn.tsx b/src/components/CorporateSignIn.tsx
new file mode 100644
index 0000000..444c889
--- /dev/null
+++ b/src/components/CorporateSignIn.tsx
@@ -0,0 +1,527 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Card, CardContent } from './ui/card';
+import { Checkbox } from './ui/checkbox';
+import {
+ Users,
+ BarChart3,
+ Settings,
+ ArrowRight,
+ Eye,
+ EyeOff,
+ Building2,
+ BookOpen,
+ Target,
+ Award,
+ User
+} from 'lucide-react';
+import { navigateTo } from './Router';
+
+export function CorporateSignIn() {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [showPassword, setShowPassword] = useState(false);
+ const [rememberMe, setRememberMe] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+
+ const handleSignIn = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setIsLoading(true);
+
+ // Simulate authentication
+ setTimeout(() => {
+ setIsLoading(false);
+ // Navigate to dashboard or success page
+ navigateTo('https://klc-hr.wdiprojects.com');
+ }, 1500);
+ };
+
+ const transformationFeatures = [
+ {
+ icon: BookOpen,
+ title: 'World-Class Content',
+ description: 'Access premium leadership courses from industry experts'
+ },
+ {
+ icon: Users,
+ title: 'Global Community',
+ description: 'Join 25,000+ leaders from top organizations worldwide'
+ },
+ {
+ icon: Award,
+ title: 'Recognized Credentials',
+ description: 'Earn certificates valued by Fortune 500 companies'
+ },
+ {
+ icon: Target,
+ title: 'Personalized Path',
+ description: 'Get customized learning recommendations based on your goals'
+ }
+ ];
+
+ const corporateFeatures = [
+ {
+ icon: Users,
+ title: 'Bulk Enrollment',
+ description: 'Enroll entire teams with volume discounts up to 30%'
+ },
+ {
+ icon: BarChart3,
+ title: 'Progress Analytics',
+ description: 'Real-time dashboards to track team learning outcomes'
+ },
+ {
+ icon: Settings,
+ title: 'Custom Programs',
+ description: 'Tailored leadership development aligned with your goals'
+ }
+ ];
+
+ return (
+
+ {/* Main Content */}
+
+
+
+ {/* Header Section */}
+
+
+
+
+ Corporate Solutions
+
+
+
+
+ Welcome Back, KLC Partner
+
+
+
+ Access your corporate dashboard to manage team enrollments, track learning
+ progress, and continue building your organization's leadership capabilities.
+
+
+
+ {/* Two Column Layout */}
+
+
+ {/* Left Column - Content */}
+
+ {/* Leadership Transformation Section */}
+
+
+
+ ⭐ Join KLC Community
+
+
+
+
+ Start Your Leadership Transformation
+
+
+
+ Join thousands of professionals who have accelerated their careers through KLC's
+ proven leadership development programs. Your journey to becoming an exceptional leader starts here.
+
+ Join thousands of organizations worldwide who trust KLC to develop their leaders.
+ Get started with enterprise-grade learning solutions and dedicated support.
+
+
+
+ {/* Two Column Layout */}
+
+
+ {/* Left Column - Content */}
+
+ {/* Leadership Transformation Section */}
+
+
+
+ ⭐ Join KLC Community
+
+
+
+
+ Start Your Leadership Transformation
+
+
+
+ Join thousands of professionals who have accelerated their careers through KLC's
+ proven leadership development programs. Your journey to becoming an exceptional leader starts here.
+
+
+ {/* Bottom section with content and date */}
+
+
+
+ {card.title}
+
+
+
+
+
+ {card.date}
+
+
+
+
+ );
+}
+
+// Format date function
+const formatDate = (dateString: string) => {
+ return new Date(dateString).toLocaleDateString('en-US', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric'
+ });
+};
+
+export function InsightsSection() {
+ // Fetch featured blogs from API
+ const { data: featuredBlogs, isLoading, isError } = useGetFeaturedBlogsQuery({ limit: 3 });
+
+ // Transform API data to match InsightCardData format
+ const transformToInsightCard = (blog: FeaturedBlog): InsightCardData => ({
+ id: blog.id,
+ title: blog.title,
+ description: blog.short_description || undefined,
+ date: formatDate(blog.updated_at),
+ tags: blog.tags || [],
+ image: blog.banner_img || 'https://images.unsplash.com/photo-1481627834876-b7833e8f5570?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1080',
+ slug: blog.slug_name,
+ });
+
+ // Handle loading state
+ if (isLoading) {
+ return (
+
+
+
+
+
+
+
+ );
+ }
+
+ // Handle error or no data state
+ if (isError || !featuredBlogs || featuredBlogs.length === 0) {
+ return (
+
+
+
+
+
+ {/* Header */}
+
+
+ Leadership Insights & Ideas
+
+
+
+
+ {/* Show message when no featured blogs available */}
+
+
No featured insights available at the moment. Check back soon!
+
+
+
+
+ );
+ }
+
+ // Ensure we have at least 3 blogs for the layout (use placeholders if needed)
+ const cards = featuredBlogs.map(transformToInsightCard);
+
+ // The layout expects: first card (large) + two small cards
+ const largeCard = cards[0];
+ const smallCards = cards.slice(1, 3);
+
+ // If we don't have enough cards, we can still render with what we have
+ const hasLargeCard = !!largeCard;
+ const hasSmallCards = smallCards.length > 0;
+
+ return (
+
+
+
+
+
+ {/* Header */}
+
+
+ Leadership Insights & Ideas
+
+
+
+
+ {/* Main Grid Layout */}
+
+ {/* Large Card - Takes full height on left */}
+ {hasLargeCard && (
+
+
+
+ )}
+
+ {/* Small Cards - Stack on right */}
+ {hasSmallCards && (
+
+ 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.
+
+ 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.
+
+ A purpose-built campus for immersive leadership learning. State-of-the-art facilities
+ designed to foster transformation, collaboration, and growth.
+
+
+
+ {/* The Kautilya Learning Story Section */}
+
+
+
+
+ {/* Image */}
+
+
+
+
+
+
+
+ {/* Content */}
+
+
+
+ OUR STORY
+
+
+
+ The Kautilya Learning Story
+
+
+
+ From the vision of Kautilya in the 4th century BC, who discovered leadership in the most unexpected places, to the creation of a modern sanctuary for learning, our journey is inspired by timeless wisdom and a commitment to nurturing leaders of tomorrow.
+
+
+
+ Set amidst the serene Sahyadri hills, just a short drive from Mumbai, Kautilya Leadership Learning Facility blends spirituality, world-class infrastructure, and a tranquil environment to create the perfect space for reflection, collaboration, and growth.
+
+
+
+ Here, every corner tells a story — from sacred art that inspires self-discovery, to modern classrooms and collaborative spaces designed to spark innovation.
+
+ We've thoughtfully designed every element to create a space that supports deep learning and meaningful connections. Experience the difference of a facility built specifically for leadership transformation.
+
+
+ {/* Campus Tab Content - 1 Large + 4 Small Layout */}
+
+
+ {/* Large Image - Left Side */}
+
+
+
+
+
+
Campus Aerial View
+
Kautilya Learning Centre
+
+
+
+ {/* 4 Small Cards - Right Side (2x2 Grid) */}
+
+ {/* Card 1 */}
+
+
+
+
+
+
Outdoor Gardens
+
Kautilya Learning Centre
+
+
+
+ {/* Card 2 */}
+
+
+
+
+
+
Green Spaces
+
Kautilya Learning Centre
+
+
+
+ {/* Card 3 */}
+
+
+
+
+
+
Main Entrance
+
Kautilya Learning Centre
+
+
+
+ {/* Card 4 */}
+
+
+
+
+
+
Study Areas
+
Kautilya Learning Centre
+
+
+
+
+
+
+ {/* Classroom Tab Content - 1 Large + 4 Small Layout */}
+
+
+ {/* Large Image - Left Side */}
+
+
+
+
+
+
Modern Classroom
+
Kautilya Learning Centre
+
+
+
+ {/* 4 Small Cards - Right Side (2x2 Grid) */}
+
+ {/* Card 1 */}
+
+
+
+
+
+
Interactive Space
+
Kautilya Learning Centre
+
+
+
+ {/* Card 2 */}
+
+
+
+
+
+
Learning Tools
+
Kautilya Learning Centre
+
+
+
+ {/* Card 3 */}
+
+
+
+
+
+
Collaboration Area
+
Kautilya Learning Centre
+
+
+
+ {/* Card 4 */}
+
+
+
+
+
+
Technology Hub
+
Kautilya Learning Centre
+
+
+
+
+
+
+ {/* Auditorium Tab Content - 1 Large + 4 Small Layout */}
+
+
+ {/* Large Image - Left Side */}
+
+
+
+
+
+
Main Auditorium Hall
+
Kautilya Learning Centre
+
+
+
+ {/* 4 Small Cards - Right Side (2x2 Grid) */}
+
+ {/* Card 1 */}
+
+
+
+
+
+
Stage Area
+
Kautilya Learning Centre
+
+
+
+ {/* Card 2 */}
+
+
+
+
+
+
Premium Seating
+
Kautilya Learning Centre
+
+
+
+ {/* Card 3 */}
+
+
+
+
+
+
AV Technology
+
Kautilya Learning Centre
+
+
+
+ {/* Card 4 */}
+
+
+
+
+
+
Lighting Setup
+
Kautilya Learning Centre
+
+
+
+
+
+
+ {/* Boardroom Tab Content - 1 Large + 4 Small Layout */}
+
+
+ {/* Large Image - Left Side */}
+
+
+
+
+
+
Executive Boardroom
+
Kautilya Learning Centre
+
+
+
+ {/* 4 Small Cards - Right Side (2x2 Grid) */}
+
+ {/* Card 1 */}
+
+
+
+
+
+
Conference Setup
+
Kautilya Learning Centre
+
+
+
+ {/* Card 2 */}
+
+
+
+
+
+
Meeting Technology
+
Kautilya Learning Centre
+
+
+
+ {/* Card 3 */}
+
+
+
+
+
+
Premium Amenities
+
Kautilya Learning Centre
+
+
+
+ {/* Card 4 */}
+
+
+
+
+
+
Private Space
+
Kautilya Learning Centre
+
+
+
+
+
+
+
+
+
+ {/* A Day at Kautilya - Timeline Section */}
+
+
+
+
+
+
+ DAILY EXPERIENCE
+
+
+
+ A Day at Kautilya
+
+
+
+ Experience the rhythm of learning, reflection, and growth at our facility.
+
+
+
+ {/* Timeline */}
+
+ {/* Timeline Line - Desktop */}
+
+
+
+ {/* Timeline Item 1 */}
+
+
+
+ Morning
+
+
Morning reflection & mindfulness
+
+ Begin your day with calm intention, setting the tone for focused learning and personal growth in our dedicated meditation spaces.
+
+
+
+ {/* Center Dot */}
+
+
+
+
+
+
+
+
+
+ {/* Timeline Item 2 */}
+
+
+
+ Mid-Morning
+
+
Interactive classroom learning
+
+ Engage in dynamic sessions with expert facilitators in modern, technology-enabled classrooms designed for maximum learning impact.
+
+
+
+ {/* Center Dot */}
+
+
+
+
+
+
+
+
+
+ {/* Timeline Item 3 */}
+
+
+
+ Afternoon
+
+
Group collaboration & workshops
+
+ Connect with peers in collaborative spaces designed to foster teamwork, creative thinking, and meaningful dialogue.
+
+
+
+ {/* Center Dot */}
+
+
+
+
+
+
+
+
+
+ {/* Timeline Item 4 */}
+
+
+
+ Evening
+
+
Evening reflection in calm spaces
+
+ Close your learning day with quiet contemplation, integrating insights and preparing for tomorrow's growth in serene outdoor or indoor reflection areas.
+
+
+
+ {/* Center Dot */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Booking Modal */}
+
+
+ {/* Virtual Tour Modal */}
+ setIsVirtualTourOpen(false)}
+ onBookNow={() => {
+ // Optional: auto-open booking modal after tour
+ handleBookNow();
+ }}
+ />
+
+ {/* CTA Section - Using standardized home page CTA */}
+
+
+
+ );
+}
+
+// Utility functions for calendar
+const getDaysInMonth = (date: Date) => {
+ return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+};
+
+const getFirstDayOfMonth = (date: Date) => {
+ return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
+};
+
+const isDateAvailable = (date: Date) => {
+ // Simple availability check - you can replace this with your actual logic
+ const today = new Date();
+ today.setHours(0, 0, 0, 0);
+ return date >= today;
+};
+
+const formatDate = (date: Date) => {
+ return date.toISOString().split('T')[0];
+};
+
+// Modal Component for Virtual Tour and Booking
+function BookingModal({
+ facility,
+ isOpen,
+ onClose
+}: {
+ facility: typeof facilities[0] | null;
+ isOpen: boolean;
+ onClose: () => void;
+}) {
+ const [bookingForm, setBookingForm] = useState({
+ companyName: '',
+ contactName: '',
+ email: '',
+ phone: '',
+ role: '',
+ teamSize: '',
+ facilityType: facility?.name || '',
+ preferredDate: '',
+ additionalRequirements: ''
+ });
+
+ // Calendar state
+ const [currentMonth, setCurrentMonth] = useState(new Date());
+ const [selectedDate, setSelectedDate] = useState(null);
+
+ // Lock body scroll when modal is open
+ React.useEffect(() => {
+ if (isOpen) {
+ document.body.style.overflow = 'hidden';
+ document.body.style.paddingRight = '15px'; // Prevent layout shift from scrollbar
+ } else {
+ document.body.style.overflow = '';
+ document.body.style.paddingRight = '';
+ }
+
+ // Cleanup on unmount or when modal closes
+ return () => {
+ document.body.style.overflow = '';
+ document.body.style.paddingRight = '';
+ };
+ }, [isOpen]);
+
+ const handleFormSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ console.log('Booking form submitted:', bookingForm);
+ // Here you would typically send the form data to your backend
+ alert('Booking request submitted successfully! We will contact you soon.');
+ onClose();
+ };
+
+ const updateFormField = (field: keyof BookingFormData, value: string) => {
+ setBookingForm(prev => ({ ...prev, [field]: value }));
+ };
+
+ // Calendar functions
+ const handleDateSelect = (date: Date) => {
+ if (isDateAvailable(date)) {
+ setSelectedDate(date);
+ updateFormField('preferredDate', formatDate(date));
+ }
+ };
+
+ const navigateMonth = (direction: 'prev' | 'next') => {
+ setCurrentMonth(prev => {
+ const newMonth = new Date(prev);
+ if (direction === 'prev') {
+ newMonth.setMonth(prev.getMonth() - 1);
+ } else {
+ newMonth.setMonth(prev.getMonth() + 1);
+ }
+ return newMonth;
+ });
+ };
+
+ const renderCalendar = () => {
+ const daysInMonth = getDaysInMonth(currentMonth);
+ const firstDay = getFirstDayOfMonth(currentMonth);
+ const days = [];
+ const monthNames = [
+ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
+ ];
+ const dayNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+
+ // Empty cells for days before the first day of the month
+ for (let i = 0; i < firstDay; i++) {
+ days.push();
+ }
+
+ // Days of the month
+ for (let day = 1; day <= daysInMonth; day++) {
+ const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
+ const isAvailable = isDateAvailable(date);
+ const isSelected = selectedDate &&
+ date.getFullYear() === selectedDate.getFullYear() &&
+ date.getMonth() === selectedDate.getMonth() &&
+ date.getDate() === selectedDate.getDate();
+
+ days.push(
+
+ );
+ }
+
+ return (
+
+ );
+ }
+
+ // Show error state
+ if (isError) {
+ return (
+
+
+
Error Loading Courses
+
Failed to load courses. Please try again later.
+
+
+
+ );
+ }
+
+ return (
+
+ {/* Hero Banner */}
+
+
+
+
+
+
+
+
+
+
+ DIGITAL LEARNING PLATFORM
+
+
+ Discover Your Leadership Potential Online
+
+
+
+ Our Leadership Courses are structured packages which are targeted towards building your leadership abilities. Each course is a wholesome package which not only helps you gain awareness about your leadership style but also gives insights to build your leadership abilities. Every course contains curated content targeted towards a specific leadership ability. Each course consists of our proprietary profiling instruments – Leadership Profilers, conceptual videos and experiences of leaders – Leadership Webcasts, as well as additional content to supplement learning.
+
+
+ {/* Enhanced Tabs List */}
+
+
+ Overview
+
+
+ Curriculum
+
+
+ Faculty
+
+
+ Reviews
+
+
+ FAQ
+
+
+
+ {/* Overview Tab - Who will benefit from this course? */}
+
+
+ {/* Section: Who will benefit from this course? */}
+
+
+
Who will benefit from this course?
+
+ This programme is designed for leaders at various stages of their career journey.
+
+
+
+
+
+
+
+
+
+
+
Target Audience
+
+ You will find this course useful if you are responsible to craft the strategy of the institution or are someone who contributes to shaping the company or business strategy.
+
+
+
+
+
+ {audienceSegments.map((segment, index) => (
+
+
+
+ {segment.icon}
+
+
+
{segment.title}
+
{segment.description}
+
+ ))}
+
+
+
+
+
+
+
+ {/* Enhanced Curriculum Structure */}
+
+
+ {/* Section: What will you learn through this course? */}
+
+
+
What will you learn through this course?
+
+ This course will help you understand the role of leadership in shaping strategy.
+
+
+
+
+
+
+
+
+
+
+
Learning Outcomes
+
+ This course will help you understand the role of leadership in shaping strategy. You will learn the personal resources you need (characteristics or traits, we refer to them as leadership orientations) to enable you to think strategically and formulate strategy.
+
+
+
+
+
+ {outcomes.map((outcome, index) => (
+
+
{outcome.title}
+
{outcome.description}
+
+ ))}
+
+
+
+
+
+ {/* Section: How is the learning structured? */}
+
+
+
How is the learning structured?
+
+ This course is designed to help you uncover dimensions through bite-size, easy to consume learning units.
+
+
+
+
+
+
+
+
+
+
+
Learning Structure
+
+
+ This course is designed to help you uncover the dimensions mentioned above by breaking it down to learning units that are bite size and easy to consume. It is structured to help you understand the content, learn its application and reflect on your behaviour relating to it. It offers a structure to skills practice to continue beyond the course as well.
+
+
+ The content is structured for you to absorb, internalise, reflect, be self-aware and practice building skill in that unit of content before proceeding to the next. We recommend you learn by spending time observing, reflecting and drawing deeper insights from your environment and watching others relating to the content as well. As you progress reflect and identify the areas you want to develop and practice skills beyond the course.
+
+
+ Deep involvement in each unit of content before moving to the next will heighten your learning experience of the program.
+
+
+ {/* CTA Button - Right Bottom with 40px spacing */}
+
+
+
+
+ );
+}
+
+// Pre-configured carousel variants for common use cases
+export function ConsultingServicesCarousel({
+ consultingServices
+}: {
+ consultingServices: CarouselItem[]
+}) {
+ const config: CarouselConfig = {
+ eyebrowText: "CONSULTING & ADVISORY SERVICES",
+ title: "Our Services",
+ description: "Comprehensive consulting solutions designed to drive organizational transformation and leadership excellence across all levels of your business.",
+ ctaText: "Explore Consulting Services",
+ ctaAction: () => navigateTo('/services/consulting'),
+ ctaAriaLabel: "Explore our consulting services"
+ };
+
+ return (
+
+ );
+}
+
+export function LeadershipProgramsCarousel({
+ leadershipPrograms
+}: {
+ leadershipPrograms: CarouselItem[]
+}) {
+ const config: CarouselConfig = {
+ eyebrowText: "LEADERSHIP DEVELOPMENT PROGRAMS",
+ title: "Our Programs",
+ description: "Comprehensive leadership development programs designed to build capabilities and drive organizational transformation with measurable impact.",
+ ctaText: "Explore Leadership Programs",
+ ctaAction: () => navigateTo('/services/leadership-development'),
+ ctaAriaLabel: "Explore our leadership development programs"
+ };
+
+ return (
+
+ );
+}
+
+export function ExpertServicesCarousel({
+ expertServices
+}: {
+ expertServices: CarouselItem[]
+}) {
+ const config: CarouselConfig = {
+ eyebrowText: "EXPERT CONSULTATION & SERVICES",
+ title: "Expert Services",
+ description: "Personalized guidance from industry thought leaders and senior practitioners who bring decades of real-world experience.",
+ ctaText: "Connect with Experts",
+ ctaAction: () => navigateTo('/services/executive-coaching'),
+ ctaAriaLabel: "Connect with our expert consultants"
+ };
+
+ return (
+
+ );
+}
+
+export function PlatformFeaturesCarousel({
+ platformFeatures
+}: {
+ platformFeatures: CarouselItem[]
+}) {
+ const config: CarouselConfig = {
+ eyebrowText: "DIGITAL PLATFORM FEATURES",
+ title: "Platform Capabilities",
+ description: "State-of-the-art digital learning platform with cutting-edge technology and interactive experiences for modern learning.",
+ ctaText: "Explore Platform",
+ ctaAction: () => navigateTo('/learning-online'),
+ ctaAriaLabel: "Explore our online learning platform"
+ };
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Router.tsx b/src/components/Router.tsx
new file mode 100644
index 0000000..c14a9eb
--- /dev/null
+++ b/src/components/Router.tsx
@@ -0,0 +1,90 @@
+// Enhanced router for reliable navigation with proper browser integration
+let currentPath = window.location.pathname + window.location.search || '/';
+const listeners: (() => void)[] = [];
+
+export function navigateTo(path: string) {
+ try {
+ console.log(`Navigating to: ${path}`);
+
+ // Update current path
+ currentPath = path;
+
+ // Update browser URL and history
+ if (window.history && window.history.pushState) {
+ window.history.pushState({ path }, '', path);
+ } else {
+ // Fallback for older browsers
+ window.location.href = path;
+ return;
+ }
+
+ // Force a state change event
+ window.dispatchEvent(new PopStateEvent('popstate', { state: { path } }));
+
+ // Notify all listeners of the route change
+ listeners.forEach(listener => {
+ try {
+ listener();
+ } catch (error) {
+ console.error('Error in route listener:', error);
+ }
+ });
+
+ } catch (error) {
+ console.error('Navigation error:', error);
+ // Ultimate fallback
+ window.location.href = path;
+ }
+}
+
+export function getCurrentPath() {
+ try {
+ // Always get the current path from the browser URL
+ const path = window.location.pathname + window.location.search;
+ currentPath = path;
+ return path;
+ } catch (error) {
+ console.error('Error getting current path:', error);
+ return currentPath;
+ }
+}
+
+export function addRouteListener(listener: () => void) {
+ listeners.push(listener);
+
+ // Listen for browser back/forward button events
+ const handlePopState = (event: PopStateEvent) => {
+ try {
+ currentPath = window.location.pathname + window.location.search;
+ listener();
+ } catch (error) {
+ console.error('Error in popstate handler:', error);
+ }
+ };
+
+ // Listen for our custom navigation events
+ const handleNavigation = () => {
+ try {
+ listener();
+ } catch (error) {
+ console.error('Error in navigation handler:', error);
+ }
+ };
+
+ window.addEventListener('popstate', handlePopState);
+ window.addEventListener('navigation', handleNavigation);
+
+ return () => {
+ const index = listeners.indexOf(listener);
+ if (index > -1) {
+ listeners.splice(index, 1);
+ }
+ window.removeEventListener('popstate', handlePopState);
+ window.removeEventListener('navigation', handleNavigation);
+ };
+}
+
+// Helper function to trigger navigation events
+export function triggerNavigationUpdate() {
+ window.dispatchEvent(new CustomEvent('navigation'));
+}
\ No newline at end of file
diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
new file mode 100644
index 0000000..781be1b
--- /dev/null
+++ b/src/components/ScrollToTop.tsx
@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+const ScrollToTop = () => {
+ const { pathname } = useLocation();
+
+ useEffect(() => {
+ window.scrollTo(0, 0);
+ }, [pathname]);
+
+ return null;
+};
+
+export default ScrollToTop;
diff --git a/src/components/SelfLearnerSignIn.tsx b/src/components/SelfLearnerSignIn.tsx
new file mode 100644
index 0000000..818045d
--- /dev/null
+++ b/src/components/SelfLearnerSignIn.tsx
@@ -0,0 +1,586 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Card, CardContent } from './ui/card';
+import { Checkbox } from './ui/checkbox';
+import {
+ BookOpen,
+ Users,
+ Target,
+ Award,
+ ArrowRight,
+ Eye,
+ EyeOff,
+ User
+} from 'lucide-react';
+import { navigateTo } from './Router';
+
+export function SelfLearnerSignIn() {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [showPassword, setShowPassword] = useState(false);
+ const [rememberMe, setRememberMe] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+
+ const handleSignIn = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setIsLoading(true);
+
+ // Simulate authentication
+ setTimeout(() => {
+ setIsLoading(false);
+ // Navigate to dashboard or success page
+ navigateTo('https://klc-learner.wdiprojects.com');
+ }, 1500);
+ };
+
+ const transformationFeatures = [
+ {
+ icon: BookOpen,
+ title: 'World-Class Content',
+ description: 'Access premium leadership courses from industry experts'
+ },
+ {
+ icon: Users,
+ title: 'Global Community',
+ description: 'Join 25,000+ leaders from top organizations worldwide'
+ },
+ {
+ icon: Award,
+ title: 'Recognized Credentials',
+ description: 'Earn certificates valued by Fortune 500 companies'
+ },
+ {
+ icon: Target,
+ title: 'Personalized Path',
+ description: 'Get customized learning recommendations based on your goals'
+ }
+ ];
+
+ const learningFeatures = [
+ {
+ icon: BookOpen,
+ title: 'Expert-Led Programs',
+ description: 'Learn from industry leaders and world-class faculty'
+ },
+ {
+ icon: Users,
+ title: 'Peer Learning Network',
+ description: 'Connect with like-minded professionals and expand your network'
+ },
+ {
+ icon: Target,
+ title: 'Personalized Growth',
+ description: 'Tailored learning paths to accelerate your leadership journey'
+ },
+ {
+ icon: Award,
+ title: 'Recognized Certification',
+ description: 'Industry-recognized credentials to advance your career'
+ }
+ ];
+
+ return (
+
+ {/* Main Content */}
+
+
+
+ {/* Header Section */}
+
+
+
+
+ Individual Learning
+
+
+
+
+ Welcome Back to Your Leadership Journey
+
+
+
+ Continue your transformation with KLC's world-class leadership development
+ programs. Access your personalized learning dashboard and connect with a global
+ community of leaders.
+
+
+
+ {/* Two Column Layout */}
+
+
+ {/* Left Column - Content */}
+
+ {/* Leadership Transformation Section */}
+
+
+
+ ⭐ Join KLC Community
+
+
+
+
+ Start Your Leadership Transformation
+
+
+
+ Join thousands of professionals who have accelerated their careers through KLC's
+ proven leadership development programs. Your journey to becoming an exceptional leader starts here.
+
+
+ {/* Sign In Form */}
+
+
+ {/* Demo Credentials */}
+
+
+
+ i
+
+ Demo credentials:
+
+
+ Email: demo@klc.edu.in | Password: demo123
+
+
+
+ {/* Sign Up Links */}
+
+
+
+ Don't have an account?{' '}
+
+
+
+
+
+ Looking for corporate access?{' '}
+
+
+
+
+
+
+
+
+
+
+
+ {/* Need Help Section - Separate Section Below */}
+ {/*
+
+
+ Need Help Getting Started?
+
+
+ Our learning advisors are here to help you choose the right programs and get the most out of your leadership development experience.
+
+
+
+
*/}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/SelfLearnerSignUp.tsx b/src/components/SelfLearnerSignUp.tsx
new file mode 100644
index 0000000..d1819cc
--- /dev/null
+++ b/src/components/SelfLearnerSignUp.tsx
@@ -0,0 +1,508 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Card, CardContent } from './ui/card';
+import { Checkbox } from './ui/checkbox';
+import {
+ BookOpen,
+ Users,
+ Target,
+ Award,
+ ArrowRight,
+ Eye,
+ EyeOff,
+ User,
+ Mail,
+ Lock,
+ Phone
+} from 'lucide-react';
+import { navigateTo } from './Router';
+
+export function SelfLearnerSignUp() {
+ const [formData, setFormData] = useState({
+ fullName: '',
+ email: '',
+ password: '',
+ phoneNumber: ''
+ });
+ const [showPassword, setShowPassword] = useState(false);
+ const [agreeToTerms, setAgreeToTerms] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+
+ const handleInputChange = (field: string, value: string) => {
+ setFormData(prev => ({ ...prev, [field]: value }));
+ };
+
+ const handleSignUp = async (e: React.FormEvent) => {
+ e.preventDefault();
+
+ if (!agreeToTerms) {
+ alert('Please agree to the Terms of Service and Privacy Policy');
+ return;
+ }
+
+ setIsLoading(true);
+
+ // Simulate registration
+ setTimeout(() => {
+ setIsLoading(false);
+ // Navigate to dashboard or success page
+ navigateTo('https://klc-learner.wdiprojects.com');
+ }, 2000);
+ };
+
+ const transformationFeatures = [
+ {
+ icon: BookOpen,
+ title: 'World-Class Content',
+ description: 'Access premium leadership courses from industry experts'
+ },
+ {
+ icon: Users,
+ title: 'Global Community',
+ description: 'Join 25,000+ leaders from top organizations worldwide'
+ },
+ {
+ icon: Award,
+ title: 'Recognized Credentials',
+ description: 'Earn certificates valued by Fortune 500 companies'
+ },
+ {
+ icon: Target,
+ title: 'Personalized Path',
+ description: 'Get customized learning recommendations based on your goals'
+ }
+ ];
+
+ const learningFeatures = [
+ {
+ icon: BookOpen,
+ title: 'World-Class Content',
+ description: 'Access cutting-edge leadership programs from industry experts and renowned faculty'
+ },
+ {
+ icon: Users,
+ title: 'Global Network',
+ description: 'Connect with ambitious leaders worldwide and build lasting professional relationships'
+ },
+ {
+ icon: Target,
+ title: 'Personalized Learning',
+ description: 'Get customized learning paths based on your goals and leadership style'
+ },
+ {
+ icon: Award,
+ title: 'Recognized Credentials',
+ description: 'Earn certificates and credentials that advance your career and open new opportunities'
+ }
+ ];
+
+ return (
+
+ {/* Main Content */}
+
+
+
+ {/* Two Column Layout */}
+
+
+ {/* Left Column - Content */}
+
+ {/* Leadership Transformation Section */}
+
+
+
+ ⭐ Join KLC Community
+
+
+
+
+ Start Your Leadership Transformation
+
+
+
+ Join thousands of professionals who have accelerated their careers through KLC's
+ proven leadership development programs. Your journey to becoming an exceptional leader starts here.
+
+
+
+ {/* Your Learning Experience Awaits */}
+
+
+ Your Learning Experience Awaits
+
+
+
+ {learningFeatures.map((feature, index) => (
+
+
+
+
+
+
+ {feature.title}
+
+
+ {feature.description}
+
+
+
+ ))}
+
+
+
+
+ {/* Right Column - Sign Up Form */}
+
+
+
+
+ {/* Form Header */}
+
+
+ Create Your Account
+
+
+ Join KLC and start your leadership journey
+
+
+
+ {/* Sign Up Form */}
+
+
+ {/* Sign In Link */}
+
+
+ Already have an account?{' '}
+
+
+
+
+
+
+
+
+
+
+ {/* Need Help Section - Separate Section Below */}
+ {/*
+
+
+ Questions About Your Learning Journey?
+
+
+ Our learning advisors are here to help you choose the right programs and get the most out of your leadership development experience.
+
+
+
+
*/}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/ServiceSectionNew.tsx b/src/components/ServiceSectionNew.tsx
new file mode 100644
index 0000000..0b2d23d
--- /dev/null
+++ b/src/components/ServiceSectionNew.tsx
@@ -0,0 +1,341 @@
+import { useState, useEffect, useRef } from "react";
+import { motion } from "motion/react";
+import {
+ Users,
+ Settings,
+ User,
+ Globe,
+ MessageSquare,
+ GraduationCap,
+ ArrowRight
+} from "lucide-react";
+import { BrandedTag } from "./about/BrandedTag";
+import { PrimaryCTAButton } from "./PrimaryCTAButton";
+import { navigateTo } from "./Router";
+
+// Services data
+const recognitionItems = [
+ {
+ id: 1,
+ title: "Leadership Development",
+ description: "Comprehensive programs designed to cultivate strategic thinking and emotional intelligence. Develop capabilities that drive organizational success through authentic leadership practices.",
+ icon: ,
+ badge: "CORE PROGRAM",
+ badgeColor: "#F8C301"
+ },
+ {
+ id: 2,
+ title: "Management Development",
+ description: "Essential skills training for first-time and experienced managers seeking growth. Focus on communication, delegation, and performance management excellence.",
+ icon: ,
+ badge: "POPULAR",
+ badgeColor: "#04045B"
+ },
+ {
+ id: 3,
+ title: "Culture Competence",
+ description: "Build cultural awareness and inclusive practices that enhance team collaboration. Navigate cultural differences with confidence and create inclusive environments.",
+ icon: ,
+ badge: "GLOBAL FOCUS",
+ badgeColor: "#F8C301"
+ },
+ {
+ id: 4,
+ title: "Executive Coaching",
+ description: "One-on-one personalized development for senior leaders and high-potential talent. Strategic guidance for complex leadership challenges and career advancement.",
+ icon: ,
+ badge: "PREMIUM",
+ badgeColor: "#04045B"
+ },
+ {
+ id: 5,
+ title: "Communication Excellence",
+ description: "Master the art of influential communication across all organizational levels. Develop presentation skills, difficult conversation navigation, and stakeholder engagement.",
+ icon: ,
+ badge: "ESSENTIAL",
+ badgeColor: "#F8C301"
+ },
+ {
+ id: 6,
+ title: "Change Leadership",
+ description: "Guide organizations through transformation with confidence and clarity. Learn frameworks for managing resistance, building momentum, and sustaining change initiatives.",
+ icon: ,
+ badge: "STRATEGIC",
+ badgeColor: "#04045B"
+ }
+];
+
+export function ServicesSectionNew() {
+ const [isVisible, setIsVisible] = useState(false);
+ const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
+ const sectionRef = useRef(null);
+
+ // Add card refs helper
+ const addCardRef = (el: HTMLDivElement | null, index: number) => {
+ cardRefs.current[index] = el;
+ };
+
+ // Intersection observer for animations
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ setIsVisible(true);
+ }
+ });
+ },
+ { threshold: 0.2 }
+ );
+
+ if (sectionRef.current) {
+ observer.observe(sectionRef.current);
+ }
+
+ return () => observer.disconnect();
+ }, []);
+
+ // Keyboard navigation
+ const handleKeyDown = (e: React.KeyboardEvent, index: number) => {
+ if (e.key === 'ArrowDown' && index < cardRefs.current.length - 1) {
+ cardRefs.current[index + 1]?.focus();
+ e.preventDefault();
+ } else if (e.key === 'ArrowUp' && index > 0) {
+ cardRefs.current[index - 1]?.focus();
+ e.preventDefault();
+ }
+ };
+
+ return (
+
+
+ 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.
+
+ 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.
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Services.tsx b/src/components/Services.tsx
new file mode 100644
index 0000000..e66d32d
--- /dev/null
+++ b/src/components/Services.tsx
@@ -0,0 +1,399 @@
+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
+} from 'lucide-react';
+import PrimaryCTAButton from './PrimaryCTAButton';
+import { navigateTo } from './Router';
+import { CTABannerSection } from './CTABannerSection';
+
+export function Services() {
+ const [isVisible, setIsVisible] = useState(false);
+
+ 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: '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: '/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: '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'
+ }
+ ];
+
+ return (
+
+ {/* Hero Section */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Our Services
+
+
+
+ Building Leadership Capacity
+ That Drives Results
+
+
+
+ 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.
+
+
+
+ navigateTo('/contact')}
+ ariaLabel="Contact us to explore our services approach"
+ className="cta-text-white"
+ />
+
+
+
+
+
+
+
+
+ {/* Services Overview Section */}
+
+
+
+
+ {/* Services Grid */}
+
+ {services.map((service, index) => (
+
+
+
+ {/* Content Section */}
+
+ {/* Icon and Title - Single Line (Figma Layout) */}
+
+ 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.
+
+ {/* Image icon from icon_url */}
+ {
+ // Fallback if image fails to load
+ e.currentTarget.style.display = 'none';
+ // You could add a fallback icon here if needed
+ }}
+ />
+
+ 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.
+
+ By accessing and using the Kautilya
+ Leadership Centre (KLC) website and
+ services, you accept and agree to be bound
+ by the terms and provision of this
+ agreement.
+
+
+ If you do not agree to abide by the above,
+ please do not use this service. Your
+ continued use of our platform constitutes
+ acceptance of these terms as they may be
+ modified from time to time.
+
+
+
+ Important: These terms
+ create a legally binding agreement
+ between you and KLC. Please ensure you
+ understand your rights and obligations.
+
+ You must be at least 18 years of age to
+ use our services. If you are between 13
+ and 18 years old, you may only use our
+ services with the involvement and consent
+ of a parent or guardian.
+
+
+
+ Geographic Scope
+
+
+ Our services are primarily intended for
+ users in India and regions where our
+ educational content and leadership
+ development programs are legally
+ permissible and culturally appropriate.
+
+
+
+ Corporate Access
+
+
+ Organizations and corporate entities
+ accessing our services must ensure they
+ have proper authorization to enter into
+ these terms on behalf of their
+ organization.
+
+
+
+
+ {/* Use of Site */}
+
+
+ scrollToSection("use-of-site")
+ }
+ >
+
+ Use of Site
+
+
+
+
+
+ Permitted Uses
+
+
+
+ Accessing educational content and
+ leadership development materials
+
+
+ Participating in webinars, courses, and
+ training programs
+
+
+ Using our virtual learning facility for
+ authorized purposes
+
+
+ Downloading materials explicitly marked
+ as downloadable
+
+
+ Sharing content through our designated
+ social sharing features
+
+
+
+
+ Prohibited Activities
+
+
+
+ Unauthorized copying, distribution, or
+ modification of our content
+
+
+ Using automated systems to access or
+ scrape our website
+
+
+ Attempting to gain unauthorized access
+ to our systems
+
+
+ Sharing login credentials or accessing
+ accounts not belonging to you
+
+
+ Using our services for any illegal or
+ harmful purposes
+
+
+ Disrupting the normal operation of our
+ platform
+
+
+
+
+
+ Warning: Violation of
+ these terms may result in immediate
+ termination of your access to our
+ services and potential legal action.
+
+ All payments must be made in full before
+ accessing paid content or services. We
+ accept major credit cards, debit cards,
+ and approved corporate payment methods.
+
+
+
+ GST & Taxes
+
+
+ All prices are inclusive of applicable
+ Goods and Services Tax (GST) as required
+ by Indian law. International customers may
+ be subject to additional taxes in their
+ jurisdiction.
+
+
+
+ Refund Policy
+
+
+
+ Standard Refund Terms:
+
+
+
+ Online Courses: 7-day
+ refund period from date of purchase
+ (before 25% completion)
+
+
+ Live Webinars: Full
+ refund if cancelled 24 hours before
+ start time
+
+ Digital Materials: No
+ refunds after download or access
+
+
+
+
+ Refund Process:
+
+
+ To request a refund, contact our support
+ team with your order details. Approved
+ refunds will be processed within 7-10
+ business days to the original payment
+ method.
+
+ All content on this website, including but
+ not limited to text, graphics, logos,
+ images, audio clips, video content, and
+ software, is the property of KLC or its
+ content suppliers.
+
+ We grant you a limited, non-exclusive,
+ non-transferable license to access and use
+ our content for personal or internal
+ business purposes in accordance with these
+ terms.
+
+
+
+ Trademark Information
+
+
+ "Kautilya Leadership Centre" and all
+ related logos are trademarks of KLC. You
+ may not use our trademarks without prior
+ written permission.
+
+ The information provided on this website
+ is for educational purposes only and
+ does not constitute professional advice.
+ KLC makes no warranties about the
+ completeness, reliability, or accuracy
+ of this information.
+
+
+
+
+ Limitation of Liability
+
+
+ In no event shall KLC be liable for any
+ direct, indirect, incidental, special, or
+ consequential damages resulting from your
+ use of our website or services, even if we
+ have been advised of the possibility of
+ such damages.
+
+
+
+ Service Availability
+
+
+ We strive to maintain continuous service
+ availability but do not guarantee
+ uninterrupted access. Scheduled
+ maintenance and unforeseen technical
+ issues may temporarily affect service
+ availability.
+
+
+
+ Third-Party Links
+
+
+ Our website may contain links to
+ third-party websites. We are not
+ responsible for the content, privacy
+ policies, or practices of these external
+ sites.
+
+ These terms and conditions are governed by
+ and construed in accordance with the laws
+ of India.
+
+
+
+ Jurisdiction
+
+
+
+ Exclusive Jurisdiction:{" "}
+ Chennai, Tamil Nadu, India
+
+
+ Any disputes arising from these terms or
+ your use of our services shall be
+ subject to the exclusive jurisdiction of
+ the courts in Chennai, Tamil Nadu,
+ India.
+
+
+
+
+ Dispute Resolution
+
+
+ We encourage resolving disputes through
+ direct communication. If formal legal
+ action becomes necessary, both parties
+ agree to first attempt mediation before
+ pursuing litigation.
+
+ KLC reserves the right to modify these
+ terms at any time. Changes will be
+ effective immediately upon posting on this
+ website.
+
+
+
+ Notification Process
+
+
+
+ Material changes will be highlighted at
+ the top of this page
+
+
+ Registered users will receive email
+ notifications of significant updates
+
+
+ The "Last Updated" date will reflect the
+ most recent modifications
+
+
+ Version history is available upon
+ request
+
+
+
+
+
+ Your Responsibility: It
+ is your responsibility to periodically
+ review these terms. Continued use of our
+ services after changes constitutes
+ acceptance of the modified terms.
+
+ Join live sessions led by leadership experts designed for professionals looking to elevate strategic thinking, decision-making, and people leadership.
+
+
+ {/* Navigation Controls */}
+
+
+
+
+
+
+ {/* CTA Button - Navigate to main webinars page */}
+ navigateTo('/webinars')}
+ ariaLabel="Explore all upcoming webinars"
+ />
+
+
+ {/* Right Column - Carousel */}
+
+
+ {/* Carousel Container */}
+
+ {/* Use shared webinar data for consistency */}
+ {sharedWebinarsData.map((webinar) => (
+
+ ))}
+
+
+ {/* Fade Gradient Overlay */}
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/VirtualSpaceSection.tsx b/src/components/VirtualSpaceSection.tsx
new file mode 100644
index 0000000..683e03b
--- /dev/null
+++ b/src/components/VirtualSpaceSection.tsx
@@ -0,0 +1,812 @@
+import React, { useState } from "react";
+import { motion } from "motion/react";
+import {
+ Building,
+ Users,
+ Presentation,
+ Coffee,
+ Play,
+ Calendar,
+ ArrowRight,
+ Eye,
+ X,
+ ChevronLeft,
+ ChevronRight
+} from "lucide-react";
+import { ImageWithFallback } from "./figma/ImageWithFallback";
+import { BrandedTag } from "./about/BrandedTag";
+import { PrimaryCTAButton } from "./PrimaryCTAButton";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { Textarea } from "./ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import { navigateTo } from "./Router";
+import kautilya from "../assets/Kautilya.png";
+// Calendar helper functions
+const getDaysInMonth = (date: Date) => {
+ return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+};
+
+const getFirstDayOfMonth = (date: Date) => {
+ return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
+};
+
+const formatDate = (date: Date) => {
+ return date.toISOString().split('T')[0];
+};
+
+const isDateAvailable = (date: Date) => {
+ const today = new Date();
+ today.setHours(0, 0, 0, 0);
+ const selectedDate = new Date(date);
+ selectedDate.setHours(0, 0, 0, 0);
+
+ // Available if it's today or in the future, and not a Sunday
+ return selectedDate >= today && selectedDate.getDay() !== 0;
+};
+
+const facilities = [
+ {
+ id: 1,
+ name: "Campus",
+ description: "Our flagship campus offers comprehensive leadership development with state-of-the-art facilities.",
+ icon: Building,
+ image: "https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80",
+ videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ", // Virtual tour video
+ capacity: "50-80",
+ features: ["State-of-the-art facilities", "Comprehensive programs", "Modern infrastructure"]
+ },
+ {
+ id: 2,
+ name: "Classroom",
+ description: "Interactive learning environment with flexible seating and cutting-edge educational technology.",
+ icon: Users,
+ image: "https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80",
+ videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ", // Virtual tour video
+ capacity: "20-30",
+ features: ["Interactive learning", "Flexible seating", "Educational technology"]
+ },
+ {
+ id: 3,
+ name: "Auditorium",
+ description: "Premier presentation venue with theater-style seating and professional AV systems for impactful presentations.",
+ icon: Presentation,
+ image: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80",
+ videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ", // Virtual tour video
+ capacity: "100-150",
+ features: ["Theater-style seating", "Professional AV systems", "Impactful presentations"]
+ },
+ {
+ id: 4,
+ name: "Boardroom",
+ description: "Executive meeting space designed for strategic discussions and high-level decision making with premium amenities.",
+ icon: Coffee,
+ image: "https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80",
+ videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ", // Virtual tour video
+ capacity: "8-15",
+ features: ["Executive meeting space", "Strategic discussions", "Premium amenities"]
+ }
+];
+
+interface BookingFormData {
+ companyName: string;
+ contactName: string;
+ email: string;
+ phone: string;
+ role: string;
+ teamSize: string;
+ facilityType: string;
+ preferredDate: string;
+ additionalRequirements: string;
+}
+
+interface FacilityCardProps {
+ facility: typeof facilities[0];
+ index: number;
+}
+
+function FacilityCard({ facility, index }: FacilityCardProps) {
+ const IconComponent = facility.icon;
+
+ return (
+
+
+ {/* Background Image - Full Height */}
+
+
+ {/* Dark overlay with hover effect */}
+
+
+
+ {/* Content - Positioned at bottom of card */}
+
+ {/* Icon */}
+
+
+
+
+
+
+ {/* Title */}
+
+ {facility.name}
+
+
+ {/* Description */}
+
+ {facility.description}
+
+
+ {/* Capacity Info */}
+
+
+
Capacity: {facility.capacity} people
+
+
+
+
+ );
+}
+
+// Modal Component for Virtual Tour and Booking
+function BookingModal({
+ facility,
+ isOpen,
+ onClose
+}: {
+ facility: typeof facilities[0] | null;
+ isOpen: boolean;
+ onClose: () => void;
+}) {
+ const [bookingForm, setBookingForm] = useState({
+ companyName: '',
+ contactName: '',
+ email: '',
+ phone: '',
+ role: '',
+ teamSize: '',
+ facilityType: facility?.name || '',
+ preferredDate: '',
+ additionalRequirements: ''
+ });
+
+ // Calendar state
+ const [currentMonth, setCurrentMonth] = useState(new Date());
+ const [selectedDate, setSelectedDate] = useState(null);
+
+ // Lock body scroll when modal is open
+ React.useEffect(() => {
+ if (isOpen) {
+ document.body.style.overflow = 'hidden';
+ document.body.style.paddingRight = '15px'; // Prevent layout shift from scrollbar
+ } else {
+ document.body.style.overflow = '';
+ document.body.style.paddingRight = '';
+ }
+
+ // Cleanup on unmount or when modal closes
+ return () => {
+ document.body.style.overflow = '';
+ document.body.style.paddingRight = '';
+ };
+ }, [isOpen]);
+
+ const handleFormSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ console.log('Booking form submitted:', bookingForm);
+ // Here you would typically send the form data to your backend
+ alert('Booking request submitted successfully! We will contact you soon.');
+ onClose();
+ };
+
+ const updateFormField = (field: keyof BookingFormData, value: string) => {
+ setBookingForm(prev => ({ ...prev, [field]: value }));
+ };
+
+ // Calendar functions
+ const handleDateSelect = (date: Date) => {
+ if (isDateAvailable(date)) {
+ setSelectedDate(date);
+ updateFormField('preferredDate', formatDate(date));
+ }
+ };
+
+ const navigateMonth = (direction: 'prev' | 'next') => {
+ setCurrentMonth(prev => {
+ const newMonth = new Date(prev);
+ if (direction === 'prev') {
+ newMonth.setMonth(prev.getMonth() - 1);
+ } else {
+ newMonth.setMonth(prev.getMonth() + 1);
+ }
+ return newMonth;
+ });
+ };
+
+ const renderCalendar = () => {
+ const daysInMonth = getDaysInMonth(currentMonth);
+ const firstDay = getFirstDayOfMonth(currentMonth);
+ const days = [];
+ const monthNames = [
+ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
+ ];
+ const dayNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+
+ // Empty cells for days before the first day of the month
+ for (let i = 0; i < firstDay; i++) {
+ days.push();
+ }
+
+ // Days of the month
+ for (let day = 1; day <= daysInMonth; day++) {
+ const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
+ const isAvailable = isDateAvailable(date);
+ const isSelected = selectedDate &&
+ date.getFullYear() === selectedDate.getFullYear() &&
+ date.getMonth() === selectedDate.getMonth() &&
+ date.getDate() === selectedDate.getDate();
+
+ days.push(
+
+ );
+ }
+
+ return (
+
+
+ {/* Modal Content - Side by Side Layout No Scroll */}
+
+ {/* Left Side - Virtual Tour */}
+
+
+ {/* Video Section - Compact */}
+
+
+
+
Virtual Tour
+
+
+ {/* Virtual Tour Container - Developer-Ready for 360 Viewer or Video */}
+
+ {/*
+ DEVELOPER NOTE: Replace this container with your preferred 360 viewer
+ Popular options:
+ - A-Frame (https://aframe.io/) for WebXR 360 content
+ - Three.js with 360 photo/video support
+ - Pannellum (https://pannellum.org/) for 360 photos
+ - Krpano (https://krpano.com/) for advanced 360 tours
+ - React 360 (https://facebook.github.io/react-360/)
+
+ Current implementation: Fallback video iframe
+ Replace the entire div below with your 360 viewer component
+ */}
+
+ {/* Fallback: Video iframe - Replace this entire section with 360 viewer */}
+ {/* */}
+
+
+
+
+
+ {/* Overlaid Content - Centered at top of image section */}
+
+
+ {/* Branded Tag */}
+
+
+
+
+ {/* Main Heading */}
+
+ Experience Our Space Virtually
+
+
+ {/* Subheading */}
+
+ Take a virtual walk through our state-of-the-art facility designed to inspire leadership excellence and foster collaborative learning.
+
+
+ {/* Main CTA Button - Book Now */}
+
+
+
+
+
+
+
+
+ {/* Additional overlay for better text readability over images */}
+
+
+ Get answers to common questions about booking and using our facility.
+
+
+
+
+
+
+
+ What is the booking process?
+
+
+ Our booking process is simple: submit your request through our form or contact us directly. We'll respond within 24 hours with availability, pricing, and a customized proposal. Once confirmed, we'll handle all setup details to ensure your event runs smoothly.
+
+
+
+
+
+ What are the capacity limits for different spaces?
+
+
+ Our spaces accommodate various group sizes: Training Amphitheater (80-120), Collaboration Suites (4-8), Outdoor Pavilion (20-40), and Residential Quarters (40 rooms). We can also combine spaces for larger events.
+
+
+
+
+
+ What catering options are available?
+
+
+ We offer comprehensive catering services including breakfast, lunch, dinner, and refreshment breaks. Our menu includes vegetarian, non-vegetarian, and special dietary options. We can customize menus based on your preferences and cultural requirements.
+
+
+
+
+
+ What technology support is provided?
+
+
+ All spaces include professional AV equipment, high-speed WiFi, interactive displays, and video conferencing capabilities. Our technical team provides on-site support throughout your event to ensure everything runs smoothly.
+
+
+
+
+
+ Are accommodation facilities available?
+
+
+ Yes, we have 40 single-occupancy residential rooms with en-suite bathrooms, work desks, and modern amenities. Perfect for multi-day programs, these rooms offer a comfortable stay with garden views and 24/7 security.
+
+
+
+
+
+ How does pricing work?
+
+
+ Pricing depends on the space(s) selected, duration, group size, and additional services required. We offer competitive rates with packages for full-day, multi-day, and residential programs. Contact us for a customized quote based on your specific needs.
+
+
+
+
+
+
+
+ {/* Final CTA Section */}
+
+
+
+
+ Ready to Transform Your Team?
+
+
+ Experience the difference our world-class facility can make for your next leadership development program.
+
+ Explore our comprehensive collection of expert insights, research, and practical guidance
+ to elevate your leadership journey and drive organizational excellence.
+
+ Expert-Led Webinars for
+ Leadership Excellence
+
+
+ Join industry experts and thought leaders as they share cutting-edge insights,
+ proven strategies, and practical tools to elevate your leadership journey.
+
+ {hasFilters ?
+ 'Try adjusting your search criteria or clear filters to see more results.' :
+ isUpcoming ?
+ 'We\'re planning exciting sessions. Check back soon or explore our past webinars.' :
+ 'Our webinar archive is growing. Check out our upcoming sessions.'
+ }
+
+ Transform Your Leadership
+ Through Expert Webcasts
+
+
+
+ Access world-class leadership development content from industry experts.
+ Join thousands of leaders who are advancing their skills through our
+ comprehensive webcast library.
+
+ Deep expertise across leadership development, consulting, cultural competence, executive coaching,
+ management development, and world-class learning facilities.
+
+ Comprehensive leadership solutions built on four foundational pillars that drive
+ organizational transformation and sustainable success across industries worldwide.
+
+
+
+ {/* Four Pillars - Horizontal Layout like Three Pillars */}
+
+ Experience leadership development through our cutting-edge digital platform designed
+ to maximize engagement, retention, and practical application of new skills.
+
+ Real organizations achieving measurable leadership transformation through our comprehensive
+ development programs and strategic consulting approach.
+
+ Real numbers. Real transformation. Discover the measurable difference we've made
+ across industries and organizations worldwide through our leadership development expertise.
+
+ Join our network of successful organizations and unlock your team's full potential.
+ Get in touch to start your development journey today.
+
+
+ {/* Sticky CTA Button */}
+
+
+
+ {/* Supporting Information */}
+
+
+ Connect with our partnership specialists to explore collaboration opportunities
+ and discuss your organization's specific leadership development needs.
+
+ ({
+ name: testimonial.author,
+ role: testimonial.position,
+ company: testimonial.program,
+ avatar: testimonial.image,
+ quote: testimonial.quote,
+ rating: testimonial.rating,
+ isVideo: false
+ }))}
+ title="What Our Clients Say"
+ subtitle="Don't just take our word for it. Here's what leaders from our partner organizations have to say about their transformational experiences with KLC."
+ tagText="Client Success"
+ />
+
+ Our impact extends far beyond statistics. We measure success through the
+ lasting transformation we create in leadership capabilities, organizational
+ culture, and sustainable business outcomes.
+
+ Building the next generation of transformational leaders who drive organizational
+ success and create lasting positive impact worldwide through excellence in leadership development.
+
+ Our comprehensive approach to leadership development is built on three foundational pillars
+ that guide everything we do and drive measurable transformation.
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/about/PageHeader.tsx b/src/components/about/PageHeader.tsx
new file mode 100644
index 0000000..0d5a0dc
--- /dev/null
+++ b/src/components/about/PageHeader.tsx
@@ -0,0 +1 @@
+// This file has been removed
\ No newline at end of file
diff --git a/src/components/about/StatCard.tsx b/src/components/about/StatCard.tsx
new file mode 100644
index 0000000..0d5a0dc
--- /dev/null
+++ b/src/components/about/StatCard.tsx
@@ -0,0 +1 @@
+// This file has been removed
\ No newline at end of file
diff --git a/src/components/about/TeamMemberCard.tsx b/src/components/about/TeamMemberCard.tsx
new file mode 100644
index 0000000..0d5a0dc
--- /dev/null
+++ b/src/components/about/TeamMemberCard.tsx
@@ -0,0 +1 @@
+// This file has been removed
\ No newline at end of file
diff --git a/src/components/figma/ImageWithFallback.tsx b/src/components/figma/ImageWithFallback.tsx
new file mode 100644
index 0000000..0e26139
--- /dev/null
+++ b/src/components/figma/ImageWithFallback.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+
+const ERROR_IMG_SRC =
+ 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
+
+export function ImageWithFallback(props: React.ImgHTMLAttributes) {
+ const [didError, setDidError] = useState(false)
+
+ const handleError = () => {
+ setDidError(true)
+ }
+
+ const { src, alt, style, className, ...rest } = props
+
+ return didError ? (
+
+
+
+
+
+ ) : (
+
+ )
+}
diff --git a/src/components/services/Consulting.tsx b/src/components/services/Consulting.tsx
new file mode 100644
index 0000000..61729e9
--- /dev/null
+++ b/src/components/services/Consulting.tsx
@@ -0,0 +1,693 @@
+import React, { useEffect, useState } from 'react';
+import { Button } from '../ui/button';
+import { Card, CardContent } from '../ui/card';
+import { Badge } from '../ui/badge';
+import { ImageWithFallback } from '../figma/ImageWithFallback';
+import { navigateTo } from '../Router';
+import { BrandedTag } from '../about/BrandedTag';
+import { TestimonialsSection } from '../TestimonialsSection';
+import { CTABannerSection } from '../CTABannerSection';
+import StackedOfferSection from '../StackedOfferSection';
+import {
+ Users,
+ Target,
+ ArrowRight,
+ CheckCircle,
+ Lightbulb,
+ Brain,
+ Eye,
+ TrendingUp,
+ MessageCircle,
+ BarChart3,
+ Compass,
+ Shield,
+ Network,
+ Zap,
+ Settings,
+ ChevronDown,
+ ChevronUp,
+ ArrowLeft,
+ Download,
+ Crown
+} from 'lucide-react';
+import { PrimaryCTAButton } from '../PrimaryCTAButton';
+
+// Strategic consulting cards data for the stacking section
+const consultingCards = [
+ {
+ id: 1,
+ title: "Organizational Structure Design",
+ subtitle: "Strategic Design & Optimization",
+ description:
+ "Comprehensive organizational design services that optimize structure, roles, and reporting relationships for enhanced performance and strategic alignment across all business functions.",
+ badge: "Featured",
+ color: "from-blue-600 to-blue-700",
+ icon: Network,
+ features: ["Organizational Assessment", "Structure Optimization", "Role Clarification", "Governance Design"],
+ stats: [
+ { label: "Success Rate", value: "96%" },
+ { label: "Organizations", value: "250+" },
+ { label: "Duration", value: "3-6 Mo" }
+ ]
+ },
+ {
+ id: 2,
+ title: "Vision & Mission Redefinition",
+ subtitle: "Purpose-Driven Strategic Alignment",
+ description:
+ "Collaborative development of inspiring vision and mission statements that drive organizational alignment, stakeholder engagement, and sustainable competitive advantage.",
+ badge: "Strategic",
+ color: "from-purple-600 to-purple-700",
+ icon: Compass,
+ features: ["Stakeholder Engagement", "Values Articulation", "Purpose Definition", "Strategic Narrative"],
+ stats: [
+ { label: "Alignment Rate", value: "92%" },
+ { label: "Leaders Engaged", value: "500+" },
+ { label: "Duration", value: "2-4 Mo" }
+ ]
+ },
+ {
+ id: 3,
+ title: "Leadership Capability Building",
+ subtitle: "Strategic Leadership Development",
+ description:
+ "Systematic development of leadership capabilities aligned with organizational strategy, including succession planning, talent development, and leadership pipeline optimization.",
+ badge: "Popular",
+ color: "from-green-600 to-green-700",
+ icon: TrendingUp,
+ features: ["Capability Frameworks", "Leadership Pipeline", "Succession Planning", "Talent Development"],
+ stats: [
+ { label: "Development Rate", value: "89%" },
+ { label: "Leaders Developed", value: "1,000+" },
+ { label: "Duration", value: "6-12 Mo" }
+ ]
+ },
+ {
+ id: 4,
+ title: "Strategic Transformation",
+ subtitle: "End-to-End Change Management",
+ description:
+ "Complete transformation support for major organizational change initiatives, including change strategy, stakeholder alignment, and cultural integration for sustainable success.",
+ badge: "Comprehensive",
+ color: "from-orange-600 to-orange-700",
+ icon: Zap,
+ features: ["Change Strategy", "Stakeholder Alignment", "Implementation Roadmap", "Culture Integration"],
+ stats: [
+ { label: "Success Rate", value: "91%" },
+ { label: "Transformations", value: "180+" },
+ { label: "Duration", value: "12-24 Mo" }
+ ]
+ }
+];
+
+const targetAudience = [
+ {
+ title: "Founders & CXOs",
+ description: "Visionary leaders driving organizational transformation and strategic growth",
+ icon: Lightbulb,
+ characteristics: ["Strategic vision", "Growth focus", "Change leadership", "Stakeholder management"]
+ },
+ {
+ title: "Boards",
+ description: "Board members seeking governance excellence and strategic oversight capabilities",
+ icon: Shield,
+ characteristics: ["Governance focus", "Risk oversight", "Strategic guidance", "Performance monitoring"]
+ },
+ {
+ title: "OD Leaders",
+ description: "Organizational development professionals implementing systematic change initiatives",
+ icon: Settings,
+ characteristics: ["Change expertise", "System thinking", "Process optimization", "Culture development"]
+ }
+];
+
+const outcomes = [
+ {
+ title: "Clarity in Leadership Direction",
+ description: "Clear strategic direction with aligned leadership behaviors and decision-making",
+ icon: Compass,
+ metrics: "96% of leadership teams report improved strategic clarity and alignment"
+ },
+ {
+ title: "Scalable Org Models",
+ description: "Organizational structures that support growth while maintaining operational efficiency",
+ icon: Network,
+ metrics: "78% improvement in organizational agility and decision-making speed"
+ },
+ {
+ title: "Faster Decision-Making & Alignment",
+ description: "Streamlined processes that enable rapid, informed decision-making across the organization",
+ icon: Zap,
+ metrics: "65% reduction in decision cycle time with improved cross-functional alignment"
+ }
+];
+
+const approachSteps = [
+ {
+ step: "01",
+ title: "Strategic Assessment",
+ description: "Comprehensive analysis of organizational current state, strategic challenges, and transformation opportunities. Together, we make your vision manifest through proven assessment methodologies and frameworks.",
+ details: ["Organizational scan", "Stakeholder interviews", "Performance analysis", "Gap assessment"],
+ icon: Eye
+ },
+ {
+ step: "02",
+ title: "Co-Creation Process",
+ description: "Collaborative design sessions with leadership to develop tailored strategic solutions and alignment. Together, we make your vision manifest through structured co-creation methodologies and proven frameworks.",
+ details: ["Leadership workshops", "Co-design sessions", "Stakeholder alignment", "Solution development"],
+ icon: Users
+ },
+ {
+ step: "03",
+ title: "Implementation Support",
+ description: "Hands-on guidance and support throughout the strategic transformation implementation journey. Together, we make your vision manifest through comprehensive support methodologies and proven frameworks.",
+ details: ["Change management", "Project oversight", "Training delivery", "Progress monitoring"],
+ icon: TrendingUp
+ },
+ {
+ step: "04",
+ title: "Continuous Optimization",
+ description: "Ongoing refinement and optimization to ensure sustainable transformation success and impact. Together, we make your vision manifest through continuous improvement methodologies and proven frameworks.",
+ details: ["Performance tracking", "Feedback integration", "Process refinement", "Capability building"],
+ icon: BarChart3
+ }
+];
+
+export function Consulting() {
+ const [expandedAudienceIndex, setExpandedAudienceIndex] = useState(0);
+
+ useEffect(() => {
+ window.scrollTo(0, 0);
+ }, []);
+
+ const toggleAudienceExpanded = (index: number) => {
+ setExpandedAudienceIndex(expandedAudienceIndex === index ? null : index);
+ };
+
+ return (
+
+ {/* Hero Section */}
+
+
+
+
+
+
+
+
+
+
+
+ Strategic Advisory
+
+
+
+ Strategic Consulting Services
+
+
+
+ Expert strategic guidance for organizational transformation. Drive clarity,
+ alignment, and sustainable business growth through proven consulting methodologies.
+
+
+
+ {/* Stacked Offer Section */}
+
+
+ {/* Who It's For Section */}
+
+
+
+
+
+ Who It's For
+
+
+ Our strategic consulting services are designed for leaders and organizations
+ committed to transformation, growth, and sustainable competitive advantage.
+
+ Our strategic consulting delivers measurable improvements in organizational
+ clarity, agility, and decision-making effectiveness across all business functions.
+
+
+ {/* Left Side - Title, Description & Navigation */}
+
+
+ Our Approach
+
+
+ Co-creation model with leadership using proven strategic methodologies: organizational
+ assessments, stakeholder interviews, and collaborative consulting for maximum impact.
+
+
+ {/* Navigation Controls */}
+
+
+
+
+
+
+ {/* Right Side - Scrollable Approach Cards */}
+
+
+ {approachSteps.map((step, index) => (
+
+ {/* Step Number */}
+
+
+ {step.step}
+
+
+
+
+ {/* Step Title */}
+
+ {step.title}
+
+
+ {/* Step Description */}
+
+ {step.description}
+
+
+ {/* Bullet Points */}
+
+ {step.details.map((detail, detailIndex) => (
+
+
+
+ {detail}
+
+
+ ))}
+
+
+ ))}
+
+
+ {/* Right Side Fade Overlay */}
+
+
+ {/* Hide scrollbar with CSS */}
+
+
+
+
+
+
+
+ {/* Testimonials Section - Using home page testimonials with custom headers */}
+
+
+ {/* CTA Section - Using standardized home page CTA */}
+
+
+ {apiData.overview?.description || 'A comprehensive approach to transforming organizational culture and building strategic competencies that drive business performance.'}
+
+
+
+ The Business Problem It Solves: {apiData.overview?.highlight_text || 'Many organizations struggle with misaligned cultures that hinder performance, low engagement scores, and competency gaps that prevent strategic goal achievement.'}
+
{apiData.use_case_section?.title || 'When Organizations Need Culture Transformation'}
+
+ {apiData.use_case_section?.description || 'Ideal for organizations facing cultural misalignment and competency gaps affecting performance.'}
+
+
+
+
+ {useCases.map((useCase, index) => (
+
+
+
+
+
+
+
+ {useCase.title}
+
+
+ {useCase.description}
+
+
+
+
+
+
+
+ {useCase.scenario}
+
+
+
+ ))}
+
+
+
+
+
+ {/* 4. Our Approach */}
+
+
+
+
+
+
+
+ {apiData?.approach_section?.title || "Our Approach to Leadership Development"}
+
+
+ {apiData?.approach_section?.description || "A systematic, research-backed methodology that transforms leadership potential into measurable business impact."}
+
+
+
+ {/* Flowchart Container with Connecting Lines */}
+
+ {/* Only render if approach_cards exist and have items */}
+ {apiData?.approach_section?.approach_cards && apiData.approach_section.approach_cards.length > 0 && (
+ <>
+ {/* Desktop: Horizontal Flowchart */}
+
+
+ {/* Row 1: First 3 approach cards from API */}
+
+ {apiData.approach_section.outcomes?.[0]?.description || "A systematic, measurable leadership pipeline that accelerates talent development and succession readiness."}
+
+ {apiData.approach_section.outcomes?.[0]?.description || "A systematic, measurable leadership pipeline that accelerates talent development and succession readiness."}
+
+ {apiData.impact_section?.description || 'Organizations typically see significant improvements in engagement, culture alignment, and organizational performance.'}
+
+ {apiData.hero_section.subtext || 'Develop exceptional leaders through personalized coaching that drives leadership effectiveness and accelerates career advancement.'}
+
+ {apiData.overview?.description || 'Coaching & Mentoring is a personalized leadership development approach that combines one-on-one executive coaching with strategic mentoring relationships. Our certified coaches work with leaders to enhance their effectiveness, navigate complex challenges, and accelerate their professional growth through tailored development experiences.'}
+
+
+
+ The Business Problem It Solves: {apiData.overview?.highlight_text || 'Many talented leaders struggle to reach their full potential due to lack of personalized guidance, limited feedback, and insufficient support during critical transitions. Our coaching and mentoring programs provide the individualized attention and expertise needed for exceptional leadership development.'}
+
+ {apiData?.approach_section?.title || "Our Approach to Leadership Development"}
+
+
+ {apiData?.approach_section?.description || "A systematic, research-backed methodology that transforms leadership potential into measurable business impact."}
+
+
+
+ {/* Flowchart Container with Connecting Lines */}
+
+ {/* Only render if approach_cards exist and have items */}
+ {apiData?.approach_section?.approach_cards && apiData.approach_section.approach_cards.length > 0 && (
+ <>
+ {/* Desktop: Horizontal Flowchart */}
+
+
+ {/* Row 1: First 3 approach cards from API */}
+
+ {apiData.approach_section.outcomes?.[0]?.description || "A systematic, measurable leadership pipeline that accelerates talent development and succession readiness."}
+
+ {apiData.approach_section.outcomes?.[0]?.description || "A systematic, measurable leadership pipeline that accelerates talent development and succession readiness."}
+
+ {apiData.impact_section?.description || 'Leaders typically see significant improvements in effectiveness, strategic capability, and career advancement.'}
+
+ {apiData?.approach_section?.title || "Our Approach to Leadership Development"}
+
+
+ {apiData?.approach_section?.description || "A systematic, research-backed methodology that transforms leadership potential into measurable business impact."}
+
+
+
+ {/* Flowchart Container with Connecting Lines */}
+
+ {/* Only render if approach_cards exist and have items */}
+ {apiData?.approach_section?.approach_cards && apiData.approach_section.approach_cards.length > 0 && (
+ <>
+ {/* Desktop: Horizontal Flowchart */}
+
+
+ {/* Row 1: First 3 approach cards from API */}
+
+ {apiData.approach_section.outcomes?.[0]?.description || "A systematic, measurable leadership pipeline that accelerates talent development and succession readiness."}
+
+ {apiData.approach_section.outcomes?.[0]?.description || "A systematic, measurable leadership pipeline that accelerates talent development and succession readiness."}
+
+
+ {/* Hero Section */}
+ {/* Service-style hero: full-bleed image with dark gradient, centered content, and stat strip */}
+
+
+ {/* Background image + overlay */}
+
+
+
+
+
+
+
+ {/* Centered content */}
+
+
+
+
+
+ World-Class Facility
+
+
+
Learning Facility
+
+
+ A purpose-built campus for immersive leadership learning. State-of-the-art facilities
+ designed to foster transformation, collaboration, and growth.
+
+
+
+
+
+
+
+
+
+
+
+ {/* Stat strip */}
+
+
+
+
+
2 Acres
+
Campus Size
+
+
+
80
+
Max Capacity
+
+
+
4
+
Training Halls
+
+
+
+
+
+
+ {/* What We Offer Section */}
+
+
+
+
+ What We Offer
+
+
+ Comprehensive executive leadership development solutions designed to transform
+ senior leadership capabilities and drive organizational excellence.
+
+
+
+ {/* Match Services page layout: sticky left content + vertical scroll-in cards on the right */}
+
+ {/* Left: Sticky intro */}
+
+
+
+
Spaces and Services that Enable Transformation
+
+ Purpose-built environments, technology, resources, and wellness support that make
+ immersive leadership programs seamless and effective.
+
+ {apiData.overview?.description || 'A structured program designed to build exceptional people leaders who can effectively manage teams, drive performance, and create positive work environments.'}
+
+
+
+ The Business Problem It Solves: {apiData.overview?.highlight_text || 'Many organizations promote high-performing individual contributors to management roles without proper training, leading to poor team performance and high turnover.'}
+
+ {apiData.audience_section?.description || 'Designed for organizations seeking to build management capability and individuals transitioning into leadership roles.'}
+
+ {apiData?.approach_section?.title || "Our Approach to Leadership Development"}
+
+
+ {apiData?.approach_section?.description || "A systematic, research-backed methodology that transforms leadership potential into measurable business impact."}
+
+
+
+ {/* Flowchart Container with Connecting Lines */}
+
+ {/* Only render if approach_cards exist and have items */}
+ {apiData?.approach_section?.approach_cards && apiData.approach_section.approach_cards.length > 0 && (
+ <>
+ {/* Desktop: Horizontal Flowchart */}
+
+
+ {/* Row 1: First 3 approach cards from API */}
+
+ {apiData.approach_section.outcomes?.[0]?.description || "A systematic, measurable leadership pipeline that accelerates talent development and succession readiness."}
+
+ {apiData.approach_section.outcomes?.[0]?.description || "A systematic, measurable leadership pipeline that accelerates talent development and succession readiness."}
+
+ {apiData.impact_section?.description || 'Organizations typically see significant improvements in team performance, employee engagement, and management effectiveness.'}
+