feat: Componente de mensagens de sessão.

app/View/Components/SessionMessages.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class SessionMessages extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.session-messages');
+    }
+}

resources/css/app.css

@@ -28,7 +28,17 @@ @layer utilities {
 
 @layer components {
 
-    /* Estilos globais */
+    /* body (Seu código, está correto) */
+    body {
+        @apply bg-white h-screen w-screen;
+        background-image: url('../images/bg-primary.png');
+        @apply bg-cover bg-center bg-fixed;
+        @apply overflow-y-auto overflow-x-hidden;
+    }
+
+    /*End body */
+
+    /* Estilos globais (Seu código) */
     h1 {
         @apply text-black font-semibold;
         @apply border-b border-blue-500 rounded-md shadow-md shadow-blue-400;
@@ -39,58 +49,101 @@ @layer components {
 
     /* Fim estilos globais */
 
-    /* body */
+
-    body {
+    /* --- ESTILOS DO LOGIN REFORMULADOS --- */
-        @apply bg-white h-screen w-screen;
+
-        background-image: url('../images/bg-primary.png');
+    /* 1. Container de Centralização */
-        @apply bg-cover bg-center bg-fixed;
+    .container-form {
-        @apply overflow-y-auto overflow-x-hidden;
+        @apply w-full min-h-screen mx-auto; /* Garante altura total */
+        @apply flex justify-center items-center p-4;
     }
 
-    /*End body */
+    /* 2. O Card de Login "Vidro Fosco" */
+    .form-class {
+        @apply w-full max-w-md; /* Tamanho responsivo */
+        @apply p-8;
 
+        /* O EFEITO "VIDRO FOSCO" */
+        @apply bg-white/20 backdrop-blur-lg; /* Fundo 20% opaco + Borrão */
+        @apply rounded-xl shadow-2xl;
+        @apply border border-white/10; /* Borda sutil */
+    }
 
-    /* Container */
+    /* 3. A Logo */
     .container-title {
-        @apply text-2xl absolute top-20;
+        @apply flex justify-center mb-6 text-nowrap;
-        @apply text-black font-semibold;
+    }
-        @apply border-b border-blue-500 rounded-md shadow-md shadow-blue-400;
+    .container-title img {
-        @apply p-4 transition-all duration-300 transform hover:scale-105;
+        @apply h-10; /* Ajuste o tamanho da sua logo */
     }
 
+    /* 4. Título ("Efetue seu login") */
+    .form-title {
+        @apply text-2xl font-semibold text-black text-center mb-6;
+    }
+
+    /* 5. Grupo de Input (Label + Campo) */
+    .input-group {
+        @apply mb-4;
+    }
+
+    .form-label {
+        @apply block text-sm font-medium text-gray-800 mb-1;
+    }
+
+    /* 6. Inputs com Estilo "Vidro" */
+    .form-input-class {
+        @apply w-full p-3;
+        @apply bg-transparent; /* Fundo transparente */
+        @apply border-b-2 border-gray-200; /* Apenas borda inferior */
+        @apply text-gray-500 placeholder-white/70;
+        @apply focus:outline-none focus:ring-0;
+        @apply focus:border-white; /* Borda fica branca sólida no foco */
+        @apply transition-all duration-300;
+    }
+    /* Remove o fundo de preenchimento automático do navegador */
+    .form-input-class:-webkit-autofill {
+        -webkit-text-fill-color: #0f0e0e !important;
+        -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.1) inset !important;
+        transition: background-color 5000s ease-in-out 0s;
+    }
+
+
+    /* 7. Botão Principal */
+    .form-button-class {
+        @apply w-full; /* Botão com largura total */
+        @apply bg-blue-600 text-white rounded-md p-3;
+        @apply font-semibold text-base;
+        @apply cursor-pointer;
+        @apply hover:bg-blue-700;
+        @apply transition-all duration-300 transform hover:scale-105;
+    }
+
+    /* 8. Link "Esqueceu a senha" */
+    .forget-password {
+        @apply text-center mt-4;
+    }
+    .forget-password a {
+        @apply text-sm text-white/80 hover:text-white hover:underline;
+        @apply transition-colors;
+    }
+
+    /* 9. Estilizando as mensagens de erro (x-session-messages) */
+    .messages {
+        @apply flex justify-center mb-4;
+    }
+    .messages div[role="alert"] { /* Assumindo que seu componente renderiza um div */
+        @apply bg-red-500/50 text-white p-3 rounded-md border border-red-700 text-sm;
+    }
+
+    /* --- FIM DOS ESTILOS DE LOGIN --- */
+
+    /* Classes antigas genéricas (podem ser usadas em outros lugares) */
     .container {
         /* Deixe APENAS as classes de largura, margem e padding */
         @apply w-full mx-auto px-4 sm:px-6 lg:px-8 mt-15 mb-10;
     }
 
-    .container-form {
-        @apply w-full h-full mx-auto;
-        @apply flex justify-center items-center;
-    }
-
-    .messages {
-        @apply flex justify-center;
-    }
-
-    .form-class {
-        @apply flex flex-col gap-4 p-3;
-        @apply mb-10 w-1/5;
-    }
-
-    .form-input-class {
-        @apply border border-gray-300 rounded-md p-2 outline-none;
-    }
-
-    .form-button-class {
-        @apply bg-blue-500 text-white rounded-md p-2 cursor-pointer hover:bg-blue-800 w-1/2;
-    }
-
-    .forget-password {
-        @apply flex justify-center w-1/2;
-        @apply shadow-lg rounded-md;
-        @apply transition scale-80 hover:scale-95;
-    }
-
     .container h1 {
         @apply text-2xl font-bold transition-all duration-300 transform hover:scale-105 mb-4;
     }