feat(auth): redesign visual das páginas de autenticação

O sidebar de autenticação ganha mockup animado de faturas e três itens
de funcionalidade no rodapé, substituindo o texto descritivo anterior.

As páginas de login e cadastro recebem gradiente decorativo de fundo e
exibem o logo no topo em viewports mobile.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -0,0 +1,89 @@
+import Image from "next/image";
+import { resolveLogoSrc } from "@/shared/lib/logo";
+import { formatCurrency } from "@/shared/utils/currency";
+
+type MockInvoice = {
+	cardName: string;
+	logo: string;
+	amount: number;
+	dueLabel: string;
+};
+
+const MOCK_INVOICES: MockInvoice[] = [
+	{
+		cardName: "Nubank",
+		logo: "nubank.png",
+		amount: 1898,
+		dueLabel: "Vence em 3 dias",
+	},
+	{
+		cardName: "Itaú",
+		logo: "itau.png",
+		amount: 1923,
+		dueLabel: "Vence em 8 dias",
+	},
+];
+
+function MockInvoiceItem({
+	invoice,
+	divider,
+}: {
+	invoice: MockInvoice;
+	divider: boolean;
+}) {
+	const logoSrc = resolveLogoSrc(invoice.logo);
+
+	return (
+		<div className={divider ? "border-b border-border/60" : undefined}>
+			<div className="flex items-center justify-between py-2.5">
+				<div className="flex min-w-0 flex-1 items-center gap-2.5 py-0.5">
+					<div className="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full">
+						{logoSrc && (
+							<Image
+								src={logoSrc}
+								alt={`Logo ${invoice.cardName}`}
+								width={36}
+								height={36}
+								className="h-full w-full object-contain"
+							/>
+						)}
+					</div>
+					<div className="min-w-0">
+						<p className="text-sm font-medium text-foreground">
+							{invoice.cardName}
+						</p>
+						<p className="text-xs text-muted-foreground">{invoice.dueLabel}</p>
+					</div>
+				</div>
+				<div className="flex shrink-0 flex-col items-end gap-0.5">
+					<span className="text-sm font-medium tracking-tighter text-foreground">
+						{formatCurrency(invoice.amount)}
+					</span>
+					<span className="text-xs font-medium text-primary">Pagar</span>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function AuthSidebarInvoicesMock() {
+	return (
+		<div className="rounded-xl border bg-card shadow-sm">
+			<div className="border-b px-4 py-3">
+				<span className="text-sm font-medium text-foreground">Faturas</span>
+				<p className="mt-0.5 text-xs text-muted-foreground">
+					Resumo das faturas do período
+				</p>
+			</div>
+			<div className="px-4">
+				{MOCK_INVOICES.map((invoice, index) => (
+					<MockInvoiceItem
+						key={invoice.cardName}
+						invoice={invoice}
+						divider={index < MOCK_INVOICES.length - 1}
+					/>
+				))}
+			</div>
+		</div>
+	);
+}