diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6b892d6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,32 @@ +# Node modules +node_modules/ + +# Logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +# Environment files +.env +.env.local +.env.*.local + +# Build output +dist/ +build/ +.next/ +out/ + +# IDE files +.vscode/ +.idea/ +*.swp + +# Mac / Linux / Windows system files +.DS_Store +Thumbs.db + +# Temporary +*.tmp diff --git a/README.md b/README.md new file mode 100644 index 0000000..308126e --- /dev/null +++ b/README.md @@ -0,0 +1,11 @@ + + # KLC Public website + + This is a code bundle for KLC Public website. The original project is available at https://www.figma.com/design/HKsCupXQAAtHdsmq0gcuEE/KLC-Public-website. + + ## Running the code + + Run `npm i` to install the dependencies. + + Run `npm run dev` to start the development server. + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..0196ba8 --- /dev/null +++ b/index.html @@ -0,0 +1,15 @@ + + + + + + + KLC Public website + + + +
+ + + + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..b3d93bd --- /dev/null +++ b/package.json @@ -0,0 +1,73 @@ +{ + "name": "KLC Public website", + "version": "0.1.0", + "private": true, + "dependencies": { + "@radix-ui/react-accordion": "^1.2.3", + "@radix-ui/react-alert-dialog": "^1.1.6", + "@radix-ui/react-aspect-ratio": "^1.1.2", + "@radix-ui/react-avatar": "^1.1.3", + "@radix-ui/react-checkbox": "^1.1.4", + "@radix-ui/react-collapsible": "^1.1.3", + "@radix-ui/react-context-menu": "^2.2.6", + "@radix-ui/react-dialog": "^1.1.6", + "@radix-ui/react-dropdown-menu": "^2.1.6", + "@radix-ui/react-hover-card": "^1.1.6", + "@radix-ui/react-label": "^2.1.2", + "@radix-ui/react-menubar": "^1.1.6", + "@radix-ui/react-navigation-menu": "^1.2.5", + "@radix-ui/react-popover": "^1.1.6", + "@radix-ui/react-progress": "^1.1.2", + "@radix-ui/react-radio-group": "^1.2.3", + "@radix-ui/react-scroll-area": "^1.2.3", + "@radix-ui/react-select": "^2.1.6", + "@radix-ui/react-separator": "^1.1.2", + "@radix-ui/react-slider": "^1.2.3", + "@radix-ui/react-slot": "^1.1.2", + "@radix-ui/react-switch": "^1.1.3", + "@radix-ui/react-tabs": "^1.1.3", + "@radix-ui/react-toggle": "^1.1.2", + "@radix-ui/react-toggle-group": "^1.1.2", + "@radix-ui/react-tooltip": "^1.1.8", + "@reduxjs/toolkit": "^2.9.0", + "@tailwindcss/postcss": "^4.1.12", + "class-variance-authority": "^0.7.1", + "clsx": "*", + "cmdk": "^1.1.1", + "embla-carousel-react": "^8.6.0", + "input-otp": "^1.4.2", + "lucide-react": "^0.487.0", + "motion": "*", + "next-themes": "^0.4.6", + "postcss": "^8.5.6", + "react": "^18.3.1", + "react-day-picker": "^8.10.1", + "react-dom": "^18.3.1", + "react-hook-form": "^7.55.0", + "react-redux": "^9.2.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", + "three": "^0.183.2", + "vaul": "^1.1.2" + }, + "devDependencies": { + "@types/node": "^20.10.0", + "@types/react": "^19.1.12", + "@types/react-dom": "^19.1.8", + "@types/react-slick": "^0.23.13", + "@types/three": "^0.183.1", + "@vitejs/plugin-react": "^5.0.2", + "@vitejs/plugin-react-swc": "^3.10.2", + "vite": "^6.3.5" + }, + "scripts": { + "dev": "vite", + "build": "vite build" + } +} diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 0000000..7e0ba62 --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,5 @@ +export default { + plugins: { + "@tailwindcss/postcss": {}, + } +} diff --git a/src/.figma_internal/BuildYourLeadershipPipelineButton-85-893.tsx b/src/.figma_internal/BuildYourLeadershipPipelineButton-85-893.tsx new file mode 100644 index 0000000..22d592a --- /dev/null +++ b/src/.figma_internal/BuildYourLeadershipPipelineButton-85-893.tsx @@ -0,0 +1,79 @@ +import svgPaths from "./svg-9nb29n5e63"; + +function Frame1597884903() { + return ( +
+
+

+ Build Your Leadership Pipeline +

+
+
+

+ Build Your Leadership Pipeline +

+
+
+ ); +} + +function Frame18() { + return ( +
+
+
+
+ + + +
+
+
+
+
+
+ + + +
+
+
+
+ ); +} + +export default function BuildYourLeadershipPipelineButton() { + return ( +
+ + +
+ ); +} \ No newline at end of file diff --git a/src/.figma_internal/BuildYourLeadershipPipelineButton-85-957.tsx b/src/.figma_internal/BuildYourLeadershipPipelineButton-85-957.tsx new file mode 100644 index 0000000..e400db9 --- /dev/null +++ b/src/.figma_internal/BuildYourLeadershipPipelineButton-85-957.tsx @@ -0,0 +1,79 @@ +import svgPaths from "./svg-sphymsws2o"; + +function Frame1597884903() { + return ( +
+
+

+ Build Your Leadership Pipeline +

+
+
+

+ Build Your Leadership Pipeline +

+
+
+ ); +} + +function Frame18() { + return ( +
+
+
+
+ + + +
+
+
+
+
+
+ + + +
+
+
+
+ ); +} + +export default function BuildYourLeadershipPipelineButton() { + return ( +
+ + +
+ ); +} \ No newline at end of file diff --git a/src/.figma_internal/BuildYourLeadershipPipelineButton.tsx b/src/.figma_internal/BuildYourLeadershipPipelineButton.tsx new file mode 100644 index 0000000..afc1ab7 --- /dev/null +++ b/src/.figma_internal/BuildYourLeadershipPipelineButton.tsx @@ -0,0 +1,79 @@ +import svgPaths from "./svg-k5kyhbfrwc"; + +function Frame1597884903() { + return ( +
+
+

+ Build Your Leadership Pipeline +

+
+
+

+ Build Your Leadership Pipeline +

+
+
+ ); +} + +function Frame18() { + return ( +
+
+
+
+ + + +
+
+
+
+
+
+ + + +
+
+
+
+ ); +} + +export default function BuildYourLeadershipPipelineButton() { + return ( +
+ + +
+ ); +} \ No newline at end of file diff --git a/src/.figma_internal/OurApproachSection.tsx b/src/.figma_internal/OurApproachSection.tsx new file mode 100644 index 0000000..4640881 --- /dev/null +++ b/src/.figma_internal/OurApproachSection.tsx @@ -0,0 +1,178 @@ +function Frame1597884955() { + return ( +
+
+

Our Approach

+
+
+

+ Programmatic journey over 6–12 weeks combining practical application with peer learning for maximum management + effectiveness. +

+
+
+ ); +} + +function Component01() { + return ( +
+
+

+ Comprehensive assessment of current management skills and development needs +

+
+
+

(01)

+
+
+

{`Skills `}

+

Assessment

+
+
+
+ + + +
+
+
+ ); +} + +function Component02() { + return ( +
+
+

+ Customized curriculum design based on assessment results and operational context +

+
+
+

(02)

+
+
+

{`Program `}

+

Design

+
+
+
+ + + +
+
+
+ ); +} + +function Component03() { + return ( +
+
+

+ Hands-on workshops and peer learning sessions with real-world application +

+
+
+

(03)

+
+
+

{`Interactive `}

+

Learning

+
+
+
+ + + +
+
+
+ ); +} + +function Component04() { + return ( +
+
+

+ Ongoing support and progress tracking to ensure skills transfer and improvement +

+
+
+

(04)

+
+
+

{`Application & `}

+

Review

+
+
+
+ + + +
+
+
+ ); +} + +function Frame1597884956() { + return ( +
+ + + + +
+ ); +} + +export default function OurApproachSection() { + return ( +
+ + +
+ ); +} \ No newline at end of file diff --git a/src/.figma_internal/svg-9nb29n5e63.ts b/src/.figma_internal/svg-9nb29n5e63.ts new file mode 100644 index 0000000..7c56791 --- /dev/null +++ b/src/.figma_internal/svg-9nb29n5e63.ts @@ -0,0 +1,4 @@ +export default { +p177af00: "M24.7045 12.0426L12.5992 0L0.493934 12.0426C0.35111 12.1514 0.233321 12.2895 0.148542 12.4478C0.0637634 12.606 0.0139736 12.7806 0.00254296 12.9598C-0.00888768 13.1389 0.0183085 13.3185 0.0822895 13.4862C0.14627 13.6539 0.245543 13.806 0.373386 13.932C0.501229 14.058 0.654659 14.1551 0.823287 14.2167C0.991916 14.2783 1.17181 14.3029 1.35078 14.2889C1.52975 14.2749 1.70363 14.2226 1.86065 14.1356C2.01766 14.0486 2.15414 13.9288 2.26085 13.7845L11.3461 4.77444V28.7469C11.3461 29.0792 11.4781 29.398 11.7131 29.633C11.9481 29.868 12.2668 30 12.5992 30C12.9315 30 13.2503 29.868 13.4853 29.633C13.7203 29.398 13.8523 29.0792 13.8523 28.7469V4.77444L22.9375 13.7845C23.1735 14.0188 23.4929 14.1497 23.8254 14.1486C24.158 14.1474 24.4764 14.0142 24.7107 13.7782C24.945 13.5422 25.076 13.2228 25.0748 12.8903C25.0737 12.5578 24.9404 12.2393 24.7045 12.005V12.0426Z", +pac4fa00: "M16.4696 8.0284L8.39946 0L0.329289 8.0284C0.234073 8.10091 0.155547 8.19303 0.0990282 8.29852C0.042509 8.40402 0.00931573 8.52042 0.00169531 8.63986C-0.00592512 8.7593 0.0122057 8.87898 0.0548596 8.9908C0.0975136 9.10262 0.163695 9.20397 0.248924 9.28799C0.334153 9.37201 0.436439 9.43674 0.548858 9.47779C0.661277 9.51884 0.781204 9.53526 0.90052 9.52594C1.01984 9.51661 1.13576 9.48176 1.24043 9.42374C1.34511 9.36572 1.43609 9.28588 1.50723 9.18964L7.56404 3.18296V19.1646C7.56404 19.3861 7.65206 19.5986 7.80873 19.7553C7.9654 19.912 8.1779 20 8.39946 20C8.62103 20 8.83352 19.912 8.9902 19.7553C9.14687 19.5986 9.23488 19.3861 9.23488 19.1646V3.18296L15.2917 9.18964C15.449 9.34585 15.6619 9.43316 15.8836 9.43238C16.1053 9.43159 16.3176 9.34278 16.4738 9.18546C16.63 9.02815 16.7173 8.81523 16.7166 8.59354C16.7158 8.37185 16.627 8.15955 16.4696 8.00334V8.0284Z", +} diff --git a/src/.figma_internal/svg-k5kyhbfrwc.ts b/src/.figma_internal/svg-k5kyhbfrwc.ts new file mode 100644 index 0000000..7c56791 --- /dev/null +++ b/src/.figma_internal/svg-k5kyhbfrwc.ts @@ -0,0 +1,4 @@ +export default { +p177af00: "M24.7045 12.0426L12.5992 0L0.493934 12.0426C0.35111 12.1514 0.233321 12.2895 0.148542 12.4478C0.0637634 12.606 0.0139736 12.7806 0.00254296 12.9598C-0.00888768 13.1389 0.0183085 13.3185 0.0822895 13.4862C0.14627 13.6539 0.245543 13.806 0.373386 13.932C0.501229 14.058 0.654659 14.1551 0.823287 14.2167C0.991916 14.2783 1.17181 14.3029 1.35078 14.2889C1.52975 14.2749 1.70363 14.2226 1.86065 14.1356C2.01766 14.0486 2.15414 13.9288 2.26085 13.7845L11.3461 4.77444V28.7469C11.3461 29.0792 11.4781 29.398 11.7131 29.633C11.9481 29.868 12.2668 30 12.5992 30C12.9315 30 13.2503 29.868 13.4853 29.633C13.7203 29.398 13.8523 29.0792 13.8523 28.7469V4.77444L22.9375 13.7845C23.1735 14.0188 23.4929 14.1497 23.8254 14.1486C24.158 14.1474 24.4764 14.0142 24.7107 13.7782C24.945 13.5422 25.076 13.2228 25.0748 12.8903C25.0737 12.5578 24.9404 12.2393 24.7045 12.005V12.0426Z", +pac4fa00: "M16.4696 8.0284L8.39946 0L0.329289 8.0284C0.234073 8.10091 0.155547 8.19303 0.0990282 8.29852C0.042509 8.40402 0.00931573 8.52042 0.00169531 8.63986C-0.00592512 8.7593 0.0122057 8.87898 0.0548596 8.9908C0.0975136 9.10262 0.163695 9.20397 0.248924 9.28799C0.334153 9.37201 0.436439 9.43674 0.548858 9.47779C0.661277 9.51884 0.781204 9.53526 0.90052 9.52594C1.01984 9.51661 1.13576 9.48176 1.24043 9.42374C1.34511 9.36572 1.43609 9.28588 1.50723 9.18964L7.56404 3.18296V19.1646C7.56404 19.3861 7.65206 19.5986 7.80873 19.7553C7.9654 19.912 8.1779 20 8.39946 20C8.62103 20 8.83352 19.912 8.9902 19.7553C9.14687 19.5986 9.23488 19.3861 9.23488 19.1646V3.18296L15.2917 9.18964C15.449 9.34585 15.6619 9.43316 15.8836 9.43238C16.1053 9.43159 16.3176 9.34278 16.4738 9.18546C16.63 9.02815 16.7173 8.81523 16.7166 8.59354C16.7158 8.37185 16.627 8.15955 16.4696 8.00334V8.0284Z", +} diff --git a/src/.figma_internal/svg-sphymsws2o.ts b/src/.figma_internal/svg-sphymsws2o.ts new file mode 100644 index 0000000..7c56791 --- /dev/null +++ b/src/.figma_internal/svg-sphymsws2o.ts @@ -0,0 +1,4 @@ +export default { +p177af00: "M24.7045 12.0426L12.5992 0L0.493934 12.0426C0.35111 12.1514 0.233321 12.2895 0.148542 12.4478C0.0637634 12.606 0.0139736 12.7806 0.00254296 12.9598C-0.00888768 13.1389 0.0183085 13.3185 0.0822895 13.4862C0.14627 13.6539 0.245543 13.806 0.373386 13.932C0.501229 14.058 0.654659 14.1551 0.823287 14.2167C0.991916 14.2783 1.17181 14.3029 1.35078 14.2889C1.52975 14.2749 1.70363 14.2226 1.86065 14.1356C2.01766 14.0486 2.15414 13.9288 2.26085 13.7845L11.3461 4.77444V28.7469C11.3461 29.0792 11.4781 29.398 11.7131 29.633C11.9481 29.868 12.2668 30 12.5992 30C12.9315 30 13.2503 29.868 13.4853 29.633C13.7203 29.398 13.8523 29.0792 13.8523 28.7469V4.77444L22.9375 13.7845C23.1735 14.0188 23.4929 14.1497 23.8254 14.1486C24.158 14.1474 24.4764 14.0142 24.7107 13.7782C24.945 13.5422 25.076 13.2228 25.0748 12.8903C25.0737 12.5578 24.9404 12.2393 24.7045 12.005V12.0426Z", +pac4fa00: "M16.4696 8.0284L8.39946 0L0.329289 8.0284C0.234073 8.10091 0.155547 8.19303 0.0990282 8.29852C0.042509 8.40402 0.00931573 8.52042 0.00169531 8.63986C-0.00592512 8.7593 0.0122057 8.87898 0.0548596 8.9908C0.0975136 9.10262 0.163695 9.20397 0.248924 9.28799C0.334153 9.37201 0.436439 9.43674 0.548858 9.47779C0.661277 9.51884 0.781204 9.53526 0.90052 9.52594C1.01984 9.51661 1.13576 9.48176 1.24043 9.42374C1.34511 9.36572 1.43609 9.28588 1.50723 9.18964L7.56404 3.18296V19.1646C7.56404 19.3861 7.65206 19.5986 7.80873 19.7553C7.9654 19.912 8.1779 20 8.39946 20C8.62103 20 8.83352 19.912 8.9902 19.7553C9.14687 19.5986 9.23488 19.3861 9.23488 19.1646V3.18296L15.2917 9.18964C15.449 9.34585 15.6619 9.43316 15.8836 9.43238C16.1053 9.43159 16.3176 9.34278 16.4738 9.18546C16.63 9.02815 16.7173 8.81523 16.7166 8.59354C16.7158 8.37185 16.627 8.15955 16.4696 8.00334V8.0284Z", +} diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..9d99916 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,165 @@ +import { Route, Routes, useNavigate } from "react-router-dom"; +import { OurExpertise } from "./components/about/OurExpertise"; +import { OurImpact } from "./components/about/OurImpact"; +import { OurVision } from "./components/about/OurVision"; +import { AIChatbot } from "./components/AIChatbot"; +import { Articles } from "./components/Articles"; +import { AuthProvider } from "./components/AuthContext"; +import { BlogDetail } from "./components/BlogDetail"; +import { Blogs } from "./components/Blogs"; +import { Cart } from "./components/Cart"; +import { CartProvider } from "./components/CartContext"; +import { Contact } from "./components/Contact"; +import { CorporateSignIn } from "./components/CorporateSignIn"; +import { CorporateSignUp } from "./components/CorporateSignUp"; +import { Footer } from "./components/Footer"; +import { LeadershipJourneyPage } from "./components/LeadershipJourneyPage"; +import { LearningOnline } from "./components/LearningOnline"; +import { Navigation } from "./components/Navigation"; +import { ProgrammeDetail } from "./components/ProgrammeDetail"; +import { SelfLearnerSignIn } from "./components/SelfLearnerSignIn"; +import { SelfLearnerSignUp } from "./components/SelfLearnerSignUp"; +import { Consulting } from "./components/services/Consulting"; +import { CultureCompetence } from "./components/services/CultureCompetence"; +import { ExecutiveCoaching } from "./components/services/ExecutiveCoaching"; +import { LearningFacility } from "./components/services/LearningFacility"; +import { ManagementDevelopment } from "./components/services/ManagementDevelopment"; +import { Terms } from "./components/Terms"; +import { Webinars } from "./components/Webinars"; +import WebinarsListing from "./components/WebinarsListing"; +import { WebinarsPage } from "./components/WebinarsPage"; +import HomePage from './pages/HomePage'; +import { AboutUs } from './components/AboutUs'; +import { Services } from './components/Services'; +import { LearningFacilityNew } from './components/LearningFacilityNew'; +import { FooterNew } from './components/FooterNew'; +import { Privacy } from "./pages/Privacy"; +import { TermsCondition } from "./pages/TermsCondition"; +import { FAQ } from "./pages/FAQ"; +import { LeadershipPipelineDevelopment } from "./components/services/LeadershipPipelineDevelopment"; +import { LeadershipDevelopment } from "./components/services/LeadershipDevelopment"; +import { KautilyaFacility } from "./components/KautilyaFacility"; +// import EnrollPlaceholder from "./components/EnrollPlaceholder"; +// import ForgotPasswordPlaceholder from "./components/ForgotPasswordPlaceholder"; +// import DashboardPlaceholder from "./components/DashboardPlaceholder"; +// import CheckoutPlaceholder from "./components/CheckoutPlaceholder"; +// import HomePage from "./components/HomePage"; + +export default function App() { + return ( + + +
+ + + + {/* Home Page */} + } /> + {/* Leadership Journey */} + } /> + + {/* Services Pages */} + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + {/* About Us Pages */} + } /> + } /> + } /> + } /> + + {/* Learning Pages */} + } /> + } /> + } /> + + {/* Webinars Pages */} + } /> + } /> + + {/* Learning Online */} + } /> + + {/* Terms & Conditions */} + } /> + + {/* Cart */} + } /> + + {/* Authentication Pages */} + } /> + } /> + } /> + } /> + } /> + + {/* Contact Page */} + } /> + + {/* Dynamic Routes */} + } /> + {/* } /> */} + {/* } /> + } /> */} + } /> + } /> + + {/* Learning Facility */} + } /> + {/* Privacy policy */} + } /> + } /> + } /> + + {/* Placeholder Pages */} + {/* } /> + } /> + } /> + } /> */} + + {/* 404 Page */} + } /> + + + + + {/* Add AIChatbot to all pages */} + +
+
+
+ ); +} + +// 404 Not Found Component +function NotFound() { + const navigate = useNavigate(); + return ( +
+
+

Page Not Found

+

+ The page you're looking for doesn't exist. +

+
+ +
+
+
+ ); +} \ No newline at end of file diff --git a/src/Attributions.md b/src/Attributions.md new file mode 100644 index 0000000..9b7cd4e --- /dev/null +++ b/src/Attributions.md @@ -0,0 +1,3 @@ +This Figma Make file includes components from [shadcn/ui](https://ui.shadcn.com/) used under [MIT license](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md). + +This Figma Make file includes photos from [Unsplash](https://unsplash.com) used under [license](https://unsplash.com/license). \ No newline at end of file diff --git a/src/assets/037c4659b7b0bf15b1dfdcd4868cb42e8257e838.png b/src/assets/037c4659b7b0bf15b1dfdcd4868cb42e8257e838.png new file mode 100644 index 0000000..2f28f66 Binary files /dev/null and b/src/assets/037c4659b7b0bf15b1dfdcd4868cb42e8257e838.png differ diff --git a/src/assets/4833274f0a593cd31fdefe553b70bb016de281af.png b/src/assets/4833274f0a593cd31fdefe553b70bb016de281af.png new file mode 100644 index 0000000..7840c2b Binary files /dev/null and b/src/assets/4833274f0a593cd31fdefe553b70bb016de281af.png differ diff --git a/src/assets/6bdf8056f51bbdc6dd9dab9044a6579a254bd02c.png b/src/assets/6bdf8056f51bbdc6dd9dab9044a6579a254bd02c.png new file mode 100644 index 0000000..e8179a1 Binary files /dev/null and b/src/assets/6bdf8056f51bbdc6dd9dab9044a6579a254bd02c.png differ diff --git a/src/assets/Aparna-Nair.png b/src/assets/Aparna-Nair.png new file mode 100644 index 0000000..2cd8476 Binary files /dev/null and b/src/assets/Aparna-Nair.png differ diff --git a/src/assets/Balaji-Chandrakumar.jpeg b/src/assets/Balaji-Chandrakumar.jpeg new file mode 100644 index 0000000..dbb7fc8 Binary files /dev/null and b/src/assets/Balaji-Chandrakumar.jpeg differ diff --git a/src/assets/Campus1.jpg b/src/assets/Campus1.jpg new file mode 100644 index 0000000..16ce48a Binary files /dev/null and b/src/assets/Campus1.jpg differ diff --git a/src/assets/Campus2.jpg b/src/assets/Campus2.jpg new file mode 100644 index 0000000..c7fce93 Binary files /dev/null and b/src/assets/Campus2.jpg differ diff --git a/src/assets/Campus3.jpg b/src/assets/Campus3.jpg new file mode 100644 index 0000000..e9adbdf Binary files /dev/null and b/src/assets/Campus3.jpg differ diff --git a/src/assets/Campus4.jpg b/src/assets/Campus4.jpg new file mode 100644 index 0000000..5a38869 Binary files /dev/null and b/src/assets/Campus4.jpg differ diff --git a/src/assets/Campus5.jpg b/src/assets/Campus5.jpg new file mode 100644 index 0000000..4388690 Binary files /dev/null and b/src/assets/Campus5.jpg differ diff --git a/src/assets/Campus6.jpg b/src/assets/Campus6.jpg new file mode 100644 index 0000000..d26d011 Binary files /dev/null and b/src/assets/Campus6.jpg differ diff --git a/src/assets/Classroom1.jpg b/src/assets/Classroom1.jpg new file mode 100644 index 0000000..b13e1d5 Binary files /dev/null and b/src/assets/Classroom1.jpg differ diff --git a/src/assets/Classroom2.jpg b/src/assets/Classroom2.jpg new file mode 100644 index 0000000..b2af449 Binary files /dev/null and b/src/assets/Classroom2.jpg differ diff --git a/src/assets/Classroom3.jpg b/src/assets/Classroom3.jpg new file mode 100644 index 0000000..5cb6459 Binary files /dev/null and b/src/assets/Classroom3.jpg differ diff --git a/src/assets/Classroom4.jpg b/src/assets/Classroom4.jpg new file mode 100644 index 0000000..f7ec86a Binary files /dev/null and b/src/assets/Classroom4.jpg differ diff --git a/src/assets/Classroom5.jpg b/src/assets/Classroom5.jpg new file mode 100644 index 0000000..5a52168 Binary files /dev/null and b/src/assets/Classroom5.jpg differ diff --git a/src/assets/Diju.jpeg b/src/assets/Diju.jpeg new file mode 100644 index 0000000..88038cf Binary files /dev/null and b/src/assets/Diju.jpeg differ diff --git a/src/assets/Eco-Conscious Design.jpg b/src/assets/Eco-Conscious Design.jpg new file mode 100644 index 0000000..e9adbdf Binary files /dev/null and b/src/assets/Eco-Conscious Design.jpg differ diff --git a/src/assets/Fitness&Recreation-centre.jpg b/src/assets/Fitness&Recreation-centre.jpg new file mode 100644 index 0000000..acf089d Binary files /dev/null and b/src/assets/Fitness&Recreation-centre.jpg differ diff --git a/src/assets/K-Ramkumar.png b/src/assets/K-Ramkumar.png new file mode 100644 index 0000000..52fa042 Binary files /dev/null and b/src/assets/K-Ramkumar.png differ diff --git a/src/assets/Kautilya.png b/src/assets/Kautilya.png new file mode 100644 index 0000000..825bed7 Binary files /dev/null and b/src/assets/Kautilya.png differ diff --git a/src/assets/R-Muralidharan.png b/src/assets/R-Muralidharan.png new file mode 100644 index 0000000..a3fdebe Binary files /dev/null and b/src/assets/R-Muralidharan.png differ diff --git a/src/assets/Ramesh-Padmanabhan.jpeg b/src/assets/Ramesh-Padmanabhan.jpeg new file mode 100644 index 0000000..a8552c5 Binary files /dev/null and b/src/assets/Ramesh-Padmanabhan.jpeg differ diff --git a/src/assets/a28d79dd35b730f689b77dbb30452ca27bd25759.png b/src/assets/a28d79dd35b730f689b77dbb30452ca27bd25759.png new file mode 100644 index 0000000..b47b8f9 Binary files /dev/null and b/src/assets/a28d79dd35b730f689b77dbb30452ca27bd25759.png differ diff --git a/src/assets/accenture.svg b/src/assets/accenture.svg new file mode 100644 index 0000000..a4baf78 --- /dev/null +++ b/src/assets/accenture.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/adani-logo.svg b/src/assets/adani-logo.svg new file mode 100644 index 0000000..e256409 --- /dev/null +++ b/src/assets/adani-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/axis-bank.svg b/src/assets/axis-bank.svg new file mode 100644 index 0000000..705308b --- /dev/null +++ b/src/assets/axis-bank.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/boardroom.jpg b/src/assets/boardroom.jpg new file mode 100644 index 0000000..b2af449 Binary files /dev/null and b/src/assets/boardroom.jpg differ diff --git a/src/assets/c57ec1f4466f68e607139a3cd6d52f7e2f372408.png b/src/assets/c57ec1f4466f68e607139a3cd6d52f7e2f372408.png new file mode 100644 index 0000000..7c12ba6 Binary files /dev/null and b/src/assets/c57ec1f4466f68e607139a3cd6d52f7e2f372408.png differ diff --git a/src/assets/campus-arial-view.jpg b/src/assets/campus-arial-view.jpg new file mode 100644 index 0000000..06523d4 Binary files /dev/null and b/src/assets/campus-arial-view.jpg differ diff --git a/src/assets/ceat-logo.svg b/src/assets/ceat-logo.svg new file mode 100644 index 0000000..32841c1 --- /dev/null +++ b/src/assets/ceat-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/d5bab6ea4f3d8cef3b0425c45cfee7faea19fdbc.png b/src/assets/d5bab6ea4f3d8cef3b0425c45cfee7faea19fdbc.png new file mode 100644 index 0000000..af42a55 Binary files /dev/null and b/src/assets/d5bab6ea4f3d8cef3b0425c45cfee7faea19fdbc.png differ diff --git a/src/assets/dining-experience.jpg b/src/assets/dining-experience.jpg new file mode 100644 index 0000000..24d7387 Binary files /dev/null and b/src/assets/dining-experience.jpg differ diff --git a/src/assets/e8fad960112d5eba554c3969d08891ebe4d4b9c7.png b/src/assets/e8fad960112d5eba554c3969d08891ebe4d4b9c7.png new file mode 100644 index 0000000..178eec3 Binary files /dev/null and b/src/assets/e8fad960112d5eba554c3969d08891ebe4d4b9c7.png differ diff --git a/src/assets/e98caa8afd8d11246bbff1dde75bbaae6f6a0894.png b/src/assets/e98caa8afd8d11246bbff1dde75bbaae6f6a0894.png new file mode 100644 index 0000000..d4bd872 Binary files /dev/null and b/src/assets/e98caa8afd8d11246bbff1dde75bbaae6f6a0894.png differ diff --git a/src/assets/exe-boardroom.jpg b/src/assets/exe-boardroom.jpg new file mode 100644 index 0000000..ae74d39 Binary files /dev/null and b/src/assets/exe-boardroom.jpg differ diff --git a/src/assets/expert-support.jpg b/src/assets/expert-support.jpg new file mode 100644 index 0000000..5cb6459 Binary files /dev/null and b/src/assets/expert-support.jpg differ diff --git a/src/assets/flipkart.svg b/src/assets/flipkart.svg new file mode 100644 index 0000000..89abbeb --- /dev/null +++ b/src/assets/flipkart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/hsbc.svg b/src/assets/hsbc.svg new file mode 100644 index 0000000..ac207d6 --- /dev/null +++ b/src/assets/hsbc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/idbi-bank-logo.svg b/src/assets/idbi-bank-logo.svg new file mode 100644 index 0000000..5703439 --- /dev/null +++ b/src/assets/idbi-bank-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/kautilya-learning-story.jpg b/src/assets/kautilya-learning-story.jpg new file mode 100644 index 0000000..50d1d03 Binary files /dev/null and b/src/assets/kautilya-learning-story.jpg differ diff --git a/src/assets/klc-logo-dark.png b/src/assets/klc-logo-dark.png new file mode 100644 index 0000000..4d4b90e Binary files /dev/null and b/src/assets/klc-logo-dark.png differ diff --git a/src/assets/klc-logo.png b/src/assets/klc-logo.png new file mode 100644 index 0000000..ff70e16 Binary files /dev/null and b/src/assets/klc-logo.png differ diff --git a/src/assets/larsen-toubro-logo.svg b/src/assets/larsen-toubro-logo.svg new file mode 100644 index 0000000..88e6f33 --- /dev/null +++ b/src/assets/larsen-toubro-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/levis.svg b/src/assets/levis.svg new file mode 100644 index 0000000..4576cc8 --- /dev/null +++ b/src/assets/levis.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/luxury-accommodation.jpg b/src/assets/luxury-accommodation.jpg new file mode 100644 index 0000000..52b22dd Binary files /dev/null and b/src/assets/luxury-accommodation.jpg differ diff --git a/src/assets/morning.jpg b/src/assets/morning.jpg new file mode 100644 index 0000000..42278e6 Binary files /dev/null and b/src/assets/morning.jpg differ diff --git a/src/assets/outdoor-amphitheater.jpg b/src/assets/outdoor-amphitheater.jpg new file mode 100644 index 0000000..f0846fd Binary files /dev/null and b/src/assets/outdoor-amphitheater.jpg differ diff --git a/src/assets/panoramas/cayley_interior.jpg b/src/assets/panoramas/cayley_interior.jpg new file mode 100644 index 0000000..83c499b Binary files /dev/null and b/src/assets/panoramas/cayley_interior.jpg differ diff --git a/src/assets/panoramas/cedar_bridge_sunset.jpg b/src/assets/panoramas/cedar_bridge_sunset.jpg new file mode 100644 index 0000000..b0a5b0f Binary files /dev/null and b/src/assets/panoramas/cedar_bridge_sunset.jpg differ diff --git a/src/assets/private-space.jpg b/src/assets/private-space.jpg new file mode 100644 index 0000000..d9fe723 Binary files /dev/null and b/src/assets/private-space.jpg differ diff --git a/src/assets/tata-motors.svg b/src/assets/tata-motors.svg new file mode 100644 index 0000000..aa8a233 --- /dev/null +++ b/src/assets/tata-motors.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/v-Swaminathan.jpg b/src/assets/v-Swaminathan.jpg new file mode 100644 index 0000000..44fd394 Binary files /dev/null and b/src/assets/v-Swaminathan.jpg differ diff --git a/src/components/AIChatbot.tsx b/src/components/AIChatbot.tsx new file mode 100644 index 0000000..73d0c28 --- /dev/null +++ b/src/components/AIChatbot.tsx @@ -0,0 +1,485 @@ +import React, { useState, useEffect, useRef } from 'react'; +import { Button } from './ui/button'; +import { Card, CardContent, CardHeader, CardTitle } from './ui/card'; +import { Badge } from './ui/badge'; +import { + MessageCircle, + X, + Send, + Bot, + User, + Minimize2, + Maximize2 +} from 'lucide-react'; +import { Input } from './ui/input'; +import { ScrollArea } from './ui/scroll-area'; + +interface Message { + id: string; + type: 'user' | 'bot'; + content: string; + timestamp: Date; + suggestions?: string[]; +} + +const initialMessage: Message = { + id: '1', + type: 'bot', + content: "Hi! I'm here to help you explore KLC's leadership programs and facilities. What are you looking for today?", + timestamp: new Date(), + suggestions: [ + "Show me leadership programs", + "Book a facility tour", + "Upcoming webinars", + "Contact information" + ] +}; + +const botResponses: Record = { + "programs": { + content: "Great! We offer various leadership development programs including Executive Leadership, Strategic Management, and Team Building workshops. Would you like to explore specific programs or see our full catalog?", + suggestions: ["View all programs", "Executive programs", "Team building", "Custom corporate training"] + }, + "leadership": { + content: "Our leadership programs are designed to transform leaders at every level. We offer Executive Leadership Development, Strategic Leadership, Team Leadership, and Management Excellence programs.", + suggestions: ["Executive Leadership", "Strategic Leadership", "Team Leadership", "Management Excellence"] + }, + "facilities": { + content: "Our state-of-the-art facilities include modern conference rooms, training halls, and collaboration spaces. You can take a virtual tour or book a facility for your event.", + suggestions: ["Virtual tour", "Book conference room", "Training halls", "Facility pricing"] + }, + "facility": { + content: "Our learning facility features cutting-edge technology, flexible meeting spaces, and comfortable learning environments. We can accommodate groups from 10 to 500 participants.", + suggestions: ["Book now", "View amenities", "Check availability", "Pricing information"] + }, + "tour": { + content: "I'd be happy to arrange a facility tour for you! Our tours showcase our modern classrooms, breakout spaces, and technology capabilities. Would you like to schedule one?", + suggestions: ["Schedule tour", "Virtual tour", "Facility features", "Contact tour guide"] + }, + "webinars": { + content: "We host regular webinars on leadership topics. You can view upcoming sessions, register for live events, or access our library of recorded sessions.", + suggestions: ["Upcoming webinars", "Recorded sessions", "Register for webinar", "Webinar schedule"] + }, + "webinar": { + content: "Our webinars cover essential leadership topics like Strategic Thinking, Team Management, Change Leadership, and Executive Presence. Most are free to attend!", + suggestions: ["View schedule", "Register now", "Past recordings", "Webinar topics"] + }, + "contact": { + content: "You can reach us at info@klc.edu.in or call +91 11 4567 8900. Our team is available Monday to Friday, 9 AM to 6 PM IST. You can also schedule a consultation.", + suggestions: ["Schedule consultation", "Email us", "Office locations", "Support hours"] + }, + "executive": { + content: "Our Executive Leadership programs are designed for senior leaders and C-suite executives. These intensive programs focus on strategic thinking, organizational transformation, and executive presence.", + suggestions: ["Program details", "Enrollment", "Schedule", "Executive coaching"] + }, + "strategic": { + content: "Strategic Leadership development helps leaders think systematically about complex challenges, make better decisions, and drive organizational change effectively.", + suggestions: ["Learn more", "Case studies", "Program schedule", "Apply now"] + }, + "team": { + content: "Team Leadership programs focus on building high-performing teams, improving collaboration, and developing emotional intelligence for team leaders.", + suggestions: ["Team programs", "Workshop format", "Group discounts", "Custom training"] + }, + "management": { + content: "Management Excellence programs cover essential management skills including performance management, delegation, communication, and conflict resolution.", + suggestions: ["Management training", "Skills assessment", "Corporate packages", "Schedule consultation"] + }, + "pricing": { + content: "Our pricing varies by program type and group size. Individual programs start from ₹15,000, while corporate packages offer significant discounts for bulk enrollments.", + suggestions: ["Individual pricing", "Corporate packages", "Group discounts", "Payment options"] + }, + "schedule": { + content: "We offer programs throughout the year with flexible scheduling options. Most programs are available in weekend, weekday, and intensive formats.", + suggestions: ["View calendar", "Weekend programs", "Weekday options", "Custom scheduling"] + }, + "enrollment": { + content: "Enrollment is simple! You can register online, call us directly, or schedule a consultation to discuss the best program for your needs.", + suggestions: ["Register online", "Call us", "Schedule consultation", "Application process"] + }, + "corporate": { + content: "Our corporate solutions include custom leadership development programs, executive coaching, and organizational development services tailored to your company's needs.", + suggestions: ["Custom programs", "Executive coaching", "Organizational development", "Corporate pricing"] + }, + "coaching": { + content: "We offer one-on-one executive coaching with certified leadership coaches. Our coaching programs are customized to address specific leadership challenges and goals.", + suggestions: ["Coach profiles", "Coaching process", "Pricing", "Schedule session"] + }, + "default": { + content: "I can help you with information about our programs, facilities, webinars, and more. What would you like to know?", + suggestions: ["Leadership programs", "Facility booking", "Webinars", "Contact us"] + } +}; + +export function AIChatbot() { + const [isVisible, setIsVisible] = useState(false); + const [isOpen, setIsOpen] = useState(false); + const [isMinimized, setIsMinimized] = useState(false); + const [messages, setMessages] = useState([initialMessage]); + const [inputValue, setInputValue] = useState(''); + const [isTyping, setIsTyping] = useState(false); + const messagesEndRef = useRef(null); + const inactivityTimerRef = useRef(null); + + // Show chatbot after user activity + useEffect(() => { + const resetTimer = () => { + if (inactivityTimerRef.current) { + clearTimeout(inactivityTimerRef.current); + } + + inactivityTimerRef.current = setTimeout(() => { + if (!isOpen) { + setIsVisible(true); + } + }, 8000); // Show after 8 seconds of activity + }; + + const events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart']; + + const addEventListeners = () => { + events.forEach(event => { + document.addEventListener(event, resetTimer, true); + }); + }; + + const removeEventListeners = () => { + events.forEach(event => { + document.removeEventListener(event, resetTimer, true); + }); + }; + + addEventListeners(); + resetTimer(); + + return () => { + removeEventListeners(); + if (inactivityTimerRef.current) { + clearTimeout(inactivityTimerRef.current); + } + }; + }, [isOpen]); + + // Auto-scroll to bottom of messages + useEffect(() => { + messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); + }, [messages]); + + const getBotResponse = (userMessage: string): { content: string; suggestions?: string[] } => { + const message = userMessage.toLowerCase(); + + // Enhanced keyword matching + if (message.includes('leadership') && (message.includes('program') || message.includes('course') || message.includes('training'))) { + return botResponses.leadership; + } else if (message.includes('executive') || message.includes('senior') || message.includes('c-suite')) { + return botResponses.executive; + } else if (message.includes('strategic') || message.includes('strategy')) { + return botResponses.strategic; + } else if (message.includes('team') || message.includes('collaboration')) { + return botResponses.team; + } else if (message.includes('management') || message.includes('manager')) { + return botResponses.management; + } else if (message.includes('program') || message.includes('course') || message.includes('training')) { + return botResponses.programs; + } else if (message.includes('facility') || message.includes('space') || message.includes('room')) { + return botResponses.facility; + } else if (message.includes('tour') || message.includes('visit')) { + return botResponses.tour; + } else if (message.includes('book') || message.includes('reserve') || message.includes('schedule')) { + return botResponses.facilities; + } else if (message.includes('webinar') || message.includes('session') || message.includes('online')) { + return botResponses.webinar; + } else if (message.includes('contact') || message.includes('phone') || message.includes('email') || message.includes('reach')) { + return botResponses.contact; + } else if (message.includes('price') || message.includes('cost') || message.includes('fee')) { + return botResponses.pricing; + } else if (message.includes('schedule') || message.includes('timing') || message.includes('when')) { + return botResponses.schedule; + } else if (message.includes('enroll') || message.includes('register') || message.includes('apply')) { + return botResponses.enrollment; + } else if (message.includes('corporate') || message.includes('company') || message.includes('organization')) { + return botResponses.corporate; + } else if (message.includes('coach') || message.includes('mentor') || message.includes('personal')) { + return botResponses.coaching; + } else { + return botResponses.default; + } + }; + + const handleSendMessage = async (content: string) => { + if (!content.trim()) return; + + // Add user message + const userMessage: Message = { + id: Date.now().toString(), + type: 'user', + content: content.trim(), + timestamp: new Date() + }; + + setMessages(prev => [...prev, userMessage]); + setInputValue(''); + setIsTyping(true); + + // Simulate typing delay with realistic timing + setTimeout(() => { + const response = getBotResponse(content); + const botMessage: Message = { + id: (Date.now() + 1).toString(), + type: 'bot', + content: response.content, + timestamp: new Date(), + suggestions: response.suggestions + }; + + setMessages(prev => [...prev, botMessage]); + setIsTyping(false); + }, 800 + Math.random() * 600); // 800ms to 1.4s delay + }; + + const handleSuggestionClick = (suggestion: string) => { + handleSendMessage(suggestion); + }; + + const formatTime = (date: Date) => { + return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + }; + + const handleKeyPress = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + handleSendMessage(inputValue); + } + }; + + if (!isVisible) return null; + + return ( + <> + {/* Chatbot Toggle Button */} + {!isOpen && ( + + )} + + {/* Chat Window */} + {isOpen && ( + + {/* Header */} + +
+
+ +
+
+ + KLC Assistant + +
+
+ Online & Ready to Help +
+
+
+
+ + +
+
+ + {/* Chat Content */} + {!isMinimized && ( + + {/* Messages */} + +
+ {messages.map((message) => ( +
+
+
+ {message.type === 'user' ? ( + + ) : ( + + )} +
+
+
+

+ {message.content} +

+
+ {message.suggestions && ( +
+ {message.suggestions.map((suggestion, index) => ( + handleSuggestionClick(suggestion)} + onMouseEnter={(e:React.MouseEvent) => { + e.currentTarget.style.backgroundColor = 'var(--color-primary)'; + e.currentTarget.style.borderColor = 'var(--color-primary)'; + }} + onMouseLeave={(e:React.MouseEvent) => { + e.currentTarget.style.backgroundColor = 'transparent'; + e.currentTarget.style.borderColor = 'var(--color-primary)'; + }} + > + {suggestion} + + ))} +
+ )} +

+ {formatTime(message.timestamp)} +

+
+
+
+ ))} + + {isTyping && ( +
+
+
+ +
+
+
+
+
+
+
+
+
+
+ )} +
+
+ + + {/* Input */} +
+
{ + e.preventDefault(); + handleSendMessage(inputValue); + }} + className="flex gap-2" + role="form" + aria-label="Chat message form" + > + setInputValue(e.target.value)} + onKeyPress={handleKeyPress} + placeholder="Type your message..." + className="flex-1 min-h-[44px] border-gray-200 focus:border-blue-500 focus:ring-blue-500" + style={{ + fontSize: 'var(--font-body)', + fontFamily: 'var(--font-family-base)' + }} + disabled={isTyping} + aria-label="Chat message input" + /> + +
+ + {/* Quick Help Text */} +

+ Ask me about programs, facilities, or upcoming events +

+
+ + )} + + )} + + ); +} \ No newline at end of file diff --git a/src/components/AboutSection.tsx b/src/components/AboutSection.tsx new file mode 100644 index 0000000..e508906 --- /dev/null +++ b/src/components/AboutSection.tsx @@ -0,0 +1,244 @@ +export function AboutSection() { + return ( +
+
+ {/* Section Header with Branded Tag */} +
+
+
+ + WHO WE ARE + +
+

+ About KLC +

+

+ Transforming businesses through strategic expertise, innovative solutions, and lasting partnerships that drive sustainable growth. +

+
+ + {/* Three Column Layout */} +
+ {/* Our Vision */} +
+
+ + + + +
+

+ Our Vision +

+

+ To be the leading catalyst for business transformation, empowering organizations to unlock their full potential through innovative strategies and cutting-edge solutions. +

+

+ We envision a future where every business can thrive in an ever-evolving marketplace through strategic foresight and adaptive excellence. +

+
+ + {/* Our Impact */} +
+
+ + + + + +
+

+ Our Impact +

+

+ Over two decades of delivering measurable results for Fortune 500 companies and emerging businesses alike, driving over $2.5 billion in combined client value creation. +

+

+ Our strategic interventions have transformed operational efficiency by an average of 40% and accelerated growth trajectories across diverse industries. +

+
+ + {/* Our Expertise */} +
+
+ + + + + +
+

+ Our Expertise +

+

+ Deep domain knowledge spanning strategic consulting, digital transformation, operational excellence, and change management across multiple industry verticals. +

+

+ Our multidisciplinary team combines analytical rigor with creative problem-solving to deliver solutions that are both innovative and pragmatic. +

+
+
+ + {/* CTA Section */} +
+ +
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/AboutUs.tsx b/src/components/AboutUs.tsx new file mode 100644 index 0000000..682af19 --- /dev/null +++ b/src/components/AboutUs.tsx @@ -0,0 +1,996 @@ +import { + BookOpen, + Brain, + CheckCircle, + Heart, + Puzzle, + Shield, + Target, + TrendingUp, + Users, + Zap +} from 'lucide-react'; +import { motion } from 'motion/react'; +import { useEffect, useState } from 'react'; +import Aparna from '../assets/Aparna-Nair.png'; +import Balaji from '../assets/Balaji-Chandrakumar.jpeg'; +import Diju from '../assets/Diju.jpeg'; +import Ramkumar from '../assets/K-Ramkumar.png'; +import Muralidharan from '../assets/R-Muralidharan.png'; +import Ramesh from '../assets/Ramesh-Padmanabhan.jpeg'; +import Swaminathan from '../assets/v-Swaminathan.jpg'; +import svgPaths from '../imports/svg-kw7r0ellyk'; +import { useGetAboutUsQuery } from '../redux/services/aboutUsApi'; +import { BrandedTag } from './about/BrandedTag'; +import { CTABannerSection } from './CTABannerSection'; +import { PrimaryCTAButton } from './PrimaryCTAButton'; +import { navigateTo } from './Router'; +import { TeamMemberModal } from './TeamMemberModal'; +import { TestimonialsSection } from './TestimonialsSection'; +import { Button } from './ui/button'; +import { FullScreenLoader } from './FullScreenLoader'; + + +// Static detailed team member data for modal +const staticTeamMembersDetails = { + 'Mr. K Ramkumar': { + name: 'Mr. K Ramkumar', + role: 'Managing Director', + image: Ramkumar, + experience: 'Over 40 years of experience in HR, Business, and Leadership Development.', + fullBio: `Mr. K. Ramkumar is the founder of Kautilya Leadership Centre, an organisation dedicated to building world-class thought and practice in leadership consulting, research and development. He retired as Executive Director on the Board of ICICI Bank and was also on the Boards of ICICI Prudential Life Insurance and ICICI Ventures. Prior to his retirement, he was President of ICICI Foundation, the CSR arm of ICICI Group. + +Over a 40-year career, Ram worked with HAL, Hindustan Unilever, ICI and ICICI Bank. His passion has always been leadership development, with a focus on enabling individuals to discover and expand their leadership resources. He played a key role in making ICICI Group a recognized Leadership Factory. + +He co-created the ICICI Manipal Academy for Banking and Insurance, which inducted over 12,000 young leaders, and envisioned the ICICI Academy for Skills, now skilling 35,000 youth annually across 23 centers.`, + expertise: [ + 'Leadership Development', + 'HR & Business Strategy', + 'Organizational Capability Building', + 'CSR Initiatives', + 'Talent Pipeline Development' + ], + education: 'Graduate in Science; further leadership and management exposure through senior executive roles.', + achievements: [ + 'Founded Kautilya Leadership Centre', + 'Executive Director on ICICI Bank Board', + 'Created ICICI Manipal Academy (12,000 leaders trained)', + 'Founded ICICI Academy for Skills (35,000+ youth skilled)', + 'Author of "Leveraging Human Capital" (McGraw Hill)' + ], + clientWork: 'Guided leadership development across ICICI Group and worked with Manipal Global Education to groom future banking leaders.', + boardRoles: 'Former Board Member of ICICI Prudential Life, ICICI Ventures; served on CSR and leadership committees.' + }, + 'Mr. R. Muralidharan': { + name: 'Mr. R. Muralidharan', + role: 'Practice Head – Leadership Development', + image: Muralidharan, + experience: 'Over 33 years in Banking, Financial Services, and Leadership roles.', + fullBio: `Muralidharan (Murali) has 33+ years of experience in BFSI. He has held top leadership roles including CEO/COO positions at ICICI Bank, Dhanlaxmi Bank, and L&T Financial Services. His experience spans corporate and retail banking, strategy, technology, operations, and transformational projects. + +At ICICI Bank, he was part of the founding team in 1994 and rose to become GM – Global Operations Group. His work at Dhanlaxmi Bank as COO won The Asian Banker Award (2012). At L&T Financial Services, he led operations, technology, credit, and CSR across retail, rural, and infrastructure finance.`, + expertise: [ + 'Banking & Financial Services', + 'Transformational Projects', + 'Customer Experience', + 'Leadership Development', + 'Strategy & Operations' + ], + education: 'B.Sc. (Mathematics, Statistics, Physics), M.A. in Economics (Gold Medallist), Executive Education at Wharton & Stanford GSB.', + achievements: [ + 'Helped set up ICICI Bank in 1994', + 'Asian Banker Award (2012) for transformation', + 'Group Head at L&T Financial Services', + 'Held Board and leadership committee roles', + 'Speaker at NIBM, TMTC, and industry fora' + ], + clientWork: 'Worked with public and private banks, financial services firms, and non-profits on leadership and customer service transformation.', + boardRoles: 'Held board positions in business and non-profits; Vice-Chair, Customer Service Excellence Foundation.' + }, + 'Ms. Aparna Nair': { + name: 'Ms. Aparna Nair', + role: 'Practice Head – Leadership Development', + image: Aparna, + experience: 'Over 25 years in leadership consulting, HR, and organizational development.', + fullBio: `Aparna is a founding member of Kautilya Leadership Centre and has been instrumental in building it since 2016. She advises Boards and Management Committees on leadership bench strength, designs CXO-level interventions, and consults on culture, performance, and talent management. + +She is certified in MBTI and OPQ, has applied Balanced Scorecard frameworks, and built proprietary psychometric tools for KLC. Her prior roles include ICICI Bank and Blue Dart-FedEx, and she has engaged with leading organizations across multiple industries.`, + expertise: [ + 'Leadership Consulting', + 'Psychometric Tools (MBTI, OPQ)', + 'Culture & Strategy Alignment', + 'Performance Management', + 'HR Mentorship' + ], + education: 'MBA in Marketing, Bachelor’s in Commerce; Accredited facilitator from SMR, Malaysia.', + achievements: [ + 'Co-founded KLC', + 'Developed proprietary psychometric tools', + 'Advised Boards across industries', + 'Mentored HR professionals', + 'Independent Director on a startup board' + ], + clientWork: 'Worked with Godrej & Boyce, ICICI Prudential, Citi WAI, WNS, ThyssenKrupp, and others across pharma, BFSI, retail, auto, and private equity.', + boardRoles: 'Independent Woman Director; held leadership positions at ICICI Bank and Blue Dart-FedEx.' + }, + 'Mr. V. Swaminathan': { + name: 'Mr. V. Swaminathan', + role: 'Practice Head – Leadership Development', + image: Swaminathan, + experience: 'Over 31 years in BFSI and office automation; 26 years in leadership at Kotak Group.', + fullBio: `Swami spent 26 years at Kotak Group in leadership roles across consumer banking, investment banking, asset management, and asset finance. He has built businesses from concept to scale and handled P&L responsibilities across divisions. + +He stepped down as Joint President of Kotak Mahindra Bank in 2021 before joining KLC. He was on Kotak’s Management Committee and led strategic initiatives, talent development, and capability building across the group.`, + expertise: [ + 'Banking & Financial Services', + 'P&L Management', + 'Change Management', + 'Leadership Pipeline Development', + 'Business Strategy' + ], + education: 'PGDBM (Finance & Marketing), Gujarat University; Bachelor of Commerce; Senior Management programs at IIM Ahmedabad, IIM Bangalore, ISB Hyderabad.', + achievements: [ + 'Joint President at Kotak Mahindra Bank', + 'Built and scaled multiple Kotak business units', + 'Led strategic and leadership initiatives', + 'Mentored talent pipelines across Kotak', + 'Joined KLC as Practice Head in 2021' + ], + clientWork: 'Extensive work with BFSI organizations and leadership development initiatives at scale.', + boardRoles: 'Key member of Kotak’s Management Committee; contributor to strategic boards within Kotak divisions.' + }, + 'Mr. Balaji Chandrakumar': { + name: 'Mr. Balaji Chandrakumar', + role: 'Practice Head – Leadership Development', + image: Balaji, + experience: '25+ years across Sales, HR Consulting, and HR leadership in India and SE Asia.', + fullBio: `Balaji has led HR leadership across India and SE Asia, including roles at Etisalat (India) and Goodhope Asia Holdings (Singapore). He has expertise in organization design, succession management, change management, and policy development. + +Earlier, he worked in consulting with top Indian firms and began his HR journey with NIS Sparta after regional sales roles at Sandvik Asia.`, + expertise: [ + 'HR Leadership & Consulting', + 'Organization Design', + 'Succession Management', + 'Change Management', + 'Leadership Hiring' + ], + education: 'Bachelor’s in Engineering, Master’s in HR, Postgraduate in Management; Chartered Fellow of CIPD.', + achievements: [ + 'HR Leadership roles at Etisalat and Goodhope Asia', + 'Consulted for top Indian companies', + 'Built people and performance initiatives across industries', + 'Certified in multiple HR programs', + 'CIPD Chartered Fellow' + ], + clientWork: 'Worked with leading companies in telecom, food, and HR consulting sectors across India and SE Asia.', + boardRoles: 'Advisor in HR capability building across organizations.' + }, + 'Mr. Ramesh Padmanabhan': { + name: 'Mr. Ramesh Padmanabhan', + role: 'Practice Head – Leadership Development', + image: Ramesh, + experience: '30+ years in BFSI, with leadership roles at ICICI Bank, Dhanlaxmi Bank, and ADCB India.', + fullBio: `Ramesh has worked with SBI, ICICI Bank, Dhanlaxmi Bank, and ADCB India across corporate credit, retail banking, operations, and training. He has built leadership pipelines among branch and middle managers, and at ADCB India created products for NRIs and centralized operations. + +He has consistently worked on capability building and leadership development alongside business roles.`, + expertise: [ + 'Banking & Financial Services', + 'Leadership Development', + 'Capability Building', + 'Operations & Process Design', + 'Retail & Corporate Banking' + ], + education: 'Bachelor’s in Commerce; senior leadership roles provided extensive global exposure.', + achievements: [ + 'Built leadership pipelines in ICICI and ADCB', + 'Part of ICICI for 13 years', + 'Created NRI-focused products at ADCB India', + 'Set up centralized operations at ADCB', + '30 years in BFSI leadership' + ], + clientWork: 'Significant work in BFSI sector; tailored leadership development for managers and executives.', + boardRoles: 'Served on MANCOM and strategic boards in ICICI, Dhanlaxmi, and ADCB India.' + }, + 'Ms. Diju S': { + name: 'Ms. Diju S', + role: 'Practice Head – Leadership Development', + image: Diju, + experience: '15+ years in leadership development, banking, and people-centric initiatives.', + fullBio: `Diju began at ICICI Bank, leading initiatives in customer service, Six Sigma, workplace induction (SWIFT), and branch operations. She drove business growth, mentored teams, and implemented technology projects. + +After a career break, she joined KLC as Practice Head. She now co-creates leadership program designs with clients and manages knowledge business and learning facilities.`, + expertise: [ + 'Leadership Program Design', + 'Customer Experience', + 'Operational Excellence', + 'Women Leadership & Diversity', + 'Project Management' + ], + education: 'B.Com (Honours), Delhi University; MBA (Finance & Marketing), Symbiosis Institute of Management Studies.', + achievements: [ + 'Led Six Sigma rollout at ICICI Bank branches', + 'Part of SWIFT trainer team', + 'Head of Customer Service at ICICI', + 'Built leadership learning facility at KLC', + 'Special focus on diversity & inclusion' + ], + clientWork: 'Worked with BFSI clients and KLC partners to create custom leadership programs.', + boardRoles: 'Active in leadership forums and project management at KLC.' + } +}; + +// Helper function to get member details by name +const getMemberDetails = (nameRole: string) => { + // Extract the name from "Name - Role" format + const name = nameRole.split(' - ')[0]; + return staticTeamMembersDetails[name as keyof typeof staticTeamMembersDetails] || null; +}; + +export function AboutUs() { + const [isVisible, setIsVisible] = useState(false); + const [expandedValue, setExpandedValue] = useState('context'); + const [selectedMember, setSelectedMember] = useState(null); + const [isModalOpen, setIsModalOpen] = useState(false); + + // Fetch About Us data from API + const { data: aboutUsData, isLoading, isError, error } = useGetAboutUsQuery(); + + const transformTestimonials = (apiTestimonials: any[]) => { + if (!apiTestimonials || apiTestimonials.length === 0) return []; + + return apiTestimonials.map((testimonial, index) => ({ + id: testimonial.id || index, + name: testimonial.name || "Anonymous", + role: testimonial.designation || "Client", + company: undefined, + avatar: testimonial.profile_photo_url || undefined, + image: testimonial.profile_photo_url || undefined, + quote: testimonial.content || "", + rating: 5, + isVideo: !!testimonial.video_url, + videoThumbnail: testimonial.video_thumbnail_url || testimonial.profile_photo_url, + videoUrl: testimonial.video_url || undefined + })); + }; + + // Transform the testimonials + const testimonialsData = transformTestimonials(aboutUsData?.testimonials || []); + + // Get team members from API + const apiTeamMembers = aboutUsData?.our_team || []; + + const handleMemberClick = (member: any) => { + // Get detailed static data for the clicked member + const memberDetails = getMemberDetails(member.name_role); + if (memberDetails) { + setSelectedMember(memberDetails); + } else { + // Fallback to API data if no static details found + setSelectedMember({ + name: member.name_role.split(' - ')[0], + role: member.name_role.split(' - ')[1] || 'Team Member', + image: member.photo_url, + experience: member.bio, + fullBio: member.bio, + expertise: [], + education: '', + achievements: [], + clientWork: '', + boardRoles: '' + }); + } + setIsModalOpen(true); + }; + + const handleCloseModal = () => { + setIsModalOpen(false); + setSelectedMember(null); + }; + + // Prevent background scroll when modal is open + useEffect(() => { + if (isModalOpen) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = ''; + } + + return () => { + document.body.style.overflow = ''; + }; + }, [isModalOpen]); + + useEffect(() => { + setIsVisible(true); + + const handleScroll = () => { + const timelineSection = document.querySelector('#timeline-fill-line') as HTMLElement | null; + const timelineContainer = timelineSection?.parentElement; + + if (!timelineSection || !timelineContainer) return; + + const rect = timelineContainer.getBoundingClientRect(); + const windowHeight = window.innerHeight; + + const sectionTop = rect.top; + const sectionHeight = rect.height; + const visibleTop = Math.max(0, windowHeight - sectionTop); + const visibleHeight = Math.min(visibleTop, sectionHeight); + const scrollProgress = Math.max(0, Math.min(1, visibleHeight / sectionHeight)); + + const maxFillHeight = 'calc(100% - 1rem)'; + + if (scrollProgress >= 0.9) { + timelineSection.style.height = maxFillHeight; + } else { + timelineSection.style.height = `${scrollProgress * 90}%`; + } + }; + + window.addEventListener('scroll', handleScroll); + handleScroll(); + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); + + if (isLoading) { + return ( +
+ +
+ ); + } + + if (isError) { + return ( +
+
+

Error Loading Page

+

Failed to load About Us content. Please try again later.

+ +
+
+ ); + } + + return ( +
+ {/* Hero Section - Dynamic from API */} +
+
+
+
+
+ +
+
+
+
+

+ {aboutUsData?.hero_section?.headline || "Advancing Leadership Through Insight"} +

+
+ +

+ + {aboutUsData?.hero_section?.subtext || "Founded in 2016 with the vision of being a world class institution in the thought and practice of leadership. We facilitate institutions to build Leadership capacity and capability while helping individuals unleash their potential."} + +

+ +
+ navigateTo(aboutUsData?.hero_section?.cta_destination || '/contact?topic=management-development')} + ariaLabel="Talk to us about management development" + className="primary-cta-button-blue cta-text-white" + /> +
+
+
+
+
+ + {/* Section 1: Our Promise - Dynamic from API */} +
+
+
+ + +

+ We build leaders who deliver business results. +

+
+
+
+
+ + {/* Section 2: How We Work - Dynamic from API */} +
+
+
+ + +

{aboutUsData?.how_we_work_title || "How We Work"}

+
+ +
+ {(aboutUsData?.how_we_work && aboutUsData.how_we_work.length > 0) ? ( + aboutUsData.how_we_work.map((item, index) => ( + +
+
+ {index === 0 && } + {index === 1 && } + {index === 2 && } + {index === 3 && } +
+
+

{item.title}

+

+ {item.description} +

+
+
+
+ )) + ) : ( + <> + +
+
+ +
+
+

Co-created interventions

+

+ We collaborate with you to design solutions that fit your unique organizational context and strategic objectives. +

+
+
+
+ + +
+
+ +
+
+

Grounded in business context

+

+ Every solution is tailored to your specific business environment, challenges, and growth objectives. +

+
+
+
+ + +
+
+ +
+
+

Research-backed, behaviour-anchored

+

+ Our methodologies are rooted in rigorous research and focused on sustainable behavioral transformation. +

+
+
+
+ + +
+
+ +
+
+

Delivered through immersive formats

+

+ Interactive, experiential learning approaches that engage participants and drive lasting impact. +

+
+
+
+ + )} +
+
+
+
+ + {/* Section 3: Who We Are - Updated Statistics - Dynamic from API */} +
+
+
+ +
+
+
+
+ {aboutUsData?.who_we_are_title || "Who we are"} +
+
+ +
+

+ A premier Indian leadership development institution shaping India's most transformational leaders +

+
+
+ +
+ {(aboutUsData?.stat_section && aboutUsData.stat_section.length > 0) ? ( + aboutUsData.stat_section.map((stat, index) => ( + +
+ {stat.number}{stat.suffix} +
+
+
+ {stat.label.toUpperCase()} +
+
+ )) + ) : ( + <> + +
+ 150+ +
+
+
+ CORPORATES +
+
+ + +
+ 27,000+ +
+
+
+ LEADERS +
+
+ + +
+ 5,000+ +
+
+
+ ROOM NIGHTS +
+
+ + +
+ India & APAC +
+
+
+ PRESENCE +
+
+ + )} +
+
+
+
+
+ + {/* Section 4: Our Team - Dynamic from API (outer grid from API, modal from static) */} +
+
+
+ + +

{aboutUsData?.our_team_title || "Our Team"}

+
+

+ {aboutUsData?.our_team_description || "We have a team of 7 consultants and 4 young consultants. All our senior Consultants are ex-business professionals with experience ranging from 15-30 years in varied business functions and carry a deep understanding of the area they are engaging in. Two of them bring in Board room experience. – Meet them"} +

+
+
+ + {/* Team Members Grid - Using API data for outer display */} +
+ {apiTeamMembers.map((member, index) => { + const name = member.name_role.split(' - ')[0]; + const role = member.name_role.split(' - ')[1] || 'Team Member'; + + return ( + handleMemberClick(member)} + > +
+
+ {member.alt_text { + (e.target as HTMLImageElement).src = 'https://ui-avatars.com/api/?name=' + encodeURIComponent(name) + '&background=04045B&color=fff&size=200'; + }} + /> +
+ +
+
+
+ View Profile +
+
+
+
+ +
+

{name}

+

+ {role} +

+ {/* Bio Section */} +

+ {member.bio || "No bio available"} +

+
+
+ ); + })} +
+
+
+
+ + {/* Section 5: Our Methodology - Dynamic from API */} + {aboutUsData?.methodology && ( +
+
+
+ + + {aboutUsData.methodology.subtitle && ( +

{aboutUsData.methodology.subtitle}

+ )} +
+ +
+
+ +
+ + {[...(aboutUsData.methodology.phases || [])] + .sort((a, b) => (a.display_order || 0) - (b.display_order || 0)) + .map((phase, phaseIndex) => ( +
+
+
+ +
+
+
+ {phase.phase_label || `Phase ${phase.phase_number}`} +
+
+ +
+ +

{phase.title}

+
+
+ +
+ +

+ {phase.description} +

+ + {phase.bullet_title && phase.bullets && phase.bullets.length > 0 && ( +
+

{phase.bullet_title}

+
+ {phase.bullets.map((bullet, bulletIndex) => ( +
+
+ + {bullet} + +
+ ))} +
+
+ )} +
+
+
+
+ ))} + + {aboutUsData?.philosophy && ( +
+
+ +
+ +
+
+
+

{aboutUsData.philosophy.title || "Our Philosophy"}

+
+ +
+

+ {aboutUsData.philosophy.description} +

+ + {aboutUsData.philosophy.points && aboutUsData.philosophy.points.length > 0 && ( +
+ {aboutUsData.philosophy.points.map((point, pointIndex) => ( +
+
+ + + + + + +
+
+

+ {point} +

+
+
+ ))} +
+ )} +
+
+
+
+
+
+ )} + + + navigateTo('/contact')} + ariaLabel="Contact us to design your leadership journey" + className="cta-text-black" + /> + +
+
+
+
+ )} + + {/* Testimonials Section */} + + + {/* CTA Banner Section - Dynamic from API */} + +
+ ); +} \ No newline at end of file diff --git a/src/components/Articles.tsx b/src/components/Articles.tsx new file mode 100644 index 0000000..a1a1934 --- /dev/null +++ b/src/components/Articles.tsx @@ -0,0 +1,767 @@ +import { + BookOpen, + ChevronLeft, + ChevronRight, + Filter, + Grid, + List, + Search, + X +} from 'lucide-react'; +import { useRef, useState, useEffect } from 'react'; +import { BlogItem, useGetBlogsQuery } from '../redux/services/blogApi'; +import { useGetFaqCategoriesQuery } from '../redux/services/faqApi'; +import { ImageWithFallback } from './figma/ImageWithFallback'; +import { PrimaryCTAButton } from './PrimaryCTAButton'; +import { navigateTo } from './Router'; +import { Badge } from './ui/badge'; +import { Button } from './ui/button'; +import { Card, CardContent } from './ui/card'; +import { Input } from './ui/input'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select'; +import { FullScreenLoader } from './FullScreenLoader'; +import { getSlugWithId } from '../utils/urlHelpers'; + +// Define category type with ID and name +interface CategoryOption { + id: string; + name: string; +} + +type DateRange = + | 'all_time' + | 'last_7_days' + | 'last_30_days' + | 'last_3_months' + | 'last_6_months'; + +type SortBy = + | 'most_recent' + | 'oldest_first' + | 'title_az'; + +export function Articles() { + const [searchTerm, setSearchTerm] = useState(''); + const [selectedCategory, setSelectedCategory] = useState({ id: 'all', name: 'All Categories' }); + const [selectedReadTime, setSelectedReadTime] = useState('All Read Times'); + const [selectedDateRange, setSelectedDateRange] = useState('all_time'); + const [selectedTopic, setSelectedTopic] = useState<{ + id: string; + name: string; + }>({ + id: 'all', + name: 'All Topics' + }); + const [sortBy, setSortBy] = useState('most_recent'); + const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid'); + const [currentPage, setCurrentPage] = useState(1); + const [debouncedSearch, setDebouncedSearch] = useState(''); + const articlesPerPage = 6; + const containerRef = useRef(null); + const [allTags, setAllTags] = useState<{ id: string; name: string }[]>([]); + + // Fetch categories for filter dropdown + const { + data: categoriesData, + isLoading: isLoadingCategories + } = useGetFaqCategoriesQuery({ + limit: 100, + offset: 0 + }); + + // Filter categories to only those for blog and create options with id and name + const categories: CategoryOption[] = [ + { id: 'all', name: 'All Categories' }, + ...(categoriesData?.data?.items + ?.filter((category: any) => category.for_blog) + .map((category: any) => ({ + id: category.id, + name: category.category_name + })) || []) + ]; + + // Debounce search term + useEffect(() => { + const timer = setTimeout(() => { + setDebouncedSearch(searchTerm); + }, 500); + return () => clearTimeout(timer); + }, [searchTerm]); + + // Fetch blogs from API with all parameters + const { + data: blogsData, + isLoading: isLoadingBlogs, + isError: isBlogsError, + refetch: refetchBlogs + } = useGetBlogsQuery({ + limit: articlesPerPage, + offset: (currentPage - 1) * articlesPerPage, + search: debouncedSearch || undefined, + content_status: 'publish', + content_type: 'BLOG', + date_range: selectedDateRange !== 'all_time' ? selectedDateRange : undefined, + sort_by: sortBy, + content_category_id: selectedCategory.id !== 'all' ? selectedCategory.id : undefined, // Send UUID + tag_id: selectedTopic.id !== 'all' ? selectedTopic.id : undefined, + }); + + + const sortOptions = [ + { value: 'most_recent', label: 'Most Recent' }, + { value: 'oldest_first', label: 'Oldest First' }, + { value: 'title_az', label: 'Title A-Z' } + ]; + + const readTimes = ['All Read Times', 'Under 5 min', '5-10 min', 'Over 10 min']; + const dateRanges = [ + { value: 'all_time', label: 'All Time' }, + { value: 'last_7_days', label: 'Last 7 days' }, + { value: 'last_30_days', label: 'Last 30 days' }, + { value: 'last_3_months', label: 'Last 3 months' } + ]; + + // Format date function + const formatDate = (dateString: string) => { + return new Date(dateString).toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' + }); + }; + + // Calculate read time based on content length (approx) + const calculateReadTime = (content: string): string => { + const wordsPerMinute = 200; + const wordCount = content.split(/\s+/).length; + const minutes = Math.ceil(wordCount / wordsPerMinute); + return `${minutes} min read`; + }; + + // Filter articles by read time (client-side only - API doesn't support this) + const getReadTimeFilteredArticles = () => { + if (selectedReadTime === 'All Read Times' || !blogsData?.data?.items) { + return blogsData?.data?.items || []; + } + + return (blogsData?.data?.items || []).filter((blog: BlogItem) => { + const readTimeMinutes = parseInt(calculateReadTime(blog.content).replace(' min read', '')) || 0; + return (selectedReadTime === 'Under 5 min' && readTimeMinutes < 5) || + (selectedReadTime === '5-10 min' && readTimeMinutes >= 5 && readTimeMinutes <= 10) || + (selectedReadTime === 'Over 10 min' && readTimeMinutes > 10); + }); + }; + + const finalFilteredArticles = getReadTimeFilteredArticles(); + + const totalPages = Math.ceil((blogsData?.data?.pagination?.total || 0) / articlesPerPage); + + const clearAllFilters = () => { + setSearchTerm(''); + setDebouncedSearch(''); + setSelectedCategory({ id: 'all', name: 'All Categories' }); + setSelectedReadTime('All Read Times'); + setSelectedDateRange('all_time'); + setSelectedTopic({ id: 'all', name: 'All Topics' }); + setSortBy('most_recent'); + setCurrentPage(1); + }; + + const hasActiveFilters = Boolean( + searchTerm || + selectedCategory.id !== 'all' || + selectedReadTime !== 'All Read Times' || + selectedDateRange !== 'all_time' || + selectedTopic.id !== 'all' + ); + + useEffect(() => { + if (!blogsData?.data?.items || allTags.length > 0) return; + + const tags = Array.from( + new Map( + blogsData.data.items + .flatMap((blog: BlogItem) => blog.blog_tags || []) + .map(tag => [tag.id, { id: tag.id, name: tag.tag_name }]) + ).values() + ); + + setAllTags(tags); +}, [blogsData]); + + // Handle loading state + if (isLoadingBlogs || isLoadingCategories) { + return ( +
+ +
+ ); + } + + // Handle error state + if (isBlogsError) { + return ( +
+
+
+ +
+

Failed to load articles

+

Please try again later

+ +
+
+ ); + } + + return ( +
+ {/* Hero Section */} +
+
+ +
+
+ +
+
+
+
+ INSIGHTS & KNOWLEDGE +
+ +

+ Articles & Research +

+ +

+ Discover cutting-edge insights, research findings, and expert perspectives on leadership development, management strategies, and organizational excellence. +

+
+
+ + {/* Statistics Strip */} +
+
+
+
+
+
{blogsData?.data?.pagination?.total || 0}+
+
Expert Articles
+
+
+
{categories.length - 1}
+
Categories
+
+
+
{allTags.length}+
+
Topics
+
+
+
+
+
+
+ + {/* Search and Controls Section */} +
+
+
+ {/* Search Bar */} +
+ + setSearchTerm(e.target.value)} + className="pl-10 pr-4 py-3 text-body rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 w-full bg-gray-50" + style={{ + fontSize: 'var(--font-body)', + fontFamily: 'var(--font-family-base)', + height: '48px' + }} + /> +
+ + {/* View Toggle and Sort */} +
+
+ + +
+ + +
+
+
+
+ + {/* Main Content Section with Sidebar */} +
+
+
+ {/* Left Sidebar - Sticky Filters */} +
+
+ + {/* Filter Header */} +
+
+
+
+ +
+

+ Filters +

+
+ {hasActiveFilters && ( + + )} +
+
+ + {/* Filter Content */} +
+
+ {/* Category Filter */} +
+ + +
+ + {/* Read Time Filter - Client-side only */} +
+ + +
+ + {/* Date Range Filter */} +
+ + +
+ + {/* Topics Filter */} +
+ + +
+
+
+
+
+
+ + {/* Right Content Area - Scrollable Articles */} +
+
+ Showing {finalFilteredArticles.length} of {blogsData?.data?.pagination?.total || 0} articles +
+ + {/* Articles Results */} + {finalFilteredArticles.length === 0 ? ( +
+ +

+ No articles found matching your criteria. +

+ {hasActiveFilters && ( + + )} +
+ ) : ( + <> + {/* Grid View */} + {viewMode === 'grid' && ( +
+ {finalFilteredArticles.map((article: BlogItem) => ( + { + // Use slug_name to create the URL with full UUID + const url = getSlugWithId(article.slug_name, article.id); + navigateTo(`/learning/articles/${url}`); + }} + > +
+ +
+ +
+ + {article.content_category} + + + {calculateReadTime(article.content)} + +
+ +

+ {article.title} +

+ +

+ {article.short_description || article.content.substring(0, 150) + '...'} +

+ +
+
+ {formatDate(article.updated_at)} +
+
+ + {/* Display tags if available */} + {article.blog_tags && article.blog_tags.length > 0 && ( +
+ {article.blog_tags.slice(0, 3).map((tag, idx) => ( + + {tag.tag_name} + + ))} + {article.blog_tags.length > 3 && ( + +{article.blog_tags.length - 3} + )} +
+ )} +
+
+ ))} +
+ )} + + {/* List View */} + {viewMode === 'list' && ( +
+ {finalFilteredArticles.map((article: BlogItem) => ( + { + // Use slug_name to create the URL with full UUID + const url = getSlugWithId(article.slug_name, article.id); + navigateTo(`/learning/articles/${url}`); + }} + > +
+
+ +
+ +
+
+
+
+ + {article.content_category} + + + {calculateReadTime(article.content)} + +
+ +

+ {article.title} +

+ +

+ {article.short_description || article.content.substring(0, 200) + '...'} +

+ +
+
+ {formatDate(article.updated_at)} +
+ + {/* Display tags if available */} + {article.blog_tags && article.blog_tags.length > 0 && ( +
+ {article.blog_tags.slice(0, 2).map((tag, idx) => ( + + {tag.tag_name} + + ))} + {article.blog_tags.length > 2 && ( + +{article.blog_tags.length - 2} + )} +
+ )} +
+
+
+
+
+
+ ))} +
+ )} + + {/* Pagination */} + {totalPages > 1 && ( +
+ + +
+ {Array.from({ length: totalPages }, (_, i) => { + const page = i + 1; + // Show limited pages for better UX + if (totalPages > 7) { + const showPage = + page === 1 || + page === totalPages || + (page >= currentPage - 1 && page <= currentPage + 1); + + if (!showPage) { + if (page === currentPage - 2 || page === currentPage + 2) { + return ...; + } + return null; + } + } + + return ( + + ); + })} +
+ + +
+ )} + + )} +
+
+
+
+ + {/* CTA Banner Section */} +
+
+ +
+
+
+ +
+
+
+
+ NEXT STEPS +
+ +

+ Ready to explore more insights? + + {" "}Discover{" "} + + our complete library of leadership resources. +

+ + navigateTo('/learning/articles')} + ariaLabel="Browse all leadership articles and resources" + className="cta-banner-yellow mb-6" + /> + +

+ Access cutting-edge research, expert insights, and practical guidance to accelerate your leadership journey and organizational success. +

+
+
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/AuthContext.tsx b/src/components/AuthContext.tsx new file mode 100644 index 0000000..ebe7aaf --- /dev/null +++ b/src/components/AuthContext.tsx @@ -0,0 +1,54 @@ +import React, { createContext, useContext, useState, ReactNode } from 'react'; + +interface User { + name: string; + email: string; + corporateName: string; + avatar?: string; +} + +interface AuthContextType { + user: User | null; + isAuthenticated: boolean; + signIn: (user: User) => void; + signOut: () => void; +} + +const AuthContext = createContext(undefined); + +interface AuthProviderProps { + children: ReactNode; +} + +export function AuthProvider({ children }: AuthProviderProps) { + const [user, setUser] = useState(null); + + const signIn = (userData: User) => { + setUser(userData); + }; + + const signOut = () => { + setUser(null); + }; + + const value: AuthContextType = { + user, + isAuthenticated: !!user, + signIn, + signOut, + }; + + return ( + + {children} + + ); +} + +export function useAuth() { + const context = useContext(AuthContext); + if (context === undefined) { + throw new Error('useAuth must be used within an AuthProvider'); + } + return context; +} \ No newline at end of file diff --git a/src/components/BlogDetail.tsx b/src/components/BlogDetail.tsx new file mode 100644 index 0000000..4d9200c --- /dev/null +++ b/src/components/BlogDetail.tsx @@ -0,0 +1,546 @@ +import React, { useState, useEffect } from 'react'; +import { useParams, useNavigate } from 'react-router-dom'; +import { Button } from './ui/button'; +import { Card, CardContent } from './ui/card'; +import { Badge } from './ui/badge'; +import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'; +import { ImageWithFallback } from './figma/ImageWithFallback'; +import { CTABannerSection } from './CTABannerSection'; +import { useCart } from './CartContext'; +import { + Calendar, + Clock, + ChevronUp, + Bookmark, + Twitter, + Facebook, + Linkedin, + Link, + Heart, + Eye, + BookOpen, + ArrowLeft +} from 'lucide-react'; +import { useGetBlogByIDQuery, useGetBlogsQuery } from '../redux/services/blogApi'; +import { FullScreenLoader } from './FullScreenLoader'; +import { extractIdFromSlug, extractSlugFromSlugAndId, getSlugWithId } from '../utils/urlHelpers'; + +interface BlogDetailProps { + params?: { + slugAndId?: string; + }; +} + +export function BlogDetail({ params }: BlogDetailProps) { + const { slugAndId } = useParams<{ slugAndId: string }>(); + const navigate = useNavigate(); + const [scrollProgress, setScrollProgress] = useState(0); + const [showBackToTop, setShowBackToTop] = useState(false); + const [isLiked, setIsLiked] = useState(false); + const [isBookmarked, setIsBookmarked] = useState(false); + const { addToCart } = useCart(); + + // Extract full ID from URL using the new function + const fullId = slugAndId ? extractIdFromSlug(slugAndId) : null; + const urlSlug = slugAndId ? extractSlugFromSlugAndId(slugAndId) : ''; + + // Fetch blog details by ID directly - no dependency on list API + const { + data: blogPost, + isLoading: isLoadingBlog, + isError: isBlogError, + refetch: refetchBlog + } = useGetBlogByIDQuery(fullId as string, { + skip: !fullId, + refetchOnMountOrArgChange: true, + }); + + // Fetch related blogs (excluding current blog) + const { + data: relatedBlogsData, + isLoading: isLoadingRelated + } = useGetBlogsQuery({ + limit: 3, + offset: 0, + content_status: 'publish', + content_type: 'BLOG', + }, { + skip: !fullId, + }); + + // SEO: Check if URL slug matches the actual slug_name and redirect if needed + useEffect(() => { + if (blogPost && fullId) { + // Get the expected slug from the blog post + const expectedSlug = blogPost.slug_name; + // Create the expected URL with proper formatting + const expectedUrl = getSlugWithId(expectedSlug, fullId); + // Get the current URL slug + const currentSlugAndId = slugAndId || ''; + + // Compare (case-insensitive) + if (currentSlugAndId.toLowerCase() !== expectedUrl.toLowerCase()) { + // Redirect to the correct URL + navigate(`/learning/articles/${expectedUrl}`, { replace: true }); + } + } + }, [blogPost, fullId, slugAndId, navigate]); + + useEffect(() => { + if (blogPost?.title) { + document.title = `${blogPost.title} | KLC Blog`; + } + window.scrollTo(0, 0); + + const handleScroll = () => { + const winScroll = document.body.scrollTop || document.documentElement.scrollTop; + const height = document.documentElement.scrollHeight - document.documentElement.clientHeight; + const scrolled = (winScroll / height) * 100; + + setScrollProgress(scrolled); + setShowBackToTop(winScroll > 300); + }; + + window.addEventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); + }, [blogPost?.title]); + + const formatDate = (dateString: string) => { + return new Date(dateString).toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' + }); + }; + + const handleShare = (platform: string) => { + const url = window.location.href; + const title = blogPost?.title || ''; + + const shareUrls = { + twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`, + facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`, + linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`, + copy: url + }; + + if (platform === 'copy') { + navigator.clipboard.writeText(url); + alert('Link copied to clipboard!'); + } else { + window.open(shareUrls[platform as keyof typeof shareUrls], '_blank', 'width=600,height=400'); + } + }; + + const scrollToTop = () => { + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; + + // Calculate read time based on content length (approx) + const calculateReadTime = (content: string): string => { + const wordsPerMinute = 200; + const wordCount = content.split(/\s+/).length; + const minutes = Math.ceil(wordCount / wordsPerMinute); + return `${minutes} min read`; + }; + + // Filter related blogs (exclude current blog) + const relatedPosts = relatedBlogsData?.data?.items + ?.filter((blog: any) => blog.id !== fullId) + .map((blog: any) => ({ + id: blog.id, + title: blog.title, + slug: blog.slug_name, + excerpt: blog.short_description || blog.content.substring(0, 150) + '...', + author: blog.author_name || 'KLC Team', + publishedDate: blog.updated_at, + readTime: calculateReadTime(blog.content), + category: blog.content_category, + image: blog.banner_img || 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=300&fit=crop' + })) || []; + + // Handle related post click - use full UUID + const handleRelatedPostClick = (postSlug: string, postId: string) => { + const url = getSlugWithId(postSlug, postId); + navigate(`/learning/articles/${url}`); + }; + + // Handle loading state + if (isLoadingBlog) { + return ( +
+ +
+ ); + } + + // Handle error state + if (isBlogError || !blogPost) { + return ( +
+
+
+ +
+

Article Not Found

+

+ The article you're looking for could not be found. It may have been moved or removed. +

+ +
+
+ ); + } + + return ( +
+ {/* Scroll Progress Bar */} +
+
+
+ + {/* Back to Top Button */} + {showBackToTop && ( + + )} + +
+ {/* Consistent Side Gutters - Breadcrumb Navigation */} +
+
+ + + {blogPost.content_category || 'Article'} +
+
+ + {/* Main Content Container with Consistent Gutters */} +
+ {/* Reading Width Constraint for Better Readability */} +
+ {/* Hero Header - Improved Spacing */} +
+ {/* Category Badge */} +
+ + {blogPost.content_category || 'Article'} + + + {/* Improved Typography Hierarchy */} +

+ {blogPost.title} +

+ + {/* Constrained Width Excerpt for Better Readability */} +
+

+ {blogPost.short_description || blogPost.content.substring(0, 200) + '...'} +

+
+
+ + {/* Enhanced Meta Bar with Cleaner Spacing */} +
+ {/* Author Info with Improved Layout */} +
+ + + KLC + +
+
+ KLC Team +
+ + {/* Cleaner Meta Information with Subtle Dividers */} +
+ + + {formatDate(blogPost.updated_at || new Date().toISOString())} + + +
+ + + + {calculateReadTime(blogPost.content)} + + +
+ + + + 0 + +
+
+
+ + {/* Action Buttons with Better Spacing */} +
+ + + + + {/* Share Options */} +
+ + + +
+
+
+ + {/* Featured Image with Better Aspect Ratio */} +
+ +
+
+ + {/* Article Body with Enhanced Typography - Full Width */} +
+ {/* Full Width Container - Uses complete available width */} +
+
+
+
+ + {/* Enhanced Tag Pills with Hover States */} + {blogPost.blog_tags && blogPost.blog_tags.length > 0 && ( +
+

+ Topics covered in this article +

+
+ {blogPost.blog_tags.map((tag: any) => ( + + {tag.tag_name} + + ))} +
+
+ )} + + {/* Enhanced Author Bio Card */} + + +
+ + + KLC + +
+

+ About KLC Team +

+

+ The Kautilya Leadership Center team is dedicated to providing cutting-edge insights and research on leadership development, management strategies, and organizational excellence. +

+
+
+
+
+
+
+ + {/* Related Articles Section with Balanced Grid Layout */} + {relatedPosts.length > 0 && ( +
+
+
+
+
+
+ Continue Learning +
+

+ Explore More Leadership Insights +

+

+ Discover additional strategies and frameworks to enhance your leadership effectiveness +

+
+ + {/* Balanced Card Grid with Equal Spacing */} +
+ {relatedPosts.map((post: any) => ( + { + // Use the same pattern as the main articles with full UUID + const url = getSlugWithId(post.slug, post.id); + navigate(`/learning/articles/${url}`); + }} + style={{ backgroundColor: '#FFFFFF' }} + > +
+ +
+ +
+ + {post.category} + + + {post.readTime} + +
+ +

+ {post.title} +

+ +

+ {post.excerpt} +

+ +
+ + {post.author} + + + {formatDate(post.publishedDate)} + +
+
+
+ ))} +
+
+
+
+ )} + + {/* CTA Section */} + +
+
+ ); +} \ No newline at end of file diff --git a/src/components/Blogs.tsx b/src/components/Blogs.tsx new file mode 100644 index 0000000..4192df1 --- /dev/null +++ b/src/components/Blogs.tsx @@ -0,0 +1,483 @@ +import React, { useState } from 'react'; +import { Button } from './ui/button'; +import { Badge } from './ui/badge'; +import { Calendar, Clock, User, ChevronLeft, ChevronRight, Search, Filter } from 'lucide-react'; +import { Input } from './ui/input'; +import { navigateTo } from './Router'; +import { ImageWithFallback } from './figma/ImageWithFallback'; + +// Mock blog data +const blogPosts = [ + { + id: '1', + slug: 'future-of-leadership-development', + title: 'The Future of Leadership Development: Trends and Innovations', + excerpt: 'Explore emerging trends in leadership development, from AI-powered coaching to virtual reality training experiences that are reshaping how leaders learn and grow.', + content: 'Full blog content would go here...', + author: 'Dr. Sarah Mitchell', + authorRole: 'Chief Learning Officer', + publishDate: '2024-02-15', + readTime: '8 min read', + category: 'Leadership', + tags: ['Leadership Development', 'Innovation', 'Future Trends', 'Technology'], + thumbnail: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=400&fit=crop', + featured: true + }, + { + id: '2', + slug: 'building-emotional-intelligence', + title: 'Building Emotional Intelligence: A Leader\'s Guide to Self-Awareness', + excerpt: 'Discover practical strategies for developing emotional intelligence and how self-aware leaders create more engaged and productive teams.', + content: 'Full blog content would go here...', + author: 'Marcus Rodriguez', + authorRole: 'Leadership Coach', + publishDate: '2024-02-10', + readTime: '6 min read', + category: 'Personal Development', + tags: ['Emotional Intelligence', 'Self-Awareness', 'Team Building', 'Communication'], + thumbnail: 'https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=600&h=400&fit=crop', + featured: false + }, + { + id: '3', + slug: 'remote-leadership-strategies', + title: 'Remote Leadership Strategies: Managing Distributed Teams Effectively', + excerpt: 'Learn proven strategies for leading remote teams, maintaining culture, and driving performance in a distributed work environment.', + content: 'Full blog content would go here...', + author: 'Dr. Emily Chen', + authorRole: 'Remote Work Expert', + publishDate: '2024-02-05', + readTime: '10 min read', + category: 'Remote Work', + tags: ['Remote Leadership', 'Virtual Teams', 'Digital Communication', 'Performance Management'], + thumbnail: 'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=600&h=400&fit=crop', + featured: true + }, + { + id: '4', + slug: 'diversity-inclusion-leadership', + title: 'Diversity and Inclusion: Leading Change in Your Organization', + excerpt: 'A comprehensive guide to implementing meaningful diversity and inclusion initiatives that drive real organizational change.', + content: 'Full blog content would go here...', + author: 'Jennifer Adams', + authorRole: 'D&I Consultant', + publishDate: '2024-01-28', + readTime: '12 min read', + category: 'Diversity & Inclusion', + tags: ['Diversity', 'Inclusion', 'Organizational Change', 'Culture'], + thumbnail: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&h=400&fit=crop', + featured: false + }, + { + id: '5', + slug: 'agile-leadership-mindset', + title: 'Developing an Agile Leadership Mindset for Rapid Change', + excerpt: 'Explore how agile principles can transform your leadership approach and help organizations navigate uncertainty and rapid change.', + content: 'Full blog content would go here...', + author: 'David Park', + authorRole: 'Agile Coach', + publishDate: '2024-01-20', + readTime: '7 min read', + category: 'Agile Leadership', + tags: ['Agile', 'Change Management', 'Adaptability', 'Innovation'], + thumbnail: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=400&fit=crop', + featured: false + }, + { + id: '6', + slug: 'coaching-vs-mentoring', + title: 'Coaching vs. Mentoring: Understanding the Difference and When to Use Each', + excerpt: 'Learn the key differences between coaching and mentoring, and discover when each approach is most effective for leadership development.', + content: 'Full blog content would go here...', + author: 'Lisa Thompson', + authorRole: 'Executive Coach', + publishDate: '2024-01-15', + readTime: '9 min read', + category: 'Coaching', + tags: ['Coaching', 'Mentoring', 'Leadership Development', 'Professional Growth'], + thumbnail: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=400&fit=crop', + featured: false + } +]; + +export function Blogs() { + const [searchTerm, setSearchTerm] = useState(''); + const [selectedCategory, setSelectedCategory] = useState('All'); + const [currentPage, setCurrentPage] = useState(1); + const postsPerPage = 6; + + // Get unique categories + const categories = ['All', ...Array.from(new Set(blogPosts.map(post => post.category)))]; + + // Filter posts based on search and category + const filteredPosts = blogPosts.filter(post => { + const matchesSearch = post.title.toLowerCase().includes(searchTerm.toLowerCase()) || + post.excerpt.toLowerCase().includes(searchTerm.toLowerCase()) || + post.author.toLowerCase().includes(searchTerm.toLowerCase()); + const matchesCategory = selectedCategory === 'All' || post.category === selectedCategory; + return matchesSearch && matchesCategory; + }); + + // Paginate results + const totalPages = Math.ceil(filteredPosts.length / postsPerPage); + const currentPosts = filteredPosts.slice((currentPage - 1) * postsPerPage, currentPage * postsPerPage); + + const formatDate = (dateString: string) => { + return new Date(dateString).toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' + }); + }; + + return ( +
+ {/* Header Section */} +
+
+
+
+
+ INSIGHTS & EXPERTISE +
+ +

+ Leadership Insights Blog +

+ +

+ Discover thought-provoking articles, expert insights, and practical strategies from leading voices in organizational development and leadership excellence. +

+
+ + {/* Search and Filter Section */} +
+
+ {/* Search Bar */} +
+ + setSearchTerm(e.target.value)} + className="pl-10" + style={{ + fontSize: 'var(--font-body)', + fontFamily: 'var(--font-family-base)' + }} + /> +
+ + {/* Category Filter */} +
+ {categories.map((category) => ( + + ))} +
+
+
+ + {/* Featured Posts Section */} + {searchTerm === '' && selectedCategory === 'All' && ( +
+

+ Featured Articles +

+
+ {blogPosts.filter(post => post.featured).slice(0, 2).map((post) => ( +
navigateTo(`/learning/blogs/${post.slug}`)} + > +
+ +
+
+
+ + {post.category} + + + Featured + +
+ +

+ {post.title} +

+ +

+ {post.excerpt} +

+ +
+
+
+ + + {post.author} + +
+
+ + + {formatDate(post.publishDate)} + +
+
+
+ + + {post.readTime} + +
+
+
+
+ ))} +
+
+ )} + + {/* All Posts Grid */} +
+

+ {searchTerm || selectedCategory !== 'All' ? 'Search Results' : 'All Articles'} +

+ + {currentPosts.length === 0 ? ( +
+

+ No articles found matching your criteria. +

+
+ ) : ( +
+ {currentPosts.map((post) => ( +
navigateTo(`/learning/blogs/${post.slug}`)} + > +
+ +
+
+
+ + {post.category} + + {post.featured && ( + + Featured + + )} +
+ +

+ {post.title} +

+ +

+ {post.excerpt} +

+ +
+
+ + + {post.author} + +
+
+ + + {post.readTime} + +
+
+
+
+ ))} +
+ )} +
+ + {/* Pagination */} + {totalPages > 1 && ( +
+ + + + Page {currentPage} of {totalPages} + + + +
+ )} +
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/BookFacility.tsx b/src/components/BookFacility.tsx new file mode 100644 index 0000000..4108a68 --- /dev/null +++ b/src/components/BookFacility.tsx @@ -0,0 +1,991 @@ +import React, { useState, useEffect } from 'react'; +import { navigateTo } from './Router'; +import { Button } from './ui/button'; +import { Card, CardContent, CardHeader, CardTitle } from './ui/card'; +import { Badge } from './ui/badge'; +import { Input } from './ui/input'; +import { Label } from './ui/label'; +import { Textarea } from './ui/textarea'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select'; +import { Calendar } from './ui/calendar'; +import { Alert, AlertDescription } from './ui/alert'; +import { Separator } from './ui/separator'; +import { ImageWithFallback } from './figma/ImageWithFallback'; + +import { + Users, + MapPin, + Clock, + CheckCircle, + CreditCard, + Calendar as CalendarIcon, + Building, + Phone, + Mail, + User, + ArrowLeft, + ArrowRight, + Wifi, + Coffee, + Car, + Utensils, + Copy, + Download, + AlertCircle, + XCircle, + Zap, + Award, + Shield +} from 'lucide-react'; + +interface BookingFormData { + companyName: string; + contactName: string; + email: string; + phone: string; + role: string; + teamSize: string; + facilityZone: string; + additionalRequirements: string; +} + +interface TimeSlot { + time: string; + available: boolean; + price: number; +} + +interface BookingConfirmation { + referenceId: string; + facilityName: string; + date: string; + timeSlot: string; + totalAmount: number; + companyName: string; + contactName: string; + email: string; + phone: string; +} + +const facilityData = { + id: 'executive-boardroom', + name: 'Executive Boardroom', + description: 'Premium boardroom designed for high-level meetings and strategic discussions with state-of-the-art technology.', + capacity: 20, + pricePerHour: 2500, + image: 'https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=800&h=600&fit=crop', + features: [ + '4K video conferencing system', + 'Premium leather seating', + 'Climate controlled environment', + 'Wireless presentation system', + 'Premium catering options', + 'Dedicated technical support' + ], + amenities: [ + { icon: Wifi, name: 'High-Speed WiFi' }, + { icon: Coffee, name: 'Refreshment Station' }, + { icon: Car, name: 'Valet Parking' }, + { icon: Utensils, name: 'Premium Catering' } + ] +}; + +const generateTimeSlots = (date: Date): TimeSlot[] => { + const slots: TimeSlot[] = []; + const isWeekend = date.getDay() === 0 || date.getDay() === 6; + + if (isWeekend) { + return []; // No slots available on weekends + } + + const startHour = 9; + const endHour = 18; + + for (let hour = startHour; hour < endHour; hour++) { + const timeString = `${hour.toString().padStart(2, '0')}:00`; + const available = Math.random() > 0.3; // Random availability for demo + slots.push({ + time: timeString, + available, + price: facilityData.pricePerHour + }); + } + + return slots; +}; + +const generateReferenceId = (): string => { + return 'KLC-' + Date.now().toString().slice(-8).toUpperCase(); +}; + +export function BookFacility() { + const [currentStep, setCurrentStep] = useState<'booking' | 'confirmation' | 'payment-success' | 'payment-failed'>('booking'); + const [selectedDate, setSelectedDate] = useState(new Date()); + const [selectedTimeSlot, setSelectedTimeSlot] = useState(''); + const [timeSlots, setTimeSlots] = useState([]); + const [bookingForm, setBookingForm] = useState({ + companyName: '', + contactName: '', + email: '', + phone: '', + role: '', + teamSize: '', + facilityZone: 'executive-wing', + additionalRequirements: '' + }); + const [bookingConfirmation, setBookingConfirmation] = useState(null); + const [isSubmitting, setIsSubmitting] = useState(false); + + useEffect(() => { + document.title = 'Book Facility - Kautilya Leadership Centre'; + window.scrollTo(0, 0); + }, []); + + useEffect(() => { + if (selectedDate) { + setTimeSlots(generateTimeSlots(selectedDate)); + setSelectedTimeSlot(''); // Reset time slot when date changes + } + }, [selectedDate]); + + const formatPrice = (price: number) => { + return new Intl.NumberFormat('en-IN', { + style: 'currency', + currency: 'INR', + maximumFractionDigits: 0 + }).format(price); + }; + + const formatDate = (date: Date) => { + return date.toLocaleDateString('en-IN', { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric' + }); + }; + + const handleSubmitBooking = async (e: React.FormEvent) => { + e.preventDefault(); + if (!selectedDate || !selectedTimeSlot) return; + + setIsSubmitting(true); + + // Simulate API call + setTimeout(() => { + const selectedSlot = timeSlots.find(slot => slot.time === selectedTimeSlot); + const confirmation: BookingConfirmation = { + referenceId: generateReferenceId(), + facilityName: facilityData.name, + date: formatDate(selectedDate), + timeSlot: selectedTimeSlot, + totalAmount: selectedSlot?.price || facilityData.pricePerHour, + companyName: bookingForm.companyName, + contactName: bookingForm.contactName, + email: bookingForm.email, + phone: bookingForm.phone + }; + + setBookingConfirmation(confirmation); + setCurrentStep('confirmation'); + setIsSubmitting(false); + }, 2000); + }; + + const handlePayNow = () => { + // Simulate payment processing + setIsSubmitting(true); + setTimeout(() => { + const success = Math.random() > 0.2; // 80% success rate for demo + setCurrentStep(success ? 'payment-success' : 'payment-failed'); + setIsSubmitting(false); + }, 3000); + }; + + const copyReferenceId = () => { + if (bookingConfirmation) { + navigator.clipboard.writeText(bookingConfirmation.referenceId); + } + }; + + const isFormValid = () => { + return ( + bookingForm.companyName && + bookingForm.contactName && + bookingForm.email && + bookingForm.phone && + bookingForm.role && + bookingForm.teamSize && + selectedDate && + selectedTimeSlot + ); + }; + + const availableTimeSlots = timeSlots.filter(slot => slot.available); + + if (currentStep === 'payment-success') { + return ( +
+
+
+
+
+ +
+ +

+ Payment Successful! +

+ +

+ Your facility booking has been confirmed and payment processed successfully. + You'll receive a confirmation email shortly. +

+ + {bookingConfirmation && ( + + + Booking Confirmed + + +
+
+ Reference ID: +
{bookingConfirmation.referenceId}
+
+
+ Amount Paid: +
+ {formatPrice(bookingConfirmation.totalAmount)} +
+
+
+
+
+ )} + +
+ + +
+
+
+
+
+ ); + } + + if (currentStep === 'payment-failed') { + return ( +
+
+
+
+
+ +
+ +

+ Payment Failed +

+ +

+ We encountered an issue processing your payment. Your booking is still reserved + for the next 30 minutes. Please try again or contact our support team. +

+ + + + + Your booking reference {bookingConfirmation?.referenceId} is + temporarily held. Please complete payment within 30 minutes to confirm your booking. + + + +
+ + +
+
+
+
+
+ ); + } + + if (currentStep === 'confirmation') { + return ( +
+
+
+
+ {/* Confirmation Header */} +
+
+ +
+

+ Booking Request Submitted +

+

+ Your facility booking request has been received and is being processed. +

+
+ + {/* Confirmation Panel */} + {bookingConfirmation && ( + + +
+ Booking Confirmation + + Pending Confirmation + +
+
+ + {/* Reference ID */} +
+
+
+ Reference ID +
+ {bookingConfirmation.referenceId} +
+
+ +
+
+ + {/* Booking Details */} +
+
+

Facility Details

+
+
+ +
+
{bookingConfirmation.facilityName}
+
Executive Wing
+
+
+
+ +
+
{bookingConfirmation.date}
+
{bookingConfirmation.timeSlot}
+
+
+
+ +
+
Up to {facilityData.capacity} people
+
Maximum capacity
+
+
+
+
+ +
+

Contact Information

+
+
+ +
+
{bookingConfirmation.companyName}
+
Company
+
+
+
+ +
+
{bookingConfirmation.contactName}
+
Contact Person
+
+
+
+ +
+
{bookingConfirmation.email}
+
Email
+
+
+
+
+
+ + + + {/* Pricing */} +
+ Total Amount + + {formatPrice(bookingConfirmation.totalAmount)} + +
+
+
+ )} + + {/* Action Buttons */} +
+ + +
+
+
+
+
+ ); + } + + return ( +
+ {/* Hero Section */} +
+
+ {/* Left Side - Content (60%) */} +
+
+ {/* Price Badge */} +
+ + ₹2,500/hour + +
+ + {/* Main Headline */} +
+

+ Book Executive +
+ Boardroom +

+
+ + {/* Description */} +
+

+ Premium boardroom designed for high-level meetings and strategic discussions with + state-of-the-art technology. +

+
+ + {/* Facility Details */} +
+
+ + 20 people +
+
+ + Executive Wing +
+
+ + 9 AM - 6 PM +
+
+ + Available +
+
+ + {/* Amenities */} +
+
+ + High-Speed WiFi +
+
+ + Refreshment Station +
+
+ + Valet Parking +
+
+ + Premium Catering +
+
+ + 4K Video System +
+
+ + Premium Seating +
+
+ + {/* CTA Button */} +
+ +
+
+
+ + {/* Right Side - Luxury Interior Image (40%) */} +
+
+ + {/* Subtle overlay for depth */} +
+
+
+
+
+ +
+
+
+ {/* Back Button */} + + + {/* Facility Header Card */} + + +
+
+
+ +
+
+ +
+
+
+

+ Book {facilityData.name} +

+

+ {facilityData.description} +

+
+ + {formatPrice(facilityData.pricePerHour)}/hour + +
+ +
+
+ + {facilityData.capacity} people +
+
+ + Executive Wing +
+
+ + 9 AM - 6 PM +
+
+ + Available +
+
+ +
+ {facilityData.amenities.map((amenity, index) => ( + + + {amenity.name} + + ))} +
+
+
+
+
+ +
+ {/* Booking Form */} +
+
+ {/* Company Information */} + + + Company Information + + +
+
+ + setBookingForm({...bookingForm, companyName: e.target.value})} + required + className="text-body min-h-[44px]" + placeholder="Enter company name" + /> +
+
+ + setBookingForm({...bookingForm, contactName: e.target.value})} + required + className="text-body min-h-[44px]" + placeholder="Enter contact name" + /> +
+
+ +
+
+ + setBookingForm({...bookingForm, email: e.target.value})} + required + className="text-body min-h-[44px]" + placeholder="Enter email address" + /> +
+
+ + setBookingForm({...bookingForm, phone: e.target.value})} + required + className="text-body min-h-[44px]" + placeholder="Enter phone number" + /> +
+
+ +
+
+ + +
+
+ + +
+
+ +
+ +