Hugging Face's logo

Spaces:
DddDddDddr
/
d
Running

App Files Community
d
File size: 18,037 Bytes
e043eee
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog - D.</title>
    <meta name="description" content="Blog da D. - Dicas, tendências e novidades sobre moda, leitura e lifestyle">
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body { font-family: 'Inter', sans-serif; }
        .blog-card:hover { transform: translateY(-5px); transition: all 0.3s ease; }
        .category-filter { transition: all 0.3s ease; }
        .category-filter:hover { background-color: #f3f4f6; }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Header -->
    <header class="bg-white shadow-md">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between py-4">
                <a href="index.html" class="text-2xl font-bold text-indigo-600">D.</a>
                
                <div class="hidden md:flex space-x-8">
                    <a href="index.html" class="text-gray-700 hover:text-indigo-600">Início</a>
                    <a href="ebooks.html" class="text-gray-700 hover:text-indigo-600">E-books</a>
                    <a href="roupas.html" class="text-gray-700 hover:text-indigo-600">Roupas</a>
                    <a href="acessorios.html" class="text-gray-700 hover:text-indigo-600">Acessórios</a>
                    <a href="blog.html" class="text-indigo-600 font-semibold">Blog</a>
                </div>

                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="Pesquisar..." class="border rounded-full py-2 px-4 w-full md:w-64">
                        <i data-feather="search" class="absolute right-3 top-2.5 text-gray-400"></i>
                    </div>
                    <a href="carrinho.html" class="relative">
                        <i data-feather="shhopping-cart" class="text-gray-700"></i>
                        <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>
                    </a>
                    <a href="minha-conta.html" class="hidden md:block">
                        <i data-feather="user" class="text-gray-700"></i>
                    </a>
                    <button class="md:hidden">
                        <i data-feather="menu" class="极速赛车开奖结果 text-gray-700"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8">
        <!-- Hero Section -->
        <section class="text-center mb-12">
            <h1 class="text-4xl font-bold mb-4" data-aos="fade-up">Blog D.</h1>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
                Descubra as últimas tendências, dicas de estilo e novidades do mundo da moda e literatura
            </p>
        </section>

        <div class="flex flex-col lg:flex-row gap-8">
            <!-- Main Content -->
            <div class="lg:w-2/3">
                <!-- Featured Post -->
                <article class="bg-white rounded-lg shadow-md overflow-hidden mb-8 blog-card" data-aos="fade-up">
                    <img src="http://static.photos/fashion/1200x630/1" alt="Tendências de Moda" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <span class="text-indigo-600 font-semibold">Moda</span>
                        <h2 class="text-2xl font-bold mt-2 mb-3">As 5 Tendências de Moda que Dominarão 2024</h2>
                        <p class="text-gray-600 mb-4">
                            Descubra as principais tendências que vão revolucionar o guarda-roupa deste ano e como incorporá-las no seu estilo...
                        </p>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-gray-300 rounded-full mr-3"></div>
                                <div>
                                    <p class="text-sm font-semibold">Ana Silva</p>
                                    <p class="text-xs text-gray-500">15 Jan, 2024 • 5 min read</p>
                                </div>
                            </div>
                            <a href="post.html" class="text-indigo-600 hover:text-indigo-700 font-semibold">Ler mais →</a>
                        </div>
                    </div>
                </article>

                <!-- Blog Posts Grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Post 1 -->
                    <article class="bg-white rounded-lg shadow-md blog-card" data-aos="fade-up" data-aos-delay="100">
                        <img src="http://static.photos/education/640x360/2" alt="Dicas de Leitura" class="w-full h-48 object-cover rounded-t-lg">
                        <div class="p-4">
                            <span class="text-indigo-600 text-sm font-semibold">Literatura</span>
                            <h3 class="font-bold mt-2 mb-2">Como Criar o Hábito da Leitura em 2024</h3>
                            <p class="text-gray-600 text-sm mb-4">
                                Descubra estratégias práticas para desenvolver o hábito da leitura e transformar sua rotina...
                            </p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="w-6 h-6 bg-gray-300 rounded-full mr-2"></div>
                                    <p class="text-xs text-gray-500">Carlos Oliveira</p>
                                </div>
                                <span class="text-xs text-gray-500">12 Jan, 2024</span>
                            </div>
                        </div>
                    </article>

                    <!-- Post 2 -->
                    <article class="bg-white rounded-lg shadow-md blog-card" data-aos="fade-up" data-aos-delay="200">
                        <img src="http://static.photos/lifestyle/640x360/3" alt="Estilo de Vida" class="w-full h-48 object-cover rounded-t-lg">
                        <div class="p-4">
                            <span class="text-indigo-600 text-sm font-semibold">Lifestyle</span>
                            <h3 class="font-bold mt-2 mb-2">5 Acessórios que Transformam Qualquer Look</h3>
                            <p class="text-gray-600 text-sm mb-4">
                                Peças-chave que elevam sua produção e fazem a diferença no visual do dia a dia...
                            </p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="w-6 h-6 bg-gray-300 rounded-full mr-2"></div>
                                    <p class="text-xs text-gray-500">Marina Costa</p>
                                </div>
                                <span class="text-xs text-gray-500">10 Jan, 2024</span>
                            </div>
                        </div>
                    </article>

                    <!-- Post 3 -->
                    <article class="bg-white rounded-lg shadow-md blog-card" data-aos="fade-up" data-aos-delay="300">
                        <img src="http://static.photos/education/640x360/4" alt="Clássicos Literários" class="w-full h-48 object-cover rounded-t-lg">
                        <div class="p-4">
                            <span class="text-indigo-600 text-sm font-semibold">Literatura</span>
                            <h3 class="font-bold mt极速赛车开奖结果-2 mb-2">Por que Ler os Clássicos da Literatura Brasileira?</h3>
                            <p class="text-gray-600 text-sm mb-4">
                                A importância de conhecer as obras que moldaram nossa cultura e identidade nacional...
                            </p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="极速赛车开奖结果 w-6 h-6 bg-gray-300 rounded-full mr-2"></div>
                                    <p class="text-xs text-gray-500">Pedro Santos</p>
                                </div>
                                <span class="text-xs text-gray-500">8 Jan, 202极速赛车开奖结果4</span>
                            </div>
                        </div>
                    </article>

                    <!-- Post 4 -->
                    <article class="bg-white rounded-lg shadow-md blog-card" data-aos="fade-up" data-aos-delay="400">
                        <img src="http://static.photos/fashion/640x360/5" alt="Sustentabilidade" class="w-full h-48 object-cover rounded-t-lg">
                        <div class="p-4">
                            <span class="text-indigo-600 text-sm font-semibold">Moda Sustentável</span>
                            <h3 class="font-bold mt-2 mb-2">Moda Consciente: Como Escolher Marcas Sustentáveis</h3>
                            <p class="text-gray-600 text-sm mb-4">
                                Guia prático para identificar e apoiar marcas que priorizam a sustentabilidade...
                            </p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="w-6 h-6 bg-gray-300 rounded-full mr-2"></div>
                                    <p class="text-xs text-gray-500">Julia Mendes</p>
                                </div>
                                <span class="text-xs text-gray-500">5 Jan, 2024</span>
                            </div>
                        </div>
                    </article>
                </div>

                <!-- Paginação -->
                <div class="flex justify-center mt-12">
                    <nav class="flex items-center space-x-2">
                        <button class="px-3 py-1 rounded border hover:bg-gray-100">Anterior</button>
                        <button class="px-3 py-1 rounded border bg-indigo-600 text-white">1</button>
                        <button class="px-3 py-1 rounded border hover:bg-gray-100">2</button>
                        <button class="px-3 py-1 rounded border hover:bg-gray-100">3</button>
                        <button class="px-3 py-1 rounded border hover:bg-gray-100">Próximo</button>
                    </nav>
                </div>
            </div>

            <!-- Sidebar -->
            <aside class="lg:w-1/3 space-y-6">
                <!-- Categorias -->
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h3 class="font-semibold mb-4">Categorias</h3>
                    <div class="space-y-2">
                        <a href="#" class="flex justify-between items-center p-2 rounded hover:bg-gray-50">
                            <span>Moda</span>
                            <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-xs">12</span>
                        </a>
                        <a href="#" class="flex justify-between items-center p-2 rounded hover:bg-gray-50">
                            <span>Literatura</span>
                            <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-xs">8</span>
                        </a>
                        <a href="#" class="flex justify-between items-center p-2 rounded hover:bg-gray-50">
                            <span>Lifestyle</span>
                            <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-xs">6</span>
                        </a>
                        <a href="#" class="flex justify-between items-center p-2 rounded hover:bg-gray-50">
                            <span>Moda Sustentável</span>
                            <span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-xs">4</span>
                        </a>
                    </div>
                </div>

                <!-- Posts Populares -->
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h3 class="font-semibold mb-4">Posts Populares</h3>
                    <div class="space-y-4">
                        <a href="#" class="flex items-center space-x-3 group">
                            <img src="http://static.photos/fashion/200x200/6" alt="Post popular" class="w-16 h-16 object-cover rounded">
                            <div>
                                <h4 class="font-semibold group-hover:text-indigo-600">Como Montar Looks Básicos que Impressionam</h4>
                                <p class="text-sm text-gray-500">20 Dec, 2023</p>
                            </div>
                        </a>
                        <a href="#" class="flex items-center space-x-3 group">
                            <img src="http://static.photos/education/200x200/7" alt="Post popular" class="w-16 h-16 object-cover rounded">
                            <div>
                                <h4 class="font-semibold group-hover:text-indigo-600">Os Melhores Livros para Começar o Ano</h4>
                                <p class="text-sm text-gray-500">18 Dec, 2023</p>
                            </div>
                        </a>
                        <a href="#" class="flex items-center space-x-3 group">
                            <img src="http://static.photos/lifestyle/200x200/8" alt="Post popular" class="w-16 h-16 object-cover rounded">
                            <div>
                                <h4 class="font-semibold group极速赛车开奖结果-hover:text-indigo-600">Rotina Matinal para Aumentar a Produtividade</h4>
                                <p class="text-sm text-gray-500">15 Dec, 2023</p>
                            </div>
                        </a>
                    </div>
                </div>

                <!-- Newsletter -->
                <div class="bg-indigo-600 text-white p-6 rounded-lg shadow-md">
                    <h3 class="font-semibold mb-4">Newsletter</h3>
                    <p class="text-sm mb-4">Inscreva-se para receber as novidades do blog diretamente no seu email</p>
                    <form>
                        <input type="email" placeholder="Seu email" class="w-full px-4 py-2 rounded text-gray-800 mb-3">
                        <button type="submit" class="w-full bg-white text-indigo-600 py-2 rounded font-semibold hover:bg-gray-100">
                            Inscrever
                        </button>
                    </form>
                </div>
            </aside>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-12 mt-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-semibold mb-4">D.</h3>
                    <p class="text-gray-400">Sua loja virtual de confiança para e-books, roupas e acessórios.</p>
                </div>
                
                <div>
                    <h4 class="font-semibold mb-4">Categorias</h4>
                    <ul class="space-y-2">
                        <li><a href="ebooks.html" class="text-gray-400 hover:text-white">E-books</a></li>
                        <li><a href="roupas.html" class="text-gray-400 hover:text-white">Roupas</a></li>
                        <li><a href="acessorios.html" class="text-gray极速赛车开奖结果-400 hover:text-white">Acessórios</a></li>
                        <li><a href="blog.html" class="text-gray-400 hover:text-white">Blog</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-semibold mb-4">Suporte</h4>
                   极速赛车开奖结果 <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Central de Ajuda</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Política de Entregas</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Trocas e Devoluções</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-semibold mb-4">Contato</h4>
                    <div class="flex space-x-4 mb-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
                    </div>
                    <p class="text-gray-400">contato@lojaonline.com</p>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; 2023 D. Todos os direitos reservados.</p>
            </div>
        </div>
    </footer>

    <script>
        AOS.init();
        feather.replace();
    </script>
</body>
</html>