Convert backends to Firebase and combine projects

RIT-EVENT-MANAGEMENT--main/components/WelcomeScreen.tsx

@@ -0,0 +1,101 @@
+
+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;