Hugging Face's logo

Spaces:
Finish-him
/
msc-codehive-academy
Running

App Files Community
msc-codehive-academy
File size: 8,053 Bytes 
ac6ce90
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b9b4565
 
 
ac6ce90
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
<!DOCTYPE html>
<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>