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 */}

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

@@ -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"
@@ -853,18 +853,18 @@ 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"
@@ -906,61 +906,63 @@ export function LearningFacility() {
</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 */}
@@ -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>
@@ -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}
/>
@@ -1434,7 +1435,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 })}
placeholder="Enter company name"
required
className="text-body"
@@ -1446,7 +1447,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 })}
placeholder="Enter your full name"
required
className="text-body"
@@ -1461,7 +1462,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 })}
placeholder="your.email@company.com"
required
className="text-body"
@@ -1473,7 +1474,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 })}
placeholder="+1 (555) 123-4567"
className="text-body"
/>
@@ -1486,7 +1487,7 @@ 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 })}
placeholder="e.g., Training Manager, HR Director"
className="text-body"
/>
@@ -1494,7 +1495,7 @@ export function LearningFacility() {
<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>
@@ -1511,7 +1512,7 @@ export function LearningFacility() {
<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>
@@ -1530,7 +1531,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="Please share any specific requirements, preferred dates, catering needs, accommodation requirements, etc."
rows={4}
className="text-body resize-none"

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;

620
src/styles/globals.css
View File

File diff suppressed because it is too large Load Diff

21
tsconfig.json Normal file
View File

@@ -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" }]
}

8
tsconfig.node.json Normal file
View File

@@ -0,0 +1,8 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node"
},
"include": ["vite.config.ts"]
}