style(ui): update auth pages layout and navigation capitalization

This commit improves the visual design of the auth pages by adding a new layout wrapper with an animated blob background effect and updating the auth card shell with a glassmorphism style. It also updates the navigation items to use capitalized labels instead of lowercase for better readability.

src/shared/components/navigation/navbar/nav-items.tsx

@@ -37,7 +37,7 @@ export const NAV_SECTIONS: NavSection[] = [
 		items: [
 			{
 				href: "/transactions",
-				label: "lançamentos",
+				label: "Lançamentos",
 				description: "Registre e gerencie suas transações",
 				icon: <RiArrowLeftRightLine className="size-4" />,
 				iconClass: "text-primary",
@@ -45,14 +45,14 @@ export const NAV_SECTIONS: NavSection[] = [
 			},
 			{
 				href: "/inbox",
-				label: "pré-lançamentos",
+				label: "Pré-lançamentos",
 				description: "Notificações capturadas pelo Companion",
 				icon: <RiAtLine className="size-4" />,
 				iconClass: "text-primary",
 			},
 			{
 				href: "/calendar",
-				label: "calendário",
+				label: "Calendário",
 				description: "Visualize lançamentos por dia",
 				icon: <RiCalendarEventLine className="size-4" />,
 				iconClass: "text-primary",
@@ -65,21 +65,21 @@ export const NAV_SECTIONS: NavSection[] = [
 		items: [
 			{
 				href: "/cards",
-				label: "cartões",
+				label: "Cartões",
 				description: "Faturas e limites dos seus cartões",
 				icon: <RiBankCard2Line className="size-4" />,
 				iconClass: "text-primary",
 			},
 			{
 				href: "/accounts",
-				label: "contas",
+				label: "Contas",
 				description: "Saldos e extratos bancários",
 				icon: <RiBankLine className="size-4" />,
 				iconClass: "text-primary",
 			},
 			{
 				href: "/budgets",
-				label: "orçamentos",
+				label: "Orçamentos",
 				description: "Defina limites de gastos por categoria",
 				icon: <RiBarChart2Line className="size-4" />,
 				iconClass: "text-primary",
@@ -92,28 +92,28 @@ export const NAV_SECTIONS: NavSection[] = [
 		items: [
 			{
 				href: "/payers",
-				label: "pagadores",
+				label: "Pagadores",
 				description: "Gerencie quem divide as despesas",
 				icon: <RiGroupLine className="size-4" />,
 				iconClass: "text-primary",
 			},
 			{
 				href: "/categories",
-				label: "categorias",
+				label: "Categorias",
 				description: "Agrupe seus lançamentos",
 				icon: <RiPriceTag3Line className="size-4" />,
 				iconClass: "text-primary",
 			},
 			{
 				href: "/notes",
-				label: "anotações",
+				label: "Anotações",
 				description: "Guarde lembretes e observações",
 				icon: <RiTodoLine className="size-4" />,
 				iconClass: "text-primary",
 			},
 			{
 				href: "/attachments",
-				label: "anexos",
+				label: "Anexos",
 				description: "Comprovantes e documentos",
 				icon: <RiAttachmentLine className="size-4" />,
 				iconClass: "text-primary",
@@ -126,7 +126,7 @@ export const NAV_SECTIONS: NavSection[] = [
 		items: [
 			{
 				href: "/insights",
-				label: "insights",
+				label: "Insights",
 				description: "Análises inteligentes dos seus dados",
 				icon: <RiSparklingLine className="size-4" />,
 				iconClass: "text-primary",
@@ -134,14 +134,14 @@ export const NAV_SECTIONS: NavSection[] = [
 			},
 			{
 				href: "/reports/category-trends",
-				label: "tendências",
+				label: "Tendências",
 				description: "Evolução de gastos por categoria",
 				icon: <RiFileChartLine className="size-4" />,
 				iconClass: "text-primary",
 			},
 			{
 				href: "/reports/card-usage",
-				label: "uso de cartões",
+				label: "Uso de cartões",
 				description: "Resumo de gastos por cartão",
 				icon: <RiBankCard2Line className="size-4" />,
 				iconClass: "text-primary",
@@ -149,14 +149,14 @@ export const NAV_SECTIONS: NavSection[] = [
 			},
 			{
 				href: "/reports/installment-analysis",
-				label: "análise de parcelas",
+				label: "Análise de parcelas",
 				description: "Acompanhe parcelas em aberto",
 				icon: <RiSecurePaymentLine className="size-4" />,
 				iconClass: "text-primary",
 			},
 			{
 				href: "/reports/establishments",
-				label: "estabelecimentos",
+				label: "Estabelecimentos",
 				description: "Top gastos por estabelecimento",
 				icon: <RiStore2Line className="size-4" />,
 				iconClass: "text-primary",

src/shared/components/navigation/navbar/nav-menu.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { RiDashboardLine, RiMenuLine } from "@remixicon/react";
+
 import { usePathname } from "next/navigation";
 import { useState } from "react";
 import { CalculatorDialogContent } from "@/shared/components/calculator/calculator-dialog";
@@ -28,7 +29,7 @@ import { NavPill } from "./nav-pill";
 import { MobileTools, NavToolsDropdown } from "./nav-tools";
 
 const triggerClass =
-	"h-8! rounded-md! px-2! py-0! text-sm! font-medium! bg-transparent! shadow-none! lowercase! [&_svg]:text-current! text-black/75! hover:text-black! hover:bg-black/10! focus:text-black! focus:bg-black/10! focus-visible:ring-black/20! data-[state=open]:text-black! data-[state=open]:bg-black/10!";
+	"h-8! rounded-md! px-2! py-0! text-sm! font-medium! bg-transparent! shadow-none! capitalize! [&_svg]:text-current! text-black/75! hover:text-black! hover:bg-black/10! focus:text-black! focus:bg-black/10! focus-visible:ring-black/20! data-[state=open]:text-black! data-[state=open]:bg-black/10!";
 
 const triggerActiveClass = "bg-black/15! text-black!";
 
@@ -42,9 +43,9 @@ export function NavMenu() {
 	return (
 		<>
 			{/* Desktop */}
-			<nav className="hidden md:flex items-center justify-center flex-1 ">
+			<nav className="hidden md:flex items-center justify-center flex-1 gap-4">
 				<NavigationMenu viewport={false}>
-					<NavigationMenuList className="gap-0">
+					<NavigationMenuList className="gap-2">
 						<NavigationMenuItem>
 							<NavPill href="/dashboard" preservePeriod>
 								Dashboard
@@ -63,6 +64,7 @@ export function NavMenu() {
 										className={cn(
 											triggerClass,
 											isSectionActive && triggerActiveClass,
+											"capitalize",
 										)}
 									>
 										{section.label}

src/shared/components/navigation/navbar/nav-pill.tsx

@@ -25,7 +25,7 @@ export function NavPill({ href, preservePeriod, children }: NavPillProps) {
 			preservePeriod={preservePeriod}
 			className={cn(
 				buttonVariants({ variant: "navbar", size: "sm" }),
-				"lowercase",
+				"capitalize",
 				isActive && "bg-black/15 text-black",
 			)}
 		>

src/shared/components/navigation/navbar/nav-tools.tsx

@@ -22,7 +22,7 @@ export function NavToolsDropdown({ onOpenCalculator }: NavToolsDropdownProps) {
 						<RiCalculatorLine className="size-4" />
 					</span>
 					<span className="flex flex-col flex-1 text-left">
-						<span className="font-medium">calculadora</span>
+						<span className="font-medium">Calculadora</span>
 						<span className="text-xs text-muted-foreground lowercase">
 							Faça cálculos rápidos
 						</span>
@@ -39,7 +39,7 @@ export function NavToolsDropdown({ onOpenCalculator }: NavToolsDropdownProps) {
 						)}
 					</span>
 					<span className="flex flex-col flex-1 text-left">
-						<span className="font-medium">privacidade</span>
+						<span className="font-medium">Privacidade</span>
 						<span className="text-xs text-muted-foreground lowercase">
 							Oculta valores na tela
 						</span>