onlone learning and programme deatail
This commit is contained in:
priyanshuvish
@@ -32,9 +32,7 @@ import {
|
||||
Grid,
|
||||
List,
|
||||
X,
|
||||
DollarSign,
|
||||
ShoppingCart,
|
||||
ArrowLeft
|
||||
DollarSign
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'motion/react';
|
||||
import { navigateTo } from './Router';
|
||||
@@ -168,6 +166,20 @@ const featuredCourses = [
|
||||
price: '₹14,857',
|
||||
originalPrice: '₹19,007'
|
||||
},
|
||||
{
|
||||
id: 'ldp-foundations',
|
||||
title: 'Strategic Leadership Development Program: Foundations',
|
||||
thumbnail: 'https://images.unsplash.com/photo-1588912914078-2fe5224fd8b8?w=400&h=250&fit=crop',
|
||||
duration: '40 hours',
|
||||
level: 'Intermediate',
|
||||
format: 'Self-paced',
|
||||
rating: 4.8,
|
||||
participants: '1,247+',
|
||||
category: 'Leadership Development',
|
||||
description: 'Master the fundamentals of effective leadership through evidence-based practices and real-world case studies.',
|
||||
price: '$599',
|
||||
originalPrice: '$799'
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
title: 'Strategic Risk Analysis',
|
||||
@@ -184,30 +196,6 @@ const featuredCourses = [
|
||||
}
|
||||
];
|
||||
|
||||
// Learning Methodology Points
|
||||
const methodologyPoints = [
|
||||
{
|
||||
icon: Target,
|
||||
title: 'Self-awareness through leadership orientations',
|
||||
description: 'Understand your natural leadership style and how to adapt it for different situations and team dynamics.'
|
||||
},
|
||||
{
|
||||
icon: BookOpen,
|
||||
title: 'Research-backed frameworks',
|
||||
description: 'Learn from proven methodologies based on decades of leadership research and real-world application.'
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: 'Practice-oriented skill development',
|
||||
description: 'Apply concepts immediately through interactive exercises, simulations, and hands-on projects.'
|
||||
},
|
||||
{
|
||||
icon: MessageCircle,
|
||||
title: 'Expert-led conversations',
|
||||
description: 'Engage with seasoned leaders and industry experts through live sessions and mentoring opportunities.'
|
||||
}
|
||||
];
|
||||
|
||||
export function LearningOnline() {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedCategory, setSelectedCategory] = useState('All Categories');
|
||||
@@ -342,53 +330,43 @@ export function LearningOnline() {
|
||||
return (
|
||||
<div style={{ backgroundColor: '#FFFFFF' }}>
|
||||
{/* Hero Banner – Digital Learning - Blog Style */}
|
||||
<section className="relative min-h-[85vh] flex flex-col">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<div
|
||||
className="w-full h-full bg-cover bg-center bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: 'url(https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1200&h=600&fit=crop)',
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/85 via-black/75 to-black/65"></div>
|
||||
<section className="relative py-16 overflow-hidden">
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
backgroundImage: 'url(https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1200&h=600&fit=crop)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center'
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/60 to-black/40" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex-1 flex items-center">
|
||||
<div className="w-full section-margin-x">
|
||||
<div className="max-w-6xl">
|
||||
{/* Back Navigation */}
|
||||
<div className="mb-8">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => navigateTo('/services')}
|
||||
className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Back to Services
|
||||
</Button>
|
||||
<div className="relative section-margin-x">
|
||||
<div className="max-w-6xl text-left">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
{/* Eyebrow Text */}
|
||||
<div className="branded-tag-system-white mb-6 justify-start">
|
||||
<div className="dot"></div>
|
||||
<span className="text">DIGITAL LEARNING PLATFORM</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h1 className="text-h1-white">
|
||||
Grow as a Leader, Anytime
|
||||
</h1>
|
||||
</div>
|
||||
{/* Main Header */}
|
||||
<h1 className="text-h1-white mb-8" style={{ lineHeight: 'var(--line-height-h1)' }}>
|
||||
Discover Your Leadership<br />Potential Online
|
||||
</h1>
|
||||
|
||||
<p className="text-body-lg-white mb-8 max-w-3xl">
|
||||
<strong>
|
||||
Our Leadership Courses are designed to build your leadership abilities through targeted, structured packages. Each course increases self-awareness of your leadership style and provides practical insights to strengthen your skills. Courses feature curated content focused on specific abilities, including our proprietary Leadership Profilers, conceptual videos, leader webcasts, and supplemental resources.
|
||||
</strong>
|
||||
</p>
|
||||
|
||||
<div className="flex justify-start">
|
||||
<PrimaryCTAButton
|
||||
text="Talk to Us"
|
||||
onClick={() => navigateTo('/contact?topic=management-development')}
|
||||
ariaLabel="Talk to us about management development"
|
||||
className="primary-cta-button-blue cta-text-white"
|
||||
/>
|
||||
{/* Sub Text */}
|
||||
<div className="max-w-5xl mb-8">
|
||||
<p className="text-body-lg-white" style={{ lineHeight: '1.7' }}>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -420,8 +398,8 @@ export function LearningOnline() {
|
||||
<button
|
||||
onClick={() => setViewMode('grid')}
|
||||
className={`p-2 transition-colors ${viewMode === 'grid'
|
||||
? 'text-white'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-50'
|
||||
? 'text-white'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-50'
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: viewMode === 'grid' ? 'var(--color-primary)' : undefined
|
||||
@@ -433,8 +411,8 @@ export function LearningOnline() {
|
||||
<button
|
||||
onClick={() => setViewMode('list')}
|
||||
className={`p-2 transition-colors ${viewMode === 'list'
|
||||
? 'text-white'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-50'
|
||||
? 'text-white'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-50'
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: viewMode === 'list' ? 'var(--color-primary)' : undefined
|
||||
@@ -634,12 +612,12 @@ export function LearningOnline() {
|
||||
<>
|
||||
{/* Grid View */}
|
||||
{viewMode === 'grid' && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
{currentCourses.map((course) => (
|
||||
<div key={course.id} className="w-full">
|
||||
<CourseCard
|
||||
course={course}
|
||||
className="h-[600px] flex flex-col w-full"
|
||||
className="h-[560px] flex flex-col w-full"
|
||||
onAddToCart={handleAddToCart}
|
||||
/>
|
||||
</div>
|
||||
@@ -664,157 +642,84 @@ export function LearningOnline() {
|
||||
alt={course.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute top-4 left-4">
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="px-3 py-1 font-medium"
|
||||
style={{
|
||||
backgroundColor: 'rgba(248, 195, 1, 0.95)',
|
||||
color: 'var(--color-black)',
|
||||
fontSize: 'var(--font-small)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
backdropFilter: 'blur(4px)'
|
||||
}}
|
||||
>
|
||||
{course.category}
|
||||
|
||||
{/* Duration and Level Badge */}
|
||||
<div className="absolute top-2 left-2 flex gap-2">
|
||||
<Badge variant="secondary" className="bg-black/60 text-white text-xs">
|
||||
<Clock className="w-3 h-3 mr-1" />
|
||||
{course.duration}
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="bg-black/60 text-white text-xs">
|
||||
{course.level}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="absolute top-4 right-4">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="px-3 py-1 font-medium bg-white/90 backdrop-blur-sm"
|
||||
style={{
|
||||
fontSize: 'var(--font-small)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
borderColor: 'var(--color-primary)',
|
||||
color: 'var(--color-primary)'
|
||||
}}
|
||||
>
|
||||
{course.level}
|
||||
|
||||
{/* Format Badge */}
|
||||
<div className="absolute top-2 right-2">
|
||||
<Badge variant="outline" className="bg-white text-xs">
|
||||
{course.format}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CardContent className="p-6 flex-1">
|
||||
<div className="flex flex-col h-full">
|
||||
<h3
|
||||
className="mb-3 group-hover:text-blue-600 transition-colors leading-snug"
|
||||
style={{
|
||||
fontSize: 'var(--font-h4)',
|
||||
fontWeight: 'var(--font-weight-h4)',
|
||||
lineHeight: '1.3',
|
||||
color: 'var(--color-black)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
|
||||
<div className="flex-1 p-6 flex flex-col">
|
||||
<div className="flex-1">
|
||||
{/* Category */}
|
||||
<Badge variant="outline" className="mb-3 text-xs border-blue-200 text-blue-700">
|
||||
{course.category}
|
||||
</Badge>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="text-h4 mb-3 group-hover:text-blue-600 transition-colors">
|
||||
{course.title}
|
||||
</h3>
|
||||
|
||||
<p
|
||||
className="mb-4 flex-1 leading-relaxed"
|
||||
style={{
|
||||
fontSize: 'var(--font-body)',
|
||||
lineHeight: '1.6',
|
||||
color: 'var(--color-gray-muted)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
{/* Description */}
|
||||
<p className="text-body text-gray-600 mb-4 line-clamp-2">
|
||||
{course.description}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-between mb-4 pt-4 border-t border-gray-100">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-4 h-4 text-gray-400" />
|
||||
<span style={{
|
||||
fontSize: 'var(--font-small)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: 'var(--color-gray-muted)',
|
||||
fontWeight: '500'
|
||||
}}>
|
||||
{course.duration}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="w-4 h-4 text-gray-400" />
|
||||
<span style={{
|
||||
fontSize: 'var(--font-small)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: 'var(--color-gray-muted)',
|
||||
fontWeight: '500'
|
||||
}}>
|
||||
{course.participants}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="w-4 h-4 fill-current text-yellow-400" />
|
||||
<span
|
||||
className="font-semibold"
|
||||
style={{
|
||||
fontSize: 'var(--font-small)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: 'var(--color-black)'
|
||||
}}
|
||||
>
|
||||
{course.rating}
|
||||
</span>
|
||||
<Star className="w-4 h-4 text-yellow-400 fill-current" />
|
||||
<span className="text-small font-medium">{course.rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-baseline gap-3">
|
||||
<span
|
||||
className="font-bold"
|
||||
style={{
|
||||
fontSize: '1.5rem',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#04045B'
|
||||
}}
|
||||
>
|
||||
{course.price}
|
||||
</span>
|
||||
{course.originalPrice && (
|
||||
<span
|
||||
className="line-through"
|
||||
style={{
|
||||
fontSize: 'var(--font-body)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: 'var(--color-gray-muted)'
|
||||
}}
|
||||
>
|
||||
{course.originalPrice}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex items-center gap-1">
|
||||
<Users className="w-4 h-4 text-gray-400" />
|
||||
<span className="text-small text-gray-600">{course.participants}</span>
|
||||
</div>
|
||||
<Button
|
||||
onClick={(e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
const cartItem: CartItem = {
|
||||
id: course.id,
|
||||
title: course.title,
|
||||
thumbnail: course.thumbnail,
|
||||
price: course.price,
|
||||
originalPrice: course.originalPrice,
|
||||
category: course.category,
|
||||
level: course.level
|
||||
};
|
||||
handleAddToCart(cartItem);
|
||||
}}
|
||||
variant="outline"
|
||||
className="flex items-center gap-2"
|
||||
style={{
|
||||
borderColor: 'var(--color-primary)',
|
||||
color: 'var(--color-primary)'
|
||||
}}
|
||||
>
|
||||
<ShoppingCart className="w-4 h-4" />
|
||||
Add to Cart
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
{/* Bottom Row - Price and Button */}
|
||||
<div className="flex items-center justify-between pt-4 border-t border-gray-100">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-h4 text-gray-900">{course.price}</span>
|
||||
<span className="text-small text-gray-500 line-through">{course.originalPrice}</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleAddToCart({
|
||||
id: course.id,
|
||||
title: course.title,
|
||||
price: course.price,
|
||||
originalPrice: course.originalPrice,
|
||||
thumbnail: course.thumbnail,
|
||||
type: 'course'
|
||||
});
|
||||
}}
|
||||
className="flex items-center gap-2 hover:bg-blue-50 hover:border-blue-300"
|
||||
>
|
||||
<DollarSign className="w-4 h-4" />
|
||||
Add to Cart
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
@@ -823,24 +728,26 @@ export function LearningOnline() {
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex justify-center items-center gap-2 mt-8">
|
||||
<div className="flex items-center justify-center gap-2 mt-8">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
||||
onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
Previous
|
||||
</Button>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||||
<Button
|
||||
key={page}
|
||||
variant={currentPage === page ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage(page)}
|
||||
className="w-8 h-8 p-0"
|
||||
className="min-w-[40px]"
|
||||
>
|
||||
{page}
|
||||
</Button>
|
||||
@@ -850,9 +757,11 @@ export function LearningOnline() {
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
|
||||
onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
|
||||
disabled={currentPage === totalPages}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
Next
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
@@ -868,283 +777,8 @@ export function LearningOnline() {
|
||||
<CartPopup
|
||||
isOpen={isCartPopupOpen}
|
||||
onClose={handleCloseCartPopup}
|
||||
cartItems={[]} // Not used anymore as CartPopup will get items from context
|
||||
onRemoveItem={() => { }} // Not used anymore
|
||||
recentlyAddedItem={recentlyAddedItem}
|
||||
/>
|
||||
|
||||
{/* Our Approach Section - Standard Design Pattern */}
|
||||
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start max-w-7xl mx-auto">
|
||||
|
||||
{/* Left Side - Title & Description */}
|
||||
<div className="lg:col-span-5 lg:pr-8">
|
||||
<BrandedTag text="OUR APPROACH" />
|
||||
|
||||
<h2 className="text-h2 mb-6 leading-tight">
|
||||
Orientation-Based <span className="text-primary">Learning</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-body-lg text-muted leading-relaxed mb-8">
|
||||
Our unique methodology focuses on understanding your natural leadership orientation and building skills that align with your authentic style while expanding your capabilities across all dimensions.
|
||||
</p>
|
||||
|
||||
{/* Key Stats */}
|
||||
<div className="grid grid-cols-2 gap-6 mb-8">
|
||||
<div className="text-center p-4 bg-gray-50 rounded-lg border">
|
||||
<div className="text-3xl font-bold text-primary mb-1">95%</div>
|
||||
<div className="text-small text-muted">Leader Effectiveness</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-gray-50 rounded-lg border">
|
||||
<div className="text-3xl font-bold text-primary mb-1">20+</div>
|
||||
<div className="text-small text-muted">Years Research</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Primary CTA Button */}
|
||||
<div className="flex justify-start">
|
||||
<PrimaryCTAButton
|
||||
text="Start Free Assessment"
|
||||
onClick={() => navigateTo('/assessment')}
|
||||
icon={Target}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Methodology Points */}
|
||||
<div className="lg:col-span-7">
|
||||
<div className="space-y-8">
|
||||
{methodologyPoints.map((point, index) => {
|
||||
const IconComponent = point.icon;
|
||||
return (
|
||||
<div key={point.title} className="group">
|
||||
<Card className="border-0 shadow-sm hover:shadow-lg transition-all duration-300 bg-white p-0">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
>
|
||||
<IconComponent className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 text-black leading-tight">
|
||||
{point.title}
|
||||
</h4>
|
||||
|
||||
<p className="text-body text-muted leading-relaxed">
|
||||
{point.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Corporate Solutions CTA */}
|
||||
{/* CTA Banner Section - Enterprise Solutions */}
|
||||
<section className="py-20 relative overflow-hidden" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center max-w-7xl mx-auto">
|
||||
|
||||
{/* Left Column - CTA Content */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="order-2 lg:order-1"
|
||||
>
|
||||
<BrandedTag text="TRANSFORM YOUR ORGANIZATION" />
|
||||
|
||||
<h2 className="text-h2 mb-6 leading-tight">
|
||||
Scale Leadership Excellence Across Your <span className="text-primary">Enterprise</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-body-lg text-muted leading-relaxed mb-8">
|
||||
Empower your leadership pipeline with our comprehensive online learning platform. Drive measurable results with scalable solutions designed for modern organizations.
|
||||
</p>
|
||||
|
||||
{/* Key Benefits */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-10">
|
||||
{[
|
||||
{ icon: Building2, text: 'Enterprise-grade platform' },
|
||||
{ icon: TrendingUp, text: 'Real-time analytics & ROI' },
|
||||
{ icon: Users, text: 'Custom learning cohorts' },
|
||||
{ icon: Globe, text: 'Global deployment ready' }
|
||||
].map((benefit, index) => {
|
||||
const IconComponent = benefit.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={benefit.text}
|
||||
className="flex items-center gap-3"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<IconComponent className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<span className="text-body text-black font-medium">
|
||||
{benefit.text}
|
||||
</span>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Social Proof Stats */}
|
||||
<div className="flex flex-wrap gap-6 mb-8 p-6 bg-gray-50 rounded-lg border">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-2xl font-bold text-primary">500+</div>
|
||||
<div className="text-small text-muted">Companies</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-2xl font-bold text-primary">10K+</div>
|
||||
<div className="text-small text-muted">Leaders</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-2xl font-bold text-primary">92%</div>
|
||||
<div className="text-small text-muted">Completion</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-2xl font-bold text-primary">4.8★</div>
|
||||
<div className="text-small text-muted">Rating</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="flex justify-start">
|
||||
<PrimaryCTAButton
|
||||
text="Schedule Enterprise Demo"
|
||||
onClick={() => navigateTo('/contact?topic=corporate-learning')}
|
||||
icon={Calendar}
|
||||
ariaLabel="Schedule an enterprise demo with our team"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right Column - Hero Image */}
|
||||
<motion.div
|
||||
className="order-1 lg:order-2 relative"
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="relative rounded-2xl overflow-hidden shadow-2xl">
|
||||
<ImageWithFallback
|
||||
src="https://images.unsplash.com/photo-1603201667141-5a2d4c673378?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxlbnRlcnByaXNlJTIwdHJhaW5pbmclMjB0ZWFtJTIwbWVldGluZ3xlbnwxfHx8fDE3NTU3NTg2Mzl8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
|
||||
alt="Enterprise team in leadership training session"
|
||||
className="w-full h-[480px] object-cover"
|
||||
/>
|
||||
|
||||
{/* Overlay with gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-primary/20 to-transparent"></div>
|
||||
|
||||
{/* Floating Badge */}
|
||||
<div className="absolute top-6 left-6 bg-white/95 backdrop-blur-sm rounded-lg px-4 py-2 shadow-lg">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
||||
<span className="text-small font-medium text-black">Live Training Session</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Achievement Badge */}
|
||||
<div className="absolute bottom-6 right-6 bg-white/95 backdrop-blur-sm rounded-lg px-4 py-3 shadow-lg">
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-primary">95%</div>
|
||||
<div className="text-small text-muted">Engagement Rate</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>{`
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
`}</style>
|
||||
{/* Individual Learning CTA Banner Section - Landing Page Style */}
|
||||
<section className="relative h-[700px] overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div className="absolute inset-0">
|
||||
<ImageWithFallback
|
||||
src="https://images.unsplash.com/photo-1673515335586-f9f662c01482?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxvbmxpbmUlMjBsZWFybmluZyUyMGluZGl2aWR1YWwlMjBzdHVkeSUyMGxhcHRvcHxlbnwxfHx8fDE3NTU3NTg5MzN8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
|
||||
alt="Individual online learning with laptop and study materials"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
{/* Subtle dark overlay for overall image */}
|
||||
<div className="absolute inset-0 bg-black/30" />
|
||||
|
||||
{/* Gradient overlay for better text readability */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
|
||||
</div>
|
||||
|
||||
{/* Content Container */}
|
||||
<div className="relative h-full flex items-center justify-end section-margin-x">
|
||||
{/* CTA Content Block */}
|
||||
<div
|
||||
className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-primary)'
|
||||
}}
|
||||
>
|
||||
{/* Branded Tag */}
|
||||
<BrandedTag text="NEXT STEPS" variant="white" />
|
||||
|
||||
{/* Main Headline */}
|
||||
<h2
|
||||
className="text-h2-white mb-8"
|
||||
>
|
||||
Ready to transform your
|
||||
<span
|
||||
className="italic"
|
||||
style={{ color: 'var(--color-brand-accent)' }}
|
||||
>
|
||||
{" "}leadership?{" "}
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
{/* CTA Button - Yellow variant for online courses */}
|
||||
<PrimaryCTAButton
|
||||
text="Start Free Assessment"
|
||||
onClick={() => navigateTo('/assessment')}
|
||||
ariaLabel="Start your free leadership assessment"
|
||||
className="cta-banner-yellow"
|
||||
icon={Target}
|
||||
/>
|
||||
|
||||
{/* Supporting Text */}
|
||||
<p
|
||||
className="text-body-white mt-6 opacity-90"
|
||||
>
|
||||
Connect with our leadership experts to discuss your organization's specific development needs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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';
|
||||
import { toast } from 'sonner@2.0.3';
|
||||
|
||||
// Mock data structure matching API contracts
|
||||
const mockProgrammeData = {
|
||||
@@ -764,7 +764,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
|
||||
<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">
|
||||
<TabsList className="grid w-full grid-cols-2 md:grid-cols-3 lg:grid-cols-5 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"
|
||||
@@ -795,12 +795,6 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
|
||||
>
|
||||
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>
|
||||
|
||||
{/* Overview Tab - Who will benefit from this course? */}
|
||||
@@ -1298,99 +1292,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
|
||||
</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: React.MouseEvent<HTMLButtonElement>) => {
|
||||
if (!option.popular) {
|
||||
e.currentTarget.style.backgroundColor = '#F8C301';
|
||||
e.currentTarget.style.color = 'white';
|
||||
} else {
|
||||
e.currentTarget.style.backgroundColor = '#E6AF01';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
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>
|
||||
@@ -1473,7 +1375,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: React.MouseEvent<HTMLButtonElement>) => {
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// Add to cart functionality
|
||||
}}
|
||||
@@ -1483,7 +1385,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: React.MouseEvent<HTMLButtonElement>) => {
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigateTo(`/course/${related.id}`);
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user