better login form

src/components/login/LoginScreen.tsx

@@ -9,6 +9,7 @@ import {
 
 import { Button } from '@/components/ui/Button';
 import { loginApi } from '@/services/loginApi';
+import logoIcon from '@/assets/logo-icon.png';
 
 type LoginScreenProps = {
     onLogin: (keepLoggedIn: boolean) => void;
@@ -63,9 +64,15 @@ export function LoginScreen({
                 <div className="absolute -inset-px rounded-[2rem] bg-gradient-to-br from-blue-500/40 via-cyan-400/10 to-white/5 opacity-80 blur-sm" />
 
                 <div className="relative rounded-[2rem] border border-white/10 bg-slate-950/80 p-8 shadow-2xl shadow-blue-500/10 backdrop-blur-xl">
-                    <div className="mb-8 flex items-center gap-4">
+                    <div className="mb-10 flex items-center gap-4">
-                        <div className="rounded-2xl border border-blue-400/20 bg-blue-500/15 p-4 text-blue-300 shadow-lg shadow-blue-500/10">
+                        <div className="relative shrink-0">
-                            <Shield size={32} />
+                            <div className="absolute inset-0 rounded-full bg-blue-500/20 blur-2xl" />
+
+                            <img
+                                src={logoIcon}
+                                alt="Litoral Regas"
+                                className="relative h-16 w-16 object-contain drop-shadow-[0_0_18px_rgba(59,130,246,0.45)]"
+                            />
                         </div>
 
                         <div>
@@ -73,7 +80,7 @@ export function LoginScreen({
                                 Litoral Regas
                             </h1>
 
-                            <p className="mt-1 text-sm text-blue-200/80">
+                            <p className="mt-1 text-sm font-medium tracking-[0.18em] text-blue-200/75 uppercase">
                                 VPN Orchestrator
                             </p>
                         </div>