feat(branding): atualiza landing, fontes e assets publicos

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="./public/logo_small.png" alt="OpenMonetis Logo" height="80" />
+  <img src="./public/imagens/logo_small.png" alt="OpenMonetis Logo" height="80" />
 </p>
 
 <p align="center">
@@ -21,7 +21,7 @@
 ---
 
 <p align="center">
-  <img src="./public/dashboard-preview-light.webp" alt="Dashboard Preview" width="800" />
+  <img src="./public/imagens/dashboard-preview-light.webp" alt="Dashboard Preview" width="800" />
 </p>
 
 ---

app/(dashboard)/layout.tsx

@@ -60,9 +60,9 @@ export default async function DashboardLayout({
 					notificationsSnapshot={notificationsSnapshot}
 				/>
 				<div className="relative flex flex-1 flex-col pt-16">
-					<div className="pointer-events-none absolute inset-0 bg-linear-to-b from-primary/5 via-transparent to-transparent" />
+					<div className="pointer-events-none absolute inset-0" />
 					<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}
 						</div>
 					</div>

app/(landing-page)/layout.tsx

@@ -36,7 +36,7 @@ export const metadata: Metadata = {
 		description: DESCRIPTION,
 		images: [
 			{
-				url: "/dashboard-preview-light.webp",
+				url: "/imagens/dashboard-preview-light.webp",
 				width: 1920,
 				height: 1080,
 				alt: "OpenMonetis — Dashboard de finanças pessoais",
@@ -47,7 +47,7 @@ export const metadata: Metadata = {
 		card: "summary_large_image",
 		title: TITLE,
 		description: DESCRIPTION,
-		images: ["/dashboard-preview-light.webp"],
+		images: ["/imagens/dashboard-preview-light.webp"],
 	},
 	robots: {
 		index: true,

app/(landing-page)/page.tsx

@@ -30,11 +30,11 @@ import {
 import { headers } from "next/headers";
 import Image from "next/image";
 import Link from "next/link";
-import { AnimatedThemeToggler } from "@/components/animated-theme-toggler";
 import { AnimateOnScroll } from "@/components/landing/animate-on-scroll";
 import { MobileNav } from "@/components/landing/mobile-nav";
 import { SetupTabs } from "@/components/landing/setup-tabs";
-import { Logo } from "@/components/logo";
+import { AnimatedThemeToggler } from "@/components/shared/animated-theme-toggler";
+import { Logo } from "@/components/shared/logo";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
@@ -120,20 +120,20 @@ const screenshotSections = [
 	{
 		title: "Lançamentos",
 		description: "Registre e organize todas as suas transações financeiras",
-		lightSrc: "/preview-lancamentos-light.webp",
+		lightSrc: "/imagens/preview-lancamentos-light.webp",
-		darkSrc: "/preview-lancamentos-dark.webp",
+		darkSrc: "/imagens/preview-lancamentos-dark.webp",
 	},
 	{
 		title: "Calendário",
 		description: "Visualize suas finanças no calendário mensal",
-		lightSrc: "/preview-calendario-light.webp",
+		lightSrc: "/imagens/preview-calendario-light.webp",
-		darkSrc: "/preview-calendario-dark.webp",
+		darkSrc: "/imagens/preview-calendario-dark.webp",
 	},
 	{
 		title: "Cartões",
 		description: "Acompanhe faturas, limites e vencimentos dos seus cartões",
-		lightSrc: "/preview-cartao-light.webp",
+		lightSrc: "/imagens/preview-cartao-light.webp",
-		darkSrc: "/preview-cartao-dark.webp",
+		darkSrc: "/imagens/preview-cartao-dark.webp",
 	},
 ];
 
@@ -353,7 +353,7 @@ export default async function Page() {
 						<AnimateOnScroll>
 							<div>
 								<Image
-									src="/dashboard-preview-light.webp"
+									src="/imagens/dashboard-preview-light.webp"
 									alt="openmonetis Dashboard Preview"
 									width={1920}
 									height={1080}
@@ -361,7 +361,7 @@ export default async function Page() {
 									priority
 								/>
 								<Image
-									src="/dashboard-preview-dark.webp"
+									src="/imagens/dashboard-preview-dark.webp"
 									alt="openmonetis Dashboard Preview"
 									width={1920}
 									height={1080}
@@ -607,7 +607,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.webp"
+											src="/imagens/openmonetis_companion.webp"
 											alt="OpenMonetis Companion App"
 											width={1080}
 											height={2217}

app/globals.css

@@ -3,7 +3,7 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
-  --spacing-custom-height-1: 30rem;
+  --spacing-custom-height-card: 30rem;
   --spacing-8xl: 88rem;  /* 1408px */
   --spacing-9xl: 96rem;  /* 1536px */
 }
@@ -14,15 +14,15 @@
   --font-money: var(--font-ai-sans);
 
   /* Base surfaces - warm cream with subtle orange undertone */
-  --background: oklch(96.563% 0.00504 67.275);
+  --background: oklch(98.01% 0.00331 67.026);
-  --foreground: oklch(18% 0.02 45);
+  --foreground: #0a0a0a;
-  --card: oklch(100% 0 0);
+  --card: var(--background);
-  --card-foreground: oklch(18% 0.02 45);
+  --card-foreground: #0a0a0a;
   --popover: oklch(99.5% 0.004 80);
   --popover-foreground: oklch(18% 0.02 45);
 
   /* Primary - rich terracotta orange */
-  --primary: oklch(69.18% 0.18855 38.353);
+  --primary: #fc712b;
   --primary-foreground: oklch(98% 0.008 80);
 
   /* Secondary - warm stone with subtle saturation */
@@ -31,14 +31,14 @@
 
   /* Muted - softer background variant */
   --muted: oklch(94.5% 0.014 75);
-  --muted-foreground: oklch(45% 0.015 60);
+  --muted-foreground: #44413c;
 
   /* Accent - complementary warm tone */
   --accent: oklch(94% 0.01 70);
-  --accent-foreground: oklch(22% 0.025 45);
+  --accent-foreground: #44413c;
 
   /* Semantic states */
-  --success: oklch(55% 0.17 150);
+  --success: oklch(55.87% 0.12943 157.517);
   --success-foreground: oklch(98% 0.01 150);
   --warning: oklch(69.913% 0.1798 49.649);
   --warning-foreground: oklch(20% 0.04 85);
@@ -50,21 +50,21 @@
   --destructive-foreground: oklch(98% 0.005 30);
 
   /* Borders and inputs - defined but subtle */
-  --border: oklch(88% 0.015 80);
+  --border: oklch(82% 0.012 75);
   --input: oklch(82% 0.012 75);
   --ring: oklch(69.18% 0.18855 38.353);
 
   /* Charts - 10 harmonious, distinct, accessible colors */
-  --chart-1: var(--color-emerald-400);
+  --chart-1: var(--color-emerald-500);
-  --chart-2: var(--color-orange-400);
+  --chart-2: var(--color-orange-500);
-  --chart-3: var(--color-indigo-400);
+  --chart-3: var(--color-indigo-500);
-  --chart-4: var(--color-amber-400);
+  --chart-4: var(--color-amber-500);
-  --chart-5: var(--color-pink-400);
+  --chart-5: var(--color-pink-500);
-  --chart-6: var(--color-stone-400);
+  --chart-6: var(--color-stone-500);
-  --chart-7: var(--color-teal-400);
+  --chart-7: var(--color-teal-500);
-  --chart-8: var(--color-violet-400);
+  --chart-8: var(--color-violet-500);
-  --chart-9: var(--color-cyan-400);
+  --chart-9: var(--color-cyan-500);
-  --chart-10: var(--color-lime-400);
+  --chart-10: var(--color-lime-500);
 
   /* Sidebar - slight elevation from background */
   --sidebar: oklch(100% 0 0);
@@ -77,7 +77,7 @@
   --sidebar-ring: oklch(69.18% 0.18855 38.353);
 
   /* Layout */
-  --radius: 1rem;
+  --radius: 0.5rem;
 
   /* Shadows - warm tinted for cohesion */
   --shadow-2xs: 0 1px 2px 0px oklch(35% 0.02 45 / 0.04);
@@ -96,22 +96,19 @@
   --tracking-normal: 0em;
   --spacing: 0.25rem;
 
-  /* Special components */
-  --welcome-banner: var(--primary);
-  --welcome-banner-foreground: var(--primary-foreground);
 }
 
 .dark {
   /* Base surfaces - warm dark with consistent hue family */
   --background: oklch(18.5% 0.002 70);
   --foreground: oklch(92% 0.015 80);
-  --card: oklch(0.13 0.01 64.18);
+  --card: var(--background);
   --card-foreground: oklch(92% 0.015 80);
   --popover: oklch(24% 0.003 70);
   --popover-foreground: oklch(92% 0.015 80);
 
   /* Primary - vibrant terracotta stands out on dark */
-  --primary: oklch(69.18% 0.18855 38.353);
+  --primary: #fa6c26;
   --primary-foreground: oklch(20% 0.002 70);
 
   /* Secondary - elevated surface */
@@ -166,7 +163,7 @@
   --sidebar-ring: oklch(69.18% 0.18855 38.353);
 
   /* Layout */
-  --radius: 1rem;
+  --radius: 0.5rem;
 
   /* Shadows - deeper for dark mode */
   --shadow-2xs: 0 1px 2px 0px oklch(0% 0 0 / 0.3);
@@ -181,14 +178,11 @@
     0 4px 6px -4px oklch(0% 0 0 / 0.45);
   --shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.6),
     0 8px 10px -6px oklch(0% 0 0 / 0.5);
-  --shadow-2xl: 0 25px 50px -12px oklch(0% 0 0 / 0.7);
+  --shadow-2xl: 0 25px 50px -12px oklch(0% 0 0 / 0.75);
 
   --tracking-normal: 0em;
   --spacing: 0.25rem;
 
-  /* Special components */
-  --welcome-banner: var(--card);
-  --welcome-banner-foreground: var(--card-foreground);
 }
 
 @theme inline {
@@ -251,8 +245,6 @@
   --shadow-2xl: var(--shadow-2xl);
   --tracking-normal: var(--tracking-normal);
   --spacing: var(--spacing);
-  --color-welcome-banner: var(--welcome-banner);
-  --color-welcome-banner-foreground: var(--welcome-banner-foreground);
 }
 
 @layer base {
@@ -270,11 +262,11 @@
   }
 
   *::selection {
-    @apply bg-primary/25 text-foreground;
+    @apply bg-primary text-foreground;
   }
 
   .dark *::selection {
-    @apply bg-primary/30 text-foreground;
+    @apply bg-primary text-background;
   }
 
   button:not(:disabled),

app/manifest.json

@@ -3,13 +3,13 @@
 	"short_name": "OpenMonetis",
 	"icons": [
 		{
-			"src": "/web-app-manifest-192x192.png",
+			"src": "/imagens/web-app-manifest-192x192.png",
 			"sizes": "192x192",
 			"type": "image/png",
 			"purpose": "maskable"
 		},
 		{
-			"src": "/web-app-manifest-512x512.png",
+			"src": "/imagens/web-app-manifest-512x512.png",
 			"sizes": "512x512",
 			"type": "image/png",
 			"purpose": "maskable"

components/auth/auth-sidebar.tsx

@@ -1,21 +1,6 @@
-import MagnetLines from "../magnet-lines";
-
 function AuthSidebar() {
 	return (
-		<div className="relative hidden flex-col overflow-hidden bg-welcome-banner text-welcome-banner-foreground md:flex">
+		<div className="relative hidden flex-col overflow-hidden bg-primary   md:flex">
-			<div className="absolute inset-0 flex items-center justify-center opacity-20 pointer-events-none">
-				<MagnetLines
-					rows={10}
-					columns={16}
-					containerSize="120%"
-					lineColor="currentColor"
-					lineWidth="0.35vmin"
-					lineHeight="5vmin"
-					baseAngle={-4}
-					className="text-welcome-banner-foreground"
-				/>
-			</div>
-
 			<div className="relative flex flex-1 flex-col justify-between p-8">
 				<div className="space-y-4">
 					<h2 className="text-3xl font-semibold leading-tight">

components/auth/login-form.tsx

@@ -15,7 +15,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { authClient, googleSignInAvailable } from "@/lib/auth/client";
 import { cn } from "@/lib/utils/ui";
-import { Logo } from "../logo";
+import { Logo } from "@/components/shared/logo";
 import { AuthErrorAlert } from "./auth-error-alert";
 import { AuthHeader } from "./auth-header";
 import AuthSidebar from "./auth-sidebar";

components/auth/signup-form.tsx

@@ -15,7 +15,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { authClient, googleSignInAvailable } from "@/lib/auth/client";
 import { cn } from "@/lib/utils/ui";
-import { Logo } from "../logo";
+import { Logo } from "@/components/shared/logo";
 import { AuthErrorAlert } from "./auth-error-alert";
 import { AuthHeader } from "./auth-header";
 import AuthSidebar from "./auth-sidebar";

components/landing/mobile-nav.tsx

@@ -3,7 +3,7 @@
 import { RiArrowRightSLine, RiMenuLine } from "@remixicon/react";
 import Link from "next/link";
 import { useState } from "react";
-import { Logo } from "@/components/logo";
+import { Logo } from "@/components/shared/logo";
 import { Button } from "@/components/ui/button";
 import {
 	Sheet,

lib/utils/export-branding.ts

@@ -66,7 +66,7 @@ export function getPrimaryPdfColor(): [number, number, number] {
 }
 
 export async function loadExportLogoDataUrl(
-	logoPath = "/logo_text.png",
+	logoPath = "/imagens/logo_text.png",
 ): Promise<string | null> {
 	if (typeof window === "undefined" || typeof document === "undefined") {
 		return null;

public/fonts/font_index.ts

@@ -28,6 +28,23 @@ const ai_sans = localFont({
 	variable: "--font-ai-sans",
 });
 
+const aeonik = localFont({
+	src: [
+		{
+			path: "./aeonikfono-regular.woff2",
+			weight: "400",
+			style: "normal",
+		},
+		{
+			path: "./aeonikfono-medium.woff2",
+			weight: "600",
+			style: "normal",
+		},
+	],
+	display: "swap",
+	variable: "--font-aeonik",
+});
+
 const itau = localFont({
 	src: [
 		{
@@ -51,6 +68,28 @@ const anthropic_sans = localFont({
 	variable: "--font-anthropic-sans",
 });
 
+const america = localFont({
+	src: [
+		{
+			path: "./america-regular.woff2",
+			weight: "400",
+			style: "normal",
+		},
+		{
+			path: "./america-medium.woff2",
+			weight: "700",
+			style: "normal",
+		},
+		{
+			path: "./america-bold.woff2",
+			weight: "900",
+			style: "normal",
+		},
+	],
+	display: "swap",
+	variable: "--font-america",
+});
+
 const inter = Inter({
 	subsets: ["latin"],
 	display: "swap",
@@ -112,6 +151,8 @@ export const DEFAULT_FONT_KEY = "ai-sans";
 
 export const FONT_OPTIONS = [
 	{ key: "ai-sans", label: "Open AI Sans", variable: "var(--font-ai-sans)" },
+	{ key: "america", label: "America", variable: "var(--font-america)" },
+	{ key: "aeonik", label: "Aeonik", variable: "var(--font-aeonik)" },
 	{
 		key: "anthropic-sans",
 		label: "Anthropic Sans",
@@ -171,6 +212,8 @@ const allFonts = [
 	fira_code,
 	ibm_plex_mono,
 	itau,
+	america,
+	aeonik,
 ];
 
 export const allFontVariables = allFonts.map((f) => f.variable).join(" ");