Hugging Face's logo

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

App Files Community
Finish-him commited on
Commit
ac6ce90
·
verified ·
1 Parent(s): b3d2605

é um academy para todos os novos contratados e futuros contratados da Msc Consultoria é um um curso sobre progração vibe

Browse files
Files changed (6) hide show
  1. README.md +8 -5
  2. components/footer.js +75 -0
  3. components/navbar.js +89 -0
  4. index.html +129 -19
  5. script.js +17 -0
  6. style.css +27 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Msc Codehive Academy
3
- emoji: 💻
4
- colorFrom: purple
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: MSC CodeHive Academy 🚀
3
+ colorFrom: gray
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,75 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .social-icon:hover {
7
+ transform: translateY(-3px);
8
+ }
9
+ </style>
10
+ <footer class="bg-gray-800 text-gray-300 py-12 mt-24">
11
+ <div class="container mx-auto px-4">
12
+ <div class="grid md:grid-cols-4 gap-8">
13
+ <div class="md:col-span-2">
14
+ <div class="flex items-center mb-4">
15
+ <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center mr-2">
16
+ <i data-feather="cpu" class="text-white w-5 h-5"></i>
17
+ </div>
18
+ <span class="text-xl font-bold text-white">MSC CodeHive</span>
19
+ </div>
20
+ <p class="text-gray-400">Transformando novos talentos em desenvolvedores excepcionais desde 2023.</p>
21
+ </div>
22
+
23
+ <div>
24
+ <h4 class="text-lg font-semibold text-white mb-4">Links Rápidos</h4>
25
+ <ul class="space-y-2">
26
+ <li><a href="#cursos" class="text-gray-400 hover:text-white transition-colors">Cursos</a></li>
27
+ <li><a href="#sobre" class="text-gray-400 hover:text-white transition-colors">Sobre Nós</a></li>
28
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Mentores</a></li>
29
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Depoimentos</a></li>
30
+ </ul>
31
+ </div>
32
+
33
+ <div>
34
+ <h4 class="text-lg font-semibold text-white mb-4">Contato</h4>
35
+ <ul class="space-y-2">
36
+ <li class="flex items-center">
37
+ <i data-feather="mail" class="w-4 h-4 mr-2"></i>
38
+ <span class="text-gray-400">contato@msccodehive.com</span>
39
+ </li>
40
+ <li class="flex items-center">
41
+ <i data-feather="phone" class="w-4 h-4 mr-2"></i>
42
+ <span class="text-gray-400">+55 (11) 98765-4321</span>
43
+ </li>
44
+ </ul>
45
+ <div class="flex space-x-4 mt-6">
46
+ <a href="#" class="social-icon">
47
+ <i data-feather="linkedin" class="w-5 h-5 text-gray-400 hover:text-blue-400"></i>
48
+ </a>
49
+ <a href="#" class="social-icon">
50
+ <i data-feather="github" class="w-5 h-5 text-gray-400 hover:text-white"></i>
51
+ </a>
52
+ <a href="#" class="social-icon">
53
+ <i data-feather="twitter" class="w-5 h-5 text-gray-400 hover:text-blue-400"></i>
54
+ </a>
55
+ <a href="#" class="social-icon">
56
+ <i data-feather="instagram" class="w-5 h-5 text-gray-400 hover:text-pink-500"></i>
57
+ </a>
58
+ </div>
59
+ </div>
60
+ </div>
61
+
62
+ <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
63
+ <p class="text-gray-400 text-sm">© 2023 MSC CodeHive Academy. Todos os direitos reservados.</p>
64
+ <div class="flex space-x-6 mt-4 md:mt-0">
65
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Termos de Uso</a>
66
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Política de Privacidade</a>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </footer>
71
+ `;
72
+ }
73
+ }
74
+
75
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,89 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .nav-link {
7
+ position: relative;
8
+ }
9
+ .nav-link:hover::after {
10
+ width: 100%;
11
+ }
12
+ .nav-link::after {
13
+ content: '';
14
+ position: absolute;
15
+ left: 0;
16
+ bottom: -2px;
17
+ width: 0;
18
+ height: 2px;
19
+ background-color: #3b82f6;
20
+ transition: width 0.3s ease;
21
+ }
22
+ .mobile-menu {
23
+ max-height: 0;
24
+ overflow: hidden;
25
+ transition: max-height 0.3s ease-out;
26
+ }
27
+ .mobile-menu.open {
28
+ max-height: 500px;
29
+ transition: max-height 0.5s ease-in;
30
+ }
31
+ </style>
32
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
33
+ <div class="container mx-auto px-4">
34
+ <div class="flex justify-between items-center py-4">
35
+ <a href="/" class="flex items-center">
36
+ <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center mr-2">
37
+ <i data-feather="cpu" class="text-white w-5 h-5"></i>
38
+ </div>
39
+ <span class="text-xl font-bold text-gray-800">MSC CodeHive</span>
40
+ </a>
41
+
42
+ <div class="hidden md:flex items-center space-x-8">
43
+ <a href="#cursos" class="nav-link text-gray-600 hover:text-gray-900">Cursos</a>
44
+ <a href="#sobre" class="nav-link text-gray-600 hover:text-gray-900">Sobre</a>
45
+ <a href="#" class="nav-link text-gray-600 hover:text-gray-900">Mentores</a>
46
+ <a href="#" class="nav-link text-gray-600 hover:text-gray-900">Contato</a>
47
+ <a href="#" class="bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700">Inscreva-se</a>
48
+ </div>
49
+
50
+ <button id="mobile-menu-button" class="md:hidden text-gray-700">
51
+ <i data-feather="menu" class="w-6 h-6"></i>
52
+ </button>
53
+ </div>
54
+
55
+ <div id="mobile-menu" class="mobile-menu md:hidden">
56
+ <div class="pt-2 pb-4 space-y-2">
57
+ <a href="#cursos" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100">Cursos</a>
58
+ <a href="#sobre" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100">Sobre</a>
59
+ <a href="#" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100">Mentores</a>
60
+ <a href="#" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100">Contato</a>
61
+ <a href="#" class="block mt-2 bg-blue-600 text-white px-4 py-2 rounded-lg font-medium text-center hover:bg-blue-700">Inscreva-se</a>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ </nav>
66
+ `;
67
+
68
+ const menuButton = this.shadowRoot.getElementById('mobile-menu-button');
69
+ const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
70
+
71
+ menuButton.addEventListener('click', () => {
72
+ const isOpen = mobileMenu.classList.contains('open');
73
+
74
+ // Change icon
75
+ const menuIcon = menuButton.querySelector('i');
76
+ if (isOpen) {
77
+ menuIcon.setAttribute('data-feather', 'menu');
78
+ } else {
79
+ menuIcon.setAttribute('data-feather', 'x');
80
+ }
81
+ feather.replace();
82
+
83
+ // Toggle menu
84
+ mobileMenu.classList.toggle('open');
85
+ });
86
+ }
87
+ }
88
+
89
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,129 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-br">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MSC CodeHive Academy</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ </head>
12
+ <body class="bg-gray-50">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="container mx-auto px-4 py-12">
16
+ <!-- Hero Section -->
17
+ <section class="text-center mb-20">
18
+ <h1 class="text-5xl font-bold mb-6 text-gray-800">Bem-vindo ao <span class="text-blue-600">MSC CodeHive</span></h1>
19
+ <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>
20
+ <div class="flex justify-center gap-4">
21
+ <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>
22
+ <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>
23
+ </div>
24
+ </section>
25
+
26
+ <!-- Features Grid -->
27
+ <section id="cursos" class="mb-24">
28
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Nossos Programas de Treinamento</h2>
29
+ <div class="grid md:grid-cols-3 gap-8">
30
+ <!-- Card 1 -->
31
+ <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all">
32
+ <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
33
+ <i data-feather="code" class="w-8 h-8 text-blue-600"></i>
34
+ </div>
35
+ <h3 class="text-xl font-bold mb-4 text-gray-800">Fundamentos</h3>
36
+ <p class="text-gray-600 mb-6">Dominando lógica de programação, algoritmos e estruturas de dados básicas.</p>
37
+ <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>
38
+ </div>
39
+
40
+ <!-- Card 2 -->
41
+ <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all">
42
+ <div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
43
+ <i data-feather="layers" class="w-8 h-8 text-purple-600"></i>
44
+ </div>
45
+ <h3 class="text-xl font-bold mb-4 text-gray-800">Desenvolvimento Web</h3>
46
+ <p class="text-gray-600 mb-6">HTML, CSS, JavaScript e frameworks modernos para desenvolvimento front-end.</p>
47
+ <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>
48
+ </div>
49
+
50
+ <!-- Card 3 -->
51
+ <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all">
52
+ <div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mb-6">
53
+ <i data-feather="database" class="w-8 h-8 text-green-600"></i>
54
+ </div>
55
+ <h3 class="text-xl font-bold mb-4 text-gray-800">Back-end Essentials</h3>
56
+ <p class="text-gray-600 mb-6">APIs, bancos de dados e arquitetura de software para aplicações robustas.</p>
57
+ <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>
58
+ </div>
59
+ </div>
60
+ </section>
61
+
62
+ <!-- About Section -->
63
+ <section id="sobre" class="mb-24">
64
+ <div class="flex flex-col md:flex-row items-center gap-12">
65
+ <div class="md:w-1/2">
66
+ <img src="http://static.photos/technology/640x360/42" alt="Equipe de tecnologia" class="rounded-lg shadow-lg w-full">
67
+ </div>
68
+ <div class="md:w-1/2">
69
+ <h2 class="text-3xl font-bold mb-6 text-gray-800">Sobre a MSC CodeHive Academy</h2>
70
+ <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>
71
+ <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>
72
+ <ul class="space-y-3">
73
+ <li class="flex items-start">
74
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-1"></i>
75
+ <span class="text-gray-600">Metodologia hands-on com projetos reais</span>
76
+ </li>
77
+ <li class="flex items-start">
78
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-1"></i>
79
+ <span class="text-gray-600">Suporte de mentores experientes</span>
80
+ </li>
81
+ <li class="flex items-start">
82
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2 mt-1"></i>
83
+ <span class="text-gray-600">Integração com a cultura MSC</span>
84
+ </li>
85
+ </ul>
86
+ </div>
87
+ </div>
88
+ </section>
89
+
90
+ <!-- Testimonials -->
91
+ <section class="mb-24 bg-blue-50 rounded-2xl p-12">
92
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">O que dizem nossos alunos</h2>
93
+ <div class="grid md:grid-cols-2 gap-8">
94
+ <!-- Testimonial 1 -->
95
+ <div class="bg-white p-8 rounded-xl shadow-lg">
96
+ <div class="flex items-center mb-6">
97
+ <img src="http://static.photos/people/200x200/1" alt="Aluna" class="w-16 h-16 rounded-full mr-4">
98
+ <div>
99
+ <h4 class="font-bold text-gray-800">Ana Paula</h4>
100
+ <p class="text-gray-500">Desenvolvedora Front-end</p>
101
+ </div>
102
+ </div>
103
+ <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>
104
+ </div>
105
+
106
+ <!-- Testimonial 2 -->
107
+ <div class="bg-white p-8 rounded-xl shadow-lg">
108
+ <div class="flex items-center mb-6">
109
+ <img src="http://static.photos/people/200x200/2" alt="Aluno" class="w-16 h-16 rounded-full mr-4">
110
+ <div>
111
+ <h4 class="font-bold text-gray-800">Carlos Eduardo</h4>
112
+ <p class="text-gray-500">Desenvolvedor Back-end</p>
113
+ </div>
114
+ </div>
115
+ <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>
116
+ </div>
117
+ </div>
118
+ </section>
119
+ </main>
120
+
121
+ <custom-footer></custom-footer>
122
+
123
+ <script src="components/navbar.js"></script>
124
+ <script src="components/footer.js"></script>
125
+ <script src="script.js"></script>
126
+ <script>feather.replace();</script>
127
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
128
+ </body>
129
+ </html>
script.js ADDED
@@ -0,0 +1,17 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Main scripts for the application
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ // Smooth scrolling for anchor links
4
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
5
+ anchor.addEventListener('click', function(e) {
6
+ e.preventDefault();
7
+ const targetId = this.getAttribute('href');
8
+ if (targetId !== '#') {
9
+ document.querySelector(targetId).scrollIntoView({
10
+ behavior: 'smooth'
11
+ });
12
+ }
13
+ });
14
+ });
15
+
16
+ // Mobile toggle functionality will be handled within the navbar component
17
+ });
style.css CHANGED
@@ -1,28 +1,36 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
1
+ /* Custom styles that extend Tailwind */
2
+ @keyframes float {
3
+ 0%, 100% {
4
+ transform: translateY(0);
5
+ }
6
+ 50% {
7
+ transform: translateY(-10px);
8
+ }
9
  }
10
 
11
+ .float-animation {
12
+ animation: float 3s ease-in-out infinite;
 
13
  }
14
 
15
+ /* Custom scrollbar for modern browsers */
16
+ ::-webkit-scrollbar {
17
+ width: 8px;
 
 
18
  }
19
 
20
+ ::-webkit-scrollbar-track {
21
+ background: #f1f1f1;
 
 
 
 
22
  }
23
 
24
+ ::-webkit-scrollbar-thumb {
25
+ background: #3b82f6;
26
+ border-radius: 4px;
27
  }
28
+
29
+ ::-webkit-scrollbar-thumb:hover {
30
+ background: #2563eb;
31
+ }
32
+
33
+ /* Smooth transitions for all elements */
34
+ * {
35
+ transition: all 0.3s ease;
36
+ }