first commit
This commit is contained in:
priyanshuvish
829
src/components/VirtualSpaceSection.tsx
Normal file
829
src/components/VirtualSpaceSection.tsx
Normal file
@@ -0,0 +1,829 @@
|
||||
import React, { useState } from "react";
|
||||
import { motion } from "motion/react";
|
||||
import {
|
||||
Building,
|
||||
Users,
|
||||
Presentation,
|
||||
Coffee,
|
||||
Play,
|
||||
Calendar,
|
||||
ArrowRight,
|
||||
Eye,
|
||||
X,
|
||||
ChevronLeft,
|
||||
ChevronRight
|
||||
} from "lucide-react";
|
||||
import { ImageWithFallback } from "./figma/ImageWithFallback";
|
||||
import { BrandedTag } from "./about/BrandedTag";
|
||||
import { PrimaryCTAButton } from "./PrimaryCTAButton";
|
||||
import { Button } from "./ui/button";
|
||||
import { Input } from "./ui/input";
|
||||
import { Label } from "./ui/label";
|
||||
import { Textarea } from "./ui/textarea";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
|
||||
import { navigateTo } from "./Router";
|
||||
|
||||
// Calendar helper functions
|
||||
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 formatDate = (date: Date) => {
|
||||
return date.toISOString().split('T')[0];
|
||||
};
|
||||
|
||||
const isDateAvailable = (date: Date) => {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const selectedDate = new Date(date);
|
||||
selectedDate.setHours(0, 0, 0, 0);
|
||||
|
||||
// Available if it's today or in the future, and not a Sunday
|
||||
return selectedDate >= today && selectedDate.getDay() !== 0;
|
||||
};
|
||||
|
||||
const facilities = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Campus",
|
||||
description: "Our flagship campus offers comprehensive leadership development with state-of-the-art facilities.",
|
||||
icon: Building,
|
||||
image: "https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80",
|
||||
videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ", // Virtual tour video
|
||||
capacity: "50-80",
|
||||
features: ["State-of-the-art facilities", "Comprehensive programs", "Modern infrastructure"]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Classroom",
|
||||
description: "Interactive learning environment with flexible seating and cutting-edge educational technology.",
|
||||
icon: Users,
|
||||
image: "https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80",
|
||||
videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ", // Virtual tour video
|
||||
capacity: "20-30",
|
||||
features: ["Interactive learning", "Flexible seating", "Educational technology"]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Auditorium",
|
||||
description: "Premier presentation venue with theater-style seating and professional AV systems for impactful presentations.",
|
||||
icon: Presentation,
|
||||
image: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80",
|
||||
videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ", // Virtual tour video
|
||||
capacity: "100-150",
|
||||
features: ["Theater-style seating", "Professional AV systems", "Impactful presentations"]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Boardroom",
|
||||
description: "Executive meeting space designed for strategic discussions and high-level decision making with premium amenities.",
|
||||
icon: Coffee,
|
||||
image: "https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80",
|
||||
videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ", // Virtual tour video
|
||||
capacity: "8-15",
|
||||
features: ["Executive meeting space", "Strategic discussions", "Premium amenities"]
|
||||
}
|
||||
];
|
||||
|
||||
interface BookingFormData {
|
||||
companyName: string;
|
||||
contactName: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
role: string;
|
||||
teamSize: string;
|
||||
facilityType: string;
|
||||
preferredDate: string;
|
||||
additionalRequirements: string;
|
||||
}
|
||||
|
||||
interface FacilityCardProps {
|
||||
facility: typeof facilities[0];
|
||||
index: number;
|
||||
onBookNow: (facility: typeof facilities[0]) => void;
|
||||
}
|
||||
|
||||
function FacilityCard({ facility, index, onBookNow }: FacilityCardProps) {
|
||||
const IconComponent = facility.icon;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="relative group h-full overflow-hidden"
|
||||
initial={{ opacity: 0, y: 60 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: index * 0.15 }}
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
>
|
||||
{/* Background Image - Full Height */}
|
||||
<div className="absolute inset-0">
|
||||
<ImageWithFallback
|
||||
src={facility.image}
|
||||
alt={facility.name}
|
||||
className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"
|
||||
/>
|
||||
{/* Dark overlay with hover effect */}
|
||||
<div className="absolute inset-0 bg-black/60 transition-all duration-500 ease-out group-hover:bg-black/40" />
|
||||
</div>
|
||||
|
||||
{/* Content - Positioned at bottom of card */}
|
||||
<div className="relative z-10 h-full flex flex-col justify-end p-8 max-lg:p-6">
|
||||
{/* Icon */}
|
||||
<div className="flex justify-center mb-4">
|
||||
<div
|
||||
className="w-16 h-16 rounded-2xl flex items-center justify-center bg-white/20 backdrop-blur-sm border border-white/30"
|
||||
>
|
||||
<IconComponent
|
||||
className="w-8 h-8 text-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="text-3xl font-bold mb-3 text-white max-lg:text-2xl text-center">
|
||||
{facility.name}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-white/90 leading-relaxed mb-6 text-base max-lg:text-sm text-center max-lg:mb-5">
|
||||
{facility.description}
|
||||
</p>
|
||||
|
||||
{/* Book Now Button */}
|
||||
<div className="flex justify-center">
|
||||
<div className="hero-slide-button">
|
||||
<PrimaryCTAButton
|
||||
text="Book Now"
|
||||
onClick={() => onBookNow(facility)}
|
||||
ariaLabel={`Book ${facility.name} now`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
// 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<BookingFormData>({
|
||||
companyName: '',
|
||||
contactName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
role: '',
|
||||
teamSize: '',
|
||||
facilityType: facility?.name || '',
|
||||
preferredDate: '',
|
||||
additionalRequirements: ''
|
||||
});
|
||||
|
||||
// Calendar state
|
||||
const [currentMonth, setCurrentMonth] = useState(new Date());
|
||||
const [selectedDate, setSelectedDate] = useState<Date | null>(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(<div key={`empty-${i}`} className="h-6" />);
|
||||
}
|
||||
|
||||
// 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(
|
||||
<button
|
||||
key={day}
|
||||
type="button"
|
||||
onClick={() => handleDateSelect(date)}
|
||||
disabled={!isAvailable}
|
||||
className={`
|
||||
h-6 w-6 rounded text-xs font-medium transition-all duration-200 flex items-center justify-center
|
||||
${isSelected
|
||||
? 'bg-primary text-white shadow-sm'
|
||||
: isAvailable
|
||||
? 'hover:bg-blue-50 hover:text-primary text-gray-700'
|
||||
: 'text-gray-300 cursor-not-allowed'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: isSelected ? 'var(--color-primary)' : undefined,
|
||||
color: isSelected ? 'white' : undefined
|
||||
}}
|
||||
>
|
||||
{day}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-3">
|
||||
{/* Calendar Header */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigateMonth('prev')}
|
||||
className="p-1 rounded hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<ChevronLeft className="w-3 h-3 text-gray-600" />
|
||||
</button>
|
||||
<h4 className="text-sm font-semibold text-gray-900">
|
||||
{monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}
|
||||
</h4>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigateMonth('next')}
|
||||
className="p-1 rounded hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<ChevronRight className="w-3 h-3 text-gray-600" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Day Names */}
|
||||
<div className="grid grid-cols-7 gap-1 mb-2">
|
||||
{dayNames.map((day, index) => (
|
||||
<div key={`day-${index}`} className="h-6 flex items-center justify-center">
|
||||
<span className="text-xs font-medium text-gray-500">{day}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Calendar Grid */}
|
||||
<div className="grid grid-cols-7 gap-1 mb-3">
|
||||
{days}
|
||||
</div>
|
||||
|
||||
{/* Calendar Footer - Compact */}
|
||||
<div className="pt-2 border-t border-gray-200">
|
||||
<div className="flex items-center justify-center gap-3 text-xs text-gray-500">
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-2 h-2 rounded-full bg-primary"></div>
|
||||
<span>Selected</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-2 h-2 rounded-full border border-gray-300"></div>
|
||||
<span>Available</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (!isOpen || !facility) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/60 flex items-center justify-center p-2 lg:p-4 z-popup-modal virtual-space-modal-overlay"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="bg-white rounded-xl lg:rounded-2xl max-w-5xl w-full h-[85vh] overflow-hidden virtual-space-modal-container flex flex-col"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Modal Header - Compact */}
|
||||
<div
|
||||
className="flex items-center justify-between p-4 lg:p-6 border-b flex-shrink-0"
|
||||
style={{ backgroundColor: 'rgba(4, 4, 91, 0.02)' }}
|
||||
>
|
||||
<div className="flex items-center gap-3 lg:gap-4">
|
||||
<div
|
||||
className="w-10 h-10 lg:w-12 lg:h-12 rounded-lg flex items-center justify-center"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
>
|
||||
<facility.icon className="w-5 h-5 lg:w-6 lg:h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-body lg:text-subhead mb-1">
|
||||
{facility.name} Virtual Tour & Booking
|
||||
</h2>
|
||||
<p className="text-small text-muted">
|
||||
Capacity: {facility.capacity} people
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onClose}
|
||||
className="rounded-full w-8 h-8 lg:w-10 lg:h-10 p-0 hover:bg-gray-100"
|
||||
>
|
||||
<X className="w-4 h-4 lg:w-5 lg:h-5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Modal Content - Side by Side Layout No Scroll */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 flex-1 min-h-0">
|
||||
{/* Left Side - Virtual Tour */}
|
||||
<div className="p-3 lg:p-6 border-r border-gray-100 flex flex-col min-h-0">
|
||||
<div className="flex flex-col h-full space-y-2 lg:space-y-3">
|
||||
{/* Video Section - Compact */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Play className="w-4 h-4 text-primary" />
|
||||
<h3 className="text-small lg:text-body font-semibold">Virtual Tour</h3>
|
||||
</div>
|
||||
|
||||
{/* Virtual Tour Container - Developer-Ready for 360 Viewer or Video */}
|
||||
<div className="aspect-video rounded-lg overflow-hidden bg-gray-100 shadow-md relative">
|
||||
{/*
|
||||
DEVELOPER NOTE: Replace this container with your preferred 360 viewer
|
||||
Popular options:
|
||||
- A-Frame (https://aframe.io/) for WebXR 360 content
|
||||
- Three.js with 360 photo/video support
|
||||
- Pannellum (https://pannellum.org/) for 360 photos
|
||||
- Krpano (https://krpano.com/) for advanced 360 tours
|
||||
- React 360 (https://facebook.github.io/react-360/)
|
||||
|
||||
Current implementation: Fallback video iframe
|
||||
Replace the entire div below with your 360 viewer component
|
||||
*/}
|
||||
<div
|
||||
id={`virtual-tour-container-${facility.id}`}
|
||||
className="w-full h-full relative"
|
||||
data-facility-id={facility.id}
|
||||
data-facility-name={facility.name}
|
||||
data-tour-type="360-viewer" // Change to "video" for video fallback
|
||||
>
|
||||
{/* Fallback: Video iframe - Replace this entire section with 360 viewer */}
|
||||
<iframe
|
||||
src={facility.videoUrl}
|
||||
title={`${facility.name} Virtual Tour`}
|
||||
className="w-full h-full"
|
||||
allowFullScreen
|
||||
frameBorder="0"
|
||||
/>
|
||||
|
||||
{/* 360 Viewer Placeholder - Remove iframe above and uncomment/implement below */}
|
||||
{/*
|
||||
Example A-Frame 360 implementation:
|
||||
<a-scene
|
||||
embedded
|
||||
style={{width: '100%', height: '100%'}}
|
||||
vr-mode-ui="enabled: false"
|
||||
>
|
||||
<a-sky src={facility.panoramaUrl || facility.image} />
|
||||
<a-camera wasd-controls-enabled="false" look-controls="enabled: true" />
|
||||
</a-scene>
|
||||
*/}
|
||||
|
||||
{/* Alternative: Custom 360 Photo Viewer Container */}
|
||||
{/*
|
||||
<div className="w-full h-full" id={`pannellum-${facility.id}`}>
|
||||
// Pannellum or other 360 viewer initialization
|
||||
</div>
|
||||
*/}
|
||||
</div>
|
||||
|
||||
{/* Interactive Controls Overlay (optional) */}
|
||||
<div className="absolute bottom-2 left-2 right-2 flex justify-between items-center pointer-events-none">
|
||||
<div className="bg-black/20 backdrop-blur-sm rounded px-2 py-1">
|
||||
<span className="text-white text-xs">360° Virtual Tour</span>
|
||||
</div>
|
||||
<div className="bg-black/20 backdrop-blur-sm rounded px-2 py-1">
|
||||
<span className="text-white text-xs">Click & Drag to Explore</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Compact Info Section */}
|
||||
<div className="flex-1 min-h-0 space-y-2 lg:space-y-3">
|
||||
{/* About - Compact */}
|
||||
<div className="bg-gray-50 rounded-lg p-2 lg:p-3">
|
||||
<h4 className="text-small font-semibold mb-1">About This Space</h4>
|
||||
<p className="text-xs lg:text-small text-muted leading-relaxed line-clamp-2">
|
||||
{facility.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Features - Compact */}
|
||||
<div className="bg-gray-50 rounded-lg p-2 lg:p-3">
|
||||
<h4 className="text-small font-semibold mb-2">Key Features</h4>
|
||||
<div className="space-y-1">
|
||||
{facility.features.slice(0, 3).map((feature, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-1.5 h-1.5 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
/>
|
||||
<span className="text-xs lg:text-small">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Stats - Compact */}
|
||||
<div className="grid grid-cols-2 gap-2 p-2 lg:p-3 bg-blue-50 rounded-lg">
|
||||
<div className="text-center">
|
||||
<div className="text-xs lg:text-small font-semibold text-primary">Capacity</div>
|
||||
<div className="text-xs lg:text-small text-muted">{facility.capacity}</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-xs lg:text-small font-semibold text-primary">Zone</div>
|
||||
<div className="text-xs lg:text-small text-muted">Premium</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Button - Compact */}
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => navigateTo('/services/learning-facility')}
|
||||
className="w-full h-8 lg:h-10 text-xs lg:text-small"
|
||||
>
|
||||
<Building className="w-3 h-3 lg:w-4 lg:h-4 mr-1" />
|
||||
View All Facilities
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Booking Form */}
|
||||
<div className="p-4 lg:p-6 flex flex-col min-h-0 overflow-y-auto">
|
||||
<form onSubmit={handleFormSubmit} className="flex flex-col h-full">
|
||||
{/* Form Header */}
|
||||
<div className="flex items-center gap-3 mb-4 flex-shrink-0">
|
||||
<Calendar className="w-5 h-5 text-primary" />
|
||||
<h3 className="text-subhead">Book This Space</h3>
|
||||
</div>
|
||||
|
||||
{/* Form Content with Compact Spacing */}
|
||||
<div className="flex-1 min-h-0 space-y-4 overflow-y-auto pr-2 virtual-space-modal-scroll">
|
||||
{/* Company Information Section */}
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1">
|
||||
<h4 className="text-small font-medium text-primary">Company Information</h4>
|
||||
<div className="w-10 h-0.5 bg-primary"></div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label htmlFor="companyName" className="text-xs font-normal text-black mb-1 block">
|
||||
Company Name *
|
||||
</Label>
|
||||
<Input
|
||||
id="companyName"
|
||||
required
|
||||
value={bookingForm.companyName}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="contactName" className="text-xs font-normal text-black mb-1 block">
|
||||
Contact Person *
|
||||
</Label>
|
||||
<Input
|
||||
id="contactName"
|
||||
required
|
||||
value={bookingForm.contactName}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label htmlFor="email" className="text-xs font-normal text-black mb-1 block">
|
||||
Email Address *
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
required
|
||||
value={bookingForm.email}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="phone" className="text-xs font-normal text-black mb-1 block">
|
||||
Phone Number *
|
||||
</Label>
|
||||
<Input
|
||||
id="phone"
|
||||
required
|
||||
value={bookingForm.phone}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label htmlFor="role" className="text-xs font-normal text-black mb-1 block">
|
||||
Your Role *
|
||||
</Label>
|
||||
<Select value={bookingForm.role} onValueChange={(value) => updateFormField('role', value)}>
|
||||
<SelectTrigger className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200">
|
||||
<SelectValue placeholder="Role" className="text-gray-400 opacity-50" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="ceo">CEO/Founder</SelectItem>
|
||||
<SelectItem value="hr-director">HR Director</SelectItem>
|
||||
<SelectItem value="training-manager">Training Manager</SelectItem>
|
||||
<SelectItem value="operations-manager">Operations Manager</SelectItem>
|
||||
<SelectItem value="executive-assistant">Executive Assistant</SelectItem>
|
||||
<SelectItem value="other">Other</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="teamSize" className="text-xs font-normal text-black mb-1 block">
|
||||
Expected Team Size *
|
||||
</Label>
|
||||
<Select value={bookingForm.teamSize} onValueChange={(value) => updateFormField('teamSize', value)}>
|
||||
<SelectTrigger className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200">
|
||||
<SelectValue placeholder="Size" className="text-gray-400 opacity-50" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1-5">1-5 people</SelectItem>
|
||||
<SelectItem value="6-15">6-15 people</SelectItem>
|
||||
<SelectItem value="16-30">16-30 people</SelectItem>
|
||||
<SelectItem value="31-50">31-50 people</SelectItem>
|
||||
<SelectItem value="50+">50+ people</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Booking Details Section */}
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1">
|
||||
<h4 className="text-small font-medium text-primary">Select Your Date</h4>
|
||||
<div className="w-10 h-0.5 bg-primary"></div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{/* Selected Facility Info */}
|
||||
<div className="bg-blue-50 rounded p-2 border border-blue-100">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-6 h-6 rounded flex items-center justify-center"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
>
|
||||
<facility.icon className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900">{facility.name}</p>
|
||||
<p className="text-xs text-gray-600">Capacity: {facility.capacity} people</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Calendar Date Selection */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-normal text-black">
|
||||
Choose Your Preferred Date *
|
||||
</Label>
|
||||
{renderCalendar()}
|
||||
{selectedDate && (
|
||||
<div className="mt-2 p-2 bg-green-50 rounded border border-green-200">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-3 h-3 text-green-600" />
|
||||
<span className="text-xs font-medium text-green-800">
|
||||
Selected: {selectedDate.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Additional Requirements */}
|
||||
<div>
|
||||
<Label htmlFor="additionalRequirements" className="text-xs font-normal text-black mb-1 block">
|
||||
Additional Requirements
|
||||
</Label>
|
||||
<Textarea
|
||||
id="additionalRequirements"
|
||||
value={bookingForm.additionalRequirements}
|
||||
onChange={(e) => updateFormField('additionalRequirements', e.target.value)}
|
||||
placeholder="Special setup, AV equipment, catering..."
|
||||
rows={2}
|
||||
className="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 resize-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Actions */}
|
||||
<div className="flex flex-col sm:flex-row gap-2 pt-3 border-t border-gray-200 mt-3 flex-shrink-0">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!selectedDate}
|
||||
className="flex-1 h-9 text-sm font-medium bg-primary hover:bg-primary/90 disabled:bg-gray-300 disabled:cursor-not-allowed text-white border-0 rounded shadow-sm hover:shadow-md transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: selectedDate ? 'var(--color-primary)' : '#d1d5db',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
<Calendar className="w-3 h-3 mr-2" />
|
||||
{selectedDate ? 'Submit Request' : 'Select Date First'}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
className="px-4 h-9 text-sm font-normal border border-gray-300 hover:border-gray-400 hover:bg-gray-50 rounded transition-all duration-200"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function VirtualSpaceSection() {
|
||||
const [selectedFacility, setSelectedFacility] = useState<typeof facilities[0] | null>(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
const handleBookNow = (facility: typeof facilities[0]) => {
|
||||
setSelectedFacility(facility);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setIsModalOpen(false);
|
||||
setSelectedFacility(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden">
|
||||
{/* Full-Width Image Section with Overlaid Content */}
|
||||
<div className="relative h-screen min-h-[600px] max-h-[800px]">
|
||||
{/* Facility Cards Grid - Single Row, Side by Side */}
|
||||
<div className="h-full grid grid-cols-4 max-lg:grid-cols-2 max-md:grid-cols-1">
|
||||
{facilities.map((facility, index) => (
|
||||
<FacilityCard
|
||||
key={facility.id}
|
||||
facility={facility}
|
||||
index={index}
|
||||
onBookNow={handleBookNow}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Overlaid Content - Centered at top of image section */}
|
||||
<div className="absolute top-0 left-0 right-0 z-20 py-16 max-md:py-12 section-margin-x">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
{/* Branded Tag */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<BrandedTag
|
||||
text="Virtual Learning Environment"
|
||||
className="justify-center"
|
||||
variant="white"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Main Heading */}
|
||||
<motion.h2
|
||||
className="text-5xl font-bold leading-tight mb-4 max-lg:text-4xl max-md:text-3xl text-white"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
Experience Our Space Virtually
|
||||
</motion.h2>
|
||||
|
||||
{/* Subheading */}
|
||||
<motion.p
|
||||
className="text-lg leading-relaxed max-w-2xl mx-auto max-lg:text-base mb-6 text-white/90"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
Take a virtual walk through our state-of-the-art facility designed to inspire leadership excellence and foster collaborative learning.
|
||||
</motion.p>
|
||||
|
||||
{/* Main CTA Button - Explore Our Space */}
|
||||
<motion.div
|
||||
className="flex justify-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="hero-slide-button">
|
||||
<PrimaryCTAButton
|
||||
text="Explore Our Space"
|
||||
onClick={() => navigateTo('/services/learning-facility')}
|
||||
ariaLabel="Explore our virtual learning space and facilities"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional overlay for better text readability over images */}
|
||||
<div className="absolute top-0 left-0 right-0 h-80 bg-gradient-to-b from-black/70 via-black/40 to-transparent z-10" />
|
||||
</div>
|
||||
|
||||
{/* Booking Modal */}
|
||||
<BookingModal
|
||||
facility={selectedFacility}
|
||||
isOpen={isModalOpen}
|
||||
onClose={handleCloseModal}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user