Hugging Face's logo

Spaces:
DddDddDddr
/
d
Running

App Files Community
DddDddDddr commited on
Commit
e043eee
·
verified ·
1 Parent(s): bf21c11

Crie uma aba só pra blogs - Initial Deployment

Browse files
Files changed (6) hide show
  1. README.md +7 -5
  2. blog.html +300 -0
  3. ebooks.html +271 -0
  4. index.html +236 -18
  5. produto.html +322 -0
  6. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: D
3
- emoji: 📈
4
- colorFrom: pink
5
- colorTo: blue
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: d
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
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
blog.html ADDED
@@ -0,0 +1,300 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Blog - D.</title>
7
+ <meta name="description" content="Blog da D. - Dicas, tendências e novidades sobre moda, leitura e lifestyle">
8
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
11
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
13
+ <script src="https://unpkg.com/feather-icons"></script>
14
+ <style>
15
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
16
+ body { font-family: 'Inter', sans-serif; }
17
+ .blog-card:hover { transform: translateY(-5px); transition: all 0.3s ease; }
18
+ .category-filter { transition: all 0.3s ease; }
19
+ .category-filter:hover { background-color: #f3f4f6; }
20
+ </style>
21
+ </head>
22
+ <body class="bg-gray-50">
23
+ <!-- Header -->
24
+ <header class="bg-white shadow-md">
25
+ <div class="container mx-auto px-4">
26
+ <div class="flex items-center justify-between py-4">
27
+ <a href="index.html" class="text-2xl font-bold text-indigo-600">D.</a>
28
+
29
+ <div class="hidden md:flex space-x-8">
30
+ <a href="index.html" class="text-gray-700 hover:text-indigo-600">Início</a>
31
+ <a href="ebooks.html" class="text-gray-700 hover:text-indigo-600">E-books</a>
32
+ <a href="roupas.html" class="text-gray-700 hover:text-indigo-600">Roupas</a>
33
+ <a href="acessorios.html" class="text-gray-700 hover:text-indigo-600">Acessórios</a>
34
+ <a href="blog.html" class="text-indigo-600 font-semibold">Blog</a>
35
+ </div>
36
+
37
+ <div class="flex items-center space-x-4">
38
+ <div class="relative">
39
+ <input type="text" placeholder="Pesquisar..." class="border rounded-full py-2 px-4 w-full md:w-64">
40
+ <i data-feather="search" class="absolute right-3 top-2.5 text-gray-400"></i>
41
+ </div>
42
+ <a href="carrinho.html" class="relative">
43
+ <i data-feather="shhopping-cart" class="text-gray-700"></i>
44
+ <span class="absolute -top-2 -right-2 bg-indigo-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">0</span>
45
+ </a>
46
+ <a href="minha-conta.html" class="hidden md:block">
47
+ <i data-feather="user" class="text-gray-700"></i>
48
+ </a>
49
+ <button class="md:hidden">
50
+ <i data-feather="menu" class="极速赛车开奖结果 text-gray-700"></i>
51
+ </button>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ </header>
56
+
57
+ <main class="container mx-auto px-4 py-8">
58
+ <!-- Hero Section -->
59
+ <section class="text-center mb-12">
60
+ <h1 class="text-4xl font-bold mb-4" data-aos="fade-up">Blog D.</h1>
61
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
62
+ Descubra as últimas tendências, dicas de estilo e novidades do mundo da moda e literatura
63
+ </p>
64
+ </section>
65
+
66
+ <div class="flex flex-col lg:flex-row gap-8">
67
+ <!-- Main Content -->
68
+ <div class="lg:w-2/3">
69
+ <!-- Featured Post -->
70
+ <article class="bg-white rounded-lg shadow-md overflow-hidden mb-8 blog-card" data-aos="fade-up">
71
+ <img src="http://static.photos/fashion/1200x630/1" alt="Tendências de Moda" class="w-full h-64 object-cover">
72
+ <div class="p-6">
73
+ <span class="text-indigo-600 font-semibold">Moda</span>
74
+ <h2 class="text-2xl font-bold mt-2 mb-3">As 5 Tendências de Moda que Dominarão 2024</h2>
75
+ <p class="text-gray-600 mb-4">
76
+ Descubra as principais tendências que vão revolucionar o guarda-roupa deste ano e como incorporá-las no seu estilo...
77
+ </p>
78
+ <div class="flex items-center justify-between">
79
+ <div class="flex items-center">
80
+ <div class="w-8 h-8 bg-gray-300 rounded-full mr-3"></div>
81
+ <div>
82
+ <p class="text-sm font-semibold">Ana Silva</p>
83
+ <p class="text-xs text-gray-500">15 Jan, 2024 • 5 min read</p>
84
+ </div>
85
+ </div>
86
+ <a href="post.html" class="text-indigo-600 hover:text-indigo-700 font-semibold">Ler mais →</a>
87
+ </div>
88
+ </div>
89
+ </article>
90
+
91
+ <!-- Blog Posts Grid -->
92
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
93
+ <!-- Post 1 -->
94
+ <article class="bg-white rounded-lg shadow-md blog-card" data-aos="fade-up" data-aos-delay="100">
95
+ <img src="http://static.photos/education/640x360/2" alt="Dicas de Leitura" class="w-full h-48 object-cover rounded-t-lg">
96
+ <div class="p-4">
97
+ <span class="text-indigo-600 text-sm font-semibold">Literatura</span>
98
+ <h3 class="font-bold mt-2 mb-2">Como Criar o Hábito da Leitura em 2024</h3>
99
+ <p class="text-gray-600 text-sm mb-4">
100
+ Descubra estratégias práticas para desenvolver o hábito da leitura e transformar sua rotina...
101
+ </p>
102
+ <div class="flex items-center justify-between">
103
+ <div class="flex items-center">
104
+ <div class="w-6 h-6 bg-gray-300 rounded-full mr-2"></div>
105
+ <p class="text-xs text-gray-500">Carlos Oliveira</p>
106
+ </div>
107
+ <span class="text-xs text-gray-500">12 Jan, 2024</span>
108
+ </div>
109
+ </div>
110
+ </article>
111
+
112
+ <!-- Post 2 -->
113
+ <article class="bg-white rounded-lg shadow-md blog-card" data-aos="fade-up" data-aos-delay="200">
114
+ <img src="http://static.photos/lifestyle/640x360/3" alt="Estilo de Vida" class="w-full h-48 object-cover rounded-t-lg">
115
+ <div class="p-4">
116
+ <span class="text-indigo-600 text-sm font-semibold">Lifestyle</span>
117
+ <h3 class="font-bold mt-2 mb-2">5 Acessórios que Transformam Qualquer Look</h3>
118
+ <p class="text-gray-600 text-sm mb-4">
119
+ Peças-chave que elevam sua produção e fazem a diferença no visual do dia a dia...
120
+ </p>
121
+ <div class="flex items-center justify-between">
122
+ <div class="flex items-center">
123
+ <div class="w-6 h-6 bg-gray-300 rounded-full mr-2"></div>
124
+ <p class="text-xs text-gray-500">Marina Costa</p>
125
+ </div>
126
+ <span class="text-xs text-gray-500">10 Jan, 2024</span>
127
+ </div>
128
+ </div>
129
+ </article>
130
+
131
+ <!-- Post 3 -->
132
+ <article class="bg-white rounded-lg shadow-md blog-card" data-aos="fade-up" data-aos-delay="300">
133
+ <img src="http://static.photos/education/640x360/4" alt="Clássicos Literários" class="w-full h-48 object-cover rounded-t-lg">
134
+ <div class="p-4">
135
+ <span class="text-indigo-600 text-sm font-semibold">Literatura</span>
136
+ <h3 class="font-bold mt极速赛车开奖结果-2 mb-2">Por que Ler os Clássicos da Literatura Brasileira?</h3>
137
+ <p class="text-gray-600 text-sm mb-4">
138
+ A importância de conhecer as obras que moldaram nossa cultura e identidade nacional...
139
+ </p>
140
+ <div class="flex items-center justify-between">
141
+ <div class="flex items-center">
142
+ <div class="极速赛车开奖结果 w-6 h-6 bg-gray-300 rounded-full mr-2"></div>
143
+ <p class="text-xs text-gray-500">Pedro Santos</p>
144
+ </div>
145
+ <span class="text-xs text-gray-500">8 Jan, 202极速赛车开奖结果4</span>
146
+ </div>
147
+ </div>
148
+ </article>
149
+
150
+ <!-- Post 4 -->
151
+ <article class="bg-white rounded-lg shadow-md blog-card" data-aos="fade-up" data-aos-delay="400">
152
+ <img src="http://static.photos/fashion/640x360/5" alt="Sustentabilidade" class="w-full h-48 object-cover rounded-t-lg">
153
+ <div class="p-4">
154
+ <span class="text-indigo-600 text-sm font-semibold">Moda Sustentável</span>
155
+ <h3 class="font-bold mt-2 mb-2">Moda Consciente: Como Escolher Marcas Sustentáveis</h3>
156
+ <p class="text-gray-600 text-sm mb-4">
157
+ Guia prático para identificar e apoiar marcas que priorizam a sustentabilidade...
158
+ </p>
159
+ <div class="flex items-center justify-between">
160
+ <div class="flex items-center">
161
+ <div class="w-6 h-6 bg-gray-300 rounded-full mr-2"></div>
162
+ <p class="text-xs text-gray-500">Julia Mendes</p>
163
+ </div>
164
+ <span class="text-xs text-gray-500">5 Jan, 2024</span>
165
+ </div>
166
+ </div>
167
+ </article>
168
+ </div>
169
+
170
+ <!-- Paginação -->
171
+ <div class="flex justify-center mt-12">
172
+ <nav class="flex items-center space-x-2">
173
+ <button class="px-3 py-1 rounded border hover:bg-gray-100">Anterior</button>
174
+ <button class="px-3 py-1 rounded border bg-indigo-600 text-white">1</button>
175
+ <button class="px-3 py-1 rounded border hover:bg-gray-100">2</button>
176
+ <button class="px-3 py-1 rounded border hover:bg-gray-100">3</button>
177
+ <button class="px-3 py-1 rounded border hover:bg-gray-100">Próximo</button>
178
+ </nav>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Sidebar -->
183
+ <aside class="lg:w-1/3 space-y-6">
184
+ <!-- Categorias -->
185
+ <div class="bg-white p-6 rounded-lg shadow-md">
186
+ <h3 class="font-semibold mb-4">Categorias</h3>
187
+ <div class="space-y-2">
188
+ <a href="#" class="flex justify-between items-center p-2 rounded hover:bg-gray-50">
189
+ <span>Moda</span>
190
+ <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-xs">12</span>
191
+ </a>
192
+ <a href="#" class="flex justify-between items-center p-2 rounded hover:bg-gray-50">
193
+ <span>Literatura</span>
194
+ <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-xs">8</span>
195
+ </a>
196
+ <a href="#" class="flex justify-between items-center p-2 rounded hover:bg-gray-50">
197
+ <span>Lifestyle</span>
198
+ <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-xs">6</span>
199
+ </a>
200
+ <a href="#" class="flex justify-between items-center p-2 rounded hover:bg-gray-50">
201
+ <span>Moda Sustentável</span>
202
+ <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-xs">4</span>
203
+ </a>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- Posts Populares -->
208
+ <div class="bg-white p-6 rounded-lg shadow-md">
209
+ <h3 class="font-semibold mb-4">Posts Populares</h3>
210
+ <div class="space-y-4">
211
+ <a href="#" class="flex items-center space-x-3 group">
212
+ <img src="http://static.photos/fashion/200x200/6" alt="Post popular" class="w-16 h-16 object-cover rounded">
213
+ <div>
214
+ <h4 class="font-semibold group-hover:text-indigo-600">Como Montar Looks Básicos que Impressionam</h4>
215
+ <p class="text-sm text-gray-500">20 Dec, 2023</p>
216
+ </div>
217
+ </a>
218
+ <a href="#" class="flex items-center space-x-3 group">
219
+ <img src="http://static.photos/education/200x200/7" alt="Post popular" class="w-16 h-16 object-cover rounded">
220
+ <div>
221
+ <h4 class="font-semibold group-hover:text-indigo-600">Os Melhores Livros para Começar o Ano</h4>
222
+ <p class="text-sm text-gray-500">18 Dec, 2023</p>
223
+ </div>
224
+ </a>
225
+ <a href="#" class="flex items-center space-x-3 group">
226
+ <img src="http://static.photos/lifestyle/200x200/8" alt="Post popular" class="w-16 h-16 object-cover rounded">
227
+ <div>
228
+ <h4 class="font-semibold group极速赛车开奖结果-hover:text-indigo-600">Rotina Matinal para Aumentar a Produtividade</h4>
229
+ <p class="text-sm text-gray-500">15 Dec, 2023</p>
230
+ </div>
231
+ </a>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Newsletter -->
236
+ <div class="bg-indigo-600 text-white p-6 rounded-lg shadow-md">
237
+ <h3 class="font-semibold mb-4">Newsletter</h3>
238
+ <p class="text-sm mb-4">Inscreva-se para receber as novidades do blog diretamente no seu email</p>
239
+ <form>
240
+ <input type="email" placeholder="Seu email" class="w-full px-4 py-2 rounded text-gray-800 mb-3">
241
+ <button type="submit" class="w-full bg-white text-indigo-600 py-2 rounded font-semibold hover:bg-gray-100">
242
+ Inscrever
243
+ </button>
244
+ </form>
245
+ </div>
246
+ </aside>
247
+ </div>
248
+ </main>
249
+
250
+ <!-- Footer -->
251
+ <footer class="bg-gray-800 text-white py-12 mt-12">
252
+ <div class="container mx-auto px-4">
253
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
254
+ <div>
255
+ <h3 class="text-xl font-semibold mb-4">D.</h3>
256
+ <p class="text-gray-400">Sua loja virtual de confiança para e-books, roupas e acessórios.</p>
257
+ </div>
258
+
259
+ <div>
260
+ <h4 class="font-semibold mb-4">Categorias</h4>
261
+ <ul class="space-y-2">
262
+ <li><a href="ebooks.html" class="text-gray-400 hover:text-white">E-books</a></li>
263
+ <li><a href="roupas.html" class="text-gray-400 hover:text-white">Roupas</a></li>
264
+ <li><a href="acessorios.html" class="text-gray极速赛车开奖结果-400 hover:text-white">Acessórios</a></li>
265
+ <li><a href="blog.html" class="text-gray-400 hover:text-white">Blog</a></li>
266
+ </ul>
267
+ </div>
268
+
269
+ <div>
270
+ <h4 class="font-semibold mb-4">Suporte</h4>
271
+ 极速赛车开奖结果 <ul class="space-y-2">
272
+ <li><a href="#" class="text-gray-400 hover:text-white">Central de Ajuda</a></li>
273
+ <li><a href="#" class="text-gray-400 hover:text-white">Política de Entregas</a></li>
274
+ <li><a href="#" class="text-gray-400 hover:text-white">Trocas e Devoluções</a></li>
275
+ </ul>
276
+ </div>
277
+
278
+ <div>
279
+ <h4 class="font-semibold mb-4">Contato</h4>
280
+ <div class="flex space-x-4 mb-4">
281
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>
282
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>
283
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
284
+ </div>
285
+ <p class="text-gray-400">contato@lojaonline.com</p>
286
+ </div>
287
+ </div>
288
+
289
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
290
+ <p>&copy; 2023 D. Todos os direitos reservados.</p>
291
+ </div>
292
+ </div>
293
+ </footer>
294
+
295
+ <script>
296
+ AOS.init();
297
+ feather.replace();
298
+ </script>
299
+ </body>
300
+ </html>
ebooks.html ADDED
@@ -0,0 +1,271 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>E-books - LojaOnline</title>
7
+ <meta name="description" content="Descubra nossa coleção de e-books com milhares de títulos para todos os gostos">
8
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
11
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
13
+ <script src="https://unpkg.com/feather-icons"></script>
14
+ <style>
15
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
16
+ body { font-family: 'Inter', sans-serif; }
17
+ .product-card:hover { transform: translateY(-5px); transition: all 0.3s ease; }
18
+ .filter-option:hover { background-color: #f3f4f6; }
19
+ </style>
20
+ </head>
21
+ <body class="bg-gray-50">
22
+ <!-- Header (mesmo do index) -->
23
+ <header class="bg-white shadow-md">
24
+ <div class="container mx-auto px-4">
25
+ <div class="flex items-center justify-between py-4">
26
+ <a href="index.html" class="text-2xl font-bold text-indigo-600">D.</a>
27
+
28
+ <div class="hidden md极速赛车开奖结果:flex space-x-8">
29
+ <a href="index.html" class="text-gray-700 hover:text-indigo-600">Início</a>
30
+ <a href="ebooks.html" class="text-indigo-600 font-semibold">E-books</a>
31
+ <a href="roupas.html" class="text-gray-700 hover:text-indigo-600">Roupas</a>
32
+ <a href="acessorios.html" class="text-gray-700 hover:text-indigo-600">Acessórios</a>
33
+ <a href="blog.html" class="text-gray-700 hover:text-indigo-600">Blog</a>
34
+ </div>
35
+
36
+ <div class="flex items-center space-x-4">
37
+ <div class="relative">
38
+ <input type="text" placeholder="Pesquisar..." class="border rounded-full py-2 px-4 w-full md:w-64">
39
+ <i data-feather="search" class="absolute right-3 top-2.5 text-gray-400"></i>
40
+ </div>
41
+ <a href="carrinho.html" class="relative">
42
+ <i data-feather="shopping-cart" class="text-gray-700"></i>
43
+ <span class="absolute -top-2 -right-2 bg-indigo-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">0</span>
44
+ </a>
45
+ <a href="minha-conta.html" class="hidden md:block">
46
+ <i data-feather="user" class="text-gray-700"></i>
47
+ </a>
48
+ <button class="md:hidden">
49
+ <i data-feather="menu" class="text-gray-700"></i>
50
+ </button>
51
+ </div>
52
+ </div>
53
+ </div>
54
+ </header>
55
+
56
+ <main class="container mx-auto px-4 py-8">
57
+ <div class="flex flex-col md:flex-row gap-8">
58
+ <!-- Filtros -->
59
+ <aside class="w-full md:w-64 bg-white p-6 rounded-lg shadow-md h-fit">
60
+ <h2 class="text-xl font-semibold mb-4">Filtrar</h2>
61
+
62
+ <div class="mb-6">
63
+ <h3 class="font-semibold mb-3">Gênero</h3>
64
+ <div class="space-y-2">
65
+ <label class="flex items-center filter-option p-2 rounded cursor-pointer">
66
+ <input type="checkbox" class="mr-2"> Ficção
67
+ </label>
68
+ <label class="flex items-center filter-option p-2 rounded cursor-pointer">
69
+ <input type="checkbox" class="mr-2"> Não-Ficção
70
+ </label>
71
+ <label class="flex items-center filter-option p-2 rounded cursor-pointer">
72
+ <input type="checkbox" class="mr-2"> Autoajuda
73
+ </label>
74
+ <label class="flex items-center filter-option p-2 rounded cursor-pointer">
75
+ <input type="checkbox" class="mr-2"> Negócios
76
+ </label>
77
+ </div>
78
+ </div>
79
+
80
+ <div class="mb-6">
81
+ <h3 class="font-semibold mb-3">Preço</h3>
82
+ <div class="space-y-2">
83
+ <label class="flex items-center filter-option p-2 rounded cursor-pointer">
84
+ <input type="radio" name="price" class="mr-2"> Até R$ 20
85
+ </label>
86
+ <label class="flex items-center filter-option p-2 rounded cursor-pointer">
87
+ <input type="radio" name="price" class="mr-2"> R$ 20 - R$ 50
88
+ </label>
89
+ <label class="flex items-center filter-option p-2 rounded cursor-pointer">
90
+ <input type="radio" name="price" class="mr-2"> Acima de R$ 50
91
+ </label>
92
+ </div>
93
+ </div>
94
+
95
+ <div class="mb-6">
96
+ <h3 class="font-semibold mb-3">Autor</h3>
97
+ <input type="text" placeholder="Buscar autor..." class="w-full border rounded px-3 py-2 mb-3">
98
+ <div class="space-y-2 max-h-40 overflow-y-auto">
99
+ <label class="flex items-center filter-option p-2 rounded cursor-pointer">
100
+ <input type="checkbox" class="mr-2"> Machado de Assis
101
+ </label>
102
+ <label class="flex items-center filter-option p-2 rounded cursor-pointer">
103
+ <input type="checkbox" class="mr-2"> Clarice Lispector
104
+ </label>
105
+ <label class="flex items-center filter-option p-2 rounded cursor-pointer">
106
+ <input type="checkbox" class="mr-2"> Jorge Amado
107
+ </label>
108
+ </div>
109
+ </div>
110
+
111
+ <button class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700">Aplicar Filtros</button>
112
+ </aside>
113
+
114
+ <!-- Lista de produtos -->
115
+ <div class="flex-1">
116
+ <div class="flex justify-between items-center mb-6">
117
+ <h1 class="text-2xl font-bold">E-books</h1>
118
+ <div class="flex items-center space-x-2">
119
+ <span class="text-gray-600">Ordenar por:</span>
120
+ <select class="border rounded px-3 py-2">
121
+ <option>Mais relevantes</option>
122
+ <option>Menor preço</option>
123
+ <option>Maior preço</option>
124
+ <option>Mais vendidos</option>
125
+ </select>
126
+ </div>
127
+ </div>
128
+
129
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
130
+ <!-- Produto 1 -->
131
+ <div class="bg-white rounded-lg shadow-md product-card" data-aos="fade-up">
132
+ <img src="http://static.photos/education/320x240/8" alt="E-book" class="w-full h-48 object-cover rounded-t-lg">
133
+ <div class="p-4">
134
+ <h3 class="font-semibold mb-2">Dom Casmurro</h3>
135
+ <p class="text-gray-600 text-sm mb-2">Machado de Assis</p>
136
+ <div class="flex items-center mb-2">
137
+ <div class="flex text-yellow-400">
138
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
139
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
140
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
141
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
142
+ <i data-feather="star" class="w-4 h-4"></i>
143
+ </div>
144
+ <span class="text-gray-500 text-sm ml-2">(128)</span>
145
+ </div>
146
+ <div class="flex items-center justify-between">
147
+ <span class="text-indigo-600 font-bold">R$ 19,90</span>
148
+ <button class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700">
149
+ <i data-feather="shopping-cart" class="w-4 h-4"></i>
150
+ </button>
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Produto 2 -->
156
+ <div class="bg-white rounded-lg shadow-md product-card" data-aos="fade-up" data-aos-delay="100">
157
+ <img src="http://static.photos/education/320x240/9" alt="E-book" class="w-full h-48 object-cover rounded-t-lg">
158
+ <div class="p-4">
159
+ <h3 class="font-semibold mb-2">A Moreninha</h3>
160
+ <p class="text-gray-600 text-sm mb-2">Joaquim Manuel de Macedo</p>
161
+ <div class="flex items-center mb-2">
162
+ <div class="flex text-yellow-400">
163
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
164
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
165
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
166
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
167
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
168
+ </div>
169
+ <span class="text-gray-500 text-sm ml-2">(95)</span>
170
+ </div>
171
+ <div class="flex items-center justify-between">
172
+ <span class="text-indigo-600 font-bold">R$ 14,90</span>
173
+ <button class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700">
174
+ <i data-feather="shopping-cart" class="w-4 h-4"></i>
175
+ </button>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Produto 3 -->
181
+ <div class="bg-white rounded-lg shadow-md product-card" data-aos="fade-up" data-aos-delay="200">
182
+ <img src="http://static.photos/education/320x240/10" alt="E-book" class="w-full h-48 object-cover rounded-t-lg">
183
+ <div class="p-4">
184
+ <h3 class="font-semibold mb-2">O Cortiço</h3>
185
+ <p class="text-gray-600 text-sm mb-2">Aluísio Azevedo</p>
186
+ <div class="flex items-center mb-2">
187
+ <div class="flex text-yellow-400">
188
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
189
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
190
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
191
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
192
+ <i data-feather="star" class="w-4 h-4"></i>
193
+ </div>
194
+ <span class="text-gray-500 text-sm ml-2">(87)</span>
195
+ </div>
196
+ <div class="flex items-center justify-between">
197
+ <span class="text-indigo-600 font-bold">R$ 17,90</span>
198
+ <button class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700">
199
+ <i data-feather="shhopping-cart" class="w-4 h-4"></i>
200
+ </button>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Mais produtos... -->
206
+ </div>
207
+
208
+ <!-- Paginação -->
209
+ <div class="flex justify-center mt-12">
210
+ <nav class="flex items-center space-x-2">
211
+ <button class="px-3 py-1 rounded border hover:bg-gray-100">Anterior</button>
212
+ <button class="px-3 py-1 rounded border bg-indigo-600 text-white">1</button>
213
+ <button class="px-3 py-1 rounded border hover:bg-gray-100">2</button>
214
+ <button class="px-3 py-1 rounded border hover:bg-gray-100">3</button>
215
+ <button class="px-3 py-1 rounded border hover:bg-gray-100">Próximo</button>
216
+ </nav>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </main>
221
+
222
+ <!-- Footer (mesmo do index) -->
223
+ <footer class="bg-gray-800 text-white py-12 mt-12">
224
+ <div class="container mx-auto px-4">
225
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
226
+ <div>
227
+ <h3 class="text-xl font-semibold mb-4">D.</h3>
228
+ <p class="text-gray-400">Sua loja virtual de confiança para e-books, roupas e acessórios.</p>
229
+ </div>
230
+
231
+ <div>
232
+ <h4 class="font-semibold mb-4">Categorias</h4>
233
+ <ul class="space-y-2">
234
+ <li><a href="ebooks.html" class="text-gray-400 hover:text-white">E-books</a></li>
235
+ <li><a href="roupas.html" class="text-gray-400 hover:text-white">Roupas</a></li>
236
+ <li><a href="acessorios.html" class="text-gray-400 hover:text-white">Acessórios</a></li>
237
+ </ul>
238
+ </div>
239
+
240
+ <div>
241
+ <h4 class="font-semibold mb-4">Suporte</h4>
242
+ <ul class="space-y-2">
243
+ <li><a href="#" class="text-gray-400 hover:text-white">Central de Ajuda</a></li>
244
+ <li><a href="#" class="text-gray-400 hover:text-white">Política de Entregas</a></li>
245
+ <li><a href="#" class="text-gray-400 hover:text-white">Trocas e Devoluções</a></li>
246
+ </ul>
247
+ </div>
248
+
249
+ <div>
250
+ <h4 class="font-semibold mb-4">Contato</h4>
251
+ <div class="flex space-x-4 mb-4">
252
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>
253
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>
254
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
255
+ </div>
256
+ <p class="text-gray-400">contato@lojaonline.com</p>
257
+ </div>
258
+ </div>
259
+
260
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
261
+ <p>&copy; 2023 D. Todos os direitos reservados.</p>
262
+ </div>
263
+ </div>
264
+ </footer>
265
+
266
+ <script>
267
+ AOS.init();
268
+ feather.replace();
269
+ </script>
270
+ </body>
271
+ </html>
index.html CHANGED
@@ -1,19 +1,237 @@
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>LojaOnline - E-books, Roupas e Acessórios</title>
7
+ <meta name="description" content="Compre e-books, roupas e acessórios de qualidade com entrega rápida e preços competitivos">
8
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
11
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
13
+ <script src="https://unpkg.com/feather-icons"></script>
14
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
15
+ <style>
16
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
17
+ body { font-family: 'Inter', sans-serif; }
18
+ .product-card:hover { transform: translateY(-5px); transition: all 0.3s ease; }
19
+ .category-filter { transition: all 0.3s ease; }
20
+ .category-filter:hover { background-color: #f3f4f6; }
21
+ </style>
22
+ </head>
23
+ <body class="bg-gray-50">
24
+ <!-- Header -->
25
+ <header class="bg-white shadow-md">
26
+ <div class="container mx-auto px-4">
27
+ <div class="flex items-center justify-between py-4">
28
+ <a href="index.html" class="text-2xl font-bold text-indigo-600">D.</a>
29
+
30
+ <div class="hidden md:flex space-x-8">
31
+ <a href="index.html" class="text-gray-700 hover:text-indigo-600">Início</a>
32
+ <a href="ebooks.html" class="text-gray-700 hover:text-indigo-600">E-books</a>
33
+ <a href="roupas.html" class="text-gray-700 hover:text-indigo-600">Roupas</a>
34
+ <a href="acessorios.html" class="text-gray-700 hover:text-indigo-600">Acessórios</a>
35
+ </div>
36
+
37
+ <div class="flex items-center space-x-4">
38
+ <div class="relative">
39
+ <input type="text" placeholder="Pesquisar..." class="border rounded-full py-2 px-4 w-full md:w-64">
40
+ <i data-feather="search" class="absolute right-3 top-2.5 text-gray-400"></i>
41
+ </div>
42
+ <a href="carrinho.html" class="relative">
43
+ <i data-feather="shopping-cart" class="text-gray-700"></i>
44
+ <span class="absolute -top-2 -right-2 bg-indigo-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">0</span>
45
+ </a>
46
+ <a href="minha-conta.html" class="hidden md:block">
47
+ <i data-feather="user" class="text-gray-700"></i>
48
+ </a>
49
+ <button class="md:hidden">
50
+ <i data-feather="menu" class="text-gray-700"></i>
51
+ </button>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ </header>
56
+
57
+ <!-- Hero Banner -->
58
+ <section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-16">
59
+ <div class="container mx-auto px-4 text-center" data-aos="fade-up">
60
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Ofertas Especiais</h1>
61
+ <p class="text-xl mb-8">Até 50% de desconto em itens selecionados</p>
62
+ <button class="bg-white text-indigo-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition">Ver Ofertas</button>
63
+ </div>
64
+ </section>
65
+
66
+ <!-- Categories -->
67
+ <section class="py-12">
68
+ <div class="container mx-auto px-4">
69
+ <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Nossas Categorias</h2>
70
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
71
+ <div class="bg-white rounded-lg shadow-md overflow-hidden category-filter" data-aos="fade-up" data-aos-delay="100">
72
+ <img src="http://static.photos/education/640x360/1" alt="E-books" class="w-full h-48 object-cover">
73
+ <div class="p-6">
74
+ <h3 class="text-xl font-semibold mb-2">E-books</h3>
75
+ <p class="text-gray-600 mb-4">Descubra milhares de livros digitais para todos os gostos</p>
76
+ <a href="ebooks.html" class="text-indigo-600 font-semibold hover:text-indigo-700">Explorar →</a>
77
+ </div>
78
+ </div>
79
+
80
+ <div class="bg-white rounded-lg shadow-md overflow-hidden category-filter" data-aos="fade-up" data-aos-delay="200">
81
+ <img src="http://static.photos/fashion/640x360/2" alt="Roupas" class="w-full h-48 object-cover">
82
+ <div class="p-6">
83
+ <h3 class="text-xl font-semibold mb-2">Roupas</h3>
84
+ <p class="text-gray-600 mb-4">Moda contemporânea para seu estilo único</p>
85
+ <a href="roupas.html" class="text-indigo-600 font-semibold hover:text-indigo-700">Explorar →</a>
86
+ </div>
87
+ </div>
88
+
89
+ <div class="bg-white rounded-lg shadow-md overflow-hidden category-filter" data-aos="fade-up" data-aos-delay="300">
90
+ <img src="http://static.photos/accessories/640x360/3" alt="Acessórios" class="w-full h-48 object-cover">
91
+ <div class="p-6">
92
+ <h3 class="text-xl font-semibold mb-2">Acessórios</h3>
93
+ <p class="text-gray-600 mb-4">Complete seu look com nossos acessórios exclusivos</p>
94
+ <a href="acessorios.html" class="text-indigo-600 font-semibold hover:text-indigo-700">Explorar →</a>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </section>
100
+
101
+ <!-- Featured Products -->
102
+ <section class="py-12 bg-gray-100">
103
+ <div class="container mx-auto px-4">
104
+ <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Destaques</h2>
105
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
106
+ <!-- Product 1 -->
107
+ <div class="bg-white rounded-lg shadow-md product-card" data-aos="fade-up" data-aos-delay="100">
108
+ <img src="http://static.photos/education/320x240/4" alt="E-book" class="w-full h-48 object-cover rounded-t-lg">
109
+ <div class="p-4">
110
+ <h3 class="font-semibold mb-2">Dom Casmurro</h3>
111
+ <p class="text-gray-600 text-sm mb-2">Machado de Assis</p>
112
+ <div class="flex items-center justify-between">
113
+ <span class="text-indigo-600 font-bold">R$ 19,90</span>
114
+ <button class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700">
115
+ <i data-feather="shopping-cart" class="w-4 h-4"></i>
116
+ </button>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Product 2 -->
122
+ <div class="bg-white rounded-lg shadow-md product-card" data-aos="fade-up" data-aos-delay="200">
123
+ <img src="http://static.photos/fashion/320x240/5" alt="Camiseta" class="w-full h-48 object-cover rounded-t-lg">
124
+ <div class="p-4">
125
+ <h3 class="font-semibold mb-2">Camiseta Básica</h3>
126
+ <p class="text-gray-600 text-sm mb-2">Algodão, cores variadas</p>
127
+ <div class="flex items-center justify-between">
128
+ <span class="text-indigo-600 font-bold">R$ 49,90</span>
129
+ <button class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700">
130
+ <i data-feather="shopping-cart" class="w-4 h-4"></i>
131
+ </button>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Product 3 -->
137
+ <div class="bg-white rounded-lg shadow-md product-card" data-aos="fade-up" data-aos-delay="300">
138
+ <img src="http://static.photos/accessories/320x240/6" alt="Relógio" class="w-full h-48 object-cover rounded-t-lg">
139
+ <div class="p-4">
140
+ <h3 class="font-semibold mb-2">Relógio Premium</h3>
141
+ <p class="text-gray-600 text-sm mb-2">Aço inoxidável</p>
142
+ <div class="flex items-center justify-between">
143
+ <span class="text-indigo-600 font-bold">R$ 299,90</span>
144
+ <button class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700">
145
+ <i data-feather="shopping-cart" class="w-4 h-4"></i>
146
+ </button>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Product 4 -->
152
+ <div class="bg-white rounded-lg shadow-md product-card" data-aos="fade-up" data-aos-delay="400">
153
+ <img src="http://static.photos/education/320x240/7" alt="E-book" class="w-full h-48 object-cover rounded-t-lg">
154
+ <div class="p-4">
155
+ <h3 class="font-semibold mb-2">A Arte da Guerra</h3>
156
+ <p class="text-gray-600 text-sm mb-2">Sun Tzu</p>
157
+ <div class="flex items-center justify-between">
158
+ <span class="text-indigo-600 font-bold">R$ 14,90</span>
159
+ <button class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700">
160
+ <i data-feather="shopping-cart" class="w-4 h-4"></i>
161
+ </button>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </section>
168
+
169
+ <!-- Newsletter -->
170
+ <section class="py-16 bg-indigo-600 text-white">
171
+ <div class="container mx-auto px-4 text-center">
172
+ <h2 class="text-3xl font-bold mb-4" data-aos="fade-up">Fique por dentro das novidades</h2>
173
+ <p class="mb-8" data-aos="fade-up" data-aos-delay="100">Cadastre-se para receber ofertas exclusivas</p>
174
+ <form class="max-w-md mx-auto flex" data-aos="fade-up" data-aos-delay="200">
175
+ <input type="email" placeholder="Seu e-mail" class="flex-grow px-4 py-3 rounded-l-lg text-gray-800 focus:outline-none">
176
+ <button type="submit" class="bg-purple-600 px-6 py-3 rounded-r-lg hover:bg-purple-700 transition">Inscrever</button>
177
+ </form>
178
+ </div>
179
+ </section>
180
+
181
+ <!-- Footer -->
182
+ <footer class="bg-gray-800 text-white py-12">
183
+ <div class="container mx-auto px-4">
184
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
185
+ <div>
186
+ <h3 class="text-xl font-semibold mb-4">D.</h3>
187
+ <p class="text-gray-400">Sua loja virtual de confiança para e-books, roupas e acessórios.</p>
188
+ </div>
189
+
190
+ <div>
191
+ <h4 class="font-semibold mb-4">Categorias</h4>
192
+ <ul class="space-y-2">
193
+ <li><a href="ebooks.html" class="text-gray-400 hover:text-white">E-books</a></li>
194
+ <li><a href="roupas.html" class="text-gray-400 hover:text-white">Roupas极速赛车开奖结果</a></li>
195
+ <li><a href="acessorios.html" class="text-gray-400 hover:text-white">Acessórios</a></li>
196
+ <li><a href="blog.html" class="text-gray-400 hover:text-white">Blog</a></li>
197
+ </ul>
198
+ </div>
199
+
200
+ <div>
201
+ <h4 class="font-semibold mb-4">Suporte</h4>
202
+ <ul class="space-y-2">
203
+ <li><a href="#" class="text-gray-400 hover:text-white">Central de Ajuda</a></li>
204
+ <li><a href="#" class="text-gray-400 hover:text-white">Política de Entregas</a></li>
205
+ <li><a href="#" class="text-gray-400 hover:text-white">Trocas e Devoluções</a></li>
206
+ </ul>
207
+ </div>
208
+
209
+ <div>
210
+ <h4 class="font-semibold mb-4">Contato</h4>
211
+ <div class="flex space-x-4 mb-4">
212
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>
213
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>
214
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
215
+ </div>
216
+ <p class="text-gray-400">contato@lojaonline.com</p>
217
+ </div>
218
+ </div>
219
+
220
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
221
+ <p>&copy; 2023 D. Todos os direitos reservados.</p>
222
+ </div>
223
+ </div>
224
+ </footer>
225
+
226
+ <script>
227
+ AOS.init();
228
+ feather.replace();
229
+
230
+ // Analytics (exemplo com Google Analytics)
231
+ window.dataLayer = window.dataLayer || [];
232
+ function gtag(){dataLayer.push(arguments);}
233
+ gtag('js', new Date());
234
+ gtag('config', 'GA_MEASUREMENT_ID');
235
+ </script>
236
+ </body>
237
  </html>
produto.html ADDED
@@ -0,0 +1,322 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Dom Casmurro - D.</title>
7
+ <meta name="description" content="Dom Casmurro de Machado de Assis - Um clássico da literatura brasileira">
8
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
11
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
13
+ <script src="https://unpkg.com/feather-icons"></script>
14
+ <style>
15
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
16
+ body { font-family: 'Inter', sans-serif; }
17
+ .gallery-image { cursor: pointer; transition: all 0.3s ease; }
18
+ .gallery-image:hover { opacity: 0.8; }
19
+ </style>
20
+ </head>
21
+ <body class="bg-gray-50">
22
+ <!-- Header (mesmo do index) -->
23
+ <header class="bg-white shadow-md">
24
+ <div class="container mx-auto px-4">
25
+ <div class="flex items-center justify-between py-4">
26
+ <a href="index.html" class="text-2xl font-bold text-indigo-600">D.</a>
27
+
28
+ <div class="hidden md:flex space-x-8">
29
+ <a href="index.html" class="text-gray-700 hover:text-indigo-600">Início</a>
30
+ <a href="ebooks.html" class="text-gray-700 hover:text-indigo-600">E-books</a>
31
+ <a href="roupas.html" class="text-gray-700 hover:text-indigo-600">Roupas</a>
32
+ <a href="acessorios.html" class="text-gray-700 hover:text-indigo-600">Acessórios</a>
33
+ <a href="blog.html" class="text-gray-700 hover:text-indigo-600">Blog</a>
34
+ </div>
35
+
36
+ <div class="flex items-center space-x-4">
37
+ <div class="relative">
38
+ <input type="text" placeholder="Pesquisar..." class="border rounded-full py-2 px-4 w-full md:w-64">
39
+ <i data-feather="search" class="absolute right-3 top-2.5 text-gray-400"></i>
40
+ </div>
41
+ <a href="carrinho.html" class="relative">
42
+ <i data-feather="shopping-cart" class="text-gray-700"></i>
43
+ <span class="absolute -top-2 -right-2 bg-indigo-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">0</span>
44
+ </a>
45
+ <a href="minha-conta.html" class="hidden md:block">
46
+ <i data-feather="user" class="text-gray-700"></i>
47
+ </a>
48
+ <button class="md:hidden">
49
+ <i data-feather="menu" class="text-gray-700"></i>
50
+ </button>
51
+ </div>
52
+ </div>
53
+ </div>
54
+ </header>
55
+
56
+ <main class="container mx-auto px-4 py-8">
57
+ <!-- Breadcrumb -->
58
+ <nav class="flex text-sm text-gray-500 mb-8">
59
+ <a href="index.html" class="hover:text-indigo-600">Início</a>
60
+ <span class="mx-2">/</span>
61
+ <a href="ebooks.html" class="hover:text-indigo-600">E-books</a>
62
+ <span class="mx-2">/</span>
63
+ <a href="ebooks.html?genre=ficcao" class="hover:text-indigo-600">Ficção</a>
64
+ <span class="mx-2">/</span>
65
+ <span class="text-gray-700">Dom Casmurro</span>
66
+ </nav>
67
+
68
+ <div class="flex flex-col lg:flex-row gap-8">
69
+ <!-- Galeria de imagens -->
70
+ <div class="lg:w-1/2">
71
+ <div class="bg-white rounded-lg shadow-md p-6">
72
+ <img src="http://static.photos/education/640x360/11" alt="Dom Casmurro" class="w-full h-96 object-contain mb-4" id="mainImage">
73
+
74
+ <div class="grid grid-cols-4 gap-2">
75
+ <img src="http://static.photos/education/200x200/11" alt="Dom Casmurro 1" class="gallery-image h-20 object-cover border rounded" onclick="changeImage(this)">
76
+ <img src="http://static.photos/education/200x200/12" alt="Dom Casmurro 2" class="gallery-image h-20 object-cover border rounded" onclick="changeImage(this)">
77
+ <img src="http://static.photos/education/200x200/13" alt="Dom Casmurro 3" class="gallery-image h-20 object-cover border rounded" onclick="changeImage(this)">
78
+ <img src="http://static.photos/education/200x200/14" alt="Dom Casmurro 4" class="gallery-image h-20 object-cover border rounded" onclick="changeImage(this)">
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Informações do produto -->
84
+ <div class="lg:w-1/2">
85
+ <div class="bg-white rounded-lg shadow-md p-6">
86
+ <h1 class="text-3xl font-bold mb-2">Dom Casmurro</h1>
87
+ <p class="text-gray-600 mb-4">por Machado de Assis</p>
88
+
89
+ <div class="flex items-center mb-4">
90
+ <div class="flex text-yellow-400 mr-2">
91
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
92
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
93
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
94
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
95
+ <i data-feather="star" class="w-5 h-5"></i>
96
+ </div>
97
+ <span class="text-gray-500">(128 avaliações)</span>
98
+ </div>
99
+
100
+ <div class="mb-6">
101
+ <span class="text-3xl font-bold text-indigo-600">R$ 19,90</span>
102
+ <span class="text-gray-500 line-through ml-2">R$ 24,90</span>
103
+ <span class="bg-red-100 text-red-600 text-sm font-semibold ml-2 px-2 py-1 rounded">20% OFF</span>
104
+ </div>
105
+
106
+ <div class="mb-6">
107
+ <h3 class="font-semibold mb-2">Formato</h3>
108
+ <div class="flex space-x-2">
109
+ <button class="border border-indigo-600 text-indigo-600 px-4 py-2 rounded">PDF</button>
110
+ <button class="border border-gray-300 text-gray-700 px-4 py-2 rounded">EPUB</button>
111
+ <button class="border border-gray-300 text-gray-700 px-4 py-2 rounded">MOBI</button>
112
+ </div>
113
+ </div>
114
+
115
+ <div class="mb-6">
116
+ <h3 class="font-semibold mb-2">Quantidade</h3>
117
+ <div class="flex items-center">
118
+ <button class="bg-gray-200 w-8 h-8 rounded-l">-</button>
119
+ <input type="number" value="1" class="w-12 h-8 text-center border-y">
120
+ <button class="bg-gray-200 w-8 h-8 rounded-r">+</button>
121
+ </div>
122
+ </div>
123
+
124
+ <div class="flex space-x-4 mb-6">
125
+ <button class="bg-indigo-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-indigo-700 flex items-center">
126
+ <i data-feather="shopping-cart" class="w-5 h-5 mr-2"></i> Adicionar ao Carrinho
127
+ </button>
128
+ <button class="border border-indigo-600 text-indigo-600 px-8 py-3 rounded-lg font-semibold hover:bg-indigo-50">
129
+ Comprar Agora
130
+ </button>
131
+ </div>
132
+
133
+ <div class="border-t pt-4">
134
+ <div class="flex items-center text-sm text-gray-600 mb-2">
135
+ <i data-feather="truck" class="w-4 h-4 mr-2"></i> Frete grátis para todo o Brasil
136
+ </div>
137
+ <div class="flex items-center text-sm text-gray-600">
138
+ <i data-feather="download" class="w-4 h-4 mr-2"></i> Download disponível imediatamente após a compra
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+
145
+ <!-- Descrição e detalhes -->
146
+ <div class="mt-12 bg-white rounded-lg shadow-md p-6">
147
+ <h2 class="text-2xl font-bold mb-4">Descrição</h2>
148
+ <p class="text-gray-700 mb-4">
149
+ Dom Casmurro é um romance escrito por Machado de Assis, publicado em 1899.
150
+ A obra é narrada em primeira pessoa por Bento Santiago, o Dom Casmurro do título,
151
+ que relata suas memórias desde a adolescência até a idade adulta, com foco em seu
152
+ relacionamento com Capitu e as dúvidas que surgem sobre a fidelidade dela.
153
+ </p>
154
+ <p class="text-gray-700 mb-4">
155
+ Considerada uma das grandes obras da literatura brasileira, Dom Casmurro explora
156
+ temas como ciúme, traição, ambiguidade e a subjetividade da memória. A narrativa
157
+ é marcada pela ironia fina característica de Machado de Assis.
158
+ </p>
159
+
160
+ <h3 class="text-xl font-semibold mb-3">Detalhes do produto</h3>
161
+ <ul class="list-disc list-inside text-gray-700 space-y-2">
162
+ <li>Formato: E-book (PDF, EPUB, MOBI)</li>
163
+ <li>Número de páginas: 256</li>
164
+ <li>Idioma: Português</li>
165
+ <li>Editora: Clássicos Brasileiros</li>
166
+ <li>Data de publicação: 1899 (original), 2023 (edição digital)</li>
167
+ <li>ISBN: 978-65-123456-7-8</li>
168
+ </ul>
169
+ </div>
170
+
171
+ <!-- Avaliações -->
172
+ <div class="mt-12 bg-white rounded-lg shadow-md p-6">
173
+ <h2 class="text-2xl font-bold mb-6">Avaliações (128)</h2>
174
+
175
+ <div class="flex items-center mb-8">
176
+ <div class="text-center mr-8">
177
+ <div class="text-5xl font-bold text-indigo-600">4.2</div>
178
+ <div class="flex justify-center text-yellow-400 mt-2">
179
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
180
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
181
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
182
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
183
+ <i data-feather="star" class="w-5 h-5"></i>
184
+ </div>
185
+ <div class="text-gray-500 mt-1">128 avaliações</div>
186
+ </div>
187
+
188
+ <div class="flex-1">
189
+ <div class="flex items-center mb-1">
190
+ <span class="w-12 text-right mr-2">5</span>
191
+ <div class="flex-1 bg-gray-200 rounded h-2">
192
+ <div class="bg-yellow-400 h-2 rounded" style="width: 70%"></div>
193
+ </div>
194
+ <span class="w-12 text-gray-500 ml-2">70%</span>
195
+ </div>
196
+ <div class="flex items-center mb-1">
197
+ <span class="w-12 text-right mr-2">4</span>
198
+ <div class="flex-1 bg-gray-200 rounded h-2">
199
+ <div class="bg-yellow-400 h-2 rounded" style="width: 20%"></div>
200
+ </div>
201
+ <span class="w-12 text-gray-500 ml-2">20%</span>
202
+ </div>
203
+ <div class="flex items-center mb-1">
204
+ <span class="w-12 text-right mr-2">3</span>
205
+ <div class="flex-1 bg-gray-200 rounded h-2">
206
+ <div class="bg-yellow-400 h-2 rounded" style="width: 7%"></div>
207
+ </div>
208
+ <span class="w-12 text-gray-500 ml-2">7%</span>
209
+ </div>
210
+ <div class="flex items-center mb-1">
211
+ <span class="w-12 text-right mr-2">2</span>
212
+ <div class="flex-1 bg-gray-200 rounded h-2">
213
+ <div class="bg-yellow-400 h-2 rounded" style="width: 2%"></div>
214
+ </div>
215
+ <span class="w-12 text-gray-500 ml-2">2%</span>
216
+ </div>
217
+ <div class="flex items-center">
218
+ <span class="w-12 text-right mr-2">1</span>
219
+ <div class="flex-1 bg-gray-200 rounded h-2">
220
+ <div class="bg-yellow-400 h-2 rounded" style="width: 1%"></div>
221
+ </div>
222
+ <span class="w-12 text-gray-500 ml-2">1%</span>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Comentários -->
228
+ <div class="space-y-6">
229
+ <div class="border-b pb-6">
230
+ <div class="flex items-center mb-3">
231
+ <div class="w-10 h-10 bg-gray-300 rounded-full mr-3"></div>
232
+ <div>
233
+ <h4 class="font-semibold">Carlos Silva</h4>
234
+ <div class="flex text-yellow-400">
235
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
236
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
237
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
238
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
239
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ <p class="text-gray-700">Excelente edição digital! A qualidade do texto está impecável e a introdução contextualiza muito bem a obra. Recomendo!</p>
244
+ </div>
245
+
246
+ <div class="border-b pb-6">
247
+ <div class="flex items-center mb-3">
248
+ <div class="w-10 h-10 bg-gray-300 rounded-full mr-3"></div>
249
+ <div>
250
+ <h4 class="font-semibold">Ana Oliveira</h4>
251
+ <div class="flex text-yellow-400">
252
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
253
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
254
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
255
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
256
+ <i data-feather="star" class="w-4 h-4"></i>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ <p class="text-gray-700">Clássico imperdível! A narrativa de Machado é fascinante, embora a edição digital tenha alguns pequenos problemas de formatação.</p>
261
+ </div>
262
+ </div>
263
+
264
+ <button class="mt-6 text-indigo-600 font-semibold hover:text-indigo-700">Carregar mais avaliações</button>
265
+ </div>
266
+ </main>
267
+
268
+ <!-- Footer (mesmo do index) -->
269
+ <footer class="bg-gray-800 text-white py-12 mt-12">
270
+ <div class="container mx-auto px-4">
271
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
272
+ <div>
273
+ <h3 class="text-xl font-semibold mb-4">D.</h3>
274
+ <p class="text-gray-400">Sua loja virtual de confiança para e-books, roupas e acessórios.</p>
275
+ </div>
276
+
277
+ <div>
278
+ <h4 class="font-semibold mb-4">Categorias</h4>
279
+ <ul class="space-y-2">
280
+ <li><a href="ebooks.html" class="text-gray-400 hover:text-white">E-books</a></li>
281
+ <li><a href="roupas.html" class="text-gray-400 hover:text-white">Roupas</a></li>
282
+ <li><a href="acessorios.html" class="text-gray-400 hover:text-white">Acessórios</a></li>
283
+ <li><a href="blog.html" class="text-gray-400 hover:text-white">Blog</a></li>
284
+ </ul>
285
+ </div>
286
+
287
+ <div>
288
+ <h4 class="font-semibold mb-4">Suporte</h4>
289
+ <ul class="space-y-2">
290
+ <li><a href="#" class="text-gray-400 hover:text-white">Central de Ajuda</a></li>
291
+ <li><a href="#" class="text-gray-400 hover:text-white">Política de Entregas</a></li>
292
+ <li><a href="#" class="text-gray-400 hover:text-white">Trocas e Devoluções</a></li>
293
+ </ul>
294
+ </div>
295
+
296
+ <div>
297
+ <h4 class="font-semibold mb-4">Contato</h4>
298
+ <div class="flex space-x-4 mb-4">
299
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>
300
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>
301
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
302
+ </div>
303
+ <p class="text-gray-400">contato@lojaonline.com</p>
304
+ </极速赛车开奖结果
305
+ </div>
306
+
307
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
308
+ <p>&copy; 2023 D. Todos os direitos reservados.</p>
309
+ </div>
310
+ </div>
311
+ </footer>
312
+
313
+ <script>
314
+ AOS.init();
315
+ feather.replace();
316
+
317
+ function changeImage(element) {
318
+ document.getElementById('mainImage').src = element.src;
319
+ }
320
+ </script>
321
+ </body>
322
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ Crie pra mim um site de venda de e-book, roupas, acessórios
2
+ O nome da loja é "D."
3
+ Crie uma aba só pra blogs