Hugging Face's logo

TeichAI
/
Qwen3-4B-Thinking-MiniMax-M2.1-Coder

Text Generation
Transformers
Safetensors
English
qwen3
text-generation-inference
unsloth
conversational
Model card Files
xet
Community
armand0e commited on
Commit
30a1507
·
verified ·
1 Parent(s): 132d32e

Upload 2 files

Browse files
Files changed (2) hide show
  1. demo/index.html +1531 -0
  2. demo/prompt.txt +1 -0
demo/index.html ADDED
@@ -0,0 +1,1531 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sweet Crumbs | Artisan Bakeries</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ :root {
15
+ --cream: #FFF9F0;
16
+ --warm-white: #FFFEF9;
17
+ --soft-brown: #8B7355;
18
+ --golden-brown: #A08C6C;
19
+ --dark-brown: #4A3728;
20
+ --dark-brown-dark: #3E2F25;
21
+ --soft-pink: #F5C6D3;
22
+ --gold: #C9A962;
23
+ --gold-light: #E8D5A3;
24
+ --text-dark: #332F2F;
25
+ --text-light: #6B605A;
26
+ }
27
+
28
+ body {
29
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
30
+ background-color: var(--cream);
31
+ color: var(--text-dark);
32
+ line-height: 1.6;
33
+ overflow-x: hidden;
34
+ }
35
+
36
+ /* Navigation */
37
+ nav {
38
+ position: fixed;
39
+ top: 0;
40
+ width: 100%;
41
+ background: var(--warm-white);
42
+ padding: 1rem 5%;
43
+ display: flex;
44
+ justify-content: space-between;
45
+ align-items: center;
46
+ z-index: 1000;
47
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
48
+ transition: all 0.3s ease;
49
+ }
50
+
51
+ .logo {
52
+ font-size: 1.8rem;
53
+ font-weight: 800;
54
+ color: var(--dark-brown);
55
+ text-decoration: none;
56
+ letter-spacing: 2px;
57
+ display: flex;
58
+ align-items: center;
59
+ gap: 0.5rem;
60
+ }
61
+
62
+ .logo::before {
63
+ content: "✦";
64
+ font-size: 1.5rem;
65
+ }
66
+
67
+ .nav-links {
68
+ display: flex;
69
+ list-style: none;
70
+ gap: 2rem;
71
+ }
72
+
73
+ .nav-links a {
74
+ text-decoration: none;
75
+ color: var(--text-dark);
76
+ font-weight: 500;
77
+ transition: color 0.3s ease;
78
+ position: relative;
79
+ padding: 0.5rem 0;
80
+ }
81
+
82
+ .nav-links a::after {
83
+ content: '';
84
+ position: absolute;
85
+ bottom: 0;
86
+ left: 0;
87
+ width: 0;
88
+ height: 2px;
89
+ background: var(--golden-brown);
90
+ transition: width 0.3s ease;
91
+ }
92
+
93
+ .nav-links a:hover {
94
+ color: var(--golden-brown);
95
+ }
96
+
97
+ .nav-links a:hover::after {
98
+ width: 100%;
99
+ }
100
+
101
+ .nav-cta {
102
+ background: var(--dark-brown);
103
+ color: white !important;
104
+ padding: 0.7rem 1.5rem;
105
+ border-radius: 30px;
106
+ transition: all 0.3s ease !important;
107
+ }
108
+
109
+ .nav-cta:hover {
110
+ background: var(--golden-brown);
111
+ transform: translateY(-2px);
112
+ }
113
+
114
+ /* Hero Section */
115
+ .hero {
116
+ min-height: 100vh;
117
+ display: flex;
118
+ align-items: center;
119
+ justify-content: center;
120
+ text-align: center;
121
+ background: linear-gradient(135deg, var(--cream) 0%, var(--warm-white) 100%);
122
+ overflow: hidden;
123
+ }
124
+
125
+ .hero::before {
126
+ content: '';
127
+ position: absolute;
128
+ top: -50%;
129
+ left: -50%;
130
+ width: 200%;
131
+ height: 200%;
132
+ background: radial-gradient(circle at 30% 50%, rgba(139, 115, 85, 0.08) 0%, transparent 50%);
133
+ animation: float 20s ease-in-out infinite;
134
+ }
135
+
136
+ @keyframes float {
137
+ 0%, 100% { transform: translate(0,0) rotate(0deg); }
138
+ 50% { transform: translate(30px, 20px) rotate(5deg); }
139
+ }
140
+
141
+ .hero-content {
142
+ max-width: 900px;
143
+ padding: 2rem;
144
+ animation: fadeInUp 1s ease;
145
+ }
146
+
147
+ @keyframes fadeInUp {
148
+ from {
149
+ opacity: 0;
150
+ transform: translateY(30px);
151
+ }
152
+ to {
153
+ opacity: 1;
154
+ transform: translateY(0);
155
+ }
156
+ }
157
+
158
+ .hero h1 {
159
+ font-size: 4rem;
160
+ color: var(--dark-brown);
161
+ margin-bottom: 1rem;
162
+ line-height: 1.1;
163
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
164
+ animation: fadeIn 0.8s ease forwards;
165
+ }
166
+
167
+ .hero h1::first-letter {
168
+ display: block;
169
+ font-size: 8rem;
170
+ color: var(--golden-brown);
171
+ line-height: 1;
172
+ margin-top: -3rem;
173
+ opacity: 0.3;
174
+ }
175
+
176
+ @keyframes fadeIn {
177
+ from { opacity: 0; }
178
+ to { opacity: 1; }
179
+ }
180
+
181
+ .hero p {
182
+ font-size: 1.3rem;
183
+ color: var(--text-light);
184
+ margin-bottom: 2rem;
185
+ animation: fadeIn 1s ease 0.2s forwards;
186
+ }
187
+
188
+ .hero-buttons {
189
+ display: flex;
190
+ gap: 1rem;
191
+ justify-content: center;
192
+ flex-wrap: wrap;
193
+ animation: fadeIn 1s ease 0.4s forwards;
194
+ }
195
+
196
+ .btn {
197
+ padding: 1rem 2rem;
198
+ border-radius: 30px;
199
+ text-decoration: none;
200
+ font-weight: 600;
201
+ transition: all 0.3s ease;
202
+ cursor: pointer;
203
+ border: none;
204
+ font-size: 1rem;
205
+ }
206
+
207
+ .btn-primary {
208
+ background: var(--dark-brown);
209
+ color: white;
210
+ }
211
+
212
+ .btn-primary:hover {
213
+ background: var(--golden-brown);
214
+ transform: translateY(-3px);
215
+ box-shadow: 0 10px 30px rgba(74, 55, 40, 0.3);
216
+ }
217
+
218
+ .btn-secondary {
219
+ background: transparent;
220
+ color: var(--dark-brown);
221
+ border: 2px solid var(--dark-brown);
222
+ }
223
+
224
+ .btn-secondary:hover {
225
+ background: var(--dark-brown);
226
+ color: white;
227
+ transform: translateY(-3px);
228
+ }
229
+
230
+ .hero-image {
231
+ margin-top: 4rem;
232
+ display: flex;
233
+ justify-content: center;
234
+ align-items: center;
235
+ width: 100%;
236
+ height: 500px;
237
+ background: linear-gradient(145deg, var(--soft-pink), var(--warm-white));
238
+ border-radius: 50%;
239
+ display: flex;
240
+ align-items: center;
241
+ justify-content: center;
242
+ font-size: 8rem;
243
+ animation: rotate 15s linear infinite;
244
+ }
245
+
246
+ @keyframes rotate {
247
+ from { transform: rotate(0deg); }
248
+ to { transform: rotate(360deg); }
249
+ }
250
+
251
+ /* Features Section */
252
+ .features {
253
+ padding: 6rem 5%;
254
+ background: var(--warm-white);
255
+ }
256
+
257
+ .section-header {
258
+ text-align: center;
259
+ margin-bottom: 4rem;
260
+ }
261
+
262
+ .section-header h2 {
263
+ font-size: 2.8rem;
264
+ color: var(--dark-brown);
265
+ margin-bottom: 1rem;
266
+ }
267
+
268
+ .section-header p {
269
+ color: var(--text-light);
270
+ font-size: 1.1rem;
271
+ max-width: 600px;
272
+ margin: 0 auto;
273
+ }
274
+
275
+ .features-grid {
276
+ display: grid;
277
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
278
+ gap: 2rem;
279
+ max-width: 1400px;
280
+ margin: 0 auto;
281
+ }
282
+
283
+ .feature-card {
284
+ background: white;
285
+ padding: 2.5rem;
286
+ border-radius: 20px;
287
+ text-align: center;
288
+ box-shadow: 0 10px 40px rgba(0,0,0,0.08);
289
+ transition: all 0.4s ease;
290
+ border: 1px solid #eee;
291
+ }
292
+
293
+ .feature-card:hover {
294
+ transform: translateY(-10px);
295
+ box-shadow: 0 20px 60px rgba(0,0,0,0.12);
296
+ }
297
+
298
+ .feature-icon {
299
+ width: 70px;
300
+ height: 70px;
301
+ background: linear-gradient(135deg, var(--golden-brown), var(--soft-brown));
302
+ border-radius: 50%;
303
+ display: flex;
304
+ align-items: center;
305
+ justify-content: center;
306
+ font-size: 2rem;
307
+ margin: 0 auto 1.5rem;
308
+ color: white;
309
+ }
310
+
311
+ .feature-card h3 {
312
+ font-size: 1.5rem;
313
+ color: var(--dark-brown);
314
+ margin-bottom: 1rem;
315
+ }
316
+
317
+ .feature-card p {
318
+ color: var(--text-light);
319
+ font-size: 0.95rem;
320
+ }
321
+
322
+ /* Products Section */
323
+ .products {
324
+ padding: 6rem 5%;
325
+ background: var(--cream);
326
+ }
327
+
328
+ .products-grid {
329
+ display: grid;
330
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
331
+ gap: 2rem;
332
+ max-width: 1400px;
333
+ margin: 0 auto;
334
+ }
335
+
336
+ .product-card {
337
+ background: white;
338
+ border-radius: 20px;
339
+ overflow: hidden;
340
+ box-shadow: 0 10px 40px rgba(0,0,0,0.08);
341
+ transition: all 0.4s ease;
342
+ cursor: pointer;
343
+ position: relative;
344
+ overflow: hidden;
345
+ }
346
+
347
+ .product-card:hover {
348
+ transform: translateY(-10px);
349
+ box-shadow: 0 20px 60px rgba(0,0,0,0.12);
350
+ }
351
+
352
+ .product-image {
353
+ height: 200px;
354
+ background: linear-gradient(135deg, var(--soft-brown), var(--dark-brown));
355
+ display: flex;
356
+ align-items: center;
357
+ justify-content: center;
358
+ font-size: 5rem;
359
+ position: relative;
360
+ overflow: hidden;
361
+ }
362
+
363
+ .product-overlay {
364
+ position: absolute;
365
+ top: 0;
366
+ left: 0;
367
+ width: 100%;
368
+ height: 100%;
369
+ background: rgba(74, 55, 40, 0.8);
370
+ display: flex;
371
+ align-items: center;
372
+ justify-content: center;
373
+ color: white;
374
+ opacity: 0;
375
+ transition: opacity 0.3s ease;
376
+ }
377
+
378
+ .product-card:hover .product-overlay {
379
+ opacity: 1;
380
+ }
381
+
382
+ .product-overlay span {
383
+ font-size: 1.5rem;
384
+ cursor: pointer;
385
+ padding: 0.5rem;
386
+ }
387
+
388
+ .product-info {
389
+ padding: 1.5rem;
390
+ }
391
+
392
+ .product-info h3 {
393
+ font-size: 1.3rem;
394
+ color: var(--dark-brown);
395
+ margin-bottom: 0.5rem;
396
+ }
397
+
398
+ .product-info p {
399
+ color: var(--text-light);
400
+ font-size: 0.9rem;
401
+ margin-bottom: 1rem;
402
+ }
403
+
404
+ .product-details {
405
+ display: flex;
406
+ justify-content: space-between;
407
+ align-items: center;
408
+ padding-top: 1rem;
409
+ border-top: 1px solid #eee;
410
+ }
411
+
412
+ .product-price {
413
+ font-size: 1.3rem;
414
+ font-weight: 700;
415
+ color: var(--golden-brown);
416
+ }
417
+
418
+ .product-rating {
419
+ color: var(--gold);
420
+ font-size: 0.85rem;
421
+ }
422
+
423
+ /* Gallery Section */
424
+ .gallery {
425
+ padding: 6rem 5%;
426
+ background: var(--warm-white);
427
+ }
428
+
429
+ .gallery-grid {
430
+ display: grid;
431
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
432
+ gap: 2rem;
433
+ max-width: 1400px;
434
+ margin: 0 auto;
435
+ }
436
+
437
+ .gallery-item {
438
+ position: relative;
439
+ height: 300px;
440
+ overflow: hidden;
441
+ background: linear-gradient(135deg, var(--soft-pink), var(--warm-white));
442
+ border-radius: 20px;
443
+ cursor: pointer;
444
+ transition: all 0.4s ease;
445
+ }
446
+
447
+ .gallery-item:hover {
448
+ transform: scale(1.05);
449
+ }
450
+
451
+ .gallery-overlay {
452
+ position: absolute;
453
+ top: 0;
454
+ left: 0;
455
+ width: 100%;
456
+ height: 100%;
457
+ background: rgba(74, 55, 40, 0.8);
458
+ display: flex;
459
+ flex-direction: column;
460
+ justify-content: center;
461
+ align-items: center;
462
+ color: white;
463
+ opacity: 0;
464
+ transition: opacity 0.3s ease;
465
+ }
466
+
467
+ .gallery-item:hover .gallery-overlay {
468
+ opacity: 1;
469
+ }
470
+
471
+ .gallery-overlay h3 {
472
+ font-size: 1.5rem;
473
+ margin-bottom: 0.5rem;
474
+ }
475
+
476
+ .gallery-overlay p {
477
+ font-size: 0.9rem;
478
+ opacity: 0.9;
479
+ }
480
+
481
+ /* About Section */
482
+ .about {
483
+ padding: 6rem 5%;
484
+ background: var(--cream);
485
+ }
486
+
487
+ .about-content {
488
+ display: grid;
489
+ grid-template-columns: 1fr 1fr;
490
+ gap: 4rem;
491
+ max-width: 1400px;
492
+ margin: 0 auto;
493
+ align-items: center;
494
+ }
495
+
496
+ .about-image {
497
+ height: 500px;
498
+ background: linear-gradient(135deg, var(--soft-brown), var(--dark-brown));
499
+ border-radius: 20px;
500
+ display: flex;
501
+ align-items: center;
502
+ justify-content: center;
503
+ font-size: 8rem;
504
+ color: white;
505
+ box-shadow: 0 20px 60px rgba(0,0,0,0.2);
506
+ }
507
+
508
+ .about-text h2 {
509
+ font-size: 2.5rem;
510
+ color: var(--dark-brown);
511
+ margin-bottom: 1.5rem;
512
+ }
513
+
514
+ .about-text p {
515
+ color: var(--text-light);
516
+ font-size: 1.1rem;
517
+ margin-bottom: 1.5rem;
518
+ line-height: 1.8;
519
+ }
520
+
521
+ .about-features {
522
+ display: grid;
523
+ grid-template-columns: 1fr 1fr;
524
+ gap: 1.5rem;
525
+ margin-top: 2rem;
526
+ }
527
+
528
+ .about-feature {
529
+ display: flex;
530
+ gap: 1rem;
531
+ padding: 1rem;
532
+ background: white;
533
+ border-radius: 15px;
534
+ box-shadow: 0 5px 20px rgba(0,0,0,0.08);
535
+ }
536
+
537
+ .about-feature::before {
538
+ content: "✦";
539
+ color: var(--golden-brown);
540
+ font-size: 1.5rem;
541
+ }
542
+
543
+ .about-feature p {
544
+ font-size: 1rem;
545
+ color: var(--text-dark);
546
+ }
547
+
548
+ /* Services Section */
549
+ .services {
550
+ padding: 6rem 5%;
551
+ background: var(--warm-white);
552
+ }
553
+
554
+ .services-grid {
555
+ display: grid;
556
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
557
+ gap: 2rem;
558
+ max-width: 1400px;
559
+ margin: 0 auto;
560
+ }
561
+
562
+ .service-card {
563
+ background: white;
564
+ padding: 2.5rem;
565
+ border-radius: 20px;
566
+ text-align: center;
567
+ box-shadow: 0 10px 40px rgba(0,0,0,0.08);
568
+ transition: all 0.4s ease;
569
+ cursor: pointer;
570
+ }
571
+
572
+ .service-card:hover {
573
+ transform: translateY(-10px);
574
+ box-shadow: 0 20px 60px rgba(0,0,0,0.12);
575
+ }
576
+
577
+ .service-icon-large {
578
+ width: 70px;
579
+ height: 70px;
580
+ background: linear-gradient(135deg, var(--golden-brown), var(--soft-brown));
581
+ border-radius: 50%;
582
+ display: flex;
583
+ align-items: center;
584
+ justify-content: center;
585
+ font-size: 2.5rem;
586
+ margin: 0 auto 1.5rem;
587
+ color: white;
588
+ }
589
+
590
+ .service-card h3 {
591
+ font-size: 1.5rem;
592
+ color: var(--dark-brown);
593
+ margin-bottom: 1rem;
594
+ }
595
+
596
+ .service-card p {
597
+ color: var(--text-light);
598
+ font-size: 0.95rem;
599
+ margin-bottom: 1.5rem;
600
+ }
601
+
602
+ .service-features {
603
+ display: flex;
604
+ flex-direction: column;
605
+ gap: 0.5rem;
606
+ font-size: 0.85rem;
607
+ color: var(--text-light);
608
+ }
609
+
610
+ .service-features span {
611
+ display: flex;
612
+ align-items: center;
613
+ gap: 0.3rem;
614
+ }
615
+
616
+ /* Testimonials */
617
+ .testimonials {
618
+ padding: 6rem 5%;
619
+ background: var(--cream);
620
+ }
621
+
622
+ .testimonials-container {
623
+ max-width: 1200px;
624
+ margin: 0 auto;
625
+ display: grid;
626
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
627
+ gap: 2rem;
628
+ }
629
+
630
+ .testimonial-card {
631
+ background: white;
632
+ padding: 2rem;
633
+ border-radius: 20px;
634
+ box-shadow: 0 10px 40px rgba(0,0,0,0.08);
635
+ position: relative;
636
+ transition: all 0.4s ease;
637
+ }
638
+
639
+ .testimonial-card:hover {
640
+ transform: translateY(-10px);
641
+ box-shadow: 0 20px 60px rgba(0,0,0,0.12);
642
+ }
643
+
644
+ .testimonial-stars {
645
+ color: var(--gold);
646
+ font-size: 1.2rem;
647
+ margin-bottom: 1rem;
648
+ }
649
+
650
+ .testimonial-card p {
651
+ font-size: 1rem;
652
+ color: var(--text-dark);
653
+ margin-bottom: 1.5rem;
654
+ line-height: 1.7;
655
+ }
656
+
657
+ .testimonial-author {
658
+ display: flex;
659
+ align-items: center;
660
+ gap: 1rem;
661
+ }
662
+
663
+ .author-avatar {
664
+ width: 50px;
665
+ height: 50px;
666
+ background: linear-gradient(135deg, var(--golden-brown), var(--soft-brown));
667
+ border-radius: 50%;
668
+ display: flex;
669
+ align-items: center;
670
+ justify-content: center;
671
+ color: white;
672
+ font-weight: 600;
673
+ font-size: 1.2rem;
674
+ }
675
+
676
+ .author-info h4 {
677
+ color: var(--dark-brown);
678
+ font-size: 1rem;
679
+ }
680
+
681
+ .author-info p {
682
+ color: var(--text-light);
683
+ font-size: 0.85rem;
684
+ }
685
+
686
+ /* CTA Section */
687
+ .cta {
688
+ padding: 6rem 5%;
689
+ background: linear-gradient(135deg, var(--dark-brown) 0%, var(--dark-brown-dark) 100%);
690
+ color: white;
691
+ text-align: center;
692
+ }
693
+
694
+ .cta-content {
695
+ max-width: 800px;
696
+ margin: 0 auto;
697
+ display: flex;
698
+ flex-direction: column;
699
+ justify-content: center;
700
+ align-items: center;
701
+ }
702
+
703
+ .cta h2 {
704
+ font-size: 3rem;
705
+ margin-bottom: 1rem;
706
+ }
707
+
708
+ .cta p {
709
+ font-size: 1.2rem;
710
+ opacity: 0.9;
711
+ margin-bottom: 2rem;
712
+ color: rgba(255,255,255,0.9);
713
+ }
714
+
715
+ .cta .btn {
716
+ background: var(--gold);
717
+ color: var(--dark-brown);
718
+ padding: 1rem 2rem;
719
+ }
720
+
721
+ .cta .btn:hover {
722
+ background: #d4a85a;
723
+ transform: translateY(-3px);
724
+ }
725
+
726
+ /* Contact Section */
727
+ .contact {
728
+ padding: 6rem 5%;
729
+ background: var(--warm-white);
730
+ }
731
+
732
+ .contact-container {
733
+ display: grid;
734
+ grid-template-columns: 1fr 1fr;
735
+ gap: 4rem;
736
+ max-width: 1400px;
737
+ margin: 0 auto;
738
+ }
739
+
740
+ .contact-info h2 {
741
+ font-size: 2.5rem;
742
+ color: var(--dark-brown);
743
+ margin-bottom: 1.5rem;
744
+ }
745
+
746
+ .contact-info p {
747
+ color: var(--text-light);
748
+ font-size: 1rem;
749
+ margin-bottom: 2rem;
750
+ }
751
+
752
+ .contact-details {
753
+ display: flex;
754
+ flex-direction: column;
755
+ gap: 1.5rem;
756
+ }
757
+
758
+ .contact-item {
759
+ display: flex;
760
+ gap: 1rem;
761
+ padding: 1rem;
762
+ background: white;
763
+ border-radius: 15px;
764
+ box-shadow: 0 5px 20px rgba(0,0,0,0.08);
765
+ }
766
+
767
+ .contact-icon {
768
+ width: 50px;
769
+ height: 50px;
770
+ background: linear-gradient(135deg, var(--golden-brown), var(--soft-brown));
771
+ border-radius: 10px;
772
+ display: flex;
773
+ align-items: center;
774
+ justify-content: center;
775
+ color: white;
776
+ font-size: 1.2rem;
777
+ }
778
+
779
+ .contact-item h4 {
780
+ color: var(--dark-brown);
781
+ font-size: 1rem;
782
+ margin-bottom: 0.3rem;
783
+ }
784
+
785
+ .contact-item p {
786
+ color: var(--text-light);
787
+ font-size: 0.95rem;
788
+ margin-bottom: 0;
789
+ }
790
+
791
+ .contact-form {
792
+ background: white;
793
+ padding: 2.5rem;
794
+ border-radius: 20px;
795
+ box-shadow: 0 10px 40px rgba(0,0,0,0.08);
796
+ }
797
+
798
+ .form-group {
799
+ margin-bottom: 1.5rem;
800
+ }
801
+
802
+ .form-group label {
803
+ display: block;
804
+ margin-bottom: 0.5rem;
805
+ color: var(--dark-brown);
806
+ font-weight: 500;
807
+ font-size: 0.95rem;
808
+ }
809
+
810
+ .form-group input,
811
+ .form-group textarea,
812
+ .form-group select {
813
+ width: 100%;
814
+ padding: 1rem;
815
+ border: 2px solid #eee;
816
+ border-radius: 10px;
817
+ font-size: 1rem;
818
+ transition: all 0.3s ease;
819
+ background: var(--warm-white);
820
+ }
821
+
822
+ .form-group input:focus,
823
+ .form-group textarea:focus,
824
+ .form-group select:focus {
825
+ outline: none;
826
+ border-color: var(--golden-brown);
827
+ box-shadow: 0 0 0 3px rgba(169, 169, 98, 0.1);
828
+ }
829
+
830
+ .form-group textarea {
831
+ resize: vertical;
832
+ min-height: 150px;
833
+ }
834
+
835
+ .submit-btn {
836
+ width: 100%;
837
+ padding: 1.2rem;
838
+ background: var(--dark-brown);
839
+ color: white;
840
+ border: none;
841
+ border-radius: 10px;
842
+ font-size: 1rem;
843
+ font-weight: 600;
844
+ cursor: pointer;
845
+ transition: all 0.3s ease;
846
+ }
847
+
848
+ .submit-btn:hover {
849
+ background: var(--golden-brown);
850
+ transform: translateY(-2px);
851
+ }
852
+
853
+ /* Footer */
854
+ footer {
855
+ background: var(--dark-brown);
856
+ color: white;
857
+ padding: 4rem 5% 2rem;
858
+ }
859
+
860
+ .footer-content {
861
+ display: grid;
862
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
863
+ gap: 3rem;
864
+ max-width: 1400px;
865
+ margin: 0 auto;
866
+ margin-bottom: 3rem;
867
+ }
868
+
869
+ .footer-section h3 {
870
+ font-size: 1.2rem;
871
+ margin-bottom: 1.5rem;
872
+ color: var(--golden-brown);
873
+ }
874
+
875
+ .footer-section ul {
876
+ list-style: none;
877
+ }
878
+
879
+ .footer-section li {
880
+ margin-bottom: 0.8rem;
881
+ }
882
+
883
+ .footer-section a {
884
+ color: rgba(255,255,255,0.8);
885
+ text-decoration: none;
886
+ transition: color 0.3s ease;
887
+ }
888
+
889
+ .footer-section a:hover {
890
+ color: var(--gold);
891
+ }
892
+
893
+ .footer-bottom {
894
+ text-align: center;
895
+ padding-top: 2rem;
896
+ border-top: 1px solid rgba(255,255,255,0.2);
897
+ color: rgba(255,255,255,0.6);
898
+ font-size: 0.9rem;
899
+ }
900
+
901
+ /* Mobile Menu */
902
+ .mobile-menu-btn {
903
+ display: none;
904
+ flex-direction: column;
905
+ gap: 5px;
906
+ background: none;
907
+ border: none;
908
+ cursor: pointer;
909
+ padding: 5px;
910
+ }
911
+
912
+ .mobile-menu-btn span {
913
+ width: 25px;
914
+ height: 3px;
915
+ background: var(--dark-brown);
916
+ transition: all 0.3s ease;
917
+ }
918
+
919
+ /* Responsive Design */
920
+ @media (max-width: 992px) {
921
+ .about-content,
922
+ .contact-container {
923
+ grid-template-columns: 1fr;
924
+ }
925
+
926
+ .about-image {
927
+ height: 350px;
928
+ }
929
+
930
+ .about-features {
931
+ grid-template-columns: 1fr;
932
+ }
933
+
934
+ .hero h1 {
935
+ font-size: 2.8rem;
936
+ }
937
+
938
+ .cta h2 {
939
+ font-size: 2.2rem;
940
+ }
941
+ }
942
+
943
+ @media (max-width: 768px) {
944
+ .nav-links {
945
+ display: none;
946
+ }
947
+
948
+ .mobile-menu-btn {
949
+ display: flex;
950
+ }
951
+
952
+ .hero {
953
+ min-height: 70vh;
954
+ }
955
+
956
+ .hero h1::first-letter {
957
+ display: none;
958
+ font-size: 0;
959
+ margin-top: 0;
960
+ }
961
+
962
+ .hero-image {
963
+ display: none;
964
+ }
965
+
966
+ .hero-buttons {
967
+ flex-direction: column;
968
+ align-items: center;
969
+ }
970
+
971
+ .section-header h2 {
972
+ font-size: 2rem;
973
+ }
974
+
975
+ .products-grid {
976
+ grid-template-columns: 1fr;
977
+ }
978
+
979
+ .testimonials-container {
980
+ grid-template-columns: 1fr;
981
+ }
982
+ }
983
+
984
+ /* Animations */
985
+ .fade-in {
986
+ opacity: 0;
987
+ transform: translateY(30px);
988
+ transition: all 0.6s ease;
989
+ }
990
+
991
+ .fade-in.visible {
992
+ opacity: 1;
993
+ transform: translateY(0);
994
+ }
995
+ </style>
996
+ </head>
997
+ <body>
998
+ <!-- Navigation -->
999
+ <nav>
1000
+ <a href="#" class="logo">Sweet Crumbs</a>
1001
+ <ul class="nav-links">
1002
+ <li><a href="#home" class="nav-cta">Home</a></li>
1003
+ <li><a href="#services">Services</a></li>
1004
+ <li><a href="#gallery">Gallery</a></li>
1005
+ <li><a href="#about">About</a></li>
1006
+ <li><a href="#contact">Contact</a></li>
1007
+ </ul>
1008
+ </nav>
1009
+
1010
+ <!-- Hero Section -->
1011
+ <section class="hero">
1012
+ <div class="hero-content fade-in">
1013
+ <h1>Artisan Bakeries<br><span>Since 1998</span></h1>
1014
+ <p>Handcrafted with love and traditional recipes. Every bite tells a story.</p>
1015
+ <div class="hero-buttons">
1016
+ <a href="#contact" class="btn btn-primary">Order Now</a>
1017
+ <a href="#gallery" class="btn btn-secondary">View Our Work</a>
1018
+ </div>
1019
+ </div>
1020
+ <div class="hero-image">🎂</div>
1021
+ </section>
1022
+
1023
+ <!-- Features Section -->
1024
+ <section class="features" id="features">
1025
+ <div class="section-header fade-in">
1026
+ <h2>Why Choose Sweet Crumbs?</h2>
1027
+ <p>Experience the difference with our premium artisanal creations made with the finest ingredients</p>
1028
+ </div>
1029
+ <div class="features-grid">
1030
+ <div class="feature-card fade-in">
1031
+ <div class="feature-icon">🌾</div>
1032
+ <h3>Farm Fresh Ingredients</h3>
1033
+ <p>We source our flour from local organic farms and use only the best butter and eggs</p>
1034
+ </div>
1035
+ <div class="feature-card fade-in">
1036
+ <div class="feature-icon">👨‍🍳</div>
1037
+ <h3>Master Artisans</h3>
1038
+ <p>Our bakers have been trained in traditional techniques passed down through generations</p>
1039
+ </div>
1040
+ <div class="feature-card fade-in">
1041
+ <div class="feature-icon">🌱</div>
1042
+ <h3>Natural & Organic</h3>
1043
+ <p>Certified organic ingredients sourced from sustainable farms around the world</p>
1044
+ </div>
1045
+ <div class="feature-card fade-in">
1046
+ <div class="feature-icon">🚚</div>
1047
+ <h3>Fresh Delivery</h3>
1048
+ <p>Same-day delivery available in our service area. Cold chain guaranteed</p>
1049
+ </div>
1050
+ <div class="feature-card fade-in">
1051
+ <div class="feature-icon">🎁</div>
1052
+ <h3>Cheerful Service</h3>
1053
+ <p>Personalized attention to every order. Because you deserve the best experience</p>
1054
+ </div>
1055
+ <div class="feature-card fade-in">
1056
+ <div class="feature-icon">💝</div>
1057
+ <h3>Cheaper Than Expected</h3>
1058
+ <p>Because we believe in sharing the love and making it accessible to everyone</p>
1059
+ </div>
1060
+ </div>
1061
+ </section>
1062
+
1063
+ <!-- Products Section -->
1064
+ <section class="products" id="products">
1065
+ <div class="section-header fade-in">
1066
+ <h2>Our Favorite Creations</h2>
1067
+ <p>Discover our best-selling items that have made Sweet Crumbs a household name</p>
1068
+ </div>
1069
+ <div class="products-grid">
1070
+ <div class="product-card fade-in">
1071
+ <div class="product-image">🍰</div>
1072
+ <div class="product-info">
1073
+ <h3>Wedding Cake</h3>
1074
+ <p>Three-tier masterpiece with vanilla buttercream and seasonal fruit</p>
1075
+ <div class="product-details">
1076
+ <span class="product-price">$85+</span>
1077
+ <span class="product-rating">★★★★★</span>
1078
+ </div>
1079
+ </div>
1080
+ </div>
1081
+ <div class="product-card fade-in">
1082
+ <div class="product-image">🍪</div>
1083
+ <div class="product-info">
1084
+ <h3>Gourmet Cookies</h3>
1085
+ <p>Cinnamon roll style cookies with cream cheese frosting</p>
1086
+ <div class="product-details">
1087
+ <span class="product-price">$6.50</span>
1088
+ <span class="product-rating">★★★★★</span>
1089
+ </div>
1090
+ </div>
1091
+ </div>
1092
+ <div class="product-card fade-in">
1093
+ <div class="product-image">🍫</div>
1094
+ <div class="product-info">
1095
+ <h3>Brownies Supreme</h3>
1096
+ <p>Fudge-like brownies with dark chocolate ganache</p>
1097
+ <div class="product-details">
1098
+ <span class="product-price">$5.50</span>
1099
+ <span class="product-rating">★★★★★</span>
1100
+ </div>
1101
+ </div>
1102
+ </div>
1103
+ <div class="product-card fade-in">
1104
+ <div class="product-image">🥐</div>
1105
+ <div class="product-info">
1106
+ <h3>Macarons</h3>
1107
+ <p>French-style delicate cakes in rainbow colors</p>
1108
+ <div class="product-details">
1109
+ <span class="product-price">$7.50</span>
1110
+ <span class="product-rating">★★★★★</span>
1111
+ </div>
1112
+ </div>
1113
+ </div>
1114
+ <div class="product-card fade-in">
1115
+ <div class="product-image">🍩</div>
1116
+ <div class="product-info">
1117
+ <h3>Cupcakes</h3>
1118
+ <p>Assorted flavors with buttercream frosting</p>
1119
+ <div class="product-details">
1120
+ <span class="product-price">$4.50</span>
1121
+ <span class="product-rating">★★★★★</span>
1122
+ </div>
1123
+ </div>
1124
+ </div>
1125
+ <div class="product-card fade-in">
1126
+ <div class="product-image">🥛</div>
1127
+ <div class="product-info">
1128
+ <h3>Cup of Tea</h3>
1129
+ <p>Hot or iced tea with freshly baked scones</p>
1130
+ <div class="product-details">
1131
+ <span class="product-price">$8.00</span>
1132
+ <span class="product-rating">★★★★★</span>
1133
+ </div>
1134
+ </div>
1135
+ </div>
1136
+ </div>
1137
+ </section>
1138
+
1139
+ <!-- Gallery Section -->
1140
+ <section class="gallery" id="gallery">
1141
+ <div class="section-header fade-in">
1142
+ <h2>Our Gallery</h2>
1143
+ <p>Take a look at some of our delicious creations</p>
1144
+ </div>
1145
+ <div class="gallery-grid">
1146
+ <div class="gallery-item fade-in">
1147
+ <div class="gallery-overlay">
1148
+ <h3>Wedding Cake</h3>
1149
+ <p>Vanilla buttercream with seasonal fruit</p>
1150
+ </div>
1151
+ </div>
1152
+ <div class="gallery-item fade-in">
1153
+ <div class="gallery-overlay">
1154
+ <h3>Gourmet Cookies</h3>
1155
+ <p>Cinnamon roll style with cream cheese</p>
1156
+ </div>
1157
+ </div>
1158
+ <div class="gallery-item fade-in">
1159
+ <div class="gallery-overlay">
1160
+ <h3>Brownies Supreme</h3>
1161
+ <p>Fudge-like with dark chocolate ganache</p>
1162
+ </div>
1163
+ </div>
1164
+ <div class="gallery-item fade-in">
1165
+ <div class="gallery-overlay">
1166
+ <h3>Macarons</h3>
1167
+ <p>Rainbow French-style delicate cakes</p>
1168
+ </div>
1169
+ </div>
1170
+ <div class="gallery-item fade-in">
1171
+ <div class="gallery-overlay">
1172
+ <h3>Cupcakes</h3>
1173
+ <p>Assorted flavors with buttercream</p>
1174
+ </div>
1175
+ </div>
1176
+ <div class="gallery-item fade-in">
1177
+ <div class="gallery-overlay">
1178
+ <h3>Cup of Tea</h3>
1179
+ <p>Hot or iced with freshly baked scones</p>
1180
+ </div>
1181
+ </div>
1182
+ </div>
1183
+ </section>
1184
+
1185
+ <!-- About Section -->
1186
+ <section class="about" id="about">
1187
+ <div class="about-content">
1188
+ <div class="about-image">🏠</div>
1189
+ <div class="about-text fade-in">
1190
+ <h2>Our Story</h2>
1191
+ <p>What started as a dream in a small kitchen in 1998 has become a beloved tradition in our community. Our family recipe has been perfected over three generations, combining time-honored techniques with modern culinary creativity.</p>
1192
+ <p>Every batch of our cakes, cookies, and pastries is made by hand in our home kitchen, ensuring the freshest flavors and the highest quality. We believe that the best food is made with love, attention to detail, and a touch of magic.</p>
1193
+ <div class="about-features">
1194
+ <div>
1195
+ <span>✦</span>
1196
+ <p>Family-owned and operated since 1998</p>
1197
+ </div>
1198
+ <div>
1199
+ <span>✦</span>
1200
+ <p>100% organic and locally sourced ingredients</p>
1201
+ </div>
1202
+ <div>
1203
+ <span>✦</span>
1204
+ <p>Same-day delivery available</p>
1205
+ </div>
1206
+ <div>
1207
+ <span>✦</span>
1208
+ <p>Cheerful, personalized service</p>
1209
+ </div>
1210
+ </div>
1211
+ </div>
1212
+ </div>
1213
+ </section>
1214
+
1215
+ <!-- Services Section -->
1216
+ <section class="services" id="services">
1217
+ <div class="section-header fade-in">
1218
+ <h2>What We Offer</h2>
1219
+ <p>From special occasions to everyday cravings, we've got you covered</p>
1220
+ </div>
1221
+ <div class="services-grid">
1222
+ <div class="service-card fade-in">
1223
+ <div class="service-icon-large">🎂</div>
1224
+ <h3>Special Occasions</h3>
1225
+ <p>Wedding cakes, baby showers, and milestone celebrations. We'll create a custom masterpiece for your event.</p>
1226
+ <div class="service-features">
1227
+ <span>✓ Custom designs</span>
1228
+ <span>✓ Personalized messages</span>
1229
+ <span>✓ Fresh delivery</span>
1230
+ </div>
1231
+ </div>
1232
+ <div class="service-card fade-in">
1233
+ <div class="service-icon-large">☕</div>
1234
+ <h3>Breakfast & Brunch</h3>
1235
+ <p>Start your day right with our fresh pastries, muffins, and specialty coffee blends.</p>
1236
+ <div class="service-features">
1237
+ <span>✓ Fresh daily</span>
1238
+ <span>✓ Custom orders</span>
1239
+ <span>✓ Free wifi</span>
1240
+ </div>
1241
+ </div>
1242
+ <div class="service-card fade-in">
1243
+ <div class="service-icon-large">🎁</div>
1244
+ <h3>Gift Packaging</h3>
1245
+ <p>Elegant gift wrapping and custom packaging to make your gift stand out.</p>
1246
+ <div class="service-features">
1247
+ <span>✓ Luxury wrapping</span>
1248
+ <span>✓ Card design</span>
1249
+ <span>✓ Gift certificates</span>
1250
+ </div>
1251
+ </div>
1252
+ <div class="service-card fade-in">
1253
+ <div class="service-icon-large">📱</div>
1254
+ <h3>Mobile Orders</h3>
1255
+ <p>Order from anywhere in our service area with delivery or pickup available.</p>
1256
+ <div class="service-features">
1257
+ <span>✓ App ordering</span>
1258
+ <span>✓ Delivery tracking</span>
1259
+ <span>✓ Flexible timing</span>
1260
+ </div>
1261
+ </div>
1262
+ <div class="service-card fade-in">
1263
+ <div class="service-icon-large">👨‍👩‍👧‍👦</div>
1264
+ <h3>Corporate Catering</h3>
1265
+ <p>Events, meetings, and conferences with delicious homemade treats for your team.</p>
1266
+ <div class="service-features">
1267
+ <span>✓ Custom menus</span>
1268
+ <span>✓ On-site service</span>
1269
+ <span>✓ Bulk discounts</span>
1270
+ </div>
1271
+ </div>
1272
+ <div class="service-card fade-in">
1273
+ <div class="service-icon-large">🎨</div>
1274
+ <h3>Custom Designs</h3>
1275
+ <p>Create your own unique creations with our custom cake decorating service.</p>
1276
+ <div class="service-features">
1277
+ <span>✓ Custom patterns</span>
1278
+ <span>✓ Personal touches</span>
1279
+ <span>✓ Unique shapes</span>
1280
+ </div>
1281
+ </div>
1282
+ </div>
1283
+ </section>
1284
+
1285
+ <!-- Testimonials -->
1286
+ <section class="testimonials">
1287
+ <div class="section-header fade-in">
1288
+ <h2>What Our Customers Say</h2>
1289
+ <p>Don't just take our word for it - hear from our happy customers</p>
1290
+ </div>
1291
+ <div class="testimonials-container">
1292
+ <div class="testimonial-card fade-in">
1293
+ <div class="testimonial-stars">★★★★★</div>
1294
+ <p>"The wedding cake was absolutely stunning! It looked as beautiful as it tasted. Our guests couldn't stop talking about it."</p>
1295
+ <div class="testimonial-author">
1296
+ <div class="author-avatar">SM</div>
1297
+ <div class="author-info">
1298
+ <h4>Sarah M.</h4>
1299
+ <p>Wedding Guest</p>
1300
+ </div>
1301
+ </div>
1302
+ </div>
1303
+ <div class="testimonial-card fade-in">
1304
+ <div class="testimonial-stars">★★★★★</div>
1305
+ <p>"I've tried many bakeries, but Sweet Crumbs is by far the best. The quality of the ingredients shows in every bite!"</p>
1306
+ <div class="testimonial-author">
1307
+ <div class="author-avatar">JR</div>
1308
+ <div class="author-info">
1309
+ <h4>James R.</h4>
1310
+ <p>Regular Customer</p>
1311
+ </div>
1312
+ </div>
1313
+ </div>
1314
+ <div class="testimonial-card fade-in">
1315
+ <div class="testimonial-stars">★★★★★</div>
1316
+ <p>"The macarons were the most beautiful I've ever seen! They were so delicate and the flavors were perfect. Highly recommend!"</p>
1317
+ <div class="testimonial-author">
1318
+ <div class="author-avatar">EK</div>
1319
+ <div class="author-info">
1320
+ <h4>Emily K.</h4>
1321
+ <p>First-time Customer</p>
1322
+ </div>
1323
+ </div>
1324
+ </div>
1325
+ </div>
1326
+ </section>
1327
+
1328
+ <!-- CTA Section -->
1329
+ <section class="cta" id="cta">
1330
+ <div class="cta-content fade-in">
1331
+ <h2>Ready to Create Something Amazing?</h2>
1332
+ <p>Order your delicious creations today and let us make your day extra sweet!</p>
1333
+ <a href="#contact" class="btn">Place Your Order Now</a>
1334
+ </div>
1335
+ </section>
1336
+
1337
+ <!-- Contact Section -->
1338
+ <section class="contact" id="contact">
1339
+ <div class="contact-container">
1340
+ <div class="contact-info fade-in">
1341
+ <h2>Get In Touch</h2>
1342
+ <p>Have questions or just want to say hello? We'd love to hear from you.</p>
1343
+ <div class="contact-details">
1344
+ <div class="contact-item">
1345
+ <div class="contact-icon">📍</div>
1346
+ <div>
1347
+ <h4>Visit Us</h4>
1348
+ <p>123 Baker Street<br>Sweetville, SC 12345</p>
1349
+ </div>
1350
+ </div>
1351
+ <div class="contact-item">
1352
+ <div class="contact-icon">📞</div>
1353
+ <div>
1354
+ <h4>Call Us</h4>
1355
+ <p>(555) 123-4567<br>Mon-Fri: 7am - 8pm<br>Sat-Sun: 8am - 6pm</p>
1356
+ </div>
1357
+ </div>
1358
+ <div class="contact-item">
1359
+ <div class="contact-icon">✉️</div>
1360
+ <div>
1361
+ <h4>Email Us</h4>
1362
+ <p>hello@sweetcrumbs.com<br>orders@sweetcrumbs.com</p>
1363
+ </div>
1364
+ </div>
1365
+ <div class="contact-item">
1366
+ <div class="contact-icon">🌐</div>
1367
+ <div>
1368
+ <h4>Follow Us</h4>
1369
+ <p>Instagram: @sweetcrumbs<br>TikTok: @sweetcrumbs</p>
1370
+ </div>
1371
+ </div>
1372
+ </div>
1373
+ </div>
1374
+ <form class="contact-form fade-in">
1375
+ <div class="form-group">
1376
+ <label for="name">Your Name</label>
1377
+ <input type="text" id="name" name="name" required placeholder="John Doe">
1378
+ </div>
1379
+ <div class="form-group">
1380
+ <label for="email">Email Address</label>
1381
+ <input type="email" id="email" name="email" required placeholder="john@example.com">
1382
+ </div>
1383
+ <div class="form-group">
1384
+ <label for="phone">Phone Number (optional)</label>
1385
+ <input type="tel" id="phone" name="phone" placeholder="(555) 123-4567">
1386
+ </div>
1387
+ <div class="form-group">
1388
+ <label for="subject">Subject</label>
1389
+ <select id="subject" name="subject">
1390
+ <option value="general">General Inquiry</option>
1391
+ <option value="order">Order Question</option>
1392
+ <option value="event">Event Booking</option>
1393
+ <option value="catering">Catering</option>
1394
+ <option value="feedback">Feedback</option>
1395
+ </select>
1396
+ </div>
1397
+ <div class="form-group">
1398
+ <label for="message">Your Message</label>
1399
+ <textarea id="message" name="message" required placeholder="Tell us about your question or idea..."></textarea>
1400
+ </div>
1401
+ <button type="submit" class="submit-btn">Send Message</button>
1402
+ </form>
1403
+ </div>
1404
+ </section>
1405
+
1406
+ <!-- Footer -->
1407
+ <footer>
1408
+ <div class="footer-content">
1409
+ <div class="footer-section">
1410
+ <h3>Sweet Crumbs</h3>
1411
+ <p>Artisan bakeries since 1998. Making delicious creations with love and passion.</p>
1412
+ </div>
1413
+ <div class="footer-section">
1414
+ <h3>Quick Links</h3>
1415
+ <ul>
1416
+ <li><a href="#home">Home</a></li>
1417
+ <li><a href="#services">Services</a></li>
1418
+ <li><a href="#gallery">Gallery</a></li>
1419
+ <li><a href="#about">About Us</a></li>
1420
+ <li><a href="#contact">Contact</a></li>
1421
+ </ul>
1422
+ </div>
1423
+ <div class="footer-section">
1424
+ <h3>Services</h3>
1425
+ <ul>
1426
+ <li><a href="#">Wedding Cakes</a></li>
1427
+ <li><a href="#">Corporate Catering</a></li>
1428
+ <li><a href="#">Mobile Orders</a></li>
1429
+ <li><a href="#">Gift Packaging</a></li>
1430
+ <li><a href="#">Custom Designs</a></li>
1431
+ </ul>
1432
+ </div>
1433
+ <div class="footer-section">
1434
+ <h3>Legal</h3>
1435
+ <ul>
1436
+ <li><a href="#">Privacy Policy</a></li>
1437
+ <li><a href="#">Terms of Service</a></li>
1438
+ <li><a href="#">Shipping Policy</a></li>
1439
+ <li><a href="#">Returns Policy</a></li>
1440
+ <li><a href="#">Cookie Policy</a></li>
1441
+ </ul>
1442
+ </div>
1443
+ </div>
1444
+ <div class="footer-bottom">
1445
+ <p>© 2026 Sweet Crumbs. All rights reserved.</p>
1446
+ </div>
1447
+ </footer>
1448
+
1449
+ <script>
1450
+ // Smooth scroll for navigation links
1451
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1452
+ anchor.addEventListener('click', function (e) {
1453
+ e.preventDefault();
1454
+ const target = document.querySelector(this.getAttribute('href'));
1455
+ if (target) {
1456
+ target.scrollIntoView({ behavior: 'smooth', block: 'start' });
1457
+ }
1458
+ });
1459
+ });
1460
+
1461
+ // Mobile menu toggle
1462
+ const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
1463
+ const navLinks = document.querySelector('.nav-links');
1464
+
1465
+ if (mobileMenuBtn) {
1466
+ mobileMenuBtn.addEventListener('click', () => {
1467
+ navLinks.classList.toggle('d-none');
1468
+ mobileMenuBtn.classList.toggle('active');
1469
+ });
1470
+ }
1471
+
1472
+ // Animate on scroll
1473
+ const observerOptions = {
1474
+ threshold: 0.1,
1475
+ root: null,
1476
+ rootMargin: '-50px 0px -50px 0px'
1477
+ };
1478
+
1479
+ const observer = new IntersectionObserver((entries) => {
1480
+ entries.forEach(entry => {
1481
+ if (entry.isIntersecting) {
1482
+ entry.target.classList.add('visible');
1483
+ }
1484
+ });
1485
+ }, observerOptions);
1486
+
1487
+ // Observe all fade-in elements
1488
+ document.querySelectorAll('.fade-in').forEach(el => {
1489
+ observer.observe(el);
1490
+ });
1491
+
1492
+ // Navbar background change on scroll
1493
+ const nav = document.querySelector('nav');
1494
+ let lastScroll = 0;
1495
+
1496
+ window.addEventListener('scroll', () => {
1497
+ const scroll = window.pageYOffset;
1498
+ if (scroll > 100) {
1499
+ nav.style.boxShadow = '0 4px 30px rgba(0,0,0,0.15)';
1500
+ } else {
1501
+ nav.style.boxShadow = '0 4px 20px rgba(0,0,0,0.1)';
1502
+ lastScroll = scroll;
1503
+ }
1504
+ });
1505
+
1506
+ // Parallax effect for hero image
1507
+ const heroImage = document.querySelector('.hero-image');
1508
+ const heroContent = document.querySelector('.hero-content');
1509
+ const heroHeight = window.innerHeight;
1510
+
1511
+ window.addEventListener('scroll', () => {
1512
+ const scrollTop = window.pageYOffset;
1513
+ const scale = 1 + (scrollTop / 200);
1514
+ heroImage.style.transform = `scale(${scale}) rotate(-1deg)`;
1515
+ heroContent.style.transform = `translateY(${scrollTop * 0.5}px)`;
1516
+ });
1517
+
1518
+ // Navbar background change on scroll (for mobile)
1519
+ window.addEventListener('scroll', () => {
1520
+ const nav = document.querySelector('nav');
1521
+ if (window.innerWidth < 992) {
1522
+ if (window.pageYOffset > 100) {
1523
+ nav.style.boxShadow = '0 4px 30px rgba(0,0,0,0.15)';
1524
+ } else {
1525
+ nav.style.boxShadow = '0 4px 20px rgba(0,0,0,0.1)';
1526
+ }
1527
+ }
1528
+ });
1529
+ </script>
1530
+ </body>
1531
+ </html>
demo/prompt.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Make me a landing page for my bakery. we make cakes, cookies, brownies and everything else a normal bakery makes. I want it to look really nice