-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
369 lines (358 loc) · 17.6 KB
/
index.html
File metadata and controls
369 lines (358 loc) · 17.6 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
<!doctype html>
<html lang="en">
<head>
<title>DevOPS</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Meta tags Open Graph para compartilhamento no WhatsApp -->
<meta property="og:title" content="DevOPS">
<meta property="og:description" content="Transforme seu negócio com sistemas que fazem sentido para você.">
<meta property="og:image" content="https://i.imgur.com/CB7ZApC.png">
<meta property="og:url" content="https://devops.tec.br">
<link rel="shortcut icon" href="./assets/logo-violeta.png" type="image/x-icon">
<link
href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
rel="stylesheet"
/>
<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=Darker+Grotesque:wght@800&family=Nunito+Sans:wght@100;200;300;400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: "Nunito Sans", sans-serif;
}
</style>
</head>
<body class="overflow-x-hidden w-screen">
<header
id="main-nav"
class=" w-full bg-[#131313] flex md:flex-row flex-col items-center justify-between md:px-20 max- md:py-5 text-white z-50 fixed "
>
<a class=" max-md:hidden smooth-scroll w-2/12" href="#home"
><img src="./assets/logotipo-completo-roxo.png" alt="DevOps"
/></a>
<input type="checkbox" name="toggle-mobile" class="hidden peer" id="toggle-mobile">
<label for="toggle-mobile" class=" flex md:hidden w-full justify-center-center py-7 ">
<i class='bx bx-list-ul max-[320px]:pr-10 max-[375px]:pr-[3.2rem] max-[390px]:pr-[3.5rem] pr-[4.50rem] pl-2 text-3xl '></i>
<div class="flex items-center w-full ">
<img src="./assets/logotipo-completo-roxo.png" class=" w-52 " alt="">
</div>
</label>
<nav class=" max-sm:w-full hidden md:flex peer-checked:flex max-sm:text-xl flex-col md:flex-row font-bold md:gap-5 items-center ">
<!-- <a class="smooth-scroll max-sm:w-full max-sm:p-3 max-sm:text-center " href="#home">Sobre Nós</a> DESATIVADO -->
<a class="smooth-scroll max-sm:w-full max-sm:p-3 max-sm:text-center " href="#produtos">Nossos Produtos</a>
<a class="smooth-scroll max-sm:w-full max-sm:p-3 max-sm:text-center " href="#porque">Por que a DevOPS?</a>
<!-- <a class="smooth-scroll max-sm:w-full max-sm:p-3 max-sm:text-center " href="#depoimentos">Depoimentos</a> DESATIVADO -->
<a href="https://wa.me/559884893333" class="smooth-scroll bg-[#596ae7] md:ml-5 max-sm:my-5 p-3 md:p-3 rounded "
>FALE CONOSCO</a
>
</nav>
</header>
<div class=" bg-[#f7f8ff] flex flex-col min-h-screen text-[#131313]">
<section
id="home"
class=" flex flex-col gap-12 md:gap-16 items-center md:px-28 pb-28 "
>
<h1 class=" max-[320px]:pt-30 max-[375px]:pt-32 md:pt-[10.5rem] pt-36 max-[375px]:text-4xl text-[40px] md:text-[90px] font-extrabold text-center leading-tight w-full md:w-2/3">
Transforme seu negócio <br />
com sistemas que fazem sentido para você.
</h1>
<div class=" w-full flex flex-col md:flex-row gap-8 md:gap-2 md:px-64 text-left text-[#596ae7]">
<div class="w-full flex items-center gap-2 ">
<img src=" ./assets/icon-check.png" class="w-20 h-[4.3rem] max-[375px]:w-14 max-[375px]:h-14 md:w-[3.8rem] md:h-[3.8rem] " alt="">
<p class=" w-full max-sm:text-center max-sm:px-4 md:text-[20px]">
Desenvolvemos soluções em sistemas eficientes,
adaptáveis e precisas para diversos tipos de negócio.
</p>
</div>
<div class="w-full flex items-center gap-2 ">
<img src="./assets/icon-check.png" class= " w-20 h-[4.3rem] max-[375px]:w-14 max-[375px]:h-14 md:w-[3.8rem] md:h-[3.8rem]" alt="">
<p class=" items-center max-sm:text-center max-sm:px-4 md:text-[20px] w-full " >
Se você é um empreendedor destemido e com sede de
crescimento, a DevOps pode ser sua parceira confiável.
</p>
</div>
</div>
<div class=" w-full flex flex-col md:flex-row md:py-6 font-bold gap-4 md:gap-16 max-sm:items-center justify-center">
<a
href="https://wa.me/559884893333"
class= " bg-[#596ae7] w-72 md:w-[30rem] p-4 rounded text-center text-white"
><p class=" m-0.5">ENTRE EM CONTATO CONOSCO</p></a
>
<a
href="#porque"
class=" smooth-scroll border-2 border-[#596ae7] md:w-[30rem] w-72 p-4 md:pt-4 md:px-6 rounded text-center text-[#596ae7]"
>POR QUE A DEVOPS?</a
>
</div>
</section>
<section
id="produtos"
class="bg-[#e9ebf4] flex flex-col gap-4 md:gap-12 items-center justify-center pt-24 pb-28 md:pt-36 w-full"
>
<h2 class="font-extrabold text-2xl md:text-[90px]">Conheça as nossas soluções</h2>
<span class="text-[#acacac] text-lg md:text-3xl text-center leading-normal max-sm:mb-8 md:mt-0"
>Desenvolvemos ferramentas inteligentes que facilitam a <br> gestão e
impulsionam o crescimento do seu negócio</span
>
<div class="gap-10 flex flex-col w-full grid-cols-2 items-center ">
<div
class=" hover:scale-95 transition duration-500 bg-[url('https://elephant.ie/wp-content/uploads/2023/06/Stock-Storage-1024x683.jpg')] bg-cover bg-[center_top_0rem] flex flex-col md:h-[35rem] items-center md:w-[35rem] rounded text-white"
>
<div class="bg-[rgba(0,0,0,0.6)] border-[10px] border-[#596ae7] rounded ">
<div class=" flex flex-col max-[425px]:gap-5 justify-end max-[320px]:w-72 h-[35rem] w-80 bg-gradient-to-b from-transparent to-[#000000] items-center md:h-[34rem] md:w-[34rem]">
<h3 class="md:text-[62px] text-5xl font-bold">Stockee</h3>
<span class="text-center text-sm md:text-xl text-[#d3d2d2] mb-6 md:mb-4 mt-0 md:mt-4 leading-relaxed"
>Um estoque simplificado em uma <br> plataforma fácil de usar.</span
>
<div class="flex flex-col md:w-[60%] gap-1 md:mt-5">
<div class="flex items-center gap-1 mb-1">
<img src="./assets/icon-check-white.png" alt="" width="23" height="23">
<p class="font-normal text-sm md:text-lg text-[#d3d2d2]">Acompanhamento em tempo real</p>
</div>
<hr class="border-1 border-[#d3d2d2] h-1 w-full mb-1" />
<div class="flex items-center gap-1 mb-1">
<img src="./assets/icon-check-white.png" alt="" width="23" height="23">
<p class="font-normal text-sm md:text-lg text-[#d3d2d2]">Previsão de demanda</p>
</div>
<hr class="border-1 border-[#d3d2d2] h-1 w-full mb-1" />
<div class="flex items-center gap-1 mb-1">
<img src="./assets/icon-check-white.png" alt="" width="23" height="23">
<p class="font-normal text-sm md:text-lg text-[#d3d2d2]">Redução de desperdícios</p>
</div>
<hr class="border-1 border-[#d3d2d2] h-1 w-full mb-1" />
</div>
<a
href="#"
class="bg-white font-bold md:p-3 py-3 rounded text-center text-base md:text-3xl text-[#596ae7] w-[60%] mt-5 md:mb-16 mb-10"
>Conheça o Stockee</a
>
</div>
</div>
</div>
<div
class="bg-[#596ae7] gap-2 col-span-2 flex flex-col items-center py-10 md:px-56 justify-center rounded-lg text-center text-white"
>
<h3 class="md:text-5xl text-2xl font-bold pb-3">
Entre em contato para uma solução personalizada
</h3>
<span class="pb-5 md:text-xl text-xl text-[#f1f1f1da]"
>Nós propomos soluções eficientes para o seu contexto específico
de negócio.</span
>
<a
href="#contato"
class="bg-white font-extrabold md:py-5 md:px-10 px-3 py-5 rounded text-center text-2xl text-[#131313] md:w-fit md:text-3xl"
>Entre em contato conosco</a
>
</div>
</div>
</section>
<section
id="porque"
class="bg-[url('./assets/bg-porque.png')] md:bg-auto bg-[center_top_0rem] bg-cover bg-no-repeat h-screen pb-10"
>
<div
class="bg-[rgba(0,0,0,0.87)] flex md:flex-row flex-col w-full md:gap-96 items-center min-h-screen max-h-screen pt-16 max-[375px]:pt-16 px-16 md:p-28 text-white"
>
<div class="flex flex-col gap-2 md:gap-5 max-sm:mt-10">
<h1 class=" md:text-7xl text-2xl font-extrabold md:leading-snug">
Por que escolher <br />
a DevOPS?
</h1>
<span class="text-[#acacac] md:text-[30px] text-[13px] leading-relaxed max-[320px]:mb-8 mb-10"
>Aqui o empreendedorismo, tecnologia e <br />
colaboração andam de mãos dadas.</span
>
<a
href="https://wa.me/559884893333"
class="bg-[hsl(233,75%,63%)] font-bold text-lg w-96 rounded text-center text-white p-5 hidden md:block"
>ENTRE EM CONTATO CONOSCO</a
>
</div>
<div class="flex flex-col md:gap-16 gap-5 md:ml-[15%]">
<!-- Quadro selos mobile 2 primeiros selos -->
<div class="hidden max-sm:flex gap-2">
<div class="flex flex-col text-center items-center">
<img
class="mb-2 md:w-16 md:h-16 w-10 h-10"
src="./assets/icon-hand.png"
alt=""
/>
<h3 class="md:text-[20px] text-sm">Comprometimento Total</h3>
<span class="text-[#acacac] max-sm:text-sm"
>Nós nos importamos com o sucesso <br />
do seu negócio tanto quanto você.</span
>
</div>
<div class="flex flex-col text-center items-center">
<img
class="mb-2 md:w-[4.5rem] md:h-[4.5rem] w-10 h-10"
src="./assets/icon-garantia.png"
alt=""
/>
<h3 class="md:text-[20px] text-sm ">Qualidade <br> Garantida</h3>
<span class="text-[#acacac] max-sm:text-sm"
>Desenvolvemos softwares robustos,<br />
seguros e de fácil utilização.</span
>
</div>
</div>
<!-- fim do quadro -->
<div class="flex flex-col max-sm:hidden text-center gap-2 items-center">
<img
class="mb-5 md:w-16 md:h-16 w-10 h-10"
src="./assets/icon-hand.png"
alt=""
/>
<h3 class="md:text-[20px] text-sm">Comprometimento Total</h3>
<span class="text-[#acacac] max-sm:text-sm"
>Nós nos importamos com o sucesso <br />
do seu negócio tanto quanto você.</span
>
</div>
<div class="flex flex-col max-sm:hidden text-center gap-2 items-center">
<img
class="mb-5 md:w-[4.5rem] md:h-[4.5rem] w-10 h-10"
src="./assets/icon-garantia.png"
alt=""
/>
<h3 class="md:text-[20px] text-sm ">Qualidade Garantida</h3>
<span class="text-[#acacac] max-sm:text-sm"
>Desenvolvemos softwares robustos,<br />
seguros e de fácil utilização.</span
>
</div>
<div class="flex flex-col max-sm:mt-5 text-center gap-2 items-center">
<img
class="mb-0 md:mb-5 md:w-16 md:h-16 w-9 h-9"
src="./assets/icon-grafico.png"
alt=""
/>
<h3 class="md:text-[20px] text-sm">Escalamos com você</h3>
<span class="text-[#acacac] max-sm:text-sm"
>Nossas soluções crescem com o seu negócio,<br />
dando a você o que precisa, quando precisa.</span
>
</div>
</div>
<a
href="#contato"
class="bg-[hsl(233,75%,63%)] font-bold p-3 rounded text-center whitespace-nowrap text-white mt-5 block md:hidden "
>ENTRE EM CONTATO CONOSCO</a
>
</div>
</section>
<!-- <section DESATIVADO ATÉ TERMOS DEPOIMENTOS
id="depoimentos"
class="bg-[#131313] flex flex-col md:flex-row max-sm:items-center gap-5 h-screen text-white"
>
<div class=" bg-[url('./assets/bg-depoimento.png')] bg-cover bg-[center_top_0rem] flex md:flex-row w-full max-sm:h-1/2 md:w-1/2 ">
<h1 class="bg-[rgba(89,106,231,0.79)] text-4xl flex flex-col md:flex-row h-full w-full font-bold md:text-6xl items-center md:justify-start md:pl-24 justify-center leading-snug md:leading-snug ">
O que nossos <br> clientes andam<br> dizendo sobre nós
</h1>
</div>
<div class=" flex flex-col gap-5 md:px-28 md:pb-28 md:pt-[7rem] md:w-1/2 max-sm:px-5">
<div class="flex flex-col gap-5 max-sm:text-[12px] max-sm:w-full ">
<q
>Essa DevOps é uma altarquia, uma penteadeira cheia de cacareco,
um caminhão carregado de gaiola. A melhor empresa de software do
Brasil. Do Brasil não, das Américas. Das Américas não, do mundo.
Dessa empresa não tem o que tesourar. É ou não é, doquinha?</q
>
<div class="flex gap-5 h-10 md:h-16">
<img
class="rounded-full h-full "
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAmwlbYHH9tK0-byINsPsZNK6Yc425-wI8iQ&usqp=CAU"
alt="Coxinha"
/>
<div class="flex flex-col justify-center">
<b class="font-extrabold md:text-lg">Coxinha</b>
<span class="font-thin text-[#acacac]">Fofoqueiro</span>
</div>
</div>
</div>
<hr class="border-1 border-[#596ae7] h-1 w-full" />
<div class="flex flex-col gap-5 max-sm:text-[12px]">
<q>É sim, coxinha, é sim.</q>
<div class="flex gap-5 h-10 md:h-16">
<img
class="rounded-full h-full"
src="https://pbs.twimg.com/profile_images/1683530691/coxinha-e-doquinha_400x400.jpg"
alt="Doquinha"
/>
<div class="flex flex-col justify-center">
<b class="font-extrabold md:text-lg">Doquinha</b>
<span class="font-thin text-[#acacac]"
>Auxiliar de Fofoqueiro</span
>
</div>
</div>
</div>
<hr class="border-1 border-[#596ae7] h-1 w-full" />
</div>
</section> -->
<footer
class="bg-[#e9ebf4] flex flex-col gap-5 md:px-28 py-10 text-[#acacac] text-center"
>
<div class="flex md:flex-row flex-col gap-10 md:gap-0 items-center justify-between py-10 md:py-20">
<div class="flex flex-col gap-5 text-[#596ae7]">
<img
class="md:h-20 max-sm:w-72 max-[320px]:w-62 "
src="./assets/logotipo-completo-roxo.png"
alt="DevOps"
/>
<div class="flex gap-2">
<i class="bx bxl-github text-3xl"></i>
<i class="bx bxl-instagram text-3xl"></i>
<i class="bx bxl-linkedin text-3xl"></i>
<i class="bx bxs-phone text-3xl"></i>
<i class="bx bx-envelope text-3xl"></i>
</div>
</div>
<div class="flex max-[320px]:gap-5 gap-5 md:gap-20 max-sm:mt-5">
<div class="flex flex-col gap-3 items-start max-[320px]:text-sm ">
<h4
class="border-l-4 border-[#596ae7] font-bold px-3 max-[320px]:text-sm text-xl text-[#131313]"
>
Produtos
</h4>
<span>Stockee</span>
</div>
<div class="flex flex-col gap-3 items-start max-[320px]:text-sm ">
<h4
class="border-l-4 border-[#596ae7] font-bold px-3 text-xl max-[320px]:text-sm text-[#131313]"
>
Empresa
</h4>
<span>Quem somos nós</span>
<span>Ética de conduta</span>
<span>Trabalhe conosco</span>
<span>Missões</span>
</div>
<div class="flex flex-col gap-3 items-start max-[320px]:text-sm ">
<h4
class="border-l-4 border-[#596ae7] font-bold px-3 max-[320px]:text-sm text-xl text-[#131313]"
>
Blog
</h4>
<span>Institucional</span>
<span>E-books</span>
<span>Podcast</span>
<span>Artigos</span>
</div>
</div>
</div>
<small class="max-sm:mt-10"
>Copyright © DEVOPS 2023 - Todos os direitos reservados</small
>
</footer>
</div>
<script src="./script.js"></script>
</body>
</html>