-
+
{/* Course Description - Limited to 2 lines with ellipsis */}
-
-
+
{/* Course Meta Information - Reduced bottom margin */}
-
+
-
-
{course.originalPrice && (
-
)}
- {course.originalPrice && (
+ {/* {course.originalPrice && (
- )}
+ )} */}
-
+
{/* Action Buttons - Horizontal Layout with reduced gap */}
- {/* Add to Cart Button - Outline Blue */}
+ {/* Add to Cart */}
{
+ onMouseEnter={(e: any) => {
e.currentTarget.style.backgroundColor = '#04045B';
e.currentTarget.style.color = 'white';
}}
- onMouseLeave={(e) => {
+ onMouseLeave={(e: any) => {
e.currentTarget.style.backgroundColor = 'transparent';
e.currentTarget.style.color = '#04045B';
}}
>
-
-
- {/* Learn More Button - Solid Blue */}
+
+ {/* Learn More */}
{
+ onMouseEnter={(e: any) => {
e.currentTarget.style.backgroundColor = '#030359';
}}
- onMouseLeave={(e) => {
+ onMouseLeave={(e: any) => {
e.currentTarget.style.backgroundColor = '#04045B';
}}
>
Learn More
-
diff --git a/src/components/LearningOnline.tsx b/src/components/LearningOnline.tsx
index ca3d425..46f94d7 100644
--- a/src/components/LearningOnline.tsx
+++ b/src/components/LearningOnline.tsx
@@ -1,206 +1,48 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Button } from './ui/button';
-import { Badge } from './ui/badge';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
-import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
-import { Input } from './ui/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import {
- Play,
- Users,
- Clock,
- ChevronRight,
ChevronLeft,
- GraduationCap,
- MessageCircle,
- Zap,
- Video,
- Smartphone,
- Award,
- Building2,
- BookOpen,
- Star,
- Globe,
- Target,
- TrendingUp,
- Lightbulb,
- CheckCircle,
- ArrowRight,
- Calendar,
- Search,
+ ChevronRight,
+ Clock,
+ DollarSign,
Filter,
Grid,
List,
- X,
- DollarSign
+ Search,
+ Star,
+ Users,
+ X
} from 'lucide-react';
import { motion } from 'motion/react';
-import { navigateTo } from './Router';
-import { ImageWithFallback } from './figma/ImageWithFallback';
-import { BrandedTag } from './about/BrandedTag';
-import { PrimaryCTAButton } from './PrimaryCTAButton';
-import { CourseCard } from './CourseCard';
-import { CartPopup, CartItem } from './CartPopup';
+import { useState, useEffect, useMemo, useCallback } from 'react';
import { useCart } from './CartContext';
+import { CartItem, CartPopup } from './CartPopup';
+import { CourseCard } from './CourseCard';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { navigateTo } from './Router';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import { Card } from './ui/card';
+import { Input } from './ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { useGetCoursesQuery, Course, GetCoursesParams, useGetCourseCategoriesQuery, CourseCategory } from '../redux/services/courseApi';
+import { useDebounce } from '../redux/hooks/useDebounce';
-// Course Categories
-const courseCategories = [
- 'Leadership Fundamentals',
- 'Decision Making & Strategy',
- 'Perspective & Risk',
- 'Communication & Influence',
- 'Change & Innovation'
-];
+// Helper function to parse rupee price from string (keep as is)
+const parsePriceToNumber = (priceStr: string | number): number => {
+ if (typeof priceStr === 'number') return priceStr;
+ const numericStr = priceStr.toString().replace(/[^0-9.-]/g, '');
+ return parseFloat(numericStr) || 0;
+};
-// Featured Courses Data - Updated with Rupee pricing
-const featuredCourses = [
- {
- id: '1',
- title: 'Strategic Leadership Foundations',
- thumbnail: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=250&fit=crop',
- duration: '12 hours',
- level: 'Intermediate',
- format: 'Self-paced',
- rating: 4.8,
- participants: '2,400+',
- category: 'Leadership Fundamentals',
- description: 'Master the core principles of strategic leadership and organizational vision.',
- price: '₹24,817',
- originalPrice: '₹33,117'
- },
- {
- id: '2',
- title: 'Data-Driven Decision Making',
- thumbnail: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=250&fit=crop',
- duration: '8 hours',
- level: 'Advanced',
- format: 'Cohort-based',
- rating: 4.9,
- participants: '1,800+',
- category: 'Decision Making & Strategy',
- description: 'Learn to make strategic decisions using data analytics and business intelligence.',
- price: '₹37,267',
- originalPrice: '₹45,567'
- },
- {
- id: '3',
- title: 'Risk Assessment & Management',
- thumbnail: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=250&fit=crop',
- duration: '10 hours',
- level: 'Intermediate',
- format: 'Self-paced',
- rating: 4.7,
- participants: '3,200+',
- category: 'Perspective & Risk',
- description: 'Develop expertise in identifying, analyzing, and mitigating organizational risks.',
- price: '₹28,967',
- originalPrice: '₹37,267'
- },
- {
- id: '4',
- title: 'Influential Communication',
- thumbnail: 'https://images.unsplash.com/photo-1556761175-b413da4baf72?w=400&h=250&fit=crop',
- duration: '6 hours',
- level: 'Beginner',
- format: 'Self-paced',
- rating: 4.8,
- participants: '5,100+',
- category: 'Communication & Influence',
- description: 'Master the art of persuasive communication and stakeholder engagement.',
- price: '₹16,517',
- originalPrice: '₹20,667'
- },
- {
- id: '5',
- title: 'Leading Innovation & Change',
- thumbnail: 'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=400&h=250&fit=crop',
- duration: '14 hours',
- level: 'Advanced',
- format: 'Cohort-based',
- rating: 4.9,
- participants: '1,950+',
- category: 'Change & Innovation',
- description: 'Drive organizational transformation and foster a culture of innovation.',
- price: '₹45,567',
- originalPrice: '₹53,867'
- },
- {
- id: '6',
- title: 'Digital Leadership Essentials',
- thumbnail: 'https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=250&fit=crop',
- duration: '9 hours',
- level: 'Intermediate',
- format: 'Self-paced',
- rating: 4.6,
- participants: '2,800+',
- category: 'Leadership Fundamentals',
- description: 'Navigate the digital transformation as a modern leader.',
- price: '₹23,157',
- originalPrice: '₹28,967'
- },
- {
- id: '7',
- title: 'Crisis Leadership Strategies',
- thumbnail: 'https://images.unsplash.com/photo-1584697964358-3e14ca57658b?w=400&h=250&fit=crop',
- duration: '7 hours',
- level: 'Advanced',
- format: 'Cohort-based',
- rating: 4.7,
- participants: '1,200+',
- category: 'Leadership Fundamentals',
- description: 'Navigate uncertainty and lead your team through challenging situations with confidence.',
- price: '₹33,117',
- originalPrice: '₹41,417'
- },
- {
- id: '8',
- title: 'Emotional Intelligence for Leaders',
- thumbnail: 'https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=400&h=250&fit=crop',
- duration: '5 hours',
- level: 'Beginner',
- format: 'Self-paced',
- rating: 4.9,
- participants: '4,300+',
- category: 'Communication & Influence',
- description: 'Develop emotional intelligence to enhance your leadership effectiveness.',
- price: '₹14,857',
- originalPrice: '₹19,007'
- },
- {
- id: 'ldp-foundations',
- title: 'Strategic Leadership Development Program: Foundations',
- thumbnail: 'https://images.unsplash.com/photo-1588912914078-2fe5224fd8b8?w=400&h=250&fit=crop',
- duration: '40 hours',
- level: 'Intermediate',
- format: 'Self-paced',
- rating: 4.8,
- participants: '1,247+',
- category: 'Leadership Development',
- description: 'Master the fundamentals of effective leadership through evidence-based practices and real-world case studies.',
- price: '$599',
- originalPrice: '$799'
- },
- {
- id: '9',
- title: 'Strategic Risk Analysis',
- thumbnail: 'https://images.unsplash.com/photo-1560472355-536de3962603?w=400&h=250&fit=crop',
- duration: '11 hours',
- level: 'Advanced',
- format: 'Self-paced',
- rating: 4.8,
- participants: '1,500+',
- category: 'Perspective & Risk',
- description: 'Master advanced risk analysis techniques for strategic decision-making.',
- price: '₹39,757',
- originalPrice: '₹49,717'
- }
-];
+// Format price with Rupee symbol (keep as is)
+const formatPrice = (price: number): string => {
+ return `₹${price.toLocaleString('en-IN')}`;
+};
export function LearningOnline() {
+ // UI state
const [searchTerm, setSearchTerm] = useState('');
- const [selectedCategory, setSelectedCategory] = useState('All Categories');
- const [selectedLevel, setSelectedLevel] = useState('All Levels');
- const [selectedFormat, setSelectedFormat] = useState('All Formats');
+ const [selectedCategoryId, setSelectedCategoryId] = useState
('');
+ const [selectedCategoryName, setSelectedCategoryName] = useState('All Categories');
const [selectedPriceRange, setSelectedPriceRange] = useState('All Prices');
const [selectedDuration, setSelectedDuration] = useState('All Durations');
const [selectedRating, setSelectedRating] = useState('All Ratings');
@@ -209,98 +51,248 @@ export function LearningOnline() {
const [currentPage, setCurrentPage] = useState(1);
const coursesPerPage = 9;
- // Cart functionality - using global cart context
- const { addToCart } = useCart();
- const [isCartPopupOpen, setIsCartPopupOpen] = useState(false);
- const [recentlyAddedItem, setRecentlyAddedItem] = useState(null);
+ // Debounced search term to avoid too many API calls
+ const debouncedSearchTerm = useDebounce(searchTerm, 500);
- // Get unique values for filters - Updated for Rupees
- const categories = ['All Categories', ...courseCategories];
- const levels = ['All Levels', ...Array.from(new Set(featuredCourses.map(course => course.level)))];
- const formats = ['All Formats', ...Array.from(new Set(featuredCourses.map(course => course.format)))];
- const priceRanges = ['All Prices', 'Under ₹20,000', '₹20,000 - ₹35,000', '₹35,000 - ₹50,000', 'Over ₹50,000'];
- const durations = ['All Durations', 'Under 6 hours', '6-10 hours', '10-15 hours', 'Over 15 hours'];
- const ratings = ['All Ratings', '4.5+ Stars', '4.0+ Stars', '3.5+ Stars'];
-
- const sortOptions = [
- { value: 'Most Popular', label: 'Most Popular' },
- { value: 'newest', label: 'Newest First' },
- { value: 'title', label: 'Title A-Z' },
- { value: 'price_low', label: 'Price: Low to High' },
- { value: 'price_high', label: 'Price: High to Low' },
- { value: 'rating', label: 'Highest Rated' },
- { value: 'duration', label: 'Duration' }
- ];
-
- // Helper function to parse rupee price
- const parseRupeePrice = (priceStr: string) => {
- return parseFloat(priceStr.replace('₹', '').replace(/,/g, ''));
- };
-
- // Filter and sort courses
- const filteredCourses = featuredCourses.filter(course => {
- const matchesSearch = course.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
- course.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
- course.category.toLowerCase().includes(searchTerm.toLowerCase());
-
- const matchesCategory = selectedCategory === 'All Categories' || course.category === selectedCategory;
- const matchesLevel = selectedLevel === 'All Levels' || course.level === selectedLevel;
- const matchesFormat = selectedFormat === 'All Formats' || course.format === selectedFormat;
-
- // Price filter - Updated for Rupees
- const price = parseRupeePrice(course.price);
- const matchesPrice = selectedPriceRange === 'All Prices' ||
- (selectedPriceRange === 'Under ₹20,000' && price < 20000) ||
- (selectedPriceRange === '₹20,000 - ₹35,000' && price >= 20000 && price <= 35000) ||
- (selectedPriceRange === '₹35,000 - ₹50,000' && price >= 35000 && price <= 50000) ||
- (selectedPriceRange === 'Over ₹50,000' && price > 50000);
-
- // Duration filter
- const durationHours = parseInt(course.duration);
- const matchesDuration = selectedDuration === 'All Durations' ||
- (selectedDuration === 'Under 6 hours' && durationHours < 6) ||
- (selectedDuration === '6-10 hours' && durationHours >= 6 && durationHours <= 10) ||
- (selectedDuration === '10-15 hours' && durationHours >= 10 && durationHours <= 15) ||
- (selectedDuration === 'Over 15 hours' && durationHours > 15);
-
- // Rating filter
- const matchesRating = selectedRating === 'All Ratings' ||
- (selectedRating === '4.5+ Stars' && course.rating >= 4.5) ||
- (selectedRating === '4.0+ Stars' && course.rating >= 4.0) ||
- (selectedRating === '3.5+ Stars' && course.rating >= 3.5);
-
- return matchesSearch && matchesCategory && matchesLevel && matchesFormat && matchesPrice && matchesDuration && matchesRating;
- }).sort((a, b) => {
- switch (sortBy) {
- case 'Most Popular':
- return parseInt(b.participants.replace(/[^\d]/g, '')) - parseInt(a.participants.replace(/[^\d]/g, ''));
- case 'newest':
- return a.id.localeCompare(b.id); // Assuming newer courses have higher IDs
- case 'title':
- return a.title.localeCompare(b.title);
- case 'price_low':
- return parseRupeePrice(a.price) - parseRupeePrice(b.price);
- case 'price_high':
- return parseRupeePrice(b.price) - parseRupeePrice(a.price);
- case 'rating':
- return b.rating - a.rating;
- case 'duration':
- return parseInt(a.duration) - parseInt(b.duration);
- default:
- return 0;
- }
+ // Fetch course categories
+ const { data: categoriesData, isLoading: categoriesLoading } = useGetCourseCategoriesQuery({
+ limit: 100,
+ offset: 0
});
- // Paginate results
- const totalPages = Math.ceil(filteredCourses.length / coursesPerPage);
+ const sortOptions = [
+ { value: 'most_popular', label: 'Most Popular' },
+ { value: 'newest', label: 'Newest First' },
+ { value: 'title_asc', label: 'Title A-Z' },
+ { value: 'price_asc', label: 'Price: Low to High' },
+ { value: 'price_desc', label: 'Price: High to Low' },
+ { value: 'rating_desc', label: 'Highest Rated' },
+ { value: 'duration_asc', label: 'Duration' }
+ ];
+
+ const priceRanges = [
+ 'All Prices',
+ 'Under ₹20,000',
+ '₹20,000 - ₹35,000',
+ '₹35,000 - ₹50,000',
+ 'Over ₹50,000'
+ ];
+
+ const durations = [
+ 'All Durations',
+ 'Under 6 hours',
+ '6-10 hours',
+ '10-15 hours',
+ 'Over 15 hours'
+ ];
+
+ const ratings = [
+ 'All Ratings',
+ '4.5+ Stars',
+ '4.0+ Stars',
+ '3.5+ Stars'
+ ];
+
+ // Build categories list
+ const categories = useMemo(() => {
+ const cats = [{ id: '', name: 'All Categories' }];
+ if (categoriesData?.data?.items) {
+ categoriesData.data.items.forEach((cat: CourseCategory) => {
+ cats.push({ id: cat.id, name: cat.category_name });
+ });
+ }
+ return cats;
+ }, [categoriesData]);
+
+ // Helper function to convert UI price range to API format
+ const getPriceRangeForApi = useCallback((priceRange: string): string | undefined => {
+ switch (priceRange) {
+ case 'Under ₹20,000':
+ return '0-20000';
+ case '₹20,000 - ₹35,000':
+ return '20000-35000';
+ case '₹35,000 - ₹50,000':
+ return '35000-50000';
+ case 'Over ₹50,000':
+ return '50000-999999';
+ default:
+ return undefined;
+ }
+ }, []);
+
+ // Helper function to convert UI duration to API format
+ const getDurationForApi = useCallback((duration: string): string | undefined => {
+ switch (duration) {
+ case 'Under 6 hours':
+ return '0-6';
+ case '6-10 hours':
+ return '6-10';
+ case '10-15 hours':
+ return '10-15';
+ case 'Over 15 hours':
+ return '15-999';
+ default:
+ return undefined;
+ }
+ }, []);
+
+ // Helper function to convert UI rating to API format
+ const getRatingForApi = useCallback((rating: string): number | undefined => {
+ switch (rating) {
+ case '4.5+ Stars':
+ return 4.5;
+ case '4.0+ Stars':
+ return 4.0;
+ case '3.5+ Stars':
+ return 3.5;
+ default:
+ return undefined;
+ }
+ }, []);
+
+ // Helper function to convert sort option to API format
+ const getSortByForApi = useCallback((sort: string): string | undefined => {
+ switch (sort) {
+ case 'Most Popular':
+ return 'popular';
+ case 'newest':
+ return 'newest';
+ case 'title':
+ return 'title_asc';
+ case 'price_low':
+ return 'price_asc';
+ case 'price_high':
+ return 'price_desc';
+ case 'rating':
+ return 'rating_desc';
+ case 'duration':
+ return 'duration_asc';
+ default:
+ return undefined;
+ }
+ }, []);
+
+ // Build API filters based on current UI state
+ const apiFilters: GetCoursesParams = useMemo(() => {
+ const filters: GetCoursesParams = {
+ limit: 100,
+ offset: 0,
+ status: 'publish'
+ };
+
+ // Category filter
+ if (selectedCategoryId) {
+ filters.course_category = [selectedCategoryId];
+ }
+
+ // Search query
+ if (debouncedSearchTerm) {
+ filters.search_query = debouncedSearchTerm;
+ }
+
+ // Price range
+ const apiPriceRange = getPriceRangeForApi(selectedPriceRange);
+ if (apiPriceRange) {
+ filters.price_range = apiPriceRange;
+ }
+
+ // Duration range
+ const apiDurationRange = getDurationForApi(selectedDuration);
+ if (apiDurationRange) {
+ filters.duration_range = apiDurationRange;
+ }
+
+ // Rating
+ const apiRating = getRatingForApi(selectedRating);
+ if (apiRating !== undefined) {
+ filters.min_rating = apiRating;
+ }
+
+ // Sort by
+ const apiSortBy = getSortByForApi(sortBy);
+ if (apiSortBy) {
+ filters.sort_by = apiSortBy;
+ }
+
+ return filters;
+ }, [
+ selectedCategoryId,
+ debouncedSearchTerm,
+ selectedPriceRange,
+ selectedDuration,
+ selectedRating,
+ sortBy,
+ getPriceRangeForApi,
+ getDurationForApi,
+ getRatingForApi,
+ getSortByForApi
+ ]);
+
+ // Fetch courses with API filters
+ const {
+ data: coursesData,
+ isLoading: coursesLoading,
+ isError,
+ isFetching // To show loading indicator while fetching
+ } = useGetCoursesQuery(apiFilters);
+
+ // Reset to page 1 when filters change
+ useEffect(() => {
+ setCurrentPage(1);
+ }, [
+ selectedCategoryId,
+ debouncedSearchTerm,
+ selectedPriceRange,
+ selectedDuration,
+ selectedRating,
+ sortBy
+ ]);
+
+ // Transform API response to course format
+ const courses = useMemo(() => {
+ if (!coursesData?.data?.items) return [];
+
+ return coursesData.data.items.map((course: Course) => ({
+ id: course.id,
+ title: course.course_name,
+ thumbnail: course.thumbnail_img || 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=250&fit=crop',
+ duration: `${course.total_duration || 0} hours`,
+ level: 'Intermediate',
+ format: course.retail_type === 'public' ? 'Cohort-based' : 'Self-paced',
+ rating: course.avg_rating || 4.5,
+ participants: `${Math.floor(Math.random() * 5000) + 100}+`,
+ category: course.course_category_name || 'General',
+ categoryId: course.course_category_xid || '',
+ description: course.course_desc || `Master ${course.course_name} with our comprehensive program.`,
+ price: formatPrice(course.price),
+ originalPrice: formatPrice(course.price * 1.25),
+ course_status: course.course_status
+ }));
+ }, [coursesData]);
+
+ // Get total courses count from API response
+ const totalCoursesCount = coursesData?.data?.pagination_info?.total_count || 0;
+
+ // Paginate the courses (since API returns all courses based on filters, we paginate client-side)
+ const totalPages = Math.ceil(totalCoursesCount / coursesPerPage);
const startIndex = (currentPage - 1) * coursesPerPage;
- const currentCourses = filteredCourses.slice(startIndex, startIndex + coursesPerPage);
+ const currentCourses = courses.slice(startIndex, startIndex + coursesPerPage);
+
+ // Handle category change
+ const handleCategoryChange = (value: string) => {
+ const selectedCat = categories.find(cat => cat.name === value);
+ if (selectedCat) {
+ setSelectedCategoryName(selectedCat.name);
+ setSelectedCategoryId(selectedCat.id);
+ } else {
+ setSelectedCategoryName('All Categories');
+ setSelectedCategoryId('');
+ }
+ };
const clearAllFilters = () => {
setSearchTerm('');
- setSelectedCategory('All Categories');
- setSelectedLevel('All Levels');
- setSelectedFormat('All Formats');
+ handleCategoryChange('All Categories');
setSelectedPriceRange('All Prices');
setSelectedDuration('All Durations');
setSelectedRating('All Ratings');
@@ -308,14 +300,16 @@ export function LearningOnline() {
};
const hasActiveFilters = searchTerm ||
- selectedCategory !== 'All Categories' ||
- selectedLevel !== 'All Levels' ||
- selectedFormat !== 'All Formats' ||
+ selectedCategoryName !== 'All Categories' ||
selectedPriceRange !== 'All Prices' ||
selectedDuration !== 'All Durations' ||
selectedRating !== 'All Ratings';
- // Cart functions - using global cart context
+ // Cart functionality
+ const { addToCart } = useCart();
+ const [isCartPopupOpen, setIsCartPopupOpen] = useState(false);
+ const [recentlyAddedItem, setRecentlyAddedItem] = useState(null);
+
const handleAddToCart = (item: CartItem) => {
addToCart(item);
setRecentlyAddedItem(item);
@@ -327,9 +321,34 @@ export function LearningOnline() {
setRecentlyAddedItem(null);
};
+ // Show loading state
+ if (coursesLoading || categoriesLoading) {
+ return (
+
+ );
+ }
+
+ // Show error state
+ if (isError) {
+ return (
+
+
+
Error Loading Courses
+
Failed to load courses. Please try again later.
+
window.location.reload()}>Retry
+
+
- {/* Hero Banner – Digital Learning - Blog Style */}
+ {/* Hero Banner (keep as is) */}
- {/* Eyebrow Text */}
DIGITAL LEARNING PLATFORM
-
- {/* Main Header */}
Discover Your Leadership
-
- {/* Sub Text */}
Our Leadership Courses are structured packages which are targeted towards building your leadership abilities. Each course is a wholesome package which not only helps you gain awareness about your leadership style but also gives insights to build your leadership abilities. Every course contains curated content targeted towards a specific leadership ability. Each course consists of our proprietary profiling instruments – Leadership Profilers, conceptual videos and experiences of leaders – Leadership Webcasts, as well as additional content to supplement learning.
@@ -371,11 +385,10 @@ export function LearningOnline() {
- {/* Search and Controls Section */}
+ {/* Search and Controls Section (keep as is) */}
- {/* Search Bar */}
- {/* View Toggle and Sort */}
setViewMode('grid')}
className={`p-2 transition-colors ${viewMode === 'grid'
- ? 'text-white'
- : 'bg-white text-gray-600 hover:bg-gray-50'
+ ? 'text-white'
+ : 'bg-white text-gray-600 hover:bg-gray-50'
}`}
style={{
backgroundColor: viewMode === 'grid' ? 'var(--color-primary)' : undefined
@@ -411,8 +423,8 @@ export function LearningOnline() {
setViewMode('list')}
className={`p-2 transition-colors ${viewMode === 'list'
- ? 'text-white'
- : 'bg-white text-gray-600 hover:bg-gray-50'
+ ? 'text-white'
+ : 'bg-white text-gray-600 hover:bg-gray-50'
}`}
style={{
backgroundColor: viewMode === 'list' ? 'var(--color-primary)' : undefined
@@ -428,7 +440,7 @@ export function LearningOnline() {
- {sortOptions.map((option) => (
+ {sortOptions.map((option: any) => (
{option.label}
@@ -481,52 +493,14 @@ export function LearningOnline() {
Category
-
+
{categories.map((category) => (
-
- {category}
-
- ))}
-
-
-
-
- {/* Level Filter */}
-
-
- Level
-
-
-
-
-
- {levels.map((level) => (
-
- {level}
-
- ))}
-
-
-
-
- {/* Format Filter */}
-
-
- Format
-
-
-
-
-
- {formats.map((format) => (
-
- {format}
+
+ {category.name}
))}
@@ -595,10 +569,13 @@ export function LearningOnline() {
- {/* Right Content Area - Scrollable Courses */}
+ {/* Right Content Area */}
-
- Showing {currentCourses.length} of {filteredCourses.length} courses
+
+ Showing {currentCourses.length} of {totalCoursesCount} courses
+ {isFetching && (
+ Updating results...
+ )}
{/* Courses Results */}
@@ -702,15 +679,18 @@ export function LearningOnline() {
{
+ onClick={(e: any) => {
e.stopPropagation();
+
handleAddToCart({
id: course.id,
title: course.title,
price: course.price,
originalPrice: course.originalPrice,
thumbnail: course.thumbnail,
- type: 'course'
+ category: course.category, // ✅ FIX
+ level: course.level, // ✅ FIX
+ type: 'course' // optional (if you added in interface)
});
}}
className="flex items-center gap-2 hover:bg-blue-50 hover:border-blue-300"
diff --git a/src/components/services/CultureCompetence.tsx b/src/components/services/CultureCompetence.tsx
index 09a75e9..08f678b 100644
--- a/src/components/services/CultureCompetence.tsx
+++ b/src/components/services/CultureCompetence.tsx
@@ -1,6 +1,5 @@
import React, { useEffect, useState } from 'react';
import { Button } from '../ui/button';
-import { Badge } from '../ui/badge';
import { Card, CardContent } from '../ui/card';
import { ImageWithFallback } from '../figma/ImageWithFallback';
import { navigateTo } from '../Router';
@@ -11,138 +10,277 @@ import {
ArrowRight,
CheckCircle,
Settings,
- Calendar,
- Download,
- Network,
Users,
Target,
Brain,
- Eye,
TrendingUp,
BarChart3,
Award,
- Lightbulb,
- Shield,
ChevronDown,
ChevronUp,
ArrowLeft,
Star,
- Zap,
- Globe,
Clock,
- BookOpen,
MessageCircle,
- Building,
Heart,
Compass,
- Briefcase
+ Building
} from 'lucide-react';
import { TestimonialsSection } from '../TestimonialsSection';
+import { useGetServiceListQuery } from '../../redux/services/sercicesApi';
+import { FullScreenLoader } from '../FullScreenLoader';
-const targetAudience = [
- {
- title: "Chief Human Resource Officers",
- description: "CHROs and senior HR leaders responsible for organizational culture transformation and employee experience",
- icon: Users,
- challenges: ["Culture misalignment", "Low engagement scores", "Talent retention issues", "Change resistance"]
- },
- {
- title: "CEOs & Business Leaders",
- description: "Senior executives driving organizational transformation and seeking to align culture with business strategy",
- icon: Target,
- challenges: ["Strategic culture alignment", "Performance culture gaps", "Change management", "Cultural integration"]
- },
- {
- title: "Organizational Development Teams",
- description: "OD professionals and teams responsible for culture initiatives and organizational effectiveness",
- icon: Building,
- challenges: ["Culture measurement", "Change intervention design", "Competency modeling", "Assessment implementation"]
- }
-];
+// Types based on API response
+interface ServicePageData {
+ hero_section: {
+ id: string;
+ landing_page_type: string;
+ background_image_url: string;
+ background_image_alt_text: string;
+ headline: string;
+ subtext: string;
+ cta_text: string;
+ cta_destination: string;
+ };
+ overview: {
+ id: string;
+ title: string;
+ description: string;
+ highlight_text: string;
+ overview_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ audience_section: {
+ id: string;
+ title: string;
+ description: string;
+ audience_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ challenges: string[];
+ }>;
+ };
+ use_case_section: {
+ id: string;
+ title: string;
+ description: string;
+ use_case_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ highlight_text: string;
+ }>;
+ };
+ approach_section: {
+ id: string;
+ title: string;
+ description: string;
+ approach_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ bullets: string[];
+ }>;
+ outcomes: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ bullets: string[];
+ }>;
+ };
+ stats_section: {
+ id: string;
+ title: string;
+ description: string;
+ stat_cards: Array<{
+ id: string;
+ value: string;
+ label: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ program_section: {
+ id: string;
+ title: string;
+ description: string;
+ program_phases: Array<{
+ phase: {
+ id: string;
+ phase_number: number;
+ title: string;
+ duration: string;
+ };
+ activities: Array<{
+ id: string;
+ phase_id: string;
+ text: string;
+ }>;
+ outcomes: Array<{
+ id: string;
+ phase_id: string;
+ text: string;
+ }>;
+ }>;
+ };
+ impact_section: {
+ id: string;
+ title: string;
+ description: string;
+ impact_stats: Array<{
+ id: string;
+ value: string;
+ description: string;
+ label: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ impact_benefits: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ testimonial_section: Array<{
+ id: string;
+ profile_xid: string;
+ name: string;
+ designation: string;
+ content: string;
+ video_url: string | null;
+ display_order: number;
+ }>;
+}
-const useCases = [
- {
- title: "Cultural Misalignment",
- description: "When organizational culture doesn't support business strategy or values",
- icon: Compass,
- scenario: "Culture survey scores below 60% or misaligned with stated values"
- },
- {
- title: "Low Employee Engagement",
- description: "When engagement scores indicate cultural issues affecting performance",
- icon: Heart,
- scenario: "Employee engagement below industry benchmarks or declining trends"
- },
- {
- title: "Competency Gaps",
- description: "When organizational capabilities don't match strategic requirements",
- icon: Target,
- scenario: "Skills gaps preventing achievement of strategic objectives"
- },
- {
- title: "Post-Merger Integration",
- description: "When merging cultures or integrating acquisitions require cultural alignment",
- icon: Building,
- scenario: "M&A activity requiring cultural integration and alignment"
- }
-];
-
-const programTimeline = [
- {
- phase: "Phase 1: Assessment & Diagnosis",
- duration: "Months 1-2",
- activities: ["Culture assessment and analysis", "Competency gap analysis", "Stakeholder interviews", "Current state evaluation"],
- deliverables: ["Culture diagnostic report", "Competency assessment", "Gap analysis", "Transformation roadmap"]
- },
- {
- phase: "Phase 2: Design & Planning",
- duration: "Months 3-4",
- activities: ["Target culture definition", "Competency framework design", "Intervention strategy", "Change plan development"],
- deliverables: ["Culture transformation plan", "Competency model", "Change strategy", "Implementation timeline"]
- },
- {
- phase: "Phase 3: Implementation & Integration",
- duration: "Months 5-12",
- activities: ["Culture interventions", "Competency development", "Change management", "Progress monitoring"],
- deliverables: ["Culture transformation results", "Enhanced capabilities", "Sustainable change", "Measurement framework"]
- }
-];
-
-const expectedOutcomes = [
- {
- metric: "73%",
- description: "Average improvement in employee engagement scores",
- icon: Heart,
- category: "Engagement"
- },
- {
- metric: "68%",
- description: "Increase in culture alignment with business strategy",
- icon: Compass,
- category: "Alignment"
- },
- {
- metric: "81%",
- description: "Improvement in organizational competency scores",
- icon: Target,
- category: "Competency"
- },
- {
- metric: "45%",
- description: "Reduction in culture-related turnover",
- icon: Users,
- category: "Retention"
- }
-];
+// Map API icons to Lucide icons
+const getIconComponent = (iconUrl: string) => {
+ const iconMap: Record = {
+ '/icons/culture.svg': Heart,
+ '/icons/competency.svg': Target,
+ '/icons/hr.svg': Users,
+ '/icons/management.svg': Building,
+ '/icons/growth.svg': TrendingUp,
+ '/icons/alignment.svg': Compass,
+ '/icons/assessment.svg': BarChart3,
+ '/icons/development.svg': Brain,
+ '/icons/outcome.svg': Award,
+ '/icons/target.svg': Target,
+ '/icons/engagement.svg': Heart,
+ '/icons/leader.svg': Award,
+ '/icons/performance.svg': TrendingUp,
+ '/icons/people.svg': Users,
+ '/icons/team.svg': Users,
+ '/icons/coaching.svg': MessageCircle,
+ '/icons/compass.svg': Compass,
+ };
+
+ return iconMap[iconUrl] || Target;
+};
export function CultureCompetence() {
- const [expandedUseCase, setExpandedUseCase] = useState(null);
const [expandedPhase, setExpandedPhase] = useState(0);
+
+ const { data: apiResponse, isLoading, error } = useGetServiceListQuery({
+ service_type: 'culture_and_competence_consulting'
+ });
+
+ const apiData = apiResponse?.data as ServicePageData | undefined;
useEffect(() => {
window.scrollTo(0, 0);
}, []);
+ // Loading state
+ if (isLoading) {
+ return (
+
+
+ );
+ }
+
+ // Error state
+ if (error) {
+ console.error('API Error:', error);
+ return (
+
+
+
Error loading content. Please try again later.
+
window.location.reload()} className="mt-4">Retry
+
+
+
+
No data available for this service.
+
navigateTo('/services')} className="mt-4">Back to Services
+
+
{/* Hero Section */}
@@ -151,7 +289,7 @@ export function CultureCompetence() {
@@ -160,7 +298,6 @@ export function CultureCompetence() {
- {/* Back Navigation */}
- Culture & Competence Consulting
+ {apiData.hero_section.headline || 'Culture & Competence Consulting'}
- Transform organizational culture and build strategic competencies that drive 73% better engagement and business performance.
+ {apiData.hero_section.subtext || 'Transform organizational culture and build strategic competencies that drive business performance.'}
navigateTo('/contact?topic=culture-competence')}
- ariaLabel="Book a consultation for culture and competence consulting"
+ text={apiData.hero_section.cta_text || 'Book a Consultation'}
+ onClick={() => navigateTo(apiData.hero_section.cta_destination || '/contact')}
+ ariaLabel={apiData.hero_section.cta_text || 'Book a Consultation'}
className="primary-cta-button-blue cta-text-white"
/>
@@ -201,70 +338,41 @@ export function CultureCompetence() {
-
Culture & Competence Transformation
+
{apiData.overview?.title || 'Culture & Competence Transformation'}
- Culture & Competence Consulting is a comprehensive approach to transforming organizational culture and building strategic competencies that drive business performance. Our methodology combines culture assessment, competency development, and change management to create high-performing, engaged organizations.
+ {apiData.overview?.description || 'A comprehensive approach to transforming organizational culture and building strategic competencies that drive business performance.'}
- The Business Problem It Solves: Many organizations struggle with misaligned cultures that hinder performance, low engagement scores, and competency gaps that prevent strategic goal achievement. Our consulting helps organizations build cultures that support their strategy while developing critical capabilities for success.
+ The Business Problem It Solves: {apiData.overview?.highlight_text || 'Many organizations struggle with misaligned cultures that hinder performance, low engagement scores, and competency gaps that prevent strategic goal achievement.'}
-
-
-
-
+ {apiData.overview?.overview_cards?.map((card, index) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ return (
+
+
+
+
+
+ {card.title}
+
+
+ {card.description}
+
+
-
- Culture Transformation
-
-
- Align organizational culture with business strategy and values for sustainable success
-
-
-
-
-
-
-
-
-
- Competency Development
-
-
- Build strategic capabilities and organizational competencies for competitive advantage
-
-
-
-
-
-
-
-
-
- 73% Performance Impact
-
-
- Proven results with 73% improvement in engagement and business performance metrics
-
-
-
+ );
+ })}
@@ -276,9 +384,9 @@ export function CultureCompetence() {
-
Target Audience
+
{apiData.audience_section?.title || 'Target Audience'}
- Designed for senior leaders and HR professionals driving organizational transformation and culture change.
+ {apiData.audience_section?.description || 'Designed for senior leaders and HR professionals driving organizational transformation and culture change.'}
@@ -321,9 +429,9 @@ export function CultureCompetence() {
-
When Organizations Need Culture Transformation
+
{apiData.use_case_section?.title || 'When Organizations Need Culture Transformation'}
- Ideal for organizations facing cultural misalignment and competency gaps affecting performance.
+ {apiData.use_case_section?.description || 'Ideal for organizations facing cultural misalignment and competency gaps affecting performance.'}
@@ -333,7 +441,6 @@ export function CultureCompetence() {
key={index}
className="bg-white rounded-xl border border-gray-200 p-6 hover:border-[#04045B] hover:shadow-lg transition-all duration-300"
>
- {/* Icon and Title */}
- {/* Trigger Indicator */}
@@ -367,389 +473,254 @@ export function CultureCompetence() {
{/* 4. Our Approach */}
-
-
-
-
-
-
Integrated Culture & Competency Framework
-
- Our proven methodology combines culture assessment, competency modeling, and transformation planning for sustainable results.
-
-
+
+
+
+
+
+
+ {apiData?.approach_section?.title || "Our Approach to Leadership Development"}
+
+
+ {apiData?.approach_section?.description || "A systematic, research-backed methodology that transforms leadership potential into measurable business impact."}
+
+
- {/* Flowchart Container with Connecting Lines */}
-
- {/* Desktop: Horizontal Flowchart */}
-
-
- {/* Row 1: Frameworks, Pedagogy, Delivery */}
-
- {/* Frameworks */}
-
-
-
+ {/* Flowchart Container with Connecting Lines */}
+
+ {/* Only render if approach_cards exist and have items */}
+ {apiData?.approach_section?.approach_cards && apiData.approach_section.approach_cards.length > 0 && (
+ <>
+ {/* Desktop: Horizontal Flowchart */}
+
+
+ {/* Row 1: First 3 approach cards from API */}
+
+ {apiData.approach_section.approach_cards.slice(0, 3).map((card, idx) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ return (
+
+
+ {IconComponent ?
+
{card.title}
+
{card.description}
+ {card.bullets && card.bullets.length > 0 && (
+
+ {card.bullets.slice(0, 3).map((bullet, bulletIdx) => (
+
+ {bullet}
+
+ ))}
+
+ )}
-
Culture Frameworks
-
- Diagnostic models and competency frameworks for transformation
-
-
-
- Culture Assessment
-
-
- Competency Models
-
-
- Values Alignment
-
-
-
+ );
+ })}
- {/* Arrow 1→2 */}
+ {/* Arrows between first 3 cards */}
+ {apiData.approach_section.approach_cards.length >= 2 && (
-
- {/* Pedagogy */}
-
-
-
-
Learning Pedagogy
-
- Change management and organizational learning approaches
-
-
-
- Experiential Learning
-
-
- Change Management
-
-
- Organizational Learning
-
-
-
-
- {/* Arrow 2→3 */}
+ )}
+ {apiData.approach_section.approach_cards.length >= 3 && (
+ )}
+
- {/* Delivery Modes */}
-
-
-
-
Delivery Modes
-
- Multiple formats for culture and competency transformation
-
-
-
- Culture Workshops
-
-
- Leadership Alignment
-
-
- Development Programs
-
-
-
-
-
- {/* Vertical Connector - Center Flow Down */}
+ {/* Vertical Connector - Center Flow Down */}
+ {apiData.approach_section.approach_cards.length > 3 && (
+ )}
- {/* Row 2: Assessment, Coaching */}
+ {/* Row 2: Next 2 approach cards (if available) */}
+ {apiData.approach_section.approach_cards.length >= 4 && (
- {/* Assessment Integration */}
-
-
-
-
Assessment Integration
-
- Comprehensive measurement to track culture transformation
-
-
-
- Engagement Surveys
+ {apiData.approach_section.approach_cards.slice(3, 5).map((card, idx) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ const isFirstOfPair = idx === 0;
+ return (
+
+
+ {IconComponent ?
+
{card.title}
+
{card.description}
+ {card.bullets && card.bullets.length > 0 && (
+
+ {card.bullets.slice(0, 3).map((bullet, bulletIdx) => (
+
+ {bullet}
+
+ ))}
+
+ )}
-
- Culture Analytics
-
-
- Progress Tracking
-
-
-
+ );
+ })}
- {/* Arrow 4→5 */}
-
-
- {/* Coaching Integration */}
-
-
-
+ {/* Arrow between the two cards */}
+ {apiData.approach_section.approach_cards.length >= 5 && (
+
-
Coaching Integration
-
- Leadership support for culture change and capability building
-
-
-
- Executive Coaching
-
-
- Team Coaching
-
-
- Change Leadership
-
-
-
+ )}
+ )}
- {/* Final Vertical Connector - Center Flow Down to Outcome */}
-
-
- {/* Row 3: Expected Outcome - Centered */}
-
-
-
-
Expected Outcome
-
-
- A thriving organizational culture aligned with strategy, powered by competencies that drive performance and engagement.
-
-
- Sustainable Culture Transformation
-
-
+ {/* Final Vertical Connector - Center Flow Down to Outcome */}
+
-
- {/* Tablet & Mobile: Vertical Flowchart */}
-
- {/* Frameworks */}
-
-
-
-
+ {/* Row 3: Expected Outcome - Use API outcomes data */}
+
+
+
+ {apiData.approach_section.outcomes && apiData.approach_section.outcomes[0] ? (() => {
+ const OutcomeIcon = getIconComponent(apiData.approach_section.outcomes[0].icon_url);
+ return OutcomeIcon ?
+ {apiData.approach_section.outcomes?.[0]?.title || "Expected Outcome"}
+
-
Culture Frameworks
-
- Diagnostic models and competency frameworks for transformation
+
+ {apiData.approach_section.outcomes?.[0]?.description || "A systematic, measurable leadership pipeline that accelerates talent development and succession readiness."}
-
- Culture Assessment
-
-
- Competency Models
-
-
- Values Alignment
-
+ {apiData.approach_section.outcomes?.[0]?.bullets && apiData.approach_section.outcomes[0].bullets.length > 0 ? (
+ apiData.approach_section.outcomes[0].bullets.slice(0, 2).map((bullet, idx) => (
+
+ {bullet}
+
+ ))
+ ) : (
+
+ Proven ROI on Leadership Investment
+
+ )}
- {/* Connector Arrow */}
-
-
-
- {/* Pedagogy */}
-
-
-
-
-
Learning Pedagogy
-
- Change management and organizational learning approaches
-
-
-
- Experiential Learning
-
-
- Change Management
-
-
- Organizational Learning
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Delivery Modes */}
-
-
-
-
-
Delivery Modes
-
- Multiple formats for culture and competency transformation
-
-
-
- Culture Workshops
-
-
- Leadership Alignment
-
-
- Development Programs
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Assessment Integration */}
-
-
-
-
-
Assessment Integration
-
- Comprehensive measurement to track culture transformation
-
-
-
- Engagement Surveys
-
-
- Culture Analytics
-
-
- Progress Tracking
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Coaching Integration */}
-
-
-
-
-
Coaching Integration
-
- Leadership support for culture change and capability building
-
-
-
- Executive Coaching
-
-
- Team Coaching
-
-
- Change Leadership
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Expected Outcome */}
-
-
-
Expected Outcome
-
-
- A thriving organizational culture aligned with strategy, powered by competencies that drive performance and engagement.
-
-
- Sustainable Culture Transformation
-
- {/* Framework Effectiveness */}
- {/*
-
-
Framework Effectiveness
-
- Our systematic approach delivers measurable results across key culture and competency metrics.
+ {/* Tablet & Mobile: Vertical Flowchart */}
+
+ {/* Map all approach cards vertically */}
+ {apiData.approach_section.approach_cards.map((card, idx) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ const isEven = idx % 2 === 0;
+ return (
+
+
+
+ {IconComponent ?
+
{card.title}
+
{card.description}
+ {card.bullets && card.bullets.length > 0 && (
+
+ {card.bullets.map((bullet, bulletIdx) => (
+
+ {bullet}
+
+ ))}
+
+ )}
+
+ {/* Connector Arrow */}
+ {idx < apiData.approach_section.approach_cards.length - 1 && (
+
+ )}
+
+ );
+ })}
+
+ {/* Expected Outcome - Use API outcomes data */}
+
+
+ {apiData.approach_section.outcomes && apiData.approach_section.outcomes[0] ? (() => {
+ const OutcomeIcon = getIconComponent(apiData.approach_section.outcomes[0].icon_url);
+ return OutcomeIcon ?
+ {apiData.approach_section.outcomes?.[0]?.title || "Expected Outcome"}
+
+
+
+ {apiData.approach_section.outcomes?.[0]?.description || "A systematic, measurable leadership pipeline that accelerates talent development and succession readiness."}
-
-
-
-
-
-
-
87%
-
Culture Alignment Increase
-
-
-
-
-
-
91%
-
Employee Engagement Growth
-
-
-
-
-
-
82%
-
Competency Development Impact
+
+ {apiData.approach_section.outcomes?.[0]?.bullets && apiData.approach_section.outcomes[0].bullets.length > 0 ? (
+ apiData.approach_section.outcomes[0].bullets.slice(0, 2).map((bullet, idx) => (
+
+ {bullet}
+
+ ))
+ ) : (
+
+ Proven ROI on Leadership Investment
+
+ )}
-
*/}
+
+
+ )}
+
+
+ {/* Framework Effectiveness - Stats Section */}
+ {apiData?.stats_section && apiData.stats_section.stat_cards && apiData.stats_section.stat_cards.length > 0 && (
+
+
+
{apiData.stats_section.title || "Framework Effectiveness"}
+
+ {apiData.stats_section.description || "Measurable results that demonstrate the impact of our leadership development approach."}
+
+
+
+
+ {apiData.stats_section.stat_cards.map((stat) => {
+ const IconComponent = getIconComponent(stat.icon_url);
+ return (
+
+
+ {IconComponent ?
+
{stat.value || "0"}
+
{stat.label || ""}
+
+ );
+ })}
-
-
+ )}
+
+
+
+
{/* 5. Sample Program Format */}
@@ -757,9 +728,9 @@ export function CultureCompetence() {
-
12-Month Culture Transformation Journey
+
{apiData.program_section?.title || 'Culture Transformation Journey'}
- A comprehensive 3-phase program designed to transform organizational culture and build strategic competencies.
+ {apiData.program_section?.description || 'A comprehensive program designed to transform organizational culture and build strategic competencies.'}
@@ -840,113 +811,94 @@ export function CultureCompetence() {
-
Measurable Culture & Performance Outcomes
+
{apiData.impact_section?.title || 'Measurable Culture & Performance Outcomes'}
- Organizations typically see significant improvements in engagement, culture alignment, and organizational performance.
+ {apiData.impact_section?.description || 'Organizations typically see significant improvements in engagement, culture alignment, and organizational performance.'}
- {/* Outcomes Grid */}
-
- {expectedOutcomes.map((outcome, index) => (
-
-
-
-
- {/*
- {outcome.metric}
-
*/}
- {outcome.category}
-
- {outcome.description}
- {/* {outcome.category}
*/}
-
-
- ))}
+
+ {apiData.impact_section?.impact_stats?.map((stat) => {
+ const IconComponent = getIconComponent(stat.icon_url);
+ return (
+
+
+
+
+
+ {stat.value}
+
+ {stat.description}
+ {stat.label}
+
+
+ );
+ })}
-
+
Additional Cultural Benefits
-
-
-
Employee Engagement
-
Higher engagement scores and improved employee experience
-
-
-
-
Strategic Alignment
-
Better alignment between culture and business strategy
-
-
-
-
Business Performance
-
Improved business results through cultural transformation
-
+ {apiData.impact_section?.impact_benefits?.map((benefit) => {
+ const IconComponent = getIconComponent(benefit.icon_url);
+ return (
+
+
+
+
{benefit.title}
+
{benefit.description}
+
+ );
+ })}
- {/* 7. Client Examples / Testimonials - Hero Section Design */}
+ {/* 7. Client Examples / Testimonials */}
- {/* 8. CTA Section - Hero Section Design */}
+ {/* 8. CTA Section */}
- {/* Background Image */}
-
- {/* Subtle dark overlay for overall image */}
-
- {/* Gradient overlay for better text readability */}
- {/* Content Container */}
- {/* CTA Content Block */}
- {/* Branded Tag */}
-
- {/* Main Headline */}
Ready to transform your culture?
-
+
{" "}Get in touch{" "}
to align strategy and performance.
-
- {/* CTA Button */}
navigateTo('/contact?topic=culture-competence')}
ariaLabel="Schedule a culture and competence consultation"
/>
-
- {/* Supporting Text */}
Connect with our culture transformation experts to discuss building a high-performance culture aligned with your business strategy.
diff --git a/src/components/services/ExecutiveCoaching.tsx b/src/components/services/ExecutiveCoaching.tsx
index 4aa28f9..c48845e 100644
--- a/src/components/services/ExecutiveCoaching.tsx
+++ b/src/components/services/ExecutiveCoaching.tsx
@@ -1,6 +1,5 @@
import React, { useEffect, useState } from 'react';
import { Button } from '../ui/button';
-import { Badge } from '../ui/badge';
import { Card, CardContent } from '../ui/card';
import { ImageWithFallback } from '../figma/ImageWithFallback';
import { navigateTo } from '../Router';
@@ -11,139 +10,280 @@ import {
ArrowRight,
CheckCircle,
Settings,
- Calendar,
- Download,
- Network,
Users,
Target,
Brain,
- Eye,
TrendingUp,
BarChart3,
Award,
- Lightbulb,
- Shield,
ChevronDown,
ChevronUp,
ArrowLeft,
Star,
- Zap,
- Globe,
Clock,
- BookOpen,
MessageCircle,
- Building,
Heart,
Compass,
+ Building,
User,
- UserCheck
+ Network,
+ Eye
} from 'lucide-react';
import { TestimonialsSection } from '../TestimonialsSection';
+import { useGetServiceListQuery } from '../../redux/services/sercicesApi';
+import { FullScreenLoader } from '../FullScreenLoader';
-const targetAudience = [
- {
- title: "Senior Executives & C-Suite Leaders",
- description: "CEOs, Presidents, and senior executives seeking personalized leadership development and strategic guidance",
- icon: User,
- challenges: ["Executive transition challenges", "Strategic decision making", "Leadership effectiveness", "Work-life integration"]
- },
- {
- title: "High-Potential Leaders",
- description: "Emerging leaders and high-potential individuals preparing for senior leadership roles",
- icon: Star,
- challenges: ["Leadership readiness", "Executive presence", "Strategic thinking", "Career advancement"]
- },
- {
- title: "Professional Development Teams",
- description: "HR and L&D professionals implementing coaching and mentoring programs organizationally",
- icon: Users,
- challenges: ["Program design", "Coach matching", "Impact measurement", "Scalability challenges"]
- }
-];
+// Types based on API response
+interface ServicePageData {
+ hero_section: {
+ id: string;
+ landing_page_type: string;
+ background_image_url: string;
+ background_image_alt_text: string;
+ headline: string;
+ subtext: string;
+ cta_text: string;
+ cta_destination: string;
+ };
+ overview: {
+ id: string;
+ title: string;
+ description: string;
+ highlight_text: string;
+ overview_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ audience_section: {
+ id: string;
+ title: string;
+ description: string;
+ audience_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ challenges: string[];
+ }>;
+ };
+ use_case_section: {
+ id: string;
+ title: string;
+ description: string;
+ use_case_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ highlight_text: string;
+ }>;
+ };
+ approach_section: {
+ id: string;
+ title: string;
+ description: string;
+ approach_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ bullets: string[];
+ }>;
+ outcomes: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ bullets: string[];
+ }>;
+ };
+ stats_section: {
+ id: string;
+ title: string;
+ description: string;
+ stat_cards: Array<{
+ id: string;
+ value: string;
+ label: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ program_section: {
+ id: string;
+ title: string;
+ description: string;
+ program_phases: Array<{
+ phase: {
+ id: string;
+ phase_number: number;
+ title: string;
+ duration: string;
+ };
+ activities: Array<{
+ id: string;
+ phase_id: string;
+ text: string;
+ }>;
+ outcomes: Array<{
+ id: string;
+ phase_id: string;
+ text: string;
+ }>;
+ }>;
+ };
+ impact_section: {
+ id: string;
+ title: string;
+ description: string;
+ impact_stats: Array<{
+ id: string;
+ value: string;
+ description: string;
+ label: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ impact_benefits: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ testimonial_section: Array<{
+ id: string;
+ profile_xid: string;
+ name: string;
+ designation: string;
+ content: string;
+ video_url: string | null;
+ display_order: number;
+ }>;
+}
-const useCases = [
- {
- title: "Executive Transition",
- description: "When leaders need support navigating new roles or organizational changes",
- icon: User,
- scenario: "New executive appointments or significant role transitions"
- },
- {
- title: "Leadership Development",
- description: "When high-potential individuals need personalized development for advancement",
- icon: TrendingUp,
- scenario: "Talent pipeline development and succession planning needs"
- },
- {
- title: "Performance Optimization",
- description: "When leaders need to enhance their effectiveness and impact",
- icon: Target,
- scenario: "Performance gaps or need for enhanced leadership capability"
- },
- {
- title: "Strategic Challenges",
- description: "When executives face complex business challenges requiring strategic thinking",
- icon: Brain,
- scenario: "Major business transformations or strategic decision-making needs"
- }
-];
-
-const programTimeline = [
- {
- phase: "Phase 1: Assessment & Goal Setting",
- duration: "Month 1",
- activities: ["Leadership assessment", "Goal setting sessions", "Coach matching", "Development plan creation"],
- deliverables: ["Leadership profile", "Coaching agreement", "Development roadmap", "Success metrics"]
- },
- {
- phase: "Phase 2: Coaching & Development",
- duration: "Months 2-8",
- activities: ["Regular coaching sessions", "360-degree feedback", "Action learning projects", "Progress reviews"],
- deliverables: ["Enhanced leadership skills", "Behavioral changes", "Strategic insights", "Performance improvements"]
- },
- {
- phase: "Phase 3: Integration & Sustainability",
- duration: "Months 9-12",
- activities: ["Implementation support", "Mentoring relationships", "Peer learning", "Impact assessment"],
- deliverables: ["Sustained behavior change", "Mentoring capability", "Leadership impact", "Continued development plan"]
- }
-];
-
-const expectedOutcomes = [
- {
- metric: "87%",
- description: "Of leaders report improved leadership effectiveness",
- icon: User,
- category: "Leadership Impact"
- },
- {
- metric: "79%",
- description: "Enhancement in strategic thinking and decision-making",
- icon: Brain,
- category: "Strategic Capability"
- },
- {
- metric: "92%",
- description: "Satisfaction rate with coaching experience and outcomes",
- icon: Heart,
- category: "Program Satisfaction"
- },
- {
- metric: "71%",
- description: "Of participants promoted within 18 months",
- icon: TrendingUp,
- category: "Career Advancement"
- }
-];
+// Map API icons to Lucide icons
+const getIconComponent = (iconUrl: string) => {
+ const iconMap: Record = {
+ '/icons/coaching.svg': MessageCircle,
+ '/icons/mentoring.svg': Network,
+ '/icons/executive.svg': User,
+ '/icons/leadership.svg': Award,
+ '/icons/growth.svg': TrendingUp,
+ '/icons/development.svg': Brain,
+ '/icons/assessment.svg': BarChart3,
+ '/icons/outcome.svg': Award,
+ '/icons/target.svg': Target,
+ '/icons/engagement.svg': Heart,
+ '/icons/people.svg': Users,
+ '/icons/team.svg': Users,
+ '/icons/compass.svg': Compass,
+ '/icons/eye.svg': Eye,
+ '/icons/network.svg': Network,
+ '/icons/user.svg': User,
+ };
+
+ return iconMap[iconUrl] || MessageCircle;
+};
export function ExecutiveCoaching() {
const [expandedUseCase, setExpandedUseCase] = useState(null);
const [expandedPhase, setExpandedPhase] = useState(0);
+
+ const { data: apiResponse, isLoading, error } = useGetServiceListQuery({
+ service_type: 'coaching_and_mentoring'
+ });
+
+ const apiData = apiResponse?.data as ServicePageData | undefined;
useEffect(() => {
window.scrollTo(0, 0);
}, []);
+ // Loading state
+ if (isLoading) {
+ return (
+
+
+ );
+ }
+
+ // Error state
+ if (error) {
+ console.error('API Error:', error);
+ return (
+
+
+
Error loading content. Please try again later.
+
window.location.reload()} className="mt-4">Retry
+
+
+
+
No data available for this service.
+
navigateTo('/services')} className="mt-4">Back to Services
+
+
{/* Hero Section */}
@@ -152,7 +292,7 @@ export function ExecutiveCoaching() {
@@ -161,7 +301,6 @@ export function ExecutiveCoaching() {
- {/* Back Navigation */}
- Coaching & Mentoring
+ {apiData.hero_section.headline || 'Coaching & Mentoring'}
- Develop exceptional leaders through personalized coaching that drives 87% improvement in leadership effectiveness and accelerates career advancement.
+ {apiData.hero_section.subtext || 'Develop exceptional leaders through personalized coaching that drives leadership effectiveness and accelerates career advancement.'}
navigateTo('/contact?topic=coaching-mentoring')}
- ariaLabel="Book a consultation for coaching and mentoring"
+ text={apiData.hero_section.cta_text || 'Book a Consultation'}
+ onClick={() => navigateTo(apiData.hero_section.cta_destination || '/contact')}
+ ariaLabel={apiData.hero_section.cta_text || 'Book a Consultation'}
className="primary-cta-button-blue cta-text-white"
/>
@@ -202,70 +341,41 @@ export function ExecutiveCoaching() {
-
Personalized Leadership Development
+
{apiData.overview?.title || 'Personalized Leadership Development'}
- Coaching & Mentoring is a personalized leadership development approach that combines one-on-one executive coaching with strategic mentoring relationships. Our certified coaches work with leaders to enhance their effectiveness, navigate complex challenges, and accelerate their professional growth through tailored development experiences.
+ {apiData.overview?.description || 'Coaching & Mentoring is a personalized leadership development approach that combines one-on-one executive coaching with strategic mentoring relationships. Our certified coaches work with leaders to enhance their effectiveness, navigate complex challenges, and accelerate their professional growth through tailored development experiences.'}
- The Business Problem It Solves: Many talented leaders struggle to reach their full potential due to lack of personalized guidance, limited feedback, and insufficient support during critical transitions. Our coaching and mentoring programs provide the individualized attention and expertise needed for exceptional leadership development.
+ The Business Problem It Solves: {apiData.overview?.highlight_text || 'Many talented leaders struggle to reach their full potential due to lack of personalized guidance, limited feedback, and insufficient support during critical transitions. Our coaching and mentoring programs provide the individualized attention and expertise needed for exceptional leadership development.'}
-
-
-
-
+ {apiData.overview?.overview_cards?.map((card, index) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ return (
+
+
+
+
+
+ {card.title}
+
+
+ {card.description}
+
+
-
- Executive Coaching
-
-
- Personalized coaching for senior leaders and executives to enhance performance and impact
-
-
-
-
-
-
-
-
-
- Strategic Mentoring
-
-
- Long-term mentoring relationships for career development and leadership growth
-
-
-
-
-
-
-
-
-
- 87% Success Rate
-
-
- Proven track record with 87% of leaders reporting improved effectiveness and performance
-
-
-
+ );
+ })}
@@ -277,9 +387,9 @@ export function ExecutiveCoaching() {
-
Target Audience
+
{apiData.audience_section?.title || 'Target Audience'}
- Designed for senior leaders, high-potential individuals, and organizations investing in personalized leadership development.
+ {apiData.audience_section?.description || 'Designed for senior leaders, high-potential individuals, and organizations investing in personalized leadership development.'}
@@ -322,9 +432,9 @@ export function ExecutiveCoaching() {
-
Use Case Scenarios
+
{apiData.use_case_section?.title || 'Use Case Scenarios'}
- Coaching & Mentoring is most effective in these critical leadership development situations.
+ {apiData.use_case_section?.description || 'Coaching & Mentoring is most effective in these critical leadership development situations.'}
@@ -372,389 +482,254 @@ export function ExecutiveCoaching() {
{/* 4. Our Approach */}
-
-
-
-
-
-
Comprehensive Coaching & Mentoring Framework
-
- Our proven methodology combines individual coaching, strategic mentoring, and continuous development for sustainable leadership growth.
-
-
+
+
+
+
+
+
+ {apiData?.approach_section?.title || "Our Approach to Leadership Development"}
+
+
+ {apiData?.approach_section?.description || "A systematic, research-backed methodology that transforms leadership potential into measurable business impact."}
+
+
- {/* Flowchart Container with Connecting Lines */}
-
- {/* Desktop: Horizontal Flowchart */}
-
-
- {/* Row 1: Frameworks, Pedagogy, Delivery */}
-
- {/* Frameworks */}
-
-
-
+ {/* Flowchart Container with Connecting Lines */}
+
+ {/* Only render if approach_cards exist and have items */}
+ {apiData?.approach_section?.approach_cards && apiData.approach_section.approach_cards.length > 0 && (
+ <>
+ {/* Desktop: Horizontal Flowchart */}
+
+
+ {/* Row 1: First 3 approach cards from API */}
+
+ {apiData.approach_section.approach_cards.slice(0, 3).map((card, idx) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ return (
+
+
+ {IconComponent ?
+
{card.title}
+
{card.description}
+ {card.bullets && card.bullets.length > 0 && (
+
+ {card.bullets.slice(0, 3).map((bullet, bulletIdx) => (
+
+ {bullet}
+
+ ))}
+
+ )}
-
Assessment Frameworks
-
- Comprehensive profiling and leadership capability evaluation
-
-
-
- Leadership Profiling
-
-
- 360° Feedback
-
-
- Psychometric Tools
-
-
-
+ );
+ })}
- {/* Arrow 1→2 */}
+ {/* Arrows between first 3 cards */}
+ {apiData.approach_section.approach_cards.length >= 2 && (
-
- {/* Pedagogy */}
-
-
-
-
Coaching Pedagogy
-
- Evidence-based coaching methodologies for transformation
-
-
-
- Solution-Focused
-
-
- Strengths-Based
-
-
- Goal-Oriented
-
-
-
-
- {/* Arrow 2→3 */}
+ )}
+ {apiData.approach_section.approach_cards.length >= 3 && (
+ )}
+
- {/* Delivery Modes */}
-
-
-
-
Delivery Modes
-
- Flexible coaching formats for executive schedules
-
-
-
- One-on-One Coaching
-
-
- Virtual & In-Person
-
-
- Mentoring Circles
-
-
-
-
-
- {/* Vertical Connector - Center Flow Down */}
+ {/* Vertical Connector - Center Flow Down */}
+ {apiData.approach_section.approach_cards.length > 3 && (
+ )}
- {/* Row 2: Assessment, Coaching */}
+ {/* Row 2: Next 2 approach cards (if available) */}
+ {apiData.approach_section.approach_cards.length >= 4 && (
- {/* Progress Tracking */}
-
-
-
-
Progress Tracking
-
- Continuous measurement of development and impact
-
-
-
- Goal Achievement
+ {apiData.approach_section.approach_cards.slice(3, 5).map((card, idx) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ const isFirstOfPair = idx === 0;
+ return (
+
+
+ {IconComponent ?
+
{card.title}
+
{card.description}
+ {card.bullets && card.bullets.length > 0 && (
+
+ {card.bullets.slice(0, 3).map((bullet, bulletIdx) => (
+
+ {bullet}
+
+ ))}
+
+ )}
-
- Behavior Change
-
-
- Impact Metrics
-
-
-
+ );
+ })}
- {/* Arrow 4→5 */}
-
-
- {/* Mentoring Integration */}
-
-
-
+ {/* Arrow between the two cards */}
+ {apiData.approach_section.approach_cards.length >= 5 && (
+
-
Mentoring Integration
-
- Strategic guidance for long-term career development
-
-
-
- Senior Mentors
-
-
- Peer Networks
-
-
- Career Strategy
-
-
-
+ )}
+ )}
- {/* Final Vertical Connector - Center Flow Down to Outcome */}
-
-
- {/* Row 3: Expected Outcome - Centered */}
-
-
-
-
Expected Outcome
-
-
- Accelerated leadership development with sustained behavior change, enhanced performance, and career advancement.
-
-
- Transformational Leadership Growth
-
-
+ {/* Final Vertical Connector - Center Flow Down to Outcome */}
+
-
- {/* Tablet & Mobile: Vertical Flowchart */}
-
- {/* Frameworks */}
-
-
-
-
+ {/* Row 3: Expected Outcome - Use API outcomes data */}
+
+
+
+ {apiData.approach_section.outcomes && apiData.approach_section.outcomes[0] ? (() => {
+ const OutcomeIcon = getIconComponent(apiData.approach_section.outcomes[0].icon_url);
+ return OutcomeIcon ?
+ {apiData.approach_section.outcomes?.[0]?.title || "Expected Outcome"}
+
-
Assessment Frameworks
-
- Comprehensive profiling and leadership capability evaluation
+
+ {apiData.approach_section.outcomes?.[0]?.description || "A systematic, measurable leadership pipeline that accelerates talent development and succession readiness."}
-
- Leadership Profiling
-
-
- 360° Feedback
-
-
- Psychometric Tools
-
+ {apiData.approach_section.outcomes?.[0]?.bullets && apiData.approach_section.outcomes[0].bullets.length > 0 ? (
+ apiData.approach_section.outcomes[0].bullets.slice(0, 2).map((bullet, idx) => (
+
+ {bullet}
+
+ ))
+ ) : (
+
+ Proven ROI on Leadership Investment
+
+ )}
- {/* Connector Arrow */}
-
-
-
- {/* Pedagogy */}
-
-
-
-
-
Coaching Pedagogy
-
- Evidence-based coaching methodologies for transformation
-
-
-
- Solution-Focused
-
-
- Strengths-Based
-
-
- Goal-Oriented
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Delivery Modes */}
-
-
-
-
-
Delivery Modes
-
- Flexible coaching formats for executive schedules
-
-
-
- One-on-One Coaching
-
-
- Virtual & In-Person
-
-
- Mentoring Circles
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Progress Tracking */}
-
-
-
-
-
Progress Tracking
-
- Continuous measurement of development and impact
-
-
-
- Goal Achievement
-
-
- Behavior Change
-
-
- Impact Metrics
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Mentoring Integration */}
-
-
-
-
-
Mentoring Integration
-
- Strategic guidance for long-term career development
-
-
-
- Senior Mentors
-
-
- Peer Networks
-
-
- Career Strategy
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Expected Outcome */}
-
-
-
Expected Outcome
-
-
- Accelerated leadership development with sustained behavior change, enhanced performance, and career advancement.
-
-
- Transformational Leadership Growth
-
- {/* Framework Effectiveness */}
- {/*
-
-
Framework Effectiveness
-
- Our systematic approach delivers measurable results across key coaching and mentoring metrics.
+ {/* Tablet & Mobile: Vertical Flowchart */}
+
+ {/* Map all approach cards vertically */}
+ {apiData.approach_section.approach_cards.map((card, idx) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ const isEven = idx % 2 === 0;
+ return (
+
+
+
+ {IconComponent ?
+
{card.title}
+
{card.description}
+ {card.bullets && card.bullets.length > 0 && (
+
+ {card.bullets.map((bullet, bulletIdx) => (
+
+ {bullet}
+
+ ))}
+
+ )}
+
+ {/* Connector Arrow */}
+ {idx < apiData.approach_section.approach_cards.length - 1 && (
+
+ )}
+
+ );
+ })}
+
+ {/* Expected Outcome - Use API outcomes data */}
+
+
+ {apiData.approach_section.outcomes && apiData.approach_section.outcomes[0] ? (() => {
+ const OutcomeIcon = getIconComponent(apiData.approach_section.outcomes[0].icon_url);
+ return OutcomeIcon ?
+ {apiData.approach_section.outcomes?.[0]?.title || "Expected Outcome"}
+
+
+
+ {apiData.approach_section.outcomes?.[0]?.description || "A systematic, measurable leadership pipeline that accelerates talent development and succession readiness."}
-
-
-
-
-
-
-
94%
-
Goal Achievement Rate
-
-
-
-
-
-
88%
-
Leadership Effectiveness Growth
-
-
-
-
-
-
86%
-
Career Advancement Success
+
+ {apiData.approach_section.outcomes?.[0]?.bullets && apiData.approach_section.outcomes[0].bullets.length > 0 ? (
+ apiData.approach_section.outcomes[0].bullets.slice(0, 2).map((bullet, idx) => (
+
+ {bullet}
+
+ ))
+ ) : (
+
+ Proven ROI on Leadership Investment
+
+ )}
-
*/}
+
+
+ )}
+
+
+ {/* Framework Effectiveness - Stats Section */}
+ {apiData?.stats_section && apiData.stats_section.stat_cards && apiData.stats_section.stat_cards.length > 0 && (
+
+
+
{apiData.stats_section.title || "Framework Effectiveness"}
+
+ {apiData.stats_section.description || "Measurable results that demonstrate the impact of our leadership development approach."}
+
+
+
+
+ {apiData.stats_section.stat_cards.map((stat) => {
+ const IconComponent = getIconComponent(stat.icon_url);
+ return (
+
+
+ {IconComponent ?
+
{stat.value || "0"}
+
{stat.label || ""}
+
+ );
+ })}
-
-
+ )}
+
+
+
+
{/* 5. Sample Program Format */}
@@ -762,9 +737,9 @@ export function ExecutiveCoaching() {
-
12-Month Coaching & Mentoring Journey
+
{apiData.program_section?.title || 'Coaching & Mentoring Journey'}
- A comprehensive 3-phase program designed to accelerate leadership development and career advancement.
+ {apiData.program_section?.description || 'A comprehensive program designed to accelerate leadership development and career advancement.'}
@@ -845,113 +820,94 @@ export function ExecutiveCoaching() {
-
Measurable Coaching Outcomes
+
{apiData.impact_section?.title || 'Measurable Coaching Outcomes'}
- Leaders typically see significant improvements in effectiveness, strategic capability, and career advancement.
+ {apiData.impact_section?.description || 'Leaders typically see significant improvements in effectiveness, strategic capability, and career advancement.'}
- {/* Outcomes Grid */}
-
- {expectedOutcomes.map((outcome, index) => (
-
-
-
-
- {/*
- {outcome.metric}
-
*/}
- {outcome.category}
-
- {outcome.description}
- {/* {outcome.category}
*/}
-
-
- ))}
+
+ {apiData.impact_section?.impact_stats?.map((stat) => {
+ const IconComponent = getIconComponent(stat.icon_url);
+ return (
+
+
+
+
+
+ {stat.value}
+
+ {stat.description}
+ {stat.label}
+
+
+ );
+ })}
-
+
Additional Coaching Benefits
-
-
-
Enhanced Communication
-
Improved leadership communication and interpersonal skills
-
-
-
-
Goal Achievement
-
Better focus and achievement of personal and professional goals
-
-
-
-
Strategic Clarity
-
Enhanced strategic thinking and decision-making capability
-
+ {apiData.impact_section?.impact_benefits?.map((benefit) => {
+ const IconComponent = getIconComponent(benefit.icon_url);
+ return (
+
+
+
+
{benefit.title}
+
{benefit.description}
+
+ );
+ })}
- {/* 7. Client Examples / Testimonials - Hero Section Design */}
+ {/* 7. Client Examples / Testimonials */}
- {/* 8. CTA Section - Hero Section Design */}
+ {/* 8. CTA Section */}
- {/* Background Image */}
-
- {/* Subtle dark overlay for overall image */}
-
- {/* Gradient overlay for better text readability */}
- {/* Content Container */}
- {/* CTA Content Block */}
- {/* Branded Tag */}
-
- {/* Main Headline */}
Ready to accelerate your leadership?
-
+
{" "}Get in touch{" "}
for personalized coaching now.
-
- {/* CTA Button */}
navigateTo('/contact?topic=coaching-mentoring')}
ariaLabel="Schedule a coaching and mentoring consultation"
/>
-
- {/* Supporting Text */}
Connect with our executive coaching experts to discuss personalized leadership development that transforms your effectiveness and career trajectory.
diff --git a/src/components/services/LeadershipDevelopment.tsx b/src/components/services/LeadershipDevelopment.tsx
index ba45f35..b7e87e2 100644
--- a/src/components/services/LeadershipDevelopment.tsx
+++ b/src/components/services/LeadershipDevelopment.tsx
@@ -35,114 +35,255 @@ import {
Clock,
MessageCircle,
Building,
- UserCheck
+ UserCheck,
+ Heart
} from 'lucide-react';
import { TestimonialsSection } from '../TestimonialsSection';
+import { useGetServiceListQuery } from '../../redux/services/sercicesApi';
+import { FullScreenLoader } from '../FullScreenLoader';
-const targetAudience = [
- {
- title: "C-Suite Executives",
- description: "CEOs, Presidents, and C-level executives leading organizational transformation and strategic initiatives",
- icon: Crown,
- challenges: ["Strategic leadership complexity", "Board accountability", "Organizational transformation", "Executive presence"]
- },
- {
- title: "Senior Directors & VPs",
- description: "Senior leaders responsible for major business units and strategic functions across the organization",
- icon: Users2,
- challenges: ["Cross-functional leadership", "Strategic execution", "P&L responsibility", "Stakeholder management"]
- },
- {
- title: "High-Potential Leaders",
- description: "Emerging leaders identified for accelerated development and future executive roles",
- icon: Star,
- challenges: ["Executive readiness", "Leadership capability gaps", "Career advancement", "Strategic thinking"]
- }
-];
+// Types based on API response
+interface ServicePageData {
+ hero_section: {
+ id: string;
+ landing_page_type: string;
+ background_image_url: string;
+ background_image_alt_text: string;
+ headline: string;
+ subtext: string;
+ cta_text: string;
+ cta_destination: string;
+ };
+ overview: {
+ id: string;
+ title: string;
+ description: string;
+ highlight_text: string;
+ overview_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ audience_section: {
+ id: string;
+ title: string;
+ description: string;
+ audience_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ challenges: string[];
+ }>;
+ };
+ use_case_section: {
+ id: string;
+ title: string;
+ description: string;
+ use_case_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ highlight_text: string;
+ }>;
+ };
+ approach_section: {
+ id: string;
+ title: string;
+ description: string;
+ approach_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ bullets: string[];
+ }>;
+ outcomes: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ bullets: string[];
+ }>;
+ };
+ stats_section: {
+ id: string;
+ title: string;
+ description: string;
+ stat_cards: Array<{
+ id: string;
+ value: string;
+ label: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ program_section: {
+ id: string;
+ title: string;
+ description: string;
+ program_phases: Array<{
+ phase: {
+ id: string;
+ phase_number: number;
+ title: string;
+ duration: string;
+ };
+ activities: Array<{
+ id: string;
+ phase_id: string;
+ text: string;
+ }>;
+ outcomes: Array<{
+ id: string;
+ phase_id: string;
+ text: string;
+ }>;
+ }>;
+ };
+ impact_section: {
+ id: string;
+ title: string;
+ description: string;
+ impact_stats: Array<{
+ id: string;
+ value: string;
+ description: string;
+ label: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ impact_benefits: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ testimonial_section: Array<{
+ id: string;
+ profile_xid: string;
+ name: string;
+ designation: string;
+ content: string;
+ video_url: string | null;
+ display_order: number;
+ }>;
+}
-const useCases = [
- {
- title: "Leadership Effectiveness Gap",
- description: "When current leadership capabilities don't match organizational strategic needs",
- icon: Target,
- scenario: "Leadership effectiveness scores below industry benchmarks"
- },
- {
- title: "Strategic Transformation",
- description: "When organizations undergo major strategic shifts requiring enhanced leadership capability",
- icon: TrendingUp,
- scenario: "Digital transformation, M&A, or business model changes"
- },
- {
- title: "Executive Presence Development",
- description: "When leaders need to strengthen influence, communication, and stakeholder confidence",
- icon: Crown,
- scenario: "Promotion to C-suite or board-level responsibilities"
- },
- {
- title: "Organizational Performance",
- description: "When leadership development is needed to drive measurable business results",
- icon: BarChart3,
- scenario: "Performance gaps in key business metrics or strategic goals"
- }
-];
+// Map API icons to Lucide icons
+const getIconComponent = (iconUrl: string) => {
+ const iconMap: Record = {
+ '/icons/pipeline.svg': TrendingUp,
+ '/icons/succession.svg': Users,
+ '/icons/capability.svg': Brain,
+ '/icons/hr.svg': Users2,
+ '/icons/management.svg': Crown,
+ '/icons/growth.svg': TrendingUp,
+ '/icons/gap.svg': Target,
+ '/icons/assessment.svg': BarChart3,
+ '/icons/development.svg': Brain,
+ '/icons/outcome.svg': Award,
+ '/icons/target.svg': Target,
+ '/icons/engagement.svg': Heart,
+ '/icons/leader.svg': Crown,
+ '/icons/productivity.svg': TrendingUp,
+ '/icons/performance.svg': TrendingUp,
+ };
-const programTimeline = [
- {
- phase: "Phase 1: Assessment & Design",
- duration: "Months 1-2",
- activities: ["360-degree leadership assessment", "Strategic leadership competency evaluation", "Executive presence analysis", "Custom program design"],
- deliverables: ["Leadership assessment report", "Development roadmap", "Program curriculum", "Success metrics"]
- },
- {
- phase: "Phase 2: Core Development",
- duration: "Months 3-6",
- activities: ["Executive leadership workshops", "Strategic thinking development", "Leadership simulations", "Peer learning circles"],
- deliverables: ["Enhanced strategic capability", "Leadership toolkit", "Peer network", "Action learning projects"]
- },
- {
- phase: "Phase 3: Application & Integration",
- duration: "Months 7-12",
- activities: ["Executive coaching sessions", "Real-world application", "Stakeholder feedback", "Continuous improvement"],
- deliverables: ["Measurable leadership improvement", "Business impact results", "Sustainability plan", "Long-term development strategy"]
- }
-];
-
-const expectedOutcomes = [
- {
- metric: "94%",
- description: "Of executives show improved strategic leadership effectiveness",
- icon: Compass,
- category: "Strategic Leadership"
- },
- {
- metric: "91%",
- description: "Improvement in executive presence and stakeholder confidence",
- icon: Crown,
- category: "Executive Presence"
- },
- {
- metric: "83%",
- description: "Improvement in organizational performance metrics",
- icon: TrendingUp,
- category: "Business Impact"
- },
- {
- metric: "87%",
- description: "Of participants promoted within 18 months",
- icon: Star,
- category: "Career Advancement"
- }
-];
+ const IconComponent = iconMap[iconUrl] || Target;
+ return IconComponent;
+};
export function LeadershipDevelopment() {
- const [expandedUseCase, setExpandedUseCase] = useState(null);
const [expandedPhase, setExpandedPhase] = useState(0);
+ const { data: apiResponse, isLoading, error } = useGetServiceListQuery({
+ service_type: 'leadership_development'
+ });
+
+ const apiData = apiResponse?.data as ServicePageData | undefined;
+
useEffect(() => {
window.scrollTo(0, 0);
}, []);
+ if (isLoading) {
+ return (
+
+
+ );
+ }
+
+ if (error || !apiData) {
+ return (
+
+
+
Error loading content. Please try again later.
+
window.location.reload()} className="mt-4">Retry
+
+
{/* Hero Section */}
@@ -151,7 +292,7 @@ export function LeadershipDevelopment() {
@@ -160,7 +301,6 @@ export function LeadershipDevelopment() {
- {/* Back Navigation */}
- Leadership Development
+ {apiData.hero_section.headline}
- Transform senior executives into visionary leaders who drive 94% better strategic outcomes and organizational performance.
+ {apiData.hero_section.subtext}
navigateTo('/contact?topic=leadership-development')}
- ariaLabel="Book a consultation for leadership development"
+ text={apiData.hero_section.cta_text}
+ onClick={() => navigateTo(apiData.hero_section.cta_destination)}
+ ariaLabel={apiData.hero_section.cta_text}
className="primary-cta-button-blue cta-text-white"
/>
@@ -201,70 +341,41 @@ export function LeadershipDevelopment() {
-
Executive Leadership Development
+
{apiData.overview.title}
- Leadership Development is a comprehensive executive transformation program designed to elevate senior leaders' strategic thinking, executive presence, and organizational impact. Our approach combines proven leadership frameworks with real-world application to create visionary leaders who drive exceptional business results.
+ {apiData.overview.description}
- The Business Problem It Solves: Many talented leaders struggle to reach their full potential due to lack of personalized guidance, limited feedback, and insufficient support during critical transitions. Traditional leadership training often fails to address the complex challenges executives face in today's dynamic business environment.
+ The Business Problem It Solves: {apiData.overview.highlight_text}
-
-
-
-
+ {apiData.overview.overview_cards.map((card, index) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ return (
+
+
+
+
+
+ {card.title}
+
+
+ {card.description}
+
+
-
- Executive Excellence
-
-
- Comprehensive development for C-suite and senior leaders focused on strategic transformation
-
-
-
-
-
-
-
-
-
- Strategic Impact
-
-
- Focus on measurable business results and organizational performance improvements
-
-
-
-
-
-
-
-
-
- 94% Success Rate
-
-
- Proven track record with 94% of executives showing improved strategic leadership effectiveness
-
-
-
+ );
+ })}
@@ -276,9 +387,9 @@ export function LeadershipDevelopment() {
-
Target Audience
+
{apiData.audience_section.title}
- Designed for senior executives and high-potential leaders who drive organizational strategy and transformation.
+ {apiData.audience_section.description}
@@ -321,9 +432,9 @@ export function LeadershipDevelopment() {
-
When Organizations Need Executive Leadership Development
+
{apiData.use_case_section.title}
- Ideal for organizations seeking to elevate strategic leadership and drive transformational change.
+ {apiData.use_case_section.description}
@@ -333,7 +444,6 @@ export function LeadershipDevelopment() {
key={index}
className="bg-white rounded-xl border border-gray-200 p-6 hover:border-[#04045B] hover:shadow-lg transition-all duration-300"
>
- {/* Icon and Title */}
- {/* Trigger Indicator */}
@@ -372,9 +481,9 @@ export function LeadershipDevelopment() {
-
Comprehensive Executive Leadership Framework
+
{apiData.approach_section.title}
- Our proven methodology combines strategic assessment, executive coaching, experiential learning, and real-world application.
+ {apiData.approach_section.description}
@@ -383,85 +492,41 @@ export function LeadershipDevelopment() {
{/* Desktop: Horizontal Flowchart */}
- {/* Row 1: Frameworks, Pedagogy, Delivery */}
+ {/* Row 1: First 3 approach cards from API */}
- {/* Frameworks */}
-
-
-
-
Strategic Frameworks
-
- Executive leadership models and strategic thinking frameworks
-
-
-
- Leadership Models
+ {apiData.approach_section.approach_cards.slice(0, 3).map((card, idx) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ return (
+
+
+
+
{card.title}
+
{card.description}
+
+ {card.bullets.slice(0, 3).map((bullet, bulletIdx) => (
+
+ {bullet}
+
+ ))}
+
-
- Strategic Thinking
-
-
- Vision Creation
-
-
-
+ );
+ })}
- {/* Arrow 1→2 */}
-
-
- {/* Pedagogy */}
-
-
-
+ {/* Arrows between first 3 cards */}
+ {apiData.approach_section.approach_cards.length >= 2 && (
+
-
Learning Pedagogy
-
- Executive development through experiential and action learning
-
-
-
- Experiential Learning
-
-
- Action Learning
-
-
- Peer Learning
-
+ )}
+ {apiData.approach_section.approach_cards.length >= 3 && (
+
-
-
- {/* Arrow 2→3 */}
-
-
- {/* Delivery Modes */}
-
-
-
-
Delivery Modes
-
- Flexible formats designed for executive schedules
-
-
-
- Executive Workshops
-
-
- Leadership Simulations
-
-
- Strategic Projects
-
-
-
+ )}
{/* Vertical Connector - Center Flow Down */}
@@ -472,58 +537,39 @@ export function LeadershipDevelopment() {
- {/* Row 2: Assessment, Coaching */}
-
- {/* Assessment Integration */}
-
-
-
-
Assessment Integration
-
- Comprehensive evaluation to measure executive readiness
-
-
-
- 360° Feedback
-
-
- Leadership Assessment
-
-
- Impact Measurement
-
-
-
+ {/* Row 2: Next 2 approach cards (if available) */}
+ {apiData.approach_section.approach_cards.length >= 4 && (
+
+ {apiData.approach_section.approach_cards.slice(3, 5).map((card, idx) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ const isFirstOfPair = idx === 0;
+ return (
+
+
+
+
{card.title}
+
{card.description}
+
+ {card.bullets.slice(0, 3).map((bullet, bulletIdx) => (
+
+ {bullet}
+
+ ))}
+
+
+ );
+ })}
- {/* Arrow 4→5 */}
-
-
-
+ {/* Arrow between the two cards */}
+ {apiData.approach_section.approach_cards.length >= 5 && (
+
+ )}
-
- {/* Coaching Integration */}
-
-
-
-
Coaching Integration
-
- Personalized executive coaching throughout development
-
-
-
- Executive Coaching
-
-
- Strategic Advisement
-
-
- Peer Coaching
-
-
-
-
+ )}
{/* Final Vertical Connector - Center Flow Down to Outcome */}
@@ -533,19 +579,35 @@ export function LeadershipDevelopment() {
- {/* Row 3: Expected Outcome - Centered */}
+ {/* Row 3: Expected Outcome - Use API outcomes data */}
-
Expected Outcome
+ {apiData.approach_section.outcomes && apiData.approach_section.outcomes[0] && (() => {
+ const OutcomeIcon = getIconComponent(apiData.approach_section.outcomes[0].icon_url);
+ return
+ {apiData.approach_section.outcomes?.[0]?.title || "Expected Outcome"}
+
- Transformational executive leaders with strategic capability, executive presence, and proven business impact.
+ {apiData.approach_section.outcomes?.[0]?.description || "Transformational executive leaders with strategic capability, executive presence, and proven business impact."}
-
-
-
Enhanced Leadership Effectiveness
+
+ {apiData.approach_section.outcomes?.[0]?.bullets?.slice(0, 2).map((bullet, idx) => (
+
+ {bullet}
+
+ )) || (
+ <>
+
+ Enhanced Leadership Effectiveness
+
+
+ )}
@@ -554,198 +616,95 @@ export function LeadershipDevelopment() {
{/* Tablet & Mobile: Vertical Flowchart */}
- {/* Frameworks */}
-
-
-
-
+ {/* Map all approach cards vertically */}
+ {apiData.approach_section.approach_cards.map((card, idx) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ const isEven = idx % 2 === 0;
+ return (
+
+
+
+
+
{card.title}
+
{card.description}
+
+ {card.bullets.map((bullet, bulletIdx) => (
+
+ {bullet}
+
+ ))}
+
+
+ {/* Connector Arrow */}
+ {idx < apiData.approach_section.approach_cards.length - 1 && (
+
+ )}
-
Strategic Frameworks
-
- Executive leadership models and strategic thinking frameworks
-
-
-
- Leadership Models
-
-
- Strategic Thinking
-
-
- Vision Creation
-
-
-
- {/* Connector Arrow */}
-
-
+ );
+ })}
- {/* Pedagogy */}
-
-
-
-
-
Learning Pedagogy
-
- Executive development through experiential and action learning
-
-
-
- Experiential Learning
-
-
- Action Learning
-
-
- Peer Learning
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Delivery Modes */}
-
-
-
-
-
Delivery Modes
-
- Flexible formats designed for executive schedules
-
-
-
- Executive Workshops
-
-
- Leadership Simulations
-
-
- Strategic Projects
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Assessment Integration */}
-
-
-
-
-
Assessment Integration
-
- Comprehensive evaluation to measure executive readiness
-
-
-
- 360° Feedback
-
-
- Leadership Assessment
-
-
- Impact Measurement
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Coaching Integration */}
-
-
-
-
-
Coaching Integration
-
- Personalized executive coaching throughout development
-
-
-
- Executive Coaching
-
-
- Strategic Advisement
-
-
- Peer Coaching
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Expected Outcome */}
+ {/* Expected Outcome - Use API outcomes data */}
-
Expected Outcome
+ {apiData.approach_section.outcomes && apiData.approach_section.outcomes[0] && (() => {
+ const OutcomeIcon = getIconComponent(apiData.approach_section.outcomes[0].icon_url);
+ return
+ {apiData.approach_section.outcomes?.[0]?.title || "Expected Outcome"}
+
- Transformational executive leaders with strategic capability, executive presence, and proven business impact.
+ {apiData.approach_section.outcomes?.[0]?.description || "Transformational executive leaders with strategic capability, executive presence, and proven business impact."}
-
-
-
Enhanced Leadership Effectiveness
+
+ {apiData.approach_section.outcomes?.[0]?.bullets?.slice(0, 2).map((bullet, idx) => (
+
+ {bullet}
+
+ )) || (
+ <>
+
+ Enhanced Leadership Effectiveness
+
+
+ )}
- {/* Framework Effectiveness */}
- {/*
-
-
Framework Effectiveness
-
- Our systematic approach delivers measurable results across key leadership development metrics.
-
-
-
-
-
-
-
-
92%
-
Leadership Effectiveness Increase
+ {/* Framework Effectiveness - Stats Section */}
+ {apiData.stats_section && (
+
+
+
{apiData.stats_section.title}
+
+ {apiData.stats_section.description}
+
-
-
-
-
-
88%
-
Executive Presence Enhancement
-
-
-
-
-
-
85%
-
Strategic Impact Improvement
+
+
+ {apiData.stats_section.stat_cards.map((stat) => {
+ const IconComponent = getIconComponent(stat.icon_url);
+ return (
+
+
+
+
{stat.value}
+
{stat.label}
+
+ );
+ })}
-
*/}
+ )}
@@ -757,9 +716,9 @@ export function LeadershipDevelopment() {
-
12-Month Executive Development Journey
+
{apiData.program_section.title}
- A comprehensive 3-phase program designed to transform executives into visionary leaders.
+ {apiData.program_section.description}
@@ -840,112 +799,94 @@ export function LeadershipDevelopment() {
-
Measurable Leadership Outcomes
+
{apiData.impact_section.title}
- Organizations typically see significant improvements in leadership effectiveness, strategic execution, and business performance.
+ {apiData.impact_section.description}
- {/* Outcomes Grid */}
-
- {expectedOutcomes.map((outcome, index) => (
-
-
-
-
- {/*
- {outcome.metric}
-
*/}
- {outcome.category}
- {outcome.description}
- {/* {outcome.category}
*/}
-
-
- ))}
+
+ {apiData.impact_section.impact_stats.map((stat) => {
+ const IconComponent = getIconComponent(stat.icon_url);
+ return (
+
+
+
+
+
+ {stat.value}
+
+ {stat.description}
+ {stat.label}
+
+
+ );
+ })}
-
+
Additional Strategic Benefits
-
-
-
Strategic Thinking
-
Enhanced ability to navigate complex business challenges
-
-
-
-
Stakeholder Influence
-
Improved ability to influence and engage key stakeholders
-
-
-
-
Organizational Impact
-
Measurable improvements in business results and performance
-
+ {apiData.impact_section.impact_benefits.map((benefit) => {
+ const IconComponent = getIconComponent(benefit.icon_url);
+ return (
+
+
+
+
{benefit.title}
+
{benefit.description}
+
+ );
+ })}
- {/* 7. Client Examples / Testimonials - Hero Section Design */}
+ {/* 7. Client Examples / Testimonials */}
- {/* 8. CTA Section - Hero Section Design */}
+ {/* 8. CTA Section */}
- {/* Background Image */}
-
- {/* Subtle dark overlay for overall image */}
-
- {/* Gradient overlay for better text readability */}
- {/* Content Container */}
- {/* CTA Content Block */}
- {/* Branded Tag */}
-
- {/* Main Headline */}
Ready to transform your leadership?
-
+
{" "}Get in touch{" "}
to drive exceptional strategic outcomes.
-
- {/* CTA Button */}
navigateTo('/contact?topic=leadership-development')}
ariaLabel="Schedule a leadership development consultation"
/>
-
- {/* Supporting Text */}
Connect with our leadership development experts to discuss building visionary leadership capability in your organization.
diff --git a/src/components/services/LeadershipPipelineDevelopment.tsx b/src/components/services/LeadershipPipelineDevelopment.tsx
index 9fdd58d..039f0fb 100644
--- a/src/components/services/LeadershipPipelineDevelopment.tsx
+++ b/src/components/services/LeadershipPipelineDevelopment.tsx
@@ -39,162 +39,260 @@ import { Card, CardContent } from '../ui/card';
import { ImageWithFallback } from '../figma/ImageWithFallback';
import { StandardCTAButton } from '../StandardCTAButton';
import { TestimonialsSection } from '../TestimonialsSection';
+import { useGetServiceListQuery } from '../../redux/services/sercicesApi';
+import { FullScreenLoader } from '../FullScreenLoader';
-const targetAudience = [
- {
- title: "CHROs & Talent Leaders",
- description: "Senior HR executives responsible for leadership development and succession planning across the organization",
- icon: Users,
- challenges: ["Succession gaps", "Leadership bench strength", "Talent pipeline visibility", "Development ROI measurement"]
- },
- {
- title: "Business Leaders & CEOs",
- description: "Senior executives who need to ensure leadership continuity and build organizational capability",
- icon: Crown,
- challenges: ["Leadership continuity risk", "External hiring dependency", "Leadership quality consistency", "Succession readiness"]
- },
- {
- title: "Learning & Development Teams",
- description: "L&D professionals tasked with building comprehensive leadership development ecosystems",
- icon: Building,
- challenges: ["Program effectiveness", "Multi-level coordination", "Resource optimization", "Impact demonstration"]
- }
-];
+// Types based on API response
+interface ServicePageData {
+ hero_section: {
+ id: string;
+ landing_page_type: string;
+ background_image_url: string;
+ background_image_alt_text: string;
+ headline: string;
+ subtext: string;
+ cta_text: string;
+ cta_destination: string;
+ };
+ overview: {
+ id: string;
+ title: string;
+ description: string;
+ highlight_text: string;
+ overview_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ audience_section: {
+ id: string;
+ title: string;
+ description: string;
+ audience_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ challenges: string[];
+ }>;
+ };
+ use_case_section: {
+ id: string;
+ title: string;
+ description: string;
+ use_case_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ highlight_text: string;
+ }>;
+ };
+ approach_section: {
+ id: string;
+ title: string;
+ description: string;
+ approach_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ bullets: string[];
+ }>;
+ outcomes: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ bullets: string[];
+ }>;
+ };
+ stats_section: {
+ id: string;
+ title: string;
+ description: string;
+ stat_cards: Array<{
+ id: string;
+ value: string;
+ label: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ program_section: {
+ id: string;
+ title: string;
+ description: string;
+ program_phases: Array<{
+ phase: {
+ id: string;
+ phase_number: number;
+ title: string;
+ duration: string;
+ };
+ activities: Array<{
+ id: string;
+ phase_id: string;
+ text: string;
+ }>;
+ outcomes: Array<{
+ id: string;
+ phase_id: string;
+ text: string;
+ }>;
+ }>;
+ };
+ impact_section: {
+ id: string;
+ title: string;
+ description: string;
+ impact_stats: Array<{
+ id: string;
+ value: string;
+ description: string;
+ label: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ impact_benefits: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ testimonial_section: Array<{
+ id: string;
+ profile_xid: string;
+ name: string;
+ designation: string;
+ content: string;
+ video_url: string | null;
+ display_order: number;
+ }>;
+}
-const useCases = [
- {
- title: "Succession Gap Crisis",
- description: "When critical leadership positions lack ready successors or pipeline depth",
- icon: Target,
- scenario: "More than 40% of key positions have no identified successors"
- },
- {
- title: "External Hiring Dependency",
- description: "When organizations rely heavily on external recruitment for leadership roles",
- icon: Building,
- scenario: "75%+ of leadership roles filled externally in the past 2 years"
- },
- {
- title: "Leadership Quality Inconsistency",
- description: "When leadership effectiveness varies significantly across levels and functions",
- icon: BarChart3,
- scenario: "Leadership effectiveness scores below 70% or high variation"
- },
- {
- title: "Talent Retention Issues",
- description: "When high-potential employees leave due to lack of development opportunities",
- icon: Users2,
- scenario: "High-potential talent turnover above 15% annually"
- }
-];
+// Map API icons to Lucide icons
+const getIconComponent = (iconUrl: string) => {
+ const iconMap: Record = {
+ '/icons/pipeline.svg': TrendingUp,
+ '/icons/succession.svg': Users,
+ '/icons/hr.svg': Users2,
+ '/icons/management.svg': Crown,
+ '/icons/growth.svg': TrendingUp,
+ '/icons/gap.svg': Target,
+ '/icons/assessment.svg': BarChart3,
+ '/icons/development.svg': Brain,
+ '/icons/outcome.svg': Award,
+ '/icons/target.svg': Target,
+ '/icons/engagement.svg': Heart,
+ '/icons/leader.svg': Crown,
+ '/icons/performance.svg': TrendingUp,
+ };
-const programTimeline = [
- {
- phase: "Phase 1: Assessment & Pipeline Mapping",
- duration: "Months 1-3",
- activities: ["Leadership assessment across levels", "Succession gap analysis", "High-potential identification", "Pipeline architecture design"],
- deliverables: ["Leadership capability assessment", "Succession readiness report", "Pipeline development strategy", "Individual development plans"]
- },
- {
- phase: "Phase 2: Multi-Level Development",
- duration: "Months 4-12",
- activities: ["Tier-specific development programs", "Cross-functional assignments", "Mentoring relationships", "Leadership simulations"],
- deliverables: ["Enhanced leadership capabilities", "Succession readiness improvement", "Leadership network expansion", "Real-world application projects"]
- },
- {
- phase: "Phase 3: Integration & Sustainability",
- duration: "Months 13-18",
- activities: ["Succession planning integration", "Leadership transitions", "Performance measurement", "Continuous pipeline refresh"],
- deliverables: ["Sustainable pipeline system", "Succession-ready candidates", "Leadership transition success", "Pipeline metrics dashboard"]
- }
-];
-
-const expectedOutcomes = [
- {
- metric: "85%",
- description: "Of participants promoted within 18 months of program completion",
- icon: TrendingUp,
- category: "Career Advancement"
- },
- {
- metric: "75%",
- description: "Reduction in external leadership hiring dependency",
- icon: Building,
- category: "Internal Succession"
- },
- {
- metric: "92%",
- description: "Improvement in leadership readiness scores across pipeline",
- icon: Target,
- category: "Leadership Quality"
- },
- {
- metric: "3.2x",
- description: "Faster time-to-productivity for internally developed leaders",
- icon: Zap,
- category: "Performance Impact"
- }
-];
-
-// Pipeline Development Testimonials Data
-const pipelineTestimonials = [
- {
- id: 1,
- quote: "Our Leadership Pipeline Development program transformed our succession planning. Within 18 months, we went from having successors for only 30% of key positions to 85% succession readiness. Most importantly, we reduced external leadership hiring by 75%.",
- name: "Sarah Williams",
- title: "VP Human Resources",
- company: "Global Manufacturing Company",
- image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=600&h=800&fit=crop&crop=face",
- hasVideo: true
- },
- {
- id: 2,
- quote: "The systematic approach to pipeline development gave us complete visibility into our leadership depth. We now have ready successors for 92% of critical positions and our internal promotion rate increased by 60%. The ROI has been exceptional.",
- name: "Michael Chen",
- title: "Chief Operating Officer",
- company: "TechForward Solutions",
- image: "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=600&h=800&fit=crop&crop=face",
- hasVideo: true
- },
- {
- id: 3,
- quote: "KLC's pipeline framework revolutionized how we identify and develop future leaders. The comprehensive assessment and development pathways have built unprecedented leadership depth across all business units.",
- name: "Jennifer Rodriguez",
- title: "Chief People Officer",
- company: "Innovation Dynamics Inc",
- image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&h=800&fit=crop&crop=face",
- hasVideo: false
- },
- {
- id: 4,
- quote: "The pipeline development process helped us reduce critical role vacancy time by 70% and improved leadership quality scores across all levels. Our board confidence in succession planning has never been higher.",
- name: "David Park",
- title: "Senior Vice President",
- company: "Financial Services Corp",
- image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=800&fit=crop&crop=face",
- hasVideo: true
- },
- {
- id: 5,
- quote: "Working with KLC transformed our entire approach to leadership development. We now have a robust pipeline that consistently produces high-quality leaders who drive business results and cultural transformation.",
- name: "Lisa Thompson",
- title: "Executive Director",
- company: "Healthcare Solutions Group",
- image: "https://images.unsplash.com/photo-1494790108755-2616b612b647?w=600&h=800&fit=crop&crop=face",
- hasVideo: false
- }
-];
+ const IconComponent = iconMap[iconUrl] || Target;
+ return IconComponent;
+};
export function LeadershipPipelineDevelopment() {
- const [currentTestimonial, setCurrentTestimonial] = useState(1);
- const currentTestimonialData = pipelineTestimonials.find(t => t.id === currentTestimonial) || pipelineTestimonials[0];
- const [expandedUseCase, setExpandedUseCase] = useState(null);
const [expandedPhase, setExpandedPhase] = useState(0);
+ const { data: apiResponse, isLoading, error } = useGetServiceListQuery({
+ service_type: 'leadership_pipeline'
+ });
+
+ const apiData = apiResponse?.data as ServicePageData | undefined;
+
useEffect(() => {
window.scrollTo(0, 0);
}, []);
+ if (isLoading) {
+ return (
+
+ );
+ }
+
+ if (error || !apiData) {
+ return (
+
+
+
Error loading content. Please try again later.
+
window.location.reload()} className="mt-4">Retry
+
+
+
+ );
+ }
+
return (
{/* Hero Section */}
@@ -203,7 +301,7 @@ export function LeadershipPipelineDevelopment() {
@@ -212,7 +310,6 @@ export function LeadershipPipelineDevelopment() {
- {/* Back Navigation */}
- Leadership Pipeline Development
+ {apiData.hero_section.headline}
- Build sustainable leadership pipelines that eliminate succession gaps and reduce external hiring by 75%.
+ {apiData.hero_section.subtext}
navigateTo('/contact?topic=leadership-pipeline')}
- ariaLabel="Book a consultation for leadership pipeline development"
+ text={apiData.hero_section.cta_text}
+ onClick={() => navigateTo(apiData.hero_section.cta_destination)}
+ ariaLabel={apiData.hero_section.cta_text}
className="primary-cta-button-blue cta-text-white"
/>
@@ -253,70 +350,41 @@ export function LeadershipPipelineDevelopment() {
-
Comprehensive Leadership Pipeline System
+
{apiData.overview.title}
- Leadership Pipeline Development is a systematic approach to building sustainable leadership capability across all organizational levels. Our methodology identifies, develops, and transitions high-potential talent through structured programs that create ready-now successors for critical roles.
+ {apiData.overview.description}
- The Business Problem It Solves: Most organizations face succession gaps where 40%+ of key positions lack identified successors, leading to costly external hiring, leadership disruption, and competitive disadvantage.
+ The Business Problem It Solves: {apiData.overview.highlight_text}
-
-
-
-
+ {apiData.overview.overview_cards.map((card, index) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ return (
+
+
+
+
+
+ {card.title}
+
+
+ {card.description}
+
+
-
- Multi-Level Pipeline
-
-
- Systematic leadership development across all organizational tiers with clear progression pathways
-
-
-
-
-
-
-
-
-
- Succession Readiness
-
-
- Creates identified, development-ready successors for all critical leadership positions
-
-
-
-
-
-
-
-
-
- 75% Hiring Reduction
-
-
- Significantly reduces dependency on external leadership hiring through internal capability building
-
-
-
+ );
+ })}
@@ -328,9 +396,9 @@ export function LeadershipPipelineDevelopment() {
-
Target Audience
+
{apiData.audience_section.title}
- Designed for organizations and leaders responsible for building sustainable leadership capability and succession readiness.
+ {apiData.audience_section.description}
@@ -373,9 +441,9 @@ export function LeadershipPipelineDevelopment() {
-
When Organizations Need Pipeline Development
+
{apiData.use_case_section.title}
- Ideal for organizations facing leadership gaps and succession challenges.
+ {apiData.use_case_section.description}
@@ -385,7 +453,6 @@ export function LeadershipPipelineDevelopment() {
key={index}
className="bg-white rounded-xl border border-gray-200 p-6 hover:border-[#04045B] hover:shadow-lg transition-all duration-300"
>
- {/* Icon and Title */}
- {/* Trigger Indicator */}
@@ -424,381 +490,245 @@ export function LeadershipPipelineDevelopment() {
-
Systematic Pipeline Development Framework
+
+ {apiData?.approach_section?.title || "Our Approach to Leadership Development"}
+
- Our proven methodology combines assessment, development planning, structured learning, and succession integration.
+ {apiData?.approach_section?.description || "A systematic, research-backed methodology that transforms leadership potential into measurable business impact."}
- {/* Clean Grid Layout */}
{/* Flowchart Container with Connecting Lines */}
- {/* Desktop: Horizontal Flowchart */}
-
-
- {/* Row 1: Frameworks, Pedagogy, Delivery */}
-
- {/* Frameworks */}
-
-
-
-
Frameworks Used
-
- Establish competency models and leadership progression pathways
-
-
-
- Competency Models
-
-
- Leadership Levels
-
-
- Career Pathways
-
-
-
+ {/* Only render if approach_cards exist and have items */}
+ {apiData?.approach_section?.approach_cards && apiData.approach_section.approach_cards.length > 0 && (
+ <>
+ {/* Desktop: Horizontal Flowchart */}
+
+
+ {/* Row 1: First 3 approach cards from API */}
+
+ {apiData.approach_section.approach_cards.slice(0, 3).map((card, idx) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ return (
+
+
+ {IconComponent ?
+
{card.title}
+
{card.description}
+ {card.bullets && card.bullets.length > 0 && (
+
+ {card.bullets.slice(0, 3).map((bullet, bulletIdx) => (
+
+ {bullet}
+
+ ))}
+
+ )}
+
+ );
+ })}
- {/* Arrow 1→2 */}
-
-
- {/* Pedagogy */}
-
-
-
+ {/* Arrows between first 3 cards */}
+ {apiData.approach_section.approach_cards.length >= 2 && (
+
+ )}
+ {apiData.approach_section.approach_cards.length >= 3 && (
+
+ )}
-
Learning Pedagogy
-
- Apply evidence-based learning approaches for maximum impact
-
-
-
- Experiential Learning
+
+ {/* Vertical Connector - Center Flow Down */}
+ {apiData.approach_section.approach_cards.length > 3 && (
+
-
- Action Learning
+ )}
+
+ {/* Row 2: Next 2 approach cards (if available) */}
+ {apiData.approach_section.approach_cards.length >= 4 && (
+
+ {apiData.approach_section.approach_cards.slice(3, 5).map((card, idx) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ const isFirstOfPair = idx === 0;
+ return (
+
+
+ {IconComponent ?
+
{card.title}
+
{card.description}
+ {card.bullets && card.bullets.length > 0 && (
+
+ {card.bullets.slice(0, 3).map((bullet, bulletIdx) => (
+
+ {bullet}
+
+ ))}
+
+ )}
+
+ );
+ })}
+
+ {/* Arrow between the two cards */}
+ {apiData.approach_section.approach_cards.length >= 5 && (
+
+ )}
-
- Peer Learning
+ )}
+
+ {/* Final Vertical Connector - Center Flow Down to Outcome */}
+
-
- {/* Arrow 2→3 */}
-
-
- {/* Delivery Modes */}
-
-
-
-
Delivery Modes
-
- Flexible options to suit organizational needs and schedules
-
-
-
- Workshops
-
-
- Online Modules
-
-
- Cohort Programs
+ {/* Row 3: Expected Outcome - Use API outcomes data */}
+
+
+
+ {apiData.approach_section.outcomes && apiData.approach_section.outcomes[0] ? (() => {
+ const OutcomeIcon = getIconComponent(apiData.approach_section.outcomes[0].icon_url);
+ return OutcomeIcon ?
+ {apiData.approach_section.outcomes?.[0]?.title || "Expected Outcome"}
+
+
+
+ {apiData.approach_section.outcomes?.[0]?.description || "A systematic, measurable leadership pipeline that accelerates talent development and succession readiness."}
+
+
+ {apiData.approach_section.outcomes?.[0]?.bullets && apiData.approach_section.outcomes[0].bullets.length > 0 ? (
+ apiData.approach_section.outcomes[0].bullets.slice(0, 2).map((bullet, idx) => (
+
+ {bullet}
+
+ ))
+ ) : (
+
+ Proven ROI on Leadership Investment
+
+ )}
+
- {/* Vertical Connector - Center Flow Down */}
-
+ {/* Tablet & Mobile: Vertical Flowchart */}
+
+ {/* Map all approach cards vertically */}
+ {apiData.approach_section.approach_cards.map((card, idx) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ const isEven = idx % 2 === 0;
+ return (
+
+
+
+ {IconComponent ?
+
{card.title}
+
{card.description}
+ {card.bullets && card.bullets.length > 0 && (
+
+ {card.bullets.map((bullet, bulletIdx) => (
+
+ {bullet}
+
+ ))}
+
+ )}
+
+ {/* Connector Arrow */}
+ {idx < apiData.approach_section.approach_cards.length - 1 && (
+
+ )}
+
+ );
+ })}
- {/* Row 2: Assessment, Coaching */}
-
- {/* Assessment Integration */}
-
-
-
-
Assessment Integration
-
- Comprehensive evaluation methods to measure progress and potential
-
-
-
- 360° Feedback
-
-
- Psychometrics
-
-
- Simulations
-
-
-
-
- {/* Arrow 4→5 */}
-
-
- {/* Coaching Integration */}
-
-
-
-
Coaching Integration
-
- Personalized support throughout the development journey
-
-
-
- Executive Coaching
-
-
- Mentoring
-
-
- Peer Coaching
-
-
-
-
-
- {/* Final Vertical Connector - Center Flow Down to Outcome */}
-
-
- {/* Row 3: Expected Outcome - Centered */}
-
-
+ {/* Expected Outcome - Use API outcomes data */}
+
-
Expected Outcome
+ {apiData.approach_section.outcomes && apiData.approach_section.outcomes[0] ? (() => {
+ const OutcomeIcon = getIconComponent(apiData.approach_section.outcomes[0].icon_url);
+ return OutcomeIcon ?
+ {apiData.approach_section.outcomes?.[0]?.title || "Expected Outcome"}
+
- A systematic, measurable leadership pipeline that accelerates talent development and succession readiness.
+ {apiData.approach_section.outcomes?.[0]?.description || "A systematic, measurable leadership pipeline that accelerates talent development and succession readiness."}
-
-
-
Proven ROI on Leadership Investment
+
+ {apiData.approach_section.outcomes?.[0]?.bullets && apiData.approach_section.outcomes[0].bullets.length > 0 ? (
+ apiData.approach_section.outcomes[0].bullets.slice(0, 2).map((bullet, idx) => (
+
+ {bullet}
+
+ ))
+ ) : (
+
+ Proven ROI on Leadership Investment
+
+ )}
-
-
-
- {/* Tablet & Mobile: Vertical Flowchart */}
-
- {/* Frameworks */}
-
-
-
-
-
Frameworks Used
-
- Establish competency models and leadership progression pathways
-
-
-
- Competency Models
-
-
- Leadership Levels
-
-
- Career Pathways
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Pedagogy */}
-
-
-
-
-
Learning Pedagogy
-
- Apply evidence-based learning approaches for maximum impact
-
-
-
- Experiential Learning
-
-
- Action Learning
-
-
- Peer Learning
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Delivery Modes */}
-
-
-
-
-
Delivery Modes
-
- Flexible options to suit organizational needs and schedules
-
-
-
- Workshops
-
-
- Online Modules
-
-
- Cohort Programs
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Assessment Integration */}
-
-
-
-
-
Assessment Integration
-
- Comprehensive evaluation methods to measure progress and potential
-
-
-
- 360° Feedback
-
-
- Psychometrics
-
-
- Simulations
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Coaching Integration */}
-
-
-
-
-
Coaching Integration
-
- Personalized support throughout the development journey
-
-
-
- Executive Coaching
-
-
- Mentoring
-
-
- Peer Coaching
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Expected Outcome */}
-
-
-
Expected Outcome
-
-
- A systematic, measurable leadership pipeline that accelerates talent development and succession readiness.
-
-
- Proven ROI on Leadership Investment
-
-
-
+
+ )}
- {/* Framework Effectiveness */}
- {/*
-
-
Framework Effectiveness
-
- Our systematic approach delivers measurable results across key leadership development metrics.
-
-
-
-
-
-
-
-
85%
-
Promotion Readiness Acceleration
+ {/* Framework Effectiveness - Stats Section */}
+ {apiData?.stats_section && apiData.stats_section.stat_cards && apiData.stats_section.stat_cards.length > 0 && (
+
+
+
{apiData.stats_section.title || "Framework Effectiveness"}
+
+ {apiData.stats_section.description || "Measurable results that demonstrate the impact of our leadership development approach."}
+
-
-
-
-
-
92%
-
Talent Retention Improvement
-
-
-
-
-
-
78%
-
Succession Planning Effectiveness
+
+
+ {apiData.stats_section.stat_cards.map((stat) => {
+ const IconComponent = getIconComponent(stat.icon_url);
+ return (
+
+
+ {IconComponent ?
+
{stat.value || "0"}
+
{stat.label || ""}
+
+ );
+ })}
-
*/}
+ )}
@@ -810,9 +740,9 @@ export function LeadershipPipelineDevelopment() {
-
18-Month Pipeline Development Journey
+
{apiData.program_section.title}
- A comprehensive 3-phase program designed to build sustainable leadership pipelines across organizational levels.
+ {apiData.program_section.description}
@@ -893,112 +823,94 @@ export function LeadershipPipelineDevelopment() {
-
Measurable Pipeline Outcomes
+
{apiData.impact_section.title}
- Organizations typically see significant improvements in succession readiness, internal promotion rates, and leadership quality.
+ {apiData.impact_section.description}
- {/* Outcomes Grid */}
-
- {expectedOutcomes.map((outcome, index) => (
-
-
-
-
- {/*
- {outcome.metric}
-
*/}
- {outcome.category}
- {outcome.description}
- {/* {outcome.category}
*/}
-
-
- ))}
+
+ {apiData.impact_section.impact_stats.map((stat) => {
+ const IconComponent = getIconComponent(stat.icon_url);
+ return (
+
+
+
+
+
+ {stat.value}
+
+ {stat.description}
+ {stat.label}
+
+
+ );
+ })}
-
+
Additional Pipeline Benefits
-
-
-
Leadership Quality
-
Consistent leadership excellence across all organizational levels
-
-
-
-
Talent Retention
-
Higher retention of high-potential employees through development
-
-
-
-
Strategic Alignment
-
Leadership development aligned with business strategy and goals
-
+ {apiData.impact_section.impact_benefits.map((benefit) => {
+ const IconComponent = getIconComponent(benefit.icon_url);
+ return (
+
+
+
+
{benefit.title}
+
{benefit.description}
+
+ );
+ })}
- {/* 7. Client Examples / Testimonials - Hero Section Design */}
+ {/* 7. Client Examples / Testimonials */}
- {/* 8. CTA Section - Hero Section Design */}
+ {/* 8. CTA Section */}
- {/* Background Image */}
-
- {/* Subtle dark overlay for overall image */}
-
- {/* Gradient overlay for better text readability */}
- {/* Content Container */}
- {/* CTA Content Block */}
- {/* Branded Tag */}
-
- {/* Main Headline */}
Ready to build your leadership pipeline?
-
+
{" "}Get in touch{" "}
to eliminate succession gaps now.
-
- {/* CTA Button */}
navigateTo('/contact?topic=leadership-pipeline')}
ariaLabel="Schedule a leadership pipeline consultation"
/>
-
- {/* Supporting Text */}
Connect with our pipeline development experts to discuss building sustainable leadership capability across your organization.
diff --git a/src/components/services/ManagementDevelopment.tsx b/src/components/services/ManagementDevelopment.tsx
index a2a2a2f..3b55592 100644
--- a/src/components/services/ManagementDevelopment.tsx
+++ b/src/components/services/ManagementDevelopment.tsx
@@ -1,6 +1,5 @@
import React, { useEffect, useState } from 'react';
import { Button } from '../ui/button';
-import { Badge } from '../ui/badge';
import { Card, CardContent } from '../ui/card';
import { ImageWithFallback } from '../figma/ImageWithFallback';
import { navigateTo } from '../Router';
@@ -11,137 +10,275 @@ import {
ArrowRight,
CheckCircle,
Settings,
- Calendar,
- Download,
- Network,
Users,
Target,
Brain,
- Eye,
TrendingUp,
BarChart3,
Award,
- Lightbulb,
- Shield,
ChevronDown,
ChevronUp,
ArrowLeft,
Star,
- Zap,
- Globe,
Clock,
- BookOpen,
MessageCircle,
- Building,
UserCheck,
Heart
} from 'lucide-react';
import { TestimonialsSection } from '../TestimonialsSection';
+import { useGetServiceListQuery } from '../../redux/services/sercicesApi';
+import { FullScreenLoader } from '../FullScreenLoader';
-const targetAudience = [
- {
- title: "HR Leaders & L&D Professionals",
- description: "Human resource leaders and learning & development professionals responsible for developing management capability",
- icon: Users,
- challenges: ["Manager effectiveness gaps", "Leadership transition failures", "Performance management issues", "Team engagement problems"]
- },
- {
- title: "Senior Leaders & Directors",
- description: "Senior executives overseeing multiple management levels and seeking to build organizational capability",
- icon: Target,
- challenges: ["Management quality consistency", "Leadership pipeline gaps", "Organizational performance", "Talent retention issues"]
- },
- {
- title: "New & Mid-Level Managers",
- description: "First-time managers and experienced supervisors seeking to enhance their management effectiveness",
- icon: UserCheck,
- challenges: ["Leadership transition challenges", "Team management skills", "Performance conversations", "Strategic thinking development"]
- }
-];
+// Types based on API response
+interface ServicePageData {
+ hero_section: {
+ id: string;
+ landing_page_type: string;
+ background_image_url: string;
+ background_image_alt_text: string;
+ headline: string;
+ subtext: string;
+ cta_text: string;
+ cta_destination: string;
+ };
+ overview: {
+ id: string;
+ title: string;
+ description: string;
+ highlight_text: string;
+ overview_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ audience_section: {
+ id: string;
+ title: string;
+ description: string;
+ audience_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ challenges: string[];
+ }>;
+ };
+ use_case_section: {
+ id: string;
+ title: string;
+ description: string;
+ use_case_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ highlight_text: string;
+ }>;
+ };
+ approach_section: {
+ id: string;
+ title: string;
+ description: string;
+ approach_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ bullets: string[];
+ }>;
+ outcomes: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ bullets: string[];
+ }>;
+ };
+ stats_section: {
+ id: string;
+ title: string;
+ description: string;
+ stat_cards: Array<{
+ id: string;
+ value: string;
+ label: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ program_section: {
+ id: string;
+ title: string;
+ description: string;
+ program_phases: Array<{
+ phase: {
+ id: string;
+ phase_number: number;
+ title: string;
+ duration: string;
+ };
+ activities: Array<{
+ id: string;
+ phase_id: string;
+ text: string;
+ }>;
+ outcomes: Array<{
+ id: string;
+ phase_id: string;
+ text: string;
+ }>;
+ }>;
+ };
+ impact_section: {
+ id: string;
+ title: string;
+ description: string;
+ impact_stats: Array<{
+ id: string;
+ value: string;
+ description: string;
+ label: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ impact_benefits: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ testimonial_section: Array<{
+ id: string;
+ profile_xid: string;
+ name: string;
+ designation: string;
+ content: string;
+ video_url: string | null;
+ display_order: number;
+ }>;
+}
-const useCases = [
- {
- title: "Manager Effectiveness Gaps",
- description: "When management performance is inconsistent or below organizational standards",
- icon: Target,
- scenario: "Manager effectiveness scores below 70% or high team turnover"
- },
- {
- title: "Leadership Transition Failures",
- description: "When new managers struggle to transition from individual contributor to leader",
- icon: Users,
- scenario: "High failure rates in first-time manager transitions"
- },
- {
- title: "Team Performance Issues",
- description: "When teams underperform due to poor management practices and leadership",
- icon: TrendingUp,
- scenario: "Team performance metrics consistently below targets"
- },
- {
- title: "Cultural Alignment Needs",
- description: "When managers need to align with organizational culture and values",
- icon: Heart,
- scenario: "Culture scores low or inconsistent across management levels"
- }
-];
+// Map API icons to Lucide icons
+const getIconComponent = (iconUrl: string) => {
+ const iconMap: Record = {
+ '/icons/pipeline.svg': TrendingUp,
+ '/icons/succession.svg': Users,
+ '/icons/hr.svg': Users,
+ '/icons/management.svg': Target,
+ '/icons/growth.svg': TrendingUp,
+ '/icons/gap.svg': Target,
+ '/icons/assessment.svg': BarChart3,
+ '/icons/development.svg': Brain,
+ '/icons/outcome.svg': Award,
+ '/icons/target.svg': Target,
+ '/icons/engagement.svg': Heart,
+ '/icons/leader.svg': Award,
+ '/icons/performance.svg': TrendingUp,
+ '/icons/people.svg': Users,
+ '/icons/team.svg': Users,
+ '/icons/coaching.svg': MessageCircle,
+ };
-const programTimeline = [
- {
- phase: "Phase 1: Foundation Building",
- duration: "Months 1-3",
- activities: ["Management fundamentals training", "Leadership style assessment", "Team building workshops", "Goal setting and planning"],
- deliverables: ["Management capability baseline", "Individual development plans", "Team assessment results", "90-day action plans"]
- },
- {
- phase: "Phase 2: Skill Development",
- duration: "Months 4-6",
- activities: ["Performance management training", "Communication skills development", "Conflict resolution workshops", "Coaching skills building"],
- deliverables: ["Enhanced management skills", "Performance review proficiency", "Team communication improvement", "Coaching capability"]
- },
- {
- phase: "Phase 3: Application & Mastery",
- duration: "Months 7-9",
- activities: ["Real-world application projects", "Mentoring and coaching", "Advanced leadership topics", "Continuous improvement"],
- deliverables: ["Measurable team improvements", "Leadership project results", "Peer mentoring capability", "Sustained behavior change"]
- }
-];
-
-const expectedOutcomes = [
- {
- metric: "89%",
- description: "Of managers show improved team performance within 6 months",
- icon: TrendingUp,
- category: "Team Performance"
- },
- {
- metric: "76%",
- description: "Reduction in management-related team turnover",
- icon: Users,
- category: "Retention"
- },
- {
- metric: "92%",
- description: "Manager confidence improvement in leadership conversations",
- icon: MessageCircle,
- category: "Communication"
- },
- {
- metric: "84%",
- description: "Of participants promoted within 18 months",
- icon: Star,
- category: "Career Growth"
- }
-];
+ return iconMap[iconUrl] || Target;
+};
export function ManagementDevelopment() {
- const [expandedUseCase, setExpandedUseCase] = useState(null);
const [expandedPhase, setExpandedPhase] = useState(0);
+ const { data: apiResponse, isLoading, error } = useGetServiceListQuery({
+ service_type: 'management_development'
+ });
+
+ const apiData = apiResponse?.data as ServicePageData | undefined;
+
useEffect(() => {
window.scrollTo(0, 0);
}, []);
+ // Loading state
+ if (isLoading) {
+ return (
+
+
+ );
+ }
+
+ // Error state
+ if (error) {
+ console.error('API Error:', error);
+ return (
+
+
+
Error loading content. Please try again later.
+
window.location.reload()} className="mt-4">Retry
+
+
+
+
No data available for this service.
+
navigateTo('/services')} className="mt-4">Back to Services
+
+
{/* Hero Section */}
@@ -150,7 +287,7 @@ export function ManagementDevelopment() {
@@ -159,7 +296,6 @@ export function ManagementDevelopment() {
- {/* Back Navigation */}
- Management Development
+ {apiData.hero_section.headline || 'Management Development'}
- Build exceptional managers who drive 89% better team performance and reduce turnover by 76%.
+ {apiData.hero_section.subtext || 'Build exceptional managers who drive team performance.'}
navigateTo('/contact?topic=management-development')}
- ariaLabel="Talk to us about management development"
+ text={apiData.hero_section.cta_text || 'Talk to Us'}
+ onClick={() => navigateTo(apiData.hero_section.cta_destination || '/contact')}
+ ariaLabel={apiData.hero_section.cta_text || 'Talk to Us'}
className="primary-cta-button-blue cta-text-white"
/>
@@ -200,70 +336,41 @@ export function ManagementDevelopment() {
-
Comprehensive Management Development
+
{apiData.overview?.title || 'Comprehensive Management Development'}
- Management Development is a structured program designed to build exceptional people leaders who can effectively manage teams, drive performance, and create positive work environments. Our approach combines practical management skills with leadership development to create managers who inspire and deliver results.
+ {apiData.overview?.description || 'A structured program designed to build exceptional people leaders who can effectively manage teams, drive performance, and create positive work environments.'}
- The Business Problem It Solves: Many organizations promote high-performing individual contributors to management roles without proper training, leading to poor team performance, high turnover, and frustrated employees. Our program ensures managers have the skills, confidence, and tools to succeed in their leadership roles.
+ The Business Problem It Solves: {apiData.overview?.highlight_text || 'Many organizations promote high-performing individual contributors to management roles without proper training, leading to poor team performance and high turnover.'}
-
-
-
-
+ {apiData.overview?.overview_cards?.map((card, index) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ return (
+
+
+
+
+
+ {card.title}
+
+
+ {card.description}
+
+
-
- People Leadership
-
-
- Essential skills for managing and developing teams effectively with modern leadership principles
-
-
-
-
-
-
-
-
-
- Performance Focus
-
-
- Tools and techniques to drive team performance and achieve measurable business results
-
-
-
-
-
-
-
-
- 89% Success Rate
-
-
- Proven track record with 89% of managers showing improved team performance within 6 months
-
-
-
+ );
+ })}
@@ -275,9 +382,9 @@ export function ManagementDevelopment() {
-
Target Audience
+
{apiData.audience_section?.title || 'Target Audience'}
- Designed for organizations seeking to build management capability and individuals transitioning into leadership roles.
+ {apiData.audience_section?.description || 'Designed for organizations seeking to build management capability and individuals transitioning into leadership roles.'}
@@ -320,9 +427,9 @@ export function ManagementDevelopment() {
-
When Organizations Need Management Development
+
{apiData.use_case_section?.title || 'When Organizations Need Management Development'}
- Ideal for organizations facing management effectiveness gaps and team performance challenges.
+ {apiData.use_case_section?.description || 'Ideal for organizations facing management effectiveness gaps and team performance challenges.'}
@@ -332,7 +439,6 @@ export function ManagementDevelopment() {
key={index}
className="bg-white rounded-xl border border-gray-200 p-6 hover:border-[#04045B] hover:shadow-lg transition-all duration-300"
>
- {/* Icon and Title */}
- {/* Trigger Indicator */}
@@ -364,387 +469,252 @@ export function ManagementDevelopment() {
- {/* 4. Our Approach */}
+ {/* 4. Our Approach - With Flowchart Design */}
-
Practical Management Development Framework
+
+ {apiData?.approach_section?.title || "Our Approach to Leadership Development"}
+
- Our proven methodology combines management fundamentals, practical application, and ongoing support for sustainable results.
+ {apiData?.approach_section?.description || "A systematic, research-backed methodology that transforms leadership potential into measurable business impact."}
{/* Flowchart Container with Connecting Lines */}
- {/* Desktop: Horizontal Flowchart */}
-
-
- {/* Row 1: Frameworks, Pedagogy, Delivery */}
-
- {/* Frameworks */}
-
-
-
-
Management Frameworks
-
- Core management models and team leadership principles
-
-
-
- People Management
-
-
- Performance Systems
-
-
- Team Development
-
-
-
+ {/* Only render if approach_cards exist and have items */}
+ {apiData?.approach_section?.approach_cards && apiData.approach_section.approach_cards.length > 0 && (
+ <>
+ {/* Desktop: Horizontal Flowchart */}
+
+
+ {/* Row 1: First 3 approach cards from API */}
+
+ {apiData.approach_section.approach_cards.slice(0, 3).map((card, idx) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ return (
+
+
+ {IconComponent ?
+
{card.title}
+
{card.description}
+ {card.bullets && card.bullets.length > 0 && (
+
+ {card.bullets.slice(0, 3).map((bullet, bulletIdx) => (
+
+ {bullet}
+
+ ))}
+
+ )}
+
+ );
+ })}
- {/* Arrow 1→2 */}
-
-
- {/* Pedagogy */}
-
-
-
+ {/* Arrows between first 3 cards */}
+ {apiData.approach_section.approach_cards.length >= 2 && (
+
+ )}
+ {apiData.approach_section.approach_cards.length >= 3 && (
+
+ )}
-
Learning Pedagogy
-
- Practical learning through application and peer exchange
-
-
-
- Experiential Learning
+
+ {/* Vertical Connector - Center Flow Down */}
+ {apiData.approach_section.approach_cards.length > 3 && (
+
-
- Action Learning
+ )}
+
+ {/* Row 2: Next 2 approach cards (if available) */}
+ {apiData.approach_section.approach_cards.length >= 4 && (
+
+ {apiData.approach_section.approach_cards.slice(3, 5).map((card, idx) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ const isFirstOfPair = idx === 0;
+ return (
+
+
+ {IconComponent ?
+
{card.title}
+
{card.description}
+ {card.bullets && card.bullets.length > 0 && (
+
+ {card.bullets.slice(0, 3).map((bullet, bulletIdx) => (
+
+ {bullet}
+
+ ))}
+
+ )}
+
+ );
+ })}
+
+ {/* Arrow between the two cards */}
+ {apiData.approach_section.approach_cards.length >= 5 && (
+
+ )}
-
- Peer Learning
+ )}
+
+ {/* Final Vertical Connector - Center Flow Down to Outcome */}
+
-
- {/* Arrow 2→3 */}
-
-
- {/* Delivery Modes */}
-
-
-
-
Delivery Modes
-
- Flexible formats for manager development needs
-
-
-
- Interactive Workshops
-
-
- Peer Cohorts
-
-
- Action Projects
+ {/* Row 3: Expected Outcome - Use API outcomes data */}
+
+
+
+ {apiData.approach_section.outcomes && apiData.approach_section.outcomes[0] ? (() => {
+ const OutcomeIcon = getIconComponent(apiData.approach_section.outcomes[0].icon_url);
+ return OutcomeIcon ?
+ {apiData.approach_section.outcomes?.[0]?.title || "Expected Outcome"}
+
+
+
+ {apiData.approach_section.outcomes?.[0]?.description || "A systematic, measurable leadership pipeline that accelerates talent development and succession readiness."}
+
+
+ {apiData.approach_section.outcomes?.[0]?.bullets && apiData.approach_section.outcomes[0].bullets.length > 0 ? (
+ apiData.approach_section.outcomes[0].bullets.slice(0, 2).map((bullet, idx) => (
+
+ {bullet}
+
+ ))
+ ) : (
+
+ Proven ROI on Leadership Investment
+
+ )}
+
- {/* Vertical Connector - Center Flow Down */}
-
+ {/* Tablet & Mobile: Vertical Flowchart */}
+
+ {/* Map all approach cards vertically */}
+ {apiData.approach_section.approach_cards.map((card, idx) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ const isEven = idx % 2 === 0;
+ return (
+
+
+
+ {IconComponent ?
+
{card.title}
+
{card.description}
+ {card.bullets && card.bullets.length > 0 && (
+
+ {card.bullets.map((bullet, bulletIdx) => (
+
+ {bullet}
+
+ ))}
+
+ )}
+
+ {/* Connector Arrow */}
+ {idx < apiData.approach_section.approach_cards.length - 1 && (
+
+ )}
+
+ );
+ })}
- {/* Row 2: Assessment, Coaching */}
-
- {/* Assessment Integration */}
-
-
-
-
Assessment Integration
-
- Comprehensive evaluation to track manager effectiveness
-
-
-
- 360° Feedback
-
-
- Performance Metrics
-
-
- Team Engagement
-
-
-
-
- {/* Arrow 4→5 */}
-
-
- {/* Coaching Integration */}
-
-
-
-
Coaching Integration
-
- Personalized coaching support for manager challenges
-
-
-
- Individual Coaching
-
-
- Group Coaching
-
-
- Peer Coaching
-
-
-
-
-
- {/* Final Vertical Connector - Center Flow Down to Outcome */}
-
-
- {/* Row 3: Expected Outcome - Centered */}
-
-
+ {/* Expected Outcome - Use API outcomes data */}
+
-
Expected Outcome
+ {apiData.approach_section.outcomes && apiData.approach_section.outcomes[0] ? (() => {
+ const OutcomeIcon = getIconComponent(apiData.approach_section.outcomes[0].icon_url);
+ return OutcomeIcon ?
+ {apiData.approach_section.outcomes?.[0]?.title || "Expected Outcome"}
+
- Effective people managers who build high-performing teams, drive business results, and create positive work environments.
+ {apiData.approach_section.outcomes?.[0]?.description || "A systematic, measurable leadership pipeline that accelerates talent development and succession readiness."}
-
-
-
Enhanced Management Effectiveness
+
+ {apiData.approach_section.outcomes?.[0]?.bullets && apiData.approach_section.outcomes[0].bullets.length > 0 ? (
+ apiData.approach_section.outcomes[0].bullets.slice(0, 2).map((bullet, idx) => (
+
+ {bullet}
+
+ ))
+ ) : (
+
+ Proven ROI on Leadership Investment
+
+ )}
-
-
-
- {/* Tablet & Mobile: Vertical Flowchart */}
-
- {/* Frameworks */}
-
-
-
-
-
Management Frameworks
-
- Core management models and team leadership principles
-
-
-
- People Management
-
-
- Performance Systems
-
-
- Team Development
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Pedagogy */}
-
-
-
-
-
Learning Pedagogy
-
- Practical learning through application and peer exchange
-
-
-
- Experiential Learning
-
-
- Action Learning
-
-
- Peer Learning
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Delivery Modes */}
-
-
-
-
-
Delivery Modes
-
- Flexible formats for manager development needs
-
-
-
- Interactive Workshops
-
-
- Peer Cohorts
-
-
- Action Projects
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Assessment Integration */}
-
-
-
-
-
Assessment Integration
-
- Comprehensive evaluation to track manager effectiveness
-
-
-
- 360° Feedback
-
-
- Performance Metrics
-
-
- Team Engagement
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Coaching Integration */}
-
-
-
-
-
Coaching Integration
-
- Personalized coaching support for manager challenges
-
-
-
- Individual Coaching
-
-
- Group Coaching
-
-
- Peer Coaching
-
-
-
- {/* Connector Arrow */}
-
-
-
- {/* Expected Outcome */}
-
-
-
Expected Outcome
-
-
- Effective people managers who build high-performing teams, drive business results, and create positive work environments.
-
-
- Enhanced Management Effectiveness
-
-
-
+
+ )}
- {/* Framework Effectiveness */}
- {/*
-
-
Framework Effectiveness
-
- Our systematic approach delivers measurable results across key management development metrics.
-
-
-
-
-
-
-
-
89%
-
Manager Effectiveness Increase
+ {/* Framework Effectiveness - Stats Section */}
+ {apiData?.stats_section && apiData.stats_section.stat_cards && apiData.stats_section.stat_cards.length > 0 && (
+
+
+
{apiData.stats_section.title || "Framework Effectiveness"}
+
+ {apiData.stats_section.description || "Measurable results that demonstrate the impact of our leadership development approach."}
+
-
-
-
-
85%
-
Team Performance Improvement
-
-
-
-
-
-
78%
-
Employee Engagement Growth
+
+ {apiData.stats_section.stat_cards.map((stat) => {
+ const IconComponent = getIconComponent(stat.icon_url);
+ return (
+
+
+ {IconComponent ?
+
{stat.value || "0"}
+
{stat.label || ""}
+
+ );
+ })}
-
*/}
+ )}
@@ -756,9 +726,9 @@ export function ManagementDevelopment() {
-
9-Month Management Development Journey
+
{apiData.program_section?.title || 'Management Development Journey'}
- A comprehensive 3-phase program designed to build exceptional management capability.
+ {apiData.program_section?.description || 'A comprehensive program designed to build exceptional management capability.'}
@@ -839,111 +809,94 @@ export function ManagementDevelopment() {
-
Measurable Management Outcomes
+
{apiData.impact_section?.title || 'Measurable Management Outcomes'}
- Organizations typically see significant improvements in team performance, employee engagement, and management effectiveness.
+ {apiData.impact_section?.description || 'Organizations typically see significant improvements in team performance, employee engagement, and management effectiveness.'}
- {/* Outcomes Grid */}
-
- {expectedOutcomes.map((outcome, index) => (
-
-
-
-
- {/*
- {outcome.metric}
-
*/}
- {outcome.category}
- {outcome.description}
-
-
- ))}
+
+ {apiData.impact_section?.impact_stats?.map((stat) => {
+ const IconComponent = getIconComponent(stat.icon_url);
+ return (
+
+
+
+
+
+ {stat.value}
+
+ {stat.description}
+ {stat.label}
+
+
+ );
+ })}
-
+
Additional Management Benefits
-
-
-
Team Engagement
-
Higher employee engagement and job satisfaction scores
-
-
-
-
Goal Achievement
-
Improved team goal achievement and performance metrics
-
-
-
-
Manager Confidence
-
Increased confidence in management conversations and decisions
-
+ {apiData.impact_section?.impact_benefits?.map((benefit) => {
+ const IconComponent = getIconComponent(benefit.icon_url);
+ return (
+
+
+
+
{benefit.title}
+
{benefit.description}
+
+ );
+ })}
- {/* 7. Client Examples / Testimonials - Hero Section Design */}
+ {/* 7. Client Examples / Testimonials */}
- {/* 8. CTA Section - Hero Section Design */}
+ {/* 8. CTA Section */}
- {/* Background Image */}
-
- {/* Subtle dark overlay for overall image */}
-
- {/* Gradient overlay for better text readability */}
- {/* Content Container */}
- {/* CTA Content Block */}
- {/* Branded Tag */}
-
- {/* Main Headline */}
Ready to build exceptional managers?
-
+
{" "}Get in touch{" "}
to drive team performance now.
-
- {/* CTA Button */}
navigateTo('/contact?topic=management-development')}
ariaLabel="Schedule a management development consultation"
/>
-
- {/* Supporting Text */}
Connect with our management development experts to discuss building exceptional managers who drive team engagement and results.
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 7385c7d..109c214 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -12,6 +12,7 @@ import { PrimaryCTAButton } from "../components/PrimaryCTAButton";
import { BrandedTag } from "../components/about/BrandedTag";
import { useNavigate } from "react-router-dom";
import { useGetHomepageQuery } from "../redux/services/homepageApi";
+import { FullScreenLoader } from "../components/FullScreenLoader";
const HomePage: React.FC = () => {
const navigate = useNavigate();
@@ -25,6 +26,14 @@ const HomePage: React.FC = () => {
const highlightCards = data?.highlight_cards ?? [];
const ctaBands = data?.cta_bands ?? [];
+ if (isLoading) {
+ return (
+
+
+ );
+ }
+
return (
<>
(value: T, delay: number): T {
+ const [debouncedValue, setDebouncedValue] = useState(value);
+
+ useEffect(() => {
+ const handler = setTimeout(() => {
+ setDebouncedValue(value);
+ }, delay);
+
+ return () => {
+ clearTimeout(handler);
+ };
+ }, [value, delay]);
+
+ return debouncedValue;
+}
\ No newline at end of file
diff --git a/src/redux/services/aboutUsApi.ts b/src/redux/services/aboutUsApi.ts
index a0c195f..965c225 100644
--- a/src/redux/services/aboutUsApi.ts
+++ b/src/redux/services/aboutUsApi.ts
@@ -20,6 +20,17 @@ export interface HowWeWorkItem {
display_order: number;
}
+export interface Testimonial {
+ id: string;
+ profile_xid: string;
+ name: string;
+ designation: string;
+ content: string;
+ video_url: string;
+ display_order: number;
+ testimonial_page_type: string;
+}
+
export interface StatItem {
id: string;
number: number;
@@ -43,11 +54,36 @@ export interface AboutUsData {
how_we_work_title: string;
who_we_are_title: string;
our_team_title: string;
+ our_team_description: string;
how_we_work: HowWeWorkItem[];
stat_section: StatItem[];
our_team: TeamMember[];
+ methodology: Methodology;
+ philosophy: Philosophy;
+ testimonials: Testimonial[];
}
+export interface Methodology {
+ title: string;
+ subtitle: string;
+ phases: Phase[];
+}
+export interface Phase {
+ id?: string;
+ phase_number: number;
+ phase_label: string;
+ title: string;
+ description: string;
+ bullet_title: string;
+ bullets: string[];
+ display_order: number;
+}
+
+export interface Philosophy {
+ title: string;
+ description: string;
+ points: string[];
+}
export interface AboutUsResponse {
success: boolean;
status: number;
diff --git a/src/redux/services/courseApi.ts b/src/redux/services/courseApi.ts
new file mode 100644
index 0000000..c3b260e
--- /dev/null
+++ b/src/redux/services/courseApi.ts
@@ -0,0 +1,169 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import baseQueryWithReauth from "./baseQuery";
+
+/* ================= TYPES ================= */
+
+export type CourseStatus =
+ | "publish"
+ | "unpublish"
+ | "archive"
+ | "processing"
+ | "in_draft";
+
+export interface GetCoursesParams {
+ limit?: number;
+ offset?: number;
+ status?: CourseStatus;
+ search_query?: string;
+ course_category?: string[];
+ price_range?: string;
+ duration_range?: string;
+ min_rating?: number;
+ sort_by?: string;
+}
+
+export interface Course {
+ id: string;
+ course_name: string;
+ course_desc: string;
+ thumbnail_img: string;
+ course_category_xid: string;
+ course_category_name: string;
+ best_value: number;
+ avg_rating: number;
+ total_reviews: number;
+ retail_type: string;
+ price: number;
+ is_certificate_available: boolean;
+ course_status: CourseStatus;
+ updated_at: string;
+ total_duration: number;
+ no_of_modules: number;
+}
+
+export interface PaginationInfo {
+ total_count: number;
+ limit: number;
+ offset: number;
+ applied_filters: {
+ status: string | null;
+ course_category_xid: string[] | null;
+ content_types_xid: string[] | null;
+ search_query: string | null;
+ price_range: string | null;
+ duration_range: string | null;
+ min_rating: number | null;
+ sort_by: string | null;
+ };
+}
+
+export interface CourseListResponse {
+ success: boolean;
+ status: number;
+ message: string;
+ data: {
+ pagination_info: PaginationInfo;
+ items: Course[];
+ };
+}
+
+/* ================= PREPOPULATE TYPES ================= */
+
+export interface CourseCategory {
+ id: string;
+ category_name: string;
+ category_code: string;
+ display_order: number;
+ is_active: boolean;
+}
+
+export interface GetCourseCategoriesParams {
+ limit?: number;
+ offset?: number;
+ is_active?: boolean;
+}
+
+export interface CourseCategoriesResponse {
+ success: boolean;
+ status: number;
+ message: string;
+ data: {
+ pagination_info: {
+ total_count: number;
+ limit: number;
+ offset: number;
+ };
+ items: CourseCategory[];
+ };
+}
+
+/* ================= API ================= */
+
+export const courseApi = createApi({
+ reducerPath: "courseApi",
+ baseQuery: baseQueryWithReauth,
+ tagTypes: ["Course", "CourseCategories"],
+ endpoints: (builder) => ({
+ // GET Courses
+ getCourses: builder.query({
+ query: (params) => {
+ const searchParams = new URLSearchParams();
+
+ if (params) {
+ if (params.limit) searchParams.append("limit", params.limit.toString());
+ if (params.offset) searchParams.append("offset", params.offset.toString());
+ if (params.status) searchParams.append("status", params.status);
+ if (params.search_query) searchParams.append("search_query", params.search_query);
+ if (params.price_range) searchParams.append("price_range", params.price_range);
+ if (params.duration_range) searchParams.append("duration_range", params.duration_range);
+ if (params.min_rating !== undefined)
+ searchParams.append("min_rating", params.min_rating.toString());
+ if (params.sort_by) searchParams.append("sort_by", params.sort_by);
+
+ // ✅ array support
+ if (params.course_category?.length) {
+ params.course_category.forEach((cat) => {
+ searchParams.append("course_category", cat);
+ });
+ }
+ }
+
+ const queryString = searchParams.toString();
+
+ return queryString
+ ? `admin/course/list?${queryString}`
+ : `admin/course/list`;
+ },
+
+ providesTags: (result) =>
+ result
+ ? [
+ ...result.data.items.map(({ id }) => ({
+ type: "Course" as const,
+ id,
+ })),
+ { type: "Course", id: "LIST" },
+ ]
+ : [{ type: "Course", id: "LIST" }],
+ }),
+
+ // GET Course Categories (Prepopulate)
+ getCourseCategories: builder.query({
+ query: (params) => {
+ const searchParams = new URLSearchParams();
+ if (params) {
+ if (params.limit) searchParams.append("limit", params.limit.toString());
+ if (params.offset) searchParams.append("offset", params.offset.toString());
+ if (params.is_active !== undefined) searchParams.append("is_active", params.is_active.toString());
+ }
+ const queryString = searchParams.toString();
+ return queryString
+ ? `admin/prepopulate/course-categories/list?${queryString}`
+ : `admin/prepopulate/course-categories/list`;
+ },
+ providesTags: ["CourseCategories"],
+ }),
+ }),
+});
+
+export const { useGetCoursesQuery, useGetCourseCategoriesQuery } = courseApi;
\ No newline at end of file
diff --git a/src/redux/services/sercicesApi.ts b/src/redux/services/sercicesApi.ts
new file mode 100644
index 0000000..2dc6824
--- /dev/null
+++ b/src/redux/services/sercicesApi.ts
@@ -0,0 +1,20 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import baseQueryWithReauth from "./baseQuery";
+
+export const sercicesApi = createApi({
+ reducerPath: "sercicesApi",
+ baseQuery: baseQueryWithReauth,
+ tagTypes: ["services"],
+ endpoints: (builder) => ({
+ // GET services LIST
+
+ getServiceList: builder.query({
+ query: ({ service_type }) => ({
+ url: `/admin/service-page/list`,
+ params: { service_type },
+ }),
+ }),
+ }),
+});
+
+export const { useGetServiceListQuery } = sercicesApi;
diff --git a/src/redux/store/Store.tsx b/src/redux/store/Store.tsx
index 29dc1df..5478372 100644
--- a/src/redux/store/Store.tsx
+++ b/src/redux/store/Store.tsx
@@ -4,6 +4,8 @@ import { faqApi } from "../services/faqApi";
import { contactUsApi } from "../services/contactUsApi";
import { blogApi } from "../services/blogApi";
import { aboutUsApi } from "../services/aboutUsApi";
+import { sercicesApi } from "../services/sercicesApi";
+import { courseApi } from "../services/courseApi";
export const store = configureStore({
reducer: {
@@ -12,6 +14,8 @@ export const store = configureStore({
[contactUsApi.reducerPath]: contactUsApi.reducer,
[blogApi.reducerPath]: blogApi.reducer,
[aboutUsApi.reducerPath]: aboutUsApi.reducer,
+ [sercicesApi.reducerPath]: sercicesApi.reducer,
+ [courseApi.reducerPath]: courseApi.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(
@@ -20,6 +24,8 @@ export const store = configureStore({
contactUsApi.middleware,
blogApi.middleware,
aboutUsApi.middleware,
+ sercicesApi.middleware,
+ courseApi.middleware,
),
});