620ddcaa8e
All checks were successful
CodeAnt AI Review - Stage 1 / codeant-review (pull_request) Successful in 1m4s
997 lines
47 KiB
TypeScript
997 lines
47 KiB
TypeScript
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<string | null>('context');
|
||
const [selectedMember, setSelectedMember] = useState<any>(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 (
|
||
<div className="min-h-screen flex items-center justify-center bg-white">
|
||
<FullScreenLoader text="Loading articles..." />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (isError) {
|
||
return (
|
||
<div className="min-h-screen flex items-center justify-center">
|
||
<div className="text-center">
|
||
<h2 className="text-2xl font-bold text-red-600 mb-4">Error Loading Page</h2>
|
||
<p className="text-gray-600 mb-4">Failed to load About Us content. Please try again later.</p>
|
||
<Button onClick={() => window.location.reload()}>Retry</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div style={{ backgroundColor: '#FFFFFF', fontFamily: 'var(--font-family-base)' }}>
|
||
{/* Hero Section - Dynamic from API */}
|
||
<section className="relative min-h-[85vh] flex flex-col">
|
||
<div className="absolute inset-0 z-0">
|
||
<div
|
||
className="w-full h-full bg-cover bg-center bg-no-repeat"
|
||
style={{
|
||
backgroundImage: `url('${aboutUsData?.hero_section?.background_image_url || 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=1920&h=1080&fit=crop'}')`
|
||
}}
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-r from-black/85 via-black/75 to-black/65"></div>
|
||
</div>
|
||
|
||
<div className="relative z-10 flex-1 flex items-center">
|
||
<div className="w-full section-margin-x">
|
||
<div className="max-w-6xl">
|
||
<div className="mb-8">
|
||
<h1 className="text-h1-white">
|
||
{aboutUsData?.hero_section?.headline || "Advancing Leadership Through Insight"}
|
||
</h1>
|
||
</div>
|
||
|
||
<p className="text-body-lg-white mb-8 max-w-3xl">
|
||
<strong>
|
||
{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."}
|
||
</strong>
|
||
</p>
|
||
|
||
<div className="flex justify-start">
|
||
<PrimaryCTAButton
|
||
text={aboutUsData?.hero_section?.cta_text || "Talk to Us"}
|
||
onClick={() => 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"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Section 1: Our Promise - Dynamic from API */}
|
||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
|
||
<div className="section-margin-x">
|
||
<div className="max-w-6xl mx-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
viewport={{ once: true }}
|
||
className="text-center"
|
||
>
|
||
<BrandedTag text={aboutUsData?.our_promise_title || "Our Promise"} />
|
||
<h2 className="text-h1 mb-8" style={{
|
||
fontSize: 'clamp(2.5rem, 5vw, 4rem)',
|
||
lineHeight: '1.1',
|
||
color: 'var(--color-black)'
|
||
}}>
|
||
We build leaders who deliver business results.
|
||
</h2>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Section 2: How We Work - Dynamic from API */}
|
||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
|
||
<div className="section-margin-x">
|
||
<div className="max-w-6xl mx-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-16"
|
||
>
|
||
<BrandedTag text={aboutUsData?.how_we_work_title || "How We Work"} />
|
||
<h2 className="text-h2 mb-8">{aboutUsData?.how_we_work_title || "How We Work"}</h2>
|
||
</motion.div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
|
||
{(aboutUsData?.how_we_work && aboutUsData.how_we_work.length > 0) ? (
|
||
aboutUsData.how_we_work.map((item, index) => (
|
||
<motion.div
|
||
key={item.id}
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.1 * (index + 1) }}
|
||
viewport={{ once: true }}
|
||
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
|
||
>
|
||
<div className="flex items-start gap-4">
|
||
<div
|
||
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
|
||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||
>
|
||
{index === 0 && <Puzzle className="w-6 h-6 text-white" />}
|
||
{index === 1 && <Target className="w-6 h-6 text-white" />}
|
||
{index === 2 && <BookOpen className="w-6 h-6 text-white" />}
|
||
{index === 3 && <Zap className="w-6 h-6 text-white" />}
|
||
</div>
|
||
<div>
|
||
<h3 className="text-h4 mb-4">{item.title}</h3>
|
||
<p className="text-body text-muted leading-relaxed">
|
||
{item.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
))
|
||
) : (
|
||
<>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.1 }}
|
||
viewport={{ once: true }}
|
||
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
|
||
>
|
||
<div className="flex items-start gap-4">
|
||
<div
|
||
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
|
||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||
>
|
||
<Puzzle className="w-6 h-6 text-white" />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-h4 mb-4">Co-created interventions</h3>
|
||
<p className="text-body text-muted leading-relaxed">
|
||
We collaborate with you to design solutions that fit your unique organizational context and strategic objectives.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
|
||
>
|
||
<div className="flex items-start gap-4">
|
||
<div
|
||
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
|
||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||
>
|
||
<Target className="w-6 h-6 text-white" />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-h4 mb-4">Grounded in business context</h3>
|
||
<p className="text-body text-muted leading-relaxed">
|
||
Every solution is tailored to your specific business environment, challenges, and growth objectives.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.3 }}
|
||
viewport={{ once: true }}
|
||
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
|
||
>
|
||
<div className="flex items-start gap-4">
|
||
<div
|
||
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
|
||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||
>
|
||
<BookOpen className="w-6 h-6 text-white" />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-h4 mb-4">Research-backed, behaviour-anchored</h3>
|
||
<p className="text-body text-muted leading-relaxed">
|
||
Our methodologies are rooted in rigorous research and focused on sustainable behavioral transformation.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
|
||
>
|
||
<div className="flex items-start gap-4">
|
||
<div
|
||
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
|
||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||
>
|
||
<Zap className="w-6 h-6 text-white" />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-h4 mb-4">Delivered through immersive formats</h3>
|
||
<p className="text-body text-muted leading-relaxed">
|
||
Interactive, experiential learning approaches that engage participants and drive lasting impact.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Section 3: Who We Are - Updated Statistics - Dynamic from API */}
|
||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
|
||
<div className="section-margin-x">
|
||
<div className="max-w-6xl mx-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
viewport={{ once: true }}
|
||
>
|
||
<div className="grid grid-cols-1 lg:grid-cols-5 gap-8 lg:gap-12 mb-16">
|
||
<div className="lg:col-span-1">
|
||
<div className="branded-tag-system">
|
||
<div className="dot"></div>
|
||
<span className="text">{aboutUsData?.who_we_are_title || "Who we are"}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="lg:col-span-4">
|
||
<h2 className="text-h1 leading-tight" style={{
|
||
fontSize: 'clamp(2.5rem, 5vw, 4rem)',
|
||
lineHeight: '1.1',
|
||
color: 'var(--color-black)'
|
||
}}>
|
||
A premier Indian leadership development institution shaping India's most transformational leaders
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8 lg:gap-12 pt-12 border-t border-gray-200">
|
||
{(aboutUsData?.stat_section && aboutUsData.stat_section.length > 0) ? (
|
||
aboutUsData.stat_section.map((stat, index) => (
|
||
<motion.div
|
||
key={stat.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.1 * (index + 1) }}
|
||
viewport={{ once: true }}
|
||
className="text-center lg:text-left"
|
||
>
|
||
<div className="text-5xl lg:text-6xl font-medium mb-2" style={{
|
||
fontFamily: 'var(--font-family-base)',
|
||
lineHeight: '1',
|
||
color: 'var(--color-primary)'
|
||
}}>
|
||
{stat.number}{stat.suffix}
|
||
</div>
|
||
<div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
|
||
<div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
|
||
<span style={{ color: 'var(--color-black)', fontWeight: '500' }}>{stat.label.toUpperCase()}</span>
|
||
</div>
|
||
</motion.div>
|
||
))
|
||
) : (
|
||
<>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.1 }}
|
||
viewport={{ once: true }}
|
||
className="text-center lg:text-left"
|
||
>
|
||
<div className="text-5xl lg:text-6xl font-medium mb-2" style={{
|
||
fontFamily: 'var(--font-family-base)',
|
||
lineHeight: '1',
|
||
color: 'var(--color-primary)'
|
||
}}>
|
||
150+
|
||
</div>
|
||
<div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
|
||
<div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
|
||
<span style={{ color: 'var(--color-black)', fontWeight: '500' }}>CORPORATES</span>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="text-center lg:text-left"
|
||
>
|
||
<div className="text-5xl lg:text-6xl font-medium mb-2" style={{
|
||
fontFamily: 'var(--font-family-base)',
|
||
lineHeight: '1',
|
||
color: 'var(--color-primary)'
|
||
}}>
|
||
27,000+
|
||
</div>
|
||
<div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
|
||
<div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
|
||
<span style={{ color: 'var(--color-black)', fontWeight: '500' }}>LEADERS</span>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.3 }}
|
||
viewport={{ once: true }}
|
||
className="text-center lg:text-left"
|
||
>
|
||
<div className="text-5xl lg:text-6xl font-medium mb-2" style={{
|
||
fontFamily: 'var(--font-family-base)',
|
||
lineHeight: '1',
|
||
color: 'var(--color-primary)'
|
||
}}>
|
||
5,000+
|
||
</div>
|
||
<div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
|
||
<div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
|
||
<span style={{ color: 'var(--color-black)', fontWeight: '500' }}>ROOM NIGHTS</span>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="text-center lg:text-left"
|
||
>
|
||
<div className="text-3xl lg:text-4xl font-medium mb-2" style={{
|
||
fontFamily: 'var(--font-family-base)',
|
||
lineHeight: '1',
|
||
color: 'var(--color-primary)'
|
||
}}>
|
||
India & APAC
|
||
</div>
|
||
<div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
|
||
<div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
|
||
<span style={{ color: 'var(--color-black)', fontWeight: '500' }}>PRESENCE</span>
|
||
</div>
|
||
</motion.div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Section 4: Our Team - Dynamic from API (outer grid from API, modal from static) */}
|
||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
|
||
<div className="section-margin-x">
|
||
<div className="max-w-6xl mx-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-16"
|
||
>
|
||
<BrandedTag text={aboutUsData?.our_team_title || "Our Team"} />
|
||
<h2 className="text-h2 mb-8">{aboutUsData?.our_team_title || "Our Team"}</h2>
|
||
<div className="max-w-4xl mx-auto text-center space-y-6">
|
||
<p className="text-body-lg text-muted leading-relaxed">
|
||
{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"}
|
||
</p>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Team Members Grid - Using API data for outer display */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
|
||
{apiTeamMembers.map((member, index) => {
|
||
const name = member.name_role.split(' - ')[0];
|
||
const role = member.name_role.split(' - ')[1] || 'Team Member';
|
||
|
||
return (
|
||
<motion.div
|
||
key={member.id || index}
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||
viewport={{ once: true }}
|
||
className="text-left cursor-pointer"
|
||
onClick={() => handleMemberClick(member)}
|
||
>
|
||
<div className="relative mb-6 group">
|
||
<div className="aspect-square rounded-2xl overflow-hidden bg-gray-100 shadow-lg group-hover:shadow-xl transition-all duration-300">
|
||
<img
|
||
src={member.photo_url}
|
||
alt={member.alt_text || name}
|
||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||
onError={(e) => {
|
||
(e.target as HTMLImageElement).src = 'https://ui-avatars.com/api/?name=' + encodeURIComponent(name) + '&background=04045B&color=fff&size=200';
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-all duration-300 rounded-2xl flex items-center justify-center">
|
||
<div className="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||
<div
|
||
className="px-4 py-2 rounded-lg text-white text-small"
|
||
style={{
|
||
backgroundColor: '#04045B',
|
||
fontFamily: 'var(--font-family-base)',
|
||
fontWeight: '500'
|
||
}}
|
||
>
|
||
View Profile
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<h3 className="text-h4 text-black group-hover:text-primary transition-colors duration-300">{name}</h3>
|
||
<p className="text-body text-muted leading-relaxed font-medium">
|
||
{role}
|
||
</p>
|
||
{/* Bio Section */}
|
||
<p className="text-small text-muted leading-relaxed mt-2 line-clamp-3">
|
||
{member.bio || "No bio available"}
|
||
</p>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Section 5: Our Methodology - Dynamic from API */}
|
||
{aboutUsData?.methodology && (
|
||
<section className="py-16 lg:py-20" style={{ backgroundColor: '#FFFFFF' }}>
|
||
<div className="section-margin-x">
|
||
<div className="max-w-6xl mx-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-16"
|
||
>
|
||
<BrandedTag text={aboutUsData.methodology.title || "Our Methodology"} />
|
||
{aboutUsData.methodology.subtitle && (
|
||
<h2 className="text-h2 mb-8">{aboutUsData.methodology.subtitle}</h2>
|
||
)}
|
||
</motion.div>
|
||
|
||
<div className="relative max-w-6xl mx-auto">
|
||
<div
|
||
className="absolute left-4 top-0 w-0.5 bg-gray-300"
|
||
style={{
|
||
height: 'calc(100% - 1rem)',
|
||
zIndex: 1
|
||
}}
|
||
></div>
|
||
|
||
<div
|
||
id="timeline-fill-line"
|
||
className="absolute left-4 top-0 w-0.5 transition-all duration-1000 ease-out"
|
||
style={{
|
||
backgroundColor: 'var(--color-primary)',
|
||
height: '0%',
|
||
maxHeight: 'calc(100% - 1rem)',
|
||
zIndex: 2
|
||
}}
|
||
></div>
|
||
|
||
{[...(aboutUsData.methodology.phases || [])]
|
||
.sort((a, b) => (a.display_order || 0) - (b.display_order || 0))
|
||
.map((phase, phaseIndex) => (
|
||
<div key={phase.id || phaseIndex} className="relative pb-20">
|
||
<div className="grid lg:grid-cols-12 gap-8 lg:gap-12 pl-12">
|
||
<div
|
||
className="absolute left-3 top-1 w-2.5 h-2.5 rounded-full bg-white border-2 z-10"
|
||
style={{
|
||
borderColor: 'var(--color-primary)',
|
||
}}
|
||
></div>
|
||
|
||
<div className="lg:col-span-2">
|
||
<div className="branded-tag-system">
|
||
<div className="dot"></div>
|
||
<span className="text">{phase.phase_label || `Phase ${phase.phase_number}`}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="lg:col-span-3">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: phaseIndex * 0.2 }}
|
||
viewport={{ once: true }}
|
||
>
|
||
<h3 className="text-h3">{phase.title}</h3>
|
||
</motion.div>
|
||
</div>
|
||
|
||
<div className="lg:col-span-7">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: phaseIndex * 0.2 }}
|
||
viewport={{ once: true }}
|
||
>
|
||
<p className="text-body-lg text-muted leading-relaxed mb-6">
|
||
{phase.description}
|
||
</p>
|
||
|
||
{phase.bullet_title && phase.bullets && phase.bullets.length > 0 && (
|
||
<div className="mb-8">
|
||
<h4 className="text-h4 mb-4">{phase.bullet_title}</h4>
|
||
<div className="space-y-3">
|
||
{phase.bullets.map((bullet, bulletIndex) => (
|
||
<div key={bulletIndex} className="flex items-start gap-3">
|
||
<div
|
||
className="w-1.5 h-1.5 rounded-full mt-2 flex-shrink-0"
|
||
style={{
|
||
backgroundColor: 'var(--color-primary)',
|
||
}}
|
||
></div>
|
||
<span className="text-body text-muted">
|
||
{bullet}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
{aboutUsData?.philosophy && (
|
||
<div className="relative pb-20">
|
||
<div
|
||
className="absolute left-3 top-1 w-2.5 h-2.5 rounded-full bg-white border-2 z-10"
|
||
style={{
|
||
borderColor: 'var(--color-primary)',
|
||
}}
|
||
></div>
|
||
|
||
<div className="pl-12">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.6 }}
|
||
viewport={{ once: true }}
|
||
>
|
||
<div
|
||
className="rounded-2xl p-8 lg:p-12"
|
||
style={{
|
||
background: 'linear-gradient(135deg, var(--color-primary) 0%, #030359 100%)'
|
||
}}
|
||
>
|
||
<div className="flex flex-col lg:flex-row gap-8 lg:gap-12">
|
||
<div className="lg:w-1/3">
|
||
<h3 className="text-h3 text-white mb-6 lg:mb-0">{aboutUsData.philosophy.title || "Our Philosophy"}</h3>
|
||
</div>
|
||
|
||
<div className="lg:w-2/3">
|
||
<p className="text-body-white mb-8 opacity-90">
|
||
{aboutUsData.philosophy.description}
|
||
</p>
|
||
|
||
{aboutUsData.philosophy.points && aboutUsData.philosophy.points.length > 0 && (
|
||
<div className="flex flex-col gap-4">
|
||
{aboutUsData.philosophy.points.map((point, pointIndex) => (
|
||
<div key={pointIndex} className="flex items-start gap-4">
|
||
<div
|
||
className="bg-[#f8c301] content-stretch flex items-center justify-center rounded-full shrink-0 size-[32px]"
|
||
>
|
||
<svg className="block size-[16px]" fill="none" preserveAspectRatio="none" viewBox="0 0 16 16">
|
||
<g>
|
||
<path d="M3.33398 8H12.6673" stroke="#26231A" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.33333" />
|
||
<path d={svgPaths.p2c1c9a80} stroke="#26231A" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.33333" />
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div className="flex flex-col gap-1">
|
||
<p className="font-['Inter',sans-serif] font-normal leading-[25.6px] text-[16px] text-white">
|
||
{point}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.3 }}
|
||
viewport={{ once: true }}
|
||
className="flex justify-center items-center mt-16"
|
||
>
|
||
<PrimaryCTAButton
|
||
text="Design your leadership journey"
|
||
onClick={() => navigateTo('/contact')}
|
||
ariaLabel="Contact us to design your leadership journey"
|
||
className="cta-text-black"
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* Testimonials Section */}
|
||
<TestimonialsSection
|
||
customTestimonials={testimonialsData}
|
||
title="What Our Clients Say About Us"
|
||
subtitle="Hear from leaders who have transformed their approach through our comprehensive leadership development programs."
|
||
tagText="Client Success Stories"
|
||
/>
|
||
|
||
{/* CTA Banner Section - Dynamic from API */}
|
||
<CTABannerSection
|
||
ctaSection={aboutUsData?.cta_section}
|
||
isLoading={isLoading}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|