feat: redesign superadmin agencies list, implement flat design, add date filters, and fix UI bugs
This commit is contained in:
Erik Silva
@@ -1,8 +1,12 @@
|
||||
import Image from "next/image";
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Header from "@/components/Header";
|
||||
|
||||
export default function Home() {
|
||||
const [isAnnual, setIsAnnual] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
@@ -213,149 +217,252 @@ export default function Home() {
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mb-6 transition-colors">
|
||||
Planos para todos os <span className="gradient-text">tamanhos</span>
|
||||
Planos que <span className="gradient-text">crescem</span> com você
|
||||
</h2>
|
||||
<p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-3xl mx-auto transition-colors">
|
||||
Escolha o plano ideal para sua agência e comece a transformar sua gestão hoje mesmo.
|
||||
Todos os módulos inclusos em todos os planos. Escolha o ideal para o tamanho da sua equipe.
|
||||
</p>
|
||||
|
||||
{/* Toggle Mensal/Anual */}
|
||||
<div className="flex items-center justify-center gap-4 mt-8">
|
||||
<span className={`text-sm font-medium transition-colors ${!isAnnual ? 'text-zinc-900 dark:text-white' : 'text-zinc-500 dark:text-zinc-400'}`}>
|
||||
Mensal
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setIsAnnual(!isAnnual)}
|
||||
className="relative inline-flex h-8 w-14 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 bg-zinc-200 dark:bg-zinc-700"
|
||||
style={{ backgroundColor: isAnnual ? '#ff0080' : '' }}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform ${
|
||||
isAnnual ? 'translate-x-7' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<span className={`text-sm font-medium transition-colors ${isAnnual ? 'text-zinc-900 dark:text-white' : 'text-zinc-500 dark:text-zinc-400'}`}>
|
||||
Anual
|
||||
<span className="ml-2 inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/30 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 dark:text-emerald-400">
|
||||
20% OFF
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||||
{/* Plano Básico */}
|
||||
<div className="bg-white dark:bg-zinc-800 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="text-center mb-8">
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-2 transition-colors">Básico</h3>
|
||||
<div className="flex items-baseline justify-center gap-1 mb-2">
|
||||
<span className="text-4xl font-bold text-zinc-900 dark:text-white transition-colors">R$ 29</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-400 transition-colors">/mês</span>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
|
||||
{/* Plano Ignição */}
|
||||
<div className="bg-white dark:bg-zinc-800 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="mb-6">
|
||||
<h3 className="font-heading font-bold text-2xl text-zinc-900 dark:text-white mb-1 transition-colors">Ignição</h3>
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400 mb-4">1 a 30 usuários (colaboradores + clientes)</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-sm text-zinc-500">R$</span>
|
||||
<span className="text-4xl font-bold text-zinc-900 dark:text-white transition-colors">
|
||||
{isAnnual ? '159,99' : '199,99'}
|
||||
</span>
|
||||
<span className="text-zinc-500 dark:text-zinc-400">/mês</span>
|
||||
</div>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 transition-colors">Perfeito para começar</p>
|
||||
{isAnnual && (
|
||||
<p className="text-xs text-emerald-600 dark:text-emerald-400 mt-1">
|
||||
R$ 1.919,90 cobrado anualmente
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-8">
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Até 10 clientes</span>
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300">Todos os módulos inclusos</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Dashboard básico</span>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300">Portal white-label</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Relatórios mensais</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Suporte por email</span>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300">1GB de armazenamento</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Link href="http://dash.localhost/cadastro" className="w-full px-6 py-3 border-2 border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-brand hover:text-white transition-all block text-center">
|
||||
<Link href="http://dash.localhost/cadastro" className="w-full px-4 py-2.5 border-2 border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-brand hover:text-white transition-all block text-center text-sm">
|
||||
Começar Grátis
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Plano Pro */}
|
||||
<div className="bg-brand p-8 rounded-2xl text-white shadow-2xl transform scale-105">
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 mb-4 rounded-full bg-brand text-sm font-semibold tracking-tight text-white shadow-lg shadow-black/20">
|
||||
<i className="ri-star-line text-xs"></i>
|
||||
<span>Mais Popular</span>
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl mb-2">Pro</h3>
|
||||
<div className="flex items-baseline justify-center gap-1 mb-2">
|
||||
<span className="text-4xl font-bold">R$ 79</span>
|
||||
{/* Plano Órbita */}
|
||||
<div className="bg-brand p-6 rounded-2xl text-white shadow-2xl transform lg:scale-105 relative">
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-white text-xs font-bold rounded-full shadow-lg" style={{ color: '#ff0080' }}>
|
||||
MAIS POPULAR
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<h3 className="font-heading font-bold text-2xl mb-1">Órbita</h3>
|
||||
<p className="text-sm text-white/80 mb-4">31 a 100 usuários (colaboradores + clientes)</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-sm text-white/80">R$</span>
|
||||
<span className="text-4xl font-bold">
|
||||
{isAnnual ? '319,99' : '399,99'}
|
||||
</span>
|
||||
<span className="text-white/80">/mês</span>
|
||||
</div>
|
||||
<p className="text-white/80">Para agências em crescimento</p>
|
||||
{isAnnual && (
|
||||
<p className="text-xs text-white/80 mt-1">
|
||||
R$ 3.839,90 cobrado anualmente
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-8">
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg text-white"></i>
|
||||
<span>Até 100 clientes</span>
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line mt-0.5"></i>
|
||||
<span>Todos os módulos inclusos</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg text-white"></i>
|
||||
<span>Dashboard completo</span>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line mt-0.5"></i>
|
||||
<span>Portal white-label</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg text-white"></i>
|
||||
<span>Relatórios ilimitados</span>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line mt-0.5"></i>
|
||||
<span>1GB de armazenamento</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg text-white"></i>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line mt-0.5"></i>
|
||||
<span>Suporte prioritário</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<i className="ri-check-line text-lg text-white"></i>
|
||||
<span>API integrations</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Link href="http://dash.localhost/cadastro" className="w-full px-6 py-3 bg-white text-zinc-900 font-semibold rounded-lg hover:bg-white/90 transition-colors block text-center">
|
||||
<Link href="http://dash.localhost/cadastro" className="w-full px-4 py-2.5 bg-white font-semibold rounded-lg hover:bg-white/90 transition-colors block text-center text-sm" style={{ color: '#ff0080' }}>
|
||||
Começar Agora
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Plano Cosmos */}
|
||||
<div className="bg-white dark:bg-zinc-800 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="mb-6">
|
||||
<h3 className="font-heading font-bold text-2xl text-zinc-900 dark:text-white mb-1 transition-colors">Cosmos</h3>
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400 mb-4">101 a 300 usuários (colaboradores + clientes)</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-sm text-zinc-500">R$</span>
|
||||
<span className="text-4xl font-bold text-zinc-900 dark:text-white transition-colors">
|
||||
{isAnnual ? '639,99' : '799,99'}
|
||||
</span>
|
||||
<span className="text-zinc-500 dark:text-zinc-400">/mês</span>
|
||||
</div>
|
||||
{isAnnual && (
|
||||
<p className="text-xs text-emerald-600 dark:text-emerald-400 mt-1">
|
||||
R$ 7.679,90 cobrado anualmente
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300">Todos os módulos inclusos</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300">Portal white-label</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-600 dark:text-zinc-300">1GB de armazenamento</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-900 dark:text-white">Suporte prioritário</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-900 dark:text-white">Gerente de conta dedicado</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-900 dark:text-white">API para integrações</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Link href="http://dash.localhost/cadastro" className="w-full px-4 py-2.5 border-2 border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-brand hover:text-white transition-all block text-center text-sm">
|
||||
Começar Agora
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Plano Enterprise */}
|
||||
<div className="bg-white dark:bg-zinc-800 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="text-center mb-8">
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-2 transition-colors">Enterprise</h3>
|
||||
<div className="flex items-baseline justify-center gap-1 mb-2">
|
||||
<span className="text-4xl font-bold text-zinc-900 dark:text-white transition-colors">R$ 199</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-400 transition-colors">/mês</span>
|
||||
<div className="bg-gradient-to-br from-zinc-900 to-zinc-800 dark:from-zinc-950 dark:to-zinc-900 p-6 rounded-2xl border border-zinc-700 dark:border-zinc-800 text-white shadow-xl transition-all">
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="font-heading font-bold text-2xl">Enterprise</h3>
|
||||
<i className="ri-vip-crown-line text-xl text-yellow-400"></i>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-400 mb-4">301+ usuários (colaboradores + clientes)</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-3xl font-bold">Sob consulta</span>
|
||||
</div>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 transition-colors">Para grandes agências</p>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-8">
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Clientes ilimitados</span>
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-300">Tudo do plano Cosmos +</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Dashboard personalizado</span>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-zinc-300">Armazenamento customizado</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Relatórios avançados</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">Suporte dedicado</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand text-white shadow-sm">
|
||||
<i className="ri-check-line text-[13px]"></i>
|
||||
</span>
|
||||
<span className="text-zinc-600 dark:text-zinc-300 transition-colors">White label</span>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<span className="text-white">Treinamento personalizado</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Link href="#contact" className="w-full px-6 py-3 border-2 border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-brand hover:text-white transition-all block text-center">
|
||||
<Link href="#contact" className="w-full px-4 py-2.5 bg-brand text-white font-semibold rounded-lg hover:opacity-90 transition-opacity block text-center text-sm">
|
||||
Falar com Vendas
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Nota sobre desconto */}
|
||||
<div className="text-center mt-8">
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400">
|
||||
<i className="ri-information-line mr-1"></i>
|
||||
Todos os planos com <span className="font-semibold text-emerald-600 dark:text-emerald-400">20% OFF</span> no pagamento anual
|
||||
{isAnnual && <span className="ml-1">(equivalente a 2,4 meses grátis)</span>}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Add-ons Section */}
|
||||
<div className="mt-16 pt-16 border-t border-zinc-200 dark:border-zinc-800">
|
||||
<div className="text-center mb-10">
|
||||
<h3 className="font-heading font-bold text-2xl text-zinc-900 dark:text-white mb-3 transition-colors">
|
||||
Expanda sem limites
|
||||
</h3>
|
||||
<p className="text-lg text-zinc-600 dark:text-zinc-400 transition-colors">
|
||||
Add-ons disponíveis para todos os planos
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto">
|
||||
<div className="bg-zinc-50 dark:bg-zinc-800/50 p-6 rounded-xl border border-zinc-200 dark:border-zinc-700 transition-all">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 bg-brand rounded-lg flex items-center justify-center">
|
||||
<i className="ri-group-line text-white text-lg"></i>
|
||||
</div>
|
||||
<h4 className="font-semibold text-lg text-zinc-900 dark:text-white transition-colors">Usuários Extras</h4>
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-zinc-900 dark:text-white mb-2 transition-colors">R$ 9,90<span className="text-sm font-normal text-zinc-500">/usuário/mês</span></p>
|
||||
<p className="text-sm text-zinc-600 dark:text-zinc-400 transition-colors">Adicione quantos usuários precisar, sem limite máximo</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-zinc-50 dark:bg-zinc-800/50 p-6 rounded-xl border border-zinc-200 dark:border-zinc-700 transition-all">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 bg-brand rounded-lg flex items-center justify-center">
|
||||
<i className="ri-hard-drive-line text-white text-lg"></i>
|
||||
</div>
|
||||
<h4 className="font-semibold text-lg text-zinc-900 dark:text-white transition-colors">Storage Extra</h4>
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-zinc-900 dark:text-white mb-2 transition-colors">R$ 10,00<span className="text-sm font-normal text-zinc-500">/5GB/mês</span></p>
|
||||
<p className="text-sm text-zinc-600 dark:text-zinc-400 transition-colors">Expanda seu armazenamento conforme sua necessidade</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user