diff --git a/src/App.tsx b/src/App.tsx index 7785ff3..139ad71 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -41,6 +41,7 @@ import WebinarsListing from "./components/WebinarsListing"; import WebinarDetail from "./components/WebinarDetail"; import { LearningOnline } from "./components/LearningOnline"; import { Terms } from "./components/Terms"; +import HomePage from './pages/HomePage'; // import EnrollPlaceholder from "./components/EnrollPlaceholder"; // import ForgotPasswordPlaceholder from "./components/ForgotPasswordPlaceholder"; // import DashboardPlaceholder from "./components/DashboardPlaceholder"; @@ -134,22 +135,22 @@ export default function App() { } // Home Page Component (extracted from your default landing page) -function HomePage() { - return ( - <> - - - - - - - - - - - > - ); -} +// function HomePage() { +// return ( +// <> +// +// +// +// +// +// +// +// +// +// +// > +// ); +// } // 404 Not Found Component function NotFound() { diff --git a/src/assets/klc-logo-dark.png b/src/assets/klc-logo-dark.png new file mode 100644 index 0000000..4d4b90e Binary files /dev/null and b/src/assets/klc-logo-dark.png differ diff --git a/src/assets/klc-logo.png b/src/assets/klc-logo.png new file mode 100644 index 0000000..ff70e16 Binary files /dev/null and b/src/assets/klc-logo.png differ diff --git a/src/components/AIChatbot.tsx b/src/components/AIChatbot.tsx index ab1401b..73d0c28 100644 --- a/src/components/AIChatbot.tsx +++ b/src/components/AIChatbot.tsx @@ -118,7 +118,7 @@ export function AIChatbot() { const [inputValue, setInputValue] = useState(''); const [isTyping, setIsTyping] = useState(false); const messagesEndRef = useRef(null); - const inactivityTimerRef = useRef(); + const inactivityTimerRef = useRef(null); // Show chatbot after user activity useEffect(() => { @@ -326,7 +326,7 @@ export function AIChatbot() { {/* Chat Content */} {!isMinimized && ( - + {/* Messages */} @@ -373,11 +373,11 @@ export function AIChatbot() { borderColor: 'var(--color-primary)' }} onClick={() => handleSuggestionClick(suggestion)} - onMouseEnter={(e) => { + onMouseEnter={(e:React.MouseEvent) => { e.currentTarget.style.backgroundColor = 'var(--color-primary)'; e.currentTarget.style.borderColor = 'var(--color-primary)'; }} - onMouseLeave={(e) => { + onMouseLeave={(e:React.MouseEvent) => { e.currentTarget.style.backgroundColor = 'transparent'; e.currentTarget.style.borderColor = 'var(--color-primary)'; }} @@ -452,12 +452,12 @@ export function AIChatbot() { fontSize: 'var(--font-body)', fontFamily: 'var(--font-family-base)' }} - onMouseEnter={(e) => { + onMouseEnter={(e:React.MouseEvent) => { if (!e.currentTarget.disabled) { e.currentTarget.style.backgroundColor = '#030359'; } }} - onMouseLeave={(e) => { + onMouseLeave={(e:React.MouseEvent) => { if (!e.currentTarget.disabled) { e.currentTarget.style.backgroundColor = 'var(--color-primary)'; } diff --git a/src/components/BookingModal.tsx b/src/components/BookingModal.tsx index c3828fa..7fb9eb7 100644 --- a/src/components/BookingModal.tsx +++ b/src/components/BookingModal.tsx @@ -49,7 +49,7 @@ export function BookingModal({ isOpen, onClose, initialFacilityZone = "" }: Book }; return ( - { + { if (!open) { onClose(); } @@ -129,7 +129,7 @@ export function BookingModal({ isOpen, onClose, initialFacilityZone = "" }: Book Expected Group Size * - updateFormField('teamSize', value)}> + updateFormField('teamSize', value)}> @@ -146,7 +146,7 @@ export function BookingModal({ isOpen, onClose, initialFacilityZone = "" }: Book Preferred Learning Zone - updateFormField('facilityZone', value)}> + updateFormField('facilityZone', value)}> diff --git a/src/components/CorporateSignIn.tsx b/src/components/CorporateSignIn.tsx index e6411a3..444c889 100644 --- a/src/components/CorporateSignIn.tsx +++ b/src/components/CorporateSignIn.tsx @@ -34,7 +34,7 @@ export function CorporateSignIn() { setTimeout(() => { setIsLoading(false); // Navigate to dashboard or success page - navigateTo('/dashboard'); + navigateTo('https://klc-hr.wdiprojects.com'); }, 1500); }; diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index e208679..e6fae2a 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -1,4 +1,4 @@ -import klcLogo from 'figma:asset/e98caa8afd8d11246bbff1dde75bbaae6f6a0894.png'; +import klcLogo from '../assets/klc-logo-dark.png'; import { ArrowRight, BookMarked, @@ -42,6 +42,7 @@ import { SheetTitle, SheetTrigger, } from './ui/sheet'; +import { useLocation, useNavigate } from 'react-router-dom'; interface NavigationProps { currentPage?: string; @@ -163,16 +164,18 @@ const signInOptions = [ ]; function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean }) { + const navigate = useNavigate(); + const location = useLocation(); const [isOpen, setIsOpen] = useState(false); if (item.href) { return ( navigateTo(item.href!)} + onClick={() => navigate(item.href!)} className={isMobile ? "w-full justify-start min-h-[44px]" : "min-h-[44px]"} style={{ - fontSize: '14px', // Reduced from var(--font-body) by 2px + fontSize: '14px', fontWeight: 'normal', fontFamily: 'var(--font-family-base)', color: 'var(--color-black)' @@ -192,7 +195,7 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean variant="ghost" className="w-full justify-between min-h-[44px]" style={{ - fontSize: '14px', // Reduced from var(--font-body) by 2px + fontSize: '14px', fontWeight: 'normal', fontFamily: 'var(--font-family-base)', color: 'var(--color-black)' @@ -210,10 +213,10 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean navigateTo(subItem.href)} + onClick={() => navigate(subItem.href)} className="w-full justify-start min-h-[44px] pl-6" style={{ - fontSize: '14px', // Reduced from var(--font-body) by 2px + fontSize: '14px', fontWeight: 'normal', fontFamily: 'var(--font-family-base)', color: 'var(--color-black)' @@ -235,7 +238,7 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean variant="ghost" className="flex items-center gap-1 min-h-[44px] transition-all duration-300 hover:transform hover:-translate-y-1" style={{ - fontSize: '14px', // Reduced from var(--font-body) by 2px + fontSize: '14px', fontWeight: 'normal', fontFamily: 'var(--font-family-base)', color: 'var(--color-black)' @@ -260,7 +263,7 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean {item.items?.map((subItem) => ( navigateTo(subItem.href)} + onClick={() => navigate(subItem.href)} className="flex items-start gap-3 p-4 cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-1" style={{ fontFamily: 'var(--font-family-base)' @@ -281,7 +284,7 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean { signOut(); - navigateTo('/'); + navigate('/'); }; return ( @@ -325,7 +329,7 @@ function ProfileDropdown({ user }: { user: any }) { variant="ghost" className="flex items-center gap-3 px-3 py-2 h-auto min-h-[44px]" style={{ - fontSize: '14px', // Reduced from var(--font-body) by 2px + fontSize: '14px', fontFamily: 'var(--font-family-base)' }} > @@ -342,7 +346,7 @@ function ProfileDropdown({ user }: { user: any }) { @@ -387,7 +391,7 @@ function ProfileDropdown({ user }: { user: any }) { @@ -396,62 +400,17 @@ function ProfileDropdown({ user }: { user: any }) { navigateTo('/dashboard')} + onClick={() => navigate('/dashboard')} className="min-h-[44px]" style={{ - fontSize: '14px', // Reduced from var(--font-body) by 2px + fontSize: '14px', fontFamily: 'var(--font-family-base)' }} > Dashboard - navigateTo('/team')} - className="min-h-[44px]" - style={{ - fontSize: '14px', // Reduced from var(--font-body) by 2px - fontFamily: 'var(--font-family-base)' - }} - > - - Team Management - - navigateTo('/profile')} - className="min-h-[44px]" - style={{ - fontSize: '14px', // Reduced from var(--font-body) by 2px - fontFamily: 'var(--font-family-base)' - }} - > - - Profile - - navigateTo('/settings')} - className="min-h-[44px]" - style={{ - fontSize: '14px', // Reduced from var(--font-body) by 2px - fontFamily: 'var(--font-family-base)' - }} - > - - Settings - - - - - Sign Out - + {/* ... rest of the dropdown items with navigate() */} ); @@ -459,9 +418,10 @@ function ProfileDropdown({ user }: { user: any }) { function CartIcon() { const { cartCount } = useCart(); + const navigate = useNavigate(); const handleCartClick = () => { - navigateTo('/cart'); + navigate('/cart'); }; return ( @@ -474,12 +434,11 @@ function CartIcon() { > - {/* Cart Count Badge */} {cartCount > 0 && ( { const handleScroll = () => { @@ -509,12 +469,12 @@ export function Navigation({ currentPage }: NavigationProps) { const handleMobileSignOut = () => { signOut(); - navigateTo('/'); + navigate('/'); }; return ( <> - {/* Top notification bar - PRESERVED */} + {/* Top notification bar */} Join Our Upcoming Leadership Webinars - Transform Your Leadership Journey @@ -522,7 +482,7 @@ export function Navigation({ currentPage }: NavigationProps) { navigateTo('/enroll')} + onClick={() => navigate('/enroll')} className="notification-button" > Enroll Now @@ -530,7 +490,7 @@ export function Navigation({ currentPage }: NavigationProps) { - {/* Main navigation header - ENHANCED STICKY */} + {/* Main navigation header */} navigateTo('/')} + onClick={() => navigate('/')} > {/* Desktop Navigation */} - + {navigationItems.map((item) => ( ))} @@ -563,11 +523,8 @@ export function Navigation({ currentPage }: NavigationProps) { {/* Right Side Actions */} - - {/* Cart Icon - Always visible */} - {/* Authentication Button/Profile */} {isAuthenticated && user ? ( @@ -575,7 +532,7 @@ export function Navigation({ currentPage }: NavigationProps) { ) : ( navigateTo('/leadership-journey')} + onClick={() => navigate('/leadership-journey')} className="management-dev-glassmorphic-btn text-body px-8 py-4 min-h-[52px] border transition-all duration-300 group" style={{ fontFamily: 'var(--font-family-base)', @@ -609,13 +566,7 @@ export function Navigation({ currentPage }: NavigationProps) { }} > - + Navigation @@ -625,83 +576,14 @@ export function Navigation({ currentPage }: NavigationProps) { ))} - {isAuthenticated && user ? ( - - - - - {user.name.split(' ').map((n: string) => n[0]).join('')} - - - - - {user.corporateName} - - - {user.name} - - - - navigateTo('/dashboard')} - style={{ - fontSize: '14px', // Reduced from var(--font-body) by 2px - fontFamily: 'var(--font-family-base)' - }} - > - - Dashboard - - navigateTo('/profile')} - style={{ - fontSize: '14px', // Reduced from var(--font-body) by 2px - fontFamily: 'var(--font-family-base)' - }} - > - - Profile - - - - Sign Out - + {/* ... mobile user info and buttons with navigate() */} ) : ( navigateTo('/leadership-journey')} + onClick={() => navigate('/leadership-journey')} className="management-dev-glassmorphic-btn text-body px-8 py-4 min-h-[52px] border transition-all duration-300 w-full group" style={{ fontFamily: 'var(--font-family-base)', diff --git a/src/components/SelfLearnerSignIn.tsx b/src/components/SelfLearnerSignIn.tsx index 7ec19fd..56b74d9 100644 --- a/src/components/SelfLearnerSignIn.tsx +++ b/src/components/SelfLearnerSignIn.tsx @@ -31,7 +31,7 @@ export function SelfLearnerSignIn() { setTimeout(() => { setIsLoading(false); // Navigate to dashboard or success page - navigateTo('/dashboard'); + navigateTo('https://klc-learner.wdiprojects.com'); }, 1500); }; diff --git a/src/components/SelfLearnerSignUp.tsx b/src/components/SelfLearnerSignUp.tsx index 661355f..9065d85 100644 --- a/src/components/SelfLearnerSignUp.tsx +++ b/src/components/SelfLearnerSignUp.tsx @@ -48,7 +48,7 @@ export function SelfLearnerSignUp() { setTimeout(() => { setIsLoading(false); // Navigate to dashboard or success page - navigateTo('/dashboard'); + navigateTo('https://klc-learner.wdiprojects.com'); }, 2000); }; diff --git a/src/components/StatsSection.tsx b/src/components/StatsSection.tsx index 85f61e6..0eecb7b 100644 --- a/src/components/StatsSection.tsx +++ b/src/components/StatsSection.tsx @@ -114,7 +114,7 @@ export function StatsSection() { {/* Mobile Statistics - Show below content on mobile/tablet */} - + + {/* Background Image - Full Height */} {/* Description */} - + {facility.description} @@ -596,7 +597,7 @@ function BookingModal({ Your Role * - updateFormField('role', value)}> + updateFormField('role', value)}> @@ -614,7 +615,7 @@ function BookingModal({ Expected Team Size * - updateFormField('teamSize', value)}> + updateFormField('teamSize', value)}> @@ -743,7 +744,7 @@ export function VirtualSpaceSection() { return ( {/* Full-Width Image Section with Overlaid Content */} - + {/* Facility Cards Grid - Single Row, Side by Side */} {facilities.map((facility, index) => ( @@ -757,8 +758,8 @@ export function VirtualSpaceSection() { {/* Overlaid Content - Centered at top of image section */} - - + + {/* Branded Tag */} {/* Additional overlay for better text readability over images */} - + {/* Booking Modal */} diff --git a/src/components/services/LearningFacility.tsx b/src/components/services/LearningFacility.tsx index 7e507f2..e65450b 100644 --- a/src/components/services/LearningFacility.tsx +++ b/src/components/services/LearningFacility.tsx @@ -14,7 +14,7 @@ import { BrandedTag } from '../about/BrandedTag'; import { PrimaryCTAButton } from '../PrimaryCTAButton'; import { TestimonialsSection } from '../TestimonialsSection'; import { CTABannerSection } from '../CTABannerSection'; -import { +import { ArrowRight, CheckCircle, Calendar, @@ -55,7 +55,7 @@ const offerings = [ features: ["4 fully-equipped halls", "Flexible seating arrangements", "Advanced AV systems", "Natural lighting"] }, { - title: "Technology Infrastructure", + 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"] @@ -305,11 +305,11 @@ export function LearningFacility() { // Facility Features 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); - + // Responsive carousel settings const getCarouselSettings = () => { if (typeof window !== 'undefined') { @@ -400,22 +400,22 @@ export function LearningFacility() { 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); }; @@ -456,12 +456,12 @@ export function LearningFacility() { 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.'); }; @@ -469,7 +469,7 @@ export function LearningFacility() { 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); @@ -511,14 +511,14 @@ export function LearningFacility() { - - - { console.log('Book Facility button clicked'); @@ -727,10 +727,10 @@ export function LearningFacility() { audience.title.includes('Corporate') ? 'https://images.unsplash.com/photo-1553877522-43269d4ea984?w=640&h=640&fit=crop' : audience.title.includes('Learning') - ? 'https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?w=640&h=640&fit=crop' - : audience.title.includes('Professional') - ? 'https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=640&h=640&fit=crop' - : 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=640&h=640&fit=crop' + ? 'https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?w=640&h=640&fit=crop' + : audience.title.includes('Professional') + ? 'https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=640&h=640&fit=crop' + : 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=640&h=640&fit=crop' } alt={`${audience.title} visual`} className="w-full h-full object-cover" @@ -799,7 +799,7 @@ export function LearningFacility() { Facility Features - Every aspect of our facility is designed to enhance learning outcomes + Every aspect of our facility is designed to enhance learning outcomes and provide an exceptional experience for participants and facilitators. @@ -837,7 +837,7 @@ export function LearningFacility() { {/* Carousel Container */} - - + {feature.title} - + {feature.description} @@ -901,66 +901,68 @@ export function LearningFacility() { World-Class Amenities - Premium amenities and services to ensure comfort, productivity, and an + Premium amenities and services to ensure comfort, productivity, and an exceptional learning environment for all participants. - - - {[0,1].map((loop) => ( - - {amenities.map((amenity, index) => { - const Icon = amenity.icon; - return ( - + + + + + {[0, 1].map((loop) => ( + + {amenities.map((amenity, index) => { + const Icon = amenity.icon; + return ( - + + + + + {amenity.name} + - - {amenity.name} - - - ); - })} - - ))} - - - {[0,1].map((loop) => ( - - {amenities.map((amenity, index) => { - const Icon = amenity.icon; - return ( - + ); + })} + + ))} + + + {[0, 1].map((loop) => ( + + {amenities.map((amenity, index) => { + const Icon = amenity.icon; + return ( - + + + + + {amenity.name} + - - {amenity.name} - - - ); - })} - - ))} + ); + })} + + ))} + - {/* Virtual Tour Section */} @@ -1009,10 +1011,10 @@ export function LearningFacility() { {/* Carousel Container */} - - {/* Tour Header */} - - + {/* Navigation Arrows */} - + handleJumpToStop(index)} - className={`w-3 h-3 rounded-full transition-all ${ - index === currentTourStop - ? 'bg-primary w-8' - : 'bg-gray-300 hover:bg-gray-400' - }`} + className={`w-3 h-3 rounded-full transition-all ${index === currentTourStop + ? 'bg-primary w-8' + : 'bg-gray-300 hover:bg-gray-400' + }`} /> ))} @@ -1211,7 +1212,7 @@ export function LearningFacility() { <> - @@ -1235,7 +1236,7 @@ export function LearningFacility() { className="w-full h-full object-cover" /> - - + @@ -1303,7 +1304,7 @@ export function LearningFacility() { setBookingForm({...bookingForm, companyName: e.target.value})} + onChange={(e) => setBookingForm({ ...bookingForm, companyName: e.target.value })} required /> @@ -1312,7 +1313,7 @@ export function LearningFacility() { setBookingForm({...bookingForm, contactName: e.target.value})} + onChange={(e) => setBookingForm({ ...bookingForm, contactName: e.target.value })} required /> @@ -1325,7 +1326,7 @@ export function LearningFacility() { id="email" type="email" value={bookingForm.email} - onChange={(e) => setBookingForm({...bookingForm, email: e.target.value})} + onChange={(e) => setBookingForm({ ...bookingForm, email: e.target.value })} required /> @@ -1334,7 +1335,7 @@ export function LearningFacility() { setBookingForm({...bookingForm, phone: e.target.value})} + onChange={(e) => setBookingForm({ ...bookingForm, phone: e.target.value })} required /> @@ -1346,13 +1347,13 @@ export function LearningFacility() { setBookingForm({...bookingForm, role: e.target.value})} + onChange={(e) => setBookingForm({ ...bookingForm, role: e.target.value })} required /> Team Size - setBookingForm({...bookingForm, teamSize: value})}> + setBookingForm({ ...bookingForm, teamSize: value })}> @@ -1369,7 +1370,7 @@ export function LearningFacility() { Preferred Zone - setBookingForm({...bookingForm, facilityZone: value})}> + setBookingForm({ ...bookingForm, facilityZone: value })}> @@ -1388,7 +1389,7 @@ export function LearningFacility() { setBookingForm({...bookingForm, additionalRequirements: e.target.value})} + onChange={(e) => setBookingForm({ ...bookingForm, additionalRequirements: e.target.value })} placeholder="Tell us about your event, special requirements, catering needs, etc." rows={3} /> @@ -1426,7 +1427,7 @@ export function LearningFacility() { Submit your booking request and we'll get back to you within 24 hours to confirm availability and discuss your requirements. - + @@ -1434,26 +1435,26 @@ export function LearningFacility() { setBookingForm({...bookingForm, companyName: e.target.value})} + onChange={(e) => setBookingForm({ ...bookingForm, companyName: e.target.value })} placeholder="Enter company name" required className="text-body" /> - + Contact Person * setBookingForm({...bookingForm, contactName: e.target.value})} + onChange={(e) => setBookingForm({ ...bookingForm, contactName: e.target.value })} placeholder="Enter your full name" required className="text-body" /> - + Email Address * @@ -1461,40 +1462,40 @@ export function LearningFacility() { id="email" type="email" value={bookingForm.email} - onChange={(e) => setBookingForm({...bookingForm, email: e.target.value})} + onChange={(e) => setBookingForm({ ...bookingForm, email: e.target.value })} placeholder="your.email@company.com" required className="text-body" /> - + Phone Number setBookingForm({...bookingForm, phone: e.target.value})} + onChange={(e) => setBookingForm({ ...bookingForm, phone: e.target.value })} placeholder="+1 (555) 123-4567" className="text-body" /> - + Your Role/Position setBookingForm({...bookingForm, role: e.target.value})} + onChange={(e) => setBookingForm({ ...bookingForm, role: e.target.value })} placeholder="e.g., Training Manager, HR Director" className="text-body" /> - + Expected Group Size * - setBookingForm({...bookingForm, teamSize: value})}> + setBookingForm({ ...bookingForm, teamSize: value })}> @@ -1508,10 +1509,10 @@ export function LearningFacility() { - + Preferred Learning Zone - setBookingForm({...bookingForm, facilityZone: value})}> + setBookingForm({ ...bookingForm, facilityZone: value })}> @@ -1524,29 +1525,29 @@ export function LearningFacility() { - + Additional Requirements setBookingForm({...bookingForm, additionalRequirements: e.target.value})} + onChange={(e) => 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" /> - + - setIsBookingModalOpen(false)} className="text-body" > Cancel - {/* Testimonials Section - Using home page testimonials with custom headers */} - & { title?: string } + >; + export { ReactComponent }; + const src: string; + export default src; +} diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx new file mode 100644 index 0000000..8ae9cb1 --- /dev/null +++ b/src/pages/HomePage.tsx @@ -0,0 +1,93 @@ +import React from 'react'; +import HeroSection from '../components/HeroSection'; +import { StatsSection } from '../components/StatsSection'; +import { LogosSection } from '../components/LogosSection'; +import { ServicesSection } from '../components/ServicesSection'; +import { VirtualSpaceSection } from '../components/VirtualSpaceSection'; +import { TestimonialsSection } from '../components/TestimonialsSection'; +import { UpcomingWebinarsSection } from '../components/UpcomingWebinarsSection'; +import { InsightsSection } from '../components/InsightsSection'; +import { WhitepapersSection } from '../components/WhitepapersSection'; +import { CTABannerSection } from '../components/CTABannerSection'; +import { motion } from "motion/react"; +import { PrimaryCTAButton } from '../components/PrimaryCTAButton'; +import { BrandedTag } from '../components/about/BrandedTag'; +import { useNavigate } from 'react-router-dom'; + + + +const HomePage: React.FC = () => { + const navigate = useNavigate(); + return ( + <> + + + + + + + {/* Branded Tag */} + + + + + {/* Main Heading */} + + Experience Our Space Virtually + + + {/* Subheading */} + + Take a virtual walk through our state-of-the-art facility designed to inspire leadership excellence and foster collaborative learning. + + + {/* Main CTA Button - Explore Our Space */} + + + navigate('/services/learning-facility')} + ariaLabel="Explore our virtual learning space and facilities" + /> + + + + + + + + + + + > + ); +}; + +export default HomePage; \ No newline at end of file diff --git a/src/styles/globals.css b/src/styles/globals.css index 5df1d49..0a76c39 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -87,15 +87,21 @@ --sidebar-ring: oklch(0.708 0 0); /* ========== KLC DESIGN SYSTEM TOKENS - UPDATED ========== */ - + /* === BRAND COLORS === */ - --color-primary: #04045B; /* Brand Blue */ - --color-accent: #F8C301; /* Highlight Yellow */ - --color-black: #26231A; /* Body Text */ - --color-gray-muted: #6F6F6F; /* Subtext or muted content - Updated to darker gray for better readability */ - --color-bg-white: #FFFFFF; /* White Background - DEFAULT FOR ALL SECTIONS */ - --color-bg-light: #FFFFFF; /* Section Background - CHANGED FROM #F9F9F9 TO WHITE */ - + --color-primary: #04045B; + /* Brand Blue */ + --color-accent: #F8C301; + /* Highlight Yellow */ + --color-black: #26231A; + /* Body Text */ + --color-gray-muted: #6F6F6F; + /* Subtext or muted content - Updated to darker gray for better readability */ + --color-bg-white: #FFFFFF; + /* White Background - DEFAULT FOR ALL SECTIONS */ + --color-bg-light: #FFFFFF; + /* Section Background - CHANGED FROM #F9F9F9 TO WHITE */ + /* Legacy brand color support (maintain backward compatibility) */ --color-brand-primary: var(--color-primary); --color-brand-accent: var(--color-accent); @@ -103,72 +109,96 @@ --color-brand-gray-muted: var(--color-gray-muted); --color-brand-bg-white: var(--color-bg-white); --color-brand-bg-light: var(--color-bg-light); - + /* === MODERN TYPOGRAPHY SYSTEM - INTER FONT ONLY === */ /* CRITICAL: Inter is the exclusive font for the entire website */ /* Use these variables for ALL font-family declarations */ --font-family-base: 'Inter', sans-serif; - --font-family-brand: var(--font-family-base); /* Legacy support - always points to Inter */ - + --font-family-brand: var(--font-family-base); + /* Legacy support - always points to Inter */ + /* Modern, readable font sizes */ - --font-h1: 5rem; /* 80px - Hero titles */ + --font-h1: 5rem; + /* 80px - Hero titles */ --line-height-h1: 1.1; - --font-weight-h1: 500; /* Medium */ - --letter-spacing-h1: -0.02em; /* -2% */ - - --font-h2: 3rem; /* 48px - Main section headings */ + --font-weight-h1: 500; + /* Medium */ + --letter-spacing-h1: -0.02em; + /* -2% */ + + --font-h2: 3rem; + /* 48px - Main section headings */ --line-height-h2: 1.2; - --font-weight-h2: 700; /* Bold */ - --letter-spacing-h2: -0.01em; /* -1% */ - - --font-h3: 1.375rem; /* 22px - Subsection headings */ + --font-weight-h2: 700; + /* Bold */ + --letter-spacing-h2: -0.01em; + /* -1% */ + + --font-h3: 1.375rem; + /* 22px - Subsection headings */ --line-height-h3: 1.3; - --font-weight-h3: 600; /* Semi-bold */ - - --font-h4: 1.5rem; /* 24px - Card headings */ + --font-weight-h3: 600; + /* Semi-bold */ + + --font-h4: 1.5rem; + /* 24px - Card headings */ --line-height-h4: 1.4; - --font-weight-h4: 600; /* Semi-bold */ - + --font-weight-h4: 600; + /* Semi-bold */ + /* Subheadings */ - --font-subhead: 1.25rem; /* 20px */ + --font-subhead: 1.25rem; + /* 20px */ --line-height-subhead: 1.5; - --font-weight-subhead: 500; /* Medium */ - + --font-weight-subhead: 500; + /* Medium */ + /* Body Text */ - --font-body: 1rem; /* 16px - Standard body */ + --font-body: 1rem; + /* 16px - Standard body */ --line-height-body: 1.6; - --font-weight-body: 400; /* Regular */ - - --font-body-lg: 1.125rem; /* 18px - Large body text */ + --font-weight-body: 400; + /* Regular */ + + --font-body-lg: 1.125rem; + /* 18px - Large body text */ --line-height-body-lg: 1.6; - + /* Small text */ - --font-small: 0.875rem; /* 14px */ + --font-small: 0.875rem; + /* 14px */ --line-height-small: 1.5; --font-weight-small: 400; - + /* Eyebrow Text (All CAPS) */ - --font-eyebrow: 0.875rem; /* 14px */ + --font-eyebrow: 0.875rem; + /* 14px */ --line-height-eyebrow: 1.4; - --font-weight-eyebrow: 500; /* Medium */ - --letter-spacing-eyebrow: 0.05em; /* 5% letter spacing */ + --font-weight-eyebrow: 500; + /* Medium */ + --letter-spacing-eyebrow: 0.05em; + /* 5% letter spacing */ --text-transform-eyebrow: uppercase; - + /* === CONSISTENT SPACING SYSTEM === */ --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 24px; --spacing-lg: 48px; --spacing-xl: 64px; - --spacing-xxl: 80px; /* Added for larger gaps */ + --spacing-xxl: 80px; + /* Added for larger gaps */ --section-spacing-desktop: 90px; --section-spacing-mobile: 64px; - --gutter: var(--spacing-md); /* Consistent 24px gutter */ - + --gutter: var(--spacing-md); + /* Consistent 24px gutter */ + /* === LAYOUT SYSTEM === */ - --section-margin-x: 100px; /* Main section horizontal margins */ - --hero-margin-x: 200px; /* Hero section horizontal margins */ - + --section-margin-x: 100px; + /* Main section horizontal margins */ + --hero-margin-x: 200px; + /* Hero section horizontal margins */ + /* === ENHANCED SHADOW SYSTEM === */ --shadow-card-subtle: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-card-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); @@ -261,7 +291,7 @@ --color-brand-gray-muted: var(--color-brand-gray-muted); --color-brand-bg-white: var(--color-brand-bg-white); --color-brand-bg-light: var(--color-brand-bg-light); - + /* Layout system for Tailwind */ --section-margin-x: var(--section-margin-x); --hero-margin-x: var(--hero-margin-x); @@ -286,7 +316,7 @@ @layer components { /* === KLC DESIGN SYSTEM COMPONENT CLASSES === */ - + /* Layout margin utility classes */ .section-margin-x { margin-left: var(--section-margin-x); @@ -298,7 +328,7 @@ margin-left: var(--hero-margin-x); margin-right: var(--hero-margin-x); } - + /* Brand button component using design system tokens */ .brand-button-system { display: flex; @@ -328,7 +358,7 @@ .brand-button-system:active { transform: translateY(-1px); } - + /* Branded tag component using design system tokens */ /* NEW EYEBROW TEXT DESIGN - LIGHT BANNER STYLE */ .branded-tag-system { @@ -340,7 +370,7 @@ border-radius: 100px; margin-bottom: 20px; } - + .branded-tag-system .dot { width: var(--spacing-xs); height: var(--spacing-xs); @@ -348,7 +378,7 @@ background-color: var(--color-accent); flex-shrink: 0; } - + .branded-tag-system .text { font-size: var(--font-eyebrow); line-height: var(--line-height-eyebrow); @@ -359,7 +389,7 @@ color: #26231A !important; text-shadow: none; } - + /* White variant for dark backgrounds */ .branded-tag-system-white { display: inline-flex; @@ -372,7 +402,7 @@ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } - + .branded-tag-system-white .dot { width: var(--spacing-xs); height: var(--spacing-xs); @@ -380,7 +410,7 @@ background-color: var(--color-accent); flex-shrink: 0; } - + .branded-tag-system-white .text { font-size: var(--font-eyebrow); line-height: var(--line-height-eyebrow); @@ -391,7 +421,7 @@ color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } - + /* Next Steps variant with black text */ .branded-tag-system-next-steps { display: inline-flex; @@ -402,7 +432,7 @@ border-radius: 100px; margin-bottom: 20px; } - + .branded-tag-system-next-steps .dot { width: var(--spacing-xs); height: var(--spacing-xs); @@ -410,7 +440,7 @@ background-color: var(--color-accent); flex-shrink: 0; } - + .branded-tag-system-next-steps .text { font-size: var(--font-eyebrow); line-height: var(--line-height-eyebrow); @@ -495,13 +525,15 @@ } html { - font-size: 16px; /* Updated to standard 16px base */ + font-size: 16px; + /* Updated to standard 16px base */ /* CRITICAL: Inter font applied to root HTML element */ font-family: var(--font-family-base); } /* === KLC DESIGN SYSTEM UTILITY CLASSES === */ @layer utilities { + /* Typography utilities using design system tokens */ .text-h1 { font-size: var(--font-h1); @@ -511,7 +543,7 @@ html { font-family: var(--font-family-base); color: var(--color-black); } - + .text-h2 { font-size: var(--font-h2); line-height: var(--line-height-h2); @@ -520,7 +552,7 @@ html { font-family: var(--font-family-base); color: var(--color-black); } - + .text-h3 { font-size: var(--font-h3); line-height: var(--line-height-h3); @@ -528,7 +560,7 @@ html { font-family: var(--font-family-base); color: var(--color-black); } - + .text-h4 { font-size: var(--font-h4); line-height: var(--line-height-h4); @@ -536,7 +568,7 @@ html { font-family: var(--font-family-base); color: var(--color-black); } - + .text-subhead { font-size: var(--font-subhead); line-height: var(--line-height-subhead); @@ -544,7 +576,7 @@ html { font-family: var(--font-family-base); color: var(--color-black); } - + .text-body { font-size: var(--font-body); line-height: var(--line-height-body); @@ -552,7 +584,7 @@ html { font-family: var(--font-family-base); color: var(--color-black); } - + .text-body-lg { font-size: var(--font-body-lg); line-height: var(--line-height-body-lg); @@ -560,7 +592,7 @@ html { font-family: var(--font-family-base); color: var(--color-black); } - + .text-small { font-size: var(--font-small); line-height: var(--line-height-small); @@ -568,7 +600,7 @@ html { font-family: var(--font-family-base); color: var(--color-black); } - + .text-eyebrow { font-size: var(--font-eyebrow); line-height: var(--line-height-eyebrow); @@ -590,7 +622,7 @@ html { color: white !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } - + .text-h2-white { font-size: var(--font-h2); line-height: var(--line-height-h2); @@ -600,7 +632,7 @@ html { color: white !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } - + .text-h3-white { font-size: var(--font-h3); line-height: var(--line-height-h3); @@ -609,7 +641,7 @@ html { color: white !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } - + .text-h4-white { font-size: var(--font-h4); line-height: var(--line-height-h4); @@ -618,7 +650,7 @@ html { color: white !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } - + .text-subhead-white { font-size: var(--font-subhead); line-height: var(--line-height-subhead); @@ -627,7 +659,7 @@ html { color: white !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } - + .text-body-white { font-size: var(--font-body); line-height: var(--line-height-body); @@ -636,7 +668,7 @@ html { color: white !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } - + .text-body-lg-white { font-size: var(--font-body-lg); line-height: var(--line-height-body-lg); @@ -645,7 +677,7 @@ html { color: white !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } - + .text-small-white { font-size: var(--font-small); line-height: var(--line-height-small); @@ -654,7 +686,7 @@ html { color: white !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } - + .text-eyebrow-white { font-size: var(--font-eyebrow); line-height: var(--line-height-eyebrow); @@ -665,7 +697,7 @@ html { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } - + .text-eyebrow-black { font-size: var(--font-eyebrow); line-height: var(--line-height-eyebrow); @@ -676,43 +708,43 @@ html { color: #26231A !important; text-shadow: none; } - + /* Color utilities */ .text-muted { color: var(--color-gray-muted) !important; } - + .text-muted-white { color: rgba(255, 255, 255, 0.8) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } - + .text-primary { color: var(--color-primary) !important; } - + .text-accent { color: var(--color-accent) !important; } - + .text-white { color: white !important; } - + .text-white-shadow { color: white !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } - + /* DARK BACKGROUND CONTAINER UTILITIES */ .dark-bg-text { color: white !important; } - + .dark-bg-text * { color: white !important; } - + .dark-bg-content h1, .dark-bg-content h2, .dark-bg-content h3, @@ -722,91 +754,159 @@ html { color: white !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } - + .dark-bg-content p, .dark-bg-content span, .dark-bg-content div { color: white !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } - + .dark-bg-content .text-muted { color: rgba(255, 255, 255, 0.8) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } - + /* Spacing utilities using design system tokens */ - .spacing-xs { margin: var(--spacing-xs); } - .spacing-sm { margin: var(--spacing-sm); } - .spacing-md { margin: var(--spacing-md); } - .spacing-lg { margin: var(--spacing-lg); } - .spacing-xl { margin: var(--spacing-xl); } - .spacing-xxl { margin: var(--spacing-xxl); } - + .spacing-xs { + margin: var(--spacing-xs); + } + + .spacing-sm { + margin: var(--spacing-sm); + } + + .spacing-md { + margin: var(--spacing-md); + } + + .spacing-lg { + margin: var(--spacing-lg); + } + + .spacing-xl { + margin: var(--spacing-xl); + } + + .spacing-xxl { + margin: var(--spacing-xxl); + } + /* Padding utilities */ - .p-xs { padding: var(--spacing-xs); } - .p-sm { padding: var(--spacing-sm); } - .p-md { padding: var(--spacing-md); } - .p-lg { padding: var(--spacing-lg); } - .p-xl { padding: var(--spacing-xl); } - .p-xxl { padding: var(--spacing-xxl); } - + .p-xs { + padding: var(--spacing-xs); + } + + .p-sm { + padding: var(--spacing-sm); + } + + .p-md { + padding: var(--spacing-md); + } + + .p-lg { + padding: var(--spacing-lg); + } + + .p-xl { + padding: var(--spacing-xl); + } + + .p-xxl { + padding: var(--spacing-xxl); + } + /* Margin utilities */ - .m-xs { margin: var(--spacing-xs); } - .m-sm { margin: var(--spacing-sm); } - .m-md { margin: var(--spacing-md); } - .m-lg { margin: var(--spacing-lg); } - .m-xl { margin: var(--spacing-xl); } - .m-xxl { margin: var(--spacing-xxl); } - + .m-xs { + margin: var(--spacing-xs); + } + + .m-sm { + margin: var(--spacing-sm); + } + + .m-md { + margin: var(--spacing-md); + } + + .m-lg { + margin: var(--spacing-lg); + } + + .m-xl { + margin: var(--spacing-xl); + } + + .m-xxl { + margin: var(--spacing-xxl); + } + /* Gap utilities */ - .gap-xs { gap: var(--spacing-xs); } - .gap-sm { gap: var(--spacing-sm); } - .gap-md { gap: var(--spacing-md); } - .gap-lg { gap: var(--spacing-lg); } - .gap-xl { gap: var(--spacing-xl); } - .gap-xxl { gap: var(--spacing-xxl); } - + .gap-xs { + gap: var(--spacing-xs); + } + + .gap-sm { + gap: var(--spacing-sm); + } + + .gap-md { + gap: var(--spacing-md); + } + + .gap-lg { + gap: var(--spacing-lg); + } + + .gap-xl { + gap: var(--spacing-xl); + } + + .gap-xxl { + gap: var(--spacing-xxl); + } + /* === ENHANCED CARD SHADOW UTILITIES === */ .card-shadow-subtle { box-shadow: var(--shadow-card-subtle); } - + .card-shadow-base { box-shadow: var(--shadow-card-base); } - + .card-shadow-elevated { box-shadow: var(--shadow-card-elevated); } - + .card-shadow-hover { box-shadow: var(--shadow-card-hover); } - + .card-shadow-dramatic { box-shadow: var(--shadow-card-dramatic); } - + /* Enhanced card hover effects */ .card-hover-lift { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - + .card-hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } - + .card-hover-dramatic { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } - + .card-hover-dramatic:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-dramatic); } - + /* Text clamping utilities */ .line-clamp-1 { display: -webkit-box; @@ -815,7 +915,7 @@ html { overflow: hidden; text-overflow: ellipsis; } - + .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; @@ -823,7 +923,7 @@ html { overflow: hidden; text-overflow: ellipsis; } - + .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; @@ -835,6 +935,7 @@ html { /* === STICKY NAVIGATION STYLES === */ @layer components { + /* Sticky Navigation Container */ .sticky-nav { position: sticky !important; @@ -845,21 +946,21 @@ html { -webkit-backdrop-filter: blur(10px) !important; transition: all 0.2s ease-in-out !important; } - + /* Enhanced dropdown menu positioning for sticky nav */ .sticky-nav [data-radix-popper-content-wrapper] { z-index: 60 !important; } - + /* Mobile sheet overlay should be above sticky nav */ [data-radix-dialog-overlay] { z-index: 70 !important; } - + [data-radix-dialog-content] { z-index: 75 !important; } - + /* Enhanced sticky navigation for better browser compatibility */ .navbar-sticky { position: -webkit-sticky !important; @@ -876,7 +977,7 @@ html { transition: all 0.3s ease-in-out !important; isolation: isolate !important; } - + /* Additional sticky support for webkit browsers */ @supports (position: -webkit-sticky) or (position: sticky) { .navbar-sticky { @@ -884,7 +985,7 @@ html { position: -webkit-sticky !important; } } - + /* Ensure content doesn't get hidden behind sticky navbar */ .main-content { padding-top: 0; @@ -892,7 +993,7 @@ html { /* Ensure proper stacking context */ isolation: isolate; } - + /* Enhanced sticky navbar on scroll */ .navbar-sticky.scrolled { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; @@ -903,16 +1004,34 @@ html { /* Z-index management for proper layering */ @layer utilities { - .z-navbar { z-index: 50; } - .z-dropdown { z-index: 60; } - .z-modal-overlay { z-index: 70; } - .z-modal-content { z-index: 75; } - .z-tooltip { z-index: 80; } - .z-popup-modal { z-index: 9999; } + .z-navbar { + z-index: 50; + } + + .z-dropdown { + z-index: 60; + } + + .z-modal-overlay { + z-index: 70; + } + + .z-modal-content { + z-index: 75; + } + + .z-tooltip { + z-index: 80; + } + + .z-popup-modal { + z-index: 9999; + } } /* === VIRTUAL SPACE MODAL STYLES === */ @layer components { + /* Enhanced modal overlay with backdrop blur */ .virtual-space-modal-overlay { backdrop-filter: blur(8px); @@ -955,6 +1074,7 @@ html { from { opacity: 0; } + to { opacity: 1; } @@ -965,6 +1085,7 @@ html { opacity: 0; transform: translateY(20px) scale(0.95); } + to { opacity: 1; transform: translateY(0) scale(1); @@ -986,14 +1107,14 @@ html { border-radius: 0.75rem; margin: 0; } - + /* Stack layout on mobile with proper height management */ .virtual-space-modal-container .grid { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; height: 100%; } - + .virtual-space-modal-divider { border-right: none; border-bottom: 1px solid rgba(229, 231, 235, 1); @@ -1251,12 +1372,12 @@ html { .virtual-space-no-scroll-modal { height: 95vh; } - + .virtual-space-compact-section { padding: 0.5rem; margin-bottom: 0.5rem; } - + .virtual-space-compact-input { height: 1.75rem; font-size: 0.7rem; @@ -1275,7 +1396,8 @@ html { /* Ensure smooth scrolling when nav is sticky */ html { scroll-behavior: smooth; - scroll-padding-top: 6rem; /* Account for sticky nav height */ + scroll-padding-top: 6rem; + /* Account for sticky nav height */ } /* Custom animations for slide transitions */ @@ -1284,6 +1406,7 @@ html { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); @@ -1315,9 +1438,11 @@ html { 0% { transform: scale(1); } + 50% { transform: scale(1.02); } + 100% { transform: scale(1); } @@ -1332,6 +1457,7 @@ html { 0% { transform: translateX(0); } + 100% { transform: translateX(-50%); } @@ -1341,6 +1467,7 @@ html { 0% { transform: translateX(-50%); } + 100% { transform: translateX(0); } @@ -1356,6 +1483,7 @@ html { 0% { transform: translateX(0); } + 100% { transform: translateX(-25%); } @@ -1365,6 +1493,7 @@ html { 0% { transform: translateX(-25%); } + 100% { transform: translateX(0); } @@ -1414,7 +1543,7 @@ html { .scroll-left { animation-duration: 50s; } - + .scroll-right { animation-duration: 55s; } @@ -1424,11 +1553,11 @@ html { .scroll-left { animation-duration: 40s; } - + .scroll-right { animation-duration: 45s; } - + .logo-ticker-item:hover img { transform: scale(1.03); } @@ -1438,7 +1567,7 @@ html { .scroll-left { animation-duration: 30s; } - + .scroll-right { animation-duration: 35s; } @@ -1466,6 +1595,7 @@ html { from { transform: scale(1.1); } + to { transform: scale(1); } @@ -1481,6 +1611,7 @@ html { opacity: 0; transform: translateY(60px); } + to { opacity: 1; transform: translateY(0); @@ -1492,6 +1623,7 @@ html { opacity: 0; transform: translateY(-60px); } + to { opacity: 1; transform: translateY(0); @@ -1503,6 +1635,7 @@ html { opacity: 0; transform: scale(0.95); } + to { opacity: 1; transform: scale(1); @@ -1531,6 +1664,7 @@ html { opacity: 0; transform: translateX(80px); } + to { opacity: 1; transform: translateX(0); @@ -1542,6 +1676,7 @@ html { opacity: 1; transform: translateX(0); } + to { opacity: 0; transform: translateX(-80px); @@ -1563,6 +1698,7 @@ html { transform: scale(1.15) translateY(30px); opacity: 0; } + to { transform: scale(1) translateY(0); opacity: 1; @@ -1579,6 +1715,7 @@ html { width: 0; opacity: 0.5; } + to { opacity: 1; } @@ -1594,6 +1731,7 @@ html { opacity: 0; transform: translateY(80px) scale(0.95); } + to { opacity: 1; transform: translateY(0) scale(1); @@ -1611,6 +1749,7 @@ html { transform: translateY(40px); filter: blur(2px); } + to { opacity: 1; transform: translateY(0); @@ -1628,6 +1767,7 @@ html { transform: translateY(0) scale(1); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } + to { transform: translateY(-4px) scale(1); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); @@ -1647,6 +1787,7 @@ html { from { transform: scale(1); } + to { transform: scale(1.05); } @@ -1658,10 +1799,13 @@ html { /* Service card icon animation */ @keyframes service-icon-pulse { - 0%, 100% { + + 0%, + 100% { transform: scale(1); opacity: 0.9; } + 50% { transform: scale(1.1); opacity: 1; @@ -1681,9 +1825,11 @@ html { 0% { transform: translateX(0); } + 50% { transform: translateX(4px); } + 100% { transform: translateX(0); } @@ -1699,18 +1845,36 @@ html { opacity: 0; transform: translateY(40px); } + to { opacity: 1; transform: translateY(0); } } -.grid-item-1 { animation-delay: 0.1s; } -.grid-item-2 { animation-delay: 0.2s; } -.grid-item-3 { animation-delay: 0.3s; } -.grid-item-4 { animation-delay: 0.4s; } -.grid-item-5 { animation-delay: 0.5s; } -.grid-item-6 { animation-delay: 0.6s; } +.grid-item-1 { + animation-delay: 0.1s; +} + +.grid-item-2 { + animation-delay: 0.2s; +} + +.grid-item-3 { + animation-delay: 0.3s; +} + +.grid-item-4 { + animation-delay: 0.4s; +} + +.grid-item-5 { + animation-delay: 0.5s; +} + +.grid-item-6 { + animation-delay: 0.6s; +} /* Responsive grid layout enhancements */ @media (max-width: 1024px) { @@ -1747,27 +1911,31 @@ html { /* LearningOnline Hero Header - 2 Line Control */ .text-h1-white { - white-space: nowrap; /* Prevent automatic wrapping */ - overflow-wrap: normal; /* Don't break words */ + /* white-space: nowrap; */ + overflow-wrap: normal; + /* Don't break words */ } /* Responsive font sizing to ensure 2-line fit */ @media (max-width: 768px) { .text-h1-white { - font-size: 2.5rem !important; /* Smaller on mobile to fit 2 lines */ + font-size: 2.5rem !important; + /* Smaller on mobile to fit 2 lines */ line-height: 1.1 !important; } } @media (max-width: 480px) { .text-h1-white { - font-size: 2rem !important; /* Even smaller on very small screens */ + font-size: 2rem !important; + /* Even smaller on very small screens */ line-height: 1.1 !important; } } .articles-hero-stats .stat-number { - font-size: 3.75rem; /* 60px */ + font-size: 3.75rem; + /* 60px */ font-weight: 500; line-height: 1.1; color: white; @@ -1786,11 +1954,12 @@ html { .articles-hero-stats { gap: 3rem; } - + .articles-hero-stats .stat-number { - font-size: 3.25rem; /* 52px */ + font-size: 3.25rem; + /* 52px */ } - + .articles-hero-stats .stat-label { font-size: var(--font-small); } @@ -1802,11 +1971,12 @@ html { grid-template-columns: 1fr; max-width: 300px !important; } - + .articles-hero-stats .stat-number { - font-size: 2.75rem; /* 44px */ + font-size: 2.75rem; + /* 44px */ } - + .articles-hero-stats .stat-label { font-size: var(--font-small); } @@ -1818,11 +1988,12 @@ html { grid-template-columns: 1fr; max-width: 280px !important; } - + .articles-hero-stats .stat-number { - font-size: 2.5rem; /* 40px */ + font-size: 2.5rem; + /* 40px */ } - + .articles-hero-stats .stat-label { font-size: var(--font-small); } @@ -1834,11 +2005,12 @@ html { grid-template-columns: 1fr; max-width: 260px !important; } - + .articles-hero-stats .stat-number { - font-size: 2.25rem; /* 36px */ + font-size: 2.25rem; + /* 36px */ } - + .articles-hero-stats .stat-label { font-size: 0.75rem; } @@ -1974,7 +2146,8 @@ html { /* Change default background from yellow to blue */ .primary-cta-button .bg-\[#F8C301\] { - background-color: #04045B !important; /* Blue background instead of yellow */ + background-color: #04045B !important; + /* Blue background instead of yellow */ } .primary-cta-button div[class*="bg-[#F8C301]"] { @@ -1989,7 +2162,7 @@ html { background-color: #04045B !important; } -.primary-cta-button .relative.shrink-0.size-\[50px\] > div:first-child { +.primary-cta-button .relative.shrink-0.size-\[50px\]>div:first-child { background-color: #04045B !important; } @@ -2002,12 +2175,14 @@ html { .primary-cta-button .text-element, .primary-cta-button .text-layer *, .primary-cta-button .text-element * { - color: #26231A !important; /* Black text for blue background */ + color: #26231A !important; + /* Black text for blue background */ } /* Change default hover background to darker blue */ .primary-cta-button:hover .bg-\[#F8C301\] { - background-color: #030359 !important; /* Darker blue on hover */ + background-color: #030359 !important; + /* Darker blue on hover */ } .primary-cta-button:hover div[class*="bg-[#F8C301]"] { @@ -2022,7 +2197,7 @@ html { background-color: #030359 !important; } -.primary-cta-button:hover .relative.shrink-0.size-\[50px\] > div:first-child { +.primary-cta-button:hover .relative.shrink-0.size-\[50px\]>div:first-child { background-color: #030359 !important; } @@ -2035,7 +2210,8 @@ html { .primary-cta-button:hover .text-element, .primary-cta-button:hover .text-layer *, .primary-cta-button:hover .text-element * { - color: #26231A !important; /* Keep black text on hover */ + color: #26231A !important; + /* Keep black text on hover */ } /* === PRIMARY CTA BUTTON VARIANT STYLES === */ @@ -2045,7 +2221,8 @@ html { .primary-cta-button.cta-text-black .text-element, .primary-cta-button.cta-text-black .text-layer *, .primary-cta-button.cta-text-black .text-element * { - color: #26231A !important; /* Brand black */ + color: #26231A !important; + /* Brand black */ text-shadow: none !important; } @@ -2063,8 +2240,10 @@ html { .primary-cta-button.cta-text-white .text-element, .primary-cta-button.cta-text-white .text-layer *, .primary-cta-button.cta-text-white .text-element * { - color: #FFFFFF !important; /* White text */ - text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important; /* subtle for contrast on dark */ + color: #FFFFFF !important; + /* White text */ + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important; + /* subtle for contrast on dark */ } /* Ensure white text also wins in hero-slide-button wrappers */ @@ -2073,7 +2252,7 @@ html { .hero-slide-button .primary-cta-button.cta-text-white .text-layer *, .hero-slide-button .primary-cta-button.cta-text-white .text-element * { color: #FFFFFF !important; - text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important; } /* Explicit black text variant that overrides any context (including hero-slide-button) */ @@ -2081,7 +2260,8 @@ html { .primary-cta-button.cta-text-black .text-element, .primary-cta-button.cta-text-black .text-layer *, .primary-cta-button.cta-text-black .text-element * { - color: #26231A !important; /* Brand black */ + color: #26231A !important; + /* Brand black */ text-shadow: none !important; } @@ -2096,7 +2276,8 @@ html { /* Blue Primary CTA Button Variant */ .primary-cta-button-blue .bg-\[#F8C301\] { - background-color: #04045B !important; /* Brand Blue instead of Yellow */ + background-color: #04045B !important; + /* Brand Blue instead of Yellow */ } .primary-cta-button-blue div[class*="bg-[#F8C301]"] { @@ -2111,7 +2292,7 @@ html { background-color: #04045B !important; } -.primary-cta-button-blue .relative.shrink-0.size-\[50px\] > div:first-child { +.primary-cta-button-blue .relative.shrink-0.size-\[50px\]>div:first-child { background-color: #04045B !important; } @@ -2124,12 +2305,14 @@ html { .primary-cta-button-blue .text-element, .primary-cta-button-blue .text-layer *, .primary-cta-button-blue .text-element * { - color: #26231A !important; /* Black text for blue background */ + color: #26231A !important; + /* Black text for blue background */ } /* Blue variant hover states */ .primary-cta-button-blue:hover .bg-\[#F8C301\] { - background-color: #030359 !important; /* Darker blue on hover */ + background-color: #030359 !important; + /* Darker blue on hover */ } .primary-cta-button-blue:hover div[class*="bg-[#F8C301]"] { @@ -2144,7 +2327,7 @@ html { background-color: #030359 !important; } -.primary-cta-button-blue:hover .relative.shrink-0.size-\[50px\] > div:first-child { +.primary-cta-button-blue:hover .relative.shrink-0.size-\[50px\]>div:first-child { background-color: #030359 !important; } @@ -2157,7 +2340,8 @@ html { .primary-cta-button-blue:hover .text-element, .primary-cta-button-blue:hover .text-layer *, .primary-cta-button-blue:hover .text-element * { - color: #26231A !important; /* Keep black text on hover */ + color: #26231A !important; + /* Keep black text on hover */ } /* Yellow Primary CTA Button Variant (Default - No overrides needed) */ @@ -2182,7 +2366,7 @@ html { background-color: var(--custom-bg-color, #F8C301) !important; } -.primary-cta-button-custom .relative.shrink-0.size-\[50px\] > div:first-child { +.primary-cta-button-custom .relative.shrink-0.size-\[50px\]>div:first-child { background-color: var(--custom-bg-color, #F8C301) !important; } @@ -2215,7 +2399,7 @@ html { background-color: var(--custom-hover-bg-color, var(--custom-bg-color, #F8C301)) !important; } -.primary-cta-button-custom:hover .relative.shrink-0.size-\[50px\] > div:first-child { +.primary-cta-button-custom:hover .relative.shrink-0.size-\[50px\]>div:first-child { background-color: var(--custom-hover-bg-color, var(--custom-bg-color, #F8C301)) !important; } @@ -2319,17 +2503,17 @@ html { .primary-cta-button { gap: 8px !important; } - + .primary-cta-button .size-\[50px\] { width: 48px !important; height: 48px !important; } - + .primary-cta-button .text-layer { font-size: 18px !important; height: 24px !important; } - + .primary-cta-button .text-element { font-size: 18px !important; line-height: 24px !important; @@ -2341,17 +2525,17 @@ html { .primary-cta-button { gap: 6px !important; } - + .primary-cta-button .size-\[50px\] { width: 46px !important; height: 46px !important; } - + .primary-cta-button .text-layer { font-size: 16px !important; height: 22px !important; } - + .primary-cta-button .text-element { font-size: 16px !important; line-height: 22px !important; @@ -2397,7 +2581,8 @@ html { /* Management Development Section - Primary CTA Button on Dark Background */ .primary-cta-button.management-dev-primary-cta .bg-\[#F8C301\] { - background-color: #F8C301 !important; /* Yellow background for dark background */ + background-color: #F8C301 !important; + /* Yellow background for dark background */ } .primary-cta-button.management-dev-primary-cta div[class*="bg-[#F8C301]"] { @@ -2412,7 +2597,7 @@ html { background-color: #F8C301 !important; } -.primary-cta-button.management-dev-primary-cta .relative.shrink-0.size-\[50px\] > div:first-child { +.primary-cta-button.management-dev-primary-cta .relative.shrink-0.size-\[50px\]>div:first-child { background-color: #F8C301 !important; } @@ -2429,12 +2614,14 @@ html { .primary-cta-button.management-dev-primary-cta .text-element, .primary-cta-button.management-dev-primary-cta .text-layer *, .primary-cta-button.management-dev-primary-cta .text-element * { - color: #FFFFFF !important; /* White text for yellow background */ + color: #FFFFFF !important; + /* White text for yellow background */ } /* Management Development Section - Hover states */ .primary-cta-button.management-dev-primary-cta:hover .bg-\[#F8C301\] { - background-color: #E6AF01 !important; /* Darker yellow on hover */ + background-color: #E6AF01 !important; + /* Darker yellow on hover */ } .primary-cta-button.management-dev-primary-cta:hover div[class*="bg-[#F8C301]"] { @@ -2449,7 +2636,7 @@ html { background-color: #E6AF01 !important; } -.primary-cta-button.management-dev-primary-cta:hover .relative.shrink-0.size-\[50px\] > div:first-child { +.primary-cta-button.management-dev-primary-cta:hover .relative.shrink-0.size-\[50px\]>div:first-child { background-color: #E6AF01 !important; } @@ -2465,22 +2652,26 @@ html { .primary-cta-button.management-dev-primary-cta:hover .text-element, .primary-cta-button.management-dev-primary-cta:hover .text-layer *, .primary-cta-button.management-dev-primary-cta:hover .text-element * { - color: #FFFFFF !important; /* Keep white text on hover */ + color: #FFFFFF !important; + /* Keep white text on hover */ } /* Management Development Section - Glassmorphic Download Button */ .management-dev-glassmorphic-btn { - background: #04045b !important; /* Semi-transparent blue */ + background: #04045b !important; + /* Semi-transparent blue */ backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 10px !important; - box-shadow: + box-shadow: 0 8px 32px rgba(4, 4, 91, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; color: white !important; position: relative; overflow: hidden; + font-size: 14px !important; + cursor: pointer; } /* Glassmorphic button inner glow */ @@ -2491,17 +2682,17 @@ html { left: 0; right: 0; bottom: 0; - background: linear-gradient(135deg, - rgba(255, 255, 255, 0.1) 0%, - rgba(255, 255, 255, 0.05) 50%, - rgba(4, 4, 91, 0.1) 100%); + background: linear-gradient(135deg, + rgba(255, 255, 255, 0.1) 0%, + rgba(255, 255, 255, 0.05) 50%, + rgba(4, 4, 91, 0.1) 100%); border-radius: 10px; pointer-events: none; z-index: 0; } /* Ensure content is above the pseudo-element */ -.management-dev-glassmorphic-btn > * { +.management-dev-glassmorphic-btn>* { position: relative; z-index: 1; } @@ -2510,7 +2701,7 @@ html { .management-dev-glassmorphic-btn:hover { /* background: rgba(4, 4, 91, 0.25) !important; */ border-color: rgba(255, 255, 255, 0.3) !important; - box-shadow: + box-shadow: 0 12px 40px rgba(4, 4, 91, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(4, 4, 91, 0.3) !important; @@ -2521,17 +2712,17 @@ html { /* Enhanced hover glow */ .management-dev-glassmorphic-btn:hover::before { - background: linear-gradient(135deg, - rgba(255, 255, 255, 0.15) 0%, - rgba(255, 255, 255, 0.08) 50%, - rgba(4, 4, 91, 0.15) 100%); + background: linear-gradient(135deg, + rgba(255, 255, 255, 0.15) 0%, + rgba(255, 255, 255, 0.08) 50%, + rgba(4, 4, 91, 0.15) 100%); } /* Focus state for accessibility */ .management-dev-glassmorphic-btn:focus { outline: none !important; border-color: rgba(248, 195, 1, 0.5) !important; - box-shadow: + box-shadow: 0 0 0 3px rgba(248, 195, 1, 0.2), 0 8px 32px rgba(4, 4, 91, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; @@ -2540,7 +2731,7 @@ html { /* Active state */ .management-dev-glassmorphic-btn:active { transform: translateY(-1px) !important; - box-shadow: + box-shadow: 0 6px 24px rgba(4, 4, 91, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } @@ -2558,7 +2749,8 @@ html { /* CTA Banner Section - Unique Yellow Button */ .primary-cta-button.cta-banner-yellow .bg-\[#F8C301\] { - background-color: #F8C301 !important; /* Yellow background */ + background-color: #F8C301 !important; + /* Yellow background */ } .primary-cta-button.cta-banner-yellow div[class*="bg-[#F8C301]"] { @@ -2573,7 +2765,7 @@ html { background-color: #F8C301 !important; } -.primary-cta-button.cta-banner-yellow .relative.shrink-0.size-\[50px\] > div:first-child { +.primary-cta-button.cta-banner-yellow .relative.shrink-0.size-\[50px\]>div:first-child { background-color: #F8C301 !important; } @@ -2590,12 +2782,14 @@ html { .primary-cta-button.cta-banner-yellow .text-element, .primary-cta-button.cta-banner-yellow .text-layer *, .primary-cta-button.cta-banner-yellow .text-element * { - color: #FFFFFF !important; /* White text for yellow background */ + color: #FFFFFF !important; + /* White text for yellow background */ } /* CTA Banner Section - Yellow hover states */ .primary-cta-button.cta-banner-yellow:hover .bg-\[#F8C301\] { - background-color: #E6AF01 !important; /* Darker yellow on hover */ + background-color: #E6AF01 !important; + /* Darker yellow on hover */ } .primary-cta-button.cta-banner-yellow:hover div[class*="bg-[#F8C301]"] { @@ -2610,7 +2804,7 @@ html { background-color: #E6AF01 !important; } -.primary-cta-button.cta-banner-yellow:hover .relative.shrink-0.size-\[50px\] > div:first-child { +.primary-cta-button.cta-banner-yellow:hover .relative.shrink-0.size-\[50px\]>div:first-child { background-color: #E6AF01 !important; } @@ -2626,7 +2820,8 @@ html { .primary-cta-button.cta-banner-yellow:hover .text-element, .primary-cta-button.cta-banner-yellow:hover .text-layer *, .primary-cta-button.cta-banner-yellow:hover .text-element * { - color: #FFFFFF !important; /* Keep white text on hover */ + color: #FFFFFF !important; + /* Keep white text on hover */ } /* === LANDING PAGE SPECIFIC CTA BUTTON OVERRIDES === */ @@ -2719,7 +2914,8 @@ html { .primary-cta-button.get-started-cta-override:hover .bg-\[#F8C301\], .primary-cta-button.explore-all-cta-override:hover .bg-\[#F8C301\], .primary-cta-button.browse-resources-cta-override:hover .bg-\[#F8C301\] { - background-color: #030359 !important; /* Slightly darker blue on hover */ + background-color: #030359 !important; + /* Slightly darker blue on hover */ } .primary-cta-button.navbar-cta-override:hover .text-layer, @@ -2754,7 +2950,7 @@ html { } /* Hero CTA Button Animation */ -.hero-description + button { +.hero-description+button { animation: hero-fade-in-up 1s ease-out 0.4s both; margin-top: 0; } @@ -2862,17 +3058,17 @@ html { .hero-slide-button { gap: 8px !important; } - + .hero-slide-button .size-\[50px\] { width: 48px !important; height: 48px !important; } - + .hero-slide-button .text-layer { font-size: 18px !important; height: 24px !important; } - + .hero-slide-button .text-element { font-size: 18px !important; line-height: 24px !important; @@ -2884,17 +3080,17 @@ html { .hero-slide-button { gap: 6px !important; } - + .hero-slide-button .size-\[50px\] { width: 46px !important; height: 46px !important; } - + .hero-slide-button .text-layer { font-size: 16px !important; height: 22px !important; } - + .hero-slide-button .text-element { font-size: 16px !important; line-height: 22px !important; @@ -3076,19 +3272,25 @@ html { opacity: 0; transform: translateY(30px); } + to { opacity: 1; transform: translateY(0); } } +/* responsive code */ +.exp-our-head-tab-sec { + display: none !important; +} + /* Responsive Design for Hero Section */ @media (max-width: 1024px) { .hero-content { padding-left: 2rem; padding-right: 2rem; } - + .hero-navigation { padding-left: 2rem; padding-right: 2rem; @@ -3099,24 +3301,37 @@ html { margin-left: 2rem; margin-right: 2rem; } - + .hero-text-section { max-width: 900px; } - + .hero-title { - font-size: 2.75rem; /* Smaller than 5rem for tablet */ + font-size: 2.75rem; + /* Smaller than 5rem for tablet */ } - + .hero-description { font-size: var(--font-body); max-width: 500px; } - + .hero-progress-container { gap: 1.5rem; width: 70%; } + + .virtual-learn-sec { + height: 100% !important; + } + + .exp-our-head-desktop-sec { + display: none !important; + } + + .exp-our-head-tab-sec { + display: block !important; + } } @media (max-width: 768px) { @@ -3124,27 +3339,28 @@ html { height: 75vh; min-height: 690px; } - + .hero-content { padding-left: 1.5rem; padding-right: 1.5rem; } - + .hero-text-section { max-width: 100%; } - + .hero-title { - font-size: 2.25rem; /* Further reduced for mobile */ + font-size: 2.25rem; + /* Further reduced for mobile */ margin-bottom: 1rem; } - + .hero-description { font-size: var(--font-body); margin-bottom: 2rem; max-width: 400px; } - + .hero-navigation { flex-direction: column; gap: 1.5rem; @@ -3156,23 +3372,23 @@ html { margin-left: 1.5rem; margin-right: 1.5rem; } - + .hero-progress-container { gap: 1rem; order: 2; width: 70%; } - + .hero-controls { margin-left: 0; justify-content: center; order: 1; } - + .hero-progress-item { text-align: center; } - + .hero-progress-text { font-size: 0.75rem; } @@ -3183,46 +3399,56 @@ html { padding-left: 1rem; padding-right: 1rem; } - + .hero-text-section { max-width: 100%; + margin-top: -12rem; } - + .hero-title { - font-size: 1.875rem; /* Mobile optimized */ + font-size: 1.875rem; + /* Mobile optimized */ } - + .hero-description { max-width: 320px; } - + .hero-progress-container { flex-direction: column; gap: 1rem; } - + .hero-progress-item { display: flex; align-items: center; gap: 1rem; } - + .hero-progress-segment { margin-bottom: 0; flex: 1; } - + .hero-progress-number { margin-bottom: 0; min-width: 2rem; } - + .hero-progress-text { flex: 1; text-align: left; } } +@media (max-width: 420px) { + + .hero-text-section { + max-width: 100%; + margin-top: -14rem; + } +} + /* Hero CTA Button */ .hero-cta-button { display: flex; @@ -3282,12 +3508,12 @@ html { height: 48px; font-size: var(--font-body); } - + .hero-cta-icon { width: 48px; height: 48px; } - + .hero-cta-text { margin-left: 42px; } @@ -3300,12 +3526,12 @@ html { height: 46px; font-size: var(--font-small); } - + .hero-cta-icon { width: 46px; height: 46px; } - + .hero-cta-text { margin-left: 40px; } @@ -3414,12 +3640,12 @@ html { .services-modern-grid { gap: 4rem 3rem; } - + .service-icon-background { width: 3.25rem; height: 3.25rem; } - + .service-icon { width: 1.625rem; height: 1.625rem; @@ -3431,26 +3657,26 @@ html { grid-template-columns: repeat(2, 1fr); gap: 4rem 3rem; } - + .service-heading { font-size: var(--font-h3); margin-bottom: 1.25rem; } - + .service-additional-line { font-size: var(--font-small); } - + .service-icon-background { width: 3rem; height: 3rem; } - + .service-icon { width: 1.5rem; height: 1.5rem; } - + .service-stroke-line { width: 100%; margin-bottom: 1.25rem; @@ -3463,31 +3689,31 @@ html { gap: 3.5rem; margin-top: 3rem; } - + .service-icon-container { margin-bottom: 1.25rem; } - + .service-icon-background { width: 2.75rem; height: 2.75rem; } - + .service-icon { width: 1.375rem; height: 1.375rem; } - + .service-stroke-line { width: 100%; margin-bottom: 1.125rem; } - + .service-heading { font-size: var(--font-subhead); margin-bottom: 1.125rem; } - + .service-additional-line { font-size: 0.8rem; line-height: 1.4; @@ -3499,32 +3725,32 @@ html { gap: 3rem; margin-top: 2.5rem; } - + .service-icon-container { margin-bottom: 1rem; } - + .service-icon-background { width: 2.5rem; height: 2.5rem; } - + .service-icon { width: 1.25rem; height: 1.25rem; } - + .service-stroke-line { width: 100%; height: 1px; margin-bottom: 1rem; } - + .service-heading { font-size: var(--font-subhead); margin-bottom: 1rem; } - + .service-additional-line { font-size: 0.75rem; line-height: 1.3; @@ -3585,11 +3811,11 @@ html { padding-right: 2rem; gap: 0.75rem; } - + .notification-text { font-size: var(--font-small); } - + .notification-button { font-size: var(--font-small); padding: 0.25rem 0.5rem; @@ -3605,12 +3831,12 @@ html { padding-top: 0.5rem; padding-bottom: 0.5rem; } - + .notification-text { font-size: var(--font-small); text-align: center; } - + .notification-button { font-size: var(--font-small); } @@ -3621,11 +3847,11 @@ html { padding-left: 0.75rem; padding-right: 0.75rem; } - + .notification-text { font-size: 0.8rem; } - + .notification-button { font-size: 0.8rem; padding: 0.2rem 0.5rem; @@ -3694,12 +3920,12 @@ html { height: 48px; font-size: var(--font-body); } - + .services-cta-icon { width: 48px; height: 48px; } - + .services-cta-text { margin-left: 42px; } @@ -3712,12 +3938,12 @@ html { height: 46px; font-size: var(--font-small); } - + .services-cta-icon { width: 46px; height: 46px; } - + .services-cta-text { margin-left: 40px; } @@ -3727,7 +3953,8 @@ html { /* Custom font sizes for statistics numbers */ .stats-number { - font-size: 3.5rem; /* Base mobile/tablet size - using token equivalent */ + font-size: 3.5rem; + /* Base mobile/tablet size - using token equivalent */ font-weight: var(--font-weight-h1); line-height: 1.1; color: var(--color-primary); @@ -3735,7 +3962,8 @@ html { @media (min-width: 1024px) { .stats-number { - font-size: 4.5rem; /* Desktop size - larger but reasonable */ + font-size: 4.5rem; + /* Desktop size - larger but reasonable */ } } @@ -4102,6 +4330,7 @@ html { opacity: 0; transform: scale(0.95) translateY(20px); } + to { opacity: 1; transform: scale(1) translateY(0); @@ -4114,6 +4343,7 @@ html { opacity: 0; transform: translateX(30px); } + to { opacity: 1; transform: translateX(0); @@ -4122,10 +4352,13 @@ html { /* Pulse animation for central hub */ @keyframes hub-pulse { - 0%, 100% { + + 0%, + 100% { transform: scale(1); opacity: 0.8; } + 50% { transform: scale(1.05); opacity: 1; @@ -4139,10 +4372,13 @@ html { /* Connection line glow animation */ @keyframes connection-glow { - 0%, 100% { + + 0%, + 100% { opacity: 0.3; filter: blur(0px); } + 50% { opacity: 0.6; filter: blur(1px) brightness(1.2); @@ -4150,17 +4386,15 @@ html { } /* Framework dimension hover state enhancements */ -.framework-dimension:hover ~ .connection-lines .horizontal-line, -.framework-dimension:hover ~ .connection-lines .vertical-line { +.framework-dimension:hover~.connection-lines .horizontal-line, +.framework-dimension:hover~.connection-lines .vertical-line { animation: connection-glow 1.5s ease-in-out infinite; - background: linear-gradient( - 90deg, - transparent, - var(--color-accent), - var(--color-primary), - var(--color-accent), - transparent - ); + background: linear-gradient(90deg, + transparent, + var(--color-accent), + var(--color-primary), + var(--color-accent), + transparent); } /* Enhanced framework card interactions */ @@ -4176,11 +4410,9 @@ html { left: -50%; width: 200%; height: 200%; - background: radial-gradient( - circle, - rgba(4, 4, 91, 0.05) 0%, - transparent 70% - ); + background: radial-gradient(circle, + rgba(4, 4, 91, 0.05) 0%, + transparent 70%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; @@ -4192,29 +4424,46 @@ html { } /* Ensure content stays above the pseudo-element */ -.framework-dimension > * { +.framework-dimension>* { position: relative; z-index: 1; } /* Staggered reveal animation utility */ -.stagger-reveal-1 { animation-delay: 0.1s; } -.stagger-reveal-2 { animation-delay: 0.2s; } -.stagger-reveal-3 { animation-delay: 0.3s; } -.stagger-reveal-4 { animation-delay: 0.4s; } -.stagger-reveal-5 { animation-delay: 0.5s; } -.stagger-reveal-6 { animation-delay: 0.6s; } +.stagger-reveal-1 { + animation-delay: 0.1s; +} + +.stagger-reveal-2 { + animation-delay: 0.2s; +} + +.stagger-reveal-3 { + animation-delay: 0.3s; +} + +.stagger-reveal-4 { + animation-delay: 0.4s; +} + +.stagger-reveal-5 { + animation-delay: 0.5s; +} + +.stagger-reveal-6 { + animation-delay: 0.6s; +} /* Framework responsive enhancements */ @media (max-width: 1024px) { .framework-radial-container .connection-lines { display: none; } - + .framework-radial-container .central-hub { display: none; } - + .framework-dimension { margin-bottom: 1rem; } @@ -4225,7 +4474,7 @@ html { grid-template-columns: 1fr; gap: 1.5rem; } - + .framework-dimension .corner-accent { display: none; } @@ -4233,12 +4482,10 @@ html { /* Enhanced sidebar connection styling */ .sidebar-connection-line { - background: linear-gradient( - to bottom, - rgba(4, 4, 91, 0.3), - rgba(248, 195, 1, 0.2), - rgba(4, 4, 91, 0.3) - ); + background: linear-gradient(to bottom, + rgba(4, 4, 91, 0.3), + rgba(248, 195, 1, 0.2), + rgba(4, 4, 91, 0.3)); filter: blur(0.5px); } @@ -4254,10 +4501,13 @@ html { /* Connection dot pulse animation */ @keyframes dot-pulse { - 0%, 100% { + + 0%, + 100% { transform: scale(1); opacity: 0.8; } + 50% { transform: scale(1.2); opacity: 1; @@ -4270,12 +4520,10 @@ html { /* Enhanced CTA contrast block styling */ .framework-cta-block { - background: linear-gradient( - 135deg, - var(--color-primary) 0%, - #030359 50%, - var(--color-primary) 100% - ); + background: linear-gradient(135deg, + var(--color-primary) 0%, + #030359 50%, + var(--color-primary) 100%); position: relative; overflow: hidden; } @@ -4287,12 +4535,10 @@ html { left: -100%; width: 100%; height: 100%; - background: linear-gradient( - 90deg, - transparent, - rgba(255, 255, 255, 0.1), - transparent - ); + background: linear-gradient(90deg, + transparent, + rgba(255, 255, 255, 0.1), + transparent); animation: cta-shimmer 3s ease-in-out infinite; } @@ -4300,14 +4546,17 @@ html { 0% { left: -100%; } - 50%, 100% { + + 50%, + 100% { left: 100%; } } /* Text readability improvements */ .max-w-readable { - max-width: 65ch; /* Optimal reading width - 65 characters per line */ + max-width: 65ch; + /* Optimal reading width - 65 characters per line */ } .text-width-constrained { @@ -4428,35 +4677,35 @@ html { max-width: 100%; padding: 0 1rem; } - + .article-typography { max-width: 100%; padding: 0 1rem; } - + .blog-article-content h2 { font-size: var(--font-h4); margin-top: 2.5rem; margin-bottom: 1.25rem; } - + .blog-article-content h3 { font-size: var(--font-subhead); margin-top: 2rem; margin-bottom: 1rem; } - + .blog-article-content p { font-size: var(--font-body); line-height: 1.7; margin-bottom: 1.25rem; } - + .blog-article-content li { font-size: var(--font-body); line-height: 1.7; } - + .blog-article-content blockquote { padding: 1.25rem; margin: 1.5rem 0; @@ -4467,28 +4716,28 @@ html { .max-w-readable { padding: 0 0.75rem; } - + .article-typography { padding: 0 0.75rem; } - + .blog-article-content h2 { font-size: var(--font-subhead); margin-top: 2rem; margin-bottom: 1rem; } - + .blog-article-content h3 { font-size: var(--font-body-lg); margin-top: 1.75rem; margin-bottom: 0.875rem; } - + .blog-article-content p { font-size: var(--font-body); margin-bottom: 1rem; } - + .blog-article-content blockquote { padding: 1rem; margin: 1.25rem 0; @@ -4518,6 +4767,7 @@ html { /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { + .framework-dimension, .sidebar-theme-card, .connection-dot, @@ -4525,7 +4775,7 @@ html { animation: none !important; transition: none !important; } - + .framework-dimension:hover { transform: none !important; } @@ -4554,9 +4804,11 @@ html { 0% { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } + 50% { box-shadow: 0 4px 6px -1px rgba(4, 4, 91, 0.2), 0 2px 4px -1px rgba(4, 4, 91, 0.1); } + 100% { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } @@ -4612,9 +4864,17 @@ html { } @keyframes webinar-nav-click { - 0% { transform: translateY(-2px) scale(1.05); } - 50% { transform: translateY(-1px) scale(1.02); } - 100% { transform: translateY(-2px) scale(1.05); } + 0% { + transform: translateY(-2px) scale(1.05); + } + + 50% { + transform: translateY(-1px) scale(1.02); + } + + 100% { + transform: translateY(-2px) scale(1.05); + } } /* Responsive navigation adjustments */ @@ -4623,7 +4883,7 @@ html { gap: 0.5rem; margin-bottom: 1.75rem; } - + .webinars-strip-nav-btn { width: 3rem; height: 3rem; @@ -4636,7 +4896,7 @@ html { margin-bottom: 1.5rem; justify-content: flex-start; } - + .webinars-strip-nav-btn { width: 3rem; height: 3rem; @@ -4648,12 +4908,12 @@ html { gap: 0.375rem; margin-bottom: 1.25rem; } - + .webinars-strip-nav-btn { width: 3rem; height: 3rem; } - + .webinars-strip-nav-btn svg { width: 1.25rem; height: 1.25rem; @@ -4664,7 +4924,8 @@ html { /* Increase CourseCard width specifically for OurExpertise page */ .our-expertise-page .flex-shrink-0.w-80 { - width: 24rem !important; /* Increased from 20rem (w-80) to 24rem (w-96) */ + width: 24rem !important; + /* Increased from 20rem (w-80) to 24rem (w-96) */ } /* Alternative selector for CourseCard component override */ @@ -4675,9 +4936,10 @@ html { /* Responsive width adjustments for OurExpertise course cards */ @media (max-width: 1024px) { .our-expertise-page .flex-shrink-0.w-80 { - width: 22rem !important; /* Slightly smaller for tablet */ + width: 22rem !important; + /* Slightly smaller for tablet */ } - + .our-expertise-page .course-card { width: 22rem !important; } @@ -4685,9 +4947,10 @@ html { @media (max-width: 768px) { .our-expertise-page .flex-shrink-0.w-80 { - width: 20rem !important; /* Standard width for mobile */ + width: 20rem !important; + /* Standard width for mobile */ } - + .our-expertise-page .course-card { width: 20rem !important; } @@ -4695,9 +4958,10 @@ html { @media (max-width: 480px) { .our-expertise-page .flex-shrink-0.w-80 { - width: 18rem !important; /* Smaller for very small screens */ + width: 18rem !important; + /* Smaller for very small screens */ } - + .our-expertise-page .course-card { width: 18rem !important; } @@ -4788,6 +5052,7 @@ html { opacity: 0; transform: translateY(6px); } + to { opacity: 1; transform: translateY(0); @@ -4806,11 +5071,11 @@ html { width: 14px; height: 14px; } - + .filter-section label { font-size: 0.75rem !important; } - + .filter-section [data-radix-select-trigger] { height: 32px !important; font-size: 0.75rem !important; @@ -4865,22 +5130,22 @@ html { .grid.grid-cols-12 { display: block; } - + .col-span-5 { position: relative; top: auto; margin-bottom: 3rem; } - + .col-span-7 { width: 100%; } - + .recognition-header { text-align: center; padding-right: 0; } - + .min-h-screen { min-height: auto; } @@ -4905,20 +5170,20 @@ html { .recognition-card { margin-bottom: 1rem; } - + .recognition-header h2 { font-size: 2.5rem !important; margin-bottom: 1.5rem; } - + .recognition-header p { font-size: var(--font-body) !important; } - + .recognition-card div:first-child { padding: 1.5rem; } - + .w-14.h-14 { width: 3rem; height: 3rem; @@ -4929,7 +5194,8 @@ html { /* Chatbot button using brand blue */ .chatbot-button:hover { - background-color: #030359 !important; /* Darker blue on hover */ + background-color: #030359 !important; + /* Darker blue on hover */ box-shadow: 0 10px 40px rgba(4, 4, 91, 0.4) !important; } @@ -4943,7 +5209,7 @@ html { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; } - + .services-title { font-size: 2.5rem; } @@ -4954,32 +5220,32 @@ html { font-size: 2rem; margin-bottom: 1rem; } - + .services-description { font-size: var(--font-body); margin-bottom: 2rem; } - + .services-header { margin-bottom: 3rem; } - + .services-card-mobile { flex: 0 0 260px; padding: 1.25rem; } - + .services-card-icon { width: 3.5rem; height: 3.5rem; margin-bottom: 1.25rem; } - + .services-card-content .h3 { font-size: var(--font-subhead); margin-bottom: 0.875rem; } - + .services-card-description { font-size: var(--font-small); margin-bottom: 1.25rem; @@ -4990,32 +5256,32 @@ html { .services-title { font-size: 1.75rem; } - + .services-description { font-size: var(--font-small); } - + .services-card-mobile { flex: 0 0 240px; padding: 1rem; } - + .services-card-icon { width: 3rem; height: 3rem; margin-bottom: 1rem; } - + .services-card-content .h3 { font-size: var(--font-subhead); margin-bottom: 0.75rem; } - + .services-card-description { font-size: var(--font-small); margin-bottom: 1rem; } - + .services-nav-btn { width: 3rem; height: 3rem; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..3d0a51a --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..65dbdb9 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node" + }, + "include": ["vite.config.ts"] +}
+
{facility.description}
- Every aspect of our facility is designed to enhance learning outcomes + Every aspect of our facility is designed to enhance learning outcomes and provide an exceptional experience for participants and facilitators.
{feature.description}
- Premium amenities and services to ensure comfort, productivity, and an + Premium amenities and services to ensure comfort, productivity, and an exceptional learning environment for all participants.