-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
366 lines (302 loc) · 21.6 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
<title>Salus Company</title>
<link rel="icon" type="image/x-icon" href="/assets/logo.jpg">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
</head>
<body>
<div class="w-full overflow-x-hidden">
<nav class="px-8 py-4 bg-zinc-900/40 md:bg-transparent md:border-none md:backdrop-blur-0 backdrop-blur-md border-b border-gray-500 flex transition-opacity duration-500 justify-between items-center fixed self-center w-full top-0 z-10">
<img src="assets/logo.jpg" route="home" class="cursor-pointer rounded-full" height="48px" width="48px" onclick="setActiveSection('home')" />
<div class="flex md:hidden nav-icon items-center justify-center w-12 h-12">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7 text-neutral-200">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</div>
<ul class="md:flex hidden text-slate-50 font-medium gap-x-8 flex-1 justify-center relative bg-red/30 uppercase text-sm">
<li class="z-2 cursor-pointer" route="home">
<p>Início</p>
</li>
<li class="z-2 cursor-pointer" route="about">
<p>Sobre</p>
</li>
<!-- <li class="z-2 cursor-pointer" route="teams">
<p>Times</p>
</li> -->
<li class="z-2 cursor-pointer" route="services">
<p>Serviços</p>
</li>
<li class="z-2 cursor-pointer" route="contact">
<p>Contato</p>
</li>
</ul>
</nav>
</div>
<div style="height: calc(100vh - 80px);" class="hidden md:hidden fixed top-20 w-screen bg-slate-900 nav-items text-slate-50 font-medium flex-1 justify-center z-10 md:relative bg-red/30 uppercase text-4xl py-8 flex-col pl-20">
<ul class="flex flex-col gap-10">
<li class="z-2 cursor-pointer" route="home">
<p class="overflow-hidden"><strong>Início</strong></p>
</li>
<li class="z-2 cursor-pointer" route="about">
<p class="overflow-hidden"><strong>Sobre</strong></p>
</li>
<!-- <li class="z-2 cursor-pointer" route="teams">
<p>Times</p>
</li> -->
<li class="z-2 cursor-pointer" route="services">
<p class="overflow-hidden"><strong>Serviços</strong></p>
</li>
<li class="z-2 cursor-pointer" route="contact">
<p class="overflow-hidden"><strong>Contato</strong></p>
</li>
</ul>
</div>
<div class="flex overflow-x-hidden">
<section id="contact" class="route bg-slate-900 w-full min-h-full justify-center items-center bg-cover bg-no-repeat bg-center">
<div class="flex flex-col gap-y-16 md:gap-y-24 w-full h-full items-center justify-center mt-28 md:mt-0">
<h1 class="text-2xl text-white tracking-widest text-center leading-loose uppercase">
Entre em<br/>
<strong class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-300 text-4xl background-animate">
CONTATO
</strong>
</h1>
<div class="flex flex-col md:flex-row md:justify-center flex-wrap w-full gap-x-24 gap-y-12 items-center mb-10">
<div class="flex flex-col items-center max-w-xs text-center gap-y-8">
<div class="p-6 bg-slate-700 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-10 h-10 text-neutral-100">
<path d="M21.721 12.752a9.711 9.711 0 00-.945-5.003 12.754 12.754 0 01-4.339 2.708 18.991 18.991 0 01-.214 4.772 17.165 17.165 0 005.498-2.477zM14.634 15.55a17.324 17.324 0 00.332-4.647c-.952.227-1.945.347-2.966.347-1.021 0-2.014-.12-2.966-.347a17.515 17.515 0 00.332 4.647 17.385 17.385 0 005.268 0zM9.772 17.119a18.963 18.963 0 004.456 0A17.182 17.182 0 0112 21.724a17.18 17.18 0 01-2.228-4.605zM7.777 15.23a18.87 18.87 0 01-.214-4.774 12.753 12.753 0 01-4.34-2.708 9.711 9.711 0 00-.944 5.004 17.165 17.165 0 005.498 2.477zM21.356 14.752a9.765 9.765 0 01-7.478 6.817 18.64 18.64 0 001.988-4.718 18.627 18.627 0 005.49-2.098zM2.644 14.752c1.682.971 3.53 1.688 5.49 2.099a18.64 18.64 0 001.988 4.718 9.765 9.765 0 01-7.478-6.816zM13.878 2.43a9.755 9.755 0 016.116 3.986 11.267 11.267 0 01-3.746 2.504 18.63 18.63 0 00-2.37-6.49zM12 2.276a17.152 17.152 0 012.805 7.121c-.897.23-1.837.353-2.805.353-.968 0-1.908-.122-2.805-.353A17.151 17.151 0 0112 2.276zM10.122 2.43a18.629 18.629 0 00-2.37 6.49 11.266 11.266 0 01-3.746-2.504 9.754 9.754 0 016.116-3.985z" />
</svg>
</div>
<div class="flex flex-col gap-y-4">
<h1 class="text-3xl text-neutral-200 uppercase"><strong>endereço</strong></h1>
<p class="text-slate-50 leading-normal max-w-4xl text-lg">
R. Des. Lauro Nogueira, 1240 - Papicu, Fortaleza - CE
</p>
</div>
</div>
<div class="flex flex-col items-center max-w-xs text-center gap-y-8">
<div class="p-6 bg-slate-700 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-10 h-10 text-neutral-100">
<path fill-rule="evenodd" d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z" clip-rule="evenodd" />
</svg>
</div>
<div class="flex flex-col gap-y-4">
<h1 class="text-3xl text-neutral-200 uppercase"><strong>telefone</strong></h1>
<p class="text-slate-50 leading-normal max-w-4xl text-lg">
+55 (85) 8123-2102
</p>
</div>
</div>
<div class="flex flex-col items-center max-w-xs text-center gap-y-8">
<div class="p-6 bg-slate-700 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-10 h-10 text-neutral-100">
<path fill-rule="evenodd" d="M17.834 6.166a8.25 8.25 0 100 11.668.75.75 0 011.06 1.06c-3.807 3.808-9.98 3.808-13.788 0-3.808-3.807-3.808-9.98 0-13.788 3.807-3.808 9.98-3.808 13.788 0A9.722 9.722 0 0121.75 12c0 .975-.296 1.887-.809 2.571-.514.685-1.28 1.179-2.191 1.179-.904 0-1.666-.487-2.18-1.164a5.25 5.25 0 11-.82-6.26V8.25a.75.75 0 011.5 0V12c0 .682.208 1.27.509 1.671.3.401.659.579.991.579.332 0 .69-.178.991-.579.3-.4.509-.99.509-1.671a8.222 8.222 0 00-2.416-5.834zM15.75 12a3.75 3.75 0 10-7.5 0 3.75 3.75 0 007.5 0z" clip-rule="evenodd" />
</svg>
</div>
<div class="flex flex-col gap-y-4">
<h1 class="text-3xl text-neutral-200 uppercase"><strong>e-mail</strong></h1>
<p class="text-slate-50 leading-normal max-w-4xl text-lg">
</p>
</div>
</div>
</div>
</div>
</section>
<section id="services" class="route bg-slate-900 flex flex-col py-8 min-h-full w-full items-center justify-center">
<div class="flex flex-col gap-y-12 w-full h-[35vh] overflow-visible items-center justify-end">
<h1 class="text-xl md:text-2xl text-white tracking-widest text-center overflow-visible leading-loose uppercase">
Isso é<br/>
<strong class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-300 text-3xl md:text-4xl background-animate">
O QUE FAZEMOS
</strong>
</h1>
</div>
<div class="w-full h-full flex flex-col gap-y-20 md:px-16 mt-24 items-center max-w-xs md:max-w-4xl text-justify md:text-center">
<div class="flex gap-x-16">
<img src="assets/aquilae.png" width="800px" class="hidden md:inline" style="object-fit: contain;" />
<div class="flex flex-col items-start">
<h1 class="overflow-visible">
<strong class="text-neutral-100 text-4xl relative underline-gradient md:leading-loose">AQUILAE TEAM</strong>
</h1>
<p class="text-neutral-300 mt-6 md:mt-2 text-justify leading-relaxed text-lg">
Tem o propósito de preparar e manter um ambiente de cibersegurança com base nas mais eficientes práticas de mercado, com a intenção de manter a continuidade dos negócios. Formado por um grupo de especialistas em cibersegurança e multidisciplinares, o Team Aquilae promete garantir a defesa de todos os clientes, trabalhando em conjunto com outros times (como o Team Serpens – que será citado posteriormente) para agregar conhecimento e tornar as tecnologias de defesa cada vez mais eficazes.
</p>
</div>
</div>
<div class="flex gap-x-16">
<img src="assets/serpens.png" width="800px" class="hidden md:inline" style="object-fit: contain;" />
<div class="flex flex-col max-w-3xl items-start">
<h1 class="overflow-visible">
<strong class="text-neutral-100 text-4xl relative underline-gradient md:leading-loose">SERPENS TEAM</strong>
</h1>
<p class="text-neutral-300 mt-6 md:mt-2 text-justify leading-relaxed text-lg">
A equipe de ataque. Seu objetivo é analisar todas as falhas de segurança, identificadas ou não, a fim de realizar de forma efetiva os ataques a um ambiente, para antecipá-las e corrigi-las. Além de compreender testes de intrusão (físico e lógico), análise de vulnerabilidades e análise de malware, o Team Serpens identifica qualquer vulnerabilidade no sistema defensivo PPT (Pessoas, Processo e Tecnologia). Assim, o time auxilia a empresa nas melhorias de suas próprias habilidades defensivas.
</p>
</div>
</div>
<div class="flex gap-x-16">
<img src="assets/pistris.png" width="800px" class="hidden md:inline" style="object-fit: contain;" />
<div class="flex flex-col max-w-3xl items-start">
<h1 class="overflow-visible">
<strong class="text-neutral-100 text-4xl relative underline-gradient md:leading-loose">PISTRIS TEAM</strong>
</h1>
<p class="text-neutral-300 mt-6 md:mt-2 text-justify leading-relaxed text-lg">
A junção das outras duas equipes. Reúne os melhores profissionais de cada área, fazendo com que troquem experiências e criem soluções cada vez mais eficazes. O Team Pistris garantirá que sua segurança seja de primeira linha, sempre optando pelas melhores alternativas possíveis para conseguir êxito em suas funções. Com um atendimento personalizado, nosso time cumpre tudo o que é prometido e se possível, ainda mais que isso. Tudo com o objetivo de nutrir o melhor atendimento e garantir fidelidade de todos os nossos clientes.
</p>
</div>
</div>
</div>
</section>
<section id="about" class="route bg-slate-900 w-full min-h-full md:h-full justify-center items-center bg-cover bg-no-repeat bg-center">
<div class="flex flex-col gap-y-12 w-full h-full items-center my-32 md:my-0 md:justify-center">
<h1 class="text-xl overflow-visible md:text-2xl text-white tracking-widest text-center leading-loose uppercase">
você deve estar se perguntando<br/>
<strong class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-300 text-3xl md:text-4xl background-animate">
o que é salus?
</strong>
</h1>
<p class="text-slate-200 text-xl leading-normal max-w-xs md:max-w-4xl text-justify md:text-center">A Salus Company é uma empresa focada na inovação da segurança da informação, criada para oferecer serviços de defesa e garantir a proteção digital aos seus clientes, de forma que investe em soluções criativas e eficientes para lidar com as necessidades atuais de mercado. Dentre os serviços fornecidos estão: defesa dos Sistemas Operacionais por meio da segurança à base de criptografia e a estabilidade de um ambiente de cibersegurança com base nas mais atuais tecnologias.</p>
</div>
</section>
<main id="home" section-active class="route w-full h-[100vh] justify-center items-center bg-welcome bg-cover bg-no-repeat bg-center">
<div class="flex flex-col gap-y-16 w-full h-full items-center justify-center bg-black/40 backdrop-blur-lg">
<h1 class="text-4xl text-white tracking-widest text-center leading-loose">
BEM VINDO À<br/>
<strong class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-300 text-5xl background-animate">
SALUS COMPANY
</strong>
</h1>
<span onclick="setActiveSection('about')" route="about" class="flex items-center gap-x-4 hover:bg-neutral-900/30 transition-colors py-4 px-6 rounded-md cursor-pointer">
<p class="text-xs text-neutral-300 tracking-widest text-center uppercase">
Clique para continuar
</p>
</span>
</div>
</main>
</div>
<div id="help-container" class="hidden transition-all fixed top-0 bg-black/70 w-screen h-screen z-[999] flex-col justify-center items-center gap-y-8">
<div class="flex flex-col w-[580px] bg-zinc-900 rounded-lg py-3 gap-y-6">
<input placeholder="Pesquise por um comando..." class="bg-zinc-900 h-8 mx-6 w-full outline-none text-neutral-100 text-lg" />
<div class="flex flex-col text-neutral-200 w-full">
<div class="flex flex-col items-start gap-y-2 overflow-">
<h2 class="uppercase text-xs text-neutral-300 ml-6">geral</h2>
<div class="flex flex-col w-full">
<div id="copy-url" class="flex items-center justify-between hover:bg-white/5 hover:text-neutral-100 text-lg transition-colors w-full py-3 px-6 text-neutral-400 cursor-pointer">
<div class="flex gap-x-4 items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
</svg>
<p>Copiar Link</p>
</div>
<div class="flex gap-x-1">
<p class="flex items-center justify-center uppercase h-8 w-7 bg-neutral-700 text-sm rounded-md text-neutral-400">
C
</p>
<p class="flex items-center justify-center uppercase h-8 w-7 bg-neutral-700 text-sm rounded-md text-neutral-400">
L
</p>
</div>
</div>
<div id="source-code" class="flex items-center justify-between hover:bg-white/5 hover:text-neutral-100 text-lg transition-colors w-full py-3 px-6 text-neutral-400 cursor-pointer">
<div class="flex gap-x-4 items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
</svg>
<p>Código Fonte</p>
</div>
<div class="flex gap-x-1">
<p class="flex items-center justify-center uppercase h-8 w-7 bg-neutral-700 text-sm rounded-md text-neutral-400">
C
</p>
<p class="flex items-center justify-center uppercase h-8 w-7 bg-neutral-700 text-sm rounded-md text-neutral-400">
F
</p>
</div>
</div>
</div>
<h2 class="uppercase text-xs text-neutral-300 ml-6">ir para</h2>
<div class="flex flex-col w-full">
<div id="action-home" class="flex items-center justify-between hover:bg-white/5 hover:text-neutral-100 text-lg transition-colors w-full py-3 px-6 text-neutral-400 cursor-pointer">
<div class="flex gap-x-4 items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
<p>Início</p>
</div>
<div class="flex gap-x-1">
<p class="flex items-center justify-center uppercase h-8 w-7 bg-neutral-700 text-sm rounded-md text-neutral-400">
P
</p>
<p class="flex items-center justify-center uppercase h-8 w-7 bg-neutral-700 text-sm rounded-md text-neutral-400">
I
</p>
</div>
</div>
<div id="action-about" class="flex items-center justify-between hover:bg-white/5 hover:text-neutral-100 text-lg transition-colors w-full py-3 px-6 text-neutral-400 cursor-pointer">
<div class="flex gap-x-4 items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" />
</svg>
<p>Sobre</p>
</div>
<div class="flex gap-x-1">
<p class="flex items-center justify-center uppercase h-8 w-7 bg-neutral-700 text-sm rounded-md text-neutral-400">
P
</p>
<p class="flex items-center justify-center uppercase h-8 w-7 bg-neutral-700 text-sm rounded-md text-neutral-400">
H
</p>
</div>
</div>
<div id="action-services" class="flex items-center justify-between hover:bg-white/5 hover:text-neutral-100 text-lg transition-colors w-full py-3 px-6 text-neutral-400 cursor-pointer">
<div class="flex gap-x-4 items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
</svg>
<p>Serviços</p>
</div>
<div class="flex gap-x-1">
<p class="flex items-center justify-center uppercase h-8 w-7 bg-neutral-700 text-sm rounded-md text-neutral-400">
P
</p>
<p class="flex items-center justify-center uppercase h-8 w-7 bg-neutral-700 text-sm rounded-md text-neutral-400">
S
</p>
</div>
</div>
<div id="action-contact" class="flex items-center justify-between hover:bg-white/5 hover:text-neutral-100 text-lg transition-colors w-full py-3 px-6 text-neutral-400 cursor-pointer">
<div class="flex gap-x-4 items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
</svg>
<p>Contato</p>
</div>
<div class="flex gap-x-1">
<p class="flex items-center justify-center uppercase h-8 w-7 bg-neutral-700 text-sm rounded-md text-neutral-400">
P
</p>
<p class="flex items-center justify-center uppercase h-8 w-7 bg-neutral-700 text-sm rounded-md text-neutral-400">
C
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="open-help" class="hidden md:flex fixed bottom-4 right-4 p-4 bg-neutral-800 border border-neutral-100 drop-shadow-xl rounded-full z-50 cursor-pointer">
<img src="/assets/oliver-unscreen.gif " width="70px" />
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<script src="scripts/toast.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/help.js"></script>
</body>
</html>