Resource conserved in the frontend login

frontend/src/pages/Login.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-import { motion } from 'framer-motion';
 import {
   User,
   Lock,
@@ -11,10 +10,10 @@ import {
 } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 
-// Import Assets
+// Import Assets (optimized WebP formats)
 import collegeLogo from '../assets/college-logo.png';
-import foodCourtPosBg from '../assets/food-court-pos.png';
-import ritLogo from '../assets/RIT_Logo.png';
+import foodCourtPosBg from '../assets/food-court-pos.webp';
+import ritLogo from '../assets/RIT_Logo.webp';
 
 const Login = () => {
   const [role, setRole] = useState<'manager' | 'master'>('manager');
@@ -76,25 +75,19 @@ const Login = () => {
       {/* Subtle light overlay to match the clean aesthetic and improve card contrast */}
       <div className="absolute inset-0 bg-white/20 backdrop-blur-[1px] z-0"></div>
 
-      {/* Login Card */}
-      <motion.div
-        initial={{ opacity: 0, scale: 0.95, y: 20 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        transition={{ duration: 0.6, ease: "easeOut" }}
+      {/* Login Card (Static layout, instant render) */}
+      <div
         className="w-full max-w-md bg-white/90 backdrop-blur-md border border-white/20 rounded-3xl p-6 md:p-10 shadow-2xl flex flex-col relative z-10"
       >
         {/* Top Logo - Centered */}
-        <motion.div
-          initial={{ opacity: 0, y: -20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.2 }}
+        <div
           className="flex flex-col items-center justify-center mb-8"
         >
           <img src={collegeLogo} alt="College Logo" className="h-16 md:h-20 object-contain filter drop-shadow-sm" />
           <span className="text-xs font-semibold text-[#001828]/60 mt-2.5 italic tracking-wide font-sans">
             Till yo tummy is full...
           </span>
-        </motion.div>
+        </div>
 
         {/* Login Container */}
         <div className="w-full">
@@ -107,14 +100,13 @@ const Login = () => {
 
           {/* Role Toggle */}
           <div className="bg-slate-100/80 p-1 rounded-2xl flex gap-1 mb-6 relative">
-            <motion.div
-              className="absolute h-[calc(100%-8px)] top-1 bg-white rounded-xl shadow-sm z-0"
-              initial={false}
-              animate={{
+            {/* Lightweight CSS transition for slider */}
+            <div
+              className="absolute h-[calc(100%-8px)] top-1 bg-white rounded-xl shadow-sm z-0 transition-all duration-200 ease-out"
+              style={{
                 left: role === 'manager' ? '4px' : '50%',
                 width: 'calc(50% - 6px)'
               }}
-              transition={{ type: "spring", stiffness: 300, damping: 30 }}
             />
             <button
               onClick={() => setRole('manager')}
@@ -194,11 +186,9 @@ const Login = () => {
             >
               <span className="relative z-10">CONNECT TO PORTAL</span>
               <ArrowRight size={18} className="relative z-10 group-hover:translate-x-1 transition-transform" />
-              <motion.div
-                className="absolute inset-0 bg-white/10"
-                initial={{ x: '-100%' }}
-                whileHover={{ x: '100%' }}
-                transition={{ duration: 0.6 }}
+              {/* Lightweight CSS transition for button hover shine */}
+              <div
+                className="absolute inset-0 bg-white/10 -translate-x-full group-hover:translate-x-full transition-transform duration-500 ease-out z-0"
               />
             </button>
           </form>
@@ -210,20 +200,17 @@ const Login = () => {
             © 2026 TILLO • SYSTEM PORTAL
           </p>
         </div>
-      </motion.div>
+      </div>
 
-      {/* Merchant Section Card */}
-      <motion.div
-        initial={{ opacity: 0, y: 15 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.6, delay: 0.3 }}
+      {/* Merchant Section Card (Static rendering) */}
+      <div
         className="w-full max-w-md bg-white/80 backdrop-blur-md border border-white/20 rounded-2xl p-4 shadow-lg flex items-center justify-between gap-4 relative z-10"
       >
         <div className="flex flex-col">
           <span className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Merchant Partner</span>
         </div>
         <img src={ritLogo} alt="RIT Logo" className="h-12 w-auto object-contain filter drop-shadow-sm" />
-      </motion.div>
+      </div>
     </div>
   );
 };