KLC/KLC-Website-Frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d3e301cbbb790c30d0a280438cc1b5eb128e16f7
KLC-Website-Frontend/src/components/LearningFacilityNew.tsx

1279 lines
69 KiB
TypeScript
Raw Normal View History

worked on the components new functionlity
2025-09-05 12:48:46 +05:30
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';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from './ui/dialog';
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 { ImageWithFallback } from './figma/ImageWithFallback';
import { navigateTo } from './Router';
import { BrandedTag } from './about/BrandedTag';
import { PrimaryCTAButton } from './PrimaryCTAButton';
import { TestimonialsSection } from './TestimonialsSection';
import { CTABannerSection } from './CTABannerSection';
import {
ArrowRight,
CheckCircle,
Calendar,
Download,
Building,
Monitor,
BookOpen,
Heart,
Briefcase,
Users,
Target,
Network,
MapPin,
Coffee,
Wifi,
Car,
Shield,
Play,
ChevronLeft,
ChevronRight,
Eye,
X,
Clock,
Star,
Mail,
Phone,
Globe,
Maximize2,
TreePine,
Bed,
Dumbbell,
Utensils,
Leaf
} from 'lucide-react';
const offerings = [
{
title: "Training Halls & Spaces",
description: "State-of-the-art training facilities designed for optimal learning experiences",
icon: Building,
features: ["4 fully-equipped halls", "Flexible seating arrangements", "Advanced AV systems", "Natural lighting"]
},
{
title: "Technology Infrastructure",
description: "Cutting-edge technology to support modern learning and collaboration",
icon: Monitor,
features: ["High-speed connectivity", "Interactive displays", "Video conferencing", "Digital whiteboards"]
},
{
title: "Learning Resources",
description: "Comprehensive resources and materials to enhance the learning experience",
icon: BookOpen,
features: ["Digital library access", "Learning materials", "Resource centers", "Study spaces"]
},
{
title: "Wellness & Recreation",
description: "Facilities focused on participant well-being and relaxation during programs",
icon: Heart,
features: ["Wellness areas", "Recreation spaces", "Quiet zones", "Outdoor areas"]
}
];
const targetAudience = [
{
title: "Corporate Teams",
description: "Organizations seeking immersive learning experiences for their leadership development programs",
icon: Briefcase,
characteristics: ["Team retreats", "Leadership programs", "Skills workshops", "Strategic planning"]
},
{
title: "Learning Groups",
description: "Educational institutions and learning organizations hosting intensive development sessions",
icon: Users,
characteristics: ["Educational programs", "Intensive workshops", "Collaborative learning", "Group development"]
},
{
title: "Professional Networks",
description: "Professional associations and networks organizing development events and conferences",
icon: Network,
characteristics: ["Professional development", "Networking events", "Industry conferences", "Skill building"]
}
];
const facilityFeatures = [
{
title: "Luxury Accommodation",
description: "Premium residential suites with hotel-standard amenities for extended stays",
icon: Bed,
image: "https://images.unsplash.com/photo-1664186771971-2eaca0576c6c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBob3RlbCUyMGFjY29tbW9kYXRpb258ZW58MXx8fHwxNzU2ODk4OTA3fDA&ixlib=rb-4.1.0&q=80&w=1080",
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"]
}
];
const amenities = [
{ name: "High-Speed Wi-Fi", icon: Wifi },
{ name: "Parking Facilities", icon: Car },
{ name: "Coffee Lounge", icon: Coffee },
{ name: "Security Services", icon: Shield },
{ name: "Recreation Areas", icon: Heart },
{ name: "Study Spaces", icon: BookOpen },
{ name: "Meeting Rooms", icon: Users },
{ name: "Tech Support", icon: Monitor }
];
// 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'
]
}
];
// Booking Form Interface
interface BookingForm {
companyName: string;
contactName: string;
email: string;
phone: string;
role: string;
teamSize: string;
facilityZone: string;
additionalRequirements: string;
}
export function LearningFacilityNew() {
// Deluxe Living & Recreation Carousel state and functionality
const [currentSlide, setCurrentSlide] = useState(0);
const carouselRef = useRef<HTMLDivElement>(null);
// Virtual Tour Carousel state and functionality
const [currentTourSlide, setCurrentTourSlide] = useState(0);
const tourCarouselRef = useRef<HTMLDivElement>(null);
// Hero Background Image Carousel state and functionality
const [currentHeroBackground, setCurrentHeroBackground] = useState(0);
// Conference/Classroom room background images array for hero section
const heroBackgroundImages = [
{
src: "https://images.unsplash.com/photo-1588865198054-c83788106132?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjBjb25mZXJlbmNlJTIwcm9vbSUyMGxhcmdlJTIwc3BhY2V8ZW58MXx8fHwxNzU2OTAyMzYyfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
alt: "Modern Conference Room"
},
{
src: "https://images.unsplash.com/photo-1613186145425-5bb4eca455d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxleGVjdXRpdmUlMjBib2FyZHJvb20lMjBtZWV0aW5nJTIwc3BhY2V8ZW58MXx8fHwxNzU2OTAyMzY2fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
alt: "Executive Boardroom"
},
{
src: "https://images.unsplash.com/photo-1752579664702-e6609516e21a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMHRyYWluaW5nJTIwY2xhc3Nyb29tJTIwbW9kZXJufGVufDF8fHx8MTc1NjkwMjM3MHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
alt: "Business Training Classroom"
},
{
src: "https://images.unsplash.com/photo-1718224326658-489bbfbeb2ca?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb3Jwb3JhdGUlMjBzZW1pbmFyJTIwaGFsbCUyMGF1ZGl0b3JpdW18ZW58MXx8fHwxNzU2OTAyMzc2fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
alt: "Corporate Seminar Hall"
},
{
src: "https://images.unsplash.com/photo-1655392032233-c95aedd27ad4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwcm9mZXNzaW9uYWwlMjB3b3Jrc2hvcCUyMHZlbnVlJTIwc3BhY2V8ZW58MXx8fHwxNzU2OTAyMzc5fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
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 [isBookingModalOpen, setIsBookingModalOpen] = useState(false);
const [expandedTourCard, setExpandedTourCard] = useState<string | null>(null);
const [bookingForm, setBookingForm] = useState<BookingForm>({
companyName: '',
contactName: '',
email: '',
phone: '',
role: '',
teamSize: '',
facilityZone: '',
additionalRequirements: ''
});
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
setIsBookingModalOpen(true);
};
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(() => setIsBookingModalOpen(true), 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 handleStartTour = () => {
setIsVirtualTourActive(true);
setCurrentTourStop(0);
};
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 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 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());
}
};
return (
<div className="min-h-screen" style={{ backgroundColor: '#F7F7FD' }}>
{/* Hero Section */}
{/* Service-style hero: full-bleed rotating background images with dark gradient, centered content */}
<section className="relative min-h-[90vh] flex flex-col" style={{ backgroundColor: '#FFFFFF' }}>
{/* Rotating Background images + overlay */}
<div className="absolute inset-0 z-0">
{heroBackgroundImages.map((image, index) => (
<div
key={index}
className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${index === currentHeroBackground ? 'opacity-100' : 'opacity-0'
}`}
>
<ImageWithFallback
src={image.src}
alt={image.alt}
className="w-full h-full object-cover"
/>
</div>
))}
<div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/70 to-black/60 z-10"></div>
</div>
{/* Centered content */}
<div className="relative z-20 flex-1 flex items-center">
<div className="container mx-auto section-margin-x">
<div className="text-center max-w-5xl mx-auto">
<div className="branded-tag-system-white mb-8 justify-center">
<div className="dot"></div>
<span className="text">World-Class Facility</span>
</div>
<h1 className="text-h1-white mb-6">Learning Facility</h1>
<p className="text-body-lg-white mb-8 max-w-2xl mx-auto">
A purpose-built campus for immersive leadership learning. State-of-the-art facilities
designed to foster transformation, collaboration, and growth.
</p>
<div className="flex flex-col sm:flex-row mb-12 justify-center items-center" style={{ gap: '30px' }}>
<PrimaryCTAButton
text="Take Virtual Tour"
onClick={handleStartTour}
ariaLabel="Take virtual tour"
className="primary-cta-button-blue cta-text-white"
/>
<Button
variant="outline"
onClick={() => {
console.log('Book Facility button clicked');
setIsBookingModalOpen(true);
}}
data-booking-trigger
className="management-dev-glassmorphic-btn text-body px-8 py-4 min-h-[52px] border transition-all duration-300"
style={{
fontFamily: 'var(--font-family-base)'
}}
aria-label="Book facility"
>
<Calendar className="w-5 h-5 mr-2" />
Book Facility
</Button>
</div>
</div>
</div>
</div>
{/* Background Image Indicators */}
<div className="relative z-20 border-t border-white/20 backdrop-blur-sm bg-black/20">
<div className="container mx-auto section-margin-x py-6">
<div className="flex justify-center items-center space-x-4">
{/* Current Image Label */}
<div className="bg-white/10 backdrop-blur-sm rounded-lg px-4 py-2 border border-white/20">
<p className="text-small-white font-medium">{heroBackgroundImages[currentHeroBackground]?.alt}</p>
<p className="text-small-white">KLC Learning Spaces</p>
</div>
{/* Carousel Indicators */}
<div className="flex space-x-2">
{heroBackgroundImages.map((_, index) => (
<button
key={index}
onClick={() => setCurrentHeroBackground(index)}
className={`w-2 h-2 rounded-full transition-all duration-300 ${index === currentHeroBackground
? 'bg-yellow-400 w-8'
: 'bg-white/40 hover:bg-white/60'
}`}
aria-label={`Go to ${heroBackgroundImages[index]?.alt}`}
/>
))}
</div>
</div>
</div>
</div>
</section>
{/* Enhanced Our Story Timeline Section */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="max-w-6xl mx-auto">
{/* Header */}
<div className="text-center mb-16">
<div className="branded-tag-system mb-6 justify-center">
<div className="dot"></div>
<span className="text">Journey Through Time</span>
</div>
<h2 className="text-h2 mb-6">
The Legacy of Leadership
</h2>
<p className="text-body-lg text-muted max-w-3xl mx-auto">
From ancient wisdom to modern excellence, discover the timeless journey that inspired the creation of our world-class leadership development center.
</p>
</div>
{/* Timeline Container */}
<div className="relative">
{/* Timeline Line */}
<div className="absolute left-1/2 transform -translate-x-0.5 w-0.5 h-full bg-gradient-to-b from-primary via-primary to-transparent opacity-30"></div>
{/* Timeline Items */}
<div className="space-y-16">
{[
{
era: "4th Century BC",
title: "Ancient Wisdom",
description: "In the 4th century BC, a teacher named Kautilya saw leadership potential in a young goat herd boy in Pataliputra, present day Patna, in the state of Bihar, India.",
icon: "📜",
side: "left"
},
{
era: "Today",
title: "Inspired Vision",
description: "He is our inspiration, as we set out to build a world class centre dedicated to leadership and learning in his namesake.",
icon: "🌟",
side: "right"
},
{
era: "Location",
title: "Scenic Sanctuary",
description: "'Kautilya' is built on two acres of land surrounded by the Sahyadri hills, and is about 90 minutes from the hustle and bustle of Mumbai and just off the Mumbai-Pune expressway.",
icon: "🏔️",
side: "left"
},
{
era: "Facilities",
title: "World-Class Infrastructure",
description: "Kautilya offers a world class learning facility with 57 residential rooms, 3 large modern state of the art learning spaces, an amphitheatre, 10 internationally themed discussion rooms, a gym, a sports lounge and a walking track.",
icon: "🏛️",
side: "right"
},
{
era: "Welcome",
title: "Sacred Entrance",
description: "As you enter Kautilya, a custom-made granite panel depicting Samudra Manthan welcomes you to your personal Manthan & Chinthan.",
icon: "🎭",
side: "left"
},
{
era: "Philosophy",
title: "Spiritual Foundation",
description: "At the discussion space, the Trimurti will welcome you with Tridevis and Arthanariswara, reminding you of the immense integrated power you possess.",
icon: "🕉️",
side: "right"
}
].map((item, index) => (
<motion.div
key={index}
initial={{ opacity: 0, x: item.side === 'left' ? -50 : 50 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }}
className={`relative flex items-center ${item.side === 'left' ? 'justify-start' : 'justify-end'}`}
>
{/* Timeline Content Card */}
<div className={`w-full max-w-md ${item.side === 'left' ? 'mr-8 lg:mr-16' : 'ml-8 lg:ml-16'}`}>
<div className="bg-white border border-gray-200 rounded-2xl p-6 hover:bg-gray-50 transition-all duration-300 shadow-sm">
{/* Era Badge */}
<div className="inline-flex items-center gap-2 px-3 py-1 bg-accent/20 text-primary rounded-full text-sm font-medium mb-4">
<span className="text-lg">{item.icon}</span>
{item.era}
</div>
{/* Content */}
<h3 className="text-h4 mb-3">{item.title}</h3>
<p className="text-body text-muted leading-relaxed">
{item.description}
</p>
</div>
</div>
{/* Timeline Dot */}
<div className="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-accent border-4 border-white rounded-full shadow-lg"></div>
{/* Era Line */}
<div className={`absolute ${item.side === 'left' ? 'right-1/2' : 'left-1/2'} top-1/2 transform -translate-y-1/2 w-8 h-0.5 bg-primary/60`}></div>
</motion.div>
))}
</div>
</div>
{/* Call to Action */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.8 }}
viewport={{ once: true }}
className="text-center mt-16"
>
<div className="bg-white border border-gray-200 rounded-2xl p-8 max-w-2xl mx-auto shadow-sm">
<h3 className="text-h3 mb-4">Experience the Legacy</h3>
<p className="text-body text-muted mb-6">
Step into a space where ancient wisdom meets modern leadership development,
designed to unlock your infinite potential.
</p>
<PrimaryCTAButton
text="Explore Our Facility"
onClick={handleStartTour}
ariaLabel="Explore our facility"
className="cta-text-black"
/>
</div>
</motion.div>
</div>
</div>
</section>
{/* Deluxe Living & Recreation Section */}
<section className="py-20" style={{ backgroundColor: 'var(--color-bg-white)' }}>
<div className="container mx-auto section-margin-x">
<div className="mb-12 relative max-w-7xl mx-auto">
<div className="flex-1 max-w-3xl">
<BrandedTag text="Deluxe Living & Recreation" />
<h2 className="text-h2 mb-4 leading-tight">
Facility <span className="text-primary">Features</span>
</h2>
<p className="text-body-lg text-muted leading-relaxed">
Every aspect of our facility is designed to enhance learning outcomes
and provide an exceptional experience for participants and facilitators.
</p>
</div>
{/* Navigation Controls - Bottom right positioning */}
<div className="absolute bottom-0 right-0 flex items-center gap-4">
<span className="text-body text-muted font-medium">
{String(currentSlide + 1).padStart(2, '0')} / {String(Math.ceil(facilityFeatures.length / cardsPerView)).padStart(2, '0')}
</span>
<div className="flex gap-2">
<button
onClick={scrollLeft}
disabled={currentSlide === 0}
className="w-12 h-12 rounded-lg border-2 border-gray-200 flex items-center justify-center hover:border-primary hover:bg-primary hover:text-white disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white disabled:hover:text-black transition-all duration-300"
aria-label="Previous facility features"
>
<ChevronLeft className="w-5 h-5" />
</button>
<button
onClick={scrollRight}
disabled={currentSlide >= maxSlide}
className="w-12 h-12 rounded-lg border-2 border-gray-200 flex items-center justify-center hover:border-primary hover:bg-primary hover:text-white disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white disabled:hover:text-black transition-all duration-300"
aria-label="Next facility features"
>
<ChevronRight className="w-5 h-5" />
</button>
</div>
</div>
</div>
{/* Carousel Container */}
<div className="relative max-w-7xl mx-auto">
{/* Navigation Controls - Positioned at bottom right */}
{/* Carousel Container */}
<div className="overflow-hidden" style={{ paddingBottom: '80px' }}>
<div
ref={carouselRef}
className="flex transition-transform duration-500 ease-in-out gap-6"
style={{ transform: `translateX(-${currentSlide * slideWidth}%)` }}
>
{facilityFeatures.map((feature, index) => {
const Icon = feature.icon;
return (
<Card key={index} className="flex-shrink-0 border hover:shadow-lg transition-shadow duration-300" style={{ backgroundColor: 'var(--color-bg-white)', width: `${cardWidth}%` }}>
<CardContent className="p-8 text-center">
<div className="w-full h-[180px] overflow-hidden rounded-lg mx-auto mb-6">
<ImageWithFallback
src={
feature.title.toLowerCase().includes('wifi')
? 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=480&h=320&fit=crop&auto=format&dpr=2'
: feature.title.toLowerCase().includes('coffee') || feature.title.toLowerCase().includes('café') || feature.title.toLowerCase().includes('cafe')
? 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=480&h=320&fit=crop&auto=format&dpr=2'
: feature.title.toLowerCase().includes('parking') || feature.title.toLowerCase().includes('car')
? 'https://images.unsplash.com/photo-1518306727298-4c17e1bf8cff?w=480&h=320&fit=crop&auto=format&dpr=2'
: feature.title.toLowerCase().includes('security') || feature.title.toLowerCase().includes('safety')
? 'https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?w=480&h=320&fit=crop&auto=format&dpr=2'
: feature.title.toLowerCase().includes('bed') || feature.title.toLowerCase().includes('accommodation') || feature.title.toLowerCase().includes('stay')
? 'https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=480&h=320&fit=crop&auto=format&dpr=2'
: feature.title.toLowerCase().includes('nature') || feature.title.toLowerCase().includes('outdoor')
? 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=480&h=320&fit=crop&auto=format&dpr=2'
: feature.title.toLowerCase().includes('meeting') || feature.title.toLowerCase().includes('room') || feature.title.toLowerCase().includes('facility')
? 'https://images.unsplash.com/photo-1557800636-894a64c1696f?w=480&h=320&fit=crop&auto=format&dpr=2'
: 'https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=480&h=320&fit=crop&auto=format&dpr=2'
}
alt={`${feature.title} image`}
className="w-full h-full object-cover"
/>
</div>
<h3 className="text-h4 mb-4">{feature.title}</h3>
<p className="text-body text-muted mb-6">{feature.description}</p>
<div className="space-y-2">
{feature.details.map((detail, detailIndex) => (
<div key={detailIndex} className="flex items-center gap-2 text-body">
<CheckCircle className="w-4 h-4 flex-shrink-0 text-primary" />
<span className="text-left text-muted">{detail}</span>
</div>
))}
</div>
</CardContent>
</Card>
);
})}
</div>
</div>
</div>
</div>
</section>
{/* Booking Modal */}
<Dialog open={isBookingModalOpen} onOpenChange={setIsBookingModalOpen}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle className="text-h3">Book Learning Facility</DialogTitle>
<DialogDescription>
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.
</DialogDescription>
</DialogHeader>
<form onSubmit={handleBookingSubmit} className="space-y-4 pt-4">
<div className="grid grid-cols-2 gap-4">
<div>
<Label htmlFor="companyName">Company Name</Label>
<Input
id="companyName"
value={bookingForm.companyName}
onChange={(e: any) => setBookingForm({ ...bookingForm, companyName: e.target.value })}
required
/>
</div>
<div>
<Label htmlFor="contactName">Contact Name</Label>
<Input
id="contactName"
value={bookingForm.contactName}
onChange={(e: any) => setBookingForm({ ...bookingForm, contactName: e.target.value })}
required
/>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<Label htmlFor="email">Email</Label>
<Input
id="email"
type="email"
value={bookingForm.email}
onChange={(e: any) => setBookingForm({ ...bookingForm, email: e.target.value })}
required
/>
</div>
<div>
<Label htmlFor="phone">Phone</Label>
<Input
id="phone"
value={bookingForm.phone}
onChange={(e: any) => setBookingForm({ ...bookingForm, phone: e.target.value })}
required
/>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<Label htmlFor="role">Your Role</Label>
<Input
id="role"
value={bookingForm.role}
onChange={(e: any) => setBookingForm({ ...bookingForm, role: e.target.value })}
required
/>
</div>
<div>
<Label htmlFor="teamSize">Team Size</Label>
<Select value={bookingForm.teamSize} onValueChange={(value: any) => setBookingForm({ ...bookingForm, teamSize: value })}>
<SelectTrigger>
<SelectValue placeholder="Select size" />
</SelectTrigger>
<SelectContent>
<SelectItem value="1-10">1-10 people</SelectItem>
<SelectItem value="11-25">11-25 people</SelectItem>
<SelectItem value="26-50">26-50 people</SelectItem>
<SelectItem value="51-80">51-80 people</SelectItem>
<SelectItem value="80+">80+ people</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div>
<Label htmlFor="facilityZone">Preferred Zone</Label>
<Select value={bookingForm.facilityZone} onValueChange={(value: any) => setBookingForm({ ...bookingForm, facilityZone: value })}>
<SelectTrigger>
<SelectValue placeholder="Select zone" />
</SelectTrigger>
<SelectContent>
<SelectItem value="training-amphitheater">Training Amphitheater</SelectItem>
<SelectItem value="collaboration-suites">Collaboration Suites</SelectItem>
<SelectItem value="outdoor-pavilion">Outdoor Pavilion</SelectItem>
<SelectItem value="residential-quarters">Residential Quarters</SelectItem>
<SelectItem value="flexible">Flexible / Any Zone</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Label htmlFor="requirements">Additional Requirements</Label>
<Textarea
id="requirements"
value={bookingForm.additionalRequirements}
onChange={(e: any) => setBookingForm({ ...bookingForm, additionalRequirements: e.target.value })}
placeholder="Tell us about your event, special requirements, catering needs, etc."
rows={3}
/>
</div>
<div className="flex gap-3 pt-4">
<Button
type="submit"
className="flex-1"
style={{
backgroundColor: 'var(--color-primary)',
color: 'white'
}}
>
Submit Booking Request
</Button>
<Button
type="button"
variant="outline"
onClick={() => setIsBookingModalOpen(false)}
>
Cancel
</Button>
</div>
</form>
</DialogContent>
</Dialog>
{/* Booking Modal */}
<Dialog open={isBookingModalOpen} onOpenChange={setIsBookingModalOpen}>
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="text-h3 mb-2">Book Our Learning Facility</DialogTitle>
<DialogDescription className="text-body text-muted">
Submit your booking request and we'll get back to you within 24 hours to confirm availability and discuss your requirements.
</DialogDescription>
</DialogHeader>
<form onSubmit={handleBookingSubmit} className="space-y-6 mt-6">
<div className="grid md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="companyName" className="text-body font-medium">Company/Organization Name *</Label>
<Input
id="companyName"
value={bookingForm.companyName}
onChange={(e: any) => setBookingForm({ ...bookingForm, companyName: e.target.value })}
placeholder="Enter company name"
required
className="text-body"
/>
</div>
<div className="space-y-2">
<Label htmlFor="contactName" className="text-body font-medium">Contact Person *</Label>
<Input
id="contactName"
value={bookingForm.contactName}
onChange={(e: any) => setBookingForm({ ...bookingForm, contactName: e.target.value })}
placeholder="Enter your full name"
required
className="text-body"
/>
</div>
</div>
<div className="grid md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="email" className="text-body font-medium">Email Address *</Label>
<Input
id="email"
type="email"
value={bookingForm.email}
onChange={(e: any) => setBookingForm({ ...bookingForm, email: e.target.value })}
placeholder="your.email@company.com"
required
className="text-body"
/>
</div>
<div className="space-y-2">
<Label htmlFor="phone" className="text-body font-medium">Phone Number</Label>
<Input
id="phone"
value={bookingForm.phone}
onChange={(e: any) => setBookingForm({ ...bookingForm, phone: e.target.value })}
placeholder="+1 (555) 123-4567"
className="text-body"
/>
</div>
</div>
<div className="grid md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="role" className="text-body font-medium">Your Role/Position</Label>
<Input
id="role"
value={bookingForm.role}
onChange={(e: any) => setBookingForm({ ...bookingForm, role: e.target.value })}
placeholder="e.g., Training Manager, HR Director"
className="text-body"
/>
</div>
<div className="space-y-2">
<Label htmlFor="teamSize" className="text-body font-medium">Expected Group Size *</Label>
<Select value={bookingForm.teamSize} onValueChange={(value: any) => setBookingForm({ ...bookingForm, teamSize: value })}>
<SelectTrigger className="text-body">
<SelectValue placeholder="Select group size" />
</SelectTrigger>
<SelectContent>
<SelectItem value="1-10">1-10 participants</SelectItem>
<SelectItem value="11-25">11-25 participants</SelectItem>
<SelectItem value="26-50">26-50 participants</SelectItem>
<SelectItem value="51-80">51-80 participants</SelectItem>
<SelectItem value="80+">80+ participants</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="facilityZone" className="text-body font-medium">Preferred Learning Zone</Label>
<Select value={bookingForm.facilityZone} onValueChange={(value: any) => setBookingForm({ ...bookingForm, facilityZone: value })}>
<SelectTrigger className="text-body">
<SelectValue placeholder="Select preferred zone (optional)" />
</SelectTrigger>
<SelectContent>
<SelectItem value="amphitheater">Training Amphitheater (80-120 people)</SelectItem>
<SelectItem value="collaboration">Collaboration Suites (4-8 people)</SelectItem>
<SelectItem value="outdoor">Outdoor Learning Pavilion (20-40 people)</SelectItem>
<SelectItem value="multiple">Multiple zones needed</SelectItem>
<SelectItem value="flexible">Flexible - advise best option</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="requirements" className="text-body font-medium">Additional Requirements</Label>
<Textarea
id="requirements"
value={bookingForm.additionalRequirements}
onChange={(e: any) => setBookingForm({ ...bookingForm, additionalRequirements: e.target.value })}
placeholder="Please share any specific requirements, preferred dates, catering needs, accommodation requirements, etc."
rows={4}
className="text-body resize-none"
/>
</div>
<div className="flex flex-col sm:flex-row gap-3 justify-end pt-4">
<Button
type="button"
variant="outline"
onClick={() => setIsBookingModalOpen(false)}
className="text-body"
>
Cancel
</Button>
<Button
type="submit"
className="text-body px-8"
style={{
backgroundColor: 'var(--color-primary)',
color: 'white',
fontFamily: 'var(--font-family-base)'
}}
>
<Calendar className="w-4 h-4 mr-2" />
Submit Booking Request
</Button>
</div>
</form>
</DialogContent>
</Dialog>
{/* Testimonials Section - Using home page testimonials with custom headers */}
<TestimonialsSection
title="Guest Experiences"
subtitle="Hear from clients and partners who have experienced the transformational power of our purpose-built learning environment."
tagText="Facility Excellence"
/>
{/* Facility Tour - How to Reach Us Section */}
<section className="py-12" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="text-center mb-8">
<div className="branded-tag-system mb-4 justify-center">
<div className="dot"></div>
<span className="text">FACILITY TOUR</span>
</div>
<h2 className="text-h2 mb-4">
We Look Forward to Host You
</h2>
<p className="text-body text-muted max-w-2xl mx-auto">
Experience our world-class facility firsthand. Here's everything you need to know about reaching us and planning your visit.
</p>
</div>
{/* Content Grid */}
<div className="grid grid-cols-1 lg:grid-cols-5 gap-8 items-start">
{/* Contact Information */}
<div className="lg:col-span-3 space-y-6">
{/* Venue Details */}
<motion.div
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6 }}
viewport={{ once: true }}
className="bg-white border border-gray-200 rounded-xl p-4 shadow-sm"
>
<div className="flex items-center gap-3 mb-3">
<div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
<MapPin className="w-5 h-5 text-blue-600" />
</div>
<h3 className="text-h4">Venue Details</h3>
</div>
<div className="space-y-1 text-body text-gray-700">
<p className="font-medium text-black">Kautilya Leadership Services</p>
<p>R.S. No. 5/6, Savaroli Kharpada Road,</p>
<p>Dhamani Taluk, Khalapur, District Raigad – 410201</p>
</div>
</motion.div>
{/* Corporate Booking & Distance in one row */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Corporate Booking */}
<motion.div
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}
viewport={{ once: true }}
className="bg-white border border-gray-200 rounded-xl p-4 shadow-sm"
>
<div className="flex items-center gap-3 mb-3">
<div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
<Phone className="w-5 h-5 text-green-600" />
</div>
<h3 className="text-h4">Corporate Booking</h3>
</div>
<div className="space-y-2">
<p className="text-body font-medium text-black">Supriya Salvi</p>
<div className="flex items-center gap-2 text-small text-gray-700">
<Phone className="w-4 h-4" />
<span>+91 9819232703 / 9326091775</span>
</div>
<div className="flex items-center gap-2 text-small text-gray-700">
<Mail className="w-4 h-4" />
<span>connect@kautilyaservices.in</span>
</div>
</div>
</motion.div>
{/* Distance Information */}
<motion.div
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6, delay: 0.4 }}
viewport={{ once: true }}
className="bg-white border border-gray-200 rounded-xl p-4 shadow-sm"
>
<div className="flex items-center gap-3 mb-3">
<div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
<MapPin className="w-5 h-5 text-purple-600" />
</div>
<h3 className="text-h4">How to Reach Us</h3>
</div>
<div className="space-y-2">
<div className="flex justify-between items-center">
<span className="text-small text-gray-600">From Lonavala:</span>
<span className="text-body font-medium text-blue-600">23 Km</span>
</div>
<div className="flex justify-between items-center">
<span className="text-small text-gray-600">From Mumbai Airport:</span>
<span className="text-body font-medium text-blue-600">82 Km</span>
</div>
<div className="flex justify-between items-center">
<span className="text-small text-gray-600">From Pune Airport:</span>
<span className="text-body font-medium text-blue-600">94 Km</span>
</div>
</div>
</motion.div>
</div>
</div>
{/* Location Map */}
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6, delay: 0.3 }}
viewport={{ once: true }}
className="lg:col-span-2 space-y-4"
>
<div className="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm">
<div className="relative h-64">
<ImageWithFallback
src="https://images.unsplash.com/photo-1587400873582-230980eb46eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsb2NhdGlvbiUyMG1hcCUyMGZhY2lsaXR5JTIwZGlyZWN0aW9uc3xlbnwxfHx8fDE3NTY5MDA5MTF8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
alt="Kautilya Leadership Services Location Map"
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
<div className="absolute bottom-3 left-3 bg-white/90 backdrop-blur-sm rounded-lg px-3 py-1">
<p className="text-small font-medium text-black">Kautilya Leadership Centre</p>
<p className="text-small text-gray-600">Raigad, Maharashtra</p>
</div>
</div>
</div>
{/* Quick Actions */}
<div className="flex justify-center">
<Button
variant="outline"
onClick={() => setIsBookingModalOpen(true)}
className="text-body px-4 py-2 border-2 border-blue-600 text-blue-600 hover:bg-blue-50 transition-colors w-full"
style={{
fontFamily: 'var(--font-family-base)'
}}
>
<Calendar className="w-4 h-4 mr-2" />
Plan Your Visit
</Button>
</div>
</motion.div>
</div>
</div>
</div>
</section>
changes done
2025-09-05 17:59:33 +05:30
{/* CTA Section - Using standardized home page CTA */}
<CTABannerSection />
worked on the components new functionlity
2025-09-05 12:48:46 +05:30
</div>
);
}
Reference in New Issue Copy Permalink