sumatube/SumaTube/Views/Home/Index.cshtml

@{
    ViewBag.Title = "Resumos Inteligentes de Vídeos";
}

<!-- Hero Banner -->
<div class="hero-banner mb-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1>Transforme qualquer vídeo em um resumo inteligente</h1>
                <p class="lead">Extraímos as legendas e criamos resumos precisos para você economizar tempo e maximizar o aprendizado.</p>

                <a href="@Url.Action("Index", "Login")" class="btn btn-hero">
                    <i class="bi bi-magic mr-2"></i> Fazer login e resumir um vídeo
                </a>
            </div>
            <div class="col-lg-6 mt-4 mt-lg-0 text-center">
                <div class="hero-image">
                    <img src="/img/video-summary-demo.png" alt="Ilustração de resumo de vídeo" class="img-fluid" onerror="this.src='https://via.placeholder.com/600x350?text=SumaTube';" />
                    <span class="demo-badge">
                        <i class="bi bi-play-circle mr-1"></i> Ver demonstração
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Como funciona -->
<section class="mb-5">
    <div class="container">
        <h2 class="text-center mb-4">Como funciona</h2>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="suma-card h-100 text-center">
                    <div class="mb-3">
                        <i class="bi bi-youtube text-danger" style="font-size: 3rem;"></i>
                    </div>
                    <h3 class="suma-card-title">1. Cole o link do YouTube</h3>
                    <p class="suma-card-body">
                        Basta colar o URL do vídeo do YouTube que você deseja resumir. Funciona com qualquer vídeo que tenha legendas disponíveis.
                    </p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="suma-card h-100 text-center">
                    <div class="mb-3">
                        <i class="bi bi-cpu text-danger" style="font-size: 3rem;"></i>
                    </div>
                    <h3 class="suma-card-title">2. Processamento inteligente</h3>
                    <p class="suma-card-body">
                        Nossa tecnologia extrai as legendas e utiliza inteligência artificial para identificar os pontos mais importantes do vídeo.
                    </p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="suma-card h-100 text-center">
                    <div class="mb-3">
                        <i class="bi bi-file-earmark-text text-danger" style="font-size: 3rem;"></i>
                    </div>
                    <h3 class="suma-card-title">3. Receba seu resumo</h3>
                    <p class="suma-card-body">
                        Em poucos segundos, você recebe um resumo completo e organizado com os principais pontos abordados no vídeo.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Recursos -->
<section class="mb-5 bg-light py-5">
    <div class="container">
        <h2 class="text-center mb-4">Economize tempo com nossos recursos</h2>
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0 order-lg-2">
@*                 
                <img src="/images/features-illustration.png" alt="Recursos do SumaTube" class="img-fluid rounded shadow" onerror="this.src='https://via.placeholder.com/600x400?text=Recursos+SumaTube';" />
            
 *@
            </div>
            <div class="col-lg-6 order-lg-1">
                <div class="d-flex mb-4">
                    <div class="mr-3">
                        <i class="bi bi-clock text-danger" style="font-size: 2rem;"></i>
                    </div>
                    <div>
                        <h3>Economize tempo</h3>
                        <p>Assista apenas o que realmente importa com nossos resumos personalizados.</p>
                    </div>
                </div>
                <div class="d-flex mb-4">
                    <div class="mr-3">
                        <i class="bi bi-translate text-danger" style="font-size: 2rem;"></i>
                    </div>
                    <div>
                        <h3>Suporte multi-idioma</h3>
                        <p>Resuma vídeos em diversos idiomas com a mesma precisão e qualidade.</p>
                    </div>
                </div>
                <div class="d-flex mb-4">
                    <div class="mr-3">
                        <i class="bi bi-bookmark-check text-danger" style="font-size: 2rem;"></i>
                    </div>
                    <div>
                        <h3>Pontos-chave destacados</h3>
                        <p>Identificamos automaticamente os conceitos e informações mais importantes em cada vídeo.</p>
                    </div>
                </div>
                <div class="d-flex">
                    <div class="mr-3">
                        <i class="bi bi-cloud-download text-danger" style="font-size: 2rem;"></i>
                    </div>
                    <div>
                        <h3>Salve para consultar depois</h3>
                        <p>Mantenha todos seus resumos organizados em sua biblioteca pessoal.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Planos -->
<section class="mb-5">
    <div class="container">
        <div class="text-center mb-5">
            <h2>Escolha o plano ideal para você</h2>
            <p class="lead">Oferecemos opções flexíveis para atender às suas necessidades</p>
        </div>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="suma-card h-100 text-center">
                    <span class="badge badge-pill badge-light mb-3">Gratuito</span>
                    <h3 class="suma-card-title">Basic</h3>
                    <div class="my-4">
                        <span class="h1">R$ 0</span>
                        <span class="text-muted">/mês</span>
                    </div>
                    <ul class="list-unstyled mb-4">
                        <li class="mb-2">3 resumos por mês</li>
                        <li class="mb-2">Resumos básicos</li>
                        <li class="mb-2">Suporte por e-mail</li>
                        <li class="mb-2 text-muted"><del>Biblioteca personalizada</del></li>
                        <li class="mb-2 text-muted"><del>Exportação em PDF</del></li>
                    </ul>
                    <a href="#" class="btn btn-outline-danger">Começar agora</a>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="suma-card h-100 text-center" style="transform: scale(1.05); border: 2px solid var(--suma-red);">
                    <span class="badge badge-pill badge-danger mb-3">Popular</span>
                    <h3 class="suma-card-title">Pro</h3>
                    <div class="my-4">
                        <span class="h1">R$ 19,90</span>
                        <span class="text-muted">/mês</span>
                    </div>
                    <ul class="list-unstyled mb-4">
                        <li class="mb-2">30 resumos por mês</li>
                        <li class="mb-2">Resumos detalhados</li>
                        <li class="mb-2">Suporte prioritário</li>
                        <li class="mb-2">Biblioteca personalizada</li>
                        <li class="mb-2">Exportação em PDF</li>
                    </ul>
                    <a href="#" class="btn btn-danger">Escolher Pro</a>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="suma-card h-100 text-center">
                    <span class="badge badge-pill badge-light mb-3">Premium</span>
                    <h3 class="suma-card-title">Business</h3>
                    <div class="my-4">
                        <span class="h1">R$ 49,90</span>
                        <span class="text-muted">/mês</span>
                    </div>
                    <ul class="list-unstyled mb-4">
                        <li class="mb-2">Resumos ilimitados</li>
                        <li class="mb-2">Resumos avançados</li>
                        <li class="mb-2">Suporte VIP</li>
                        <li class="mb-2">Biblioteca com categorias</li>
                        <li class="mb-2">Exportação em vários formatos</li>
                    </ul>
                    <a href="#" class="btn btn-outline-danger">Escolher Business</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Depoimentos -->
<section class="mb-5 bg-light py-5">
    <div class="container">
        <h2 class="text-center mb-5">O que nossos usuários dizem</h2>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="suma-card h-100">
                    <div class="d-flex mb-3 align-items-center">
                        <div class="rounded-circle overflow-hidden mr-3" style="width: 50px; height: 50px;">
                            <img src="https://via.placeholder.com/50x50" alt="Usuário" class="img-fluid" />
                        </div>
                        <div>
                            <h5 class="mb-0">Mariana Silva</h5>
                            <small class="text-muted">Estudante de Medicina</small>
                        </div>
                    </div>
                    <p class="suma-card-body">
                        "O SumaTube revolucionou meus estudos. Consigo extrair o essencial de aulas longas em minutos, o que me ajudou a otimizar muito meu tempo de estudo."
                    </p>
                    <div class="text-warning">
                        <i class="bi bi-star-fill"></i>
                        <i class="bi bi-star-fill"></i>
                        <i class="bi bi-star-fill"></i>
                        <i class="bi bi-star-fill"></i>
                        <i class="bi bi-star-fill"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="suma-card h-100">
                    <div class="d-flex mb-3 align-items-center">
                        <div class="rounded-circle overflow-hidden mr-3" style="width: 50px; height: 50px;">
                            <img src="https://via.placeholder.com/50x50" alt="Usuário" class="img-fluid" />
                        </div>
                        <div>
                            <h5 class="mb-0">Carlos Mendes</h5>
                            <small class="text-muted">Profissional de Marketing</small>
                        </div>
                    </div>
                    <p class="suma-card-body">
                        "Uso o SumaTube para acompanhar webinars e palestras do meu setor. Os resumos são precisos e me ajudam a extrair insights valiosos sem gastar horas assistindo vídeos."
                    </p>
                    <div class="text-warning">
                        <i class="bi bi-star-fill"></i>
                        <i class="bi bi-star-fill"></i>
                        <i class="bi bi-star-fill"></i>
                        <i class="bi bi-star-fill"></i>
                        <i class="bi bi-star-half"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="suma-card h-100">
                    <div class="d-flex mb-3 align-items-center">
                        <div class="rounded-circle overflow-hidden mr-3" style="width: 50px; height: 50px;">
                            <img src="https://via.placeholder.com/50x50" alt="Usuário" class="img-fluid" />
                        </div>
                        <div>
                            <h5 class="mb-0">Júlia Santos</h5>
                            <small class="text-muted">Professora</small>
                        </div>
                    </div>
                    <p class="suma-card-body">
                        "Recomendo o SumaTube para todos meus alunos. É uma ferramenta incrível para complementar os estudos e revisar conteúdos de forma eficiente."
                    </p>
                    <div class="text-warning">
                        <i class="bi bi-star-fill"></i>
                        <i class="bi bi-star-fill"></i>
                        <i class="bi bi-star-fill"></i>
                        <i class="bi bi-star-fill"></i>
                        <i class="bi bi-star-fill"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section class="mb-5">
    <div class="container">
        <div class="suma-card bg-danger text-white text-center py-5">
            <h2 class="mb-4">Comece a economizar tempo hoje mesmo</h2>
            <p class="lead mb-4">Transforme a maneira como você assiste vídeos e absorve conhecimento</p>
            <a href="@Url.Action("Index", "Login")" class="btn btn-light btn-lg px-4">
                <i class="bi bi-play-circle mr-2"></i> Começar gratuitamente
            </a>
        </div>
    </div>
</section>