feat(v1.5.3): status de pagamento no painel do pagador + SEO landing + WebP

- Card de Status de Pagamento com totais pagos/pendentes e lista de boletos individuais
- Validação obrigatória de categoria/conta/cartão no dialog de lançamento (client + server)
- SEO completo na landing: Open Graph, Twitter Card, JSON-LD, sitemap.xml, robots.txt
- Imagens convertidas de PNG para WebP (performance)
- HTML lang corrigido para pt-BR; template de título dinâmico

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

app/(landing-page)/layout.tsx

@@ -0,0 +1,95 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+const BASE_URL = process.env.PUBLIC_DOMAIN
+	? `https://${process.env.PUBLIC_DOMAIN}`
+	: "https://openmonetis.com";
+
+const TITLE = "OpenMonetis | Finanças pessoais self-hosted e open source";
+const DESCRIPTION =
+	"Aplicativo self-hosted de finanças pessoais. Controle lançamentos, cartões, orçamentos e categorias com total privacidade. Open source e gratuito.";
+
+export const metadata: Metadata = {
+	metadataBase: new URL(BASE_URL),
+	title: TITLE,
+	description: DESCRIPTION,
+	keywords: [
+		"finanças pessoais",
+		"controle financeiro",
+		"self-hosted",
+		"open source",
+		"gestão financeira",
+		"orçamento pessoal",
+		"lançamentos financeiros",
+		"cartão de crédito",
+		"planejamento financeiro",
+	],
+	alternates: {
+		canonical: "/",
+	},
+	openGraph: {
+		type: "website",
+		locale: "pt_BR",
+		url: "/",
+		siteName: "OpenMonetis",
+		title: TITLE,
+		description: DESCRIPTION,
+		images: [
+			{
+				url: "/dashboard-preview-light.webp",
+				width: 1920,
+				height: 1080,
+				alt: "OpenMonetis — Dashboard de finanças pessoais",
+			},
+		],
+	},
+	twitter: {
+		card: "summary_large_image",
+		title: TITLE,
+		description: DESCRIPTION,
+		images: ["/dashboard-preview-light.webp"],
+	},
+	robots: {
+		index: true,
+		follow: true,
+		googleBot: {
+			index: true,
+			follow: true,
+			"max-image-preview": "large",
+			"max-snippet": -1,
+		},
+	},
+};
+
+export default function LandingLayout({ children }: { children: ReactNode }) {
+	const jsonLd = {
+		"@context": "https://schema.org",
+		"@type": "SoftwareApplication",
+		name: "OpenMonetis",
+		applicationCategory: "FinanceApplication",
+		operatingSystem: "Web",
+		offers: {
+			"@type": "Offer",
+			price: "0",
+			priceCurrency: "BRL",
+		},
+		description: DESCRIPTION,
+		url: BASE_URL,
+		isAccessibleForFree: true,
+		author: {
+			"@type": "Organization",
+			name: "OpenMonetis",
+			url: BASE_URL,
+		},
+	};
+
+	return (
+		<>
+			<script
+				type="application/ld+json"
+				dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+			/>
+			{children}
+		</>
+	);
+}

app/(landing-page)/page.tsx

@@ -120,20 +120,20 @@ const screenshotSections = [
 	{
 		title: "Lançamentos",
 		description: "Registre e organize todas as suas transações financeiras",
-		lightSrc: "/preview-lancamentos-light.png",
-		darkSrc: "/preview-lancamentos-dark.png",
+		lightSrc: "/preview-lancamentos-light.webp",
+		darkSrc: "/preview-lancamentos-dark.webp",
 	},
 	{
 		title: "Calendário",
 		description: "Visualize suas finanças no calendário mensal",
-		lightSrc: "/preview-calendario-light.png",
-		darkSrc: "/preview-calendario-dark.png",
+		lightSrc: "/preview-calendario-light.webp",
+		darkSrc: "/preview-calendario-dark.webp",
 	},
 	{
 		title: "Cartões",
 		description: "Acompanhe faturas, limites e vencimentos dos seus cartões",
-		lightSrc: "/preview-cartao-light.png",
-		darkSrc: "/preview-cartao-dark.png",
+		lightSrc: "/preview-cartao-light.webp",
+		darkSrc: "/preview-cartao-dark.webp",
 	},
 ];
 
@@ -355,7 +355,7 @@ export default async function Page() {
 						<AnimateOnScroll>
 							<div>
 								<Image
-									src="/dashboard-preview-light.png"
+									src="/dashboard-preview-light.webp"
 									alt="openmonetis Dashboard Preview"
 									width={1920}
 									height={1080}
@@ -363,7 +363,7 @@ export default async function Page() {
 									priority
 								/>
 								<Image
-									src="/dashboard-preview-dark.png"
+									src="/dashboard-preview-dark.webp"
 									alt="openmonetis Dashboard Preview"
 									width={1920}
 									height={1080}
@@ -609,7 +609,7 @@ export default async function Page() {
 								<div className="order-1 md:order-2 flex items-center justify-center">
 									<div className="w-full max-w-[220px] md:max-w-[260px]">
 										<Image
-											src="/openmonetis_companion.png"
+											src="/openmonetis_companion.webp"
 											alt="OpenMonetis Companion App"
 											width={1080}
 											height={2217}