102 lines
4.2 KiB
TypeScript
102 lines
4.2 KiB
TypeScript
|
|
import React from 'react';
|
|
import { UserRole, Event } from '../types';
|
|
|
|
interface WelcomeScreenProps {
|
|
onSelectRole: (role: UserRole) => void;
|
|
events: Event[];
|
|
}
|
|
|
|
const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ onSelectRole, events }) => {
|
|
const portals = [
|
|
{
|
|
id: 'STUDENT' as UserRole,
|
|
title: 'Student Portal',
|
|
description: 'Access events, track registrations, and manage your academic profile.',
|
|
icon: 'fa-user-graduate',
|
|
color: 'bg-[#004a99]',
|
|
hoverColor: 'hover:border-[#004a99]',
|
|
textColor: 'text-[#004a99]'
|
|
},
|
|
{
|
|
id: 'COORDINATOR' as UserRole,
|
|
title: 'Event Coordinator Portal',
|
|
description: 'Create, manage, and coordinate campus events and announcements.',
|
|
icon: 'fa-calendar-check',
|
|
color: 'bg-orange-500',
|
|
hoverColor: 'hover:border-orange-500',
|
|
textColor: 'text-orange-500'
|
|
},
|
|
{
|
|
id: 'ADMIN' as UserRole,
|
|
title: 'Admin Portal',
|
|
description: 'System-wide oversight, user management, and high-level analytics.',
|
|
icon: 'fa-user-shield',
|
|
color: 'bg-[#004a99]',
|
|
hoverColor: 'hover:border-[#004a99]',
|
|
textColor: 'text-[#004a99]'
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen w-full bg-white flex flex-col items-center justify-center p-6 relative overflow-hidden">
|
|
{/* Background Decorative Elements */}
|
|
<div className="absolute top-[-10%] left-[-10%] w-96 h-96 bg-[#004a99]/5 rounded-full blur-[100px] opacity-60"></div>
|
|
<div className="absolute bottom-[-10%] right-[-10%] w-96 h-96 bg-orange-50 rounded-full blur-[100px] opacity-60"></div>
|
|
|
|
<div className="relative z-10 w-full max-w-6xl">
|
|
<div className="text-center mb-16 animate-in fade-in slide-in-from-top-10 duration-700">
|
|
<img
|
|
src="https://www.facultyplus.com/wp-content/uploads/2020/11/Rit-logo.png"
|
|
alt="RIT Logo"
|
|
className="h-16 md:h-20 w-auto mx-auto mb-8"
|
|
/>
|
|
<p className="text-slate-500 text-lg font-medium max-w-2xl mx-auto uppercase tracking-widest text-xs">
|
|
Select your gateway to excellence. Connect, manage, and celebrate.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{portals.map((portal, index) => (
|
|
<div
|
|
key={portal.id}
|
|
onClick={() => onSelectRole(portal.id)}
|
|
className={`group relative bg-white border-2 border-slate-100 rounded-[3rem] p-10 cursor-pointer transition-all duration-500 hover:-translate-y-4 hover:shadow-[0_40px_80px_-20px_rgba(0,0,0,0.1)] ${portal.hoverColor} animate-in fade-in slide-in-from-bottom-10`}
|
|
style={{ animationDelay: `${index * 150}ms` }}
|
|
>
|
|
<div className={`w-20 h-20 ${portal.color} rounded-3xl flex items-center justify-center mb-8 shadow-lg group-hover:scale-110 transition-transform duration-500`}>
|
|
<i className={`fas ${portal.icon} text-3xl text-white`}></i>
|
|
</div>
|
|
|
|
<h3 className="text-2xl font-black text-slate-900 uppercase tracking-tight mb-4 group-hover:text-orange-500 transition-colors">
|
|
{portal.title}
|
|
</h3>
|
|
|
|
<p className="text-slate-500 text-sm font-medium leading-relaxed mb-8">
|
|
{portal.description}
|
|
</p>
|
|
|
|
<div className={`flex items-center gap-3 text-xs font-black uppercase tracking-widest ${portal.textColor} group-hover:gap-5 transition-all`}>
|
|
Enter Portal <i className="fas fa-arrow-right"></i>
|
|
</div>
|
|
|
|
{/* Decorative Corner */}
|
|
<div className="absolute top-0 right-0 p-8 opacity-0 group-hover:opacity-10 transition-opacity">
|
|
<i className={`fas ${portal.icon} text-8xl`}></i>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-20 text-center animate-in fade-in duration-1000 delay-500">
|
|
<p className="text-[10px] font-black text-slate-400 uppercase tracking-[0.5em]">
|
|
© 2024 Rajalakshmi Institute of Technology • Academic Excellence
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WelcomeScreen;
|