```javascript
import React from 'react';
import { useNavigate } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    // Simulate successful login
    navigate('/dashboard');
  };

  return (
    <div className="gradient-bg min-h-screen flex items-center justify-center p-4">
      <div className="login-glass p-8 max-w-md w-full">
        <div className="text-center mb-8">
          <i data-feather="box" className="w-12 h-12 text-white mx-auto"></i>
          <h1 className="text-3xl font-bold text-white mt-4">AppVoyage</h1>
          <p className="text-white opacity-80">Discover & manage your digital tools</p>
        </div>
        
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label htmlFor="email" className="block text-sm font-medium text-white">Email</label>
            <div className="mt-1 relative">
              <input id="email" name="email" type="email" required 
                     className="py-3 px-4 block w-full bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg text-white placeholder-white placeholder-opacity-70 focus:outline-none focus:ring-2 focus:ring-white focus:border-transparent" />
              <i data-feather="mail" className="absolute right-3 top-3 text-white opacity-70"></i>
            </div>
          </div>
          
          <div>
            <label htmlFor="password" className="block text-sm font-medium text-white">Password</label>
            <div className="mt-1 relative">
              <input id="password" name="password" type="password" required 
                     className="py-3 px-4 block w-full bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg text-white placeholder-white placeholder-opacity-70 focus:outline-none focus:ring-2 focus:ring-white focus:border-transparent" />
              <i data-feather="lock" className="absolute right-3 top-3 text-white opacity-70"></i>
            </div>
          </div>
          
          <div className="flex items-center justify-between">
            <div className="flex items-center">
              <input id="remember-me" name="remember-me" type="checkbox" 
                     className="h-4 w-4 bg-white bg-opacity-20 border border-white rounded focus:ring-white" />
              <label htmlFor="remember-me" className="ml-2 block text-sm text-white">Remember me</label>
            </div>
            
            <div className="text-sm">
              <a href="#" className="font-medium text-white hover:text-opacity-80">Forgot password?</a>
            </div>
          </div>
          
          <div>
            <button type="submit" 
                    className="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-purple-700 bg-white hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white transition-transform hover:scale-105">
              Sign in
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default Login;
```