ADUANASOFT/plantillas-proyectos
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance login form UI with improved styling and descriptive elements

Browse Source
This commit is contained in:
acazares
2025-11-01 20:28:55 -05:00
parent 73a535291a
commit 3c52db25e4
1 changed files with 37 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/lib/components/login-form.svelte
View File

@@ -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>