Hugging Face's logo

Spaces:
Matheuscano
/
sugarswipe-delights
Running

App Files Community
Matheuscano commited on
Commit
60e180e
·
verified ·
1 Parent(s): 1215c5e

crie um site de doces com menu a esquerda que abre e feche fundo moderno coloque o carrinho contato etc transição

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +312 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Sugarswipe Delights
3
- emoji: 🏆
4
- colorFrom: green
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: SugarSwipe Delights 🍬
3
+ colorFrom: red
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,313 @@
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>SugarSwipe Delights - Doces Artesanais</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ overflow-x: hidden;
15
+ }
16
+ .sidebar {
17
+ transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
18
+ }
19
+ .sidebar-closed {
20
+ transform: translateX(-100%);
21
+ }
22
+ .sidebar-open {
23
+ transform: translateX(0);
24
+ }
25
+ .menu-item {
26
+ transition: all 0.3s ease;
27
+ }
28
+ .menu-item:hover {
29
+ transform: translateX(10px);
30
+ }
31
+ .candy-card {
32
+ transition: all 0.3s ease;
33
+ }
34
+ .candy-card:hover {
35
+ transform: translateY(-10px);
36
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
37
+ }
38
+ .bg-candy-gradient {
39
+ background: linear-gradient(135deg, #f9a8d4 0%, #f472b6 50%, #ec4899 100%);
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-pink-50">
44
+ <!-- Sidebar Navigation -->
45
+ <div class="fixed inset-y-0 left-0 z-50 w-64 sidebar sidebar-closed bg-white shadow-xl">
46
+ <div class="flex flex-col h-full">
47
+ <!-- Logo -->
48
+ <div class="p-6 bg-pink-600">
49
+ <h1 class="text-2xl font-bold text-white">SugarSwipe 🍭</h1>
50
+ <p class="text-pink-100 text-sm">Delícias açucaradas</p>
51
+ </div>
52
+
53
+ <!-- Menu Items -->
54
+ <nav class="flex-1 p-4 overflow-y-auto">
55
+ <ul class="space-y-3">
56
+ <li>
57
+ <a href="#" class="flex items-center p-3 rounded-lg menu-item bg-pink-100 text-pink-700">
58
+ <i data-feather="home" class="mr-3"></i>
59
+ <span>Início</span>
60
+ </a>
61
+ </li>
62
+ <li>
63
+ <a href="#" class="flex items-center p-3 rounded-lg menu-item hover:bg-pink-50 hover:text-pink-600">
64
+ <i data-feather="shopping-bag" class="mr-3"></i>
65
+ <span>Nossos Doces</span>
66
+ </a>
67
+ </li>
68
+ <li>
69
+ <a href="#" class="flex items-center p-3 rounded-lg menu-item hover:bg-pink-50 hover:text-pink-600">
70
+ <i data-feather="star" class="mr-3"></i>
71
+ <span>Especiais</span>
72
+ </a>
73
+ </li>
74
+ <li>
75
+ <a href="#" class="flex items-center p-3 rounded-lg menu-item hover:bg-pink-50 hover:text-pink-600">
76
+ <i data-feather="users" class="mr-3"></i>
77
+ <span>Sobre Nós</span>
78
+ </a>
79
+ </li>
80
+ <li>
81
+ <a href="#" class="flex items-center p-3 rounded-lg menu-item hover:bg-pink-50 hover:text-pink-600">
82
+ <i data-feather="phone" class="mr-3"></i>
83
+ <span>Contato</span>
84
+ </a>
85
+ </li>
86
+ </ul>
87
+ </nav>
88
+
89
+ <!-- Footer -->
90
+ <div class="p-4 border-t border-pink-100">
91
+ <div class="flex justify-center space-x-4">
92
+ <a href="#" class="text-pink-400 hover:text-pink-600">
93
+ <i data-feather="instagram"></i>
94
+ </a>
95
+ <a href="#" class="text-pink-400 hover:text-pink-600">
96
+ <i data-feather="facebook"></i>
97
+ </a>
98
+ <a href="#" class="text-pink-400 hover:text-pink-600">
99
+ <i data-feather="twitter"></i>
100
+ </a>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Main Content -->
107
+ <div class="min-h-screen transition-all duration-300">
108
+ <!-- Header -->
109
+ <header class="sticky top-0 z-40 bg-white/80 backdrop-blur-md shadow-sm">
110
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
111
+ <button id="menu-toggle" class="p-2 rounded-full bg-pink-100 text-pink-600 hover:bg-pink-200 transition">
112
+ <i data-feather="menu"></i>
113
+ </button>
114
+
115
+ <div class="flex items-center space-x-4">
116
+ <button class="p-2 rounded-full bg-pink-100 text-pink-600 hover:bg-pink-200 transition relative">
117
+ <i data-feather="shopping-cart"></i>
118
+ <span class="absolute -top-1 -right-1 bg-pink-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
119
+ </button>
120
+ <a href="#" class="hidden md:inline-block px-4 py-2 bg-pink-600 text-white rounded-full hover:bg-pink-700 transition">Encomendar</a>
121
+ </div>
122
+ </div>
123
+ </header>
124
+
125
+ <!-- Hero Section -->
126
+ <section class="relative overflow-hidden">
127
+ <div class="bg-candy-gradient py-20 px-4">
128
+ <div class="container mx-auto text-center text-white">
129
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">Doces que Derretem Corações</h1>
130
+ <p class="text-xl md:text-2xl mb-8">Experimente nossas delícias artesanais feitas com amor</p>
131
+ <div class="flex justify-center space-x-4">
132
+ <a href="#" class="px-6 py-3 bg-white text-pink-600 rounded-full font-medium hover:bg-opacity-90 transition">Ver Cardápio</a>
133
+ <a href="#" class="px-6 py-3 border-2 border-white text-white rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition">Fazer Encomenda</a>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ <div class="absolute bottom-0 left-0 right-0 h-16 bg-white transform -skew-y-2 origin-top-left"></div>
138
+ </section>
139
+
140
+ <!-- Featured Candies -->
141
+ <section class="py-16 px-4">
142
+ <div class="container mx-auto">
143
+ <h2 class="text-3xl font-bold text-center mb-12 text-pink-700">Nossas Delícias</h2>
144
+
145
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
146
+ <!-- Candy 1 -->
147
+ <div class="candy-card bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl">
148
+ <img src="http://static.photos/food/640x360/1" alt="Brigadeiro Gourmet" class="w-full h-48 object-cover">
149
+ <div class="p-6">
150
+ <h3 class="text-xl font-bold text-pink-700 mb-2">Brigadeiro Gourmet</h3>
151
+ <p class="text-gray-600 mb-4">O tradicional brasileiro com um toque especial de qualidade.</p>
152
+ <div class="flex justify-between items-center">
153
+ <span class="text-2xl font-bold text-pink-600">R$ 2,50</span>
154
+ <button class="px-4 py-2 bg-pink-100 text-pink-700 rounded-full hover:bg-pink-200 transition">
155
+ <i data-feather="plus" class="w-4 h-4"></i>
156
+ </button>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Candy 2 -->
162
+ <div class="candy-card bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl">
163
+ <img src="http://static.photos/food/640x360/2" alt="Cupcake de Morango" class="w-full h-48 object-cover">
164
+ <div class="p-6">
165
+ <h3 class="text-xl font-bold text-pink-700 mb-2">Cupcake de Morango</h3>
166
+ <p class="text-gray-600 mb-4">Massa fofinha com recheio cremoso e cobertura de morango.</p>
167
+ <div class="flex justify-between items-center">
168
+ <span class="text-2xl font-bold text-pink-600">R$ 8,90</span>
169
+ <button class="px-4 py-2 bg-pink-100 text-pink-700 rounded-full hover:bg-pink-200 transition">
170
+ <i data-feather="plus" class="w-4 h-4"></i>
171
+ </button>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Candy 3 -->
177
+ <div class="candy-card bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl">
178
+ <img src="http://static.photos/food/640x360/3" alt="Trufas Belgas" class="w-full h-48 object-cover">
179
+ <div class="p-6">
180
+ <h3 class="text-xl font-bold text-pink-700 mb-2">Trufas Belgas</h3>
181
+ <p class="text-gray-600 mb-4">Feitas com chocolate belga de alta qualidade e diversos sabores.</p>
182
+ <div class="flex justify-between items-center">
183
+ <span class="text-2xl font-bold text-pink-600">R$ 6,50</span>
184
+ <button class="px-4 py-2 bg-pink-100 text-pink-700 rounded-full hover:bg-pink-200 transition">
185
+ <i data-feather="plus" class="w-4 h-4"></i>
186
+ </button>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </section>
193
+
194
+ <!-- Special Offer -->
195
+ <section class="py-16 px-4 bg-pink-100">
196
+ <div class="container mx-auto text-center">
197
+ <h2 class="text-3xl font-bold mb-6 text-pink-700">Promoção Especial</h2>
198
+ <p class="text-xl mb-8 text-gray-700 max-w-2xl mx-auto">Adquira nossa caixa surpresa com 12 doces variados por apenas R$ 29,90. Um presentão para você ou para presentear!</p>
199
+ <button class="px-8 py-4 bg-pink-600 text-white rounded-full font-bold text-lg hover:bg-pink-700 transition shadow-lg hover:shadow-xl">
200
+ Quero minha Caixa Surpresa
201
+ </button>
202
+ </div>
203
+ </section>
204
+
205
+ <!-- About Us -->
206
+ <section class="py-16 px-4">
207
+ <div class="container mx-auto">
208
+ <div class="flex flex-col md:flex-row items-center">
209
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
210
+ <img src="http://static.photos/people/640x360/4" alt="Nossa Equipe" class="rounded-xl shadow-lg w-full">
211
+ </div>
212
+ <div class="md:w-1/2">
213
+ <h2 class="text-3xl font-bold mb-6 text-pink-700">Sobre Nós</h2>
214
+ <p class="text-gray-600 mb-4">A SugarSwipe nasceu do amor por doces e da vontade de trazer felicidade através de sabores especiais.</p>
215
+ <p class="text-gray-600 mb-6">Trabalhamos apenas com ingredientes de alta qualidade e muita paixão pelo que fazemos. Cada doce é preparado artesanalmente com cuidado e dedicação.</p>
216
+ <div class="flex space-x-4">
217
+ <div class="flex items-center">
218
+ <div class="mr-3 p-2 bg-pink-100 rounded-full text-pink-600">
219
+ <i data-feather="check" class="w-4 h-4"></i>
220
+ </div>
221
+ <span class="text-gray-700">100% Natural</span>
222
+ </div>
223
+ <div class="flex items-center">
224
+ <div class="mr-3 p-2 bg-pink-100 rounded-full text-pink-600">
225
+ <i data-feather="check" class="w-4 h-4"></i>
226
+ </div>
227
+ <span class="text-gray-700">Sem Conservantes</span>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </section>
234
+ </div>
235
+
236
+ <!-- Footer -->
237
+ <footer class="bg-pink-800 text-white py-12 px-4">
238
+ <div class="container mx-auto">
239
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
240
+ <div>
241
+ <h3 class="text-xl font-bold mb-4">SugarSwipe 🍭</h3>
242
+ <p class="text-pink-200">Doces artesanais feitos com amor para adoçar sua vida.</p>
243
+ </div>
244
+ <div>
245
+ <h3 class="text-lg font-semibold mb-4">Links Rápidos</h3>
246
+ <ul class="space-y-2">
247
+ <li><a href="#" class="text-pink-200 hover:text-white transition">Início</a></li>
248
+ <li><a href="#" class="text-pink-200 hover:text-white transition">Cardápio</a></li>
249
+ <li><a href="#" class="text-pink-200 hover:text-white transition">Encomendas</a></li>
250
+ <li><a href="#" class="text-pink-200 hover:text-white transition">Contato</a></li>
251
+ </ul>
252
+ </div>
253
+ <div>
254
+ <h3 class="text-lg font-semibold mb-4">Contato</h3>
255
+ <ul class="space-y-2">
256
+ <li class="flex items-center">
257
+ <i data-feather="phone" class="mr-2 w-4 h-4"></i>
258
+ <span class="text-pink-200">(11) 9999-9999</span>
259
+ </li>
260
+ <li class="flex items-center">
261
+ <i data-feather="mail" class="mr-2 w-4 h-4"></i>
262
+ <span class="text-pink-200">contato@sugarswipe.com</span>
263
+ </li>
264
+ <li class="flex items-center">
265
+ <i data-feather="map-pin" class="mr-2 w-4 h-4"></i>
266
+ <span class="text-pink-200">São Paulo, SP</span>
267
+ </li>
268
+ </ul>
269
+ </div>
270
+ <div>
271
+ <h3 class="text-lg font-semibold mb-4">Redes Sociais</h3>
272
+ <div class="flex space-x-4">
273
+ <a href="#" class="p-2 bg-pink-700 rounded-full hover:bg-pink-600 transition">
274
+ <i data-feather="instagram" class="w-4 h-4"></i>
275
+ </a>
276
+ <a href="#" class="p-2 bg-pink-700 rounded-full hover:bg-pink-600 transition">
277
+ <i data-feather="facebook" class="w-4 h-4"></i>
278
+ </a>
279
+ <a href="#" class="p-2 bg-pink-700 rounded-full hover:bg-pink-600 transition">
280
+ <i data-feather="twitter" class="w-4 h-4"></i>
281
+ </a>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ <div class="border-t border-pink-700 mt-8 pt-8 text-center text-pink-300">
286
+ <p>© 2023 SugarSwipe Delights. Todos os direitos reservados.</p>
287
+ </div>
288
+ </div>
289
+ </footer>
290
+
291
+ <script>
292
+ // Toggle sidebar
293
+ const menuToggle = document.getElementById('menu-toggle');
294
+ const sidebar = document.querySelector('.sidebar');
295
+
296
+ menuToggle.addEventListener('click', () => {
297
+ sidebar.classList.toggle('sidebar-closed');
298
+ sidebar.classList.toggle('sidebar-open');
299
+ });
300
+
301
+ // Initialize feather icons
302
+ document.addEventListener('DOMContentLoaded', function() {
303
+ feather.replace();
304
+
305
+ // Simple animation for menu items
306
+ const menuItems = document.querySelectorAll('.menu-item');
307
+ menuItems.forEach((item, index) => {
308
+ item.style.transitionDelay = `${index * 0.1}s`;
309
+ });
310
+ });
311
+ </script>
312
+ </body>
313
  </html>