KLC/KLC-Website-Frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

resp fixes

Browse Source
This commit is contained in:
priyanshuvish
2025-09-02 18:48:56 +05:30
parent a2f4dc1a3e
commit c37a70dfec
17 changed files with 1005 additions and 706 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/App.tsx
View File

@@ -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 (
<>
<HeroSection />
<StatsSection />
<LogosSection />
<ServicesSection />
<VirtualSpaceSection />
<TestimonialsSection />
<UpcomingWebinarsSection />
<InsightsSection />
<WhitepapersSection />
<CTABannerSection />
</>
);
}
// function HomePage() {
// return (
// <>
// <HeroSection />
// <StatsSection />
// <LogosSection />
// <ServicesSection />
// <VirtualSpaceSection />
// <TestimonialsSection />
// <UpcomingWebinarsSection />
// <InsightsSection />
// <WhitepapersSection />
// <CTABannerSection />
// </>
// );
// }
// 404 Not Found Component
function NotFound() {

BIN
src/assets/klc-logo-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/assets/klc-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

12
src/components/AIChatbot.tsx
View File

@@ -118,7 +118,7 @@ export function AIChatbot() {
const [inputValue, setInputValue] = useState('');
const [isTyping, setIsTyping] = useState(false);
const messagesEndRef = useRef<HTMLDivElement>(null);
const inactivityTimerRef = useRef<NodeJS.Timeout>();
const inactivityTimerRef = useRef<NodeJS.Timeout | null>(null);
// Show chatbot after user activity
useEffect(() => {
@@ -326,7 +326,7 @@ export function AIChatbot() {
{/* Chat Content */}
{!isMinimized && (
<CardContent className="p-0 flex flex-col h-[420px]">
<CardContent className="p-0 flex flex-col h-[420px] overflow-y-auto">
{/* Messages */}
<ScrollArea className="flex-1 p-4">
<div className="space-y-4">
@@ -373,11 +373,11 @@ export function AIChatbot() {
borderColor: 'var(--color-primary)'
}}
onClick={() => handleSuggestionClick(suggestion)}
onMouseEnter={(e) => {
onMouseEnter={(e:React.MouseEvent<HTMLButtonElement>) => {
e.currentTarget.style.backgroundColor = 'var(--color-primary)';
e.currentTarget.style.borderColor = 'var(--color-primary)';
}}
onMouseLeave={(e) => {
onMouseLeave={(e:React.MouseEvent<HTMLButtonElement>) => {
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<HTMLButtonElement>) => {
if (!e.currentTarget.disabled) {
e.currentTarget.style.backgroundColor = '#030359';
}
}}
onMouseLeave={(e) => {
onMouseLeave={(e:React.MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget.disabled) {
e.currentTarget.style.backgroundColor = 'var(--color-primary)';
}

6
src/components/BookingModal.tsx
View File

@@ -49,7 +49,7 @@ export function BookingModal({ isOpen, onClose, initialFacilityZone = "" }: Book
};
return (
<Dialog open={isOpen} onOpenChange={(open) => {
<Dialog open={isOpen} onOpenChange={(open: boolean) => {
if (!open) {
onClose();
}
@@ -129,7 +129,7 @@ export function BookingModal({ isOpen, onClose, initialFacilityZone = "" }: Book
<div className="space-y-2">
<Label htmlFor="teamSize" className="text-body font-medium">Expected Group Size *</Label>
<Select value={bookingForm.teamSize} onValueChange={(value) => updateFormField('teamSize', value)}>
<Select value={bookingForm.teamSize} onValueChange={(value:string) => updateFormField('teamSize', value)}>
<SelectTrigger className="text-body">
<SelectValue placeholder="Select group size" />
</SelectTrigger>
@@ -146,7 +146,7 @@ export function BookingModal({ isOpen, onClose, initialFacilityZone = "" }: Book
<div className="space-y-2">
<Label htmlFor="facilityZone" className="text-body font-medium">Preferred Learning Zone</Label>
<Select value={bookingForm.facilityZone} onValueChange={(value) => updateFormField('facilityZone', value)}>
<Select value={bookingForm.facilityZone} onValueChange={(value:string) => updateFormField('facilityZone', value)}>
<SelectTrigger className="text-body">
<SelectValue placeholder="Select preferred zone (optional)" />
</SelectTrigger>

2
src/components/CorporateSignIn.tsx
View File

@@ -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);
};

192
src/components/Navigation.tsx
View File

@@ -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 (
<Button
variant="ghost"
onClick={() => 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
<Button
key={subItem.href}
variant="ghost"
onClick={() => 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) => (
<DropdownMenuItem
key={subItem.href}
onClick={() => 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
<div
className="font-medium"
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontSize: '14px',
fontWeight: '400',
color: 'var(--color-black)',
fontFamily: 'var(--font-family-base)'
@@ -293,7 +296,7 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean
<div
className="mt-1"
style={{
fontSize: '12px', // Reduced from var(--font-small) by 2px
fontSize: '12px',
color: 'var(--color-gray-muted)',
fontFamily: 'var(--font-family-base)',
lineHeight: 'var(--line-height-small)'
@@ -312,10 +315,11 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean
function ProfileDropdown({ user }: { user: any }) {
const { signOut } = useAuth();
const navigate = useNavigate();
const handleSignOut = () => {
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 }) {
<div
className="font-medium"
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontSize: '14px',
fontWeight: '400',
fontFamily: 'var(--font-family-base)'
}}
@@ -351,7 +355,7 @@ function ProfileDropdown({ user }: { user: any }) {
</div>
<div
style={{
fontSize: '12px', // Reduced from var(--font-small) by 2px
fontSize: '12px',
color: 'var(--color-gray-muted)',
fontFamily: 'var(--font-family-base)'
}}
@@ -374,7 +378,7 @@ function ProfileDropdown({ user }: { user: any }) {
>
<DropdownMenuLabel
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontSize: '14px',
fontFamily: 'var(--font-family-base)'
}}
>
@@ -387,7 +391,7 @@ function ProfileDropdown({ user }: { user: any }) {
<div
className="font-normal"
style={{
fontSize: '12px', // Reduced from var(--font-small) by 2px
fontSize: '12px',
color: 'var(--color-gray-muted)'
}}
>
@@ -396,62 +400,17 @@ function ProfileDropdown({ user }: { user: any }) {
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => 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)'
}}
>
<LayoutDashboard className="w-4 h-4 mr-2" />
Dashboard
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => navigateTo('/team')}
className="min-h-[44px]"
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontFamily: 'var(--font-family-base)'
}}
>
<Users className="w-4 h-4 mr-2" />
Team Management
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => navigateTo('/profile')}
className="min-h-[44px]"
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontFamily: 'var(--font-family-base)'
}}
>
<User className="w-4 h-4 mr-2" />
Profile
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => navigateTo('/settings')}
className="min-h-[44px]"
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontFamily: 'var(--font-family-base)'
}}
>
<Settings className="w-4 h-4 mr-2" />
Settings
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={handleSignOut}
className="min-h-[44px]"
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontFamily: 'var(--font-family-base)',
color: 'var(--destructive)'
}}
>
<LogOut className="w-4 h-4 mr-2" />
Sign Out
</DropdownMenuItem>
{/* ... rest of the dropdown items with navigate() */}
</DropdownMenuContent>
</DropdownMenu>
);
@@ -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() {
>
<ShoppingCart className="w-5 h-5 text-gray-600" />
{/* Cart Count Badge */}
{cartCount > 0 && (
<div
className="absolute -top-1 -right-1 min-w-[18px] h-[18px] flex items-center justify-center rounded-full text-xs font-medium text-white animate-in fade-in zoom-in duration-300"
style={{
backgroundColor: '#dc2626', // Red background for notification
backgroundColor: '#dc2626',
fontSize: '11px',
fontFamily: 'var(--font-family-base)',
lineHeight: '1'
@@ -495,6 +454,7 @@ function CartIcon() {
export function Navigation({ currentPage }: NavigationProps) {
const [isScrolled, setIsScrolled] = useState(false);
const { user, isAuthenticated, signOut } = useAuth();
const navigate = useNavigate();
useEffect(() => {
const handleScroll = () => {
@@ -509,12 +469,12 @@ export function Navigation({ currentPage }: NavigationProps) {
const handleMobileSignOut = () => {
signOut();
navigateTo('/');
navigate('/');
};
return (
<>
{/* Top notification bar - PRESERVED */}
{/* Top notification bar */}
<div className="notification-strip">
<span className="notification-text">
Join Our Upcoming Leadership Webinars - Transform Your Leadership Journey
@@ -522,7 +482,7 @@ export function Navigation({ currentPage }: NavigationProps) {
<Button
variant="ghost"
size="sm"
onClick={() => navigateTo('/enroll')}
onClick={() => navigate('/enroll')}
className="notification-button"
>
Enroll Now
@@ -530,7 +490,7 @@ export function Navigation({ currentPage }: NavigationProps) {
</Button>
</div>
{/* Main navigation header - ENHANCED STICKY */}
{/* Main navigation header */}
<header
className={`w-full border-b transition-all duration-300 navbar-sticky ${isScrolled ? 'shadow-lg scrolled' : 'shadow-sm'}`}
style={{
@@ -544,7 +504,7 @@ export function Navigation({ currentPage }: NavigationProps) {
<Button
variant="ghost"
className="p-2 hover:bg-transparent"
onClick={() => navigateTo('/')}
onClick={() => navigate('/')}
>
<img
src={klcLogo}
@@ -555,7 +515,7 @@ export function Navigation({ currentPage }: NavigationProps) {
</div>
{/* Desktop Navigation */}
<div className="hidden lg:flex items-center gap-2">
<div className="hidden lg:flex items-center gap-0">
{navigationItems.map((item) => (
<NavLink key={item.label} item={item} />
))}
@@ -563,11 +523,8 @@ export function Navigation({ currentPage }: NavigationProps) {
{/* Right Side Actions */}
<div className="flex items-center gap-4">
{/* Cart Icon - Always visible */}
<CartIcon />
{/* Authentication Button/Profile */}
{isAuthenticated && user ? (
<div className="hidden md:flex">
<ProfileDropdown user={user} />
@@ -575,7 +532,7 @@ export function Navigation({ currentPage }: NavigationProps) {
) : (
<div className="hidden md:flex items-center">
<Button
onClick={() => 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) {
}}
>
<SheetHeader>
<SheetTitle
style={{
fontSize: 'var(--font-h4)',
fontFamily: 'var(--font-family-base)',
color: 'var(--color-black)'
}}
>
<SheetTitle>
Navigation
</SheetTitle>
</SheetHeader>
@@ -625,83 +576,14 @@ export function Navigation({ currentPage }: NavigationProps) {
))}
<div className="pt-4 border-t space-y-3">
{isAuthenticated && user ? (
<div className="space-y-3">
<div
className="flex items-center gap-3 p-3 rounded-lg"
style={{ backgroundColor: 'rgba(0, 0, 0, 0.05)' }}
>
<Avatar className="h-10 w-10">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback style={{ fontFamily: 'var(--font-family-base)' }}>
{user.name.split(' ').map((n: string) => n[0]).join('')}
</AvatarFallback>
</Avatar>
<div>
<div
className="font-medium"
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontWeight: '400',
fontFamily: 'var(--font-family-base)'
}}
>
{user.corporateName}
</div>
<div
style={{
fontSize: '12px', // Reduced from var(--font-small) by 2px
color: 'var(--color-gray-muted)',
fontFamily: 'var(--font-family-base)'
}}
>
{user.name}
</div>
</div>
</div>
<Button
variant="outline"
className="w-full justify-start min-h-[44px]"
onClick={() => navigateTo('/dashboard')}
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontFamily: 'var(--font-family-base)'
}}
>
<LayoutDashboard className="w-4 h-4 mr-2" />
Dashboard
</Button>
<Button
variant="outline"
className="w-full justify-start min-h-[44px]"
onClick={() => navigateTo('/profile')}
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontFamily: 'var(--font-family-base)'
}}
>
<User className="w-4 h-4 mr-2" />
Profile
</Button>
<Button
variant="outline"
className="w-full justify-start min-h-[44px]"
onClick={handleMobileSignOut}
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontFamily: 'var(--font-family-base)',
color: 'var(--destructive)'
}}
>
<LogOut className="w-4 h-4 mr-2" />
Sign Out
</Button>
{/* ... mobile user info and buttons with navigate() */}
</div>
) : (
<div className="space-y-2">
<Button
onClick={() => 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)',

2
src/components/SelfLearnerSignIn.tsx
View File

@@ -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);
};

2
src/components/SelfLearnerSignUp.tsx
View File

@@ -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);
};

2
src/components/StatsSection.tsx
View File

@@ -114,7 +114,7 @@ export function StatsSection() {
{/* Mobile Statistics - Show below content on mobile/tablet */}
<div className="block lg:hidden mt-12">
<div className="grid grid-cols-2 gap-6 sm:gap-8">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 sm:gap-8">
<StatItem
end={27000}
suffix="+"

15
src/components/VirtualSpaceSection.tsx
View File

@@ -118,6 +118,7 @@ function FacilityCard({ facility, index, onBookNow }: FacilityCardProps) {
transition={{ duration: 0.7, delay: index * 0.15 }}
viewport={{ once: true, margin: "-50px" }}
>
{/* Background Image - Full Height */}
<div className="absolute inset-0">
<ImageWithFallback
@@ -148,7 +149,7 @@ function FacilityCard({ facility, index, onBookNow }: FacilityCardProps) {
</h3>
{/* Description */}
<p className="text-white/90 leading-relaxed mb-6 text-base max-lg:text-sm text-center max-lg:mb-5">
<p className="text-white/90 leading-relaxed mb-6 text-base max-lg:text-sm text-center max-lg:mb-5 md:min-h-[110px]">
{facility.description}
</p>
@@ -596,7 +597,7 @@ function BookingModal({
<Label htmlFor="role" className="text-xs font-normal text-black mb-1 block">
Your Role *
</Label>
<Select value={bookingForm.role} onValueChange={(value) => updateFormField('role', value)}>
<Select value={bookingForm.role} onValueChange={(value:string) => updateFormField('role', value)}>
<SelectTrigger className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200">
<SelectValue placeholder="Role" className="text-gray-400 opacity-50" />
</SelectTrigger>
@@ -614,7 +615,7 @@ function BookingModal({
<Label htmlFor="teamSize" className="text-xs font-normal text-black mb-1 block">
Expected Team Size *
</Label>
<Select value={bookingForm.teamSize} onValueChange={(value) => updateFormField('teamSize', value)}>
<Select value={bookingForm.teamSize} onValueChange={(value:string) => updateFormField('teamSize', value)}>
<SelectTrigger className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200">
<SelectValue placeholder="Size" className="text-gray-400 opacity-50" />
</SelectTrigger>
@@ -743,7 +744,7 @@ export function VirtualSpaceSection() {
return (
<section className="relative overflow-hidden">
{/* Full-Width Image Section with Overlaid Content */}
<div className="relative h-screen min-h-[600px] max-h-[800px]">
<div className="relative h-screen min-h-[700px] virtual-learn-sec">
{/* Facility Cards Grid - Single Row, Side by Side */}
<div className="h-full grid grid-cols-4 max-lg:grid-cols-2 max-md:grid-cols-1">
{facilities.map((facility, index) => (
@@ -757,8 +758,8 @@ export function VirtualSpaceSection() {
</div>
{/* Overlaid Content - Centered at top of image section */}
<div className="absolute top-0 left-0 right-0 z-20 py-16 max-md:py-12 section-margin-x">
<div className="max-w-4xl mx-auto text-center">
<div className="absolute top-0 left-0 right-0 z-20 py-16 max-md:py-12 section-margin-x ">
<div className="max-w-4xl mx-auto text-center exp-our-head-desktop-sec">
{/* Branded Tag */}
<motion.div
initial={{ opacity: 0, y: -20 }}
@@ -815,7 +816,7 @@ export function VirtualSpaceSection() {
</div>
{/* Additional overlay for better text readability over images */}
<div className="absolute top-0 left-0 right-0 h-80 bg-gradient-to-b from-black/70 via-black/40 to-transparent z-10" />
<div className="absolute top-0 left-0 right-0 h-80 bg-gradient-to-b from-black/70 via-black/40 to-transparent z-10 exp-our-head-desktop-sec" />
</div>
{/* Booking Modal */}

253
src/components/services/LearningFacility.tsx
View File

@@ -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<HTMLDivElement>(null);
// Virtual Tour Carousel state and functionality
const [currentTourSlide, setCurrentTourSlide] = useState(0);
const tourCarouselRef = useRef<HTMLDivElement>(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() {
</p>
<div className="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
<PrimaryCTAButton
<PrimaryCTAButton
text="Take Virtual Tour"
onClick={handleStartTour}
ariaLabel="Take virtual tour"
className="primary-cta-button-blue cta-text-white"
/>
<Button
<Button
variant="outline"
onClick={() => {
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 <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
Every aspect of our facility is designed to enhance learning outcomes
and provide an exceptional experience for participants and facilitators.
</p>
</div>
@@ -837,7 +837,7 @@ export function LearningFacility() {
{/* Carousel Container */}
<div className="overflow-hidden" style={{ paddingBottom: '80px' }}>
<div
<div
ref={carouselRef}
className="flex transition-transform duration-500 ease-in-out gap-6"
style={{ transform: `translateX(-${currentSlide * slideWidth}%)` }}
@@ -853,26 +853,26 @@ export function LearningFacility() {
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'
? '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">
@@ -901,66 +901,68 @@ export function LearningFacility() {
World-Class <span className="text-primary">Amenities</span>
</h2>
<p className="text-body-lg text-muted">
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.
</p>
</div>
<div className="relative overflow-hidden w-screen" aria-label="Amenities ticker" style={{ marginLeft: 'calc(50% - 50vw)', marginRight: 'calc(50% - 50vw)' }}>
<div className="flex items-stretch gap-4 whitespace-nowrap scroll-left" style={{ animationDuration: '35s' }}>
{[0,1].map((loop) => (
<div key={`amenities-loop-${loop}`} className="flex items-stretch gap-4">
{amenities.map((amenity, index) => {
const Icon = amenity.icon;
return (
<div
key={`amenity-row1-${loop}-${index}`}
className="flex items-center gap-4 rounded-lg p-4 shadow-sm border"
style={{ backgroundColor: 'var(--color-bg-white)' }}
>
</div>
<div className="relative w-full">
<div className="relative overflow-hidden">
<div className="flex items-stretch gap-4 whitespace-nowrap scroll-left" style={{ animationDuration: '35s' }}>
{[0, 1].map((loop) => (
<div key={`amenities-loop-${loop}`} className="flex items-stretch gap-4">
{amenities.map((amenity, index) => {
const Icon = amenity.icon;
return (
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
key={`amenity-row1-${loop}-${index}`}
className="flex items-center gap-4 rounded-lg p-4 shadow-sm border"
style={{ backgroundColor: 'var(--color-bg-white)' }}
>
<Icon className="w-6 h-6 text-primary" />
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
>
<Icon className="w-6 h-6 text-primary" />
</div>
<span className="text-body" style={{ fontWeight: 'var(--font-weight-subhead)' }}>
{amenity.name}
</span>
</div>
<span className="text-body" style={{ fontWeight: 'var(--font-weight-subhead)' }}>
{amenity.name}
</span>
</div>
);
})}
</div>
))}
</div>
<div className="flex items-stretch gap-4 whitespace-nowrap scroll-right mt-4" style={{ animationDuration: '30s' }}>
{[0,1].map((loop) => (
<div key={`amenities-loop-bottom-${loop}`} className="flex items-stretch gap-4">
{amenities.map((amenity, index) => {
const Icon = amenity.icon;
return (
<div
key={`amenity-row2-${loop}-${index}`}
className="flex items-center gap-4 rounded-lg p-4 shadow-sm border"
style={{ backgroundColor: 'var(--color-bg-white)' }}
>
);
})}
</div>
))}
</div>
<div className="flex items-stretch gap-4 whitespace-nowrap scroll-right mt-4" style={{ animationDuration: '30s' }}>
{[0, 1].map((loop) => (
<div key={`amenities-loop-bottom-${loop}`} className="flex items-stretch gap-4">
{amenities.map((amenity, index) => {
const Icon = amenity.icon;
return (
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
key={`amenity-row2-${loop}-${index}`}
className="flex items-center gap-4 rounded-lg p-4 shadow-sm border"
style={{ backgroundColor: 'var(--color-bg-white)' }}
>
<Icon className="w-6 h-6 text-primary" />
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
>
<Icon className="w-6 h-6 text-primary" />
</div>
<span className="text-body" style={{ fontWeight: 'var(--font-weight-subhead)' }}>
{amenity.name}
</span>
</div>
<span className="text-body" style={{ fontWeight: 'var(--font-weight-subhead)' }}>
{amenity.name}
</span>
</div>
);
})}
</div>
))}
);
})}
</div>
))}
</div>
</div>
</div>
</div>
</section>
{/* Virtual Tour Section */}
@@ -1009,10 +1011,10 @@ export function LearningFacility() {
{/* Carousel Container */}
<div className="relative overflow-hidden">
<div
<div
ref={tourCarouselRef}
className="flex transition-transform duration-700 ease-in-out"
style={{
style={{
transform: `translateX(-${currentTourSlide * tourSlideWidth}%)`,
width: `${(virtualTourStops.length / tourCardsPerView) * 100}%`
}}
@@ -1071,7 +1073,7 @@ export function LearningFacility() {
Preview complete? Launch the full interactive tour to navigate each zone.
</div>
<div className="hero-slide-button">
<PrimaryCTAButton
<PrimaryCTAButton
text="Start Interactive Tour"
onClick={handleStartTour}
ariaLabel="Start interactive virtual tour"
@@ -1085,7 +1087,7 @@ export function LearningFacility() {
<div className="max-w-6xl mx-auto">
{/* Tour Header */}
<div className="text-center mb-8">
<Badge
<Badge
className="text-small px-4 py-2 mb-4"
style={{
backgroundColor: 'rgba(4, 4, 91, 0.1)',
@@ -1112,7 +1114,7 @@ export function LearningFacility() {
className="w-full h-full object-cover"
/>
</div>
{/* Navigation Arrows */}
<button
onClick={handlePrevStop}
@@ -1121,7 +1123,7 @@ export function LearningFacility() {
>
<ChevronLeft className="w-6 h-6" />
</button>
<button
onClick={handleNextStop}
disabled={currentTourStop === virtualTourStops.length - 1}
@@ -1181,11 +1183,10 @@ export function LearningFacility() {
<button
key={index}
onClick={() => 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'
}`}
/>
))}
</div>
@@ -1211,7 +1212,7 @@ export function LearningFacility() {
<>
<DialogHeader className="pb-6">
<div className="text-center space-y-4">
<div
<div
className="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto"
style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
>
@@ -1235,7 +1236,7 @@ export function LearningFacility() {
className="w-full h-full object-cover"
/>
<div className="absolute top-6 left-6">
<Badge
<Badge
className="text-body px-4 py-2"
style={{
backgroundColor: 'var(--color-accent)',
@@ -1295,7 +1296,7 @@ export function LearningFacility() {
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>
@@ -1303,7 +1304,7 @@ export function LearningFacility() {
<Input
id="companyName"
value={bookingForm.companyName}
onChange={(e) => setBookingForm({...bookingForm, companyName: e.target.value})}
onChange={(e) => setBookingForm({ ...bookingForm, companyName: e.target.value })}
required
/>
</div>
@@ -1312,7 +1313,7 @@ export function LearningFacility() {
<Input
id="contactName"
value={bookingForm.contactName}
onChange={(e) => setBookingForm({...bookingForm, contactName: e.target.value})}
onChange={(e) => setBookingForm({ ...bookingForm, contactName: e.target.value })}
required
/>
</div>
@@ -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
/>
</div>
@@ -1334,7 +1335,7 @@ export function LearningFacility() {
<Input
id="phone"
value={bookingForm.phone}
onChange={(e) => setBookingForm({...bookingForm, phone: e.target.value})}
onChange={(e) => setBookingForm({ ...bookingForm, phone: e.target.value })}
required
/>
</div>
@@ -1346,13 +1347,13 @@ export function LearningFacility() {
<Input
id="role"
value={bookingForm.role}
onChange={(e) => setBookingForm({...bookingForm, role: e.target.value})}
onChange={(e) => setBookingForm({ ...bookingForm, role: e.target.value })}
required
/>
</div>
<div>
<Label htmlFor="teamSize">Team Size</Label>
<Select value={bookingForm.teamSize} onValueChange={(value) => setBookingForm({...bookingForm, teamSize: value})}>
<Select value={bookingForm.teamSize} onValueChange={(value) => setBookingForm({ ...bookingForm, teamSize: value })}>
<SelectTrigger>
<SelectValue placeholder="Select size" />
</SelectTrigger>
@@ -1369,7 +1370,7 @@ export function LearningFacility() {
<div>
<Label htmlFor="facilityZone">Preferred Zone</Label>
<Select value={bookingForm.facilityZone} onValueChange={(value) => setBookingForm({...bookingForm, facilityZone: value})}>
<Select value={bookingForm.facilityZone} onValueChange={(value) => setBookingForm({ ...bookingForm, facilityZone: value })}>
<SelectTrigger>
<SelectValue placeholder="Select zone" />
</SelectTrigger>
@@ -1388,7 +1389,7 @@ export function LearningFacility() {
<Textarea
id="requirements"
value={bookingForm.additionalRequirements}
onChange={(e) => 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.
</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">
@@ -1434,26 +1435,26 @@ export function LearningFacility() {
<Input
id="companyName"
value={bookingForm.companyName}
onChange={(e) => setBookingForm({...bookingForm, companyName: e.target.value})}
onChange={(e) => 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) => setBookingForm({...bookingForm, contactName: e.target.value})}
onChange={(e) => 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>
@@ -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"
/>
</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) => setBookingForm({...bookingForm, phone: e.target.value})}
onChange={(e) => 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) => setBookingForm({...bookingForm, role: e.target.value})}
onChange={(e) => 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) => setBookingForm({...bookingForm, teamSize: value})}>
<Select value={bookingForm.teamSize} onValueChange={(value) => setBookingForm({ ...bookingForm, teamSize: value })}>
<SelectTrigger className="text-body">
<SelectValue placeholder="Select group size" />
</SelectTrigger>
@@ -1508,10 +1509,10 @@ export function LearningFacility() {
</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) => setBookingForm({...bookingForm, facilityZone: value})}>
<Select value={bookingForm.facilityZone} onValueChange={(value) => setBookingForm({ ...bookingForm, facilityZone: value })}>
<SelectTrigger className="text-body">
<SelectValue placeholder="Select preferred zone (optional)" />
</SelectTrigger>
@@ -1524,29 +1525,29 @@ export function LearningFacility() {
</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) => 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"
/>
</div>
<div className="flex flex-col sm:flex-row gap-3 justify-end pt-4">
<Button
type="button"
variant="outline"
<Button
type="button"
variant="outline"
onClick={() => setIsBookingModalOpen(false)}
className="text-body"
>
Cancel
</Button>
<Button
<Button
type="submit"
className="text-body px-8"
style={{
@@ -1564,7 +1565,7 @@ export function LearningFacility() {
</Dialog>
{/* Testimonials Section - Using home page testimonials with custom headers */}
<TestimonialsSection
<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"

26
src/global.d.ts vendored Normal file
View File

@@ -0,0 +1,26 @@
// declarations.d.ts
declare module "*.png" {
const src: string;
export default src;
}
declare module "*.jpg" {
const src: string;
export default src;
}
declare module "*.jpeg" {
const src: string;
export default src;
}
declare module "*.svg" {
import * as React from "react";
const ReactComponent: React.FunctionComponent<
React.SVGProps<SVGSVGElement> & { title?: string }
>;
export { ReactComponent };
const src: string;
export default src;
}

93
src/pages/HomePage.tsx Normal file
View File

@@ -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 (
<>
<HeroSection />
<StatsSection />
<LogosSection />
<ServicesSection />
<div>
<div className="mx-auto text-center py-16 px-4 bg-gradient-to-r from-blue-900 via-gray-400 to-black exp-our-head-tab-sec" >
{/* Branded Tag */}
<motion.div
initial={{ opacity: 0, y: -20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
viewport={{ once: true }}
>
<BrandedTag
text="Virtual Learning Environment"
className="justify-center"
variant="white"
/>
</motion.div>
{/* Main Heading */}
<motion.h2
className="text-5xl font-bold leading-tight mb-4 max-lg:text-4xl max-md:text-3xl text-white"
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
viewport={{ once: true }}
>
Experience Our Space Virtually
</motion.h2>
{/* Subheading */}
<motion.p
className="text-lg leading-relaxed max-w-2xl mx-auto max-lg:text-base mb-6 text-white/90"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
viewport={{ once: true }}
>
Take a virtual walk through our state-of-the-art facility designed to inspire leadership excellence and foster collaborative learning.
</motion.p>
{/* Main CTA Button - Explore Our Space */}
<motion.div
className="flex justify-center"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
viewport={{ once: true }}
>
<div className="hero-slide-button">
<PrimaryCTAButton
text="Explore Our Space"
onClick={() => navigate('/services/learning-facility')}
ariaLabel="Explore our virtual learning space and facilities"
/>
</div>
</motion.div>
</div>
<VirtualSpaceSection />
</div>
<TestimonialsSection />
<UpcomingWebinarsSection />
<InsightsSection />
<WhitepapersSection />
<CTABannerSection />
</>
);
};
export default HomePage;

1044
src/styles/globals.css
View File

File diff suppressed because it is too large Load Diff