exabyte/index.html at main · lucaoverso/exabyte · GitHub

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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clube de Protagonismo Exabyte</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
</head>

<body>
    <header>
        <p class="logo">Exabyte Clube</p>
        <nav>
            <a href="">Sobre o Clube</a>
            <a href="">Como Participar</a>
            <a href="">Times</a>
            <a href="">Atualizações/Notícias</a>
        </nav>
        <a href="#contato" class="contato-btn">Contato</a>
    </header>
    <section class="hero">
        <h1>Somos um clube de protagonismo <span class="spanHero" id="spanHero">Exabyte</span></h1>
        <div class="slider-container">
            <div class="slider" id="frase-slider">
                <div class="slide">Construa mundos que ensinam 🛠️</div>
                <div class="slide">Crie jogos que fazem aprender 🎮</div>
                <div class="slide">Programe aventuras épicas 🔥</div>
                <div class="slide">Conte histórias que iluminam 📜</div>
            </div>
        </div>
        <a href="https://forms.gle/RhLbQh7wxu7gWz7T9" target="_blank" class="form-btn">Quero participar</a> <br>
        <img class="hero-banner" src="img/banner.png" alt="">
    </section>
    <section class="content">
        <h2>🎯 Nossos Objetivos</h2>
        <p>O Exabyte é o clube de protagonismo estudantil dedicado a criar mundos virtuais gamificados para transformar
            o aprendizado. Nossa missão é construir experiências/jogos didáticos para contemplar o ensino de diversas
            áreas.</p>
        <p>Aqui, os estudantes são protagonistaas, colocam a mão na massa e realizam as principais missões listadas
            abaixo:</p>
        <div class="missoes">
            <div class="missao">
                <img src="img/acao1.png" alt="" class="missao-img">
                <hr class="hr-desktop">
                <div>
                    <h3>1. Constroem Ilhas Educativas 🛠️</h3>
                    <ul>
                        <li>Criam mapas, mundos e cenários dentro de plataformas como Minecraft ou Roblox.</li>
                        <li>Planejam o layout das ilhas: área de desafios, locais de exploração, "templos" do
                            conhecimento, arenas de eventos, etc.</li>
                        <li>Decoram e tematizam os ambientes conforme a disciplina (por exemplo: uma ilha para ensinar
                            variáveis, outra para redes de computadores).</li>
                    </ul>
                    <p><strong>Objetivo educativo:</strong> Estimular a criatividade espacial, o design de ambientes de
                        aprendizagem, o raciocínio de organização de espaços virtuais.</p>
                </div>
            </div>
            <div class="missao">
                <img src="img/acao2.png" alt="" class="missao-img">
                <hr class="hr-desktop">
                <div>
                    <h3>2. Desenvolvem Jogos Didáticos 🎮</h3>
                    <ul>
                        <li>Criam jogos e minigames interativos dentro do mundo virtual.</li>
                        <li>Pensam nos objetivos pedagógicos do jogo (ex.: acertar perguntas para abrir portas,
                            completar
                            desafios de lógica para avançar).</li>
                        <li>Definem regras, mecânicas, sistema de pontuação e recompensas.</li>
                    </ul>
                    <p><strong>Objetivo educativo:</strong> Aplicar conceitos de gamificação para ensinar conteúdos
                        reais de forma prática e divertida.</p>
                </div>

            </div>
            <div class="missao">
                <img src="img/acao3.png" alt="" class="missao-img">
                <hr class="hr-desktop">
                <div>
                    <h3>3. Programam Aventuras Interativas 🔥</h3>
                    <ul>
                        <li>Programam comportamentos dentro dos jogos/mundos usando códigos simples.</li>
                        <li>Criam scripts para fazer puzzles, eventos automáticos, inimigos que se comportam de certa
                            maneira, portas que abrem com condições (if, else, console.log, etc.).</li>
                        <li>Montam missões com progressões dinâmicas (ex.: o aluno só avança se resolver o desafio).
                        </li>
                    </ul>
                    <p><strong>Objetivo educativo:</strong> Ensinar pensamento lógico, programação básica e lógica de
                        desenvolvimento de jogos (game logic).</p>
                </div>

            </div>
            <div class="missao">
                <img src="img/acao4.png" alt="" class="missao-img">
                <hr class="hr-desktop">
                <div>
                    <h3>4. Contam Histórias que Ensinam 📜 </h3>
                    <ul>
                        <li>Criam narrativas, histórias e roteiros que guiam as missões e os jogos.</li>
                        <li>Escrevem diálogos de NPCs, cartas misteriosas, missões de aventura.</li>
                        <li>Conectam os conteúdos educativos dentro de enredos envolventes ("O mago precisa da ajuda dos
                            estudantes para recuperar o Código Sagrado!").</li>
                    </ul>
                    <p><strong>Objetivo educativo:</strong> Desenvolver habilidades de storytelling, escrita criativa,
                        roteirização para jogos e projetos educativos.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <h2>👾 O que faz cada Time</h2>
        <p>No nosso clube cada pessoa participa de um time específico com tarefas e agendas diferentes, entender o que cada um desses times faz é essencial para sua escolha, entenda:</p>
        <div class="cards-times">
            <div class="card">
                <img src="img/time1.png" alt="" class="card-img">
                <hr>
                <h3>🛠️ Construtores</h3>
                <p>Criam cenários, constroem mundos e ilhas digitais.</p>
            </div>
            <div class="card">
                <img src="img/time2.png" alt="" class="card-img">
                <hr>
                <h3>🧙 Roteiristas</h3>
                <p>Desenvolvem histórias, enredos e missões educativas.</p>
            </div>
            <div class="card">
                <img src="img/time3.png" alt="" class="card-img">
                <hr>
                <h3>🔥 Programadores</h3>
                <p>Codificam comportamentos, mecânicas e sistemas de jogo.</p>
            </div>
            <div class="card">
                <img src="img/time4.png" alt="" class="card-img">
                <hr>
                <h3>🧪 Testadores</h3>
                <p>Garantem que tudo funcione, testando e melhorando os mundos.</p>
            </div>
        </div>
    </section>

    <section class="content">
        <h2>🚀 Como Entrar na Jornada</h2>
        <div class="missao">
            <img src="img/etapa1.png" alt="" class="missao-img">
            <hr>
            <div class="section-info">
                <p>Você pode aplicar para o processo seletivo de membros do clube, porém não é garantido que será
                    aceito. Para realizar sua inscrição basta seguir as etapas abaixo:</p>
                <ul>
                    <li>Clique no botão abaixo</li>
                    <li>Preencha o Formulário de Inscrição</li>
                    <li>Escreva sobre você, porque é importante para você participar do Clube.</li>
                    <li>Seja sincero sobre suas habilidades e intimidade com jogos.</li>
                    <li>Escolha o time que mais te agrada.</li>
                    <li>Aguarde o resultado do processo.</li>
                </ul>
                <a href="https://forms.gle/RhLbQh7wxu7gWz7T9" target="_blank" class="form-btn">Quero participar</a>
            </div>

        </div>
        </div>
    </section>

    <section class="contato" id="contato">
        <h2>📬 Fale com a Gente</h2>
        <p>Tem uma dúvida ou ideia? Fale conosco!</p>
        <a href="https://wa.me/5567996237451" class="contato-btn">Via WhatsApp</a>
        <p>Professor Responsável: Lucão</p>
    </section>

    <footer>
        <p>Desenvolvido por <strong>Lucas Sbaraini</strong></p>
        <p>2025 - Todos os direitos reservados.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>