Hugging Face's logo

Spaces:
dubcom
/
sitedubcom
Running

App Files Community
dubcom commited on
Commit
b922564
·
verified ·
1 Parent(s): a5871ee

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +717 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sitedubcom
3
- emoji: 🌖
4
  colorFrom: blue
5
- colorTo: red
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: sitedubcom
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: gray
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,717 @@
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
+ <meta name="description" content="DUBCOM - Soluções em Tech Marketing e Automação com n8n. Oferecemos integração CRM/ERP, bots de WhatsApp e automação de processos para seu negócio.">
7
+ <meta name="keywords" content="automação, n8n, tech marketing, bots WhatsApp, CRM, ERP, integração, Chatwoot, Mautic">
8
+ <meta name="author" content="DUBCOM">
9
+ <meta property="og:title" content="DUBCOM - Soluções em Tech Marketing e Automação">
10
+ <meta property="og:description" content="Automação inteligente com n8n, bots WhatsApp e integração CRM/ERP para impulsionar seu negócio.">
11
+ <meta property="og:type" content="website">
12
+ <meta property="og:url" content="https://dubcom.com.br">
13
+ <meta property="og:image" content="https://dubcom.com.br/wp-content/uploads/2023/04/Horizontal.png.webp">
14
+ <meta name="twitter:card" content="summary_large_image">
15
+ <link rel="canonical" href="https://dubcom.com.br">
16
+ <title>DUBCOM - Soluções em Tech Marketing e Automação com n8n | Bots WhatsApp | CRM/ERP</title>
17
+ <script src="https://cdn.tailwindcss.com"></script>
18
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
19
+ <link rel="alternate" hreflang="en" href="https://dubcom.com.br/en" />
20
+ <link rel="alternate" hreflang="pt-BR" href="https://dubcom.com.br" />
21
+ <script>
22
+ tailwind.config = {
23
+ theme: {
24
+ extend: {
25
+ colors: {
26
+ primary: '#2563eb',
27
+ secondary: '#10b981',
28
+ dark: '#1e293b',
29
+ light: '#f8fafc'
30
+ },
31
+ fontFamily: {
32
+ sans: ['Inter', 'sans-serif'],
33
+ },
34
+ }
35
+ }
36
+ }
37
+ </script>
38
+ <style>
39
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
40
+
41
+ body {
42
+ font-family: 'Inter', sans-serif;
43
+ scroll-behavior: smooth;
44
+ }
45
+
46
+ .form-input {
47
+ transition: all 0.3s ease;
48
+ }
49
+
50
+ .form-input:focus {
51
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
52
+ }
53
+
54
+ .success-message {
55
+ opacity: 0;
56
+ transform: translateY(20px);
57
+ transition: all 0.4s ease;
58
+ }
59
+
60
+ .success-message.show {
61
+ opacity: 1;
62
+ transform: translateY(0);
63
+ }
64
+
65
+ .honey {
66
+ position: absolute;
67
+ left: -9999px;
68
+ }
69
+
70
+ @keyframes float {
71
+ 0% { transform: translateY(0px); }
72
+ 50% { transform: translateY(-10px); }
73
+ 100% { transform: translateY(0px); }
74
+ }
75
+
76
+ .floating {
77
+ animation: float 3s ease-in-out infinite;
78
+ }
79
+
80
+ .language-switcher {
81
+ position: relative;
82
+ display: inline-block;
83
+ }
84
+
85
+ .language-dropdown {
86
+ display: none;
87
+ position: absolute;
88
+ right: 0;
89
+ background-color: white;
90
+ min-width: 120px;
91
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
92
+ z-index: 1;
93
+ border-radius: 8px;
94
+ overflow: hidden;
95
+ }
96
+
97
+ .language-switcher:hover .language-dropdown {
98
+ display: block;
99
+ }
100
+
101
+ .language-dropdown a {
102
+ color: #1e293b;
103
+ padding: 8px 16px;
104
+ text-decoration: none;
105
+ display: block;
106
+ transition: background-color 0.3s;
107
+ }
108
+
109
+ .language-dropdown a:hover {
110
+ background-color: #f1f5f9;
111
+ }
112
+
113
+ .language-dropdown a.active {
114
+ background-color: #2563eb;
115
+ color: white;
116
+ }
117
+
118
+ .language-flag {
119
+ width: 20px;
120
+ height: 15px;
121
+ display: inline-block;
122
+ margin-right: 8px;
123
+ vertical-align: middle;
124
+ }
125
+
126
+ /* Modal styles */
127
+ .modal {
128
+ transition: opacity 0.3s ease;
129
+ }
130
+
131
+ .modal-content {
132
+ transform: translateY(20px);
133
+ transition: all 0.3s ease;
134
+ }
135
+
136
+ .modal.show {
137
+ opacity: 1;
138
+ }
139
+
140
+ .modal.show .modal-content {
141
+ transform: translateY(0);
142
+ }
143
+ </style>
144
+ </head>
145
+ <body class="bg-gray-50 text-dark">
146
+ <!-- Header -->
147
+ <header class="bg-white shadow-sm sticky top-0 z-50">
148
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
149
+ <div class="flex items-center">
150
+ <a href="/" aria-label="DUBCOM Home">
151
+ <img src="https://dubcom.com.br/wp-content/uploads/2023/04/Horizontal.png.webp" alt="DUBCOM Logo" class="h-10">
152
+ </a>
153
+ </div>
154
+ <div class="flex items-center space-x-6">
155
+ <div class="language-switcher">
156
+ <button class="flex items-center text-sm font-medium">
157
+ <span class="language-flag" style="background-image: url('https://flagcdn.com/w20/br.png'); background-size: cover;"></span>
158
+ PT
159
+ <i class="fas fa-chevron-down ml-1 text-xs"></i>
160
+ </button>
161
+ <div class="language-dropdown">
162
+ <a href="/" class="active">
163
+ <span class="language-flag" style="background-image: url('https://flagcdn.com/w20/br.png'); background-size: cover;"></span>
164
+ Português
165
+ </a>
166
+ <a href="/en">
167
+ <span class="language-flag" style="background-image: url('https://flagcdn.com/w20/us.png'); background-size: cover;"></span>
168
+ English
169
+ </a>
170
+ </div>
171
+ </div>
172
+ <a href="#contact" class="bg-primary hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300">
173
+ Solicitar Orçamento
174
+ </a>
175
+ </div>
176
+ </div>
177
+ </header>
178
+
179
+ <!-- Hero Section -->
180
+ <section class="py-20 bg-gradient-to-r from-blue-50 to-green-50">
181
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
182
+ <div class="md:w-1/2 mb-10 md:mb-0">
183
+ <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
184
+ Transforme seu negócio com <span class="text-primary">automação</span> e <span class="text-secondary">tecnologia</span>
185
+ </h1>
186
+ <p class="text-lg text-gray-600 mb-8">
187
+ Soluções integradas em tech marketing, automação com n8n, bots WhatsApp e integrações CRM/ERP para impulsionar seus resultados.
188
+ </p>
189
+ <div class="flex flex-wrap gap-4">
190
+ <a href="#services" class="bg-primary hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">
191
+ Nossos Serviços
192
+ </a>
193
+ <a href="#contact" class="border border-primary text-primary hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition duration-300">
194
+ Fale Conosco
195
+ </a>
196
+ </div>
197
+ </div>
198
+ <div class="md:w-1/2 flex justify-center">
199
+ <div class="relative w-full max-w-md">
200
+ <div class="absolute -top-10 -left-10 w-24 h-24 bg-primary rounded-full opacity-20"></div>
201
+ <div class="absolute -bottom-10 -right-10 w-24 h-24 bg-secondary rounded-full opacity-20"></div>
202
+ <div class="relative bg-white p-8 rounded-2xl shadow-xl floating">
203
+ <div class="flex items-center mb-6">
204
+ <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center mr-4">
205
+ <i class="fas fa-bolt text-white text-xl" aria-hidden="true"></i>
206
+ </div>
207
+ <h2 class="text-xl font-bold">Automação Inteligente</h2>
208
+ </div>
209
+ <p class="text-gray-600 mb-6">
210
+ Fluxos de trabalho automatizados que economizam tempo e reduzem erros.
211
+ </p>
212
+ <div class="flex items-center">
213
+ <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
214
+ <i class="fas fa-check text-green-600 text-xs" aria-hidden="true"></i>
215
+ </div>
216
+ <span class="text-sm">Integração com n8n</span>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </section>
223
+
224
+ <!-- Services Section -->
225
+ <section id="services" class="py-20 bg-white">
226
+ <div class="container mx-auto px-4">
227
+ <div class="text-center mb-16">
228
+ <span class="inline-block px-3 py-1 bg-blue-100 text-primary rounded-full text-sm font-medium mb-4">NOSSOS SERVIÇOS</span>
229
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Soluções Completas para Seu Negócio</h2>
230
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">
231
+ Oferecemos as melhores ferramentas e estratégias para otimizar seus processos e melhorar a experiência do cliente.
232
+ </p>
233
+ </div>
234
+
235
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
236
+ <!-- Service 1 -->
237
+ <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300">
238
+ <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6">
239
+ <i class="fas fa-project-diagram text-primary text-2xl" aria-hidden="true"></i>
240
+ </div>
241
+ <h3 class="text-xl font-bold mb-3">Automação com n8n</h3>
242
+ <p class="text-gray-600 mb-4">
243
+ Fluxos de trabalho personalizados que conectam seus sistemas e automatizam processos repetitivos.
244
+ </p>
245
+ <ul class="space-y-2">
246
+ <li class="flex items-center">
247
+ <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i>
248
+ <span>Integração de plataformas</span>
249
+ </li>
250
+ <li class="flex items-center">
251
+ <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i>
252
+ <span>Automação de marketing</span>
253
+ </li>
254
+ <li class="flex items-center">
255
+ <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i>
256
+ <span>Notificações inteligentes</span>
257
+ </li>
258
+ </ul>
259
+ </div>
260
+
261
+ <!-- Service 2 -->
262
+ <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300">
263
+ <div class="w-14 h-14 bg-secondary bg-opacity-10 rounded-lg flex items-center justify-center mb-6">
264
+ <i class="fab fa-whatsapp text-secondary text-2xl" aria-hidden="true"></i>
265
+ </div>
266
+ <h3 class="text-xl font-bold mb-3">Bots WhatsApp</h3>
267
+ <p class="text-gray-600 mb-4">
268
+ Atendimento automatizado 24/7 no WhatsApp com respostas inteligentes e integração com CRM.
269
+ </p>
270
+ <ul class="space-y-2">
271
+ <li class="flex items-center">
272
+ <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i>
273
+ <span>Respostas automáticas</span>
274
+ </li>
275
+ <li class="flex items-center">
276
+ <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i>
277
+ <span>Agendamento de compromissos</span>
278
+ </li>
279
+ <li class="flex items-center">
280
+ <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i>
281
+ <span>Integração com Chatwoot</span>
282
+ </li>
283
+ </ul>
284
+ </div>
285
+
286
+ <!-- Service 3 -->
287
+ <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300">
288
+ <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-6">
289
+ <i class="fas fa-database text-primary text-2xl" aria-hidden="true"></i>
290
+ </div>
291
+ <h3 class="text-xl font-bold mb-3">Integrações CRM/ERP</h3>
292
+ <p class="text-gray-600 mb-4">
293
+ Conectamos seus sistemas de gestão com ferramentas de marketing para um fluxo contínuo de dados.
294
+ </p>
295
+ <ul class="space-y-2">
296
+ <li class="flex items-center">
297
+ <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i>
298
+ <span>Sincronização de clientes</span>
299
+ </li>
300
+ <li class="flex items-center">
301
+ <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i>
302
+ <span>Automação de vendas</span>
303
+ </li>
304
+ <li class="flex items-center">
305
+ <i class="fas fa-check-circle text-green-500 mr-2" aria-hidden="true"></i>
306
+ <span>Relatórios personalizados</span>
307
+ </li>
308
+ </ul>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </section>
313
+
314
+ <!-- Contact Form Section -->
315
+ <section id="contact" class="py-20 bg-gradient-to-br from-blue-50 to-green-50">
316
+ <div class="container mx-auto px-4">
317
+ <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden">
318
+ <div class="md:flex">
319
+ <div class="md:w-1/2 bg-primary text-white p-10">
320
+ <h2 class="text-3xl font-bold mb-6">Fale Conosco</h2>
321
+ <p class="mb-8">
322
+ Preencha o formulário e nossa equipe entrará em contato o mais breve possível para entender suas necessidades e propor a melhor solução.
323
+ </p>
324
+ <div class="space-y-4">
325
+ <div class="flex items-center">
326
+ <i class="fas fa-envelope mr-4 text-xl" aria-hidden="true"></i>
327
+ <span>contato@dubcom.com.br</span>
328
+ </div>
329
+ <div class="flex items-center">
330
+ <i class="fas fa-phone-alt mr-4 text-xl" aria-hidden="true"></i>
331
+ <span>+55 (48) 9 96858-422</span>
332
+ </div>
333
+ <div class="flex items-center">
334
+ <i class="fas fa-map-marker-alt mr-4 text-xl" aria-hidden="true"></i>
335
+ <span>Florianópolis, SC, Brasil</span>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ <div class="md:w-1/2 p-10">
340
+ <form
341
+ id="contactForm"
342
+ method="POST"
343
+ action="https://webhooks.dubcom.com.br/webhook/3f858fbf-abf0-44a3-903b-ce27ca28de5d"
344
+ enctype="application/x-www-form-urlencoded"
345
+ class="space-y-6"
346
+ >
347
+ <!-- Hidden fields -->
348
+ <input type="hidden" name="form_id" value="46492b79">
349
+ <input type="hidden" name="form_name" value="ContatoSite">
350
+ <input type="hidden" name="language" value="pt-BR">
351
+
352
+ <!-- Honeypot field -->
353
+ <input type="text" name="honey" class="honey" autocomplete="off" aria-hidden="true">
354
+
355
+ <!-- Visible fields -->
356
+ <div>
357
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nome Completo *</label>
358
+ <input
359
+ type="text"
360
+ id="name"
361
+ name="name"
362
+ required
363
+ class="w-full px-4 py-3 rounded-lg border border-gray-300 form-input focus:border-primary focus:ring-1 focus:ring-primary"
364
+ placeholder="Seu nome completo"
365
+ >
366
+ <div class="text-red-500 text-sm mt-1 hidden" id="name-error">Por favor, informe seu nome completo</div>
367
+ </div>
368
+
369
+ <div>
370
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email *</label>
371
+ <input
372
+ type="email"
373
+ id="email"
374
+ name="email"
375
+ required
376
+ class="w-full px-4 py-3 rounded-lg border border-gray-300 form-input focus:border-primary focus:ring-1 focus:ring-primary"
377
+ placeholder="seu@email.com"
378
+ >
379
+ <div class="text-red-500 text-sm mt-1 hidden" id="email-error">Por favor, informe um email válido</div>
380
+ </div>
381
+
382
+ <div>
383
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Telefone *</label>
384
+ <input
385
+ type="tel"
386
+ id="phone"
387
+ name="phone"
388
+ required
389
+ class="w-full px-4 py-3 rounded-lg border border-gray-300 form-input focus:border-primary focus:ring-1 focus:ring-primary"
390
+ placeholder="(11) 99999-9999"
391
+ >
392
+ <div class="text-red-500 text-sm mt-1 hidden" id="phone-error">Por favor, informe um telefone válido</div>
393
+ </div>
394
+
395
+ <div>
396
+ <label for="mesage" class="block text-sm font-medium text-gray-700 mb-1">Mensagem *</label>
397
+ <textarea
398
+ id="mesage"
399
+ name="mesage"
400
+ rows="4"
401
+ required
402
+ class="w-full px-4 py-3 rounded-lg border border-gray-300 form-input focus:border-primary focus:ring-1 focus:ring-primary"
403
+ placeholder="Como podemos te ajudar?"
404
+ ></textarea>
405
+ <div class="text-red-500 text-sm mt-1 hidden" id="message-error">Por favor, escreva sua mensagem</div>
406
+ </div>
407
+
408
+ <div class="flex items-start">
409
+ <div class="flex items-center h-5">
410
+ <input
411
+ id="privacy"
412
+ name="privacy"
413
+ type="checkbox"
414
+ required
415
+ class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary"
416
+ >
417
+ </div>
418
+ <label for="privacy" class="ml-3 block text-sm text-gray-700">
419
+ Concordo com a <a href="#" class="text-primary hover:underline">política de privacidade</a>
420
+ </label>
421
+ </div>
422
+
423
+ <button
424
+ type="submit"
425
+ id="submitBtn"
426
+ class="w-full bg-primary hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"
427
+ aria-label="Enviar mensagem"
428
+ >
429
+ <span id="submitText">Enviar Mensagem</span>
430
+ <i class="fas fa-spinner fa-spin ml-2 hidden" id="spinner" aria-hidden="true"></i>
431
+ </button>
432
+
433
+ <div id="successMessage" class="success-message bg-green-50 text-green-700 p-4 rounded-lg text-center hidden">
434
+ <i class="fas fa-check-circle text-green-500 text-2xl mb-2" aria-hidden="true"></i>
435
+ <h3 class="font-bold">Mensagem enviada com sucesso!</h3>
436
+ <p>Entraremos em contato em breve.</p>
437
+ </div>
438
+
439
+ <div id="errorMessage" class="success-message bg-red-50 text-red-700 p-4 rounded-lg text-center hidden">
440
+ <i class="fas fa-exclamation-circle text-red-500 text-2xl mb-2" aria-hidden="true"></i>
441
+ <h3 class="font-bold">Ocorreu um erro!</h3>
442
+ <p>Por favor, tente novamente mais tarde.</p>
443
+ </div>
444
+ </form>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </section>
450
+
451
+ <!-- Footer -->
452
+ <footer class="bg-dark text-white py-12">
453
+ <div class="container mx-auto px-4">
454
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
455
+ <div>
456
+ <div class="flex items-center mb-6">
457
+ <a href="/" aria-label="DUBCOM Home">
458
+ <img src="https://dubcom.com.br/wp-content/uploads/2023/04/Horizontal.png.webp" alt="DUBCOM Logo" class="h-10">
459
+ </a>
460
+ </div>
461
+ <p class="text-gray-400 mb-4">
462
+ Soluções em tech marketing e automação para impulsionar seu negócio.
463
+ </p>
464
+ <div class="flex space-x-4">
465
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300" aria-label="Facebook">
466
+ <i class="fab fa-facebook-f"></i>
467
+ </a>
468
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300" aria-label="Instagram">
469
+ <i class="fab fa-instagram"></i>
470
+ </a>
471
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300" aria-label="LinkedIn">
472
+ <i class="fab fa-linkedin-in"></i>
473
+ </a>
474
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300" aria-label="WhatsApp">
475
+ <i class="fab fa-whatsapp"></i>
476
+ </a>
477
+ </div>
478
+ </div>
479
+
480
+ <div>
481
+ <h3 class="text-lg font-semibold mb-4">Links Rápidos</h3>
482
+ <ul class="space-y-2">
483
+ <li><a href="#services" class="text-gray-400 hover:text-white transition duration-300">Serviços</a></li>
484
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contato</a></li>
485
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
486
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Portfólio</a></li>
487
+ </ul>
488
+ </div>
489
+
490
+ <div>
491
+ <h3 class="text-lg font-semibold mb-4">Legal</h3>
492
+ <ul class="space-y-2">
493
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Termos de Serviço</a></li>
494
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Política de Privacidade</a></li>
495
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Cookies</a></li>
496
+ </ul>
497
+ </div>
498
+ </div>
499
+
500
+ <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-400">
501
+ <p>&copy; 2025 DUBCOM. Todos os direitos reservados.</p>
502
+ </div>
503
+ </div>
504
+ </footer>
505
+
506
+ <!-- English Version Modal (hidden by default) -->
507
+ <div id="englishModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 opacity-0 pointer-events-none">
508
+ <div class="modal-content bg-white rounded-lg shadow-xl max-w-md w-full p-6">
509
+ <h3 class="text-xl font-bold mb-4">Welcome to DUBCOM</h3>
510
+ <p class="mb-6">We've detected that you might prefer to browse our website in English. Would you like to switch to the English version?</p>
511
+ <div class="flex justify-end space-x-4">
512
+ <button id="stayOnPT" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition">
513
+ Continue in Portuguese
514
+ </button>
515
+ <button id="goToEN" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-700 transition">
516
+ Switch to English
517
+ </button>
518
+ </div>
519
+ </div>
520
+ </div>
521
+
522
+ <script>
523
+ document.addEventListener('DOMContentLoaded', function() {
524
+ const form = document.getElementById('contactForm');
525
+ const submitBtn = document.getElementById('submitBtn');
526
+ const submitText = document.getElementById('submitText');
527
+ const spinner = document.getElementById('spinner');
528
+ const successMessage = document.getElementById('successMessage');
529
+ const errorMessage = document.getElementById('errorMessage');
530
+
531
+ // Form validation
532
+ function validateForm() {
533
+ let isValid = true;
534
+
535
+ // Validate name
536
+ const name = document.getElementById('name');
537
+ const nameError = document.getElementById('name-error');
538
+ if (name.value.trim() === '') {
539
+ name.classList.add('border-red-500');
540
+ nameError.classList.remove('hidden');
541
+ isValid = false;
542
+ } else {
543
+ name.classList.remove('border-red-500');
544
+ nameError.classList.add('hidden');
545
+ }
546
+
547
+ // Validate email
548
+ const email = document.getElementById('email');
549
+ const emailError = document.getElementById('email-error');
550
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
551
+ if (!emailRegex.test(email.value)) {
552
+ email.classList.add('border-red-500');
553
+ emailError.classList.remove('hidden');
554
+ isValid = false;
555
+ } else {
556
+ email.classList.remove('border-red-500');
557
+ emailError.classList.add('hidden');
558
+ }
559
+
560
+ // Validate phone
561
+ const phone = document.getElementById('phone');
562
+ const phoneError = document.getElementById('phone-error');
563
+ const phoneRegex = /^\(?\d{2}\)?[\s-]?\d{4,5}[\s-]?\d{4}$/;
564
+ if (!phoneRegex.test(phone.value)) {
565
+ phone.classList.add('border-red-500');
566
+ phoneError.classList.remove('hidden');
567
+ isValid = false;
568
+ } else {
569
+ phone.classList.remove('border-red-500');
570
+ phoneError.classList.add('hidden');
571
+ }
572
+
573
+ // Validate message
574
+ const message = document.getElementById('mesage');
575
+ const messageError = document.getElementById('message-error');
576
+ if (message.value.trim() === '') {
577
+ message.classList.add('border-red-500');
578
+ messageError.classList.remove('hidden');
579
+ isValid = false;
580
+ } else {
581
+ message.classList.remove('border-red-500');
582
+ messageError.classList.add('hidden');
583
+ }
584
+
585
+ return isValid;
586
+ }
587
+
588
+ // Form submission
589
+ form.addEventListener('submit', async function(e) {
590
+ e.preventDefault();
591
+
592
+ if (!validateForm()) {
593
+ return;
594
+ }
595
+
596
+ // Check honeypot field
597
+ const honey = document.getElementsByName('honey')[0];
598
+ if (honey.value !== '') {
599
+ // Likely a bot, don't submit
600
+ return;
601
+ }
602
+
603
+ // Show loading state
604
+ submitText.textContent = 'Enviando...';
605
+ spinner.classList.remove('hidden');
606
+ submitBtn.disabled = true;
607
+
608
+ try {
609
+ const formData = new URLSearchParams(new FormData(form));
610
+
611
+ const response = await fetch(form.action, {
612
+ method: 'POST',
613
+ headers: {
614
+ 'Content-Type': 'application/x-www-form-urlencoded'
615
+ },
616
+ body: formData
617
+ });
618
+
619
+ if (response.ok) {
620
+ // Show success message
621
+ successMessage.classList.remove('hidden');
622
+ successMessage.classList.add('show');
623
+ form.reset();
624
+
625
+ // Hide success message after 5 seconds
626
+ setTimeout(() => {
627
+ successMessage.classList.remove('show');
628
+ setTimeout(() => {
629
+ successMessage.classList.add('hidden');
630
+ }, 300);
631
+ }, 5000);
632
+ } else {
633
+ throw new Error('Network response was not ok');
634
+ }
635
+ } catch (error) {
636
+ console.error('Error:', error);
637
+ // Show error message
638
+ errorMessage.classList.remove('hidden');
639
+ errorMessage.classList.add('show');
640
+
641
+ // Hide error message after 5 seconds
642
+ setTimeout(() => {
643
+ errorMessage.classList.remove('show');
644
+ setTimeout(() => {
645
+ errorMessage.classList.add('hidden');
646
+ }, 300);
647
+ }, 5000);
648
+ } finally {
649
+ // Reset button state
650
+ submitText.textContent = 'Enviar Mensagem';
651
+ spinner.classList.add('hidden');
652
+ submitBtn.disabled = false;
653
+ }
654
+ });
655
+
656
+ // Smooth scrolling for anchor links
657
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
658
+ anchor.addEventListener('click', function(e) {
659
+ e.preventDefault();
660
+
661
+ const targetId = this.getAttribute('href');
662
+ if (targetId === '#') return;
663
+
664
+ const targetElement = document.querySelector(targetId);
665
+ if (targetElement) {
666
+ window.scrollTo({
667
+ top: targetElement.offsetTop - 80,
668
+ behavior: 'smooth'
669
+ });
670
+ }
671
+ });
672
+ });
673
+
674
+ // Language detection and redirection
675
+ function checkUserLanguage() {
676
+ // Check if user has already chosen a language
677
+ if (localStorage.getItem('languagePreference')) {
678
+ return;
679
+ }
680
+
681
+ // Detect browser language
682
+ const userLanguage = navigator.language || navigator.userLanguage;
683
+
684
+ // If user's preferred language is English and not already on English version
685
+ if (userLanguage.startsWith('en') && !window.location.pathname.startsWith('/en')) {
686
+ // Show language suggestion modal
687
+ showLanguageModal();
688
+ }
689
+ }
690
+
691
+ function showLanguageModal() {
692
+ const modal = document.getElementById('englishModal');
693
+ const stayButton = document.getElementById('stayOnPT');
694
+ const goButton = document.getElementById('goToEN');
695
+
696
+ // Show modal
697
+ modal.classList.remove('opacity-0', 'pointer-events-none');
698
+ modal.classList.add('opacity-100', 'pointer-events-auto');
699
+
700
+ stayButton.addEventListener('click', function() {
701
+ localStorage.setItem('languagePreference', 'pt');
702
+ modal.classList.remove('opacity-100', 'pointer-events-auto');
703
+ modal.classList.add('opacity-0', 'pointer-events-none');
704
+ });
705
+
706
+ goButton.addEventListener('click', function() {
707
+ localStorage.setItem('languagePreference', 'en');
708
+ window.location.href = '/en';
709
+ });
710
+ }
711
+
712
+ // Run language detection
713
+ checkUserLanguage();
714
+ });
715
+ </script>
716
+ <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=dubcom/sitedubcom" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
717
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ criar uma versão em ingles e direcionar o user se caso ele queira a versão em ingles cuidando o SEO para melhorar rankiamento
2
+ esta com erro ptbr esta em ingles e o ingles esta com erro