Skip to content

Commit 83eb076

Browse files
TiagoCavalcanteTiagoCavalcante
committed
Create the first version
1 parent ae00154 commit 83eb076

10 files changed

Lines changed: 881 additions & 484 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
.vscode
12
dist/
23
node_modules/
34
package-lock.json
5+
src/assets/styles.css

‎src/404.html‎

Lines changed: 107 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,116 @@
1717

1818
<link rel="stylesheet" href="./assets/styles.css" />
1919
<link rel="icon" href="./assets/img/favicon.ico" />
20+
21+
<script src="https://unpkg.com/lucide@latest"></script>
2022
</head>
2123

22-
<body
23-
class="font-sans text-gray-800 dark:text-gray-100 bg-white dark:bg-gray-950 flex flex-col items-center justify-center min-h-screen text-center p-6">
24-
<h1 class="text-4xl md:text-6xl font-bold mb-4">404</h1>
25-
<p class="text-xl md:text-2xl mb-6">Ops! Página não encontrada.</p>
26-
<p class="mb-8">Parece que você seguiu um caminho errado. Que tal voltar para a <a href="/"
27-
class="text-blue-600 dark:text-blue-400 underline">página inicial</a>?</p>
28-
<img src="https://http.cat/404" alt="Erro 404" class="max-w-xs" />
24+
<body class="bg-gray-50">
25+
<header class="bg-dark-green text-white sticky top-0 z-50 shadow-lg">
26+
<nav class="container mx-auto px-4 sm:px-6 py-4">
27+
<div class="flex justify-between items-center">
28+
<div class="flex items-center space-x-2 sm:space-x-3">
29+
<a href="/">
30+
<img class="h-12" src="./assets/img/logo.png" alt="Logo HackAmazônia">
31+
</a>
32+
</div>
33+
34+
<!-- Desktop Menu -->
35+
<div class="hidden md:flex items-center space-x-8">
36+
<a href="./about.html" class="hover:text-bright-green transition flex items-center gap-2">
37+
<i data-lucide="info" class="w-4 h-4"></i>
38+
Sobre nós
39+
</a>
40+
<a href="https://forms.gle/3EtdZ5KWa4HvqxRL9"
41+
class="hover:text-bright-green transition flex items-center gap-2">
42+
<i data-lucide="user-plus" class="w-4 h-4"></i>
43+
Inscreva-se
44+
</a>
45+
</div>
46+
47+
<!-- Mobile Menu Button -->
48+
<button id="mobile-menu-button" class="md:hidden p-2">
49+
<i data-lucide="menu" class="w-6 h-6"></i>
50+
</button>
51+
</div>
52+
53+
<!-- Mobile Menu -->
54+
<div id="mobile-menu" class="hidden md:hidden mt-4 pb-4 border-t border-medium-green pt-4">
55+
<a href="./about.html" class="block py-2 hover:text-bright-green transition flex items-center gap-2">
56+
<i data-lucide="info" class="w-4 h-4"></i>
57+
Sobre nós
58+
</a>
59+
<a href="https://forms.gle/3EtdZ5KWa4HvqxRL9"
60+
class="block py-2 hover:text-bright-green transition flex items-center gap-2">
61+
<i data-lucide="user-plus" class="w-4 h-4"></i>
62+
Inscreva-se
63+
</a>
64+
</div>
65+
</nav>
66+
</header>
67+
68+
<main class="font-sans text-gray-800 flex flex-col items-center justify-center min-h-screen text-center p-6">
69+
<h1 class="text-4xl md:text-6xl font-bold mb-4">404</h1>
70+
<p class="text-xl md:text-2xl mb-6">Ops! Página não encontrada.</p>
71+
<p class="mb-8">Parece que você seguiu um caminho errado. Que tal voltar para a <a href="/"
72+
class="text-blue-600 dark:text-blue-400 underline">página inicial</a>?</p>
73+
<img src="https://http.cat/404" alt="Erro 404" class="max-w-xs" />
74+
</main>
75+
76+
<!-- Footer -->
77+
<footer class="bg-gradient-to-br from-dark-green to-medium-green text-white py-12 px-4 sm:px-6">
78+
<div class="container mx-auto max-w-6xl">
79+
<div class="flex justify-center space-x-3 sm:space-x-4">
80+
<a href="https://www.instagram.com/hackamazonia/"
81+
class="w-9 h-9 sm:w-10 sm:h-10 bg-bright-green rounded-full flex items-center justify-center hover:bg-verde-bright transition touch-manipulation">
82+
<i data-lucide="instagram" class="w-4 h-4 sm:w-5 sm:h-5"></i>
83+
</a>
84+
<a href="https://www.linkedin.com/company/hackamaz%C3%B4nia/"
85+
class="w-9 h-9 sm:w-10 sm:h-10 bg-bright-green rounded-full flex items-center justify-center hover:bg-verde-bright transition touch-manipulation">
86+
<i data-lucide="linkedin" class="w-4 h-4 sm:w-5 sm:h-5"></i>
87+
</a>
88+
<a href="https://github.com/HackAmazonia"
89+
class="w-9 h-9 sm:w-10 sm:h-10 bg-bright-green rounded-full flex items-center justify-center hover:bg-verde-bright transition touch-manipulation">
90+
<i data-lucide="github" class="w-4 h-4 sm:w-5 sm:h-5"></i>
91+
</a>
92+
</div>
93+
94+
<p class="text-center text-xs sm:text-sm text-gray-400 mt-6 sm:mt-8">
95+
HackAmazônia
96+
</p>
97+
</div>
98+
</footer>
99+
100+
<script>
101+
// Inicializar os ícones do Lucide
102+
lucide.createIcons();
103+
104+
// Mobile menu toggle
105+
const mobileMenuButton = document.getElementById('mobile-menu-button');
106+
const mobileMenu = document.getElementById('mobile-menu');
107+
108+
mobileMenuButton.addEventListener('click', () => {
109+
mobileMenu.classList.toggle('hidden');
110+
const icon = mobileMenuButton.querySelector('i');
111+
if (mobileMenu.classList.contains('hidden')) {
112+
icon.setAttribute('data-lucide', 'menu');
113+
} else {
114+
icon.setAttribute('data-lucide', 'x');
115+
}
116+
lucide.createIcons();
117+
});
29118

119+
// Close mobile menu when clicking a link
120+
const mobileMenuLinks = mobileMenu.querySelectorAll('a');
121+
mobileMenuLinks.forEach(link => {
122+
link.addEventListener('click', () => {
123+
mobileMenu.classList.add('hidden');
124+
const icon = mobileMenuButton.querySelector('i');
125+
icon.setAttribute('data-lucide', 'menu');
126+
lucide.createIcons();
127+
});
128+
});
129+
</script>
30130
</body>
31131

32132
</html>

0 commit comments

Comments
 (0)