From 3c52db25e4403495c94bd801ee3c2d7b0ec51bb5 Mon Sep 17 00:00:00 2001
From: acazares <acazares@aduanasoft.com.mx>
Date: Sat, 1 Nov 2025 20:28:55 -0500
Subject: [PATCH] feat: enhance login form UI with improved styling and
 descriptive elements

---
 frontend/src/lib/components/login-form.svelte | 49 ++++++++++++++-----
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/login-form.svelte b/frontend/src/lib/components/login-form.svelte
index dee9859d..afd9ac75 100644
--- a/frontend/src/lib/components/login-form.svelte
+++ b/frontend/src/lib/components/login-form.svelte
@@ -86,9 +86,9 @@
 			>
 				<FieldGroup>
 					<div class="flex flex-col items-center gap-2 text-center">
-						<h1 class="text-2xl font-bold">Anexo76</h1>
-						<p class="text-muted-foreground text-balance">
-							Inicia sesión en tu cuenta
+						<h1 class="text-2xl font-bold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent">Anexo 76</h1>
+						<p class="text-muted-foreground text-balance text-sm">
+							Sistema de Cumplimiento Fiscal y Aduanal
 						</p>
 					</div>
 					
@@ -178,17 +178,42 @@
 					</FieldDescription>
 				</FieldGroup>
 			</form>
-			<div class="bg-muted relative hidden md:block">
-				<img
-					src="/placeholder.svg"
-					alt="placeholder"
-					class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
-				/>
+			<div class="relative hidden md:block bg-gradient-to-br from-blue-50 to-slate-100 dark:from-slate-900 dark:to-blue-950">
+				<div class="absolute inset-0 flex items-center justify-center p-12">
+					<div class="relative w-full h-full flex flex-col items-center justify-center gap-8">
+						<!-- Ícono principal - Escudo con documento -->
+						<div class="relative">
+							<svg class="w-48 h-48 text-blue-600 dark:text-blue-400 opacity-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+							</svg>
+							<!-- Escudo de protección superpuesto -->
+							<div class="absolute -bottom-2 -right-2 bg-white dark:bg-slate-800 rounded-full p-2 shadow-lg">
+								<svg class="w-12 h-12 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+									<path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+								</svg>
+							</div>
+						</div>
+						
+						<!-- Texto descriptivo -->
+						<div class="text-center space-y-3 max-w-sm">
+							<h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">
+								Cumplimiento Simplificado
+							</h2>
+							<p class="text-slate-600 dark:text-slate-300 text-sm leading-relaxed">
+								Gestiona tus obligaciones fiscales del Anexo 76 del SAT de manera eficiente y segura
+							</p>
+						</div>
+						
+						<!-- Elementos decorativos -->
+						<div class="absolute top-8 left-8 w-20 h-20 border-2 border-blue-200 dark:border-blue-800 rounded-full opacity-50"></div>
+						<div class="absolute bottom-8 right-8 w-16 h-16 border-2 border-blue-300 dark:border-blue-700 rounded-lg opacity-50 rotate-45"></div>
+					</div>
+				</div>
 			</div>
 		</Card.Content>
 	</Card.Root>
-	<FieldDescription class="px-6 text-center">
-		Al continuar, aceptas nuestros <a href="##">Términos de Servicio</a> y
-		<a href="##">Política de Privacidad</a>.
+	<FieldDescription class="px-6 text-center text-xs">
+		Al continuar, aceptas nuestros <a href="##" class="underline hover:text-blue-600">Términos de Servicio</a> y
+		<a href="##" class="underline hover:text-blue-600">Política de Privacidad</a>.
 	</FieldDescription>
 </div>