From 06e8400fb6e4c883f30c7bc52c4cb230a317729d Mon Sep 17 00:00:00 2001
From: Abiram070207 <abiram.r1010@gmail.com>
Date: Thu, 25 Jun 2026 05:54:55 +0530
Subject: [PATCH] design: use clipPath polygon interpolation to animate splash
 screen exit seamlessly

---
 frontend/src/App.tsx             | 141 ++++++++++++++++++++-----------
 frontend/src/pages/LoginPage.tsx |  39 +++++----
 2 files changed, 113 insertions(+), 67 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 113cdea..08e3419 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -13,6 +13,7 @@ import { DialogProvider } from './context/DialogContext';
 import { motion, AnimatePresence } from 'framer-motion';
 import { StatusTimeline, type Event } from './components/dashboard/EventStatusTimeline';
 import { useEffect } from 'react';
+import ritLogo from './assets/images/college-logo.png';
 
 import { InstitutionalCalendar } from './components/dashboard/InstitutionalCalendar';
 import { VenueTimeline } from './components/dashboard/VenueTimeline';
@@ -27,6 +28,56 @@ import { ManageNoticesView } from './components/dashboard/ManageNoticesView';
 import { ManageStudentsView } from './components/dashboard/ManageStudentsView';
 import { VenueManagement } from './components/dashboard/VenueManagement';
 
+const LoginTransitionScreen: React.FC<{ user: any }> = ({ user }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.6, ease: "easeInOut" }}
+      className="fixed inset-0 z-[300] bg-gradient-to-br from-[#003B5C] via-[#004a99] to-[#001D3D] flex flex-col items-center justify-center text-white"
+    >
+      <div className="flex flex-col items-center gap-6 max-w-sm text-center px-6">
+        <motion.div
+          initial={{ scale: 0.8, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{ delay: 0.2, duration: 0.6, type: "spring" }}
+          className="bg-white/95 p-4 rounded-3xl shadow-2xl shadow-blue-900/30"
+        >
+          <img src={ritLogo} alt="RIT Logo" className="h-16 w-auto object-contain" />
+        </motion.div>
+        
+        <div className="space-y-2 mt-4 animate-pulse">
+          <motion.h2 
+            initial={{ y: 15, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ delay: 0.4, duration: 0.5 }}
+            className="text-2xl font-black uppercase tracking-tight"
+          >
+            Welcome Back
+          </motion.h2>
+          <motion.p
+            initial={{ y: 10, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ delay: 0.6, duration: 0.5 }}
+            className="text-sm font-bold text-slate-300 uppercase tracking-widest"
+          >
+            {user?.fullName || "User"}
+          </motion.p>
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: [0, 1, 0] }}
+          transition={{ delay: 0.8, duration: 1.5, repeat: Infinity }}
+          className="text-[9px] font-black uppercase tracking-widest text-[#f97316] mt-8"
+        >
+          Connecting to Event Hub...
+        </motion.div>
+      </div>
+    </motion.div>
+  );
+};
 
 const AppContent: React.FC = () => {
   const { isAuthenticated, user } = useAuth();
@@ -34,6 +85,22 @@ const AppContent: React.FC = () => {
   const [activeItem, setActiveItem] = useState('dashboard');
   const [userEvents, setUserEvents] = useState<Event[]>([]);
   const [preFillData, setPreFillData] = useState<any>(null);
+  const [showTransition, setShowTransition] = useState(false);
+  const [cachedUser, setCachedUser] = useState<any>(null);
+
+  useEffect(() => {
+    if (isAuthenticated && user) {
+      setCachedUser(user);
+      setShowTransition(true);
+      const timer = setTimeout(() => {
+        setShowTransition(false);
+      }, 2000);
+      return () => clearTimeout(timer);
+    } else {
+      setShowTransition(false);
+      setCachedUser(null);
+    }
+  }, [isAuthenticated, user]);
 
   const handleIncompleteClick = (data: any) => {
     setPreFillData(data);
@@ -101,38 +168,6 @@ const AppContent: React.FC = () => {
     }
   }, [isAuthenticated, activeItem, user?.email, user?.role, user?.department]);
 
-  if (!isAuthenticated) {
-    return (
-      <AnimatePresence mode="wait">
-        <motion.div
-          key="login"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 0.5 }}
-        >
-          <LoginPage />
-        </motion.div>
-      </AnimatePresence>
-    );
-  }
-
-  if (user?.role === 'STUDENT') {
-    return (
-      <AnimatePresence mode="wait">
-        <motion.div
-          key="student-dashboard"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 0.5 }}
-        >
-          <StudentDashboard />
-        </motion.div>
-      </AnimatePresence>
-    );
-  }
-
   const renderContent = () => {
     const isDashboard = (
       <Overview 
@@ -182,22 +217,34 @@ const AppContent: React.FC = () => {
   };
 
   return (
-    <DashboardLayout 
-      activeItem={activeItem} 
-      onItemClick={handleSidebarClick}
-    >
-      <AnimatePresence mode="wait">
-        <motion.div
-          key={activeItem}
-          initial={{ opacity: 0, x: 20 }}
-          animate={{ opacity: 1, x: 0 }}
-          exit={{ opacity: 0, x: -20 }}
-          transition={{ duration: 0.3 }}
-        >
-          {renderContent()}
-        </motion.div>
+    <>
+      <AnimatePresence>
+        {showTransition && <LoginTransitionScreen user={cachedUser} />}
       </AnimatePresence>
-    </DashboardLayout>
+
+      {!isAuthenticated ? (
+        <LoginPage />
+      ) : user?.role === 'STUDENT' ? (
+        <StudentDashboard />
+      ) : (
+        <DashboardLayout 
+          activeItem={activeItem} 
+          onItemClick={handleSidebarClick}
+        >
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={activeItem}
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -20 }}
+              transition={{ duration: 0.3 }}
+            >
+              {renderContent()}
+            </motion.div>
+          </AnimatePresence>
+        </DashboardLayout>
+      )}
+    </>
   );
 };
 
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 58ab011..93aa1e6 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -39,6 +39,13 @@ export const LoginPage: React.FC = () => {
   const [isSignUp, setIsSignUp] = useState(false);
   const [signUpType, setSignUpType] = useState<'INTERNAL' | 'EXTERNAL' | null>(null);
   const [splashState, setSplashState] = useState<'logo' | 'text' | 'fade-to-white' | 'done'>('logo');
+  const [isMobile, setIsMobile] = useState(typeof window !== 'undefined' ? window.innerWidth < 1024 : false);
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth < 1024);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
   useEffect(() => {
     const timer1 = setTimeout(() => {
@@ -623,25 +630,17 @@ export const LoginPage: React.FC = () => {
       {/* Splash Screen Overlay */}
       <AnimatePresence>
         {splashState !== 'done' && (
-          <div className="fixed inset-0 z-[200] flex overflow-hidden pointer-events-none">
-            {/* Left part of splash: remains static blue on desktop to match underlying panel */}
-            <motion.div
-              initial={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.8 }}
-              className="hidden lg:block lg:w-[55%] h-full bg-gradient-to-br from-[#003B5C] via-[#004a99] to-[#001D3D]"
-            />
-
-            {/* Right part of splash (and full screen on mobile): slides right to reveal white page */}
-            <motion.div
-              initial={{ x: 0 }}
-              animate={{ 
-                x: splashState === 'fade-to-white' ? "100%" : 0 
-              }}
-              transition={{ duration: 1.5, ease: [0.85, 0, 0.15, 1] }}
-              className="w-full lg:w-[45%] h-full bg-gradient-to-br from-[#003B5C] via-[#004a99] to-[#001D3D]"
-            />
-
+          <motion.div
+            key="splash-overlay"
+            initial={{ clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" }}
+            animate={{ 
+              clipPath: splashState === 'fade-to-white'
+                ? (isMobile ? "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)" : "polygon(0% 0%, 55% 0%, 55% 100%, 0% 100%)")
+                : "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
+            }}
+            transition={{ duration: 1.5, ease: [0.85, 0, 0.15, 1] }}
+            className="fixed inset-0 z-[200] bg-gradient-to-br from-[#003B5C] via-[#004a99] to-[#001D3D] flex items-center justify-center overflow-hidden"
+          >
             {/* Centered content overlay for Logo/Text */}
             <div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">
               <AnimatePresence mode="wait">
@@ -674,7 +673,7 @@ export const LoginPage: React.FC = () => {
                 )}
               </AnimatePresence>
             </div>
-          </div>
+          </motion.div>
         )}
       </AnimatePresence>