BCards/src/BCards.Web/Views/Home/Pricing.cshtml
Ricardo Carneiro b9714598b5
All checks were successful
BCards Multi-Tenant Deployment Pipeline / Run Tests (push) Successful in 10s
BCards Multi-Tenant Deployment Pipeline / PR Validation (push) Has been skipped
BCards Multi-Tenant Deployment Pipeline / Run Tests (pull_request) Successful in 5s
BCards Multi-Tenant Deployment Pipeline / PR Validation (pull_request) Successful in 1s
BCards Multi-Tenant Deployment Pipeline / Build and Push Image (push) Successful in 9m22s
BCards Multi-Tenant Deployment Pipeline / Build and Push Image (pull_request) Has been skipped
BCards Multi-Tenant Deployment Pipeline / Deploy bcards.site (pull_request) Has been skipped
BCards Multi-Tenant Deployment Pipeline / Deploy spicylinks.site (pull_request) Has been skipped
BCards Multi-Tenant Deployment Pipeline / Deploy luslinks.site (pull_request) Has been skipped
BCards Multi-Tenant Deployment Pipeline / Deploy to Release Swarm (ARM) (pull_request) Has been skipped
BCards Multi-Tenant Deployment Pipeline / Cleanup Old Resources (pull_request) Has been skipped
BCards Multi-Tenant Deployment Pipeline / Deploy bcards.site (push) Has been skipped
BCards Multi-Tenant Deployment Pipeline / Deploy spicylinks.site (push) Has been skipped
BCards Multi-Tenant Deployment Pipeline / Deploy luslinks.site (push) Has been skipped
BCards Multi-Tenant Deployment Pipeline / Deployment Summary (pull_request) Successful in 0s
BCards Multi-Tenant Deployment Pipeline / Deploy to Release Swarm (ARM) (push) Successful in 2m11s
BCards Multi-Tenant Deployment Pipeline / Cleanup Old Resources (push) Has been skipped
BCards Multi-Tenant Deployment Pipeline / Deployment Summary (push) Successful in 1s
feat: multitenant
2026-03-29 18:36:07 -03:00

609 lines
30 KiB
Plaintext

@inject Microsoft.Extensions.Options.IOptions<BCards.Web.Configuration.TenantSettings> TenantConfig
@{
var tenant = TenantConfig.Value;
ViewData["Title"] = $"Planos e Preços - {tenant.SiteName}";
//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>
<!-- Toggle Mensal/Anual -->
<div class="d-flex justify-content-center mb-4">
<div class="btn-group" role="group" aria-label="Período de cobrança">
<input type="radio" class="btn-check" name="billingPeriod" id="monthly" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="monthly">Mensal</label>
<input type="radio" class="btn-check" name="billingPeriod" id="yearly" autocomplete="off">
<label class="btn btn-outline-primary" for="yearly">
Anual
<span class="badge bg-success ms-1">2 meses grátis</span>
</label>
</div>
</div>
</div>
<div class="row g-3 justify-content-center pricing-cards">
<!-- Plano Trial -->
<div class="col-xl-2 col-lg-4 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">
<h5 class="mb-0">Trial Gratuito</h5>
<div class="mt-3">
<span class="display-5 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-xl-2 col-lg-4 col-md-6">
<div class="card h-100 border-0 shadow-sm">
<div class="card-header bg-light text-center py-4">
<h5 class="mb-0">Básico</h5>
<div class="mt-3">
<div class="pricing-monthly">
<span class="display-5 fw-bold text-primary">R$ 12,90</span>
<span class="text-muted">/mês</span>
</div>
<div class="pricing-yearly d-none">
<span class="display-5 fw-bold text-primary">R$ 129,00</span>
<span class="text-muted">/ano</span>
<br>
<small class="text-success">Economize R$ 25,80 (2 meses grátis)</small>
</div>
</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>
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
8 links por página
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
20 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">Temas premium</span>
</li>
<li class="mb-3">
<i class="text-muted me-2">✗</i>
<span class="text-muted">Links de produto</span>
</li>
</ul>
</div>
<div class="card-footer bg-transparent p-4">
@if (User.Identity?.IsAuthenticated == true)
{
<div class="pricing-monthly">
<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>
</div>
<div class="pricing-yearly d-none">
<form asp-controller="Payment" asp-action="CreateCheckoutSession" method="post">
<input type="hidden" name="planType" value="BasicYearly" />
<button type="submit" class="btn btn-outline-primary w-100">Escolher Básico Anual</button>
</form>
</div>
}
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-xl-2 col-lg-4 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">
<h5 class="mb-0">Profissional</h5>
<div class="mt-3">
<div class="pricing-monthly">
<span class="display-5 fw-bold text-warning">R$ 25,90</span>
<span class="text-muted">/mês</span>
</div>
<div class="pricing-yearly d-none">
<span class="display-5 fw-bold text-warning">R$ 259,00</span>
<span class="text-muted">/ano</span>
<br>
<small class="text-success">Economize R$ 51,80 (2 meses grátis)</small>
</div>
</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>
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
20 links por página
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
20 temas básicos
</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>
URL personalizada
</li>
<li class="mb-3">
<i class="text-muted me-2">✗</i>
<span class="text-muted">Temas premium</span>
</li>
<li class="mb-3">
<i class="text-muted me-2">✗</i>
<span class="text-muted">Links de produto</span>
</li>
</ul>
</div>
<div class="card-footer bg-transparent p-4">
@if (User.Identity?.IsAuthenticated == true)
{
<div class="pricing-monthly">
<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>
</div>
<div class="pricing-yearly d-none">
<form asp-controller="Payment" asp-action="CreateCheckoutSession" method="post">
<input type="hidden" name="planType" value="ProfessionalYearly" />
<button type="submit" class="btn btn-warning w-100">Escolher Profissional Anual</button>
</form>
</div>
}
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-xl-2 col-lg-4 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">
<h5 class="mb-0">Premium</h5>
<div class="mt-3">
<div class="pricing-monthly">
<span class="display-5 fw-bold">R$ 29,90</span>
<span class="opacity-75">/mês</span>
</div>
<div class="pricing-yearly d-none">
<span class="display-5 fw-bold">R$ 299,00</span>
<span class="opacity-75">/ano</span>
<br>
<small class="text-light">Economize R$ 59,80 (2 meses grátis)</small>
</div>
</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>
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
Links ilimitados
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
40 temas*
</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>
URL personalizada
</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>
Upload de PDFs (até 5 arquivos)
</li>
<li class="mb-3">
<i class="text-muted me-2">✗</i>
<span class="text-muted">Links de produto</span>
</li>
</ul>
<div class="mt-3">
<small class="text-muted">* 20 temas básicos + 20 temas premium exclusivos</small>
</div>
</div>
<div class="card-footer bg-transparent p-4">
@if (User.Identity?.IsAuthenticated == true)
{
<div class="pricing-monthly">
<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>
</div>
<div class="pricing-yearly d-none">
<form asp-controller="Payment" asp-action="CreateCheckoutSession" method="post">
<input type="hidden" name="planType" value="PremiumYearly" />
<button type="submit" class="btn btn-primary w-100 fw-bold">Escolher Premium Anual</button>
</form>
</div>
}
else
{
<a asp-controller="Auth" asp-action="Login" class="btn btn-primary w-100 fw-bold">Escolher Premium</a>
}
</div>
</div>
</div>
<!-- Plano Premium + Afiliados -->
<div class="col-xl-2 col-lg-4 col-md-6">
<div class="card h-100 border-success shadow">
<div class="position-absolute top-0 start-50 translate-middle pricing-premium-badge">
<span class="badge bg-success px-3 py-2">Novo!</span>
</div>
<div class="card-header bg-success text-white text-center py-4">
<h5 class="mb-0">Premium + Afiliados</h5>
<div class="mt-3">
<div class="pricing-monthly">
<span class="display-5 fw-bold">R$ 34,90</span>
<span class="opacity-75">/mês</span>
</div>
<div class="pricing-yearly d-none">
<span class="display-5 fw-bold">R$ 349,00</span>
<span class="opacity-75">/ano</span>
<br>
<small class="text-light">Economize R$ 69,80 (2 meses grátis)</small>
</div>
</div>
<small class="opacity-75">Para monetização!</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>
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
Links ilimitados
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
40 temas*
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
<strong>Links de produto</strong>
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
Moderação plus
</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>
10 links afiliados
</li>
<li class="mb-3">
<i class="text-success me-2">✓</i>
Upload de PDFs (até 10 arquivos)
</li>
</ul>
<div class="mt-3">
<small class="text-muted">* 20 temas básicos + 20 temas premium exclusivos</small>
</div>
</div>
<div class="card-footer bg-transparent p-4">
@if (User.Identity?.IsAuthenticated == true)
{
<div class="pricing-monthly">
<form asp-controller="Payment" asp-action="CreateCheckoutSession" method="post">
<input type="hidden" name="planType" value="PremiumAffiliate" />
<button type="submit" class="btn btn-success w-100 fw-bold">Escolher Premium + Afiliados</button>
</form>
</div>
<div class="pricing-yearly d-none">
<form asp-controller="Payment" asp-action="CreateCheckoutSession" method="post">
<input type="hidden" name="planType" value="PremiumAffiliateYearly" />
<button type="submit" class="btn btn-success w-100 fw-bold">Escolher Premium + Afiliados Anual</button>
</form>
</div>
}
else
{
<a asp-controller="Auth" asp-action="Login" class="btn btn-success w-100 fw-bold">Escolher Premium + Afiliados</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>
<th class="text-center">Premium + Afiliados</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>
<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>
<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">20 básicos</td>
<td class="text-center">20 básicos</td>
<td class="text-center"><strong>40 (básicos + premium)</strong></td>
<td class="text-center"><strong>40 (básicos + premium)</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>
<td class="text-center"><strong>Completo</strong></td>
</tr>
<tr>
<td>Suporte por email</td>
<td class="text-center">❌</td>
<td class="text-center">❌</td>
<td class="text-center">❌</td>
<td class="text-center">✅</td>
<td class="text-center">✅</td>
</tr>
<tr>
<td>URL personalizada</td>
<td class="text-center">❌</td>
<td class="text-center">✅</td>
<td class="text-center">✅</td>
<td class="text-center">✅</td>
<td class="text-center">✅</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>
<td class="text-center"><strong>✅</strong></td>
</tr>
<tr>
<td>Links de produto</td>
<td class="text-center">❌</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>Moderação especial</td>
<td class="text-center">❌</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 funcionam os planos anuais?
</button>
</h3>
<div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
Nos planos anuais você economiza 2 meses! Pague 10 meses e use por 12 meses. O desconto é aplicado automaticamente na cobrança anual.
</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>
}
<script>
document.addEventListener('DOMContentLoaded', function() {
const monthlyRadio = document.getElementById('monthly');
const yearlyRadio = document.getElementById('yearly');
const monthlyElements = document.querySelectorAll('.pricing-monthly');
const yearlyElements = document.querySelectorAll('.pricing-yearly');
function togglePricing() {
if (yearlyRadio.checked) {
monthlyElements.forEach(el => el.classList.add('d-none'));
yearlyElements.forEach(el => el.classList.remove('d-none'));
} else {
monthlyElements.forEach(el => el.classList.remove('d-none'));
yearlyElements.forEach(el => el.classList.add('d-none'));
}
}
monthlyRadio.addEventListener('change', togglePricing);
yearlyRadio.addEventListener('change', togglePricing);
});
</script>