feat: reformulação completa da landing page

Moderniza visual, melhora experiência mobile e adiciona seções
dedicadas ao Companion e galeria de screenshots.

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

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

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>
+	);
+}

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>
+	);
+}

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>
+	);
+}