generated from ricardo/MVCLogin
394 lines
15 KiB
Plaintext
394 lines
15 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Planos";
|
|
}
|
|
|
|
@section Styles {
|
|
<style type="text/css">
|
|
.plans-header {
|
|
background-color: var(--suma-beige);
|
|
padding: 3rem 0;
|
|
border-radius: 0 0 50% 50% / 20px;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.pricing-card {
|
|
background-color: white;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
transition: all 0.3s ease;
|
|
height: 100%;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.pricing-card:hover {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.pricing-card.popular {
|
|
border-color: var(--suma-red);
|
|
position: relative;
|
|
}
|
|
|
|
.popular-badge {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: var(--suma-red);
|
|
color: white;
|
|
padding: 5px 15px;
|
|
font-size: 0.8rem;
|
|
border-radius: 0 12px 0 12px;
|
|
}
|
|
|
|
.pricing-header {
|
|
text-align: center;
|
|
padding: 1.5rem;
|
|
border-bottom: 1px solid var(--suma-gray);
|
|
}
|
|
|
|
.pricing-price {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
margin: 1rem 0;
|
|
color: var(--suma-red);
|
|
}
|
|
|
|
.pricing-period {
|
|
font-size: 0.9rem;
|
|
color: var(--suma-dark-gray);
|
|
}
|
|
|
|
.pricing-features {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.pricing-feature {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.pricing-feature i {
|
|
color: var(--suma-red);
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.pricing-feature.disabled {
|
|
color: var(--suma-dark-gray);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.pricing-action {
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-outline-red {
|
|
color: var(--suma-red);
|
|
border-color: var(--suma-red);
|
|
}
|
|
|
|
.btn-outline-red:hover {
|
|
background-color: var(--suma-red);
|
|
color: white;
|
|
}
|
|
|
|
.faq-item {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.faq-question {
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--suma-red);
|
|
}
|
|
</style>
|
|
}
|
|
|
|
<!-- Header da página -->
|
|
<div class="plans-header">
|
|
<div class="container text-center">
|
|
<h1 class="display-4 mb-3">Planos de Assinatura</h1>
|
|
<p class="lead mb-4">Escolha o plano ideal para suas necessidades de resumo de vídeos</p>
|
|
<div class="d-flex justify-content-center">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-light active" id="monthlyBtn">Mensal</button>
|
|
<button type="button" class="btn btn-light" id="yearlyBtn">Anual (20% desconto)</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cards de planos -->
|
|
<div class="container mb-5">
|
|
<div class="row">
|
|
<!-- Plano Gratuito -->
|
|
<div class="col-md-4 mb-4">
|
|
<div class="pricing-card">
|
|
<div class="pricing-header">
|
|
<h3>Gratuito</h3>
|
|
<div class="pricing-price">R$ 0</div>
|
|
<div class="pricing-period">para sempre</div>
|
|
</div>
|
|
<div class="pricing-features">
|
|
<div class="pricing-feature">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<span>3 resumos por mês</span>
|
|
</div>
|
|
<div class="pricing-feature">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<span>Resumos básicos</span>
|
|
</div>
|
|
<div class="pricing-feature">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<span>Vídeos de até 10 minutos</span>
|
|
</div>
|
|
<div class="pricing-feature disabled">
|
|
<i class="bi bi-x-circle"></i>
|
|
<span>Download de resumos</span>
|
|
</div>
|
|
<div class="pricing-feature disabled">
|
|
<i class="bi bi-x-circle"></i>
|
|
<span>Transcrição completa</span>
|
|
</div>
|
|
<div class="pricing-feature disabled">
|
|
<i class="bi bi-x-circle"></i>
|
|
<span>Suporte prioritário</span>
|
|
</div>
|
|
</div>
|
|
<div class="pricing-action">
|
|
<a href="#" class="btn btn-outline-red btn-lg btn-block">Começar grátis</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plano Premium -->
|
|
<div class="col-md-4 mb-4">
|
|
<div class="pricing-card popular">
|
|
<div class="popular-badge">Mais popular</div>
|
|
<div class="pricing-header">
|
|
<h3>Premium</h3>
|
|
<div class="pricing-price" id="premiumPrice">R$ 29,90</div>
|
|
<div class="pricing-period" id="premiumPeriod">por mês</div>
|
|
</div>
|
|
<div class="pricing-features">
|
|
<div class="pricing-feature">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<span>Resumos ilimitados</span>
|
|
</div>
|
|
<div class="pricing-feature">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<span>Resumos detalhados</span>
|
|
</div>
|
|
<div class="pricing-feature">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<span>Vídeos de até 3 horas</span>
|
|
</div>
|
|
<div class="pricing-feature">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<span>Download de resumos (PDF)</span>
|
|
</div>
|
|
<div class="pricing-feature">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<span>Transcrição completa</span>
|
|
</div>
|
|
<div class="pricing-feature disabled">
|
|
<i class="bi bi-x-circle"></i>
|
|
<span>Suporte prioritário</span>
|
|
</div>
|
|
</div>
|
|
<div class="pricing-action">
|
|
<a href="#" class="btn btn-primary btn-lg btn-block">Assinar agora</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plano Pro -->
|
|
<div class="col-md-4 mb-4">
|
|
<div class="pricing-card">
|
|
<div class="pricing-header">
|
|
<h3>Profissional</h3>
|
|
<div class="pricing-price" id="proPrice">R$ 59,90</div>
|
|
<div class="pricing-period" id="proPeriod">por mês</div>
|
|
</div>
|
|
<div class="pricing-features">
|
|
<div class="pricing-feature">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<span>Tudo do plano Premium</span>
|
|
</div>
|
|
<div class="pricing-feature">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<span>Resumos para vídeos de qualquer duração</span>
|
|
</div>
|
|
<div class="pricing-feature">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<span>Análise avançada de conteúdo</span>
|
|
</div>
|
|
<div class="pricing-feature">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<span>Extração de pontos-chave personalizados</span>
|
|
</div>
|
|
<div class="pricing-feature">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<span>API para integração</span>
|
|
</div>
|
|
<div class="pricing-feature">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<span>Suporte prioritário 24/7</span>
|
|
</div>
|
|
</div>
|
|
<div class="pricing-action">
|
|
<a href="#" class="btn btn-outline-red btn-lg btn-block">Experimente 7 dias grátis</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabela comparativa -->
|
|
<div class="mt-5 mb-5">
|
|
<h3 class="text-center mb-4">Comparação detalhada dos planos</h3>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th>Recurso</th>
|
|
<th class="text-center">Gratuito</th>
|
|
<th class="text-center">Premium</th>
|
|
<th class="text-center">Profissional</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Resumos mensais</td>
|
|
<td class="text-center">3</td>
|
|
<td class="text-center">Ilimitados</td>
|
|
<td class="text-center">Ilimitados</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Duração máxima dos vídeos</td>
|
|
<td class="text-center">10 minutos</td>
|
|
<td class="text-center">3 horas</td>
|
|
<td class="text-center">Sem limite</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Transcrição completa</td>
|
|
<td class="text-center"><i class="bi bi-x text-danger"></i></td>
|
|
<td class="text-center"><i class="bi bi-check text-success"></i></td>
|
|
<td class="text-center"><i class="bi bi-check text-success"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Download de resumos</td>
|
|
<td class="text-center"><i class="bi bi-x text-danger"></i></td>
|
|
<td class="text-center"><i class="bi bi-check text-success"></i></td>
|
|
<td class="text-center"><i class="bi bi-check text-success"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Palavras-chave e tópicos</td>
|
|
<td class="text-center">Básico</td>
|
|
<td class="text-center">Avançado</td>
|
|
<td class="text-center">Personalizado</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Acesso a API</td>
|
|
<td class="text-center"><i class="bi bi-x text-danger"></i></td>
|
|
<td class="text-center"><i class="bi bi-x text-danger"></i></td>
|
|
<td class="text-center"><i class="bi bi-check text-success"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Suporte</td>
|
|
<td class="text-center">Email</td>
|
|
<td class="text-center">Email e chat</td>
|
|
<td class="text-center">Prioritário 24/7</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQs -->
|
|
<div class="container mb-5">
|
|
<h3 class="text-center mb-4">Perguntas Frequentes</h3>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="faq-item">
|
|
<h5 class="faq-question">Como funciona o SumaTube?</h5>
|
|
<p>O SumaTube usa tecnologia avançada de IA para extrair e analisar as legendas dos vídeos do YouTube, criando resumos inteligentes que capturam os pontos principais do conteúdo.</p>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<h5 class="faq-question">Posso cancelar minha assinatura a qualquer momento?</h5>
|
|
<p>Sim, você pode cancelar sua assinatura a qualquer momento. Não há contratos de longo prazo ou taxas de cancelamento.</p>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<h5 class="faq-question">Como são processados os pagamentos?</h5>
|
|
<p>Processamos pagamentos via cartão de crédito, débito, PayPal e Pix. Todas as transações são seguras e criptografadas.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="faq-item">
|
|
<h5 class="faq-question">E se o vídeo não tiver legendas?</h5>
|
|
<p>O SumaTube pode gerar legendas automaticamente para vídeos que não as possuem, embora a precisão possa variar dependendo da qualidade do áudio.</p>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<h5 class="faq-question">Quais idiomas são suportados?</h5>
|
|
<p>Atualmente suportamos resumos em português, inglês e espanhol. Estamos constantemente adicionando suporte para novos idiomas.</p>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<h5 class="faq-question">Como posso entrar em contato com o suporte?</h5>
|
|
<p>Você pode entrar em contato conosco através do email suporte@sumatube.com ou pelo chat disponível no site para usuários Premium e Profissional.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Call to Action -->
|
|
<div class="text-center mt-5">
|
|
<h3 class="mb-3">Pronto para começar?</h3>
|
|
<p class="mb-4">Escolha o plano ideal para suas necessidades e comece a usar o SumaTube hoje mesmo.</p>
|
|
<a href="#" class="btn btn-primary btn-lg">Criar conta gratuita</a>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
// Toggle entre planos mensais e anuais
|
|
$('#monthlyBtn').click(function() {
|
|
$(this).addClass('active');
|
|
$('#yearlyBtn').removeClass('active');
|
|
|
|
// Atualizar preços para mensais
|
|
$('#premiumPrice').text('R$ 29,90');
|
|
$('#premiumPeriod').text('por mês');
|
|
$('#proPrice').text('R$ 59,90');
|
|
$('#proPeriod').text('por mês');
|
|
});
|
|
|
|
$('#yearlyBtn').click(function() {
|
|
$(this).addClass('active');
|
|
$('#monthlyBtn').removeClass('active');
|
|
|
|
// Atualizar preços para anuais com desconto
|
|
$('#premiumPrice').text('R$ 287,04');
|
|
$('#premiumPeriod').text('por ano (R$ 23,92/mês)');
|
|
$('#proPrice').text('R$ 575,04');
|
|
$('#proPeriod').text('por ano (R$ 47,92/mês)');
|
|
});
|
|
|
|
// Animação aos cards
|
|
$('.pricing-card').hover(
|
|
function() {
|
|
$(this).addClass('shadow-lg');
|
|
},
|
|
function() {
|
|
$(this).removeClass('shadow-lg');
|
|
}
|
|
);
|
|
});
|
|
</script>
|
|
} |