Hugging Face's logo

Spaces:
marcospaiva
/
lab
Running

App Files Community
marcospaiva commited on
Commit
9ec3c7b
·
verified ·
1 Parent(s): 297b6ec

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +875 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Lab
3
- emoji: 📚
4
  colorFrom: green
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: lab
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,875 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Serviços Digitais - Soluções em Tecnologia</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .service-card:hover {
11
+ transform: translateY(-5px);
12
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
13
+ }
14
+ .modal {
15
+ transition: opacity 0.3s ease, visibility 0.3s ease;
16
+ }
17
+ .modal-content {
18
+ max-height: 90vh;
19
+ overflow-y: auto;
20
+ }
21
+ @keyframes fadeIn {
22
+ from { opacity: 0; }
23
+ to { opacity: 1; }
24
+ }
25
+ .animate-fadeIn {
26
+ animation: fadeIn 0.5s ease-out;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gray-50 font-sans">
31
+ <!-- Header -->
32
+ <header class="bg-gradient-to-r from-blue-600 to-indigo-800 text-white shadow-lg">
33
+ <div class="container mx-auto px-6 py-8">
34
+ <div class="flex flex-col md:flex-row justify-between items-center">
35
+ <div class="flex items-center mb-6 md:mb-0">
36
+ <i class="fas fa-laptop-code text-3xl mr-3"></i>
37
+ <h1 class="text-3xl font-bold">TechSolutions</h1>
38
+ </div>
39
+ <nav class="flex space-x-1 md:space-x-6">
40
+ <a href="#services" class="px-3 py-2 rounded hover:bg-blue-700 transition">Serviços</a>
41
+ <a href="#about" class="px-3 py-2 rounded hover:bg-blue-700 transition">Sobre</a>
42
+ <a href="#contact" class="px-3 py-2 rounded hover:bg-blue-700 transition">Contato</a>
43
+ </nav>
44
+ </div>
45
+ <div class="mt-16 text-center">
46
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">Soluções Digitais para seu Negócio</h2>
47
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Transformamos ideias em realidade com tecnologia de ponta e design inovador</p>
48
+ <a href="#services" class="bg-white text-blue-600 font-bold px-8 py-3 rounded-full hover:bg-gray-100 transition duration-300 inline-block">
49
+ Conheça nossos serviços
50
+ </a>
51
+ </div>
52
+ </div>
53
+ </header>
54
+
55
+ <!-- Services Section -->
56
+ <section id="services" class="py-16 bg-white">
57
+ <div class="container mx-auto px-6">
58
+ <div class="text-center mb-16">
59
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Nossos Serviços</h2>
60
+ <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
61
+ <p class="text-gray-600 max-w-2xl mx-auto">Oferecemos soluções completas para impulsionar sua presença digital e otimizar seus processos</p>
62
+ </div>
63
+
64
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
65
+ <!-- Service 1: Aplicações com IA -->
66
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 animate-fadeIn">
67
+ <div class="p-6">
68
+ <div class="flex items-center mb-4">
69
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
70
+ <i class="fas fa-brain text-blue-600 text-xl"></i>
71
+ </div>
72
+ <h3 class="text-xl font-semibold text-gray-800">Aplicações com IA</h3>
73
+ </div>
74
+ <p class="text-gray-600 mb-6">Desenvolvimento de soluções personalizadas utilizando Inteligência Artificial para otimizar processos e gerar valor.</p>
75
+ <div class="flex space-x-3">
76
+ <button onclick="openModal('modal1')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition flex items-center">
77
+ <i class="fas fa-info-circle mr-2"></i> Saiba Mais
78
+ </button>
79
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md transition flex items-center">
80
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
81
+ </a>
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- Service 2: Automações com IA -->
87
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 animate-fadeIn">
88
+ <div class="p-6">
89
+ <div class="flex items-center mb-4">
90
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
91
+ <i class="fas fa-robot text-purple-600 text-xl"></i>
92
+ </div>
93
+ <h3 class="text-xl font-semibold text-gray-800">Automações com IA</h3>
94
+ </div>
95
+ <p class="text-gray-600 mb-6">Criação de fluxos automatizados utilizando IA para melhorar a eficiência operacional.</p>
96
+ <div class="flex space-x-3">
97
+ <button onclick="openModal('modal2')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition flex items-center">
98
+ <i class="fas fa-info-circle mr-2"></i> Saiba Mais
99
+ </button>
100
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md transition flex items-center">
101
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
102
+ </a>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Service 3: Certificado Digital -->
108
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 animate-fadeIn">
109
+ <div class="p-6">
110
+ <div class="flex items-center mb-4">
111
+ <div class="bg-green-100 p-3 rounded-full mr-4">
112
+ <i class="fas fa-certificate text-green-600 text-xl"></i>
113
+ </div>
114
+ <h3 class="text-xl font-semibold text-gray-800">Certificado Digital</h3>
115
+ </div>
116
+ <p class="text-gray-600 mb-6">Emissão rápida e segura de Certificados Digitais A1, com atendimento 100% online.</p>
117
+ <div class="flex space-x-3">
118
+ <button onclick="openModal('modal3')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition flex items-center">
119
+ <i class="fas fa-info-circle mr-2"></i> Saiba Mais
120
+ </button>
121
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md transition flex items-center">
122
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
123
+ </a>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Service 4: Chatbots Inteligentes -->
129
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 animate-fadeIn">
130
+ <div class="p-6">
131
+ <div class="flex items-center mb-4">
132
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
133
+ <i class="fas fa-comments text-yellow-600 text-xl"></i>
134
+ </div>
135
+ <h3 class="text-xl font-semibold text-gray-800">Chatbots Inteligentes</h3>
136
+ </div>
137
+ <p class="text-gray-600 mb-6">Criação de chatbots personalizados para atendimento automático em sites e redes sociais.</p>
138
+ <div class="flex space-x-3">
139
+ <button onclick="openModal('modal4')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition flex items-center">
140
+ <i class="fas fa-info-circle mr-2"></i> Saiba Mais
141
+ </button>
142
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md transition flex items-center">
143
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
144
+ </a>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Service 5: Design Gráfico e Edição de Vídeos -->
150
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 animate-fadeIn">
151
+ <div class="p-6">
152
+ <div class="flex items-center mb-4">
153
+ <div class="bg-red-100 p-3 rounded-full mr-4">
154
+ <i class="fas fa-paint-brush text-red-600 text-xl"></i>
155
+ </div>
156
+ <h3 class="text-xl font-semibold text-gray-800">Design Gráfico e Edição de Vídeos</h3>
157
+ </div>
158
+ <p class="text-gray-600 mb-6">Produção de designs criativos e vídeos profissionais para comunicar a identidade visual da marca.</p>
159
+ <div class="flex space-x-3">
160
+ <button onclick="openModal('modal5')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition flex items-center">
161
+ <i class="fas fa-info-circle mr-2"></i> Saiba Mais
162
+ </button>
163
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md transition flex items-center">
164
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
165
+ </a>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Service 6: Desenvolvimento Web -->
171
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 animate-fadeIn">
172
+ <div class="p-6">
173
+ <div class="flex items-center mb-4">
174
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
175
+ <i class="fas fa-code text-indigo-600 text-xl"></i>
176
+ </div>
177
+ <h3 class="text-xl font-semibold text-gray-800">Desenvolvimento Web</h3>
178
+ </div>
179
+ <p class="text-gray-600 mb-6">Criação de sites rápidos, responsivos e otimizados para SEO, com manutenção contínua.</p>
180
+ <div class="flex space-x-3">
181
+ <button onclick="openModal('modal6')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition flex items-center">
182
+ <i class="fas fa-info-circle mr-2"></i> Saiba Mais
183
+ </button>
184
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md transition flex items-center">
185
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
186
+ </a>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Service 7: Gestão de Redes Sociais -->
192
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 animate-fadeIn">
193
+ <div class="p-6">
194
+ <div class="flex items-center mb-4">
195
+ <div class="bg-pink-100 p-3 rounded-full mr-4">
196
+ <i class="fas fa-hashtag text-pink-600 text-xl"></i>
197
+ </div>
198
+ <h3 class="text-xl font-semibold text-gray-800">Gestão de Redes Sociais</h3>
199
+ </div>
200
+ <p class="text-gray-600 mb-6">Planejamento estratégico, criação de conteúdo e gerenciamento de perfis digitais.</p>
201
+ <div class="flex space-x-3">
202
+ <button onclick="openModal('modal7')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition flex items-center">
203
+ <i class="fas fa-info-circle mr-2"></i> Saiba Mais
204
+ </button>
205
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md transition flex items-center">
206
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
207
+ </a>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Service 8: Redes de Computadores -->
213
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 animate-fadeIn">
214
+ <div class="p-6">
215
+ <div class="flex items-center mb-4">
216
+ <div class="bg-teal-100 p-3 rounded-full mr-4">
217
+ <i class="fas fa-network-wired text-teal-600 text-xl"></i>
218
+ </div>
219
+ <h3 class="text-xl font-semibold text-gray-800">Redes de Computadores</h3>
220
+ </div>
221
+ <p class="text-gray-600 mb-6">Planejamento, instalação e suporte técnico para redes corporativas com Windows e Linux.</p>
222
+ <div class="flex space-x-3">
223
+ <button onclick="openModal('modal8')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition flex items-center">
224
+ <i class="fas fa-info-circle mr-2"></i> Saiba Mais
225
+ </button>
226
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md transition flex items-center">
227
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
228
+ </a>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </section>
235
+
236
+ <!-- About Section -->
237
+ <section id="about" class="py-16 bg-gray-100">
238
+ <div class="container mx-auto px-6">
239
+ <div class="flex flex-col md:flex-row items-center">
240
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
241
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
242
+ alt="Equipe de tecnologia" class="rounded-lg shadow-xl w-full">
243
+ </div>
244
+ <div class="md:w-1/2">
245
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">Sobre Nós</h2>
246
+ <div class="w-20 h-1 bg-blue-600 mb-6"></div>
247
+ <p class="text-gray-600 mb-4">
248
+ Somos uma equipe de especialistas em tecnologia comprometidos em oferecer soluções digitais inovadoras para empresas de todos os tamanhos.
249
+ </p>
250
+ <p class="text-gray-600 mb-6">
251
+ Combinamos expertise técnica com criatividade para desenvolver produtos que realmente fazem a diferença no seu negócio, aumentando eficiência, reduzindo custos e melhorando a experiência do cliente.
252
+ </p>
253
+ <div class="flex flex-wrap gap-4">
254
+ <div class="flex items-center bg-white px-4 py-2 rounded-full shadow-sm">
255
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
256
+ <span class="text-gray-700">+100 Projetos</span>
257
+ </div>
258
+ <div class="flex items-center bg-white px-4 py-2 rounded-full shadow-sm">
259
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
260
+ <span class="text-gray-700">+50 Clientes</span>
261
+ </div>
262
+ <div class="flex items-center bg-white px-4 py-2 rounded-full shadow-sm">
263
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
264
+ <span class="text-gray-700">5 Anos no Mercado</span>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </section>
271
+
272
+ <!-- CTA Section -->
273
+ <section class="py-16 bg-gradient-to-r from-blue-600 to-indigo-800 text-white">
274
+ <div class="container mx-auto px-6 text-center">
275
+ <h2 class="text-3xl font-bold mb-6">Pronto para transformar seu negócio?</h2>
276
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Entre em contato agora mesmo e descubra como podemos ajudar você a alcançar seus objetivos digitais.</p>
277
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="bg-white text-blue-600 font-bold px-8 py-3 rounded-full hover:bg-gray-100 transition duration-300 inline-block">
278
+ <i class="fab fa-whatsapp mr-2"></i> Fale conosco no WhatsApp
279
+ </a>
280
+ </div>
281
+ </section>
282
+
283
+ <!-- Contact Section -->
284
+ <section id="contact" class="py-16 bg-white">
285
+ <div class="container mx-auto px-6">
286
+ <div class="text-center mb-16">
287
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Entre em Contato</h2>
288
+ <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
289
+ <p class="text-gray-600 max-w-2xl mx-auto">Tem dúvidas ou quer saber mais sobre nossos serviços? Estamos aqui para ajudar!</p>
290
+ </div>
291
+
292
+ <div class="flex flex-col md:flex-row gap-10">
293
+ <div class="md:w-1/2">
294
+ <form class="space-y-6">
295
+ <div>
296
+ <label for="name" class="block text-gray-700 font-medium mb-2">Nome</label>
297
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
298
+ </div>
299
+ <div>
300
+ <label for="email" class="block text-gray-700 font-medium mb-2">E-mail</label>
301
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
302
+ </div>
303
+ <div>
304
+ <label for="message" class="block text-gray-700 font-medium mb-2">Mensagem</label>
305
+ <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
306
+ </div>
307
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-md transition duration-300">
308
+ Enviar Mensagem
309
+ </button>
310
+ </form>
311
+ </div>
312
+ <div class="md:w-1/2">
313
+ <div class="bg-gray-100 p-8 rounded-lg h-full">
314
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Informações de Contato</h3>
315
+ <div class="space-y-6">
316
+ <div class="flex items-start">
317
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
318
+ <i class="fas fa-map-marker-alt text-blue-600"></i>
319
+ </div>
320
+ <div>
321
+ <h4 class="font-medium text-gray-800">Endereço</h4>
322
+ <p class="text-gray-600">Av. Paulista, 1000<br>São Paulo - SP</p>
323
+ </div>
324
+ </div>
325
+ <div class="flex items-start">
326
+ <div class="bg-green-100 p-3 rounded-full mr-4">
327
+ <i class="fas fa-envelope text-green-600"></i>
328
+ </div>
329
+ <div>
330
+ <h4 class="font-medium text-gray-800">E-mail</h4>
331
+ <p class="text-gray-600">[email protected]</p>
332
+ </div>
333
+ </div>
334
+ <div class="flex items-start">
335
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
336
+ <i class="fas fa-phone-alt text-purple-600"></i>
337
+ </div>
338
+ <div>
339
+ <h4 class="font-medium text-gray-800">Telefone</h4>
340
+ <p class="text-gray-600">(11) 9999-9999</p>
341
+ </div>
342
+ </div>
343
+ <div class="flex items-start">
344
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
345
+ <i class="fab fa-whatsapp text-yellow-600"></i>
346
+ </div>
347
+ <div>
348
+ <h4 class="font-medium text-gray-800">WhatsApp</h4>
349
+ <p class="text-gray-600">(98) 98810-6807</p>
350
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="text-blue-600 hover:underline mt-1 inline-block">Enviar mensagem</a>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </section>
359
+
360
+ <!-- Footer -->
361
+ <footer class="bg-gray-900 text-white py-12">
362
+ <div class="container mx-auto px-6">
363
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
364
+ <div>
365
+ <h3 class="text-xl font-bold mb-4 flex items-center">
366
+ <i class="fas fa-laptop-code mr-2"></i> TechSolutions
367
+ </h3>
368
+ <p class="text-gray-400">Soluções digitais inovadoras para impulsionar seu negócio na era digital.</p>
369
+ </div>
370
+ <div>
371
+ <h4 class="text-lg font-semibold mb-4">Serviços</h4>
372
+ <ul class="space-y-2">
373
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Aplicações com IA</a></li>
374
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Desenvolvimento Web</a></li>
375
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Design Gráfico</a></li>
376
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Redes de Computadores</a></li>
377
+ </ul>
378
+ </div>
379
+ <div>
380
+ <h4 class="text-lg font-semibold mb-4">Links Úteis</h4>
381
+ <ul class="space-y-2">
382
+ <li><a href="#services" class="text-gray-400 hover:text-white transition">Serviços</a></li>
383
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">Sobre Nós</a></li>
384
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contato</a></li>
385
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
386
+ </ul>
387
+ </div>
388
+ <div>
389
+ <h4 class="text-lg font-semibold mb-4">Redes Sociais</h4>
390
+ <div class="flex space-x-4">
391
+ <a href="#" class="bg-gray-800 hover:bg-blue-600 p-3 rounded-full transition">
392
+ <i class="fab fa-facebook-f"></i>
393
+ </a>
394
+ <a href="#" class="bg-gray-800 hover:bg-blue-400 p-3 rounded-full transition">
395
+ <i class="fab fa-twitter"></i>
396
+ </a>
397
+ <a href="#" class="bg-gray-800 hover:bg-pink-600 p-3 rounded-full transition">
398
+ <i class="fab fa-instagram"></i>
399
+ </a>
400
+ <a href="#" class="bg-gray-800 hover:bg-blue-700 p-3 rounded-full transition">
401
+ <i class="fab fa-linkedin-in"></i>
402
+ </a>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ <div class="border-t border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">
407
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 TechSolutions. Todos os direitos reservados.</p>
408
+ <div class="flex space-x-6">
409
+ <a href="#" class="text-gray-400 hover:text-white transition">Termos de Serviço</a>
410
+ <a href="#" class="text-gray-400 hover:text-white transition">Política de Privacidade</a>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ </footer>
415
+
416
+ <!-- Modals -->
417
+ <!-- Modal 1: Aplicações com IA -->
418
+ <div id="modal1" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 invisible transition">
419
+ <div class="modal-content bg-white rounded-lg shadow-xl w-11/12 md:w-2/3 lg:w-1/2 max-w-4xl relative">
420
+ <button onclick="closeModal('modal1')" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
421
+ <i class="fas fa-times text-2xl"></i>
422
+ </button>
423
+ <div class="p-8">
424
+ <div class="flex items-center mb-6">
425
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
426
+ <i class="fas fa-brain text-blue-600 text-xl"></i>
427
+ </div>
428
+ <h3 class="text-2xl font-bold text-gray-800">Aplicações com IA</h3>
429
+ </div>
430
+ <div class="space-y-4 text-gray-700">
431
+ <p>Nossas soluções de Inteligência Artificial são projetadas para transformar dados em insights valiosos e automatizar processos complexos, proporcionando vantagem competitiva para seu negócio.</p>
432
+
433
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">O que oferecemos:</h4>
434
+ <ul class="list-disc pl-6 space-y-2">
435
+ <li>Análises preditivas para antecipar tendências de mercado</li>
436
+ <li>Sistemas de recomendação personalizados</li>
437
+ <li>Assistentes virtuais inteligentes para atendimento ao cliente</li>
438
+ <li>Processamento de linguagem natural para análise de sentimentos</li>
439
+ <li>Visão computacional para reconhecimento de imagens</li>
440
+ </ul>
441
+
442
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Benefícios:</h4>
443
+ <ul class="list-disc pl-6 space-y-2">
444
+ <li>Redução de custos operacionais</li>
445
+ <li>Melhoria na tomada de decisões estratégicas</li>
446
+ <li>Personalização da experiência do cliente</li>
447
+ <li>Automatização de processos repetitivos</li>
448
+ <li>Identificação de oportunidades de negócios</li>
449
+ </ul>
450
+
451
+ <div class="mt-8 bg-blue-50 p-4 rounded-lg">
452
+ <h4 class="font-semibold text-blue-800 mb-2">Como funciona?</h4>
453
+ <p>Nossa equipe de especialistas em IA trabalha em estreita colaboração com você para entender suas necessidades específicas e desenvolver uma solução sob medida que atenda aos seus objetivos de negócios.</p>
454
+ </div>
455
+ </div>
456
+ <div class="mt-8 flex justify-end">
457
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-md transition flex items-center">
458
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
459
+ </a>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+
465
+ <!-- Modal 2: Automações com IA -->
466
+ <div id="modal2" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 invisible transition">
467
+ <div class="modal-content bg-white rounded-lg shadow-xl w-11/12 md:w-2/3 lg:w-1/2 max-w-4xl relative">
468
+ <button onclick="closeModal('modal2')" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
469
+ <i class="fas fa-times text-2xl"></i>
470
+ </button>
471
+ <div class="p-8">
472
+ <div class="flex items-center mb-6">
473
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
474
+ <i class="fas fa-robot text-purple-600 text-xl"></i>
475
+ </div>
476
+ <h3 class="text-2xl font-bold text-gray-800">Automações com IA</h3>
477
+ </div>
478
+ <div class="space-y-4 text-gray-700">
479
+ <p>Transformamos processos manuais e repetitivos em fluxos de trabalho automatizados e inteligentes, liberando sua equipe para focar em atividades estratégicas e criativas.</p>
480
+
481
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Nossas soluções incluem:</h4>
482
+ <ul class="list-disc pl-6 space-y-2">
483
+ <li>Automação de processos de backoffice</li>
484
+ <li>Integração entre sistemas e plataformas</li>
485
+ <li>Fluxos de trabalho inteligentes</li>
486
+ <li>Processamento automatizado de documentos</li>
487
+ <li>Automação de atendimento ao cliente</li>
488
+ </ul>
489
+
490
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Vantagens:</h4>
491
+ <ul class="list-disc pl-6 space-y-2">
492
+ <li>Aumento de produtividade em até 80%</li>
493
+ <li>Redução de erros humanos</li>
494
+ <li>Processos mais rápidos e eficientes</li>
495
+ <li>Economia de tempo e recursos</li>
496
+ <li>Escalabilidade operacional</li>
497
+ </ul>
498
+
499
+ <div class="mt-8 bg-purple-50 p-4 rounded-lg">
500
+ <h4 class="font-semibold text-purple-800 mb-2">Metodologia:</h4>
501
+ <p>Realizamos um diagnóstico completo dos seus processos, identificamos oportunidades de automação e implementamos soluções personalizadas com monitoramento contínuo para garantir os melhores resultados.</p>
502
+ </div>
503
+ </div>
504
+ <div class="mt-8 flex justify-end">
505
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-md transition flex items-center">
506
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
507
+ </a>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </div>
512
+
513
+ <!-- Modal 3: Certificado Digital -->
514
+ <div id="modal3" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 invisible transition">
515
+ <div class="modal-content bg-white rounded-lg shadow-xl w-11/12 md:w-2/3 lg:w-1/2 max-w-4xl relative">
516
+ <button onclick="closeModal('modal3')" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
517
+ <i class="fas fa-times text-2xl"></i>
518
+ </button>
519
+ <div class="p-8">
520
+ <div class="flex items-center mb-6">
521
+ <div class="bg-green-100 p-3 rounded-full mr-4">
522
+ <i class="fas fa-certificate text-green-600 text-xl"></i>
523
+ </div>
524
+ <h3 class="text-2xl font-bold text-gray-800">Certificado Digital</h3>
525
+ </div>
526
+ <div class="space-y-4 text-gray-700">
527
+ <p>Oferecemos emissão rápida e segura de Certificados Digitais A1, com todo o suporte necessário para instalação e utilização, tudo de forma 100% online e com atendimento personalizado.</p>
528
+
529
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Tipos de certificados:</h4>
530
+ <ul class="list-disc pl-6 space-y-2">
531
+ <li>Certificado A1 (válido por 1 ano)</li>
532
+ <li>Certificado e-CPF para pessoas físicas</li>
533
+ <li>Certificado e-CNPJ para empresas</li>
534
+ <li>Certificado NF-e para emissão de notas fiscais</li>
535
+ <li>Certificado para assinatura digital de documentos</li>
536
+ </ul>
537
+
538
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Aplicações:</h4>
539
+ <ul class="list-disc pl-6 space-y-2">
540
+ <li>Assinatura digital de documentos com validade jurídica</li>
541
+ <li>Acesso a sistemas governamentais</li>
542
+ <li>Emissão de notas fiscais eletrônicas</li>
543
+ <li>Autenticação em transações bancárias</li>
544
+ <li>Proteção de dados e comunicações</li>
545
+ </ul>
546
+
547
+ <div class="mt-8 bg-green-50 p-4 rounded-lg">
548
+ <h4 class="font-semibold text-green-800 mb-2">Processo simplificado:</h4>
549
+ <p>Nossa equipe guia você em todas as etapas, desde a escolha do certificado adequado até a instalação e configuração, garantindo que você possa utilizar todos os recursos com segurança e eficiência.</p>
550
+ </div>
551
+ </div>
552
+ <div class="mt-8 flex justify-end">
553
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-md transition flex items-center">
554
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
555
+ </a>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ </div>
560
+
561
+ <!-- Modal 4: Chatbots Inteligentes -->
562
+ <div id="modal4" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 invisible transition">
563
+ <div class="modal-content bg-white rounded-lg shadow-xl w-11/12 md:w-2/3 lg:w-1/2 max-w-4xl relative">
564
+ <button onclick="closeModal('modal4')" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
565
+ <i class="fas fa-times text-2xl"></i>
566
+ </button>
567
+ <div class="p-8">
568
+ <div class="flex items-center mb-6">
569
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
570
+ <i class="fas fa-comments text-yellow-600 text-xl"></i>
571
+ </div>
572
+ <h3 class="text-2xl font-bold text-gray-800">Chatbots Inteligentes</h3>
573
+ </div>
574
+ <div class="space-y-4 text-gray-700">
575
+ <p>Desenvolvemos chatbots personalizados que utilizam Inteligência Artificial para oferecer atendimento automático 24/7 em seu site, aplicativo ou redes sociais, melhorando a experiência do cliente e reduzindo custos.</p>
576
+
577
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Funcionalidades:</h4>
578
+ <ul class="list-disc pl-6 space-y-2">
579
+ <li>Atendimento automático a perguntas frequentes</li>
580
+ <li>Agendamento de serviços e consultas</li>
581
+ <li>Processamento de pedidos e vendas</li>
582
+ <li>Triagem de leads e qualificação</li>
583
+ <li>Integração com CRM e sistemas internos</li>
584
+ <li>Suporte multilíngue</li>
585
+ </ul>
586
+
587
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Vantagens competitivas:</h4>
588
+ <ul class="list-disc pl-6 space-y-2">
589
+ <li>Disponibilidade 24 horas por dia, 7 dias por semana</li>
590
+ <li>Respostas instantâneas aos clientes</li>
591
+ <li>Redução de até 40% no volume de atendimento humano</li>
592
+ <li>Coleta e análise de dados de interação</li>
593
+ <li>Personalização completa para sua marca</li>
594
+ </ul>
595
+
596
+ <div class="mt-8 bg-yellow-50 p-4 rounded-lg">
597
+ <h4 class="font-semibold text-yellow-800 mb-2">Nossa abordagem:</h4>
598
+ <p>Criamos chatbots que realmente entendem a intenção do usuário, com personalidade alinhada à sua marca e capacidade de aprendizado contínuo para melhorar cada vez mais o atendimento.</p>
599
+ </div>
600
+ </div>
601
+ <div class="mt-8 flex justify-end">
602
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-md transition flex items-center">
603
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
604
+ </a>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ </div>
609
+
610
+ <!-- Modal 5: Design Gráfico e Edição de Vídeos -->
611
+ <div id="modal5" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 invisible transition">
612
+ <div class="modal-content bg-white rounded-lg shadow-xl w-11/12 md:w-2/3 lg:w-1/2 max-w-4xl relative">
613
+ <button onclick="closeModal('modal5')" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
614
+ <i class="fas fa-times text-2xl"></i>
615
+ </button>
616
+ <div class="p-8">
617
+ <div class="flex items-center mb-6">
618
+ <div class="bg-red-100 p-3 rounded-full mr-4">
619
+ <i class="fas fa-paint-brush text-red-600 text-xl"></i>
620
+ </div>
621
+ <h3 class="text-2xl font-bold text-gray-800">Design Gráfico e Edição de Vídeos</h3>
622
+ </div>
623
+ <div class="space-y-4 text-gray-700">
624
+ <p>Criamos identidades visuais impactantes e conteúdos audiovisuais profissionais que comunicam eficazmente a essência da sua marca, aumentando reconhecimento e engajamento.</p>
625
+
626
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Serviços oferecidos:</h4>
627
+ <ul class="list-disc pl-6 space-y-2">
628
+ <li>Criação de logotipos e identidade visual</li>
629
+ <li>Design de materiais gráficos (cartões, folhetos, banners)</li>
630
+ <li>Produção de vídeos institucionais e promocionais</li>
631
+ <li>Edição e pós-produção de vídeos</li>
632
+ <li>Motion graphics e animações</li>
633
+ <li>Design para redes sociais</li>
634
+ </ul>
635
+
636
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Benefícios:</h4>
637
+ <ul class="list-disc pl-6 space-y-2">
638
+ <li>Comunicação visual profissional e coerente</li>
639
+ <li>Aumento do reconhecimento da marca</li>
640
+ <li>Conteúdo otimizado para cada plataforma</li>
641
+ <li>Materiais que convertem e engajam</li>
642
+ <li>Processo criativo colaborativo</li>
643
+ </ul>
644
+
645
+ <div class="mt-8 bg-red-50 p-4 rounded-lg">
646
+ <h4 class="font-semibold text-red-800 mb-2">Nosso diferencial:</h4>
647
+ <p>Combinamos criatividade e estratégia para desenvolver soluções visuais que não apenas impressionam, mas também comunicam claramente sua mensagem e impulsionam resultados.</p>
648
+ </div>
649
+ </div>
650
+ <div class="mt-8 flex justify-end">
651
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-md transition flex items-center">
652
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
653
+ </a>
654
+ </div>
655
+ </div>
656
+ </div>
657
+ </div>
658
+
659
+ <!-- Modal 6: Desenvolvimento Web -->
660
+ <div id="modal6" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 invisible transition">
661
+ <div class="modal-content bg-white rounded-lg shadow-xl w-11/12 md:w-2/3 lg:w-1/2 max-w-4xl relative">
662
+ <button onclick="closeModal('modal6')" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
663
+ <i class="fas fa-times text-2xl"></i>
664
+ </button>
665
+ <div class="p-8">
666
+ <div class="flex items-center mb-6">
667
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
668
+ <i class="fas fa-code text-indigo-600 text-xl"></i>
669
+ </div>
670
+ <h3 class="text-2xl font-bold text-gray-800">Desenvolvimento Web</h3>
671
+ </div>
672
+ <div class="space-y-4 text-gray-700">
673
+ <p>Criamos sites rápidos, responsivos e otimizados para SEO que não apenas impressionam visualmente, mas também convertem visitantes em clientes, com manutenção contínua para garantir desempenho.</p>
674
+
675
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Nossas especialidades:</h4>
676
+ <ul class="list-disc pl-6 space-y-2">
677
+ <li>Sites institucionais e corporativos</li>
678
+ <li>Landing pages de alta conversão</li>
679
+ <li>Lojas virtuais (e-commerce)</li>
680
+ <li>Portais e sistemas web complexos</li>
681
+ <li>Aplicativos web progressivos (PWA)</li>
682
+ </ul>
683
+
684
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Tecnologias utilizadas:</h4>
685
+ <ul class="list-disc pl-6 space-y-2">
686
+ <li>HTML5, CSS3, JavaScript (ES6+)</li>
687
+ <li>React.js, Vue.js, Angular</li>
688
+ <li>Node.js, PHP, Python</li>
689
+ <li>WordPress, WooCommerce</li>
690
+ <li>Bancos de dados SQL e NoSQL</li>
691
+ </ul>
692
+
693
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Vantagens:</h4>
694
+ <ul class="list-disc pl-6 space-y-2">
695
+ <li>Design responsivo para todos os dispositivos</li>
696
+ <li>Otimização para motores de busca (SEO)</li>
697
+ <li>Segurança e proteção de dados</li>
698
+ <li>Integração com sistemas existentes</li>
699
+ <li>Suporte e manutenção contínuos</li>
700
+ </ul>
701
+
702
+ <div class="mt-8 bg-indigo-50 p-4 rounded-lg">
703
+ <h4 class="font-semibold text-indigo-800 mb-2">Metodologia:</h4>
704
+ <p>Trabalhamos com metodologias ágeis para garantir que seu projeto seja entregue no prazo, dentro do orçamento e com a mais alta qualidade, desde o planejamento até a implementação e lançamento.</p>
705
+ </div>
706
+ </div>
707
+ <div class="mt-8 flex justify-end">
708
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-md transition flex items-center">
709
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
710
+ </a>
711
+ </div>
712
+ </div>
713
+ </div>
714
+ </div>
715
+
716
+ <!-- Modal 7: Gestão de Redes Sociais -->
717
+ <div id="modal7" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 invisible transition">
718
+ <div class="modal-content bg-white rounded-lg shadow-xl w-11/12 md:w-2/3 lg:w-1/2 max-w-4xl relative">
719
+ <button onclick="closeModal('modal7')" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
720
+ <i class="fas fa-times text-2xl"></i>
721
+ </button>
722
+ <div class="p-8">
723
+ <div class="flex items-center mb-6">
724
+ <div class="bg-pink-100 p-3 rounded-full mr-4">
725
+ <i class="fas fa-hashtag text-pink-600 text-xl"></i>
726
+ </div>
727
+ <h3 class="text-2xl font-bold text-gray-800">Gestão de Redes Sociais</h3>
728
+ </div>
729
+ <div class="space-y-4 text-gray-700">
730
+ <p>Gerenciamos sua presença digital com estratégias personalizadas que aumentam engajamento, visibilidade e conversões, enquanto você foca no que realmente importa: seu negócio.</p>
731
+
732
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Nossos serviços incluem:</h4>
733
+ <ul class="list-disc pl-6 space-y-2">
734
+ <li>Planejamento estratégico de conteúdo</li>
735
+ <li>Criação e curadoria de conteúdo relevante</li>
736
+ <li>Gestão diária de perfis e interações</li>
737
+ <li>Campanhas patrocinadas e anúncios</li>
738
+ <li>Monitoramento de menções e reputação</li>
739
+ <li>Relatórios de desempenho mensais</li>
740
+ </ul>
741
+
742
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Plataformas:</h4>
743
+ <ul class="list-disc pl-6 space-y-2">
744
+ <li>Instagram, Facebook, LinkedIn</li>
745
+ <li>Twitter, TikTok, YouTube</li>
746
+ <li>Pinterest, Telegram, WhatsApp Business</li>
747
+ </ul>
748
+
749
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Resultados esperados:</h4>
750
+ <ul class="list-disc pl-6 space-y-2">
751
+ <li>Aumento no engajamento e seguidores</li>
752
+ <li>Maior visibilidade da marca</li>
753
+ <li>Geração de leads qualificados</li>
754
+ <li>Fortalecimento da autoridade no setor</li>
755
+ <li>Retorno mensurável sobre o investimento</li>
756
+ </ul>
757
+
758
+ <div class="mt-8 bg-pink-50 p-4 rounded-lg">
759
+ <h4 class="font-semibold text-pink-800 mb-2">Nossa abordagem:</h4>
760
+ <p>Desenvolvemos uma estratégia única para sua marca, baseada em dados e insights do seu público-alvo, com conteúdo autêntico que constrói relacionamentos duradouros com seus clientes.</p>
761
+ </div>
762
+ </div>
763
+ <div class="mt-8 flex justify-end">
764
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-md transition flex items-center">
765
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
766
+ </a>
767
+ </div>
768
+ </div>
769
+ </div>
770
+ </div>
771
+
772
+ <!-- Modal 8: Redes de Computadores -->
773
+ <div id="modal8" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 invisible transition">
774
+ <div class="modal-content bg-white rounded-lg shadow-xl w-11/12 md:w-2/3 lg:w-1/2 max-w-4xl relative">
775
+ <button onclick="closeModal('modal8')" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
776
+ <i class="fas fa-times text-2xl"></i>
777
+ </button>
778
+ <div class="p-8">
779
+ <div class="flex items-center mb-6">
780
+ <div class="bg-teal-100 p-3 rounded-full mr-4">
781
+ <i class="fas fa-network-wired text-teal-600 text-xl"></i>
782
+ </div>
783
+ <h3 class="text-2xl font-bold text-gray-800">Redes de Computadores</h3>
784
+ </div>
785
+ <div class="space-y-4 text-gray-700">
786
+ <p>Oferecemos soluções completas em infraestrutura de redes, desde o planejamento e instalação até o suporte técnico contínuo, garantindo conectividade segura e de alta performance para sua empresa.</p>
787
+
788
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Nossos serviços:</h4>
789
+ <ul class="list-disc pl-6 space-y-2">
790
+ <li>Projeto e implementação de redes cabeadas e wireless</li>
791
+ <li>Configuração de servidores Windows e Linux</li>
792
+ <li>Virtualização e cloud computing</li>
793
+ <li>Segurança de rede e firewall</li>
794
+ <li>Monitoramento e otimização de performance</li>
795
+ <li>Suporte técnico especializado</li>
796
+ </ul>
797
+
798
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Tecnologias:</h4>
799
+ <ul class="list-disc pl-6 space-y-2">
800
+ <li>Windows Server, Active Directory</li>
801
+ <li>Linux (Ubuntu, CentOS, Debian)</li>
802
+ <li>VMware, Hyper-V, Proxmox</li>
803
+ <li>Cisco, MikroTik, Ubiquiti</li>
804
+ <li>VPN, VLAN, QoS</li>
805
+ </ul>
806
+
807
+ <h4 class="font-semibold text-lg mt-6 mb-2 text-gray-800">Benefícios:</h4>
808
+ <ul class="list-disc pl-6 space-y-2">
809
+ <li>Infraestrutura de rede confiável e escalável</li>
810
+ <li>Maior segurança de dados e informações</li>
811
+ <li>Redução de custos com tecnologia</li>
812
+ <li>Suporte técnico rápido e eficiente</li>
813
+ <li>Monitoramento proativo de problemas</li>
814
+ </ul>
815
+
816
+ <div class="mt-8 bg-teal-50 p-4 rounded-lg">
817
+ <h4 class="font-semibold text-teal-800 mb-2">Nossa metodologia:</h4>
818
+ <p>Realizamos um diagnóstico completo da sua infraestrutura atual, identificamos pontos de melhoria e implementamos soluções personalizadas que atendam às necessidades específicas do seu negócio.</p>
819
+ </div>
820
+ </div>
821
+ <div class="mt-8 flex justify-end">
822
+ <a href="https://api.whatsapp.com/send?phone=5598988106807" target="_blank" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-md transition flex items-center">
823
+ <i class="fab fa-whatsapp mr-2"></i> Fale Conosco
824
+ </a>
825
+ </div>
826
+ </div>
827
+ </div>
828
+ </div>
829
+
830
+ <script>
831
+ // Modal functions
832
+ function openModal(modalId) {
833
+ const modal = document.getElementById(modalId);
834
+ modal.classList.remove('invisible', 'opacity-0');
835
+ modal.classList.add('opacity-100', 'visible');
836
+ document.body.style.overflow = 'hidden';
837
+ }
838
+
839
+ function closeModal(modalId) {
840
+ const modal = document.getElementById(modalId);
841
+ modal.classList.remove('opacity-100', 'visible');
842
+ modal.classList.add('opacity-0', 'invisible');
843
+ document.body.style.overflow = 'auto';
844
+ }
845
+
846
+ // Close modal when clicking outside content
847
+ document.addEventListener('click', function(event) {
848
+ const modals = document.querySelectorAll('.modal');
849
+ modals.forEach(modal => {
850
+ if (event.target === modal) {
851
+ closeModal(modal.id);
852
+ }
853
+ });
854
+ });
855
+
856
+ // Smooth scrolling for anchor links
857
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
858
+ anchor.addEventListener('click', function (e) {
859
+ e.preventDefault();
860
+
861
+ const targetId = this.getAttribute('href');
862
+ if (targetId === '#') return;
863
+
864
+ const targetElement = document.querySelector(targetId);
865
+ if (targetElement) {
866
+ window.scrollTo({
867
+ top: targetElement.offsetTop - 80,
868
+ behavior: 'smooth'
869
+ });
870
+ }
871
+ });
872
+ });
873
+ </script>
874
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=marcospaiva/lab" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
875
+ </html>