-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
171 lines (151 loc) · 12.4 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
<!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">
<title>Securitas Tech</title>
<link rel="icon" href="./assets/imgs/icons8-confluence-48.png">
<link rel="stylesheet" href="./assets/styles/main.css">
<link rel="stylesheet" href="./assets/styles/global.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<header>
<nav>
<div class="logo">
<i class="fa-brands fa-confluence"></i>
<h2>Securitas Tech</h2>
</div>
<ul>
<a href="#about" class="item-menu"><li>Sobre</li></a>
<a href="#servicos" class="item-menu"><li>Serviços</li></a>
<a href="#contact" class="item-menu"><li>Contato</li></a>
</ul>
</nav>
<div id="intro">
<div class="content">
<h1>Securitas Tech</h1>
<h3>Segurança Digital, Desenvolvimento de Software e Consultoria de TI</h3>
<h5>Conectados com Segurança, Impulsionando o Futuro Digital!
</h5>
<a href="#contact" class="btn">Juntar-se a nós</a>
</div>
</div>
</header>
<main>
<section id="about" class="w-4/5 h-full gap-10 flex flex-col m-auto pt-5">
<h1 class="basis-full text-white text-[40px] mt-[50px] mb-5 pl-5">Quem Somos
</h1>
<div class="make flex items-center w-full">
<div class="bg-[#141C23] text-1sm text-white gap-2.5 w-[45%] h-[300px] p-5">
<h2 class="text-[#13ED9F] text-xl">Feita para você</h2>
<p>Somos uma empresa de tecnologia e segurança digital apaixonada por conectar pessoas e garantir que todos possam explorar as oportunidades do mundo digital com confiança. Nosso foco é fornecer soluções abrangentes de segurança digital para proteger dados, informações e infraestrutura. Com uma equipe de especialistas altamente qualificados, atualizados sobre as últimas tendências e tecnologias emergentes, desenvolvemos soluções personalizadas para atender às necessidades de cada cliente.</p>
<i class="fa-solid fa-angles-up"></i>
</div>
<img src="./assets/imgs/blog_5_problemas_de_tecnologia_fargotech 1.png" alt="" class="w-6/12 h-[340px] justify-self-end">
</div>
<div class="history flex items-center w-full">
<img src="./assets/imgs/9nw3mxx40tcmr7swdh50uaubp 1.png" alt="" class="w-6/12 h-[340px] justify-self-end">
<div class="bg-[#141C23] text-1sm text-white gap-2.5 w-[45%] h-[300px] p-5">
<h2 class="text-[#13ED9F] text-xl">Nossa história</h2>
<p>Há alguns anos, um grupo de amigos, entusiastas da tecnologia se uniu com um objetivo em comum: criar uma empresa que unisse o poder da tecnologia com a importância da segurança digital. Assim, nasceu a Securitas Tech, uma empresa de tecnologia e segurança digital, fundada com a missão de proteger e capacitar indivíduos e organizações em um mundo cada vez mais conectado. Desde o início, percebemos que o avanço tecnológico trazia consigo não apenas novas possibilidades, mas também desafios complexos de segurança cibernética.</p>
<i class="fa-sharp fa-solid fa-chart-simple "></i>
</div>
</div>
<a href="./assets/pages/sobre.html" class="text-center text-xl no-underline hover:transition-[0.3s] hover:scale-[1.2]"><span>Veja mais sobre nós ...</span></a>
</section>
<section id="servicos" class="w-4/5 bg-[#141C23] mt-10 m-auto pt-[70px]">
<div class="serviços-nav text-[white] w-[85%] pl-5 h-full">
<h2 class="text-[40px]">Serviços</h2>
<p class="mx-0 my-[50px]">Estamos comprometidos em fornecer serviços de alta qualidade em todas essas áreas, ajudando sua empresa a aproveitar ao máximo a tecnologia para impulsionar o <span>sucesso e a competitividade.</span></p>
</div>
<div class="mini-services-geral flex flex-col items-center justify-between h-full">
<div class="mini-services flex flex-col bg-[#131212] w-[90%] h-full justify-around gap-5 m-[30px] p-5">
<h2 class="text-2xl"><span>Desenvolvimento de Software:</span></h2>
<p class="text-[white]">Nosso serviço de desenvolvimento de software oferece soluções personalizadas para atender às necessidades específicas da sua empresa. Nossa equipe de desenvolvedores altamente qualificados utiliza as mais recentes tecnologias e práticas de programação para criar aplicativos e sistemas eficientes, escaláveis e intuitivos. Desde o planejamento e design até a implementação e manutenção.</p>
<a href="assets/pages/desenvolvimento.html" class="vermais-serv flex items-center justify-center w-[150px] h-10 no-underline text-sm text-black bg-[#13ED9F] font-bold rounded-[10px] hover:transition-[0.3s] hover:scale-110">Ver mais</a>
</div>
<div class="mini-services flex flex-col bg-[#131212] w-[90%] h-full justify-around gap-5 m-[30px] p-5">
<h2 class="text-2xl"><span>Segurança Digital: </span></h2>
<p class="text-[white]">A segurança digital é fundamental nos dias de hoje, e oferecemos um serviço abrangente para proteger sua empresa contra ameaças cibernéticas. Nossa equipe de especialistas em segurança digital trabalha para identificar e mitigar vulnerabilidades, implementar medidas de proteção avançadas, como firewalls e sistemas de detecção de intrusão, além de fornecer monitoramento contínuo e resposta a incidentes. Nossa abordagem proativa garante que seus dados, sistemas e infraestrutura estejam seguros contra ataques cibernéticos.</p>
<a href="./assets/pages/seguranca.html" class="vermais-serv flex items-center justify-center w-[150px] h-10 no-underline text-sm text-black bg-[#13ED9F] font-bold rounded-[10px] hover:transition-[0.3s] hover:scale-110">Ver mais</a>
</div>
<div class="mini-services flex flex-col bg-[#131212] w-[90%] h-full justify-around gap-5 m-[30px] p-5">
<h2 class="text-2xl"><span>Consultoria em TI:</span></h2>
<p class="text-[white]">Nossa consultoria de TI oferece orientação especializada para ajudar sua empresa a tomar decisões estratégicas relacionadas à tecnologia da informação. Nossa equipe de consultores experientes analisa suas necessidades e objetivos, avalia sua infraestrutura atual e propõe soluções sob medida para otimizar seus processos de negócio, aumentar a eficiência operacional e impulsionar a inovação tecnológica. Com nossa consultoria de TI, você pode contar com insights valiosos para tomar decisões informadas e alinhar sua estratégia de TI com seus objetivos empresariais.</p>
<a href="assets/pages/consultoria.html" class="vermais-serv flex items-center justify-center w-[150px] h-10 no-underline text-sm text-black bg-[#13ED9F] font-bold rounded-[10px] hover:transition-[0.3s] hover:scale-110">Ver mais</a>
</div>
</div>
<div class="quali-equip text-[white] text-sm w-4/5 m-auto pb-[30px]">
<p>Nossa equipe é composta por profissionais altamente qualificados e experientes em suas respectivas áreas. Temos um histórico comprovado de <span>sucesso no desenvolvimento de software personalizado, implementação de medidas de segurança digital e consultoria de TI eficaz.</span> Nossa experiência nos permite oferecer soluções sob medida para atender às suas necessidades específicas.</p>
</div>
</section>
<!-- CONTATO -->
<section id="contact" class="w-4/5 flex flex-wrap m-auto pt-5">
<h2 class="title-container basis-full text-white text-[40px] mt-[50px] mb-5">Contato</h2>
<div class="inform-contact w-[80%] text-white flex flex-col justify-between px-5 py-10 md:w-6/12">
<p>Entre em contato conosco hoje mesmo e descubra como podemos ajudar a <span>impulsionar sua empresa para o futuro!</span> Estamos ansiosos para ouvir suas necessidades, responder suas perguntas e oferecer soluções tecnológicas personalizadas. Não perca tempo, estamos aqui para ajudar. Contate-nos agora mesmo!</p>
<div class="contact-container flex items-center gap-5">
<i class="fa-solid fa-globe text-[50px] text-[#13ED9F]"></i>
<div class="justify-self-center">
<h4 class="text-xl">Nosso endereço:</h4>
<p>Av. Primeiro de Maio, 720, Jaguaribe, João Pessoa - PB.</p>
</div>
</div>
<div class="contact-container flex items-center gap-5">
<i class="fa-solid fa-envelope text-[50px] text-[#13ED9F]"></i>
<div class="justify-self-center">
<h4 class="text-xl">Nosso e-mail:</h4>
<p>contato@securitastech.com.br</p>
</div>
</div>
<div class="contact-container flex items-center gap-5">
<i class="fa-solid fa-phone text-[50px] text-[#13ED9F]"></i>
<div class="justify-self-center">
<h4 class="text-xl">Nosso telefone:</h4>
<p>+55 (83) 3513 - 3745</p>
</div>
</div>
<img src="./assets/imgs/inovacao-875x500 1.png" alt="" class="img-con">
</div>
<div class="form-container">
<h3>Fale conosco</h3>
<form action="./assets/pages/agradecimento.html" class="form">
<input type="text" placeholder="Nome" class="input-item" required>
<input type="email" placeholder="E-mail" class="input-item" required>
<textarea name="" id="" cols="30" rows="10" placeholder="Digite sua menssagem ..." class="input-item"></textarea>
<input type="submit" class="w-[200px] h-[60px] text-xl bg-[#13ED9F] flex justify-center items-center cursor-pointer no-underline text-black font-bold transition-[0.3s] mt-2.5 rounded-[10px] border-[none] hover:scale-110 font-bold" value="Enviar">
</form>
</div>
</section>
<section class="maps flex flex-col justify-center gap-5 m-[50px]">
<p class="text-white text-center text-lg">Nossa localização no <span>Google Maps</span></p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3958.917279419156!2d-34.87604522534956!3d-7.1355642928684695!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7ace810852ae4f1%3A0xaf5445223401f2bb!2sIFPB%20-%20Campus%20Jo%C3%A3o%20Pessoa!5e0!3m2!1spt-BR!2sbr!4v1684964439923!5m2!1spt-BR!2sbr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="w-4/5 h-[300px] m-auto show"></iframe>
</section>
</main>
<footer>
<section class="company_name">
<div class="footer_logo">
<i class="fa-brands fa-confluence"></i>
<h1>Securitas Tech</h1>
</div>
</section>
<section class="nossas_redes">
<p>Nossas redes sociais:</p>
<i class="fa-brands fa-square-facebook"></i>
<i class="fa-brands fa-linkedin"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-whatsapp"></i>
</section>
<section class="copyright">
<p>Copyright © 2023 Securitas Tech.</p>
<p>Todos os direitos reservados.</p>
</section>
<section class="voltar_topo">
<a href="#" class="back-top">Voltar ao topo<i class="fa-solid fa-circle-arrow-up"></i></a>
</section>
</footer>
<script src="https://kit.fontawesome.com/cf02d6d2b4.js" crossorigin="anonymous"></script>
</body>
</html>