Spaces:
Running
Running
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MSC CodeHive Academy</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-12"> | |
| <!-- Hero Section --> | |
| <section class="text-center mb-20 relative"> | |
| <img src="/static/archimedes.svg" alt="Archimedes" class="absolute -right-20 top-1/2 transform -translate-y-1/2 w-64 h-64 opacity-50 pointer-events-none"> | |
| <h1 class="text-5xl font-bold mb-6 text-gray-800">Bem-vindo ao <span class="text-blue-600">MSC CodeHive</span></h1> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">Sua jornada na programação começa aqui. Vibe 1 - transformando novos talentos em desenvolvedores incríveis!</p> | |
| <div class="flex justify-center gap-4"> | |
| <a href="#cursos" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-medium transition-all">Começar Agora</a> | |
| <a href="#sobre" class="border-2 border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition-all">Saiba Mais</a> | |
| </div> | |
| </section> | |
| <!-- Features Grid --> | |
| <section id="cursos" class="mb-24"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Nossos Programas de Treinamento</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Card 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="code" class="w-8 h-8 text-blue-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4 text-gray-800">Fundamentos</h3> | |
| <p class="text-gray-600 mb-6">Dominando lógica de programação, algoritmos e estruturas de dados básicas.</p> | |
| <a href="#" class="text-blue-600 font-medium flex items-center">Saiba mais <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i></a> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="layers" class="w-8 h-8 text-purple-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4 text-gray-800">Desenvolvimento Web</h3> | |
| <p class="text-gray-600 mb-6">HTML, CSS, JavaScript e frameworks modernos para desenvolvimento front-end.</p> | |
| <a href="#" class="text-blue-600 font-medium flex items-center">Saiba mais <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i></a> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all"> | |
| <div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="database" class="w-8 h-8 text-green-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4 text-gray-800">Back-end Essentials</h3> | |
| <p class="text-gray-600 mb-6">APIs, bancos de dados e arquitetura de software para aplicações robustas.</p> | |
| <a href="#" class="text-blue-600 font-medium flex items-center">Saiba mais <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i></a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="sobre" class="mb-24"> | |
| <div class="flex flex-col md:flex-row items-center gap-12"> | |
| <div class="md:w-1/2"> | |
| <img src="http://static.photos/technology/640x360/42" alt="Equipe de tecnologia" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold mb-6 text-gray-800">Sobre a MSC CodeHive Academy</h2> | |
| <p class="text-gray-600 mb-4">Nosso programa de treinamento foi cuidadosamente desenvolvido para integrar novos talentos à cultura e tecnologia da MSC Consultoria.</p> | |
| <p class="text-gray-600 mb-6">Com módulos práticos e mentoria especializada, garantimos que você esteja pronto para contribuir desde o primeiro dia.</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-1"></i> | |
| <span class="text-gray-600">Metodologia hands-on com projetos reais</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-1"></i> | |
| <span class="text-gray-600">Suporte de mentores experientes</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-1"></i> | |
| <span class="text-gray-600">Integração com a cultura MSC</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="mb-24 bg-blue-50 rounded-2xl p-12"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">O que dizem nossos alunos</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/people/200x200/1" alt="Aluna" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Ana Paula</h4> | |
| <p class="text-gray-500">Desenvolvedora Front-end</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"A CodeHive me proporcionou a base sólida que eu precisava para começar minha carreira. Os mentorias práticos são excepcionais!"</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/people/200x200/2" alt="Aluno" class="w-16 h-16 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Carlos Eduardo</h4> | |
| <p class="text-gray-500">Desenvolvedor Back-end</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"Participar do programa foi a melhor decisão que tomei. Em 3 meses já estava contribuindo com projetos reais na empresa."</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |