+
+ );
}
- // Show error state if API call fails
if (isError) {
return (
@@ -460,7 +436,6 @@ export function AboutUs() {
{aboutUsData?.how_we_work_title || "How We Work"}
- {/* Four Key Points Grid - Using API data if available, otherwise fallback to static */}
{(aboutUsData?.how_we_work && aboutUsData.how_we_work.length > 0) ? (
aboutUsData.how_we_work.map((item, index) => (
@@ -492,7 +467,6 @@ export function AboutUs() {
))
) : (
- // Fallback to static data if API data is not available
<>
- {/* Split Layout - Left: Eyebrow Text, Right: Main Heading */}
- {/* Left Side - Eyebrow Text */}
- {/* Right Side - Main Heading */}
- {/* Updated Statistics Grid - Dynamic from API */}
@@ -612,7 +584,6 @@ export function AboutUs() {
{(aboutUsData?.stat_section && aboutUsData.stat_section.length > 0) ? (
aboutUsData.stat_section.map((stat, index) => (
@@ -650,7 +620,6 @@ export function AboutUs() {
))
) : (
- // Fallback to static statistics if API data is not available
<>
- {/* Section 4: Our Team - Dynamic from API */}
+ {/* Section 4: Our Team - Dynamic from API (outer grid from API, modal from static) */}
@@ -31,8 +30,8 @@ export function CTABannerSection({ ctaBands = [], isLoading }: CTABannerSectionP
);
}
- // If no CTA band is available, don't render anything
- if (!ctaBand) {
+ // If no CTA section data is available, don't render anything
+ if (!ctaSection) {
return null;
}
@@ -41,8 +40,8 @@ export function CTABannerSection({ ctaBands = [], isLoading }: CTABannerSectionP
{/* Background Image */}
- {ctaBand.text || "Ready to transform your leadership?"}
+ {ctaSection.text || "Ready to transform your leadership?"}
+ {/* Description */}
+ {ctaSection.description && (
+
diff --git a/src/components/CartPopup.tsx b/src/components/CartPopup.tsx
index 0af25b0..e092316 100644
--- a/src/components/CartPopup.tsx
+++ b/src/components/CartPopup.tsx
@@ -14,21 +14,22 @@ export interface CartItem {
originalPrice?: string;
category: string;
level: string;
+ type?: string;
}
interface CartPopupProps {
isOpen: boolean;
onClose: () => void;
- cartItems: CartItem[]; // Legacy prop - no longer used but kept for backward compatibility
- onRemoveItem: (itemId: string) => void; // Legacy prop - no longer used but kept for backward compatibility
+ // cartItems: CartItem[]; // Legacy prop - no longer used but kept for backward compatibility
+ // onRemoveItem: (itemId: string) => void; // Legacy prop - no longer used but kept for backward compatibility
recentlyAddedItem?: CartItem | null;
}
export function CartPopup({
isOpen,
onClose,
- cartItems: legacyCartItems, // Renamed to avoid confusion
- onRemoveItem: legacyOnRemoveItem, // Renamed to avoid confusion
+ // cartItems: legacyCartItems, // Renamed to avoid confusion
+ // onRemoveItem: legacyOnRemoveItem, // Renamed to avoid confusion
recentlyAddedItem
}: CartPopupProps) {
const [showSuccess, setShowSuccess] = useState(false);
diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
index 280ebea..42def13 100644
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@@ -1,9 +1,9 @@
import React from 'react';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
-import {
- Users,
- Clock,
+import {
+ Users,
+ Clock,
Star,
ArrowRight,
ShoppingCart
@@ -22,7 +22,7 @@ export interface Course {
level: string;
format: string;
rating: number;
- participants: string;
+ reviews: string;
category: string;
description: string;
price: string;
@@ -47,7 +47,7 @@ export function CourseCard({ course, onClick, className, onAddToCart }: CourseCa
const handleAddToCart = (e: React.MouseEvent) => {
e.stopPropagation(); // Prevent card click when clicking Add to Cart
-
+
if (onAddToCart) {
const cartItem: CartItem = {
id: course.id,
@@ -75,7 +75,7 @@ export function CourseCard({ course, onClick, className, onAddToCart }: CourseCa
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
-
+
{/* Card Content - Reduced horizontal padding */}
- {/* Centered Header Section */}
{aboutUsData?.our_team_title || "Our Team"}
- {/* Team Members Grid - Using static team members with full profiles */}
+ {/* Team Members Grid - Using API data for outer display */}
-
+ {/* Section 5: Our Methodology - Dynamic from API */}
+ {aboutUsData?.methodology && (
+
+
+ )}
+
{/* Testimonials Section */}
);
diff --git a/src/components/CTABannerSection.tsx b/src/components/CTABannerSection.tsx
index 5f995ca..f1c6dd9 100644
--- a/src/components/CTABannerSection.tsx
+++ b/src/components/CTABannerSection.tsx
@@ -5,21 +5,20 @@ import { PrimaryCTAButton } from "./PrimaryCTAButton";
import { navigateTo } from "./Router";
interface CTABannerSectionProps {
- ctaBands?: Array<{
+ ctaSection?: {
id: string;
background_image_url: string;
- background_image_alt_text: string;
text: string;
cta_text: string;
cta_destination: string;
- }>;
+ description: string;
+ landing_page_type: string;
+ service_type: string | null;
+ };
isLoading?: boolean;
}
-export function CTABannerSection({ ctaBands = [], isLoading }: CTABannerSectionProps) {
- // Get the first CTA band or use default values
- const ctaBand = ctaBands && ctaBands.length > 0 ? ctaBands[0] : null;
-
+export function CTABannerSection({ ctaSection, isLoading }: CTABannerSectionProps) {
if (isLoading) {
return (
- We have a team of 7 consultants and 4 young consultants. All our senior Consultants are ex-business professionals with experience ranging from 15-30 years in varied business functions and carry a deep understanding of the area they are engaging in. Two of them bring in Board room experience. – Meet them + {aboutUsData?.our_team_description || "We have a team of 7 consultants and 4 young consultants. All our senior Consultants are ex-business professionals with experience ranging from 15-30 years in varied business functions and carry a deep understanding of the area they are engaging in. Two of them bring in Board room experience. – Meet them"}
- {staticTeamMembers.map((member, index) => (
- handleMemberClick(member)}
- >
-
- ))}
-
-
- {/* Alternative: Use API team data if needed */}
- {/* {aboutUsData?.our_team && aboutUsData.our_team.length > 0 && (
-
-
-
-
- 
-
+ {apiTeamMembers.map((member, index) => {
+ const name = member.name_role.split(' - ')[0];
+ const role = member.name_role.split(' - ')[1] || 'Team Member';
- {/* Hover Overlay */}
-
-
-
-
-
- View Profile
-
-
-
- {member.name}
-- {member.role} -
-
- {aboutUsData.our_team.map((member, index) => (
+ return (
handleMemberClick(member)}
>
{
+ (e.target as HTMLImageElement).src = 'https://ui-avatars.com/api/?name=' + encodeURIComponent(name) + '&background=04045B&color=fff&size=200';
+ }}
/>
+
+
- )} */}
-
-
-
-
- {/* Section 5: Our Methodology (Static - unchanged) */}
-
-
- ))}
- - {member.name_role.split(' - ')[0]} -
-- {member.name_role.split(' - ')[1] || ''} +
{name}
++ {role} +
+ {/* Bio Section */} ++ {member.bio || "No bio available"}
-{member.bio}
-
-
-
-
- {/* Vertical Timeline Container */}
-
Our Methodology
-
- {/* Vertical Line Background - Gray - Ends exactly at Phase 3 dot */}
-
-
- {/* Vertical Line Fill - Blue - Animated on Scroll */}
-
-
- {/* Phase 1 - Understanding & Assessment */}
-
- navigateTo('/contact')}
- ariaLabel="Contact us to design your leadership journey"
- className="cta-text-black"
- />
-
+ );
+ })}
-
-
- {/* Phase 2 - Development & Practice */}
-
- {/* Phase dot positioned absolutely */}
-
-
- {/* Column 1: Phase Label */}
-
-
-
-
- {/* Column 2: Main Heading */}
-
-
- Phase 1
-
-
-
-
-
-
- {/* Column 3: Content - Description and Bullet Points */}
- Understanding & Assessment
-
-
-
-
- - We believe that leadership is more than skill and style. Leadership is predicated by a person's orientations (typical behaviors) which shapes the leadership abilities and its fit to a context. The broader the fit of the orientation the more versatile a person is in his exercise of leadership in a variety of contexts. -
- -
-
- Key Focus Areas:
- -
-
-
-
-
- Leadership orientations (typical behaviors) assessment.
-
-
-
-
-
-
- Action-consequence model application.
-
-
-
-
-
-
- Context alignment and strategy integration.
-
-
-
-
-
- {/* Phase 3 - Implementation & Mastery */}
-
- {/* Phase dot positioned absolutely */}
-
-
- {/* Column 1: Phase Label */}
-
-
-
-
- {/* Column 2: Main Heading */}
-
-
- Phase 2
-
-
-
-
-
-
- {/* Column 3: Content - Description and Bullet Points */}
- Development & Practice
-
-
-
-
- - Thus, in our engagements with our clients we work with the individual using the action-consequence model to link up one's leadership orientations (typical behaviors) to outcomes. -
- -- Leadership is a social skill. Socially aware people shape the thought, emotions and actions of others better. The key to social-awareness is self-awareness. We help our learners become aware, gain insights and discover their fullest leadership potential. This in turn builds organizational leadership capacity & capabilities. -
- -
-
- Development Process:
- -
-
-
-
-
- Self-awareness and insight facilitation.
-
-
-
-
-
-
- Leadership potential discovery sessions.
-
-
-
-
-
-
- Organizational capacity building.
-
-
-
-
-
- {/* Our Philosophy - Full Width Figma Design */}
-
- {/* Phase dot positioned absolutely */}
-
-
- {/* Column 1: Phase Label */}
-
-
-
-
- {/* Column 2: Main Heading */}
-
-
- Phase 3
-
-
-
-
-
-
- {/* Column 3: Content - Description and Bullet Points */}
- Implementation & Mastery
-
-
-
-
- - Our approach to learning works on the 'Orientation Toning process', which is using 'Restraint and Release' of thought, emotions and actions. This release is moderated according to the demands of a context, without being tied down by one's default settings. -
- -
-
- Mastery Framework:
- -
-
-
-
-
- Orientation Toning process implementation.
-
-
-
-
-
-
- Context-responsive leadership adaptation.
-
-
-
-
-
-
- Sustainable behavior change integration.
-
-
-
- {/* Phase dot positioned absolutely */}
-
-
-
-
-
-
-
-
-
-
-
- {/* Left Section: Heading */}
-
-
-
-
- {/* Right Section: Content */}
- Our Philosophy
-
- {/* Philosophy Description */}
-
- - Our philosophy is that leadership begins with orientations — the inner drivers and behaviors that shape who we are. These orientations combine to create leadership abilities, which in turn lead to meaningful outcomes. At Kautilya Leadership Centre, we see leadership as a journey of connecting orientations to abilities and outcomes through structured development. -
- - {/* Three Philosophy Items */} -
- {/* Leadership Orientations */}
-
-
-
-
- {/* Leadership Abilities */}
-
-
-
-
-
- - Leadership Orientations -
-- Who am I? (inner drivers & behaviors) -
-
-
-
- {/* Leadership Outcomes */}
-
-
-
-
-
- - Leadership Abilities -
-- What I can do (competencies & skills) -
-
-
-
-
-
-
-
- - Leadership Outcomes -
-- What I deliver (results for self & organization) -
-
+
+
+
+
+
+
+ {aboutUsData.methodology.subtitle}
+ )} +
+
+
+
+
+ {[...(aboutUsData.methodology.phases || [])]
+ .sort((a, b) => (a.display_order || 0) - (b.display_order || 0))
+ .map((phase, phaseIndex) => (
+
+ navigateTo('/contact')}
+ ariaLabel="Contact us to design your leadership journey"
+ className="cta-text-black"
+ />
+
+
+
+
+ ))}
+
+ {aboutUsData?.philosophy && (
+
+
+
+
+
+
+
+
+
+ {phase.phase_label || `Phase ${phase.phase_number}`}
+
+
+
+
+
+
+ {phase.title}
+
+
+
+
+ + {phase.description} +
+ + {phase.bullet_title && phase.bullets && phase.bullets.length > 0 && ( +
+
+ )}
+ {phase.bullet_title}
+
+ {phase.bullets.map((bullet, bulletIndex) => (
+
+
+
+
+ {bullet}
+
+
+ ))}
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ {aboutUsData.philosophy.title || "Our Philosophy"}
+
+
+ + {aboutUsData.philosophy.description} +
+ + {aboutUsData.philosophy.points && aboutUsData.philosophy.points.length > 0 && ( +
+ {aboutUsData.philosophy.points.map((point, pointIndex) => (
+
+ )}
+
+
+ ))}
+
+
+
+
+
+ + {point} +
+
- {ctaBand.text || "Ready to transform your leadership?"}
+ {ctaSection.text || "Ready to transform your leadership?"}
+ {/* Description */}
+ {ctaSection.description && (
+
+ {ctaSection.description}
+
+ )}
+
{/* CTA Button */}
navigateTo(ctaBand.cta_destination || '/contact?topic=consulting')}
+ text={ctaSection.cta_text || "Schedule a Consultation"}
+ onClick={() => navigateTo(ctaSection.cta_destination || '/contact?topic=consulting')}
ariaLabel="Schedule a consultation with our leadership experts"
className="cta-banner-yellow"
/>
-
- {/* Supporting Text */}
-
- Connect with our leadership experts to discuss your organization's specific development needs.
-
- Connect with our leadership experts to discuss your organization's specific development needs. -
-
-
-
- {course.level}
-
-
{/* Course Title */}
-
= {
+ '/icons/building.svg': Building,
+ '/icons/home.svg': Home,
+ '/icons/hotel.svg': Building,
+ '/icons/coffee.svg': Coffee,
+ '/icons/wifi.svg': Wifi,
+ '/icons/settings.svg': Settings,
+ '/icons/user-check.svg': UserCheck,
+ '/icons/heart.svg': Heart,
+ '/icons/trending-up.svg': TrendingUp,
+ '/icons/users.svg': Users,
+ '/icons/target.svg': Target,
+ '/icons/star.svg': Star,
+ '/icons/compass.svg': Compass,
+ '/icons/book-open.svg': BookOpen,
+ '/icons/message-circle.svg': MessageCircle,
+ '/icons/clock.svg': Clock,
+ };
-const facilityFeatures = [
- {
- phase: "Premium Accommodations",
- duration: "World-Class Comfort",
- activities: ["Luxury single and double rooms", "Executive suites", "24/7 concierge service", "High-speed internet throughout"],
- deliverables: ["Comfortable stay experience", "Professional environment", "Seamless connectivity", "Executive-level service"]
- },
- {
- phase: "Learning & Meeting Spaces",
- duration: "State-of-the-Art Facilities",
- activities: ["Modern conference rooms", "Interactive learning spaces", "Breakout areas", "Outdoor meeting spaces"],
- deliverables: ["Flexible learning environments", "Technology-enabled spaces", "Collaborative areas", "Natural settings"]
- },
- {
- phase: "Dining & Recreation",
- duration: "Complete Experience",
- activities: ["Gourmet dining options", "Healthy meal programs", "Recreation facilities", "Wellness amenities"],
- deliverables: ["Nutritious meal programs", "Networking opportunities", "Physical wellness", "Stress relief activities"]
- }
-];
-
-const expectedOutcomes = [
- {
- metric: "96%",
- description: "Client satisfaction with facility quality and service",
- icon: Heart,
- category: "Satisfaction"
- },
- {
- metric: "87%",
- description: "Improvement in program engagement in residential setting",
- icon: TrendingUp,
- category: "Engagement"
- },
- {
- metric: "92%",
- description: "Would recommend Kautilya Facility to other organizations",
- icon: Star,
- category: "Recommendation"
- },
- {
- metric: "78%",
- description: "Return rate for repeat bookings and programs",
- icon: Building,
- category: "Loyalty"
- }
-];
+ const IconComponent = iconMap[iconUrl] || Building;
+ return IconComponent;
+};
export function KautilyaFacility() {
const [expandedUseCase, setExpandedUseCase] = useState(null);
const [expandedFeature, setExpandedFeature] = useState(0);
+ // API call with service_type = 'kautilya_facility'
+ const { data: apiResponse, isLoading, error } = useGetServiceListQuery({
+ service_type: 'kautilya_facility'
+ });
+
+ const apiData = apiResponse?.data as ServicePageData | undefined;
+
useEffect(() => {
window.scrollTo(0, 0);
}, []);
+ if (isLoading) {
+ return (
+
{course.title}
- + {/* Course Description - Limited to 2 lines with ellipsis */} -{course.description}
- + {/* Course Meta Information - Reduced bottom margin */}
-
{course.originalPrice && (
-
)}
- {course.originalPrice && (
+ {/* {course.originalPrice && (
- {/* Add to Cart Button - Outline Blue */}
+ {/* Add to Cart */}
-
- {/* Learn More Button - Solid Blue */}
+
+ {/* Learn More */}
+
+ );
+ }
+
+ if (error || !apiData) {
+ return (
+
+
+ );
+ }
+
+ // Transform data for UI (using API data with fallbacks to static data)
+ const targetAudience = apiData.audience_section?.audience_cards.map(card => ({
+ title: card.title,
+ description: card.description,
+ icon: getIconComponent(card.icon_url),
+ challenges: card.challenges || []
+ })) || [];
+
+ const useCases = apiData.use_case_section?.use_case_cards.map(card => ({
+ title: card.title,
+ description: card.description,
+ icon: getIconComponent(card.icon_url),
+ scenario: card.highlight_text
+ })) || [];
+
+ const facilityFeatures = apiData.program_section?.program_phases.map(phase => ({
+ phase: phase.phase.title,
+ duration: phase.phase.duration,
+ activities: phase.activities.map(activity => activity.text),
+ deliverables: phase.outcomes.map(outcome => outcome.text)
+ })) || [];
+
+ const expectedOutcomes = apiData.impact_section?.impact_benefits.map(benefit => ({
+ category: benefit.title,
+ description: benefit.description,
+ icon: getIconComponent(benefit.icon_url)
+ })) || [];
+
+ const testimonials = apiData.testimonial_section?.map(testimonial => {
+ const designationParts = testimonial.designation.split(',');
+ const role = designationParts[0]?.trim() || '';
+ const company = designationParts[1]?.trim() || '';
+
+ return {
+ id: parseInt(testimonial.id) || 0,
+ name: testimonial.name,
+ role: role,
+ company: company,
+ avatar: `https://ui-avatars.com/api/?name=${encodeURIComponent(testimonial.name)}&background=04045B&color=fff&size=128`,
+ quote: testimonial.content,
+ rating: 5,
+ isVideo: !!testimonial.video_url,
+ videoThumbnail: testimonial.video_url ? `/images/testimonials/thumbnails/${testimonial.id}.jpg` : undefined,
+ videoUrl: testimonial.video_url || undefined
+ };
+ }) || [];
+
return (
+
+ Error loading content. Please try again later.
+ +
{/* Hero Section */}
@@ -156,7 +308,7 @@ export function KautilyaFacility() {
@@ -179,19 +331,19 @@ export function KautilyaFacility() {
navigateTo('/contact?topic=kautilya-facility')}
- ariaLabel="Book a consultation for Kautilya Facility"
+ text={apiData.hero_section.cta_text}
+ onClick={() => navigateTo(apiData.hero_section.cta_destination)}
+ ariaLabel={apiData.hero_section.cta_text}
className="primary-cta-button-blue cta-text-white"
/>
@@ -206,70 +358,41 @@ export function KautilyaFacility() {
- Kautilya Facility + {apiData.hero_section.headline}
- Experience world-class residential learning at our premium campus with 96% client satisfaction and exceptional facilities designed for leadership excellence. + {apiData.hero_section.subtext}
Premium Learning Campus & Residential Programs
+{apiData.overview.title}
- Kautilya Facility is a world-class residential learning campus designed specifically for executive education and leadership development programs. Our premium facility combines luxury accommodations, state-of-the-art learning spaces, and comprehensive amenities to create an immersive environment that maximizes learning outcomes and program engagement. + {apiData.overview.description}
- The Business Problem It Solves: Many organizations struggle to find appropriate venues that combine professional learning environments with quality accommodations for residential programs. Standard hotels lack the specialized learning infrastructure, while conference centers often compromise on accommodation quality. Our facility eliminates these compromises by providing an integrated solution designed specifically for executive learning. + The Business Problem It Solves: {apiData.overview.highlight_text}
-
-
-
-
-
-
-
+
-
+
+
+ + {card.title} +
++ {card.description} +
+- Premium Campus -
-- World-class residential learning campus with luxury amenities and sophisticated infrastructure -
-
-
-
-
-
-
-
- - Learning-Focused Design -
-- Specialized spaces designed for optimal learning and development with cutting-edge technology -
-
-
+ );
+ })}
-
-
-
- - 96% Satisfaction Rate -
-- Exceptional client satisfaction with facility quality, service excellence, and learning outcomes -
-Target Audience
+{apiData.audience_section.title}
- Designed for organizations and teams seeking premium residential learning and strategic planning experiences. + {apiData.audience_section.description}
When Organizations Need Premium Learning Facilities
+{apiData.use_case_section.title}
- Ideal for organizations seeking world-class residential learning experiences and strategic planning sessions. + {apiData.use_case_section.description}
@@ -377,9 +498,9 @@ export function KautilyaFacility() {
Integrated Learning Campus Experience
+{apiData.approach_section.title}
- Our comprehensive approach combines premium accommodations, state-of-the-art learning facilities, and exceptional service delivery. + {apiData.approach_section.description}
- {/* Row 1: Facilities, Services, Technology */}
+ {/* Row 1: First 3 approach cards from API */}
- {/* Facilities */}
-
@@ -559,198 +633,95 @@ export function KautilyaFacility() {
{/* Tablet & Mobile: Vertical Flowchart */}
-
- {/* Row 2: Customization, Support */}
-
-
- Premium Facilities
-- World-class accommodations and learning environments -
-
-
+ );
+ })}
- {/* Arrow 1→2 */}
-
- Luxury Accommodations
+ {apiData.approach_section.approach_cards.slice(0, 3).map((card, idx) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ return (
+
-
+
-
+
+ {card.title}
+{card.description}
+
+ {card.bullets.slice(0, 3).map((bullet, bulletIdx) => (
+
+ {bullet}
+
+ ))}
+
- Learning Spaces
-
-
- Wellness Facilities
-
-
-
-
-
- {/* Services */}
-
-
-
{/* Vertical Connector - Center Flow Down */}
@@ -477,58 +554,39 @@ export function KautilyaFacility() {
+
+
- Service Excellence
-- Exceptional hospitality and dining experiences -
-
-
-
- {/* Arrow 2→3 */}
-
- Gourmet Catering
-
-
- 24/7 Concierge
-
-
- Event Management
-
+ )}
+ {apiData.approach_section.approach_cards.length >= 3 && (
+
+
+
-
-
-
-
- {/* Technology */}
-
-
+ )}
-
- Technology Infrastructure
-- Advanced technology for seamless learning delivery -
-
-
-
- High-Speed Internet
-
-
- AV Equipment
-
-
- Tech Support
-
-
- {/* Customization */}
-
- {/* Row 3: Expected Outcome - Centered */}
+ {/* Row 3: Expected Outcome - Use API outcomes data */}
-
+ {/* Row 2: Next 2 approach cards (if available) */}
+ {apiData.approach_section.approach_cards.length >= 4 && (
+
-
- Flexible Customization
-- Adaptable spaces configured to your program needs -
-
-
-
- Room Configurations
-
-
- Custom Setups
-
-
- Branding Options
-
-
+ {apiData.approach_section.approach_cards.slice(3, 5).map((card, idx) => {
+ const IconComponent = getIconComponent(card.icon_url);
+ const isFirstOfPair = idx === 0;
+ return (
+
+ )}
{/* Final Vertical Connector - Center Flow Down to Outcome */}
+
+ );
+ })}
- {/* Arrow 4→5 */}
-
+
+ {card.title}
+{card.description}
+
+ {card.bullets.slice(0, 3).map((bullet, bulletIdx) => (
+
+
+ {bullet}
+
+ ))}
+
-
-
-
- {/* Dedicated Support */}
-
+
+
+ )}
-
-
-
- Dedicated Support
-- Expert team ensuring flawless program execution -
-
-
-
- Event Coordinators
-
-
- Facility Staff
-
-
- Technical Team
-
-
@@ -538,19 +596,35 @@ export function KautilyaFacility() {
-
Expected Outcome
+ {apiData.approach_section.outcomes && apiData.approach_section.outcomes[0] && (() => { + const OutcomeIcon = getIconComponent(apiData.approach_section.outcomes[0].icon_url); + return+ {apiData.approach_section.outcomes?.[0]?.title || "Expected Outcome"} +
- An immersive learning environment that enhances focus, engagement, and program effectiveness for transformational results. + {apiData.approach_section.outcomes?.[0]?.description || "Transformational executive leaders with strategic capability, executive presence, and proven business impact."}
-
-
+ {apiData.approach_section.outcomes?.[0]?.bullets?.slice(0, 2).map((bullet, idx) => (
+
+
+ )) || (
+ <>
+
+
+
+ )}
- {/* Facilities */}
-
- {/* Background Image */}
- ('');
+ const [selectedCategoryName, setSelectedCategoryName] = useState('All Categories');
const [selectedPriceRange, setSelectedPriceRange] = useState('All Prices');
const [selectedDuration, setSelectedDuration] = useState('All Durations');
const [selectedRating, setSelectedRating] = useState('All Ratings');
@@ -208,99 +57,250 @@ export function LearningOnline() {
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
const [currentPage, setCurrentPage] = useState(1);
const coursesPerPage = 9;
+ const prefetchCourseById = courseApi.usePrefetch('getcoursebyid');
- // Cart functionality - using global cart context
- const { addToCart } = useCart();
- const [isCartPopupOpen, setIsCartPopupOpen] = useState(false);
- const [recentlyAddedItem, setRecentlyAddedItem] = useState(null);
+ // Debounced search term to avoid too many API calls
+ const debouncedSearchTerm = useDebounce(searchTerm, 500);
- // Get unique values for filters - Updated for Rupees
- const categories = ['All Categories', ...courseCategories];
- const levels = ['All Levels', ...Array.from(new Set(featuredCourses.map(course => course.level)))];
- const formats = ['All Formats', ...Array.from(new Set(featuredCourses.map(course => course.format)))];
- const priceRanges = ['All Prices', 'Under ₹20,000', '₹20,000 - ₹35,000', '₹35,000 - ₹50,000', 'Over ₹50,000'];
- const durations = ['All Durations', 'Under 6 hours', '6-10 hours', '10-15 hours', 'Over 15 hours'];
- const ratings = ['All Ratings', '4.5+ Stars', '4.0+ Stars', '3.5+ Stars'];
-
- const sortOptions = [
- { value: 'Most Popular', label: 'Most Popular' },
- { value: 'newest', label: 'Newest First' },
- { value: 'title', label: 'Title A-Z' },
- { value: 'price_low', label: 'Price: Low to High' },
- { value: 'price_high', label: 'Price: High to Low' },
- { value: 'rating', label: 'Highest Rated' },
- { value: 'duration', label: 'Duration' }
- ];
-
- // Helper function to parse rupee price
- const parseRupeePrice = (priceStr: string) => {
- return parseFloat(priceStr.replace('₹', '').replace(/,/g, ''));
- };
-
- // Filter and sort courses
- const filteredCourses = featuredCourses.filter(course => {
- const matchesSearch = course.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
- course.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
- course.category.toLowerCase().includes(searchTerm.toLowerCase());
-
- const matchesCategory = selectedCategory === 'All Categories' || course.category === selectedCategory;
- const matchesLevel = selectedLevel === 'All Levels' || course.level === selectedLevel;
- const matchesFormat = selectedFormat === 'All Formats' || course.format === selectedFormat;
-
- // Price filter - Updated for Rupees
- const price = parseRupeePrice(course.price);
- const matchesPrice = selectedPriceRange === 'All Prices' ||
- (selectedPriceRange === 'Under ₹20,000' && price < 20000) ||
- (selectedPriceRange === '₹20,000 - ₹35,000' && price >= 20000 && price <= 35000) ||
- (selectedPriceRange === '₹35,000 - ₹50,000' && price >= 35000 && price <= 50000) ||
- (selectedPriceRange === 'Over ₹50,000' && price > 50000);
-
- // Duration filter
- const durationHours = parseInt(course.duration);
- const matchesDuration = selectedDuration === 'All Durations' ||
- (selectedDuration === 'Under 6 hours' && durationHours < 6) ||
- (selectedDuration === '6-10 hours' && durationHours >= 6 && durationHours <= 10) ||
- (selectedDuration === '10-15 hours' && durationHours >= 10 && durationHours <= 15) ||
- (selectedDuration === 'Over 15 hours' && durationHours > 15);
-
- // Rating filter
- const matchesRating = selectedRating === 'All Ratings' ||
- (selectedRating === '4.5+ Stars' && course.rating >= 4.5) ||
- (selectedRating === '4.0+ Stars' && course.rating >= 4.0) ||
- (selectedRating === '3.5+ Stars' && course.rating >= 3.5);
-
- return matchesSearch && matchesCategory && matchesLevel && matchesFormat && matchesPrice && matchesDuration && matchesRating;
- }).sort((a, b) => {
- switch (sortBy) {
- case 'Most Popular':
- return parseInt(b.participants.replace(/[^\d]/g, '')) - parseInt(a.participants.replace(/[^\d]/g, ''));
- case 'newest':
- return a.id.localeCompare(b.id); // Assuming newer courses have higher IDs
- case 'title':
- return a.title.localeCompare(b.title);
- case 'price_low':
- return parseRupeePrice(a.price) - parseRupeePrice(b.price);
- case 'price_high':
- return parseRupeePrice(b.price) - parseRupeePrice(a.price);
- case 'rating':
- return b.rating - a.rating;
- case 'duration':
- return parseInt(a.duration) - parseInt(b.duration);
- default:
- return 0;
- }
+ // Fetch course categories
+ const { data: categoriesData, isLoading: categoriesLoading } = useGetCourseCategoriesQuery({
+ limit: 100,
+ offset: 0
});
- // Paginate results
- const totalPages = Math.ceil(filteredCourses.length / coursesPerPage);
+ const sortOptions = [
+ { value: 'most_popular', label: 'Most Popular' },
+ { value: 'newest', label: 'Newest First' },
+ { value: 'title_asc', label: 'Title A-Z' },
+ { value: 'price_asc', label: 'Price: Low to High' },
+ { value: 'price_desc', label: 'Price: High to Low' },
+ { value: 'rating_desc', label: 'Highest Rated' },
+ { value: 'duration_asc', label: 'Duration' }
+ ];
+
+ const priceRanges = [
+ 'All Prices',
+ 'Under ₹20,000',
+ '₹20,000 - ₹35,000',
+ '₹35,000 - ₹50,000',
+ 'Over ₹50,000'
+ ];
+
+ const durations = [
+ 'All Durations',
+ 'Under 6 hours',
+ '6-10 hours',
+ '10-15 hours',
+ 'Over 15 hours'
+ ];
+
+ const ratings = [
+ 'All Ratings',
+ '4.5+ Stars',
+ '4.0+ Stars',
+ '3.5+ Stars'
+ ];
+
+ // Build categories list
+ const categories = useMemo(() => {
+ const cats = [{ id: '', name: 'All Categories' }];
+ if (categoriesData?.data?.items) {
+ categoriesData.data.items.forEach((cat: CourseCategory) => {
+ cats.push({ id: cat.id, name: cat.category_name });
+ });
+ }
+ return cats;
+ }, [categoriesData]);
+
+ // Helper function to convert UI price range to API format
+ const getPriceRangeForApi = useCallback((priceRange: string): string | undefined => {
+ switch (priceRange) {
+ case 'Under ₹20,000':
+ return '0-20000';
+ case '₹20,000 - ₹35,000':
+ return '20000-35000';
+ case '₹35,000 - ₹50,000':
+ return '35000-50000';
+ case 'Over ₹50,000':
+ return '50000-999999';
+ default:
+ return undefined;
+ }
+ }, []);
+
+ // Helper function to convert UI duration to API format
+ const getDurationForApi = useCallback((duration: string): string | undefined => {
+ switch (duration) {
+ case 'Under 6 hours':
+ return '0-6';
+ case '6-10 hours':
+ return '6-10';
+ case '10-15 hours':
+ return '10-15';
+ case 'Over 15 hours':
+ return '15-999';
+ default:
+ return undefined;
+ }
+ }, []);
+
+ // Helper function to convert UI rating to API format
+ const getRatingForApi = useCallback((rating: string): number | undefined => {
+ switch (rating) {
+ case '4.5+ Stars':
+ return 4.5;
+ case '4.0+ Stars':
+ return 4.0;
+ case '3.5+ Stars':
+ return 3.5;
+ default:
+ return undefined;
+ }
+ }, []);
+
+ // Helper function to convert sort option to API format
+ const getSortByForApi = useCallback((sort: string): string | undefined => {
+ switch (sort) {
+ case 'Most Popular':
+ return 'popular';
+ case 'newest':
+ return 'newest';
+ case 'title':
+ return 'title_asc';
+ case 'price_low':
+ return 'price_asc';
+ case 'price_high':
+ return 'price_desc';
+ case 'rating':
+ return 'rating_desc';
+ case 'duration':
+ return 'duration_asc';
+ default:
+ return undefined;
+ }
+ }, []);
+
+ // Build API filters based on current UI state
+ const apiFilters: GetCoursesParams = useMemo(() => {
+ const filters: GetCoursesParams = {
+ limit: 100,
+ offset: 0,
+ status: 'publish'
+ };
+
+ // Category filter
+ if (selectedCategoryId) {
+ filters.course_category = [selectedCategoryId];
+ }
+
+ // Search query
+ if (debouncedSearchTerm) {
+ filters.search_query = debouncedSearchTerm;
+ }
+
+ // Price range
+ const apiPriceRange = getPriceRangeForApi(selectedPriceRange);
+ if (apiPriceRange) {
+ filters.price_range = apiPriceRange;
+ }
+
+ // Duration range
+ const apiDurationRange = getDurationForApi(selectedDuration);
+ if (apiDurationRange) {
+ filters.duration_range = apiDurationRange;
+ }
+
+ // Rating
+ const apiRating = getRatingForApi(selectedRating);
+ if (apiRating !== undefined) {
+ filters.min_rating = apiRating;
+ }
+
+ // Sort by
+ const apiSortBy = getSortByForApi(sortBy);
+ if (apiSortBy) {
+ filters.sort_by = apiSortBy;
+ }
+
+ return filters;
+ }, [
+ selectedCategoryId,
+ debouncedSearchTerm,
+ selectedPriceRange,
+ selectedDuration,
+ selectedRating,
+ sortBy,
+ getPriceRangeForApi,
+ getDurationForApi,
+ getRatingForApi,
+ getSortByForApi
+ ]);
+
+ // Fetch courses with API filters
+ const {
+ data: coursesData,
+ isLoading: coursesLoading,
+ isError,
+ isFetching // To show loading indicator while fetching
+ } = useGetCoursesQuery(apiFilters);
+
+ // Reset to page 1 when filters change
+ useEffect(() => {
+ setCurrentPage(1);
+ }, [
+ selectedCategoryId,
+ debouncedSearchTerm,
+ selectedPriceRange,
+ selectedDuration,
+ selectedRating,
+ sortBy
+ ]);
+
+ // Transform API response to course format
+ const courses = useMemo(() => {
+ if (!coursesData?.data?.items) return [];
+
+ return coursesData.data.items.map((course: Course) => ({
+ id: course.id,
+ title: course.course_name,
+ thumbnail: course.thumbnail_img || 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=250&fit=crop',
+ duration: `${course.total_duration || 0} hours`,
+ level: 'Intermediate',
+ format: course.retail_type === 'public' ? 'Cohort-based' : 'Self-paced',
+ rating: course.avg_rating || 4.5,
+ reviews: `${course.total_reviews || 0} review${(course.total_reviews || 0) === 1 ? '' : 's'}`,
+ category: course.course_category_name || 'General',
+ categoryId: course.course_category_xid || '',
+ description: course.course_desc || `Master ${course.course_name} with our comprehensive program.`,
+ price: formatPrice(course.best_value || 0),
+ originalPrice: formatPrice(course.price || 0),
+ course_status: course.course_status
+ }));
+ }, [coursesData]);
+
+ // Get total courses count from API response
+ const totalCoursesCount = coursesData?.data?.pagination_info?.total_count || 0;
+
+ // Paginate the courses (since API returns all courses based on filters, we paginate client-side)
+ const totalPages = Math.ceil(totalCoursesCount / coursesPerPage);
const startIndex = (currentPage - 1) * coursesPerPage;
- const currentCourses = filteredCourses.slice(startIndex, startIndex + coursesPerPage);
+ const currentCourses = courses.slice(startIndex, startIndex + coursesPerPage);
+
+ // Handle category change
+ const handleCategoryChange = (value: string) => {
+ const selectedCat = categories.find(cat => cat.name === value);
+ if (selectedCat) {
+ setSelectedCategoryName(selectedCat.name);
+ setSelectedCategoryId(selectedCat.id);
+ } else {
+ setSelectedCategoryName('All Categories');
+ setSelectedCategoryId('');
+ }
+ };
const clearAllFilters = () => {
setSearchTerm('');
- setSelectedCategory('All Categories');
- setSelectedLevel('All Levels');
- setSelectedFormat('All Formats');
+ handleCategoryChange('All Categories');
setSelectedPriceRange('All Prices');
setSelectedDuration('All Durations');
setSelectedRating('All Ratings');
@@ -308,14 +308,16 @@ export function LearningOnline() {
};
const hasActiveFilters = searchTerm ||
- selectedCategory !== 'All Categories' ||
- selectedLevel !== 'All Levels' ||
- selectedFormat !== 'All Formats' ||
+ selectedCategoryName !== 'All Categories' ||
selectedPriceRange !== 'All Prices' ||
selectedDuration !== 'All Durations' ||
selectedRating !== 'All Ratings';
- // Cart functions - using global cart context
+ // Cart functionality
+ const { addToCart } = useCart();
+ const [isCartPopupOpen, setIsCartPopupOpen] = useState(false);
+ const [recentlyAddedItem, setRecentlyAddedItem] = useState(null);
+
const handleAddToCart = (item: CartItem) => {
addToCart(item);
setRecentlyAddedItem(item);
@@ -327,9 +329,39 @@ export function LearningOnline() {
setRecentlyAddedItem(null);
};
+ const handleCourseClick = useCallback((courseId: string) => {
+ prefetchCourseById(courseId, { force: true });
+ navigateTo(`/course/${courseId}`);
+ }, [prefetchCourseById]);
+
+ // Show loading state
+ if (coursesLoading || categoriesLoading) {
+ return (
+
-
- {/* Framework Effectiveness */}
- {/*
-
+ );
+ })}
- {/* Services */}
-
-
- {/* Connector Arrow */}
-
+
-
+
+ {/* Connector Arrow */}
+ {idx < apiData.approach_section.approach_cards.length - 1 && (
+
+
+ {card.title}
+{card.description}
+
+ {card.bullets.map((bullet, bulletIdx) => (
+
+
+ {bullet}
+
+ ))}
+
+
+ )}
Premium Facilities
-- World-class accommodations and learning environments -
-
-
-
- Luxury Accommodations
-
-
- Learning Spaces
-
-
- Wellness Facilities
-
-
-
-
-
-
- {/* Technology */}
-
-
- {/* Connector Arrow */}
-
-
- Service Excellence
-- Exceptional hospitality and dining experiences -
-
-
-
- Gourmet Catering
-
-
- 24/7 Concierge
-
-
- Event Management
-
-
-
-
-
-
- {/* Customization */}
-
-
- {/* Connector Arrow */}
-
-
- Technology Infrastructure
-- Advanced technology for seamless learning delivery -
-
-
-
- High-Speed Internet
-
-
- AV Equipment
-
-
- Tech Support
-
-
-
-
-
-
- {/* Dedicated Support */}
-
-
- {/* Connector Arrow */}
-
-
- Flexible Customization
-- Adaptable spaces configured to your program needs -
-
-
-
- Room Configurations
-
-
- Custom Setups
-
-
- Branding Options
-
-
-
-
-
-
- {/* Expected Outcome */}
+ {/* Expected Outcome - Use API outcomes data */}
-
- {/* Connector Arrow */}
-
-
- Dedicated Support
-- Expert team ensuring flawless program execution -
-
-
-
- Event Coordinators
-
-
- Facility Staff
-
-
- Technical Team
-
-
-
-
-
Expected Outcome
+ {apiData.approach_section.outcomes && apiData.approach_section.outcomes[0] && (() => { + const OutcomeIcon = getIconComponent(apiData.approach_section.outcomes[0].icon_url); + return+ {apiData.approach_section.outcomes?.[0]?.title || "Expected Outcome"} +
- An immersive learning environment that enhances focus, engagement, and program effectiveness for transformational results. + {apiData.approach_section.outcomes?.[0]?.description || "Transformational executive leaders with strategic capability, executive presence, and proven business impact."}
-
-
+ {apiData.approach_section.outcomes?.[0]?.bullets?.slice(0, 2).map((bullet, idx) => (
+
+
+ )) || (
+ <>
+
+
+
+ )}
-
@@ -762,9 +733,9 @@ export function KautilyaFacility() {
-
-
- Facility Excellence Metrics
-- Our integrated campus approach delivers superior learning outcomes through exceptional environments. -
-
-
-
-
- 96%
- Guest Satisfaction Rating
+ {/* Framework Effectiveness - Stats Section */} + {apiData.stats_section && ( +
+
*/}
+ )}
+
- {apiData.stats_section.title}
++ {apiData.stats_section.description} +
-
-
-
-
- 92%
- Program Effectiveness Increase
-
-
-
-
- 89%
- Repeat Booking Rate
+
+ {apiData.stats_section.stat_cards.map((stat) => {
+ const IconComponent = getIconComponent(stat.icon_url);
+ return (
+
+
+ );
+ })}
+
+ {stat.value}
+ {stat.label}
+Complete Campus Experience
+{apiData.program_section.title}
- A comprehensive facility experience designed to maximize learning outcomes and participant satisfaction. + {apiData.program_section.description}
Measurable Facility Outcomes
+{apiData.impact_section.title}
- Organizations consistently report high satisfaction and improved program outcomes when using our premium facility. + {apiData.impact_section.description}
- {expectedOutcomes.map((outcome, index) => (
-
-
-
-
- ))}
+
- {/* 7. Client Examples / Testimonials - Hero Section Design */}
+ {/* 7. Client Examples / Testimonials */}
-
- {/*
- {outcome.metric}
-
*/}
- {outcome.category}
- -{outcome.description}
- {/*{outcome.category}
*/} -
+ {apiData.impact_section.impact_stats.map((stat) => {
+ const IconComponent = getIconComponent(stat.icon_url);
+ return (
+
+
+
+
+ );
+ })}
-
+
+
+ {stat.value}
+
+ {stat.description}
+{stat.label}
+
+
Additional Facility Benefits
-
-
- Premium Environment
-World-class facilities that enhance learning and networking
-
-
- Exceptional Service
-Dedicated support staff and personalized service excellence
-
-
+ {apiData.impact_section.impact_benefits.map((benefit) => {
+ const IconComponent = getIconComponent(benefit.icon_url);
+ return (
+ Strategic Location
-Convenient location with peaceful, focused learning environment
-
+
+ );
+ })}
+
+ {benefit.title}
+{benefit.description}
+
-
-
- {/* Content Container */}
-
- {/* CTA Content Block */}
-
);
}
\ No newline at end of file
diff --git a/src/components/LearningOnline.tsx b/src/components/LearningOnline.tsx
index ca3d425..558cedb 100644
--- a/src/components/LearningOnline.tsx
+++ b/src/components/LearningOnline.tsx
@@ -1,206 +1,55 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Button } from './ui/button';
-import { Badge } from './ui/badge';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
-import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
-import { Input } from './ui/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import {
- Play,
- Users,
- Clock,
- ChevronRight,
ChevronLeft,
- GraduationCap,
- MessageCircle,
- Zap,
- Video,
- Smartphone,
- Award,
- Building2,
- BookOpen,
- Star,
- Globe,
- Target,
- TrendingUp,
- Lightbulb,
- CheckCircle,
- ArrowRight,
- Calendar,
- Search,
+ ChevronRight,
+ Clock,
+ DollarSign,
Filter,
Grid,
List,
- X,
- DollarSign
+ Search,
+ Star,
+ Users,
+ X
} 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 { CourseCard } from './CourseCard';
-import { CartPopup, CartItem } from './CartPopup';
+import { useState, useEffect, useMemo, useCallback } from 'react';
import { useCart } from './CartContext';
+import { CartItem, CartPopup } from './CartPopup';
+import { CourseCard } from './CourseCard';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { navigateTo } from './Router';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import { Card } from './ui/card';
+import { Input } from './ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import {
+ courseApi,
+ useGetCoursesQuery,
+ Course,
+ GetCoursesParams,
+ useGetCourseCategoriesQuery,
+ CourseCategory
+} from '../redux/services/courseApi';
+import { useDebounce } from '../redux/hooks/useDebounce';
-// Course Categories
-const courseCategories = [
- 'Leadership Fundamentals',
- 'Decision Making & Strategy',
- 'Perspective & Risk',
- 'Communication & Influence',
- 'Change & Innovation'
-];
+// Helper function to parse rupee price from string (keep as is)
+const parsePriceToNumber = (priceStr: string | number): number => {
+ if (typeof priceStr === 'number') return priceStr;
+ const numericStr = priceStr.toString().replace(/[^0-9.-]/g, '');
+ return parseFloat(numericStr) || 0;
+};
-// Featured Courses Data - Updated with Rupee pricing
-const featuredCourses = [
- {
- id: '1',
- title: 'Strategic Leadership Foundations',
- thumbnail: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=250&fit=crop',
- duration: '12 hours',
- level: 'Intermediate',
- format: 'Self-paced',
- rating: 4.8,
- participants: '2,400+',
- category: 'Leadership Fundamentals',
- description: 'Master the core principles of strategic leadership and organizational vision.',
- price: '₹24,817',
- originalPrice: '₹33,117'
- },
- {
- id: '2',
- title: 'Data-Driven Decision Making',
- thumbnail: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=250&fit=crop',
- duration: '8 hours',
- level: 'Advanced',
- format: 'Cohort-based',
- rating: 4.9,
- participants: '1,800+',
- category: 'Decision Making & Strategy',
- description: 'Learn to make strategic decisions using data analytics and business intelligence.',
- price: '₹37,267',
- originalPrice: '₹45,567'
- },
- {
- id: '3',
- title: 'Risk Assessment & Management',
- thumbnail: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=250&fit=crop',
- duration: '10 hours',
- level: 'Intermediate',
- format: 'Self-paced',
- rating: 4.7,
- participants: '3,200+',
- category: 'Perspective & Risk',
- description: 'Develop expertise in identifying, analyzing, and mitigating organizational risks.',
- price: '₹28,967',
- originalPrice: '₹37,267'
- },
- {
- id: '4',
- title: 'Influential Communication',
- thumbnail: 'https://images.unsplash.com/photo-1556761175-b413da4baf72?w=400&h=250&fit=crop',
- duration: '6 hours',
- level: 'Beginner',
- format: 'Self-paced',
- rating: 4.8,
- participants: '5,100+',
- category: 'Communication & Influence',
- description: 'Master the art of persuasive communication and stakeholder engagement.',
- price: '₹16,517',
- originalPrice: '₹20,667'
- },
- {
- id: '5',
- title: 'Leading Innovation & Change',
- thumbnail: 'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=400&h=250&fit=crop',
- duration: '14 hours',
- level: 'Advanced',
- format: 'Cohort-based',
- rating: 4.9,
- participants: '1,950+',
- category: 'Change & Innovation',
- description: 'Drive organizational transformation and foster a culture of innovation.',
- price: '₹45,567',
- originalPrice: '₹53,867'
- },
- {
- id: '6',
- title: 'Digital Leadership Essentials',
- thumbnail: 'https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=250&fit=crop',
- duration: '9 hours',
- level: 'Intermediate',
- format: 'Self-paced',
- rating: 4.6,
- participants: '2,800+',
- category: 'Leadership Fundamentals',
- description: 'Navigate the digital transformation as a modern leader.',
- price: '₹23,157',
- originalPrice: '₹28,967'
- },
- {
- id: '7',
- title: 'Crisis Leadership Strategies',
- thumbnail: 'https://images.unsplash.com/photo-1584697964358-3e14ca57658b?w=400&h=250&fit=crop',
- duration: '7 hours',
- level: 'Advanced',
- format: 'Cohort-based',
- rating: 4.7,
- participants: '1,200+',
- category: 'Leadership Fundamentals',
- description: 'Navigate uncertainty and lead your team through challenging situations with confidence.',
- price: '₹33,117',
- originalPrice: '₹41,417'
- },
- {
- id: '8',
- title: 'Emotional Intelligence for Leaders',
- thumbnail: 'https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=400&h=250&fit=crop',
- duration: '5 hours',
- level: 'Beginner',
- format: 'Self-paced',
- rating: 4.9,
- participants: '4,300+',
- category: 'Communication & Influence',
- description: 'Develop emotional intelligence to enhance your leadership effectiveness.',
- 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',
- thumbnail: 'https://images.unsplash.com/photo-1560472355-536de3962603?w=400&h=250&fit=crop',
- duration: '11 hours',
- level: 'Advanced',
- format: 'Self-paced',
- rating: 4.8,
- participants: '1,500+',
- category: 'Perspective & Risk',
- description: 'Master advanced risk analysis techniques for strategic decision-making.',
- price: '₹39,757',
- originalPrice: '₹49,717'
- }
-];
+// Format price with Rupee symbol (keep as is)
+const formatPrice = (price: number): string => {
+ return `₹${price.toLocaleString('en-IN')}`;
+};
export function LearningOnline() {
+ // UI state
const [searchTerm, setSearchTerm] = useState('');
- const [selectedCategory, setSelectedCategory] = useState('All Categories');
- const [selectedLevel, setSelectedLevel] = useState('All Levels');
- const [selectedFormat, setSelectedFormat] = useState('All Formats');
+ const [selectedCategoryId, setSelectedCategoryId] = useState
- {/* Branded Tag */}
- navigateTo('/contact?topic=kautilya-facility')}
- ariaLabel="Schedule a Kautilya Facility tour"
+ {/* 8. CTA Section */}
+ {apiData.cta_section && (
+
+
-
+
+ - Ready to experience Kautilya Facility? - - {" "}Get in touch{" "} - - for world-class learning spaces. -
- - {/* CTA Button */} -
+
- - Connect with our facility experts to discuss hosting your next leadership program or strategic retreat at our world-class residential learning campus. -
+ +
+
+
+ )}
+ navigateTo(apiData.cta_section.cta_destination)}
+ ariaLabel={apiData.cta_section.cta_text}
+ />
+ {apiData.cta_section.description && (
+
+ + {apiData.cta_section.text} + + {" "}Get in touch{" "} + + to schedule your facility tour. +
++ {apiData.cta_section.description} +
+ )} +
+
+ );
+ }
+
+ // Show error state
+ if (isError) {
+ return (
+
+
+
+ Loading courses...
+
+
+ );
+ }
+
return (
+
+ Error Loading Courses
+Failed to load courses. Please try again later.
+ +
- {/* Hero Banner – Digital Learning - Blog Style */}
+ {/* Hero Banner (keep as is) */}
- {/* Eyebrow Text */}
Discover Your Leadership
-
- {/* Sub Text */}
- {/* Search and Controls Section */}
+ {/* Search and Controls Section (keep as is) */}
(null);
const { addToCart } = useCart();
+ const {
+ data: courseDetailResponse,
+ isLoading,
+ isError
+ } = useGetcoursebyidQuery(courseId, {
+ skip: !courseId
+ });
+ const courseDetail = courseDetailResponse?.data;
+
+ const handleCourseClick = (courseId: string) => {
+ navigate(`/course/${courseId}`);
+ // Optionally scroll to top
+ window.scrollTo(0, 0);
+ };
+
+
+ // Add this with your other useState declarations
+ const [showCertificatePreview, setShowCertificatePreview] = useState(false);
// Sticky CTA logic
useEffect(() => {
@@ -386,15 +411,140 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
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 programme = useMemo(() => {
+ if (!courseDetail) return mockProgrammeData;
+
+ const bestValue = Number(courseDetail.best_value ?? 0);
+ const originalValue = Number(courseDetail.price ?? 0);
+ const computedPrice = formatIndianPrice(bestValue);
+ const computedOriginalPrice =
+ originalValue > 0 && originalValue !== bestValue
+ ? formatIndianPrice(originalValue)
+ : undefined;
+
+ return {
+ ...mockProgrammeData,
+ id: courseDetail.id,
+ title: courseDetail.course_name || mockProgrammeData.title,
+ subtitle: courseDetail.course_desc || mockProgrammeData.subtitle,
+ duration: courseDetail.duration || mockProgrammeData.duration,
+ // level: courseDetail.retail_type === 'public' ? 'Public' : 'Private',
+ // format: courseDetail.retail_type === 'public' ? 'Cohort-based' : 'Self-paced',
+ price: computedPrice,
+ originalPrice: computedOriginalPrice,
+ methodologyDesc: courseDetail.our_methodology_desc,
+ reviewCount: courseDetail.total_reviews || 0,
+ rating: Number(courseDetail.avg_rating ?? 0),
+ published: courseDetail.course_status === 'publish',
+ spotsLeft: courseDetail.total_lessons || mockProgrammeData.spotsLeft,
+ maxCapacity: Math.max(courseDetail.total_lessons || 0, mockProgrammeData.maxCapacity),
+ thumbnail: courseDetail.thumbnail_img || mockProgrammeData.thumbnail,
+ badges: [
+ courseDetail.course_category_name,
+ courseDetail.retail_type === 'public' ? 'Public' : 'Private',
+ courseDetail.is_certificate_available ? 'Certified' : 'Non-Certified'
+ ].filter(Boolean),
+ previewVideoUrl:
+ courseDetail.reviews.find((review) => review.video_url)?.video_url ||
+ mockProgrammeData.previewVideoUrl,
+ highlights:
+ courseDetail.course_learning_outcomes.slice(0, 5).map((item) => item.title) ||
+ mockProgrammeData.highlights,
+ deliveryMethods: courseDetail.modules.length
+ ? courseDetail.modules.map((module) => module.module_name)
+ : mockProgrammeData.deliveryMethods,
+ credentials:
+ courseDetail.course_certificate?.program_title ||
+ courseDetail.course_certificate?.institution_name ||
+ mockProgrammeData.credentials,
+ targetROI: courseDetail.our_methodology_desc || mockProgrammeData.targetROI
+ };
+ }, [courseDetail]);
+
+ const outcomes = useMemo(() => {
+ if (!courseDetail?.course_learning_outcomes?.length) return mockOutcomes;
+
+ return courseDetail.course_learning_outcomes.map((item) => ({
+ title: item.title,
+ description: item.description
+ }));
+ }, [courseDetail]);
+
+ const curriculum = useMemo(() => {
+ if (!courseDetail?.modules?.length) return mockCurriculum;
+
+ return courseDetail.modules.map((module, index) => ({
+ moduleNumber: index + 1,
+ title: module.module_name,
+ duration: `${module.lessons.length} lesson${module.lessons.length === 1 ? '' : 's'}`,
+ deliveryStyle: module.lessons.some((lesson) => !lesson.is_lock_lesson) ? 'Self-Paced' : 'Locked',
+ topics: module.lessons.map((lesson) => lesson.lesson_title)
+ }));
+ }, [courseDetail]);
+
+ const faculty = useMemo(() => {
+ if (!courseDetail?.course_facilities?.length) return mockFaculty;
+
+ return courseDetail.course_facilities.map((member) => ({
+ id: member.id,
+ name: member.faculty_name,
+ title: member.faculty_title,
+ organization: member.faculty_organization_name,
+ bio: member.faculty_biography,
+ image: '',
+ linkedinUrl: '',
+ credentials: member.credentials.map((credential) => credential.credential_name),
+ expertise: member.expertises || []
+ }));
+ }, [courseDetail]);
+
+ const testimonials = useMemo(() => {
+ if (!courseDetail?.reviews?.length) return mockTestimonials;
+
+ return courseDetail.reviews.map((review) => ({
+ id: review.id,
+ type: review.video_url ? 'video' : 'text',
+ name: review.reviewer_name,
+ title: review.bio || 'Learner Review',
+ company: courseDetail.course_category_name,
+ content: review.comment,
+ videoThumbnail: programme.thumbnail,
+ videoUrl: review.video_url || '',
+ rating: review.rating,
+ programmeCompleted: courseDetail.course_name
+ }));
+ }, [courseDetail, programme.thumbnail]);
+
+ const faqs = useMemo(() => {
+ if (!courseDetail?.course_faqs?.length) return mockFAQs;
+ return courseDetail.course_faqs;
+ }, [courseDetail]);
+
+ const audienceSegments = useMemo(() => {
+ if (!courseDetail?.course_target_audiences?.length) return mockAudienceSegments;
+
+ return courseDetail.course_target_audiences.map((segment, index) => ({
+ title: segment.title,
+ description: segment.description,
+ icon: index % 3 === 0
+ ?
@@ -533,8 +710,12 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
+
-
+
{/* Price Display */}
DIGITAL LEARNING PLATFORM
-
- {/* Main Header */}
Discover Your Leadership
Potential Online
-
- {/* Sub Text */}
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. @@ -371,11 +398,10 @@ export function LearningOnline() {
- {/* Search Bar */}
);
-}
\ No newline at end of file
+}
diff --git a/src/components/ProgrammeDetail.tsx b/src/components/ProgrammeDetail.tsx
index 69c20cc..23e33f4 100644
--- a/src/components/ProgrammeDetail.tsx
+++ b/src/components/ProgrammeDetail.tsx
@@ -1,48 +1,43 @@
-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,
+import {
+ Award,
BookOpen,
+ CheckCircle,
+ Clock,
+ Download,
+ ExternalLink,
+ Lightbulb,
+ MessageCircle,
+ Play,
+ Star,
Target,
TrendingUp,
- Lightbulb,
- ArrowRight,
- ExternalLink,
- Quote,
- X,
- AlertCircle
+ User,
+ Users,
+ X
} from 'lucide-react';
import { motion } from 'motion/react';
-import { navigateTo } from './Router';
-import { ImageWithFallback } from './figma/ImageWithFallback';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { toast } from 'sonner';
+import { useGetcoursebyidQuery } from '../redux/services/courseApi';
import { BrandedTag } from './about/BrandedTag';
-import { PrimaryCTAButton } from './PrimaryCTAButton';
import { useCart } from './CartContext';
-import { toast } from 'sonner@2.0.3';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { PrimaryCTAButton } from './PrimaryCTAButton';
+import { navigateTo } from './Router';
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+import {
+ Dialog,
+ DialogContent,
+ DialogOverlay,
+ DialogPortal
+} from './ui/dialog';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
// Mock data structure matching API contracts
const mockProgrammeData = {
@@ -54,6 +49,9 @@ const mockProgrammeData = {
format: 'Hybrid',
price: '₹2,50,000',
originalPrice: '₹3,00,000',
+ methodologyDesc: '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',
+ reviewCount: 24,
+ rating: 4.8,
currency: 'INR',
published: true,
enrollmentStatus: 'open', // open, closed, enrolled, waitlist
@@ -350,11 +348,18 @@ const mockRelatedProgrammes = [
}
];
+const formatIndianPrice = (value: string | number | null | undefined) => {
+ const amount = Number(value ?? 0);
+ return `₹${amount.toLocaleString('en-IN')}`;
+};
+
interface ProgrammeDetailProps {
slug?: string;
}
export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
+ const params = useParams<{ slug: string }>();
+ const courseId = slug || params.slug || '';
const [activeTab, setActiveTab] = useState('overview');
const [selectedFaculty, setSelectedFaculty] = useState(0);
const [showVideoModal, setShowVideoModal] = useState(false);
@@ -370,8 +375,28 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
designation: ''
});
+ const navigate = useNavigate();
+
const heroRef = useRef
-
-
-
-
- {/* Format Filter */}
-
-
-
- navigateTo(`/course/${course.id}`)}
+ onClick={() => handleCourseClick(course.id)}
>
@@ -702,15 +693,18 @@ export function LearningOnline() {
- Showing {currentCourses.length} of {filteredCourses.length} courses
+ handleCourseClick(course.id)}
onAddToCart={handleAddToCart}
/>
@@ -632,7 +623,7 @@ export function LearningOnline() {
+ Showing {currentCourses.length} of {totalCoursesCount} courses
+ {isFetching && (
+ Updating results...
+ )}
{/* Courses Results */}
@@ -618,6 +608,7 @@ export function LearningOnline() {
@@ -688,7 +679,7 @@ export function LearningOnline() {
+
+ );
+ }
+
+ if (isError || !courseDetail) {
+ return (
+
+
+
+ Loading programme details...
+
+
+ );
+ }
+
// Handle 404 for unpublished programmes
if (!programme.published) {
return (
@@ -472,7 +649,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
+
+ Programme Not Found
++ We couldn't load the programme details right now. +
+ +
{/* Enhanced Sticky CTA Bar */}
{isSticky && (
-
{/* Programme Thumbnail */}
-
+
{/* Programme Details */}
-
{/* Quality Badge */}
-
@@ -533,8 +710,12 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
+
{programme.price}
@@ -561,18 +742,18 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
handleEnrollment()}
className="cta-text-black h-12 px-8 transition-all duration-200"
/>
{/* Urgency Indicator */}
{programme.spotsLeft <= 5 && programme.spotsLeft > 0 && (
-
-
+
{/* Subtle Bottom Accent Line */}
-
@@ -584,9 +765,9 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
-
+
{/* Left: Programme Info - REDESIGNED */}
-
+
{/* Keep as requested: BrandedTag (eyebrow text) */}
+ {/*
+ */}
+
+
{/* REDESIGNED: Professional Badges Section */}
@@ -637,9 +822,9 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
{programme.title}
- + {/* Keep as requested: Subtitle */}{programme.subtitle}
@@ -618,18 +799,22 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {Programme Features
{programme.badges.map((badge, index) => (
-
handleEnrollment()}
className="cta-text-black flex-1 justify-center"
/>
@@ -748,8 +933,213 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
{/* Credentials */}
+
+ {/* Certificate Preview Modal - Full View */}
+ {courseDetail?.course_certificate && (
+
+ )}
@@ -765,32 +1155,32 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
{/* Enhanced Tabs List */}
-
Overview
-
Curriculum
-
Faculty
-
Reviews
-
FAQ
@@ -808,7 +1198,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
This programme is designed for leaders at various stages of their career journey.
-
+
Certification
-{programme.credentials}
+ {courseDetail?.course_certificate ? ( +
+ {/* Certificate Available Message */}
+
+ ) : (
+ + Certificate Available upon completion +
+
+ {/* Certificate Preview */}
+
+ Certificate Preview:
+ + {/* Certificate Card - Exact design from image */} +
+
+ setShowCertificatePreview(true)}
+ >
+
+
+ {/* Title */}
+
+ Certificate of Completion
+ + {/* Body Text */} +This is to certify that
+ + [Learner Name] + +has successfully completed
++ {courseDetail.course_certificate.program_title || programme.title} +
+offered by
++ {courseDetail.course_certificate.institution_name || "Kautilya Leadership Centre"} +
+ + {/* Footer with Signature and Date */} +
+
+
+
+
+ {courseDetail.course_certificate.digital_signature_url ? (
+ 
+ ) : (
+
+ )}
+
+ Signature
+
+
+ Date
++ {new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })} +
+{programme.credentials}
+ )}
@@ -822,9 +1212,9 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
- {mockAudienceSegments.map((segment, index) => (
+ {audienceSegments.map((segment, index) => (
-
+
-
+
{/* Learning Structure Visual */}
-
+
@@ -853,7 +1243,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
This course will help you understand the role of leadership in shaping strategy.
-
+
@@ -867,7 +1257,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
{outcomes.map((outcome, index) => (
@@ -888,7 +1278,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
This course is designed to help you uncover dimensions through bite-size, easy to consume learning units.
-
+
@@ -910,7 +1300,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
@@ -954,7 +1344,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
A comprehensive curriculum designed to build strategic leadership capabilities through progressive modules.
-
+
{curriculum.map((module, index) => (
@@ -1002,7 +1392,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
Formulating Strategy is a theme that requires the exercise of leadership.
-
+
@@ -1013,19 +1403,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
@@ -1042,7 +1420,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
Learn from industry leaders and renowned academics with decades of executive experience.
Our Methodology
- 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. -
-- 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. -
-- 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. -
-- 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. -
-- This course will conclude offering you the perspectives and experiences of leaders when engaging with strategy and their learnings from it. + {programme.methodologyDesc}
{faculty.map((member, index) => (
@@ -1053,12 +1431,12 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
{member.name.split(' ').map(n => n[0]).join('')}
-
+
{member.name}
{member.title}
{member.organization}
{member.bio}
- +
{member.credentials.map((credential, credIndex) => (
@@ -1101,7 +1479,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
Hear from leaders who have transformed their careers through our programme.
-
+
{/* Landing Page Testimonials Design */}
{/* Testimonials Cards Container */}
@@ -1111,7 +1489,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
{testimonial.type === 'video' ? (
-
{
setSelectedVideo(testimonial.videoUrl!);
@@ -1137,10 +1515,10 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
alt={`${testimonial.name} video testimonial`}
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
/>
-
+
{/* Video Overlay with Gradient */}
-
+
{/* Play Button - Compact Design */}
-
-
+
{/* Star Rating */}
-
+
{/* Star Rating - Top Right */}
{[1, 2, 3, 4, 5].map((star) => (
@@ -1214,7 +1592,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
)}
{[1, 2, 3, 4, 5].map((star) => (
@@ -1265,7 +1643,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
Find answers to common questions about the programme structure, requirements, and enrollment process.
-
+
{faqs.map((faq, index) => (
@@ -1299,126 +1677,267 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
{/* Enhanced Related Programmes */}
-
-
-
-
{/* Background Image */}
-
-
+
-
-
- You Might Also Like
-- Explore related programmes to continue your leadership journey and expand your expertise across different domains. -
-
- {relatedProgrammes.map((related, index) => (
-
-
-
-
-
+
+ )}
+
{/* Focused CTA Banner - Blue Box Design */}
-
-
-
-
- {related.category}
-
-
- {related.level}
-
-
- - {related.title} -
-{related.description}
- - {/* Metadata Section */} -
-
-
- {/* Pricing Section */}
-
-
-
-
- {[1, 2, 3, 4, 5].map((star) => (
-
-
-
-
- {/* Action Buttons */}
-
- {related.price}
- ₹49,999
- Save 25%
-
-
-
-
-
+
{/* Blue Content Box */}
-
{/* Badge */}
-
+
-
-
+
{/* Headline */}
Ready to Lead?{' '} Join Today
- + {/* Description */}Transform your leadership potential with expert guidance and proven frameworks.
- + {/* CTA Button */}
Speak with our experts • Free consultation • Custom solutions
@@ -1483,7 +2002,7 @@ export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {