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, featured: false,
views: '1.5k', views: '1.5k',
likes: 28 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() { export function Articles() {
@@ -147,7 +165,9 @@ export function Articles() {
const [sortBy, setSortBy] = useState('Most Recent'); const [sortBy, setSortBy] = useState('Most Recent');
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid'); const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const articlesPerPage = 6; const articlesPerPage = 4;
const containerRef = useRef<HTMLDivElement>(null);
// Get unique values for filters // Get unique values for filters
const categories = ['All Categories', ...Array.from(new Set(articles.map(article => article.category)))]; const categories = ['All Categories', ...Array.from(new Set(articles.map(article => article.category)))];
@@ -166,31 +186,31 @@ export function Articles() {
// Filter and sort articles // Filter and sort articles
const filteredArticles = articles.filter(article => { const filteredArticles = articles.filter(article => {
const matchesSearch = article.title.toLowerCase().includes(searchTerm.toLowerCase()) || const matchesSearch = article.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
article.excerpt.toLowerCase().includes(searchTerm.toLowerCase()) || article.excerpt.toLowerCase().includes(searchTerm.toLowerCase()) ||
article.author.toLowerCase().includes(searchTerm.toLowerCase()) || article.author.toLowerCase().includes(searchTerm.toLowerCase()) ||
article.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase())); article.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
const matchesCategory = selectedCategory === 'All Categories' || article.category === selectedCategory; const matchesCategory = selectedCategory === 'All Categories' || article.category === selectedCategory;
const matchesAuthor = selectedAuthor === 'All Authors' || article.author === selectedAuthor; const matchesAuthor = selectedAuthor === 'All Authors' || article.author === selectedAuthor;
// Read time filter // FIXED: Read time filter - properly parse the read time
const readTimeMinutes = parseInt(article.readTime); const readTimeMinutes = parseInt(article.readTime.replace(' min read', '')) || 0;
const matchesReadTime = selectedReadTime === 'All Read Times' || const matchesReadTime = selectedReadTime === 'All Read Times' ||
(selectedReadTime === 'Under 5 min' && readTimeMinutes < 5) || (selectedReadTime === 'Under 5 min' && readTimeMinutes < 5) ||
(selectedReadTime === '5-10 min' && readTimeMinutes >= 5 && readTimeMinutes <= 10) || (selectedReadTime === '5-10 min' && readTimeMinutes >= 5 && readTimeMinutes <= 10) ||
(selectedReadTime === 'Over 10 min' && readTimeMinutes > 10); (selectedReadTime === 'Over 10 min' && readTimeMinutes > 10);
// Date range filter // Date range filter
const articleDate = new Date(article.date); const articleDate = new Date(article.date);
const now = new Date(); const now = new Date();
const matchesDateRange = selectedDateRange === 'All Time' || const matchesDateRange = selectedDateRange === 'All Time' ||
(selectedDateRange === 'Last 7 days' && (now.getTime() - articleDate.getTime()) <= 7 * 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 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 3 months' && (now.getTime() - articleDate.getTime()) <= 90 * 24 * 60 * 60 * 1000);
// Topic filter // Topic filter
const matchesTopic = selectedTopic === 'All Topics' || const matchesTopic = selectedTopic === 'All Topics' ||
article.tags.includes(selectedTopic); article.tags.includes(selectedTopic);
return matchesSearch && matchesCategory && matchesAuthor && matchesReadTime && matchesDateRange && matchesTopic; return matchesSearch && matchesCategory && matchesAuthor && matchesReadTime && matchesDateRange && matchesTopic;
}).sort((a, b) => { }).sort((a, b) => {
switch (sortBy) { switch (sortBy) {
@@ -201,7 +221,8 @@ export function Articles() {
case 'title': case 'title':
return a.title.localeCompare(b.title); return a.title.localeCompare(b.title);
case 'readTime': 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': case 'popular':
return parseInt(b.views) - parseInt(a.views); return parseInt(b.views) - parseInt(a.views);
default: default:
@@ -234,12 +255,12 @@ export function Articles() {
const hasActiveFilters = searchTerm || const hasActiveFilters = searchTerm ||
selectedCategory !== 'All Categories' || selectedCategory !== 'All Categories' ||
selectedAuthor !== 'All Authors' || selectedAuthor !== 'All Authors' ||
selectedReadTime !== 'All Read Times' || selectedReadTime !== 'All Read Times' ||
selectedDateRange !== 'All Time' || selectedDateRange !== 'All Time' ||
selectedTopic !== 'All Topics'; selectedTopic !== 'All Topics';
return ( return (
<div style={{ backgroundColor: '#FFFFFF' }}> <div style={{ backgroundColor: '#FFFFFF' }}>
@@ -260,11 +281,11 @@ export function Articles() {
<div className="dot"></div> <div className="dot"></div>
<span className="text">INSIGHTS & KNOWLEDGE</span> <span className="text">INSIGHTS & KNOWLEDGE</span>
</div> </div>
<h1 className="text-h1-white mb-6"> <h1 className="text-h1-white mb-6">
Articles & Research Articles & Research
</h1> </h1>
<p className="text-body-lg-white mb-8 max-w-2xl mx-auto"> <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. Discover cutting-edge insights, research findings, and expert perspectives on leadership development, management strategies, and organizational excellence.
</p> </p>
@@ -320,11 +341,10 @@ export function Articles() {
<div className="flex items-center border border-gray-300 rounded-lg overflow-hidden"> <div className="flex items-center border border-gray-300 rounded-lg overflow-hidden">
<button <button
onClick={() => setViewMode('grid')} onClick={() => setViewMode('grid')}
className={`p-2 transition-colors ${ className={`p-2 transition-colors ${viewMode === 'grid'
viewMode === 'grid' ? 'text-white'
? 'text-white'
: 'bg-white text-gray-600 hover:bg-gray-50' : 'bg-white text-gray-600 hover:bg-gray-50'
}`} }`}
style={{ style={{
backgroundColor: viewMode === 'grid' ? 'var(--color-primary)' : undefined backgroundColor: viewMode === 'grid' ? 'var(--color-primary)' : undefined
}} }}
@@ -334,11 +354,10 @@ export function Articles() {
</button> </button>
<button <button
onClick={() => setViewMode('list')} onClick={() => setViewMode('list')}
className={`p-2 transition-colors ${ className={`p-2 transition-colors ${viewMode === 'list'
viewMode === 'list' ? 'text-white'
? 'text-white'
: 'bg-white text-gray-600 hover:bg-gray-50' : 'bg-white text-gray-600 hover:bg-gray-50'
}`} }`}
style={{ style={{
backgroundColor: viewMode === 'list' ? 'var(--color-primary)' : undefined backgroundColor: viewMode === 'list' ? 'var(--color-primary)' : undefined
}} }}
@@ -521,9 +540,9 @@ export function Articles() {
<> <>
{/* Grid View */} {/* Grid View */}
{viewMode === 'grid' && ( {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) => ( {currentArticles.map((article) => (
<Card <Card
key={article.id} key={article.id}
className="overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer group" className="overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer group"
onClick={() => navigateTo(`/learning/articles/${article.slug}`)} onClick={() => navigateTo(`/learning/articles/${article.slug}`)}
@@ -536,7 +555,7 @@ export function Articles() {
/> />
{article.featured && ( {article.featured && (
<div className="absolute top-4 right-4"> <div className="absolute top-4 right-4">
<Badge <Badge
variant="secondary" variant="secondary"
className="bg-yellow-100 text-yellow-800 border-yellow-200" className="bg-yellow-100 text-yellow-800 border-yellow-200"
> >
@@ -552,11 +571,11 @@ export function Articles() {
</Badge> </Badge>
<span className="text-small text-muted">{article.readTime}</span> <span className="text-small text-muted">{article.readTime}</span>
</div> </div>
<h3 className="text-h4 mb-3 group-hover:text-blue-600 transition-colors line-clamp-2"> <h3 className="text-h4 mb-3 group-hover:text-blue-600 transition-colors line-clamp-2">
{article.title} {article.title}
</h3> </h3>
<p className="text-small text-muted mb-4 line-clamp-3"> <p className="text-small text-muted mb-4 line-clamp-3">
{article.excerpt} {article.excerpt}
</p> </p>
@@ -584,7 +603,7 @@ export function Articles() {
{viewMode === 'list' && ( {viewMode === 'list' && (
<div className="space-y-6"> <div className="space-y-6">
{currentArticles.map((article) => ( {currentArticles.map((article) => (
<Card <Card
key={article.id} key={article.id}
className="overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer group" className="overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer group"
onClick={() => navigateTo(`/learning/articles/${article.slug}`)} onClick={() => navigateTo(`/learning/articles/${article.slug}`)}
@@ -598,7 +617,7 @@ export function Articles() {
/> />
{article.featured && ( {article.featured && (
<div className="absolute top-2 right-2"> <div className="absolute top-2 right-2">
<Badge <Badge
variant="secondary" variant="secondary"
className="bg-yellow-100 text-yellow-800 border-yellow-200 text-xs" className="bg-yellow-100 text-yellow-800 border-yellow-200 text-xs"
> >
@@ -621,11 +640,11 @@ export function Articles() {
<span>{article.views}</span> <span>{article.views}</span>
</div> </div>
</div> </div>
<h3 className="text-h4 mb-2 group-hover:text-blue-600 transition-colors"> <h3 className="text-h4 mb-2 group-hover:text-blue-600 transition-colors">
{article.title} {article.title}
</h3> </h3>
<p className="text-body text-muted mb-3"> <p className="text-body text-muted mb-3">
{article.excerpt} {article.excerpt}
</p> </p>
@@ -657,29 +676,71 @@ export function Articles() {
{/* Pagination */} {/* Pagination */}
{totalPages > 1 && ( {totalPages > 1 && (
<div className="flex items-center justify-center gap-4 mt-12"> <div className="flex items-center justify-center gap-2">
<Button <Button
variant="outline" 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} 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 Previous
</Button> </Button>
<span className="text-body"> <div className="flex items-center gap-1">
Page {currentPage} of {totalPages} {Array.from({ length: totalPages }, (_, i) => {
</span> 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 <Button
variant="outline" 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} disabled={currentPage === totalPages}
className="text-body" className="flex items-center gap-1 border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
> >
Next Next
<ChevronRight className="w-4 h-4 ml-2" /> <ChevronRight className="w-4 h-4" />
</Button> </Button>
</div> </div>
)} )}
@@ -703,9 +764,9 @@ export function Articles() {
</div> </div>
<div className="relative h-full flex items-center justify-end section-margin-x"> <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" className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
style={{ style={{
backgroundColor: 'var(--color-brand-primary)' backgroundColor: 'var(--color-brand-primary)'
}} }}
> >
@@ -715,8 +776,8 @@ export function Articles() {
</div> </div>
<h2 className="text-h2-white mb-8"> <h2 className="text-h2-white mb-8">
Ready to explore more insights? Ready to explore more insights?
<span <span
className="italic" className="italic"
style={{ color: 'var(--color-brand-accent)' }} style={{ color: 'var(--color-brand-accent)' }}
> >
@@ -725,7 +786,7 @@ export function Articles() {
our complete library of leadership resources. our complete library of leadership resources.
</h2> </h2>
<PrimaryCTAButton <PrimaryCTAButton
text="Browse All Resources" text="Browse All Resources"
onClick={() => navigateTo('/learning/articles')} onClick={() => navigateTo('/learning/articles')}
ariaLabel="Browse all leadership articles and resources" ariaLabel="Browse all leadership articles and resources"

136
src/components/LearningFacilityNew.tsx
View File

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

178
src/components/Webinars.tsx
View File

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

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

@@ -198,73 +198,71 @@ export function CultureCompetence() {
{/* 1. What Is This Service */} {/* 1. What Is This Service */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}> <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
<div className="section-margin-x"> <div className="section-margin-x">
<div className="w-full section-margin-x"> <div className="max-w-6xl mx-auto">
<div className="max-w-6xl mx-auto"> <div className="text-center mb-12">
<div className="text-center mb-12"> <BrandedTag text="What Is This Service?" />
<BrandedTag text="What Is This Service?" /> <h2 className="text-h2 mb-8 text-[#26231A]">Culture & Competence Transformation</h2>
<h2 className="text-h2 mb-8 text-[#26231A]">Culture & Competence Transformation</h2> <div className="max-w-4xl mx-auto space-y-6">
<div className="max-w-4xl mx-auto space-y-6"> <p className="text-body-lg text-[#6F6F6F] leading-relaxed">
<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.
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> </p>
<div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg"> </div>
<p className="text-body-lg text-[#26231A] leading-relaxed"> </div>
<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. </div>
</p>
<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> </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> </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="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="flex flex-col items-center text-center"> <div
<div className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
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' }}
style={{ backgroundColor: '#04045B' }} >
> <Target className="w-8 h-8 text-white" />
<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>
<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>
<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="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="flex flex-col items-center text-center">
<div <div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300" 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' }} style={{ backgroundColor: '#04045B' }}
> >
<Target className="w-8 h-8 text-white" /> <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">
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> </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> </div>
</div> </div>
@@ -370,7 +368,7 @@ export function CultureCompetence() {
{/* 4. Our Approach */} {/* 4. Our Approach */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}> <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
<div className="section-margin-x"> <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="max-w-6xl mx-auto">
<div className="text-center mb-16"> <div className="text-center mb-16">
<BrandedTag text="Our Approach" /> <BrandedTag text="Our Approach" />
@@ -380,116 +378,371 @@ export function CultureCompetence() {
</p> </p>
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start"> {/* Flowchart Container with Connecting Lines */}
{/* Left Column - Core Frameworks */} <div className="relative mb-16 flex flex-col items-center">
<div> {/* Desktop: Horizontal Flowchart */}
<h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3> <div className="hidden lg:block w-full max-w-5xl">
<div className="space-y-8"> <div className="relative">
<div className="flex items-start gap-4"> {/* Row 1: Frameworks, Pedagogy, Delivery */}
<div <div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" {/* Frameworks */}
style={{ backgroundColor: '#04045B' }} <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-5 h-5 text-white" /> <Compass className="w-6 h-6 text-white" />
</div> </div>
<div className="flex-1"> <h3 className="text-h4 text-[#26231A] mb-3">Culture Frameworks</h3>
<h4 className="text-h4 mb-3 text-[#26231A]">Culture Assessment & Diagnosis</h4> <p className="text-body text-[#6F6F6F] mb-4">
<p className="text-body text-[#6F6F6F] leading-relaxed"> Diagnostic models and competency frameworks for transformation
Comprehensive evaluation of current culture, values alignment, and engagement drivers
</p> </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> </div>
<div className="flex items-start gap-4"> {/* Vertical Connector - Center Flow Down */}
<div <div className="flex justify-center mb-6">
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" <div className="flex flex-col items-center">
style={{ backgroundColor: '#04045B' }} <div className="w-0.5 h-12 bg-[#F8C301]"></div>
> <ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
<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>
</div> </div>
</div> </div>
<div className="flex items-start gap-4"> {/* Row 2: Assessment, Coaching */}
<div <div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" {/* Assessment Integration */}
style={{ backgroundColor: '#04045B' }} <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">
<Settings className="w-5 h-5 text-white" /> <BarChart3 className="w-6 h-6 text-white" />
</div> </div>
<div className="flex-1"> <h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
<h4 className="text-h4 mb-3 text-[#26231A]">Change Management Integration</h4> <p className="text-body text-[#6F6F6F] mb-4">
<p className="text-body text-[#6F6F6F] leading-relaxed"> Comprehensive measurement to track culture transformation
Structured change approach for sustainable culture and competency transformation
</p> </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> </div>
<div className="flex items-start gap-4"> {/* Final Vertical Connector - Center Flow Down to Outcome */}
<div <div className="flex justify-center mb-6">
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" <div className="flex flex-col items-center">
style={{ backgroundColor: '#04045B' }} <div className="w-0.5 h-12 bg-[#04045B]"></div>
> <ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
<BarChart3 className="w-5 h-5 text-white" />
</div> </div>
<div className="flex-1"> </div>
<h4 className="text-h4 mb-3 text-[#26231A]">Measurement & Analytics</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed"> {/* Row 3: Expected Outcome - Centered */}
Robust measurement framework to track progress and demonstrate impact <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> </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>
</div> </div>
</div> </div>
{/* Right Column - Delivery Modes */} {/* Tablet & Mobile: Vertical Flowchart */}
<div className="bg-white border border-gray-200 rounded-xl p-8"> <div className="lg:hidden space-y-8">
<h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Support</h4> {/* Frameworks */}
<div className="space-y-6"> <div className="relative">
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0"> <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div> <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<div className="flex-1"> <Compass className="w-6 h-6 text-white" />
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Culture Workshops</h5> </div>
<p className="text-small text-[#6F6F6F] leading-relaxed"> <h3 className="text-h4 text-[#26231A] mb-3">Culture Frameworks</h3>
Interactive sessions to define and embed desired organizational culture <p className="text-body text-[#6F6F6F] mb-4">
</p> 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>
</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"> {/* Pedagogy */}
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div> <div className="relative">
<div className="flex-1"> <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Competency Development</h5> <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<p className="text-small text-[#6F6F6F] leading-relaxed"> <Brain className="w-6 h-6 text-white" />
Targeted programs to build critical organizational capabilities and skills </div>
</p> <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>
</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"> {/* Delivery Modes */}
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div> <div className="relative">
<div className="flex-1"> <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Leadership Alignment</h5> <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<p className="text-small text-[#6F6F6F] leading-relaxed"> <Settings className="w-6 h-6 text-white" />
Executive sessions to ensure leadership commitment and cultural modeling </div>
</p> <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>
{/* 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"> {/* Assessment Integration */}
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div> <div className="relative">
<div className="flex-1"> <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Continuous Monitoring</h5> <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<p className="text-small text-[#6F6F6F] leading-relaxed"> <BarChart3 className="w-6 h-6 text-white" />
Ongoing assessment and adjustment to ensure sustainable transformation </div>
</p> <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>
</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> </div>
</div> </div>

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

@@ -199,73 +199,71 @@ export function ExecutiveCoaching() {
{/* 1. What Is This Service */} {/* 1. What Is This Service */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}> <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
<div className="section-margin-x"> <div className="section-margin-x">
<div className="w-full section-margin-x"> <div className="max-w-6xl mx-auto">
<div className="max-w-6xl mx-auto"> <div className="text-center mb-12">
<div className="text-center mb-12"> <BrandedTag text="What Is This Service?" />
<BrandedTag text="What Is This Service?" /> <h2 className="text-h2 mb-8 text-[#26231A]">Personalized Leadership Development</h2>
<h2 className="text-h2 mb-8 text-[#26231A]">Personalized Leadership Development</h2> <div className="max-w-4xl mx-auto space-y-6">
<div className="max-w-4xl mx-auto space-y-6"> <p className="text-body-lg text-[#6F6F6F] leading-relaxed">
<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.
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> </p>
<div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg"> </div>
<p className="text-body-lg text-[#26231A] leading-relaxed"> </div>
<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. </div>
</p>
<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> </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> </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="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="flex flex-col items-center text-center"> <div
<div className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
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' }}
style={{ backgroundColor: '#04045B' }} >
> <Network className="w-8 h-8 text-white" />
<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>
<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>
<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="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="flex flex-col items-center text-center">
<div <div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300" 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' }} style={{ backgroundColor: '#04045B' }}
> >
<Network className="w-8 h-8 text-white" /> <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">
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> </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> </div>
</div> </div>
@@ -375,75 +373,381 @@ export function ExecutiveCoaching() {
{/* 4. Our Approach */} {/* 4. Our Approach */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}> <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
<div className="section-margin-x"> <div className="section-margin-x">
<div className="max-w-6xl mx-auto"> <div className="w-full">
<div className="text-center mb-16"> <div className="max-w-6xl mx-auto">
<BrandedTag text="Our Approach" /> <div className="text-center mb-16">
<h2 className="text-h2 mb-8">Comprehensive Coaching & Mentoring Framework</h2> <BrandedTag text="Our Approach" />
<p className="text-body-lg text-muted max-w-3xl mx-auto"> <h2 className="text-h2 mb-8 text-[#26231A]">Comprehensive Coaching & Mentoring Framework</h2>
Our proven methodology combines individual coaching, strategic mentoring, and continuous development for sustainable leadership growth. <p className="text-body-lg text-[#6F6F6F] max-w-3xl mx-auto">
</p> Our proven methodology combines individual coaching, strategic mentoring, and continuous development for sustainable leadership growth.
</div> </p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> {/* Flowchart Container with Connecting Lines */}
<div> <div className="relative mb-16 flex flex-col items-center">
<h3 className="text-h3 mb-6">Core Frameworks & Methodologies</h3> {/* Desktop: Horizontal Flowchart */}
<div className="space-y-6"> <div className="hidden lg:block w-full max-w-5xl">
<div className="flex gap-4"> <div className="relative">
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center flex-shrink-0"> {/* Row 1: Frameworks, Pedagogy, Delivery */}
<Eye className="w-4 h-4 text-white" /> <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>
<div>
<h4 className="text-h4 mb-2">Leadership Assessment & Profiling</h4> {/* Vertical Connector - Center Flow Down */}
<p className="text-body text-muted">Comprehensive evaluation of leadership strengths, development areas, and growth potential</p> <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> </div>
<div className="flex gap-4"> </div>
<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" /> {/* 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>
<div> {/* Connector Arrow */}
<h4 className="text-h4 mb-2">Personalized Coaching Sessions</h4> <div className="flex justify-center my-4">
<p className="text-body text-muted">One-on-one coaching tailored to individual needs, goals, and development priorities</p> <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
</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"> {/* Pedagogy */}
<Network className="w-4 h-4 text-white" /> <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>
<div> {/* Connector Arrow */}
<h4 className="text-h4 mb-2">Strategic Mentoring Relationships</h4> <div className="flex justify-center my-4">
<p className="text-body text-muted">Long-term mentoring partnerships for career guidance and strategic development</p> <ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
</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"> {/* Delivery Modes */}
<BarChart3 className="w-4 h-4 text-white" /> <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>
<div> {/* Connector Arrow */}
<h4 className="text-h4 mb-2">Progress Tracking & Measurement</h4> <div className="flex justify-center my-4">
<p className="text-body text-muted">Continuous assessment and measurement of development progress and impact</p> <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> </div>
</div> </div>
<div className="bg-white p-8 rounded-2xl shadow-lg">
<h4 className="text-h4 mb-6">Delivery Modes & Support</h4> {/* Framework Effectiveness */}
<div className="space-y-4"> <div className="bg-gray-50 rounded-xl p-8">
<div className="border-l-4 border-primary pl-4"> <div className="text-center mb-8">
<h5 className="font-semibold text-body mb-1">Individual Coaching</h5> <h3 className="text-h3 text-[#26231A] mb-4">Framework Effectiveness</h3>
<p className="text-small text-muted">One-on-one sessions with certified executive coaches</p> <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>
<div className="border-l-4 border-accent pl-4">
<h5 className="font-semibold text-body mb-1">360-Degree Feedback</h5> <div className="text-center bg-white rounded-lg p-6">
<p className="text-small text-muted">Comprehensive feedback from peers, supervisors, and direct reports</p> <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>
<div className="border-l-4 border-primary pl-4">
<h5 className="font-semibold text-body mb-1">Mentoring Circles</h5> <div className="text-center bg-white rounded-lg p-6">
<p className="text-small text-muted">Group mentoring sessions with peer leaders and senior executives</p> <div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
</div> <TrendingUp className="w-7 h-7 text-white" />
<div className="border-l-4 border-accent pl-4"> </div>
<h5 className="font-semibold text-body mb-1">Virtual & In-Person Options</h5> <div className="text-h2 text-[#04045B] mb-2">86%</div>
<p className="text-small text-muted">Flexible delivery modes to accommodate busy executive schedules</p> <p className="text-body text-[#6F6F6F]">Career Advancement Success</p>
</div> </div>
</div> </div>
</div> </div>

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

@@ -198,7 +198,6 @@ export function LeadershipDevelopment() {
{/* 1. What Is This Service */} {/* 1. What Is This Service */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}> <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
<div className="section-margin-x"> <div className="section-margin-x">
<div className="w-full section-margin-x">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center mb-12"> <div className="text-center mb-12">
<BrandedTag text="What Is This Service?" /> <BrandedTag text="What Is This Service?" />
@@ -268,7 +267,6 @@ export function LeadershipDevelopment() {
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</section> </section>
@@ -370,7 +368,7 @@ export function LeadershipDevelopment() {
{/* 4. Our Approach */} {/* 4. Our Approach */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}> <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
<div className="section-margin-x"> <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="max-w-6xl mx-auto">
<div className="text-center mb-16"> <div className="text-center mb-16">
<BrandedTag text="Our Approach" /> <BrandedTag text="Our Approach" />
@@ -380,116 +378,371 @@ export function LeadershipDevelopment() {
</p> </p>
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start"> {/* Flowchart Container with Connecting Lines */}
{/* Left Column - Core Frameworks */} <div className="relative mb-16 flex flex-col items-center">
<div> {/* Desktop: Horizontal Flowchart */}
<h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3> <div className="hidden lg:block w-full max-w-5xl">
<div className="space-y-8"> <div className="relative">
<div className="flex items-start gap-4"> {/* Row 1: Frameworks, Pedagogy, Delivery */}
<div <div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" {/* Frameworks */}
style={{ backgroundColor: '#04045B' }} <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-5 h-5 text-white" /> <Lightbulb className="w-6 h-6 text-white" />
</div> </div>
<div className="flex-1"> <h3 className="text-h4 text-[#26231A] mb-3">Strategic Frameworks</h3>
<h4 className="text-h4 mb-3 text-[#26231A]">360-Degree Leadership Assessment</h4> <p className="text-body text-[#6F6F6F] mb-4">
<p className="text-body text-[#6F6F6F] leading-relaxed"> Executive leadership models and strategic thinking frameworks
Comprehensive evaluation of leadership capabilities, strategic readiness, and executive presence
</p> </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> </div>
<div className="flex items-start gap-4"> {/* Vertical Connector - Center Flow Down */}
<div <div className="flex justify-center mb-6">
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" <div className="flex flex-col items-center">
style={{ backgroundColor: '#04045B' }} <div className="w-0.5 h-12 bg-[#F8C301]"></div>
> <ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
<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>
</div> </div>
</div> </div>
<div className="flex items-start gap-4"> {/* Row 2: Assessment, Coaching */}
<div <div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" {/* Assessment Integration */}
style={{ backgroundColor: '#04045B' }} <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">
<Network className="w-5 h-5 text-white" /> <BarChart3 className="w-6 h-6 text-white" />
</div> </div>
<div className="flex-1"> <h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
<h4 className="text-h4 mb-3 text-[#26231A]">Executive Coaching Integration</h4> <p className="text-body text-[#6F6F6F] mb-4">
<p className="text-body text-[#6F6F6F] leading-relaxed"> Comprehensive evaluation to measure executive readiness
One-on-one coaching support with experienced executive coaches throughout the journey
</p> </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> </div>
<div className="flex items-start gap-4"> {/* Final Vertical Connector - Center Flow Down to Outcome */}
<div <div className="flex justify-center mb-6">
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" <div className="flex flex-col items-center">
style={{ backgroundColor: '#04045B' }} <div className="w-0.5 h-12 bg-[#04045B]"></div>
> <ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
<BarChart3 className="w-5 h-5 text-white" />
</div> </div>
<div className="flex-1"> </div>
<h4 className="text-h4 mb-3 text-[#26231A]">Real-World Application</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed"> {/* Row 3: Expected Outcome - Centered */}
Strategic projects and business challenges that drive immediate organizational impact <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> </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>
</div> </div>
</div> </div>
{/* Right Column - Delivery Modes */} {/* Tablet & Mobile: Vertical Flowchart */}
<div className="bg-white border border-gray-200 rounded-xl p-8"> <div className="lg:hidden space-y-8">
<h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Assessments</h4> {/* Frameworks */}
<div className="space-y-6"> <div className="relative">
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0"> <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div> <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<div className="flex-1"> <Lightbulb className="w-6 h-6 text-white" />
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Executive Workshops</h5> </div>
<p className="text-small text-[#6F6F6F] leading-relaxed"> <h3 className="text-h4 text-[#26231A] mb-3">Strategic Frameworks</h3>
Intensive strategic leadership workshops with peer learning and expert facilitation <p className="text-body text-[#6F6F6F] mb-4">
</p> 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>
</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"> {/* Pedagogy */}
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div> <div className="relative">
<div className="flex-1"> <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Leadership Simulations</h5> <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<p className="text-small text-[#6F6F6F] leading-relaxed"> <Brain className="w-6 h-6 text-white" />
Business simulations and strategic decision-making exercises for practical application </div>
</p> <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>
</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"> {/* Delivery Modes */}
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div> <div className="relative">
<div className="flex-1"> <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Executive Coaching</h5> <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<p className="text-small text-[#6F6F6F] leading-relaxed"> <Settings className="w-6 h-6 text-white" />
Individual coaching sessions with experienced executive coaches for personalized development </div>
</p> <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>
{/* 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"> {/* Assessment Integration */}
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div> <div className="relative">
<div className="flex-1"> <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Impact Measurement</h5> <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<p className="text-small text-[#6F6F6F] leading-relaxed"> <BarChart3 className="w-6 h-6 text-white" />
Ongoing assessment and measurement of leadership effectiveness and business impact </div>
</p> <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>
</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> </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="w-full section-margin-x">
<div className="max-w-4xl"> <div className="max-w-4xl">
{/* Back Navigation */} {/* Back Navigation */}
<div className="mb-8"> {/* <div className="mb-8">
<Button <Button
variant="ghost" variant="ghost"
onClick={() => navigateTo('/services')} onClick={() => navigateTo('/services')}
@@ -222,7 +222,7 @@ export function LeadershipPipelineDevelopment() {
<ArrowLeft className="w-4 h-4 mr-2" /> <ArrowLeft className="w-4 h-4 mr-2" />
Back to Services Back to Services
</Button> </Button>
</div> </div> */}
<div className="mb-8"> <div className="mb-8">
<h1 className="text-h1-white"> <h1 className="text-h1-white">
@@ -250,7 +250,6 @@ export function LeadershipPipelineDevelopment() {
{/* 1. What Is This Service */} {/* 1. What Is This Service */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}> <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
<div className="section-margin-x"> <div className="section-margin-x">
<div className="w-full section-margin-x">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="text-center mb-12"> <div className="text-center mb-12">
<BrandedTag text="What Is This Service?" /> <BrandedTag text="What Is This Service?" />
@@ -320,7 +319,6 @@ export function LeadershipPipelineDevelopment() {
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</section> </section>
@@ -422,7 +420,7 @@ export function LeadershipPipelineDevelopment() {
{/* 4. Our Approach */} {/* 4. Our Approach */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}> <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
<div className="section-margin-x"> <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="max-w-6xl mx-auto">
<div className="text-center mb-16"> <div className="text-center mb-16">
<BrandedTag text="Our Approach" /> <BrandedTag text="Our Approach" />
@@ -432,116 +430,372 @@ export function LeadershipPipelineDevelopment() {
</p> </p>
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start"> {/* Clean Grid Layout */}
{/* Left Column - Core Frameworks */} {/* Flowchart Container with Connecting Lines */}
<div> <div className="relative mb-16 flex flex-col items-center">
<h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3> {/* Desktop: Horizontal Flowchart */}
<div className="space-y-8"> <div className="hidden lg:block w-full max-w-5xl">
<div className="flex items-start gap-4"> <div className="relative">
<div {/* Row 1: Frameworks, Pedagogy, Delivery */}
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" <div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
style={{ backgroundColor: '#04045B' }} {/* Frameworks */}
> <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
<Eye className="w-5 h-5 text-white" /> <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
</div> <Layers className="w-6 h-6 text-white" />
<div className="flex-1"> </div>
<h4 className="text-h4 mb-3 text-[#26231A]">Talent Assessment & Identification</h4> <h3 className="text-h4 text-[#26231A] mb-3">Frameworks Used</h3>
<p className="text-body text-[#6F6F6F] leading-relaxed"> <p className="text-body text-[#6F6F6F] mb-4">
Systematic identification of high-potential talent using validated assessment tools Establish competency models and leadership progression pathways
</p> </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> </div>
<div className="flex items-start gap-4"> {/* Vertical Connector - Center Flow Down */}
<div <div className="flex justify-center mb-6">
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" <div className="flex flex-col items-center">
style={{ backgroundColor: '#04045B' }} <div className="w-0.5 h-12 bg-[#F8C301]"></div>
> <ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
<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>
</div> </div>
</div> </div>
<div className="flex items-start gap-4"> {/* Row 2: Assessment, Coaching */}
<div <div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" {/* Assessment Integration */}
style={{ backgroundColor: '#04045B' }} <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">
<Users className="w-5 h-5 text-white" /> <BarChart3 className="w-6 h-6 text-white" />
</div> </div>
<div className="flex-1"> <h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
<h4 className="text-h4 mb-3 text-[#26231A]">Mentoring & Coaching Integration</h4> <p className="text-body text-[#6F6F6F] mb-4">
<p className="text-body text-[#6F6F6F] leading-relaxed"> Comprehensive evaluation methods to measure progress and potential
Comprehensive support through mentoring relationships and executive coaching
</p> </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> </div>
<div className="flex items-start gap-4"> {/* Final Vertical Connector - Center Flow Down to Outcome */}
<div <div className="flex justify-center mb-6">
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" <div className="flex flex-col items-center">
style={{ backgroundColor: '#04045B' }} <div className="w-0.5 h-12 bg-[#04045B]"></div>
> <ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
<Building className="w-5 h-5 text-white" />
</div> </div>
<div className="flex-1"> </div>
<h4 className="text-h4 mb-3 text-[#26231A]">Succession Planning Integration</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed"> {/* Row 3: Expected Outcome - Centered */}
Direct integration with organizational succession planning and talent management <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> </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>
</div> </div>
</div> </div>
{/* Right Column - Delivery Modes */} {/* Tablet & Mobile: Vertical Flowchart */}
<div className="bg-white border border-gray-200 rounded-xl p-8"> <div className="lg:hidden space-y-8">
<h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Support</h4> {/* Frameworks */}
<div className="space-y-6"> <div className="relative">
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0"> <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div> <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<div className="flex-1"> <Layers className="w-6 h-6 text-white" />
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Assessment Centers</h5> </div>
<p className="text-small text-[#6F6F6F] leading-relaxed"> <h3 className="text-h4 text-[#26231A] mb-3">Frameworks Used</h3>
Comprehensive leadership potential evaluation and 360-degree feedback <p className="text-body text-[#6F6F6F] mb-4">
</p> 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>
</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"> {/* Pedagogy */}
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div> <div className="relative">
<div className="flex-1"> <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Development Cohorts</h5> <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<p className="text-small text-[#6F6F6F] leading-relaxed"> <Brain className="w-6 h-6 text-white" />
Structured learning programs with peer networks and group projects </div>
</p> <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>
</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"> {/* Delivery Modes */}
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div> <div className="relative">
<div className="flex-1"> <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Stretch Assignments</h5> <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<p className="text-small text-[#6F6F6F] leading-relaxed"> <Settings className="w-6 h-6 text-white" />
Real-world leadership opportunities and cross-functional projects </div>
</p> <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>
{/* 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"> {/* Assessment Integration */}
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div> <div className="relative">
<div className="flex-1"> <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Succession Reviews</h5> <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<p className="text-small text-[#6F6F6F] leading-relaxed"> <BarChart3 className="w-6 h-6 text-white" />
Regular talent reviews and succession readiness assessments </div>
</p> <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>
</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> </div>
</div> </div>

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

@@ -197,73 +197,71 @@ export function ManagementDevelopment() {
{/* 1. What Is This Service */} {/* 1. What Is This Service */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}> <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
<div className="section-margin-x"> <div className="section-margin-x">
<div className="w-full section-margin-x"> <div className="max-w-6xl mx-auto">
<div className="max-w-6xl mx-auto"> <div className="text-center mb-12">
<div className="text-center mb-12"> <BrandedTag text="What Is This Service?" />
<BrandedTag text="What Is This Service?" /> <h2 className="text-h2 mb-8 text-[#26231A]">Comprehensive Management Development</h2>
<h2 className="text-h2 mb-8 text-[#26231A]">Comprehensive Management Development</h2> <div className="max-w-4xl mx-auto space-y-6">
<div className="max-w-4xl mx-auto space-y-6"> <p className="text-body-lg text-[#6F6F6F] leading-relaxed">
<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.
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> </p>
<div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg"> </div>
<p className="text-body-lg text-[#26231A] leading-relaxed"> </div>
<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. </div>
</p>
<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> </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> </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="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="flex flex-col items-center text-center"> <div
<div className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
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' }}
style={{ backgroundColor: '#04045B' }} >
> <TrendingUp className="w-8 h-8 text-white" />
<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>
<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>
<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="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="flex flex-col items-center text-center">
<div <div
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300" 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' }} style={{ backgroundColor: '#04045B' }}
> >
<TrendingUp className="w-8 h-8 text-white" /> <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">
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> </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> </div>
</div> </div>
@@ -369,7 +367,7 @@ export function ManagementDevelopment() {
{/* 4. Our Approach */} {/* 4. Our Approach */}
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}> <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
<div className="section-margin-x"> <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="max-w-6xl mx-auto">
<div className="text-center mb-16"> <div className="text-center mb-16">
<BrandedTag text="Our Approach" /> <BrandedTag text="Our Approach" />
@@ -379,116 +377,371 @@ export function ManagementDevelopment() {
</p> </p>
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start"> {/* Flowchart Container with Connecting Lines */}
{/* Left Column - Core Frameworks */} <div className="relative mb-16 flex flex-col items-center">
<div> {/* Desktop: Horizontal Flowchart */}
<h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3> <div className="hidden lg:block w-full max-w-5xl">
<div className="space-y-8"> <div className="relative">
<div className="flex items-start gap-4"> {/* Row 1: Frameworks, Pedagogy, Delivery */}
<div <div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" {/* Frameworks */}
style={{ backgroundColor: '#04045B' }} <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-5 h-5 text-white" /> <Users className="w-6 h-6 text-white" />
</div> </div>
<div className="flex-1"> <h3 className="text-h4 text-[#26231A] mb-3">Management Frameworks</h3>
<h4 className="text-h4 mb-3 text-[#26231A]">People Management Fundamentals</h4> <p className="text-body text-[#6F6F6F] mb-4">
<p className="text-body text-[#6F6F6F] leading-relaxed"> Core management models and team leadership principles
Essential skills for team leadership, delegation, and performance management
</p> </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> </div>
<div className="flex items-start gap-4"> {/* Vertical Connector - Center Flow Down */}
<div <div className="flex justify-center mb-6">
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" <div className="flex flex-col items-center">
style={{ backgroundColor: '#04045B' }} <div className="w-0.5 h-12 bg-[#F8C301]"></div>
> <ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
<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>
</div> </div>
</div> </div>
<div className="flex items-start gap-4"> {/* Row 2: Assessment, Coaching */}
<div <div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" {/* Assessment Integration */}
style={{ backgroundColor: '#04045B' }} <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">
<Target className="w-5 h-5 text-white" /> <BarChart3 className="w-6 h-6 text-white" />
</div> </div>
<div className="flex-1"> <h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
<h4 className="text-h4 mb-3 text-[#26231A]">Performance Management Systems</h4> <p className="text-body text-[#6F6F6F] mb-4">
<p className="text-body text-[#6F6F6F] leading-relaxed"> Comprehensive evaluation to track manager effectiveness
Tools and techniques for setting goals, providing feedback, and driving results
</p> </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> </div>
<div className="flex items-start gap-4"> {/* Final Vertical Connector - Center Flow Down to Outcome */}
<div <div className="flex justify-center mb-6">
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" <div className="flex flex-col items-center">
style={{ backgroundColor: '#04045B' }} <div className="w-0.5 h-12 bg-[#04045B]"></div>
> <ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
<Award className="w-5 h-5 text-white" />
</div> </div>
<div className="flex-1"> </div>
<h4 className="text-h4 mb-3 text-[#26231A]">Team Development Strategies</h4>
<p className="text-body text-[#6F6F6F] leading-relaxed"> {/* Row 3: Expected Outcome - Centered */}
Building high-performing teams and fostering collaborative work environments <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> </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>
</div> </div>
</div> </div>
{/* Right Column - Delivery Modes */} {/* Tablet & Mobile: Vertical Flowchart */}
<div className="bg-white border border-gray-200 rounded-xl p-8"> <div className="lg:hidden space-y-8">
<h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Support</h4> {/* Frameworks */}
<div className="space-y-6"> <div className="relative">
<div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0"> <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div> <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<div className="flex-1"> <Users className="w-6 h-6 text-white" />
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Interactive Workshops</h5> </div>
<p className="text-small text-[#6F6F6F] leading-relaxed"> <h3 className="text-h4 text-[#26231A] mb-3">Management Frameworks</h3>
Hands-on learning with real-world scenarios and case studies for immediate application <p className="text-body text-[#6F6F6F] mb-4">
</p> 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>
</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"> {/* Pedagogy */}
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div> <div className="relative">
<div className="flex-1"> <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Peer Learning Cohorts</h5> <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<p className="text-small text-[#6F6F6F] leading-relaxed"> <Brain className="w-6 h-6 text-white" />
Manager groups for shared learning and best practice exchange across teams </div>
</p> <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>
</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"> {/* Delivery Modes */}
<div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div> <div className="relative">
<div className="flex-1"> <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Individual Coaching</h5> <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
<p className="text-small text-[#6F6F6F] leading-relaxed"> <Settings className="w-6 h-6 text-white" />
One-on-one support for personalized development needs and leadership challenges </div>
</p> <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>
{/* 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"> {/* Assessment Integration */}
<div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div> <div className="relative">
<div className="flex-1"> <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
<h5 className="text-body font-semibold mb-2 text-[#26231A]">Action Learning Projects</h5> <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
<p className="text-small text-[#6F6F6F] leading-relaxed"> <BarChart3 className="w-6 h-6 text-white" />
Real workplace challenges for immediate application and measurable business impact </div>
</p> <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>
</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> </div>
</div> </div>

246
src/data/webinarsData.ts
View File

@@ -95,7 +95,7 @@ export const sharedWebinarsData: WebinarData[] = [
category: 'Digital Transformation', category: 'Digital Transformation',
tags: ['Leadership', 'Digital Strategy', 'Innovation', 'Change Management'], 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', 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, featured: true,
level: 'Advanced', level: 'Advanced',
format: 'Hybrid', format: 'Hybrid',
@@ -193,21 +193,6 @@ export const sharedWebinarsData: WebinarData[] = [
rating: 4.8, rating: 4.8,
participants: '2,400+', participants: '2,400+',
slug: 'strategic-leadership-programme' 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', category: 'Team Development',
tags: ['Team Building', 'Emotional Intelligence', 'Performance', 'Leadership'], 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', 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, featured: true,
level: 'Intermediate', level: 'Intermediate',
format: 'In Person', format: 'In Person',
@@ -302,21 +287,6 @@ export const sharedWebinarsData: WebinarData[] = [
rating: 4.7, rating: 4.7,
participants: '3,200+', participants: '3,200+',
slug: 'team-leadership-masterclass' 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, maxAttendees: 4000,
category: 'Strategy', category: 'Strategy',
tags: ['Strategic Thinking', 'Crisis Management', 'Leadership', 'Planning'], 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', 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, status: 'recorded',
featured: false, featured: false,
level: 'Advanced', level: 'Advanced',
format: 'Virtual', format: 'Virtual',
@@ -431,8 +401,8 @@ export const sharedWebinarsData: WebinarData[] = [
maxAttendees: 2800, maxAttendees: 2800,
category: 'Personal Development', category: 'Personal Development',
tags: ['Innovation', 'Creativity', 'Communication', 'Leadership'], 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', 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, status: 'upcoming',
featured: false, featured: false,
level: 'Intermediate', level: 'Intermediate',
format: 'Hybrid', format: 'Hybrid',
@@ -528,10 +498,10 @@ export const sharedWebinarsData: WebinarData[] = [
duration: '70 min', duration: '70 min',
attendees: '2,800+', attendees: '2,800+',
maxAttendees: 3500, maxAttendees: 3500,
category: 'Crisis Management', category: 'Global Leadership',
tags: ['Global Leadership', 'Cultural Intelligence', 'Communication', 'Diversity'], 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', 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' as const, status: 'upcoming',
featured: false, featured: false,
level: 'Advanced', level: 'Advanced',
format: 'Virtual', format: 'Virtual',
@@ -611,6 +581,204 @@ export const sharedWebinarsData: WebinarData[] = [
slug: 'global-leadership-certificate' 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'
}
]
} }
]; ];