Refina tema global e experiencia visual de auth

src/features/auth/components/auth-card-shell.tsx

@@ -0,0 +1,27 @@
+import type { PropsWithChildren } from "react";
+import { Card, CardContent } from "@/shared/components/ui/card";
+import { DotPattern } from "@/shared/components/ui/dot-pattern";
+import AuthSidebar from "./auth-sidebar";
+
+export function AuthCardShell({ children }: PropsWithChildren) {
+	return (
+		<Card className="relative overflow-hidden rounded-2xl border-primary/10 bg-card p-0 shadow-none">
+			<div className="pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]">
+				<DotPattern
+					width={17}
+					height={17}
+					cx={1.3}
+					cy={1.3}
+					cr={1.3}
+					className="text-primary/8 mask-[linear-gradient(to_bottom,black,transparent_84%)]"
+				/>
+				<div className="absolute inset-0 bg-linear-to-br from-primary/6 via-transparent to-transparent" />
+			</div>
+
+			<CardContent className="relative z-10 grid gap-0 p-0 md:min-h-[640px] md:grid-cols-[1.05fr_0.95fr]">
+				<div className="flex bg-card/92 backdrop-blur-[1px]">{children}</div>
+				<AuthSidebar />
+			</CardContent>
+		</Card>
+	);
+}

src/features/auth/components/auth-header.tsx

@@ -2,14 +2,20 @@ import { cn } from "@/shared/utils/ui";
 
 interface AuthHeaderProps {
 	title: string;
+	description?: string;
 }
 
-export function AuthHeader({ title }: AuthHeaderProps) {
+export function AuthHeader({ title, description }: AuthHeaderProps) {
 	return (
-		<div className={cn("flex flex-col gap-1.5")}>
-			<h1 className="text-xl font-semibold tracking-tight text-card-foreground">
+		<div className={cn("flex flex-col gap-2")}>
+			<h1 className="text-2xl font-semibold tracking-tight text-card-foreground">
 				{title}
 			</h1>
+			{description ? (
+				<p className="max-w-md text-sm leading-6 text-muted-foreground">
+					{description}
+				</p>
+			) : null}
 		</div>
 	);
 }

src/features/auth/components/auth-sidebar.tsx

@@ -1,12 +1,32 @@
+import { Logo } from "@/shared/components/logo";
+import { DotPattern } from "@/shared/components/ui/dot-pattern";
+
 function AuthSidebar() {
 	return (
-		<div className="relative hidden flex-col overflow-hidden bg-primary   md:flex">
-			<div className="relative flex flex-1 flex-col justify-between p-8">
-				<div className="space-y-4">
-					<h2 className="text-3xl font-semibold leading-tight">
+		<div className="relative hidden flex-col overflow-hidden bg-primary md:flex">
+			<div className="pointer-events-none absolute inset-0">
+				<DotPattern
+					width={18}
+					height={18}
+					cx={1.15}
+					cy={1.15}
+					cr={1.15}
+					className="text-black/10 mask-[radial-gradient(circle_at_top_left,black,transparent_80%)]"
+				/>
+				<div className="absolute inset-0 bg-linear-to-br from-white/9 via-transparent to-black/7" />
+			</div>
+			<div className="relative flex flex-1 flex-col justify-between p-10 lg:p-12">
+				<Logo
+					variant="compact"
+					invertTextOnDark={false}
+					className="opacity-92 [&_img]:brightness-0 [&_img]:saturate-0"
+				/>
+
+				<div className="max-w-sm space-y-4.5">
+					<h2 className="text-[2rem] font-semibold leading-[1.04] tracking-[-0.03em] text-black/84 lg:text-[2.35rem]">
 						Controle suas finanças com clareza e foco diário.
 					</h2>
-					<p className="text-sm opacity-90">
+					<p className="max-w-[18rem] text-sm leading-6 text-black/68">
 						Centralize despesas, organize cartões e acompanhe metas mensais em
 						um painel inteligente feito para o seu dia a dia.
 					</p>

src/features/auth/components/login-form.tsx

@@ -3,9 +3,7 @@ import { RiFingerprintLine, RiLoader4Line } from "@remixicon/react";
 import { useRouter } from "next/navigation";
 import { type FormEvent, useEffect, useState } from "react";
 import { toast } from "sonner";
-import { Logo } from "@/shared/components/logo";
 import { Button } from "@/shared/components/ui/button";
-import { Card, CardContent } from "@/shared/components/ui/card";
 import {
 	Field,
 	FieldDescription,
@@ -16,13 +14,16 @@ import {
 import { Input } from "@/shared/components/ui/input";
 import { authClient, googleSignInAvailable } from "@/shared/lib/auth/client";
 import { cn } from "@/shared/utils/ui";
+import { AuthCardShell } from "./auth-card-shell";
 import { AuthErrorAlert } from "./auth-error-alert";
 import { AuthHeader } from "./auth-header";
-import AuthSidebar from "./auth-sidebar";
 import { GoogleAuthButton } from "./google-auth-button";
 
 type DivProps = React.ComponentProps<"div">;
 
+const authLinkClassName =
+	"font-medium text-foreground/88 underline decoration-border underline-offset-4 transition-colors hover:text-foreground hover:decoration-foreground/30 focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";
+
 export function LoginForm({ className, ...props }: DivProps) {
 	const router = useRouter();
 	const isGoogleAvailable = googleSignInAvailable;
@@ -130,119 +131,117 @@ export function LoginForm({ className, ...props }: DivProps) {
 	}
 
 	return (
-		<div className={cn("flex flex-col gap-6", className)} {...props}>
-			<Logo className="mb-2" />
-			<Card className="overflow-hidden p-0">
-				<CardContent className="grid gap-0 p-0 md:grid-cols-[1.05fr_0.95fr]">
-					<form
-						className="flex flex-col gap-6 p-6 md:p-8"
-						onSubmit={handleSubmit}
-						noValidate
-					>
-						<FieldGroup className="gap-4">
-							<AuthHeader title="Entrar no OpenMonetis" />
+		<div className={cn("flex flex-col gap-5", className)} {...props}>
+			<AuthCardShell>
+				<form
+					className="flex w-full items-center px-6 py-7 md:px-10 md:py-9"
+					onSubmit={handleSubmit}
+					noValidate
+				>
+					<FieldGroup className="mx-auto w-full max-w-md gap-5">
+						<AuthHeader
+							title="Entrar no OpenMonetis"
+							description="Acesse sua conta para acompanhar cartões, lançamentos e metas em um só lugar."
+						/>
 
-							<AuthErrorAlert error={error} />
+						<AuthErrorAlert error={error} />
 
-							<Field>
-								<FieldLabel htmlFor="email">E-mail</FieldLabel>
-								<Input
-									id="email"
-									type="email"
-									placeholder="Digite seu e-mail"
-									autoComplete="username webauthn"
-									required
-									value={email}
-									onChange={(e) => setEmail(e.target.value)}
-									aria-invalid={!!error}
-								/>
-							</Field>
+						<Field>
+							<FieldLabel htmlFor="email">E-mail</FieldLabel>
+							<Input
+								id="email"
+								type="email"
+								placeholder="Digite seu e-mail"
+								autoComplete="username webauthn"
+								required
+								value={email}
+								onChange={(e) => setEmail(e.target.value)}
+								aria-invalid={!!error}
+							/>
+						</Field>
 
-							<Field>
-								<div className="flex items-center">
-									<FieldLabel htmlFor="password">Senha</FieldLabel>
-								</div>
-								<Input
-									id="password"
-									type="password"
-									required
-									placeholder="Digite sua senha"
-									autoComplete="current-password"
-									value={password}
-									onChange={(e) => setPassword(e.target.value)}
-									aria-invalid={!!error}
-								/>
-							</Field>
+						<Field>
+							<div className="flex items-center">
+								<FieldLabel htmlFor="password">Senha</FieldLabel>
+							</div>
+							<Input
+								id="password"
+								type="password"
+								required
+								placeholder="Digite sua senha"
+								autoComplete="current-password"
+								value={password}
+								onChange={(e) => setPassword(e.target.value)}
+								aria-invalid={!!error}
+							/>
+						</Field>
 
+						<Field>
+							<Button
+								type="submit"
+								disabled={loadingEmail || loadingGoogle || loadingPasskey}
+								className="w-full"
+							>
+								{loadingEmail ? (
+									<RiLoader4Line className="h-4 w-4 animate-spin" />
+								) : (
+									"Entrar"
+								)}
+							</Button>
+						</Field>
+
+						<FieldSeparator className="my-1.5 *:data-[slot=field-separator-content]:bg-card">
+							Ou continue com
+						</FieldSeparator>
+
+						<Field>
+							<GoogleAuthButton
+								onClick={handleGoogle}
+								loading={loadingGoogle}
+								disabled={
+									loadingEmail ||
+									loadingGoogle ||
+									loadingPasskey ||
+									!isGoogleAvailable
+								}
+								text="Entrar com Google"
+							/>
+						</Field>
+
+						{passkeySupported && (
 							<Field>
 								<Button
-									type="submit"
+									variant="outline"
+									type="button"
+									onClick={handlePasskey}
 									disabled={loadingEmail || loadingGoogle || loadingPasskey}
-									className="w-full"
+									className="w-full gap-2"
 								>
-									{loadingEmail ? (
+									{loadingPasskey ? (
 										<RiLoader4Line className="h-4 w-4 animate-spin" />
 									) : (
-										"Entrar"
+										<RiFingerprintLine className="h-5 w-5" />
 									)}
+									<span>Entrar com passkey</span>
 								</Button>
 							</Field>
+						)}
 
-							<FieldSeparator className="my-2 *:data-[slot=field-separator-content]:bg-card">
-								Ou continue com
-							</FieldSeparator>
+						<FieldDescription className="pt-1 text-center">
+							Não tem uma conta?{" "}
+							<a href="/signup" className={authLinkClassName}>
+								Inscreva-se
+							</a>
+						</FieldDescription>
 
-							<Field>
-								<GoogleAuthButton
-									onClick={handleGoogle}
-									loading={loadingGoogle}
-									disabled={
-										loadingEmail ||
-										loadingGoogle ||
-										loadingPasskey ||
-										!isGoogleAvailable
-									}
-									text="Entrar com Google"
-								/>
-							</Field>
-
-							{passkeySupported && (
-								<Field>
-									<Button
-										variant="outline"
-										type="button"
-										onClick={handlePasskey}
-										disabled={loadingEmail || loadingGoogle || loadingPasskey}
-										className="w-full gap-2"
-									>
-										{loadingPasskey ? (
-											<RiLoader4Line className="h-4 w-4 animate-spin" />
-										) : (
-											<RiFingerprintLine className="h-5 w-5" />
-										)}
-										<span>Entrar com passkey</span>
-									</Button>
-								</Field>
-							)}
-
-							<FieldDescription className="text-center">
-								Não tem uma conta?{" "}
-								<a href="/signup" className="underline underline-offset-4">
-									Inscreva-se
-								</a>
-							</FieldDescription>
-						</FieldGroup>
-					</form>
-
-					<AuthSidebar />
-				</CardContent>
-			</Card>
-
-			<FieldDescription className="text-center">
-				<a href="/" className="underline underline-offset-4">
-					Voltar para o site
-				</a>
-			</FieldDescription>
+						<FieldDescription className="text-center text-[13px] text-muted-foreground">
+							<a href="/" className={authLinkClassName}>
+								Voltar para a página inicial
+							</a>
+						</FieldDescription>
+					</FieldGroup>
+				</form>
+			</AuthCardShell>
 		</div>
 	);
 }

src/features/auth/components/signup-form.tsx

@@ -3,9 +3,7 @@ import { RiCheckLine, RiCloseLine, RiLoader4Line } from "@remixicon/react";
 import { useRouter } from "next/navigation";
 import { type FormEvent, useState } from "react";
 import { toast } from "sonner";
-import { Logo } from "@/shared/components/logo";
 import { Button } from "@/shared/components/ui/button";
-import { Card, CardContent } from "@/shared/components/ui/card";
 import {
 	Field,
 	FieldDescription,
@@ -16,9 +14,9 @@ import {
 import { Input } from "@/shared/components/ui/input";
 import { authClient, googleSignInAvailable } from "@/shared/lib/auth/client";
 import { cn } from "@/shared/utils/ui";
+import { AuthCardShell } from "./auth-card-shell";
 import { AuthErrorAlert } from "./auth-error-alert";
 import { AuthHeader } from "./auth-header";
-import AuthSidebar from "./auth-sidebar";
 import { GoogleAuthButton } from "./google-auth-button";
 
 interface PasswordValidation {
@@ -76,6 +74,9 @@ function PasswordRequirement({ met, label }: { met: boolean; label: string }) {
 
 type DivProps = React.ComponentProps<"div">;
 
+const authLinkClassName =
+	"font-medium text-foreground/88 underline decoration-border underline-offset-4 transition-colors hover:text-foreground hover:decoration-foreground/30 focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";
+
 export function SignupForm({ className, ...props }: DivProps) {
 	const router = useRouter();
 	const isGoogleAvailable = googleSignInAvailable;
@@ -149,143 +150,141 @@ export function SignupForm({ className, ...props }: DivProps) {
 	}
 
 	return (
-		<div className={cn("flex flex-col gap-6", className)} {...props}>
-			<Logo className="mb-2" />
-			<Card className="overflow-hidden p-0">
-				<CardContent className="grid gap-0 p-0 md:grid-cols-[1.05fr_0.95fr]">
-					<form
-						className="flex flex-col gap-6 p-6 md:p-8"
-						onSubmit={handleSubmit}
-						noValidate
-					>
-						<FieldGroup className="gap-4">
-							<AuthHeader title="Criar sua conta" />
+		<div className={cn("flex flex-col gap-5", className)} {...props}>
+			<AuthCardShell>
+				<form
+					className="flex w-full items-center px-6 py-7 md:px-10 md:py-9"
+					onSubmit={handleSubmit}
+					noValidate
+				>
+					<FieldGroup className="mx-auto w-full max-w-md gap-5">
+						<AuthHeader
+							title="Criar sua conta"
+							description="Comece com uma base organizada para acompanhar despesas, cartões e objetivos mensais."
+						/>
 
-							<AuthErrorAlert error={error} />
+						<AuthErrorAlert error={error} />
 
-							<Field>
-								<FieldLabel htmlFor="name">Nome completo</FieldLabel>
-								<Input
-									id="name"
-									type="text"
-									placeholder="Digite seu nome"
-									autoComplete="name"
-									required
-									value={fullname}
-									onChange={(e) => setFullname(e.target.value)}
-									aria-invalid={!!error}
-								/>
-							</Field>
+						<Field>
+							<FieldLabel htmlFor="name">Nome completo</FieldLabel>
+							<Input
+								id="name"
+								type="text"
+								placeholder="Digite seu nome"
+								autoComplete="name"
+								required
+								value={fullname}
+								onChange={(e) => setFullname(e.target.value)}
+								aria-invalid={!!error}
+							/>
+						</Field>
 
-							<Field>
-								<FieldLabel htmlFor="email">E-mail</FieldLabel>
-								<Input
-									id="email"
-									type="email"
-									placeholder="Digite seu e-mail"
-									autoComplete="email"
-									required
-									value={email}
-									onChange={(e) => setEmail(e.target.value)}
-									aria-invalid={!!error}
-								/>
-							</Field>
+						<Field>
+							<FieldLabel htmlFor="email">E-mail</FieldLabel>
+							<Input
+								id="email"
+								type="email"
+								placeholder="Digite seu e-mail"
+								autoComplete="email"
+								required
+								value={email}
+								onChange={(e) => setEmail(e.target.value)}
+								aria-invalid={!!error}
+							/>
+						</Field>
 
-							<Field>
-								<FieldLabel htmlFor="password">Senha</FieldLabel>
-								<Input
-									id="password"
-									type="password"
-									required
-									autoComplete="new-password"
-									placeholder="Crie uma senha forte"
-									value={password}
-									onChange={(e) => setPassword(e.target.value)}
-									aria-invalid={
-										!!error ||
-										(password.length > 0 && !passwordValidation.isValid)
-									}
-									maxLength={23}
-								/>
-								{password.length > 0 && (
-									<div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
-										<PasswordRequirement
-											met={passwordValidation.hasMinLength}
-											label="Mínimo 7 caracteres"
-										/>
-										<PasswordRequirement
-											met={passwordValidation.hasMaxLength}
-											label="Máximo 23 caracteres"
-										/>
-										<PasswordRequirement
-											met={passwordValidation.hasLowercase}
-											label="Letra minúscula"
-										/>
-										<PasswordRequirement
-											met={passwordValidation.hasUppercase}
-											label="Letra maiúscula"
-										/>
-										<PasswordRequirement
-											met={passwordValidation.hasNumber}
-											label="Número"
-										/>
-										<PasswordRequirement
-											met={passwordValidation.hasSpecial}
-											label="Caractere especial"
-										/>
-									</div>
+						<Field>
+							<FieldLabel htmlFor="password">Senha</FieldLabel>
+							<Input
+								id="password"
+								type="password"
+								required
+								autoComplete="new-password"
+								placeholder="Crie uma senha forte"
+								value={password}
+								onChange={(e) => setPassword(e.target.value)}
+								aria-invalid={
+									!!error ||
+									(password.length > 0 && !passwordValidation.isValid)
+								}
+								maxLength={23}
+							/>
+							{password.length > 0 && (
+								<div className="mt-3 grid grid-cols-2 gap-x-4 gap-y-1.5 rounded-xl bg-muted/35 p-3">
+									<PasswordRequirement
+										met={passwordValidation.hasMinLength}
+										label="Mínimo 7 caracteres"
+									/>
+									<PasswordRequirement
+										met={passwordValidation.hasMaxLength}
+										label="Máximo 23 caracteres"
+									/>
+									<PasswordRequirement
+										met={passwordValidation.hasLowercase}
+										label="Letra minúscula"
+									/>
+									<PasswordRequirement
+										met={passwordValidation.hasUppercase}
+										label="Letra maiúscula"
+									/>
+									<PasswordRequirement
+										met={passwordValidation.hasNumber}
+										label="Número"
+									/>
+									<PasswordRequirement
+										met={passwordValidation.hasSpecial}
+										label="Caractere especial"
+									/>
+								</div>
+							)}
+						</Field>
+
+						<Field>
+							<Button
+								type="submit"
+								disabled={
+									loadingEmail ||
+									loadingGoogle ||
+									(password.length > 0 && !passwordValidation.isValid)
+								}
+								className="w-full"
+							>
+								{loadingEmail ? (
+									<RiLoader4Line className="h-4 w-4 animate-spin" />
+								) : (
+									"Criar conta"
 								)}
-							</Field>
+							</Button>
+						</Field>
 
-							<Field>
-								<Button
-									type="submit"
-									disabled={
-										loadingEmail ||
-										loadingGoogle ||
-										(password.length > 0 && !passwordValidation.isValid)
-									}
-									className="w-full"
-								>
-									{loadingEmail ? (
-										<RiLoader4Line className="h-4 w-4 animate-spin" />
-									) : (
-										"Criar conta"
-									)}
-								</Button>
-							</Field>
+						<FieldSeparator className="my-1.5 *:data-[slot=field-separator-content]:bg-card">
+							Ou continue com
+						</FieldSeparator>
 
-							<FieldSeparator className="my-2 *:data-[slot=field-separator-content]:bg-card">
-								Ou continue com
-							</FieldSeparator>
+						<Field>
+							<GoogleAuthButton
+								onClick={handleGoogle}
+								loading={loadingGoogle}
+								disabled={loadingEmail || loadingGoogle || !isGoogleAvailable}
+								text="Continuar com Google"
+							/>
+						</Field>
 
-							<Field>
-								<GoogleAuthButton
-									onClick={handleGoogle}
-									loading={loadingGoogle}
-									disabled={loadingEmail || loadingGoogle || !isGoogleAvailable}
-									text="Continuar com Google"
-								/>
-							</Field>
+						<FieldDescription className="pt-1 text-center">
+							Já tem uma conta?{" "}
+							<a href="/login" className={authLinkClassName}>
+								Entrar
+							</a>
+						</FieldDescription>
 
-							<FieldDescription className="text-center">
-								Já tem uma conta?{" "}
-								<a href="/login" className="underline underline-offset-4">
-									Entrar
-								</a>
-							</FieldDescription>
-						</FieldGroup>
-					</form>
-
-					<AuthSidebar />
-				</CardContent>
-			</Card>
-
-			<FieldDescription className="text-center">
-				<a href="/" className="underline underline-offset-4">
-					Voltar para o site
-				</a>
-			</FieldDescription>
+						<FieldDescription className="text-center text-[13px] text-muted-foreground">
+							<a href="/" className={authLinkClassName}>
+								Voltar para a página inicial
+							</a>
+						</FieldDescription>
+					</FieldGroup>
+				</form>
+			</AuthCardShell>
 		</div>
 	);
 }