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

changes done

Browse Source
This commit is contained in:
priyanshuvish
2025-09-05 17:59:33 +05:30
parent 2a857ef729
commit 819f7a6865
6 changed files with 407 additions and 987 deletions
Download Patch File Download Diff File Expand all files Collapse all files

548
src/components/LearningFacilityNew.tsx
View File

@@ -871,155 +871,6 @@ export function LearningFacilityNew() {
</div> </div>
</section> </section>
{/* Who It's For Section - match Services page (left intro + right accordion list) */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
{/* Our Expertise "Our Services" style - horizontal carousel cards */}
<div className="max-w-7xl mx-auto">
{/* Header with eyebrow and controls */}
<div className="mb-12 relative">
<div className="flex-1 max-w-2xl">
<div className="branded-tag-system mb-6">
<div className="dot"></div>
<span className="text">LEARNING FACILITY</span>
</div>
<h2 className="text-h2 mb-4 leading-tight">Who It's <span className="text-primary">For</span></h2>
<p className="text-body-lg text-muted leading-relaxed">
Our learning facility supports immersive leadership programs for corporate teams, learning groups,
and professional networks seeking high-impact environments.
</p>
</div>
{/* Simple controls that scroll the container; no state changes outside this section */}
<div className="absolute bottom-0 right-0 flex items-center gap-4">
<span id="lf-who-counter" className="text-body text-muted font-medium">01 / {String(targetAudience.length).padStart(2, '0')}</span>
<div className="flex gap-2">
<button
onClick={() => {
const el = document.getElementById('lf-who-carousel');
if (!el) return;
el.scrollBy({ left: -384, behavior: 'smooth' });
setTimeout(() => {
const idx = Math.round((el.scrollLeft + el.clientWidth * 0.1) / (el.clientWidth * 0.75));
const num = Math.max(1, Math.min(targetAudience.length, idx + 1));
const counter = document.getElementById('lf-who-counter');
if (counter) counter.textContent = `${String(num).padStart(2, '0')} / ${String(targetAudience.length).padStart(2, '0')}`;
}, 300);
}}
className="w-12 h-12 rounded-lg border-2 border-gray-200 flex items-center justify-center hover:border-primary hover:bg-primary hover:text-white transition-all duration-300"
aria-label="Previous audience"
>
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" /></svg>
</button>
<button
onClick={() => {
const el = document.getElementById('lf-who-carousel');
if (!el) return;
el.scrollBy({ left: 384, behavior: 'smooth' });
setTimeout(() => {
const idx = Math.round((el.scrollLeft + el.clientWidth * 0.1) / (el.clientWidth * 0.75));
const num = Math.max(1, Math.min(targetAudience.length, idx + 1));
const counter = document.getElementById('lf-who-counter');
if (counter) counter.textContent = `${String(num).padStart(2, '0')} / ${String(targetAudience.length).padStart(2, '0')}`;
}, 300);
}}
className="w-12 h-12 rounded-lg border-2 border-gray-200 flex items-center justify-center hover:border-primary hover:bg-primary hover:text-white transition-all duration-300"
aria-label="Next audience"
>
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" /></svg>
</button>
</div>
</div>
</div>
{/* Carousel */}
<div className="relative">
<div className="overflow-hidden">
<div
id="lf-who-carousel"
className="flex transition-transform duration-700 ease-in-out gap-4 overflow-x-auto scroll-smooth services-cards-carousel"
style={{ scrollSnapType: 'x mandatory', msOverflowStyle: 'none', scrollbarWidth: 'none' }}
>
{targetAudience.map((audience, index) => (
<div
key={`who-${audience.title}-${index}`}
className="flex-shrink-0 w-[70%] mr-7"
style={{ scrollSnapAlign: 'start' }}
>
<div className="border border-gray-200 h-full overflow-hidden rounded-xl bg-white card-shadow-elevated">
<div className="p-6">
<div className="flex items-stretch">
{/* Left: Image with 10px top/left/bottom spacing and 5px radius */}
<div
className="flex-shrink-0 self-stretch"
style={{ margin: '6px 0 6px 10px', borderRadius: '5px', overflow: 'hidden', width: '270px' }}
>
<ImageWithFallback
src={
audience.title.includes('Corporate')
? 'https://images.unsplash.com/photo-1553877522-43269d4ea984?w=640&h=640&fit=crop'
: audience.title.includes('Learning')
? 'https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?w=640&h=640&fit=crop'
: audience.title.includes('Professional')
? 'https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=640&h=640&fit=crop'
: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=640&h=640&fit=crop'
}
alt={`${audience.title} visual`}
className="w-full h-full object-cover"
/>
</div>
{/* Right: Existing text content aligned neatly */}
<div className="flex-1 pl-7 flex flex-col">
{/* Header */}
<div className="flex items-center gap-4 mb-4">
<div
className="w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
>
{React.createElement(audience.icon, { className: 'w-7 h-7 text-primary' })}
</div>
<h3 className="text-h4 text-black leading-tight">{audience.title}</h3>
</div>
{/* Description */}
<p className="text-body text-muted leading-relaxed mb-6">{audience.description}</p>
{/* Key Features (Characteristics) */}
<div className="mb-6">
<h4 className="text-subhead text-black mb-4 font-medium">Key Characteristics:</h4>
<div className="grid md:grid-cols-2 gap-3">
{audience.characteristics.map((feature: string, featureIndex: number) => (
<div key={featureIndex} className="flex items-start gap-2">
<svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
<span className="text-small text-muted leading-relaxed">{feature}</span>
</div>
))}
</div>
</div>
{/* Expected Outcomes */}
<div className="rounded-lg p-4" style={{ backgroundColor: 'rgba(247, 247, 253, 0.5)' }}>
<h4 className="text-subhead text-black mb-3 font-medium">Expected Outcomes:</h4>
<div className="flex items-start gap-3">
<svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 19V6m0 0l-7 7m7-7l7 7" /></svg>
<span className="text-small text-muted leading-relaxed">
Ideal for {audience.title.toLowerCase()} to achieve focused learning outcomes and stronger alignment.
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
))}
</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)' }}>
@@ -1125,400 +976,6 @@ export function LearningFacilityNew() {
</div> </div>
</section> </section>
{/* Amenities Section */}
<section className="py-20" style={{ backgroundColor: 'rgba(0, 0, 0, 0.03)' }}>
<div className="mx-auto section-margin-x">
<div className="text-center mb-16 max-w-4xl mx-auto">
<h2 className="text-h2 mb-6">
World-Class <span className="text-primary">Amenities</span>
</h2>
<p className="text-body-lg text-muted">
Premium amenities and services to ensure comfort, productivity, and an
exceptional learning environment for all participants.
</p>
</div>
</div>
<div className="relative w-full">
<div className="relative overflow-hidden">
<div className="flex items-stretch gap-4 whitespace-nowrap scroll-left" style={{ animationDuration: '35s' }}>
{[0, 1].map((loop) => (
<div key={`amenities-loop-${loop}`} className="flex items-stretch gap-4">
{amenities.map((amenity, index) => {
const Icon = amenity.icon;
return (
<div
key={`amenity-row1-${loop}-${index}`}
className="flex items-center gap-4 rounded-lg p-4 shadow-sm border"
style={{ backgroundColor: 'var(--color-bg-white)' }}
>
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
>
<Icon className="w-6 h-6 text-primary" />
</div>
<span className="text-body" style={{ fontWeight: 'var(--font-weight-subhead)' }}>
{amenity.name}
</span>
</div>
);
})}
</div>
))}
</div>
<div className="flex items-stretch gap-4 whitespace-nowrap scroll-right mt-4" style={{ animationDuration: '30s' }}>
{[0, 1].map((loop) => (
<div key={`amenities-loop-bottom-${loop}`} className="flex items-stretch gap-4">
{amenities.map((amenity, index) => {
const Icon = amenity.icon;
return (
<div
key={`amenity-row2-${loop}-${index}`}
className="flex items-center gap-4 rounded-lg p-4 shadow-sm border"
style={{ backgroundColor: 'var(--color-bg-white)' }}
>
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
>
<Icon className="w-6 h-6 text-primary" />
</div>
<span className="text-body" style={{ fontWeight: 'var(--font-weight-subhead)' }}>
{amenity.name}
</span>
</div>
);
})}
</div>
))}
</div>
</div>
</div>
</section>
{/* Virtual Tour Section */}
<section className="py-20" style={{ backgroundColor: 'var(--color-bg-white)' }}>
<div className="container mx-auto section-margin-x">
{!isVirtualTourActive ? (
/* Tour Preview */
<div className="max-w-7xl mx-auto space-y-12">
{/* Header Section - left aligned with navigation controls */}
<div className="mb-12 relative max-w-7xl mx-auto">
<div className="flex-1 max-w-3xl">
<BrandedTag text="VIRTUAL EXPERIENCE" />
<h2 className="text-h2 mb-4 leading-tight">
Explore Our Learning Spaces
</h2>
<p className="text-body-lg text-muted leading-relaxed">
Take an interactive tour of our eight distinct learning environments, each designed to inspire transformation and foster collaboration.
</p>
</div>
{/* Navigation Controls - Bottom right positioning */}
<div className="absolute bottom-0 right-0 flex items-center gap-4">
<span className="text-body text-muted font-medium">
{String(currentTourSlide + 1).padStart(2, '0')} / {String(Math.ceil(virtualTourStops.length / tourCardsPerView)).padStart(2, '0')}
</span>
<div className="flex gap-2">
<button
onClick={scrollTourLeft}
disabled={currentTourSlide === 0}
className="w-12 h-12 rounded-lg border-2 border-gray-200 flex items-center justify-center hover:border-primary hover:bg-primary hover:text-white disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white disabled:hover:text-black transition-all duration-300"
aria-label="Previous learning spaces"
>
<ChevronLeft className="w-5 h-5" />
</button>
<button
onClick={scrollTourRight}
disabled={currentTourSlide >= maxTourSlide}
className="w-12 h-12 rounded-lg border-2 border-gray-200 flex items-center justify-center hover:border-primary hover:bg-primary hover:text-white disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white disabled:hover:text-black transition-all duration-300"
aria-label="Next learning spaces"
>
<ChevronRight className="w-5 h-5" />
</button>
</div>
</div>
</div>
{/* Carousel Container */}
<div className="relative overflow-hidden">
<div
ref={tourCarouselRef}
className="flex transition-transform duration-700 ease-in-out"
style={{
transform: `translateX(-${currentTourSlide * tourSlideWidth}%)`,
width: `${(virtualTourStops.length / tourCardsPerView) * 100}%`
}}
>
{virtualTourStops.map((stop) => (
<div
key={stop.id}
className="flex-shrink-0 px-3"
style={{ width: `${tourCardWidth}%` }}
>
<Card
className="group relative cursor-pointer overflow-hidden border-0 rounded-xl h-full"
onClick={() => setExpandedTourCard(stop.id)}
>
{/* Image background */}
<div className="relative h-72 sm:h-80 lg:h-[360px]">
<ImageWithFallback
src={stop.image}
alt={stop.title}
className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
/>
{/* Gradient overlay for legibility */}
<div className="absolute inset-0 bg-gradient-to-b from-black/10 via-black/50 to-black/80"></div>
{/* Glass badge (Zone) */}
<div className="absolute top-4 left-4 flex items-center gap-2">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center"
style={{ backgroundColor: 'rgba(255, 255, 255, 0.18)', backdropFilter: 'blur(10px)' }}
>
<Building className="w-5 h-5 text-white" />
</div>
<Badge
className="text-small px-2 py-1"
style={{ backgroundColor: 'var(--color-accent)', color: 'var(--color-black)', fontFamily: 'var(--font-family-base)' }}
>
Zone {stop.zone}
</Badge>
</div>
{/* Text overlay inside the image */}
<div className="absolute inset-x-0 bottom-0 p-5">
<h3 className="text-h4-white mb-2">{stop.title}</h3>
<p className="text-small-white opacity-90 line-clamp-2">{stop.description}</p>
</div>
</div>
</Card>
</div>
))}
</div>
</div>
{/* Start Tour CTA */}
<div className="pt-2 flex items-center justify-between gap-4 flex-wrap">
<div className="text-muted text-small">
Preview complete? Launch the full interactive tour to navigate each zone.
</div>
<div className="hero-slide-button">
<PrimaryCTAButton
text="Start Interactive Tour"
onClick={handleStartTour}
ariaLabel="Start interactive virtual tour"
className="primary-cta-button-blue cta-text-black"
/>
</div>
</div>
</div>
) : (
/* Active Virtual Tour */
<div className="max-w-6xl mx-auto">
{/* Tour Header */}
<div className="text-center mb-8">
<Badge
className="text-small px-4 py-2 mb-4"
style={{
backgroundColor: 'rgba(4, 4, 91, 0.1)',
color: 'var(--color-primary)',
fontFamily: 'var(--font-family-base)'
}}
>
Interactive Virtual Tour
</Badge>
<h2 className="text-h2 mb-4">
{virtualTourStops[currentTourStop].title}
</h2>
<p className="text-body-lg text-muted max-w-3xl mx-auto">
{virtualTourStops[currentTourStop].description}
</p>
</div>
{/* Tour Image */}
<div className="relative mb-8">
<div className="aspect-video rounded-2xl overflow-hidden">
<ImageWithFallback
src={virtualTourStops[currentTourStop].image}
alt={virtualTourStops[currentTourStop].title}
className="w-full h-full object-cover"
/>
</div>
{/* Navigation Arrows */}
<button
onClick={handlePrevStop}
disabled={currentTourStop === 0}
className="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed hover:bg-white transition-all"
>
<ChevronLeft className="w-6 h-6" />
</button>
<button
onClick={handleNextStop}
disabled={currentTourStop === virtualTourStops.length - 1}
className="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed hover:bg-white transition-all"
>
<ChevronRight className="w-6 h-6" />
</button>
{/* Stop Indicator */}
<div className="absolute bottom-4 left-1/2 -translate-x-1/2">
<div className="bg-white/90 backdrop-blur-sm rounded-full px-4 py-2">
<span className="text-small font-medium">
{currentTourStop + 1} of {virtualTourStops.length}
</span>
</div>
</div>
</div>
{/* Tour Features */}
<div className="grid md:grid-cols-2 gap-8 mb-8">
<div>
<h3 className="text-h4 mb-4">Key Features</h3>
<div className="space-y-3">
{virtualTourStops[currentTourStop].features.map((feature, index) => (
<div key={index} className="flex items-center gap-3">
<CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0" />
<span className="text-body">{feature}</span>
</div>
))}
</div>
</div>
<div>
<h3 className="text-h4 mb-4">Space Details</h3>
<div className="space-y-4">
<div className="flex items-center gap-3">
<MapPin className="w-5 h-5 text-muted flex-shrink-0" />
<div>
<div className="text-body">Zone {virtualTourStops[currentTourStop].zone}</div>
<div className="text-small text-muted">Campus Location</div>
</div>
</div>
<div className="flex items-center gap-3">
<Users className="w-5 h-5 text-muted flex-shrink-0" />
<div>
<div className="text-body">{virtualTourStops[currentTourStop].capacity}</div>
<div className="text-small text-muted">Capacity</div>
</div>
</div>
</div>
</div>
</div>
{/* Tour Navigation */}
<div className="flex justify-center gap-2 mb-8">
{virtualTourStops.map((_, index) => (
<button
key={index}
onClick={() => handleJumpToStop(index)}
className={`w-3 h-3 rounded-full transition-all ${index === currentTourStop
? 'bg-primary w-8'
: 'bg-gray-300 hover:bg-gray-400'
}`}
/>
))}
</div>
{/* End Tour Button */}
<div className="text-center">
<Button
variant="outline"
onClick={() => setIsVirtualTourActive(false)}
className="text-body"
>
<X className="w-5 h-5 mr-2" />
End Tour
</Button>
</div>
</div>
)}
{/* Tour Card Modal */}
<Dialog open={!!expandedTourCard} onOpenChange={() => setExpandedTourCard(null)}>
<DialogContent className="max-w-2xl">
{expandedTourCard && (
<>
<DialogHeader className="pb-6">
<div className="text-center space-y-4">
<div
className="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto"
style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
>
<Building className="w-10 h-10 text-primary" />
</div>
<DialogTitle className="text-h3">
{virtualTourStops.find(stop => stop.id === expandedTourCard)?.title}
</DialogTitle>
<DialogDescription>
Explore this learning space in detail. You can start an interactive tour from this location or book this specific area for your next event.
</DialogDescription>
</div>
</DialogHeader>
<div className="py-6 space-y-6">
{/* Featured Image */}
<div className="relative h-64 rounded-2xl overflow-hidden">
<ImageWithFallback
src={virtualTourStops.find(stop => stop.id === expandedTourCard)?.image || ''}
alt={virtualTourStops.find(stop => stop.id === expandedTourCard)?.title || ''}
className="w-full h-full object-cover"
/>
<div className="absolute top-6 left-6">
<Badge
className="text-body px-4 py-2"
style={{
backgroundColor: 'var(--color-accent)',
color: 'var(--color-black)',
fontFamily: 'var(--font-family-base)'
}}
>
{virtualTourStops.find(stop => stop.id === expandedTourCard)?.keyHighlight}
</Badge>
</div>
</div>
{/* Description */}
<p className="text-body-lg text-muted text-center">
{virtualTourStops.find(stop => stop.id === expandedTourCard)?.description}
</p>
{/* Action Buttons */}
<div className="flex gap-4 justify-center">
<Button
onClick={() => {
setExpandedTourCard(null);
handleStartTour();
}}
className="text-body"
style={{
backgroundColor: 'var(--color-primary)',
color: 'white'
}}
>
<Play className="w-5 h-5 mr-2" />
Start Tour Here
</Button>
<Button
variant="outline"
onClick={() => setIsBookingModalOpen(true)}
className="text-body"
>
<Calendar className="w-5 h-5 mr-2" />
Book This Space
</Button>
</div>
</div>
</>
)}
</DialogContent>
</Dialog>
</div>
</section>
{/* Booking Modal */} {/* Booking Modal */}
<Dialog open={isBookingModalOpen} onOpenChange={setIsBookingModalOpen}> <Dialog open={isBookingModalOpen} onOpenChange={setIsBookingModalOpen}>
<DialogContent className="max-w-md"> <DialogContent className="max-w-md">
@@ -1803,8 +1260,6 @@ export function LearningFacilityNew() {
tagText="Facility Excellence" tagText="Facility Excellence"
/> />
{/* CTA Section - Using standardized home page CTA */}
<CTABannerSection />
{/* Facility Tour - How to Reach Us Section */} {/* Facility Tour - How to Reach Us Section */}
<section className="py-12" style={{ backgroundColor: '#FFFFFF' }}> <section className="py-12" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x"> <div className="container mx-auto section-margin-x">
@@ -1951,6 +1406,9 @@ export function LearningFacilityNew() {
</div> </div>
</div> </div>
</section> </section>
{/* CTA Section - Using standardized home page CTA */}
<CTABannerSection />
</div> </div>
); );

194
src/components/LearningOnline.tsx
View File

@@ -5,11 +5,11 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
import { Card, CardContent, CardHeader, CardTitle } from './ui/card'; import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import { Input } from './ui/input'; import { Input } from './ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { import {
Play, Play,
Users, Users,
Clock, Clock,
ChevronRight, ChevronRight,
ChevronLeft, ChevronLeft,
GraduationCap, GraduationCap,
MessageCircle, MessageCircle,
@@ -47,7 +47,7 @@ import { useCart } from './CartContext';
// Course Categories // Course Categories
const courseCategories = [ const courseCategories = [
'Leadership Fundamentals', 'Leadership Fundamentals',
'Decision Making & Strategy', 'Decision Making & Strategy',
'Perspective & Risk', 'Perspective & Risk',
'Communication & Influence', 'Communication & Influence',
'Change & Innovation' 'Change & Innovation'
@@ -232,7 +232,7 @@ export function LearningOnline() {
const priceRanges = ['All Prices', 'Under ₹20,000', '₹20,000 - ₹35,000', '₹35,000 - ₹50,000', 'Over ₹50,000']; const priceRanges = ['All Prices', 'Under ₹20,000', '₹20,000 - ₹35,000', '₹35,000 - ₹50,000', 'Over ₹50,000'];
const durations = ['All Durations', 'Under 6 hours', '6-10 hours', '10-15 hours', 'Over 15 hours']; const durations = ['All Durations', 'Under 6 hours', '6-10 hours', '10-15 hours', 'Over 15 hours'];
const ratings = ['All Ratings', '4.5+ Stars', '4.0+ Stars', '3.5+ Stars']; const ratings = ['All Ratings', '4.5+ Stars', '4.0+ Stars', '3.5+ Stars'];
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' },
@@ -251,35 +251,35 @@ export function LearningOnline() {
// Filter and sort courses // Filter and sort courses
const filteredCourses = featuredCourses.filter(course => { const filteredCourses = featuredCourses.filter(course => {
const matchesSearch = course.title.toLowerCase().includes(searchTerm.toLowerCase()) || const matchesSearch = course.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
course.description.toLowerCase().includes(searchTerm.toLowerCase()) || course.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
course.category.toLowerCase().includes(searchTerm.toLowerCase()); course.category.toLowerCase().includes(searchTerm.toLowerCase());
const matchesCategory = selectedCategory === 'All Categories' || course.category === selectedCategory; const matchesCategory = selectedCategory === 'All Categories' || course.category === selectedCategory;
const matchesLevel = selectedLevel === 'All Levels' || course.level === selectedLevel; const matchesLevel = selectedLevel === 'All Levels' || course.level === selectedLevel;
const matchesFormat = selectedFormat === 'All Formats' || course.format === selectedFormat; const matchesFormat = selectedFormat === 'All Formats' || course.format === selectedFormat;
// Price filter - Updated for Rupees // Price filter - Updated for Rupees
const price = parseRupeePrice(course.price); const price = parseRupeePrice(course.price);
const matchesPrice = selectedPriceRange === 'All Prices' || const matchesPrice = selectedPriceRange === 'All Prices' ||
(selectedPriceRange === 'Under ₹20,000' && price < 20000) || (selectedPriceRange === 'Under ₹20,000' && price < 20000) ||
(selectedPriceRange === '₹20,000 - ₹35,000' && price >= 20000 && price <= 35000) || (selectedPriceRange === '₹20,000 - ₹35,000' && price >= 20000 && price <= 35000) ||
(selectedPriceRange === '₹35,000 - ₹50,000' && price >= 35000 && price <= 50000) || (selectedPriceRange === '₹35,000 - ₹50,000' && price >= 35000 && price <= 50000) ||
(selectedPriceRange === 'Over ₹50,000' && price > 50000); (selectedPriceRange === 'Over ₹50,000' && price > 50000);
// Duration filter // Duration filter
const durationHours = parseInt(course.duration); const durationHours = parseInt(course.duration);
const matchesDuration = selectedDuration === 'All Durations' || const matchesDuration = selectedDuration === 'All Durations' ||
(selectedDuration === 'Under 6 hours' && durationHours < 6) || (selectedDuration === 'Under 6 hours' && durationHours < 6) ||
(selectedDuration === '6-10 hours' && durationHours >= 6 && durationHours <= 10) || (selectedDuration === '6-10 hours' && durationHours >= 6 && durationHours <= 10) ||
(selectedDuration === '10-15 hours' && durationHours >= 10 && durationHours <= 15) || (selectedDuration === '10-15 hours' && durationHours >= 10 && durationHours <= 15) ||
(selectedDuration === 'Over 15 hours' && durationHours > 15); (selectedDuration === 'Over 15 hours' && durationHours > 15);
// Rating filter // Rating filter
const matchesRating = selectedRating === 'All Ratings' || const matchesRating = selectedRating === 'All Ratings' ||
(selectedRating === '4.5+ Stars' && course.rating >= 4.5) || (selectedRating === '4.5+ Stars' && course.rating >= 4.5) ||
(selectedRating === '4.0+ Stars' && course.rating >= 4.0) || (selectedRating === '4.0+ Stars' && course.rating >= 4.0) ||
(selectedRating === '3.5+ Stars' && course.rating >= 3.5); (selectedRating === '3.5+ Stars' && course.rating >= 3.5);
return matchesSearch && matchesCategory && matchesLevel && matchesFormat && matchesPrice && matchesDuration && matchesRating; return matchesSearch && matchesCategory && matchesLevel && matchesFormat && matchesPrice && matchesDuration && matchesRating;
}).sort((a, b) => { }).sort((a, b) => {
switch (sortBy) { switch (sortBy) {
@@ -318,13 +318,13 @@ export function LearningOnline() {
setSortBy('Most Popular'); setSortBy('Most Popular');
}; };
const hasActiveFilters = searchTerm || const hasActiveFilters = searchTerm ||
selectedCategory !== 'All Categories' || selectedCategory !== 'All Categories' ||
selectedLevel !== 'All Levels' || selectedLevel !== 'All Levels' ||
selectedFormat !== 'All Formats' || selectedFormat !== 'All Formats' ||
selectedPriceRange !== 'All Prices' || selectedPriceRange !== 'All Prices' ||
selectedDuration !== 'All Durations' || selectedDuration !== 'All Durations' ||
selectedRating !== 'All Ratings'; selectedRating !== 'All Ratings';
// Cart functions - using global cart context // Cart functions - using global cart context
const handleAddToCart = (item: CartItem) => { const handleAddToCart = (item: CartItem) => {
@@ -342,7 +342,7 @@ export function LearningOnline() {
<div style={{ backgroundColor: '#FFFFFF' }}> <div style={{ backgroundColor: '#FFFFFF' }}>
{/* Hero Banner – Digital Learning - Blog Style */} {/* Hero Banner – Digital Learning - Blog Style */}
<section className="relative py-16 overflow-hidden"> <section className="relative py-16 overflow-hidden">
<div <div
className="absolute inset-0" className="absolute inset-0"
style={{ style={{
backgroundImage: 'url(https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1200&h=600&fit=crop)', backgroundImage: 'url(https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1200&h=600&fit=crop)',
@@ -352,7 +352,7 @@ export function LearningOnline() {
> >
<div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/60 to-black/40" /> <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/60 to-black/40" />
</div> </div>
<div className="relative section-margin-x"> <div className="relative section-margin-x">
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<motion.div <motion.div
@@ -365,27 +365,15 @@ export function LearningOnline() {
<div className="dot"></div> <div className="dot"></div>
<span className="text">DIGITAL LEARNING PLATFORM</span> <span className="text">DIGITAL LEARNING PLATFORM</span>
</div> </div>
{/* Main Header */} {/* Main Header */}
<h1 className="text-h1-white mb-8" style={{ lineHeight: 'var(--line-height-h1)' }}> <h1 className="text-h1-white mb-8" style={{ lineHeight: 'var(--line-height-h1)' }}>
Transform Leadership<br />Through Digital Learning Discover Your Leadership
Potential Online
</h1> </h1>
{/* Statistics */} <h2 className='text text-white'>Our Leadership Courses are structured packages which are targeted towards building your leadership abilities. Each course is a wholesome package which not only helps you gain awareness about your leadership style but also gives insights to build your leadership abilities. Every course contains curated content targeted towards a specific leadership ability. Each course consists of our proprietary profiling instruments – Leadership Profilers, conceptual videos and experiences of leaders – Leadership Webcasts, as well as additional content to supplement learning.
<div className="articles-hero-stats grid grid-cols-3 gap-12 max-w-3xl mx-auto"> </h2>
<div className="text-center">
<div className="stat-number mb-2">{featuredCourses.length}+</div>
<div className="stat-label">Expert Courses</div>
</div>
<div className="text-center">
<div className="stat-number mb-2">{courseCategories.length}</div>
<div className="stat-label">Learning Pathways</div>
</div>
<div className="text-center">
<div className="stat-number mb-2">10,000+</div>
<div className="stat-label">Active Learners</div>
</div>
</div>
</motion.div> </motion.div>
</div> </div>
</div> </div>
@@ -417,11 +405,10 @@ export function LearningOnline() {
<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
}} }}
@@ -431,11 +418,10 @@ export function LearningOnline() {
</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
}} }}
@@ -637,9 +623,9 @@ export function LearningOnline() {
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-6">
{currentCourses.map((course) => ( {currentCourses.map((course) => (
<div key={course.id} className="w-full"> <div key={course.id} className="w-full">
<CourseCard <CourseCard
course={course} course={course}
className="h-[600px] flex flex-col w-full" className="h-[600px] flex flex-col w-full"
onAddToCart={handleAddToCart} onAddToCart={handleAddToCart}
/> />
</div> </div>
@@ -651,7 +637,7 @@ export function LearningOnline() {
{viewMode === 'list' && ( {viewMode === 'list' && (
<div className="space-y-4"> <div className="space-y-4">
{currentCourses.map((course) => ( {currentCourses.map((course) => (
<Card <Card
key={course.id} key={course.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(`/course/${course.id}`)} onClick={() => navigateTo(`/course/${course.id}`)}
@@ -665,7 +651,7 @@ export function LearningOnline() {
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/> />
<div className="absolute top-4 left-4"> <div className="absolute top-4 left-4">
<Badge <Badge
variant="secondary" variant="secondary"
className="px-3 py-1 font-medium" className="px-3 py-1 font-medium"
style={{ style={{
@@ -680,7 +666,7 @@ export function LearningOnline() {
</Badge> </Badge>
</div> </div>
<div className="absolute top-4 right-4"> <div className="absolute top-4 right-4">
<Badge <Badge
variant="outline" variant="outline"
className="px-3 py-1 font-medium bg-white/90 backdrop-blur-sm" className="px-3 py-1 font-medium bg-white/90 backdrop-blur-sm"
style={{ style={{
@@ -697,7 +683,7 @@ export function LearningOnline() {
</div> </div>
<CardContent className="p-6 flex-1"> <CardContent className="p-6 flex-1">
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
<h3 <h3
className="mb-3 group-hover:text-blue-600 transition-colors leading-snug" className="mb-3 group-hover:text-blue-600 transition-colors leading-snug"
style={{ style={{
fontSize: 'var(--font-h4)', fontSize: 'var(--font-h4)',
@@ -709,8 +695,8 @@ export function LearningOnline() {
> >
{course.title} {course.title}
</h3> </h3>
<p <p
className="mb-4 flex-1 leading-relaxed" className="mb-4 flex-1 leading-relaxed"
style={{ style={{
fontSize: 'var(--font-body)', fontSize: 'var(--font-body)',
@@ -721,13 +707,13 @@ export function LearningOnline() {
> >
{course.description} {course.description}
</p> </p>
<div className="flex items-center justify-between mb-4 pt-4 border-t border-gray-100"> <div className="flex items-center justify-between mb-4 pt-4 border-t border-gray-100">
<div className="flex items-center gap-6"> <div className="flex items-center gap-6">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Clock className="w-4 h-4 text-gray-400" /> <Clock className="w-4 h-4 text-gray-400" />
<span style={{ <span style={{
fontSize: 'var(--font-small)', fontSize: 'var(--font-small)',
fontFamily: 'var(--font-family-base)', fontFamily: 'var(--font-family-base)',
color: 'var(--color-gray-muted)', color: 'var(--color-gray-muted)',
fontWeight: '500' fontWeight: '500'
@@ -737,8 +723,8 @@ export function LearningOnline() {
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Users className="w-4 h-4 text-gray-400" /> <Users className="w-4 h-4 text-gray-400" />
<span style={{ <span style={{
fontSize: 'var(--font-small)', fontSize: 'var(--font-small)',
fontFamily: 'var(--font-family-base)', fontFamily: 'var(--font-family-base)',
color: 'var(--color-gray-muted)', color: 'var(--color-gray-muted)',
fontWeight: '500' fontWeight: '500'
@@ -747,10 +733,10 @@ export function LearningOnline() {
</span> </span>
</div> </div>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Star className="w-4 h-4 fill-current text-yellow-400" /> <Star className="w-4 h-4 fill-current text-yellow-400" />
<span <span
className="font-semibold" className="font-semibold"
style={{ style={{
fontSize: 'var(--font-small)', fontSize: 'var(--font-small)',
@@ -765,7 +751,7 @@ export function LearningOnline() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-baseline gap-3"> <div className="flex items-baseline gap-3">
<span <span
className="font-bold" className="font-bold"
style={{ style={{
fontSize: '1.5rem', fontSize: '1.5rem',
@@ -776,7 +762,7 @@ export function LearningOnline() {
{course.price} {course.price}
</span> </span>
{course.originalPrice && ( {course.originalPrice && (
<span <span
className="line-through" className="line-through"
style={{ style={{
fontSize: 'var(--font-body)', fontSize: 'var(--font-body)',
@@ -832,7 +818,7 @@ export function LearningOnline() {
> >
<ChevronLeft className="w-4 h-4" /> <ChevronLeft className="w-4 h-4" />
</Button> </Button>
<div className="flex gap-2"> <div className="flex gap-2">
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => ( {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
<Button <Button
@@ -846,7 +832,7 @@ export function LearningOnline() {
</Button> </Button>
))} ))}
</div> </div>
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
@@ -865,11 +851,11 @@ export function LearningOnline() {
</section> </section>
{/* Cart Popup */} {/* Cart Popup */}
<CartPopup <CartPopup
isOpen={isCartPopupOpen} isOpen={isCartPopupOpen}
onClose={handleCloseCartPopup} onClose={handleCloseCartPopup}
cartItems={[]} // Not used anymore as CartPopup will get items from context cartItems={[]} // Not used anymore as CartPopup will get items from context
onRemoveItem={() => {}} // Not used anymore onRemoveItem={() => { }} // Not used anymore
recentlyAddedItem={recentlyAddedItem} recentlyAddedItem={recentlyAddedItem}
/> />
@@ -877,15 +863,15 @@ export function LearningOnline() {
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}> <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="section-margin-x"> <div className="section-margin-x">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start max-w-7xl mx-auto"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start max-w-7xl mx-auto">
{/* Left Side - Title & Description */} {/* Left Side - Title & Description */}
<div className="lg:col-span-5 lg:pr-8"> <div className="lg:col-span-5 lg:pr-8">
<BrandedTag text="OUR APPROACH" /> <BrandedTag text="OUR APPROACH" />
<h2 className="text-h2 mb-6 leading-tight"> <h2 className="text-h2 mb-6 leading-tight">
Orientation-Based <span className="text-primary">Learning</span> Orientation-Based <span className="text-primary">Learning</span>
</h2> </h2>
<p className="text-body-lg text-muted leading-relaxed mb-8"> <p className="text-body-lg text-muted leading-relaxed mb-8">
Our unique methodology focuses on understanding your natural leadership orientation and building skills that align with your authentic style while expanding your capabilities across all dimensions. Our unique methodology focuses on understanding your natural leadership orientation and building skills that align with your authentic style while expanding your capabilities across all dimensions.
</p> </p>
@@ -922,18 +908,18 @@ export function LearningOnline() {
<Card className="border-0 shadow-sm hover:shadow-lg transition-all duration-300 bg-white p-0"> <Card className="border-0 shadow-sm hover:shadow-lg transition-all duration-300 bg-white p-0">
<CardContent className="p-6"> <CardContent className="p-6">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div <div
className="w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300" className="w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300"
style={{ backgroundColor: 'var(--color-primary)' }} style={{ backgroundColor: 'var(--color-primary)' }}
> >
<IconComponent className="w-7 h-7 text-white" /> <IconComponent className="w-7 h-7 text-white" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<h4 className="text-h4 mb-3 text-black leading-tight"> <h4 className="text-h4 mb-3 text-black leading-tight">
{point.title} {point.title}
</h4> </h4>
<p className="text-body text-muted leading-relaxed"> <p className="text-body text-muted leading-relaxed">
{point.description} {point.description}
</p> </p>
@@ -957,7 +943,7 @@ export function LearningOnline() {
<section className="py-20 relative overflow-hidden" style={{ backgroundColor: '#FFFFFF' }}> <section className="py-20 relative overflow-hidden" style={{ backgroundColor: '#FFFFFF' }}>
<div className="section-margin-x"> <div className="section-margin-x">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center max-w-7xl mx-auto"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center max-w-7xl mx-auto">
{/* Left Column - CTA Content */} {/* Left Column - CTA Content */}
<motion.div <motion.div
initial={{ opacity: 0, x: -30 }} initial={{ opacity: 0, x: -30 }}
@@ -967,11 +953,11 @@ export function LearningOnline() {
className="order-2 lg:order-1" className="order-2 lg:order-1"
> >
<BrandedTag text="TRANSFORM YOUR ORGANIZATION" /> <BrandedTag text="TRANSFORM YOUR ORGANIZATION" />
<h2 className="text-h2 mb-6 leading-tight"> <h2 className="text-h2 mb-6 leading-tight">
Scale Leadership Excellence Across Your <span className="text-primary">Enterprise</span> Scale Leadership Excellence Across Your <span className="text-primary">Enterprise</span>
</h2> </h2>
<p className="text-body-lg text-muted leading-relaxed mb-8"> <p className="text-body-lg text-muted leading-relaxed mb-8">
Empower your leadership pipeline with our comprehensive online learning platform. Drive measurable results with scalable solutions designed for modern organizations. Empower your leadership pipeline with our comprehensive online learning platform. Drive measurable results with scalable solutions designed for modern organizations.
</p> </p>
@@ -1050,10 +1036,10 @@ export function LearningOnline() {
alt="Enterprise team in leadership training session" alt="Enterprise team in leadership training session"
className="w-full h-[480px] object-cover" className="w-full h-[480px] object-cover"
/> />
{/* Overlay with gradient */} {/* Overlay with gradient */}
<div className="absolute inset-0 bg-gradient-to-tr from-primary/20 to-transparent"></div> <div className="absolute inset-0 bg-gradient-to-tr from-primary/20 to-transparent"></div>
{/* Floating Badge */} {/* Floating Badge */}
<div className="absolute top-6 left-6 bg-white/95 backdrop-blur-sm rounded-lg px-4 py-2 shadow-lg"> <div className="absolute top-6 left-6 bg-white/95 backdrop-blur-sm rounded-lg px-4 py-2 shadow-lg">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -1061,7 +1047,7 @@ export function LearningOnline() {
<span className="text-small font-medium text-black">Live Training Session</span> <span className="text-small font-medium text-black">Live Training Session</span>
</div> </div>
</div> </div>
{/* Bottom Achievement Badge */} {/* Bottom Achievement Badge */}
<div className="absolute bottom-6 right-6 bg-white/95 backdrop-blur-sm rounded-lg px-4 py-3 shadow-lg"> <div className="absolute bottom-6 right-6 bg-white/95 backdrop-blur-sm rounded-lg px-4 py-3 shadow-lg">
<div className="text-center"> <div className="text-center">
@@ -1093,10 +1079,10 @@ export function LearningOnline() {
alt="Individual online learning with laptop and study materials" alt="Individual online learning with laptop and study materials"
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
{/* Subtle dark overlay for overall image */} {/* Subtle dark overlay for overall image */}
<div className="absolute inset-0 bg-black/30" /> <div className="absolute inset-0 bg-black/30" />
{/* Gradient overlay for better text readability */} {/* Gradient overlay for better text readability */}
<div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" /> <div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
</div> </div>
@@ -1104,9 +1090,9 @@ export function LearningOnline() {
{/* Content Container */} {/* Content Container */}
<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">
{/* CTA Content Block */} {/* CTA Content Block */}
<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)'
}} }}
> >
@@ -1114,11 +1100,11 @@ export function LearningOnline() {
<BrandedTag text="NEXT STEPS" variant="white" /> <BrandedTag text="NEXT STEPS" variant="white" />
{/* Main Headline */} {/* Main Headline */}
<h2 <h2
className="text-h2-white mb-8" className="text-h2-white mb-8"
> >
Ready to transform your Ready to transform your
<span <span
className="italic" className="italic"
style={{ color: 'var(--color-brand-accent)' }} style={{ color: 'var(--color-brand-accent)' }}
> >
@@ -1127,7 +1113,7 @@ export function LearningOnline() {
</h2> </h2>
{/* CTA Button - Yellow variant for online courses */} {/* CTA Button - Yellow variant for online courses */}
<PrimaryCTAButton <PrimaryCTAButton
text="Start Free Assessment" text="Start Free Assessment"
onClick={() => navigateTo('/assessment')} onClick={() => navigateTo('/assessment')}
ariaLabel="Start your free leadership assessment" ariaLabel="Start your free leadership assessment"
@@ -1136,7 +1122,7 @@ export function LearningOnline() {
/> />
{/* Supporting Text */} {/* Supporting Text */}
<p <p
className="text-body-white mt-6 opacity-90" className="text-body-white mt-6 opacity-90"
> >
Connect with our leadership experts to discuss your organization's specific development needs. Connect with our leadership experts to discuss your organization's specific development needs.

551
src/components/ProgrammeDetail.tsx
View File

@@ -42,7 +42,7 @@ import { ImageWithFallback } from './figma/ImageWithFallback';
import { BrandedTag } from './about/BrandedTag'; import { BrandedTag } from './about/BrandedTag';
import { PrimaryCTAButton } from './PrimaryCTAButton'; import { PrimaryCTAButton } from './PrimaryCTAButton';
import { useCart } from './CartContext'; import { useCart } from './CartContext';
import { toast } from 'sonner@2.0.3'; import { toast } from 'sonner';
// Mock data structure matching API contracts // Mock data structure matching API contracts
const mockProgrammeData = { const mockProgrammeData = {
@@ -803,314 +803,297 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
{/* Enhanced Learning Outcomes */} {/* Overview Tab - Who will benefit from this course? */}
<TabsContent value="overview" className="mt-0"> <TabsContent value="overview" className="mt-0">
<div className="space-y-16"> <div className="space-y-16">
{/* Section: Learning Outcomes */} {/* Section: Who will benefit from this course? */}
<div> <div>
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="text-h2 mb-4">Learning Outcomes</h2> <h2 className="text-h2 mb-4">Who will benefit from this course?</h2>
<p className="text-body-lg text-muted max-w-3xl mx-auto">
Transform your leadership capabilities through our comprehensive curriculum designed for today's business challenges.
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{outcomes.map((outcome, index) => (
<Card key={index} className="overflow-hidden rounded-2xl border border-gray-200 card-hover-lift h-fit bg-white shadow-sm">
<CardHeader className="bg-white border-b border-gray-100 p-6">
<div className="flex items-start gap-4">
<div className="w-12 h-12 bg-[#04045B] rounded-xl flex items-center justify-center flex-shrink-0">
<BookOpen className="w-5 h-5 text-white" />
</div>
<div className="flex-1 min-w-0">
<CardTitle className="text-h4 font-semibold leading-tight">
{outcome.title}
</CardTitle>
</div>
</div>
</CardHeader>
<CardContent className="p-6">
<p className="text-body text-muted leading-relaxed">
{outcome.description}
</p>
</CardContent>
</Card>
))}
</div>
</div>
{/* Section: Who Should Attend */}
<div>
<div className="text-center mb-12">
<h2 className="text-h2 mb-4">Who Should Attend</h2>
<p className="text-body-lg text-muted max-w-3xl mx-auto"> <p className="text-body-lg text-muted max-w-3xl mx-auto">
This programme is designed for leaders at various stages of their career journey. This programme is designed for leaders at various stages of their career journey.
</p> </p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <Card className="rounded-2xl border border-gray-200 bg-white shadow-sm">
{mockAudienceSegments.map((segment, index) => ( <CardContent className="p-8">
<Card key={index} className="text-center card-hover-lift rounded-2xl border border-gray-200 bg-white shadow-sm"> <div className="flex items-start gap-4 mb-6">
<CardContent className="p-8"> <div className="w-12 h-12 bg-[#04045B] rounded-xl flex items-center justify-center flex-shrink-0">
<div className="w-20 h-20 bg-[#04045B] rounded-2xl flex items-center justify-center mx-auto mb-6"> <Users className="w-5 h-5 text-white" />
<div className="text-white"> </div>
{segment.icon} <div className="flex-1">
<h3 className="text-h4 font-semibold mb-4">Target Audience</h3>
<p className="text-body text-muted leading-relaxed">
You will find this course useful if you are responsible to craft the strategy of the institution or are someone who contributes to shaping the company or business strategy.
</p>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
{mockAudienceSegments.map((segment, index) => (
<div key={index} className="text-center p-6 bg-gray-50 rounded-xl">
<div className="w-16 h-16 bg-[#04045B] rounded-2xl flex items-center justify-center mx-auto mb-4">
<div className="text-white">
{segment.icon}
</div>
</div> </div>
<h4 className="text-subhead font-semibold mb-2">{segment.title}</h4>
<p className="text-small text-muted">{segment.description}</p>
</div> </div>
<h3 className="text-h4 font-semibold leading-tight">{segment.title}</h3> ))}
<p className="text-body text-muted leading-relaxed">{segment.description}</p> </div>
</CardContent> </CardContent>
</Card> </Card>
))}
</div>
</div>
{/* Section: Use Cases */}
<div>
<div className="text-center mb-16">
<h2 className="text-h2 mb-4">Key Use Cases</h2>
<p className="text-body-lg text-muted max-w-3xl mx-auto">
Apply your learning to real-world leadership challenges and opportunities across diverse organizational contexts.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<Card className="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
<CardContent className="p-8">
<div className="flex items-center justify-between mb-6">
<div className="w-16 h-16 bg-[#04045B] rounded-2xl flex items-center justify-center">
<Building2 className="w-8 h-8 text-white" />
</div>
<div className="w-8 h-8 bg-primary/5 rounded-full flex items-center justify-center">
<span className="text-small font-bold text-primary">01</span>
</div>
</div>
<div className="space-y-4">
<h3 className="text-h4 font-semibold leading-tight">
Organizational Transformation
</h3>
<p className="text-body text-muted leading-relaxed">
Leading large-scale organizational change initiatives and digital transformation projects
</p>
</div>
</CardContent>
</Card>
<Card className="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
<CardContent className="p-8">
<div className="flex items-center justify-between mb-6">
<div className="w-16 h-16 bg-[#04045B] rounded-2xl flex items-center justify-center">
<Users className="w-8 h-8 text-white" />
</div>
<div className="w-8 h-8 bg-primary/5 rounded-full flex items-center justify-center">
<span className="text-small font-bold text-primary">02</span>
</div>
</div>
<div className="space-y-4">
<h3 className="text-h4 font-semibold leading-tight">
Team Development
</h3>
<p className="text-body text-muted leading-relaxed">
Building high-performance teams and developing next-generation leaders within your organization
</p>
</div>
</CardContent>
</Card>
<Card className="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
<CardContent className="p-8">
<div className="flex items-center justify-between mb-6">
<div className="w-16 h-16 bg-[#04045B] rounded-2xl flex items-center justify-center">
<TrendingUp className="w-8 h-8 text-white" />
</div>
<div className="w-8 h-8 bg-primary/5 rounded-full flex items-center justify-center">
<span className="text-small font-bold text-primary">03</span>
</div>
</div>
<div className="space-y-4">
<h3 className="text-h4 font-semibold leading-tight">
Strategic Planning
</h3>
<p className="text-body text-muted leading-relaxed">
Developing and implementing strategic initiatives that drive sustainable business growth
</p>
</div>
</CardContent>
</Card>
<Card className="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
<CardContent className="p-8">
<div className="flex items-center justify-between mb-6">
<div className="w-16 h-16 bg-[#04045B] rounded-2xl flex items-center justify-center">
<Globe className="w-8 h-8 text-white" />
</div>
<div className="w-8 h-8 bg-primary/5 rounded-full flex items-center justify-center">
<span className="text-small font-bold text-primary">04</span>
</div>
</div>
<div className="space-y-4">
<h3 className="text-h4 font-semibold leading-tight">
Global Leadership
</h3>
<p className="text-body text-muted leading-relaxed">
Managing diverse, cross-cultural teams and leading in international business environments
</p>
</div>
</CardContent>
</Card>
<Card className="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
<CardContent className="p-8">
<div className="flex items-center justify-between mb-6">
<div className="w-16 h-16 bg-[#04045B] rounded-2xl flex items-center justify-center">
<Lightbulb className="w-8 h-8 text-white" />
</div>
<div className="w-8 h-8 bg-primary/5 rounded-full flex items-center justify-center">
<span className="text-small font-bold text-primary">05</span>
</div>
</div>
<div className="space-y-4">
<h3 className="text-h4 font-semibold leading-tight">
Innovation Management
</h3>
<p className="text-body text-muted leading-relaxed">
Fostering innovation culture and leading creative problem-solving initiatives
</p>
</div>
</CardContent>
</Card>
<Card className="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
<CardContent className="p-8">
<div className="flex items-center justify-between mb-6">
<div className="w-16 h-16 bg-[#04045B] rounded-2xl flex items-center justify-center">
<Target className="w-8 h-8 text-white" />
</div>
<div className="w-8 h-8 bg-primary/5 rounded-full flex items-center justify-center">
<span className="text-small font-bold text-primary">06</span>
</div>
</div>
<div className="space-y-4">
<h3 className="text-h4 font-semibold leading-tight">
Performance Excellence
</h3>
<p className="text-body text-muted leading-relaxed">
Driving operational excellence and achieving breakthrough performance results
</p>
</div>
</CardContent>
</Card>
</div>
</div> </div>
</div> </div>
</TabsContent> </TabsContent>
{/* Enhanced Curriculum Structure */} {/* Enhanced Curriculum Structure */}
<TabsContent value="curriculum" className="mt-0"> <TabsContent value="curriculum" className="mt-0">
<div> <div className="space-y-16">
<div className="text-center mb-12"> {/* Section: What will you learn through this course? */}
<h2 className="text-h2 mb-4">Programme Curriculum</h2> <div>
<p className="text-body-lg text-muted max-w-3xl mx-auto"> <div className="text-center mb-12">
A comprehensive curriculum designed to build strategic leadership capabilities through progressive modules. <h2 className="text-h2 mb-4">What will you learn through this course?</h2>
</p> <p className="text-body-lg text-muted max-w-3xl mx-auto">
</div> This course will help you understand the role of leadership in shaping strategy.
</p>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8"> </div>
{curriculum.map((module, index) => (
<Card key={index} className="overflow-hidden rounded-2xl border border-gray-200 card-hover-lift h-fit bg-white shadow-sm"> <Card className="rounded-2xl border border-gray-200 bg-white shadow-sm">
<CardHeader className="bg-white border-b border-gray-100 p-6"> <CardContent className="p-8">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4 mb-6">
<div className="w-12 h-12 bg-[#04045B] rounded-xl flex items-center justify-center flex-shrink-0"> <div className="w-12 h-12 bg-[#04045B] rounded-xl flex items-center justify-center flex-shrink-0">
<span className="text-subhead font-bold text-white">{module.moduleNumber}</span> <BookOpen className="w-5 h-5 text-white" />
</div>
<div className="flex-1">
<h3 className="text-h4 font-semibold mb-4">Learning Outcomes</h3>
<p className="text-body text-muted leading-relaxed">
This course will help you understand the role of leadership in shaping strategy. You will learn the personal resources you need (characteristics or traits, we refer to them as leadership orientations) to enable you to think strategically and formulate strategy.
</p>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8">
{outcomes.map((outcome, index) => (
<div key={index} className="p-6 bg-gray-50 rounded-xl">
<h4 className="text-subhead font-semibold mb-3">{outcome.title}</h4>
<p className="text-body text-muted leading-relaxed">{outcome.description}</p>
</div> </div>
<div className="flex-1 min-w-0"> ))}
<CardTitle className="text-h4 font-semibold leading-tight"> </div>
{module.title} </CardContent>
</CardTitle> </Card>
<div className="flex flex-wrap items-center gap-2"> </div>
<Badge variant="outline" className="bg-white/80 rounded-lg text-xs px-2 py-1">{module.duration}</Badge>
<Badge variant="secondary" className="rounded-lg text-xs px-2 py-1">{module.deliveryStyle}</Badge> {/* Section: How is the learning structured? */}
</div> <div>
<div className="text-center mb-12">
<h2 className="text-h2 mb-4">How is the learning structured?</h2>
<p className="text-body-lg text-muted max-w-3xl mx-auto">
This course is designed to help you uncover dimensions through bite-size, easy to consume learning units.
</p>
</div>
<Card className="rounded-2xl border border-gray-200 bg-white shadow-sm">
<CardContent className="p-8">
<div className="flex items-start gap-4 mb-6">
<div className="w-12 h-12 bg-[#04045B] rounded-xl flex items-center justify-center flex-shrink-0">
<Lightbulb className="w-5 h-5 text-white" />
</div>
<div className="flex-1">
<h3 className="text-h4 font-semibold mb-4">Learning Structure</h3>
<div className="space-y-4 text-body text-muted leading-relaxed">
<p>
This course is designed to help you uncover the dimensions mentioned above by breaking it down to learning units that are bite size and easy to consume. It is structured to help you understand the content, learn its application and reflect on your behaviour relating to it. It offers a structure to skills practice to continue beyond the course as well.
</p>
<p>
The content is structured for you to absorb, internalise, reflect, be self-aware and practice building skill in that unit of content before proceeding to the next. We recommend you learn by spending time observing, reflecting and drawing deeper insights from your environment and watching others relating to the content as well. As you progress reflect and identify the areas you want to develop and practice skills beyond the course.
</p>
<p>
Deep involvement in each unit of content before moving to the next will heighten your learning experience of the program.
</p>
</div> </div>
</div> </div>
</CardHeader> </div>
<CardContent className="p-6">
<ul className="space-y-3"> {/* Learning Structure Visual */}
{module.topics.map((topic, topicIndex) => ( <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-8">
<li key={topicIndex} className="flex items-start gap-3"> <div className="text-center p-4 bg-blue-50 rounded-xl">
<CheckCircle className="w-4 h-4 text-primary mt-1 flex-shrink-0" /> <div className="w-12 h-12 bg-[#04045B] rounded-full flex items-center justify-center mx-auto mb-3">
<span className="text-body text-muted leading-relaxed">{topic}</span> <span className="text-white font-bold">1</span>
</li> </div>
))} <h4 className="text-subhead font-semibold mb-2">Absorb</h4>
</ul> <p className="text-small text-muted">Learn and understand core concepts</p>
</CardContent> </div>
</Card> <div className="text-center p-4 bg-blue-50 rounded-xl">
))} <div className="w-12 h-12 bg-[#04045B] rounded-full flex items-center justify-center mx-auto mb-3">
<span className="text-white font-bold">2</span>
</div>
<h4 className="text-subhead font-semibold mb-2">Reflect</h4>
<p className="text-small text-muted">Self-awareness and introspection</p>
</div>
<div className="text-center p-4 bg-blue-50 rounded-xl">
<div className="w-12 h-12 bg-[#04045B] rounded-full flex items-center justify-center mx-auto mb-3">
<span className="text-white font-bold">3</span>
</div>
<h4 className="text-subhead font-semibold mb-2">Practice</h4>
<p className="text-small text-muted">Apply skills in real situations</p>
</div>
<div className="text-center p-4 bg-blue-50 rounded-xl">
<div className="w-12 h-12 bg-[#04045B] rounded-full flex items-center justify-center mx-auto mb-3">
<span className="text-white font-bold">4</span>
</div>
<h4 className="text-subhead font-semibold mb-2">Develop</h4>
<p className="text-small text-muted">Continuous skill building</p>
</div>
</div>
</CardContent>
</Card>
</div>
{/* Section: Programme Curriculum Modules */}
<div>
<div className="text-center mb-12">
<h2 className="text-h2 mb-4">Programme Curriculum</h2>
<p className="text-body-lg text-muted max-w-3xl mx-auto">
A comprehensive curriculum designed to build strategic leadership capabilities through progressive modules.
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{curriculum.map((module, index) => (
<Card key={index} className="overflow-hidden rounded-2xl border border-gray-200 card-hover-lift h-fit bg-white shadow-sm">
<CardHeader className="bg-white border-b border-gray-100 p-6">
<div className="flex items-start gap-4">
<div className="w-12 h-12 bg-[#04045B] rounded-xl flex items-center justify-center flex-shrink-0">
<span className="text-subhead font-bold text-white">{module.moduleNumber}</span>
</div>
<div className="flex-1 min-w-0">
<CardTitle className="text-h4 font-semibold leading-tight">
{module.title}
</CardTitle>
<div className="flex flex-wrap items-center gap-2">
<Badge variant="outline" className="bg-white/80 rounded-lg text-xs px-2 py-1">{module.duration}</Badge>
<Badge variant="secondary" className="rounded-lg text-xs px-2 py-1">{module.deliveryStyle}</Badge>
</div>
</div>
</div>
</CardHeader>
<CardContent className="p-6">
<ul className="space-y-3">
{module.topics.map((topic, topicIndex) => (
<li key={topicIndex} className="flex items-start gap-3">
<CheckCircle className="w-4 h-4 text-primary mt-1 flex-shrink-0" />
<span className="text-body text-muted leading-relaxed">{topic}</span>
</li>
))}
</ul>
</CardContent>
</Card>
))}
</div>
</div> </div>
</div> </div>
</TabsContent> </TabsContent>
{/* Enhanced Faculty Profiles */} {/* Enhanced Faculty Profiles */}
<TabsContent value="faculty" className="mt-0"> <TabsContent value="faculty" className="mt-0">
<div> <div className="space-y-16">
<div className="text-center mb-12"> {/* Section: Approach to the Course */}
<h2 className="text-h2 mb-4">World-Class Faculty</h2> <div>
<p className="text-body-lg text-muted max-w-3xl mx-auto"> <div className="text-center mb-12">
Learn from industry leaders and renowned academics with decades of executive experience. <h2 className="text-h2 mb-4">Approach to the Course</h2>
</p> <p className="text-body-lg text-muted max-w-3xl mx-auto">
Formulating Strategy is a theme that requires the exercise of leadership.
</p>
</div>
<Card className="rounded-2xl border border-gray-200 bg-white shadow-sm">
<CardContent className="p-8">
<div className="flex items-start gap-4 mb-6">
<div className="w-12 h-12 bg-[#04045B] rounded-xl flex items-center justify-center flex-shrink-0">
<Target className="w-5 h-5 text-white" />
</div>
<div className="flex-1">
<h3 className="text-h4 font-semibold mb-4">Our Methodology</h3>
<div className="space-y-4 text-body text-muted leading-relaxed">
<p>
Formulating Strategy is a theme that requires the exercise of leadership. Thus, the course starts with offering you an opportunity to review your lens to leadership and provides alternate perspectives to leadership.
</p>
<p>
You will be effective in the exercise of leadership based the leadership resources you possess and your ability to apply those resources to suit the situation. We refer to these leadership resources as Leadership Orientations. Orientations are characteristics or traits. In this course you will learn the leadership orientations that have an impact on Formulating Strategies.
</p>
<p>
The course will help you be self-aware and gain insights on your leadership orientations. You will learn the leadership abilities that have an impact on strategy formulation. Leadership abilities require the combined applying of the leadership orientations learnt.
</p>
<p>
Developing these leadership orientations and leadership abilities will help you think strategically. These include thinking orientation, offering, drawing and managing of perspectives, the understanding of risk, its assessment, management and mitigation and your orientation to learn. Applying thinking, perspectives, risk appetite and learning appropriately will enable you to spot opportunities and make judgement calls with limited information. All these ingredients come together to help you think through strategy from an outside in perspective and helps in formulating strategies.
</p>
<p>
This course will conclude offering you the perspectives and experiences of leaders when engaging with strategy and their learnings from it.
</p>
</div>
</div>
</div>
</CardContent>
</Card>
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{faculty.map((member, index) => (
<Card key={index} className="text-center card-hover-lift rounded-2xl border border-gray-200 bg-white shadow-sm">
<CardContent className="p-8">
<Avatar className="w-28 h-28 mx-auto mb-6 ring-4 ring-gray-100">
<AvatarImage src={member.image} alt={member.name} />
<AvatarFallback className="bg-[#04045B] text-white text-xl font-semibold">
{member.name.split(' ').map(n => n[0]).join('')}
</AvatarFallback>
</Avatar>
<h3 className="text-h4 mb-2 font-semibold">{member.name}</h3>
<p className="text-body text-primary font-medium mb-2">{member.title}</p>
<p className="text-small text-muted mb-4">{member.organization}</p>
<p className="text-body mb-6 leading-relaxed">{member.bio}</p>
<div className="space-y-3 mb-6">
{member.credentials.map((credential, credIndex) => (
<Badge key={credIndex} variant="outline" className="text-xs mx-1 rounded-lg">
{credential}
</Badge>
))}
</div>
<div className="flex flex-wrap justify-center gap-2 mb-6"> {/* Section: World-Class Faculty */}
{member.expertise.map((skill, skillIndex) => ( <div>
<Badge key={skillIndex} variant="secondary" className="text-xs rounded-lg bg-primary/5 text-primary"> <div className="text-center mb-12">
{skill} <h2 className="text-h2 mb-4">World-Class Faculty</h2>
</Badge> <p className="text-body-lg text-muted max-w-3xl mx-auto">
))} Learn from industry leaders and renowned academics with decades of executive experience.
</div> </p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{faculty.map((member, index) => (
<Card key={index} className="text-center card-hover-lift rounded-2xl border border-gray-200 bg-white shadow-sm">
<CardContent className="p-8">
<Avatar className="w-28 h-28 mx-auto mb-6 ring-4 ring-gray-100">
<AvatarImage src={member.image} alt={member.name} />
<AvatarFallback className="bg-[#04045B] text-white text-xl font-semibold">
{member.name.split(' ').map(n => n[0]).join('')}
</AvatarFallback>
</Avatar>
<h3 className="text-h4 mb-2 font-semibold">{member.name}</h3>
<p className="text-body text-primary font-medium mb-2">{member.title}</p>
<p className="text-small text-muted mb-4">{member.organization}</p>
<p className="text-body mb-6 leading-relaxed">{member.bio}</p>
<div className="space-y-3 mb-6">
{member.credentials.map((credential, credIndex) => (
<Badge key={credIndex} variant="outline" className="text-xs mx-1 rounded-lg">
{credential}
</Badge>
))}
</div>
<Button <div className="flex flex-wrap justify-center gap-2 mb-6">
variant="outline" {member.expertise.map((skill, skillIndex) => (
size="sm" <Badge key={skillIndex} variant="secondary" className="text-xs rounded-lg bg-primary/5 text-primary">
className="w-full rounded-xl border-2 hover:bg-primary hover:text-white transition-all duration-200" {skill}
onClick={() => window.open(member.linkedinUrl, '_blank')} </Badge>
> ))}
<ExternalLink className="w-4 h-4 mr-2" /> </div>
LinkedIn Profile
</Button> <Button
</CardContent> variant="outline"
</Card> size="sm"
))} className="w-full rounded-xl border-2 hover:bg-primary hover:text-white transition-all duration-200"
onClick={() => window.open(member.linkedinUrl, '_blank')}
>
<ExternalLink className="w-4 h-4 mr-2" />
LinkedIn Profile
</Button>
</CardContent>
</Card>
))}
</div>
</div> </div>
</div> </div>
</TabsContent> </TabsContent>
@@ -1382,7 +1365,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
borderColor: option.popular ? '#F8C301' : '#F8C301', borderColor: option.popular ? '#F8C301' : '#F8C301',
color: option.popular ? 'white' : '#F8C301' color: option.popular ? 'white' : '#F8C301'
}} }}
onMouseEnter={(e) => { onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => {
if (!option.popular) { if (!option.popular) {
e.currentTarget.style.backgroundColor = '#F8C301'; e.currentTarget.style.backgroundColor = '#F8C301';
e.currentTarget.style.color = 'white'; e.currentTarget.style.color = 'white';
@@ -1390,7 +1373,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
e.currentTarget.style.backgroundColor = '#E6AF01'; e.currentTarget.style.backgroundColor = '#E6AF01';
} }
}} }}
onMouseLeave={(e) => { onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => {
if (!option.popular) { if (!option.popular) {
e.currentTarget.style.backgroundColor = 'transparent'; e.currentTarget.style.backgroundColor = 'transparent';
e.currentTarget.style.color = '#F8C301'; e.currentTarget.style.color = '#F8C301';
@@ -1490,7 +1473,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
variant="outline" variant="outline"
size="sm" size="sm"
className="flex-1 rounded-xl border-2 hover:bg-gray-50 transition-all duration-200" className="flex-1 rounded-xl border-2 hover:bg-gray-50 transition-all duration-200"
onClick={(e) => { onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation(); e.stopPropagation();
// Add to cart functionality // Add to cart functionality
}} }}
@@ -1500,7 +1483,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
<Button <Button
size="sm" size="sm"
className="flex-1 rounded-xl bg-primary hover:bg-primary/90 text-white transition-all duration-200" className="flex-1 rounded-xl bg-primary hover:bg-primary/90 text-white transition-all duration-200"
onClick={(e) => { onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation(); e.stopPropagation();
navigateTo(`/course/${related.id}`); navigateTo(`/course/${related.id}`);
}} }}

55
src/components/ServicesSection.tsx
View File

@@ -1,11 +1,11 @@
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
import { motion } from "motion/react"; import { motion } from "motion/react";
import { import {
Users, Users,
Settings, Settings,
User, User,
Globe, Globe,
MessageSquare, MessageSquare,
GraduationCap, GraduationCap,
ArrowRight ArrowRight
} from "lucide-react"; } from "lucide-react";
@@ -33,7 +33,7 @@ const recognitionItems = [
}, },
{ {
id: 3, id: 3,
title: "Culture Competence", title: "Culture Competence",
description: "Build cultural awareness and inclusive practices that enhance team collaboration. Navigate cultural differences with confidence and create inclusive environments.", description: "Build cultural awareness and inclusive practices that enhance team collaboration. Navigate cultural differences with confidence and create inclusive environments.",
icon: <Globe size={28} />, icon: <Globe size={28} />,
badge: "GLOBAL FOCUS", badge: "GLOBAL FOCUS",
@@ -107,10 +107,10 @@ export function ServicesSection() {
}; };
return ( return (
<section <section
ref={sectionRef} ref={sectionRef}
className="py-16 lg:py-20" className="py-16 lg:py-20"
style={{ style={{
backgroundColor: '#F7F7FD', backgroundColor: '#F7F7FD',
fontFamily: 'var(--font-family-brand)' fontFamily: 'var(--font-family-brand)'
}} }}
@@ -122,24 +122,23 @@ export function ServicesSection() {
{/* Left Side - Sticky Content */} {/* Left Side - Sticky Content */}
<div className="col-span-5 sticky top-24 self-start"> <div className="col-span-5 sticky top-24 self-start">
<div className="recognition-header pr-8"> <div className="recognition-header pr-8">
<BrandedTag <BrandedTag
text="Leadership Development Programs" text="Leadership Development Programs"
/> />
<h2 <h2
id="recognition-section-heading" id="recognition-section-heading"
className="text-h2 mb-6" className="text-h2 mb-6"
> >
Services That Shape Stronger Leaders Shaping Leaders, Cultures, and Institutions
</h2> </h2>
<p className="text-body-lg text-muted"> <p className="text-body-lg text-muted">
Our comprehensive leadership development programs are designed to build future-ready leaders who thrive in complexity and drive measurable organizational impact. No two institutions are alike — and neither are their leadership needs. That's why every KLC service is rooted in research, tailored to context, and aligned with strategy. From shaping leaders and managers to shaping culture, developing talent frameworks, and offering practical high impact learning, we partner with you to create leadership solutions that deliver lasting value. </p>
</p>
</div> </div>
</div> </div>
{/* Right Side - Scrolling Cards */} {/* Right Side - Scrolling Cards */}
<div className="col-span-7"> <div className="col-span-7">
<div <div
className="recognition-cards space-y-6" className="recognition-cards space-y-6"
role="list" role="list"
aria-label="Leadership development services" aria-label="Leadership development services"
@@ -154,23 +153,23 @@ export function ServicesSection() {
aria-describedby={`recognition-desc-${item.id}`} aria-describedby={`recognition-desc-${item.id}`}
tabIndex={0} tabIndex={0}
onKeyDown={(e) => handleKeyDown(e, index)} onKeyDown={(e) => handleKeyDown(e, index)}
style={{ style={{
transitionDelay: `${(index + 1) * 150}ms`, transitionDelay: `${(index + 1) * 150}ms`,
opacity: isVisible ? 1 : 0 opacity: isVisible ? 1 : 0
}} }}
> >
<div <div
className="p-8 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border bg-white" className="p-8 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border bg-white"
style={{ style={{
borderColor: 'var(--color-border)', borderColor: 'var(--color-border)',
borderRadius: '12px', borderRadius: '12px',
fontFamily: 'var(--font-family-brand)' fontFamily: 'var(--font-family-brand)'
}} }}
> >
<div className="flex items-start justify-between mb-6"> <div className="flex items-start justify-between mb-6">
<div <div
className="w-14 h-14 flex items-center justify-center transition-transform duration-300 group-hover:scale-110" className="w-14 h-14 flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
style={{ style={{
backgroundColor: 'var(--color-brand-primary)', backgroundColor: 'var(--color-brand-primary)',
borderRadius: '12px', borderRadius: '12px',
color: 'white' color: 'white'
@@ -179,9 +178,9 @@ export function ServicesSection() {
{item.icon} {item.icon}
</div> </div>
{item.badge && ( {item.badge && (
<div <div
className="px-3 py-1 text-xs font-bold uppercase tracking-wider" className="px-3 py-1 text-xs font-bold uppercase tracking-wider"
style={{ style={{
backgroundColor: item.badgeColor, backgroundColor: item.badgeColor,
color: item.badgeColor === '#F8C301' ? 'var(--color-brand-black)' : 'white', color: item.badgeColor === '#F8C301' ? 'var(--color-brand-black)' : 'white',
borderRadius: '20px', borderRadius: '20px',
@@ -192,15 +191,15 @@ export function ServicesSection() {
</div> </div>
)} )}
</div> </div>
<div className="recognition-card-content"> <div className="recognition-card-content">
<h3 <h3
id={`recognition-title-${item.id}`} id={`recognition-title-${item.id}`}
className="text-h4 mb-4" className="text-h4 mb-4"
> >
{item.title} {item.title}
</h3> </h3>
<p <p
id={`recognition-desc-${item.id}`} id={`recognition-desc-${item.id}`}
className="text-small text-muted leading-relaxed" className="text-small text-muted leading-relaxed"
> >
@@ -222,7 +221,7 @@ export function ServicesSection() {
transition={{ duration: 0.6, delay: 0.6 }} transition={{ duration: 0.6, delay: 0.6 }}
viewport={{ once: true }} viewport={{ once: true }}
> >
<PrimaryCTAButton <PrimaryCTAButton
text="Get Started Today" text="Get Started Today"
onClick={() => navigateTo('/leadership-journey')} onClick={() => navigateTo('/leadership-journey')}
ariaLabel="Get started with leadership development programs" ariaLabel="Get started with leadership development programs"

9
src/components/StatsSection.tsx
View File

@@ -76,8 +76,7 @@ export function StatsSection() {
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">
<div className="lg:col-span-6 md:col-span-8 sm:col-span-12"> <div className="lg:col-span-6 md:col-span-8 sm:col-span-12">
<h2 className="text-h2 mb-8"> <h2 className="text-h2 mb-8">
Driving impact by building future-ready leaders who thrive in Your Partner in Leadership, Culture, and Capability Building
complexity and lead with confidence.
</h2> </h2>
{/* CTA Button */} {/* CTA Button */}
<PrimaryCTAButton <PrimaryCTAButton
@@ -91,19 +90,19 @@ export function StatsSection() {
<div className="hidden lg:block lg:col-start-9 lg:col-end-13"> <div className="hidden lg:block lg:col-start-9 lg:col-end-13">
<div className="space-y-6"> <div className="space-y-6">
<StatItem <StatItem
end={27000} end={27187}
suffix="+" suffix="+"
label="LEADERS DEVELOPED" label="LEADERS DEVELOPED"
duration={2500} duration={2500}
/> />
<StatItem <StatItem
end={150} end={15510}
suffix="+" suffix="+"
label="CORPORATE CLIENTS" label="CORPORATE CLIENTS"
duration={2000} duration={2000}
/> />
<StatItem <StatItem
end={20} end={1240}
suffix="+" suffix="+"
label="COUNTRIES SERVED" label="COUNTRIES SERVED"
duration={1800} duration={1800}

37
src/components/VirtualSpaceSection.tsx
View File

@@ -104,10 +104,9 @@ interface BookingFormData {
interface FacilityCardProps { interface FacilityCardProps {
facility: typeof facilities[0]; facility: typeof facilities[0];
index: number; index: number;
onBookNow: (facility: typeof facilities[0]) => void;
} }
function FacilityCard({ facility, index, onBookNow }: FacilityCardProps) { function FacilityCard({ facility, index }: FacilityCardProps) {
const IconComponent = facility.icon; const IconComponent = facility.icon;
return ( return (
@@ -153,14 +152,10 @@ function FacilityCard({ facility, index, onBookNow }: FacilityCardProps) {
{facility.description} {facility.description}
</p> </p>
{/* Book Now Button */} {/* Capacity Info */}
<div className="flex justify-center"> <div className="flex justify-center">
<div className="hero-slide-button"> <div className="bg-white/20 backdrop-blur-sm rounded-lg px-4 py-2 border border-white/30">
<PrimaryCTAButton <p className="text-white text-sm font-medium">Capacity: {facility.capacity} people</p>
text="Book Now"
onClick={() => onBookNow(facility)}
ariaLabel={`Book ${facility.name} now`}
/>
</div> </div>
</div> </div>
</div> </div>
@@ -371,7 +366,7 @@ function BookingModal({
</div> </div>
<div> <div>
<h2 className="text-body lg:text-subhead mb-1"> <h2 className="text-body lg:text-subhead mb-1">
{facility.name} Virtual Tour & Booking Kautilya Leadership Centre
</h2> </h2>
<p className="text-small text-muted"> <p className="text-small text-muted">
Capacity: {facility.capacity} people Capacity: {facility.capacity} people
@@ -391,7 +386,7 @@ function BookingModal({
{/* Modal Content - Side by Side Layout No Scroll */} {/* Modal Content - Side by Side Layout No Scroll */}
<div className="grid grid-cols-1 lg:grid-cols-2 flex-1 min-h-0"> <div className="grid grid-cols-1 lg:grid-cols-2 flex-1 min-h-0">
{/* Left Side - Virtual Tour */} {/* Left Side - Virtual Tour */}
<div className="p-3 lg:p-6 border-r border-gray-100 flex flex-col min-h-0"> <div className="p-3 lg:p-6 border-r border-gray-100 flex flex-col min-h-0 overflow-y-auto">
<div className="flex flex-col h-full space-y-2 lg:space-y-3"> <div className="flex flex-col h-full space-y-2 lg:space-y-3">
{/* Video Section - Compact */} {/* Video Section - Compact */}
<div className="flex-shrink-0"> <div className="flex-shrink-0">
@@ -504,7 +499,7 @@ function BookingModal({
{/* Action Button - Compact */} {/* Action Button - Compact */}
<Button <Button
variant="outline" variant="outline"
onClick={() => navigateTo('/services/learning-facility')} onClick={() => navigateTo('/learning-facility')}
className="w-full h-8 lg:h-10 text-xs lg:text-small" className="w-full h-8 lg:h-10 text-xs lg:text-small"
> >
<Building className="w-3 h-3 lg:w-4 lg:h-4 mr-1" /> <Building className="w-3 h-3 lg:w-4 lg:h-4 mr-1" />
@@ -641,7 +636,7 @@ function BookingModal({
<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">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div <div
className="w-6 h-6 rounded flex items-center justify-center" className="w-6 h-6 rounded flex items-center justify-center"
@@ -654,7 +649,7 @@ function BookingModal({
<p className="text-xs text-gray-600">Capacity: {facility.capacity} people</p> <p className="text-xs text-gray-600">Capacity: {facility.capacity} people</p>
</div> </div>
</div> </div>
</div> </div> */}
{/* Calendar Date Selection */} {/* Calendar Date Selection */}
<div className="space-y-2"> <div className="space-y-2">
@@ -731,8 +726,9 @@ export function VirtualSpaceSection() {
const [selectedFacility, setSelectedFacility] = useState<typeof facilities[0] | null>(null); const [selectedFacility, setSelectedFacility] = useState<typeof facilities[0] | null>(null);
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const handleBookNow = (facility: typeof facilities[0]) => { const handleBookNow = () => {
setSelectedFacility(facility); // Set the first facility as default for booking
setSelectedFacility(facilities[0]);
setIsModalOpen(true); setIsModalOpen(true);
}; };
@@ -752,7 +748,6 @@ export function VirtualSpaceSection() {
key={facility.id} key={facility.id}
facility={facility} facility={facility}
index={index} index={index}
onBookNow={handleBookNow}
/> />
))} ))}
</div> </div>
@@ -796,7 +791,7 @@ export function VirtualSpaceSection() {
Take a virtual walk through our state-of-the-art facility designed to inspire leadership excellence and foster collaborative learning. Take a virtual walk through our state-of-the-art facility designed to inspire leadership excellence and foster collaborative learning.
</motion.p> </motion.p>
{/* Main CTA Button - Explore Our Space */} {/* Main CTA Button - Book Now */}
<motion.div <motion.div
className="flex justify-center" className="flex justify-center"
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@@ -806,9 +801,9 @@ export function VirtualSpaceSection() {
> >
<div className="hero-slide-button"> <div className="hero-slide-button">
<PrimaryCTAButton <PrimaryCTAButton
text="Explore Our Space" text="Book Now"
onClick={() => navigateTo('/services/learning-facility')} onClick={handleBookNow}
ariaLabel="Explore our virtual learning space and facilities" ariaLabel="Book our virtual learning space and facilities"
/> />
</div> </div>
</motion.div> </motion.div>