Hugging Face's logo

Spaces:
kellytonx
/
kksj
Running

App Files Community
kellytonx commited on
Commit
f7c1701
·
verified ·
1 Parent(s): ff1ca12

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +318 -38
  2. prompts.txt +1 -0
index.html CHANGED
@@ -1,41 +1,321 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta charset="utf-8">
 
 
7
  <style>
8
- body {
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
- overflow: hidden;
13
- height: 100dvh;
14
- font-family: "Arial", sans-serif;
15
- text-align: center;
16
- }
17
- .arrow {
18
- position: absolute;
19
- bottom: 32px;
20
- left: 0px;
21
- width: 100px;
22
- transform: rotate(30deg);
23
- }
24
- h1 {
25
- font-size: 50px;
26
- }
27
- h1 span {
28
- color: #acacac;
29
- font-size: 32px;
30
- }
 
31
  </style>
32
- </head>
33
- <body>
34
- <h1>
35
- <span>I'm ready to work,</span><br />
36
- Ask me anything.
37
- </h1>
38
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
39
- <script></script>
40
- <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=kellytonx/kksj" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
41
- </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>Marketing Digital Simples - Transforme Seu Negócio</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-gradient {
11
+ background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%);
12
+ }
13
+ .feature-icon {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .feature-card:hover .feature-icon {
17
+ transform: scale(1.1);
18
+ color: #4f46e5;
19
+ }
20
+ .cta-pulse {
21
+ animation: pulse 2s infinite;
22
+ }
23
+ @keyframes pulse {
24
+ 0% {
25
+ box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);
26
+ }
27
+ 70% {
28
+ box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
29
+ }
30
+ 100% {
31
+ box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
32
+ }
33
+ }
34
  </style>
35
+ </head>
36
+ <body class="font-sans bg-gray-50">
37
+ <!-- Header/Navigation -->
38
+ <header class="bg-white shadow-sm sticky top-0 z-50">
39
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
40
+ <div class="flex items-center">
41
+ <i class="fas fa-bullseye text-indigo-600 text-2xl mr-2"></i>
42
+ <span class="text-xl font-bold text-gray-800">MarketingSimples</span>
43
+ </div>
44
+ <nav class="hidden md:flex space-x-8">
45
+ <a href="#servicos" class="text-gray-600 hover:text-indigo-600 font-medium">Serviços</a>
46
+ <a href="#sobre" class="text-gray-600 hover:text-indigo-600 font-medium">Sobre Nós</a>
47
+ <a href="#depoimentos" class="text-gray-600 hover:text-indigo-600 font-medium">Depoimentos</a>
48
+ <a href="#contato" class="text-gray-600 hover:text-indigo-600 font-medium">Contato</a>
49
+ </nav>
50
+ <a href="#contato" class="md:hidden text-indigo-600">
51
+ <i class="fas fa-bars text-xl"></i>
52
+ </a>
53
+ </div>
54
+ </header>
55
+
56
+ <!-- Hero Section -->
57
+ <section class="hero-gradient text-white py-20">
58
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
59
+ <div class="md:w-1/2 mb-10 md:mb-0">
60
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Seu Negócio Online com Resultados Reais</h1>
61
+ <p class="text-xl mb-8 opacity-90">Simplificamos o marketing digital para pequenos negócios com estratégias eficazes e acessíveis.</p>
62
+ <div class="flex flex-col sm:flex-row gap-4">
63
+ <a href="#contato" class="bg-white text-indigo-600 font-bold py-3 px-8 rounded-lg hover:bg-gray-100 transition duration-300 text-center">
64
+ Comece Agora <i class="fas fa-arrow-right ml-2"></i>
65
+ </a>
66
+ <a href="#servicos" class="border-2 border-white text-white font-bold py-3 px-8 rounded-lg hover:bg-white hover:text-indigo-600 transition duration-300 text-center">
67
+ Saiba Mais
68
+ </a>
69
+ </div>
70
+ </div>
71
+ <div class="md:w-1/2 flex justify-center">
72
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
73
+ alt="Marketing Digital"
74
+ class="rounded-lg shadow-2xl max-w-full h-auto">
75
+ </div>
76
+ </div>
77
+ </section>
78
+
79
+ <!-- Features/Services -->
80
+ <section id="servicos" class="py-16 bg-white">
81
+ <div class="container mx-auto px-4">
82
+ <div class="text-center mb-16">
83
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Nossos Serviços Simples e Eficazes</h2>
84
+ <p class="text-gray-600 max-w-2xl mx-auto">Oferecemos soluções práticas para alavancar sua presença digital sem complicações.</p>
85
+ </div>
86
+
87
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
88
+ <!-- Service 1 -->
89
+ <div class="feature-card bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300">
90
+ <div class="feature-icon text-4xl text-indigo-600 mb-6">
91
+ <i class="fas fa-chart-line"></i>
92
+ </div>
93
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Gestão de Redes Sociais</h3>
94
+ <p class="text-gray-600">Criamos conteúdo relevante e gerenciamos suas redes sociais para engajar seu público-alvo.</p>
95
+ </div>
96
+
97
+ <!-- Service 2 -->
98
+ <div class="feature-card bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300">
99
+ <div class="feature-icon text-4xl text-indigo-600 mb-6">
100
+ <i class="fas fa-search-dollar"></i>
101
+ </div>
102
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Google Ads & Meta Ads</h3>
103
+ <p class="text-gray-600">Anúncios direcionados que colocam seu negócio na frente dos clientes certos.</p>
104
+ </div>
105
+
106
+ <!-- Service 3 -->
107
+ <div class="feature-card bg-gray-50 p-8 rounded-xl hover:shadow-lg transition duration-300">
108
+ <div class="feature-icon text-4xl text-indigo-600 mb-6">
109
+ <i class="fas fa-envelope-open-text"></i>
110
+ </div>
111
+ <h3 class="text-xl font-bold text-gray-800 mb-3">E-mail Marketing</h3>
112
+ <p class="text-gray-600">Campanhas por e-mail que convertem e mantêm seus clientes engajados.</p>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </section>
117
+
118
+ <!-- About Section -->
119
+ <section id="sobre" class="py-16 bg-gray-50">
120
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
121
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
122
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">Quem Somos</h2>
123
+ <p class="text-gray-600 mb-4">Somos uma equipe de especialistas em marketing digital focada em ajudar pequenos negócios a crescerem online de forma simples e acessível.</p>
124
+ <p class="text-gray-600 mb-6">Acreditamos que todo negócio merece ter uma presença digital forte, independente do tamanho ou orçamento.</p>
125
+ <div class="flex items-center">
126
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
127
+ <i class="fas fa-check text-indigo-600"></i>
128
+ </div>
129
+ <span class="text-gray-700 font-medium">+150 clientes satisfeitos</span>
130
+ </div>
131
+ </div>
132
+ <div class="md:w-1/2">
133
+ <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"
134
+ alt="Nossa Equipe"
135
+ class="rounded-lg shadow-lg max-w-full h-auto">
136
+ </div>
137
+ </div>
138
+ </section>
139
+
140
+ <!-- Testimonials -->
141
+ <section id="depoimentos" class="py-16 bg-white">
142
+ <div class="container mx-auto px-4">
143
+ <div class="text-center mb-16">
144
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">O Que Nossos Clientes Dizem</h2>
145
+ <p class="text-gray-600 max-w-2xl mx-auto">Resultados reais de negócios reais</p>
146
+ </div>
147
+
148
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
149
+ <!-- Testimonial 1 -->
150
+ <div class="bg-gray-50 p-8 rounded-xl">
151
+ <div class="flex items-center mb-4">
152
+ <div class="text-yellow-400 mr-2">
153
+ <i class="fas fa-star"></i>
154
+ <i class="fas fa-star"></i>
155
+ <i class="fas fa-star"></i>
156
+ <i class="fas fa-star"></i>
157
+ <i class="fas fa-star"></i>
158
+ </div>
159
+ </div>
160
+ <p class="text-gray-600 mb-6">"Minhas vendas online aumentaram 300% em apenas 3 meses com as estratégias simples que implementaram."</p>
161
+ <div class="flex items-center">
162
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
163
+ <i class="fas fa-user text-indigo-600"></i>
164
+ </div>
165
+ <div>
166
+ <h4 class="font-bold text-gray-800">Ana Silva</h4>
167
+ <p class="text-gray-500 text-sm">Loja de Cosméticos</p>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Testimonial 2 -->
173
+ <div class="bg-gray-50 p-8 rounded-xl">
174
+ <div class="flex items-center mb-4">
175
+ <div class="text-yellow-400 mr-2">
176
+ <i class="fas fa-star"></i>
177
+ <i class="fas fa-star"></i>
178
+ <i class="fas fa-star"></i>
179
+ <i class="fas fa-star"></i>
180
+ <i class="fas fa-star"></i>
181
+ </div>
182
+ </div>
183
+ <p class="text-gray-600 mb-6">"Finalmente encontrei uma agência que fala a minha língua e entrega resultados sem complicações desnecessárias."</p>
184
+ <div class="flex items-center">
185
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
186
+ <i class="fas fa-user text-indigo-600"></i>
187
+ </div>
188
+ <div>
189
+ <h4 class="font-bold text-gray-800">Carlos Mendes</h4>
190
+ <p class="text-gray-500 text-sm">Restaurante</p>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Testimonial 3 -->
196
+ <div class="bg-gray-50 p-8 rounded-xl">
197
+ <div class="flex items-center mb-4">
198
+ <div class="text-yellow-400 mr-2">
199
+ <i class="fas fa-star"></i>
200
+ <i class="fas fa-star"></i>
201
+ <i class="fas fa-star"></i>
202
+ <i class="fas fa-star"></i>
203
+ <i class="fas fa-star-half-alt"></i>
204
+ </div>
205
+ </div>
206
+ <p class="text-gray-600 mb-6">"O atendimento personalizado fez toda diferença. Eles realmente entendem as necessidades de pequenos negócios."</p>
207
+ <div class="flex items-center">
208
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
209
+ <i class="fas fa-user text-indigo-600"></i>
210
+ </div>
211
+ <div>
212
+ <h4 class="font-bold text-gray-800">Juliana Costa</h4>
213
+ <p class="text-gray-500 text-sm">Consultoria</p>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </section>
220
+
221
+ <!-- CTA Section -->
222
+ <section class="py-16 bg-indigo-50">
223
+ <div class="container mx-auto px-4 text-center">
224
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">Pronto para Transformar Seu Negócio?</h2>
225
+ <p class="text-gray-600 max-w-2xl mx-auto mb-8">Agende uma consulta gratuita e descubra como podemos ajudar seu negócio a crescer online.</p>
226
+ <a href="https://seusite.com/contato" id="contato" class="cta-pulse bg-indigo-600 text-white font-bold py-4 px-12 rounded-lg hover:bg-indigo-700 transition duration-300 inline-block">
227
+ Fale Conosco <i class="fas fa-arrow-right ml-2"></i>
228
+ </a>
229
+ </div>
230
+ </section>
231
+
232
+ <!-- Footer -->
233
+ <footer class="bg-gray-800 text-white py-12">
234
+ <div class="container mx-auto px-4">
235
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
236
+ <div>
237
+ <div class="flex items-center mb-4">
238
+ <i class="fas fa-bullseye text-indigo-400 text-2xl mr-2"></i>
239
+ <span class="text-xl font-bold">MarketingSimples</span>
240
+ </div>
241
+ <p class="text-gray-400">Simplificando o marketing digital para pequenos negócios desde 2020.</p>
242
+ </div>
243
+
244
+ <div>
245
+ <h4 class="text-lg font-bold mb-4">Serviços</h4>
246
+ <ul class="space-y-2">
247
+ <li><a href="#" class="text-gray-400 hover:text-white">Redes Sociais</a></li>
248
+ <li><a href="#" class="text-gray-400 hover:text-white">Google Ads</a></li>
249
+ <li><a href="#" class="text-gray-400 hover:text-white">E-mail Marketing</a></li>
250
+ <li><a href="#" class="text-gray-400 hover:text-white">SEO Básico</a></li>
251
+ </ul>
252
+ </div>
253
+
254
+ <div>
255
+ <h4 class="text-lg font-bold mb-4">Links Úteis</h4>
256
+ <ul class="space-y-2">
257
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
258
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
259
+ <li><a href="#" class="text-gray-400 hover:text-white">Política de Privacidade</a></li>
260
+ <li><a href="#" class="text-gray-400 hover:text-white">Termos de Serviço</a></li>
261
+ </ul>
262
+ </div>
263
+
264
+ <div>
265
+ <h4 class="text-lg font-bold mb-4">Contato</h4>
266
+ <ul class="space-y-2">
267
+ <li class="flex items-center">
268
+ <i class="fas fa-envelope text-indigo-400 mr-2"></i>
269
+ <a href="mailto:[email protected]" class="text-gray-400 hover:text-white">[email protected]</a>
270
+ </li>
271
+ <li class="flex items-center">
272
+ <i class="fas fa-phone text-indigo-400 mr-2"></i>
273
+ <span class="text-gray-400">(11) 98765-4321</span>
274
+ </li>
275
+ <li class="flex items-center">
276
+ <i class="fas fa-map-marker-alt text-indigo-400 mr-2"></i>
277
+ <span class="text-gray-400">São Paulo, Brasil</span>
278
+ </li>
279
+ </ul>
280
+ <div class="mt-4 flex space-x-4">
281
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
282
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
283
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
284
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-whatsapp"></i></a>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
290
+ <p>&copy; 2023 MarketingSimples. Todos os direitos reservados.</p>
291
+ <p class="mt-2">Desenvolvido com <i class="fas fa-heart text-red-400"></i> para pequenos negócios</p>
292
+ </div>
293
+ </div>
294
+ </footer>
295
+
296
+ <!-- Floating WhatsApp Button -->
297
+ <a href="https://wa.me/5511987654321" class="fixed bottom-8 right-8 bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition duration-300 z-50">
298
+ <i class="fab fa-whatsapp text-2xl"></i>
299
+ </a>
300
+
301
+ <script>
302
+ // Simple animation for scroll to sections
303
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
304
+ anchor.addEventListener('click', function (e) {
305
+ e.preventDefault();
306
+
307
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
308
+ behavior: 'smooth'
309
+ });
310
+ });
311
+ });
312
+
313
+ // Simple form submission (would be replaced with real form handling)
314
+ document.getElementById('contactForm')?.addEventListener('submit', function(e) {
315
+ e.preventDefault();
316
+ alert('Obrigado pelo seu interesse! Entraremos em contato em breve.');
317
+ this.reset();
318
+ });
319
+ </script>
320
+ <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=kellytonx/kksj" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
321
+ </html>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ Crie uma página de vendas simples sobre marketing digital simples e pequena crie um link para o site