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>
</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 */}
<section className="py-20" style={{ backgroundColor: 'var(--color-bg-white)' }}>
@@ -1125,400 +976,6 @@ export function LearningFacilityNew() {
</div>
</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 */}
<Dialog open={isBookingModalOpen} onOpenChange={setIsBookingModalOpen}>
<DialogContent className="max-w-md">
@@ -1803,8 +1260,6 @@ export function LearningFacilityNew() {
tagText="Facility Excellence"
/>
{/* CTA Section - Using standardized home page CTA */}
<CTABannerSection />
{/* Facility Tour - How to Reach Us Section */}
<section className="py-12" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
@@ -1952,6 +1407,9 @@ export function LearningFacilityNew() {
</div>
</section>
{/* CTA Section - Using standardized home page CTA */}
<CTABannerSection />
</div>
);
}

28
src/components/LearningOnline.tsx
View File

@@ -368,24 +368,12 @@ export function LearningOnline() {
{/* Main Header */}
<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>
{/* Statistics */}
<div className="articles-hero-stats grid grid-cols-3 gap-12 max-w-3xl mx-auto">
<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>
<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.
</h2>
</motion.div>
</div>
</div>
@@ -417,8 +405,7 @@ export function LearningOnline() {
<div className="flex items-center border border-gray-300 rounded-lg overflow-hidden">
<button
onClick={() => setViewMode('grid')}
className={`p-2 transition-colors ${
viewMode === 'grid'
className={`p-2 transition-colors ${viewMode === 'grid'
? 'text-white'
: 'bg-white text-gray-600 hover:bg-gray-50'
}`}
@@ -431,8 +418,7 @@ export function LearningOnline() {
</button>
<button
onClick={() => setViewMode('list')}
className={`p-2 transition-colors ${
viewMode === 'list'
className={`p-2 transition-colors ${viewMode === 'list'
? 'text-white'
: 'bg-white text-gray-600 hover:bg-gray-50'
}`}
@@ -869,7 +855,7 @@ export function LearningOnline() {
isOpen={isCartPopupOpen}
onClose={handleCloseCartPopup}
cartItems={[]} // Not used anymore as CartPopup will get items from context
onRemoveItem={() => {}} // Not used anymore
onRemoveItem={() => { }} // Not used anymore
recentlyAddedItem={recentlyAddedItem}
/>

367
src/components/ProgrammeDetail.tsx
View File

@@ -42,7 +42,7 @@ import { ImageWithFallback } from './figma/ImageWithFallback';
import { BrandedTag } from './about/BrandedTag';
import { PrimaryCTAButton } from './PrimaryCTAButton';
import { useCart } from './CartContext';
import { toast } from 'sonner@2.0.3';
import { toast } from 'sonner';
// Mock data structure matching API contracts
const mockProgrammeData = {
@@ -803,217 +803,156 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
</TabsTrigger>
</TabsList>
{/* Enhanced Learning Outcomes */}
{/* Overview Tab - Who will benefit from this course? */}
<TabsContent value="overview" className="mt-0">
<div className="space-y-16">
{/* Section: Learning Outcomes */}
{/* Section: Who will benefit from this course? */}
<div>
<div className="text-center mb-12">
<h2 className="text-h2 mb-4">Learning Outcomes</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>
<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">
This programme is designed for leaders at various stages of their career journey.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{mockAudienceSegments.map((segment, index) => (
<Card key={index} className="text-center card-hover-lift rounded-2xl border border-gray-200 bg-white shadow-sm">
<Card className="rounded-2xl border border-gray-200 bg-white shadow-sm">
<CardContent className="p-8">
<div className="w-20 h-20 bg-[#04045B] rounded-2xl flex items-center justify-center mx-auto mb-6">
<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">
<Users className="w-5 h-5 text-white" />
</div>
<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>
<h3 className="text-h4 font-semibold leading-tight">{segment.title}</h3>
<p className="text-body text-muted leading-relaxed">{segment.description}</p>
</CardContent>
</Card>
<h4 className="text-subhead font-semibold mb-2">{segment.title}</h4>
<p className="text-small text-muted">{segment.description}</p>
</div>
))}
</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>
</TabsContent>
{/* Enhanced Curriculum Structure */}
<TabsContent value="curriculum" className="mt-0">
<div className="space-y-16">
{/* Section: What will you learn through this course? */}
<div>
<div className="text-center mb-12">
<h2 className="text-h2 mb-4">What will you learn through this course?</h2>
<p className="text-body-lg text-muted max-w-3xl mx-auto">
This course will help you understand the role of leadership in shaping strategy.
</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">
<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>
</CardContent>
</Card>
</div>
{/* Section: How is the learning structured? */}
<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>
{/* Learning Structure Visual */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-8">
<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">1</span>
</div>
<h4 className="text-subhead font-semibold mb-2">Absorb</h4>
<p className="text-small text-muted">Learn and understand core concepts</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">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>
@@ -1055,10 +994,53 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
))}
</div>
</div>
</div>
</TabsContent>
{/* Enhanced Faculty Profiles */}
<TabsContent value="faculty" className="mt-0">
<div className="space-y-16">
{/* Section: Approach to the Course */}
<div>
<div className="text-center mb-12">
<h2 className="text-h2 mb-4">Approach to the Course</h2>
<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>
{/* Section: World-Class Faculty */}
<div>
<div className="text-center mb-12">
<h2 className="text-h2 mb-4">World-Class Faculty</h2>
@@ -1113,6 +1095,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
))}
</div>
</div>
</div>
</TabsContent>
{/* Enhanced Testimonials - Landing Page Design */}
@@ -1382,7 +1365,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
borderColor: option.popular ? '#F8C301' : '#F8C301',
color: option.popular ? 'white' : '#F8C301'
}}
onMouseEnter={(e) => {
onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => {
if (!option.popular) {
e.currentTarget.style.backgroundColor = '#F8C301';
e.currentTarget.style.color = 'white';
@@ -1390,7 +1373,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
e.currentTarget.style.backgroundColor = '#E6AF01';
}
}}
onMouseLeave={(e) => {
onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => {
if (!option.popular) {
e.currentTarget.style.backgroundColor = 'transparent';
e.currentTarget.style.color = '#F8C301';
@@ -1490,7 +1473,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
variant="outline"
size="sm"
className="flex-1 rounded-xl border-2 hover:bg-gray-50 transition-all duration-200"
onClick={(e) => {
onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
// Add to cart functionality
}}
@@ -1500,7 +1483,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
<Button
size="sm"
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();
navigateTo(`/course/${related.id}`);
}}

5
src/components/ServicesSection.tsx
View File

@@ -129,11 +129,10 @@ export function ServicesSection() {
id="recognition-section-heading"
className="text-h2 mb-6"
>
Services That Shape Stronger Leaders
Shaping Leaders, Cultures, and Institutions
</h2>
<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.
</p>
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>
</div>
</div>

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

37
src/components/VirtualSpaceSection.tsx
View File

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