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/app/(auth)/layout.tsx

@@ -0,0 +1,23 @@
+import { Logo } from "@/shared/components/logo";
+
+export default function AuthLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<div className="relative flex min-h-svh flex-col items-center justify-center overflow-hidden bg-linear-to-b from-background via-background to-muted/20 px-5 py-8 md:px-8 md:py-10">
+			<div className="pointer-events-none absolute inset-0 overflow-hidden flex items-center justify-center">
+				<div className="absolute -right-32 top-0 h-96 w-96 rounded-full bg-primary/10 blur-3xl animate-blob mix-blend-multiply" />
+				<div className="absolute -left-32 bottom-0 h-96 w-96 rounded-full bg-primary/7 blur-3xl animate-blob animation-delay-2000 mix-blend-multiply" />
+				<div className="absolute -bottom-32 left-1/2 h-80 w-80 rounded-full bg-secondary/30 blur-3xl animate-blob animation-delay-4000 mix-blend-multiply" />
+			</div>
+
+			<div className="relative mb-6 flex md:hidden z-20">
+				<Logo variant="compact" colorIcon />
+			</div>
+
+			<div className="relative w-full max-w-sm md:max-w-5xl">{children}</div>
+		</div>
+	);
+}

src/app/(auth)/login/page.tsx

@@ -1,21 +1,5 @@
 import { LoginForm } from "@/features/auth/components/login-form";
-import { Logo } from "@/shared/components/logo";
 
 export default function LoginPage() {
-	return (
+	return <LoginForm />;
-		<div className="relative flex min-h-svh flex-col items-center justify-center overflow-hidden bg-linear-to-b from-background via-background to-muted/20 px-5 py-8 md:px-8 md:py-10">
-			<div className="pointer-events-none absolute inset-0">
-				<div className="absolute -right-32 -top-32 h-72 w-72 rounded-full bg-primary/10 blur-3xl" />
-				<div className="absolute -bottom-32 -left-32 h-72 w-72 rounded-full bg-primary/7 blur-3xl" />
-			</div>
-
-			<div className="relative mb-6 flex md:hidden">
-				<Logo variant="compact" colorIcon />
-			</div>
-
-			<div className="relative w-full max-w-sm md:max-w-5xl">
-				<LoginForm />
-			</div>
-		</div>
-	);
 }

src/app/(auth)/signup/page.tsx

@@ -1,21 +1,5 @@
 import { SignupForm } from "@/features/auth/components/signup-form";
-import { Logo } from "@/shared/components/logo";
 
 export default function SignupPage() {
-	return (
+	return <SignupForm />;
-		<div className="relative flex min-h-svh flex-col items-center justify-center overflow-hidden bg-linear-to-b from-background via-background to-muted/20 px-5 py-8 md:px-8 md:py-10">
-			<div className="pointer-events-none absolute inset-0">
-				<div className="absolute -right-32 -top-32 h-72 w-72 rounded-full bg-primary/10 blur-3xl" />
-				<div className="absolute -bottom-32 -left-32 h-72 w-72 rounded-full bg-primary/7 blur-3xl" />
-			</div>
-
-			<div className="relative mb-6 flex md:hidden">
-				<Logo variant="compact" colorIcon />
-			</div>
-
-			<div className="relative w-full max-w-sm md:max-w-5xl">
-				<SignupForm />
-			</div>
-		</div>
-	);
 }

src/app/(dashboard)/layout.tsx

@@ -6,40 +6,40 @@ import { DotPattern } from "@/shared/components/ui/dot-pattern";
 import { getUserSession } from "@/shared/lib/auth/server";
 
 export default async function DashboardLayout({
-	children,
+  children,
 }: Readonly<{
-	children: React.ReactNode;
+  children: React.ReactNode;
 }>) {
-	await connection();
+  await connection();
-	const session = await getUserSession();
+  const session = await getUserSession();
-	const navbarData = await fetchDashboardNavbarData(session.user.id);
+  const navbarData = await fetchDashboardNavbarData(session.user.id);
 
-	return (
+  return (
-		<PrivacyProvider>
+    <PrivacyProvider>
-			<AppNavbar
+      <AppNavbar
-				user={{ ...session.user, image: session.user.image ?? null }}
+        user={{ ...session.user, image: session.user.image ?? null }}
-				pagadorAvatarUrl={navbarData.pagadorAvatarUrl}
+        pagadorAvatarUrl={navbarData.pagadorAvatarUrl}
-				preLancamentosCount={navbarData.preLancamentosCount}
+        preLancamentosCount={navbarData.preLancamentosCount}
-				notificationsSnapshot={navbarData.notificationsSnapshot}
+        notificationsSnapshot={navbarData.notificationsSnapshot}
-			/>
+      />
-			<div className="relative flex flex-1 flex-col pt-16">
+      <div className="relative flex flex-1 flex-col pt-16">
-				<div className="pointer-events-none absolute inset-x-0 top-0 h-32 overflow-hidden md:h-36">
+        <div className="pointer-events-none absolute inset-x-0 top-0 h-32 overflow-hidden md:h-36">
-					<DotPattern
+          <DotPattern
-						width={20}
+            width={20}
-						height={20}
+            height={20}
-						cx={1.25}
+            cx={1.25}
-						cy={1.25}
+            cy={1.25}
-						cr={1.25}
+            cr={1.25}
-						className="text-primary/10 mask-[linear-gradient(to_bottom,black_0%,transparent_100%)]"
+            className="text-primary/10 mask-[linear-gradient(to_bottom,black_0%,transparent_100%)]"
-					/>
+          />
-					<div className="absolute inset-0 bg-linear-to-b from-primary/6 to-transparent" />
+          <div className="absolute inset-0 bg-linear-to-b from-primary/6 to-transparent" />
-				</div>
+        </div>
-				<div className="@container/main flex flex-1 flex-col gap-2">
+        <div className="@container/main flex flex-1 flex-col gap-2">
-					<div className="flex flex-col gap-4 py-5 md:gap-6 w-full max-w-8xl mx-auto px-4 ">
+          <div className="flex flex-col gap-4 py-5 md:gap-6 w-full max-w-8xl mx-auto px-4 ">
-						{children}
+            {children}
-					</div>
+          </div>
-				</div>
+        </div>
-			</div>
+      </div>
-		</PrivacyProvider>
+    </PrivacyProvider>
-	);
+  );
 }

src/app/(dashboard)/settings/page.tsx

@@ -50,6 +50,7 @@ export default async function Page() {
 							<TabsTrigger value="senha">Alterar senha</TabsTrigger>
 							<TabsTrigger value="passkeys">Passkeys</TabsTrigger>
 							<TabsTrigger value="email">Alterar e-mail</TabsTrigger>
+							<TabsTrigger value="intergrations">Integrações</TabsTrigger>
 							<TabsTrigger value="deletar" className="text-destructive">
 								Deletar conta
 							</TabsTrigger>

src/app/globals.css

@@ -354,3 +354,22 @@
   justify-content: flex-end;
   animation: blink-out 6s ease-in-out infinite;
 }
+
+@keyframes blob {
+  0% { transform: translate(0px, 0px) scale(1); }
+  33% { transform: translate(30px, -50px) scale(1.1); }
+  66% { transform: translate(-20px, 20px) scale(0.9); }
+  100% { transform: translate(0px, 0px) scale(1); }
+}
+
+.animate-blob {
+  animation: blob 10s infinite alternate ease-in-out;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+  animation-delay: 4s;
+}

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

@@ -5,8 +5,9 @@ import AuthSidebar from "./auth-sidebar";
 
 export function AuthCardShell({ children }: PropsWithChildren) {
 	return (
-		<Card className="relative overflow-hidden p-0">
+		<Card className="relative overflow-hidden rounded-2xl md:rounded-[2rem] p-0 shadow-lg border-primary/10">
 			<div className="pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]">
+				<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--color-primary)_0%,transparent_70%)] opacity-10 blur-3xl animate-blob mix-blend-multiply" />
 				<DotPattern
 					width={17}
 					height={17}
@@ -15,11 +16,13 @@ export function AuthCardShell({ children }: PropsWithChildren) {
 					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 className="absolute inset-0 bg-linear-to-br from-primary/6 via-transparent to-transparent opacity-80" />
 			</div>
 
-			<CardContent className="relative z-10 grid gap-0 p-0 md:min-h-[640px] md:grid-cols-[1.05fr_0.95fr]">
+			<CardContent className="relative z-10 grid gap-0 p-0 md:min-h-[640px] md:grid-cols-[1.05fr_0.95fr] overflow-hidden rounded-[inherit]">
-				<div className="flex bg-card/92 backdrop-blur-[1px]">{children}</div>
+				<div className="flex bg-card/60 backdrop-blur-xl md:rounded-l-[2rem]">
+					{children}
+				</div>
 				<AuthSidebar />
 			</CardContent>
 		</Card>

src/features/landing/constants.ts

@@ -36,12 +36,12 @@ export type FeatureItem = {
 };
 
 export const navLinks = [
-	{ href: "#telas", label: "conheça as telas" },
+	{ href: "#telas", label: "Conheça as telas" },
-	{ href: "#funcionalidades", label: "funcionalidades" },
+	{ href: "#funcionalidades", label: "Funcionalidades" },
-	{ href: "#mobile", label: "mobile" },
+	{ href: "#mobile", label: "Mobile" },
-	{ href: "#stack", label: "stack" },
+	{ href: "#stack", label: "Stack" },
-	{ href: "#como-usar", label: "como usar" },
+	{ href: "#como-usar", label: "Como usar" },
-	{ href: "#para-quem-e", label: "para quem é" },
+	{ href: "#para-quem-e", label: "Para quem é" },
 ] as const;
 
 export const mainFeatures: FeatureItem[] = [

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>