mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-05-09 11:01:45 +00:00
0514efb1c4
Adiciona os arquivos `america-medium.woff2` e `america-bold.woff2` e registra o weight 500 no `font_index.ts`. Padroniza o uso de `font-medium` em substituição a `font-semibold` e `font-bold` em títulos, valores monetários e rótulos de destaque em todos os componentes do app, landing page e componentes de UI base. `Card` ganha `hover:border-primary/40` e `CardTitle` recebe `text-base`. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
784 lines
26 KiB
TypeScript
784 lines
26 KiB
TypeScript
import {
|
|
RiAndroidLine,
|
|
RiGithubFill,
|
|
RiShieldCheckLine,
|
|
RiSmartphoneLine,
|
|
} from "@remixicon/react";
|
|
import { headers } from "next/headers";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { AnimateOnScroll } from "@/features/landing/components/animate-on-scroll";
|
|
import { MobileNav } from "@/features/landing/components/mobile-nav";
|
|
import { ScreenshotTabs } from "@/features/landing/components/screenshot-tabs";
|
|
import { SetupTabs } from "@/features/landing/components/setup-tabs";
|
|
import {
|
|
companionBanks,
|
|
companionSteps,
|
|
extraFeatures,
|
|
getMetricsItems,
|
|
mainFeatures,
|
|
navLinks,
|
|
pwaHighlights,
|
|
stackItems,
|
|
whoIsItForItems,
|
|
} from "@/features/landing/constants";
|
|
import { landingImages } from "@/features/landing/images";
|
|
import { fetchGitHubStats } from "@/features/landing/queries";
|
|
import { AnimatedThemeToggler } from "@/shared/components/animated-theme-toggler";
|
|
import { Logo } from "@/shared/components/logo";
|
|
import { NavbarShell } from "@/shared/components/navigation/navbar/navbar-shell";
|
|
import { Badge } from "@/shared/components/ui/badge";
|
|
import { Button } from "@/shared/components/ui/button";
|
|
import { Card, CardContent } from "@/shared/components/ui/card";
|
|
import { DotPattern } from "@/shared/components/ui/dot-pattern";
|
|
import { getOptionalUserSession } from "@/shared/lib/auth/server";
|
|
|
|
export default async function Page() {
|
|
const [session, headersList, githubStats] = await Promise.all([
|
|
getOptionalUserSession(),
|
|
headers(),
|
|
fetchGitHubStats(),
|
|
]);
|
|
const hostname = headersList.get("host")?.replace(/:\d+$/, "");
|
|
const publicDomain = process.env.PUBLIC_DOMAIN?.replace(
|
|
/^https?:\/\//,
|
|
"",
|
|
).replace(/:\d+$/, "");
|
|
const isPublicDomain = !!(publicDomain && hostname === publicDomain);
|
|
const metricsItems = getMetricsItems(githubStats.stars, githubStats.forks);
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col">
|
|
{/* Navigation */}
|
|
<NavbarShell>
|
|
{/* Center Navigation Links */}
|
|
<nav className="hidden md:flex items-center gap-1 absolute left-1/2 -translate-x-1/2">
|
|
{navLinks.map(({ href, label }) => (
|
|
<a
|
|
key={href}
|
|
href={href}
|
|
className="rounded-md px-2 py-1.5 text-sm font-medium text-black/75 hover:text-black hover:bg-black/10 transition-colors"
|
|
>
|
|
{label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
<nav className="ml-auto flex items-center gap-2 md:gap-3">
|
|
<AnimatedThemeToggler variant="navbar" />
|
|
{!isPublicDomain &&
|
|
(session?.user ? (
|
|
<Link prefetch href="/dashboard" className="hidden md:block">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-black/20 text-black/80 bg-transparent hover:bg-black/10 hover:text-black shadow-none"
|
|
>
|
|
Dashboard
|
|
</Button>
|
|
</Link>
|
|
) : (
|
|
<div className="hidden md:flex items-center gap-2">
|
|
<Link href="/login">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-black/75 hover:bg-black/10 hover:text-black shadow-none"
|
|
>
|
|
Entrar
|
|
</Button>
|
|
</Link>
|
|
<Link href="/signup">
|
|
<Button
|
|
size="sm"
|
|
className="bg-black/10 border border-black/20 text-black shadow-none hover:bg-black/20 gap-2"
|
|
>
|
|
Começar
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
<MobileNav
|
|
isPublicDomain={isPublicDomain}
|
|
isLoggedIn={!!session?.user}
|
|
/>
|
|
</nav>
|
|
</NavbarShell>
|
|
|
|
{/* Hero Section */}
|
|
<section className="relative overflow-hidden pt-14 md:pt-20 lg:pt-24 pb-0">
|
|
<div className="pointer-events-none absolute inset-x-0 top-0 h-80 overflow-hidden">
|
|
<DotPattern
|
|
width={20}
|
|
height={20}
|
|
cx={1.25}
|
|
cy={1.25}
|
|
cr={1.25}
|
|
className="text-primary/10 mask-[linear-gradient(to_bottom,black_0%,transparent_100%)]"
|
|
/>
|
|
<div className="absolute inset-0 bg-linear-to-b from-primary/6 to-transparent" />
|
|
</div>
|
|
|
|
<div className="max-w-8xl mx-auto px-4 relative">
|
|
<div className="mx-auto flex max-w-3xl flex-col items-center text-center gap-5 md:gap-6 pb-10 md:pb-14">
|
|
<Badge variant="outline">
|
|
<RiGithubFill className="size-4 mr-1" />
|
|
Projeto Open Source
|
|
</Badge>
|
|
|
|
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-medium tracking-tight">
|
|
Suas finanças,
|
|
<span className="text-primary"> do seu jeito</span>
|
|
</h1>
|
|
|
|
<p className="text-base sm:text-lg md:text-xl text-muted-foreground max-w-2xl px-4 sm:px-0">
|
|
Gestão financeira self-hosted e open source. Lance manualmente ou
|
|
capture notificações bancárias direto pelo{" "}
|
|
<span className="text-foreground font-medium">
|
|
Companion para Android
|
|
</span>
|
|
. Seus dados, seu servidor.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-3 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 className="size-5" />
|
|
Baixar no GitHub
|
|
</Button>
|
|
</Link>
|
|
<Link
|
|
href="https://github.com/felipegcoutinho/openmonetis#readme"
|
|
target="_blank"
|
|
className="w-full sm:w-auto"
|
|
>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="w-full sm:w-auto gap-2"
|
|
>
|
|
Ver Documentação
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-auto max-w-6xl">
|
|
<div className="rounded-t-xl overflow-hidden border-x border-t bg-card">
|
|
<div className="flex items-center gap-1.5 px-3 h-8 border-b bg-muted/50">
|
|
<div className="size-2.5 rounded-full bg-muted-foreground/20" />
|
|
<div className="size-2.5 rounded-full bg-muted-foreground/20" />
|
|
<div className="size-2.5 rounded-full bg-muted-foreground/20" />
|
|
<div className="ml-2 flex-1 max-w-52 h-4 rounded bg-muted-foreground/10" />
|
|
</div>
|
|
<Image
|
|
src={landingImages.hero.light}
|
|
alt="openmonetis Dashboard Preview"
|
|
width={1920}
|
|
height={1080}
|
|
className="w-full h-auto dark:hidden"
|
|
priority
|
|
/>
|
|
<Image
|
|
src={landingImages.hero.dark}
|
|
alt="openmonetis Dashboard Preview"
|
|
width={1920}
|
|
height={1080}
|
|
className="w-full h-auto hidden dark:block"
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Metrics Bar */}
|
|
<section className="py-8 md:py-12 border-y">
|
|
<div className="max-w-8xl mx-auto px-4">
|
|
<div className="mx-auto max-w-4xl">
|
|
<div className="grid grid-cols-2 gap-4 md:grid-cols-4 md:gap-8">
|
|
{metricsItems.map(({ icon: Icon, value, label, colorVar }) => (
|
|
<div
|
|
key={label}
|
|
className="flex flex-col items-center text-center gap-1.5"
|
|
>
|
|
<Icon className="size-5" style={{ color: colorVar }} />
|
|
<span className="text-2xl md:text-3xl font-medium">
|
|
{value}
|
|
</span>
|
|
<span className="text-xs md:text-sm text-muted-foreground">
|
|
{label}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Screenshots Gallery Section */}
|
|
<section id="telas" className="py-12 md:py-24">
|
|
<div className="max-w-8xl mx-auto px-4">
|
|
<div className="mx-auto max-w-6xl">
|
|
<AnimateOnScroll>
|
|
<div className="text-center mb-8 md:mb-12">
|
|
<Badge variant="outline" className="mb-4">
|
|
Conheça as telas
|
|
</Badge>
|
|
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium 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>
|
|
|
|
<AnimateOnScroll>
|
|
<ScreenshotTabs />
|
|
</AnimateOnScroll>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features Section */}
|
|
<section id="funcionalidades" className="py-12 md:py-24 bg-muted/40">
|
|
<div className="max-w-8xl mx-auto px-4">
|
|
<div className="mx-auto max-w-6xl">
|
|
<AnimateOnScroll>
|
|
<div className="text-center mb-8 md:mb-12">
|
|
<Badge variant="outline" className="mb-4">
|
|
O que tem aqui
|
|
</Badge>
|
|
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium 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>
|
|
|
|
<AnimateOnScroll>
|
|
<div className="grid gap-4 md:gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{mainFeatures.map((feature) => (
|
|
<Card key={feature.title}>
|
|
<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"
|
|
style={{
|
|
backgroundColor: `color-mix(in oklch, ${feature.colorVar} 14%, transparent)`,
|
|
}}
|
|
>
|
|
<feature.icon
|
|
className="size-[22px] md:size-6"
|
|
style={{ color: feature.colorVar }}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-medium 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>
|
|
|
|
<AnimateOnScroll>
|
|
<div className="mt-8 md:mt-12">
|
|
<h3 className="text-sm font-medium text-center mb-4 md:mb-6 text-muted-foreground">
|
|
Também inclui
|
|
</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-card p-3 md:p-4"
|
|
>
|
|
<div
|
|
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md"
|
|
style={{
|
|
backgroundColor: `color-mix(in oklch, ${feature.colorVar} 14%, transparent)`,
|
|
}}
|
|
>
|
|
<feature.icon
|
|
className="size-[18px]"
|
|
style={{ color: feature.colorVar }}
|
|
/>
|
|
</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>
|
|
</div>
|
|
</AnimateOnScroll>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Mobile Section */}
|
|
<section id="mobile" className="py-12 md:py-24">
|
|
<div className="max-w-8xl mx-auto px-4">
|
|
<div className="mx-auto max-w-6xl">
|
|
{/* Header */}
|
|
<AnimateOnScroll>
|
|
<div className="text-center mb-12 md:mb-20">
|
|
<Badge variant="outline" className="mb-4">
|
|
<RiSmartphoneLine className="size-3.5 mr-1" />
|
|
Mobile
|
|
</Badge>
|
|
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium tracking-tight mb-3 md:mb-4">
|
|
Use o OpenMonetis no celular sem perder o fluxo
|
|
</h2>
|
|
<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-4 sm:px-0">
|
|
Instale como PWA para acesso rápido no dia a dia. No Android,
|
|
use o Companion para capturar notificações bancárias
|
|
automaticamente.
|
|
</p>
|
|
</div>
|
|
</AnimateOnScroll>
|
|
|
|
{/* PWA — imagem esquerda, texto direita */}
|
|
<AnimateOnScroll>
|
|
<div className="grid gap-10 lg:gap-16 lg:grid-cols-2 items-center mb-16 md:mb-24">
|
|
<div className="flex justify-center">
|
|
<div className="relative">
|
|
<div className="absolute inset-0 bg-primary/8 rounded-3xl blur-3xl scale-90" />
|
|
<Image
|
|
src={landingImages.pwa.light}
|
|
alt="Preview PWA"
|
|
width={390}
|
|
height={844}
|
|
className="relative h-auto w-56 md:w-64 rounded-3xl shadow-lg dark:hidden"
|
|
/>
|
|
<Image
|
|
src={landingImages.pwa.dark}
|
|
alt="Preview PWA"
|
|
width={390}
|
|
height={844}
|
|
className="relative h-auto w-56 md:w-64 rounded-3xl shadow-lg hidden dark:block"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Badge variant="outline" className="mb-4">
|
|
<RiSmartphoneLine className="size-3.5 mr-1" />
|
|
PWA instalável
|
|
</Badge>
|
|
<h3 className="text-2xl md:text-3xl font-medium tracking-tight mb-3">
|
|
Leve o OpenMonetis para a tela inicial
|
|
</h3>
|
|
<p className="text-muted-foreground mb-6 leading-relaxed">
|
|
Adicione à tela inicial e abra direto, como um app. Sem
|
|
depender de uma aba perdida no navegador. Funciona em
|
|
Android, iOS e desktop.
|
|
</p>
|
|
<ul className="space-y-3">
|
|
{pwaHighlights.map((item) => (
|
|
<li key={item.title} className="flex items-start gap-3">
|
|
<div
|
|
className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md"
|
|
style={{
|
|
backgroundColor: `color-mix(in oklch, ${item.colorVar} 14%, transparent)`,
|
|
}}
|
|
>
|
|
<item.icon
|
|
className="size-[15px]"
|
|
style={{ color: item.colorVar }}
|
|
/>
|
|
</div>
|
|
<p className="text-sm">
|
|
<span className="font-medium">{item.title}</span>
|
|
<span className="text-muted-foreground">
|
|
{" "}
|
|
— {item.description}
|
|
</span>
|
|
</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</AnimateOnScroll>
|
|
|
|
{/* Companion — texto esquerda, imagem direita */}
|
|
<AnimateOnScroll>
|
|
<div className="grid gap-10 lg:gap-16 lg:grid-cols-2 items-center border-t pt-16 md:pt-24">
|
|
<div>
|
|
<div className="mb-4">
|
|
<Badge variant="outline">
|
|
<RiAndroidLine className="size-3.5 mr-1" />
|
|
Companion Android
|
|
</Badge>
|
|
</div>
|
|
<h3 className="text-2xl md:text-3xl font-medium tracking-tight mb-3">
|
|
Capture, envie e revise no mesmo fluxo
|
|
</h3>
|
|
<p className="text-muted-foreground mb-6 leading-relaxed">
|
|
O Companion captura notificações de apps bancários e cria
|
|
pré-lançamentos automaticamente para você revisar na inbox.
|
|
</p>
|
|
<ol className="space-y-3 mb-6">
|
|
{companionSteps.map((step, index) => (
|
|
<li key={step.title} className="flex items-start gap-3">
|
|
<span
|
|
className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-medium"
|
|
style={{
|
|
backgroundColor: `color-mix(in oklch, ${step.colorVar} 14%, transparent)`,
|
|
color: step.colorVar,
|
|
}}
|
|
>
|
|
{index + 1}
|
|
</span>
|
|
<p className="text-sm">
|
|
<span className="font-medium">{step.title}</span>
|
|
<span className="text-muted-foreground">
|
|
{" "}
|
|
— {step.description}
|
|
</span>
|
|
</p>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
<div>
|
|
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">
|
|
Bancos testados
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{companionBanks.map((bank) => (
|
|
<span
|
|
key={bank.name}
|
|
className="inline-flex items-center gap-1.5 rounded-full border py-1 pr-3 text-xs font-medium"
|
|
style={{
|
|
paddingLeft: bank.logo ? "4px" : "12px",
|
|
}}
|
|
>
|
|
{bank.logo && (
|
|
<Image
|
|
src={bank.logo}
|
|
alt={bank.name}
|
|
width={18}
|
|
height={18}
|
|
className="rounded-full"
|
|
/>
|
|
)}
|
|
{bank.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<Link
|
|
href="https://github.com/felipegcoutinho/openmonetis-companion"
|
|
target="_blank"
|
|
className="mt-4 inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<RiGithubFill className="size-3.5" />
|
|
Ver no GitHub
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-center order-first lg:order-last">
|
|
<div className="relative">
|
|
<div className="absolute inset-0 bg-primary/8 rounded-3xl blur-3xl scale-90" />
|
|
<Image
|
|
src={landingImages.companion.light}
|
|
alt="Preview Companion"
|
|
width={390}
|
|
height={844}
|
|
className="relative h-auto w-56 md:w-64 rounded-3xl shadow-lg dark:hidden"
|
|
/>
|
|
<Image
|
|
src={landingImages.companion.dark}
|
|
alt="Preview Companion"
|
|
width={390}
|
|
height={844}
|
|
className="relative h-auto w-56 md:w-64 rounded-3xl shadow-lg hidden dark:block"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AnimateOnScroll>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Tech Stack Section */}
|
|
<section id="stack" className="py-12 md:py-24 bg-muted/40">
|
|
<div className="max-w-8xl mx-auto px-4">
|
|
<div className="mx-auto max-w-6xl">
|
|
<AnimateOnScroll>
|
|
<div className="text-center mb-8 md:mb-12">
|
|
<Badge variant="outline" className="mb-4">
|
|
Stack técnica
|
|
</Badge>
|
|
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium tracking-tight mb-3 md:mb-4">
|
|
O que roda por baixo
|
|
</h2>
|
|
<p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-4 sm:px-0">
|
|
Self-hosted, open source, type-safe do banco ao frontend
|
|
</p>
|
|
</div>
|
|
</AnimateOnScroll>
|
|
|
|
<AnimateOnScroll>
|
|
<div className="grid gap-4 md:gap-6 sm:grid-cols-2">
|
|
{stackItems.map((item) => (
|
|
<Card key={item.title}>
|
|
<CardContent>
|
|
<div className="flex items-start gap-4">
|
|
<div
|
|
className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg"
|
|
style={{
|
|
backgroundColor: `color-mix(in oklch, ${item.colorVar} 14%, transparent)`,
|
|
}}
|
|
>
|
|
<item.icon
|
|
className="size-6"
|
|
style={{ color: item.colorVar }}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-medium text-base md:text-lg mb-1.5 md:mb-2">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground mb-2 md:mb-3">
|
|
{item.subtitle}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</AnimateOnScroll>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* How to run Section */}
|
|
<section id="como-usar" className="py-12 md:py-24">
|
|
<div className="max-w-8xl mx-auto px-4">
|
|
<div className="mx-auto max-w-4xl">
|
|
<AnimateOnScroll>
|
|
<div className="text-center mb-8 md:mb-12">
|
|
<Badge variant="outline" className="mb-4">
|
|
Como usar
|
|
</Badge>
|
|
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium 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>
|
|
|
|
<AnimateOnScroll>
|
|
<SetupTabs />
|
|
</AnimateOnScroll>
|
|
|
|
<div className="mt-6 md:mt-8 text-center">
|
|
<Link
|
|
href="https://github.com/felipegcoutinho/openmonetis#-início-rápido"
|
|
target="_blank"
|
|
className="text-sm text-primary hover:underline"
|
|
>
|
|
Ver documentação completa →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Who is this for Section */}
|
|
<section id="para-quem-e" className="py-12 md:py-24 bg-muted/40">
|
|
<div className="max-w-8xl mx-auto px-4">
|
|
<div className="mx-auto max-w-4xl">
|
|
<AnimateOnScroll>
|
|
<div className="text-center mb-8 md:mb-12">
|
|
<Badge variant="outline" className="mb-4">
|
|
Para quem é?
|
|
</Badge>
|
|
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium tracking-tight mb-3 md:mb-4">
|
|
Feito para quem gosta de controle
|
|
</h2>
|
|
<p className="text-base md:text-lg text-muted-foreground px-4 sm:px-0">
|
|
O OpenMonetis não é para todo mundo.
|
|
</p>
|
|
</div>
|
|
</AnimateOnScroll>
|
|
|
|
<AnimateOnScroll>
|
|
<div className="space-y-3 md:space-y-4">
|
|
{whoIsItForItems.map((item) => (
|
|
<Card key={item.title}>
|
|
<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"
|
|
style={{
|
|
backgroundColor: `color-mix(in oklch, ${item.colorVar} 14%, transparent)`,
|
|
}}
|
|
>
|
|
<item.icon
|
|
className="size-[18px] md:size-5"
|
|
style={{ color: item.colorVar }}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-medium mb-1">{item.title}</h3>
|
|
<p className="text-xs sm:text-sm text-muted-foreground">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</AnimateOnScroll>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-12 md:py-24">
|
|
<div className="max-w-8xl mx-auto px-4">
|
|
<AnimateOnScroll>
|
|
<div className="mx-auto max-w-4xl rounded-2xl border bg-card px-8 py-12 md:py-16 text-center">
|
|
<h2 className="text-2xl sm:text-3xl md:text-4xl font-medium 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"
|
|
>
|
|
<Button size="lg" className="gap-2 w-full sm:w-auto">
|
|
<RiGithubFill className="size-[18px]" />
|
|
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>
|
|
</AnimateOnScroll>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t py-8 md:py-12 mt-auto">
|
|
<div className="max-w-8xl mx-auto px-4">
|
|
<div className="mx-auto max-w-5xl">
|
|
<div className="grid gap-8 sm:grid-cols-2 md:grid-cols-3">
|
|
<div className="sm:col-span-2 md:col-span-1">
|
|
<Logo variant="compact" colorIcon />
|
|
<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-medium 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"
|
|
target="_blank"
|
|
className="hover:text-foreground transition-colors flex items-center gap-2"
|
|
>
|
|
<RiGithubFill className="size-4" />
|
|
GitHub
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="https://github.com/felipegcoutinho/openmonetis#readme"
|
|
target="_blank"
|
|
className="hover:text-foreground transition-colors"
|
|
>
|
|
Documentação
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="https://github.com/felipegcoutinho/openmonetis/issues"
|
|
target="_blank"
|
|
className="hover:text-foreground transition-colors"
|
|
>
|
|
Reportar Bug
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-medium 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 className="size-4" />
|
|
GitHub
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<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.
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<RiShieldCheckLine className="size-4 text-primary" />
|
|
<span>Seus dados, seu servidor</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|