From 1f8a97bd1653ada164ca7af477e463104f4afe28 Mon Sep 17 00:00:00 2001 From: Felipe Coutinho Date: Wed, 1 Apr 2026 14:14:01 +0000 Subject: [PATCH] =?UTF-8?q?feat(auth):=20redesign=20visual=20das=20p=C3=A1?= =?UTF-8?q?ginas=20de=20autentica=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/app/(auth)/login/page.tsx | 14 ++- src/app/(auth)/signup/page.tsx | 16 +++- .../components/auth-sidebar-invoices-mock.tsx | 89 +++++++++++++++++++ src/features/auth/components/auth-sidebar.tsx | 51 +++++++++-- 4 files changed, 157 insertions(+), 13 deletions(-) create mode 100644 src/features/auth/components/auth-sidebar-invoices-mock.tsx diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx index b63e7db..474f7dc 100644 --- a/src/app/(auth)/login/page.tsx +++ b/src/app/(auth)/login/page.tsx @@ -1,9 +1,19 @@ import { LoginForm } from "@/features/auth/components/login-form"; +import { Logo } from "@/shared/components/logo"; export default function LoginPage() { return ( -
-
+
+
+
+
+
+ +
+ +
+ +
diff --git a/src/app/(auth)/signup/page.tsx b/src/app/(auth)/signup/page.tsx index 0d21a44..59b6ba9 100644 --- a/src/app/(auth)/signup/page.tsx +++ b/src/app/(auth)/signup/page.tsx @@ -1,9 +1,19 @@ import { SignupForm } from "@/features/auth/components/signup-form"; +import { Logo } from "@/shared/components/logo"; -export default function Page() { +export default function SignupPage() { return ( -
-
+
+
+
+
+
+ +
+ +
+ +
diff --git a/src/features/auth/components/auth-sidebar-invoices-mock.tsx b/src/features/auth/components/auth-sidebar-invoices-mock.tsx new file mode 100644 index 0000000..0efe957 --- /dev/null +++ b/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 ( +
+
+
+
+ {logoSrc && ( + {`Logo + )} +
+
+

+ {invoice.cardName} +

+

{invoice.dueLabel}

+
+
+
+ + {formatCurrency(invoice.amount)} + + Pagar +
+
+
+ ); +} + +export function AuthSidebarInvoicesMock() { + return ( +
+
+ Faturas +

+ Resumo das faturas do período +

+
+
+ {MOCK_INVOICES.map((invoice, index) => ( + + ))} +
+
+ ); +} diff --git a/src/features/auth/components/auth-sidebar.tsx b/src/features/auth/components/auth-sidebar.tsx index 1787a75..ac2c1bf 100644 --- a/src/features/auth/components/auth-sidebar.tsx +++ b/src/features/auth/components/auth-sidebar.tsx @@ -1,5 +1,28 @@ +import { + RiBankCardLine, + RiBarChart2Line, + RiShieldCheckLine, +} from "@remixicon/react"; import { Logo } from "@/shared/components/logo"; import { DotPattern } from "@/shared/components/ui/dot-pattern"; +import { AuthSidebarInvoicesMock } from "./auth-sidebar-invoices-mock"; + +function FeatureItem({ + icon: Icon, + text, +}: { + icon: React.ComponentType<{ className?: string }>; + text: string; +}) { + return ( +
+
+ +
+ {text} +
+ ); +} function AuthSidebar() { return ( @@ -15,6 +38,7 @@ function AuthSidebar() { />
+
-
-

- Controle suas finanças com clareza e foco diário. -

-

- Centralize despesas, organize cartões e acompanhe metas mensais em - um painel inteligente feito para o seu dia a dia. -

+
+
+ +
+
+ +
+ + +