From f4d47e5cd4c7e84b6de0809bbd3e0d45f3527343 Mon Sep 17 00:00:00 2001
From: Abiram070207 <abiram.r1010@gmail.com>
Date: Thu, 25 Jun 2026 05:47:24 +0530
Subject: [PATCH] design: implement split-screen sliding splash animation
 transition

---
 frontend/src/pages/LoginPage.tsx | 103 +++++++++++++++----------------
 1 file changed, 51 insertions(+), 52 deletions(-)

diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index b4ba97a..03525fd 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -623,59 +623,58 @@ export const LoginPage: React.FC = () => {
       {/* Splash Screen Overlay */}
       <AnimatePresence>
         {splashState !== 'done' && (
-          <motion.div
-            key="splash-overlay"
-            initial={{ opacity: 1, backgroundColor: '#004a99' }}
-            animate={{ 
-              opacity: 1, 
-              backgroundColor: splashState === 'fade-to-white' ? '#ffffff' : '#004a99'
-            }}
-            exit={{ opacity: 0 }}
-            transition={{ 
-              backgroundColor: { duration: 1.5, ease: "easeInOut" },
-              opacity: { duration: 1.5, ease: "easeInOut" }
-            }}
-            className="fixed inset-0 flex items-center justify-center z-[200] overflow-hidden"
-          >
-            {/* Background Pattern - fade it out when transitioning to white */}
-            <motion.div 
-              animate={{ opacity: splashState === 'fade-to-white' ? 0 : 0.1 }}
-              transition={{ duration: 1.0 }}
-              className="absolute inset-0 pointer-events-none"
-            >
-              <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_white_1px,_transparent_1px)] bg-[size:30px_30px]"></div>
-            </motion.div>
-            
-            <AnimatePresence mode="wait">
-              {splashState === 'logo' && (
-                <motion.div
-                  key="logo"
-                  initial={{ opacity: 0, scale: 0.8 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  exit={{ opacity: 0, scale: 1.1 }}
-                  transition={{ duration: 0.6, ease: "easeInOut" }}
-                  className="flex flex-col items-center gap-4"
-                >
-                  <img src={ritLogo} alt="RIT Logo" className="h-28 w-auto object-contain drop-shadow-[0_10px_20px_rgba(255,255,255,0.15)]" />
-                </motion.div>
-              )}
+          <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]"
+            />
 
-              {splashState === 'text' && (
-                <motion.div
-                  key="text"
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -10 }}
-                  transition={{ duration: 0.6, ease: "easeInOut" }}
-                  className="text-center"
-                >
-                  <h1 className="text-4xl md:text-5xl font-black text-white tracking-widest uppercase">
-                    RIT EVENT HUB
-                  </h1>
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </motion.div>
+            {/* 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]"
+            />
+
+            {/* Centered content overlay for Logo/Text */}
+            <div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">
+              <AnimatePresence mode="wait">
+                {splashState === 'logo' && (
+                  <motion.div
+                    key="logo"
+                    initial={{ opacity: 0, scale: 0.8 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    exit={{ opacity: 0, scale: 1.1 }}
+                    transition={{ duration: 0.6, ease: "easeInOut" }}
+                    className="flex flex-col items-center gap-4"
+                  >
+                    <img src={ritLogo} alt="RIT Logo" className="h-28 w-auto object-contain drop-shadow-[0_10px_20px_rgba(255,255,255,0.15)]" />
+                  </motion.div>
+                )}
+
+                {splashState === 'text' && (
+                  <motion.div
+                    key="text"
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: -10 }}
+                    transition={{ duration: 0.6, ease: "easeInOut" }}
+                    className="text-center"
+                  >
+                    <h1 className="text-4xl md:text-5xl font-black text-white tracking-widest uppercase">
+                      RIT EVENT HUB
+                    </h1>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          </div>
         )}
       </AnimatePresence>