Hugging Face's logo

Spaces:
GabrielDevs
/
anycoder-39719347
Running

App Files Community
GabrielDevs commited on
Commit
ad8c78f
·
verified ·
1 Parent(s): da70f12

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1463 -19
index.html CHANGED
@@ -1,19 +1,1463 @@
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>Doce Arte Confeitaria - Bolos Artesanais</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
10
+ <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
11
+ <style>
12
+ :root {
13
+ --bg: #fdf8f4;
14
+ --bg-dark: #f5ebe0;
15
+ --fg: #3d2914;
16
+ --fg-light: #6b5344;
17
+ --accent: #c9a227;
18
+ --accent-light: #e8d5a3;
19
+ --rose: #d4a5a5;
20
+ --rose-dark: #b88a8a;
21
+ --card: #ffffff;
22
+ --border: #e8ddd0;
23
+ --shadow: rgba(61, 41, 20, 0.1);
24
+ }
25
+
26
+ * {
27
+ margin: 0;
28
+ padding: 0;
29
+ box-sizing: border-box;
30
+ }
31
+
32
+ html {
33
+ scroll-behavior: smooth;
34
+ }
35
+
36
+ body {
37
+ font-family: 'Poppins', sans-serif;
38
+ background-color: var(--bg);
39
+ color: var(--fg);
40
+ line-height: 1.6;
41
+ overflow-x: hidden;
42
+ }
43
+
44
+ h1, h2, h3, h4 {
45
+ font-family: 'Playfair Display', serif;
46
+ }
47
+
48
+ /* Utility Classes */
49
+ .container {
50
+ max-width: 1200px;
51
+ margin: 0 auto;
52
+ padding: 0 24px;
53
+ }
54
+
55
+ .btn {
56
+ display: inline-flex;
57
+ align-items: center;
58
+ gap: 8px;
59
+ padding: 14px 32px;
60
+ border-radius: 50px;
61
+ font-family: 'Poppins', sans-serif;
62
+ font-weight: 500;
63
+ font-size: 15px;
64
+ text-decoration: none;
65
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
66
+ cursor: pointer;
67
+ border: none;
68
+ }
69
+
70
+ .btn-primary {
71
+ background: linear-gradient(135deg, var(--accent) 0%, #dbb840 100%);
72
+ color: var(--fg);
73
+ box-shadow: 0 4px 20px rgba(201, 162, 39, 0.3);
74
+ }
75
+
76
+ .btn-primary:hover {
77
+ transform: translateY(-3px);
78
+ box-shadow: 0 8px 30px rgba(201, 162, 39, 0.4);
79
+ }
80
+
81
+ .btn-secondary {
82
+ background: transparent;
83
+ color: var(--fg);
84
+ border: 2px solid var(--fg);
85
+ }
86
+
87
+ .btn-secondary:hover {
88
+ background: var(--fg);
89
+ color: var(--bg);
90
+ }
91
+
92
+ /* Header */
93
+ .header {
94
+ position: fixed;
95
+ top: 0;
96
+ left: 0;
97
+ right: 0;
98
+ z-index: 1000;
99
+ padding: 16px 0;
100
+ transition: all 0.4s ease;
101
+ }
102
+
103
+ .header.scrolled {
104
+ background: rgba(253, 248, 244, 0.95);
105
+ backdrop-filter: blur(20px);
106
+ box-shadow: 0 4px 30px var(--shadow);
107
+ }
108
+
109
+ .header .container {
110
+ display: flex;
111
+ align-items: center;
112
+ justify-content: space-between;
113
+ }
114
+
115
+ .logo {
116
+ display: flex;
117
+ align-items: center;
118
+ gap: 12px;
119
+ text-decoration: none;
120
+ color: var(--fg);
121
+ }
122
+
123
+ .logo-icon {
124
+ width: 48px;
125
+ height: 48px;
126
+ background: linear-gradient(135deg, var(--rose) 0%, var(--rose-dark) 100%);
127
+ border-radius: 50%;
128
+ display: flex;
129
+ align-items: center;
130
+ justify-content: center;
131
+ font-size: 24px;
132
+ }
133
+
134
+ .logo-text {
135
+ font-family: 'Playfair Display', serif;
136
+ font-size: 24px;
137
+ font-weight: 700;
138
+ letter-spacing: -0.5px;
139
+ }
140
+
141
+ .logo-text span {
142
+ color: var(--accent);
143
+ }
144
+
145
+ .nav {
146
+ display: flex;
147
+ align-items: center;
148
+ gap: 40px;
149
+ }
150
+
151
+ .nav-links {
152
+ display: flex;
153
+ gap: 32px;
154
+ list-style: none;
155
+ }
156
+
157
+ .nav-links a {
158
+ text-decoration: none;
159
+ color: var(--fg);
160
+ font-weight: 500;
161
+ font-size: 15px;
162
+ position: relative;
163
+ padding: 4px 0;
164
+ }
165
+
166
+ .nav-links a::after {
167
+ content: '';
168
+ position: absolute;
169
+ bottom: 0;
170
+ left: 0;
171
+ width: 0;
172
+ height: 2px;
173
+ background: var(--accent);
174
+ transition: width 0.3s ease;
175
+ }
176
+
177
+ .nav-links a:hover::after {
178
+ width: 100%;
179
+ }
180
+
181
+ .mobile-toggle {
182
+ display: none;
183
+ background: none;
184
+ border: none;
185
+ cursor: pointer;
186
+ padding: 8px;
187
+ color: var(--fg);
188
+ }
189
+
190
+ /* Hero Section */
191
+ .hero {
192
+ min-height: 100vh;
193
+ display: flex;
194
+ align-items: center;
195
+ position: relative;
196
+ padding: 120px 0 80px;
197
+ overflow: hidden;
198
+ }
199
+
200
+ .hero::before {
201
+ content: '';
202
+ position: absolute;
203
+ top: -50%;
204
+ right: -20%;
205
+ width: 80%;
206
+ height: 150%;
207
+ background: radial-gradient(ellipse, var(--rose) 0%, transparent 70%);
208
+ opacity: 0.3;
209
+ animation: float 20s ease-in-out infinite;
210
+ }
211
+
212
+ @keyframes float {
213
+ 0%, 100% { transform: translate(0, 0) rotate(0deg); }
214
+ 50% { transform: translate(-5%, 5%) rotate(5deg); }
215
+ }
216
+
217
+ .hero .container {
218
+ display: grid;
219
+ grid-template-columns: 1fr 1fr;
220
+ gap: 60px;
221
+ align-items: center;
222
+ }
223
+
224
+ .hero-content {
225
+ position: relative;
226
+ z-index: 1;
227
+ }
228
+
229
+ .hero-badge {
230
+ display: inline-flex;
231
+ align-items: center;
232
+ gap: 8px;
233
+ padding: 8px 16px;
234
+ background: var(--accent-light);
235
+ border-radius: 50px;
236
+ font-size: 13px;
237
+ font-weight: 500;
238
+ margin-bottom: 24px;
239
+ animation: fadeInUp 0.8s ease forwards;
240
+ }
241
+
242
+ .hero-title {
243
+ font-size: clamp(42px, 6vw, 72px);
244
+ font-weight: 700;
245
+ line-height: 1.1;
246
+ margin-bottom: 24px;
247
+ animation: fadeInUp 0.8s ease 0.1s forwards;
248
+ opacity: 0;
249
+ }
250
+
251
+ .hero-title span {
252
+ color: var(--accent);
253
+ font-style: italic;
254
+ }
255
+
256
+ .hero-description {
257
+ font-size: 18px;
258
+ color: var(--fg-light);
259
+ margin-bottom: 32px;
260
+ max-width: 480px;
261
+ animation: fadeInUp 0.8s ease 0.2s forwards;
262
+ opacity: 0;
263
+ }
264
+
265
+ .hero-buttons {
266
+ display: flex;
267
+ gap: 16px;
268
+ flex-wrap: wrap;
269
+ animation: fadeInUp 0.8s ease 0.3s forwards;
270
+ opacity: 0;
271
+ }
272
+
273
+ .hero-image {
274
+ position: relative;
275
+ animation: fadeInRight 1s ease 0.4s forwards;
276
+ opacity: 0;
277
+ }
278
+
279
+ .hero-image-main {
280
+ width: 100%;
281
+ max-width: 500px;
282
+ aspect-ratio: 1;
283
+ background: linear-gradient(145deg, var(--rose) 0%, var(--rose-dark) 100%);
284
+ border-radius: 50% 50% 50% 70% / 50% 50% 70% 50%;
285
+ display: flex;
286
+ align-items: center;
287
+ justify-content: center;
288
+ position: relative;
289
+ box-shadow: 0 30px 60px rgba(212, 165, 165, 0.4);
290
+ }
291
+
292
+ .cake-illustration {
293
+ font-size: 200px;
294
+ position: relative;
295
+ z-index: 1;
296
+ }
297
+
298
+ .hero-image-decoration {
299
+ position: absolute;
300
+ width: 100%;
301
+ height: 100%;
302
+ border: 3px dashed var(--accent);
303
+ border-radius: 50%;
304
+ animation: spin 30s linear infinite;
305
+ opacity: 0.5;
306
+ }
307
+
308
+ @keyframes spin {
309
+ from { transform: rotate(0deg); }
310
+ to { transform: rotate(360deg); }
311
+ }
312
+
313
+ .floating-element {
314
+ position: absolute;
315
+ background: var(--card);
316
+ padding: 12px 20px;
317
+ border-radius: 16px;
318
+ box-shadow: 0 10px 40px var(--shadow);
319
+ display: flex;
320
+ align-items: center;
321
+ gap: 10px;
322
+ animation: bounce 3s ease-in-out infinite;
323
+ }
324
+
325
+ .floating-element:nth-child(1) {
326
+ top: 10%;
327
+ left: -10%;
328
+ animation-delay: 0s;
329
+ }
330
+
331
+ .floating-element:nth-child(2) {
332
+ bottom: 20%;
333
+ right: -5%;
334
+ animation-delay: 1s;
335
+ }
336
+
337
+ @keyframes bounce {
338
+ 0%, 100% { transform: translateY(0); }
339
+ 50% { transform: translateY(-10px); }
340
+ }
341
+
342
+ .floating-icon {
343
+ width: 40px;
344
+ height: 40px;
345
+ background: var(--accent-light);
346
+ border-radius: 10px;
347
+ display: flex;
348
+ align-items: center;
349
+ justify-content: center;
350
+ }
351
+
352
+ .floating-text strong {
353
+ display: block;
354
+ font-size: 16px;
355
+ color: var(--fg);
356
+ }
357
+
358
+ .floating-text span {
359
+ font-size: 12px;
360
+ color: var(--fg-light);
361
+ }
362
+
363
+ @keyframes fadeInUp {
364
+ from {
365
+ opacity: 0;
366
+ transform: translateY(30px);
367
+ }
368
+ to {
369
+ opacity: 1;
370
+ transform: translateY(0);
371
+ }
372
+ }
373
+
374
+ @keyframes fadeInRight {
375
+ from {
376
+ opacity: 0;
377
+ transform: translateX(50px);
378
+ }
379
+ to {
380
+ opacity: 1;
381
+ transform: translateX(0);
382
+ }
383
+ }
384
+
385
+ /* Features Section */
386
+ .features {
387
+ padding: 100px 0;
388
+ background: var(--bg-dark);
389
+ }
390
+
391
+ .section-header {
392
+ text-align: center;
393
+ margin-bottom: 60px;
394
+ }
395
+
396
+ .section-tag {
397
+ display: inline-block;
398
+ padding: 8px 20px;
399
+ background: var(--accent-light);
400
+ border-radius: 50px;
401
+ font-size: 13px;
402
+ font-weight: 600;
403
+ color: var(--fg);
404
+ margin-bottom: 16px;
405
+ text-transform: uppercase;
406
+ letter-spacing: 1px;
407
+ }
408
+
409
+ .section-title {
410
+ font-size: clamp(32px, 4vw, 48px);
411
+ font-weight: 700;
412
+ margin-bottom: 16px;
413
+ }
414
+
415
+ .section-description {
416
+ font-size: 17px;
417
+ color: var(--fg-light);
418
+ max-width: 600px;
419
+ margin: 0 auto;
420
+ }
421
+
422
+ .features-grid {
423
+ display: grid;
424
+ grid-template-columns: repeat(4, 1fr);
425
+ gap: 24px;
426
+ }
427
+
428
+ .feature-card {
429
+ background: var(--card);
430
+ padding: 32px 24px;
431
+ border-radius: 24px;
432
+ text-align: center;
433
+ transition: all 0.4s ease;
434
+ position: relative;
435
+ overflow: hidden;
436
+ }
437
+
438
+ .feature-card::before {
439
+ content: '';
440
+ position: absolute;
441
+ top: 0;
442
+ left: 0;
443
+ right: 0;
444
+ height: 4px;
445
+ background: linear-gradient(90deg, var(--rose), var(--accent));
446
+ transform: scaleX(0);
447
+ transition: transform 0.4s ease;
448
+ }
449
+
450
+ .feature-card:hover {
451
+ transform: translateY(-8px);
452
+ box-shadow: 0 20px 50px var(--shadow);
453
+ }
454
+
455
+ .feature-card:hover::before {
456
+ transform: scaleX(1);
457
+ }
458
+
459
+ .feature-icon {
460
+ width: 72px;
461
+ height: 72px;
462
+ background: linear-gradient(135deg, var(--rose) 0%, var(--rose-dark) 100%);
463
+ border-radius: 20px;
464
+ display: flex;
465
+ align-items: center;
466
+ justify-content: center;
467
+ margin: 0 auto 20px;
468
+ transition: transform 0.4s ease;
469
+ }
470
+
471
+ .feature-card:hover .feature-icon {
472
+ transform: scale(1.1) rotate(5deg);
473
+ }
474
+
475
+ .feature-title {
476
+ font-size: 20px;
477
+ font-weight: 600;
478
+ margin-bottom: 12px;
479
+ }
480
+
481
+ .feature-text {
482
+ font-size: 14px;
483
+ color: var(--fg-light);
484
+ line-height: 1.7;
485
+ }
486
+
487
+ /* Products Section */
488
+ .products {
489
+ padding: 100px 0;
490
+ }
491
+
492
+ .products-grid {
493
+ display: grid;
494
+ grid-template-columns: repeat(3, 1fr);
495
+ gap: 32px;
496
+ }
497
+
498
+ .product-card {
499
+ background: var(--card);
500
+ border-radius: 28px;
501
+ overflow: hidden;
502
+ transition: all 0.4s ease;
503
+ position: relative;
504
+ }
505
+
506
+ .product-card:hover {
507
+ transform: translateY(-10px);
508
+ box-shadow: 0 30px 60px var(--shadow);
509
+ }
510
+
511
+ .product-image {
512
+ height: 280px;
513
+ background: linear-gradient(145deg, var(--rose) 0%, #e8c4c4 100%);
514
+ display: flex;
515
+ align-items: center;
516
+ justify-content: center;
517
+ position: relative;
518
+ overflow: hidden;
519
+ }
520
+
521
+ .product-image::after {
522
+ content: '';
523
+ position: absolute;
524
+ bottom: 0;
525
+ left: 0;
526
+ right: 0;
527
+ height: 50%;
528
+ background: linear-gradient(to top, rgba(0,0,0,0.1), transparent);
529
+ }
530
+
531
+ .product-emoji {
532
+ font-size: 100px;
533
+ transition: transform 0.4s ease;
534
+ }
535
+
536
+ .product-card:hover .product-emoji {
537
+ transform: scale(1.15);
538
+ }
539
+
540
+ .product-badge {
541
+ position: absolute;
542
+ top: 16px;
543
+ left: 16px;
544
+ padding: 8px 16px;
545
+ background: var(--accent);
546
+ border-radius: 50px;
547
+ font-size: 12px;
548
+ font-weight: 600;
549
+ color: var(--fg);
550
+ }
551
+
552
+ .product-content {
553
+ padding: 24px;
554
+ }
555
+
556
+ .product-title {
557
+ font-size: 22px;
558
+ font-weight: 600;
559
+ margin-bottom: 8px;
560
+ }
561
+
562
+ .product-description {
563
+ font-size: 14px;
564
+ color: var(--fg-light);
565
+ margin-bottom: 16px;
566
+ }
567
+
568
+ .product-footer {
569
+ display: flex;
570
+ align-items: center;
571
+ justify-content: space-between;
572
+ }
573
+
574
+ .product-price {
575
+ font-family: 'Playfair Display', serif;
576
+ font-size: 24px;
577
+ font-weight: 700;
578
+ color: var(--accent);
579
+ }
580
+
581
+ .product-btn {
582
+ width: 48px;
583
+ height: 48px;
584
+ background: var(--fg);
585
+ border-radius: 50%;
586
+ display: flex;
587
+ align-items: center;
588
+ justify-content: center;
589
+ color: var(--bg);
590
+ cursor: pointer;
591
+ transition: all 0.3s ease;
592
+ border: none;
593
+ }
594
+
595
+ .product-btn:hover {
596
+ background: var(--accent);
597
+ transform: scale(1.1);
598
+ }
599
+
600
+ /* About Section */
601
+ .about {
602
+ padding: 100px 0;
603
+ background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg) 100%);
604
+ }
605
+
606
+ .about .container {
607
+ display: grid;
608
+ grid-template-columns: 1fr 1fr;
609
+ gap: 80px;
610
+ align-items: center;
611
+ }
612
+
613
+ .about-image {
614
+ position: relative;
615
+ }
616
+
617
+ .about-image-main {
618
+ width: 100%;
619
+ max-width: 450px;
620
+ aspect-ratio: 4/5;
621
+ background: linear-gradient(145deg, var(--rose) 0%, var(--rose-dark) 100%);
622
+ border-radius: 30px;
623
+ display: flex;
624
+ align-items: center;
625
+ justify-content: center;
626
+ position: relative;
627
+ box-shadow: 0 30px 60px rgba(212, 165, 165, 0.3);
628
+ }
629
+
630
+ .about-emoji {
631
+ font-size: 150px;
632
+ }
633
+
634
+ .about-image-accent {
635
+ position: absolute;
636
+ bottom: -30px;
637
+ right: -30px;
638
+ width: 200px;
639
+ height: 200px;
640
+ background: var(--accent-light);
641
+ border-radius: 30px;
642
+ z-index: -1;
643
+ }
644
+
645
+ .about-stats {
646
+ position: absolute;
647
+ bottom: 40px;
648
+ left: -40px;
649
+ background: var(--card);
650
+ padding: 24px 32px;
651
+ border-radius: 20px;
652
+ box-shadow: 0 20px 50px var(--shadow);
653
+ display: flex;
654
+ gap: 32px;
655
+ }
656
+
657
+ .stat-item {
658
+ text-align: center;
659
+ }
660
+
661
+ .stat-number {
662
+ font-family: 'Playfair Display', serif;
663
+ font-size: 32px;
664
+ font-weight: 700;
665
+ color: var(--accent);
666
+ }
667
+
668
+ .stat-label {
669
+ font-size: 13px;
670
+ color: var(--fg-light);
671
+ }
672
+
673
+ .about-content {
674
+ position: relative;
675
+ }
676
+
677
+ .about-title {
678
+ font-size: clamp(32px, 4vw, 44px);
679
+ font-weight: 700;
680
+ margin-bottom: 24px;
681
+ line-height: 1.2;
682
+ }
683
+
684
+ .about-text {
685
+ font-size: 16px;
686
+ color: var(--fg-light);
687
+ margin-bottom: 24px;
688
+ line-height: 1.8;
689
+ }
690
+
691
+ .about-list {
692
+ list-style: none;
693
+ margin-bottom: 32px;
694
+ }
695
+
696
+ .about-list li {
697
+ display: flex;
698
+ align-items: center;
699
+ gap: 12px;
700
+ padding: 12px 0;
701
+ border-bottom: 1px solid var(--border);
702
+ }
703
+
704
+ .about-list li:last-child {
705
+ border-bottom: none;
706
+ }
707
+
708
+ .check-icon {
709
+ width: 24px;
710
+ height: 24px;
711
+ background: var(--accent-light);
712
+ border-radius: 50%;
713
+ display: flex;
714
+ align-items: center;
715
+ justify-content: center;
716
+ flex-shrink: 0;
717
+ }
718
+
719
+ /* Testimonials */
720
+ .testimonials {
721
+ padding: 100px 0;
722
+ }
723
+
724
+ .testimonials-grid {
725
+ display: grid;
726
+ grid-template-columns: repeat(3, 1fr);
727
+ gap: 24px;
728
+ }
729
+
730
+ .testimonial-card {
731
+ background: var(--card);
732
+ padding: 32px;
733
+ border-radius: 24px;
734
+ position: relative;
735
+ transition: all 0.4s ease;
736
+ }
737
+
738
+ .testimonial-card:hover {
739
+ transform: translateY(-8px);
740
+ box-shadow: 0 20px 50px var(--shadow);
741
+ }
742
+
743
+ .testimonial-card.featured {
744
+ background: linear-gradient(145deg, var(--rose) 0%, var(--rose-dark) 100%);
745
+ color: white;
746
+ }
747
+
748
+ .testimonial-quote {
749
+ position: absolute;
750
+ top: 24px;
751
+ right: 24px;
752
+ font-size: 48px;
753
+ font-family: 'Playfair Display', serif;
754
+ opacity: 0.2;
755
+ }
756
+
757
+ .testimonial-card.featured .testimonial-quote {
758
+ opacity: 0.3;
759
+ color: white;
760
+ }
761
+
762
+ .testimonial-stars {
763
+ display: flex;
764
+ gap: 4px;
765
+ margin-bottom: 16px;
766
+ color: var(--accent);
767
+ }
768
+
769
+ .testimonial-text {
770
+ font-size: 15px;
771
+ line-height: 1.8;
772
+ margin-bottom: 24px;
773
+ }
774
+
775
+ .testimonial-card.featured .testimonial-text {
776
+ color: rgba(255,255,255,0.9);
777
+ }
778
+
779
+ .testimonial-author {
780
+ display: flex;
781
+ align-items: center;
782
+ gap: 12px;
783
+ }
784
+
785
+ .author-avatar {
786
+ width: 48px;
787
+ height: 48px;
788
+ background: var(--accent-light);
789
+ border-radius: 50%;
790
+ display: flex;
791
+ align-items: center;
792
+ justify-content: center;
793
+ font-weight: 600;
794
+ font-size: 18px;
795
+ }
796
+
797
+ .testimonial-card.featured .author-avatar {
798
+ background: rgba(255,255,255,0.3);
799
+ }
800
+
801
+ .author-name {
802
+ font-weight: 600;
803
+ font-size: 15px;
804
+ }
805
+
806
+ .author-role {
807
+ font-size: 13px;
808
+ color: var(--fg-light);
809
+ }
810
+
811
+ .testimonial-card.featured .author-role {
812
+ color: rgba(255,255,255,0.7);
813
+ }
814
+
815
+ /* Contact Section */
816
+ .contact {
817
+ padding: 100px 0;
818
+ background: var(--bg-dark);
819
+ }
820
+
821
+ .contact-wrapper {
822
+ display: grid;
823
+ grid-template-columns: 1fr 1fr;
824
+ gap: 60px;
825
+ background: var(--card);
826
+ border-radius: 32px;
827
+ padding: 60px;
828
+ box-shadow: 0 30px 60px var(--shadow);
829
+ }
830
+
831
+ .contact-info h2 {
832
+ font-size: 36px;
833
+ margin-bottom: 16px;
834
+ }
835
+
836
+ .contact-info p {
837
+ color: var(--fg-light);
838
+ margin-bottom: 32px;
839
+ }
840
+
841
+ .contact-items {
842
+ display: flex;
843
+ flex-direction: column;
844
+ gap: 20px;
845
+ }
846
+
847
+ .contact-item {
848
+ display: flex;
849
+ align-items: center;
850
+ gap: 16px;
851
+ }
852
+
853
+ .contact-icon {
854
+ width: 56px;
855
+ height: 56px;
856
+ background: var(--accent-light);
857
+ border-radius: 16px;
858
+ display: flex;
859
+ align-items: center;
860
+ justify-content: center;
861
+ flex-shrink: 0;
862
+ }
863
+
864
+ .contact-item-text strong {
865
+ display: block;
866
+ font-size: 15px;
867
+ margin-bottom: 4px;
868
+ }
869
+
870
+ .contact-item-text span {
871
+ font-size: 14px;
872
+ color: var(--fg-light);
873
+ }
874
+
875
+ .contact-form {
876
+ display: flex;
877
+ flex-direction: column;
878
+ gap: 20px;
879
+ }
880
+
881
+ .form-row {
882
+ display: grid;
883
+ grid-template-columns: 1fr 1fr;
884
+ gap: 20px;
885
+ }
886
+
887
+ .form-group {
888
+ display: flex;
889
+ flex-direction: column;
890
+ gap: 8px;
891
+ }
892
+
893
+ .form-group label {
894
+ font-size: 14px;
895
+ font-weight: 500;
896
+ }
897
+
898
+ .form-group input,
899
+ .form-group textarea {
900
+ padding: 16px 20px;
901
+ border: 2px solid var(--border);
902
+ border-radius: 16px;
903
+ font-family: 'Poppins', sans-serif;
904
+ font-size: 15px;
905
+ background: var(--bg);
906
+ transition: all 0.3s ease;
907
+ }
908
+
909
+ .form-group input:focus,
910
+ .form-group textarea:focus {
911
+ outline: none;
912
+ border-color: var(--accent);
913
+ box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.1);
914
+ }
915
+
916
+ .form-group textarea {
917
+ min-height: 120px;
918
+ resize: vertical;
919
+ }
920
+
921
+ .contact-form .btn {
922
+ width: 100%;
923
+ justify-content: center;
924
+ margin-top: 8px;
925
+ }
926
+
927
+ /* Footer */
928
+ .footer {
929
+ background: var(--fg);
930
+ color: var(--bg);
931
+ padding: 80px 0 30px;
932
+ }
933
+
934
+ .footer-grid {
935
+ display: grid;
936
+ grid-template-columns: 2fr 1fr 1fr 1fr;
937
+ gap: 60px;
938
+ margin-bottom: 60px;
939
+ }
940
+
941
+ .footer-brand .logo {
942
+ color: var(--bg);
943
+ margin-bottom: 20px;
944
+ }
945
+
946
+ .footer-brand .logo-icon {
947
+ background: var(--accent);
948
+ }
949
+
950
+ .footer-brand p {
951
+ color: rgba(255,255,255,0.6);
952
+ font-size: 14px;
953
+ line-height: 1.8;
954
+ margin-bottom: 24px;
955
+ }
956
+
957
+ .social-links {
958
+ display: flex;
959
+ gap: 12px;
960
+ }
961
+
962
+ .social-link {
963
+ width: 44px;
964
+ height: 44px;
965
+ background: rgba(255,255,255,0.1);
966
+ border-radius: 12px;
967
+ display: flex;
968
+ align-items: center;
969
+ justify-content: center;
970
+ color: var(--bg);
971
+ transition: all 0.3s ease;
972
+ }
973
+
974
+ .social-link:hover {
975
+ background: var(--accent);
976
+ transform: translateY(-4px);
977
+ }
978
+
979
+ .footer-title {
980
+ font-size: 18px;
981
+ font-weight: 600;
982
+ margin-bottom: 24px;
983
+ color: var(--bg);
984
+ }
985
+
986
+ .footer-links {
987
+ list-style: none;
988
+ display: flex;
989
+ flex-direction: column;
990
+ gap: 12px;
991
+ }
992
+
993
+ .footer-links a {
994
+ color: rgba(255,255,255,0.6);
995
+ text-decoration: none;
996
+ font-size: 14px;
997
+ transition: all 0.3s ease;
998
+ }
999
+
1000
+ .footer-links a:hover {
1001
+ color: var(--accent);
1002
+ padding-left: 8px;
1003
+ }
1004
+
1005
+ .footer-bottom {
1006
+ padding-top: 30px;
1007
+ border-top: 1px solid rgba(255,255,255,0.1);
1008
+ display: flex;
1009
+ justify-content: space-between;
1010
+ align-items: center;
1011
+ font-size: 14px;
1012
+ color: rgba(255,255,255,0.5);
1013
+ }
1014
+
1015
+ .footer-bottom a {
1016
+ color: var(--accent);
1017
+ text-decoration: none;
1018
+ }
1019
+
1020
+ /* Mobile Menu */
1021
+ .mobile-menu {
1022
+ position: fixed;
1023
+ top: 0;
1024
+ left: 0;
1025
+ right: 0;
1026
+ bottom: 0;
1027
+ background: var(--bg);
1028
+ z-index: 999;
1029
+ display: flex;
1030
+ flex-direction: column;
1031
+ padding: 100px 24px 40px;
1032
+ transform: translateX(100%);
1033
+ transition: transform 0.4s ease;
1034
+ }
1035
+
1036
+ .mobile-menu.active {
1037
+ transform: translateX(0);
1038
+ }
1039
+
1040
+ .mobile-menu-close {
1041
+ position: absolute;
1042
+ top: 24px;
1043
+ right: 24px;
1044
+ background: none;
1045
+ border: none;
1046
+ cursor: pointer;
1047
+ padding: 8px;
1048
+ color: var(--fg);
1049
+ }
1050
+
1051
+ .mobile-menu-links {
1052
+ list-style: none;
1053
+ display: flex;
1054
+ flex-direction: column;
1055
+ gap: 24px;
1056
+ }
1057
+
1058
+ .mobile-menu-links a {
1059
+ font-size: 28px;
1060
+ font-family: 'Playfair Display', serif;
1061
+ text-decoration: none;
1062
+ color: var(--fg);
1063
+ }
1064
+
1065
+ /* Scroll Reveal */
1066
+ .reveal {
1067
+ opacity: 0;
1068
+ transform: translateY(40px);
1069
+ transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
1070
+ }
1071
+
1072
+ .reveal.active {
1073
+ opacity: 1;
1074
+ transform: translateY(0);
1075
+ }
1076
+
1077
+ /* Responsive */
1078
+ @media (max-width: 1024px) {
1079
+ .features-grid {
1080
+ grid-template-columns: repeat(2, 1fr);
1081
+ }
1082
+
1083
+ .products-grid {
1084
+ grid-template-columns: repeat(2, 1fr);
1085
+ }
1086
+
1087
+ .about .container {
1088
+ grid-template-columns: 1fr;
1089
+ gap: 60px;
1090
+ }
1091
+
1092
+ .about-image {
1093
+ order: -1;
1094
+ display: flex;
1095
+ justify-content: center;
1096
+ }
1097
+
1098
+ .about-stats {
1099
+ left: 50%;
1100
+ transform: translateX(-50%);
1101
+ }
1102
+
1103
+ .testimonials-grid {
1104
+ grid-template-columns: 1fr;
1105
+ }
1106
+
1107
+ .contact-wrapper {
1108
+ grid-template-columns: 1fr;
1109
+ padding: 40px;
1110
+ }
1111
+
1112
+ .footer-grid {
1113
+ grid-template-columns: repeat(2, 1fr);
1114
+ }
1115
+ }
1116
+
1117
+ @media (max-width: 768px) {
1118
+ .nav-links {
1119
+ display: none;
1120
+ }
1121
+
1122
+ .mobile-toggle {
1123
+ display: block;
1124
+ }
1125
+
1126
+ .hero .container {
1127
+ grid-template-columns: 1fr;
1128
+ text-align: center;
1129
+ }
1130
+
1131
+ .hero-description {
1132
+ margin-left: auto;
1133
+ margin-right: auto;
1134
+ }
1135
+
1136
+ .hero-buttons {
1137
+ justify-content: center;
1138
+ }
1139
+
1140
+ .hero-image {
1141
+ order: -1;
1142
+ }
1143
+
1144
+ .hero-image-main {
1145
+ max-width: 300px;
1146
+ margin: 0 auto;
1147
+ }
1148
+
1149
+ .floating-element {
1150
+ display: none;
1151
+ }
1152
+
1153
+ .features-grid {
1154
+ grid-template-columns: 1fr;
1155
+ }
1156
+
1157
+ .products-grid {
1158
+ grid-template-columns: 1fr;
1159
+ }
1160
+
1161
+ .about-stats {
1162
+ flex-direction: column;
1163
+ gap: 16px;
1164
+ padding: 16px 24px;
1165
+ }
1166
+
1167
+ .form-row {
1168
+ grid-template-columns: 1fr;
1169
+ }
1170
+
1171
+ .footer-grid {
1172
+ grid-template-columns: 1fr;
1173
+ gap: 40px;
1174
+ }
1175
+
1176
+ .footer-bottom {
1177
+ flex-direction: column;
1178
+ gap: 16px;
1179
+ text-align: center;
1180
+ }
1181
+ }
1182
+
1183
+ /* Reduced Motion */
1184
+ @media (prefers-reduced-motion: reduce) {
1185
+ *,
1186
+ *::before,
1187
+ *::after {
1188
+ animation-duration: 0.01ms !important;
1189
+ animation-iteration-count: 1 !important;
1190
+ transition-duration: 0.01ms !important;
1191
+ }
1192
+ }
1193
+ </style>
1194
+ </head>
1195
+ <body>
1196
+ <!-- Header -->
1197
+ <header class="header" id="header">
1198
+ <div class="container">
1199
+ <a href="#" class="logo">
1200
+ <div class="logo-icon">
1201
+ <i data-lucide="cake" style="width: 24px; height: 24px; color: white;"></i>
1202
+ </div>
1203
+ <span class="logo-text">Doce <span>Arte</span></span>
1204
+ </a>
1205
+ <nav class="nav">
1206
+ <ul class="nav-links">
1207
+ <li><a href="#inicio">Inicio</a></li>
1208
+ <li><a href="#produtos">Produtos</a></li>
1209
+ <li><a href="#sobre">Sobre</a></li>
1210
+ <li><a href="#depoimentos">Depoimentos</a></li>
1211
+ <li><a href="#contato">Contato</a></li>
1212
+ </ul>
1213
+ <a href="#contato" class="btn btn-primary">Encomendar</a>
1214
+ </nav>
1215
+ <button class="mobile-toggle" id="mobileToggle" aria-label="Abrir menu">
1216
+ <i data-lucide="menu" style="width: 28px; height: 28px;"></i>
1217
+ </button>
1218
+ </div>
1219
+ </header>
1220
+
1221
+ <!-- Mobile Menu -->
1222
+ <div class="mobile-menu" id="mobileMenu">
1223
+ <button class="mobile-menu-close" id="mobileClose" aria-label="Fechar menu">
1224
+ <i data-lucide="x" style="width: 28px; height: 28px;"></i>
1225
+ </button>
1226
+ <ul class="mobile-menu-links">
1227
+ <li><a href="#inicio">Inicio</a></li>
1228
+ <li><a href="#produtos">Produtos</a></li>
1229
+ <li><a href="#sobre">Sobre</a></li>
1230
+ <li><a href="#depoimentos">Depoimentos</a></li>
1231
+ <li><a href="#contato">Contato</a></li>
1232
+ </ul>
1233
+ </div>
1234
+
1235
+ <!-- Hero Section -->
1236
+ <section class="hero" id="inicio">
1237
+ <div class="container">
1238
+ <div class="hero-content">
1239
+ <div class="hero-badge">
1240
+ <i data-lucide="sparkles" style="width: 16px; height: 16px;"></i>
1241
+ Confeitaria Artesanal desde 2015
1242
+ </div>
1243
+ <h1 class="hero-title">
1244
+ Doces que <span>encantam</span> cada momento
1245
+ </h1>
1246
+ <p class="hero-description">
1247
+ Criamos bolos artesanais com ingredientes selecionados e muito amor.
1248
+ Cada receita e uma obra de arte feita especialmente para voce.
1249
+ </p>
1250
+ <div class="hero-buttons">
1251
+ <a href="#produtos" class="btn btn-primary">
1252
+ Ver Produtos
1253
+ <i data-lucide="arrow-right" style="width: 18px; height: 18px;"></i>
1254
+ </a>
1255
+ <a href="#sobre" class="btn btn-secondary">Nossa Historia</a>
1256
+ </div>
1257
+ </div>
1258
+ <div class="hero-image">
1259
+ <div class="floating-element">
1260
+ <div class="floating-icon">
1261
+ <i data-lucide="award" style="width: 20px; height: 20px;"></i>
1262
+ </div>
1263
+ <div class="floating-text">
1264
+ <strong>+500</strong>
1265
+ <span>Bolos entregues</span>
1266
+ </div>
1267
+ </div>
1268
+ <div class="floating-element">
1269
+ <div class="floating-icon">
1270
+ <i data-lucide="star" style="width: 20px; height: 20px;"></i>
1271
+ </div>
1272
+ <div class="floating-text">
1273
+ <strong>4.9</strong>
1274
+ <span>Avaliacao</span>
1275
+ </div>
1276
+ </div>
1277
+ <div class="hero-image-main">
1278
+ <div class="hero-image-decoration"></div>
1279
+ <span class="cake-illustration">🎂</span>
1280
+ </div>
1281
+ </div>
1282
+ </div>
1283
+ </section>
1284
+
1285
+ <!-- Features Section -->
1286
+ <section class="features" id="diferenciais">
1287
+ <div class="container">
1288
+ <div class="section-header reveal">
1289
+ <span class="section-tag">Nossos Diferenciais</span>
1290
+ <h2 class="section-title">Por que escolher a Doce Arte?</h2>
1291
+ <p class="section-description">
1292
+ Comprometidos com a qualidade e satisfacao de cada cliente
1293
+ </p>
1294
+ </div>
1295
+ <div class="features-grid">
1296
+ <div class="feature-card reveal">
1297
+ <div class="feature-icon">
1298
+ <i data-lucide="leaf" style="width: 32px; height: 32px; color: white;"></i>
1299
+ </div>
1300
+ <h3 class="feature-title">Ingredientes Frescos</h3>
1301
+ <p class="feature-text">
1302
+ Utilizamos apenas ingredientes de alta qualidade, frescos e selecionados para garantir o melhor sabor.
1303
+ </p>
1304
+ </div>
1305
+ <div class="feature-card reveal">
1306
+ <div class="feature-icon">
1307
+ <i data-lucide="heart-handshake" style="width: 32px; height: 32px; color: white;"></i>
1308
+ </div>
1309
+ <h3 class="feature-title">Feito com Amor</h3>
1310
+ <p class="feature-text">
1311
+ Cada bolo e preparado com dedicacao e carinho, como se fosse para nossa propria familia.
1312
+ </p>
1313
+ </div>
1314
+ <div class="feature-card reveal">
1315
+ <div class="feature-icon">
1316
+ <i data-lucide="truck" style="width: 32px; height: 32px; color: white;"></i>
1317
+ </div>
1318
+ <h3 class="feature-title">Entrega Rapida</h3>
1319
+ <p class="feature-text">
1320
+ Entregamos seu bolo com todo cuidado e pontualidade para que sua festa seja perfeita.
1321
+ </p>
1322
+ </div>
1323
+ <div class="feature-card reveal">
1324
+ <div class="feature-icon">
1325
+ <i data-lucide="palette" style="width: 32px; height: 32px; color: white;"></i>
1326
+ </div>
1327
+ <h3 class="feature-title">Design Personalizado</h3>
1328
+ <p class="feature-text">
1329
+ Criamos decoracoes exclusivas que combinam perfeitamente com o tema da sua festa.
1330
+ </p>
1331
+ </div>
1332
+ </div>
1333
+ </div>
1334
+ </section>
1335
+
1336
+ <!-- Products Section -->
1337
+ <section class="products" id="produtos">
1338
+ <div class="container">
1339
+ <div class="section-header reveal">
1340
+ <span class="section-tag">Nossos Produtos</span>
1341
+ <h2 class="section-title">Bolos que fazem sucesso</h2>
1342
+ <p class="section-description">
1343
+ Conheca nossos bolos mais pedidos e faca sua encomenda
1344
+ </p>
1345
+ </div>
1346
+ <div class="products-grid">
1347
+ <div class="product-card reveal">
1348
+ <div class="product-image">
1349
+ <span class="product-badge">Mais Vendido</span>
1350
+ <span class="product-emoji">🎂</span>
1351
+ </div>
1352
+ <div class="product-content">
1353
+ <h3 class="product-title">Bolo de Chocolate Belga</h3>
1354
+ <p class="product-description">
1355
+ Massa fofinha com chocolate belga 70% e ganache cremoso
1356
+ </p>
1357
+ <div class="product-footer">
1358
+ <span class="product-price">R$ 180,00</span>
1359
+ <button class="product-btn" aria-label="Adicionar ao carrinho">
1360
+ <i data-lucide="shopping-bag" style="width: 20px; height: 20px;"></i>
1361
+ </button>
1362
+ </div>
1363
+ </div>
1364
+ </div>
1365
+ <div class="product-card reveal">
1366
+ <div class="product-image">
1367
+ <span class="product-emoji">🍰</span>
1368
+ </div>
1369
+ <div class="product-content">
1370
+ <h3 class="product-title">Bolo Red Velvet</h3>
1371
+ <p class="product-description">
1372
+ Classico bolo vermelho com cream cheese e cobertura especial
1373
+ </p>
1374
+ <div class="product-footer">
1375
+ <span class="product-price">R$ 165,00</span>
1376
+ <button class="product-btn" aria-label="Adicionar ao carrinho">
1377
+ <i data-lucide="shopping-bag" style="width: 20px; height: 20px;"></i>
1378
+ </button>
1379
+ </div>
1380
+ </div>
1381
+ </div>
1382
+ <div class="product-card reveal">
1383
+ <div class="product-image">
1384
+ <span class="product-emoji">🧁</span>
1385
+ </div>
1386
+ <div class="product-content">
1387
+ <h3 class="product-title">Bolo de Coco com Leite Condensado</h3>
1388
+ <p class="product-description">
1389
+ Bolo molhadinho com coco ralado e recheio cremoso
1390
+ </p>
1391
+ <div class="product-footer">
1392
+ <span class="product-price">R$ 145,00</span>
1393
+ <button class="product-btn" aria-label="Adicionar ao carrinho">
1394
+ <i data-lucide="shopping-bag" style="width: 20px; height: 20px;"></i>
1395
+ </button>
1396
+ </div>
1397
+ </div>
1398
+ </div>
1399
+ <div class="product-card reveal">
1400
+ <div class="product-image">
1401
+ <span class="product-badge">Novidade</span>
1402
+ <span class="product-emoji">🎀</span>
1403
+ </div>
1404
+ <div class="product-content">
1405
+ <h3 class="product-title">Bolo Naked Cake</h3>
1406
+ <p class="product-description">
1407
+ Trend decoracao rustica com frutas frescas e flores
1408
+ </p>
1409
+ <div class="product-footer">
1410
+ <span class="product-price">R$ 220,00</span>
1411
+ <button class="product-btn" aria-label="Adicionar ao carrinho">
1412
+ <i data-lucide="shopping-bag" style="width: 20px; height: 20px;"></i>
1413
+ </button>
1414
+ </div>
1415
+ </div>
1416
+ </div>
1417
+ <div class="product-card reveal">
1418
+ <div class="product-image">
1419
+ <span class="product-emoji">🌸</span>
1420
+ </div>
1421
+ <div class="product-content">
1422
+ <h3 class="product-title">Bolo de Morango com Chantilly</h3>
1423
+ <p class="product-description">
1424
+ Camadas de massa, morangos frescos e chantilly leve
1425
+ </p>
1426
+ <div class="product-footer">
1427
+ <span class="product-price">R$ 175,00</span>
1428
+ <button class="product-btn" aria-label="Adicionar ao carrinho">
1429
+ <i data-lucide="shopping-bag" style="width: 20px; height: 20px;"></i>
1430
+ </button>
1431
+ </div>
1432
+ </div>
1433
+ </div>
1434
+ <div class="product-card reveal">
1435
+ <div class="product-image">
1436
+ <span class="product-emoji">🎉</span>
1437
+ </div>
1438
+ <div class="product-content">
1439
+ <h3 class="product-title">Bolo Infantil Personalizado</h3>
1440
+ <p class="product-description">
1441
+ Decoracao tematica com personagens e cores da festa
1442
+ </p>
1443
+ <div class="product-footer">
1444
+ <span class="product-price">A partir de R$ 200,00</span>
1445
+ <button class="product-btn" aria-label="Adicionar ao carrinho">
1446
+ <i data-lucide="shopping-bag" style="width: 20px; height: 20px;"></i>
1447
+ </button>
1448
+ </div>
1449
+ </div>
1450
+ </div>
1451
+ </div>
1452
+ </div>
1453
+ </section>
1454
+
1455
+ <!-- About Section -->
1456
+ <section class="about" id="sobre">
1457
+ <div class="container">
1458
+ <div class="about-image reveal">
1459
+ <div class="about-image-main">
1460
+ <span class="about-emoji">👩‍🍳</span>
1461
+ </div>
1462
+ <div class="about-image-accent"></div>
1463
+ <div class="