BCards/src/BCards.Web/Views/Home/Pricing.cshtml
2025-08-16 17:10:45 -03:00

394 lines
18 KiB
Plaintext

@{
ViewData["Title"] = "Planos e Preços - BCards";
//var isPreview = ViewBag.IsPreview as bool? ?? false;
//Layout = isPreview ? "_Layout" : "_UserPageLayout";
Layout = "_Layout";
}
<div class="container py-5">
<div class="text-center mb-5">
<h1 class="display-5 fw-bold mb-3">Escolha o plano ideal para você</h1>
<p class="lead text-muted">Comece grátis e faça upgrade quando precisar de mais recursos</p>
</div>
<div class="row g-4 justify-content-center">
<!-- Plano Trial -->
<div class="col-lg-3 col-md-6">
<div class="card h-100 border-0 shadow-sm">
<div class="card-header bg-success bg-opacity-10 text-center py-4">
<h4 class="mb-0">Trial Gratuito</h4>
<div class="mt-3">
<span class="display-4 fw-bold text-success">R$ 0</span>
<span class="text-muted">/7 dias</span>
</div>
</div>
<div class="card-body p-4">
<ul class="list-unstyled">
<li class="mb-3">
<i class="text-success me-2">✓</i>
Até <strong>3 links</strong>
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
1 tema básico
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
7 dias grátis
</li>
<li class="mb-3">
<i class="text-muted me-2">✗</i>
<span class="text-muted">Analytics</span>
</li>
<li class="mb-3">
<i class="text-muted me-2">✗</i>
<span class="text-muted">Página rápida</span>
</li>
</ul>
</div>
<div class="card-footer bg-transparent p-4">
@if (User.Identity?.IsAuthenticated == true)
{
<a asp-controller="Admin" asp-action="CreatePage" class="btn btn-success w-100">Começar Grátis</a>
}
else
{
<a asp-controller="Auth" asp-action="Login" class="btn btn-success w-100">Começar Grátis</a>
}
</div>
</div>
</div>
<!-- Plano Básico -->
<div class="col-lg-3 col-md-6">
<div class="card h-100 border-0 shadow-sm">
<div class="card-header bg-light text-center py-4">
<h4 class="mb-0">Básico</h4>
<div class="mt-3">
<span class="display-4 fw-bold text-primary">R$ 9,90</span>
<span class="text-muted">/mês</span>
</div>
</div>
<div class="card-body p-4">
<ul class="list-unstyled">
<li class="mb-3">
<i class="text-success me-2">✓</i>
<strong>3 páginas</strong>, 8 links cada
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
Temas básicos
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
Analytics simples
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
URL personalizada
</li>
<li class="mb-3">
<i class="text-muted me-2">✗</i>
<span class="text-muted">Página rápida</span>
</li>
<li class="mb-3">
<i class="text-muted me-2">✗</i>
<span class="text-muted">Temas premium</span>
</li>
</ul>
</div>
<div class="card-footer bg-transparent p-4">
@if (User.Identity?.IsAuthenticated == true)
{
<form asp-controller="Payment" asp-action="CreateCheckoutSession" method="post">
<input type="hidden" name="planType" value="Basic" />
<button type="submit" class="btn btn-outline-primary w-100">Escolher Básico</button>
</form>
}
else
{
<a asp-controller="Auth" asp-action="Login" class="btn btn-outline-primary w-100">Escolher Básico</a>
}
</div>
</div>
</div>
<!-- Plano Profissional (Decoy) -->
<div class="col-lg-3 col-md-6">
<div class="card h-100 border-0 shadow-sm">
<div class="card-header bg-warning bg-opacity-10 text-center py-4">
<h4 class="mb-0">Profissional</h4>
<div class="mt-3">
<span class="display-4 fw-bold text-warning">R$ 24,90</span>
<span class="text-muted">/mês</span>
</div>
</div>
<div class="card-body p-4">
<ul class="list-unstyled">
<li class="mb-3">
<i class="text-success me-2">✓</i>
<strong>5 páginas</strong>, 20 links cada
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
Todos os temas
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
Analytics avançado
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
Domínio personalizado
</li>
<li class="mb-3">
<i class="text-muted me-2">✗</i>
<span class="text-muted">Links ilimitados</span>
</li>
<li class="mb-3">
<i class="text-muted me-2">✗</i>
<span class="text-muted">Suporte prioritário</span>
</li>
</ul>
</div>
<div class="card-footer bg-transparent p-4">
@if (User.Identity?.IsAuthenticated == true)
{
<form asp-controller="Payment" asp-action="CreateCheckoutSession" method="post">
<input type="hidden" name="planType" value="Professional" />
<button type="submit" class="btn btn-warning w-100">Escolher Profissional</button>
</form>
}
else
{
<a asp-controller="Auth" asp-action="Login" class="btn btn-warning w-100">Escolher Profissional</a>
}
</div>
</div>
</div>
<!-- Plano Premium (Mais Popular) -->
<div class="col-lg-3 col-md-6">
<div class="card h-100 border-primary shadow position-relative">
<div class="position-absolute top-0 start-50 translate-middle">
<span class="badge bg-primary px-3 py-2">Mais Popular</span>
</div>
<div class="card-header bg-primary text-white text-center py-4">
<h4 class="mb-0">Premium</h4>
<div class="mt-3">
<span class="display-4 fw-bold">R$ 29,90</span>
<span class="opacity-75">/mês</span>
</div>
<small class="opacity-75">Melhor custo-benefício!</small>
</div>
<div class="card-body p-4">
<ul class="list-unstyled">
<li class="mb-3">
<i class="text-success me-2">✓</i>
<strong>15 páginas</strong>, links ilimitados
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
Temas premium
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
Analytics completo
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
Múltiplos domínios
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
Suporte prioritário
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
Recursos exclusivos
</li>
</ul>
</div>
<div class="card-footer bg-transparent p-4">
@if (User.Identity?.IsAuthenticated == true)
{
<form asp-controller="Payment" asp-action="CreateCheckoutSession" method="post">
<input type="hidden" name="planType" value="Premium" />
<button type="submit" class="btn btn-primary w-100 fw-bold">Escolher Premium</button>
</form>
}
else
{
<a asp-controller="Auth" asp-action="Login" class="btn btn-primary w-100 fw-bold">Escolher Premium</a>
}
</div>
</div>
</div>
</div>
<!-- Comparação de recursos -->
<div class="mt-5 pt-5">
<h2 class="text-center mb-4">Compare todos os recursos</h2>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Recursos</th>
<th class="text-center">Trial</th>
<th class="text-center">Básico</th>
<th class="text-center">Profissional</th>
<th class="text-center">Premium</th>
</tr>
</thead>
<tbody>
<tr>
<td>Páginas</td>
<td class="text-center">1</td>
<td class="text-center">3</td>
<td class="text-center">5</td>
<td class="text-center"><strong>15</strong></td>
</tr>
<tr>
<td>Links por página</td>
<td class="text-center">3</td>
<td class="text-center">8</td>
<td class="text-center">20</td>
<td class="text-center"><strong>Ilimitado</strong></td>
</tr>
<tr>
<td>Temas disponíveis</td>
<td class="text-center">1 básico</td>
<td class="text-center">Básicos</td>
<td class="text-center">Todos</td>
<td class="text-center"><strong>Customizáveis</strong></td>
</tr>
<tr>
<td>Analytics</td>
<td class="text-center">❌</td>
<td class="text-center">Simples</td>
<td class="text-center">Avançado</td>
<td class="text-center"><strong>Completo</strong></td>
</tr>
<tr>
<td>Domínio personalizado</td>
<td class="text-center">❌</td>
<td class="text-center">❌</td>
<td class="text-center">✅</td>
<td class="text-center">✅</td>
</tr>
<tr>
<td>Múltiplos domínios</td>
<td class="text-center">❌</td>
<td class="text-center">❌</td>
<td class="text-center">❌</td>
<td class="text-center"><strong>✅</strong></td>
</tr>
<tr>
<td>Suporte prioritário</td>
<td class="text-center">❌</td>
<td class="text-center">❌</td>
<td class="text-center">❌</td>
<td class="text-center"><strong>✅</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- FAQ -->
<div class="mt-5 pt-5">
<h2 class="text-center mb-4">Perguntas Frequentes</h2>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="accordion" id="faqAccordion">
<div class="accordion-item">
<h3 class="accordion-header" id="faq1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1">
Posso cancelar minha assinatura a qualquer momento?
</button>
</h3>
<div id="collapse1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
<div class="accordion-body">
Sim! Você pode cancelar sua assinatura a qualquer momento. O cancelamento será aplicado no final do período de cobrança atual.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header" id="faq2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2">
Como funciona o domínio personalizado?
</button>
</h3>
<div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
Com os planos Profissional e Premium, você pode conectar seu próprio domínio (ex: meusite.com) à sua página BCards.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header" id="faq3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3">
O que acontece se eu exceder o limite de links?
</button>
</h3>
<div id="collapse3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
Se você atingir o limite de links do seu plano, será sugerido fazer upgrade. Seus links existentes continuarão funcionando normalmente.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@if (TempData["Success"] != null)
{
<div class="toast-container position-fixed top-0 end-0 p-3">
<div class="toast show" role="alert">
<div class="toast-header">
<i class="fas fa-check-circle text-success me-2"></i>
<strong class="me-auto">Sucesso</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
@TempData["Success"]
</div>
</div>
</div>
}
@if (TempData["Error"] != null)
{
<div class="toast-container position-fixed top-0 end-0 p-3">
<div class="toast show" role="alert">
<div class="toast-header">
<i class="fas fa-exclamation-triangle text-warning me-2"></i>
<strong class="me-auto">Atenção</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
@TempData["Error"]
</div>
</div>
</div>
}
@if (TempData["Info"] != null)
{
<div class="toast-container position-fixed top-0 end-0 p-3">
<div class="toast show" role="alert">
<div class="toast-header">
<i class="fas fa-exclamation-triangle text-primary me-2"></i>
<strong class="me-auto">Atenção</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
@TempData["Info"]
</div>
</div>
</div>
}