diff --git a/CHANGELOG.md b/CHANGELOG.md
index a905893..0cbfcf5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,28 @@ Todas as mudanças notáveis deste projeto serão documentadas neste arquivo.
 O formato é baseado em [Keep a Changelog](https://keepachangelog.com/pt-BR/1.1.0/),
 e este projeto adere ao [Versionamento Semântico](https://semver.org/lang/pt-BR/).
 
+## [1.5.2] - 2026-02-16
+
+### Alterado
+
+- Landing page reformulada: visual modernizado, melhor experiência mobile e novas seções
+- Hero section com gradient sutil e tipografia responsiva
+- Dashboard preview sem bordas para visual mais limpo
+- Seção "Funcionalidades" reorganizada em 2 blocos: 6 cards principais + 6 extras compactos
+- Seção "Como usar" com tabs Docker (Recomendado) vs Manual
+- Footer simplificado com 3 colunas (Projeto, Companion, descrição)
+- Métricas de destaque (widgets, self-hosted, stars, forks) entre hero e dashboard preview
+- Espaçamento e padding otimizados para mobile em todas as seções
+
+### Adicionado
+
+- Menu hamburger mobile com Sheet drawer (`components/landing/mobile-nav.tsx`)
+- Animações de fade-in no scroll via Intersection Observer (`components/landing/animate-on-scroll.tsx`)
+- Seção dedicada ao OpenMonetis Companion com screenshot do app, fluxo de captura e bancos suportados
+- Galeria "Conheça as telas" com screenshots de Lançamentos, Calendário e Cartões
+- Link "Conheça as telas" na navegação (desktop e mobile)
+- Componente de tabs para setup (`components/landing/setup-tabs.tsx`)
+
 ## [1.5.1] - 2026-02-16
 
 ### Alterado
diff --git a/app/(landing-page)/page.tsx b/app/(landing-page)/page.tsx
index b8bbd2b..444496f 100644
--- a/app/(landing-page)/page.tsx
+++ b/app/(landing-page)/page.tsx
@@ -3,6 +3,7 @@ import {
 	RiBankCard2Line,
 	RiBarChartBoxLine,
 	RiCalendarLine,
+	RiCheckLine,
 	RiCodeSSlashLine,
 	RiDatabase2Line,
 	RiDeviceLine,
@@ -10,13 +11,18 @@ import {
 	RiEyeOffLine,
 	RiFileTextLine,
 	RiFlashlightLine,
+	RiGitBranchLine,
 	RiGithubFill,
+	RiLayoutGridLine,
 	RiLineChartLine,
 	RiLockLine,
+	RiNotification3Line,
 	RiPercentLine,
 	RiPieChartLine,
 	RiRobot2Line,
 	RiShieldCheckLine,
+	RiSmartphoneLine,
+	RiStarLine,
 	RiTeamLine,
 	RiTimeLine,
 	RiWalletLine,
@@ -25,26 +31,130 @@ 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 { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { getOptionalUserSession } from "@/lib/auth/server";
 
+const mainFeatures = [
+	{
+		icon: RiWalletLine,
+		title: "Contas e transações",
+		description:
+			"Registre suas contas bancárias, cartões e dinheiro. Adicione receitas, despesas e transferências. Organize por categorias. Extratos detalhados por conta.",
+	},
+	{
+		icon: RiPercentLine,
+		title: "Parcelamentos avançados",
+		description:
+			"Controle completo de compras parceladas. Antecipe parcelas com cálculo automático de desconto. Veja análise consolidada de todas as parcelas em aberto.",
+	},
+	{
+		icon: RiRobot2Line,
+		title: "Insights com IA",
+		description:
+			"Análises financeiras geradas por IA (Claude, GPT, Gemini). Insights personalizados sobre seus padrões de gastos e recomendações inteligentes.",
+	},
+	{
+		icon: RiBarChartBoxLine,
+		title: "Relatórios e gráficos",
+		description:
+			"Dashboard com 20+ widgets interativos. Relatórios detalhados por categoria. Gráficos de evolução e comparativos. Exportação em PDF e Excel.",
+	},
+	{
+		icon: RiBankCard2Line,
+		title: "Faturas de cartão",
+		description:
+			"Cadastre seus cartões e acompanhe as faturas por período. Veja o que ainda não foi fechado. Controle limites, vencimentos e fechamentos.",
+	},
+	{
+		icon: RiTeamLine,
+		title: "Gestão colaborativa",
+		description:
+			"Compartilhe pagadores com permissões granulares (admin/viewer). Notificações automáticas por e-mail. Colabore em lançamentos compartilhados.",
+	},
+];
+
+const extraFeatures = [
+	{
+		icon: RiPieChartLine,
+		title: "Categorias e orçamentos",
+		description:
+			"Crie categorias personalizadas e defina orçamentos mensais com indicadores visuais.",
+	},
+	{
+		icon: RiFileTextLine,
+		title: "Anotações e tarefas",
+		description:
+			"Notas de texto e listas de tarefas com checkboxes. Arquivamento para manter histórico.",
+	},
+	{
+		icon: RiCalendarLine,
+		title: "Calendário financeiro",
+		description:
+			"Visualize transações em calendário mensal. Nunca perca prazos de pagamentos.",
+	},
+	{
+		icon: RiDownloadCloudLine,
+		title: "Importação em massa",
+		description: "Lance múltiplos lançamentos de uma vez",
+	},
+	{
+		icon: RiEyeOffLine,
+		title: "Modo privacidade",
+		description:
+			"Oculte valores sensíveis com um clique. Tema dark/light. Calculadora integrada.",
+	},
+	{
+		icon: RiFlashlightLine,
+		title: "Performance otimizada",
+		description: "Sistema rápido e com alta performance",
+	},
+];
+
+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",
+	},
+	{
+		title: "Calendário",
+		description: "Visualize suas finanças no calendário mensal",
+		lightSrc: "/preview-calendario-light.png",
+		darkSrc: "/preview-calendario-dark.png",
+	},
+	{
+		title: "Cartões",
+		description: "Acompanhe faturas, limites e vencimentos dos seus cartões",
+		lightSrc: "/preview-cartao-light.png",
+		darkSrc: "/preview-cartao-dark.png",
+	},
+];
+
+const companionBanks = ["Nubank", "Itaú", "Inter", "Mercado Pago", "Outros"];
+
 export default async function Page() {
-	const session = await getOptionalUserSession();
-	const headersList = await headers();
+	const [session, headersList] = await Promise.all([
+		getOptionalUserSession(),
+		headers(),
+	]);
 	const hostname = headersList.get("host")?.replace(/:\d+$/, "");
 	const publicDomain = process.env.PUBLIC_DOMAIN?.replace(
 		/^https?:\/\//,
 		"",
 	).replace(/:\d+$/, "");
-	const isPublicDomain = publicDomain && hostname === publicDomain;
+	const isPublicDomain = !!(publicDomain && hostname === publicDomain);
 
 	return (
 		<div className="flex min-h-screen flex-col">
 			{/* Navigation */}
-			<header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
+			<header className="sticky top-0 z-50 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
 				<div className="container flex h-16 items-center justify-between">
 					<div className="flex items-center">
 						<Logo />
@@ -52,12 +162,24 @@ export default async function Page() {
 
 					{/* Center Navigation Links */}
 					<nav className="hidden md:flex items-center gap-6 absolute left-1/2 transform -translate-x-1/2">
+						<a
+							href="#telas"
+							className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+						>
+							Conheça as telas
+						</a>
 						<a
 							href="#funcionalidades"
 							className="text-sm text-muted-foreground hover:text-foreground transition-colors"
 						>
 							Funcionalidades
 						</a>
+						<a
+							href="#companion"
+							className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+						>
+							Companion
+						</a>
 						<a
 							href="#stack"
 							className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -76,13 +198,13 @@ export default async function Page() {
 						<AnimatedThemeToggler />
 						{!isPublicDomain &&
 							(session?.user ? (
-								<Link prefetch href="/dashboard">
+								<Link prefetch href="/dashboard" className="hidden md:block">
 									<Button variant="outline" size="sm">
 										Dashboard
 									</Button>
 								</Link>
 							) : (
-								<>
+								<div className="hidden md:flex items-center gap-2">
 									<Link href="/login">
 										<Button variant="ghost" size="sm">
 											Entrar
@@ -94,36 +216,45 @@ export default async function Page() {
 											<RiArrowRightSLine size={16} />
 										</Button>
 									</Link>
-								</>
+								</div>
 							))}
+						<MobileNav
+							isPublicDomain={isPublicDomain}
+							isLoggedIn={!!session?.user}
+						/>
 					</nav>
 				</div>
 			</header>
 
 			{/* Hero Section */}
-			<section className="relative py-16 md:py-24 lg:py-32">
-				<div className="container">
-					<div className="mx-auto flex max-w-5xl flex-col items-center text-center gap-6">
-						<Badge variant="primary" className="mb-2">
+			<section className="relative overflow-hidden py-12 md:py-24 lg:py-32">
+				{/* Background gradient */}
+				<div className="pointer-events-none absolute inset-0 bg-linear-to-b from-primary/5 via-transparent to-transparent" />
+
+				<div className="container relative">
+					<div className="mx-auto flex max-w-5xl flex-col items-center text-center gap-5 md:gap-6">
+						<Logo variant="small" className="h-12 w-12 mb-1" />
+
+						<Badge variant="primary">
 							<RiGithubFill size={14} className="mr-1" />
 							Projeto Open Source
 						</Badge>
 
-						<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
+						<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
 							Suas finanças,
 							<span className="text-primary"> do seu jeito</span>
 						</h1>
 
-						<p className="text-lg md:text-xl text-muted-foreground max-w-2xl">
+						<p className="text-base sm:text-lg md:text-xl text-muted-foreground max-w-2xl px-4 sm:px-0">
 							Um projeto pessoal de gestão financeira. Self-hosted, sem Open
 							Finance, sem sincronização automática. Rode no seu computador ou
 							servidor e tenha controle total sobre suas finanças.
 						</p>
 
-						<div className="rounded-lg border bg-muted/30 p-4 max-w-2xl">
-							<p className="text-sm text-muted-foreground">
+						<div className="rounded-lg border bg-muted/30 p-3 sm:p-4 max-w-2xl mx-4 sm:mx-0">
+							<p className="text-xs sm:text-sm text-muted-foreground">
 								<span className="font-semibold text-foreground">
-									⚠️ Aviso importante:
+									Aviso importante:
 								</span>{" "}
 								Este sistema requer disciplina. Você precisa registrar
 								manualmente cada transação. Se prefere algo automático, este
@@ -131,10 +262,11 @@ export default async function Page() {
 							</p>
 						</div>
 
-						<div className="flex flex-col sm:flex-row gap-4 mt-4">
+						<div className="flex flex-col sm:flex-row gap-3 mt-2 w-full sm:w-auto px-4 sm:px-0">
 							<Link
 								href="https://github.com/felipegcoutinho/openmonetis"
 								target="_blank"
+								className="w-full sm:w-auto"
 							>
 								<Button size="lg" className="gap-2 w-full sm:w-auto">
 									<RiGithubFill size={18} />
@@ -144,6 +276,7 @@ export default async function Page() {
 							<Link
 								href="https://github.com/felipegcoutinho/openmonetis#readme"
 								target="_blank"
+								className="w-full sm:w-auto"
 							>
 								<Button
 									size="lg"
@@ -155,7 +288,7 @@ export default async function Page() {
 							</Link>
 						</div>
 
-						<div className="mt-8 flex flex-wrap items-center justify-center gap-6 text-sm text-muted-foreground">
+						<div className="mt-4 md:mt-8 flex flex-wrap items-center justify-center gap-4 md:gap-6 text-sm text-muted-foreground">
 							<div className="flex items-center gap-2">
 								<RiLockLine size={18} className="text-primary" />
 								Seus dados, seu servidor
@@ -169,389 +302,441 @@ export default async function Page() {
 				</div>
 			</section>
 
-			{/* Dashboard Preview Section */}
-			<section className="py-8 md:py-16">
+			{/* Metrics Bar */}
+			<section className="py-8 md:py-12 border-y">
 				<div className="container">
-					<div className="mx-auto max-w-6xl">
-						<Image
-							src="/dashboard-preview-light.png"
-							alt="openmonetis Dashboard Preview"
-							width={1920}
-							height={1080}
-							className="w-full h-auto dark:hidden"
-							priority
-						/>
-						<Image
-							src="/dashboard-preview-dark.png"
-							alt="openmonetis Dashboard Preview"
-							width={1920}
-							height={1080}
-							className="w-full h-auto hidden dark:block"
-							priority
-						/>
+					<div className="mx-auto max-w-4xl">
+						<div className="grid grid-cols-2 gap-4 md:grid-cols-4 md:gap-8">
+							<div className="flex flex-col items-center text-center gap-1.5">
+								<div className="flex items-center gap-2 text-primary">
+									<RiLayoutGridLine size={20} />
+								</div>
+								<span className="text-2xl md:text-3xl font-bold">20+</span>
+								<span className="text-xs md:text-sm text-muted-foreground">
+									Widgets no dashboard
+								</span>
+							</div>
+							<div className="flex flex-col items-center text-center gap-1.5">
+								<div className="flex items-center gap-2 text-primary">
+									<RiShieldCheckLine size={20} />
+								</div>
+								<span className="text-2xl md:text-3xl font-bold">100%</span>
+								<span className="text-xs md:text-sm text-muted-foreground">
+									Self-hosted
+								</span>
+							</div>
+							<div className="flex flex-col items-center text-center gap-1.5">
+								<div className="flex items-center gap-2 text-primary">
+									<RiStarLine size={20} />
+								</div>
+								<span className="text-2xl md:text-3xl font-bold">+200</span>
+								<span className="text-xs md:text-sm text-muted-foreground">
+									Stars no GitHub
+								</span>
+							</div>
+							<div className="flex flex-col items-center text-center gap-1.5">
+								<div className="flex items-center gap-2 text-primary">
+									<RiGitBranchLine size={20} />
+								</div>
+								<span className="text-2xl md:text-3xl font-bold">+60</span>
+								<span className="text-xs md:text-sm text-muted-foreground">
+									Forks no GitHub
+								</span>
+							</div>
+						</div>
 					</div>
 				</div>
 			</section>
 
-			{/* What's Here Section */}
-			<section id="funcionalidades" className="py-16 md:py-24 bg-muted/30">
+			{/* Dashboard Preview Section */}
+			<section className="py-6 md:py-16">
+				<div className="container">
+					<div className="mx-auto max-w-6xl">
+						<AnimateOnScroll>
+							<div>
+								<Image
+									src="/dashboard-preview-light.png"
+									alt="openmonetis Dashboard Preview"
+									width={1920}
+									height={1080}
+									className="w-full h-auto dark:hidden"
+									priority
+								/>
+								<Image
+									src="/dashboard-preview-dark.png"
+									alt="openmonetis Dashboard Preview"
+									width={1920}
+									height={1080}
+									className="w-full h-auto hidden dark:block"
+									priority
+								/>
+							</div>
+						</AnimateOnScroll>
+					</div>
+				</div>
+			</section>
+
+			{/* Screenshots Gallery Section */}
+			<section id="telas" className="py-12 md:py-24">
+				<div className="container">
+					<div className="mx-auto max-w-6xl">
+						<AnimateOnScroll>
+							<div className="text-center mb-8 md:mb-12">
+								<Badge variant="primary" className="mb-4">
+									Conheça as telas
+								</Badge>
+								<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight mb-3 md:mb-4">
+									Veja o que você pode fazer
+								</h2>
+								<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-4 sm:px-0">
+									Explore as principais telas do OpenMonetis
+								</p>
+							</div>
+						</AnimateOnScroll>
+
+						<div className="space-y-10 md:space-y-14">
+							{screenshotSections.map((section) => (
+								<AnimateOnScroll key={section.title}>
+									<div className="mb-3 text-center">
+										<h3 className="font-semibold text-base md:text-lg">
+											{section.title}
+										</h3>
+										<p className="text-sm text-muted-foreground">
+											{section.description}
+										</p>
+									</div>
+									<div>
+										<Image
+											src={section.lightSrc}
+											alt={`Preview ${section.title}`}
+											width={1920}
+											height={1080}
+											className="w-full h-auto dark:hidden"
+										/>
+										<Image
+											src={section.darkSrc}
+											alt={`Preview ${section.title}`}
+											width={1920}
+											height={1080}
+											className="w-full h-auto hidden dark:block"
+										/>
+									</div>
+								</AnimateOnScroll>
+							))}
+						</div>
+					</div>
+				</div>
+			</section>
+
+			{/* Features Section */}
+			<section id="funcionalidades" className="py-12 md:py-24">
 				<div className="container">
 					<div className="mx-auto max-w-5xl">
-						<div className="text-center mb-12">
-							<Badge variant="primary" className="mb-4">
-								O que tem aqui
-							</Badge>
-							<h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
-								Funcionalidades que importam
-							</h2>
-							<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-								Ferramentas simples para organizar suas contas, cartões, gastos
-								e receitas
-							</p>
-						</div>
+						<AnimateOnScroll>
+							<div className="text-center mb-8 md:mb-12">
+								<Badge variant="primary" className="mb-4">
+									O que tem aqui
+								</Badge>
+								<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight mb-3 md:mb-4">
+									Funcionalidades que importam
+								</h2>
+								<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-4 sm:px-0">
+									Ferramentas simples para organizar suas contas, cartões,
+									gastos e receitas
+								</p>
+							</div>
+						</AnimateOnScroll>
 
-						<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-							<Card className="border hover:border-primary/50 transition-colors">
-								<CardContent className="pt-6">
-									<div className="flex flex-col gap-4">
-										<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-											<RiWalletLine size={24} className="text-primary" />
+						{/* Main Features - larger cards */}
+						<AnimateOnScroll>
+							<div className="grid gap-4 md:gap-6 sm:grid-cols-2 lg:grid-cols-3">
+								{mainFeatures.map((feature) => (
+									<Card
+										key={feature.title}
+										className="border hover:border-primary/50 transition-colors"
+									>
+										<CardContent className="pt-5 pb-5 md:pt-6">
+											<div className="flex flex-col gap-3 md:gap-4">
+												<div className="flex h-11 w-11 md:h-12 md:w-12 items-center justify-center rounded-lg bg-primary/10">
+													<feature.icon
+														size={22}
+														className="text-primary md:size-6"
+													/>
+												</div>
+												<div>
+													<h3 className="font-semibold text-base md:text-lg mb-1.5 md:mb-2">
+														{feature.title}
+													</h3>
+													<p className="text-sm text-muted-foreground leading-relaxed">
+														{feature.description}
+													</p>
+												</div>
+											</div>
+										</CardContent>
+									</Card>
+								))}
+							</div>
+						</AnimateOnScroll>
+
+						{/* Extra Features - compact list */}
+						<AnimateOnScroll>
+							<div className="mt-8 md:mt-12">
+								<h3 className="text-lg font-semibold text-center mb-4 md:mb-6 text-muted-foreground">
+									E mais...
+								</h3>
+								<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+									{extraFeatures.map((feature) => (
+										<div
+											key={feature.title}
+											className="flex items-start gap-3 rounded-lg border bg-background p-3 md:p-4"
+										>
+											<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary/10">
+												<feature.icon size={18} className="text-primary" />
+											</div>
+											<div className="min-w-0">
+												<h4 className="font-medium text-sm mb-0.5">
+													{feature.title}
+												</h4>
+												<p className="text-xs text-muted-foreground leading-relaxed">
+													{feature.description}
+												</p>
+											</div>
 										</div>
-										<div>
-											<h3 className="font-semibold text-lg mb-2">
-												Contas e transações
-											</h3>
-											<p className="text-sm text-muted-foreground">
-												Registre suas contas bancárias, cartões e dinheiro.
-												Adicione receitas, despesas e transferências. Organize
-												por categorias. Extratos detalhados por conta.
-											</p>
+									))}
+								</div>
+							</div>
+						</AnimateOnScroll>
+					</div>
+				</div>
+			</section>
+
+			{/* Companion Section */}
+			<section id="companion" className="py-12 md:py-24">
+				<div className="container">
+					<div className="mx-auto max-w-5xl">
+						<AnimateOnScroll>
+							<div className="grid gap-8 md:gap-12 md:grid-cols-2 items-center">
+								{/* Text content */}
+								<div className="order-2 md:order-1">
+									<Badge variant="primary" className="mb-4">
+										<RiSmartphoneLine size={14} className="mr-1" />
+										App Android
+									</Badge>
+									<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight mb-3 md:mb-4">
+										Capture automaticamente do seu celular
+									</h2>
+									<p className="text-base md:text-lg text-muted-foreground mb-6">
+										O OpenMonetis Companion captura notificações de apps
+										bancários e cria pré-lançamentos automaticamente para você
+										revisar.
+									</p>
+
+									{/* Flow steps */}
+									<div className="space-y-3 mb-6">
+										<div className="flex items-start gap-3">
+											<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10">
+												<RiNotification3Line
+													size={16}
+													className="text-primary"
+												/>
+											</div>
+											<div>
+												<p className="text-sm font-medium">
+													Notificação bancária chega
+												</p>
+												<p className="text-xs text-muted-foreground">
+													O Companion intercepta automaticamente
+												</p>
+											</div>
+										</div>
+										<div className="flex items-start gap-3">
+											<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10">
+												<RiSmartphoneLine size={16} className="text-primary" />
+											</div>
+											<div>
+												<p className="text-sm font-medium">
+													Dados extraídos e enviados
+												</p>
+												<p className="text-xs text-muted-foreground">
+													Valor, descrição e banco são identificados
+												</p>
+											</div>
+										</div>
+										<div className="flex items-start gap-3">
+											<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10">
+												<RiCheckLine size={16} className="text-primary" />
+											</div>
+											<div>
+												<p className="text-sm font-medium">
+													Revise e confirme no OpenMonetis
+												</p>
+												<p className="text-xs text-muted-foreground">
+													Pré-lançamentos ficam na inbox para sua aprovação
+												</p>
+											</div>
 										</div>
 									</div>
-								</CardContent>
-							</Card>
 
-							<Card className="border hover:border-primary/50 transition-colors">
-								<CardContent className="pt-6">
-									<div className="flex flex-col gap-4">
-										<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-											<RiPercentLine size={24} className="text-primary" />
-										</div>
-										<div>
-											<h3 className="font-semibold text-lg mb-2">
-												Parcelamentos avançados
-											</h3>
-											<p className="text-sm text-muted-foreground">
-												Controle completo de compras parceladas. Antecipe
-												parcelas com cálculo automático de desconto. Veja
-												análise consolidada de todas as parcelas em aberto.
-											</p>
+									{/* Supported banks */}
+									<div className="mb-6">
+										<p className="text-xs font-medium text-muted-foreground mb-2 uppercase tracking-wider">
+											Bancos suportados
+										</p>
+										<div className="flex flex-wrap gap-2">
+											{companionBanks.map((bank) => (
+												<span
+													key={bank}
+													className="rounded-full border bg-muted/50 px-3 py-1 text-xs font-medium"
+												>
+													{bank}
+												</span>
+											))}
 										</div>
 									</div>
-								</CardContent>
-							</Card>
 
-							<Card className="border hover:border-primary/50 transition-colors">
-								<CardContent className="pt-6">
-									<div className="flex flex-col gap-4">
-										<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-											<RiRobot2Line size={24} className="text-primary" />
-										</div>
-										<div>
-											<h3 className="font-semibold text-lg mb-2">
-												Insights com IA
-											</h3>
-											<p className="text-sm text-muted-foreground">
-												Análises financeiras geradas por IA (Claude, GPT,
-												Gemini). Insights personalizados sobre seus padrões de
-												gastos e recomendações inteligentes.
-											</p>
-										</div>
-									</div>
-								</CardContent>
-							</Card>
+									<Link
+										href="https://github.com/felipegcoutinho/openmonetis-companion"
+										target="_blank"
+									>
+										<Button variant="outline" className="gap-2">
+											<RiGithubFill size={16} />
+											Ver no GitHub
+										</Button>
+									</Link>
+								</div>
 
-							<Card className="border hover:border-primary/50 transition-colors">
-								<CardContent className="pt-6">
-									<div className="flex flex-col gap-4">
-										<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-											<RiBarChartBoxLine size={24} className="text-primary" />
-										</div>
-										<div>
-											<h3 className="font-semibold text-lg mb-2">
-												Relatórios e gráficos
-											</h3>
-											<p className="text-sm text-muted-foreground">
-												Dashboard com 20+ widgets interativos. Relatórios
-												detalhados por categoria. Gráficos de evolução e
-												comparativos. Exportação em PDF e Excel.
-											</p>
-										</div>
+								{/* Companion Screenshot */}
+								<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"
+											alt="OpenMonetis Companion App"
+											width={1080}
+											height={2217}
+											className="w-full h-auto rounded-2xl"
+										/>
 									</div>
-								</CardContent>
-							</Card>
-
-							<Card className="border hover:border-primary/50 transition-colors">
-								<CardContent className="pt-6">
-									<div className="flex flex-col gap-4">
-										<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-											<RiBankCard2Line size={24} className="text-primary" />
-										</div>
-										<div>
-											<h3 className="font-semibold text-lg mb-2">
-												Faturas de cartão
-											</h3>
-											<p className="text-sm text-muted-foreground">
-												Cadastre seus cartões e acompanhe as faturas por
-												período. Veja o que ainda não foi fechado. Controle
-												limites, vencimentos e fechamentos.
-											</p>
-										</div>
-									</div>
-								</CardContent>
-							</Card>
-
-							<Card className="border hover:border-primary/50 transition-colors">
-								<CardContent className="pt-6">
-									<div className="flex flex-col gap-4">
-										<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-											<RiTeamLine size={24} className="text-primary" />
-										</div>
-										<div>
-											<h3 className="font-semibold text-lg mb-2">
-												Gestão colaborativa
-											</h3>
-											<p className="text-sm text-muted-foreground">
-												Compartilhe pagadores com permissões granulares (admin/
-												viewer). Notificações automáticas por e-mail. Colabore
-												em lançamentos compartilhados.
-											</p>
-										</div>
-									</div>
-								</CardContent>
-							</Card>
-
-							<Card className="border hover:border-primary/50 transition-colors">
-								<CardContent className="pt-6">
-									<div className="flex flex-col gap-4">
-										<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-											<RiPieChartLine size={24} className="text-primary" />
-										</div>
-										<div>
-											<h3 className="font-semibold text-lg mb-2">
-												Categorias e orçamentos
-											</h3>
-											<p className="text-sm text-muted-foreground">
-												Crie categorias personalizadas. Defina orçamentos
-												mensais e acompanhe o quanto gastou vs. planejado com
-												indicadores visuais.
-											</p>
-										</div>
-									</div>
-								</CardContent>
-							</Card>
-
-							<Card className="border hover:border-primary/50 transition-colors">
-								<CardContent className="pt-6">
-									<div className="flex flex-col gap-4">
-										<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-											<RiFileTextLine size={24} className="text-primary" />
-										</div>
-										<div>
-											<h3 className="font-semibold text-lg mb-2">
-												Anotações e tarefas
-											</h3>
-											<p className="text-sm text-muted-foreground">
-												Crie notas de texto e listas de tarefas com checkboxes.
-												Sistema de arquivamento para manter histórico. Organize
-												seus planejamentos financeiros.
-											</p>
-										</div>
-									</div>
-								</CardContent>
-							</Card>
-
-							<Card className="border hover:border-primary/50 transition-colors">
-								<CardContent className="pt-6">
-									<div className="flex flex-col gap-4">
-										<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-											<RiCalendarLine size={24} className="text-primary" />
-										</div>
-										<div>
-											<h3 className="font-semibold text-lg mb-2">
-												Calendário financeiro
-											</h3>
-											<p className="text-sm text-muted-foreground">
-												Visualize todas as transações em calendário mensal.
-												Navegação intuitiva por data. Nunca perca prazos de
-												pagamentos importantes.
-											</p>
-										</div>
-									</div>
-								</CardContent>
-							</Card>
-
-							<Card className="border hover:border-primary/50 transition-colors">
-								<CardContent className="pt-6">
-									<div className="flex flex-col gap-4">
-										<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-											<RiDownloadCloudLine size={24} className="text-primary" />
-										</div>
-										<div>
-											<h3 className="font-semibold text-lg mb-2">
-												Importação em massa
-											</h3>
-											<p className="text-sm text-muted-foreground">
-												Cole múltiplos lançamentos de uma vez. Economize tempo
-												ao registrar várias transações. Formatação inteligente
-												para facilitar a entrada de dados.
-											</p>
-										</div>
-									</div>
-								</CardContent>
-							</Card>
-
-							<Card className="border hover:border-primary/50 transition-colors">
-								<CardContent className="pt-6">
-									<div className="flex flex-col gap-4">
-										<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-											<RiEyeOffLine size={24} className="text-primary" />
-										</div>
-										<div>
-											<h3 className="font-semibold text-lg mb-2">
-												Modo privacidade
-											</h3>
-											<p className="text-sm text-muted-foreground">
-												Oculte valores sensíveis com um clique. Tema dark/light
-												adaptável. Preferências personalizáveis. Calculadora
-												integrada para planejamento.
-											</p>
-										</div>
-									</div>
-								</CardContent>
-							</Card>
-
-							<Card className="border hover:border-primary/50 transition-colors">
-								<CardContent className="pt-6">
-									<div className="flex flex-col gap-4">
-										<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
-											<RiFlashlightLine size={24} className="text-primary" />
-										</div>
-										<div>
-											<h3 className="font-semibold text-lg mb-2">
-												Performance otimizada
-											</h3>
-											<p className="text-sm text-muted-foreground">
-												Dashboard carrega em ~200-500ms com 18+ queries
-												paralelas. Índices otimizados. Type-safe em toda
-												codebase. Isolamento completo de dados por usuário.
-											</p>
-										</div>
-									</div>
-								</CardContent>
-							</Card>
-						</div>
+								</div>
+							</div>
+						</AnimateOnScroll>
 					</div>
 				</div>
 			</section>
 
 			{/* Tech Stack Section */}
-			<section id="stack" className="py-16 md:py-24">
+			<section id="stack" className="py-12 md:py-24">
 				<div className="container">
 					<div className="mx-auto max-w-5xl">
-						<div className="text-center mb-12">
-							<Badge variant="primary" className="mb-4">
-								Stack técnica
-							</Badge>
-							<h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
-								Construído com tecnologias modernas
-							</h2>
-							<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-								Open source, self-hosted e fácil de customizar
-							</p>
-						</div>
+						<AnimateOnScroll>
+							<div className="text-center mb-8 md:mb-12">
+								<Badge variant="primary" className="mb-4">
+									Stack técnica
+								</Badge>
+								<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight mb-3 md:mb-4">
+									Construído com tecnologias modernas
+								</h2>
+								<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-4 sm:px-0">
+									Open source, self-hosted e fácil de customizar
+								</p>
+							</div>
+						</AnimateOnScroll>
 
-						<div className="grid gap-6 md:grid-cols-2">
-							<Card className="border">
-								<CardContent>
-									<div className="flex items-start gap-4">
-										<RiCodeSSlashLine
-											size={32}
-											className="text-primary shrink-0"
-										/>
-										<div>
-											<h3 className="font-semibold text-lg mb-2">Frontend</h3>
-											<p className="text-sm text-muted-foreground mb-3">
-												Next.js 16, TypeScript, Tailwind CSS, shadcn/ui
-											</p>
-											<p className="text-xs text-muted-foreground">
-												Interface moderna e responsiva com React 19 e App Router
-											</p>
+						<AnimateOnScroll>
+							<div className="grid gap-4 md:gap-6 sm:grid-cols-2">
+								<Card className="border">
+									<CardContent>
+										<div className="flex items-start gap-4">
+											<RiCodeSSlashLine
+												size={28}
+												className="text-primary shrink-0 md:size-8"
+											/>
+											<div>
+												<h3 className="font-semibold text-base md:text-lg mb-1.5 md:mb-2">
+													Frontend
+												</h3>
+												<p className="text-sm text-muted-foreground mb-2 md:mb-3">
+													Next.js 16, TypeScript, Tailwind CSS, shadcn/ui
+												</p>
+												<p className="text-xs text-muted-foreground">
+													Interface moderna e responsiva com React 19 e App
+													Router
+												</p>
+											</div>
 										</div>
-									</div>
-								</CardContent>
-							</Card>
+									</CardContent>
+								</Card>
 
-							<Card className="border">
-								<CardContent>
-									<div className="flex items-start gap-4">
-										<RiDatabase2Line
-											size={32}
-											className="text-primary shrink-0"
-										/>
-										<div>
-											<h3 className="font-semibold text-lg mb-2">Backend</h3>
-											<p className="text-sm text-muted-foreground mb-3">
-												PostgreSQL 18, Drizzle ORM, Better Auth
-											</p>
-											<p className="text-xs text-muted-foreground">
-												Banco relacional robusto com type-safe ORM
-											</p>
+								<Card className="border">
+									<CardContent>
+										<div className="flex items-start gap-4">
+											<RiDatabase2Line
+												size={28}
+												className="text-primary shrink-0 md:size-8"
+											/>
+											<div>
+												<h3 className="font-semibold text-base md:text-lg mb-1.5 md:mb-2">
+													Backend
+												</h3>
+												<p className="text-sm text-muted-foreground mb-2 md:mb-3">
+													PostgreSQL 18, Drizzle ORM, Better Auth
+												</p>
+												<p className="text-xs text-muted-foreground">
+													Banco relacional robusto com type-safe ORM
+												</p>
+											</div>
 										</div>
-									</div>
-								</CardContent>
-							</Card>
+									</CardContent>
+								</Card>
 
-							<Card className="border">
-								<CardContent>
-									<div className="flex items-start gap-4">
-										<RiShieldCheckLine
-											size={32}
-											className="text-primary shrink-0"
-										/>
-										<div>
-											<h3 className="font-semibold text-lg mb-2">Segurança</h3>
-											<p className="text-sm text-muted-foreground mb-3">
-												Better Auth com OAuth (Google) e autenticação por email
-											</p>
-											<p className="text-xs text-muted-foreground">
-												Sessões seguras e proteção de rotas por middleware
-											</p>
+								<Card className="border">
+									<CardContent>
+										<div className="flex items-start gap-4">
+											<RiShieldCheckLine
+												size={28}
+												className="text-primary shrink-0 md:size-8"
+											/>
+											<div>
+												<h3 className="font-semibold text-base md:text-lg mb-1.5 md:mb-2">
+													Segurança
+												</h3>
+												<p className="text-sm text-muted-foreground mb-2 md:mb-3">
+													Better Auth com OAuth (Google) e autenticação por
+													email
+												</p>
+												<p className="text-xs text-muted-foreground">
+													Sessões seguras e proteção de rotas por middleware
+												</p>
+											</div>
 										</div>
-									</div>
-								</CardContent>
-							</Card>
+									</CardContent>
+								</Card>
 
-							<Card className="border">
-								<CardContent>
-									<div className="flex items-start gap-4">
-										<RiDeviceLine size={32} className="text-primary shrink-0" />
-										<div>
-											<h3 className="font-semibold text-lg mb-2">Deploy</h3>
-											<p className="text-sm text-muted-foreground mb-3">
-												Docker com multi-stage build, health checks e volumes
-												persistentes
-											</p>
-											<p className="text-xs text-muted-foreground">
-												Fácil de rodar localmente ou em qualquer servidor
-											</p>
+								<Card className="border">
+									<CardContent>
+										<div className="flex items-start gap-4">
+											<RiDeviceLine
+												size={28}
+												className="text-primary shrink-0 md:size-8"
+											/>
+											<div>
+												<h3 className="font-semibold text-base md:text-lg mb-1.5 md:mb-2">
+													Deploy
+												</h3>
+												<p className="text-sm text-muted-foreground mb-2 md:mb-3">
+													Docker com multi-stage build, health checks e volumes
+													persistentes
+												</p>
+												<p className="text-xs text-muted-foreground">
+													Fácil de rodar localmente ou em qualquer servidor
+												</p>
+											</div>
 										</div>
-									</div>
-								</CardContent>
-							</Card>
-						</div>
+									</CardContent>
+								</Card>
+							</div>
+						</AnimateOnScroll>
 
-						<div className="mt-8 text-center">
+						<div className="mt-6 md:mt-8 text-center">
 							<p className="text-sm text-muted-foreground">
 								Seus dados ficam no seu controle. Pode rodar localmente ou no
 								seu próprio servidor.
@@ -562,110 +747,28 @@ export default async function Page() {
 			</section>
 
 			{/* How to run Section */}
-			<section id="como-usar" className="py-16 md:py-24">
+			<section id="como-usar" className="py-12 md:py-24">
 				<div className="container">
 					<div className="mx-auto max-w-3xl">
-						<div className="text-center mb-12">
-							<Badge variant="primary" className="mb-4">
-								Como usar
-							</Badge>
-							<h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
-								Rode no seu computador
-							</h2>
-							<p className="text-lg text-muted-foreground">
-								Não há versão hospedada online. Você precisa rodar localmente.
-							</p>
-						</div>
+						<AnimateOnScroll>
+							<div className="text-center mb-8 md:mb-12">
+								<Badge variant="primary" className="mb-4">
+									Como usar
+								</Badge>
+								<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight mb-3 md:mb-4">
+									Rode no seu computador
+								</h2>
+								<p className="text-base md:text-lg text-muted-foreground px-4 sm:px-0">
+									Não há versão hospedada online. Você precisa rodar localmente.
+								</p>
+							</div>
+						</AnimateOnScroll>
 
-						<div className="space-y-6">
-							<Card className="border">
-								<CardContent>
-									<div className="flex gap-4">
-										<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold">
-											1
-										</div>
-										<div>
-											<h3 className="font-semibold mb-2">
-												Clone o repositório
-											</h3>
-											<code className="text-sm bg-muted px-2 py-1 rounded">
-												git clone
-												https://github.com/felipegcoutinho/openmonetis.git
-											</code>
-										</div>
-									</div>
-								</CardContent>
-							</Card>
+						<AnimateOnScroll>
+							<SetupTabs />
+						</AnimateOnScroll>
 
-							<Card className="border">
-								<CardContent>
-									<div className="flex gap-4">
-										<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold">
-											2
-										</div>
-										<div>
-											<h3 className="font-semibold mb-2">
-												Configure as variáveis de ambiente
-											</h3>
-											<p className="text-sm text-muted-foreground">
-												Copie o{" "}
-												<code className="bg-muted px-1 rounded">
-													.env.example
-												</code>{" "}
-												para <code className="bg-muted px-1 rounded">.env</code>{" "}
-												e configure o banco de dados
-											</p>
-										</div>
-									</div>
-								</CardContent>
-							</Card>
-
-							<Card className="border">
-								<CardContent>
-									<div className="flex gap-4">
-										<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold">
-											3
-										</div>
-										<div>
-											<h3 className="font-semibold mb-2">
-												Suba o banco via Docker
-											</h3>
-											<code className="text-sm bg-muted px-2 py-1 rounded">
-												docker compose up db -d
-											</code>
-										</div>
-									</div>
-								</CardContent>
-							</Card>
-
-							<Card className="border">
-								<CardContent>
-									<div className="flex gap-4">
-										<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold">
-											4
-										</div>
-										<div>
-											<h3 className="font-semibold mb-2">
-												Rode a aplicação localmente
-											</h3>
-											<div className="space-y-2">
-												<code className="block text-sm bg-muted px-2 py-1 rounded">
-													pnpm install
-												</code>
-												<code className="block text-sm bg-muted px-2 py-1 rounded">
-													pnpm db:push
-												</code>
-												<code className="block text-sm bg-muted px-2 py-1 rounded">
-													pnpm dev
-												</code>
-											</div>
-										</div>
-									</div>
-								</CardContent>
-							</Card>
-						</div>
-
-						<div className="mt-8 text-center">
+						<div className="mt-6 md:mt-8 text-center">
 							<Link
 								href="https://github.com/felipegcoutinho/openmonetis#-início-rápido"
 								target="_blank"
@@ -679,142 +782,162 @@ export default async function Page() {
 			</section>
 
 			{/* Who is this for Section */}
-			<section className="py-16 md:py-24 bg-muted/30">
+			<section className="py-12 md:py-24">
 				<div className="container">
 					<div className="mx-auto max-w-3xl">
-						<div className="text-center mb-12">
-							<h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
-								Para quem funciona?
-							</h2>
-							<p className="text-lg text-muted-foreground">
-								O openmonetis funciona melhor se você:
-							</p>
-						</div>
+						<AnimateOnScroll>
+							<div className="text-center mb-8 md:mb-12">
+								<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight mb-3 md:mb-4">
+									Para quem funciona?
+								</h2>
+								<p className="text-base md:text-lg text-muted-foreground px-4 sm:px-0">
+									O openmonetis funciona melhor se você:
+								</p>
+							</div>
+						</AnimateOnScroll>
 
-						<div className="space-y-4">
-							<Card className="border">
-								<CardContent>
-									<div className="flex gap-4">
-										<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-											<RiTimeLine size={20} className="text-primary" />
+						<AnimateOnScroll>
+							<div className="space-y-3 md:space-y-4">
+								<Card className="border">
+									<CardContent>
+										<div className="flex gap-3 md:gap-4">
+											<div className="flex h-9 w-9 md:h-10 md:w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+												<RiTimeLine
+													size={18}
+													className="text-primary md:size-5"
+												/>
+											</div>
+											<div>
+												<h3 className="font-semibold mb-1">
+													Tem disciplina de registrar gastos
+												</h3>
+												<p className="text-xs sm:text-sm text-muted-foreground">
+													Não se importa em dedicar alguns minutos por dia ou
+													semana para manter tudo atualizado
+												</p>
+											</div>
 										</div>
-										<div>
-											<h3 className="font-semibold mb-1">
-												Tem disciplina de registrar gastos
-											</h3>
-											<p className="text-sm text-muted-foreground">
-												Não se importa em dedicar alguns minutos por dia ou
-												semana para manter tudo atualizado
-											</p>
-										</div>
-									</div>
-								</CardContent>
-							</Card>
+									</CardContent>
+								</Card>
 
-							<Card className="border">
-								<CardContent>
-									<div className="flex gap-4">
-										<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-											<RiLockLine size={20} className="text-primary" />
+								<Card className="border">
+									<CardContent>
+										<div className="flex gap-3 md:gap-4">
+											<div className="flex h-9 w-9 md:h-10 md:w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+												<RiLockLine
+													size={18}
+													className="text-primary md:size-5"
+												/>
+											</div>
+											<div>
+												<h3 className="font-semibold mb-1">
+													Quer controle total sobre seus dados
+												</h3>
+												<p className="text-xs sm:text-sm text-muted-foreground">
+													Prefere hospedar seus próprios dados ao invés de
+													depender de serviços terceiros
+												</p>
+											</div>
 										</div>
-										<div>
-											<h3 className="font-semibold mb-1">
-												Quer controle total sobre seus dados
-											</h3>
-											<p className="text-sm text-muted-foreground">
-												Prefere hospedar seus próprios dados ao invés de
-												depender de serviços terceiros
-											</p>
-										</div>
-									</div>
-								</CardContent>
-							</Card>
+									</CardContent>
+								</Card>
 
-							<Card className="border">
-								<CardContent>
-									<div className="flex gap-4">
-										<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-											<RiLineChartLine size={20} className="text-primary" />
+								<Card className="border">
+									<CardContent>
+										<div className="flex gap-3 md:gap-4">
+											<div className="flex h-9 w-9 md:h-10 md:w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+												<RiLineChartLine
+													size={18}
+													className="text-primary md:size-5"
+												/>
+											</div>
+											<div>
+												<h3 className="font-semibold mb-1">
+													Gosta de entender exatamente onde o dinheiro vai
+												</h3>
+												<p className="text-xs sm:text-sm text-muted-foreground">
+													Quer visualizar padrões de gastos e tomar decisões
+													informadas
+												</p>
+											</div>
 										</div>
-										<div>
-											<h3 className="font-semibold mb-1">
-												Gosta de entender exatamente onde o dinheiro vai
-											</h3>
-											<p className="text-sm text-muted-foreground">
-												Quer visualizar padrões de gastos e tomar decisões
-												informadas
-											</p>
-										</div>
-									</div>
-								</CardContent>
-							</Card>
-						</div>
+									</CardContent>
+								</Card>
+							</div>
+						</AnimateOnScroll>
 
-						<div className="mt-8 rounded-lg border bg-background p-6 text-center">
-							<p className="text-sm text-muted-foreground">
-								Se você não se encaixa nisso, provavelmente vai abandonar depois
-								de uma semana. E tudo bem! Existem outras ferramentas com
-								sincronização automática que podem funcionar melhor pra você.
-							</p>
-						</div>
+						<AnimateOnScroll>
+							<div className="mt-6 md:mt-8 rounded-lg border bg-background p-4 md:p-6 text-center">
+								<p className="text-xs sm:text-sm text-muted-foreground">
+									Se você não se encaixa nisso, provavelmente vai abandonar
+									depois de uma semana. E tudo bem! Existem outras ferramentas
+									com sincronização automática que podem funcionar melhor pra
+									você.
+								</p>
+							</div>
+						</AnimateOnScroll>
 					</div>
 				</div>
 			</section>
 
 			{/* CTA Section */}
-			<section className="py-16 md:py-24">
+			<section className="py-12 md:py-24">
 				<div className="container">
-					<div className="mx-auto max-w-3xl text-center">
-						<h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
-							Pronto para testar?
-						</h2>
-						<p className="text-lg text-muted-foreground mb-8">
-							Clone o repositório, rode localmente e veja se faz sentido pra
-							você. É open source e gratuito.
-						</p>
-						<div className="flex flex-col sm:flex-row gap-4 justify-center">
-							<Link
-								href="https://github.com/felipegcoutinho/openmonetis"
-								target="_blank"
-							>
-								<Button size="lg" className="gap-2 w-full sm:w-auto">
-									<RiGithubFill size={18} />
-									Baixar Projeto
-								</Button>
-							</Link>
-							<Link
-								href="https://github.com/felipegcoutinho/openmonetis#-início-rápido"
-								target="_blank"
-							>
-								<Button
-									size="lg"
-									variant="outline"
-									className="w-full sm:w-auto gap-2"
+					<AnimateOnScroll>
+						<div className="mx-auto max-w-3xl text-center px-4 sm:px-0">
+							<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight mb-3 md:mb-4">
+								Pronto para testar?
+							</h2>
+							<p className="text-base md:text-lg text-muted-foreground mb-6 md:mb-8">
+								Clone o repositório, rode localmente e veja se faz sentido pra
+								você. É open source e gratuito.
+							</p>
+							<div className="flex flex-col sm:flex-row gap-3 md:gap-4 justify-center">
+								<Link
+									href="https://github.com/felipegcoutinho/openmonetis"
+									target="_blank"
+									className="w-full sm:w-auto"
 								>
-									Como Instalar
-								</Button>
-							</Link>
+									<Button size="lg" className="gap-2 w-full sm:w-auto">
+										<RiGithubFill size={18} />
+										Baixar Projeto
+									</Button>
+								</Link>
+								<Link
+									href="https://github.com/felipegcoutinho/openmonetis#-início-rápido"
+									target="_blank"
+									className="w-full sm:w-auto"
+								>
+									<Button
+										size="lg"
+										variant="outline"
+										className="w-full sm:w-auto gap-2"
+									>
+										Como Instalar
+									</Button>
+								</Link>
+							</div>
 						</div>
-					</div>
+					</AnimateOnScroll>
 				</div>
 			</section>
 
 			{/* Footer */}
-			<footer className="border-t py-12 mt-auto">
+			<footer className="border-t py-8 md:py-12 mt-auto">
 				<div className="container">
 					<div className="mx-auto max-w-5xl">
-						<div className="grid gap-8 md:grid-cols-3">
-							<div>
+						<div className="grid gap-8 sm:grid-cols-2 md:grid-cols-3">
+							<div className="sm:col-span-2 md:col-span-1">
 								<Logo />
-								<p className="text-sm text-muted-foreground mt-4">
+								<p className="text-sm text-muted-foreground mt-3 md:mt-4">
 									Projeto pessoal de gestão financeira. Open source e
 									self-hosted.
 								</p>
 							</div>
 
 							<div>
-								<h3 className="font-semibold mb-4">Projeto</h3>
-								<ul className="space-y-3 text-sm text-muted-foreground">
+								<h3 className="font-semibold mb-3 md:mb-4">Projeto</h3>
+								<ul className="space-y-2.5 md:space-y-3 text-sm text-muted-foreground">
 									<li>
 										<Link
 											href="https://github.com/felipegcoutinho/openmonetis"
@@ -847,20 +970,32 @@ export default async function Page() {
 							</div>
 
 							<div>
-								<h3 className="font-semibold mb-4">Stack</h3>
-								<ul className="space-y-3 text-sm text-muted-foreground">
-									<li>Next.js 16 + TypeScript</li>
-									<li>PostgreSQL 18 + Drizzle ORM</li>
-									<li>Better Auth + shadcn/ui</li>
-									<li>Docker + Docker Compose</li>
+								<h3 className="font-semibold mb-3 md:mb-4">Companion</h3>
+								<ul className="space-y-2.5 md:space-y-3 text-sm text-muted-foreground">
+									<li>
+										<Link
+											href="https://github.com/felipegcoutinho/openmonetis-companion"
+											target="_blank"
+											className="hover:text-foreground transition-colors flex items-center gap-2"
+										>
+											<RiGithubFill size={16} />
+											GitHub
+										</Link>
+									</li>
+									<li>
+										<span className="flex items-center gap-2">
+											<RiSmartphoneLine size={16} />
+											App Android
+										</span>
+									</li>
 								</ul>
 							</div>
 						</div>
 
-						<div className="border-t mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
+						<div className="border-t mt-8 md:mt-12 pt-6 md:pt-8 flex flex-col md:flex-row justify-between items-center gap-3 md:gap-4 text-sm text-muted-foreground">
 							<p>
 								© {new Date().getFullYear()} openmonetis. Projeto open source
-								sob licença MIT.
+								sob licença.
 							</p>
 							<div className="flex items-center gap-2">
 								<RiShieldCheckLine size={16} className="text-primary" />
diff --git a/components/landing/animate-on-scroll.tsx b/components/landing/animate-on-scroll.tsx
new file mode 100644
index 0000000..64fe826
--- /dev/null
+++ b/components/landing/animate-on-scroll.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { type ReactNode, useEffect, useRef, useState } from "react";
+
+interface AnimateOnScrollProps {
+	children: ReactNode;
+	className?: string;
+}
+
+export function AnimateOnScroll({ children, className }: AnimateOnScrollProps) {
+	const ref = useRef<HTMLDivElement>(null);
+	const [isVisible, setIsVisible] = useState(false);
+
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+
+		const observer = new IntersectionObserver(
+			([entry]) => {
+				if (entry.isIntersecting) {
+					setIsVisible(true);
+					observer.unobserve(element);
+				}
+			},
+			{ threshold: 0.1, rootMargin: "0px 0px -40px 0px" },
+		);
+
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+
+	return (
+		<div
+			ref={ref}
+			className={`transition-all duration-700 ease-out ${
+				isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
+			} ${className ?? ""}`}
+		>
+			{children}
+		</div>
+	);
+}
diff --git a/components/landing/mobile-nav.tsx b/components/landing/mobile-nav.tsx
new file mode 100644
index 0000000..db7dff3
--- /dev/null
+++ b/components/landing/mobile-nav.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { RiArrowRightSLine, RiMenuLine } from "@remixicon/react";
+import Link from "next/link";
+import { useState } from "react";
+import { Logo } from "@/components/logo";
+import { Button } from "@/components/ui/button";
+import {
+	Sheet,
+	SheetContent,
+	SheetHeader,
+	SheetTitle,
+} from "@/components/ui/sheet";
+
+const navLinks = [
+	{ href: "#telas", label: "Conheça as telas" },
+	{ href: "#funcionalidades", label: "Funcionalidades" },
+	{ href: "#companion", label: "Companion" },
+	{ href: "#stack", label: "Stack" },
+	{ href: "#como-usar", label: "Como usar" },
+];
+
+interface MobileNavProps {
+	isPublicDomain: boolean;
+	isLoggedIn: boolean;
+}
+
+export function MobileNav({ isPublicDomain, isLoggedIn }: MobileNavProps) {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<div className="md:hidden">
+			<Button
+				variant="ghost"
+				size="icon"
+				onClick={() => setOpen(true)}
+				aria-label="Abrir menu"
+			>
+				<RiMenuLine size={20} />
+			</Button>
+
+			<Sheet open={open} onOpenChange={setOpen}>
+				<SheetContent side="right" className="w-72">
+					<SheetHeader>
+						<SheetTitle>
+							<Logo />
+						</SheetTitle>
+					</SheetHeader>
+
+					<nav className="flex flex-col gap-1 px-4">
+						{navLinks.map((link) => (
+							<a
+								key={link.href}
+								href={link.href}
+								onClick={() => setOpen(false)}
+								className="rounded-md px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+							>
+								{link.label}
+							</a>
+						))}
+					</nav>
+
+					{!isPublicDomain && (
+						<div className="mt-auto flex flex-col gap-2 border-t p-4">
+							{isLoggedIn ? (
+								<Link href="/dashboard" onClick={() => setOpen(false)}>
+									<Button variant="outline" className="w-full">
+										Dashboard
+									</Button>
+								</Link>
+							) : (
+								<>
+									<Link href="/login" onClick={() => setOpen(false)}>
+										<Button variant="ghost" className="w-full">
+											Entrar
+										</Button>
+									</Link>
+									<Link href="/signup" onClick={() => setOpen(false)}>
+										<Button className="w-full gap-2">
+											Começar
+											<RiArrowRightSLine size={16} />
+										</Button>
+									</Link>
+								</>
+							)}
+						</div>
+					)}
+				</SheetContent>
+			</Sheet>
+		</div>
+	);
+}
diff --git a/components/landing/setup-tabs.tsx b/components/landing/setup-tabs.tsx
new file mode 100644
index 0000000..7766fa9
--- /dev/null
+++ b/components/landing/setup-tabs.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export function SetupTabs() {
+	return (
+		<Tabs defaultValue="docker" className="w-full">
+			<TabsList className="justify-center mb-6">
+				<TabsTrigger value="docker">Docker (Recomendado)</TabsTrigger>
+				<TabsTrigger value="manual">Manual</TabsTrigger>
+			</TabsList>
+
+			<TabsContent value="docker">
+				<div className="space-y-4 md:space-y-6">
+					<StepCard step={1} title="Clone o repositório">
+						<code className="block text-xs sm:text-sm bg-muted px-2 py-1 rounded overflow-x-auto">
+							git clone https://github.com/felipegcoutinho/openmonetis.git
+						</code>
+					</StepCard>
+
+					<StepCard step={2} title="Configure as variáveis de ambiente">
+						<p className="text-xs sm:text-sm text-muted-foreground">
+							Copie o{" "}
+							<code className="bg-muted px-1 rounded">.env.example</code> para{" "}
+							<code className="bg-muted px-1 rounded">.env</code> e configure o
+							banco de dados
+						</p>
+					</StepCard>
+
+					<StepCard step={3} title="Suba tudo com Docker Compose">
+						<code className="block text-xs sm:text-sm bg-muted px-2 py-1 rounded">
+							docker compose up -d
+						</code>
+						<p className="text-xs text-muted-foreground mt-2">
+							Isso vai subir o banco PostgreSQL e a aplicação automaticamente
+						</p>
+					</StepCard>
+				</div>
+			</TabsContent>
+
+			<TabsContent value="manual">
+				<div className="space-y-4 md:space-y-6">
+					<StepCard step={1} title="Clone o repositório">
+						<code className="block text-xs sm:text-sm bg-muted px-2 py-1 rounded overflow-x-auto">
+							git clone https://github.com/felipegcoutinho/openmonetis.git
+						</code>
+					</StepCard>
+
+					<StepCard step={2} title="Configure as variáveis de ambiente">
+						<p className="text-xs sm:text-sm text-muted-foreground">
+							Copie o{" "}
+							<code className="bg-muted px-1 rounded">.env.example</code> para{" "}
+							<code className="bg-muted px-1 rounded">.env</code> e configure o
+							banco de dados
+						</p>
+					</StepCard>
+
+					<StepCard step={3} title="Suba o banco via Docker">
+						<code className="block text-xs sm:text-sm bg-muted px-2 py-1 rounded">
+							docker compose up db -d
+						</code>
+					</StepCard>
+
+					<StepCard step={4} title="Instale e rode a aplicação">
+						<div className="space-y-2">
+							<code className="block text-xs sm:text-sm bg-muted px-2 py-1 rounded">
+								pnpm install
+							</code>
+							<code className="block text-xs sm:text-sm bg-muted px-2 py-1 rounded">
+								pnpm db:push
+							</code>
+							<code className="block text-xs sm:text-sm bg-muted px-2 py-1 rounded">
+								pnpm dev
+							</code>
+						</div>
+					</StepCard>
+				</div>
+			</TabsContent>
+		</Tabs>
+	);
+}
+
+function StepCard({
+	step,
+	title,
+	children,
+}: {
+	step: number;
+	title: string;
+	children: React.ReactNode;
+}) {
+	return (
+		<Card className="border">
+			<CardContent>
+				<div className="flex gap-3 md:gap-4">
+					<div className="flex h-9 w-9 md:h-10 md:w-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-sm md:text-base">
+						{step}
+					</div>
+					<div className="min-w-0">
+						<h3 className="font-semibold mb-1.5 md:mb-2">{title}</h3>
+						{children}
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	);
+}
diff --git a/public/dashboard-preview-dark.png b/public/dashboard-preview-dark.png
index af47d90..73abc54 100644
Binary files a/public/dashboard-preview-dark.png and b/public/dashboard-preview-dark.png differ
diff --git a/public/dashboard-preview-light.png b/public/dashboard-preview-light.png
index fb31bc8..fc0c3ff 100644
Binary files a/public/dashboard-preview-light.png and b/public/dashboard-preview-light.png differ
diff --git a/public/openmonetis_companion.png b/public/openmonetis_companion.png
new file mode 100644
index 0000000..10d69c0
Binary files /dev/null and b/public/openmonetis_companion.png differ
diff --git a/public/preview-calendario-dark.png b/public/preview-calendario-dark.png
new file mode 100644
index 0000000..8dd0eb5
Binary files /dev/null and b/public/preview-calendario-dark.png differ
diff --git a/public/preview-calendario-light.png b/public/preview-calendario-light.png
new file mode 100644
index 0000000..b300fbf
Binary files /dev/null and b/public/preview-calendario-light.png differ
diff --git a/public/preview-cartao-dark.png b/public/preview-cartao-dark.png
new file mode 100644
index 0000000..823eb08
Binary files /dev/null and b/public/preview-cartao-dark.png differ
diff --git a/public/preview-cartao-light.png b/public/preview-cartao-light.png
new file mode 100644
index 0000000..71aeb30
Binary files /dev/null and b/public/preview-cartao-light.png differ
diff --git a/public/preview-lancamentos-dark.png b/public/preview-lancamentos-dark.png
new file mode 100644
index 0000000..a1f2a76
Binary files /dev/null and b/public/preview-lancamentos-dark.png differ
diff --git a/public/preview-lancamentos-light.png b/public/preview-lancamentos-light.png
new file mode 100644
index 0000000..071b470
Binary files /dev/null and b/public/preview-lancamentos-light.png differ