first commit

resources/js/pages/auth/login.tsx

@@ -1,9 +1,11 @@
 import { Form, Head } from '@inertiajs/react';
+import { Laptop2, ShieldCheck } from 'lucide-react';
 import InputError from '@/components/input-error';
 import PasskeyVerify from '@/components/passkey-verify';
 import PasswordInput from '@/components/password-input';
 import TextLink from '@/components/text-link';
 import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -26,6 +28,18 @@ export default function Login({
         <>
             <Head title="Entrar" />
 
+            <div className="mb-8 text-center">
+                <div className="mx-auto mb-4 flex size-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 dark:from-primary/10 dark:to-primary/5">
+                    <Laptop2 className="size-8 text-primary" />
+                </div>
+                <h1 className="text-2xl font-bold tracking-tight">
+                    Portal de Reservas
+                </h1>
+                <p className="mt-2 text-sm text-muted-foreground">
+                    Sistema de gestão de equipamentos da escola
+                </p>
+            </div>
+
             <PasskeyVerify
                 label="Entrar com chave de acesso"
                 loadingLabel="A autenticar..."
@@ -55,7 +69,7 @@ export default function Login({
             >
                 {({ processing, errors }) => (
                     <>
-                        <div className="grid gap-6">
+                        <div className="grid gap-5">
                             <div className="grid gap-2">
                                 <Label htmlFor="email">Email</Label>
                                 <Input
@@ -67,6 +81,7 @@ export default function Login({
                                     tabIndex={1}
                                     autoComplete="email"
                                     placeholder="nome@escola.pt"
+                                    className="h-11"
                                 />
                                 <InputError message={errors.email} />
                             </div>
@@ -93,6 +108,7 @@ export default function Login({
                                     tabIndex={2}
                                     autoComplete="current-password"
                                     placeholder="Palavra-passe"
+                                    className="h-11"
                                 />
                                 <InputError message={errors.password} />
                             </div>
@@ -103,12 +119,14 @@ export default function Login({
                                     name="remember"
                                     tabIndex={3}
                                 />
-                                <Label htmlFor="remember">Manter sessão</Label>
+                                <Label htmlFor="remember" className="text-sm">
+                                    Manter sessão
+                                </Label>
                             </div>
 
                             <Button
                                 type="submit"
-                                className="mt-4 w-full"
+                                className="mt-2 h-11 w-full"
                                 tabIndex={4}
                                 disabled={processing}
                                 data-test="login-button"
@@ -118,10 +136,21 @@ export default function Login({
                             </Button>
                         </div>
 
-                        <p className="text-center text-sm text-muted-foreground">
-                            O acesso é atribuído pela escola. Contacte os
-                            Serviços de Informática se ainda não tiver conta.
-                        </p>
+                        <Card className="border-primary/20 bg-primary/5 dark:border-primary/10 dark:bg-primary/5">
+                            <CardContent className="flex items-start gap-3 p-4">
+                                <ShieldCheck className="mt-0.5 size-5 shrink-0 text-primary" />
+                                <div className="text-sm">
+                                    <p className="font-medium text-foreground">
+                                        Acesso seguro
+                                    </p>
+                                    <p className="mt-1 text-muted-foreground">
+                                        O acesso é atribuído pela escola.
+                                        Contacte os Serviços de Informática se
+                                        ainda não tiver conta.
+                                    </p>
+                                </div>
+                            </CardContent>
+                        </Card>
                     </>
                 )}
             </Form>