Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Domine HTML, CSS e JavaScript em 30 Dias | Curso Completo</title> | |
| <meta name="description" content="Aprenda desenvolvimento web do zero ao avançado com 30 módulos práticos, projetos reais e suporte vitalício. Transforme sua carreira em 30 dias!"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .hero-video { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| z-index: -1; | |
| opacity: 0.15; | |
| } | |
| .course-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.02); | |
| } | |
| .project-item { | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .project-item:hover { | |
| transform: scale(1.03); | |
| } | |
| .lightbox { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.9); | |
| z-index: 1000; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .lightbox-content { | |
| max-width: 90%; | |
| max-height: 90%; | |
| } | |
| .lightbox-close { | |
| position: absolute; | |
| top: 20px; | |
| right: 30px; | |
| color: white; | |
| font-size: 40px; | |
| cursor: pointer; | |
| } | |
| .countdown-item { | |
| min-width: 80px; | |
| } | |
| @media (max-width: 768px) { | |
| .countdown-item { | |
| min-width: 60px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Header/Navigation --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <nav class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-code text-3xl text-blue-600 mr-2"></i> | |
| <span class="text-xl font-bold text-gray-800">DevMaster</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#course" class="text-gray-700 hover:text-blue-600">O Curso</a> | |
| <a href="#projects" class="text-gray-700 hover:text-blue-600">Projetos</a> | |
| <a href="#testimonials" class="text-gray-700 hover:text-blue-600">Depoimentos</a> | |
| <a href="#instructor" class="text-gray-700 hover:text-blue-600">Instrutor</a> | |
| </div> | |
| <a href="#pricing" class="hidden md:block bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300"> | |
| Garantir Vaga | |
| </a> | |
| <button class="md:hidden text-gray-700 focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </nav> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative bg-gray-900 text-white py-20 md:py-32 overflow-hidden"> | |
| <video autoplay muted loop class="hero-video"> | |
| <source src="https://assets.mixkit.co/videos/preview/mixkit-programmer-working-on-computer-screen-while-sitting-on-11845-large.mp4" type="video/mp4"> | |
| </video> | |
| <div class="container mx-auto px-6 relative z-10"> | |
| <div class="max-w-3xl"> | |
| <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-4"> | |
| Domine <span class="text-blue-400">HTML, CSS e JavaScript</span> em 30 Dias! | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-300 mb-8"> | |
| Aprenda do zero ao avançado com projetos reais, aulas em vídeo e suporte exclusivo. Construa sites profissionais e transforme sua carreira. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#pricing" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-bold text-lg transition duration-300 text-center"> | |
| Garanta seu Desconto Agora <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| <a href="#course" class="bg-transparent hover:bg-gray-800 text-white px-8 py-4 border-2 border-white rounded-lg font-bold text-lg transition duration-300 text-center"> | |
| Saiba Mais | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Course Details Section --> | |
| <section id="course" class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">O que você vai aprender?</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| 30 módulos completos divididos em três níveis, com projetos práticos para você construir seu portfólio | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> | |
| <!-- Beginner Level --> | |
| <div class="bg-gray-50 rounded-xl p-6 course-card transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 text-blue-800 p-3 rounded-full mr-4"> | |
| <i class="fas fa-baby text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">Básico</h3> | |
| </div> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Fundamentos de HTML e semântica</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Seletores CSS e estilização básica</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Flexbox e Grid Layout</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Responsividade e Media Queries</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Introdução ao JavaScript</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Projeto: Site Pessoal</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Intermediate Level --> | |
| <div class="bg-gray-50 rounded-xl p-6 course-card transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 text-purple-800 p-3 rounded-full mr-4"> | |
| <i class="fas fa-user-graduate text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">Intermediário</h3> | |
| </div> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>JavaScript funcional e arrays</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Manipulação do DOM</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Eventos e formulários</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Animações CSS avançadas</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Consumo de APIs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Projeto: App de Tarefas</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Advanced Level --> | |
| <div class="bg-gray-50 rounded-xl p-6 course-card transition duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 text-red-800 p-3 rounded-full mr-4"> | |
| <i class="fas fa-rocket text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">Avançado</h3> | |
| </div> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>ES6+ (Arrow functions, destructuring)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Modularização de código</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Web Components</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Otimização de performance</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Deploy e boas práticas</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Projeto: E-commerce Completo</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 rounded-xl p-8 md:p-12"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Diferenciais Exclusivos</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-800 p-2 rounded-full mr-4"> | |
| <i class="fas fa-project-diagram"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Projetos práticos com código-fonte</h4> | |
| <p class="text-gray-600">Aprenda construindo projetos reais que você pode adicionar ao seu portfólio</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-800 p-2 rounded-full mr-4"> | |
| <i class="fas fa-certificate"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Certificado de conclusão</h4> | |
| <p class="text-gray-600">Comprove suas habilidades para empregadores e clientes</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-800 p-2 rounded-full mr-4"> | |
| <i class="fas fa-life-ring"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Suporte vitalício</h4> | |
| <p class="text-gray-600">Tire dúvidas diretamente com o instrutor e nossa comunidade</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h4 class="text-xl font-bold text-gray-800 mb-4">Acesso Imediato a:</h4> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-play-circle text-blue-600 mr-3 text-xl"></i> | |
| <span>120+ horas de vídeo aulas</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-file-pdf text-blue-600 mr-3 text-xl"></i> | |
| <span>50+ materiais complementares em PDF</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-code text-blue-600 mr-3 text-xl"></i> | |
| <span>15 projetos completos com código-fonte</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-users text-blue-600 mr-3 text-xl"></i> | |
| <span>Comunidade exclusiva no Discord</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-sync-alt text-blue-600 mr-3 text-xl"></i> | |
| <span>Atualizações gratuitas para sempre</span> | |
| </li> | |
| </ul> | |
| <a href="#pricing" class="mt-6 inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 w-full text-center"> | |
| Quero Me Inscrever Agora | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Gallery --> | |
| <section id="projects" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Veja o que você pode construir!</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Projetos reais que você vai desenvolver durante o curso para seu portfólio | |
| </p> | |
| </div> | |
| <div class="flex justify-center mb-8"> | |
| <div class="inline-flex rounded-md shadow-sm"> | |
| <button type="button" class="px-4 py-2 text-sm font-medium rounded-l-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 filter-btn active" data-filter="all"> | |
| Todos | |
| </button> | |
| <button type="button" class="px-4 py-2 text-sm font-medium border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 filter-btn" data-filter="html"> | |
| HTML/CSS | |
| </button> | |
| <button type="button" class="px-4 py-2 text-sm font-medium border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 filter-btn" data-filter="js"> | |
| JavaScript | |
| </button> | |
| <button type="button" class="px-4 py-2 text-sm font-medium rounded-r-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 filter-btn" data-filter="projects"> | |
| Projetos | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Project 1 --> | |
| <div class="project-item rounded-lg overflow-hidden shadow-md bg-white" data-category="html"> | |
| <div class="relative overflow-hidden h-48"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Site Pessoal" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-blue-600 bg-opacity-75 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300"> | |
| <button class="text-white text-lg font-medium view-project" data-title="Site Pessoal" data-description="Projeto desenvolvido nos módulos 3-5 com HTML semântico e CSS moderno." data-image="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"> | |
| Ver Detalhes <i class="fas fa-expand ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg text-gray-800 mb-1">Site Pessoal</h3> | |
| <p class="text-gray-600 text-sm">HTML/CSS • Módulos 3-5</p> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="project-item rounded-lg overflow-hidden shadow-md bg-white" data-category="js"> | |
| <div class="relative overflow-hidden h-48"> | |
| <img src="https://images.unsplash.com/photo-1507721999472-8ed4421c4af2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="App de Tarefas" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-blue-600 bg-opacity-75 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300"> | |
| <button class="text-white text-lg font-medium view-project" data-title="App de Tarefas" data-description="Aplicativo completo com JavaScript puro para gerenciamento de tarefas, desenvolvido nos módulos 12-15." data-image="https://images.unsplash.com/photo-1507721999472-8ed4421c4af2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"> | |
| Ver Detalhes <i class="fas fa-expand ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg text-gray-800 mb-1">App de Tarefas</h3> | |
| <p class="text-gray-600 text-sm">JavaScript • Módulos 12-15</p> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="project-item rounded-lg overflow-hidden shadow-md bg-white" data-category="projects"> | |
| <div class="relative overflow-hidden h-48"> | |
| <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Landing Page" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-blue-600 bg-opacity-75 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300"> | |
| <button class="text-white text-lg font-medium view-project" data-title="Landing Page" data-description="Landing page profissional com formulário funcional e design responsivo, desenvolvido nos módulos 8-10." data-image="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"> | |
| Ver Detalhes <i class="fas fa-expand ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg text-gray-800 mb-1">Landing Page</h3> | |
| <p class="text-gray-600 text-sm">Projeto Completo • Módulos 8-10</p> | |
| </div> | |
| </div> | |
| <!-- Project 4 --> | |
| <div class="project-item rounded-lg overflow-hidden shadow-md bg-white" data-category="html"> | |
| <div class="relative overflow-hidden h-48"> | |
| <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Dashboard" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-blue-600 bg-opacity-75 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300"> | |
| <button class="text-white text-lg font-medium view-project" data-title="Dashboard" data-description="Interface de dashboard com gráficos e componentes reutilizáveis, desenvolvido nos módulos 20-22." data-image="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"> | |
| Ver Detalhes <i class="fas fa-expand ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg text-gray-800 mb-1">Dashboard</h3> | |
| <p class="text-gray-600 text-sm">HTML/CSS • Módulos 20-22</p> | |
| </div> | |
| </div> | |
| <!-- Project 5 --> | |
| <div class="project-item rounded-lg overflow-hidden shadow-md bg-white" data-category="js"> | |
| <div class="relative overflow-hidden h-48"> | |
| <img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="API de Clima" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-blue-600 bg-opacity-75 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300"> | |
| <button class="text-white text-lg font-medium view-project" data-title="API de Clima" data-description="Aplicação que consome API de previsão do tempo, desenvolvido nos módulos 16-18." data-image="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"> | |
| Ver Detalhes <i class="fas fa-expand ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg text-gray-800 mb-1">API de Clima</h3> | |
| <p class="text-gray-600 text-sm">JavaScript • Módulos 16-18</p> | |
| </div> | |
| </div> | |
| <!-- Project 6 --> | |
| <div class="project-item rounded-lg overflow-hidden shadow-md bg-white" data-category="projects"> | |
| <div class="relative overflow-hidden h-48"> | |
| <img src="https://images.unsplash.com/photo-1556742044-3c52d6e88c62?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="E-commerce" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-blue-600 bg-opacity-75 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300"> | |
| <button class="text-white text-lg font-medium view-project" data-title="E-commerce" data-description="Loja virtual completa com carrinho de compras, desenvolvido nos módulos 25-30 como projeto final." data-image="https://images.unsplash.com/photo-1556742044-3c52d6e88c62?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"> | |
| Ver Detalhes <i class="fas fa-expand ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg text-gray-800 mb-1">E-commerce</h3> | |
| <p class="text-gray-600 text-sm">Projeto Final • Módulos 25-30</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#pricing" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-medium text-lg transition duration-300"> | |
| Quero Construir Meus Projetos <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Countdown Timer Section --> | |
| <section class="py-16 bg-blue-600 text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Oferta Especial Termina em...</h2> | |
| <p class="text-xl mb-10 max-w-2xl mx-auto"> | |
| Aproveite 50% de desconto por tempo limitado! Aulas + projetos + suporte. | |
| </p> | |
| <div class="flex justify-center space-x-4 md:space-x-8 mb-10"> | |
| <div class="countdown-item bg-blue-800 rounded-lg p-4 md:p-6"> | |
| <div class="text-3xl md:text-5xl font-bold" id="countdown-days">00</div> | |
| <div class="text-sm md:text-base">Dias</div> | |
| </div> | |
| <div class="countdown-item bg-blue-800 rounded-lg p-4 md:p-6"> | |
| <div class="text-3xl md:text-5xl font-bold" id="countdown-hours">00</div> | |
| <div class="text-sm md:text-base">Horas</div> | |
| </div> | |
| <div class="countdown-item bg-blue-800 rounded-lg p-4 md:p-6"> | |
| <div class="text-3xl md:text-5xl font-bold" id="countdown-minutes">00</div> | |
| <div class="text-sm md:text-base">Minutos</div> | |
| </div> | |
| <div class="countdown-item bg-blue-800 rounded-lg p-4 md:p-6"> | |
| <div class="text-3xl md:text-5xl font-bold" id="countdown-seconds">00</div> | |
| <div class="text-sm md:text-base">Segundos</div> | |
| </div> | |
| </div> | |
| <a href="#pricing" class="inline-block bg-white hover:bg-gray-100 text-blue-600 px-10 py-4 rounded-lg font-bold text-xl transition duration-300 shadow-lg"> | |
| Comprar Agora com 50% OFF | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">O que nossos alunos dizem...</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Veja como o curso transformou a carreira de outros desenvolvedores | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card bg-gray-50 rounded-xl p-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex -space-x-2"> | |
| <img class="w-12 h-12 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Ana Silva"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-800">Ana Silva</h4> | |
| <p class="text-gray-600 text-sm">Desenvolvedora Front-end</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-700"> | |
| "Graças a este curso, consegui meu primeiro emprego como front-end! As explicações são claras e os projetos práticos me deram a confiança que precisava." | |
| </p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card bg-gray-50 rounded-xl p-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex -space-x-2"> | |
| <img class="w-12 h-12 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Carlos Oliveira"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-800">Carlos Oliveira</h4> | |
| <p class="text-gray-600 text-sm">Freelancer</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-700"> | |
| "Depois de tentar vários cursos, finalmente encontrei um que explica JavaScript de verdade. Tripliquei meus ganhos como freelancer em 3 meses!" | |
| </p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card bg-gray-50 rounded-xl p-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex -space-x-2"> | |
| <img class="w-12 h-12 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Ricardo Santos"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-800">Ricardo Santos</h4> | |
| <p class="text-gray-600 text-sm">Estudante de TI</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-700"> | |
| "O suporte do professor e da comunidade é incrível. Sempre que tenho dúvidas, recebo ajuda rápida. Os projetos do curso agora fazem parte do meu portfólio." | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <div class="inline-flex items-center space-x-2 bg-blue-50 px-6 py-3 rounded-full"> | |
| <i class="fas fa-medal text-blue-600 text-xl"></i> | |
| <span class="font-medium text-gray-800">+2.500 alunos formados com sucesso</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefits Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Tudo o que você precisa para se tornar um Dev Full-Stack</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Recursos exclusivos para acelerar seu aprendizado | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Benefit 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm text-center"> | |
| <div class="bg-blue-100 text-blue-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl"> | |
| <i class="fas fa-book-open"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">30 Módulos Atualizados</h3> | |
| <p class="text-gray-600"> | |
| Conteúdo sempre atualizado com as últimas versões de HTML5, CSS3 e ES6+. | |
| </p> | |
| </div> | |
| <!-- Benefit 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm text-center"> | |
| <div class="bg-purple-100 text-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl"> | |
| <i class="fas fa-video"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Aulas em Vídeo HD</h3> | |
| <p class="text-gray-600"> | |
| Mais de 120 horas de vídeo aulas em alta qualidade + PDFs complementares. | |
| </p> | |
| </div> | |
| <!-- Benefit 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm text-center"> | |
| <div class="bg-green-100 text-green-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl"> | |
| <i class="fas fa-sync-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Acesso Vitalício</h3> | |
| <p class="text-gray-600"> | |
| Atualizações gratuitas para sempre. Aprenda no seu ritmo, sem pressa. | |
| </p> | |
| </div> | |
| <!-- Benefit 4 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm text-center"> | |
| <div class="bg-red-100 text-red-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Comunidade Exclusiva</h3> | |
| <p class="text-gray-600"> | |
| Grupo no Discord com mais de 3.000 desenvolvedores para networking e dúvidas. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Instructor Profile --> | |
| <section id="instructor" class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/3 mb-10 md:mb-0 flex justify-center"> | |
| <div class="relative"> | |
| <img src="https://randomuser.me/api/portraits/men/86.jpg" alt="João Silva" class="w-64 h-64 rounded-full object-cover border-4 border-blue-100 shadow-lg"> | |
| <div class="absolute -bottom-3 -right-3 bg-blue-600 text-white p-3 rounded-full"> | |
| <i class="fas fa-laptop-code text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Conheça seu instrutor</h2> | |
| <p class="text-xl text-gray-600 mb-6"> | |
| Ministrado por <span class="font-bold text-blue-600">João Silva</span>, desenvolvedor com 10+ anos de experiência e criador de 100+ projetos para empresas como: | |
| </p> | |
| <div class="flex flex-wrap gap-4 mb-8"> | |
| <span class="bg-gray-100 px-4 py-2 rounded-full text-gray-800 font-medium">Google</span> | |
| <span class="bg-gray-100 px-4 py-2 rounded-full text-gray-800 font-medium">Amazon</span> | |
| <span class="bg-gray-100 px-4 py-2 rounded-full text-gray-800 font-medium">Microsoft</span> | |
| <span class="bg-gray-100 px-4 py-2 rounded-full text-gray-800 font-medium">Freelancer</span> | |
| </div> | |
| <p class="text-gray-700 mb-8"> | |
| "Minha missão é simplificar o aprendizado de programação para que qualquer pessoa, independente de sua formação, possa construir carreiras incríveis na tecnologia. Já ajudei mais de 2.500 alunos a dar seus primeiros passos no desenvolvimento web." | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 text-2xl"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-800 hover:text-gray-600 text-2xl"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="text-red-500 hover:text-red-700 text-2xl"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="text-blue-400 hover:text-blue-600 text-2xl"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-16 bg-gray-900 text-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Escolha seu plano ideal</h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Invista no seu futuro com um dos planos abaixo | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Basic Plan --> | |
| <div class="bg-gray-800 rounded-xl p-8"> | |
| <h3 class="text-2xl font-bold mb-4">Básico</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">R$ 497</span> | |
| <span class="line-through text-gray-400 ml-2">R$ 997</span> | |
| <span class="block text-green-400 mt-1">50% de desconto</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Acesso a todos os 30 módulos</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>120+ horas de vídeo aulas</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>15 projetos práticos</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Certificado de conclusão</span> | |
| </li> | |
| <li class="flex items-start text-gray-400"> | |
| <i class="fas fa-times-circle mt-1 mr-2"></i> | |
| <span>Suporte individual</span> | |
| </li> | |
| <li class="flex items-start text-gray-400"> | |
| <i class="fas fa-times-circle mt-1 mr-2"></i> | |
| <span>Mentoria semanal</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="block text-center bg-gray-700 hover:bg-gray-600 text-white px-6 py-3 rounded-lg font-medium transition duration-300"> | |
| Escolher Plano | |
| </a> | |
| </div> | |
| <!-- Premium Plan (Featured) --> | |
| <div class="bg-blue-600 rounded-xl p-8 transform scale-105 shadow-xl relative"> | |
| <div class="absolute top-0 right-0 bg-yellow-400 text-gray-900 px-4 py-1 rounded-bl-lg rounded-tr-xl font-bold text-sm"> | |
| MAIS POPULAR | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Premium</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">R$ 797</span> | |
| <span class="line-through text-blue-200 ml-2">R$ 1,597</span> | |
| <span class="block text-yellow-300 mt-1">50% de desconto</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-yellow-300 mt-1 mr-2"></i> | |
| <span>Todos os benefícios do Básico</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-yellow-300 mt-1 mr-2"></i> | |
| <span>Suporte individual por email</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-yellow-300 mt-1 mr-2"></i> | |
| <span>2 mentorias individuais de 1h</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-yellow-300 mt-1 mr-2"></i> | |
| <span>Revisão de código personalizada</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-yellow-300 mt-1 mr-2"></i> | |
| <span>Material complementar exclusivo</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-yellow-300 mt-1 mr-2"></i> | |
| <span>Certificado Premium</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="block text-center bg-white hover:bg-gray-100 text-blue-600 px-6 py-3 rounded-lg font-bold transition duration-300"> | |
| Quero o Premium <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- VIP Plan --> | |
| <div class="bg-gray-800 rounded-xl p-8"> | |
| <h3 class="text-2xl font-bold mb-4">VIP</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">R$ 1,497</span> | |
| <span class="line-through text-gray-400 ml-2">R$ 2,997</span> | |
| <span class="block text-green-400 mt-1">50% de desconto</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Todos os benefícios do Premium</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Suporte prioritário 24/7</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>8 mentorias individuais de 1h</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Projeto personalizado com ajuda</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Preparação para entrevistas</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Indicação para vagas</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="block text-center bg-gray-700 hover:bg-gray-600 text-white px-6 py-3 rounded-lg font-medium transition duration-300"> | |
| Escolher Plano | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-16 bg-blue-800 rounded-xl p-8 max-w-4xl mx-auto text-center"> | |
| <h3 class="text-2xl font-bold mb-4">Garantia de 7 Dias</h3> | |
| <p class="text-lg text-blue-100 mb-6"> | |
| Se em 7 dias você achar que o curso não é para você, devolvemos 100% do seu dinheiro sem questionamentos. | |
| </p> | |
| <div class="flex items-center justify-center"> | |
| <i class="fas fa-shield-alt text-3xl text-yellow-300 mr-4"></i> | |
| <span class="text-xl font-medium">Sem risco nenhum para você</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Final CTA --> | |
| <section class="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6">Pronto para transformar sua carreira?</h2> | |
| <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto"> | |
| Comece hoje mesmo seu caminho para se tornar um desenvolvedor web completo. | |
| </p> | |
| <a href="#pricing" class="inline-block bg-white hover:bg-gray-100 text-blue-600 px-12 py-4 rounded-lg font-bold text-xl transition duration-300 shadow-lg transform hover:scale-105"> | |
| Adquirir Curso Completo <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| <p class="mt-6 text-blue-100"> | |
| <i class="fas fa-lock mr-2"></i> Pagamento 100% seguro | |
| </p> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Perguntas Frequentes</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Tire suas dúvidas sobre o curso e como ele pode te ajudar | |
| </p> | |
| </div> | |
| <div class="max-w-3xl mx-auto"> | |
| <!-- FAQ Item 1 --> | |
| <div class="mb-6 border-b border-gray-200 pb-6"> | |
| <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg text-gray-800 focus:outline-none"> | |
| <span>Quanto tempo tenho acesso ao curso?</span> | |
| <i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer mt-4 text-gray-600 hidden"> | |
| <p>Você tem acesso vitalício a todo o conteúdo do curso, incluindo todas as atualizações futuras que fizermos. Pode assistir quando quiser, no seu próprio ritmo.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 2 --> | |
| <div class="mb-6 border-b border-gray-200 pb-6"> | |
| <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg text-gray-800 focus:outline-none"> | |
| <span>Preciso ter conhecimento prévio?</span> | |
| <i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer mt-4 text-gray-600 hidden"> | |
| <p>Não! O curso foi projetado para iniciantes absolutos. Começamos do zero, explicando cada conceito de forma clara e prática. Se você sabe ligar um computador, já pode começar.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 3 --> | |
| <div class="mb-6 border-b border-gray-200 pb-6"> | |
| <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg text-gray-800 focus:outline-none"> | |
| <span>Como é o suporte para dúvidas?</span> | |
| <i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer mt-4 text-gray-600 hidden"> | |
| <p>Temos uma comunidade ativa no Discord onde você pode tirar dúvidas com outros alunos e com nossa equipe. Para os planos Premium e VIP, oferecemos suporte individual direto com o instrutor.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 4 --> | |
| <div class="mb-6 border-b border-gray-200 pb-6"> | |
| <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg text-gray-800 focus:outline-none"> | |
| <span>O curso serve para quem quer trabalhar com freelancer?</span> | |
| <i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer mt-4 text-gray-600 hidden"> | |
| <p>Sim! Muitos dos nossos alunos começaram a trabalhar como freelancers após concluir o curso. Incluímos módulos específicos sobre como conseguir clientes, precificar projetos e gerenciar seu trabalho como freelancer.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 5 --> | |
| <div class="mb-6"> | |
| <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg text-gray-800 focus:outline-none"> | |
| <span>Como funciona a garantia de 7 dias?</span> | |
| <i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer mt-4 text-gray-600 hidden"> | |
| <p>Se dentro de 7 dias após a compra você achar que o curso não é para você, basta nos enviar um email e devolveremos 100% do seu dinheiro, sem questionamentos. É nosso compromisso com sua satisfação.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12"> | |
| <div> | |
| <div class="flex items-center mb-6"> | |
| <i class="fas fa-code text-3xl text-blue-500 mr-2"></i> | |
| <span class="text-xl font-bold">DevMaster</span> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Cursos de desenvolvimento web para transformar sua carreira. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">Links Úteis</h3> | |
| <ul class="space-y-3"> | |
| <li> | |
| <a href="#" class="text-gray-400 hover:text-white">Início</a> | |
| </li> | |
| <li> | |
| <a href="#course" class="text-gray-400 hover:text-white">O Curso</a> | |
| </li> | |
| <li> | |
| <a href="#projects" class="text-gray-400 hover:text-white">Projetos</a> | |
| </li> | |
| <li> | |
| <a href="#instructor" class="text-gray-400 hover:text-white">Instrutor</a> | |
| </li> | |
| <li> | |
| <a href="#pricing" class="text-gray-400 hover:text-white">Preços</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">Legal</h3> | |
| <ul class="space-y-3"> | |
| <li> | |
| <a href="#" class="text-gray-400 hover:text-white">Termos de Uso</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-gray-400 hover:text-white">Política de Privacidade</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-gray-400 hover:text-white">Política de Reembolso</a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-gray-400 hover:text-white">FAQ</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">Contato</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-envelope text-blue-500 mt-1 mr-3"></i> | |
| <span class="text-gray-400">suporte@devmaster.com</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-phone-alt text-blue-500 mt-1 mr-3"></i> | |
| <span class="text-gray-400">(11) 98765-4321</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-blue-500 mt-1 mr-3"></i> | |
| <span class="text-gray-400">São Paulo, Brasil</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8 text-center text-gray-400"> | |
| <p>© 2023 DevMaster. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Lightbox --> | |
| <div class="lightbox" id="lightbox"> | |
| <span class="lightbox-close">×</span> | |
| <div class="lightbox-content"> | |
| <img id="lightbox-image" src="" alt="" class="max-w-full max-h-full"> | |
| <div class="bg-white p-4 mt-4 rounded-lg"> | |
| <h3 id="lightbox-title" class="text-xl font-bold text-gray-800 mb-2"></h3> | |
| <p id="lightbox-description" class="text-gray-600"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Countdown Timer | |
| function updateCountdown() { | |
| const now = new Date(); | |
| const endDate = new Date(); | |
| endDate.setDate(now.getDate() + 3); // 3 days from now | |
| const diff = endDate - now; | |
| const days = Math.floor(diff / (1000 * 60 * 60 * 24)); | |
| const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((diff % (1000 * 60)) / 1000); | |
| document.getElementById('countdown-days').textContent = days.toString().padStart(2, '0'); | |
| document.getElementById('countdown-hours').textContent = hours.toString().padStart(2, '0'); | |
| document.getElementById('countdown-minutes').textContent = minutes.toString().padStart(2, '0'); | |
| document.getElementById('countdown-seconds').textContent = seconds.toString().padStart(2, '0'); | |
| } | |
| setInterval(updateCountdown, 1000); | |
| updateCountdown(); | |
| // Project Filter | |
| const filterButtons = document.querySelectorAll('.filter-btn'); | |
| const projectItems = document.querySelectorAll('.project-item'); | |
| filterButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all buttons | |
| filterButtons.forEach(btn => btn.classList.remove('active', 'bg-blue-600', 'text-white')); | |
| // Add active class to clicked button | |
| button.classList.add('active', 'bg-blue-600', 'text-white'); | |
| const filter = button.getAttribute('data-filter'); | |
| projectItems.forEach(item => { | |
| if (filter === 'all' || item.getAttribute('data-category') === filter) { | |
| item.style.display = 'block'; | |
| } else { | |
| item.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| }); | |
| // Lightbox | |
| const viewButtons = document.querySelectorAll('.view-project'); | |
| const lightbox = document.getElementById('lightbox'); | |
| const lightboxImage = document.getElementById('lightbox-image'); | |
| const lightboxTitle = document.getElementById('lightbox-title'); | |
| const lightboxDescription = document.getElementById('lightbox-description'); | |
| const lightboxClose = document.querySelector('.lightbox-close'); | |
| viewButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| lightboxImage.src = button.getAttribute('data-image'); | |
| lightboxTitle.textContent = button.getAttribute('data-title'); | |
| lightboxDescription.textContent = button.getAttribute('data-description'); | |
| lightbox.style.display = 'flex'; | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| }); | |
| lightboxClose.addEventListener('click', () => { | |
| lightbox.style.display = 'none'; | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| window.addEventListener('click', (e) => { | |
| if (e.target === lightbox) { | |
| lightbox.style.display = 'none'; | |
| document.body.style.overflow = 'auto'; | |
| } | |
| }); | |
| // FAQ Accordion | |
| const faqQuestions = document.querySelectorAll('.faq-question'); | |
| faqQuestions.forEach(question => { | |
| question.addEventListener('click', () => { | |
| const answer = question.nextElementSibling; | |
| const icon = question.querySelector('i'); | |
| // Toggle answer | |
| answer.classList.toggle('hidden'); | |
| // Toggle icon | |
| icon.classList.toggle('fa-chevron-down'); | |
| icon.classList.toggle('fa-chevron-up'); | |
| // Close other answers | |
| faqQuestions.forEach(q => { | |
| if (q !== question) { | |
| q.nextElementSibling.classList.add('hidden'); | |
| q.querySelector('i').classList.remove('fa-chevron-up'); | |
| q.querySelector('i').classList.add('fa-chevron-down'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=joaoricardo2050/html-curso" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |