KLC/KLC-Website-Frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pagination added in artical and other changes

Browse Source
This commit is contained in:
priyanshuvish
2025-09-30 15:56:17 +05:30
parent c67ace8edb
commit 7b8fe79917
11 changed files with 2369 additions and 934 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/Kautilya.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 363 KiB

185
src/components/Articles.tsx
View File

@@ -134,7 +134,25 @@ const articles = [
featured: false,
views: '1.5k',
likes: 28
}
},
{
id: '7',
slug: 'strategic-thinking-frameworks',
title: 'Strategic Thinking Frameworks for Modern Leaders',
excerpt: 'Master strategic thinking with proven frameworks that help leaders anticipate challenges and seize opportunities.',
content: 'Strategic thinking is a critical skill for leaders navigating complex business environments...',
author: 'Dr. Amanda Foster',
authorTitle: 'Strategic Leadership Coach',
authorAvatar: 'https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?w=150&h=150&fit=crop&crop=face',
date: '2024-02-05',
readTime: '11 min read',
category: 'Strategy',
tags: ['Strategic Thinking', 'Frameworks', 'Decision Making', 'Planning'],
thumbnail: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=400&fit=crop',
featured: false,
views: '2.1k',
likes: 39
},
];
export function Articles() {
@@ -147,7 +165,9 @@ export function Articles() {
const [sortBy, setSortBy] = useState('Most Recent');
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
const [currentPage, setCurrentPage] = useState(1);
const articlesPerPage = 6;
const articlesPerPage = 4;
const containerRef = useRef<HTMLDivElement>(null);
// Get unique values for filters
const categories = ['All Categories', ...Array.from(new Set(articles.map(article => article.category)))];
@@ -166,31 +186,31 @@ export function Articles() {
// Filter and sort articles
const filteredArticles = articles.filter(article => {
const matchesSearch = article.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
article.excerpt.toLowerCase().includes(searchTerm.toLowerCase()) ||
article.author.toLowerCase().includes(searchTerm.toLowerCase()) ||
article.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
article.excerpt.toLowerCase().includes(searchTerm.toLowerCase()) ||
article.author.toLowerCase().includes(searchTerm.toLowerCase()) ||
article.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
const matchesCategory = selectedCategory === 'All Categories' || article.category === selectedCategory;
const matchesAuthor = selectedAuthor === 'All Authors' || article.author === selectedAuthor;
// Read time filter
const readTimeMinutes = parseInt(article.readTime);
// FIXED: Read time filter - properly parse the read time
const readTimeMinutes = parseInt(article.readTime.replace(' min read', '')) || 0;
const matchesReadTime = selectedReadTime === 'All Read Times' ||
(selectedReadTime === 'Under 5 min' && readTimeMinutes < 5) ||
(selectedReadTime === '5-10 min' && readTimeMinutes >= 5 && readTimeMinutes <= 10) ||
(selectedReadTime === 'Over 10 min' && readTimeMinutes > 10);
(selectedReadTime === 'Under 5 min' && readTimeMinutes < 5) ||
(selectedReadTime === '5-10 min' && readTimeMinutes >= 5 && readTimeMinutes <= 10) ||
(selectedReadTime === 'Over 10 min' && readTimeMinutes > 10);
// Date range filter
const articleDate = new Date(article.date);
const now = new Date();
const matchesDateRange = selectedDateRange === 'All Time' ||
(selectedDateRange === 'Last 7 days' && (now.getTime() - articleDate.getTime()) <= 7 * 24 * 60 * 60 * 1000) ||
(selectedDateRange === 'Last 30 days' && (now.getTime() - articleDate.getTime()) <= 30 * 24 * 60 * 60 * 1000) ||
(selectedDateRange === 'Last 3 months' && (now.getTime() - articleDate.getTime()) <= 90 * 24 * 60 * 60 * 1000);
(selectedDateRange === 'Last 7 days' && (now.getTime() - articleDate.getTime()) <= 7 * 24 * 60 * 60 * 1000) ||
(selectedDateRange === 'Last 30 days' && (now.getTime() - articleDate.getTime()) <= 30 * 24 * 60 * 60 * 1000) ||
(selectedDateRange === 'Last 3 months' && (now.getTime() - articleDate.getTime()) <= 90 * 24 * 60 * 60 * 1000);
// Topic filter
const matchesTopic = selectedTopic === 'All Topics' ||
article.tags.includes(selectedTopic);
const matchesTopic = selectedTopic === 'All Topics' ||
article.tags.includes(selectedTopic);
return matchesSearch && matchesCategory && matchesAuthor && matchesReadTime && matchesDateRange && matchesTopic;
}).sort((a, b) => {
switch (sortBy) {
@@ -201,7 +221,8 @@ export function Articles() {
case 'title':
return a.title.localeCompare(b.title);
case 'readTime':
return parseInt(a.readTime) - parseInt(b.readTime);
// FIXED: Sort by read time - properly parse the values
return (parseInt(a.readTime.replace(' min read', '')) || 0) - (parseInt(b.readTime.replace(' min read', '')) || 0);
case 'popular':
return parseInt(b.views) - parseInt(a.views);
default:
@@ -234,12 +255,12 @@ export function Articles() {
const hasActiveFilters = searchTerm ||
selectedCategory !== 'All Categories' ||
selectedAuthor !== 'All Authors' ||
selectedReadTime !== 'All Read Times' ||
selectedDateRange !== 'All Time' ||
selectedTopic !== 'All Topics';
const hasActiveFilters = searchTerm ||
selectedCategory !== 'All Categories' ||
selectedAuthor !== 'All Authors' ||
selectedReadTime !== 'All Read Times' ||
selectedDateRange !== 'All Time' ||
selectedTopic !== 'All Topics';
return (
<div style={{ backgroundColor: '#FFFFFF' }}>
@@ -260,11 +281,11 @@ export function Articles() {
<div className="dot"></div>
<span className="text">INSIGHTS & KNOWLEDGE</span>
</div>
<h1 className="text-h1-white mb-6">
Articles & Research
</h1>
<p className="text-body-lg-white mb-8 max-w-2xl mx-auto">
Discover cutting-edge insights, research findings, and expert perspectives on leadership development, management strategies, and organizational excellence.
</p>
@@ -320,11 +341,10 @@ export function Articles() {
<div className="flex items-center border border-gray-300 rounded-lg overflow-hidden">
<button
onClick={() => setViewMode('grid')}
className={`p-2 transition-colors ${
viewMode === 'grid'
? 'text-white'
className={`p-2 transition-colors ${viewMode === 'grid'
? 'text-white'
: 'bg-white text-gray-600 hover:bg-gray-50'
}`}
}`}
style={{
backgroundColor: viewMode === 'grid' ? 'var(--color-primary)' : undefined
}}
@@ -334,11 +354,10 @@ export function Articles() {
</button>
<button
onClick={() => setViewMode('list')}
className={`p-2 transition-colors ${
viewMode === 'list'
? 'text-white'
className={`p-2 transition-colors ${viewMode === 'list'
? 'text-white'
: 'bg-white text-gray-600 hover:bg-gray-50'
}`}
}`}
style={{
backgroundColor: viewMode === 'list' ? 'var(--color-primary)' : undefined
}}
@@ -521,9 +540,9 @@ export function Articles() {
<>
{/* Grid View */}
{viewMode === 'grid' && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
{currentArticles.map((article) => (
<Card
<Card
key={article.id}
className="overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer group"
onClick={() => navigateTo(`/learning/articles/${article.slug}`)}
@@ -536,7 +555,7 @@ export function Articles() {
/>
{article.featured && (
<div className="absolute top-4 right-4">
<Badge
<Badge
variant="secondary"
className="bg-yellow-100 text-yellow-800 border-yellow-200"
>
@@ -552,11 +571,11 @@ export function Articles() {
</Badge>
<span className="text-small text-muted">{article.readTime}</span>
</div>
<h3 className="text-h4 mb-3 group-hover:text-blue-600 transition-colors line-clamp-2">
{article.title}
</h3>
<p className="text-small text-muted mb-4 line-clamp-3">
{article.excerpt}
</p>
@@ -584,7 +603,7 @@ export function Articles() {
{viewMode === 'list' && (
<div className="space-y-6">
{currentArticles.map((article) => (
<Card
<Card
key={article.id}
className="overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer group"
onClick={() => navigateTo(`/learning/articles/${article.slug}`)}
@@ -598,7 +617,7 @@ export function Articles() {
/>
{article.featured && (
<div className="absolute top-2 right-2">
<Badge
<Badge
variant="secondary"
className="bg-yellow-100 text-yellow-800 border-yellow-200 text-xs"
>
@@ -621,11 +640,11 @@ export function Articles() {
<span>{article.views}</span>
</div>
</div>
<h3 className="text-h4 mb-2 group-hover:text-blue-600 transition-colors">
{article.title}
</h3>
<p className="text-body text-muted mb-3">
{article.excerpt}
</p>
@@ -657,29 +676,71 @@ export function Articles() {
{/* Pagination */}
{totalPages > 1 && (
<div className="flex items-center justify-center gap-4 mt-12">
<div className="flex items-center justify-center gap-2">
<Button
variant="outline"
onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
size="sm"
onClick={() => {
setCurrentPage(prev => Math.max(1, prev - 1));
containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}}
disabled={currentPage === 1}
className="text-body"
className="flex items-center gap-1 border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
>
<ChevronLeft className="w-4 h-4 mr-2" />
<ChevronLeft className="w-4 h-4" />
Previous
</Button>
<span className="text-body">
Page {currentPage} of {totalPages}
</span>
<div className="flex items-center gap-1">
{Array.from({ length: totalPages }, (_, i) => {
const page = i + 1;
// Show limited pages for better UX
if (totalPages > 7) {
const showPage =
page === 1 ||
page === totalPages ||
(page >= currentPage - 1 && page <= currentPage + 1);
if (!showPage) {
if (page === currentPage - 2 || page === currentPage + 2) {
return <span key={page} className="px-2">...</span>;
}
return null;
}
}
return (
<Button
key={page}
variant={currentPage === page ? "default" : "outline"}
size="sm"
onClick={() => {
setCurrentPage(page);
containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}}
className={`min-w-10 ${currentPage === page
? 'bg-blue-600 text-white hover:bg-blue-700'
: 'border-gray-300 text-gray-700 hover:bg-gray-50'
}`}
>
{page}
</Button>
);
})}
</div>
<Button
variant="outline"
onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
size="sm"
onClick={() => {
setCurrentPage(prev => Math.min(totalPages, prev + 1));
containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}}
disabled={currentPage === totalPages}
className="text-body"
className="flex items-center gap-1 border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
>
Next
<ChevronRight className="w-4 h-4 ml-2" />
<ChevronRight className="w-4 h-4" />
</Button>
</div>
)}
@@ -703,9 +764,9 @@ export function Articles() {
</div>
<div className="relative h-full flex items-center justify-end section-margin-x">
<div
<div
className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
style={{
style={{
backgroundColor: 'var(--color-brand-primary)'
}}
>
@@ -715,8 +776,8 @@ export function Articles() {
</div>
<h2 className="text-h2-white mb-8">
Ready to explore more insights?
<span
Ready to explore more insights?
<span
className="italic"
style={{ color: 'var(--color-brand-accent)' }}
>
@@ -725,7 +786,7 @@ export function Articles() {
our complete library of leadership resources.
</h2>
<PrimaryCTAButton
<PrimaryCTAButton
text="Browse All Resources"
onClick={() => navigateTo('/learning/articles')}
ariaLabel="Browse all leadership articles and resources"

136
src/components/LearningFacilityNew.tsx
View File

@@ -735,142 +735,6 @@ export function LearningFacilityNew() {
</div>
</section>
{/* Cultural Theme Images Section */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="text-center mb-16">
<div className="branded-tag-system mb-6 justify-center">
<div className="dot"></div>
<span className="text">Cultural Experience</span>
</div>
<h2 className="text-h2 mb-6">
Journey Through Cultural Heritage
</h2>
<p className="text-body-lg text-muted max-w-3xl mx-auto">
Experience the rich cultural tapestry woven throughout our leadership center. Each space tells a story of ancient wisdom, spiritual foundations, and timeless traditions that inspire modern leaders.
</p>
</div>
{/* Cultural Images Carousel */}
<div className="relative">
{/* Navigation Controls */}
<div className="flex gap-2 justify-center mb-8">
<button
onClick={() => {
const container = document.getElementById('cultural-carousel');
if (container) {
container.scrollBy({ left: -400, behavior: 'smooth' });
}
}}
className="flex items-center justify-center w-12 h-12 bg-white border-2 border-gray-200 rounded-lg hover:border-primary hover:bg-primary hover:text-white transition-all duration-300 group"
aria-label="Previous cultural images"
>
<ChevronLeft className="w-6 h-6" />
</button>
<button
onClick={() => {
const container = document.getElementById('cultural-carousel');
if (container) {
container.scrollBy({ left: 400, behavior: 'smooth' });
}
}}
className="flex items-center justify-center w-12 h-12 bg-white border-2 border-gray-200 rounded-lg hover:border-primary hover:bg-primary hover:text-white transition-all duration-300 group"
aria-label="Next cultural images"
>
<ChevronRight className="w-6 h-6" />
</button>
</div>
{/* Horizontal Scrolling Images */}
<div
id="cultural-carousel"
className="flex overflow-x-auto scrollbar-hide gap-6 pb-4"
style={{ scrollSnapType: 'x mandatory' }}
>
{[
{
title: "Meditation Spaces",
description: "Dedicated areas within our leadership center designed for mindful reflection and inner contemplation, where leaders find clarity and purpose.",
image: "https://images.unsplash.com/photo-1643793427422-d28ccb5f1f69?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhbmNpZW50JTIwaW5kaWFuJTIwd2lzZG9tJTIwbWVkaXRhdGlvbnxlbnwxfHx8fDE3NTY4OTU1NTZ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
category: "Spiritual Spaces"
},
{
title: "Cultural Architecture",
description: "Architectural elements throughout our center that pay homage to classical Indian design, creating inspiring spaces for leadership development.",
image: "https://images.unsplash.com/photo-1704788564069-d54cab4169aa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmFkaXRpb25hbCUyMGluZGlhbiUyMGFydCUyMHBhdHRlcm5zfGVufDF8fHx8MTc1Njg5NTU5NXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
category: "Architecture"
},
{
title: "Inspirational Sculptures",
description: "Carefully curated sculptures and artistic pieces that embody leadership virtues and spiritual wisdom, strategically placed throughout our facility.",
image: "https://images.unsplash.com/photo-1566890910598-c5768889e83e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxoaW5kdSUyMGRlaXRpZXMlMjBzY3VscHR1cmUlMjBhcnR8ZW58MXx8fHwxNzU2ODk1NTcxfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
category: "Art & Culture"
},
{
title: "Wisdom Library",
description: "A collection of ancient texts and modern leadership resources that bridge timeless wisdom with contemporary leadership challenges.",
image: "https://images.unsplash.com/photo-1714250175994-008837c7e291?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhbmNpZW50JTIwaW5kaWFuJTIwbWFudXNjcmlwdHMlMjB3aXNkb218ZW58MXx8fHwxNzU2ODk1NTgxfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
category: "Learning Resources"
},
{
title: "Cultural Motifs",
description: "Traditional patterns and artistic motifs integrated into our center's design, creating an immersive cultural experience for visiting leaders.",
image: "https://images.unsplash.com/photo-1703145219083-6037d97decb5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmFkaXRpb25hbCUyMGluZGlhbiUyMGFydCUyMHBhdHRlcm5zfGVufDF8fHx8MTc1Njg5NTU5NXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
category: "Design Elements"
},
{
title: "Sacred Symbols",
description: "Meaningful symbols and emblems placed throughout our leadership center that inspire reflection on values, purpose, and authentic leadership.",
image: "https://images.unsplash.com/photo-1753204392401-a424cb95d3e2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpbmRpYW4lMjBzcGlyaXR1YWwlMjBzeW1ib2xzJTIwb218ZW58MXx8fHwxNzU2ODk1NjA5fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
category: "Symbolic Elements"
}
].map((item, index) => (
<motion.div
key={index}
initial={{ opacity: 0, x: 50 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6, delay: index * 0.1 }}
viewport={{ once: true }}
className="group flex-shrink-0 w-80"
style={{ scrollSnapAlign: 'start' }}
>
<div className="relative overflow-hidden rounded-2xl h-96 cursor-pointer">
<ImageWithFallback
src={item.image}
alt={item.title}
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
/>
{/* Category Badge */}
<div className="absolute top-4 left-4">
<Badge
variant="secondary"
className="bg-white/90 text-primary border border-gray-200"
>
{item.category}
</Badge>
</div>
{/* Hover Text Overlay */}
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 flex flex-col justify-end p-6">
<h3 className="text-white text-h4 mb-3 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300 delay-100" style={{ color: '#FFFFFF !important' }}>
{item.title}
</h3>
<p className="text-white text-body leading-relaxed transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300 delay-200" style={{ color: '#FFFFFF !important' }}>
{item.description}
</p>
</div>
</div>
</motion.div>
))}
</div>
</div>
</div>
</div>
</section>
{/* Deluxe Living & Recreation Section */}
<section className="py-20" style={{ backgroundColor: 'var(--color-bg-white)' }}>

121
src/components/VirtualSpaceSection.tsx
View File

@@ -1,9 +1,9 @@
import React, { useState } from "react";
import { motion } from "motion/react";
import {
Building,
Users,
Presentation,
import {
Building,
Users,
Presentation,
Coffee,
Play,
Calendar,
@@ -22,7 +22,7 @@ import { Label } from "./ui/label";
import { Textarea } from "./ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import { navigateTo } from "./Router";
import kautilya from "../assets/Kautilya.png";
// Calendar helper functions
const getDaysInMonth = (date: Date) => {
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
@@ -41,7 +41,7 @@ const isDateAvailable = (date: Date) => {
today.setHours(0, 0, 0, 0);
const selectedDate = new Date(date);
selectedDate.setHours(0, 0, 0, 0);
// Available if it's today or in the future, and not a Sunday
return selectedDate >= today && selectedDate.getDay() !== 0;
};
@@ -117,7 +117,7 @@ function FacilityCard({ facility, index }: FacilityCardProps) {
transition={{ duration: 0.7, delay: index * 0.15 }}
viewport={{ once: true, margin: "-50px" }}
>
{/* Background Image - Full Height */}
<div className="absolute inset-0">
<ImageWithFallback
@@ -133,10 +133,10 @@ function FacilityCard({ facility, index }: FacilityCardProps) {
<div className="relative z-10 h-full flex flex-col justify-end p-8 max-lg:p-6">
{/* Icon */}
<div className="flex justify-center mb-4">
<div
<div
className="w-16 h-16 rounded-2xl flex items-center justify-center bg-white/20 backdrop-blur-sm border border-white/30"
>
<IconComponent
<IconComponent
className="w-8 h-8 text-white"
/>
</div>
@@ -164,14 +164,14 @@ function FacilityCard({ facility, index }: FacilityCardProps) {
}
// Modal Component for Virtual Tour and Booking
function BookingModal({
facility,
isOpen,
onClose
}: {
facility: typeof facilities[0] | null;
isOpen: boolean;
onClose: () => void;
function BookingModal({
facility,
isOpen,
onClose
}: {
facility: typeof facilities[0] | null;
isOpen: boolean;
onClose: () => void;
}) {
const [bookingForm, setBookingForm] = useState<BookingFormData>({
companyName: '',
@@ -257,7 +257,7 @@ function BookingModal({
for (let day = 1; day <= daysInMonth; day++) {
const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
const isAvailable = isDateAvailable(date);
const isSelected = selectedDate &&
const isSelected = selectedDate &&
date.getFullYear() === selectedDate.getFullYear() &&
date.getMonth() === selectedDate.getMonth() &&
date.getDate() === selectedDate.getDate();
@@ -325,7 +325,7 @@ function BookingModal({
</div>
{/* Calendar Footer - Compact */}
<div className="pt-2 border-t border-gray-200">
{/* <div className="pt-2 border-t border-gray-200">
<div className="flex items-center justify-center gap-3 text-xs text-gray-500">
<div className="flex items-center gap-1">
<div className="w-2 h-2 rounded-full bg-primary"></div>
@@ -336,7 +336,7 @@ function BookingModal({
<span>Available</span>
</div>
</div>
</div>
</div> */}
</div>
);
};
@@ -344,21 +344,21 @@ function BookingModal({
if (!isOpen || !facility) return null;
return (
<div
<div
className="fixed inset-0 bg-black/60 flex items-center justify-center p-2 lg:p-4 z-popup-modal virtual-space-modal-overlay"
onClick={onClose}
>
<div
<div
className="bg-white rounded-xl lg:rounded-2xl max-w-5xl w-full h-[85vh] overflow-hidden virtual-space-modal-container flex flex-col"
onClick={(e) => e.stopPropagation()}
>
{/* Modal Header - Compact */}
<div
<div
className="flex items-center justify-between p-4 lg:p-6 border-b flex-shrink-0"
style={{ backgroundColor: 'rgba(4, 4, 91, 0.02)' }}
>
<div className="flex items-center gap-3 lg:gap-4">
<div
<div
className="w-10 h-10 lg:w-12 lg:h-12 rounded-lg flex items-center justify-center"
style={{ backgroundColor: 'var(--color-primary)' }}
>
@@ -394,7 +394,7 @@ function BookingModal({
<Play className="w-4 h-4 text-primary" />
<h3 className="text-small lg:text-body font-semibold">Virtual Tour</h3>
</div>
{/* Virtual Tour Container - Developer-Ready for 360 Viewer or Video */}
<div className="aspect-video rounded-lg overflow-hidden bg-gray-100 shadow-md relative">
{/*
@@ -409,7 +409,7 @@ function BookingModal({
Current implementation: Fallback video iframe
Replace the entire div below with your 360 viewer component
*/}
<div
<div
id={`virtual-tour-container-${facility.id}`}
className="w-full h-full relative"
data-facility-id={facility.id}
@@ -417,35 +417,22 @@ function BookingModal({
data-tour-type="360-viewer" // Change to "video" for video fallback
>
{/* Fallback: Video iframe - Replace this entire section with 360 viewer */}
<iframe
{/* <iframe
src={facility.videoUrl}
title={`${facility.name} Virtual Tour`}
className="w-full h-full"
allowFullScreen
frameBorder="0"
/> */}
<ImageWithFallback
src={kautilya}
alt={`${facility.name} Virtual Tour`}
className="w-full h-full object-cover"
/>
{/* 360 Viewer Placeholder - Remove iframe above and uncomment/implement below */}
{/*
Example A-Frame 360 implementation:
<a-scene
embedded
style={{width: '100%', height: '100%'}}
vr-mode-ui="enabled: false"
>
<a-sky src={facility.panoramaUrl || facility.image} />
<a-camera wasd-controls-enabled="false" look-controls="enabled: true" />
</a-scene>
*/}
{/* Alternative: Custom 360 Photo Viewer Container */}
{/*
<div className="w-full h-full" id={`pannellum-${facility.id}`}>
// Pannellum or other 360 viewer initialization
</div>
*/}
</div>
{/* Interactive Controls Overlay (optional) */}
<div className="absolute bottom-2 left-2 right-2 flex justify-between items-center pointer-events-none">
<div className="bg-black/20 backdrop-blur-sm rounded px-2 py-1">
@@ -457,7 +444,7 @@ function BookingModal({
</div>
</div>
</div>
{/* Compact Info Section */}
<div className="flex-1 min-h-0 space-y-2 lg:space-y-3">
{/* About - Compact */}
@@ -467,14 +454,14 @@ function BookingModal({
{facility.description}
</p>
</div>
{/* Features - Compact */}
<div className="bg-gray-50 rounded-lg p-2 lg:p-3">
<h4 className="text-small font-semibold mb-2">Key Features</h4>
<div className="space-y-1">
{facility.features.slice(0, 3).map((feature, index) => (
<div key={index} className="flex items-center gap-2">
<div
<div
className="w-1.5 h-1.5 rounded-full flex-shrink-0"
style={{ backgroundColor: 'var(--color-primary)' }}
/>
@@ -526,7 +513,7 @@ function BookingModal({
<h4 className="text-small font-medium text-primary">Company Information</h4>
<div className="w-10 h-0.5 bg-primary"></div>
</div>
<div className="space-y-2">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
<div>
@@ -556,7 +543,7 @@ function BookingModal({
/>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
<div>
<Label htmlFor="email" className="text-xs font-normal text-black mb-1 block">
@@ -586,13 +573,13 @@ function BookingModal({
/>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
<div>
<Label htmlFor="role" className="text-xs font-normal text-black mb-1 block">
Your Role *
</Label>
<Select value={bookingForm.role} onValueChange={(value:string) => updateFormField('role', value)}>
<Select value={bookingForm.role} onValueChange={(value: string) => updateFormField('role', value)}>
<SelectTrigger className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200">
<SelectValue placeholder="Role" className="text-gray-400 opacity-50" />
</SelectTrigger>
@@ -610,7 +597,7 @@ function BookingModal({
<Label htmlFor="teamSize" className="text-xs font-normal text-black mb-1 block">
Expected Team Size *
</Label>
<Select value={bookingForm.teamSize} onValueChange={(value:string) => updateFormField('teamSize', value)}>
<Select value={bookingForm.teamSize} onValueChange={(value: string) => updateFormField('teamSize', value)}>
<SelectTrigger className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200">
<SelectValue placeholder="Size" className="text-gray-400 opacity-50" />
</SelectTrigger>
@@ -633,7 +620,7 @@ function BookingModal({
<h4 className="text-small font-medium text-primary">Select Your Date</h4>
<div className="w-10 h-0.5 bg-primary"></div>
</div>
<div className="space-y-3">
{/* Selected Facility Info */}
{/* <div className="bg-blue-50 rounded p-2 border border-blue-100">
@@ -662,8 +649,8 @@ function BookingModal({
<div className="flex items-center gap-2">
<Calendar className="w-3 h-3 text-green-600" />
<span className="text-xs font-medium text-green-800">
Selected: {selectedDate.toLocaleDateString('en-US', {
month: 'short',
Selected: {selectedDate.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
})}
@@ -672,7 +659,7 @@ function BookingModal({
</div>
)}
</div>
{/* Additional Requirements */}
<div>
<Label htmlFor="additionalRequirements" className="text-xs font-normal text-black mb-1 block">
@@ -756,21 +743,21 @@ export function VirtualSpaceSection() {
<div className="absolute top-0 left-0 right-0 z-20 py-16 max-md:py-12 section-margin-x ">
<div className="max-w-4xl mx-auto text-center exp-our-head-desktop-sec">
{/* Branded Tag */}
<motion.div
<motion.div
initial={{ opacity: 0, y: -20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
viewport={{ once: true }}
>
<BrandedTag
text="Virtual Learning Environment"
<BrandedTag
text="Virtual Learning Environment"
className="justify-center"
variant="white"
/>
</motion.div>
{/* Main Heading */}
<motion.h2
<motion.h2
className="text-5xl font-bold leading-tight mb-4 max-lg:text-4xl max-md:text-3xl text-white"
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -781,7 +768,7 @@ export function VirtualSpaceSection() {
</motion.h2>
{/* Subheading */}
<motion.p
<motion.p
className="text-lg leading-relaxed max-w-2xl mx-auto max-lg:text-base mb-6 text-white/90"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -800,7 +787,7 @@ export function VirtualSpaceSection() {
viewport={{ once: true }}
>
<div className="hero-slide-button">
<PrimaryCTAButton
<PrimaryCTAButton
text="Book Now"
onClick={handleBookNow}
ariaLabel="Book our virtual learning space and facilities"
@@ -815,7 +802,7 @@ export function VirtualSpaceSection() {
</div>
{/* Booking Modal */}
<BookingModal
<BookingModal
facility={selectedFacility}
isOpen={isModalOpen}
onClose={handleCloseModal}

178
src/components/Webinars.tsx
View File

@@ -33,16 +33,16 @@ export function Webinars() {
const [selectedCategory, setSelectedCategory] = useState('All Categories');
const [selectedFormat, setSelectedFormat] = useState('All Formats');
const [selectedLevel, setSelectedLevel] = useState('All Levels');
// Updated state for multi-select status pills
const [selectedStatuses, setSelectedStatuses] = useState<string[]>([]);
// Updated state for duration slider (min, max in minutes)
const [durationRange, setDurationRange] = useState([0, 120]);
// Attendee range slider state
const [attendeeRange, setAttendeeRange] = useState([0, 5000]);
const [sortBy, setSortBy] = useState('Most Popular');
const [viewType, setViewType] = useState<'grid' | 'list'>('grid');
const [currentPage, setCurrentPage] = useState(1);
@@ -56,7 +56,7 @@ export function Webinars() {
const categories = ['All Categories', ...Array.from(new Set(webinars.map(webinar => webinar.category)))];
const formats = ['All Formats', ...Array.from(new Set(webinars.map(webinar => webinar.format)))];
const levels = ['All Levels', ...Array.from(new Set(webinars.map(webinar => webinar.level)))];
// Status options for pills - updated to match shared data structure
const statusOptions = [
{ value: 'upcoming', label: '📅 Upcoming', color: 'bg-blue-100 text-blue-800 border-blue-200' },
@@ -64,7 +64,7 @@ export function Webinars() {
{ value: 'recorded', label: '▶️ Recorded', color: 'bg-green-100 text-green-800 border-green-200' },
{ value: 'featured', label: '⭐ Featured', color: 'bg-yellow-100 text-yellow-800 border-yellow-200' }
];
const sortOptions = [
{ value: 'Most Popular', label: 'Most Popular' },
{ value: 'newest', label: 'Newest First' },
@@ -88,31 +88,32 @@ export function Webinars() {
// Filter and sort webinars
const filteredWebinars = webinars.filter(webinar => {
const matchesSearch = webinar.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
webinar.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
webinar.presenter.toLowerCase().includes(searchTerm.toLowerCase()) ||
webinar.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
webinar.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
webinar.presenter.toLowerCase().includes(searchTerm.toLowerCase()) ||
webinar.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
const matchesCategory = selectedCategory === 'All Categories' || webinar.category === selectedCategory;
const matchesFormat = selectedFormat === 'All Formats' || webinar.format === selectedFormat;
const matchesLevel = selectedLevel === 'All Levels' || webinar.level === selectedLevel;
// Updated status filter for multi-select with shared data structure
const matchesStatus = selectedStatuses.length === 0 ||
selectedStatuses.some(status => {
if (status === 'featured') return webinar.featured;
return webinar.status === status;
});
// Duration filter using range
const matchesStatus = selectedStatuses.length === 0 ||
selectedStatuses.some(status => {
if (status === 'featured') return webinar.featured;
return webinar.status === status;
});
const durationMinutes = parseDuration(webinar.duration);
const matchesDuration = durationMinutes >= durationRange[0] && durationMinutes <= durationRange[1];
// Attendee filter using range
const attendeeCount = parseAttendees(webinar.attendees);
const matchesAttendees = attendeeCount >= attendeeRange[0] && attendeeCount <= attendeeRange[1];
return matchesSearch && matchesCategory && matchesFormat && matchesLevel && matchesStatus && matchesDuration && matchesAttendees;
}).sort((a, b) => {
switch (sortBy) {
case 'Most Popular':
// Add logic for "Most Popular" - you might want to use views, attendees, or featured status
return (b.featured ? 1 : 0) - (a.featured ? 1 : 0) ||
parseAttendees(b.attendees) - parseAttendees(a.attendees);
case 'newest':
return new Date(b.date).getTime() - new Date(a.date).getTime();
case 'oldest':
@@ -140,6 +141,11 @@ export function Webinars() {
const totalPages = Math.ceil(filteredWebinars.length / webinarsPerPage);
const currentWebinars = filteredWebinars.slice((currentPage - 1) * webinarsPerPage, currentPage * webinarsPerPage);
console.log('Filtered webinars:', filteredWebinars.length);
console.log('Total pages:', totalPages);
console.log('Current page:', currentPage);
console.log('Current webinars count:', currentWebinars.length);
const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleDateString('en-US', {
year: 'numeric',
@@ -159,23 +165,28 @@ export function Webinars() {
setSortBy('Most Popular');
};
const hasActiveFilters = searchTerm ||
selectedCategory !== 'All Categories' ||
selectedFormat !== 'All Formats' ||
selectedLevel !== 'All Levels' ||
selectedStatuses.length > 0 ||
durationRange[0] !== 0 || durationRange[1] !== 120 ||
attendeeRange[0] !== 0 || attendeeRange[1] !== 5000;
const hasActiveFilters = searchTerm ||
selectedCategory !== 'All Categories' ||
selectedFormat !== 'All Formats' ||
selectedLevel !== 'All Levels' ||
selectedStatuses.length > 0 ||
durationRange[0] !== 0 || durationRange[1] !== 120 ||
attendeeRange[0] !== 0 || attendeeRange[1] !== 5000;
// Status pill toggle function
const toggleStatus = (status: string) => {
setSelectedStatuses(prev =>
prev.includes(status)
setSelectedStatuses(prev =>
prev.includes(status)
? prev.filter(s => s !== status)
: [...prev, status]
);
};
// Reset to page 1 when filters change
useEffect(() => {
setCurrentPage(1);
}, [searchTerm, selectedCategory, selectedFormat, selectedLevel, selectedStatuses, durationRange, attendeeRange, sortBy]);
// Updated WebinarCard component that navigates to consistent route
const WebinarCard = ({ webinar }: { webinar: WebinarData }) => {
const handleCardClick = () => {
@@ -211,7 +222,7 @@ export function Webinars() {
if (viewType === 'list') {
return (
<Card
<Card
className="mb-4 cursor-pointer transition-all duration-300 hover:shadow-lg hover:transform hover:-translate-y-1"
onClick={handleCardClick}
>
@@ -225,7 +236,7 @@ export function Webinars() {
className="w-full h-full object-cover"
/>
</div>
{/* Content */}
<div className="flex-1">
<div className="flex justify-between items-start mb-2">
@@ -237,10 +248,10 @@ export function Webinars() {
</div>
<span className="text-small text-gray-500">{formatDate(webinar.date)}</span>
</div>
<h3 className="text-h4 mb-2 line-clamp-2">{webinar.title}</h3>
<p className="text-body text-gray-600 mb-3 line-clamp-2">{webinar.description}</p>
<div className="flex items-center justify-between">
<div className="flex items-center gap-4 text-small text-gray-500">
<span className="flex items-center gap-1">
@@ -269,7 +280,7 @@ export function Webinars() {
}
return (
<Card
<Card
className="cursor-pointer transition-all duration-300 hover:shadow-lg hover:transform hover:-translate-y-2 group overflow-hidden"
onClick={handleCardClick}
>
@@ -280,12 +291,12 @@ export function Webinars() {
alt={webinar.title}
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
/>
{/* Status Badge */}
<div className="absolute top-4 left-4">
{getStatusBadge()}
</div>
{/* Featured Badge */}
{webinar.featured && (
<div className="absolute top-4 right-4">
@@ -295,7 +306,7 @@ export function Webinars() {
</Badge>
</div>
)}
{/* Play Icon Overlay */}
<div className="absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<div className="bg-white bg-opacity-90 rounded-full p-3">
@@ -303,7 +314,7 @@ export function Webinars() {
</div>
</div>
</div>
{/* Content */}
<CardContent className="p-6">
<div className="flex items-center justify-between mb-2">
@@ -312,21 +323,21 @@ export function Webinars() {
</Badge>
<span className="text-small text-gray-500">{formatDate(webinar.date)}</span>
</div>
<h3 className="text-h4 mb-3 line-clamp-2 group-hover:text-primary transition-colors">
{webinar.title}
</h3>
<p className="text-body text-gray-600 mb-4 line-clamp-2">
{webinar.description}
</p>
<div className="space-y-3">
<div className="flex items-center gap-2 text-small text-gray-500">
<Users className="w-4 h-4" />
<span>{webinar.presenter}</span>
</div>
<div className="flex items-center justify-between text-small text-gray-500">
<div className="flex items-center gap-1">
<Clock className="w-4 h-4" />
@@ -338,7 +349,7 @@ export function Webinars() {
</div>
</div>
</div>
<div className="flex items-center justify-between mt-4 pt-4 border-t">
<div className="flex items-center gap-1">
{webinar.tags.slice(0, 2).map((tag, index) => (
@@ -378,9 +389,9 @@ export function Webinars() {
Leadership Webcasts &<br />
Expert Insights
</h1>
<p className="text-body-lg-white max-w-3xl mx-auto">
Explore our comprehensive collection of expert insights, research, and practical guidance
Explore our comprehensive collection of expert insights, research, and practical guidance
to elevate your leadership journey and drive organizational excellence.
</p>
</div>
@@ -435,11 +446,10 @@ export function Webinars() {
<div className="flex items-center border border-gray-300 rounded-lg overflow-hidden">
<button
onClick={() => setViewType('grid')}
className={`p-2 transition-colors ${
viewType === 'grid'
? 'text-white'
className={`p-2 transition-colors ${viewType === 'grid'
? 'text-white'
: 'bg-white text-gray-600 hover:bg-gray-50'
}`}
}`}
style={{
backgroundColor: viewType === 'grid' ? 'var(--color-primary)' : undefined
}}
@@ -449,11 +459,10 @@ export function Webinars() {
</button>
<button
onClick={() => setViewType('list')}
className={`p-2 transition-colors ${
viewType === 'list'
? 'text-white'
className={`p-2 transition-colors ${viewType === 'list'
? 'text-white'
: 'bg-white text-gray-600 hover:bg-gray-50'
}`}
}`}
style={{
backgroundColor: viewType === 'list' ? 'var(--color-primary)' : undefined
}}
@@ -585,8 +594,8 @@ export function Webinars() {
onClick={() => toggleStatus(status.value)}
className={`
px-3 py-1.5 rounded-full text-xs font-medium border transition-all duration-200
${selectedStatuses.includes(status.value)
? `${status.color} ring-2 ring-blue-200 shadow-sm`
${selectedStatuses.includes(status.value)
? `${status.color} ring-2 ring-blue-200 shadow-sm`
: 'bg-gray-50 text-gray-600 border-gray-200 hover:bg-gray-100 hover:border-gray-300'
}
`}
@@ -621,8 +630,8 @@ export function Webinars() {
<span>{durationRange[1]} min</span>
</div>
<div className="mt-1 text-center text-xs text-gray-400">
{durationRange[0] === 0 && durationRange[1] === 120
? 'All durations'
{durationRange[0] === 0 && durationRange[1] === 120
? 'All durations'
: `${durationRange[0]}-${durationRange[1]} minutes`
}
</div>
@@ -648,8 +657,8 @@ export function Webinars() {
<span>{attendeeRange[1].toLocaleString()}+</span>
</div>
<div className="mt-1 text-center text-xs text-gray-400">
{attendeeRange[0] === 0 && attendeeRange[1] === 5000
? 'Any size'
{attendeeRange[0] === 0 && attendeeRange[1] === 5000
? 'Any size'
: `${attendeeRange[0].toLocaleString()}-${attendeeRange[1].toLocaleString()}+`
}
</div>
@@ -714,38 +723,67 @@ export function Webinars() {
<Button
variant="outline"
size="sm"
onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
onClick={() => {
setCurrentPage(prev => Math.max(1, prev - 1));
containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}}
disabled={currentPage === 1}
className="flex items-center gap-1 border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
>
<ChevronLeft className="w-4 h-4 mr-1" />
<ChevronLeft className="w-4 h-4" />
Previous
</Button>
<div className="flex items-center gap-1">
{Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
const page = Math.max(1, Math.min(totalPages - 4, currentPage - 2)) + i;
{Array.from({ length: totalPages }, (_, i) => {
const page = i + 1;
// Show limited pages for better UX
if (totalPages > 7) {
const showPage =
page === 1 ||
page === totalPages ||
(page >= currentPage - 1 && page <= currentPage + 1);
if (!showPage) {
if (page === currentPage - 2 || page === currentPage + 2) {
return <span key={page} className="px-2">...</span>;
}
return null;
}
}
return (
<Button
key={page}
variant={currentPage === page ? "default" : "outline"}
size="sm"
onClick={() => setCurrentPage(page)}
className="w-10"
onClick={() => {
setCurrentPage(page);
containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}}
className={`min-w-10 ${currentPage === page
? 'bg-blue-600 text-white hover:bg-blue-700'
: 'border-gray-300 text-gray-700 hover:bg-gray-50'
}`}
>
{page}
</Button>
);
})}
</div>
<Button
variant="outline"
size="sm"
onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
onClick={() => {
setCurrentPage(prev => Math.min(totalPages, prev + 1));
containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}}
disabled={currentPage === totalPages}
className="flex items-center gap-1 border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
>
Next
<ChevronRight className="w-4 h-4 ml-1" />
<ChevronRight className="w-4 h-4" />
</Button>
</div>
)}

533
src/components/services/CultureCompetence.tsx
View File

@@ -198,73 +198,71 @@ export function CultureCompetence() {
{/* 1. What Is This Service */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
<div className="section-margin-x">
<div className="w-full section-margin-x">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<BrandedTag text="What Is This Service?" />
<h2 className="text-h2 mb-8 text-[#26231A]">Culture & Competence Transformation</h2>
<div className="max-w-4xl mx-auto space-y-6">
<p className="text-body-lg text-[#6F6F6F] leading-relaxed">
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.
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<BrandedTag text="What Is This Service?" />
<h2 className="text-h2 mb-8 text-[#26231A]">Culture & Competence Transformation</h2>
<div className="max-w-4xl mx-auto space-y-6">
<p className="text-body-lg text-[#6F6F6F] leading-relaxed">
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.
</p>
<div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
<p className="text-body-lg text-[#26231A] leading-relaxed">
<span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> 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.
</p>
<div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
<p className="text-body-lg text-[#26231A] leading-relaxed">
<span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> 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.
</p>
</div>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<Heart className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
Culture Transformation
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Align organizational culture with business strategy and values for sustainable success
</p>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<Heart className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
Culture Transformation
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Align organizational culture with business strategy and values for sustainable success
</p>
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<Target className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
Competency Development
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Build strategic capabilities and organizational competencies for competitive advantage
</p>
</div>
</div>
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<Target className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
Competency Development
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Build strategic capabilities and organizational competencies for competitive advantage
</p>
</div>
</div>
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<TrendingUp className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
73% Performance Impact
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Proven results with 73% improvement in engagement and business performance metrics
</p>
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<TrendingUp className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
73% Performance Impact
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Proven results with 73% improvement in engagement and business performance metrics
</p>
</div>
</div>
</div>
@@ -370,7 +368,7 @@ export function CultureCompetence() {
{/* 4. Our Approach */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
<div className="section-margin-x">
<div className="w-full section-margin-x">
<div className="w-full">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<BrandedTag text="Our Approach" />
@@ -380,116 +378,371 @@ export function CultureCompetence() {
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
{/* Left Column - Core Frameworks */}
<div>
<h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
<div className="space-y-8">
<div className="flex items-start gap-4">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
<Eye className="w-5 h-5 text-white" />
</div>
<div className="flex-1">
<h4 className="text-h4 mb-3 text-[#26231A]">Culture Assessment & Diagnosis</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Comprehensive evaluation of current culture, values alignment, and engagement drivers
{/* Flowchart Container with Connecting Lines */}
<div className="relative mb-16 flex flex-col items-center">
{/* Desktop: Horizontal Flowchart */}
<div className="hidden lg:block w-full max-w-5xl">
<div className="relative">
{/* Row 1: Frameworks, Pedagogy, Delivery */}
<div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
{/* Frameworks */}
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Compass className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Culture Frameworks</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Diagnostic models and competency frameworks for transformation
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Culture Assessment
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Competency Models
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Values Alignment
</div>
</div>
</div>
{/* Arrow 1→2 */}
<div className="absolute top-1/2 left-[calc(33.33%-2rem)] -translate-y-1/2 z-0 flex items-center">
<div className="w-16 h-0.5 bg-[#F8C301]"></div>
<ArrowRight className="w-6 h-6 text-[#F8C301] -ml-1" />
</div>
{/* Pedagogy */}
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<Brain className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Change management and organizational learning approaches
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Experiential Learning
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Change Management
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Organizational Learning
</div>
</div>
</div>
{/* Arrow 2→3 */}
<div className="absolute top-1/2 left-[calc(66.66%-2rem)] -translate-y-1/2 z-0 flex items-center">
<div className="w-16 h-0.5 bg-[#04045B]"></div>
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
</div>
{/* Delivery Modes */}
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Settings className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Multiple formats for culture and competency transformation
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Culture Workshops
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Leadership Alignment
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Development Programs
</div>
</div>
</div>
</div>
<div className="flex items-start gap-4">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
<Target className="w-5 h-5 text-white" />
</div>
<div className="flex-1">
<h4 className="text-h4 mb-3 text-[#26231A]">Strategic Competency Modeling</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Strategic competency frameworks aligned with business objectives and future needs
</p>
{/* Vertical Connector - Center Flow Down */}
<div className="flex justify-center mb-6">
<div className="flex flex-col items-center">
<div className="w-0.5 h-12 bg-[#F8C301]"></div>
<ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
</div>
</div>
<div className="flex items-start gap-4">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
<Settings className="w-5 h-5 text-white" />
</div>
<div className="flex-1">
<h4 className="text-h4 mb-3 text-[#26231A]">Change Management Integration</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Structured change approach for sustainable culture and competency transformation
{/* Row 2: Assessment, Coaching */}
<div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
{/* Assessment Integration */}
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<BarChart3 className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Comprehensive measurement to track culture transformation
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Engagement Surveys
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Culture Analytics
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Progress Tracking
</div>
</div>
</div>
{/* Arrow 4→5 */}
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 flex items-center">
<div className="w-16 h-0.5 bg-[#04045B]"></div>
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
</div>
{/* Coaching Integration */}
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Heart className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Leadership support for culture change and capability building
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Executive Coaching
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Team Coaching
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Change Leadership
</div>
</div>
</div>
</div>
<div className="flex items-start gap-4">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
<BarChart3 className="w-5 h-5 text-white" />
{/* Final Vertical Connector - Center Flow Down to Outcome */}
<div className="flex justify-center mb-6">
<div className="flex flex-col items-center">
<div className="w-0.5 h-12 bg-[#04045B]"></div>
<ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
</div>
<div className="flex-1">
<h4 className="text-h4 mb-3 text-[#26231A]">Measurement & Analytics</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Robust measurement framework to track progress and demonstrate impact
</div>
{/* Row 3: Expected Outcome - Centered */}
<div className="flex justify-center w-full">
<div className="bg-[#04045B] text-white rounded-xl p-8 w-full max-w-2xl border-4 border-[#F8C301] shadow-xl">
<div className="flex items-center gap-3 mb-4">
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
<h3 className="text-h4 text-white">Expected Outcome</h3>
</div>
<p className="text-body text-white mb-4">
A thriving organizational culture aligned with strategy, powered by competencies that drive performance and engagement.
</p>
<div className="flex items-center gap-2 text-[#F8C301]">
<CheckCircle className="w-6 h-6" />
<span className="text-body text-white">Sustainable Culture Transformation</span>
</div>
</div>
</div>
</div>
</div>
{/* Right Column - Delivery Modes */}
<div className="bg-white border border-gray-200 rounded-xl p-8">
<h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Support</h4>
<div className="space-y-6">
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
<div className="flex-1">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Culture Workshops</h5>
<p className="text-small text-[#6F6F6F] leading-relaxed">
Interactive sessions to define and embed desired organizational culture
</p>
{/* Tablet & Mobile: Vertical Flowchart */}
<div className="lg:hidden space-y-8">
{/* Frameworks */}
<div className="relative">
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Compass className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Culture Frameworks</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Diagnostic models and competency frameworks for transformation
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Culture Assessment
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Competency Models
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Values Alignment
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
<div className="flex-1">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Competency Development</h5>
<p className="text-small text-[#6F6F6F] leading-relaxed">
Targeted programs to build critical organizational capabilities and skills
</p>
{/* Pedagogy */}
<div className="relative">
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<Brain className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Change management and organizational learning approaches
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Experiential Learning
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Change Management
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Organizational Learning
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
<div className="flex-1">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Leadership Alignment</h5>
<p className="text-small text-[#6F6F6F] leading-relaxed">
Executive sessions to ensure leadership commitment and cultural modeling
</p>
{/* Delivery Modes */}
<div className="relative">
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Settings className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Multiple formats for culture and competency transformation
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Culture Workshops
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Leadership Alignment
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Development Programs
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
<div className="flex-1">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Continuous Monitoring</h5>
<p className="text-small text-[#6F6F6F] leading-relaxed">
Ongoing assessment and adjustment to ensure sustainable transformation
</p>
{/* Assessment Integration */}
<div className="relative">
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<BarChart3 className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Comprehensive measurement to track culture transformation
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Engagement Surveys
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Culture Analytics
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Progress Tracking
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
</div>
</div>
{/* Coaching Integration */}
<div className="relative">
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Heart className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Leadership support for culture change and capability building
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Executive Coaching
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Team Coaching
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Change Leadership
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
</div>
</div>
{/* Expected Outcome */}
<div className="bg-[#04045B] text-white rounded-xl p-8 border-4 border-[#F8C301] shadow-xl">
<div className="flex items-center gap-3 mb-4">
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
<h3 className="text-h4 text-white">Expected Outcome</h3>
</div>
<p className="text-body text-white mb-4">
A thriving organizational culture aligned with strategy, powered by competencies that drive performance and engagement.
</p>
<div className="flex items-center gap-2 text-[#F8C301]">
<CheckCircle className="w-6 h-6" />
<span className="text-body text-white">Sustainable Culture Transformation</span>
</div>
</div>
</div>
</div>
{/* Framework Effectiveness */}
<div className="bg-gray-50 rounded-xl p-8">
<div className="text-center mb-8">
<h3 className="text-h3 text-[#26231A] mb-4">Framework Effectiveness</h3>
<p className="text-body text-[#6F6F6F] max-w-2xl mx-auto">
Our systematic approach delivers measurable results across key culture and competency metrics.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="text-center bg-white rounded-lg p-6">
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
<Target className="w-7 h-7 text-white" />
</div>
<div className="text-h2 text-[#04045B] mb-2">87%</div>
<p className="text-body text-[#6F6F6F]">Culture Alignment Increase</p>
</div>
<div className="text-center bg-white rounded-lg p-6">
<div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
<Users className="w-7 h-7 text-white" />
</div>
<div className="text-h2 text-[#04045B] mb-2">91%</div>
<p className="text-body text-[#6F6F6F]">Employee Engagement Growth</p>
</div>
<div className="text-center bg-white rounded-lg p-6">
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
<TrendingUp className="w-7 h-7 text-white" />
</div>
<div className="text-h2 text-[#04045B] mb-2">82%</div>
<p className="text-body text-[#6F6F6F]">Competency Development Impact</p>
</div>
</div>
</div>

524
src/components/services/ExecutiveCoaching.tsx
View File

@@ -199,73 +199,71 @@ export function ExecutiveCoaching() {
{/* 1. What Is This Service */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
<div className="section-margin-x">
<div className="w-full section-margin-x">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<BrandedTag text="What Is This Service?" />
<h2 className="text-h2 mb-8 text-[#26231A]">Personalized Leadership Development</h2>
<div className="max-w-4xl mx-auto space-y-6">
<p className="text-body-lg text-[#6F6F6F] leading-relaxed">
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.
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<BrandedTag text="What Is This Service?" />
<h2 className="text-h2 mb-8 text-[#26231A]">Personalized Leadership Development</h2>
<div className="max-w-4xl mx-auto space-y-6">
<p className="text-body-lg text-[#6F6F6F] leading-relaxed">
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.
</p>
<div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
<p className="text-body-lg text-[#26231A] leading-relaxed">
<span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> 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.
</p>
<div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
<p className="text-body-lg text-[#26231A] leading-relaxed">
<span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> 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.
</p>
</div>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<MessageCircle className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
Executive Coaching
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Personalized coaching for senior leaders and executives to enhance performance and impact
</p>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<MessageCircle className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
Executive Coaching
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Personalized coaching for senior leaders and executives to enhance performance and impact
</p>
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<Network className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
Strategic Mentoring
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Long-term mentoring relationships for career development and leadership growth
</p>
</div>
</div>
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<Network className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
Strategic Mentoring
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Long-term mentoring relationships for career development and leadership growth
</p>
</div>
</div>
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<TrendingUp className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
87% Success Rate
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Proven track record with 87% of leaders reporting improved effectiveness and performance
</p>
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<TrendingUp className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
87% Success Rate
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Proven track record with 87% of leaders reporting improved effectiveness and performance
</p>
</div>
</div>
</div>
@@ -375,75 +373,381 @@ export function ExecutiveCoaching() {
{/* 4. Our Approach */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
<div className="section-margin-x">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<BrandedTag text="Our Approach" />
<h2 className="text-h2 mb-8">Comprehensive Coaching & Mentoring Framework</h2>
<p className="text-body-lg text-muted max-w-3xl mx-auto">
Our proven methodology combines individual coaching, strategic mentoring, and continuous development for sustainable leadership growth.
</p>
</div>
<div className="w-full">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<BrandedTag text="Our Approach" />
<h2 className="text-h2 mb-8 text-[#26231A]">Comprehensive Coaching & Mentoring Framework</h2>
<p className="text-body-lg text-[#6F6F6F] max-w-3xl mx-auto">
Our proven methodology combines individual coaching, strategic mentoring, and continuous development for sustainable leadership growth.
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<h3 className="text-h3 mb-6">Core Frameworks & Methodologies</h3>
<div className="space-y-6">
<div className="flex gap-4">
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center flex-shrink-0">
<Eye className="w-4 h-4 text-white" />
{/* Flowchart Container with Connecting Lines */}
<div className="relative mb-16 flex flex-col items-center">
{/* Desktop: Horizontal Flowchart */}
<div className="hidden lg:block w-full max-w-5xl">
<div className="relative">
{/* Row 1: Frameworks, Pedagogy, Delivery */}
<div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
{/* Frameworks */}
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Eye className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Frameworks</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Comprehensive profiling and leadership capability evaluation
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Leadership Profiling
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
360° Feedback
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Psychometric Tools
</div>
</div>
</div>
{/* Arrow 1→2 */}
<div className="absolute top-1/2 left-[calc(33.33%-2rem)] -translate-y-1/2 z-0 flex items-center">
<div className="w-16 h-0.5 bg-[#F8C301]"></div>
<ArrowRight className="w-6 h-6 text-[#F8C301] -ml-1" />
</div>
{/* Pedagogy */}
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<Brain className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Pedagogy</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Evidence-based coaching methodologies for transformation
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Solution-Focused
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Strengths-Based
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Goal-Oriented
</div>
</div>
</div>
{/* Arrow 2→3 */}
<div className="absolute top-1/2 left-[calc(66.66%-2rem)] -translate-y-1/2 z-0 flex items-center">
<div className="w-16 h-0.5 bg-[#04045B]"></div>
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
</div>
{/* Delivery Modes */}
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Settings className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Flexible coaching formats for executive schedules
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
One-on-One Coaching
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Virtual & In-Person
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Mentoring Circles
</div>
</div>
</div>
</div>
<div>
<h4 className="text-h4 mb-2">Leadership Assessment & Profiling</h4>
<p className="text-body text-muted">Comprehensive evaluation of leadership strengths, development areas, and growth potential</p>
{/* Vertical Connector - Center Flow Down */}
<div className="flex justify-center mb-6">
<div className="flex flex-col items-center">
<div className="w-0.5 h-12 bg-[#F8C301]"></div>
<ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
</div>
</div>
{/* Row 2: Assessment, Coaching */}
<div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
{/* Progress Tracking */}
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<BarChart3 className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Progress Tracking</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Continuous measurement of development and impact
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Goal Achievement
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Behavior Change
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Impact Metrics
</div>
</div>
</div>
{/* Arrow 4→5 */}
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 flex items-center">
<div className="w-16 h-0.5 bg-[#04045B]"></div>
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
</div>
{/* Mentoring Integration */}
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Network className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Mentoring Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Strategic guidance for long-term career development
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Senior Mentors
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Peer Networks
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Career Strategy
</div>
</div>
</div>
</div>
{/* Final Vertical Connector - Center Flow Down to Outcome */}
<div className="flex justify-center mb-6">
<div className="flex flex-col items-center">
<div className="w-0.5 h-12 bg-[#04045B]"></div>
<ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
</div>
</div>
{/* Row 3: Expected Outcome - Centered */}
<div className="flex justify-center w-full">
<div className="bg-[#04045B] text-white rounded-xl p-8 w-full max-w-2xl border-4 border-[#F8C301] shadow-xl">
<div className="flex items-center gap-3 mb-4">
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
<h3 className="text-h4 text-white">Expected Outcome</h3>
</div>
<p className="text-body text-white mb-4">
Accelerated leadership development with sustained behavior change, enhanced performance, and career advancement.
</p>
<div className="flex items-center gap-2 text-[#F8C301]">
<CheckCircle className="w-6 h-6" />
<span className="text-body text-white">Transformational Leadership Growth</span>
</div>
</div>
</div>
</div>
<div className="flex gap-4">
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center flex-shrink-0">
<User className="w-4 h-4 text-white" />
</div>
{/* Tablet & Mobile: Vertical Flowchart */}
<div className="lg:hidden space-y-8">
{/* Frameworks */}
<div className="relative">
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Eye className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Frameworks</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Comprehensive profiling and leadership capability evaluation
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Leadership Profiling
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
360° Feedback
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Psychometric Tools
</div>
</div>
</div>
<div>
<h4 className="text-h4 mb-2">Personalized Coaching Sessions</h4>
<p className="text-body text-muted">One-on-one coaching tailored to individual needs, goals, and development priorities</p>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
</div>
</div>
<div className="flex gap-4">
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center flex-shrink-0">
<Network className="w-4 h-4 text-white" />
{/* Pedagogy */}
<div className="relative">
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<Brain className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Pedagogy</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Evidence-based coaching methodologies for transformation
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Solution-Focused
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Strengths-Based
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Goal-Oriented
</div>
</div>
</div>
<div>
<h4 className="text-h4 mb-2">Strategic Mentoring Relationships</h4>
<p className="text-body text-muted">Long-term mentoring partnerships for career guidance and strategic development</p>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
</div>
</div>
<div className="flex gap-4">
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center flex-shrink-0">
<BarChart3 className="w-4 h-4 text-white" />
{/* Delivery Modes */}
<div className="relative">
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Settings className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Flexible coaching formats for executive schedules
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
One-on-One Coaching
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Virtual & In-Person
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Mentoring Circles
</div>
</div>
</div>
<div>
<h4 className="text-h4 mb-2">Progress Tracking & Measurement</h4>
<p className="text-body text-muted">Continuous assessment and measurement of development progress and impact</p>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
</div>
</div>
{/* Progress Tracking */}
<div className="relative">
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<BarChart3 className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Progress Tracking</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Continuous measurement of development and impact
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Goal Achievement
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Behavior Change
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Impact Metrics
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
</div>
</div>
{/* Mentoring Integration */}
<div className="relative">
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Network className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Mentoring Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Strategic guidance for long-term career development
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Senior Mentors
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Peer Networks
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Career Strategy
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
</div>
</div>
{/* Expected Outcome */}
<div className="bg-[#04045B] text-white rounded-xl p-8 border-4 border-[#F8C301] shadow-xl">
<div className="flex items-center gap-3 mb-4">
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
<h3 className="text-h4 text-white">Expected Outcome</h3>
</div>
<p className="text-body text-white mb-4">
Accelerated leadership development with sustained behavior change, enhanced performance, and career advancement.
</p>
<div className="flex items-center gap-2 text-[#F8C301]">
<CheckCircle className="w-6 h-6" />
<span className="text-body text-white">Transformational Leadership Growth</span>
</div>
</div>
</div>
</div>
<div className="bg-white p-8 rounded-2xl shadow-lg">
<h4 className="text-h4 mb-6">Delivery Modes & Support</h4>
<div className="space-y-4">
<div className="border-l-4 border-primary pl-4">
<h5 className="font-semibold text-body mb-1">Individual Coaching</h5>
<p className="text-small text-muted">One-on-one sessions with certified executive coaches</p>
{/* Framework Effectiveness */}
<div className="bg-gray-50 rounded-xl p-8">
<div className="text-center mb-8">
<h3 className="text-h3 text-[#26231A] mb-4">Framework Effectiveness</h3>
<p className="text-body text-[#6F6F6F] max-w-2xl mx-auto">
Our systematic approach delivers measurable results across key coaching and mentoring metrics.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="text-center bg-white rounded-lg p-6">
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
<Target className="w-7 h-7 text-white" />
</div>
<div className="text-h2 text-[#04045B] mb-2">94%</div>
<p className="text-body text-[#6F6F6F]">Goal Achievement Rate</p>
</div>
<div className="border-l-4 border-accent pl-4">
<h5 className="font-semibold text-body mb-1">360-Degree Feedback</h5>
<p className="text-small text-muted">Comprehensive feedback from peers, supervisors, and direct reports</p>
<div className="text-center bg-white rounded-lg p-6">
<div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
<Users className="w-7 h-7 text-white" />
</div>
<div className="text-h2 text-[#04045B] mb-2">88%</div>
<p className="text-body text-[#6F6F6F]">Leadership Effectiveness Growth</p>
</div>
<div className="border-l-4 border-primary pl-4">
<h5 className="font-semibold text-body mb-1">Mentoring Circles</h5>
<p className="text-small text-muted">Group mentoring sessions with peer leaders and senior executives</p>
</div>
<div className="border-l-4 border-accent pl-4">
<h5 className="font-semibold text-body mb-1">Virtual & In-Person Options</h5>
<p className="text-small text-muted">Flexible delivery modes to accommodate busy executive schedules</p>
<div className="text-center bg-white rounded-lg p-6">
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
<TrendingUp className="w-7 h-7 text-white" />
</div>
<div className="text-h2 text-[#04045B] mb-2">86%</div>
<p className="text-body text-[#6F6F6F]">Career Advancement Success</p>
</div>
</div>
</div>

421
src/components/services/LeadershipDevelopment.tsx
View File

@@ -198,7 +198,6 @@ export function LeadershipDevelopment() {
{/* 1. What Is This Service */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
<div className="section-margin-x">
<div className="w-full section-margin-x">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<BrandedTag text="What Is This Service?" />
@@ -268,7 +267,6 @@ export function LeadershipDevelopment() {
</div>
</div>
</div>
</div>
</div>
</section>
@@ -370,7 +368,7 @@ export function LeadershipDevelopment() {
{/* 4. Our Approach */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
<div className="section-margin-x">
<div className="w-full section-margin-x">
<div className="w-full">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<BrandedTag text="Our Approach" />
@@ -380,116 +378,371 @@ export function LeadershipDevelopment() {
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
{/* Left Column - Core Frameworks */}
<div>
<h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
<div className="space-y-8">
<div className="flex items-start gap-4">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
<Eye className="w-5 h-5 text-white" />
</div>
<div className="flex-1">
<h4 className="text-h4 mb-3 text-[#26231A]">360-Degree Leadership Assessment</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Comprehensive evaluation of leadership capabilities, strategic readiness, and executive presence
{/* Flowchart Container with Connecting Lines */}
<div className="relative mb-16 flex flex-col items-center">
{/* Desktop: Horizontal Flowchart */}
<div className="hidden lg:block w-full max-w-5xl">
<div className="relative">
{/* Row 1: Frameworks, Pedagogy, Delivery */}
<div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
{/* Frameworks */}
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Lightbulb className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Strategic Frameworks</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Executive leadership models and strategic thinking frameworks
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Leadership Models
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Strategic Thinking
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Vision Creation
</div>
</div>
</div>
{/* Arrow 1→2 */}
<div className="absolute top-1/2 left-[calc(33.33%-2rem)] -translate-y-1/2 z-0 flex items-center">
<div className="w-16 h-0.5 bg-[#F8C301]"></div>
<ArrowRight className="w-6 h-6 text-[#F8C301] -ml-1" />
</div>
{/* Pedagogy */}
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<Brain className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Executive development through experiential and action learning
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Experiential Learning
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Action Learning
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Peer Learning
</div>
</div>
</div>
{/* Arrow 2→3 */}
<div className="absolute top-1/2 left-[calc(66.66%-2rem)] -translate-y-1/2 z-0 flex items-center">
<div className="w-16 h-0.5 bg-[#04045B]"></div>
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
</div>
{/* Delivery Modes */}
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Settings className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Flexible formats designed for executive schedules
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Executive Workshops
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Leadership Simulations
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Strategic Projects
</div>
</div>
</div>
</div>
<div className="flex items-start gap-4">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
<Brain className="w-5 h-5 text-white" />
</div>
<div className="flex-1">
<h4 className="text-h4 mb-3 text-[#26231A]">Strategic Leadership Development</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Frameworks for strategic thinking, vision creation, and organizational transformation
</p>
{/* Vertical Connector - Center Flow Down */}
<div className="flex justify-center mb-6">
<div className="flex flex-col items-center">
<div className="w-0.5 h-12 bg-[#F8C301]"></div>
<ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
</div>
</div>
<div className="flex items-start gap-4">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
<Network className="w-5 h-5 text-white" />
</div>
<div className="flex-1">
<h4 className="text-h4 mb-3 text-[#26231A]">Executive Coaching Integration</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
One-on-one coaching support with experienced executive coaches throughout the journey
{/* Row 2: Assessment, Coaching */}
<div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
{/* Assessment Integration */}
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<BarChart3 className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Comprehensive evaluation to measure executive readiness
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
360° Feedback
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Leadership Assessment
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Impact Measurement
</div>
</div>
</div>
{/* Arrow 4→5 */}
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 flex items-center">
<div className="w-16 h-0.5 bg-[#04045B]"></div>
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
</div>
{/* Coaching Integration */}
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<UserCheck className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Personalized executive coaching throughout development
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Executive Coaching
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Strategic Advisement
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Peer Coaching
</div>
</div>
</div>
</div>
<div className="flex items-start gap-4">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
<BarChart3 className="w-5 h-5 text-white" />
{/* Final Vertical Connector - Center Flow Down to Outcome */}
<div className="flex justify-center mb-6">
<div className="flex flex-col items-center">
<div className="w-0.5 h-12 bg-[#04045B]"></div>
<ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
</div>
<div className="flex-1">
<h4 className="text-h4 mb-3 text-[#26231A]">Real-World Application</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Strategic projects and business challenges that drive immediate organizational impact
</div>
{/* Row 3: Expected Outcome - Centered */}
<div className="flex justify-center w-full">
<div className="bg-[#04045B] text-white rounded-xl p-8 w-full max-w-2xl border-4 border-[#F8C301] shadow-xl">
<div className="flex items-center gap-3 mb-4">
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
<h3 className="text-h4 text-white">Expected Outcome</h3>
</div>
<p className="text-body text-white mb-4">
Transformational executive leaders with strategic capability, executive presence, and proven business impact.
</p>
<div className="flex items-center gap-2 text-[#F8C301]">
<CheckCircle className="w-6 h-6" />
<span className="text-body text-white">Enhanced Leadership Effectiveness</span>
</div>
</div>
</div>
</div>
</div>
{/* Right Column - Delivery Modes */}
<div className="bg-white border border-gray-200 rounded-xl p-8">
<h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Assessments</h4>
<div className="space-y-6">
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
<div className="flex-1">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Executive Workshops</h5>
<p className="text-small text-[#6F6F6F] leading-relaxed">
Intensive strategic leadership workshops with peer learning and expert facilitation
</p>
{/* Tablet & Mobile: Vertical Flowchart */}
<div className="lg:hidden space-y-8">
{/* Frameworks */}
<div className="relative">
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Lightbulb className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Strategic Frameworks</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Executive leadership models and strategic thinking frameworks
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Leadership Models
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Strategic Thinking
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Vision Creation
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
<div className="flex-1">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Leadership Simulations</h5>
<p className="text-small text-[#6F6F6F] leading-relaxed">
Business simulations and strategic decision-making exercises for practical application
</p>
{/* Pedagogy */}
<div className="relative">
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<Brain className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Executive development through experiential and action learning
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Experiential Learning
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Action Learning
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Peer Learning
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
<div className="flex-1">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Executive Coaching</h5>
<p className="text-small text-[#6F6F6F] leading-relaxed">
Individual coaching sessions with experienced executive coaches for personalized development
</p>
{/* Delivery Modes */}
<div className="relative">
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Settings className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Flexible formats designed for executive schedules
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Executive Workshops
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Leadership Simulations
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Strategic Projects
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
<div className="flex-1">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Impact Measurement</h5>
<p className="text-small text-[#6F6F6F] leading-relaxed">
Ongoing assessment and measurement of leadership effectiveness and business impact
</p>
{/* Assessment Integration */}
<div className="relative">
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<BarChart3 className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Comprehensive evaluation to measure executive readiness
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
360° Feedback
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Leadership Assessment
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Impact Measurement
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
</div>
</div>
{/* Coaching Integration */}
<div className="relative">
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<UserCheck className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Personalized executive coaching throughout development
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Executive Coaching
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Strategic Advisement
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Peer Coaching
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
</div>
</div>
{/* Expected Outcome */}
<div className="bg-[#04045B] text-white rounded-xl p-8 border-4 border-[#F8C301] shadow-xl">
<div className="flex items-center gap-3 mb-4">
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
<h3 className="text-h4 text-white">Expected Outcome</h3>
</div>
<p className="text-body text-white mb-4">
Transformational executive leaders with strategic capability, executive presence, and proven business impact.
</p>
<div className="flex items-center gap-2 text-[#F8C301]">
<CheckCircle className="w-6 h-6" />
<span className="text-body text-white">Enhanced Leadership Effectiveness</span>
</div>
</div>
</div>
</div>
{/* Framework Effectiveness */}
<div className="bg-gray-50 rounded-xl p-8">
<div className="text-center mb-8">
<h3 className="text-h3 text-[#26231A] mb-4">Framework Effectiveness</h3>
<p className="text-body text-[#6F6F6F] max-w-2xl mx-auto">
Our systematic approach delivers measurable results across key leadership development metrics.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="text-center bg-white rounded-lg p-6">
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
<Target className="w-7 h-7 text-white" />
</div>
<div className="text-h2 text-[#04045B] mb-2">92%</div>
<p className="text-body text-[#6F6F6F]">Leadership Effectiveness Increase</p>
</div>
<div className="text-center bg-white rounded-lg p-6">
<div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
<Users className="w-7 h-7 text-white" />
</div>
<div className="text-h2 text-[#04045B] mb-2">88%</div>
<p className="text-body text-[#6F6F6F]">Executive Presence Enhancement</p>
</div>
<div className="text-center bg-white rounded-lg p-6">
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
<TrendingUp className="w-7 h-7 text-white" />
</div>
<div className="text-h2 text-[#04045B] mb-2">85%</div>
<p className="text-body text-[#6F6F6F]">Strategic Impact Improvement</p>
</div>
</div>
</div>

426
src/components/services/LeadershipPipelineDevelopment.tsx
View File

@@ -213,7 +213,7 @@ export function LeadershipPipelineDevelopment() {
<div className="w-full section-margin-x">
<div className="max-w-4xl">
{/* Back Navigation */}
<div className="mb-8">
{/* <div className="mb-8">
<Button
variant="ghost"
onClick={() => navigateTo('/services')}
@@ -222,7 +222,7 @@ export function LeadershipPipelineDevelopment() {
<ArrowLeft className="w-4 h-4 mr-2" />
Back to Services
</Button>
</div>
</div> */}
<div className="mb-8">
<h1 className="text-h1-white">
@@ -250,7 +250,6 @@ export function LeadershipPipelineDevelopment() {
{/* 1. What Is This Service */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
<div className="section-margin-x">
<div className="w-full section-margin-x">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<BrandedTag text="What Is This Service?" />
@@ -320,7 +319,6 @@ export function LeadershipPipelineDevelopment() {
</div>
</div>
</div>
</div>
</div>
</section>
@@ -422,7 +420,7 @@ export function LeadershipPipelineDevelopment() {
{/* 4. Our Approach */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
<div className="section-margin-x">
<div className="w-full section-margin-x">
<div className="w-full">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<BrandedTag text="Our Approach" />
@@ -432,116 +430,372 @@ export function LeadershipPipelineDevelopment() {
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
{/* Left Column - Core Frameworks */}
<div>
<h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
<div className="space-y-8">
<div className="flex items-start gap-4">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
<Eye className="w-5 h-5 text-white" />
</div>
<div className="flex-1">
<h4 className="text-h4 mb-3 text-[#26231A]">Talent Assessment & Identification</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Systematic identification of high-potential talent using validated assessment tools
{/* Clean Grid Layout */}
{/* Flowchart Container with Connecting Lines */}
<div className="relative mb-16 flex flex-col items-center">
{/* Desktop: Horizontal Flowchart */}
<div className="hidden lg:block w-full max-w-5xl">
<div className="relative">
{/* Row 1: Frameworks, Pedagogy, Delivery */}
<div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
{/* Frameworks */}
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Layers className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Frameworks Used</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Establish competency models and leadership progression pathways
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Competency Models
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Leadership Levels
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Career Pathways
</div>
</div>
</div>
{/* Arrow 1→2 */}
<div className="absolute top-1/2 left-[calc(33.33%-2rem)] -translate-y-1/2 z-0 flex items-center">
<div className="w-16 h-0.5 bg-[#F8C301]"></div>
<ArrowRight className="w-6 h-6 text-[#F8C301] -ml-1" />
</div>
{/* Pedagogy */}
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<Brain className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Apply evidence-based learning approaches for maximum impact
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Experiential Learning
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Action Learning
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Peer Learning
</div>
</div>
</div>
{/* Arrow 2→3 */}
<div className="absolute top-1/2 left-[calc(66.66%-2rem)] -translate-y-1/2 z-0 flex items-center">
<div className="w-16 h-0.5 bg-[#04045B]"></div>
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
</div>
{/* Delivery Modes */}
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Settings className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Flexible options to suit organizational needs and schedules
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Workshops
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Online Modules
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Cohort Programs
</div>
</div>
</div>
</div>
<div className="flex items-start gap-4">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
<Target className="w-5 h-5 text-white" />
</div>
<div className="flex-1">
<h4 className="text-h4 mb-3 text-[#26231A]">Multi-Level Development Programs</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Tier-specific programs for emerging leaders, managers, and executives
</p>
{/* Vertical Connector - Center Flow Down */}
<div className="flex justify-center mb-6">
<div className="flex flex-col items-center">
<div className="w-0.5 h-12 bg-[#F8C301]"></div>
<ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
</div>
</div>
<div className="flex items-start gap-4">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
<Users className="w-5 h-5 text-white" />
</div>
<div className="flex-1">
<h4 className="text-h4 mb-3 text-[#26231A]">Mentoring & Coaching Integration</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Comprehensive support through mentoring relationships and executive coaching
{/* Row 2: Assessment, Coaching */}
<div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
{/* Assessment Integration */}
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<BarChart3 className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Comprehensive evaluation methods to measure progress and potential
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
360° Feedback
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Psychometrics
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Simulations
</div>
</div>
</div>
{/* Arrow 4→5 */}
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 flex items-center">
<div className="w-16 h-0.5 bg-[#04045B]"></div>
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
</div>
{/* Coaching Integration */}
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Heart className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Personalized support throughout the development journey
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Executive Coaching
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Mentoring
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Peer Coaching
</div>
</div>
</div>
</div>
<div className="flex items-start gap-4">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
<Building className="w-5 h-5 text-white" />
{/* Final Vertical Connector - Center Flow Down to Outcome */}
<div className="flex justify-center mb-6">
<div className="flex flex-col items-center">
<div className="w-0.5 h-12 bg-[#04045B]"></div>
<ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
</div>
<div className="flex-1">
<h4 className="text-h4 mb-3 text-[#26231A]">Succession Planning Integration</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Direct integration with organizational succession planning and talent management
</div>
{/* Row 3: Expected Outcome - Centered */}
<div className="flex justify-center w-full">
<div className="bg-[#04045B] text-white rounded-xl p-8 w-full max-w-2xl border-4 border-[#F8C301] shadow-xl">
<div className="flex items-center gap-3 mb-4">
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
<h3 className="text-h4 text-white">Expected Outcome</h3>
</div>
<p className="text-body text-white mb-4">
A systematic, measurable leadership pipeline that accelerates talent development and succession readiness.
</p>
<div className="flex items-center gap-2 text-[#F8C301]">
<CheckCircle className="w-6 h-6" />
<span className="text-body text-white">Proven ROI on Leadership Investment</span>
</div>
</div>
</div>
</div>
</div>
{/* Right Column - Delivery Modes */}
<div className="bg-white border border-gray-200 rounded-xl p-8">
<h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Support</h4>
<div className="space-y-6">
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
<div className="flex-1">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Assessment Centers</h5>
<p className="text-small text-[#6F6F6F] leading-relaxed">
Comprehensive leadership potential evaluation and 360-degree feedback
</p>
{/* Tablet & Mobile: Vertical Flowchart */}
<div className="lg:hidden space-y-8">
{/* Frameworks */}
<div className="relative">
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Layers className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Frameworks Used</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Establish competency models and leadership progression pathways
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Competency Models
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Leadership Levels
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Career Pathways
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
<div className="flex-1">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Development Cohorts</h5>
<p className="text-small text-[#6F6F6F] leading-relaxed">
Structured learning programs with peer networks and group projects
</p>
{/* Pedagogy */}
<div className="relative">
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<Brain className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Apply evidence-based learning approaches for maximum impact
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Experiential Learning
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Action Learning
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Peer Learning
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
<div className="flex-1">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Stretch Assignments</h5>
<p className="text-small text-[#6F6F6F] leading-relaxed">
Real-world leadership opportunities and cross-functional projects
</p>
{/* Delivery Modes */}
<div className="relative">
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Settings className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Flexible options to suit organizational needs and schedules
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Workshops
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Online Modules
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Cohort Programs
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
<div className="flex-1">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Succession Reviews</h5>
<p className="text-small text-[#6F6F6F] leading-relaxed">
Regular talent reviews and succession readiness assessments
</p>
{/* Assessment Integration */}
<div className="relative">
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<BarChart3 className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Comprehensive evaluation methods to measure progress and potential
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
360° Feedback
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Psychometrics
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Simulations
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
</div>
</div>
{/* Coaching Integration */}
<div className="relative">
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Heart className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Personalized support throughout the development journey
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Executive Coaching
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Mentoring
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Peer Coaching
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
</div>
</div>
{/* Expected Outcome */}
<div className="bg-[#04045B] text-white rounded-xl p-8 border-4 border-[#F8C301] shadow-xl">
<div className="flex items-center gap-3 mb-4">
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
<h3 className="text-h4 text-white">Expected Outcome</h3>
</div>
<p className="text-body text-white mb-4">
A systematic, measurable leadership pipeline that accelerates talent development and succession readiness.
</p>
<div className="flex items-center gap-2 text-[#F8C301]">
<CheckCircle className="w-6 h-6" />
<span className="text-body text-white">Proven ROI on Leadership Investment</span>
</div>
</div>
</div>
</div>
{/* Framework Effectiveness */}
<div className="bg-gray-50 rounded-xl p-8">
<div className="text-center mb-8">
<h3 className="text-h3 text-[#26231A] mb-4">Framework Effectiveness</h3>
<p className="text-body text-[#6F6F6F] max-w-2xl mx-auto">
Our systematic approach delivers measurable results across key leadership development metrics.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="text-center bg-white rounded-lg p-6">
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
<Target className="w-7 h-7 text-white" />
</div>
<div className="text-h2 text-[#04045B] mb-2">85%</div>
<p className="text-body text-[#6F6F6F]">Promotion Readiness Acceleration</p>
</div>
<div className="text-center bg-white rounded-lg p-6">
<div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
<Users className="w-7 h-7 text-white" />
</div>
<div className="text-h2 text-[#04045B] mb-2">92%</div>
<p className="text-body text-[#6F6F6F]">Talent Retention Improvement</p>
</div>
<div className="text-center bg-white rounded-lg p-6">
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
<TrendingUp className="w-7 h-7 text-white" />
</div>
<div className="text-h2 text-[#04045B] mb-2">78%</div>
<p className="text-body text-[#6F6F6F]">Succession Planning Effectiveness</p>
</div>
</div>
</div>

533
src/components/services/ManagementDevelopment.tsx
View File

@@ -197,73 +197,71 @@ export function ManagementDevelopment() {
{/* 1. What Is This Service */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
<div className="section-margin-x">
<div className="w-full section-margin-x">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<BrandedTag text="What Is This Service?" />
<h2 className="text-h2 mb-8 text-[#26231A]">Comprehensive Management Development</h2>
<div className="max-w-4xl mx-auto space-y-6">
<p className="text-body-lg text-[#6F6F6F] leading-relaxed">
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.
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<BrandedTag text="What Is This Service?" />
<h2 className="text-h2 mb-8 text-[#26231A]">Comprehensive Management Development</h2>
<div className="max-w-4xl mx-auto space-y-6">
<p className="text-body-lg text-[#6F6F6F] leading-relaxed">
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.
</p>
<div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
<p className="text-body-lg text-[#26231A] leading-relaxed">
<span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> 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.
</p>
<div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
<p className="text-body-lg text-[#26231A] leading-relaxed">
<span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> 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.
</p>
</div>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<Users className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
People Leadership
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Essential skills for managing and developing teams effectively with modern leadership principles
</p>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<Users className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
People Leadership
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Essential skills for managing and developing teams effectively with modern leadership principles
</p>
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<TrendingUp className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
Performance Focus
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Tools and techniques to drive team performance and achieve measurable business results
</p>
</div>
</div>
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<TrendingUp className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
Performance Focus
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Tools and techniques to drive team performance and achieve measurable business results
</p>
</div>
</div>
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<Award className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
89% Success Rate
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Proven track record with 89% of managers showing improved team performance within 6 months
</p>
<div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
<div className="flex flex-col items-center text-center">
<div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
style={{ backgroundColor: '#04045B' }}
>
<Award className="w-8 h-8 text-white" />
</div>
<h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
89% Success Rate
</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Proven track record with 89% of managers showing improved team performance within 6 months
</p>
</div>
</div>
</div>
@@ -369,7 +367,7 @@ export function ManagementDevelopment() {
{/* 4. Our Approach */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
<div className="section-margin-x">
<div className="w-full section-margin-x">
<div className="w-full">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<BrandedTag text="Our Approach" />
@@ -379,116 +377,371 @@ export function ManagementDevelopment() {
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
{/* Left Column - Core Frameworks */}
<div>
<h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
<div className="space-y-8">
<div className="flex items-start gap-4">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
<Users className="w-5 h-5 text-white" />
</div>
<div className="flex-1">
<h4 className="text-h4 mb-3 text-[#26231A]">People Management Fundamentals</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Essential skills for team leadership, delegation, and performance management
{/* Flowchart Container with Connecting Lines */}
<div className="relative mb-16 flex flex-col items-center">
{/* Desktop: Horizontal Flowchart */}
<div className="hidden lg:block w-full max-w-5xl">
<div className="relative">
{/* Row 1: Frameworks, Pedagogy, Delivery */}
<div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
{/* Frameworks */}
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Users className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Management Frameworks</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Core management models and team leadership principles
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
People Management
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Performance Systems
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Team Development
</div>
</div>
</div>
{/* Arrow 1→2 */}
<div className="absolute top-1/2 left-[calc(33.33%-2rem)] -translate-y-1/2 z-0 flex items-center">
<div className="w-16 h-0.5 bg-[#F8C301]"></div>
<ArrowRight className="w-6 h-6 text-[#F8C301] -ml-1" />
</div>
{/* Pedagogy */}
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<Brain className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Practical learning through application and peer exchange
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Experiential Learning
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Action Learning
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Peer Learning
</div>
</div>
</div>
{/* Arrow 2→3 */}
<div className="absolute top-1/2 left-[calc(66.66%-2rem)] -translate-y-1/2 z-0 flex items-center">
<div className="w-16 h-0.5 bg-[#04045B]"></div>
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
</div>
{/* Delivery Modes */}
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Settings className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Flexible formats for manager development needs
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Interactive Workshops
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Peer Cohorts
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Action Projects
</div>
</div>
</div>
</div>
<div className="flex items-start gap-4">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
<MessageCircle className="w-5 h-5 text-white" />
</div>
<div className="flex-1">
<h4 className="text-h4 mb-3 text-[#26231A]">Communication Excellence</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Advanced communication skills for difficult conversations and team engagement
</p>
{/* Vertical Connector - Center Flow Down */}
<div className="flex justify-center mb-6">
<div className="flex flex-col items-center">
<div className="w-0.5 h-12 bg-[#F8C301]"></div>
<ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
</div>
</div>
<div className="flex items-start gap-4">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
<Target className="w-5 h-5 text-white" />
</div>
<div className="flex-1">
<h4 className="text-h4 mb-3 text-[#26231A]">Performance Management Systems</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Tools and techniques for setting goals, providing feedback, and driving results
{/* Row 2: Assessment, Coaching */}
<div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
{/* Assessment Integration */}
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<BarChart3 className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Comprehensive evaluation to track manager effectiveness
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
360° Feedback
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Performance Metrics
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Team Engagement
</div>
</div>
</div>
{/* Arrow 4→5 */}
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 flex items-center">
<div className="w-16 h-0.5 bg-[#04045B]"></div>
<ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
</div>
{/* Coaching Integration */}
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<MessageCircle className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Personalized coaching support for manager challenges
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Individual Coaching
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Group Coaching
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Peer Coaching
</div>
</div>
</div>
</div>
<div className="flex items-start gap-4">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#04045B' }}
>
<Award className="w-5 h-5 text-white" />
{/* Final Vertical Connector - Center Flow Down to Outcome */}
<div className="flex justify-center mb-6">
<div className="flex flex-col items-center">
<div className="w-0.5 h-12 bg-[#04045B]"></div>
<ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
</div>
<div className="flex-1">
<h4 className="text-h4 mb-3 text-[#26231A]">Team Development Strategies</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed">
Building high-performing teams and fostering collaborative work environments
</div>
{/* Row 3: Expected Outcome - Centered */}
<div className="flex justify-center w-full">
<div className="bg-[#04045B] text-white rounded-xl p-8 w-full max-w-2xl border-4 border-[#F8C301] shadow-xl">
<div className="flex items-center gap-3 mb-4">
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
<h3 className="text-h4 text-white">Expected Outcome</h3>
</div>
<p className="text-body text-white mb-4">
Effective people managers who build high-performing teams, drive business results, and create positive work environments.
</p>
<div className="flex items-center gap-2 text-[#F8C301]">
<CheckCircle className="w-6 h-6" />
<span className="text-body text-white">Enhanced Management Effectiveness</span>
</div>
</div>
</div>
</div>
</div>
{/* Right Column - Delivery Modes */}
<div className="bg-white border border-gray-200 rounded-xl p-8">
<h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Support</h4>
<div className="space-y-6">
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
<div className="flex-1">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Interactive Workshops</h5>
<p className="text-small text-[#6F6F6F] leading-relaxed">
Hands-on learning with real-world scenarios and case studies for immediate application
</p>
{/* Tablet & Mobile: Vertical Flowchart */}
<div className="lg:hidden space-y-8">
{/* Frameworks */}
<div className="relative">
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Users className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Management Frameworks</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Core management models and team leadership principles
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
People Management
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Performance Systems
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Team Development
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
<div className="flex-1">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Peer Learning Cohorts</h5>
<p className="text-small text-[#6F6F6F] leading-relaxed">
Manager groups for shared learning and best practice exchange across teams
</p>
{/* Pedagogy */}
<div className="relative">
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<Brain className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Practical learning through application and peer exchange
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Experiential Learning
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Action Learning
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Peer Learning
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
<div className="flex-1">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Individual Coaching</h5>
<p className="text-small text-[#6F6F6F] leading-relaxed">
One-on-one support for personalized development needs and leadership challenges
</p>
{/* Delivery Modes */}
<div className="relative">
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<Settings className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Flexible formats for manager development needs
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Interactive Workshops
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Peer Cohorts
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Action Projects
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
</div>
</div>
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
<div className="flex-1">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Action Learning Projects</h5>
<p className="text-small text-[#6F6F6F] leading-relaxed">
Real workplace challenges for immediate application and measurable business impact
</p>
{/* Assessment Integration */}
<div className="relative">
<div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<BarChart3 className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Comprehensive evaluation to track manager effectiveness
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
360° Feedback
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Performance Metrics
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Team Engagement
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
</div>
</div>
{/* Coaching Integration */}
<div className="relative">
<div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<MessageCircle className="w-6 h-6 text-white" />
</div>
<h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
<p className="text-body text-[#6F6F6F] mb-4">
Personalized coaching support for manager challenges
</p>
<div className="space-y-2">
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Individual Coaching
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Group Coaching
</div>
<div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
Peer Coaching
</div>
</div>
</div>
{/* Connector Arrow */}
<div className="flex justify-center my-4">
<ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
</div>
</div>
{/* Expected Outcome */}
<div className="bg-[#04045B] text-white rounded-xl p-8 border-4 border-[#F8C301] shadow-xl">
<div className="flex items-center gap-3 mb-4">
<TrendingUp className="w-10 h-10 text-[#F8C301]" />
<h3 className="text-h4 text-white">Expected Outcome</h3>
</div>
<p className="text-body text-white mb-4">
Effective people managers who build high-performing teams, drive business results, and create positive work environments.
</p>
<div className="flex items-center gap-2 text-[#F8C301]">
<CheckCircle className="w-6 h-6" />
<span className="text-body text-white">Enhanced Management Effectiveness</span>
</div>
</div>
</div>
</div>
{/* Framework Effectiveness */}
<div className="bg-gray-50 rounded-xl p-8">
<div className="text-center mb-8">
<h3 className="text-h3 text-[#26231A] mb-4">Framework Effectiveness</h3>
<p className="text-body text-[#6F6F6F] max-w-2xl mx-auto">
Our systematic approach delivers measurable results across key management development metrics.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="text-center bg-white rounded-lg p-6">
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
<Target className="w-7 h-7 text-white" />
</div>
<div className="text-h2 text-[#04045B] mb-2">89%</div>
<p className="text-body text-[#6F6F6F]">Manager Effectiveness Increase</p>
</div>
<div className="text-center bg-white rounded-lg p-6">
<div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
<Users className="w-7 h-7 text-white" />
</div>
<div className="text-h2 text-[#04045B] mb-2">85%</div>
<p className="text-body text-[#6F6F6F]">Team Performance Improvement</p>
</div>
<div className="text-center bg-white rounded-lg p-6">
<div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
<TrendingUp className="w-7 h-7 text-white" />
</div>
<div className="text-h2 text-[#04045B] mb-2">78%</div>
<p className="text-body text-[#6F6F6F]">Employee Engagement Growth</p>
</div>
</div>
</div>

246
src/data/webinarsData.ts
View File

@@ -95,7 +95,7 @@ export const sharedWebinarsData: WebinarData[] = [
category: 'Digital Transformation',
tags: ['Leadership', 'Digital Strategy', 'Innovation', 'Change Management'],
thumbnail: 'https://images.unsplash.com/photo-1560472355-536de3962603?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMGxlYWRlcnNoaXAlMjBzdHJhdGVneXxlbnwwfHx8fDE3MzU4NTQyNzB8MA&ixlib=rb-4.0.3&q=80&w=1080',
status: 'live' as const,
status: 'live',
featured: true,
level: 'Advanced',
format: 'Hybrid',
@@ -193,21 +193,6 @@ export const sharedWebinarsData: WebinarData[] = [
rating: 4.8,
participants: '2,400+',
slug: 'strategic-leadership-programme'
},
{
id: 2,
title: 'Data-Driven Decision Making',
description: 'Learn to make strategic decisions using data analytics and business intelligence',
duration: '8 hours',
format: 'Cohort-based',
image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=240&fit=crop',
price: '₹37,267',
originalPrice: '₹45,567',
category: 'Decision Making & Strategy',
level: 'Advanced',
rating: 4.9,
participants: '1,800+',
slug: 'data-driven-decision-making'
}
]
},
@@ -229,7 +214,7 @@ export const sharedWebinarsData: WebinarData[] = [
category: 'Team Development',
tags: ['Team Building', 'Emotional Intelligence', 'Performance', 'Leadership'],
thumbnail: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0ZWFtJTIwbGVhZGVyc2hpcCUyMGNvbGxhYm9yYXRpb258ZW58MHx8fHwxNzM1ODU0MjcwfDA&ixlib=rb-4.0.3&q=80&w=1080',
status: 'upcoming' as const,
status: 'upcoming',
featured: true,
level: 'Intermediate',
format: 'In Person',
@@ -302,21 +287,6 @@ export const sharedWebinarsData: WebinarData[] = [
rating: 4.7,
participants: '3,200+',
slug: 'team-leadership-masterclass'
},
{
id: 3,
title: 'Emotional Intelligence for Leaders',
description: 'Develop emotional intelligence to enhance your leadership effectiveness and team relationships',
duration: '5 hours',
format: 'Self-paced',
image: 'https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=400&h=240&fit=crop',
price: '₹14,857',
originalPrice: '₹19,007',
category: 'Personal Development',
level: 'Beginner',
rating: 4.9,
participants: '4,300+',
slug: 'emotional-intelligence-leaders'
}
]
},
@@ -337,8 +307,8 @@ export const sharedWebinarsData: WebinarData[] = [
maxAttendees: 4000,
category: 'Strategy',
tags: ['Strategic Thinking', 'Crisis Management', 'Leadership', 'Planning'],
thumbnail: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzdHJhdGVnaWMlMjBwbGFubmluZyUyMGxlYWRlcnNoaXB8ZW58MHx8fHwxNzM1ODU0Mjcwfda&ixlib=rb-4.0.3&q=80&w=1080',
status: 'recorded' as const,
thumbnail: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzdHJhdGVnaWMlMjBwbGFubmluZyUyMGxlYWRlcnNoaXB8ZW58MHx8fHwxNzM1ODU0MjcwfDA&ixlib=rb-4.0.3&q=80&w=1080',
status: 'recorded',
featured: false,
level: 'Advanced',
format: 'Virtual',
@@ -431,8 +401,8 @@ export const sharedWebinarsData: WebinarData[] = [
maxAttendees: 2800,
category: 'Personal Development',
tags: ['Innovation', 'Creativity', 'Communication', 'Leadership'],
thumbnail: 'https://images.unsplash.com/photo-1559027615-cd4628902d4a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpbm5vdmF0aW9uJTIwbGVhZGVyc2hpcCUyMGNyZWF0aXZpdHl8ZW58MHx8fHwxNzM1ODU0Mjcwfda&ixlib=rb-4.0.3&q=80&w=1080',
status: 'upcoming' as const,
thumbnail: 'https://images.unsplash.com/photo-1559027615-cd4628902d4a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpbm5vdmF0aW9uJTIwbGVhZGVyc2hpcCUyMGNyZWF0aXZpdHl8ZW58MHx8fHwxNzM1ODU0MjcwfDA&ixlib=rb-4.0.3&q=80&w=1080',
status: 'upcoming',
featured: false,
level: 'Intermediate',
format: 'Hybrid',
@@ -528,10 +498,10 @@ export const sharedWebinarsData: WebinarData[] = [
duration: '70 min',
attendees: '2,800+',
maxAttendees: 3500,
category: 'Crisis Management',
category: 'Global Leadership',
tags: ['Global Leadership', 'Cultural Intelligence', 'Communication', 'Diversity'],
thumbnail: 'https://images.unsplash.com/photo-1552664730-d307ca884978?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxnbG9iYWwlMjB0ZWFtJTIwbGVhZGVyc2hpcCUyMGRpdmVyc2l0eXxlbnwwfHx8fDE3MzU4NTQyNzB8da&ixlib=rb-4.0.3&q=80&w=1080',
status: 'upcoming' as const,
thumbnail: 'https://images.unsplash.com/photo-1552664730-d307ca884978?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxnbG9iYWwlMjB0ZWFtJTIwbGVhZGVyc2hpcCUyMGRpdmVyc2l0eXxlbnwwfHx8fDE3MzU4NTQyNzB8MA&ixlib=rb-4.0.3&q=80&w=1080',
status: 'upcoming',
featured: false,
level: 'Advanced',
format: 'Virtual',
@@ -611,6 +581,204 @@ export const sharedWebinarsData: WebinarData[] = [
slug: 'global-leadership-certificate'
}
]
},
{
id: '6',
slug: 'strategic-decision-making',
title: 'Strategic Decision Making: Data-Driven Approaches for Leaders',
description: 'Master the art of making informed, strategic decisions using data analytics, critical thinking frameworks, and proven decision-making methodologies.',
presenter: 'Dr. Michael Thompson',
presenterTitle: 'Data Strategy Consultant',
company: 'Analytics Leadership Partners',
date: '2024-04-12',
time: '11:00',
endTime: '12:15',
timezone: 'EST',
duration: '75 min',
attendees: '1,950+',
maxAttendees: 2200,
category: 'Decision Making',
tags: ['Data Analytics', 'Strategic Thinking', 'Decision Making', 'Leadership'],
thumbnail: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxkYXRhJTIwYW5hbHl0aWNzJTIwbGVhZGVyc2hpcCUyMGRlY2lzaW9uJTIwbWFraW5nfGVufDB8fHx8MTczNTg1NDI3MHww&ixlib=rb-4.0.3&q=80&w=1080',
status: 'upcoming',
featured: true,
level: 'Intermediate',
format: 'Virtual',
rating: 4.7,
price: 'Free',
registrationOpen: true,
recordingReady: false,
recordingUrl: '',
zoomUrl: 'https://zoom.us/j/1234567894',
theme: 'Data Leadership',
abstract: 'In an era of information overload, leaders must master the art of data-driven decision making. This session provides practical frameworks for analyzing complex data, avoiding cognitive biases, and making strategic choices that drive organizational success.',
keyTakeaways: [
'Apply data analysis frameworks to complex business problems',
'Identify and mitigate common cognitive biases in decision making',
'Develop decision-making processes that balance speed and accuracy',
'Communicate data-driven decisions effectively to stakeholders',
'Build data-informed cultures within your organization'
],
agenda: [
{
time: '11:00 - 11:15',
title: 'The Data-Driven Leader',
description: 'Understanding the role of data in modern leadership'
},
{
time: '11:15 - 11:35',
title: 'Decision-Making Frameworks',
description: 'Proven methodologies for structured decision making'
},
{
time: '11:35 - 11:55',
title: 'Overcoming Cognitive Biases',
description: 'Strategies for recognizing and mitigating decision-making pitfalls'
},
{
time: '11:55 - 12:10',
title: 'Case Studies & Applications',
description: 'Real-world examples of data-driven leadership success'
},
{
time: '12:10 - 12:15',
title: 'Implementation Roadmap',
description: 'Next steps for enhancing your decision-making capabilities'
}
],
host: {
id: 6,
name: 'Dr. Michael Thompson',
title: 'Data Strategy Consultant',
company: 'Analytics Leadership Partners',
bio: 'Dr. Michael Thompson specializes in helping leaders leverage data for strategic decision making. With a PhD in Business Analytics and 12 years of consulting experience, he has transformed decision-making processes in organizations across multiple industries.',
avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face',
linkedin: 'https://linkedin.com/in/drmichaelthompson',
email: 'michael@analyticsleadership.com'
},
panelists: [],
faqs: [
{
question: 'Do I need technical data analysis skills for this session?',
answer: 'No technical background required! This session focuses on leadership decision-making frameworks rather than technical data analysis. We\'ll provide accessible tools that any leader can implement immediately.'
}
],
relatedProgrammes: [
{
id: 6,
title: 'Data-Driven Decision Making',
description: 'Learn to make strategic decisions using data analytics and business intelligence',
duration: '8 hours',
format: 'Cohort-based',
image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=240&fit=crop',
price: '₹37,267',
originalPrice: '₹45,567',
category: 'Decision Making & Strategy',
level: 'Advanced',
rating: 4.9,
participants: '1,800+',
slug: 'data-driven-decision-making'
}
]
},
{
id: '7',
slug: 'change-management-excellence',
title: 'Change Management Excellence: Leading Organizational Transformation',
description: 'Develop comprehensive change management strategies to successfully lead organizational transformations, manage resistance, and ensure sustainable change adoption.',
presenter: 'Dr. Lisa Washington',
presenterTitle: 'Organizational Change Expert',
company: 'Change Leadership Institute',
date: '2024-04-19',
time: '10:00',
endTime: '11:30',
timezone: 'EST',
duration: '90 min',
attendees: '2,300+',
maxAttendees: 2800,
category: 'Change Management',
tags: ['Change Management', 'Transformation', 'Leadership', 'Organizational Development'],
thumbnail: 'https://images.unsplash.com/photo-1556761175-b413da4baf72?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjaGFuZ2UlMjBtYW5hZ2VtZW50JTIwbGVhZGVyc2hpcCUyMHRyYW5zZm9ybWF0aW9ufGVufDB8fHx8MTczNTg1NDI3MHww&ixlib=rb-4.0.3&q=80&w=1080',
status: 'recorded',
featured: false,
level: 'Advanced',
format: 'Hybrid',
rating: 4.8,
price: 'Free',
registrationOpen: false,
recordingReady: true,
recordingUrl: 'https://video.example.com/change-management',
zoomUrl: '',
theme: 'Change Leadership',
abstract: 'Successful organizational change requires more than just good planning—it demands exceptional leadership. This session provides comprehensive frameworks for leading change initiatives, managing stakeholder resistance, and creating cultures that embrace continuous transformation.',
keyTakeaways: [
'Develop comprehensive change management strategies for complex initiatives',
'Identify and address common sources of resistance to change',
'Build stakeholder engagement and commitment throughout the change process',
'Create measurement systems to track change adoption and success',
'Develop change-ready organizational cultures that thrive on innovation'
],
agenda: [
{
time: '10:00 - 10:20',
title: 'Change Leadership Fundamentals',
description: 'Understanding the psychology of change and leadership requirements'
},
{
time: '10:20 - 10:40',
title: 'Change Management Frameworks',
description: 'Proven methodologies for planning and executing organizational change'
},
{
time: '10:40 - 10:55',
title: 'Managing Resistance',
description: 'Strategies for identifying and overcoming resistance to change'
},
{
time: '10:55 - 11:15',
title: 'Sustaining Change',
description: 'Ensuring long-term adoption and embedding change into culture'
},
{
time: '11:15 - 11:30',
title: 'Q&A and Case Studies',
description: 'Interactive discussion and real-world application examples'
}
],
host: {
id: 7,
name: 'Dr. Lisa Washington',
title: 'Organizational Change Expert',
company: 'Change Leadership Institute',
bio: 'Dr. Lisa Washington has over 18 years of experience helping organizations navigate major transformations. She holds a doctorate in Organizational Psychology and has authored numerous publications on change leadership and organizational development.',
avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face',
linkedin: 'https://linkedin.com/in/drlisawashington',
email: 'lisa@changeleadership.com'
},
panelists: [],
faqs: [
{
question: 'How can I apply these concepts to small-scale changes?',
answer: 'The principles and frameworks covered scale effectively from small team changes to enterprise-wide transformations. We\'ll provide adaptable tools that work across different change magnitudes.'
}
],
relatedProgrammes: [
{
id: 7,
title: 'Change Management Certification',
description: 'Comprehensive change management training for leaders driving organizational transformation',
duration: '10 weeks',
format: 'Online',
image: 'https://images.unsplash.com/photo-1556761175-b413da4baf72?w=400&h=240&fit=crop',
price: '₹49,567',
originalPrice: '₹61,967',
category: 'Change Management',
level: 'Advanced',
rating: 4.7,
participants: '2,300+',
slug: 'change-management-certification'
}
]
}
];