worked on the components new functionlity
This commit is contained in:
78
package-lock.json
generated
78
package-lock.json
generated
@@ -50,7 +50,9 @@
|
||||
"react-hook-form": "^7.55.0",
|
||||
"react-resizable-panels": "^2.1.7",
|
||||
"react-router-dom": "^7.8.2",
|
||||
"react-slick": "^0.31.0",
|
||||
"recharts": "^2.15.2",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"sonner": "^2.0.3",
|
||||
"tailwind-merge": "*",
|
||||
"tailwindcss": "^4.1.12",
|
||||
@@ -60,6 +62,7 @@
|
||||
"@types/node": "^20.10.0",
|
||||
"@types/react": "^19.1.12",
|
||||
"@types/react-dom": "^19.1.8",
|
||||
"@types/react-slick": "^0.23.13",
|
||||
"@vitejs/plugin-react": "^5.0.2",
|
||||
"@vitejs/plugin-react-swc": "^3.10.2",
|
||||
"vite": "^6.3.5"
|
||||
@@ -3158,6 +3161,16 @@
|
||||
"@types/react": "^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-slick": {
|
||||
"version": "0.23.13",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz",
|
||||
"integrity": "sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@vitejs/plugin-react": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.0.2.tgz",
|
||||
@@ -3287,6 +3300,12 @@
|
||||
"url": "https://polar.sh/cva"
|
||||
}
|
||||
},
|
||||
"node_modules/classnames": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
|
||||
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
@@ -3743,6 +3762,13 @@
|
||||
"jiti": "lib/jiti-cli.mjs"
|
||||
}
|
||||
},
|
||||
"node_modules/jquery": {
|
||||
"version": "3.7.1",
|
||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
|
||||
"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
@@ -3762,6 +3788,15 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/json2mq": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
|
||||
"integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"string-convert": "^0.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/json5": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
|
||||
@@ -4009,6 +4044,12 @@
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.debounce": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
@@ -4414,6 +4455,22 @@
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-slick": {
|
||||
"version": "0.31.0",
|
||||
"resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.31.0.tgz",
|
||||
"integrity": "sha512-zo6VLT8wuSBJffg/TFPbzrw2dEnfZ/cUKmYsKByh3AgatRv29m2LoFbq5vRMa3R3A4wp4d8gwbJKO2fWZFaI3g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.5",
|
||||
"json2mq": "^0.2.0",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"resize-observer-polyfill": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-smooth": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
|
||||
@@ -4499,6 +4556,12 @@
|
||||
"decimal.js-light": "^2.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/resize-observer-polyfill": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
|
||||
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "4.49.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.49.0.tgz",
|
||||
@@ -4564,6 +4627,15 @@
|
||||
"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/slick-carousel": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
|
||||
"integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"jquery": ">=1.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sonner": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
|
||||
@@ -4583,6 +4655,12 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/string-convert": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
|
||||
"integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tailwind-merge": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
|
||||
|
||||
@@ -45,7 +45,9 @@
|
||||
"react-hook-form": "^7.55.0",
|
||||
"react-resizable-panels": "^2.1.7",
|
||||
"react-router-dom": "^7.8.2",
|
||||
"react-slick": "^0.31.0",
|
||||
"recharts": "^2.15.2",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"sonner": "^2.0.3",
|
||||
"tailwind-merge": "*",
|
||||
"tailwindcss": "^4.1.12",
|
||||
@@ -55,6 +57,7 @@
|
||||
"@types/node": "^20.10.0",
|
||||
"@types/react": "^19.1.12",
|
||||
"@types/react-dom": "^19.1.8",
|
||||
"@types/react-slick": "^0.23.13",
|
||||
"@vitejs/plugin-react": "^5.0.2",
|
||||
"@vitejs/plugin-react-swc": "^3.10.2",
|
||||
"vite": "^6.3.5"
|
||||
|
||||
17
src/App.tsx
17
src/App.tsx
@@ -42,6 +42,11 @@ import WebinarDetail from "./components/WebinarDetail";
|
||||
import { LearningOnline } from "./components/LearningOnline";
|
||||
import { Terms } from "./components/Terms";
|
||||
import HomePage from './pages/HomePage';
|
||||
import { AboutUs } from './components/AboutUs';
|
||||
import { Services } from './components/Services';
|
||||
import { LearningFacilityNew } from './components/LearningFacilityNew';
|
||||
import HomePageNew from './pages/HomePageNew';
|
||||
import { FooterNew } from './components/FooterNew';
|
||||
// import EnrollPlaceholder from "./components/EnrollPlaceholder";
|
||||
// import ForgotPasswordPlaceholder from "./components/ForgotPasswordPlaceholder";
|
||||
// import DashboardPlaceholder from "./components/DashboardPlaceholder";
|
||||
@@ -61,22 +66,23 @@ export default function App() {
|
||||
<Routes>
|
||||
{/* Home Page */}
|
||||
<Route path="/" element={<HomePage />} />
|
||||
|
||||
{/* Leadership Journey */}
|
||||
<Route path="/leadership-journey" element={<LeadershipJourneyPage />} />
|
||||
|
||||
{/* Services Pages */}
|
||||
<Route path="/services/leadership-development" element={<LeadershipDevelopment />} />
|
||||
{/* <Route path="/services/leadership-development" element={<LeadershipDevelopment />} />
|
||||
<Route path="/services/consulting" element={<Consulting />} />
|
||||
<Route path="/services/culture-competence" element={<CultureCompetence />} />
|
||||
<Route path="/services/executive-coaching" element={<ExecutiveCoaching />} />
|
||||
<Route path="/services/management-development" element={<ManagementDevelopment />} />
|
||||
<Route path="/services/learning-facility" element={<LearningFacility />} />
|
||||
<Route path="/services/learning-facility" element={<LearningFacility />} /> */}
|
||||
<Route path="/services" element={<Services />} />
|
||||
|
||||
{/* About Us Pages */}
|
||||
<Route path="/about/our-vision" element={<OurVision />} />
|
||||
<Route path="/about/our-expertise" element={<OurExpertise />} />
|
||||
<Route path="/about/our-impact" element={<OurImpact />} />
|
||||
<Route path="/about-us" element={<AboutUs />} />
|
||||
|
||||
{/* Learning Pages */}
|
||||
<Route path="/learning/articles" element={<Articles />} />
|
||||
@@ -114,6 +120,9 @@ export default function App() {
|
||||
<Route path="/course/:slug" element={<ProgrammeDetail />} />
|
||||
<Route path="/programme/:slug" element={<ProgrammeDetail />} />
|
||||
|
||||
{/* Learning Facility */}
|
||||
<Route path="/learning-facility" element={<LearningFacilityNew />} />
|
||||
|
||||
{/* Placeholder Pages */}
|
||||
{/* <Route path="/enroll" element={<EnrollPlaceholder />} />
|
||||
<Route path="/forgot-password" element={<ForgotPasswordPlaceholder />} />
|
||||
@@ -124,7 +133,7 @@ export default function App() {
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
|
||||
<Footer />
|
||||
<FooterNew />
|
||||
|
||||
{/* Add AIChatbot to all pages */}
|
||||
<AIChatbot />
|
||||
|
||||
1498
src/components/AboutUs.tsx
Normal file
1498
src/components/AboutUs.tsx
Normal file
File diff suppressed because it is too large
Load Diff
264
src/components/FooterNew.tsx
Normal file
264
src/components/FooterNew.tsx
Normal file
@@ -0,0 +1,264 @@
|
||||
import { ArrowUp, Facebook, X, Linkedin, Instagram } from "lucide-react";
|
||||
import { navigateTo } from './Router';
|
||||
import klcLogo from 'figma:asset/e98caa8afd8d11246bbff1dde75bbaae6f6a0894.png';
|
||||
|
||||
export function FooterNew() {
|
||||
return (
|
||||
<footer
|
||||
className="relative py-16"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-primary)',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
{/* Main Footer Content */}
|
||||
<div className="max-w-7xl mx-auto section-margin-x">
|
||||
<div className="flex flex-col lg:flex-row lg:justify-between lg:items-start gap-12 lg:gap-16">
|
||||
|
||||
{/* Logo and Quick Links Column */}
|
||||
<div className="lg:flex-shrink-0 lg:max-w-md">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center mb-8">
|
||||
<img
|
||||
src={klcLogo}
|
||||
alt="Kautilya Leadership Centre"
|
||||
className="h-16 w-auto object-contain"
|
||||
style={{ filter: 'brightness(0) invert(1)' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Quick Links Section */}
|
||||
<div className="mb-8">
|
||||
<h3 className="text-subhead-white mb-6 text-[16px]">
|
||||
Quicklinks
|
||||
</h3>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mb-8">
|
||||
<button
|
||||
onClick={() => navigateTo('/')}
|
||||
className="block text-small-white transition-all duration-300 text-left"
|
||||
style={{
|
||||
color: 'white',
|
||||
opacity: 0.5
|
||||
}}
|
||||
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
|
||||
>
|
||||
Home
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigateTo('/learning/webcast')}
|
||||
className="block text-small-white transition-all duration-300 text-left"
|
||||
style={{
|
||||
color: 'white',
|
||||
opacity: 0.5
|
||||
}}
|
||||
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
|
||||
>
|
||||
Webcast
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigateTo('/about')}
|
||||
className="block text-small-white transition-all duration-300 text-left"
|
||||
style={{
|
||||
color: 'white',
|
||||
opacity: 0.5
|
||||
}}
|
||||
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
|
||||
>
|
||||
About Us
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigateTo('/learning/blogs')}
|
||||
className="block text-small-white transition-all duration-300 text-left"
|
||||
style={{
|
||||
color: 'white',
|
||||
opacity: 0.5
|
||||
}}
|
||||
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
|
||||
>
|
||||
Blogs
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigateTo('/services')}
|
||||
className="block text-small-white transition-all duration-300 text-left"
|
||||
style={{
|
||||
color: 'white',
|
||||
opacity: 0.5
|
||||
}}
|
||||
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
|
||||
>
|
||||
Services
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigateTo('/faq')}
|
||||
className="block text-small-white transition-all duration-300 text-left"
|
||||
style={{
|
||||
color: 'white',
|
||||
opacity: 0.5
|
||||
}}
|
||||
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
|
||||
>
|
||||
FAQs
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigateTo('/services/learning-facility')}
|
||||
className="block text-small-white transition-all duration-300 text-left"
|
||||
style={{
|
||||
color: 'white',
|
||||
opacity: 0.5
|
||||
}}
|
||||
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
|
||||
>
|
||||
Learning facility
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigateTo('/learning-online')}
|
||||
className="block text-small-white transition-all duration-300 text-left"
|
||||
style={{
|
||||
color: 'white',
|
||||
opacity: 0.5
|
||||
}}
|
||||
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
|
||||
>
|
||||
Online courses
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* DISCOVER LEADERSHIP Column */}
|
||||
<div className="lg:flex-shrink-0 lg:max-w-3xl flex flex-col h-full">
|
||||
{/* Discover Leadership Header */}
|
||||
<h2 className="text-h3-white mb-6 text-[32px] text-[24px]">
|
||||
DISCOVER LEADERSHIP
|
||||
</h2>
|
||||
|
||||
{/* Company Description */}
|
||||
<p
|
||||
className="text-small-white leading-relaxed mb-6"
|
||||
style={{ color: 'rgba(255, 255, 255, 0.85)' }}
|
||||
>
|
||||
Kautilya Leadership Centre is dedicated to building a world-class organisation, in thought and practice of leadership. We help people gain insights into their leadership orientations and enable them on a journey towards leadership development. This online platform allows a wide range of learning experiences, exposure to leadership thinking and concepts through online tools such as modules, webcasts of leaders, webinars, one-on-one consulting sessions.
|
||||
</p>
|
||||
|
||||
<p
|
||||
className="text-small-white leading-relaxed mb-6"
|
||||
style={{ color: 'rgba(255, 255, 255, 0.85)' }}
|
||||
>
|
||||
Kautilya Leadership Centre also offers access to Kautilya Leadership Services, which is a learning space developed to discover, deliberate, reflect on one's capabilities and developments. This learning centre built over 2 acres is equipped with world-class facilities to help ease learning and development.
|
||||
</p>
|
||||
|
||||
{/* Learning Journey Text */}
|
||||
<div className="mb-8">
|
||||
<p
|
||||
className="text-small-white"
|
||||
style={{ color: 'rgba(255, 255, 255, 0.75)' }}
|
||||
>
|
||||
Become Aware | Gain Insights | Discover Leadership
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Back To Top Button - Positioned to Bottom Right */}
|
||||
<div className="flex-1 flex justify-end items-end">
|
||||
<button
|
||||
onClick={() => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}}
|
||||
className="group flex items-center gap-3 px-6 py-3 rounded-lg transition-all duration-300"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-accent)',
|
||||
color: 'var(--color-brand-black)'
|
||||
}}
|
||||
aria-label="Back to top"
|
||||
>
|
||||
<ArrowUp className="w-5 h-5 transition-transform duration-300 group-hover:-translate-y-1" />
|
||||
<span className="font-semibold">BACK TO TOP</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Footer */}
|
||||
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-center space-y-6 lg:space-y-0 mt-16 pt-8"
|
||||
style={{ borderTop: '1px solid rgba(255, 255, 255, 0.2)' }}>
|
||||
|
||||
{/* Social Media Icons - Moved from left column */}
|
||||
<div className="flex space-x-4">
|
||||
{[
|
||||
{ icon: X, label: 'X' },
|
||||
{ icon: Facebook, label: 'Facebook' },
|
||||
{ icon: Linkedin, label: 'LinkedIn' },
|
||||
{ icon: Instagram, label: 'Instagram' }
|
||||
].map(({ icon: Icon, label }) => (
|
||||
<a
|
||||
key={label}
|
||||
href="#"
|
||||
className="w-8 h-8 rounded-full flex items-center justify-center transition-all duration-300 group"
|
||||
style={{ backgroundColor: 'rgba(192, 192, 192, 0.1)' }}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'var(--color-brand-accent)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'rgba(192, 192, 192, 0.1)';
|
||||
}}
|
||||
aria-label={label}
|
||||
>
|
||||
<Icon
|
||||
className="w-4 h-4 transition-colors duration-300"
|
||||
style={{ color: 'rgba(255, 255, 255, 0.85)' }}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = 'var(--color-brand-black)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = 'rgba(255, 255, 255, 0.85)';
|
||||
}}
|
||||
/>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Copyright - Centered */}
|
||||
<div className="flex-1 flex justify-center lg:absolute lg:left-1/2 lg:transform lg:-translate-x-1/2">
|
||||
<p
|
||||
className="text-body-white text-center"
|
||||
style={{ color: 'rgba(255, 255, 255, 0.85)' }}
|
||||
>
|
||||
Copyright 2025 Kautilya Leadership Centre
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Legal Links */}
|
||||
<div className="flex flex-col lg:flex-row lg:items-center space-y-2 lg:space-y-0 lg:space-x-8">
|
||||
<button
|
||||
onClick={() => navigateTo('/privacy')}
|
||||
className="text-body-white transition-colors duration-300 hover:text-yellow-300 text-left"
|
||||
style={{ color: 'rgba(255, 255, 255, 0.85)' }}
|
||||
>
|
||||
Privacy and Cookie Policy
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigateTo('/terms')}
|
||||
className="text-body-white transition-colors duration-300 cursor-pointer text-left hover:text-yellow-300"
|
||||
style={{ color: 'rgba(255, 255, 255, 0.85)' }}
|
||||
>
|
||||
Terms of Service
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -6,37 +6,51 @@ import svgPaths from "../imports/svg-i1joeov37f";
|
||||
interface SlideData {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
backgroundImage: string;
|
||||
shortTitle: string;
|
||||
ctaText: string;
|
||||
}
|
||||
|
||||
export default function HeroSection() {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const [isAutoPlaying, setIsAutoPlaying] = useState(true);
|
||||
const [progressValues, setProgressValues] = useState([0, 0, 0]);
|
||||
const [progressValues, setProgressValues] = useState([0, 0, 0, 0, 0]);
|
||||
|
||||
const slides: SlideData[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Empowering Future-Ready\nLeaders",
|
||||
description: "Build confidence, agility, and clarity for today's complex challenges.",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80",
|
||||
shortTitle: "Leadership Is Learned. We Teach It Right."
|
||||
title: "Build Leaders Who Drive Business Growth",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1705234384669-c6d31c61b789?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxleGVjdXRpdmUlMjBsZWFkZXJzaGlwJTIwZGV2ZWxvcG1lbnQlMjB0cmFpbmluZ3xlbnwxfHx8fDE3NTY4MDcyNjJ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Leadership Development Programs",
|
||||
ctaText: "Explore Leadership Journeys"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Turn Managers into\nImpactful Leaders",
|
||||
description: "Transform your management team into visionary leaders who inspire teams, drive innovation, and achieve exceptional business outcomes.",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80",
|
||||
shortTitle: "Turn Managers into Impactful Leaders"
|
||||
title: "Strengthen the Backbone: Your Managers",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1565688527174-775059ac429c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtYW5hZ2VtZW50JTIwdGVhbSUyMGRpc2N1c3Npb24lMjBvZmZpY2V8ZW58MXx8fHwxNzU2ODA2ODg1fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Management Development Programs",
|
||||
ctaText: "Strengthen your Managerial Calibre"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Struggling with\nManagerial Gaps?",
|
||||
description: "Bridge the leadership gap in your organization with our proven methodologies that develop confident, capable leaders at every level.",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80",
|
||||
shortTitle: "Struggling with Managerial Gaps?"
|
||||
title: "Shape Cultures That Accelerate Performance",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1531535807748-218331acbcb4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb3Jwb3JhdGUlMjBjdWx0dXJlJTIwdGVhbSUyMGNvbGxhYm9yYXRpb258ZW58MXx8fHwxNzU2ODA2ODg5fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Culture & Competence Consulting",
|
||||
ctaText: "Learn how we facilitate Change"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Unlock Leadership Potential",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1714974528833-a10e19a8f951?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxleGVjdXRpdmUlMjBjb2FjaGluZyUyMG1lbnRvciUyMGNvbnZlcnNhdGlvbnxlbnwxfHx8fDE3NTY4MDY4OTR8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Coaching & Mentoring",
|
||||
ctaText: "Start a Coaching Conversation"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Know Your Leaders. Strengthen Your Pipeline.",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1697059361419-349e924ed363?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMGxlYWRlcnMlMjBzdHJhdGVneSUyMG1lZXRpbmd8ZW58MXx8fHwxNzU2ODA3Mjc0fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Assessments & Leadership Pipeline",
|
||||
ctaText: "Discover Our Assessment Solutions"
|
||||
}
|
||||
];
|
||||
|
||||
@@ -82,7 +96,7 @@ export default function HeroSection() {
|
||||
// Reset progress when manually changing slides
|
||||
useEffect(() => {
|
||||
setProgressValues(prev => {
|
||||
const newProgress = [0, 0, 0];
|
||||
const newProgress = [0, 0, 0, 0, 0];
|
||||
newProgress[currentSlide] = 0;
|
||||
return newProgress;
|
||||
});
|
||||
@@ -137,12 +151,8 @@ export default function HeroSection() {
|
||||
<h1 className="hero-title" style={{ whiteSpace: 'pre-line' }}>
|
||||
{slides[currentSlide].title}
|
||||
</h1>
|
||||
{/* Description */}
|
||||
<p className="hero-description">
|
||||
{slides[currentSlide].description}
|
||||
</p>
|
||||
|
||||
{/* Build Your Leadership Pipeline Button - Enhanced with Proper Navigation */}
|
||||
{/* Dynamic CTA Button - Enhanced with Proper Navigation */}
|
||||
<button
|
||||
className="hero-slide-button group box-border content-stretch flex flex-row gap-2.5 items-center justify-start p-0 relative cursor-pointer overflow-hidden"
|
||||
style={{
|
||||
@@ -153,7 +163,7 @@ export default function HeroSection() {
|
||||
console.log('Hero button clicked - navigating to contact page');
|
||||
navigateTo('/contact?topic=leadership-pipeline');
|
||||
}}
|
||||
aria-label="Build Your Leadership Pipeline"
|
||||
aria-label={slides[currentSlide].ctaText}
|
||||
>
|
||||
{/* Icon Container with Slide Animation */}
|
||||
<div className="relative shrink-0 size-[50px] overflow-hidden">
|
||||
@@ -226,7 +236,7 @@ export default function HeroSection() {
|
||||
lineHeight: '28px'
|
||||
}}
|
||||
>
|
||||
Build Your Leadership Pipeline
|
||||
{slides[currentSlide].ctaText}
|
||||
</div>
|
||||
|
||||
{/* Secondary Text - Slides in from bottom */}
|
||||
@@ -241,7 +251,7 @@ export default function HeroSection() {
|
||||
lineHeight: '28px'
|
||||
}}
|
||||
>
|
||||
Build Your Leadership Pipeline
|
||||
{slides[currentSlide].ctaText}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
341
src/components/LearningEnvionment.tsx
Normal file
341
src/components/LearningEnvionment.tsx
Normal file
@@ -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: <Users size={28} />,
|
||||
badge: "CORE PROGRAM",
|
||||
badgeColor: "#F8C301"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Management Development",
|
||||
description: "Essential skills training for first-time and experienced managers seeking growth. Focus on communication, delegation, and performance management excellence.",
|
||||
icon: <Settings size={28} />,
|
||||
badge: "POPULAR",
|
||||
badgeColor: "#04045B"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Culture Competence",
|
||||
description: "Build cultural awareness and inclusive practices that enhance team collaboration. Navigate cultural differences with confidence and create inclusive environments.",
|
||||
icon: <Globe size={28} />,
|
||||
badge: "GLOBAL FOCUS",
|
||||
badgeColor: "#F8C301"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Executive Coaching",
|
||||
description: "One-on-one personalized development for senior leaders and high-potential talent. Strategic guidance for complex leadership challenges and career advancement.",
|
||||
icon: <User size={28} />,
|
||||
badge: "PREMIUM",
|
||||
badgeColor: "#04045B"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Communication Excellence",
|
||||
description: "Master the art of influential communication across all organizational levels. Develop presentation skills, difficult conversation navigation, and stakeholder engagement.",
|
||||
icon: <MessageSquare size={28} />,
|
||||
badge: "ESSENTIAL",
|
||||
badgeColor: "#F8C301"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Change Leadership",
|
||||
description: "Guide organizations through transformation with confidence and clarity. Learn frameworks for managing resistance, building momentum, and sustaining change initiatives.",
|
||||
icon: <GraduationCap size={28} />,
|
||||
badge: "STRATEGIC",
|
||||
badgeColor: "#04045B"
|
||||
}
|
||||
];
|
||||
|
||||
export function LearningEnvionment() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Add card refs helper
|
||||
const addCardRef = (el: HTMLDivElement | null, index: number) => {
|
||||
cardRefs.current[index] = el;
|
||||
};
|
||||
|
||||
// Intersection observer for animations
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsVisible(true);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.2 }
|
||||
);
|
||||
|
||||
if (sectionRef.current) {
|
||||
observer.observe(sectionRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
// Keyboard navigation
|
||||
const handleKeyDown = (e: React.KeyboardEvent, index: number) => {
|
||||
if (e.key === 'ArrowDown' && index < cardRefs.current.length - 1) {
|
||||
cardRefs.current[index + 1]?.focus();
|
||||
e.preventDefault();
|
||||
} else if (e.key === 'ArrowUp' && index > 0) {
|
||||
cardRefs.current[index - 1]?.focus();
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={sectionRef}
|
||||
className="py-16 lg:py-20"
|
||||
style={{
|
||||
backgroundColor: '#F7F7FD',
|
||||
fontFamily: 'var(--font-family-brand)'
|
||||
}}
|
||||
aria-labelledby="recognition-section-heading"
|
||||
>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Desktop Layout - Grid with Sticky Sidebar */}
|
||||
<div className="hidden lg:grid grid-cols-12 gap-12 min-h-screen">
|
||||
{/* Left Side - Sticky Content */}
|
||||
<div className="col-span-5 sticky top-24 self-start">
|
||||
<div className="recognition-header pr-8">
|
||||
<BrandedTag
|
||||
text="Our Services"
|
||||
/>
|
||||
<h2
|
||||
id="recognition-section-heading"
|
||||
className="text-h2 mb-6"
|
||||
>
|
||||
Shaping Leaders, Cultures, and Institutions
|
||||
</h2>
|
||||
<p className="text-body-lg text-muted mb-8">
|
||||
No two institutions are alike — and neither are their leadership needs. That's why every KLC service is rooted in research, tailored to context, and aligned with strategy. From shaping leaders and managers to shaping culture, developing talent frameworks, and offering practical high impact learning, we partner with you to create leadership solutions that deliver lasting value.
|
||||
</p>
|
||||
{/* CTA Button - Left aligned */}
|
||||
<div className="primary-cta-container-left cta-left-locked">
|
||||
<PrimaryCTAButton
|
||||
text="Services Page"
|
||||
onClick={() => navigateTo('/services')}
|
||||
ariaLabel="Explore our services"
|
||||
className="services-cta-override"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Scrolling Cards */}
|
||||
<div className="col-span-7">
|
||||
<div
|
||||
className="recognition-cards space-y-6"
|
||||
role="list"
|
||||
aria-label="Leadership development services"
|
||||
>
|
||||
{recognitionItems.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
ref={(el) => addCardRef(el, index)}
|
||||
className={`recognition-card group scroll-animate-stagger focus-ring ${isVisible ? 'animate-in' : ''}`}
|
||||
role="listitem"
|
||||
aria-labelledby={`recognition-title-${item.id}`}
|
||||
aria-describedby={`recognition-desc-${item.id}`}
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => handleKeyDown(e, index)}
|
||||
style={{
|
||||
transitionDelay: `${(index + 1) * 150}ms`,
|
||||
opacity: isVisible ? 1 : 0
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-8 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border bg-white"
|
||||
style={{
|
||||
borderColor: 'var(--color-border)',
|
||||
borderRadius: '12px',
|
||||
fontFamily: 'var(--font-family-brand)'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div
|
||||
className="w-14 h-14 flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-primary)',
|
||||
borderRadius: '12px',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
{item.icon}
|
||||
</div>
|
||||
{item.badge && (
|
||||
<div
|
||||
className="px-3 py-1 text-xs font-bold uppercase tracking-wider"
|
||||
style={{
|
||||
backgroundColor: item.badgeColor,
|
||||
color: item.badgeColor === '#F8C301' ? 'var(--color-brand-black)' : 'white',
|
||||
borderRadius: '20px',
|
||||
fontFamily: 'var(--font-family-brand)'
|
||||
}}
|
||||
>
|
||||
{item.badge}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="recognition-card-content">
|
||||
<h3
|
||||
id={`recognition-title-${item.id}`}
|
||||
className="text-h4 mb-4"
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
<p
|
||||
id={`recognition-desc-${item.id}`}
|
||||
className="text-small text-muted leading-relaxed"
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Layout - Stacked Header + Horizontal Scrollable Cards */}
|
||||
<div className="lg:hidden">
|
||||
{/* Mobile Header */}
|
||||
<div className="text-center mb-8">
|
||||
<BrandedTag
|
||||
text="Our Services"
|
||||
/>
|
||||
<h2
|
||||
id="recognition-section-heading-mobile"
|
||||
className="text-h2 mb-6"
|
||||
>
|
||||
Shaping Leaders, Cultures, and Institutions
|
||||
</h2>
|
||||
<p className="text-body-lg text-muted mb-8">
|
||||
No two institutions are alike — and neither are their leadership needs. That's why every KLC service is rooted in research, tailored to context, and aligned with strategy. From shaping leaders and managers to shaping culture, developing talent frameworks, and offering practical high impact learning, we partner with you to create leadership solutions that deliver lasting value.
|
||||
</p>
|
||||
{/* CTA Button - Left aligned for mobile */}
|
||||
<div className="primary-cta-container-left cta-left-locked">
|
||||
<PrimaryCTAButton
|
||||
text="Services Page"
|
||||
onClick={() => navigateTo('/services')}
|
||||
ariaLabel="Explore our services"
|
||||
className="services-cta-override"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Horizontal Scrollable Cards */}
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex gap-6 overflow-x-auto scrollbar-hide pb-4"
|
||||
style={{
|
||||
scrollSnapType: 'x mandatory',
|
||||
WebkitOverflowScrolling: 'touch'
|
||||
}}
|
||||
role="list"
|
||||
aria-label="Leadership development services"
|
||||
>
|
||||
{recognitionItems.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`recognition-card-mobile group focus-ring flex-shrink-0 ${isVisible ? 'animate-in' : ''}`}
|
||||
role="listitem"
|
||||
aria-labelledby={`recognition-title-mobile-${item.id}`}
|
||||
aria-describedby={`recognition-desc-mobile-${item.id}`}
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => handleKeyDown(e, index)}
|
||||
style={{
|
||||
scrollSnapAlign: 'start',
|
||||
width: '320px',
|
||||
transitionDelay: `${(index + 1) * 150}ms`,
|
||||
opacity: isVisible ? 1 : 0
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-6 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border bg-white h-full"
|
||||
style={{
|
||||
borderColor: 'var(--color-border)',
|
||||
borderRadius: '12px',
|
||||
fontFamily: 'var(--font-family-brand)'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div
|
||||
className="w-12 h-12 flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-primary)',
|
||||
borderRadius: '12px',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
{item.icon}
|
||||
</div>
|
||||
{item.badge && (
|
||||
<div
|
||||
className="px-2 py-1 text-xs font-bold uppercase tracking-wider"
|
||||
style={{
|
||||
backgroundColor: item.badgeColor,
|
||||
color: item.badgeColor === '#F8C301' ? 'var(--color-brand-black)' : 'white',
|
||||
borderRadius: '20px',
|
||||
fontFamily: 'var(--font-family-brand)'
|
||||
}}
|
||||
>
|
||||
{item.badge}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="recognition-card-content">
|
||||
<h3
|
||||
id={`recognition-title-mobile-${item.id}`}
|
||||
className="text-h4 mb-4"
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
<p
|
||||
id={`recognition-desc-mobile-${item.id}`}
|
||||
className="text-small text-muted leading-relaxed"
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
1955
src/components/LearningFacilityNew.tsx
Normal file
1955
src/components/LearningFacilityNew.tsx
Normal file
File diff suppressed because it is too large
Load Diff
@@ -58,65 +58,70 @@ interface NavLink {
|
||||
const navigationItems: NavLink[] = [
|
||||
{
|
||||
label: 'Services',
|
||||
items: [
|
||||
{
|
||||
label: 'Leadership Development',
|
||||
href: '/services/leadership-development',
|
||||
description: 'Executive and senior leadership programs',
|
||||
icon: Target
|
||||
},
|
||||
{
|
||||
label: 'Management Development',
|
||||
href: '/services/management-development',
|
||||
description: 'Middle management and team leader training',
|
||||
icon: Users
|
||||
},
|
||||
{
|
||||
label: 'Culture Competence',
|
||||
href: '/services/culture-competence',
|
||||
description: 'Building inclusive and high-performance cultures',
|
||||
icon: Heart
|
||||
},
|
||||
{
|
||||
label: 'Consulting',
|
||||
href: '/services/consulting',
|
||||
description: 'Strategic organizational transformation',
|
||||
icon: Lightbulb
|
||||
},
|
||||
{
|
||||
label: 'Executive Coaching',
|
||||
href: '/services/executive-coaching',
|
||||
description: 'Personalized leadership development',
|
||||
icon: GraduationCap
|
||||
}
|
||||
]
|
||||
// items: [
|
||||
// {
|
||||
// label: 'Leadership Development',
|
||||
// href: '/services/leadership-development',
|
||||
// description: 'Executive and senior leadership programs',
|
||||
// icon: Target
|
||||
// },
|
||||
// {
|
||||
// label: 'Management Development',
|
||||
// href: '/services/management-development',
|
||||
// description: 'Middle management and team leader training',
|
||||
// icon: Users
|
||||
// },
|
||||
// {
|
||||
// label: 'Culture Competence',
|
||||
// href: '/services/culture-competence',
|
||||
// description: 'Building inclusive and high-performance cultures',
|
||||
// icon: Heart
|
||||
// },
|
||||
// {
|
||||
// label: 'Consulting',
|
||||
// href: '/services/consulting',
|
||||
// description: 'Strategic organizational transformation',
|
||||
// icon: Lightbulb
|
||||
// },
|
||||
// {
|
||||
// label: 'Executive Coaching',
|
||||
// href: '/services/executive-coaching',
|
||||
// description: 'Personalized leadership development',
|
||||
// icon: GraduationCap
|
||||
// }
|
||||
// ]
|
||||
|
||||
// label: 'Online Courses',
|
||||
href: '/services'
|
||||
|
||||
},
|
||||
{
|
||||
label: 'About Us',
|
||||
items: [
|
||||
{
|
||||
label: 'Our Vision',
|
||||
href: '/about/our-vision',
|
||||
description: 'Our mission to transform leadership globally',
|
||||
icon: Eye
|
||||
},
|
||||
{
|
||||
label: 'Our Impact',
|
||||
href: '/about/our-impact',
|
||||
description: 'Real results and measurable outcomes',
|
||||
icon: TrendingUp
|
||||
},
|
||||
{
|
||||
label: 'Our Expertise',
|
||||
href: '/about/our-expertise',
|
||||
description: 'Industry-leading knowledge and experience',
|
||||
icon: Star
|
||||
}
|
||||
]
|
||||
// items: [
|
||||
// {
|
||||
// label: 'Our Vision',
|
||||
// href: '/about/our-vision',
|
||||
// description: 'Our mission to transform leadership globally',
|
||||
// icon: Eye
|
||||
// },
|
||||
// {
|
||||
// label: 'Our Impact',
|
||||
// href: '/about/our-impact',
|
||||
// description: 'Real results and measurable outcomes',
|
||||
// icon: TrendingUp
|
||||
// },
|
||||
// {
|
||||
// label: 'Our Expertise',
|
||||
// href: '/about/our-expertise',
|
||||
// description: 'Industry-leading knowledge and experience',
|
||||
// icon: Star
|
||||
// }
|
||||
// ]
|
||||
href: '/about-us'
|
||||
},
|
||||
{
|
||||
label: 'Learning Facility',
|
||||
href: '/services/learning-facility'
|
||||
href: '/learning-facility'
|
||||
},
|
||||
{
|
||||
label: 'Resources',
|
||||
|
||||
341
src/components/ServiceSectionNew.tsx
Normal file
341
src/components/ServiceSectionNew.tsx
Normal file
@@ -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: <Users size={28} />,
|
||||
badge: "CORE PROGRAM",
|
||||
badgeColor: "#F8C301"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Management Development",
|
||||
description: "Essential skills training for first-time and experienced managers seeking growth. Focus on communication, delegation, and performance management excellence.",
|
||||
icon: <Settings size={28} />,
|
||||
badge: "POPULAR",
|
||||
badgeColor: "#04045B"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Culture Competence",
|
||||
description: "Build cultural awareness and inclusive practices that enhance team collaboration. Navigate cultural differences with confidence and create inclusive environments.",
|
||||
icon: <Globe size={28} />,
|
||||
badge: "GLOBAL FOCUS",
|
||||
badgeColor: "#F8C301"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Executive Coaching",
|
||||
description: "One-on-one personalized development for senior leaders and high-potential talent. Strategic guidance for complex leadership challenges and career advancement.",
|
||||
icon: <User size={28} />,
|
||||
badge: "PREMIUM",
|
||||
badgeColor: "#04045B"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Communication Excellence",
|
||||
description: "Master the art of influential communication across all organizational levels. Develop presentation skills, difficult conversation navigation, and stakeholder engagement.",
|
||||
icon: <MessageSquare size={28} />,
|
||||
badge: "ESSENTIAL",
|
||||
badgeColor: "#F8C301"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Change Leadership",
|
||||
description: "Guide organizations through transformation with confidence and clarity. Learn frameworks for managing resistance, building momentum, and sustaining change initiatives.",
|
||||
icon: <GraduationCap size={28} />,
|
||||
badge: "STRATEGIC",
|
||||
badgeColor: "#04045B"
|
||||
}
|
||||
];
|
||||
|
||||
export function ServicesSectionNew() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Add card refs helper
|
||||
const addCardRef = (el: HTMLDivElement | null, index: number) => {
|
||||
cardRefs.current[index] = el;
|
||||
};
|
||||
|
||||
// Intersection observer for animations
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsVisible(true);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.2 }
|
||||
);
|
||||
|
||||
if (sectionRef.current) {
|
||||
observer.observe(sectionRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
// Keyboard navigation
|
||||
const handleKeyDown = (e: React.KeyboardEvent, index: number) => {
|
||||
if (e.key === 'ArrowDown' && index < cardRefs.current.length - 1) {
|
||||
cardRefs.current[index + 1]?.focus();
|
||||
e.preventDefault();
|
||||
} else if (e.key === 'ArrowUp' && index > 0) {
|
||||
cardRefs.current[index - 1]?.focus();
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={sectionRef}
|
||||
className="py-16 lg:py-20"
|
||||
style={{
|
||||
backgroundColor: '#F7F7FD',
|
||||
fontFamily: 'var(--font-family-brand)'
|
||||
}}
|
||||
aria-labelledby="recognition-section-heading"
|
||||
>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Desktop Layout - Grid with Sticky Sidebar */}
|
||||
<div className="hidden lg:grid grid-cols-12 gap-12 min-h-screen">
|
||||
{/* Left Side - Sticky Content */}
|
||||
<div className="col-span-5 sticky top-24 self-start">
|
||||
<div className="recognition-header pr-8">
|
||||
<BrandedTag
|
||||
text="Our Services"
|
||||
/>
|
||||
<h2
|
||||
id="recognition-section-heading"
|
||||
className="text-h2 mb-6"
|
||||
>
|
||||
Shaping Leaders, Cultures, and Institutions
|
||||
</h2>
|
||||
<p className="text-body-lg text-muted mb-8">
|
||||
No two institutions are alike — and neither are their leadership needs. That's why every KLC service is rooted in research, tailored to context, and aligned with strategy. From shaping leaders and managers to shaping culture, developing talent frameworks, and offering practical high impact learning, we partner with you to create leadership solutions that deliver lasting value.
|
||||
</p>
|
||||
{/* CTA Button - Left aligned */}
|
||||
<div className="primary-cta-container-left cta-left-locked">
|
||||
<PrimaryCTAButton
|
||||
text="Services Page"
|
||||
onClick={() => navigateTo('/services')}
|
||||
ariaLabel="Explore our services"
|
||||
className="services-cta-override"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Scrolling Cards */}
|
||||
<div className="col-span-7">
|
||||
<div
|
||||
className="recognition-cards space-y-6"
|
||||
role="list"
|
||||
aria-label="Leadership development services"
|
||||
>
|
||||
{recognitionItems.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
ref={(el) => addCardRef(el, index)}
|
||||
className={`recognition-card group scroll-animate-stagger focus-ring ${isVisible ? 'animate-in' : ''}`}
|
||||
role="listitem"
|
||||
aria-labelledby={`recognition-title-${item.id}`}
|
||||
aria-describedby={`recognition-desc-${item.id}`}
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => handleKeyDown(e, index)}
|
||||
style={{
|
||||
transitionDelay: `${(index + 1) * 150}ms`,
|
||||
opacity: isVisible ? 1 : 0
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-8 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border bg-white"
|
||||
style={{
|
||||
borderColor: 'var(--color-border)',
|
||||
borderRadius: '12px',
|
||||
fontFamily: 'var(--font-family-brand)'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div
|
||||
className="w-14 h-14 flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-primary)',
|
||||
borderRadius: '12px',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
{item.icon}
|
||||
</div>
|
||||
{item.badge && (
|
||||
<div
|
||||
className="px-3 py-1 text-xs font-bold uppercase tracking-wider"
|
||||
style={{
|
||||
backgroundColor: item.badgeColor,
|
||||
color: item.badgeColor === '#F8C301' ? 'var(--color-brand-black)' : 'white',
|
||||
borderRadius: '20px',
|
||||
fontFamily: 'var(--font-family-brand)'
|
||||
}}
|
||||
>
|
||||
{item.badge}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="recognition-card-content">
|
||||
<h3
|
||||
id={`recognition-title-${item.id}`}
|
||||
className="text-h4 mb-4"
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
<p
|
||||
id={`recognition-desc-${item.id}`}
|
||||
className="text-small text-muted leading-relaxed"
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Layout - Stacked Header + Horizontal Scrollable Cards */}
|
||||
<div className="lg:hidden">
|
||||
{/* Mobile Header */}
|
||||
<div className="text-center mb-8">
|
||||
<BrandedTag
|
||||
text="Our Services"
|
||||
/>
|
||||
<h2
|
||||
id="recognition-section-heading-mobile"
|
||||
className="text-h2 mb-6"
|
||||
>
|
||||
Shaping Leaders, Cultures, and Institutions
|
||||
</h2>
|
||||
<p className="text-body-lg text-muted mb-8">
|
||||
No two institutions are alike — and neither are their leadership needs. That's why every KLC service is rooted in research, tailored to context, and aligned with strategy. From shaping leaders and managers to shaping culture, developing talent frameworks, and offering practical high impact learning, we partner with you to create leadership solutions that deliver lasting value.
|
||||
</p>
|
||||
{/* CTA Button - Left aligned for mobile */}
|
||||
<div className="primary-cta-container-left cta-left-locked">
|
||||
<PrimaryCTAButton
|
||||
text="Services Page"
|
||||
onClick={() => navigateTo('/services')}
|
||||
ariaLabel="Explore our services"
|
||||
className="services-cta-override"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Horizontal Scrollable Cards */}
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex gap-6 overflow-x-auto scrollbar-hide pb-4"
|
||||
style={{
|
||||
scrollSnapType: 'x mandatory',
|
||||
WebkitOverflowScrolling: 'touch'
|
||||
}}
|
||||
role="list"
|
||||
aria-label="Leadership development services"
|
||||
>
|
||||
{recognitionItems.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`recognition-card-mobile group focus-ring flex-shrink-0 ${isVisible ? 'animate-in' : ''}`}
|
||||
role="listitem"
|
||||
aria-labelledby={`recognition-title-mobile-${item.id}`}
|
||||
aria-describedby={`recognition-desc-mobile-${item.id}`}
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => handleKeyDown(e, index)}
|
||||
style={{
|
||||
scrollSnapAlign: 'start',
|
||||
width: '320px',
|
||||
transitionDelay: `${(index + 1) * 150}ms`,
|
||||
opacity: isVisible ? 1 : 0
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="p-6 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border bg-white h-full"
|
||||
style={{
|
||||
borderColor: 'var(--color-border)',
|
||||
borderRadius: '12px',
|
||||
fontFamily: 'var(--font-family-brand)'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div
|
||||
className="w-12 h-12 flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-primary)',
|
||||
borderRadius: '12px',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
{item.icon}
|
||||
</div>
|
||||
{item.badge && (
|
||||
<div
|
||||
className="px-2 py-1 text-xs font-bold uppercase tracking-wider"
|
||||
style={{
|
||||
backgroundColor: item.badgeColor,
|
||||
color: item.badgeColor === '#F8C301' ? 'var(--color-brand-black)' : 'white',
|
||||
borderRadius: '20px',
|
||||
fontFamily: 'var(--font-family-brand)'
|
||||
}}
|
||||
>
|
||||
{item.badge}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="recognition-card-content">
|
||||
<h3
|
||||
id={`recognition-title-mobile-${item.id}`}
|
||||
className="text-h4 mb-4"
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
<p
|
||||
id={`recognition-desc-mobile-${item.id}`}
|
||||
className="text-small text-muted leading-relaxed"
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
331
src/components/Services.tsx
Normal file
331
src/components/Services.tsx
Normal file
@@ -0,0 +1,331 @@
|
||||
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 { BrandedTag } from './about/BrandedTag';
|
||||
import { PrimaryCTAButton } from './PrimaryCTAButton';
|
||||
import { CTABannerSection } from './CTABannerSection';
|
||||
import { navigateTo } from './Router';
|
||||
|
||||
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: 'Design a Leadership Journey for Your Institution',
|
||||
downloadTitle: 'Case Study: How a BFSI Major Built its Next-Gen Leadership Pipeline',
|
||||
route: '/services/leadership-development'
|
||||
},
|
||||
{
|
||||
id: 'assessments-pipeline',
|
||||
icon: Target,
|
||||
title: 'Assessments & Leadership Pipeline',
|
||||
description: 'Knowing your leaders is the first step to shaping your future. KLC\'s assessment solutions — from 360-degree feedback to Development Centres — provide a clear view of leadership potential and performance. We don\'t just assess; we build actionable pathways for growth. Our pipeline development methods ensure succession is never left to chance, but actively cultivated to secure continuity and competitiveness.',
|
||||
ctaText: 'Assess and Strengthen Your Leadership Bench',
|
||||
downloadTitle: 'Case Study: Leadership Assessment & Succession Planning in a Top NBFC',
|
||||
route: '/contact'
|
||||
},
|
||||
{
|
||||
id: 'management-development',
|
||||
icon: TrendingUp,
|
||||
title: 'Management Development Programs (MDP)',
|
||||
description: 'Managers form the backbone of every organisation. Our Management Development Programs strengthen this backbone by equipping managers with the capabilities to lead teams, handle complexity, and deliver consistent results. Rooted in research and practice, our programs blend coaching, peer learning, and simulation-based workshops to help managers grow into confident leaders.',
|
||||
ctaText: 'Build Managerial Calibre in Your Teams',
|
||||
downloadTitle: 'Case Study: Developing 400 Mid-Level Managers at a Global Manufacturing Firm',
|
||||
route: '/services/management-development'
|
||||
},
|
||||
{
|
||||
id: 'culture-competence',
|
||||
icon: Building2,
|
||||
title: 'Culture & Competence Consulting',
|
||||
description: 'Institutions thrive when culture and competence are aligned to strategy. We partner with organisations to define, assess, and embed the cultural and competence frameworks that accelerate growth. From diagnosing culture to shaping values-in-action, our approach ensures leaders model the right behaviours and teams deliver with synergy.',
|
||||
ctaText: 'Align Your Culture with Business Growth',
|
||||
downloadTitle: 'Case Study: Embedding a Culture of Customer-Centricity in an ITES Giant',
|
||||
route: '/services/culture-competence'
|
||||
},
|
||||
{
|
||||
id: 'coaching-mentoring',
|
||||
icon: MessageCircle,
|
||||
title: 'Coaching & Mentoring',
|
||||
description: 'Every leader needs a trusted space to reflect, reset, and grow. Our coaching and mentoring services create that space, helping leaders navigate transitions, build influence, and manage complex workplace relationships. With ICF-aligned coaching practices and decades of leadership experience, KLC coaches enable leaders to strengthen their impact on both business results and institutional culture.',
|
||||
ctaText: 'Book a Leadership Coaching Conversation',
|
||||
downloadTitle: 'Case Study: Coaching Senior Leaders Through Organisational Transition',
|
||||
route: '/services/executive-coaching'
|
||||
}
|
||||
];
|
||||
|
||||
const caseStudies = [
|
||||
{
|
||||
title: 'Case Study on Mid-Sized Bank',
|
||||
description: 'Comprehensive leadership development and culture transformation initiative',
|
||||
format: 'PDF'
|
||||
},
|
||||
{
|
||||
title: 'Case Study on Leading Insurance Company',
|
||||
description: 'Strategic leadership pipeline development and succession planning',
|
||||
format: 'PDF'
|
||||
},
|
||||
{
|
||||
title: 'Case Study on Leading Private Sector Bank',
|
||||
description: 'Management development and organizational capability building',
|
||||
format: 'PDF'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ backgroundColor: '#FFFFFF', fontFamily: 'var(--font-family-base)' }}>
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-[85vh] flex flex-col">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<div
|
||||
className="w-full h-full bg-cover bg-center bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: `url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1920&h=1080&fit=crop')`
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/70 to-black/60"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex-1 flex items-center">
|
||||
<div className="container mx-auto section-margin-x">
|
||||
<div className="text-center max-w-5xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: isVisible ? 1 : 0, y: isVisible ? 0 : 30 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<div className="branded-tag-system-white mb-8 justify-center">
|
||||
<div className="dot"></div>
|
||||
<span className="text">Our Services</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-h1-white mb-6">
|
||||
Building Leadership Capacity<br />
|
||||
That Drives Results
|
||||
</h1>
|
||||
|
||||
<p className="text-body-lg-white mb-8 max-w-3xl mx-auto">
|
||||
At Kautilya Leadership Centre, we enable institutions and individuals to build leadership capacity,
|
||||
align culture with strategy, and create enduring value. Our services span leadership development,
|
||||
consulting, coaching, assessments, and digital learning — each designed with research, context, and practice at the core.
|
||||
</p>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<PrimaryCTAButton
|
||||
text="Explore Our Approach"
|
||||
onClick={() => navigateTo('/contact')}
|
||||
ariaLabel="Contact us to explore our services approach"
|
||||
className="cta-text-white"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services Overview Section */}
|
||||
<section className="py-20 lg:py-28" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
|
||||
{/* Services Grid */}
|
||||
<div className="space-y-24">
|
||||
{services.map((service, index) => (
|
||||
<motion.div
|
||||
key={service.id}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="max-w-7xl mx-auto"
|
||||
>
|
||||
<div className={`grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start ${index % 2 === 1 ? 'lg:direction-reverse' : ''
|
||||
}`}>
|
||||
|
||||
{/* Content Section */}
|
||||
<div className={`lg:col-span-7 ${index % 2 === 1 ? 'lg:col-start-6 lg:order-2' : 'lg:col-start-1 lg:order-1'
|
||||
}`}>
|
||||
{/* Icon and Title - Side by Side */}
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div
|
||||
className="w-16 h-16 rounded-xl flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
>
|
||||
<service.icon className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-h2 leading-tight">{service.title}</h2>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-body-lg text-muted mb-8 leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="mb-8 primary-cta-container-left cta-left-locked">
|
||||
<PrimaryCTAButton
|
||||
text={service.ctaText}
|
||||
onClick={() => navigateTo('/contact')}
|
||||
ariaLabel={`Contact us about ${service.title}`}
|
||||
className="cta-text-black"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Download Resource */}
|
||||
<button
|
||||
className="w-full p-6 bg-gray-50 rounded-xl border border-gray-100 hover:shadow-lg hover:shadow-primary/10 hover:border-primary/20 transition-all duration-300 cursor-pointer group text-left"
|
||||
onClick={() => {/* Handle download */ }}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0 transition-all duration-300 relative overflow-hidden">
|
||||
<Download className="w-6 h-6 text-primary group-hover:animate-download-arrows" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-2">
|
||||
Downloadable Resource
|
||||
</h4>
|
||||
<p className="text-small text-muted">
|
||||
{service.downloadTitle}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Image Section */}
|
||||
<div className={`lg:col-span-5 ${index % 2 === 1 ? 'lg:col-start-1 lg:order-1' : 'lg:col-start-8 lg:order-2'
|
||||
}`}>
|
||||
<div className="relative">
|
||||
<div
|
||||
className="w-full aspect-[4/3] rounded-2xl bg-cover bg-center bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: `url('https://images.unsplash.com/photo-${index === 0 ? '1522071820-d3ca7b99e0dd' : // leadership team
|
||||
index === 1 ? '1551836022-d5d88e9218df' : // assessment/analytics
|
||||
index === 2 ? '1600880292203-757bb62b4baf' : // management meeting
|
||||
index === 3 ? '1552664730-d307ca884978' : // culture/team
|
||||
'1573496359142-b8d87734a5a2' // coaching
|
||||
}?w=800&h=600&fit=crop')`
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-transparent rounded-2xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Case Studies Section */}
|
||||
<section className="py-20" style={{ backgroundColor: '#F8F9FA' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<div className="branded-tag-system mb-6 justify-center">
|
||||
<div className="dot"></div>
|
||||
<span className="text">Case Studies</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-h2 mb-6">
|
||||
Real Impact, Real Results
|
||||
</h2>
|
||||
|
||||
<p className="text-body-lg text-muted max-w-2xl mx-auto">
|
||||
Discover how we've helped organizations transform their leadership capabilities
|
||||
and drive sustainable business growth.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{caseStudies.map((caseStudy, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-lg transition-shadow cursor-pointer"
|
||||
onClick={() => {/* Handle case study view */ }}
|
||||
>
|
||||
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
|
||||
<Award className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-h4 mb-3">{caseStudy.title}</h3>
|
||||
|
||||
<p className="text-small text-muted mb-4">
|
||||
{caseStudy.description}
|
||||
</p>
|
||||
|
||||
<button
|
||||
className="w-full flex items-center justify-between p-3 bg-gray-50 hover:bg-primary/5 border border-gray-100 hover:border-primary/20 rounded-lg transition-all duration-300 cursor-pointer group"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
/* Handle download */
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-primary/10 group-hover:bg-primary/20 rounded-md flex items-center justify-center transition-colors duration-300">
|
||||
<Download className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="text-sm font-medium text-gray-900 group-hover:text-primary transition-colors duration-300">
|
||||
Download {caseStudy.format}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
Case Study Document
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ArrowRight className="w-4 h-4 text-gray-400 group-hover:text-primary transition-colors duration-300" />
|
||||
</button>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* CTA Banner Section */}
|
||||
<CTABannerSection />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -14,6 +14,9 @@ import { BrandedTag } from '../about/BrandedTag';
|
||||
import { PrimaryCTAButton } from '../PrimaryCTAButton';
|
||||
import { TestimonialsSection } from '../TestimonialsSection';
|
||||
import { CTABannerSection } from '../CTABannerSection';
|
||||
import Slider from "react-slick";
|
||||
// import ImageWithFallback from "./ImageWithFallback"; // your custom component
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
CheckCircle,
|
||||
@@ -46,7 +49,22 @@ import {
|
||||
TreePine,
|
||||
Bed
|
||||
} from 'lucide-react';
|
||||
|
||||
const images = [
|
||||
"https://images.unsplash.com/photo-1590490360182-c33d57733427?w=1920&h=1080&fit=crop",
|
||||
"https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1920&h=1080&fit=crop",
|
||||
"https://images.unsplash.com/photo-1557682224-5b8590cd9ec5?w=1920&h=1080&fit=crop",
|
||||
];
|
||||
const settings = {
|
||||
dots: false,
|
||||
infinite: true,
|
||||
speed: 2000,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 4000,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
fade: true, // smooth fade transition
|
||||
arrows: false,
|
||||
};
|
||||
const offerings = [
|
||||
{
|
||||
title: "Training Halls & Spaces",
|
||||
@@ -484,6 +502,7 @@ export function LearningFacility() {
|
||||
{/* Hero Section */}
|
||||
{/* Service-style hero: full-bleed image with dark gradient, centered content, and stat strip */}
|
||||
<section className="relative min-h-[90vh] flex flex-col" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
|
||||
{/* Background image + overlay */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<ImageWithFallback
|
||||
@@ -491,9 +510,11 @@ export function LearningFacility() {
|
||||
alt="KLC Learning Facility - campus and interiors"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/70 to-black/60"></div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Centered content */}
|
||||
<div className="relative z-10 flex-1 flex items-center">
|
||||
<div className="container mx-auto section-margin-x">
|
||||
@@ -1353,7 +1374,7 @@ export function LearningFacility() {
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="teamSize">Team Size</Label>
|
||||
<Select value={bookingForm.teamSize} onValueChange={(value) => setBookingForm({ ...bookingForm, teamSize: value })}>
|
||||
<Select value={bookingForm.teamSize} onValueChange={(value: any) => setBookingForm({ ...bookingForm, teamSize: value })}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select size" />
|
||||
</SelectTrigger>
|
||||
@@ -1370,7 +1391,7 @@ export function LearningFacility() {
|
||||
|
||||
<div>
|
||||
<Label htmlFor="facilityZone">Preferred Zone</Label>
|
||||
<Select value={bookingForm.facilityZone} onValueChange={(value) => setBookingForm({ ...bookingForm, facilityZone: value })}>
|
||||
<Select value={bookingForm.facilityZone} onValueChange={(value: any) => setBookingForm({ ...bookingForm, facilityZone: value })}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select zone" />
|
||||
</SelectTrigger>
|
||||
@@ -1495,7 +1516,7 @@ export function LearningFacility() {
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="teamSize" className="text-body font-medium">Expected Group Size *</Label>
|
||||
<Select value={bookingForm.teamSize} onValueChange={(value) => setBookingForm({ ...bookingForm, teamSize: value })}>
|
||||
<Select value={bookingForm.teamSize} onValueChange={(value: any) => setBookingForm({ ...bookingForm, teamSize: value })}>
|
||||
<SelectTrigger className="text-body">
|
||||
<SelectValue placeholder="Select group size" />
|
||||
</SelectTrigger>
|
||||
@@ -1512,7 +1533,7 @@ export function LearningFacility() {
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="facilityZone" className="text-body font-medium">Preferred Learning Zone</Label>
|
||||
<Select value={bookingForm.facilityZone} onValueChange={(value) => setBookingForm({ ...bookingForm, facilityZone: value })}>
|
||||
<Select value={bookingForm.facilityZone} onValueChange={(value: any) => setBookingForm({ ...bookingForm, facilityZone: value })}>
|
||||
<SelectTrigger className="text-body">
|
||||
<SelectValue placeholder="Select preferred zone (optional)" />
|
||||
</SelectTrigger>
|
||||
|
||||
104
src/pages/HomePageNew.tsx
Normal file
104
src/pages/HomePageNew.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
// import { navigateTo } from './Router';
|
||||
import { navigateTo } from '../components/Router';
|
||||
import svgPaths from "../imports/svg-i1joeov37f";
|
||||
import { StatsSection } from '../components/StatsSection';
|
||||
import { LogosSection } from '../components/LogosSection';
|
||||
import { ServicesSection } from '../components/ServicesSection';
|
||||
import { ServicesSectionNew } from '../components/ServiceSectionNew';
|
||||
import { LearningEnvionment } from '../components/LearningEnvionment';
|
||||
import { motion } from "motion/react";
|
||||
import { BrandedTag } from '../components/about/BrandedTag';
|
||||
import { PrimaryCTAButton } from '../components/PrimaryCTAButton';
|
||||
import { VirtualSpaceSection } from '../components/VirtualSpaceSection';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import HeroSection from '../components/HeroSection';
|
||||
interface SlideData {
|
||||
id: number;
|
||||
title: string;
|
||||
backgroundImage: string;
|
||||
shortTitle: string;
|
||||
ctaText: string;
|
||||
}
|
||||
|
||||
export default function HomePageNew() {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const navigate = useNavigate()
|
||||
return (
|
||||
<>
|
||||
<HeroSection />
|
||||
<StatsSection />
|
||||
<LogosSection />
|
||||
<ServicesSectionNew />
|
||||
{/* <LearningEnvionment /> */}
|
||||
<div>
|
||||
<div className="mx-auto text-center py-16 px-4 bg-gradient-to-r from-blue-900 via-gray-400 to-black exp-our-head-tab-sec" >
|
||||
{/* Branded Tag */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<BrandedTag
|
||||
text="Virtual Learning Environment"
|
||||
className="justify-center"
|
||||
variant="white"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Main Heading */}
|
||||
<motion.h2
|
||||
className="text-5xl font-bold leading-tight mb-4 max-lg:text-4xl max-md:text-3xl text-white"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
Experience Our Space Virtually
|
||||
</motion.h2>
|
||||
|
||||
{/* Subheading */}
|
||||
<motion.p
|
||||
className="text-lg leading-relaxed max-w-2xl mx-auto max-lg:text-base mb-6 text-white/90"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
Take a virtual walk through our state-of-the-art facility designed to inspire leadership excellence and foster collaborative learning.
|
||||
</motion.p>
|
||||
|
||||
{/* Main CTA Button - Explore Our Space */}
|
||||
<motion.div
|
||||
className="flex justify-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="hero-slide-button">
|
||||
<PrimaryCTAButton
|
||||
text="Explore Our Space"
|
||||
onClick={() => navigate('/services/learning-facility')}
|
||||
ariaLabel="Explore our virtual learning space and facilities"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
<VirtualSpaceSection />
|
||||
</div>
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user