Login

In this make sure the button flow in background and do not hide the form import React, { useState } from 'react'; import { FaUser, FaLock, FaEye, FaEyeSlash } from 'react icons/fa'; import { motion } from 'framer motion'; const LoginPage = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [showPassword, setShowPassword] = useState(false); const [hideEyes, setHideEyes] = useState(false); const handleLogin = (e) => { e.preventDefault(); // Handle login logic here console.log('Login attempted with:', { username, password }); }; const togglePasswordVisibility = () => { setShowPassword(!showPassword); }; const toggleHideEyes = () => { setHideEyes(!hideEyes); }; return ( <div className="min h screen flex items center justify center bg gradient to br from gray 900 to blue 900 p 4"> <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.5 }} className="w full max w md" > <form onSubmit={handleLogin} className="bg black bg opacity 50 rounded lg shadow 2xl p 8 space y 8"> <h2 className="text 3xl font bold text center text blue 400 mb 6">Login</h2> <div className="relative"> <FaUser className="absolute top 3 left 3 text blue 400" /> <input type="text" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} className="w full py 2 pl 10 pr 4 text sm text white bg gray 800 rounded md focus:outline none focus:ring 2 focus:ring blue 400 transition all duration 300" required /> </div> <div className="relative"> <FaLock className="absolute top 3 left 3 text blue 400" /> <input type={showPassword ? 'text' : 'password'} placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} className="w full py 2 pl 10 pr 4 text sm text white bg gray 800 rounded md focus:outline none focus:ring 2 focus:ring blue 400 transition all duration 300" required /> <button type="button" onClick={togglePasswordVisibility} className="absolute top 2 right 2 text blue 400 focus:outline none" > {showPassword ? <FaEyeSlash /> : <FaEye />} </button> </div> <motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} type="submit" className="w full py 2 px 4 bg blue 600 hover:bg blue 700 rounded md text white font semibold transition colors duration 300" > Login </motion.button> </form> <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.5, duration: 0.5 }} className="mt 8 text center" > <img src="https://images.unsplash.com/photo 1633332755192 727a05c4013d?ixlib=rb 4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1180&q=80" alt="User Avatar" className={`w 24 h 24 mx auto rounded full border 4 border blue 400 cursor pointer transition all duration 300 ${hideEyes ? 'grayscale' : ''}`} onClick={toggleHideEyes} /> <p className="mt 4 text blue 300 text sm">Click the image to {hideEyes ? 'show' : 'hide'} eyes</p> </motion.div> </motion.div> {/* Floating particles */} <div className="absolute inset 0 pointer events none"> {[...Array(20)].map((_, i) => ( <motion.div key={i} className="absolute w 2 h 2 bg blue 400 rounded full" initial={{ x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight, }} animate={{ x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight, }} transition={{ duration: Math.random() * 10 + 10, repeat: Infinity, repeatType: 'reverse', }} /> ))} </div> </div> ); }; export default LoginPage;