@@ -386,7 +343,6 @@ export function AboutUs() {
);
}
- // Show error state if API call fails
if (isError) {
return (
@@ -480,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) => (
@@ -512,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 */}
@@ -632,7 +584,6 @@ export function AboutUs() {
{(aboutUsData?.stat_section && aboutUsData.stat_section.length > 0) ? (
aboutUsData.stat_section.map((stat, index) => (
@@ -670,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) */}
- {/* Centered Header Section */}
- {/* Team Members Grid - Using static team members with full profiles */}
+ {/* Team Members Grid - Using API data for outer display */}
- {staticTeamMembers.map((member, index) => (
- handleMemberClick(member)}
- >
-
- {/* Vertical Timeline Container */}
-
@@ -849,9 +808,7 @@ export function AboutUs() {
)}
- 
-
+ {apiTeamMembers.map((member, index) => {
+ const name = member.name_role.split(' - ')[0];
+ const role = member.name_role.split(' - ')[1] || 'Team Member';
- {/* Hover Overlay */}
-
-
-
handleMemberClick(member)}
+ >
+
-
+
-
+ 
{
+ (e.target as HTMLImageElement).src = 'https://ui-avatars.com/api/?name=' + encodeURIComponent(name) + '&background=04045B&color=fff&size=200';
}}
- >
- View Profile
+ />
+
+
+
+
+
+ View Profile
+
-
-
- ))}
+ {member.name}
-- {member.role} -
-
+
+
+ );
+ })}
{name}
++ {role} +
+ {/* Bio Section */} ++ {member.bio || "No bio available"} +
+
- {/* Vertical Line Background - Gray */}
- {/* Vertical Line Fill - Blue - Animated on Scroll */}
- {/* Map through phases from API - Create a copy before sorting */}
{[...(aboutUsData.methodology.phases || [])]
.sort((a, b) => (a.display_order || 0) - (b.display_order || 0))
.map((phase, phaseIndex) => (
- {/* Phase dot positioned absolutely */}
- {/* Column 1: Phase Label */}
- {/* Column 2: Main Heading */}
- {/* Column 3: Content - Description and Bullet Points */}
))}
- {/* Our Philosophy - Dynamic from API */}
{aboutUsData?.philosophy && (
);
-}
\ No newline at end of file
+}
diff --git a/src/components/KautilyaFacility.tsx b/src/components/KautilyaFacility.tsx
index 9e5f968..307aeea 100644
--- a/src/components/KautilyaFacility.tsx
+++ b/src/components/KautilyaFacility.tsx
@@ -43,111 +43,263 @@ import {
Wifi
} from 'lucide-react';
import { TestimonialsSection } from './TestimonialsSection';
+import { FullScreenLoader } from './FullScreenLoader';
+import { useGetServiceListQuery } from '../redux/services/sercicesApi';
-const targetAudience = [
- {
- title: "Corporate Training Teams",
- description: "Organizations seeking premium residential learning experiences for their leadership development programs",
- icon: Building,
- challenges: ["Facility booking complexity", "Quality accommodation needs", "Program logistics", "Cost management"]
- },
- {
- title: "Leadership Development Providers",
- description: "Training organizations and consultancies requiring world-class facilities for executive programs",
- icon: Users,
- challenges: ["Facility availability", "Technology requirements", "Catering quality", "Professional environment"]
- },
- {
- title: "Executive Teams & Boards",
- description: "Senior leadership teams planning strategic retreats and intensive development programs",
- icon: Target,
- challenges: ["Privacy requirements", "Executive-level facilities", "Strategic planning spaces", "Convenience needs"]
- }
-];
+// Types based on API response (same as LeadershipDevelopment)
+interface ServicePageData {
+ hero_section: {
+ id: string;
+ landing_page_type: string;
+ background_image_url: string;
+ background_image_alt_text: string;
+ headline: string;
+ subtext: string;
+ cta_text: string;
+ cta_destination: string;
+ };
+ overview: {
+ id: string;
+ title: string;
+ description: string;
+ highlight_text: string;
+ overview_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ audience_section: {
+ id: string;
+ title: string;
+ description: string;
+ audience_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ challenges: string[];
+ }>;
+ };
+ use_case_section: {
+ id: string;
+ title: string;
+ description: string;
+ use_case_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ highlight_text: string;
+ }>;
+ };
+ approach_section: {
+ id: string;
+ title: string;
+ description: string;
+ approach_cards: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ bullets: string[];
+ }>;
+ outcomes: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ bullets: string[];
+ }>;
+ };
+ stats_section: {
+ id: string;
+ title: string;
+ description: string;
+ stat_cards: Array<{
+ id: string;
+ value: string;
+ label: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ program_section: {
+ id: string;
+ title: string;
+ description: string;
+ program_phases: Array<{
+ phase: {
+ id: string;
+ phase_number: number;
+ title: string;
+ duration: string;
+ };
+ activities: Array<{
+ id: string;
+ phase_id: string;
+ text: string;
+ }>;
+ outcomes: Array<{
+ id: string;
+ phase_id: string;
+ text: string;
+ }>;
+ }>;
+ };
+ impact_section: {
+ id: string;
+ title: string;
+ description: string;
+ impact_stats: Array<{
+ id: string;
+ value: string;
+ description: string;
+ label: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ impact_benefits: Array<{
+ id: string;
+ title: string;
+ description: string;
+ icon_url: string;
+ accessible_label: string;
+ }>;
+ };
+ testimonial_section: Array<{
+ id: string;
+ profile_xid: string;
+ name: string;
+ designation: string;
+ content: string;
+ video_url: string | null;
+ display_order: number;
+ }>;
+ cta_section: {
+ id: string;
+ background_image_url: string;
+ text: string;
+ cta_text: string;
+ cta_destination: string;
+ description: string;
+ landing_page_type: string;
+ service_type: string;
+ };
+}
-const useCases = [
- {
- title: "Leadership Residential Programs",
- description: "When organizations need premium facilities for multi-day leadership development programs",
- icon: Home,
- scenario: "Executive development programs requiring 2-7 day residential experiences"
- },
- {
- title: "Strategic Planning Retreats",
- description: "When leadership teams need focused environments for strategic planning and decision-making",
- icon: Target,
- scenario: "Board meetings, strategic sessions, or executive team planning retreats"
- },
- {
- title: "Learning & Development Events",
- description: "When organizations require professional venues for training, workshops, and development events",
- icon: BookOpen,
- scenario: "Corporate training programs, workshops, or learning conferences"
- },
- {
- title: "Team Building & Culture Events",
- description: "When teams need inspiring environments for team building and cultural development activities",
- icon: Heart,
- scenario: "Team building events, culture workshops, or organizational celebrations"
- }
-];
+// Map API icons to Lucide icons (same mapping as LeadershipDevelopment)
+const getIconComponent = (iconUrl: string) => {
+ const iconMap: Record = {
+ '/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 (
+
@@ -894,7 +847,6 @@ export function AboutUs() {
- {/* Phase dot positioned absolutely */}
@@ -265,4 +265,4 @@ export function CourseCard({ course, onClick, className, onAddToCart }: CourseCa
- {/* Left Section: Heading */}
- {/* Right Section: Content */}
{aboutUsData.philosophy.title || "Our Philosophy"}
- {/* Philosophy Description */}
@@ -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/CourseCard.tsx b/src/components/CourseCard.tsx
index a6c06d9..42def13 100644
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@@ -22,7 +22,7 @@ export interface Course {
level: string;
format: string;
rating: number;
- participants: string;
+ reviews: string;
category: string;
description: string;
price: string;
@@ -147,7 +147,7 @@ export function CourseCard({ course, onClick, className, onAddToCart }: CourseCa
color: 'var(--color-gray-muted)',
fontWeight: '500'
}}>
- {course.participants}
+ {course.reviews}
{aboutUsData.philosophy.description}
- {/* Philosophy Points */} {aboutUsData.philosophy.points && aboutUsData.philosophy.points.length > 0 && (
{aboutUsData.philosophy.points.map((point, pointIndex) => (
@@ -1041,14 +986,10 @@ export function AboutUs() {
tagText="Client Success Stories"
/>
- {/* CTA Banner 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 (
- {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. -
+
+ );
+ }
+
+ 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 */}
(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 */}
-
- {/* 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 */}
- handleCourseClick(course.id)}
onAddToCart={handleAddToCart}
/>
@@ -609,7 +623,7 @@ export function LearningOnline() {
navigateTo(`/course/${course.id}`)}
+ onClick={() => handleCourseClick(course.id)}
>
@@ -761,4 +775,4 @@ export function LearningOnline() {
/>
);
-}
\ 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
-
- {/* 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 46f94d7..558cedb 100644
--- a/src/components/LearningOnline.tsx
+++ b/src/components/LearningOnline.tsx
@@ -23,7 +23,14 @@ 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 { useGetCoursesQuery, Course, GetCoursesParams, useGetCourseCategoriesQuery, CourseCategory } from '../redux/services/courseApi';
+import {
+ courseApi,
+ useGetCoursesQuery,
+ Course,
+ GetCoursesParams,
+ useGetCourseCategoriesQuery,
+ CourseCategory
+} from '../redux/services/courseApi';
import { useDebounce } from '../redux/hooks/useDebounce';
// Helper function to parse rupee price from string (keep as is)
@@ -50,6 +57,7 @@ export function LearningOnline() {
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
const [currentPage, setCurrentPage] = useState(1);
const coursesPerPage = 9;
+ const prefetchCourseById = courseApi.usePrefetch('getcoursebyid');
// Debounced search term to avoid too many API calls
const debouncedSearchTerm = useDebounce(searchTerm, 500);
@@ -260,12 +268,12 @@ export function LearningOnline() {
level: 'Intermediate',
format: course.retail_type === 'public' ? 'Cohort-based' : 'Self-paced',
rating: course.avg_rating || 4.5,
- participants: `${Math.floor(Math.random() * 5000) + 100}+`,
+ 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.price),
- originalPrice: formatPrice(course.price * 1.25),
+ price: formatPrice(course.best_value || 0),
+ originalPrice: formatPrice(course.price || 0),
course_status: course.course_status
}));
}, [coursesData]);
@@ -321,6 +329,11 @@ 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 (
@@ -595,6 +608,7 @@ export function LearningOnline() {
- {/* 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} +
+ )} +
@@ -665,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) {