Cairo303 commited on
Commit
fca6ea6
·
verified ·
1 Parent(s): 50cad9c

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +831 -19
index.html CHANGED
@@ -1,19 +1,831 @@
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>New Mexico Fashion Council | Empowering New Mexico's Fashion, Arts & Creative Community</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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet">
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+ <script src="https://unpkg.com/lucide@latest"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ fontFamily: {
17
+ display: ['Playfair Display', 'serif'],
18
+ serif: ['Cormorant Garamond', 'serif'],
19
+ sans: ['Inter', 'sans-serif'],
20
+ },
21
+ colors: {
22
+ adobe: {
23
+ 50: '#fdf8f5',
24
+ 100: '#f9ece2',
25
+ 200: '#f2d5c1',
26
+ 300: '#e8b896',
27
+ 400: '#d99668',
28
+ 500: '#c97a47',
29
+ 600: '#b5603a',
30
+ 700: '#964a31',
31
+ 800: '#7d3e2d',
32
+ 900: '#663527',
33
+ },
34
+ turquoise: {
35
+ 50: '#f0fdfa',
36
+ 100: '#ccfbf1',
37
+ 200: '#99f6e4',
38
+ 300: '#5eead4',
39
+ 400: '#2dd4bf',
40
+ 500: '#14b8a6',
41
+ 600: '#0d9488',
42
+ 700: '#0f766e',
43
+ 800: '#115e59',
44
+ 900: '#134e4a',
45
+ },
46
+ sand: {
47
+ 50: '#fdfcf8',
48
+ 100: '#faf6ed',
49
+ 200: '#f3ebd5',
50
+ 300: '#e9dcb4',
51
+ 400: '#dcc68c',
52
+ 500: '#d0b06b',
53
+ 600: '#c29852',
54
+ 700: '#a27a3f',
55
+ 800: '#856336',
56
+ 900: '#6d522f',
57
+ },
58
+ }
59
+ }
60
+ }
61
+ }
62
+ </script>
63
+ <style>
64
+ *, *::before, *::after {
65
+ margin: 0;
66
+ padding: 0;
67
+ box-sizing: border-box;
68
+ }
69
+
70
+ html {
71
+ scroll-behavior: smooth;
72
+ scroll-padding-top: 80px;
73
+ }
74
+
75
+ body {
76
+ font-family: 'Inter', sans-serif;
77
+ background-color: #fdfcf8;
78
+ color: #2d2a26;
79
+ overflow-x: hidden;
80
+ }
81
+
82
+ /* Custom scrollbar */
83
+ ::-webkit-scrollbar {
84
+ width: 8px;
85
+ }
86
+ ::-webkit-scrollbar-track {
87
+ background: #faf6ed;
88
+ }
89
+ ::-webkit-scrollbar-thumb {
90
+ background: #c97a47;
91
+ border-radius: 4px;
92
+ }
93
+ ::-webkit-scrollbar-thumb:hover {
94
+ background: #b5603a;
95
+ }
96
+
97
+ /* Animations */
98
+ @keyframes fadeInUp {
99
+ from {
100
+ opacity: 0;
101
+ transform: translateY(40px);
102
+ }
103
+ to {
104
+ opacity: 1;
105
+ transform: translateY(0);
106
+ }
107
+ }
108
+
109
+ @keyframes fadeIn {
110
+ from { opacity: 0; }
111
+ to { opacity: 1; }
112
+ }
113
+
114
+ @keyframes slideInLeft {
115
+ from {
116
+ opacity: 0;
117
+ transform: translateX(-60px);
118
+ }
119
+ to {
120
+ opacity: 1;
121
+ transform: translateX(0);
122
+ }
123
+ }
124
+
125
+ @keyframes slideInRight {
126
+ from {
127
+ opacity: 0;
128
+ transform: translateX(60px);
129
+ }
130
+ to {
131
+ opacity: 1;
132
+ transform: translateX(0);
133
+ }
134
+ }
135
+
136
+ @keyframes scaleIn {
137
+ from {
138
+ opacity: 0;
139
+ transform: scale(0.9);
140
+ }
141
+ to {
142
+ opacity: 1;
143
+ transform: scale(1);
144
+ }
145
+ }
146
+
147
+ @keyframes float {
148
+ 0%, 100% { transform: translateY(0); }
149
+ 50% { transform: translateY(-8px); }
150
+ }
151
+
152
+ @keyframes shimmer {
153
+ 0% { background-position: -200% 0; }
154
+ 100% { background-position: 200% 0; }
155
+ }
156
+
157
+ @keyframes pulse-soft {
158
+ 0%, 100% { opacity: 1; }
159
+ 50% { opacity: 0.7; }
160
+ }
161
+
162
+ @keyframes drawLine {
163
+ from { width: 0; }
164
+ to { width: 100%; }
165
+ }
166
+
167
+ .animate-fade-in-up {
168
+ animation: fadeInUp 0.8s ease-out forwards;
169
+ opacity: 0;
170
+ }
171
+
172
+ .animate-fade-in {
173
+ animation: fadeIn 0.6s ease-out forwards;
174
+ opacity: 0;
175
+ }
176
+
177
+ .animate-slide-left {
178
+ animation: slideInLeft 0.8s ease-out forwards;
179
+ opacity: 0;
180
+ }
181
+
182
+ .animate-slide-right {
183
+ animation: slideInRight 0.8s ease-out forwards;
184
+ opacity: 0;
185
+ }
186
+
187
+ .animate-scale-in {
188
+ animation: scaleIn 0.6s ease-out forwards;
189
+ opacity: 0;
190
+ }
191
+
192
+ .delay-100 { animation-delay: 0.1s; }
193
+ .delay-200 { animation-delay: 0.2s; }
194
+ .delay-300 { animation-delay: 0.3s; }
195
+ .delay-400 { animation-delay: 0.4s; }
196
+ .delay-500 { animation-delay: 0.5s; }
197
+ .delay-600 { animation-delay: 0.6s; }
198
+ .delay-700 { animation-delay: 0.7s; }
199
+ .delay-800 { animation-delay: 0.8s; }
200
+
201
+ /* Hero canvas */
202
+ #heroCanvas {
203
+ position: absolute;
204
+ top: 0;
205
+ left: 0;
206
+ width: 100%;
207
+ height: 100%;
208
+ z-index: 1;
209
+ pointer-events: none;
210
+ }
211
+
212
+ /* Geometric pattern overlay */
213
+ .geo-pattern {
214
+ position: absolute;
215
+ inset: 0;
216
+ opacity: 0.04;
217
+ background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
218
+ z-index: 2;
219
+ }
220
+
221
+ /* Section reveal on scroll */
222
+ .reveal-section {
223
+ opacity: 0;
224
+ transform: translateY(50px);
225
+ transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
226
+ }
227
+ .reveal-section.visible {
228
+ opacity: 1;
229
+ transform: translateY(0);
230
+ }
231
+
232
+ /* Card hover effects */
233
+ .card-lift {
234
+ transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
235
+ }
236
+ .card-lift:hover {
237
+ transform: translateY(-8px);
238
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
239
+ }
240
+
241
+ /* Image zoom on hover */
242
+ .img-zoom {
243
+ overflow: hidden;
244
+ }
245
+ .img-zoom img {
246
+ transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
247
+ }
248
+ .img-zoom:hover img {
249
+ transform: scale(1.08);
250
+ }
251
+
252
+ /* Button styles */
253
+ .btn-primary {
254
+ position: relative;
255
+ overflow: hidden;
256
+ transition: all 0.3s ease;
257
+ }
258
+ .btn-primary::before {
259
+ content: '';
260
+ position: absolute;
261
+ top: 0;
262
+ left: -100%;
263
+ width: 100%;
264
+ height: 100%;
265
+ background: rgba(255,255,255,0.15);
266
+ transition: left 0.4s ease;
267
+ }
268
+ .btn-primary:hover::before {
269
+ left: 100%;
270
+ }
271
+
272
+ /* Navigation */
273
+ .nav-glass {
274
+ background: rgba(253, 252, 248, 0.92);
275
+ backdrop-filter: blur(20px);
276
+ -webkit-backdrop-filter: blur(20px);
277
+ }
278
+
279
+ /* Decorative line */
280
+ .deco-line {
281
+ height: 1px;
282
+ background: linear-gradient(90deg, transparent, #c97a47, transparent);
283
+ }
284
+
285
+ /* Quote styling */
286
+ .quote-mark {
287
+ font-family: 'Playfair Display', serif;
288
+ font-size: 6rem;
289
+ line-height: 0.5;
290
+ color: #c97a47;
291
+ opacity: 0.2;
292
+ }
293
+
294
+ /* Team card */
295
+ .team-card {
296
+ position: relative;
297
+ }
298
+ .team-card::after {
299
+ content: '';
300
+ position: absolute;
301
+ bottom: 0;
302
+ left: 50%;
303
+ transform: translateX(-50%);
304
+ width: 0;
305
+ height: 3px;
306
+ background: #c97a47;
307
+ transition: width 0.4s ease;
308
+ }
309
+ .team-card:hover::after {
310
+ width: 60%;
311
+ }
312
+
313
+ /* Event card date badge */
314
+ .date-badge {
315
+ position: relative;
316
+ }
317
+ .date-badge::before {
318
+ content: '';
319
+ position: absolute;
320
+ top: -4px;
321
+ left: -4px;
322
+ right: -4px;
323
+ bottom: -4px;
324
+ border: 1px solid #c97a47;
325
+ opacity: 0.3;
326
+ }
327
+
328
+ /* Sponsor tier glow */
329
+ .tier-card {
330
+ position: relative;
331
+ overflow: hidden;
332
+ }
333
+ .tier-card::before {
334
+ content: '';
335
+ position: absolute;
336
+ top: 0;
337
+ left: 0;
338
+ right: 0;
339
+ height: 4px;
340
+ background: linear-gradient(90deg, #c97a47, #d0b06b, #c97a47);
341
+ background-size: 200% 100%;
342
+ animation: shimmer 3s linear infinite;
343
+ }
344
+
345
+ /* Donation amount selected */
346
+ .donation-amount {
347
+ transition: all 0.3s ease;
348
+ cursor: pointer;
349
+ }
350
+ .donation-amount:hover, .donation-amount.selected {
351
+ background: #c97a47;
352
+ color: white;
353
+ border-color: #c97a47;
354
+ }
355
+
356
+ /* Input focus */
357
+ .input-focus {
358
+ transition: all 0.3s ease;
359
+ }
360
+ .input-focus:focus {
361
+ border-color: #c97a47;
362
+ box-shadow: 0 0 0 3px rgba(201, 122, 71, 0.15);
363
+ }
364
+
365
+ /* Mobile menu */
366
+ .mobile-menu {
367
+ transform: translateX(100%);
368
+ transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
369
+ }
370
+ .mobile-menu.open {
371
+ transform: translateX(0);
372
+ }
373
+
374
+ /* Parallax hero text */
375
+ .parallax-text {
376
+ will-change: transform;
377
+ }
378
+
379
+ /* Loading shimmer for images */
380
+ .shimmer-bg {
381
+ background: linear-gradient(90deg, #f3ebd5 25%, #faf6ed 50%, #f3ebd5 75%);
382
+ background-size: 200% 100%;
383
+ animation: shimmer 1.5s infinite;
384
+ }
385
+
386
+ /* Custom select styling */
387
+ select {
388
+ appearance: none;
389
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23663527' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
390
+ background-repeat: no-repeat;
391
+ background-position: right 12px center;
392
+ }
393
+
394
+ /* Modal */
395
+ .modal-overlay {
396
+ opacity: 0;
397
+ visibility: hidden;
398
+ transition: all 0.3s ease;
399
+ }
400
+ .modal-overlay.active {
401
+ opacity: 1;
402
+ visibility: visible;
403
+ }
404
+ .modal-content {
405
+ transform: scale(0.95) translateY(20px);
406
+ transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
407
+ }
408
+ .modal-overlay.active .modal-content {
409
+ transform: scale(1) translateY(0);
410
+ }
411
+
412
+ /* Gallery masonry */
413
+ .gallery-item {
414
+ break-inside: avoid;
415
+ margin-bottom: 1rem;
416
+ }
417
+
418
+ /* Smooth section transitions */
419
+ section {
420
+ position: relative;
421
+ }
422
+
423
+ /* Text gradient */
424
+ .text-gradient {
425
+ background: linear-gradient(135deg, #c97a47, #d0b06b);
426
+ -webkit-background-clip: text;
427
+ -webkit-text-fill-color: transparent;
428
+ background-clip: text;
429
+ }
430
+
431
+ /* Badge style */
432
+ .badge-pill {
433
+ display: inline-flex;
434
+ align-items: center;
435
+ gap: 0.5rem;
436
+ padding: 0.375rem 1rem;
437
+ border-radius: 9999px;
438
+ font-size: 0.75rem;
439
+ font-weight: 600;
440
+ letter-spacing: 0.05em;
441
+ text-transform: uppercase;
442
+ }
443
+
444
+ /* Horizontal scroll for mobile */
445
+ .scroll-snap-x {
446
+ scroll-snap-type: x mandatory;
447
+ -webkit-overflow-scrolling: touch;
448
+ }
449
+ .scroll-snap-x > * {
450
+ scroll-snap-align: start;
451
+ }
452
+
453
+ /* Counter animation */
454
+ @keyframes countUp {
455
+ from { opacity: 0; transform: translateY(20px); }
456
+ to { opacity: 1; transform: translateY(0); }
457
+ }
458
+
459
+ /* Sticky sidebar nav for desktop */
460
+ @media (min-width: 1024px) {
461
+ .sticky-nav-desktop {
462
+ position: sticky;
463
+ top: 100px;
464
+ }
465
+ }
466
+
467
+ /* Print styles */
468
+ @media print {
469
+ .no-print { display: none !important; }
470
+ body { background: white; }
471
+ }
472
+ </style>
473
+ </head>
474
+ <body>
475
+
476
+ <!-- Navigation -->
477
+ <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500">
478
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
479
+ <div class="flex items-center justify-between h-20">
480
+ <!-- Logo -->
481
+ <a href="#home" class="flex items-center gap-3 group">
482
+ <div class="w-10 h-10 rounded-full bg-adobe-600 flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
483
+ <span class="text-white font-display font-bold text-sm">NM</span>
484
+ </div>
485
+ <div class="hidden sm:block">
486
+ <span class="font-display font-semibold text-lg text-gray-900 tracking-tight">New Mexico</span>
487
+ <span class="block -mt-1 text-xs text-adobe-600 font-medium tracking-widest uppercase">Fashion Council</span>
488
+ </div>
489
+ </a>
490
+
491
+ <!-- Desktop Navigation -->
492
+ <div class="hidden lg:flex items-center gap-1">
493
+ <a href="#home" class="nav-link px-4 py-2 text-sm font-medium text-gray-700 hover:text-adobe-600 transition-colors rounded-full hover:bg-adobe-50">Home</a>
494
+ <a href="#about" class="nav-link px-4 py-2 text-sm font-medium text-gray-700 hover:text-adobe-600 transition-colors rounded-full hover:bg-adobe-50">About</a>
495
+ <a href="#team" class="nav-link px-4 py-2 text-sm font-medium text-gray-700 hover:text-adobe-600 transition-colors rounded-full hover:bg-adobe-50">Team</a>
496
+ <a href="#membership" class="nav-link px-4 py-2 text-sm font-medium text-gray-700 hover:text-adobe-600 transition-colors rounded-full hover:bg-adobe-50">Membership</a>
497
+ <a href="#events" class="nav-link px-4 py-2 text-sm font-medium text-gray-700 hover:text-adobe-600 transition-colors rounded-full hover:bg-adobe-50">Events</a>
498
+ <a href="#sponsors" class="nav-link px-4 py-2 text-sm font-medium text-gray-700 hover:text-adobe-600 transition-colors rounded-full hover:bg-adobe-50">Sponsors</a>
499
+ <a href="#donate" class="nav-link px-4 py-2 text-sm font-medium text-gray-700 hover:text-adobe-600 transition-colors rounded-full hover:bg-adobe-50">Donate</a>
500
+ <a href="#directory" class="nav-link px-4 py-2 text-sm font-medium text-gray-700 hover:text-adobe-600 transition-colors rounded-full hover:bg-adobe-50">Directory</a>
501
+ <a href="#contact" class="nav-link px-4 py-2 text-sm font-medium text-gray-700 hover:text-adobe-600 transition-colors rounded-full hover:bg-adobe-50">Contact</a>
502
+ </div>
503
+
504
+ <!-- CTA + Mobile Toggle -->
505
+ <div class="flex items-center gap-3">
506
+ <a href="#donate" class="hidden sm:inline-flex btn-primary items-center gap-2 px-5 py-2.5 bg-adobe-600 text-white text-sm font-semibold rounded-full hover:bg-adobe-700 transition-colors shadow-lg shadow-adobe-600/20">
507
+ <i data-lucide="heart" class="w-4 h-4"></i>
508
+ Donate
509
+ </a>
510
+ <button id="mobileMenuBtn" class="lg:hidden p-2 text-gray-700 hover:text-adobe-600 transition-colors">
511
+ <i data-lucide="menu" class="w-6 h-6"></i>
512
+ </button>
513
+ </div>
514
+ </div>
515
+ </div>
516
+ </nav>
517
+
518
+ <!-- Mobile Menu -->
519
+ <div id="mobileMenu" class="mobile-menu fixed inset-0 z-50 bg-white lg:hidden">
520
+ <div class="flex flex-col h-full">
521
+ <div class="flex items-center justify-between px-6 py-5 border-b border-gray-100">
522
+ <div class="flex items-center gap-3">
523
+ <div class="w-10 h-10 rounded-full bg-adobe-600 flex items-center justify-center">
524
+ <span class="text-white font-display font-bold text-sm">NM</span>
525
+ </div>
526
+ <div>
527
+ <span class="font-display font-semibold text-lg">New Mexico</span>
528
+ <span class="block -mt-1 text-xs text-adobe-600 font-medium tracking-widest uppercase">Fashion Council</span>
529
+ </div>
530
+ </div>
531
+ <button id="closeMobileMenu" class="p-2 text-gray-700 hover:text-adobe-600">
532
+ <i data-lucide="x" class="w-6 h-6"></i>
533
+ </button>
534
+ </div>
535
+ <div class="flex-1 overflow-y-auto py-6 px-6">
536
+ <div class="flex flex-col gap-2">
537
+ <a href="#home" class="mobile-nav-link px-4 py-3 text-base font-medium text-gray-800 hover:bg-adobe-50 hover:text-adobe-600 rounded-xl transition-colors">Home</a>
538
+ <a href="#about" class="mobile-nav-link px-4 py-3 text-base font-medium text-gray-800 hover:bg-adobe-50 hover:text-adobe-600 rounded-xl transition-colors">About Us</a>
539
+ <a href="#team" class="mobile-nav-link px-4 py-3 text-base font-medium text-gray-800 hover:bg-adobe-50 hover:text-adobe-600 rounded-xl transition-colors">Meet the Team</a>
540
+ <a href="#membership" class="mobile-nav-link px-4 py-3 text-base font-medium text-gray-800 hover:bg-adobe-50 hover:text-adobe-600 rounded-xl transition-colors">Membership</a>
541
+ <a href="#events" class="mobile-nav-link px-4 py-3 text-base font-medium text-gray-800 hover:bg-adobe-50 hover:text-adobe-600 rounded-xl transition-colors">Events</a>
542
+ <a href="#sponsors" class="mobile-nav-link px-4 py-3 text-base font-medium text-gray-800 hover:bg-adobe-50 hover:text-adobe-600 rounded-xl transition-colors">Sponsors</a>
543
+ <a href="#donate" class="mobile-nav-link px-4 py-3 text-base font-medium text-gray-800 hover:bg-adobe-50 hover:text-adobe-600 rounded-xl transition-colors">Donate</a>
544
+ <a href="#directory" class="mobile-nav-link px-4 py-3 text-base font-medium text-gray-800 hover:bg-adobe-50 hover:text-adobe-600 rounded-xl transition-colors">Directory</a>
545
+ <a href="#volunteer" class="mobile-nav-link px-4 py-3 text-base font-medium text-gray-800 hover:bg-adobe-50 hover:text-adobe-600 rounded-xl transition-colors">Volunteer</a>
546
+ <a href="#news" class="mobile-nav-link px-4 py-3 text-base font-medium text-gray-800 hover:bg-adobe-50 hover:text-adobe-600 rounded-xl transition-colors">News & Blog</a>
547
+ <a href="#gallery" class="mobile-nav-link px-4 py-3 text-base font-medium text-gray-800 hover:bg-adobe-50 hover:text-adobe-600 rounded-xl transition-colors">Media Gallery</a>
548
+ <a href="#contact" class="mobile-nav-link px-4 py-3 text-base font-medium text-gray-800 hover:bg-adobe-50 hover:text-adobe-600 rounded-xl transition-colors">Contact</a>
549
+ </div>
550
+ </div>
551
+ <div class="px-6 py-6 border-t border-gray-100">
552
+ <a href="#donate" class="flex items-center justify-center gap-2 w-full px-6 py-3.5 bg-adobe-600 text-white font-semibold rounded-full hover:bg-adobe-700 transition-colors">
553
+ <i data-lucide="heart" class="w-5 h-5"></i>
554
+ Donate Now
555
+ </a>
556
+ </div>
557
+ </div>
558
+ </div>
559
+
560
+ <!-- Hero Section -->
561
+ <section id="home" class="relative min-h-screen flex items-center overflow-hidden bg-gray-900">
562
+ <!-- Background Image with Parallax -->
563
+ <div class="absolute inset-0 z-0">
564
+ <img
565
+ src="https://images.unsplash.com/photo-1558618666-fcd25c85f82e?w=1920&q=80"
566
+ alt="New Mexico landscape with fashion"
567
+ class="w-full h-full object-cover opacity-40"
568
+ style="transform: scale(1.1);"
569
+ id="heroBg"
570
+ >
571
+ <div class="absolute inset-0 bg-gradient-to-b from-gray-900/70 via-gray-900/50 to-gray-900/90"></div>
572
+ <div class="geo-pattern"></div>
573
+ </div>
574
+
575
+ <!-- Canvas for particles -->
576
+ <canvas id="heroCanvas"></canvas>
577
+
578
+ <!-- Hero Content -->
579
+ <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 w-full">
580
+ <div class="max-w-3xl">
581
+ <!-- Tag -->
582
+ <div class="animate-fade-in-up mb-6">
583
+ <span class="badge-pill bg-white/10 text-adobe-300 border border-white/20 backdrop-blur-sm">
584
+ <i data-lucide="sparkles" class="w-3 h-3"></i>
585
+ 501(c)(3) Nonprofit Organization
586
+ </span>
587
+ </div>
588
+
589
+ <!-- Main Title -->
590
+ <h1 class="animate-fade-in-up delay-100 font-display text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-bold text-white leading-[0.95] tracking-tight">
591
+ New Mexico<br>
592
+ <span class="text-gradient">Fashion Council</span>
593
+ </h1>
594
+
595
+ <!-- Subtitle -->
596
+ <p class="animate-fade-in-up delay-200 mt-6 text-lg sm:text-xl text-gray-300 font-light leading-relaxed max-w-xl">
597
+ Empowering New Mexico's Fashion, Arts & Creative Community through education, collaboration, and economic development.
598
+ </p>
599
+
600
+ <!-- Mission Statement -->
601
+ <p class="animate-fade-in-up delay-300 mt-4 text-sm text-gray-400 font-light leading-relaxed max-w-lg border-l-2 border-adobe-500 pl-4">
602
+ New Mexico's educational and economic development hub for fashion, culture & creative industries.
603
+ </p>
604
+
605
+ <!-- CTA Buttons -->
606
+ <div class="animate-fade-in-up delay-400 mt-10 flex flex-wrap gap-4">
607
+ <a href="#membership" class="btn-primary inline-flex items-center gap-2 px-8 py-4 bg-adobe-600 text-white font-semibold rounded-full hover:bg-adobe-700 transition-all shadow-xl shadow-adobe-600/25 hover:shadow-2xl hover:shadow-adobe-600/30">
608
+ Join the Council
609
+ <i data-lucide="arrow-right" class="w-4 h-4"></i>
610
+ </a>
611
+ <a href="#sponsors" class="inline-flex items-center gap-2 px-8 py-4 bg-white/10 backdrop-blur-sm text-white font-semibold rounded-full border border-white/20 hover:bg-white/20 transition-all">
612
+ Become a Sponsor
613
+ </a>
614
+ </div>
615
+
616
+ <!-- Secondary CTAs -->
617
+ <div class="animate-fade-in-up delay-500 mt-6 flex flex-wrap gap-3">
618
+ <a href="#donate" class="inline-flex items-center gap-1.5 text-sm text-adobe-300 hover:text-adobe-200 transition-colors">
619
+ <i data-lucide="heart" class="w-4 h-4"></i>
620
+ Donate
621
+ </a>
622
+ <span class="text-gray-600">|</span>
623
+ <a href="#volunteer" class="inline-flex items-center gap-1.5 text-sm text-adobe-300 hover:text-adobe-200 transition-colors">
624
+ <i data-lucide="hand-heart" class="w-4 h-4"></i>
625
+ Volunteer
626
+ </a>
627
+ <span class="text-gray-600">|</span>
628
+ <a href="#events" class="inline-flex items-center gap-1.5 text-sm text-adobe-300 hover:text-adobe-200 transition-colors">
629
+ <i data-lucide="calendar" class="w-4 h-4"></i>
630
+ Upcoming Events
631
+ </a>
632
+ </div>
633
+ </div>
634
+
635
+ <!-- Stats Bar -->
636
+ <div class="animate-fade-in-up delay-600 mt-16 lg:mt-24 grid grid-cols-2 sm:grid-cols-4 gap-6 lg:gap-10 max-w-3xl">
637
+ <div class="text-center sm:text-left">
638
+ <div class="text-3xl lg:text-4xl font-display font-bold text-white">500+</div>
639
+ <div class="text-xs text-gray-400 mt-1 uppercase tracking-wider">Members</div>
640
+ </div>
641
+ <div class="text-center sm:text-left">
642
+ <div class="text-3xl lg:text-4xl font-display font-bold text-white">50+</div>
643
+ <div class="text-xs text-gray-400 mt-1 uppercase tracking-wider">Events/Year</div>
644
+ </div>
645
+ <div class="text-center sm:text-left">
646
+ <div class="text-3xl lg:text-4xl font-display font-bold text-white">15+</div>
647
+ <div class="text-xs text-gray-400 mt-1 uppercase tracking-wider">Industry Facets</div>
648
+ </div>
649
+ <div class="text-center sm:text-left">
650
+ <div class="text-3xl lg:text-4xl font-display font-bold text-white">33</div>
651
+ <div class="text-xs text-gray-400 mt-1 uppercase tracking-wider">Counties Served</div>
652
+ </div>
653
+ </div>
654
+ </div>
655
+
656
+ <!-- Scroll indicator -->
657
+ <div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 animate-bounce">
658
+ <div class="w-6 h-10 rounded-full border-2 border-white/30 flex justify-center pt-2">
659
+ <div class="w-1.5 h-3 bg-white/60 rounded-full animate-pulse"></div>
660
+ </div>
661
+ </div>
662
+ </section>
663
+
664
+ <!-- About Us Section -->
665
+ <section id="about" class="py-24 lg:py-32 bg-white relative overflow-hidden">
666
+ <div class="absolute top-0 right-0 w-96 h-96 bg-adobe-50 rounded-full -translate-y-1/2 translate-x-1/2 opacity-60"></div>
667
+ <div class="absolute bottom-0 left-0 w-72 h-72 bg-sand-100 rounded-full translate-y-1/2 -translate-x-1/2 opacity-60"></div>
668
+
669
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
670
+ <!-- Section Header -->
671
+ <div class="reveal-section text-center max-w-3xl mx-auto mb-16 lg:mb-20">
672
+ <span class="badge-pill bg-adobe-50 text-adobe-700 border border-adobe-200 mb-4">
673
+ <i data-lucide="info" class="w-3 h-3"></i>
674
+ About Us
675
+ </span>
676
+ <h2 class="font-display text-4xl lg:text-5xl font-bold text-gray-900 mt-4 leading-tight">
677
+ Building New Mexico's<br>
678
+ <span class="text-adobe-600">Creative Future</span>
679
+ </h2>
680
+ <div class="deco-line w-24 mx-auto mt-6"></div>
681
+ </div>
682
+
683
+ <!-- Our Story -->
684
+ <div class="reveal-section grid lg:grid-cols-2 gap-12 lg:gap-20 items-center mb-20">
685
+ <div class="relative">
686
+ <div class="aspect-[4/5] rounded-2xl overflow-hidden img-zoom">
687
+ <img
688
+ src="https://images.unsplash.com/photo-1509631179647-0177331693ae?w=800&q=80"
689
+ alt="Fashion design workspace"
690
+ class="w-full h-full object-cover"
691
+ >
692
+ </div>
693
+ <div class="absolute -bottom-6 -right-6 w-48 h-48 bg-adobe-600 rounded-2xl -z-10 hidden lg:block"></div>
694
+ <div class="absolute -top-4 -left-4 w-24 h-24 border-2 border-adobe-300 rounded-2xl -z-10 hidden lg:block"></div>
695
+ </div>
696
+ <div>
697
+ <h3 class="font-display text-2xl lg:text-3xl font-semibold text-gray-900 mb-4">Our Story</h3>
698
+ <p class="text-gray-600 leading-relaxed mb-4">
699
+ The New Mexico Fashion Council was created to fill a critical gap in our state's creative economy. As a 501(c)(3) nonprofit organization, we recognized that New Mexico possesses extraordinary talent, rich cultural heritage, and a unique artistic identity that deserved a dedicated platform for growth and recognition.
700
+ </p>
701
+ <p class="text-gray-600 leading-relaxed">
702
+ We bring together designers, models, photographers, stylists, makeup artists, hairstylists, retailers, manufacturers, educators, students, and creative entrepreneurs to cultivate a thriving and sustainable fashion ecosystem throughout all 33 counties of New Mexico.
703
+ </p>
704
+ </div>
705
+ </div>
706
+
707
+ <!-- Mission & Vision -->
708
+ <div class="reveal-section grid md:grid-cols-2 gap-8 mb-20">
709
+ <div class="bg-sand-50 rounded-2xl p-8 lg:p-10 relative overflow-hidden">
710
+ <div class="absolute top-0 right-0 w-32 h-32 bg-adobe-100 rounded-full -translate-y-1/2 translate-x-1/2 opacity-50"></div>
711
+ <div class="relative z-10">
712
+ <div class="w-12 h-12 bg-adobe-600 rounded-xl flex items-center justify-center mb-6">
713
+ <i data-lucide="target" class="w-6 h-6 text-white"></i>
714
+ </div>
715
+ <h3 class="font-display text-2xl font-semibold text-gray-900 mb-4">Our Mission</h3>
716
+ <p class="text-gray-600 leading-relaxed">
717
+ To educate, connect, and empower New Mexico's fashion community by providing resources, industry partnerships, and opportunities that support both emerging and established professionals while driving economic growth throughout the state.
718
+ </p>
719
+ </div>
720
+ </div>
721
+ <div class="bg-gray-50 rounded-2xl p-8 lg:p-10 relative overflow-hidden">
722
+ <div class="absolute top-0 right-0 w-32 h-32 bg-turquoise-100 rounded-full -translate-y-1/2 translate-x-1/2 opacity-50"></div>
723
+ <div class="relative z-10">
724
+ <div class="w-12 h-12 bg-turquoise-600 rounded-xl flex items-center justify-center mb-6">
725
+ <i data-lucide="eye" class="w-6 h-6 text-white"></i>
726
+ </div>
727
+ <h3 class="font-display text-2xl font-semibold text-gray-900 mb-4">Our Vision</h3>
728
+ <p class="text-gray-600 leading-relaxed">
729
+ To establish New Mexico as a nationally recognized destination where fashion, culture, education, and economic development intersect. By investing in people, partnerships, and professional development, we are building a sustainable future where creativity becomes economic opportunity.
730
+ </p>
731
+ </div>
732
+ </div>
733
+ </div>
734
+
735
+ <!-- Three Pillars -->
736
+ <div class="reveal-section">
737
+ <h3 class="font-display text-2xl lg:text-3xl font-semibold text-gray-900 text-center mb-12">Our Three Pillars</h3>
738
+ <div class="grid md:grid-cols-3 gap-6">
739
+ <!-- Education -->
740
+ <div class="card-lift bg-white rounded-2xl p-8 border border-gray-100 shadow-sm">
741
+ <div class="w-14 h-14 bg-adobe-50 rounded-2xl flex items-center justify-center mb-6">
742
+ <i data-lucide="graduation-cap" class="w-7 h-7 text-adobe-600"></i>
743
+ </div>
744
+ <h4 class="font-display text-xl font-semibold text-gray-900 mb-3">Education</h4>
745
+ <p class="text-gray-600 text-sm leading-relaxed mb-4">
746
+ Workshops, masterclasses, industry panels, mentorship programs, career pathway development, and fashion business education.
747
+ </p>
748
+ <ul class="space-y-2">
749
+ <li class="flex items-center gap-2 text-sm text-gray-500">
750
+ <i data-lucide="check-circle-2" class="w-4 h-4 text-adobe-500"></i>
751
+ Professional development
752
+ </li>
753
+ <li class="flex items-center gap-2 text-sm text-gray-500">
754
+ <i data-lucide="check-circle-2" class="w-4 h-4 text-adobe-500"></i>
755
+ Youth & student engagement
756
+ </li>
757
+ <li class="flex items-center gap-2 text-sm text-gray-500">
758
+ <i data-lucide="check-circle-2" class="w-4 h-4 text-adobe-500"></i>
759
+ Speaker series
760
+ </li>
761
+ </ul>
762
+ </div>
763
+
764
+ <!-- Economic Development -->
765
+ <div class="card-lift bg-white rounded-2xl p-8 border border-gray-100 shadow-sm">
766
+ <div class="w-14 h-14 bg-turquoise-50 rounded-2xl flex items-center justify-center mb-6">
767
+ <i data-lucide="trending-up" class="w-7 h-7 text-turquoise-600"></i>
768
+ </div>
769
+ <h4 class="font-display text-xl font-semibold text-gray-900 mb-3">Economic Development</h4>
770
+ <p class="text-gray-600 text-sm leading-relaxed mb-4">
771
+ Supporting local businesses, creating professional opportunities, increasing tourism, and attracting investment.
772
+ </p>
773
+ <ul class="space-y-2">
774
+ <li class="flex items-center gap-2 text-sm text-gray-500">
775
+ <i data-lucide="check-circle-2" class="w-4 h-4 text-turquoise-500"></i>
776
+ Business support
777
+ </li>
778
+ <li class="flex items-center gap-2 text-sm text-gray-500">
779
+ <i data-lucide="check-circle-2" class="w-4 h-4 text-turquoise-500"></i>
780
+ Workforce development
781
+ </li>
782
+ <li class="flex items-center gap-2 text-sm text-gray-500">
783
+ <i data-lucide="check-circle-2" class="w-4 h-4 text-turquoise-500"></i>
784
+ Strategic partnerships
785
+ </li>
786
+ </ul>
787
+ </div>
788
+
789
+ <!-- Community Impact -->
790
+ <div class="card-lift bg-white rounded-2xl p-8 border border-gray-100 shadow-sm">
791
+ <div class="w-14 h-14 bg-sand-100 rounded-2xl flex items-center justify-center mb-6">
792
+ <i data-lucide="users" class="w-7 h-7 text-sand-700"></i>
793
+ </div>
794
+ <h4 class="font-display text-xl font-semibold text-gray-900 mb-3">Community Impact</h4>
795
+ <p class="text-gray-600 text-sm leading-relaxed mb-4">
796
+ Building collaborations, elevating local voices, supporting underrepresented creatives, and showcasing talent.
797
+ </p>
798
+ <ul class="space-y-2">
799
+ <li class="flex items-center gap-2 text-sm text-gray-500">
800
+ <i data-lucide="check-circle-2" class="w-4 h-4 text-sand-600"></i>
801
+ Cross-industry collaboration
802
+ </li>
803
+ <li class="flex items-center gap-2 text-sm text-gray-500">
804
+ <i data-lucide="check-circle-2" class="w-4 h-4 text-sand-600"></i>
805
+ Cultural storytelling
806
+ </li>
807
+ <li class="flex items-center gap-2 text-sm text-gray-500">
808
+ <i data-lucide="check-circle-2" class="w-4 h-4 text-sand-600"></i>
809
+ Community events
810
+ </li>
811
+ </ul>
812
+ </div>
813
+ </div>
814
+ </div>
815
+
816
+ <!-- Core Values -->
817
+ <div class="reveal-section mt-20">
818
+ <div class="bg-gray-900 rounded-3xl p-8 lg:p-12 relative overflow-hidden">
819
+ <div class="geo-pattern opacity-5"></div>
820
+ <div class="relative z-10">
821
+ <h3 class="font-display text-2xl lg:text-3xl font-semibold text-white text-center mb-10">Core Values</h3>
822
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
823
+ <div class="text-center p-4">
824
+ <div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center mx-auto mb-3">
825
+ <i data-lucide="crown" class="w-6 h-6 text-adobe-400"></i>
826
+ </div>
827
+ <span class="text-white text-sm font-medium">Leadership</span>
828
+ </div>
829
+ <div class="text-center p-4">
830
+ <div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center mx-auto mb-3">
831
+ <i data-lucide="palette" class="w-6 h-6 text-adobe-