Hugging Face's logo

Spaces:
dubcom
/
dubcom-en
Running

App Files Community
dubcom commited on
Commit
e17bfcd
·
verified ·
1 Parent(s): ee4656b

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +758 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dubcom En
3
- emoji: 👁
4
- colorFrom: blue
5
- colorTo: pink
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: dubcom-en
3
+ emoji: 🐳
4
+ colorFrom: pink
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,758 @@
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="en">
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 - Tech Marketing Solutions and Automation with n8n. We offer CRM/ERP integration, WhatsApp bots and process automation for your business.">
7
+ <meta name="keywords" content="automation, n8n, tech marketing, WhatsApp bots, CRM, ERP, integration, Chatwoot, Mautic">
8
+ <meta name="author" content="DUBCOM">
9
+ <meta property="og:title" content="DUBCOM - Tech Marketing and Automation Solutions">
10
+ <meta property="og:description" content="Smart automation with n8n, WhatsApp bots and CRM/ERP integration to boost your business.">
11
+ <meta property="og:type" content="website">
12
+ <meta property="og:url" content="https://dubcom.com.br/en">
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/en">
16
+ <title>DUBCOM - Tech Marketing & Automation Solutions with n8n | WhatsApp Bots | 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
+ opacity: 0;
130
+ pointer-events: none;
131
+ }
132
+
133
+ .modal-content {
134
+ transform: translateY(20px);
135
+ transition: all 0.3s ease;
136
+ }
137
+
138
+ .modal.show {
139
+ opacity: 1;
140
+ pointer-events: all;
141
+ }
142
+
143
+ .modal.show .modal-content {
144
+ transform: translateY(0);
145
+ }
146
+
147
+ /* Custom image styles */
148
+ .service-icon {
149
+ width: 80px;
150
+ height: 80px;
151
+ object-fit: contain;
152
+ margin-bottom: 1.5rem;
153
+ }
154
+
155
+ .solution-image {
156
+ width: 100%;
157
+ height: 200px;
158
+ object-fit: cover;
159
+ border-radius: 0.5rem;
160
+ margin-bottom: 1.5rem;
161
+ }
162
+ </style>
163
+ </head>
164
+ <body class="bg-light text-dark">
165
+ <!-- Header -->
166
+ <header class="bg-white shadow-sm sticky top-0 z-50">
167
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
168
+ <div class="flex items-center">
169
+ <a href="#home" class="flex items-center">
170
+ <!-- Replace with your actual logo -->
171
+ <img src="https://dubcom.com.br/wp-content/uploads/2023/04/Horizontal.png.webp" alt="DUBCOM Logo" class="h-10">
172
+ </a>
173
+ </div>
174
+
175
+ <nav class="hidden md:flex space-x-8">
176
+ <a href="#home" class="text-dark hover:text-primary font-medium">Home</a>
177
+ <a href="#services" class="text-dark hover:text-primary font-medium">Services</a>
178
+ <a href="#solutions" class="text-dark hover:text-primary font-medium">Solutions</a>
179
+ <a href="#about" class="text-dark hover:text-primary font-medium">About</a>
180
+ <a href="#contact" class="text-dark hover:text-primary font-medium">Contact</a>
181
+ </nav>
182
+
183
+ <div class="flex items-center space-x-4">
184
+ <div class="language-switcher">
185
+ <button class="flex items-center text-dark hover:text-primary">
186
+ <span class="language-flag" style="background-image: url('https://flagcdn.com/w20/gb.png'); background-size: cover;"></span>
187
+ <span>EN</span>
188
+ <i class="fas fa-chevron-down ml-1 text-xs"></i>
189
+ </button>
190
+ <div class="language-dropdown">
191
+ <a href="https://dubcom.com.br" class="flex items-center">
192
+ <span class="language-flag" style="background-image: url('https://flagcdn.com/w20/br.png'); background-size: cover;"></span>
193
+ <span>Português</span>
194
+ </a>
195
+ <a href="https://dubcom.com.br/en" class="flex items-center active">
196
+ <span class="language-flag" style="background-image: url('https://flagcdn.com/w20/gb.png'); background-size: cover;"></span>
197
+ <span>English</span>
198
+ </a>
199
+ </div>
200
+ </div>
201
+
202
+ <button class="md:hidden text-dark hover:text-primary" id="mobile-menu-button">
203
+ <i class="fas fa-bars text-xl"></i>
204
+ </button>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Mobile menu -->
209
+ <div class="md:hidden hidden bg-white w-full py-4 px-4 shadow-md" id="mobile-menu">
210
+ <div class="flex flex-col space-y-4">
211
+ <a href="#home" class="text-dark hover:text-primary font-medium">Home</a>
212
+ <a href="#services" class="text-dark hover:text-primary font-medium">Services</a>
213
+ <a href="#solutions" class="text-dark hover:text-primary font-medium">Solutions</a>
214
+ <a href="#about" class="text-dark hover:text-primary font-medium">About</a>
215
+ <a href="#contact" class="text-dark hover:text-primary font-medium">Contact</a>
216
+ </div>
217
+ </div>
218
+ </header>
219
+
220
+ <!-- Hero Section -->
221
+ <section id="home" class="py-20 bg-gradient-to-r from-primary to-secondary text-white">
222
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
223
+ <div class="md:w-1/2 mb-10 md:mb-0">
224
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Transform Your Business with Smart Automation</h1>
225
+ <p class="text-xl mb-8">We create customized automation solutions using n8n to streamline your processes, integrate systems, and boost productivity.</p>
226
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
227
+ <a href="#contact" class="bg-white text-primary font-bold py-3 px-6 rounded-lg hover:bg-opacity-90 transition duration-300 text-center">Get Started</a>
228
+ <a href="#solutions" class="border-2 border-white text-white font-bold py-3 px-6 rounded-lg hover:bg-white hover:bg-opacity-10 transition duration-300 text-center">Our Solutions</a>
229
+ </div>
230
+ </div>
231
+ <div class="md:w-1/2 flex justify-center">
232
+ <!-- Suggested hero image: Abstract automation concept -->
233
+ <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" alt="Automation Illustration" class="w-full max-w-md rounded-lg floating shadow-xl">
234
+ </div>
235
+ </div>
236
+ </section>
237
+
238
+ <!-- Services Section -->
239
+ <section id="services" class="py-20 bg-white">
240
+ <div class="container mx-auto px-4">
241
+ <div class="text-center mb-16">
242
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Services</h2>
243
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">We offer comprehensive automation solutions tailored to your business needs.</p>
244
+ </div>
245
+
246
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
247
+ <div class="bg-light p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300 text-center">
248
+ <!-- Suggested icon: Process automation -->
249
+ <img src="https://cdn-icons-png.flaticon.com/512/1063/1063196.png" alt="Process Automation" class="service-icon mx-auto">
250
+ <h3 class="text-xl font-bold mb-4">Process Automation</h3>
251
+ <p class="text-gray-600">Automate repetitive tasks and workflows to save time and reduce errors in your daily operations.</p>
252
+ </div>
253
+
254
+ <div class="bg-light p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300 text-center">
255
+ <!-- Suggested icon: System integration -->
256
+ <img src="https://cdn-icons-png.flaticon.com/512/2883/2883813.png" alt="System Integration" class="service-icon mx-auto">
257
+ <h3 class="text-xl font-bold mb-4">System Integration</h3>
258
+ <p class="text-gray-600">Connect your CRM, ERP, marketing tools and other systems for seamless data flow across platforms.</p>
259
+ </div>
260
+
261
+ <div class="bg-light p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300 text-center">
262
+ <!-- Suggested icon: WhatsApp bots -->
263
+ <img src="https://cdn-icons-png.flaticon.com/512/733/733585.png" alt="WhatsApp Bots" class="service-icon mx-auto">
264
+ <h3 class="text-xl font-bold mb-4">WhatsApp Bots</h3>
265
+ <p class="text-gray-600">Automate customer interactions on WhatsApp with intelligent chatbots for support, sales and more.</p>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </section>
270
+
271
+ <!-- Solutions Section -->
272
+ <section id="solutions" class="py-20 bg-light">
273
+ <div class="container mx-auto px-4">
274
+ <div class="text-center mb-16">
275
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Solutions</h2>
276
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Custom automation solutions designed for your specific business challenges.</p>
277
+ </div>
278
+
279
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
280
+ <div class="bg-white p-8 rounded-xl shadow-sm">
281
+ <!-- Suggested image: n8n automation -->
282
+ <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" alt="n8n Automation" class="solution-image">
283
+ <h3 class="text-xl font-bold mb-4">n8n Automation</h3>
284
+ <p class="text-gray-600 mb-6">We implement powerful automation workflows using n8n, the open-source workflow automation tool that connects all your apps and services.</p>
285
+ <ul class="space-y-3">
286
+ <li class="flex items-start">
287
+ <i class="fas fa-check text-secondary mt-1 mr-2"></i>
288
+ <span>Custom workflow automation</span>
289
+ </li>
290
+ <li class="flex items-start">
291
+ <i class="fas fa-check text-secondary mt-1 mr-2"></i>
292
+ <span>CRM/ERP integration</span>
293
+ </li>
294
+ <li class="flex items-start">
295
+ <i class="fas fa-check text-secondary mt-1 mr-2"></i>
296
+ <span>Data synchronization</span>
297
+ </li>
298
+ </ul>
299
+ </div>
300
+
301
+ <div class="bg-white p-8 rounded-xl shadow-sm">
302
+ <!-- Suggested image: WhatsApp business -->
303
+ <img src="https://images.unsplash.com/photo-1631725999030-49598a4f7d3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="WhatsApp Business Solutions" class="solution-image">
304
+ <h3 class="text-xl font-bold mb-4">WhatsApp Business Solutions</h3>
305
+ <p class="text-gray-600 mb-6">Automate customer communication on WhatsApp with our intelligent chatbot solutions for support, sales, and engagement.</p>
306
+ <ul class="space-y-3">
307
+ <li class="flex items-start">
308
+ <i class="fas fa-check text-secondary mt-1 mr-2"></i>
309
+ <span>Automated customer support</span>
310
+ </li>
311
+ <li class="flex items-start">
312
+ <i class="fas fa-check text-secondary mt-1 mr-2"></i>
313
+ <span>Order tracking</span>
314
+ </li>
315
+ <li class="flex items-start">
316
+ <i class="fas fa-check text-secondary mt-1 mr-2"></i>
317
+ <span>Marketing campaigns</span>
318
+ </li>
319
+ </ul>
320
+ </div>
321
+ </div>
322
+
323
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
324
+ <div class="bg-white p-8 rounded-xl shadow-sm">
325
+ <!-- Suggested image: Chatwoot implementation -->
326
+ <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Chatwoot Implementation" class="solution-image">
327
+ <h3 class="text-xl font-bold mb-4">Chatwoot Implementation</h3>
328
+ <p class="text-gray-600 mb-6">Open-source customer engagement platform that helps businesses manage conversations across multiple channels from a single dashboard.</p>
329
+ <ul class="space-y-3">
330
+ <li class="flex items-start">
331
+ <i class="fas fa-check text-secondary mt-1 mr-2"></i>
332
+ <span>Omnichannel support</span>
333
+ </li>
334
+ <li class="flex items-start">
335
+ <i class="fas fa-check text-secondary mt-1 mr-2"></i>
336
+ <span>Team collaboration</span>
337
+ </li>
338
+ <li class="flex items-start">
339
+ <i class="fas fa-check text-secondary mt-1 mr-2"></i>
340
+ <span>CRM integration</span>
341
+ </li>
342
+ </ul>
343
+ </div>
344
+
345
+ <div class="bg-white p-8 rounded-xl shadow-sm">
346
+ <!-- Suggested image: Mautic marketing -->
347
+ <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1415&q=80" alt="Mautic Marketing Automation" class="solution-image">
348
+ <h3 class="text-xl font-bold mb-4">Mautic Marketing Automation</h3>
349
+ <p class="text-gray-600 mb-6">Open-source marketing automation platform that helps you nurture leads and automate marketing campaigns.</p>
350
+ <ul class="space-y-3">
351
+ <li class="flex items-start">
352
+ <i class="fas fa-check text-secondary mt-1 mr-2"></i>
353
+ <span>Email marketing automation</span>
354
+ </li>
355
+ <li class="flex items-start">
356
+ <i class="fas fa-check text-secondary mt-1 mr-2"></i>
357
+ <span>Lead scoring</span>
358
+ </li>
359
+ <li class="flex items-start">
360
+ <i class="fas fa-check text-secondary mt-1 mr-2"></i>
361
+ <span>Customer segmentation</span>
362
+ </li>
363
+ </ul>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </section>
368
+
369
+ <!-- About Section -->
370
+ <section id="about" class="py-20 bg-white">
371
+ <div class="container mx-auto px-4">
372
+ <div class="flex flex-col md:flex-row items-center">
373
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
374
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">About DUBCOM</h2>
375
+ <p class="text-gray-600 mb-6">We are a technology company specialized in marketing automation and business process optimization. Our mission is to help businesses work smarter through automation.</p>
376
+ <p class="text-gray-600 mb-8">With expertise in n8n, WhatsApp Business API, Chatwoot, Mautic and other open-source tools, we create customized solutions that integrate with your existing systems to streamline operations and improve customer experience.</p>
377
+ <div class="flex space-x-4">
378
+ <div class="text-center">
379
+ <div class="text-3xl font-bold text-primary">50+</div>
380
+ <div class="text-gray-600">Clients</div>
381
+ </div>
382
+ <div class="text-center">
383
+ <div class="text-3xl font-bold text-primary">100+</div>
384
+ <div class="text-gray-600">Projects</div>
385
+ </div>
386
+ <div class="text-center">
387
+ <div class="text-3xl font-bold text-primary">5+</div>
388
+ <div class="text-gray-600">Years Experience</div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ <div class="md:w-1/2">
393
+ <!-- Suggested image: Team working -->
394
+ <img src="https://images.unsplash.com/photo-1579389083078-4e7018379f7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="DUBCOM Team" class="rounded-xl shadow-md w-full">
395
+ </div>
396
+ </div>
397
+
398
+ <!-- Client Logos Section -->
399
+ <div class="mt-20">
400
+ <h3 class="text-2xl font-bold text-center mb-8">Trusted By</h3>
401
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center">
402
+ <!-- Replace with actual client logos -->
403
+ <img src="https://via.placeholder.com/150x80?text=Client+1" alt="Client Logo" class="h-12 object-contain opacity-70 hover:opacity-100 transition duration-300 mx-auto">
404
+ <img src="https://via.placeholder.com/150x80?text=Client+2" alt="Client Logo" class="h-12 object-contain opacity-70 hover:opacity-100 transition duration-300 mx-auto">
405
+ <img src="https://via.placeholder.com/150x80?text=Client+3" alt="Client Logo" class="h-12 object-contain opacity-70 hover:opacity-100 transition duration-300 mx-auto">
406
+ <img src="https://via.placeholder.com/150x80?text=Client+4" alt="Client Logo" class="h-12 object-contain opacity-70 hover:opacity-100 transition duration-300 mx-auto">
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </section>
411
+
412
+ <!-- Testimonials Section -->
413
+ <section class="py-20 bg-primary text-white">
414
+ <div class="container mx-auto px-4">
415
+ <div class="text-center mb-16">
416
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Clients Say</h2>
417
+ <p class="text-lg text-white text-opacity-80 max-w-2xl mx-auto">Hear from businesses that have transformed their operations with our solutions.</p>
418
+ </div>
419
+
420
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
421
+ <div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-blur-sm">
422
+ <div class="flex items-center mb-4">
423
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
424
+ <div>
425
+ <h4 class="font-bold">Sarah Johnson</h4>
426
+ <p class="text-white text-opacity-70 text-sm">Marketing Director</p>
427
+ </div>
428
+ </div>
429
+ <p class="italic">"DUBCOM's WhatsApp automation solution helped us reduce response times by 80% while maintaining a personal touch with our customers."</p>
430
+ <div class="flex mt-4 text-yellow-300">
431
+ <i class="fas fa-star"></i>
432
+ <i class="fas fa-star"></i>
433
+ <i class="fas fa-star"></i>
434
+ <i class="fas fa-star"></i>
435
+ <i class="fas fa-star"></i>
436
+ </div>
437
+ </div>
438
+
439
+ <div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-blur-sm">
440
+ <div class="flex items-center mb-4">
441
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
442
+ <div>
443
+ <h4 class="font-bold">Michael Chen</h4>
444
+ <p class="text-white text-opacity-70 text-sm">Operations Manager</p>
445
+ </div>
446
+ </div>
447
+ <p class="italic">"The n8n workflows DUBCOM implemented saved us over 20 hours per week in manual data entry and reporting tasks."</p>
448
+ <div class="flex mt-4 text-yellow-300">
449
+ <i class="fas fa-star"></i>
450
+ <i class="fas fa-star"></i>
451
+ <i class="fas fa-star"></i>
452
+ <i class="fas fa-star"></i>
453
+ <i class="fas fa-star"></i>
454
+ </div>
455
+ </div>
456
+
457
+ <div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-blur-sm">
458
+ <div class="flex items-center mb-4">
459
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
460
+ <div>
461
+ <h4 class="font-bold">Ana Rodriguez</h4>
462
+ <p class="text-white text-opacity-70 text-sm">CEO</p>
463
+ </div>
464
+ </div>
465
+ <p class="italic">"Their Chatwoot implementation transformed our customer support, giving us a unified view of all customer interactions across channels."</p>
466
+ <div class="flex mt-4 text-yellow-300">
467
+ <i class="fas fa-star"></i>
468
+ <i class="fas fa-star"></i>
469
+ <i class="fas fa-star"></i>
470
+ <i class="fas fa-star"></i>
471
+ <i class="fas fa-star-half-alt"></i>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </section>
477
+
478
+ <!-- Contact Section -->
479
+ <section id="contact" class="py-20 bg-light">
480
+ <div class="container mx-auto px-4">
481
+ <div class="text-center mb-16">
482
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Contact Us</h2>
483
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Ready to automate your business? Get in touch with our team.</p>
484
+ </div>
485
+
486
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
487
+ <div>
488
+ <form id="contact-form" class="space-y-6">
489
+ <input type="text" class="honey" name="honey">
490
+ <div>
491
+ <label for="name" class="block text-gray-700 font-medium mb-2">Name</label>
492
+ <input type="text" id="name" name="name" required class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input focus:border-primary focus:ring-2 focus:ring-primary focus:ring-opacity-50">
493
+ </div>
494
+ <div>
495
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
496
+ <input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input focus:border-primary focus:ring-2 focus:ring-primary focus:ring-opacity-50">
497
+ </div>
498
+ <div>
499
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Phone (optional)</label>
500
+ <input type="tel" id="phone" name="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input focus:border-primary focus:ring-2 focus:ring-primary focus:ring-opacity-50">
501
+ </div>
502
+ <div>
503
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
504
+ <textarea id="message" name="message" rows="5" required class="w-full px-4 py-3 border border-gray-300 rounded-lg form-input focus:border-primary focus:ring-2 focus:ring-primary focus:ring-opacity-50"></textarea>
505
+ </div>
506
+ <button type="submit" class="w-full bg-primary text-white font-bold py-3 px-6 rounded-lg hover:bg-opacity-90 transition duration-300">Send Message</button>
507
+ </form>
508
+ <div id="success-message" class="success-message mt-6 p-4 bg-green-100 text-green-700 rounded-lg">
509
+ Thank you for your message! We'll get back to you soon.
510
+ </div>
511
+ </div>
512
+
513
+ <div class="space-y-8">
514
+ <div>
515
+ <h3 class="text-xl font-bold mb-4">Contact Information</h3>
516
+ <div class="space-y-4">
517
+ <div class="flex items-start">
518
+ <i class="fas fa-map-marker-alt text-primary mt-1 mr-4"></i>
519
+ <div>
520
+ <h4 class="font-medium">Address</h4>
521
+ <p class="text-gray-600">123 Automation Street, Tech City</p>
522
+ </div>
523
+ </div>
524
+ <div class="flex items-start">
525
+ <i class="fas fa-envelope text-primary mt-1 mr-4"></i>
526
+ <div>
527
+ <h4 class="font-medium">Email</h4>
528
+ <p class="text-gray-600">contact@dubcom.com</p>
529
+ </div>
530
+ </div>
531
+ <div class="flex items-start">
532
+ <i class="fas fa-phone-alt text-primary mt-1 mr-4"></i>
533
+ <div>
534
+ <h4 class="font-medium">Phone</h4>
535
+ <p class="text-gray-600">+1 (555) 123-4567</p>
536
+ </div>
537
+ </div>
538
+ </div>
539
+ </div>
540
+
541
+ <div>
542
+ <h3 class="text-xl font-bold mb-4">Business Hours</h3>
543
+ <div class="space-y-2">
544
+ <div class="flex justify-between">
545
+ <span class="text-gray-700">Monday - Friday</span>
546
+ <span class="text-gray-600">9:00 AM - 6:00 PM</span>
547
+ </div>
548
+ <div class="flex justify-between">
549
+ <span class="text-gray-700">Saturday</span>
550
+ <span class="text-gray-600">10:00 AM - 2:00 PM</span>
551
+ </div>
552
+ <div class="flex justify-between">
553
+ <span class="text-gray-700">Sunday</span>
554
+ <span class="text-gray-600">Closed</span>
555
+ </div>
556
+ </div>
557
+ </div>
558
+
559
+ <div>
560
+ <h3 class="text-xl font-bold mb-4">Follow Us</h3>
561
+ <div class="flex space-x-4">
562
+ <a href="#" class="w-10 h-10 rounded-full bg-primary bg-opacity-10 text-primary flex items-center justify-center hover:bg-opacity-20 transition duration-300">
563
+ <i class="fab fa-facebook-f"></i>
564
+ </a>
565
+ <a href="#" class="w-10 h-10 rounded-full bg-primary bg-opacity-10 text-primary flex items-center justify-center hover:bg-opacity-20 transition duration-300">
566
+ <i class="fab fa-twitter"></i>
567
+ </a>
568
+ <a href="#" class="w-10 h-10 rounded-full bg-primary bg-opacity-10 text-primary flex items-center justify-center hover:bg-opacity-20 transition duration-300">
569
+ <i class="fab fa-linkedin-in"></i>
570
+ </a>
571
+ <a href="#" class="w-10 h-10 rounded-full bg-primary bg-opacity-10 text-primary flex items-center justify-center hover:bg-opacity-20 transition duration-300">
572
+ <i class="fab fa-instagram"></i>
573
+ </a>
574
+ </div>
575
+ </div>
576
+
577
+ <!-- Map placeholder -->
578
+ <div class="rounded-xl overflow-hidden">
579
+ <!-- Replace with actual map embed -->
580
+ <img src="https://maps.googleapis.com/maps/api/staticmap?center=Tech+City&zoom=13&size=600x300&maptype=roadmap&markers=color:red%7CTech+City&key=YOUR_API_KEY" alt="Map" class="w-full h-48 object-cover">
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ </section>
586
+
587
+ <!-- Footer -->
588
+ <footer class="bg-dark text-white py-12">
589
+ <div class="container mx-auto px-4">
590
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
591
+ <div>
592
+ <img src="https://dubcom.com.br/wp-content/uploads/2023/04/Horizontal-white.png.webp" alt="DUBCOM Logo" class="h-10 mb-4">
593
+ <p class="text-gray-400">Smart automation solutions to transform your business operations and customer experience.</p>
594
+ </div>
595
+
596
+ <div>
597
+ <h3 class="text-lg font-bold mb-4">Quick Links</h3>
598
+ <ul class="space-y-2">
599
+ <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
600
+ <li><a href="#services" class="text-gray-400 hover:text-white transition duration-300">Services</a></li>
601
+ <li><a href="#solutions" class="text-gray-400 hover:text-white transition duration-300">Solutions</a></li>
602
+ <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About</a></li>
603
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
604
+ </ul>
605
+ </div>
606
+
607
+ <div>
608
+ <h3 class="text-lg font-bold mb-4">Services</h3>
609
+ <ul class="space-y-2">
610
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Process Automation</a></li>
611
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">System Integration</a></li>
612
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">WhatsApp Bots</a></li>
613
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Chatwoot Implementation</a></li>
614
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Mautic Marketing</a></li>
615
+ </ul>
616
+ </div>
617
+
618
+ <div>
619
+ <h3 class="text-lg font-bold mb-4">Newsletter</h3>
620
+ <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates and insights.</p>
621
+ <form class="flex">
622
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg text-dark w-full">
623
+ <button type="submit" class="bg-primary px-4 py-2 rounded-r-lg hover:bg-opacity-90 transition duration-300">
624
+ <i class="fas fa-paper-plane"></i>
625
+ </button>
626
+ </form>
627
+ </div>
628
+ </div>
629
+
630
+ <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
631
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 DUBCOM. All rights reserved.</p>
632
+ <div class="flex space-x-6">
633
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a>
634
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a>
635
+ </div>
636
+ </div>
637
+ </div>
638
+ </footer>
639
+
640
+ <!-- Back to Top Button -->
641
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-primary text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center hover:bg-opacity-90 transition duration-300 hidden">
642
+ <i class="fas fa-arrow-up"></i>
643
+ </button>
644
+
645
+ <!-- Modal -->
646
+ <div id="modal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
647
+ <div class="modal-content bg-white rounded-lg max-w-md w-full p-6">
648
+ <div class="flex justify-between items-center mb-4">
649
+ <h3 class="text-xl font-bold">Thank You!</h3>
650
+ <button id="close-modal" class="text-gray-500 hover:text-gray-700">
651
+ <i class="fas fa-times"></i>
652
+ </button>
653
+ </div>
654
+ <p class="text-gray-600 mb-6">Your message has been successfully sent. Our team will get back to you shortly.</p>
655
+ <button id="modal-ok" class="w-full bg-primary text-white font-bold py-2 px-4 rounded-lg hover:bg-opacity-90 transition duration-300">OK</button>
656
+ </div>
657
+ </div>
658
+
659
+ <script>
660
+ // Mobile menu toggle
661
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
662
+ const mobileMenu = document.getElementById('mobile-menu');
663
+
664
+ mobileMenuButton.addEventListener('click', () => {
665
+ mobileMenu.classList.toggle('hidden');
666
+ });
667
+
668
+ // Form submission
669
+ const contactForm = document.getElementById('contact-form');
670
+ const successMessage = document.getElementById('success-message');
671
+
672
+ contactForm.addEventListener('submit', (e) => {
673
+ e.preventDefault();
674
+
675
+ // Simple form validation
676
+ const name = document.getElementById('name').value;
677
+ const email = document.getElementById('email').value;
678
+ const message = document.getElementById('message').value;
679
+
680
+ if (name && email && message) {
681
+ // In a real scenario, you would send the form data to a server here
682
+ contactForm.reset();
683
+
684
+ // Show success message
685
+ successMessage.classList.add('show');
686
+
687
+ // Hide after 5 seconds
688
+ setTimeout(() => {
689
+ successMessage.classList.remove('show');
690
+ }, 5000);
691
+
692
+ // Alternatively, show modal
693
+ // document.getElementById('modal').classList.add('show');
694
+ }
695
+ });
696
+
697
+ // Back to top button
698
+ const backToTopButton = document.getElementById('back-to-top');
699
+
700
+ window.addEventListener('scroll', () => {
701
+ if (window.pageYOffset > 300) {
702
+ backToTopButton.classList.remove('hidden');
703
+ } else {
704
+ backToTopButton.classList.add('hidden');
705
+ }
706
+ });
707
+
708
+ backToTopButton.addEventListener('click', () => {
709
+ window.scrollTo({ top: 0, behavior: 'smooth' });
710
+ });
711
+
712
+ // Modal functionality
713
+ const modal = document.getElementById('modal');
714
+ const closeModal = document.getElementById('close-modal');
715
+ const modalOk = document.getElementById('modal-ok');
716
+
717
+ function showModal() {
718
+ modal.classList.add('show');
719
+ }
720
+
721
+ function hideModal() {
722
+ modal.classList.remove('show');
723
+ }
724
+
725
+ closeModal.addEventListener('click', hideModal);
726
+ modalOk.addEventListener('click', hideModal);
727
+
728
+ // Close modal when clicking outside
729
+ modal.addEventListener('click', (e) => {
730
+ if (e.target === modal) {
731
+ hideModal();
732
+ }
733
+ });
734
+
735
+ // Smooth scrolling for anchor links
736
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
737
+ anchor.addEventListener('click', function(e) {
738
+ e.preventDefault();
739
+
740
+ const targetId = this.getAttribute('href');
741
+ if (targetId === '#') return;
742
+
743
+ const targetElement = document.querySelector(targetId);
744
+ if (targetElement) {
745
+ targetElement.scrollIntoView({
746
+ behavior: 'smooth'
747
+ });
748
+
749
+ // Close mobile menu if open
750
+ if (!mobileMenu.classList.contains('hidden')) {
751
+ mobileMenu.classList.add('hidden');
752
+ }
753
+ }
754
+ });
755
+ });
756
+ </script>
757
+ <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/dubcom-en" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
758
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ consegue dar sugestões de imagens ??