Uma seção de Tabela de Preços projetada especificamente para expor os planos de maneira clara e atraente em plataformas SaaS ou serviços de assinatura. O layout apresenta três opções de planos dispostos horizontalmente, com destaque estratégico para o plano recomendado (como a opção “Pro”, por exemplo).
O plano perfeito para o seu negócio
Todos os planos incluem um teste gratuito de 14 dias. Você pode cancelar a qualquer momento.
Ideal para projetos pessoais ou equipes pequenas.
1 Projeto
Suporte básico
10GB de armazenamento
Mais popular
O plano perfeito para equipes e negócios em crescimento.
Projetos ilimitados
Suporte prioritário
100GB de armazenamento
Análises avançadas
Personalizado para grandes organizações e requisitos avançados.
Tudo ilimitado
Suporte dedicado 24/7
Armazenamento personalizado
Garantia de SLA
<div class="bg-gray-50 py-16 px-4 sm:px-6 lg:px-8 font-sans">
<div class="max-w-7xl mx-auto">
<!-- Header -->
<div class="text-center max-w-3xl mx-auto mb-16">
<h2 class="text-base font-semibold text-blue-600 tracking-wide uppercase">Pricing</h2>
<p class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl">
O plano perfeito para o seu negócio
</p>
<p class="mt-4 text-xl text-gray-500">
Todos os planos incluem um teste gratuito de 14 dias. Você pode cancelar a qualquer momento.
</p>
</div>
<!-- Pricing Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
<!-- Basic Plan -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-900 mb-4">Basic</h3>
<div class="flex items-baseline mb-6">
<span class="text-4xl font-extrabold text-gray-900">¥1,980</span>
<span class="text-gray-500 ml-2">/mês</span>
</div>
<p class="text-gray-500 mb-8">Ideal para projetos pessoais ou equipes pequenas.</p>
<ul class="space-y-4 mb-8">
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
1 Projeto
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Suporte básico
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
10GB de armazenamento
</li>
</ul>
<button class="w-full py-3 px-4 bg-white text-blue-600 font-medium rounded-xl border-2 border-blue-600 hover:bg-blue-50 transition-colors duration-200">
Começar
</button>
</div>
<!-- Pro Plan (Highlighted) -->
<div class="bg-blue-600 rounded-2xl shadow-xl border border-blue-600 p-8 transform md:-translate-y-4 relative">
<div class="absolute top-0 right-0 -mt-4 mr-4 bg-yellow-400 text-yellow-900 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide">
Mais popular
</div>
<h3 class="text-xl font-semibold text-white mb-4">Pro</h3>
<div class="flex items-baseline mb-6">
<span class="text-4xl font-extrabold text-white">¥4,980</span>
<span class="text-blue-200 ml-2">/mês</span>
</div>
<p class="text-blue-100 mb-8">O plano perfeito para equipes e negócios em crescimento.</p>
<ul class="space-y-4 mb-8">
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Projetos ilimitados
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Suporte prioritário
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
100GB de armazenamento
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Análises avançadas
</li>
</ul>
<button class="w-full py-3 px-4 bg-white text-blue-600 font-bold rounded-xl hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200">
Começar teste grátis
</button>
</div>
<!-- Enterprise Plan -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-900 mb-4">Enterprise</h3>
<div class="flex items-baseline mb-6">
<span class="text-4xl font-extrabold text-gray-900">¥14,800</span>
<span class="text-gray-500 ml-2">/mês</span>
</div>
<p class="text-gray-500 mb-8">Personalizado para grandes organizações e requisitos avançados.</p>
<ul class="space-y-4 mb-8">
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Tudo ilimitado
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Suporte dedicado 24/7
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Armazenamento personalizado
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Garantia de SLA
</li>
</ul>
<button class="w-full py-3 px-4 bg-white text-gray-900 font-medium rounded-xl border-2 border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition-colors duration-200">
Fale conosco
</button>
</div>
</div>
</div>
</div>Pro (O mais popular) recebe um fundo de cor vibrante e um ligeiro deslocamento vertical (transform md:-translate-y-4) para sobressair e atrair a atenção imediata do usuário.grid-cols-1 md:grid-cols-3, a tabela é estruturada para adotar um layout em coluna única nos dispositivos móveis, adaptando-se perfeitamente a uma exibição em três colunas lado a lado em tablets e desktops.hover:shadow-lg transition-shadow duration-300 a cada cartão, desencadeando interações suaves que tornam a interface notavelmente agradável durante a navegação.