Hugging Face's logo

Spaces:
gallabs
/
new-cooperchip
Running

App Files Community
gallabs commited on
Commit
92e9657
·
verified ·
1 Parent(s): bb794ad

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +862 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: New Cooperchip
3
- emoji: 😻
4
- colorFrom: gray
5
- colorTo: indigo
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: new-cooperchip
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: green
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,862 @@
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>CooperChip - 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
+ .hero-bg {
11
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
12
+ background-size: cover;
13
+ background-position: center;
14
+ }
15
+
16
+ .tab-content {
17
+ display: none;
18
+ }
19
+
20
+ .tab-content.active {
21
+ display: block;
22
+ animation: fadeIn 0.5s;
23
+ }
24
+
25
+ @keyframes fadeIn {
26
+ from { opacity: 0; }
27
+ to { opacity: 1; }
28
+ }
29
+
30
+ .chatbot {
31
+ position: fixed;
32
+ bottom: 20px;
33
+ right: 20px;
34
+ z-index: 1000;
35
+ transition: all 0.3s;
36
+ }
37
+
38
+ .chatbot-container {
39
+ display: none;
40
+ width: 300px;
41
+ height: 400px;
42
+ background: white;
43
+ border-radius: 10px;
44
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
45
+ overflow: hidden;
46
+ }
47
+
48
+ .chatbot-toggle {
49
+ background: #3b82f6;
50
+ color: white;
51
+ width: 60px;
52
+ height: 60px;
53
+ border-radius: 50%;
54
+ display: flex;
55
+ justify-content: center;
56
+ align-items: center;
57
+ cursor: pointer;
58
+ box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
59
+ }
60
+
61
+ .notification-badge {
62
+ position: absolute;
63
+ top: -5px;
64
+ right: -5px;
65
+ background: #ef4444;
66
+ color: white;
67
+ border-radius: 50%;
68
+ width: 20px;
69
+ height: 20px;
70
+ display: flex;
71
+ justify-content: center;
72
+ align-items: center;
73
+ font-size: 12px;
74
+ }
75
+
76
+ .dropdown {
77
+ display: none;
78
+ position: absolute;
79
+ right: 0;
80
+ background: white;
81
+ min-width: 200px;
82
+ box-shadow: 0 8px 16px rgba(0,0,0,0.1);
83
+ border-radius: 8px;
84
+ z-index: 100;
85
+ padding: 10px 0;
86
+ }
87
+
88
+ .dropdown.active {
89
+ display: block;
90
+ animation: fadeIn 0.3s;
91
+ }
92
+
93
+ .dropdown-item {
94
+ padding: 10px 20px;
95
+ cursor: pointer;
96
+ transition: background 0.2s;
97
+ }
98
+
99
+ .dropdown-item:hover {
100
+ background: #f3f4f6;
101
+ }
102
+
103
+ .dropdown-divider {
104
+ border-top: 1px solid #e5e7eb;
105
+ margin: 5px 0;
106
+ }
107
+
108
+ .carousel {
109
+ position: relative;
110
+ overflow: hidden;
111
+ }
112
+
113
+ .carousel-inner {
114
+ display: flex;
115
+ transition: transform 0.5s ease;
116
+ }
117
+
118
+ .carousel-item {
119
+ min-width: 100%;
120
+ box-sizing: border-box;
121
+ }
122
+
123
+ .carousel-control {
124
+ position: absolute;
125
+ top: 50%;
126
+ transform: translateY(-50%);
127
+ background: rgba(0,0,0,0.5);
128
+ color: white;
129
+ border: none;
130
+ padding: 10px;
131
+ cursor: pointer;
132
+ border-radius: 50%;
133
+ z-index: 10;
134
+ }
135
+
136
+ .carousel-control.prev {
137
+ left: 10px;
138
+ }
139
+
140
+ .carousel-control.next {
141
+ right: 10px;
142
+ }
143
+
144
+ .carousel-indicators {
145
+ display: flex;
146
+ justify-content: center;
147
+ margin-top: 15px;
148
+ }
149
+
150
+ .carousel-indicator {
151
+ width: 10px;
152
+ height: 10px;
153
+ border-radius: 50%;
154
+ background: #cbd5e1;
155
+ margin: 0 5px;
156
+ cursor: pointer;
157
+ }
158
+
159
+ .carousel-indicator.active {
160
+ background: #3b82f6;
161
+ }
162
+
163
+ .accordion-item {
164
+ border-bottom: 1px solid #e5e7eb;
165
+ }
166
+
167
+ .accordion-header {
168
+ padding: 15px 0;
169
+ cursor: pointer;
170
+ display: flex;
171
+ justify-content: space-between;
172
+ align-items: center;
173
+ }
174
+
175
+ .accordion-content {
176
+ max-height: 0;
177
+ overflow: hidden;
178
+ transition: max-height 0.3s ease;
179
+ }
180
+
181
+ .accordion-content.active {
182
+ max-height: 300px;
183
+ padding-bottom: 15px;
184
+ }
185
+ </style>
186
+ </head>
187
+ <body class="font-sans">
188
+ <!-- Navbar -->
189
+ <nav class="bg-white shadow-md sticky top-0 z-50">
190
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
191
+ <div class="flex items-center">
192
+ <img src="https://cooperchip.com.br/wp-content/uploads/2023/02/logo-cooperchip.png" alt="CooperChip Logo" class="h-10">
193
+ </div>
194
+
195
+ <div class="hidden md:flex space-x-8">
196
+ <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Início</a>
197
+ <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Serviços</a>
198
+ <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Sobre Nós</a>
199
+ <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Portfólio</a>
200
+ <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Contato</a>
201
+ </div>
202
+
203
+ <div class="flex items-center space-x-4">
204
+ <div class="relative">
205
+ <button id="notificationBtn" class="text-gray-600 hover:text-blue-600 relative">
206
+ <i class="fas fa-bell text-xl"></i>
207
+ <span class="notification-badge">5</span>
208
+ </button>
209
+ <div id="notificationDropdown" class="dropdown">
210
+ <div class="p-3 border-b border-gray-200">
211
+ <h4 class="font-semibold">Notificações (5)</h4>
212
+ </div>
213
+ <div class="max-h-60 overflow-y-auto">
214
+ <a href="#" class="dropdown-item flex items-start">
215
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
216
+ <i class="fas fa-envelope text-blue-600"></i>
217
+ </div>
218
+ <div>
219
+ <p class="font-medium">Nova mensagem recebida</p>
220
+ <p class="text-sm text-gray-500">Há 5 minutos</p>
221
+ </div>
222
+ </a>
223
+ <a href="#" class="dropdown-item flex items-start">
224
+ <div class="bg-green-100 p-2 rounded-full mr-3">
225
+ <i class="fas fa-check-circle text-green-600"></i>
226
+ </div>
227
+ <div>
228
+ <p class="font-medium">Seu projeto foi aprovado</p>
229
+ <p class="text-sm text-gray-500">Há 1 hora</p>
230
+ </div>
231
+ </a>
232
+ <a href="#" class="dropdown-item flex items-start">
233
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
234
+ <i class="fas fa-exclamation-triangle text-yellow-600"></i>
235
+ </div>
236
+ <div>
237
+ <p class="font-medium">Atualização necessária</p>
238
+ <p class="text-sm text-gray-500">Ontem</p>
239
+ </div>
240
+ </a>
241
+ <a href="#" class="dropdown-item flex items-start">
242
+ <div class="bg-purple-100 p-2 rounded-full mr-3">
243
+ <i class="fas fa-calendar-check text-purple-600"></i>
244
+ </div>
245
+ <div>
246
+ <p class="font-medium">Reunião agendada</p>
247
+ <p class="text-sm text-gray-500">Ontem</p>
248
+ </div>
249
+ </a>
250
+ <a href="#" class="dropdown-item flex items-start">
251
+ <div class="bg-red-100 p-2 rounded-full mr-3">
252
+ <i class="fas fa-bug text-red-600"></i>
253
+ </div>
254
+ <div>
255
+ <p class="font-medium">Bug reportado</p>
256
+ <p class="text-sm text-gray-500">2 dias atrás</p>
257
+ </div>
258
+ </a>
259
+ </div>
260
+ <div class="p-3 border-t border-gray-200 text-center">
261
+ <a href="#" class="text-blue-600 font-medium">Ver todas</a>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="relative">
267
+ <button id="profileBtn" class="flex items-center space-x-2 focus:outline-none">
268
+ <div class="w-10 h-10 rounded-full bg-gray-300 overflow-hidden">
269
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-full h-full object-cover">
270
+ </div>
271
+ </button>
272
+ <div id="profileDropdown" class="dropdown">
273
+ <div class="px-4 py-3 border-b border-gray-200">
274
+ <p class="font-semibold">John Doe</p>
275
+ <p class="text-sm text-gray-500">[email protected]</p>
276
+ </div>
277
+ <a href="#" class="dropdown-item">
278
+ <i class="fas fa-user mr-2 text-gray-500"></i> Perfil
279
+ </a>
280
+ <a href="#" class="dropdown-item">
281
+ <i class="fas fa-cog mr-2 text-gray-500"></i> Configurações
282
+ </a>
283
+ <div class="dropdown-divider"></div>
284
+ <a href="#" class="dropdown-item">
285
+ <i class="fas fa-sign-in-alt mr-2 text-gray-500"></i> Login
286
+ </a>
287
+ <a href="#" class="dropdown-item">
288
+ <i class="fas fa-user-plus mr-2 text-gray-500"></i> Registrar
289
+ </a>
290
+ <div class="dropdown-divider"></div>
291
+ <a href="#" class="dropdown-item text-red-500">
292
+ <i class="fas fa-sign-out-alt mr-2"></i> Sair
293
+ </a>
294
+ </div>
295
+ </div>
296
+
297
+ <button class="md:hidden focus:outline-none">
298
+ <i class="fas fa-bars text-xl text-gray-700"></i>
299
+ </button>
300
+ </div>
301
+ </div>
302
+ </nav>
303
+
304
+ <!-- Hero Section -->
305
+ <section class="hero-bg text-white py-20">
306
+ <div class="container mx-auto px-4 text-center">
307
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Soluções Tecnológicas para o seu Negócio</h1>
308
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Transformamos ideias em realidade digital com expertise e inovação.</p>
309
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
310
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
311
+ Conheça nossos serviços
312
+ </button>
313
+ <button class="bg-transparent hover:bg-white hover:text-black text-white font-bold py-3 px-6 border-2 border-white rounded-lg transition duration-300">
314
+ Fale conosco
315
+ </button>
316
+ </div>
317
+ </div>
318
+ </section>
319
+
320
+ <!-- Services Section -->
321
+ <section class="py-16 bg-gray-50">
322
+ <div class="container mx-auto px-4">
323
+ <h2 class="text-3xl font-bold text-center mb-12">Nossos Serviços</h2>
324
+
325
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
326
+ <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition duration-300">
327
+ <div class="text-blue-600 mb-4">
328
+ <i class="fas fa-laptop-code text-4xl"></i>
329
+ </div>
330
+ <h3 class="text-xl font-semibold mb-3">Desenvolvimento Web</h3>
331
+ <p class="text-gray-600">Criamos sites e aplicações web personalizadas, responsivas e de alto desempenho para atender às necessidades do seu negócio.</p>
332
+ </div>
333
+
334
+ <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition duration-300">
335
+ <div class="text-blue-600 mb-4">
336
+ <i class="fas fa-mobile-alt text-4xl"></i>
337
+ </div>
338
+ <h3 class="text-xl font-semibold mb-3">Aplicativos Móveis</h3>
339
+ <p class="text-gray-600">Desenvolvemos aplicativos nativos e híbridos para iOS e Android, garantindo a melhor experiência do usuário.</p>
340
+ </div>
341
+
342
+ <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition duration-300">
343
+ <div class="text-blue-600 mb-4">
344
+ <i class="fas fa-chart-line text-4xl"></i>
345
+ </div>
346
+ <h3 class="text-xl font-semibold mb-3">Marketing Digital</h3>
347
+ <p class="text-gray-600">Estratégias de marketing digital personalizadas para aumentar sua presença online e converter visitantes em clientes.</p>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </section>
352
+
353
+ <!-- Video Carousel Section -->
354
+ <section class="py-16 bg-white">
355
+ <div class="container mx-auto px-4">
356
+ <h2 class="text-3xl font-bold text-center mb-12">Nossos Projetos</h2>
357
+
358
+ <div class="carousel relative">
359
+ <div class="carousel-inner">
360
+ <div class="carousel-item">
361
+ <div class="flex flex-col md:flex-row items-center gap-8">
362
+ <div class="w-full md:w-1/2">
363
+ <div class="aspect-w-16 aspect-h-9">
364
+ <iframe class="w-full h-64 md:h-96 rounded-lg" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
365
+ </div>
366
+ </div>
367
+ <div class="w-full md:w-1/2">
368
+ <h3 class="text-2xl font-bold mb-4">Projeto Inovador 2023</h3>
369
+ <p class="text-gray-600 mb-4">Este projeto revolucionário combinou tecnologias de ponta para criar uma solução única no mercado. Veja como transformamos o desafio do cliente em uma oportunidade de negócios.</p>
370
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition duration-300">
371
+ Saiba mais
372
+ </button>
373
+ </div>
374
+ </div>
375
+ </div>
376
+
377
+ <div class="carousel-item">
378
+ <div class="flex flex-col md:flex-row items-center gap-8">
379
+ <div class="w-full md:w-1/2">
380
+ <div class="aspect-w-16 aspect-h-9">
381
+ <iframe class="w-full h-64 md:h-96 rounded-lg" src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
382
+ </div>
383
+ </div>
384
+ <div class="w-full md:w-1/2">
385
+ <h3 class="text-2xl font-bold mb-4">Sistema de Gestão Empresarial</h3>
386
+ <p class="text-gray-600 mb-4">Desenvolvemos um sistema completo de gestão que integra todas as áreas da empresa, proporcionando eficiência e redução de custos operacionais.</p>
387
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition duration-300">
388
+ Saiba mais
389
+ </button>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <div class="carousel-item">
395
+ <div class="flex flex-col md:flex-row items-center gap-8">
396
+ <div class="w-full md:w-1/2">
397
+ <div class="aspect-w-16 aspect-h-9">
398
+ <iframe class="w-full h-64 md:h-96 rounded-lg" src="https://www.youtube.com/embed/J---aiyznGQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
399
+ </div>
400
+ </div>
401
+ <div class="w-full md:w-1/2">
402
+ <h3 class="text-2xl font-bold mb-4">Aplicativo de Saúde</h3>
403
+ <p class="text-gray-600 mb-4">Um aplicativo inovador que conecta pacientes e profissionais de saúde, facilitando o agendamento de consultas e o acompanhamento médico.</p>
404
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition duration-300">
405
+ Saiba mais
406
+ </button>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+
412
+ <button class="carousel-control prev">
413
+ <i class="fas fa-chevron-left"></i>
414
+ </button>
415
+ <button class="carousel-control next">
416
+ <i class="fas fa-chevron-right"></i>
417
+ </button>
418
+
419
+ <div class="carousel-indicators">
420
+ <button class="carousel-indicator active" data-slide="0"></button>
421
+ <button class="carousel-indicator" data-slide="1"></button>
422
+ <button class="carousel-indicator" data-slide="2"></button>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </section>
427
+
428
+ <!-- Tabs Section -->
429
+ <section class="py-16 bg-gray-50">
430
+ <div class="container mx-auto px-4">
431
+ <h2 class="text-3xl font-bold text-center mb-12">Nossa Abordagem</h2>
432
+
433
+ <div class="max-w-4xl mx-auto">
434
+ <div class="flex border-b border-gray-200 mb-8">
435
+ <button class="tab-btn py-3 px-6 font-medium text-gray-600 hover:text-blue-600 border-b-2 border-transparent hover:border-blue-600 transition duration-300 active" data-tab="tab1">
436
+ Planejamento
437
+ </button>
438
+ <button class="tab-btn py-3 px-6 font-medium text-gray-600 hover:text-blue-600 border-b-2 border-transparent hover:border-blue-600 transition duration-300" data-tab="tab2">
439
+ Desenvolvimento
440
+ </button>
441
+ <button class="tab-btn py-3 px-6 font-medium text-gray-600 hover:text-blue-600 border-b-2 border-transparent hover:border-blue-600 transition duration-300" data-tab="tab3">
442
+ Entrega
443
+ </button>
444
+ </div>
445
+
446
+ <div id="tab1" class="tab-content active">
447
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
448
+ <div>
449
+ <h3 class="text-xl font-semibold mb-4">Planejamento Estratégico</h3>
450
+ <p class="text-gray-600 mb-4">Antes de começar qualquer projeto, realizamos uma análise detalhada das necessidades do cliente e do mercado. Isso nos permite criar uma estratégia personalizada que garante o melhor resultado.</p>
451
+ <ul class="space-y-2">
452
+ <li class="flex items-start">
453
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
454
+ <span>Análise de requisitos</span>
455
+ </li>
456
+ <li class="flex items-start">
457
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
458
+ <span>Definição de escopo</span>
459
+ </li>
460
+ <li class="flex items-start">
461
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
462
+ <span>Planejamento de recursos</span>
463
+ </li>
464
+ </ul>
465
+ </div>
466
+ <div>
467
+ <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="Planejamento" class="w-full h-auto rounded-lg shadow-md">
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <div id="tab2" class="tab-content">
473
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
474
+ <div>
475
+ <h3 class="text-xl font-semibold mb-4">Desenvolvimento Ágil</h3>
476
+ <p class="text-gray-600 mb-4">Utilizamos metodologias ágeis para garantir flexibilidade e qualidade durante todo o processo de desenvolvimento. Nossas equipes são multidisciplinares e altamente capacitadas.</p>
477
+ <ul class="space-y-2">
478
+ <li class="flex items-start">
479
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
480
+ <span>Sprints semanais</span>
481
+ </li>
482
+ <li class="flex items-start">
483
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
484
+ <span>Testes contínuos</span>
485
+ </li>
486
+ <li class="flex items-start">
487
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
488
+ <span>Feedback constante</span>
489
+ </li>
490
+ </ul>
491
+ </div>
492
+ <div>
493
+ <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="Desenvolvimento" class="w-full h-auto rounded-lg shadow-md">
494
+ </div>
495
+ </div>
496
+ </div>
497
+
498
+ <div id="tab3" class="tab-content">
499
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
500
+ <div>
501
+ <h3 class="text-xl font-semibold mb-4">Entrega e Suporte</h3>
502
+ <p class="text-gray-600 mb-4">Nossa relação com o cliente não termina na entrega do projeto. Oferecemos suporte contínuo e atualizações para garantir que a solução continue atendendo às necessidades do negócio.</p>
503
+ <ul class="space-y-2">
504
+ <li class="flex items-start">
505
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
506
+ <span>Treinamento da equipe</span>
507
+ </li>
508
+ <li class="flex items-start">
509
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
510
+ <span>Manutenção preventiva</span>
511
+ </li>
512
+ <li class="flex items-start">
513
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
514
+ <span>Atualizações periódicas</span>
515
+ </li>
516
+ </ul>
517
+ </div>
518
+ <div>
519
+ <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="Entrega" class="w-full h-auto rounded-lg shadow-md">
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ </section>
526
+
527
+ <!-- FAQ Section -->
528
+ <section class="py-16 bg-white">
529
+ <div class="container mx-auto px-4">
530
+ <h2 class="text-3xl font-bold text-center mb-12">Perguntas Frequentes</h2>
531
+
532
+ <div class="max-w-3xl mx-auto">
533
+ <div class="accordion-item">
534
+ <div class="accordion-header">
535
+ <h3 class="text-lg font-semibold">Quanto tempo leva para desenvolver um projeto?</h3>
536
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
537
+ </div>
538
+ <div class="accordion-content">
539
+ <p class="text-gray-600">O tempo de desenvolvimento varia de acordo com a complexidade do projeto. Projetos simples podem levar de 2 a 4 semanas, enquanto sistemas mais complexos podem levar de 3 a 6 meses. Durante nossa fase de planejamento, forneceremos uma estimativa mais precisa com base nos requisitos específicos do seu projeto.</p>
540
+ </div>
541
+ </div>
542
+
543
+ <div class="accordion-item">
544
+ <div class="accordion-header">
545
+ <h3 class="text-lg font-semibold">Quais tecnologias vocês utilizam?</h3>
546
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
547
+ </div>
548
+ <div class="accordion-content">
549
+ <p class="text-gray-600">Utilizamos as tecnologias mais modernas e adequadas para cada tipo de projeto. Para desenvolvimento web: React, Vue.js, Node.js, Laravel e WordPress. Para aplicativos móveis: React Native e Flutter. Bancos de dados: MySQL, PostgreSQL e MongoDB. Também trabalhamos com AWS, Google Cloud e Azure para hospedagem e infraestrutura.</p>
550
+ </div>
551
+ </div>
552
+
553
+ <div class="accordion-item">
554
+ <div class="accordion-header">
555
+ <h3 class="text-lg font-semibold">Vocês oferecem suporte após a entrega?</h3>
556
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
557
+ </div>
558
+ <div class="accordion-content">
559
+ <p class="text-gray-600">Sim, oferecemos diferentes pacotes de suporte pós-entrega, que podem incluir correção de bugs, atualizações de segurança, melhorias e até mesmo treinamento para sua equipe. Durante o planejamento do projeto, discutiremos suas necessidades de suporte para criar um pacote personalizado.</p>
560
+ </div>
561
+ </div>
562
+
563
+ <div class="accordion-item">
564
+ <div class="accordion-header">
565
+ <h3 class="text-lg font-semibold">Como é o processo de contratação?</h3>
566
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
567
+ </div>
568
+ <div class="accordion-content">
569
+ <p class="text-gray-600">Nosso processo começa com uma reunião inicial para entender suas necessidades. Em seguida, elaboramos uma proposta detalhada com escopo, cronograma e orçamento. Após sua aprovação, assinamos um contrato e iniciamos o projeto. Mantemos comunicação constante durante todo o desenvolvimento, com entregas parciais para seu feedback.</p>
570
+ </div>
571
+ </div>
572
+
573
+ <div class="accordion-item">
574
+ <div class="accordion-header">
575
+ <h3 class="text-lg font-semibold">Vocês trabalham com projetos internacionais?</h3>
576
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
577
+ </div>
578
+ <div class="accordion-content">
579
+ <p class="text-gray-600">Sim, atendemos clientes em todo o mundo. Trabalhamos com diferentes fusos horários e nos adaptamos aos requisitos específicos de cada região. Nossa equipe é fluente em português, inglês e espanhol, garantindo comunicação eficiente em projetos internacionais.</p>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </section>
585
+
586
+ <!-- CTA Section -->
587
+ <section class="py-16 bg-blue-600 text-white">
588
+ <div class="container mx-auto px-4 text-center">
589
+ <h2 class="text-3xl font-bold mb-6">Pronto para transformar sua ideia em realidade?</h2>
590
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Entre em contato conosco hoje mesmo e descubra como podemos ajudar o seu negócio a crescer com tecnologia.</p>
591
+ <button class="bg-white hover:bg-gray-100 text-blue-600 font-bold py-3 px-8 rounded-lg transition duration-300 shadow-lg">
592
+ Solicitar Orçamento
593
+ </button>
594
+ </div>
595
+ </section>
596
+
597
+ <!-- Footer -->
598
+ <footer class="bg-black text-white py-12">
599
+ <div class="container mx-auto px-4">
600
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
601
+ <div>
602
+ <img src="https://cooperchip.com.br/wp-content/uploads/2023/02/logo-cooperchip.png" alt="CooperChip Logo" class="h-10 mb-4">
603
+ <p class="text-gray-400">Transformando ideias em soluções digitais inovadoras desde 2010.</p>
604
+ <div class="flex space-x-4 mt-4">
605
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
606
+ <i class="fab fa-facebook-f"></i>
607
+ </a>
608
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
609
+ <i class="fab fa-twitter"></i>
610
+ </a>
611
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
612
+ <i class="fab fa-instagram"></i>
613
+ </a>
614
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
615
+ <i class="fab fa-linkedin-in"></i>
616
+ </a>
617
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
618
+ <i class="fab fa-youtube"></i>
619
+ </a>
620
+ </div>
621
+ </div>
622
+
623
+ <div>
624
+ <h3 class="text-lg font-semibold mb-4">Links Rápidos</h3>
625
+ <ul class="space-y-2">
626
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Início</a></li>
627
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Sobre Nós</a></li>
628
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Serviços</a></li>
629
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Portfólio</a></li>
630
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
631
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Contato</a></li>
632
+ </ul>
633
+ </div>
634
+
635
+ <div>
636
+ <h3 class="text-lg font-semibold mb-4">Serviços</h3>
637
+ <ul class="space-y-2">
638
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Desenvolvimento Web</a></li>
639
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Aplicativos Móveis</a></li>
640
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">UI/UX Design</a></li>
641
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Marketing Digital</a></li>
642
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Consultoria em TI</a></li>
643
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Hospedagem</a></li>
644
+ </ul>
645
+ </div>
646
+
647
+ <div>
648
+ <h3 class="text-lg font-semibold mb-4">Contato</h3>
649
+ <ul class="space-y-3">
650
+ <li class="flex items-start">
651
+ <i class="fas fa-map-marker-alt mt-1 mr-3 text-gray-400"></i>
652
+ <span class="text-gray-400">Av. Paulista, 1000 - São Paulo, SP</span>
653
+ </li>
654
+ <li class="flex items-start">
655
+ <i class="fas fa-phone-alt mt-1 mr-3 text-gray-400"></i>
656
+ <span class="text-gray-400">(11) 1234-5678</span>
657
+ </li>
658
+ <li class="flex items-start">
659
+ <i class="fas fa-envelope mt-1 mr-3 text-gray-400"></i>
660
+ <span class="text-gray-400">[email protected]</span>
661
+ </li>
662
+ <li class="flex items-start">
663
+ <i class="fas fa-clock mt-1 mr-3 text-gray-400"></i>
664
+ <span class="text-gray-400">Seg-Sex: 9h-18h</span>
665
+ </li>
666
+ </ul>
667
+ </div>
668
+ </div>
669
+
670
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
671
+ <p>&copy; 2023 CooperChip. Todos os direitos reservados.</p>
672
+ </div>
673
+ </div>
674
+ </footer>
675
+
676
+ <!-- Chatbot -->
677
+ <div class="chatbot">
678
+ <div id="chatbotContainer" class="chatbot-container">
679
+ <div class="bg-blue-600 text-white p-4">
680
+ <div class="flex justify-between items-center">
681
+ <h3 class="font-bold">Assistente Virtual</h3>
682
+ <button id="closeChatbot" class="text-white hover:text-gray-200">
683
+ <i class="fas fa-times"></i>
684
+ </button>
685
+ </div>
686
+ <p class="text-sm opacity-80">Estamos aqui para ajudar!</p>
687
+ </div>
688
+
689
+ <div class="p-4 h-64 overflow-y-auto bg-gray-50">
690
+ <div class="mb-4">
691
+ <div class="bg-blue-100 text-blue-900 rounded-lg p-3 max-w-xs">
692
+ <p>Olá! Como posso te ajudar hoje?</p>
693
+ </div>
694
+ </div>
695
+
696
+ <div class="flex justify-end mb-4">
697
+ <div class="bg-blue-600 text-white rounded-lg p-3 max-w-xs">
698
+ <p>Quero saber mais sobre os serviços.</p>
699
+ </div>
700
+ </div>
701
+
702
+ <div class="mb-4">
703
+ <div class="bg-blue-100 text-blue-900 rounded-lg p-3 max-w-xs">
704
+ <p>Claro! Oferecemos desenvolvimento web, aplicativos móveis e muito mais. Qual serviço te interessa?</p>
705
+ </div>
706
+ </div>
707
+ </div>
708
+
709
+ <div class="p-4 border-t border-gray-200">
710
+ <div class="flex">
711
+ <input type="text" placeholder="Digite sua mensagem..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
712
+ <button class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition duration-300">
713
+ <i class="fas fa-paper-plane"></i>
714
+ </button>
715
+ </div>
716
+ </div>
717
+ </div>
718
+
719
+ <button id="chatbotToggle" class="chatbot-toggle">
720
+ <i class="fas fa-comment-dots text-2xl"></i>
721
+ </button>
722
+ </div>
723
+
724
+ <script>
725
+ // Profile dropdown
726
+ const profileBtn = document.getElementById('profileBtn');
727
+ const profileDropdown = document.getElementById('profileDropdown');
728
+
729
+ profileBtn.addEventListener('click', () => {
730
+ profileDropdown.classList.toggle('active');
731
+ notificationDropdown.classList.remove('active');
732
+ });
733
+
734
+ // Notification dropdown
735
+ const notificationBtn = document.getElementById('notificationBtn');
736
+ const notificationDropdown = document.getElementById('notificationDropdown');
737
+
738
+ notificationBtn.addEventListener('click', () => {
739
+ notificationDropdown.classList.toggle('active');
740
+ profileDropdown.classList.remove('active');
741
+ });
742
+
743
+ // Close dropdowns when clicking outside
744
+ document.addEventListener('click', (e) => {
745
+ if (!profileBtn.contains(e.target) && !profileDropdown.contains(e.target)) {
746
+ profileDropdown.classList.remove('active');
747
+ }
748
+
749
+ if (!notificationBtn.contains(e.target) && !notificationDropdown.contains(e.target)) {
750
+ notificationDropdown.classList.remove('active');
751
+ }
752
+ });
753
+
754
+ // Chatbot toggle
755
+ const chatbotToggle = document.getElementById('chatbotToggle');
756
+ const chatbotContainer = document.getElementById('chatbotContainer');
757
+ const closeChatbot = document.getElementById('closeChatbot');
758
+
759
+ chatbotToggle.addEventListener('click', () => {
760
+ chatbotContainer.style.display = chatbotContainer.style.display === 'block' ? 'none' : 'block';
761
+ });
762
+
763
+ closeChatbot.addEventListener('click', () => {
764
+ chatbotContainer.style.display = 'none';
765
+ });
766
+
767
+ // Carousel functionality
768
+ const carouselInner = document.querySelector('.carousel-inner');
769
+ const carouselItems = document.querySelectorAll('.carousel-item');
770
+ const prevBtn = document.querySelector('.carousel-control.prev');
771
+ const nextBtn = document.querySelector('.carousel-control.next');
772
+ const indicators = document.querySelectorAll('.carousel-indicator');
773
+
774
+ let currentIndex = 0;
775
+ const itemCount = carouselItems.length;
776
+
777
+ function updateCarousel() {
778
+ carouselInner.style.transform = `translateX(-${currentIndex * 100}%)`;
779
+
780
+ indicators.forEach((indicator, index) => {
781
+ if (index === currentIndex) {
782
+ indicator.classList.add('active');
783
+ } else {
784
+ indicator.classList.remove('active');
785
+ }
786
+ });
787
+ }
788
+
789
+ prevBtn.addEventListener('click', () => {
790
+ currentIndex = (currentIndex - 1 + itemCount) % itemCount;
791
+ updateCarousel();
792
+ });
793
+
794
+ nextBtn.addEventListener('click', () => {
795
+ currentIndex = (currentIndex + 1) % itemCount;
796
+ updateCarousel();
797
+ });
798
+
799
+ indicators.forEach((indicator, index) => {
800
+ indicator.addEventListener('click', () => {
801
+ currentIndex = index;
802
+ updateCarousel();
803
+ });
804
+ });
805
+
806
+ // Auto-rotate carousel
807
+ setInterval(() => {
808
+ currentIndex = (currentIndex + 1) % itemCount;
809
+ updateCarousel();
810
+ }, 5000);
811
+
812
+ // Tab functionality
813
+ const tabBtns = document.querySelectorAll('.tab-btn');
814
+ const tabContents = document.querySelectorAll('.tab-content');
815
+
816
+ tabBtns.forEach(btn => {
817
+ btn.addEventListener('click', () => {
818
+ const tabId = btn.getAttribute('data-tab');
819
+
820
+ // Remove active class from all buttons and contents
821
+ tabBtns.forEach(b => b.classList.remove('active'));
822
+ tabContents.forEach(c => c.classList.remove('active'));
823
+
824
+ // Add active class to clicked button and corresponding content
825
+ btn.classList.add('active');
826
+ document.getElementById(tabId).classList.add('active');
827
+ });
828
+ });
829
+
830
+ // Accordion functionality
831
+ const accordionHeaders = document.querySelectorAll('.accordion-header');
832
+
833
+ accordionHeaders.forEach(header => {
834
+ header.addEventListener('click', () => {
835
+ const accordionItem = header.parentElement;
836
+ const accordionContent = header.nextElementSibling;
837
+ const icon = header.querySelector('i');
838
+
839
+ // Toggle active class on content
840
+ accordionContent.classList.toggle('active');
841
+
842
+ // Rotate icon
843
+ if (accordionContent.classList.contains('active')) {
844
+ icon.style.transform = 'rotate(180deg)';
845
+ } else {
846
+ icon.style.transform = 'rotate(0deg)';
847
+ }
848
+
849
+ // Close other accordion items
850
+ accordionHeaders.forEach(h => {
851
+ if (h !== header) {
852
+ const otherContent = h.nextElementSibling;
853
+ const otherIcon = h.querySelector('i');
854
+ otherContent.classList.remove('active');
855
+ otherIcon.style.transform = 'rotate(0deg)';
856
+ }
857
+ });
858
+ });
859
+ });
860
+ </script>
861
+ <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=gallabs/new-cooperchip" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
862
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Faça uma landing page baseada neste site: `https://cooperchip.com.br/`, com um avatar para login na navbar, com dropdown com "Perfil, Login, Register, etc. Um ícone de um sino, também na navbar com 5 notificações com o badge indicativo e o dropdown. Um chatbot no lado direito no final da página. um rodapé bem elegante na cor preto piano. Pode usar os links do Youtube da página no slide. Crie um FAQ com carrossel e uma Tab com 3 opções.