feat: adição de novos ícones SVG e configuração do ambiente
- Adicionados ícones SVG para ChatGPT, Claude, Gemini e OpenRouter - Implementados ícones para modos claro e escuro do ChatGPT - Criado script de inicialização para PostgreSQL com extensão pgcrypto - Adicionado script de configuração de ambiente que faz backup do .env - Configurado tsconfig.json para TypeScript com opções de compilação
This commit is contained in:
Felipe Coutinho
534
app/(landing-page)/page.tsx
Normal file
534
app/(landing-page)/page.tsx
Normal file
@@ -0,0 +1,534 @@
|
||||
import { AnimatedThemeToggler } from "@/components/animated-theme-toggler";
|
||||
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";
|
||||
import {
|
||||
RiArrowRightSLine,
|
||||
RiBankCardLine,
|
||||
RiBarChartBoxLine,
|
||||
RiCalendarLine,
|
||||
RiDeviceLine,
|
||||
RiEyeOffLine,
|
||||
RiLineChartLine,
|
||||
RiLockLine,
|
||||
RiMoneyDollarCircleLine,
|
||||
RiNotificationLine,
|
||||
RiPieChartLine,
|
||||
RiShieldCheckLine,
|
||||
RiTimeLine,
|
||||
RiWalletLine,
|
||||
} from "@remixicon/react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default async function Page() {
|
||||
const session = await getOptionalUserSession();
|
||||
|
||||
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">
|
||||
<div className="container flex h-16 items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<Logo />
|
||||
</div>
|
||||
<nav className="flex items-center gap-2 md:gap-4">
|
||||
<AnimatedThemeToggler />
|
||||
{session?.user ? (
|
||||
<Link prefetch href="/dashboard">
|
||||
<Button variant="outline" size="sm">
|
||||
Dashboard
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link href="/login">
|
||||
<Button variant="ghost" size="sm">
|
||||
Entrar
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/signup">
|
||||
<Button size="sm" className="gap-2">
|
||||
Começar Grátis
|
||||
<RiArrowRightSLine size={16} />
|
||||
</Button>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</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="secondary" className="mb-2">
|
||||
<RiLineChartLine size={14} className="mr-1" />
|
||||
Controle Financeiro Inteligente
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
|
||||
Gerencie suas finanças
|
||||
<span className="text-primary"> com simplicidade</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg md:text-xl text-muted-foreground max-w-2xl">
|
||||
Organize seus gastos, acompanhe receitas, gerencie cartões de
|
||||
crédito e tome decisões financeiras mais inteligentes. Tudo em um
|
||||
só lugar.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 mt-4">
|
||||
<Link href="/signup">
|
||||
<Button size="lg" className="gap-2 w-full sm:w-auto">
|
||||
Começar Gratuitamente
|
||||
<RiArrowRightSLine size={18} />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/login">
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
Fazer Login
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex flex-wrap items-center justify-center gap-6 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-2">
|
||||
<RiShieldCheckLine size={18} className="text-primary" />
|
||||
Dados Seguros
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<RiEyeOffLine size={18} className="text-primary" />
|
||||
Modo Privacidade
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<RiDeviceLine size={18} className="text-primary" />
|
||||
100% Responsivo
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="py-16 md:py-24 bg-muted/30">
|
||||
<div className="container">
|
||||
<div className="mx-auto max-w-5xl">
|
||||
<div className="text-center mb-12">
|
||||
<Badge variant="secondary" className="mb-4">
|
||||
Funcionalidades
|
||||
</Badge>
|
||||
<h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
|
||||
Tudo que você precisa para gerenciar suas finanças
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Ferramentas poderosas e intuitivas para controle financeiro
|
||||
completo
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card className="border-2 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" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2">
|
||||
Lançamentos
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Registre receitas e despesas com categorização
|
||||
automática e controle detalhado de pagadores e contas.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-2 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">
|
||||
<RiBankCardLine size={24} className="text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2">
|
||||
Cartões de Crédito
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Gerencie múltiplos cartões, acompanhe faturas, limites e
|
||||
nunca perca o controle dos gastos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-2 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</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Organize suas transações em categorias personalizadas e
|
||||
visualize onde seu dinheiro está indo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-2 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">
|
||||
<RiMoneyDollarCircleLine
|
||||
size={24}
|
||||
className="text-primary"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2">Orçamentos</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Defina limites de gastos por categoria e receba alertas
|
||||
para manter suas finanças no caminho certo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-2 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">Insights</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Análise detalhada de padrões de gastos com gráficos e
|
||||
relatórios para decisões mais inteligentes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-2 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</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Visualize suas transações em calendário mensal e nunca
|
||||
perca prazos importantes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Benefits Section */}
|
||||
<section className="py-16 md:py-24">
|
||||
<div className="container">
|
||||
<div className="mx-auto max-w-5xl">
|
||||
<div className="grid gap-12 lg:grid-cols-2 items-center">
|
||||
<div>
|
||||
<Badge variant="secondary" className="mb-4">
|
||||
Vantagens
|
||||
</Badge>
|
||||
<h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-6">
|
||||
Controle financeiro descomplicado
|
||||
</h2>
|
||||
<div className="space-y-6">
|
||||
<div className="flex gap-4">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
|
||||
<RiShieldCheckLine size={20} className="text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-1">
|
||||
Segurança em Primeiro Lugar
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Seus dados financeiros são criptografados e armazenados
|
||||
com os mais altos padrões de segurança.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-1">Economize Tempo</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Interface intuitiva que permite registrar transações em
|
||||
segundos e acompanhar tudo de forma visual.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
|
||||
<RiNotificationLine size={20} className="text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-1">
|
||||
Alertas Inteligentes
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Receba notificações sobre vencimentos, limites de
|
||||
orçamento e padrões incomuns de gastos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
|
||||
<RiEyeOffLine size={20} className="text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-1">Modo Privacidade</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Oculte valores sensíveis com um clique para visualizar
|
||||
suas finanças em qualquer lugar com discrição.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Card className="border-2">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<RiLineChartLine
|
||||
size={32}
|
||||
className="text-primary shrink-0"
|
||||
/>
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2">
|
||||
Visualização Clara
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Gráficos interativos e dashboards personalizáveis
|
||||
mostram sua situação financeira de forma clara e
|
||||
objetiva.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-2">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<RiDeviceLine
|
||||
size={32}
|
||||
className="text-primary shrink-0"
|
||||
/>
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2">
|
||||
Acesso em Qualquer Lugar
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Design responsivo que funciona perfeitamente em
|
||||
desktop, tablet e smartphone. Suas finanças sempre à
|
||||
mão.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-2">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<RiLockLine size={32} className="text-primary shrink-0" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2">
|
||||
Privacidade Garantida
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Seus dados são seus. Sem compartilhamento com
|
||||
terceiros, sem anúncios, sem surpresas.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 md:py-24 bg-muted/30">
|
||||
<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 transformar suas finanças?
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-8">
|
||||
Comece agora mesmo a organizar seu dinheiro de forma inteligente.
|
||||
É grátis e leva menos de um minuto.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link href="/signup">
|
||||
<Button size="lg" className="gap-2 w-full sm:w-auto">
|
||||
Criar Conta Gratuita
|
||||
<RiArrowRightSLine size={18} />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/login">
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
Já tenho conta
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t py-12 mt-auto">
|
||||
<div className="container">
|
||||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
|
||||
<div>
|
||||
<Logo />
|
||||
<p className="text-sm text-muted-foreground mt-4">
|
||||
Gerencie suas finanças pessoais com simplicidade e segurança.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4">Produto</h3>
|
||||
<ul className="space-y-3 text-sm text-muted-foreground">
|
||||
<li>
|
||||
<Link
|
||||
href="/login"
|
||||
className="hover:text-foreground transition-colors"
|
||||
>
|
||||
Funcionalidades
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/login"
|
||||
className="hover:text-foreground transition-colors"
|
||||
>
|
||||
Preços
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/login"
|
||||
className="hover:text-foreground transition-colors"
|
||||
>
|
||||
Segurança
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4">Recursos</h3>
|
||||
<ul className="space-y-3 text-sm text-muted-foreground">
|
||||
<li>
|
||||
<Link
|
||||
href="/login"
|
||||
className="hover:text-foreground transition-colors"
|
||||
>
|
||||
Blog
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/login"
|
||||
className="hover:text-foreground transition-colors"
|
||||
>
|
||||
Ajuda
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/login"
|
||||
className="hover:text-foreground transition-colors"
|
||||
>
|
||||
Tutoriais
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4">Legal</h3>
|
||||
<ul className="space-y-3 text-sm text-muted-foreground">
|
||||
<li>
|
||||
<Link
|
||||
href="/login"
|
||||
className="hover:text-foreground transition-colors"
|
||||
>
|
||||
Privacidade
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/login"
|
||||
className="hover:text-foreground transition-colors"
|
||||
>
|
||||
Termos de Uso
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/login"
|
||||
className="hover:text-foreground transition-colors"
|
||||
>
|
||||
Cookies
|
||||
</Link>
|
||||
</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">
|
||||
<p>
|
||||
© {new Date().getFullYear()} OpenSheets. Todos os direitos
|
||||
reservados.
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<RiShieldCheckLine size={16} className="text-primary" />
|
||||
<span>Seus dados são protegidos e criptografados</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user