309 lines
15 KiB
Plaintext
309 lines
15 KiB
Plaintext
@model QRRapidoApp.Models.ViewModels.UpgradeViewModel
|
|
@{
|
|
ViewData["Title"] = "QR Rapido Premium";
|
|
}
|
|
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<!-- Hero Section -->
|
|
<div class="text-center mb-5">
|
|
<h1 class="display-4 text-gradient">
|
|
<i class="fas fa-rocket"></i> QR Rapido Premium
|
|
</h1>
|
|
<p class="lead text-muted">
|
|
Acelere sua produtividade com o gerador de QR mais rápido do mundo
|
|
</p>
|
|
<div class="badge bg-success fs-6 p-2">
|
|
<i class="fas fa-bolt"></i> 3x mais rápido que a concorrência
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Status -->
|
|
@if (Model.IsAdFreeActive)
|
|
{
|
|
<div class="alert alert-info border-0 shadow-sm mb-4">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-8">
|
|
<h6><i class="fas fa-info-circle"></i> Status Atual</h6>
|
|
<p class="mb-0">
|
|
Você tem <strong>@Model.DaysUntilAdExpiry dias</strong> restantes sem anúncios.
|
|
Upgrade agora e tenha acesso premium para sempre!
|
|
</p>
|
|
</div>
|
|
<div class="col-md-4 text-end">
|
|
<div class="badge bg-success p-2">
|
|
@Model.DaysUntilAdExpiry dias restantes
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- Pricing Card -->
|
|
<div class="row justify-content-center mb-5">
|
|
<div class="col-md-6">
|
|
<div class="card shadow-lg border-warning">
|
|
<div class="card-header bg-warning text-dark text-center">
|
|
<h3 class="mb-0">
|
|
<i class="fas fa-crown"></i> QR Rapido Premium
|
|
</h3>
|
|
<small>O plano mais popular</small>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<div class="display-3 text-warning fw-bold mb-2">
|
|
R$ @Model.PremiumPrice.ToString("0.00")
|
|
</div>
|
|
<p class="text-muted">por mês</p>
|
|
|
|
<div class="list-group list-group-flush mb-4">
|
|
<div class="list-group-item border-0">
|
|
<i class="fas fa-infinity text-success me-2"></i>
|
|
<strong>QR codes ilimitados</strong>
|
|
</div>
|
|
<div class="list-group-item border-0">
|
|
<i class="fas fa-bolt text-success me-2"></i>
|
|
<strong>Geração ultra-rápida (0.4s)</strong>
|
|
</div>
|
|
<div class="list-group-item border-0">
|
|
<i class="fas fa-ban text-success me-2"></i>
|
|
<strong>Sem anúncios para sempre</strong>
|
|
</div>
|
|
<div class="list-group-item border-0">
|
|
<i class="fas fa-magic text-success me-2"></i>
|
|
<strong>QR codes dinâmicos</strong>
|
|
</div>
|
|
<div class="list-group-item border-0">
|
|
<i class="fas fa-chart-line text-success me-2"></i>
|
|
<strong>Analytics em tempo real</strong>
|
|
</div>
|
|
<div class="list-group-item border-0">
|
|
<i class="fas fa-headset text-success me-2"></i>
|
|
<strong>Suporte prioritário</strong>
|
|
</div>
|
|
<div class="list-group-item border-0">
|
|
<i class="fas fa-code text-success me-2"></i>
|
|
<strong>API para desenvolvedores</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="upgrade-btn" class="btn btn-warning btn-lg w-100 mb-3">
|
|
<i class="fas fa-rocket"></i> Fazer Upgrade Agora
|
|
<div class="spinner-border spinner-border-sm ms-2 d-none" role="status"></div>
|
|
</button>
|
|
|
|
<small class="text-muted">
|
|
<i class="fas fa-shield-alt"></i> Pagamento seguro via Stripe
|
|
<br>
|
|
<i class="fas fa-times-circle"></i> Cancele quando quiser
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature Comparison -->
|
|
<div class="card shadow-sm mb-5">
|
|
<div class="card-header">
|
|
<h4 class="mb-0">
|
|
<i class="fas fa-balance-scale"></i> Comparação de Planos
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Recurso</th>
|
|
<th class="text-center">Free</th>
|
|
<th class="text-center bg-warning text-dark">Premium</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>QR codes por dia</td>
|
|
<td class="text-center">50</td>
|
|
<td class="text-center"><i class="fas fa-infinity text-success"></i> Ilimitado</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Velocidade de geração</td>
|
|
<td class="text-center">1.2s</td>
|
|
<td class="text-center"><strong class="text-success">0.4s</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Anúncios</td>
|
|
<td class="text-center"><i class="fas fa-times text-danger"></i></td>
|
|
<td class="text-center"><i class="fas fa-check text-success"></i> Sem anúncios</td>
|
|
</tr>
|
|
<tr>
|
|
<td>QR codes dinâmicos</td>
|
|
<td class="text-center"><i class="fas fa-times text-danger"></i></td>
|
|
<td class="text-center"><i class="fas fa-check text-success"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Analytics detalhados</td>
|
|
<td class="text-center"><i class="fas fa-times text-danger"></i></td>
|
|
<td class="text-center"><i class="fas fa-check text-success"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Suporte prioritário</td>
|
|
<td class="text-center"><i class="fas fa-times text-danger"></i></td>
|
|
<td class="text-center"><i class="fas fa-check text-success"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<td>API access</td>
|
|
<td class="text-center"><i class="fas fa-times text-danger"></i></td>
|
|
<td class="text-center"><i class="fas fa-check text-success"></i></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Speed Demonstration -->
|
|
<div class="card shadow-sm mb-5">
|
|
<div class="card-header bg-primary text-white">
|
|
<h4 class="mb-0">
|
|
<i class="fas fa-stopwatch"></i> Demonstração de Velocidade
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row text-center">
|
|
<div class="col-md-4">
|
|
<div class="card border-danger">
|
|
<div class="card-body">
|
|
<h5 class="text-danger">Concorrentes</h5>
|
|
<div class="display-4 text-danger">4.5s</div>
|
|
<p class="text-muted">Tempo médio</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card border-primary">
|
|
<div class="card-body">
|
|
<h5 class="text-primary">QR Rapido Free</h5>
|
|
<div class="display-4 text-primary">1.2s</div>
|
|
<p class="text-muted">3x mais rápido</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card border-success">
|
|
<div class="card-body">
|
|
<h5 class="text-success">QR Rapido Premium</h5>
|
|
<div class="display-4 text-success">0.4s</div>
|
|
<p class="text-muted">11x mais rápido!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ -->
|
|
<div class="card shadow-sm">
|
|
<div class="card-header">
|
|
<h4 class="mb-0">
|
|
<i class="fas fa-question-circle"></i> Perguntas Frequentes
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="accordion" id="faqAccordion">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
|
|
Posso cancelar a qualquer momento?
|
|
</button>
|
|
</h2>
|
|
<div id="faq1" class="accordion-collapse collapse show">
|
|
<div class="accordion-body">
|
|
Sim! Você pode cancelar sua assinatura a qualquer momento. Não há taxas de cancelamento
|
|
e você manterá o acesso premium até o final do período já pago.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
|
|
O que são QR codes dinâmicos?
|
|
</button>
|
|
</h2>
|
|
<div id="faq2" class="accordion-collapse collapse">
|
|
<div class="accordion-body">
|
|
QR codes dinâmicos permitem que você altere o conteúdo do QR após ele ter sido criado,
|
|
sem precisar gerar um novo código. Perfeito para campanhas de marketing e uso empresarial.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
|
|
Como funciona o suporte prioritário?
|
|
</button>
|
|
</h2>
|
|
<div id="faq3" class="accordion-collapse collapse">
|
|
<div class="accordion-body">
|
|
Usuários premium recebem resposta em até 2 horas úteis por email,
|
|
acesso ao chat direto e suporte técnico especializado.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script>
|
|
document.getElementById('upgrade-btn').addEventListener('click', async function() {
|
|
const btn = this;
|
|
const spinner = btn.querySelector('.spinner-border');
|
|
|
|
btn.disabled = true;
|
|
spinner.classList.remove('d-none');
|
|
|
|
try {
|
|
const response = await fetch('/Premium/CreateCheckout', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
}
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
// Track conversion attempt
|
|
if (typeof gtag !== 'undefined') {
|
|
gtag('event', 'begin_checkout', {
|
|
'event_category': 'Premium',
|
|
'value': @Model.PremiumPrice,
|
|
'currency': 'BRL'
|
|
});
|
|
}
|
|
|
|
window.location.href = result.url;
|
|
} else {
|
|
alert('Erro ao processar pagamento: ' + result.error);
|
|
}
|
|
} catch (error) {
|
|
console.error('Erro:', error);
|
|
alert('Erro ao processar pagamento. Tente novamente.');
|
|
} finally {
|
|
btn.disabled = false;
|
|
spinner.classList.add('d-none');
|
|
}
|
|
});
|
|
|
|
// Track page view
|
|
if (typeof gtag !== 'undefined') {
|
|
gtag('event', 'page_view', {
|
|
'page_title': 'Premium Upgrade',
|
|
'page_location': window.location.href
|
|
});
|
|
}
|
|
</script>
|
|
} |