Hugging Face's logo

Spaces:
dantez1471
/
anycoder-e15ee627
Running

App Files Community
dantez1471 commited on
Commit
473980b
·
verified ·
1 Parent(s): 2b65d9c

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +655 -19
index.html CHANGED
@@ -1,19 +1,655 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>BrightFix Electronics | Premium Sales & Repair Services</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ fontFamily: {
17
+ sans: ['DM Sans', 'system-ui', 'sans-serif'],
18
+ display: ['Space Grotesk', 'sans-serif'],
19
+ },
20
+ colors: {
21
+ ink: { 50: '#f4f6f8', 100: '#e8ecf1', 200: '#d0dae5', 300: '#a8b8cb', 400: '#7a90a8', 500: '#5b738c', 600: '#465b72', 700: '#3a4b5f', 800: '#33404f', 900: '#1e2733', 950: '#0f141b' },
22
+ accent: { 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb' },
23
+ electric: { 400: '#22d3ee', 500: '#06b6d4' },
24
+ amber: { 400: '#fbbf24', 500: '#f59e0b' }
25
+ }
26
+ }
27
+ }
28
+ }
29
+ </script>
30
+ <style>
31
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
32
+
33
+ :root {
34
+ --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
35
+ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
36
+ --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
37
+ }
38
+
39
+ html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #33404f #0f141b; }
40
+ body {
41
+ font-family: 'DM Sans', system-ui, sans-serif;
42
+ background-color: #0f141b;
43
+ color: #e8ecf1;
44
+ overflow-x: hidden;
45
+ -webkit-font-smoothing: antialiased;
46
+ }
47
+
48
+ ::-webkit-scrollbar { width: 6px; }
49
+ ::-webkit-scrollbar-track { background: #0f141b; }
50
+ ::-webkit-scrollbar-thumb { background: #33404f; border-radius: 3px; }
51
+
52
+ /* ── Backdrop mesh ── */
53
+ #meshCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.35; }
54
+
55
+ /* ── Glass ── */
56
+ .glass {
57
+ background: rgba(15, 20, 27, 0.55);
58
+ backdrop-filter: blur(20px) saturate(1.4);
59
+ -webkit-backdrop-filter: blur(20px) saturate(1.4);
60
+ border: 1px solid rgba(255, 255, 255, 0.06);
61
+ }
62
+ .glass-strong {
63
+ background: rgba(15, 20, 27, 0.82);
64
+ backdrop-filter: blur(28px) saturate(1.6);
65
+ -webkit-backdrop-filter: blur(28px) saturate(1.6);
66
+ border: 1px solid rgba(255, 255, 255, 0.08);
67
+ }
68
+
69
+ /* ── Text shimmer ── */
70
+ .text-shimmer {
71
+ background: linear-gradient(90deg, #e8ecf1 0%, #60a5fa 50%, #e8ecf1 100%);
72
+ background-size: 200% auto;
73
+ -webkit-background-clip: text;
74
+ background-clip: text;
75
+ -webkit-text-fill-color: transparent;
76
+ animation: shimmer 4s linear infinite;
77
+ }
78
+ @keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
79
+
80
+ /* ── Animations ── */
81
+ @keyframes fadeUp {
82
+ from { opacity: 0; transform: translateY(40px); }
83
+ to { opacity: 1; transform: translateY(0); }
84
+ }
85
+ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
86
+ @keyframes scaleIn {
87
+ from { opacity: 0; transform: scale(0.92) translateY(20px); }
88
+ to { opacity: 1; transform: scale(1) translateY(0); }
89
+ }
90
+ @keyframes slideRight {
91
+ from { opacity: 0; transform: translateX(-30px); }
92
+ to { opacity: 1; transform: translateX(0); }
93
+ }
94
+ @keyframes slideLeft {
95
+ from { opacity: 0; transform: translateX(30px); }
96
+ to { opacity: 1; transform: translateX(0); }
97
+ }
98
+ @keyframes slideUp {
99
+ from { opacity: 0; transform: translateY(100%); }
100
+ to { opacity: 1; transform: translateY(0); }
101
+ }
102
+ @keyframes heroFloat {
103
+ 0%, 100% { transform: translateY(0) rotate(0deg); }
104
+ 50% { transform: translateY(-12px) rotate(0.5deg); }
105
+ }
106
+ @keyframes orbit {
107
+ from { transform: rotate(0deg) translateX(6px) rotate(0deg); }
108
+ to { transform: rotate(360deg) translateX(6px) rotate(-360deg); }
109
+ }
110
+ @keyframes drawLine {
111
+ from { width: 0; }
112
+ to { width: var(--line-width, 100%); }
113
+ }
114
+ @keyframes checkReveal {
115
+ from { clip-path: inset(0 100% 0 0); }
116
+ to { clip-path: inset(0 0% 0 0); }
117
+ }
118
+ @keyframes toastSlide {
119
+ from { opacity: 0; transform: translateX(50px) scale(0.9); }
120
+ to { opacity: 1; transform: translateX(0) scale(1); }
121
+ }
122
+ @keyframes toastSlideOut {
123
+ from { opacity: 1; transform: translateX(0) scale(1); }
124
+ to { opacity: 0; transform: translateX(50px) scale(0.9); }
125
+ }
126
+ @keyframes ripple {
127
+ 0% { transform: scale(0); opacity: 0.5; }
128
+ 100% { transform: scale(4); opacity: 0; }
129
+ }
130
+ @keyframes floatBadge {
131
+ 0%, 100% { transform: translateY(0) rotate(-2deg); }
132
+ 50% { transform: translateY(-6px) rotate(2deg); }
133
+ }
134
+ @keyframes spinSlow {
135
+ from { transform: rotate(0deg); }
136
+ to { transform: rotate(360deg); }
137
+ }
138
+ @keyframes breathe {
139
+ 0%, 100% { opacity: 0.3; }
140
+ 50% { opacity: 0.6; }
141
+ }
142
+
143
+ .anim-fadeUp { animation: fadeUp 0.8s var(--ease-expo) forwards; }
144
+ .anim-fadeIn { animation: fadeIn 0.6s var(--ease-smooth) forwards; }
145
+ .anim-scaleIn { animation: scaleIn 0.7s var(--ease-spring) forwards; }
146
+ .anim-slideR { animation: slideRight 0.7s var(--ease-expo) forwards; }
147
+ .anim-slideL { animation: slideLeft 0.7s var(--ease-expo) forwards; }
148
+ .anim-check { animation: checkReveal 0.5s var(--ease-expo) forwards; }
149
+
150
+ .stagger-1 { animation-delay: 0.1s; }
151
+ .stagger-2 { animation-delay: 0.2s; }
152
+ .stagger-3 { animation-delay: 0.3s; }
153
+ .stagger-4 { animation-delay: 0.4s; }
154
+ .stagger-5 { animation-delay: 0.5s; }
155
+ .stagger-6 { animation-delay: 0.6s; }
156
+ .stagger-7 { animation-delay: 0.7s; }
157
+ .stagger-8 { animation-delay: 0.8s; }
158
+ .stagger-9 { animation-delay: 0.9s; }
159
+ .stagger-10 { animation-delay: 1.0s; }
160
+
161
+ .pre-anim { opacity: 0; }
162
+
163
+ /* ── Scroll-reveal system ── */
164
+ .sr {
165
+ opacity: 0;
166
+ transform: translateY(48px);
167
+ transition: opacity 0.9s var(--ease-expo), transform 0.9s var(--ease-expo);
168
+ }
169
+ .sr.in {
170
+ opacity: 1;
171
+ transform: translateY(0);
172
+ }
173
+ .sr-left { transform: translateX(-40px); }
174
+ .sr-right { transform: translateX(40px); }
175
+ .sr-scale { transform: scale(0.92) translateY(30px); }
176
+
177
+ /* ── Interactives ── */
178
+ .btn-primary {
179
+ position: relative;
180
+ overflow: hidden;
181
+ background: linear-gradient(135deg, #2563eb, #1d4ed8);
182
+ color: #fff;
183
+ padding: 14px 32px;
184
+ border-radius: 12px;
185
+ font-weight: 600;
186
+ font-size: 0.875rem;
187
+ letter-spacing: 0.01em;
188
+ border: none;
189
+ cursor: pointer;
190
+ display: inline-flex;
191
+ align-items: center;
192
+ gap: 10px;
193
+ transition: transform 0.25s var(--ease-spring), box-shadow 0.3s;
194
+ box-shadow: 0 4px 20px rgba(37, 99, 235, 0.25), 0 0 0 0 rgba(37, 99, 235, 0.4);
195
+ }
196
+ .btn-primary:hover {
197
+ transform: translateY(-2px) scale(1.01);
198
+ box-shadow: 0 8px 32px rgba(37, 99, 235, 0.35), 0 0 0 4px rgba(37, 99, 235, 0.1);
199
+ }
200
+ .btn-primary:active { transform: translateY(0) scale(0.98); }
201
+ .btn-primary .btn-ripple {
202
+ position: absolute; inset: 0; pointer-events: none;
203
+ }
204
+ .btn-primary .btn-ripple::after {
205
+ content: '';
206
+ position: absolute; top: 50%; left: 50%; width: 12px; height: 12px;
207
+ background: rgba(255,255,255,0.3); border-radius: 50%;
208
+ transform: translate(-50%,-50%) scale(0);
209
+ transition: transform 0.6s;
210
+ }
211
+ .btn-primary:hover .btn-ripple::after { transform: translate(-50%,-50%) scale(8); opacity: 0; }
212
+
213
+ .btn-outline {
214
+ position: relative;
215
+ overflow: hidden;
216
+ background: transparent;
217
+ color: #d0dae5;
218
+ padding: 14px 32px;
219
+ border-radius: 12px;
220
+ font-weight: 600;
221
+ font-size: 0.875rem;
222
+ border: 1px solid rgba(168, 184, 203, 0.15);
223
+ cursor: pointer;
224
+ display: inline-flex;
225
+ align-items: center;
226
+ gap: 10px;
227
+ transition: all 0.35s var(--ease-smooth);
228
+ }
229
+ .btn-outline:hover {
230
+ border-color: rgba(96, 165, 250, 0.4);
231
+ color: #60a5fa;
232
+ background: rgba(96, 165, 250, 0.06);
233
+ transform: translateY(-2px);
234
+ }
235
+
236
+ .card-hover {
237
+ position: relative;
238
+ background: rgba(30, 39, 51, 0.5);
239
+ border: 1px solid rgba(255, 255, 255, 0.05);
240
+ border-radius: 20px;
241
+ overflow: hidden;
242
+ transition: transform 0.5s var(--ease-expo), box-shadow 0.5s var(--ease-expo);
243
+ }
244
+ .card-hover::before {
245
+ content: '';
246
+ position: absolute; inset: 0; border-radius: 20px; z-index: 1;
247
+ padding: 1.2px;
248
+ background: linear-gradient(135deg, rgba(96,165,250,0), rgba(96,165,250,0));
249
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
250
+ -webkit-mask-composite: xor;
251
+ mask-composite: exclude;
252
+ transition: background 0.5s;
253
+ }
254
+ .card-hover:hover {
255
+ transform: translateY(-8px) scale(1.01);
256
+ box-shadow: 0 24px 64px -12px rgba(0,0,0,0.4), 0 0 40px -10px rgba(37,99,235,0.08);
257
+ border-color: rgba(96, 165, 250, 0.15);
258
+ }
259
+ .card-hover:hover::before {
260
+ background: linear-gradient(135deg, rgba(96,165,250,0.35), rgba(96,165,250,0));
261
+ }
262
+ .card-hover .card-glow {
263
+ position: absolute; inset: -100px; border-radius: 50%;
264
+ background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(96,165,250,0.06), transparent 60%);
265
+ pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.4s;
266
+ }
267
+ .card-hover:hover .card-glow { opacity: 1; }
268
+
269
+ .nav-link {
270
+ position: relative;
271
+ font-weight: 500;
272
+ color: #7a90a8;
273
+ transition: color 0.3s;
274
+ }
275
+ .nav-link::after {
276
+ content: '';
277
+ position: absolute; bottom: -4px; left: 50%; width: 0; height: 2px;
278
+ background: #60a5fa; border-radius: 1px;
279
+ transition: width 0.35s var(--ease-expo), left 0.35s var(--ease-expo);
280
+ }
281
+ .nav-link:hover { color: #e8ecf1; }
282
+ .nav-link:hover::after { width: 100%; left: 0; }
283
+
284
+ /* ── Section divider ── */
285
+ .section-divider {
286
+ height: 1px;
287
+ background: linear-gradient(90deg, transparent 0%, rgba(168,184,203,0.08) 20%, rgba(168,184,203,0.15) 50%, rgba(168,184,203,0.08) 80%, transparent 100%);
288
+ }
289
+
290
+ /* ── Marquee ── */
291
+ .marquee-track { display: flex; animation: marquee 30s linear infinite; }
292
+ @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
293
+
294
+ /* ── Decorative glows ── */
295
+ .glow-orb {
296
+ position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
297
+ filter: blur(100px);
298
+ }
299
+
300
+ /* ── Footer signature ── */
301
+ .built-with-link {
302
+ display: inline-flex; align-items: center; gap: 6px;
303
+ color: #7a90a8; font-size: 0.75rem; font-weight: 500;
304
+ text-decoration: none; transition: color 0.3s, gap 0.3s;
305
+ padding: 6px 14px; border-radius: 20px;
306
+ background: rgba(255,255,255,0.03);
307
+ border: 1px solid rgba(255,255,255,0.05);
308
+ }
309
+ .built-with-link:hover { color: #60a5fa; gap: 10px; background: rgba(96,165,250,0.06); }
310
+
311
+ /* ── Hero float cluster ── */
312
+ .float-device {
313
+ animation: heroFloat 6s ease-in-out infinite;
314
+ }
315
+ .float-device:nth-child(2) { animation-delay: -2s; animation-duration: 7s; }
316
+ .float-device:nth-child(3) { animation-delay: -4s; animation-duration: 8s; }
317
+ .float-device:nth-child(4) { animation-delay: -1s; animation-duration: 5.5s; }
318
+
319
+ /* ── Orbit decoration ── */
320
+ .orbit-dot {
321
+ position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(96,165,250,0.5);
322
+ animation: orbit 8s linear infinite;
323
+ }
324
+
325
+ /* ── Step connector line ── */
326
+ .step-connector {
327
+ position: absolute; top: 32px; left: calc(50% + 28px); width: calc(100% - 56px); height: 2px;
328
+ background: linear-gradient(90deg, rgba(96,165,250,0.3), rgba(96,165,250,0.05));
329
+ }
330
+
331
+ /* ── Tooltip ── */
332
+ .tip {
333
+ position: relative;
334
+ }
335
+ .tip::after {
336
+ content: attr(data-tip);
337
+ position: absolute; bottom: calc(100% + 8px); left: 50%;
338
+ transform: translateX(-50%) translateY(4px);
339
+ background: #1e2733; color: #d0dae5;
340
+ padding: 6px 12px; border-radius: 8px;
341
+ font-size: 0.7rem; font-weight: 500;
342
+ border: 1px solid rgba(255,255,255,0.08);
343
+ white-space: nowrap; opacity: 0; pointer-events: none;
344
+ transition: opacity 0.3s, transform 0.3s var(--ease-expo);
345
+ }
346
+ .tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
347
+
348
+ /* ── Mobile nav ── */
349
+ .mobile-nav {
350
+ position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px);
351
+ z-index: 100; display: flex; gap: 4px; padding: 6px; border-radius: 24px;
352
+ background: rgba(15, 20, 27, 0.9); backdrop-filter: blur(20px);
353
+ border: 1px solid rgba(255,255,255,0.06);
354
+ box-shadow: 0 8px 32px rgba(0,0,0,0.4);
355
+ transition: transform 0.5s var(--ease-expo);
356
+ }
357
+ .mobile-nav.show { transform: translateX(-50%) translateY(0); }
358
+ .mobile-nav a {
359
+ padding: 10px 14px; border-radius: 16px; color: #7a90a8;
360
+ font-size: 0.75rem; font-weight: 600; text-decoration: none;
361
+ display: flex; flex-direction: column; align-items: center; gap: 2px;
362
+ transition: all 0.3s;
363
+ }
364
+ .mobile-nav a i { font-size: 1rem; }
365
+ .mobile-nav a.active { color: #60a5fa; background: rgba(96,165,250,0.1); }
366
+ .mobile-nav a:hover:not(.active) { color: #d0dae5; }
367
+
368
+ /* ── Cart badge ── */
369
+ .cart-badge {
370
+ animation: floatBadge 3s ease-in-out infinite;
371
+ }
372
+
373
+ /* ── Product image zoom ── */
374
+ .product-img-zoom {
375
+ overflow: hidden; border-radius: 16px;
376
+ }
377
+ .product-img-zoom img {
378
+ transition: transform 0.7s var(--ease-expo);
379
+ }
380
+ .card-hover:hover .product-img-zoom img {
381
+ transform: scale(1.08);
382
+ }
383
+
384
+ /* ── Loading skeleton ── */
385
+ .skeleton {
386
+ background: linear-gradient(90deg, #1e2733 25%, #2a3545 50%, #1e2733 75%);
387
+ background-size: 200% 100%;
388
+ animation: skeleton 1.5s infinite;
389
+ border-radius: 8px;
390
+ }
391
+ @keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
392
+
393
+ /* ── Filter pills ── */
394
+ .filter-pill {
395
+ padding: 8px 20px; border-radius: 10px; font-size: 0.8125rem; font-weight: 500;
396
+ background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
397
+ color: #7a90a8; cursor: pointer; transition: all 0.3s var(--ease-smooth);
398
+ white-space: nowrap;
399
+ }
400
+ .filter-pill:hover {
401
+ background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.2); color: #a8b8cb;
402
+ }
403
+ .filter-pill.active {
404
+ background: linear-gradient(135deg, #2563eb, #1d4ed8);
405
+ color: #fff; border-color: transparent;
406
+ box-shadow: 0 4px 16px rgba(37,99,235,0.25);
407
+ }
408
+
409
+ /* ── Testimonial card ── */
410
+ .testimonial-card {
411
+ transition: transform 0.5s var(--ease-expo);
412
+ }
413
+ .testimonial-card:hover {
414
+ transform: translateY(-6px) rotate(0.5deg);
415
+ }
416
+
417
+ /* ── Blog card image ── */
418
+ .blog-img-wrap {
419
+ overflow: hidden; border-radius: 16px 16px 0 0;
420
+ }
421
+ .blog-img-wrap img {
422
+ transition: transform 0.8s var(--ease-expo);
423
+ }
424
+ .blog-card:hover .blog-img-wrap img {
425
+ transform: scale(1.06);
426
+ }
427
+
428
+ /* ── Social icon ── */
429
+ .social-icon {
430
+ width: 40px; height: 40px; border-radius: 12px;
431
+ display: flex; align-items: center; justify-content: center;
432
+ background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
433
+ color: #7a90a8; transition: all 0.3s var(--ease-spring);
434
+ }
435
+ .social-icon:hover {
436
+ background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.3);
437
+ color: #60a5fa; transform: translateY(-3px);
438
+ }
439
+
440
+ /* ── Scroll progress ── */
441
+ #scrollProgress {
442
+ position: fixed; top: 0; left: 0; height: 2px; z-index: 200;
443
+ background: linear-gradient(90deg, #3b82f6, #22d3ee);
444
+ transition: width 0.1s linear; width: 0%;
445
+ }
446
+
447
+ /* ── Quote calculation glow ── */
448
+ .quote-result-glow {
449
+ background: linear-gradient(135deg, rgba(96,165,250,0.08), rgba(34,211,238,0.04));
450
+ border: 1px solid rgba(96,165,250,0.12);
451
+ }
452
+
453
+ /* ── Particle burst on CTA ── */
454
+ .particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; pointer-events: none; }
455
+
456
+ @media (max-width: 768px) {
457
+ .mobile-nav { display: flex; }
458
+ }
459
+ @media (min-width: 769px) {
460
+ .mobile-nav { display: none !important; }
461
+ }
462
+ </style>
463
+ </head>
464
+ <body>
465
+
466
+ <!-- Scroll Progress -->
467
+ <div id="scrollProgress"></div>
468
+
469
+ <!-- Mesh Canvas -->
470
+ <canvas id="meshCanvas"></canvas>
471
+
472
+ <!-- ═══════════════════════════════════════
473
+ HEADER
474
+ ═══════════════════════════════════════ -->
475
+ <header class="fixed top-0 left-0 right-0 z-50 glass" id="siteHeader">
476
+ <div class="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8">
477
+ <div class="flex items-center justify-between h-16">
478
+ <!-- Logo -->
479
+ <a href="#home" class="flex items-center gap-3 group">
480
+ <div class="relative w-10 h-10 rounded-xl flex items-center justify-center"
481
+ style="background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 4px 16px rgba(37,99,235,0.3);">
482
+ <i class="fa-solid fa-bolt text-white text-sm relative z-10"></i>
483
+ <div class="absolute inset-0 rounded-xl" style="background: linear-gradient(135deg, #60a5fa, #22d3ee); opacity: 0; transition: opacity 0.4s;" id="logoGlow"></div>
484
+ </div>
485
+ <span class="font-display font-bold text-lg tracking-tight text-white">Bright<span class="text-blue-400">Fix</span></span>
486
+ </a>
487
+
488
+ <!-- Desktop Nav -->
489
+ <nav class="hidden md:flex items-center gap-1">
490
+ <a href="#home" class="nav-link px-4 py-2 text-sm rounded-lg">Home</a>
491
+ <a href="#products" class="nav-link px-4 py-2 text-sm rounded-lg">Products</a>
492
+ <a href="#repair" class="nav-link px-4 py-2 text-sm rounded-lg">Repair</a>
493
+ <a href="#about" class="nav-link px-4 py-2 text-sm rounded-lg">About</a>
494
+ <a href="#blog" class="nav-link px-4 py-2 text-sm rounded-lg">Blog</a>
495
+ <a href="#contact" class="nav-link px-4 py-2 text-sm rounded-lg">Contact</a>
496
+ </nav>
497
+
498
+ <!-- Actions -->
499
+ <div class="flex items-center gap-2">
500
+ <button onclick="toggleCart()" class="relative tip p-2.5 rounded-xl text-ink-400 hover:text-white hover:bg-white/5 transition-all" data-tip="Cart">
501
+ <i class="fa-solid fa-cart-shopping text-base"></i>
502
+ <span id="cartBadge" class="cart-badge absolute -top-1 -right-1 w-5 h-5 bg-gradient-to-br from-amber-400 to-amber-500 text-ink-950 text-[10px] font-bold rounded-full flex items-center justify-center shadow-lg">0</span>
503
+ </button>
504
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with-link hidden sm:inline-flex ml-2">
505
+ <i class="fa-solid fa-code text-xs"></i>
506
+ <span>Built with anycoder</span>
507
+ <i class="fa-solid fa-arrow-up-right-from-square text-[10px]"></i>
508
+ </a>
509
+ <button class="md:hidden p-2.5 rounded-xl text-ink-400 hover:text-white hover:bg-white/5 transition-all" onclick="toggleMobileMenu()" id="menuBtn">
510
+ <i class="fa-solid fa-bars text-lg"></i>
511
+ </button>
512
+ </div>
513
+ </div>
514
+ </div>
515
+
516
+ <!-- Mobile menu -->
517
+ <div id="mobileMenu" class="md:hidden hidden glass-strong border-t border-white/5">
518
+ <div class="px-5 py-4 space-y-1">
519
+ <a href="#home" onclick="closeMobileMenu()" class="block px-4 py-3 text-sm text-ink-300 hover:text-white hover:bg-white/5 rounded-xl transition">Home</a>
520
+ <a href="#products" onclick="closeMobileMenu()" class="block px-4 py-3 text-sm text-ink-300 hover:text-white hover:bg-white/5 rounded-xl transition">Products</a>
521
+ <a href="#repair" onclick="closeMobileMenu()" class="block px-4 py-3 text-sm text-ink-300 hover:text-white hover:bg-white/5 rounded-xl transition">Repair</a>
522
+ <a href="#about" onclick="closeMobileMenu()" class="block px-4 py-3 text-sm text-ink-300 hover:text-white hover:bg-white/5 rounded-xl transition">About</a>
523
+ <a href="#blog" onclick="closeMobileMenu()" class="block px-4 py-3 text-sm text-ink-300 hover:text-white hover:bg-white/5 rounded-xl transition">Blog</a>
524
+ <a href="#contact" onclick="closeMobileMenu()" class="block px-4 py-3 text-sm text-ink-300 hover:text-white hover:bg-white/5 rounded-xl transition">Contact</a>
525
+ <div class="pt-3 border-t border-white/5">
526
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with-link inline-flex">
527
+ <i class="fa-solid fa-code text-xs"></i>
528
+ <span>Built with anycoder</span>
529
+ </a>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </header>
534
+
535
+ <!-- ═══════════════════════════════════════
536
+ HERO
537
+ ═══════════════════════════════════════ -->
538
+ <section id="home" class="relative min-h-screen flex items-center justify-center pt-16 overflow-hidden">
539
+ <div class="glow-orb" style="width:600px;height:600px;background:rgba(37,99,235,0.06);top:-200px;right:-100px;"></div>
540
+ <div class="glow-orb" style="width:400px;height:400px;background:rgba(34,211,238,0.04);bottom:-100px;left:-100px;"></div>
541
+
542
+ <div class="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 relative z-10 w-full">
543
+ <div class="grid lg:grid-cols-2 gap-12 lg:gap-8 items-center min-h-[calc(100vh-64px)] py-16">
544
+ <!-- Left -->
545
+ <div class="text-center lg:text-left">
546
+ <div class="pre-anim anim-fadeUp">
547
+ <span class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-xs font-semibold tracking-wide uppercase"
548
+ style="background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.15); color: #60a5fa;">
549
+ <span class="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse"></span>
550
+ Trusted by 12,500+ customers
551
+ </span>
552
+ </div>
553
+
554
+ <h1 class="mt-6 pre-anim anim-fadeUp stagger-2 font-display font-bold text-4xl sm:text-5xl lg:text-[3.6rem] leading-[1.1] tracking-tight text-white">
555
+ Premium Electronics,<br>
556
+ <span class="text-shimmer">Expert Repairs</span>
557
+ </h1>
558
+
559
+ <p class="mt-6 pre-anim anim-fadeUp stagger-3 text-base sm:text-lg text-ink-400 max-w-xl mx-auto lg:mx-0 leading-relaxed">
560
+ Discover top-tier gadgets and professional repair services under one roof.
561
+ From the latest smartphones to custom PC builds, BrightFix has you covered.
562
+ </p>
563
+
564
+ <div class="mt-8 flex flex-wrap gap-4 justify-center lg:justify-start pre-anim anim-fadeUp stagger-4">
565
+ <a href="#products" class="btn-primary group">
566
+ <span class="btn-ripple"></span>
567
+ <i class="fa-solid fa-bag-shopping"></i>
568
+ Shop Now
569
+ <i class="fa-solid fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i>
570
+ </a>
571
+ <a href="#repair" class="btn-outline group">
572
+ <i class="fa-solid fa-screwdriver-wrench"></i>
573
+ Repair Services
574
+ <i class="fa-solid fa-arrow-right text-xs transition-transform group-hover:translate-x-1 opacity-0 group-hover:opacity-100"></i>
575
+ </a>
576
+ </div>
577
+
578
+ <div class="mt-10 flex items-center gap-6 justify-center lg:justify-start pre-anim anim-fadeUp stagger-5">
579
+ <div class="flex -space-x-3">
580
+ <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop&crop=face" alt="" class="w-10 h-10 rounded-full border-2 border-ink-950 object-cover">
581
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face" alt="" class="w-10 h-10 rounded-full border-2 border-ink-950 object-cover">
582
+ <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=face" alt="" class="w-10 h-10 rounded-full border-2 border-ink-950 object-cover">
583
+ <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=face" alt="" class="w-10 h-10 rounded-full border-2 border-ink-950 object-cover">
584
+ </div>
585
+ <div>
586
+ <div class="flex items-center gap-1 mb-0.5">
587
+ <i class="fa-solid fa-star text-amber-400 text-xs"></i>
588
+ <i class="fa-solid fa-star text-amber-400 text-xs"></i>
589
+ <i class="fa-solid fa-star text-amber-400 text-xs"></i>
590
+ <i class="fa-solid fa-star text-amber-400 text-xs"></i>
591
+ <i class="fa-solid fa-star-half-stroke text-amber-400 text-xs"></i>
592
+ <span class="text-xs font-semibold text-white ml-1">4.9</span>
593
+ </div>
594
+ <p class="text-xs text-ink-400">Based on 2,847 reviews</p>
595
+ </div>
596
+ </div>
597
+ </div>
598
+
599
+ <!-- Right: Floating device cluster -->
600
+ <div class="relative hidden lg:block h-[500px] pre-anim anim-fadeUp stagger-6">
601
+ <div class="absolute top-8 left-12 float-device">
602
+ <div class="relative group">
603
+ <div class="w-56 h-72 rounded-3xl overflow-hidden border border-white/10 shadow-2xl" style="box-shadow: 0 25px 80px rgba(37,99,235,0.15);">
604
+ <img src="https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?w=400&h=500&fit=crop" alt="Laptop" class="w-full h-full object-cover">
605
+ </div>
606
+ <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full text-xs font-semibold text-white" style="background: linear-gradient(135deg,#2563eb,#1d4ed8); box-shadow: 0 4px 16px rgba(37,99,235,0.3);">Laptops</div>
607
+ </div>
608
+ </div>
609
+ <div class="absolute top-0 right-8 float-device">
610
+ <div class="relative group">
611
+ <div class="w-40 h-52 rounded-3xl overflow-hidden border border-white/10 shadow-2xl" style="box-shadow: 0 25px 80px rgba(34,211,238,0.1);">
612
+ <img src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=300&h=400&fit=crop" alt="Phone" class="w-full h-full object-cover">
613
+ </div>
614
+ <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full text-xs font-semibold text-white bg-gradient-to-r from-cyan-500 to-blue-500" style="box-shadow: 0 4px 16px rgba(34,211,238,0.3);">Smartphones</div>
615
+ </div>
616
+ </div>
617
+ <div class="absolute bottom-4 left-24 float-device">
618
+ <div class="relative group">
619
+ <div class="w-44 h-56 rounded-3xl overflow-hidden border border-white/10 shadow-2xl" style="box-shadow: 0 25px 80px rgba(245,158,11,0.1);">
620
+ <img src="https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?w=340&h=430&fit=crop" alt="iPad" class="w-full h-full object-cover">
621
+ </div>
622
+ <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full text-xs font-semibold text-ink-950 bg-gradient-to-r from-amber-400 to-amber-500" style="box-shadow: 0 4px 16px rgba(245,158,11,0.3);">Tablets</div>
623
+ </div>
624
+ </div>
625
+ <div class="absolute bottom-20 right-20 float-device">
626
+ <div class="relative group">
627
+ <div class="w-48 h-36 rounded-2xl overflow-hidden border border-white/10 shadow-2xl" style="box-shadow: 0 25px 80px rgba(139,92,246,0.1);">
628
+ <img src="https://images.unsplash.com/photo-1527814050087-3793815479db?w=380&h=280&fit=crop" alt="Headphones" class="w-full h-full object-cover">
629
+ </div>
630
+ <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full text-xs font-semibold text-white bg-gradient-to-r from-violet-500 to-purple-600" style="box-shadow: 0 4px 16px rgba(139,92,246,0.3);">Audio</div>
631
+ </div>
632
+ </div>
633
+ <!-- Decorative orbits -->
634
+ <div class="orbit-dot" style="top: 50%; left: 50%; animation-duration: 12s; width: 8px; height: 8px; background: rgba(96,165,250,0.3);"></div>
635
+ <div class="orbit-dot" style="top: 50%; left: 50%; animation-duration: 15s; animation-direction: reverse; width: 5px; height: 5px; background: rgba(34,211,238,0.25);"></div>
636
+ </div>
637
+ </div>
638
+ </div>
639
+
640
+ <!-- Scroll indicator -->
641
+ <div class="absolute bottom-8 left-1/2 -translate-x-1/2 hidden md:flex flex-col items-center gap-2">
642
+ <span class="text-[10px] font-semibold tracking-widest uppercase text-ink-500">Scroll</span>
643
+ <div class="w-px h-8 bg-gradient-to-b from-ink-500 to-transparent"></div>
644
+ </div>
645
+ </section>
646
+
647
+ <!-- ═══════════════════════════════════════
648
+ MARQUEE TRUST BAR
649
+ ═══════════════════════════════════════ -->
650
+ <div class="relative py-5 overflow-hidden border-y border-white/[0.04]">
651
+ <div class="marquee-track">
652
+ <div class="flex items-center gap-16 px-8 shrink-0">
653
+ <span class="text-ink-500 font-display font-semibold text-sm tracking-wide flex items-center gap-2"><i class="fa-brands fa-apple text-lg"></i>Apple Authorized</span>
654
+ <span class="text-ink-500 font-display font-semibold text-sm tracking-wide flex items-center gap-2"><i class="fa-brands fa-windows text-lg"></i>Microsoft Partner</span>
655
+ <span class="text-ink-500 font-display font-semibold text-sm tracking