diff --git a/src/App.tsx b/src/App.tsx index 9d99916..a4af1d4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -31,7 +31,6 @@ import { WebinarsPage } from "./components/WebinarsPage"; import HomePage from './pages/HomePage'; import { AboutUs } from './components/AboutUs'; import { Services } from './components/Services'; -import { LearningFacilityNew } from './components/LearningFacilityNew'; import { FooterNew } from './components/FooterNew'; import { Privacy } from "./pages/Privacy"; import { TermsCondition } from "./pages/TermsCondition"; @@ -39,6 +38,8 @@ import { FAQ } from "./pages/FAQ"; import { LeadershipPipelineDevelopment } from "./components/services/LeadershipPipelineDevelopment"; import { LeadershipDevelopment } from "./components/services/LeadershipDevelopment"; import { KautilyaFacility } from "./components/KautilyaFacility"; +import { LearningFacilityPage } from "./components/LearningFacilityPage"; +import WebinarDetail from "./components/WebinarDetail"; // import EnrollPlaceholder from "./components/EnrollPlaceholder"; // import ForgotPasswordPlaceholder from "./components/ForgotPasswordPlaceholder"; // import DashboardPlaceholder from "./components/DashboardPlaceholder"; @@ -85,6 +86,7 @@ export default function App() { {/* Webinars Pages */} } /> + } /> } /> {/* Learning Online */} @@ -115,7 +117,7 @@ export default function App() { } /> {/* Learning Facility */} - } /> + } /> {/* Privacy policy */} } /> } /> diff --git a/src/components/CTABannerSection.tsx b/src/components/CTABannerSection.tsx index f1c6dd9..7d10c2f 100644 --- a/src/components/CTABannerSection.tsx +++ b/src/components/CTABannerSection.tsx @@ -12,8 +12,8 @@ interface CTABannerSectionProps { cta_text: string; cta_destination: string; description: string; - landing_page_type: string; - service_type: string | null; + landing_page_type?: string; + service_type?: string | null; }; isLoading?: boolean; } diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index 42def13..71c3428 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -104,7 +104,10 @@ export function CourseCard({ course, onClick, className, onAddToCart }: CourseCa fontFamily: 'var(--font-family-base)' }} > - {course.title} + {course.title + ?.split(' ') + .slice(0, 3) + .join(' ') + (course.title.split(' ').length > 3 ? '...' : '')} {/* Course Description - Limited to 2 lines with ellipsis */} diff --git a/src/components/LearningFacilityNew.tsx b/src/components/LearningFacilityNew.tsx deleted file mode 100644 index fc44ab6..0000000 --- a/src/components/LearningFacilityNew.tsx +++ /dev/null @@ -1,2300 +0,0 @@ -import { - Bed, - BookOpen, - Briefcase, - Building, - Calendar, - Car, - CheckCircle, - ChevronLeft, - ChevronRight, - Coffee, - Dumbbell, - Heart, - Home, - Leaf, - Mail, - MapPin, - Monitor, - Network, - Phone, - Play, - Shield, - Sparkles, - Sun, - TreePine, - Trees, - Users, - Utensils, - UtensilsCrossed, - Wifi, - X -} from 'lucide-react'; -import { motion } from 'motion/react'; -import React, { useEffect, useRef, useState } from 'react'; -import kautilyaVirtualTourImage from '../assets/Kautilya.png'; -import { BrandedTag } from './about/BrandedTag'; -import { CTABannerSection } from './CTABannerSection'; -import { ImageWithFallback } from './figma/ImageWithFallback'; -import { PrimaryCTAButton } from './PrimaryCTAButton'; -import { navigateTo } from './Router'; -import { TestimonialsSection } from './TestimonialsSection'; -import { Button } from './ui/button'; -import { Card, CardContent } from './ui/card'; -import { Input } from './ui/input'; -import { Label } from './ui/label'; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select'; -import { Textarea } from './ui/textarea'; -import kautilyaLearningStory from '../assets/kautilya-learning-story.jpg'; -import campus1 from '../assets/Campus6.jpg'; -import campus2 from '../assets/Campus2.jpg'; -import campus3 from '../assets/Campus3.jpg'; -import campus4 from '../assets/Campus4.jpg'; -import campus5 from '../assets/Campus5.jpg'; -import campus6 from '../assets/Campus1.jpg'; -import classroom1 from '../assets/Classroom1.jpg'; -import classroom2 from '../assets/Classroom2.jpg'; -import classroom3 from '../assets/Classroom3.jpg'; -import classroom4 from '../assets/Classroom4.jpg'; -import classroom5 from '../assets/Classroom5.jpg'; -import expertSupportImage from '../assets/expert-support.jpg'; -import luxuryAccommodationImage from '../assets/luxury-accommodation.jpg'; -import fitnessCentreImage from '../assets/Fitness&Recreation-centre.jpg'; -import outdoorAmphitheaterImage from '../assets/outdoor-amphitheater.jpg'; -import diningexperienceImage from '../assets/dining-experience.jpg'; -import privateSpaceImage from '../assets/private-space.jpg'; -import executiveBoardroomImage from '../assets/exe-boardroom.jpg'; -import morningReflectionImage from '../assets/morning.jpg'; -import campusArialViewImage from '../assets/campus-arial-view.jpg'; -import { VirtualTour360 } from './VirtualTour360'; - -const facilityFeatures = [ - { - title: "Luxury Accommodation", - description: "Premium residential suites with hotel-standard amenities for extended stays", - icon: Bed, - image: luxuryAccommodationImage, - details: ["Private en-suite rooms", "Premium furnishing", "Air conditioning", "Garden views", "Room service"] - }, - { - title: "Fitness & Recreation Centre", - description: "State-of-the-art fitness facilities and recreational spaces for wellness", - icon: Dumbbell, - image: "https://images.unsplash.com/photo-1721394747060-7cfc57104f88?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmaXRuZXNzJTIwY2VudGVyJTIwZ3ltJTIwbW9kZXJufGVufDF8fHx8MTc1NjgyNzg1OXww&ixlib=rb-4.1.0&q=80&w=1080", - details: ["Modern gym equipment", "Yoga studio", "Sports lounge", "Walking track", "Recreational activities"] - }, - { - title: "Outdoor Amphitheater", - description: "Spectacular outdoor venue for large gatherings and presentations", - icon: TreePine, - image: "https://images.unsplash.com/photo-1715887377873-980352ddecc8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxvdXRkb29yJTIwYW1waGl0aGVhdGVyJTIwdmVudWV8ZW58MXx8fHwxNzU2ODk4OTY3fDA&ixlib=rb-4.1.0&q=80&w=1080", - details: ["Natural acoustics", "Tiered seating", "Scenic backdrop", "Weather protection", "Professional lighting"] - }, - { - title: "Gourmet Dining Experience", - description: "Exceptional culinary experiences with locally sourced ingredients", - icon: Utensils, - image: "https://images.unsplash.com/photo-1532270441355-095a26af8a99?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxnb3VybWV0JTIwcmVzdGF1cmFudCUyMGRpbmluZ3xlbnwxfHx8fDE3NTY4OTg5NzN8MA&ixlib=rb-4.1.0&q=80&w=1080", - details: ["Chef-prepared meals", "Local ingredients", "Dietary accommodations", "Fine dining atmosphere", "Wine pairings"] - }, - { - title: "Eco-Conscious Design", - description: "Sustainable architecture harmoniously integrated with natural surroundings", - icon: Leaf, - image: "https://images.unsplash.com/photo-1688981783835-67308623dccb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxlY28lMjBzdXN0YWluYWJsZSUyMGdyZWVuJTIwYnVpbGRpbmd8ZW58MXx8fHwxNzU2ODk4OTgxfDA&ixlib=rb-4.1.0&q=80&w=1080", - details: ["Green building design", "Sustainable materials", "Energy efficiency", "Natural lighting", "Minimal environmental impact"] - } -]; - -// Virtual Tour Data -const virtualTourStops = [ - { - id: 'training-amphitheater', - title: 'Training Amphitheater', - description: 'Inspire your audience in our largest training space featuring tiered seating and state-of-the-art presentation technology.', - image: 'https://images.unsplash.com/photo-1526045004414-3e7ed02f9ca1?w=1080&h=720&fit=crop', - capacity: '80-120 attendees', - keyHighlight: 'Large-Scale Training Excellence', - zone: 1, - features: [ - 'Tiered amphitheater seating', - 'Professional stage', - 'Advanced acoustics', - 'Multiple screens', - 'Live streaming capability' - ] - }, - { - id: 'collaboration-suites', - title: 'Collaboration Suites', - description: 'Foster deep connections and intensive learning in our intimate spaces perfect for small group work and coaching sessions.', - image: 'https://images.unsplash.com/photo-1592565276431-c27e6ad5f46a?w=1080&h=720&fit=crop', - capacity: '4-8 participants', - keyHighlight: 'Intimate Learning Environment', - zone: 2, - features: [ - 'Comfortable seating', - 'Natural light', - 'Privacy glass', - 'Dedicated workspace', - 'Tea/coffee station' - ] - }, - { - id: 'outdoor-pavilion', - title: 'Outdoor Learning Pavilion', - description: 'Connect with nature while learning in our unique outdoor space that combines fresh air with professional learning environments.', - image: 'https://images.unsplash.com/photo-1571624436279-b272adf752b5?w=800&h=600&fit=crop', - capacity: '20-40 participants', - keyHighlight: 'Nature-Connected Learning', - zone: 3, - features: [ - 'Weather-protected pavilion', - 'Garden views', - 'Fresh air environment', - 'Flexible seating', - 'Natural acoustics' - ] - }, - { - id: 'residential-quarters', - title: 'Residential Quarters', - description: 'Extend your learning journey with comfortable accommodation for multi-day programs featuring hotel-standard amenities.', - image: 'https://images.unsplash.com/photo-1590490360182-c33d57733427?w=800&h=600&fit=crop', - capacity: '40 single occupancy rooms', - keyHighlight: 'Premium Residential Experience', - zone: 4, - features: [ - 'Private en-suite rooms', - 'Work desk and chair', - 'High-speed WiFi', - 'Air conditioning', - 'Garden/courtyard views' - ] - }, - { - id: 'executive-boardroom', - title: 'Executive Boardroom', - description: 'Host high-level strategic discussions in our sophisticated boardroom designed for executive leadership meetings.', - image: 'https://images.unsplash.com/photo-1497366216548-37526070297c?w=1080&h=720&fit=crop', - capacity: '12-16 executives', - keyHighlight: 'Strategic Leadership Hub', - zone: 5, - features: [ - 'Premium boardroom table', - 'Executive seating', - '4K presentation displays', - 'Secure video conferencing', - 'Integrated sound system' - ] - }, - { - id: 'innovation-lab', - title: 'Innovation Lab', - description: 'Spark creativity and innovation in our flexible workspace designed for design thinking and collaborative problem-solving.', - image: 'https://images.unsplash.com/photo-1497366412874-3415097a27e7?w=1080&h=720&fit=crop', - capacity: '15-25 participants', - keyHighlight: 'Creative Collaboration Space', - zone: 6, - features: [ - 'Modular furniture setup', - 'Whiteboard walls', - 'Breakout alcoves', - 'Technology integration', - 'Flexible lighting' - ] - }, - { - id: 'wellness-retreat', - title: 'Wellness & Reflection Area', - description: 'Recharge and reflect in our tranquil wellness space designed for mindfulness and personal development sessions.', - image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=1080&h=720&fit=crop', - capacity: '8-15 participants', - keyHighlight: 'Mindful Leadership Development', - zone: 7, - features: [ - 'Meditation seating area', - 'Natural lighting', - 'Acoustic privacy', - 'Aromatherapy system', - 'Garden views' - ] - }, - { - id: 'digital-learning-studio', - title: 'Digital Learning Studio', - description: 'Experience cutting-edge digital learning with our high-tech studio equipped for virtual reality and interactive sessions.', - image: 'https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=1080&h=720&fit=crop', - capacity: '10-20 participants', - keyHighlight: 'Future of Learning Technology', - zone: 8, - features: [ - 'VR/AR capabilities', - 'Interactive displays', - 'Recording equipment', - 'Livestream setup', - 'Digital collaboration tools' - ] - } -]; - - -// Facility data for BookingModal -const facilities = [ - { - id: 'learning-facility', - name: 'Learning Facility', - description: 'A purpose-built campus for immersive leadership learning. State-of-the-art facilities designed to foster transformation, collaboration, and growth.', - capacity: '80-120 people', - icon: Building, - features: [ - 'State-of-the-art training halls', - 'Advanced AV systems', - 'Flexible seating arrangements', - 'High-speed connectivity', - 'Professional learning environment' - ], - videoUrl: 'https://example.com/virtual-tour' - } -]; - -// Booking Form Data Interface for BookingModal -interface BookingFormData { - companyName: string; - contactName: string; - email: string; - phone: string; - role: string; - teamSize: string; - facilityType: string; - preferredDate: string; - additionalRequirements: string; -} - -export function LearningFacilityNew() { - // Deluxe Living & Recreation Carousel state and functionality - const [currentSlide, setCurrentSlide] = useState(0); - const carouselRef = useRef(null); - - // Virtual Tour Carousel state and functionality - const [currentTourSlide, setCurrentTourSlide] = useState(0); - const tourCarouselRef = useRef(null); - - // Hero Background Image Carousel state and functionality - const [currentHeroBackground, setCurrentHeroBackground] = useState(0); - - // Booking Modal state - const [isModalOpen, setIsModalOpen] = useState(false); - const [selectedFacility, setSelectedFacility] = useState(null); - - // Conference/Classroom room background images array for hero section - const heroBackgroundImages = [ - { - src: campus5, - alt: "Modern Conference Room" - }, - { - src: campus4, - alt: "Executive Boardroom" - }, - { - src: campus3, - alt: "Business Training Classroom" - }, - { - src: campus2, - alt: "Corporate Seminar Hall" - }, - { - src: campus1, - alt: "Professional Workshop Venue" - } - ]; - - // Responsive carousel settings - const getCarouselSettings = () => { - if (typeof window !== 'undefined') { - if (window.innerWidth >= 1200) { - return { cardsPerView: 3, cardWidth: 33.333, slideWidth: 33.333 }; - } else if (window.innerWidth >= 768) { - return { cardsPerView: 2, cardWidth: 50, slideWidth: 50 }; - } else { - return { cardsPerView: 1, cardWidth: 100, slideWidth: 100 }; - } - } - return { cardsPerView: 3, cardWidth: 33.333, slideWidth: 33.333 }; - }; - - // Virtual tour carousel settings - const getTourCarouselSettings = () => { - if (typeof window !== 'undefined') { - if (window.innerWidth >= 1200) { - return { cardsPerView: 5, cardWidth: 20, slideWidth: 20 }; - } else if (window.innerWidth >= 768) { - return { cardsPerView: 3, cardWidth: 33.333, slideWidth: 33.333 }; - } else { - return { cardsPerView: 1, cardWidth: 100, slideWidth: 100 }; - } - } - return { cardsPerView: 5, cardWidth: 20, slideWidth: 20 }; - }; - - const [carouselSettings, setCarouselSettings] = useState(getCarouselSettings()); - const [tourCarouselSettings, setTourCarouselSettings] = useState(getTourCarouselSettings()); - const { cardsPerView, cardWidth, slideWidth } = carouselSettings; - const { cardsPerView: tourCardsPerView, cardWidth: tourCardWidth, slideWidth: tourSlideWidth } = tourCarouselSettings; - const maxSlide = Math.max(0, facilityFeatures.length - cardsPerView); - const maxTourSlide = Math.max(0, virtualTourStops.length - tourCardsPerView); - - - // Handle window resize - useEffect(() => { - const handleResize = () => { - setCarouselSettings(getCarouselSettings()); - setTourCarouselSettings(getTourCarouselSettings()); - setCurrentSlide(0); // Reset to first slide on resize - setCurrentTourSlide(0); // Reset tour carousel on resize - }; - - window.addEventListener('resize', handleResize); - return () => window.removeEventListener('resize', handleResize); - }, []); - - const scrollLeft = () => { - if (currentSlide > 0) { - setCurrentSlide(currentSlide - 1); - } - }; - - const scrollRight = () => { - if (currentSlide < maxSlide) { - setCurrentSlide(currentSlide + 1); - } - }; - - // Virtual Tour Carousel navigation - const scrollTourLeft = () => { - if (currentTourSlide > 0) { - setCurrentTourSlide(currentTourSlide - 1); - } - }; - - const scrollTourRight = () => { - if (currentTourSlide < maxTourSlide) { - setCurrentTourSlide(currentTourSlide + 1); - } - }; - const [currentTourStop, setCurrentTourStop] = useState(0); - const [isVirtualTourActive, setIsVirtualTourActive] = useState(false); - const [expandedTourCard, setExpandedTourCard] = useState(null); - - useEffect(() => { - console.log('LearningFacility component mounted'); // Debug log - window.scrollTo(0, 0); - - // Listen for custom booking modal event from CTAPopupModal - const handleOpenBookingModal = () => { - console.log('Custom booking modal event received'); // Debug log - handleBookNow(); - }; - - window.addEventListener('openBookingModal', handleOpenBookingModal); - - // Also check if we should auto-open the booking modal based on URL parameters - const urlParams = new URLSearchParams(window.location.search); - if (urlParams.get('autoBooking') === 'true') { - console.log('Auto-opening booking modal from URL parameter'); // Debug log - setTimeout(() => handleBookNow(), 100); - } - - return () => { - window.removeEventListener('openBookingModal', handleOpenBookingModal); - }; - }, []); - - // Hero background image carousel auto-rotation effect - useEffect(() => { - const interval = setInterval(() => { - setCurrentHeroBackground((prev) => (prev + 1) % heroBackgroundImages.length); - }, 3000); // Change background image every 3 seconds - - return () => clearInterval(interval); - }, [heroBackgroundImages.length]); - - const handleNextStop = () => { - if (currentTourStop < virtualTourStops.length - 1) { - setCurrentTourStop(currentTourStop + 1); - } - }; - - const handlePrevStop = () => { - if (currentTourStop > 0) { - setCurrentTourStop(currentTourStop - 1); - } - }; - - const handleJumpToStop = (index: number) => { - setCurrentTourStop(index); - }; - - const handleBookNow = () => { - // Set the first facility as default for booking - setSelectedFacility(facilities[0]); - setIsModalOpen(true); - }; - - const handleCloseModal = () => { - setIsModalOpen(false); - setSelectedFacility(null); - }; - - const [isVirtualTourOpen, setIsVirtualTourOpen] = useState(false); - const handleStartTour = () => { - setIsVirtualTourOpen(true); - }; - - return ( -
- - {/* Hero Section */} - {/* Service-style hero: full-bleed rotating background images with dark gradient, centered content */} -
- {/* Rotating Background images + overlay */} -
- {heroBackgroundImages.map((image, index) => ( -
- -
- ))} -
-
- - {/* Centered content */} -
-
-
-
-
- World-Class Facility -
- -

Learning Facility

- -

- A purpose-built campus for immersive leadership learning. State-of-the-art facilities - designed to foster transformation, collaboration, and growth. -

- -
- - - -
-
-
-
- - {/* Background Image Indicators */} -
-
-
- {/* Current Image Label */} -
-

{heroBackgroundImages[currentHeroBackground]?.alt}

-

KLC Learning Spaces

-
- - {/* Carousel Indicators */} -
- {heroBackgroundImages.map((_, index) => ( -
-
-
-
-
- - {/* The Kautilya Learning Story Section */} -
-
-
-
- {/* Image */} -
-
- -
-
-
- - {/* Content */} -
-
- - OUR STORY -
- -

- The Kautilya Learning Story -

- -

- From the vision of Kautilya in the 4th century BC, who discovered leadership in the most unexpected places, to the creation of a modern sanctuary for learning, our journey is inspired by timeless wisdom and a commitment to nurturing leaders of tomorrow. -

- -

- Set amidst the serene Sahyadri hills, just a short drive from Mumbai, Kautilya Leadership Learning Facility blends spirituality, world-class infrastructure, and a tranquil environment to create the perfect space for reflection, collaboration, and growth. -

- -

- Here, every corner tells a story — from sacred art that inspires self-discovery, to modern classrooms and collaborative spaces designed to spark innovation. -

-
-
-
-
-
- - {/* Why Kautilya Learning Facility Section */} -
-
-
- {/* Left: Sticky intro */} -
-
-
- - WHY CHOOSE US -
-

Why Kautilya Learning Facility?

-

- We've thoughtfully designed every element to create a space that supports deep learning and meaningful connections. Experience the difference of a facility built specifically for leadership transformation. -

-
-
- - {/* Right: Stacked cards with staggered on-scroll animation */} -
-
- {/* Card 1: Calm Environment */} - -
- {/* Background Image */} -
- - {/* 80% Black Overlay */} -
-
- - {/* Content */} -
- {/* Icon and Header Horizontal */} -
-
- -
-

- Surrounded by nature and designed for tranquility—perfect for focused leadership development. -

-
-
- - Natural surroundings -
-
- - Peaceful ambiance -
-
- - Distraction-free zones -
-
-
-
-
- - - {/* Card 2: Modern Tools */} - -
- {/* Background Image */} -
- - {/* 80% Black Overlay */} -
-
- - {/* Content */} -
- {/* Icon and Header Horizontal */} -
-
- -
-

- State-of-the-art digital learning tools integrated into comfortable, well-designed spaces. -

-
-
- - Advanced AV systems -
-
- - Interactive displays -
-
- - High-speed connectivity -
-
-
-
-
- - - {/* Card 3: Holistic Growth */} - -
- {/* Background Image */} -
- - {/* 80% Black Overlay */} -
-
- - {/* Content */} -
- {/* Icon and Header Horizontal */} -
-
- -
-

- Dedicated reflection spaces and collaboration zones supporting your complete development journey. -

-
-
- - Meditation areas -
-
- - Collaborative spaces -
-
- - Wellness amenities -
-
-
-
-
- - - {/* Card 4: Expert Support */} - -
- {/* Background Image */} -
- - {/* 80% Black Overlay */} -
-
- - {/* Content */} -
- {/* Icon and Header Horizontal */} -
-
- -
-

- Experienced facilitators and dedicated staff ensuring every learning experience exceeds expectations. -

-
-
- - Professional facilitators -
-
- - Dedicated staff -
-
- - Personalized attention -
-
-
-
-
- -
-
-
-
-
- - {/* Facility Features Grid Section */} -
-
-
- {/* Header with eyebrow and controls */} -
-
-
-
- WHAT WE OFFER -
-

Facility Features

-

- Every element thoughtfully designed to create the ideal learning environment for transformative experiences. -

-
- - {/* Simple controls that scroll the container */} -
- 01 / 05 -
- - -
-
-
- - {/* Carousel */} -
-
- -
-
-
-
-
- - {/* Experience Through Pictures - Image Gallery Section */} - {/* Experience Through Pictures - Card Design */} -
-
-
- {/* Header */} -
-
- - VISUAL TOUR -
- -

- Experience Through Pictures -

- -

- Explore our world-class facility spaces designed for transformative learning experiences. -

-
- - {/* Tab Navigation */} -
-
- {['Campus', 'Classroom', 'Auditorium', 'Boardroom'].map((tab) => ( - - ))} -
-
- - {/* Campus Tab Content - 1 Large + 4 Small Layout */} -
-
- {/* Large Image - Left Side */} -
- -
- -
-

Campus Aerial View

-

Kautilya Learning Centre

-
-
- - {/* 4 Small Cards - Right Side (2x2 Grid) */} -
- {/* Card 1 */} -
- -
- -
-

Outdoor Gardens

-

Kautilya Learning Centre

-
-
- - {/* Card 2 */} -
- -
- -
-

Green Spaces

-

Kautilya Learning Centre

-
-
- - {/* Card 3 */} -
- -
- -
-

Main Entrance

-

Kautilya Learning Centre

-
-
- - {/* Card 4 */} -
- -
- -
-

Study Areas

-

Kautilya Learning Centre

-
-
-
-
-
- - {/* Classroom Tab Content - 1 Large + 4 Small Layout */} -
-
- {/* Large Image - Left Side */} -
- -
- -
-

Modern Classroom

-

Kautilya Learning Centre

-
-
- - {/* 4 Small Cards - Right Side (2x2 Grid) */} -
- {/* Card 1 */} -
- -
- -
-

Interactive Space

-

Kautilya Learning Centre

-
-
- - {/* Card 2 */} -
- -
- -
-

Learning Tools

-

Kautilya Learning Centre

-
-
- - {/* Card 3 */} -
- -
- -
-

Collaboration Area

-

Kautilya Learning Centre

-
-
- - {/* Card 4 */} -
- -
- -
-

Technology Hub

-

Kautilya Learning Centre

-
-
-
-
-
- - {/* Auditorium Tab Content - 1 Large + 4 Small Layout */} -
-
- {/* Large Image - Left Side */} -
- -
- -
-

Main Auditorium Hall

-

Kautilya Learning Centre

-
-
- - {/* 4 Small Cards - Right Side (2x2 Grid) */} -
- {/* Card 1 */} -
- -
- -
-

Stage Area

-

Kautilya Learning Centre

-
-
- - {/* Card 2 */} -
- -
- -
-

Premium Seating

-

Kautilya Learning Centre

-
-
- - {/* Card 3 */} -
- -
- -
-

AV Technology

-

Kautilya Learning Centre

-
-
- - {/* Card 4 */} -
- -
- -
-

Lighting Setup

-

Kautilya Learning Centre

-
-
-
-
-
- - {/* Boardroom Tab Content - 1 Large + 4 Small Layout */} -
-
- {/* Large Image - Left Side */} -
- -
- -
-

Executive Boardroom

-

Kautilya Learning Centre

-
-
- - {/* 4 Small Cards - Right Side (2x2 Grid) */} -
- {/* Card 1 */} -
- -
- -
-

Conference Setup

-

Kautilya Learning Centre

-
-
- - {/* Card 2 */} -
- -
- -
-

Meeting Technology

-

Kautilya Learning Centre

-
-
- - {/* Card 3 */} -
- -
- -
-

Premium Amenities

-

Kautilya Learning Centre

-
-
- - {/* Card 4 */} -
- -
- -
-

Private Space

-

Kautilya Learning Centre

-
-
-
-
-
-
-
-
- - {/* A Day at Kautilya - Timeline Section */} -
-
-
-
-
- - DAILY EXPERIENCE -
- -

- A Day at Kautilya -

- -

- Experience the rhythm of learning, reflection, and growth at our facility. -

-
- - {/* Timeline */} -
- {/* Timeline Line - Desktop */} -
- -
- {/* Timeline Item 1 */} -
-
-
- Morning -
-

Morning reflection & mindfulness

-

- Begin your day with calm intention, setting the tone for focused learning and personal growth in our dedicated meditation spaces. -

-
- - {/* Center Dot */} -
- -
-
- -
-
-
- - {/* Timeline Item 2 */} -
-
-
- Mid-Morning -
-

Interactive classroom learning

-

- Engage in dynamic sessions with expert facilitators in modern, technology-enabled classrooms designed for maximum learning impact. -

-
- - {/* Center Dot */} -
- -
-
- -
-
-
- - {/* Timeline Item 3 */} -
-
-
- Afternoon -
-

Group collaboration & workshops

-

- Connect with peers in collaborative spaces designed to foster teamwork, creative thinking, and meaningful dialogue. -

-
- - {/* Center Dot */} -
- -
-
- -
-
-
- - {/* Timeline Item 4 */} -
-
-
- Evening -
-

Evening reflection in calm spaces

-

- Close your learning day with quiet contemplation, integrating insights and preparing for tomorrow's growth in serene outdoor or indoor reflection areas. -

-
- - {/* Center Dot */} -
- -
-
- -
-
-
-
-
-
-
-
- - {/* Booking Modal */} - - - {/* Virtual Tour Modal */} - setIsVirtualTourOpen(false)} - onBookNow={() => { - // Optional: auto-open booking modal after tour - handleBookNow(); - }} - /> - - {/* CTA Section - Using standardized home page CTA */} - - -
- ); -} - -// Utility functions for calendar -const getDaysInMonth = (date: Date) => { - return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); -}; - -const getFirstDayOfMonth = (date: Date) => { - return new Date(date.getFullYear(), date.getMonth(), 1).getDay(); -}; - -const isDateAvailable = (date: Date) => { - // Simple availability check - you can replace this with your actual logic - const today = new Date(); - today.setHours(0, 0, 0, 0); - return date >= today; -}; - -const formatDate = (date: Date) => { - return date.toISOString().split('T')[0]; -}; - -// Modal Component for Virtual Tour and Booking -function BookingModal({ - facility, - isOpen, - onClose -}: { - facility: typeof facilities[0] | null; - isOpen: boolean; - onClose: () => void; -}) { - const [bookingForm, setBookingForm] = useState({ - companyName: '', - contactName: '', - email: '', - phone: '', - role: '', - teamSize: '', - facilityType: facility?.name || '', - preferredDate: '', - additionalRequirements: '' - }); - - // Calendar state - const [currentMonth, setCurrentMonth] = useState(new Date()); - const [selectedDate, setSelectedDate] = useState(null); - - // Lock body scroll when modal is open - React.useEffect(() => { - if (isOpen) { - document.body.style.overflow = 'hidden'; - document.body.style.paddingRight = '15px'; // Prevent layout shift from scrollbar - } else { - document.body.style.overflow = ''; - document.body.style.paddingRight = ''; - } - - // Cleanup on unmount or when modal closes - return () => { - document.body.style.overflow = ''; - document.body.style.paddingRight = ''; - }; - }, [isOpen]); - - const handleFormSubmit = (e: React.FormEvent) => { - e.preventDefault(); - console.log('Booking form submitted:', bookingForm); - // Here you would typically send the form data to your backend - alert('Booking request submitted successfully! We will contact you soon.'); - onClose(); - }; - - const updateFormField = (field: keyof BookingFormData, value: string) => { - setBookingForm(prev => ({ ...prev, [field]: value })); - }; - - // Calendar functions - const handleDateSelect = (date: Date) => { - if (isDateAvailable(date)) { - setSelectedDate(date); - updateFormField('preferredDate', formatDate(date)); - } - }; - - const navigateMonth = (direction: 'prev' | 'next') => { - setCurrentMonth(prev => { - const newMonth = new Date(prev); - if (direction === 'prev') { - newMonth.setMonth(prev.getMonth() - 1); - } else { - newMonth.setMonth(prev.getMonth() + 1); - } - return newMonth; - }); - }; - - const renderCalendar = () => { - const daysInMonth = getDaysInMonth(currentMonth); - const firstDay = getFirstDayOfMonth(currentMonth); - const days = []; - const monthNames = [ - 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', - 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' - ]; - const dayNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S']; - - // Empty cells for days before the first day of the month - for (let i = 0; i < firstDay; i++) { - days.push(
); - } - - // Days of the month - for (let day = 1; day <= daysInMonth; day++) { - const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day); - const isAvailable = isDateAvailable(date); - const isSelected = selectedDate && - date.getFullYear() === selectedDate.getFullYear() && - date.getMonth() === selectedDate.getMonth() && - date.getDate() === selectedDate.getDate(); - - days.push( - - ); - } - - return ( -
- {/* Calendar Header */} -
- -

- {monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()} -

- -
- - {/* Day Names */} -
- {dayNames.map((day, index) => ( -
- {day} -
- ))} -
- - {/* Calendar Grid */} -
- {days} -
-
- ); - }; - - if (!isOpen || !facility) return null; - - return ( -
-
e.stopPropagation()} - > - {/* Modal Header - Compact */} -
-
-
- -
-
-

- Kautilya Leadership Centre -

-

- Capacity: {facility.capacity} people -

-
-
- -
- - {/* Modal Content - Side by Side Layout No Scroll */} -
- {/* Left Side - Virtual Tour */} -
-
- {/* Video Section - Compact */} -
-
- -

Virtual Tour

-
- - {/* Virtual Tour Container - Developer-Ready for 360 Viewer or Video */} -
-
- -
- - {/* Interactive Controls Overlay (optional) */} -
-
- 360° Virtual Tour -
-
- Click & Drag to Explore -
-
-
-
- - {/* Compact Info Section */} -
- {/* About - Compact */} -
-

About This Space

-

- {facility.description} -

-
- - {/* Features - Compact */} -
-

Key Features

-
- {facility.features.slice(0, 3).map((feature, index) => ( -
-
- {feature} -
- ))} -
-
- - {/* Quick Stats - Compact */} -
-
-
Capacity
-
{facility.capacity}
-
-
-
Zone
-
Premium
-
-
- - {/* Action Button - Compact */} - -
-
-
- - {/* Right Side - Booking Form */} -
-
- {/* Form Header */} -
- -

Book This Space

-
- - {/* Form Content with Compact Spacing */} -
- {/* Company Information Section */} -
-
-

Company Information

-
-
- -
-
-
- - updateFormField('companyName', e.target.value)} - placeholder="Company" - className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200 placeholder:text-gray-400 placeholder:opacity-50" - /> -
-
- - updateFormField('contactName', e.target.value)} - placeholder="Name" - className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200 placeholder:text-gray-400 placeholder:opacity-50" - /> -
-
- -
-
- - updateFormField('email', e.target.value)} - placeholder="email@company.com" - className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200 placeholder:text-gray-400 placeholder:opacity-50" - /> -
-
- - updateFormField('phone', e.target.value)} - placeholder="+91 98765 43210" - className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200 placeholder:text-gray-400 placeholder:opacity-50" - /> -
-
- -
-
- - -
-
- - -
-
-
-
- - {/* Booking Details Section */} -
-
-

Select Your Date

-
-
- -
- {/* Calendar Date Selection */} -
- - {renderCalendar()} - {selectedDate && ( -
-
- - - Selected: {selectedDate.toLocaleDateString('en-US', { - month: 'short', - day: 'numeric', - year: 'numeric' - })} - -
-
- )} -
- - {/* Additional Requirements */} -
- -