Hugging Face's logo

Spaces:
DddDddDddr
/
d
Running

App Files Community
d
File size: 13,612 Bytes
e043eee
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bf21c11
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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LojaOnline - E-books, Roupas e Acessórios</title>
    <meta name="description" content="Compre e-books, roupas e acessórios de qualidade com entrega rápida e preços competitivos">
    <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>
    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></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; }
        .product-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>
                </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="shopping-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>

    <!-- Hero Banner -->
    <section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-16">
        <div class="container mx-auto px-4 text-center" data-aos="fade-up">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">Ofertas Especiais</h1>
            <p class="text-xl mb-8">Até 50% de desconto em itens selecionados</p>
            <button class="bg-white text-indigo-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition">Ver Ofertas</button>
        </div>
    </section>

    <!-- Categories -->
    <section class="py-12">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Nossas Categorias</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white rounded-lg shadow-md overflow-hidden category-filter" data-aos="fade-up" data-aos-delay="100">
                    <img src="http://static.photos/education/640x360/1" alt="E-books" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">E-books</h3>
                        <p class="text-gray-600 mb-4">Descubra milhares de livros digitais para todos os gostos</p>
                        <a href="ebooks.html" class="text-indigo-600 font-semibold hover:text-indigo-700">Explorar →</a>
                    </div>
                </div>
                
                <div class="bg-white rounded-lg shadow-md overflow-hidden category-filter" data-aos="fade-up" data-aos-delay="200">
                    <img src="http://static.photos/fashion/640x360/2" alt="Roupas" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Roupas</h3>
                        <p class="text-gray-600 mb-4">Moda contemporânea para seu estilo único</p>
                        <a href="roupas.html" class="text-indigo-600 font-semibold hover:text-indigo-700">Explorar →</a>
                    </div>
                </div>
                
                <div class="bg-white rounded-lg shadow-md overflow-hidden category-filter" data-aos="fade-up" data-aos-delay="300">
                    <img src="http://static.photos/accessories/640x360/3" alt="Acessórios" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Acessórios</h3>
                        <p class="text-gray-600 mb-4">Complete seu look com nossos acessórios exclusivos</p>
                        <a href="acessorios.html" class="text-indigo-600 font-semibold hover:text-indigo-700">Explorar →</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Products -->
    <section class="py-12 bg-gray-100">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Destaques</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Product 1 -->
                <div class="bg-white rounded-lg shadow-md product-card" data-aos="fade-up" data-aos-delay="100">
                    <img src="http://static.photos/education/320x240/4" alt="E-book" class="w-full h-48 object-cover rounded-t-lg">
                    <div class="p-4">
                        <h3 class="font-semibold mb-2">Dom Casmurro</h3>
                        <p class="text-gray-600 text-sm mb-2">Machado de Assis</p>
                        <div class="flex items-center justify-between">
                            <span class="text-indigo-600 font-bold">R$ 19,90</span>
                            <button class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700">
                                <i data-feather="shopping-cart" class="w-4 h-4"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- Product 2 -->
                <div class="bg-white rounded-lg shadow-md product-card" data-aos="fade-up" data-aos-delay="200">
                    <img src="http://static.photos/fashion/320x240/5" alt="Camiseta" class="w-full h-48 object-cover rounded-t-lg">
                    <div class="p-4">
                        <h3 class="font-semibold mb-2">Camiseta Básica</h3>
                        <p class="text-gray-600 text-sm mb-2">Algodão, cores variadas</p>
                        <div class="flex items-center justify-between">
                            <span class="text-indigo-600 font-bold">R$ 49,90</span>
                            <button class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700">
                                <i data-feather="shopping-cart" class="w-4 h-4"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- Product 3 -->
                <div class="bg-white rounded-lg shadow-md product-card" data-aos="fade-up" data-aos-delay="300">
                    <img src="http://static.photos/accessories/320x240/6" alt="Relógio" class="w-full h-48 object-cover rounded-t-lg">
                    <div class="p-4">
                        <h3 class="font-semibold mb-2">Relógio Premium</h3>
                        <p class="text-gray-600 text-sm mb-2">Aço inoxidável</p>
                        <div class="flex items-center justify-between">
                            <span class="text-indigo-600 font-bold">R$ 299,90</span>
                            <button class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700">
                                <i data-feather="shopping-cart" class="w-4 h-4"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- Product 4 -->
                <div class="bg-white rounded-lg shadow-md product-card" data-aos="fade-up" data-aos-delay="400">
                    <img src="http://static.photos/education/320x240/7" alt="E-book" class="w-full h-48 object-cover rounded-t-lg">
                    <div class="p-4">
                        <h3 class="font-semibold mb-2">A Arte da Guerra</h3>
                        <p class="text-gray-600 text-sm mb-2">Sun Tzu</p>
                        <div class="flex items-center justify-between">
                            <span class="text-indigo-600 font-bold">R$ 14,90</span>
                            <button class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700">
                                <i data-feather="shopping-cart" class="w-4 h-4"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Newsletter -->
    <section class="py-16 bg-indigo-600 text-white">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-3xl font-bold mb-4" data-aos="fade-up">Fique por dentro das novidades</h2>
            <p class="mb-8" data-aos="fade-up" data-aos-delay="100">Cadastre-se para receber ofertas exclusivas</p>
            <form class="max-w-md mx-auto flex" data-aos="fade-up" data-aos-delay="200">
                <input type="email" placeholder="Seu e-mail" class="flex-grow px-4 py-3 rounded-l-lg text-gray-800 focus:outline-none">
                <button type="submit" class="bg-purple-600 px-6 py-3 rounded-r-lg hover:bg-purple-700 transition">Inscrever</button>
            </form>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-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();
        
        // Analytics (exemplo com Google Analytics)
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'GA_MEASUREMENT_ID');
    </script>
</body>
</html>