-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
407 lines (361 loc) · 17.7 KB
/
index.html
File metadata and controls
407 lines (361 loc) · 17.7 KB
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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile - Seja bem-vindo</title>
<!-- Ícone na barra de navegação -->
<link rel="icon" href="./assets/images/cameleao.svg" type="image/x-icon">
<!-- Link para variáveis do css -->
<link rel="stylesheet" href="./css/variables.css" type="text/css">
<!-- Link para padronizar ou normalizar css -->
<link rel="stylesheet" href="./css/normalize.css" type="text/css">
<!-- Link para o estilo da página do css -->
<link rel="stylesheet" href="./css/styles.css" type="text/css">
<!-- Link para o estilo Header do css -->
<link rel="stylesheet" href="./css/header.css" type="text/css">
<!-- Link para o estilo Footer do css -->
<link rel="stylesheet" href="./css/footer.css" type="text/css">
<!-- Link para icones do Google Icons -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=lightbulb" />
</head>
<body>
<!-- Cabeçalho -->
<header id="header-site">
<!-- Logo -->
<section id="logo-header">
<a href="./index.html" target="_self" rel="next">
<img src="./assets/images/cameleao.svg" alt="Logo do profile" title="Logo profile">
</a>
</section>
<!-- Barra de navegação não responsiva -->
<nav id="box-nav">
<ul>
<li class="li-nav">
<a href="./index.html" target="_self" rel="next">Home</a>
</li>
<li class="li-nav">
<a href="./pages/about.html" target="_self" rel="next">Sobre nós</a>
</li>
<li class="li-nav">
<a href="./pages/contact.html" target="_self" rel="next">Contato</a>
</li>
<li class="btn-curriculum">
<a href="pages/curriculumForms.html" target="_self" rel="next">
<iconify-icon icon="material-symbols:docs-outline" width="24"></iconify-icon>
Faça seu currículo
</a>
</li>
</ul>
</nav>
<!-- Botão doar e icone para responsividade -->
<section id="box-nav-options-resposive">
<button class="btn-curriculum">
<a href="pages/curriculumForms.html" target="_self" rel="next">
<iconify-icon icon="material-symbols:docs-outline" width="24"></iconify-icon>
Faça seu currículo
</a>
</button>
<div class="btn-mobile">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</section>
<!-- Links do responsivo -->
<nav id="box-nav-reponsive">
<ul>
<li class="li-nav"><a href="./index.html" target="_self" rel="next">Home</a></li>
<li class="li-nav"><a href="./pages/about.html" target="_self" rel="next">Sobre nós</a></li>
<li class="li-nav"><a href="./pages/contact.html" target="_self" rel="next">Contato</a></li>
</ul>
</nav>
</header>
<!-- Corpo do site - SEÇÃO PRINCIPAL-HOME -->
<main>
<section class="principal-home" id="principal-home">
<div class="container">
<div class="conteudo-principal-home">
<h1>Crie o Currículo Perfeito <br> com Inteligência Artificial.</h1>
<p>Transformando sua experiência em destaque.</p>
<a href="pages/curriculumForms.html" class="botao-cta">
CRIE SEU CURRÍCULO AGORA ---></a>
</div>
</div>
</section>
<!-- Corpo do site - CONTRATADOS -->
<section class="empresas-section">
<div class="empresas-content">
<div class="empresas-text">Nossos usuários foram contratados por:</div>
<div class="empresas-logos">
<div class="logo-placeholder" id="google"></div>
<div class="logo-placeholder" id="inter"></div>
<div class="logo-placeholder" id="oracle"></div>
<div class="logo-placeholder" id="master"></div>
<div class="logo-placeholder" id="itau"></div>
</div>
</div>
</section>
<section class="como_funciona">
<div class="container">
<div class="cabecalho">
<h1>Como Funciona?</h1>
<p>Descubra como nosso processo simples e eficiente funciona em apenas 3 passos.</p>
</div>
<div class="container-passos">
<!-- Passo 1 -->
<div class="cartao-passo">
<div class="numero-passo">1</div>
<div class="imagem-passo" id="passo1"></div>
<h3 class="titulo-passo">Cadastro Rápido</h3>
<p class="descricao-passo">
Preencha seus dados rapidamente e crie sua conta em poucos minutos.
</p>
<div class="detalhes-passo">
<h4>Informações Necessárias</h4>
<p>Forneça nome, e-mail e outras informações essenciais para começar.</p>
</div>
</div>
<!-- Passo 2 -->
<div class="cartao-passo">
<div class="numero-passo">2</div>
<div class="imagem-passo" id="passo2"></div>
<h3 class="titulo-passo">Escolha de Opções</h3>
<p class="descricao-passo">
Selecione os serviços ou recursos que deseja utilizar de forma prática e intuitiva.
</p>
<div class="detalhes-passo">
<h4>Dicas Importantes</h4>
<p>Verifique as opções disponíveis e escolha as que melhor atendem suas necessidades.</p>
</div>
</div>
<!-- Passo 3 -->
<div class="cartao-passo">
<div class="numero-passo">3</div>
<div class="imagem-passo" id="passo3"></div>
<h3 class="titulo-passo">Resultado Final</h3>
<p class="descricao-passo">
Complete o processo e aproveite os resultados de forma imediata.
</p>
<div class="detalhes-passo">
<h4>Benefícios</h4>
<p>Tenha acesso aos serviços escolhidos e aos recursos exclusivos disponíveis.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Corpo do site - NOSSOS SERVIÇOS -->
<section class="servicos" id="servicos">
<div class="container">
<h2>A Profile te oferece:</h2>
<div class="grade-servicos">
<div class="cartao-servico">
<h3>Otimização de Currículos</h3>
<p>Transformamos seu currículo para aumentar suas chances de aprovação.</p>
</div>
<div class="cartao-servico" id="imagem1">
</div>
<div class="cartao-servico">
<h3>Perfil Profissional Inteligente</h3>
<p>Destaque suas habilidades em perfis otimizados para recrutadores.</p>
</div>
<div class="cartao-servico">
<h3>Conexão com Vagas Ideais</h3>
<p>Receba oportunidades alinhadas ao seu perfil profissional.</p>
</div>
<div class="cartao-servico" id="imagem2">
</div>
<div class="cartao-servico">
<h3>Personal Branding Profissional</h3>
<p>Fortaleça sua marca pessoal e aumente sua visibilidade.</p>
</div>
</div>
</div>
</section>
<!-- Corpo do site - SLOGAN -->
<section class="secao-slogan">
<div class="container">
<div class="container-slogan">
<h2 class="texto-slogan">
Conecte seu <span class="destaque-slogan">talento</span> às melhores
<span class="destaque-slogan">oportunidades.</span>
</h2>
</div>
</div>
</section>
<!-- Corpo do site - MODELOS -->
<section class="modelos">
<header class="cabecalho">
<h1 class="titulo-principal">Modelos de Currículo</h1>
<p class="subtitulo">Escolha o modelo perfeito para destacar seu perfil.</p>
</header>
<div class="grade-modelos">
<div class="cartao-modelo">
<div class="area-imagem" id="cleantech">
<div class="icone-placeholder"></div>
</div>
<h2 class="titulo-modelo">CleanTech</h2>
<p class="descricao-modelo">
Layout limpo com foco em métricas e resultados.
</p>
<button class="botao-selecionar">
<a href="../pages/curriculumForms.html">Selecionar Modelo</a></button>
</div>
<div class="cartao-modelo">
<div class="area-imagem" id="classicpro">
<div class="icone-placeholder"></div>
</div>
<h2 class="titulo-modelo">ClassicPro</h2>
<p class="descricao-modelo">
Estrutura clássica priorizando histórico.
</p>
<button class="botao-selecionar">
<a href="../pages/curriculumForms.html">Selecionar Modelo</a>
</button>
</div>
</div>
</section>
<!-- Corpo do site - SOBRE -->
<section class="sobre" id="sobre">
<div class="container">
<div class="grade-sobre">
<div class="texto-sobre">
<h2>Sobre a Profile</h2>
<p>A Profile nasceu com a missão de democratizar currículos e tornar os processos seletivos mais
justos e eficientes. Acreditamos que todo profissional merece se apresentar de forma clara,
atrativa e profissional.
Combinamos design moderno, tecnologia e inteligência artificial para criar currículos
personalizados que destacam as habilidades e experiências de cada pessoa. Nosso objetivo é
simplificar a jornada de quem busca oportunidades, oferecendo praticidade e impacto visual
para aumentar as chances de conquistar a vaga dos sonhos.</p>
</div>
<div class="imagem-sobre"></div>
</div>
</div>
</section>
<!-- Corpo do site - DEPOIMENTOS -->
<section class="depoimentos" id="depoimentos">
<div class="container">
<h2>O Que Dizem Nossos Clientes</h2>
<div class="container-depoimentos">
<div class="depoimento" data-cliente="maria">
<p>A Profile transformou completamente meu currículo! Consegui uma entrevista em uma
empresa de
tecnologia dos sonhos em menos de uma semana. Recomendo demais!</p>
<div class="autor-depoimento" id="maria">— Maria Silva, Analista de Sistemas</div>
</div>
<div class="depoimento" data-cliente="joao">
<p>Graças à Profile, meu perfil no LinkedIn agora se destaca e recebo mensagens de
recrutadores
diariamente. O serviço é realmente eficiente e estratégico.</p>
<div class="autor-depoimento" id="joao">— João Santos, Engenheiro de Software</div>
</div>
<div class="depoimento" data-cliente="ana">
<p>O time da Profile me ajudou a alinhar meu currículo ao mercado de startups. Consegui
aumentar
minhas oportunidades de entrevista em 200%!</p>
<div class="autor-depoimento" id="ana">— Ana Costa, Product Manager</div>
</div>
<div class="depoimento" data-cliente="lucas">
<p>Simplesmente incrível! A Profile não só melhorou meu currículo, mas também me deu
dicas
valiosas para entrevistas e networking. Senti a diferença na hora.</p>
<div class="autor-depoimento" id="lucas">— Lucas Pereira, UX Designer</div>
</div>
<div class="depoimento" data-cliente="carla">
<p>Fiquei impressionada com a qualidade do serviço. Meu perfil profissional agora parece
muito
mais profissional e estratégico, graças à Profile.</p>
<div class="autor-depoimento" id="carla">— Carla Mendes, Analista de Marketing</div>
</div>
<div class="depoimento" data-cliente="rafael">
<p>A Profile realmente entende o que o mercado procura. Meu currículo e perfil online
agora
chamam atenção e recebo convites para oportunidades que antes pareciam impossíveis.
</p>
<div class="autor-depoimento" id="rafael">— Rafael Lima, Desenvolvedor Full Stack</div>
</div>
</div>
</div>
</section>
</main>
<!-- Rodapé -->
<footer id="footer-site">
<!-- Superior ou caixa newsletter -->
<section id="box-top-footer">
<section id="text-top-footer">
<div>
<img src="./assets/images/cameleao.svg" alt="Logo do profile" title="Logo profile">
</div>
<p>"Seu currículo, moldado para o sucesso."</p>
</section>
<section id="btn-top-footer">
<a href="./pages/curriculumForms.html" target="_self" rel="next">
<span class="material-symbols-outlined">
lightbulb
</span>
Comece por aqui!
</a>
</section>
</section>
<!-- Corpo do rodapé -->
<section id="box-middle-footer">
<h2>Profile.com</h2>
<ul id="footer-list-links">
<li>
<a href="./index.html" target="_self" rel="next">Home</a>
</li>
<li>
<a href="./pages/about.html" target="_self" rel="next">Sobre nós</a>
</li>
<li>
<a href="./pages/contact.html" target="_self" rel="next">Contato</a>
</li>
</ul>
<ul id="footer-list-social">
<li>
<a href="https://www.facebook.com/" target="_blank" rel="noopener"
class="icon-facebook"><iconify-icon icon="uil:facebook" width="30"></iconify-icon></span></a>
</li>
<li>
<a href="https://x.com/" target="_blank" rel="noopener" class="icon-x"><iconify-icon
icon="prime:twitter" width="30"></iconify-icon></a>
</li>
<li>
<a href="https://www.instagram.com/" target="_blank" rel="noopener"
class="icon-instagram"><iconify-icon icon="lucide:instagram" width="30"></iconify-icon></a>
</li>
<li>
<a href="https://www.linkedin.com/" target="_blank" rel="noopener"
class="icon-linkedin"><iconify-icon icon="uil:linkedin" width="30"></iconify-icon></a>
</li>
</ul>
</section>
<!-- Copyright do rodapé -->
<section id="copyright">
<p>© 2025 Profile. Todos os direitos reservados.</p>
</section>
</footer>
<!-- API Libras -->
<div vw class="enabled">
<div vw-access-button class="active"></div>
<div vw-plugin-wrapper>
<div class="vw-plugin-top-wrapper"></div>
</div>
</div>
<!-- API Acessibilidade -->
<script src="https://website-widgets.pages.dev/dist/sienna.min.js" defer></script>
</body>
<!-- API Libras -->
<script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
<!-- API Libras -->
<script>
new window.VLibras.Widget('https://vlibras.gov.br/app');
</script>
<!-- JS Main -->
<script src="./js/main.js" defer></script>
<!-- Link para Icones do Iconify -->
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
</html>