1698 lines
78 KiB
TypeScript
1698 lines
78 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import { Button } from './ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
|
|
import { Badge } from './ui/badge';
|
|
import { Input } from './ui/input';
|
|
import { Label } from './ui/label';
|
|
import { Textarea } from './ui/textarea';
|
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
|
|
import { Separator } from './ui/separator';
|
|
import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
|
|
import {
|
|
Clock,
|
|
Users,
|
|
Award,
|
|
Play,
|
|
Download,
|
|
ChevronRight,
|
|
ChevronLeft,
|
|
Star,
|
|
Calendar,
|
|
Globe,
|
|
Building2,
|
|
User,
|
|
Mail,
|
|
Phone,
|
|
MessageCircle,
|
|
CheckCircle,
|
|
BookOpen,
|
|
Target,
|
|
TrendingUp,
|
|
Lightbulb,
|
|
ArrowRight,
|
|
ExternalLink,
|
|
Quote,
|
|
X,
|
|
AlertCircle
|
|
} from 'lucide-react';
|
|
import { motion } from 'motion/react';
|
|
import { navigateTo } from './Router';
|
|
import { ImageWithFallback } from './figma/ImageWithFallback';
|
|
import { BrandedTag } from './about/BrandedTag';
|
|
import { PrimaryCTAButton } from './PrimaryCTAButton';
|
|
import { useCart } from './CartContext';
|
|
import { toast } from 'sonner@2.0.3';
|
|
|
|
// Mock data structure matching API contracts
|
|
const mockProgrammeData = {
|
|
id: 'exec-leadership-2024',
|
|
title: 'Executive Leadership Development Programme',
|
|
subtitle: 'Transform Your Leadership Impact & Drive Organizational Excellence',
|
|
duration: '6 Months',
|
|
level: 'Executive',
|
|
format: 'Hybrid',
|
|
price: '₹2,50,000',
|
|
originalPrice: '₹3,00,000',
|
|
currency: 'INR',
|
|
published: true,
|
|
enrollmentStatus: 'open', // open, closed, enrolled, waitlist
|
|
spotsLeft: 12,
|
|
maxCapacity: 30,
|
|
startDate: '2024-03-15',
|
|
endDate: '2024-09-15',
|
|
thumbnail: 'https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=800&h=600&fit=crop',
|
|
ctaEnroll: 'Enroll Now',
|
|
ctaBrochure: 'Download Brochure',
|
|
highlights: [
|
|
'Harvard Business School Curriculum',
|
|
'360-Degree Leadership Assessment',
|
|
'C-Suite Mentorship Program',
|
|
'Global Leadership Simulation',
|
|
'Executive Coaching Sessions'
|
|
],
|
|
badges: ['Certified', 'Executive Level', 'Global Faculty'],
|
|
previewVideoUrl: 'https://example.com/preview-video',
|
|
deliveryMethods: ['In-Person Workshops', 'Virtual Sessions', 'Self-Paced Learning'],
|
|
credentials: 'Executive Leadership Certificate from KLC & Harvard Business School',
|
|
targetROI: '300% Leadership Effectiveness Improvement'
|
|
};
|
|
|
|
const mockOutcomes = [
|
|
{
|
|
title: 'Strategic Leadership Mastery',
|
|
description: 'Develop advanced strategic thinking capabilities to lead organizational transformation and drive sustainable growth in complex business environments.'
|
|
},
|
|
{
|
|
title: 'Executive Presence & Communication',
|
|
description: 'Master executive-level communication skills, build commanding presence, and influence stakeholders at all organizational levels.'
|
|
},
|
|
{
|
|
title: 'Digital Leadership & Innovation',
|
|
description: 'Lead digital transformation initiatives, foster innovation culture, and navigate technological disruption with confidence.'
|
|
},
|
|
{
|
|
title: 'Global Team Management',
|
|
description: 'Excel at managing diverse, cross-cultural teams and driving performance across global markets and virtual environments.'
|
|
}
|
|
];
|
|
|
|
const mockCurriculum = [
|
|
{
|
|
moduleNumber: 1,
|
|
title: 'Leadership Foundations & Self-Mastery',
|
|
duration: '2 Weeks',
|
|
deliveryStyle: 'Hybrid',
|
|
topics: [
|
|
'Leadership Philosophy & Values',
|
|
'360-Degree Assessment & Feedback',
|
|
'Emotional Intelligence in Leadership',
|
|
'Personal Leadership Brand Development'
|
|
]
|
|
},
|
|
{
|
|
moduleNumber: 2,
|
|
title: 'Strategic Thinking & Decision Making',
|
|
duration: '3 Weeks',
|
|
deliveryStyle: 'In-Person',
|
|
topics: [
|
|
'Strategic Analysis Frameworks',
|
|
'Complex Problem Solving',
|
|
'Risk Assessment & Management',
|
|
'Data-Driven Decision Making'
|
|
]
|
|
},
|
|
{
|
|
moduleNumber: 3,
|
|
title: 'Leading High-Performance Teams',
|
|
duration: '3 Weeks',
|
|
deliveryStyle: 'Virtual + Simulation',
|
|
topics: [
|
|
'Team Dynamics & Psychology',
|
|
'Performance Management Systems',
|
|
'Conflict Resolution Strategies',
|
|
'Building Trust & Accountability'
|
|
]
|
|
},
|
|
{
|
|
moduleNumber: 4,
|
|
title: 'Organizational Transformation',
|
|
duration: '4 Weeks',
|
|
deliveryStyle: 'Hybrid',
|
|
topics: [
|
|
'Change Management Methodologies',
|
|
'Culture Transformation',
|
|
'Digital Leadership Strategies',
|
|
'Innovation & Disruption Management'
|
|
]
|
|
}
|
|
];
|
|
|
|
const mockFaculty = [
|
|
{
|
|
id: 1,
|
|
name: 'Dr. Sarah Johnson',
|
|
title: 'Executive Leadership Expert',
|
|
organization: 'Harvard Business School',
|
|
bio: 'Former CEO of Fortune 500 companies with 25+ years of executive leadership experience.',
|
|
image: 'https://images.unsplash.com/photo-1494790108755-2616b10a6e0c?w=150&h=150&fit=crop&crop=face',
|
|
linkedinUrl: 'https://linkedin.com/in/dr-sarah-johnson',
|
|
credentials: ['PhD in Organizational Psychology', 'Former CEO, Tech Global Inc.'],
|
|
expertise: ['Strategic Leadership', 'Digital Transformation']
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Prof. Michael Chen',
|
|
title: 'Strategic Management Professor',
|
|
organization: 'Stanford Graduate School',
|
|
bio: 'Renowned strategy expert and author of 5 bestselling business books.',
|
|
image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face',
|
|
linkedinUrl: 'https://linkedin.com/in/prof-michael-chen',
|
|
credentials: ['MBA, Wharton', 'Author of "Strategy Excellence"'],
|
|
expertise: ['Strategic Planning', 'Business Innovation']
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Dr. Priya Sharma',
|
|
title: 'Organizational Psychology Expert',
|
|
organization: 'KLC Faculty',
|
|
bio: 'Leading expert in leadership psychology and behavioral change.',
|
|
image: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=150&h=150&fit=crop&crop=face',
|
|
linkedinUrl: 'https://linkedin.com/in/dr-priya-sharma',
|
|
credentials: ['PhD in Psychology', 'Certified Executive Coach'],
|
|
expertise: ['Leadership Psychology', 'Executive Coaching']
|
|
}
|
|
];
|
|
|
|
const mockAudienceSegments = [
|
|
{
|
|
title: 'Senior Executives',
|
|
description: 'C-suite leaders, VPs, and Directors ready to elevate their strategic impact',
|
|
icon: <Award className="w-6 h-6" />
|
|
},
|
|
{
|
|
title: 'High-Potential Leaders',
|
|
description: 'Emerging leaders identified for executive-level responsibilities',
|
|
icon: <TrendingUp className="w-6 h-6" />
|
|
},
|
|
{
|
|
title: 'Entrepreneurs',
|
|
description: 'Business owners scaling their organizations and leadership capabilities',
|
|
icon: <Lightbulb className="w-6 h-6" />
|
|
}
|
|
];
|
|
|
|
const mockUseCases = [
|
|
'Leading organizational transformation initiatives',
|
|
'Navigating complex stakeholder relationships',
|
|
'Building and scaling high-performance teams',
|
|
'Driving innovation and cultural change',
|
|
'Managing global and virtual teams',
|
|
'Developing next-generation leaders'
|
|
];
|
|
|
|
const mockTestimonials = [
|
|
{
|
|
id: 1,
|
|
type: 'video',
|
|
name: 'Robert Martinez',
|
|
title: 'CEO, TechVenture Inc.',
|
|
company: 'TechVenture Inc.',
|
|
content: 'This programme transformed my leadership approach completely. The 360-degree feedback and executive coaching helped me unlock new levels of performance.',
|
|
videoThumbnail: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=200&fit=crop',
|
|
videoUrl: 'https://example.com/testimonial-video-1',
|
|
rating: 5,
|
|
programmeCompleted: 'Executive Leadership 2023'
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 'text',
|
|
name: 'Lisa Zhang',
|
|
title: 'VP Strategy, Global Corp',
|
|
company: 'Global Corp',
|
|
content: 'The strategic thinking frameworks and real-world case studies provided immediate value. I applied the learnings to lead a $50M digital transformation project successfully.',
|
|
rating: 5,
|
|
programmeCompleted: 'Executive Leadership 2023'
|
|
},
|
|
{
|
|
id: 3,
|
|
type: 'text',
|
|
name: 'David Thompson',
|
|
title: 'Founder & CEO, StartupX',
|
|
company: 'StartupX',
|
|
content: 'As a first-time CEO, this programme gave me the confidence and tools to scale my team from 10 to 100+ employees while maintaining our culture and performance.',
|
|
rating: 5,
|
|
programmeCompleted: 'Executive Leadership 2023'
|
|
}
|
|
];
|
|
|
|
const mockEnrollmentOptions = [
|
|
{
|
|
type: 'individual',
|
|
title: 'Individual Enrollment',
|
|
price: '₹2,50,000',
|
|
originalPrice: '₹3,00,000',
|
|
features: [
|
|
'Complete programme access',
|
|
'Executive coaching sessions',
|
|
'Peer learning network',
|
|
'Digital resources & tools',
|
|
'Certificate upon completion'
|
|
],
|
|
ctaText: 'Enroll Now',
|
|
popular: false
|
|
},
|
|
{
|
|
type: 'corporate',
|
|
title: 'Corporate Package (3+ enrollments)',
|
|
price: '₹2,00,000',
|
|
originalPrice: '₹2,50,000',
|
|
priceNote: 'per person',
|
|
features: [
|
|
'Everything in Individual',
|
|
'Customized company case studies',
|
|
'Dedicated learning coordinator',
|
|
'Leadership assessment reports',
|
|
'Post-programme follow-up sessions'
|
|
],
|
|
ctaText: 'Request Corporate Quote',
|
|
popular: true
|
|
},
|
|
{
|
|
type: 'enterprise',
|
|
title: 'Enterprise Solution (10+ enrollments)',
|
|
price: 'Custom Pricing',
|
|
features: [
|
|
'Everything in Corporate',
|
|
'On-site delivery options',
|
|
'Custom curriculum modules',
|
|
'Executive advisory sessions',
|
|
'ROI measurement framework'
|
|
],
|
|
ctaText: 'Schedule Consultation',
|
|
popular: false
|
|
}
|
|
];
|
|
|
|
const mockFAQs = [
|
|
{
|
|
question: 'What are the programme timings and schedule?',
|
|
answer: 'The programme runs over 6 months with 2-3 sessions per month. Each session is 2-3 hours, scheduled on weekends to accommodate working professionals. Specific dates are provided upon enrollment.'
|
|
},
|
|
{
|
|
question: 'What certification will I receive?',
|
|
answer: 'You will receive an Executive Leadership Certificate jointly issued by KLC and Harvard Business School upon successful completion of all modules and assessments.'
|
|
},
|
|
{
|
|
question: 'Is there a refund policy?',
|
|
answer: 'We offer a full refund if you cancel within 7 days of enrollment. After programme commencement, refunds are provided on a pro-rata basis for the first 30 days.'
|
|
},
|
|
{
|
|
question: 'What technology requirements are needed?',
|
|
answer: 'You need a reliable internet connection, computer/laptop with camera and microphone for virtual sessions. We provide access to our learning management system and digital resources.'
|
|
},
|
|
{
|
|
question: 'Can I defer my enrollment to a later cohort?',
|
|
answer: 'Yes, you can defer your enrollment to the next available cohort up to 6 months from your original start date without additional fees.'
|
|
}
|
|
];
|
|
|
|
const mockRelatedProgrammes = [
|
|
{
|
|
id: 'strategic-leadership',
|
|
title: 'Strategic Leadership Mastery',
|
|
level: 'Advanced',
|
|
duration: '4 Months',
|
|
price: '₹1,80,000',
|
|
thumbnail: 'https://images.unsplash.com/photo-1552581234-26160f608093?w=400&h=300&fit=crop',
|
|
category: 'Leadership',
|
|
description: 'Advanced strategic thinking and planning for senior leaders'
|
|
},
|
|
{
|
|
id: 'digital-leadership',
|
|
title: 'Digital Leadership Transformation',
|
|
level: 'Executive',
|
|
duration: '3 Months',
|
|
price: '₹2,20,000',
|
|
thumbnail: 'https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=300&fit=crop',
|
|
category: 'Digital',
|
|
description: 'Leading digital transformation and innovation initiatives'
|
|
},
|
|
{
|
|
id: 'global-leadership',
|
|
title: 'Global Leadership Programme',
|
|
level: 'Executive',
|
|
duration: '8 Months',
|
|
price: '₹3,50,000',
|
|
thumbnail: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop',
|
|
category: 'Global',
|
|
description: 'Leading across cultures and global markets'
|
|
}
|
|
];
|
|
|
|
interface ProgrammeDetailProps {
|
|
slug?: string;
|
|
}
|
|
|
|
export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
|
|
const [activeTab, setActiveTab] = useState('overview');
|
|
const [selectedFaculty, setSelectedFaculty] = useState(0);
|
|
const [showVideoModal, setShowVideoModal] = useState(false);
|
|
const [selectedVideo, setSelectedVideo] = useState<string | null>(null);
|
|
const [isSticky, setIsSticky] = useState(false);
|
|
const [showBrochureForm, setShowBrochureForm] = useState(false);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [brochureFormData, setBrochureFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
company: '',
|
|
designation: ''
|
|
});
|
|
|
|
const heroRef = useRef<HTMLDivElement>(null);
|
|
const { addToCart } = useCart();
|
|
|
|
// Sticky CTA logic
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
if (heroRef.current) {
|
|
const heroBottom = heroRef.current.offsetTop + heroRef.current.offsetHeight;
|
|
setIsSticky(window.scrollY > heroBottom);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
// Mock API calls (replace with real API calls)
|
|
const programme = mockProgrammeData;
|
|
const outcomes = mockOutcomes;
|
|
const curriculum = mockCurriculum;
|
|
const faculty = mockFaculty;
|
|
const testimonials = mockTestimonials;
|
|
const faqs = mockFAQs;
|
|
const relatedProgrammes = mockRelatedProgrammes;
|
|
|
|
// Handle enrollment based on status
|
|
const handleEnrollment = (type: string = 'individual') => {
|
|
if (programme.enrollmentStatus === 'enrolled') {
|
|
navigateTo(`/dashboard/course/${programme.id}`);
|
|
return;
|
|
}
|
|
|
|
if (programme.spotsLeft === 0) {
|
|
// Handle waitlist
|
|
toast.success('Added to waitlist! We\'ll notify you when spots become available.');
|
|
return;
|
|
}
|
|
|
|
if (type === 'individual') {
|
|
addToCart({
|
|
id: programme.id,
|
|
title: programme.title,
|
|
thumbnail: programme.thumbnail,
|
|
price: programme.price,
|
|
originalPrice: programme.originalPrice,
|
|
category: 'Executive Programme',
|
|
level: programme.level
|
|
});
|
|
navigateTo('/cart');
|
|
} else if (type === 'corporate') {
|
|
navigateTo(`/contact?topic=corporate&programme=${programme.id}`);
|
|
} else if (type === 'enterprise') {
|
|
navigateTo(`/contact?topic=enterprise&programme=${programme.id}`);
|
|
}
|
|
};
|
|
|
|
// Handle brochure download
|
|
const handleBrochureDownload = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsSubmitting(true);
|
|
|
|
try {
|
|
// Mock API call - replace with real endpoint
|
|
// await fetch(`/api/leads/programme-brochure?programmeId=${programme.id}`, {
|
|
// method: 'POST',
|
|
// body: JSON.stringify(brochureFormData)
|
|
// });
|
|
|
|
// Simulate API delay
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
|
|
toast.success('Brochure download started! Check your email for additional resources.');
|
|
setShowBrochureForm(false);
|
|
setBrochureFormData({ name: '', email: '', phone: '', company: '', designation: '' });
|
|
} catch (error) {
|
|
toast.error('Unable to process request. Please try again later.');
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
// Handle 404 for unpublished programmes
|
|
if (!programme.published) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: '#FFFFFF' }}>
|
|
<div className="text-center">
|
|
<h1 className="text-h2 mb-4">Programme Not Found</h1>
|
|
<p className="text-body-lg text-muted mb-8">
|
|
The programme you're looking for is not available or has been unpublished.
|
|
</p>
|
|
<Button onClick={() => navigateTo('/learning-online')}>
|
|
Browse All Programmes
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div style={{ backgroundColor: '#FFFFFF' }}>
|
|
{/* Enhanced Sticky CTA Bar */}
|
|
{isSticky && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.3, ease: "easeOut" }}
|
|
className="fixed top-16 left-0 right-0 z-40"
|
|
style={{
|
|
background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.98) 100%)',
|
|
backdropFilter: 'blur(20px)',
|
|
WebkitBackdropFilter: 'blur(20px)',
|
|
borderBottom: '1px solid rgba(4, 4, 91, 0.08)',
|
|
boxShadow: '0 8px 32px rgba(4, 4, 91, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04)'
|
|
}}
|
|
>
|
|
<div className="section-margin-x py-5">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex items-center justify-between">
|
|
{/* Left: Programme Information */}
|
|
<div className="flex items-center gap-6">
|
|
{/* Programme Thumbnail */}
|
|
<div className="relative">
|
|
<div
|
|
className="w-12 h-12 rounded-lg overflow-hidden border-2 border-white"
|
|
style={{
|
|
background: 'linear-gradient(135deg, var(--color-primary) 0%, #030359 100%)'
|
|
}}
|
|
>
|
|
<ImageWithFallback
|
|
src={programme.thumbnail}
|
|
alt={programme.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
{/* Quality Badge */}
|
|
<div
|
|
className="absolute -top-1 -right-1 w-5 h-5 rounded-full flex items-center justify-center text-white text-xs font-medium"
|
|
style={{ backgroundColor: 'var(--color-accent)' }}
|
|
>
|
|
<Award className="w-3 h-3" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Programme Details */}
|
|
<div className="flex flex-col">
|
|
<h2 className="text-h4 mb-2 leading-tight max-w-xl line-clamp-1">
|
|
{programme.title}
|
|
</h2>
|
|
<div className="flex items-center gap-6">
|
|
{/* Meta Information - All Using Same Blue Color */}
|
|
<div className="flex items-center gap-4 text-small">
|
|
<div className="flex items-center gap-1.5 px-2.5 py-1 bg-blue-50 rounded-full">
|
|
<Clock className="w-3.5 h-3.5 text-primary" />
|
|
<span className="font-medium text-primary">{programme.duration}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 px-2.5 py-1 bg-blue-50 rounded-full">
|
|
<Award className="w-3.5 h-3.5 text-primary" />
|
|
<span className="font-medium text-primary">{programme.level}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 px-2.5 py-1 bg-blue-50 rounded-full">
|
|
<Users className="w-3.5 h-3.5 text-primary" />
|
|
<span className="font-medium text-primary">{programme.spotsLeft} spots left</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Price Display */}
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-h4 font-bold text-primary">{programme.price}</span>
|
|
{programme.originalPrice && (
|
|
<span className="text-body text-muted line-through">{programme.originalPrice}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: Action Buttons */}
|
|
<div className="flex items-center gap-3">
|
|
{/* Secondary Action Button - No Shadow */}
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setShowBrochureForm(true)}
|
|
className="h-12 px-6 border-2 border-primary/20 text-primary hover:bg-primary/5 hover:border-primary/40 transition-all duration-200 backdrop-blur-sm"
|
|
style={{
|
|
background: 'rgba(4, 4, 91, 0.03)',
|
|
borderRadius: '10px'
|
|
}}
|
|
>
|
|
<Download className="w-4 h-4 mr-2" />
|
|
<span className="font-medium">Brochure</span>
|
|
</Button>
|
|
|
|
{/* Primary CTA Button - No Shadow */}
|
|
<div className="relative">
|
|
<PrimaryCTAButton
|
|
text={programme.enrollmentStatus === 'enrolled' ? 'Go to Course' :
|
|
programme.spotsLeft === 0 ? 'Join Waitlist' : 'Enroll Now'}
|
|
onClick={() => handleEnrollment()}
|
|
className="cta-text-black h-12 px-8 transition-all duration-200"
|
|
/>
|
|
{/* Urgency Indicator */}
|
|
{programme.spotsLeft <= 5 && programme.spotsLeft > 0 && (
|
|
<div
|
|
className="absolute -top-2 -right-2 px-2 py-0.5 rounded-full text-xs font-bold text-white animate-pulse"
|
|
style={{ backgroundColor: '#ef4444' }}
|
|
>
|
|
Only {programme.spotsLeft} left!
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Subtle Bottom Accent Line */}
|
|
<div
|
|
className="absolute bottom-0 left-0 right-0 h-0.5"
|
|
style={{
|
|
background: 'linear-gradient(90deg, transparent 0%, var(--color-accent) 50%, transparent 100%)'
|
|
}}
|
|
/>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Hero Section */}
|
|
<section ref={heroRef} className="py-16" style={{ backgroundColor: '#FFFFFF' }}>
|
|
<div className="section-margin-x">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
|
|
|
|
{/* Left: Programme Info - REDESIGNED */}
|
|
<div>
|
|
{/* Keep as requested: BrandedTag (eyebrow text) */}
|
|
<BrandedTag text="Executive Programme" />
|
|
|
|
{/* Keep as requested: Title */}
|
|
<h1 className="text-h2 mb-4">{programme.title}</h1>
|
|
|
|
{/* Keep as requested: Subtitle */}
|
|
<p className="text-body-lg text-muted mb-8">{programme.subtitle}</p>
|
|
|
|
{/* REDESIGNED: Programme Meta Information as Pills */}
|
|
<div className="flex flex-wrap gap-3 mb-8">
|
|
<Badge variant="secondary" className="bg-primary/5 text-primary border border-primary/20 px-4 py-2 text-small font-medium hover:bg-primary/10 transition-colors duration-200">
|
|
<Clock className="w-3 h-3 mr-2" />
|
|
Duration: {programme.duration}
|
|
</Badge>
|
|
<Badge variant="secondary" className="bg-primary/5 text-primary border border-primary/20 px-4 py-2 text-small font-medium hover:bg-primary/10 transition-colors duration-200">
|
|
<Award className="w-3 h-3 mr-2" />
|
|
Level: {programme.level}
|
|
</Badge>
|
|
<Badge variant="secondary" className="bg-primary/5 text-primary border border-primary/20 px-4 py-2 text-small font-medium hover:bg-primary/10 transition-colors duration-200">
|
|
<Globe className="w-3 h-3 mr-2" />
|
|
Format: {programme.format}
|
|
</Badge>
|
|
<Badge variant="secondary" className="bg-accent/5 text-accent border border-accent/20 px-4 py-2 text-small font-medium hover:bg-accent/10 transition-colors duration-200">
|
|
<Users className="w-3 h-3 mr-2" />
|
|
Spots Left: {programme.spotsLeft}
|
|
</Badge>
|
|
</div>
|
|
|
|
{/* REDESIGNED: Professional Badges Section */}
|
|
<div className="mb-8">
|
|
<h3 className="text-subhead font-semibold text-black mb-4">Programme Features</h3>
|
|
<div className="flex flex-wrap gap-3">
|
|
{programme.badges.map((badge, index) => (
|
|
<Badge
|
|
key={index}
|
|
variant="secondary"
|
|
className="bg-primary/5 text-primary border border-primary/20 px-4 py-2 text-small font-medium hover:bg-primary/10 transition-colors duration-200"
|
|
>
|
|
<CheckCircle className="w-3 h-3 mr-2" />
|
|
{badge}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* REDESIGNED: Enhanced Pricing Section */}
|
|
<Card className="border border-gray-200 bg-white mb-8 shadow-sm">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div>
|
|
<p className="text-small font-medium text-muted mb-1">Programme Investment</p>
|
|
<div className="flex items-baseline gap-3">
|
|
<span className="text-h2 font-bold text-primary">{programme.price}</span>
|
|
{programme.originalPrice && (
|
|
<span className="text-body text-muted line-through">{programme.originalPrice}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="inline-flex items-center gap-2 px-3 py-2 bg-accent/20 rounded-full">
|
|
<Star className="w-4 h-4 text-accent" />
|
|
<span className="text-small font-medium text-black">Best Value</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="text-small text-muted">Transform your leadership future with this comprehensive development programme</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* REDESIGNED: Professional CTA Buttons Layout */}
|
|
<div className="flex gap-4">
|
|
<PrimaryCTAButton
|
|
text={programme.enrollmentStatus === 'enrolled' ? 'Go to Course' :
|
|
programme.spotsLeft === 0 ? 'Join Waitlist' : 'Enroll Now'}
|
|
onClick={() => handleEnrollment()}
|
|
className="cta-text-black flex-1 justify-center"
|
|
/>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setShowBrochureForm(true)}
|
|
className="flex-1 h-12 border-2 border-primary/30 text-primary hover:bg-primary hover:text-white transition-all duration-200"
|
|
style={{ borderRadius: '10px' }}
|
|
>
|
|
<Download className="w-4 h-4 mr-2" />
|
|
Download Programme Brochure
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: Programme Snapshot */}
|
|
<div>
|
|
<Card className="card-shadow-elevated rounded-2xl">
|
|
<CardContent className="p-8">
|
|
{/* Preview Video */}
|
|
<div className="relative mb-6">
|
|
<div className="aspect-video bg-gray-100 rounded-xl overflow-hidden">
|
|
<ImageWithFallback
|
|
src={programme.thumbnail}
|
|
alt="Programme Preview"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/30 flex items-center justify-center">
|
|
<Button
|
|
size="lg"
|
|
className="bg-white/90 text-primary hover:bg-white rounded-full w-16 h-16 p-0 card-hover-lift"
|
|
onClick={() => {
|
|
setSelectedVideo(programme.previewVideoUrl);
|
|
setShowVideoModal(true);
|
|
}}
|
|
>
|
|
<Play className="w-6 h-6 ml-1" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Key Highlights */}
|
|
<div className="mb-6">
|
|
<h3 className="text-h4 mb-4">Programme Highlights</h3>
|
|
<ul className="space-y-3">
|
|
{programme.highlights.map((highlight, index) => (
|
|
<li key={index} className="flex items-start gap-3">
|
|
<CheckCircle className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
|
|
<span className="text-body">{highlight}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Delivery Methods */}
|
|
<div className="mb-6">
|
|
<h4 className="text-subhead font-semibold mb-3">Delivery Methods</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{programme.deliveryMethods.map((method, index) => (
|
|
<Badge key={index} variant="outline" className="rounded-lg">
|
|
{method}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Credentials */}
|
|
<div>
|
|
<h4 className="text-subhead font-semibold mb-2">Certification</h4>
|
|
<p className="text-body text-muted">{programme.credentials}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Enhanced Programme Content Tabs */}
|
|
<section className="py-24 border-t border-gray-100" style={{ backgroundColor: '#FFFFFF' }}>
|
|
<div className="section-margin-x">
|
|
<div className="max-w-6xl mx-auto">
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
|
{/* Enhanced Tabs List */}
|
|
<TabsList className="grid w-full grid-cols-2 md:grid-cols-3 lg:grid-cols-6 mb-12 h-auto p-2 bg-gray-200 rounded-2xl">
|
|
<TabsTrigger
|
|
value="overview"
|
|
className="data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-sm rounded-xl py-3 px-4 text-sm font-medium transition-all duration-200 hover:bg-white/50"
|
|
>
|
|
Overview
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="curriculum"
|
|
className="data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-sm rounded-xl py-3 px-4 text-sm font-medium transition-all duration-200 hover:bg-white/50"
|
|
>
|
|
Curriculum
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="faculty"
|
|
className="data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-sm rounded-xl py-3 px-4 text-sm font-medium transition-all duration-200 hover:bg-white/50"
|
|
>
|
|
Faculty
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="testimonials"
|
|
className="data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-sm rounded-xl py-3 px-4 text-sm font-medium transition-all duration-200 hover:bg-white/50"
|
|
>
|
|
Reviews
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="faq"
|
|
className="data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-sm rounded-xl py-3 px-4 text-sm font-medium transition-all duration-200 hover:bg-white/50"
|
|
>
|
|
FAQ
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="enroll"
|
|
className="data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-sm rounded-xl py-3 px-4 text-sm font-medium transition-all duration-200 hover:bg-white/50"
|
|
>
|
|
Enroll
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* Enhanced Learning Outcomes */}
|
|
<TabsContent value="overview" className="mt-0">
|
|
<div className="space-y-16">
|
|
{/* Section: Learning Outcomes */}
|
|
<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>
|
|
<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">
|
|
<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="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>
|
|
))}
|
|
</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>
|
|
<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>
|
|
</TabsContent>
|
|
|
|
{/* Enhanced Faculty Profiles */}
|
|
<TabsContent value="faculty" className="mt-0">
|
|
<div>
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-h2 mb-4">World-Class Faculty</h2>
|
|
<p className="text-body-lg text-muted max-w-3xl mx-auto">
|
|
Learn from industry leaders and renowned academics with decades of executive experience.
|
|
</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>
|
|
|
|
<div className="flex flex-wrap justify-center gap-2 mb-6">
|
|
{member.expertise.map((skill, skillIndex) => (
|
|
<Badge key={skillIndex} variant="secondary" className="text-xs rounded-lg bg-primary/5 text-primary">
|
|
{skill}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
|
|
<Button
|
|
variant="outline"
|
|
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>
|
|
</TabsContent>
|
|
|
|
{/* Enhanced Testimonials - Landing Page Design */}
|
|
<TabsContent value="testimonials" className="mt-0">
|
|
<div>
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-h2 mb-4">What Our Graduates Say</h2>
|
|
<p className="text-body-lg text-muted max-w-3xl mx-auto">
|
|
Hear from leaders who have transformed their careers through our programme.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Landing Page Testimonials Design */}
|
|
<div className="relative">
|
|
{/* Testimonials Cards Container */}
|
|
<div className="flex overflow-x-auto gap-6 py-4 pb-6 scrollbar-hide">
|
|
<div className="flex gap-6 px-2">
|
|
{testimonials.map((testimonial, index) => (
|
|
<motion.div
|
|
key={index}
|
|
className="testimonial-card bg-white rounded-xl border transition-all duration-300 flex-shrink-0 w-[350px] h-[300px] card-hover-lift"
|
|
style={{
|
|
borderColor: 'rgba(0, 0, 0, 0.1)',
|
|
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
|
|
}}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{
|
|
boxShadow: '0 8px 25px rgba(0, 0, 0, 0.15)',
|
|
transform: 'translateY(-4px)'
|
|
}}
|
|
>
|
|
{testimonial.type === 'video' ? (
|
|
<div
|
|
className="relative h-full cursor-pointer overflow-hidden group rounded-xl"
|
|
onClick={() => {
|
|
setSelectedVideo(testimonial.videoUrl!);
|
|
setShowVideoModal(true);
|
|
}}
|
|
>
|
|
<ImageWithFallback
|
|
src={testimonial.videoThumbnail!}
|
|
alt={`${testimonial.name} video testimonial`}
|
|
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
|
|
{/* Video Overlay with Gradient */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent group-hover:from-black/70 transition-all duration-300" />
|
|
|
|
{/* Play Button - Compact Design */}
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<motion.div
|
|
className="flex items-center justify-center w-16 h-16 bg-white/90 backdrop-blur-sm rounded-full shadow-lg"
|
|
whileHover={{ scale: 1.1 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
<Play
|
|
className="w-7 h-7 ml-1 text-blue-600"
|
|
fill="currentColor"
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Video Label - Compact Style */}
|
|
<div className="absolute top-4 left-4">
|
|
<div className="px-3 py-1 rounded-full text-xs font-medium text-white bg-blue-600">
|
|
🎥 Video
|
|
</div>
|
|
</div>
|
|
|
|
{/* Profile Info - Bottom Section */}
|
|
<div className="absolute bottom-0 left-0 right-0 p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
|
<User className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<h4 className="font-semibold text-white mb-1 text-sm">
|
|
{testimonial.name}
|
|
</h4>
|
|
<p className="text-xs text-white/80 truncate">
|
|
{testimonial.title}
|
|
{testimonial.company && ` • ${testimonial.company}`}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Star Rating */}
|
|
<div className="flex gap-1">
|
|
{[1, 2, 3, 4, 5].map((star) => (
|
|
<Star
|
|
key={star}
|
|
size={14}
|
|
className={star <= testimonial.rating ? 'fill-current text-yellow-400' : 'text-white/40'}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
/* Text Testimonials - Compact Design */
|
|
<div className="h-full flex flex-col p-6">
|
|
{/* Header Section */}
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
|
<User className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<h4 className="font-semibold text-black mb-1 text-sm">
|
|
{testimonial.name}
|
|
</h4>
|
|
<p className="text-xs text-gray-600">
|
|
{testimonial.title}
|
|
</p>
|
|
{testimonial.company && (
|
|
<p className="text-xs text-gray-500 font-medium">
|
|
{testimonial.company}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Star Rating - Top Right */}
|
|
<div className="flex gap-1">
|
|
{[1, 2, 3, 4, 5].map((star) => (
|
|
<Star
|
|
key={star}
|
|
size={14}
|
|
className={star <= testimonial.rating ? 'fill-current text-yellow-400' : 'text-gray-300'}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quote Section - Compact Typography */}
|
|
<blockquote className="flex-1 mb-4">
|
|
<div className="text-sm leading-relaxed text-black relative">
|
|
<span className="text-4xl absolute -top-1 -left-1 leading-none opacity-20 text-blue-600">
|
|
"
|
|
</span>
|
|
<span className="relative z-10">
|
|
{testimonial.content}
|
|
</span>
|
|
</div>
|
|
</blockquote>
|
|
|
|
{/* Bottom Section */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="w-12 h-1 rounded-full bg-blue-600" />
|
|
<Badge variant="outline" className="text-xs rounded-lg">
|
|
{testimonial.programmeCompleted}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* Enhanced FAQ */}
|
|
<TabsContent value="faq" className="mt-0">
|
|
<div>
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-h2 mb-4">Frequently Asked Questions</h2>
|
|
<p className="text-body-lg text-muted max-w-3xl mx-auto">
|
|
Find answers to common questions about the programme structure, requirements, and enrollment process.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
{faqs.map((faq, 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">
|
|
<MessageCircle className="w-5 h-5 text-white" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<CardTitle className="text-h4 font-semibold leading-tight">
|
|
{faq.question}
|
|
</CardTitle>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-6">
|
|
<p className="text-body text-muted leading-relaxed">
|
|
{faq.answer}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* Enhanced Enrollment Options */}
|
|
<TabsContent value="enroll" className="mt-0">
|
|
<div>
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-h2 mb-4">Choose Your Enrollment Option</h2>
|
|
<p className="text-body-lg text-muted max-w-3xl mx-auto">
|
|
Select the enrollment option that best fits your learning needs and organizational requirements.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{mockEnrollmentOptions.map((option, index) => (
|
|
<Card
|
|
key={index}
|
|
className={`relative card-hover-lift rounded-2xl border transition-all duration-300 bg-white shadow-sm ${
|
|
option.popular
|
|
? 'border-[#F8C301] border-2'
|
|
: 'border-gray-200'
|
|
}`}
|
|
>
|
|
{option.popular && (
|
|
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
|
|
<Badge
|
|
className="text-white px-6 py-2 text-sm font-semibold rounded-xl shadow-lg"
|
|
style={{ backgroundColor: '#F8C301' }}
|
|
>
|
|
Most Popular
|
|
</Badge>
|
|
</div>
|
|
)}
|
|
<CardContent className="p-8">
|
|
<div className="text-center mb-6">
|
|
<h3 className="text-h4 mb-4 font-semibold">{option.title}</h3>
|
|
<div className="mb-4">
|
|
<div className="flex items-baseline justify-center gap-2">
|
|
<span className="text-h2 font-bold text-primary">{option.price}</span>
|
|
{option.originalPrice && (
|
|
<span className="text-body text-muted line-through">{option.originalPrice}</span>
|
|
)}
|
|
</div>
|
|
{option.priceNote && (
|
|
<p className="text-small text-muted">{option.priceNote}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<ul className="space-y-4 mb-8">
|
|
{option.features.map((feature, featureIndex) => (
|
|
<li key={featureIndex} className="flex items-start gap-3">
|
|
<CheckCircle className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
|
|
<span className="text-body">{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<Button
|
|
onClick={() => handleEnrollment(option.type)}
|
|
className={`w-full h-12 rounded-xl font-semibold transition-all duration-200 ${
|
|
option.popular
|
|
? 'text-white shadow-lg'
|
|
: 'border-2 hover:text-white'
|
|
}`}
|
|
style={{
|
|
backgroundColor: option.popular ? '#F8C301' : 'transparent',
|
|
borderColor: option.popular ? '#F8C301' : '#F8C301',
|
|
color: option.popular ? 'white' : '#F8C301'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (!option.popular) {
|
|
e.currentTarget.style.backgroundColor = '#F8C301';
|
|
e.currentTarget.style.color = 'white';
|
|
} else {
|
|
e.currentTarget.style.backgroundColor = '#E6AF01';
|
|
}
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (!option.popular) {
|
|
e.currentTarget.style.backgroundColor = 'transparent';
|
|
e.currentTarget.style.color = '#F8C301';
|
|
} else {
|
|
e.currentTarget.style.backgroundColor = '#F8C301';
|
|
}
|
|
}}
|
|
variant={option.popular ? 'default' : 'outline'}
|
|
>
|
|
{option.ctaText}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Enhanced Related Programmes */}
|
|
<section className="py-24 bg-gray-50/30" style={{ backgroundColor: 'rgba(249, 250, 251, 0.3)' }}>
|
|
<div className="section-margin-x">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-h2 mb-4">You Might Also Like</h2>
|
|
<p className="text-body-lg text-muted max-w-3xl mx-auto">
|
|
Explore related programmes to continue your leadership journey and expand your expertise across different domains.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{relatedProgrammes.map((related, index) => (
|
|
<Card
|
|
key={index}
|
|
className="cursor-pointer card-hover-dramatic rounded-2xl border-0 card-shadow-base group overflow-hidden"
|
|
>
|
|
<div className="aspect-video bg-gray-100 overflow-hidden relative">
|
|
<ImageWithFallback
|
|
src={related.thumbnail}
|
|
alt={related.title}
|
|
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
|
|
{/* Top Badges */}
|
|
<div className="absolute top-4 left-4 flex gap-2">
|
|
<Badge className="bg-[#F8C301] text-white rounded-lg text-xs px-3 py-1 font-medium">
|
|
{related.category}
|
|
</Badge>
|
|
<Badge variant="secondary" className="bg-gray-100 text-gray-700 rounded-lg text-xs px-3 py-1 font-medium">
|
|
{related.level}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
<CardContent className="p-6">
|
|
<h3 className="text-h4 mb-3 font-semibold group-hover:text-primary transition-colors duration-200 leading-tight">
|
|
{related.title}
|
|
</h3>
|
|
<p className="text-body text-muted mb-4 leading-relaxed line-clamp-2">{related.description}</p>
|
|
|
|
{/* Metadata Section */}
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center gap-4 text-small text-muted">
|
|
<span className="flex items-center gap-1">
|
|
<Clock className="w-4 h-4" />
|
|
{related.duration}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Users className="w-4 h-4" />
|
|
1,500+
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
{[1, 2, 3, 4, 5].map((star) => (
|
|
<Star key={star} size={16} className="fill-current text-yellow-400" />
|
|
))}
|
|
<span className="text-small text-muted ml-1">4.8</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pricing Section */}
|
|
<div className="mb-6">
|
|
<div className="flex items-baseline gap-2">
|
|
<span className="text-h4 font-bold text-primary">{related.price}</span>
|
|
<span className="text-body text-muted line-through">₹49,999</span>
|
|
<span className="text-sm text-green-600 bg-green-50 px-2 py-1 rounded font-medium">Save 25%</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex gap-3">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="flex-1 rounded-xl border-2 hover:bg-gray-50 transition-all duration-200"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
// Add to cart functionality
|
|
}}
|
|
>
|
|
Add to Cart
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
className="flex-1 rounded-xl bg-primary hover:bg-primary/90 text-white transition-all duration-200"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
navigateTo(`/course/${related.id}`);
|
|
}}
|
|
>
|
|
Learn More →
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Focused CTA Banner - Blue Box Design */}
|
|
<section className="py-20 relative overflow-hidden">
|
|
{/* Background Image */}
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
|
style={{
|
|
backgroundImage: 'url(https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=1200&h=600&fit=crop)',
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 bg-black/40" />
|
|
|
|
<div className="section-margin-x relative z-10">
|
|
<div className="max-w-4xl mx-auto flex justify-center">
|
|
|
|
{/* Blue Content Box */}
|
|
<div
|
|
className="max-w-2xl p-12 rounded-2xl shadow-2xl"
|
|
style={{
|
|
backgroundColor: 'var(--color-primary)',
|
|
border: '1px solid rgba(255, 255, 255, 0.1)'
|
|
}}
|
|
>
|
|
<div className="text-center text-white">
|
|
{/* Badge */}
|
|
<div className="mb-6">
|
|
<span
|
|
className="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium"
|
|
style={{
|
|
backgroundColor: 'rgba(248, 195, 1, 0.2)',
|
|
color: '#F8C301',
|
|
fontFamily: 'var(--font-family-base)',
|
|
backdropFilter: 'blur(10px)'
|
|
}}
|
|
>
|
|
⭐ START NOW
|
|
</span>
|
|
</div>
|
|
|
|
{/* Headline */}
|
|
<h2 className="text-h2-white mb-6">
|
|
Ready to Lead?{' '}
|
|
<span style={{ color: '#F8C301' }}>Join Today</span>
|
|
</h2>
|
|
|
|
{/* Description */}
|
|
<p className="text-body-lg-white opacity-90 mb-8">
|
|
Transform your leadership potential with expert guidance and proven frameworks.
|
|
</p>
|
|
|
|
{/* CTA Button */}
|
|
<div className="mb-6">
|
|
<PrimaryCTAButton
|
|
text="Schedule Consultation"
|
|
onClick={() => navigateTo(`/contact?topic=programme&programme=${programme.id}`)}
|
|
className="cta-banner-yellow"
|
|
/>
|
|
</div>
|
|
|
|
{/* Support Text */}
|
|
<p className="text-small-white opacity-75">
|
|
Speak with our experts • Free consultation • Custom solutions
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Brochure Download Modal */}
|
|
{showBrochureForm && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white rounded-lg max-w-md w-full p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-h4">Download Programme Brochure</h3>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setShowBrochureForm(false)}
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<form onSubmit={handleBrochureDownload} className="space-y-4">
|
|
<div>
|
|
<Label htmlFor="name">Full Name *</Label>
|
|
<Input
|
|
id="name"
|
|
required
|
|
value={brochureFormData.name}
|
|
onChange={(e) => setBrochureFormData({...brochureFormData, name: e.target.value})}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="email">Email Address *</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
required
|
|
value={brochureFormData.email}
|
|
onChange={(e) => setBrochureFormData({...brochureFormData, email: e.target.value})}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="phone">Phone Number</Label>
|
|
<Input
|
|
id="phone"
|
|
type="tel"
|
|
value={brochureFormData.phone}
|
|
onChange={(e) => setBrochureFormData({...brochureFormData, phone: e.target.value})}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="company">Company</Label>
|
|
<Input
|
|
id="company"
|
|
value={brochureFormData.company}
|
|
onChange={(e) => setBrochureFormData({...brochureFormData, company: e.target.value})}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="designation">Designation</Label>
|
|
<Input
|
|
id="designation"
|
|
value={brochureFormData.designation}
|
|
onChange={(e) => setBrochureFormData({...brochureFormData, designation: e.target.value})}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-4">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => setShowBrochureForm(false)}
|
|
className="flex-1"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="flex-1 bg-primary text-white"
|
|
>
|
|
{isSubmitting ? 'Sending...' : 'Download Brochure'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Video Modal */}
|
|
{showVideoModal && selectedVideo && (
|
|
<div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
|
|
<div className="relative max-w-4xl w-full">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
setShowVideoModal(false);
|
|
setSelectedVideo(null);
|
|
}}
|
|
className="absolute -top-12 right-0 text-white hover:bg-white/20"
|
|
>
|
|
<X className="w-6 h-6" />
|
|
</Button>
|
|
<div className="aspect-video bg-black rounded-lg overflow-hidden">
|
|
<iframe
|
|
src={selectedVideo}
|
|
className="w-full h-full"
|
|
allowFullScreen
|
|
title="Programme Video"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |