Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>New Mexico Fashion Council | Empowering New Mexico's Fashion, Arts & Creative Community</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <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"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| display: ['Playfair Display', 'serif'], | |
| serif: ['Cormorant Garamond', 'serif'], | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| colors: { | |
| adobe: { | |
| 50: '#fdf8f5', | |
| 100: '#f9ece2', | |
| 200: '#f2d5c1', | |
| 300: '#e8b896', | |
| 400: '#d99668', | |
| 500: '#c97a47', | |
| 600: '#b5603a', | |
| 700: '#964a31', | |
| 800: '#7d3e2d', | |
| 900: '#663527', | |
| }, | |
| turquoise: { | |
| 50: '#f0fdfa', | |
| 100: '#ccfbf1', | |
| 200: '#99f6e4', | |
| 300: '#5eead4', | |
| 400: '#2dd4bf', | |
| 500: '#14b8a6', | |
| 600: '#0d9488', | |
| 700: '#0f766e', | |
| 800: '#115e59', | |
| 900: '#134e4a', | |
| }, | |
| sand: { | |
| 50: '#fdfcf8', | |
| 100: '#faf6ed', | |
| 200: '#f3ebd5', | |
| 300: '#e9dcb4', | |
| 400: '#dcc68c', | |
| 500: '#d0b06b', | |
| 600: '#c29852', | |
| 700: '#a27a3f', | |
| 800: '#856336', | |
| 900: '#6d522f', | |
| }, | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| *, *::before, *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| scroll-padding-top: 80px; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #fdfcf8; | |
| color: #2d2a26; | |
| overflow-x: hidden; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #faf6ed; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #c97a47; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #b5603a; | |
| } | |
| /* Animations */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(40px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes slideInLeft { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-60px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes slideInRight { | |
| from { | |
| opacity: 0; | |
| transform: translateX(60px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes scaleIn { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.9); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-8px); } | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: -200% 0; } | |
| 100% { background-position: 200% 0; } | |
| } | |
| @keyframes pulse-soft { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| @keyframes drawLine { | |
| from { width: 0; } | |
| to { width: 100%; } | |
| } | |
| .animate-fade-in-up { | |
| animation: fadeInUp 0.8s ease-out forwards; | |
| opacity: 0; | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.6s ease-out forwards; | |
| opacity: 0; | |
| } | |
| .animate-slide-left { | |
| animation: slideInLeft 0.8s ease-out forwards; | |
| opacity: 0; | |
| } | |
| .animate-slide-right { | |
| animation: slideInRight 0.8s ease-out forwards; | |
| opacity: 0; | |
| } | |
| .animate-scale-in { | |
| animation: scaleIn 0.6s ease-out forwards; | |
| opacity: 0; | |
| } | |
| .delay-100 { animation-delay: 0.1s; } | |
| .delay-200 { animation-delay: 0.2s; } | |
| .delay-300 { animation-delay: 0.3s; } | |
| .delay-400 { animation-delay: 0.4s; } | |
| .delay-500 { animation-delay: 0.5s; } | |
| .delay-600 { animation-delay: 0.6s; } | |
| .delay-700 { animation-delay: 0.7s; } | |
| .delay-800 { animation-delay: 0.8s; } | |
| /* Hero canvas */ | |
| #heroCanvas { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| pointer-events: none; | |
| } | |
| /* Geometric pattern overlay */ | |
| .geo-pattern { | |
| position: absolute; | |
| inset: 0; | |
| opacity: 0.04; | |
| 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"); | |
| z-index: 2; | |
| } | |
| /* Section reveal on scroll */ | |
| .reveal-section { | |
| opacity: 0; | |
| transform: translateY(50px); | |
| transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .reveal-section.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Card hover effects */ | |
| .card-lift { | |
| transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; | |
| } | |
| .card-lift:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12); | |
| } | |
| /* Image zoom on hover */ | |
| .img-zoom { | |
| overflow: hidden; | |
| } | |
| .img-zoom img { | |
| transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .img-zoom:hover img { | |
| transform: scale(1.08); | |
| } | |
| /* Button styles */ | |
| .btn-primary { | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(255,255,255,0.15); | |
| transition: left 0.4s ease; | |
| } | |
| .btn-primary:hover::before { | |
| left: 100%; | |
| } | |
| /* Navigation */ | |
| .nav-glass { | |
| background: rgba(253, 252, 248, 0.92); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| } | |
| /* Decorative line */ | |
| .deco-line { | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, #c97a47, transparent); | |
| } | |
| /* Quote styling */ | |
| .quote-mark { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 6rem; | |
| line-height: 0.5; | |
| color: #c97a47; | |
| opacity: 0.2; | |
| } | |
| /* Team card */ | |
| .team-card { | |
| position: relative; | |
| } | |
| .team-card::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 0; | |
| height: 3px; | |
| background: #c97a47; | |
| transition: width 0.4s ease; | |
| } | |
| .team-card:hover::after { | |
| width: 60%; | |
| } | |
| /* Event card date badge */ | |
| .date-badge { | |
| position: relative; | |
| } | |
| .date-badge::before { | |
| content: ''; | |
| position: absolute; | |
| top: -4px; | |
| left: -4px; | |
| right: -4px; | |
| bottom: -4px; | |
| border: 1px solid #c97a47; | |
| opacity: 0.3; | |
| } | |
| /* Sponsor tier glow */ | |
| .tier-card { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .tier-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: linear-gradient(90deg, #c97a47, #d0b06b, #c97a47); | |
| background-size: 200% 100%; | |
| animation: shimmer 3s linear infinite; | |
| } | |
| /* Donation amount selected */ | |
| .donation-amount { | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .donation-amount:hover, .donation-amount.selected { | |
| background: #c97a47; | |
| color: white; | |
| border-color: #c97a47; | |
| } | |
| /* Input focus */ | |
| .input-focus { | |
| transition: all 0.3s ease; | |
| } | |
| .input-focus:focus { | |
| border-color: #c97a47; | |
| box-shadow: 0 0 0 3px rgba(201, 122, 71, 0.15); | |
| } | |
| /* Mobile menu */ | |
| .mobile-menu { | |
| transform: translateX(100%); | |
| transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .mobile-menu.open { | |
| transform: translateX(0); | |
| } | |
| /* Parallax hero text */ | |
| .parallax-text { | |
| will-change: transform; | |
| } | |
| /* Loading shimmer for images */ | |
| .shimmer-bg { | |
| background: linear-gradient(90deg, #f3ebd5 25%, #faf6ed 50%, #f3ebd5 75%); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s infinite; | |
| } | |
| /* Custom select styling */ | |
| select { | |
| appearance: none; | |
| 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"); | |
| background-repeat: no-repeat; | |
| background-position: right 12px center; | |
| } | |
| /* Modal */ | |
| .modal-overlay { | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .modal-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .modal-content { | |
| transform: scale(0.95) translateY(20px); | |
| transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .modal-overlay.active .modal-content { | |
| transform: scale(1) translateY(0); | |
| } | |
| /* Gallery masonry */ | |
| .gallery-item { | |
| break-inside: avoid; | |
| margin-bottom: 1rem; | |
| } | |
| /* Smooth section transitions */ | |
| section { | |
| position: relative; | |
| } | |
| /* Text gradient */ | |
| .text-gradient { | |
| background: linear-gradient(135deg, #c97a47, #d0b06b); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Badge style */ | |
| .badge-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.375rem 1rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| } | |
| /* Horizontal scroll for mobile */ | |
| .scroll-snap-x { | |
| scroll-snap-type: x mandatory; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .scroll-snap-x > * { | |
| scroll-snap-align: start; | |
| } | |
| /* Counter animation */ | |
| @keyframes countUp { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Sticky sidebar nav for desktop */ | |
| @media (min-width: 1024px) { | |
| .sticky-nav-desktop { | |
| position: sticky; | |
| top: 100px; | |
| } | |
| } | |
| /* Print styles */ | |
| @media print { | |
| .no-print { display: none ; } | |
| body { background: white; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-20"> | |
| <!-- Logo --> | |
| <a href="#home" class="flex items-center gap-3 group"> | |
| <div class="w-10 h-10 rounded-full bg-adobe-600 flex items-center justify-center transition-transform duration-300 group-hover:scale-110"> | |
| <span class="text-white font-display font-bold text-sm">NM</span> | |
| </div> | |
| <div class="hidden sm:block"> | |
| <span class="font-display font-semibold text-lg text-gray-900 tracking-tight">New Mexico</span> | |
| <span class="block -mt-1 text-xs text-adobe-600 font-medium tracking-widest uppercase">Fashion Council</span> | |
| </div> | |
| </a> | |
| <!-- Desktop Navigation --> | |
| <div class="hidden lg:flex items-center gap-1"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| <!-- CTA + Mobile Toggle --> | |
| <div class="flex items-center gap-3"> | |
| <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"> | |
| <i data-lucide="heart" class="w-4 h-4"></i> | |
| Donate | |
| </a> | |
| <button id="mobileMenuBtn" class="lg:hidden p-2 text-gray-700 hover:text-adobe-600 transition-colors"> | |
| <i data-lucide="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="mobile-menu fixed inset-0 z-50 bg-white lg:hidden"> | |
| <div class="flex flex-col h-full"> | |
| <div class="flex items-center justify-between px-6 py-5 border-b border-gray-100"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-full bg-adobe-600 flex items-center justify-center"> | |
| <span class="text-white font-display font-bold text-sm">NM</span> | |
| </div> | |
| <div> | |
| <span class="font-display font-semibold text-lg">New Mexico</span> | |
| <span class="block -mt-1 text-xs text-adobe-600 font-medium tracking-widest uppercase">Fashion Council</span> | |
| </div> | |
| </div> | |
| <button id="closeMobileMenu" class="p-2 text-gray-700 hover:text-adobe-600"> | |
| <i data-lucide="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 overflow-y-auto py-6 px-6"> | |
| <div class="flex flex-col gap-2"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="px-6 py-6 border-t border-gray-100"> | |
| <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"> | |
| <i data-lucide="heart" class="w-5 h-5"></i> | |
| Donate Now | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section id="home" class="relative min-h-screen flex items-center overflow-hidden bg-gray-900"> | |
| <!-- Background Image with Parallax --> | |
| <div class="absolute inset-0 z-0"> | |
| <img | |
| src="https://images.unsplash.com/photo-1558618666-fcd25c85f82e?w=1920&q=80" | |
| alt="New Mexico landscape with fashion" | |
| class="w-full h-full object-cover opacity-40" | |
| style="transform: scale(1.1);" | |
| id="heroBg" | |
| > | |
| <div class="absolute inset-0 bg-gradient-to-b from-gray-900/70 via-gray-900/50 to-gray-900/90"></div> | |
| <div class="geo-pattern"></div> | |
| </div> | |
| <!-- Canvas for particles --> | |
| <canvas id="heroCanvas"></canvas> | |
| <!-- Hero Content --> | |
| <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 w-full"> | |
| <div class="max-w-3xl"> | |
| <!-- Tag --> | |
| <div class="animate-fade-in-up mb-6"> | |
| <span class="badge-pill bg-white/10 text-adobe-300 border border-white/20 backdrop-blur-sm"> | |
| <i data-lucide="sparkles" class="w-3 h-3"></i> | |
| 501(c)(3) Nonprofit Organization | |
| </span> | |
| </div> | |
| <!-- Main Title --> | |
| <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"> | |
| New Mexico<br> | |
| <span class="text-gradient">Fashion Council</span> | |
| </h1> | |
| <!-- Subtitle --> | |
| <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"> | |
| Empowering New Mexico's Fashion, Arts & Creative Community through education, collaboration, and economic development. | |
| </p> | |
| <!-- Mission Statement --> | |
| <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"> | |
| New Mexico's educational and economic development hub for fashion, culture & creative industries. | |
| </p> | |
| <!-- CTA Buttons --> | |
| <div class="animate-fade-in-up delay-400 mt-10 flex flex-wrap gap-4"> | |
| <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"> | |
| Join the Council | |
| <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| <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"> | |
| Become a Sponsor | |
| </a> | |
| </div> | |
| <!-- Secondary CTAs --> | |
| <div class="animate-fade-in-up delay-500 mt-6 flex flex-wrap gap-3"> | |
| <a href="#donate" class="inline-flex items-center gap-1.5 text-sm text-adobe-300 hover:text-adobe-200 transition-colors"> | |
| <i data-lucide="heart" class="w-4 h-4"></i> | |
| Donate | |
| </a> | |
| <span class="text-gray-600">|</span> | |
| <a href="#volunteer" class="inline-flex items-center gap-1.5 text-sm text-adobe-300 hover:text-adobe-200 transition-colors"> | |
| <i data-lucide="hand-heart" class="w-4 h-4"></i> | |
| Volunteer | |
| </a> | |
| <span class="text-gray-600">|</span> | |
| <a href="#events" class="inline-flex items-center gap-1.5 text-sm text-adobe-300 hover:text-adobe-200 transition-colors"> | |
| <i data-lucide="calendar" class="w-4 h-4"></i> | |
| Upcoming Events | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Stats Bar --> | |
| <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"> | |
| <div class="text-center sm:text-left"> | |
| <div class="text-3xl lg:text-4xl font-display font-bold text-white">500+</div> | |
| <div class="text-xs text-gray-400 mt-1 uppercase tracking-wider">Members</div> | |
| </div> | |
| <div class="text-center sm:text-left"> | |
| <div class="text-3xl lg:text-4xl font-display font-bold text-white">50+</div> | |
| <div class="text-xs text-gray-400 mt-1 uppercase tracking-wider">Events/Year</div> | |
| </div> | |
| <div class="text-center sm:text-left"> | |
| <div class="text-3xl lg:text-4xl font-display font-bold text-white">15+</div> | |
| <div class="text-xs text-gray-400 mt-1 uppercase tracking-wider">Industry Facets</div> | |
| </div> | |
| <div class="text-center sm:text-left"> | |
| <div class="text-3xl lg:text-4xl font-display font-bold text-white">33</div> | |
| <div class="text-xs text-gray-400 mt-1 uppercase tracking-wider">Counties Served</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scroll indicator --> | |
| <div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 animate-bounce"> | |
| <div class="w-6 h-10 rounded-full border-2 border-white/30 flex justify-center pt-2"> | |
| <div class="w-1.5 h-3 bg-white/60 rounded-full animate-pulse"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Us Section --> | |
| <section id="about" class="py-24 lg:py-32 bg-white relative overflow-hidden"> | |
| <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> | |
| <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> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <!-- Section Header --> | |
| <div class="reveal-section text-center max-w-3xl mx-auto mb-16 lg:mb-20"> | |
| <span class="badge-pill bg-adobe-50 text-adobe-700 border border-adobe-200 mb-4"> | |
| <i data-lucide="info" class="w-3 h-3"></i> | |
| About Us | |
| </span> | |
| <h2 class="font-display text-4xl lg:text-5xl font-bold text-gray-900 mt-4 leading-tight"> | |
| Building New Mexico's<br> | |
| <span class="text-adobe-600">Creative Future</span> | |
| </h2> | |
| <div class="deco-line w-24 mx-auto mt-6"></div> | |
| </div> | |
| <!-- Our Story --> | |
| <div class="reveal-section grid lg:grid-cols-2 gap-12 lg:gap-20 items-center mb-20"> | |
| <div class="relative"> | |
| <div class="aspect-[4/5] rounded-2xl overflow-hidden img-zoom"> | |
| <img | |
| src="https://images.unsplash.com/photo-1509631179647-0177331693ae?w=800&q=80" | |
| alt="Fashion design workspace" | |
| class="w-full h-full object-cover" | |
| > | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 w-48 h-48 bg-adobe-600 rounded-2xl -z-10 hidden lg:block"></div> | |
| <div class="absolute -top-4 -left-4 w-24 h-24 border-2 border-adobe-300 rounded-2xl -z-10 hidden lg:block"></div> | |
| </div> | |
| <div> | |
| <h3 class="font-display text-2xl lg:text-3xl font-semibold text-gray-900 mb-4">Our Story</h3> | |
| <p class="text-gray-600 leading-relaxed mb-4"> | |
| 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. | |
| </p> | |
| <p class="text-gray-600 leading-relaxed"> | |
| 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. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Mission & Vision --> | |
| <div class="reveal-section grid md:grid-cols-2 gap-8 mb-20"> | |
| <div class="bg-sand-50 rounded-2xl p-8 lg:p-10 relative overflow-hidden"> | |
| <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> | |
| <div class="relative z-10"> | |
| <div class="w-12 h-12 bg-adobe-600 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-lucide="target" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="font-display text-2xl font-semibold text-gray-900 mb-4">Our Mission</h3> | |
| <p class="text-gray-600 leading-relaxed"> | |
| 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. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-2xl p-8 lg:p-10 relative overflow-hidden"> | |
| <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> | |
| <div class="relative z-10"> | |
| <div class="w-12 h-12 bg-turquoise-600 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-lucide="eye" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="font-display text-2xl font-semibold text-gray-900 mb-4">Our Vision</h3> | |
| <p class="text-gray-600 leading-relaxed"> | |
| 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. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Three Pillars --> | |
| <div class="reveal-section"> | |
| <h3 class="font-display text-2xl lg:text-3xl font-semibold text-gray-900 text-center mb-12">Our Three Pillars</h3> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <!-- Education --> | |
| <div class="card-lift bg-white rounded-2xl p-8 border border-gray-100 shadow-sm"> | |
| <div class="w-14 h-14 bg-adobe-50 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-lucide="graduation-cap" class="w-7 h-7 text-adobe-600"></i> | |
| </div> | |
| <h4 class="font-display text-xl font-semibold text-gray-900 mb-3">Education</h4> | |
| <p class="text-gray-600 text-sm leading-relaxed mb-4"> | |
| Workshops, masterclasses, industry panels, mentorship programs, career pathway development, and fashion business education. | |
| </p> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center gap-2 text-sm text-gray-500"> | |
| <i data-lucide="check-circle-2" class="w-4 h-4 text-adobe-500"></i> | |
| Professional development | |
| </li> | |
| <li class="flex items-center gap-2 text-sm text-gray-500"> | |
| <i data-lucide="check-circle-2" class="w-4 h-4 text-adobe-500"></i> | |
| Youth & student engagement | |
| </li> | |
| <li class="flex items-center gap-2 text-sm text-gray-500"> | |
| <i data-lucide="check-circle-2" class="w-4 h-4 text-adobe-500"></i> | |
| Speaker series | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Economic Development --> | |
| <div class="card-lift bg-white rounded-2xl p-8 border border-gray-100 shadow-sm"> | |
| <div class="w-14 h-14 bg-turquoise-50 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-lucide="trending-up" class="w-7 h-7 text-turquoise-600"></i> | |
| </div> | |
| <h4 class="font-display text-xl font-semibold text-gray-900 mb-3">Economic Development</h4> | |
| <p class="text-gray-600 text-sm leading-relaxed mb-4"> | |
| Supporting local businesses, creating professional opportunities, increasing tourism, and attracting investment. | |
| </p> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center gap-2 text-sm text-gray-500"> | |
| <i data-lucide="check-circle-2" class="w-4 h-4 text-turquoise-500"></i> | |
| Business support | |
| </li> | |
| <li class="flex items-center gap-2 text-sm text-gray-500"> | |
| <i data-lucide="check-circle-2" class="w-4 h-4 text-turquoise-500"></i> | |
| Workforce development | |
| </li> | |
| <li class="flex items-center gap-2 text-sm text-gray-500"> | |
| <i data-lucide="check-circle-2" class="w-4 h-4 text-turquoise-500"></i> | |
| Strategic partnerships | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Community Impact --> | |
| <div class="card-lift bg-white rounded-2xl p-8 border border-gray-100 shadow-sm"> | |
| <div class="w-14 h-14 bg-sand-100 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-lucide="users" class="w-7 h-7 text-sand-700"></i> | |
| </div> | |
| <h4 class="font-display text-xl font-semibold text-gray-900 mb-3">Community Impact</h4> | |
| <p class="text-gray-600 text-sm leading-relaxed mb-4"> | |
| Building collaborations, elevating local voices, supporting underrepresented creatives, and showcasing talent. | |
| </p> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center gap-2 text-sm text-gray-500"> | |
| <i data-lucide="check-circle-2" class="w-4 h-4 text-sand-600"></i> | |
| Cross-industry collaboration | |
| </li> | |
| <li class="flex items-center gap-2 text-sm text-gray-500"> | |
| <i data-lucide="check-circle-2" class="w-4 h-4 text-sand-600"></i> | |
| Cultural storytelling | |
| </li> | |
| <li class="flex items-center gap-2 text-sm text-gray-500"> | |
| <i data-lucide="check-circle-2" class="w-4 h-4 text-sand-600"></i> | |
| Community events | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Core Values --> | |
| <div class="reveal-section mt-20"> | |
| <div class="bg-gray-900 rounded-3xl p-8 lg:p-12 relative overflow-hidden"> | |
| <div class="geo-pattern opacity-5"></div> | |
| <div class="relative z-10"> | |
| <h3 class="font-display text-2xl lg:text-3xl font-semibold text-white text-center mb-10">Core Values</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4"> | |
| <div class="text-center p-4"> | |
| <div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center mx-auto mb-3"> | |
| <i data-lucide="crown" class="w-6 h-6 text-adobe-400"></i> | |
| </div> | |
| <span class="text-white text-sm font-medium">Leadership</span> | |
| </div> | |
| <div class="text-center p-4"> | |
| <div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center mx-auto mb-3"> | |
| <i data-lucide="palette" class="w-6 h-6 text-adobe- |