From d2548f240835e3330249d94abe5e60beaacbdb60 Mon Sep 17 00:00:00 2001 From: priyanshuvish Date: Tue, 30 Sep 2025 16:53:39 +0530 Subject: [PATCH] add same modal in learning facility --- src/components/AboutUs.tsx | 4 +- src/components/LearningFacilityNew.tsx | 899 +++++++++++------- src/components/Services.tsx | 4 +- .../LeadershipPipelineDevelopment.tsx | 4 +- 4 files changed, 573 insertions(+), 338 deletions(-) diff --git a/src/components/AboutUs.tsx b/src/components/AboutUs.tsx index 429f556..378ed24 100644 --- a/src/components/AboutUs.tsx +++ b/src/components/AboutUs.tsx @@ -293,7 +293,7 @@ export function AboutUs() {
{/* Back Navigation */} -
+ {/*
-
+
*/}

diff --git a/src/components/LearningFacilityNew.tsx b/src/components/LearningFacilityNew.tsx index 9e9cfb7..7a06e99 100644 --- a/src/components/LearningFacilityNew.tsx +++ b/src/components/LearningFacilityNew.tsx @@ -1,6 +1,5 @@ import React, { useState, useEffect, useRef } from 'react'; import { motion } from 'motion/react'; -// import { Button } from '../ui/button'; import { Button } from './ui/button'; import { Badge } from './ui/badge'; import { Card, CardContent } from './ui/card'; @@ -15,6 +14,7 @@ import { BrandedTag } from './about/BrandedTag'; import { PrimaryCTAButton } from './PrimaryCTAButton'; import { TestimonialsSection } from './TestimonialsSection'; import { CTABannerSection } from './CTABannerSection'; +import kautilyaVirtualTourImage from '../assets/Kautilya.png'; import { ArrowRight, CheckCircle, @@ -292,6 +292,38 @@ interface BookingForm { additionalRequirements: string; } +// 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); @@ -304,6 +336,10 @@ export function LearningFacilityNew() { // 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 = [ { @@ -402,18 +438,7 @@ export function LearningFacilityNew() { }; const [currentTourStop, setCurrentTourStop] = useState(0); const [isVirtualTourActive, setIsVirtualTourActive] = useState(false); - const [isBookingModalOpen, setIsBookingModalOpen] = useState(false); const [expandedTourCard, setExpandedTourCard] = useState(null); - const [bookingForm, setBookingForm] = useState({ - companyName: '', - contactName: '', - email: '', - phone: '', - role: '', - teamSize: '', - facilityZone: '', - additionalRequirements: '' - }); useEffect(() => { console.log('LearningFacility component mounted'); // Debug log @@ -422,7 +447,7 @@ export function LearningFacilityNew() { // Listen for custom booking modal event from CTAPopupModal const handleOpenBookingModal = () => { console.log('Custom booking modal event received'); // Debug log - setIsBookingModalOpen(true); + handleBookNow(); }; window.addEventListener('openBookingModal', handleOpenBookingModal); @@ -431,7 +456,7 @@ export function LearningFacilityNew() { const urlParams = new URLSearchParams(window.location.search); if (urlParams.get('autoBooking') === 'true') { console.log('Auto-opening booking modal from URL parameter'); // Debug log - setTimeout(() => setIsBookingModalOpen(true), 100); + setTimeout(() => handleBookNow(), 100); } return () => { @@ -469,40 +494,15 @@ export function LearningFacilityNew() { setCurrentTourStop(index); }; - const handleBookingSubmit = (e: React.FormEvent) => { - e.preventDefault(); - console.log('Booking submitted:', bookingForm); - setIsBookingModalOpen(false); - setBookingForm({ - companyName: '', - contactName: '', - email: '', - phone: '', - role: '', - teamSize: '', - facilityZone: '', - additionalRequirements: '' - }); - - // Clean up URL parameter - const url = new URL(window.location.href); - url.searchParams.delete('autoBooking'); - window.history.replaceState({}, '', url.toString()); - - // Here you would typically send the booking request to your backend - alert('Booking request submitted successfully! We will contact you within 24 hours.'); + const handleBookNow = () => { + // Set the first facility as default for booking + setSelectedFacility(facilities[0]); + setIsModalOpen(true); }; - const handleBookingModalClose = (open: boolean) => { - console.log('Booking modal close triggered, open:', open); // Debug log - setIsBookingModalOpen(open); - - if (!open) { - // Clean up URL parameter when closing - const url = new URL(window.location.href); - url.searchParams.delete('autoBooking'); - window.history.replaceState({}, '', url.toString()); - } + const handleCloseModal = () => { + setIsModalOpen(false); + setSelectedFacility(null); }; return ( @@ -555,10 +555,7 @@ export function LearningFacilityNew() {

- - {/* Enhanced Our Story Timeline Section */}
@@ -735,7 +730,6 @@ export function LearningFacilityNew() {
- {/* Deluxe Living & Recreation Section */}
@@ -779,9 +773,6 @@ export function LearningFacilityNew() { {/* Carousel Container */}
- {/* Navigation Controls - Positioned at bottom right */} - - {/* Carousel Container */}
{/* Booking Modal */} - - - - Book Learning Facility - - Submit your facility booking request with your preferred dates, team size, and specific requirements. We'll contact you within 24 hours to confirm availability and discuss details. - - - -
-
-
- - setBookingForm({ ...bookingForm, companyName: e.target.value })} - required - /> -
-
- - setBookingForm({ ...bookingForm, contactName: e.target.value })} - required - /> -
-
- -
-
- - setBookingForm({ ...bookingForm, email: e.target.value })} - required - /> -
-
- - setBookingForm({ ...bookingForm, phone: e.target.value })} - required - /> -
-
- -
-
- - setBookingForm({ ...bookingForm, role: e.target.value })} - required - /> -
-
- - -
-
- -
- - -
- -
- -