-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
509 lines (486 loc) · 26 KB
/
index.html
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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TechBridge</title>
<link rel="icon" type="image/x-icon" href="/public/img/logo-techBridge.png" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
<script>
// CORES DE FUNDO
tailwind.config = {
theme: {
screens: {
530: "530px",
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
},
extend: {
colors: {
"off-white": "#F2F0EF",
primary: "#062A44",
"blue-whale": {
50: "#f0f9ff",
500: "#09a3ee",
},
secondary: "#CBF3EA",
tertiary: "#31C4CE",
quaternary: "#1381A4",
quinta: "#12323D",
sexta: "#3d1d12",
setima: "#ff4000",
oitava: "#0c2638",
},
fontFamily: {
sans: ["Montserrat", "sans-serif"],
serif: ["Libre Baskerville", "serif"],
},
backgroundImage: {
"dark-sea": "url('./public/img/dark-sea.jpeg')",
},
animation: {
fade: "fadeOut 1s ease-in-out",
},
keyframes: (theme) => ({
fadeOut: {
"0%": { backgroundColor: theme("colors.transparent") },
"100%": { backgroundColor: theme("colors.white") },
},
}),
},
},
};
</script>
</head>
<body class="text-sans bg-off-white flex flex-col min-h-screen flex-grow">
<button data-target="#principal" aria-label="Botão para pular" tabindex="0" class="sr-only focus:not-sr-only"
accesskey="s">
Pular ao conteúdo principal
</button>
<header aria-label="Cabeçalho principal"
class="w-screen fixed font-sans font-medium sm:p-auto bg-primary shadow-lg drop-shadow-xl z-10">
<div class="flex flex-row justify-around items-center p-2">
<img class="w-16 h-16 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-20 lg:h-20" src="public/img/logo-techBridge.png"
alt="Logotipo da empresa TechBridge, com uma ponte como elemento central" loading="lazy" />
<nav role="navigation" aria-label="Menu principal" class="md:block hidden">
<ul class="flex flex-row gap-8 text-off-white items-center tracking-wide drop-shadow-2xl capitalize">
<li class="cursor-pointer px-1 pb-px border-b-2 border-transparent hover:border-off-white duration-300">
<button data-target="#inicio" aria-current="page">Início</button>
</li>
<li class="cursor-pointer px-1 pb-px border-b-2 border-transparent hover:border-off-white duration-300">
<button data-target="#caso-sucesso">Caso de Sucesso</button>
</li>
<li
class="cursor-pointer border-2 border-blue-whale-50 px-3 py-px rounded-lg bg-off-white text-primary animate-bounce duration-300">
<button data-target="#sobre-nos">Sobre nós</button>
</li>
</ul>
</nav>
<button id="menu-btn" type="button" class="cursor-pointer block md:hidden text-secondary focus:outline-none"
aria-expanded="false">
<svg aria-hidden="true" class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
<nav id="menu" class="bg-oitava hidden md:hidden py-10 px-5 text-left duration-75 drop-shadow-xl">
<ul class="text-primary block text-base tracking-wide flex flex-col gap-2">
<li class="cursor-pointer px-3 py-1 text-secondary border-b border-slate-700">
<button aria-label="Ir para o início" data-target="#inicio">
Início
</button>
</li>
<li class="cursor-pointer px-3 py-1 text-secondary border-b border-slate-700">
<button aria-label="Ver caso de sucesso" data-target="#caso-sucesso">
Caso de Sucesso
</button>
</li>
<li class="cursor-pointer px-3 py-1 text-secondary border-b border-slate-700">
<button aria-label="Saiba mais sobre nós" data-target="#sobre-nos">
Sobre Nós
</button>
</li>
</ul>
</nav>
</header>
<main class="flex-grow overflow-y-auto">
<div role="button" aria-label="Botão para voltar ao topo da página"
class="md:opacity-65 md:hover:opacity-100 duration-300 z-10 bg-quaternary rounded-xl fixed bottom-5 right-5 w-10 h-10 md:w-12 md:h-12 flex align-center justify-center shadow-2xl">
<button data-target="#typing" id="to-the-top" type="button" class="">
<img aria-hidden="true" viewBox="0 0 10 10" class="w-2/4 m-auto" src="./public/img/up-arrow-svgrepo-com.svg"
alt="Seta apontando para cima" />
</button>
</div>
<section aria-labelledby="inicio-heading" id="inicio"
class="flex flex-col md:flex-row md:gap-8 justify-center items-center text-off-white bg-[url('public/img/dark-sea.jpeg')] h-screen bg-no-repeat bg-cover">
<div class="flex flex-col justify-left gap-6 px-10 w-11/12 md:w-3/6">
<h2 aria-label="Título principal da seção" id="typing"
class="text-left font-bold text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-sans drop-shadow-2xl z-auto">
</h2>
<h3 aria-label="Sub-título da seção" id="sub-typing" class="text-left text-xl sm:text-2xl drop-shadow-2xl"></h3>
<button aria-label="Saiba mais sobre a empresa" data-target="#video" id="learn-more" type="button"
class="hidden animate-fade justify-around text-sm w-3/6 530:w-3/6 530:text-base md:w-3/6 lg:w-4/12 xl:w-3/12 text-primary font-semibold bg-white hover:bg-off-white font-sans rounded-lg px-5 py-2.5 text-center inline-flex items-center">
Saiba Mais
<img viewBox="0 0 10 10" class="w-3" src="./public/img/down-arrow-svgrepo-com.svg"
alt="Seta apontando para baixo" />
</button>
</div>
<div class="hidden md:block w-2/6">
<img class="w-full" viewBox="0 0 50 50" src="./public/img/connected-rafiki.svg"
alt="Ilustração de uma conexão digital entre dispositivos" />
</div>
</section>
<section aria-labelledby="video-heading" id="video" class="h-screen w-screen flex flex-col justify-evenly">
<div class="py-5 flex flex-col text-center gap-5">
<h2 id="video-heading" class="font-sans text-2xl font-semibold text-primary">
Conheça um pouco sobre nossa empresa!
</h2>
<hr aria-hidden="true" class="border-2 border-neutral-300 border-solid w-3/12 lg:w-3/12 mx-auto" />
</div>
<div class="h-4/6 w-screen flex justify-center px-10">
<iframe aria-label="Player de vídeo no YouTube" class="drop-shadow-2xl w-screen sm:w-3/4 lg:w-3/4"
src="https://www.youtube.com/embed/J37EhEaUdQU?si=mCy12kr2g7qSj530" title="Vídeo sobre a empresa TechBridge"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</section>
<section aria-label="Caso de Sucesso: TechBridge" id="caso-sucesso"
class="font-serif text-justify my-10 px-8 text-primary">
<div class="bg-white p-6 rounded-lg shadow-lg">
<h4 class="text-xl font-semibold text-primary mb-4" aria-labelledby="titulo-caso-sucesso">
Caso de Sucesso
</h4>
<p id="principal" class="text-md mb-4">
A empresa <span class="font-semibold">TechBridge</span>,
especializada em desenvolvimento de soluções tecnológicas, recebeu
um desafio da Prefeitura Municipal de São João da Boa Vista em 2024:
criar uma plataforma que centralizasse todas as informações sobre
eventos culturais e pontos turísticos da cidade, facilitando o
acesso da população e dos visitantes.
</p>
<p class="text-md mb-4">
Os cidadãos expressavam sua frustração com a dificuldade de acesso a
informações relevantes, o que impactava diretamente na participação
em eventos e na visitação a pontos turísticos.
</p>
<p class="text-md mb-4">
Para resolver esse problema, a prefeitura buscou uma empresa
parceira que pudesse atender às necessidades da população de forma
eficaz e inovadora. Este projeto não apenas visava melhorar a
comunicação, mas também fortalecer a identidade cultural da cidade e
promover o turismo local.
</p>
<h4 class="text-xl font-semibold text-primary mt-6 mb-4" aria-labelledby="titulo-mapeamento">
Mapeamento das Necessidades da População
</h4>
<p class="text-md mb-4">
A empresa iniciou o projeto com um levantamento de requisitos junto
à população de São João da Boa Vista. Por meio de entrevistas,
grupos focais e pesquisas online, a equipe da empresa identificou
que muitos moradores, especialmente aqueles de regiões mais
afastadas do centro, não tinham conhecimento completo sobre os
pontos turísticos, horários de funcionamento e locais importantes da
cidade.
</p>
<h4 class="text-xl font-semibold text-primary mt-6 mb-4" aria-labelledby="titulo-desenvolvimento">
Desenvolvimento da Plataforma
</h4>
<p class="text-md mb-4">
Com os requisitos em mãos, a TechBridge iniciou o processo de
prototipação e desenvolvimento da plataforma web. A equipe trabalhou
em estreita colaboração com a prefeitura para garantir que todas as
informações relevantes fossem incluídas e apresentadas de forma
clara e acessível.
</p>
<h4 class="text-xl font-semibold text-primary mt-6 mb-4" aria-labelledby="titulo-design">
Design e Funcionalidades
</h4>
<p class="text-md mb-4">
A plataforma foi projetada para ser intuitiva e fácil de navegar,
com uma interface amigável e responsiva para dispositivos móveis. As
principais funcionalidades incluíam:
</p>
<ul class="list-disc list-inside mb-4">
<li>
<strong>Calendário de Eventos:</strong> Um calendário interativo
que permite aos usuários visualizar todos os eventos culturais
programados, com informações detalhadas sobre cada um, incluindo
data, horário, local e descrição.
</li>
<li>
<strong>Mapa Interativo:</strong> Um mapa que destaca os pontos
turísticos da cidade, permitindo que os usuários localizem
facilmente os atrativos e planejem suas visitas.
</li>
<li>
<strong>Sistema de Busca:</strong> Uma barra de pesquisa que
possibilita que os usuários encontrem rapidamente eventos ou
locais específicos.
</li>
<li>
<strong>Feedback da Comunidade:</strong> Uma seção onde os
cidadãos podem deixar comentários e sugestões sobre eventos e
pontos turísticos, promovendo um canal de comunicação contínuo
entre a população e a prefeitura.
</li>
</ul>
<h4 class="text-xl font-semibold text-primary mt-6 mb-4" aria-labelledby="titulo-resultados">
Resultados e Impactos Positivos
</h4>
<p class="text-md mb-4">
A centralização das informações turísticas em um único local
facilitou o planejamento de visitas e a participação em eventos
culturais. Além disso, a plataforma contribuiu para a promoção dos
atrativos turísticos da cidade, atraindo mais visitantes e gerando
oportunidades de desenvolvimento econômico local.
</p>
<p class="text-md mb-4">
Além disso, a plataforma se tornou um importante canal de
comunicação entre a prefeitura e a população. A seção de feedback
permitiu que os cidadãos expressassem suas opiniões e sugestões,
contribuindo para a melhoria contínua dos serviços oferecidos. A
prefeitura, por sua vez, se comprometeu a analisar as sugestões e a
implementar melhorias com base nas demandas da comunidade.
</p>
<h4 class="text-xl font-semibold text-primary mt-6 mb-4" aria-labelledby="titulo-conclusao">
Conclusão
</h4>
<p class="text-md">
Em resumo, a parceria entre a empresa TechBridge e a Prefeitura
Municipal de São João da Boa Vista resultou na criação de uma
plataforma web inovadora que resolveu o problema de acesso à
informação turística na cidade. Essa solução tecnológica não apenas
atendeu às necessidades da população, mas também contribuiu para o
fortalecimento do turismo local e o desenvolvimento socioeconômico
de São João da Boa Vista.
</p>
<div class="flex flex-col mt-10">
<h4 role="heading" aria-level="4" class="text-xl font-semibold text-primary mb-4 text-center">
Modelo Escolhido
</h4>
<figure>
<img class="m-auto transition-transform duration-300 hover:scale-105" src="./public/img/Modelo.png"
alt="Imagem de um Mapa Conceitual, modelo escolhido para o projeto" />
<figcaption class="text-sm mt-4 md:text-center">
Modelo - Mapa Conceitual
</figcaption>
</figure>
</div>
</div>
</section>
<section id="sobre-nos" class="text-md my-10 px-8 font-serif text-primary text-justify"
aria-labelledby="titulo-sobre-nos">
<h3 id="titulo-sobre-nos" class="text-2xl font-bold text-center mb-6">
Sobre Nós
</h3>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h4 class="text-xl font-semibold text-primary mb-4" aria-labelledby="titulo-quem-somos">
Quem Somos
</h4>
<p class="mb-4">
Somos uma empresa apaixonada por tecnologia e inovação, sempre
motivados a encontrar as soluções mais viáveis para cada cenário.
Formada por funcionários com vasta experiência em diversas áreas de
atuação, somos capacitados para decolar sua empresa e fazê-la
atingir todos os objetivos traçados. Nosso foco é criar soluções
alinhadas com o contexto social de cada cliente, visando os desafios
sociais enfrentados pela comunidade e o desenvolvimento
socioeconômico sustentável.
</p>
<h4 class="text-xl font-semibold text-primary mb-4" aria-labelledby="titulo-missao">
Missão
</h4>
<ul class="list-disc list-inside mb-4">
<li>
<strong>Fomentar a Inovação Social:</strong> Incentivar projetos e
soluções inovadoras que abordem desafios sociais enfrentados pela
comunidade, como educação, saúde, sustentabilidade, entre outros.
</li>
<li>
<strong>Apoiar o Desenvolvimento de Talentos:</strong> Conectar
empresas com os melhores talentos em tecnologia, promovendo a
formação e o desenvolvimento contínuo de profissionais na área.
</li>
</ul>
<h4 class="text-xl font-semibold text-primary mb-4" aria-labelledby="titulo-visao">
Visão
</h4>
<p class="mb-4">
Ser referência em soluções tecnológicas inovadoras que promovam o
desenvolvimento socioeconômico sustentável da comunidade.
</p>
<h4 class="text-xl font-semibold text-primary mb-4" aria-labelledby="titulo-valores">
Valores
</h4>
<ul class="list-disc list-inside mb-4">
<li>
<strong>Colaboração Comunitária:</strong> Estabelecer canais de
comunicação e parcerias com lideranças comunitárias, entendendo
suas necessidades e trabalhando juntos para encontrar soluções.
</li>
<li>
<strong>Colaboração e Parceria:</strong> Trabalhar em estreita
colaboração com os clientes, entendendo suas necessidades e
adaptando soluções que realmente façam a diferença.
</li>
<li>
<strong>Responsabilidade Social:</strong> Dedicação a práticas que
gerem impacto positivo na sociedade, com inclusão digital e apoio
ao desenvolvimento local.
</li>
</ul>
<h4 class="text-xl font-semibold text-primary mb-4" aria-labelledby="titulo-contato">
Contato
</h4>
<p class="mb-4">
E-mail:
<a href="mailto:[email protected]"
class="text-primary underline">[email protected]</a>
</p>
<p class="mb-4">
Redes Sociais:
<a href="https://www.instagram.com/techbridg3/" class="text-primary underline" target="_blank"
aria-label="Instagram da empresa">Instagram</a>,
<a href="https://youtube.com/@techbrigde-t3r?si=wCVuK9C1fml25TZ9" class="text-primary underline"
target="_blank" aria-label="YouTube da empresa">YouTube</a>
</p>
<h4 class="text-md font-semibold text-primary mb-4" aria-labelledby="titulo-equipe">
Equipe
</h4>
<div class="flex flex-wrap gap-6 justify-center p-4">
<!-- Cartão de Membro da Equipe -->
<div
class="w-64 bg-white p-6 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105"
aria-labelledby="membro-equipe-lucas">
<div class="flex flex-col items-center">
<img src="public/img/profile/Lucas.jpeg" alt="Foto de Lucas"
class="w-24 h-24 object-cover rounded-full border-4 border-primary mb-4" />
<p id="membro-equipe-lucas" class="font-bold text-gray-800">
Lucas
</p>
<p class="text-gray-600">20 anos</p>
</div>
</div>
<div
class="w-64 bg-white p-6 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105"
aria-labelledby="membro-equipe-willian">
<div class="flex flex-col items-center">
<img src="public/img/profile/Willian.jpeg" alt="Foto de Willian"
class="w-24 h-24 object-cover rounded-full border-4 border-primary mb-4" />
<p id="membro-equipe-willian" class="font-bold text-gray-800">
Willian
</p>
<p class="text-gray-600">19 anos</p>
</div>
</div>
<div
class="w-64 bg-white p-6 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105"
aria-labelledby="membro-equipe-julia">
<div class="flex flex-col items-center">
<img src="public/img/profile/Julia.jpeg" alt="Foto de Julia"
class="w-24 h-24 object-cover rounded-full border-4 border-primary mb-4" />
<p id="membro-equipe-julia" class="font-bold text-gray-800">
Julia
</p>
<p class="text-gray-600">20 anos</p>
</div>
</div>
<div
class="w-64 bg-white p-6 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105"
aria-labelledby="membro-equipe-adryel">
<div class="flex flex-col items-center">
<img src="public/img/profile/Adryel.jpeg" alt="Foto de Adryel"
class="w-24 h-24 object-cover rounded-full border-4 border-primary mb-4" />
<p id="membro-equipe-adryel" class="font-bold text-gray-800">
Adryel
</p>
<p class="text-gray-600">20 anos</p>
</div>
</div>
<div
class="w-64 bg-white p-6 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105"
aria-labelledby="membro-equipe-giulia">
<div class="flex flex-col items-center">
<img src="public/img/profile/Giulia.jpeg" alt="Foto de Giulia"
class="w-24 h-24 object-cover rounded-full border-4 border-primary mb-4" />
<p id="membro-equipe-giulia" class="font-bold text-gray-800">
Giulia
</p>
<p class="text-gray-600">18 anos</p>
</div>
</div>
<div
class="w-64 bg-white p-6 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105"
aria-labelledby="membro-equipe-giovanna">
<div class="flex flex-col items-center">
<img src="public/img/profile/Giovanna.jpeg" alt="Foto de Giovanna"
class="w-24 h-24 object-cover rounded-full border-4 border-primary mb-4" />
<p id="membro-equipe-giovanna" class="font-bold text-gray-800">
Giovanna
</p>
<p class="text-gray-600">19 anos</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- footer-container -->
<footer class="bg-primary text-off-white" aria-label="Rodapé">
<div class="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
<hr class="my-2 border-off-white sm:mx-auto lg:my-4" />
<div class="sm:flex sm:items-center sm:justify-between">
<p class="text-sm sm:text-left w-3/6" aria-label="Informações de direitos autorais">
© 2024
<a href="https://github.com/IFSP-SaoJoaodaBoaVista/20241-ptin-g2" class="underline">TechBridge</a>. by
<a class="underline" href="http://github.com/zdearo">Adryel Dearo</a>, <a class="underline" href="#">Lucas
Giavaroti</a>,
<a class="underline" href="#">Willian Marques</a>,
<a class="underline" href="#">Julia Carolina</a>,
<a class="underline" href="#">Giovanna Satiko</a> e
<a class="underline" href="#">Giulia Leticie</a>
é licenciado sob
<a class="underline" href="https://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1">Creative Commons
Attribution-NonCommercial-ShareAlike 4.0
International</a>.
</p>
<nav aria-label="Redes sociais" class="flex mt-4 sm:justify-center sm:mt-0">
<a href="https://youtube.com/@techbrigde-t3r?si=wCVuK9C1fml25TZ9" class="hover:text-gray-900" target="_blank"
aria-label="Youtube TechBridge">
<svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="96"
height="96" viewBox="0 0 24 24">
<path
d="M 12 4 C 12 4 5.7455469 3.9999687 4.1855469 4.4179688 C 3.3245469 4.6479688 2.6479687 5.3255469 2.4179688 6.1855469 C 1.9999687 7.7455469 2 12 2 12 C 2 12 1.9999687 16.254453 2.4179688 17.814453 C 2.6479687 18.675453 3.3255469 19.352031 4.1855469 19.582031 C 5.7455469 20.000031 12 20 12 20 C 12 20 18.254453 20.000031 19.814453 19.582031 C 20.674453 19.352031 21.352031 18.674453 21.582031 17.814453 C 22.000031 16.254453 22 12 22 12 C 22 12 22.000031 7.7455469 21.582031 6.1855469 C 21.352031 5.3255469 20.674453 4.6479688 19.814453 4.4179688 C 18.254453 3.9999687 12 4 12 4 z M 12 6 C 14.882 6 18.490875 6.1336094 19.296875 6.3496094 C 19.465875 6.3946094 19.604391 6.533125 19.650391 6.703125 C 19.891391 7.601125 20 10.342 20 12 C 20 13.658 19.891391 16.397875 19.650391 17.296875 C 19.605391 17.465875 19.466875 17.604391 19.296875 17.650391 C 18.491875 17.866391 14.882 18 12 18 C 9.119 18 5.510125 17.866391 4.703125 17.650391 C 4.534125 17.605391 4.3956094 17.466875 4.3496094 17.296875 C 4.1086094 16.398875 4 13.658 4 12 C 4 10.342 4.1086094 7.6011719 4.3496094 6.7011719 C 4.3946094 6.5331719 4.533125 6.3946094 4.703125 6.3496094 C 5.508125 6.1336094 9.118 6 12 6 z M 10 8.5351562 L 10 15.464844 L 16 12 L 10 8.5351562 z">
</path>
</svg>
<span class="sr-only">Youtube</span>
</a>
<a href="https://www.instagram.com/techbridg3/" class="hover:text-gray-900 ms-5" target="_blank"
aria-label="Instagram TechBridge">
<svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="96"
height="96" viewBox="0 0 48 48">
<path
d="M 16.5 5 C 10.16639 5 5 10.16639 5 16.5 L 5 31.5 C 5 37.832757 10.166209 43 16.5 43 L 31.5 43 C 37.832938 43 43 37.832938 43 31.5 L 43 16.5 C 43 10.166209 37.832757 5 31.5 5 L 16.5 5 z M 16.5 8 L 31.5 8 C 36.211243 8 40 11.787791 40 16.5 L 40 31.5 C 40 36.211062 36.211062 40 31.5 40 L 16.5 40 C 11.787791 40 8 36.211243 8 31.5 L 8 16.5 C 8 11.78761 11.78761 8 16.5 8 z M 34 12 C 32.895 12 32 12.895 32 14 C 32 15.105 32.895 16 34 16 C 35.105 16 36 15.105 36 14 C 36 12.895 35.105 12 34 12 z M 24 14 C 18.495178 14 14 18.495178 14 24 C 14 29.504822 18.495178 34 24 34 C 29.504822 34 34 29.504822 34 24 C 34 18.495178 29.504822 14 24 14 z M 24 17 C 27.883178 17 31 20.116822 31 24 C 31 27.883178 27.883178 31 24 31 C 20.116822 31 17 27.883178 17 24 C 17 20.116822 20.116822 17 24 17 z">
</path>
</svg>
<span class="sr-only">Instagram</span>
</a>
</nav>
</div>
</div>
</footer>
</body>
</html>
<script src="src/assets/menu.js"></script>
<script src="src/assets/typing.js"></script>
<script src="src/assets/scrolling.js"></script>