| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Lumina — Next-Gen E-Commerce Experience</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"> |
| <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=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@300;400;500;600;700&display=swap" rel="stylesheet"> |
| |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| fontFamily: { |
| sans: ['DM Sans', 'system-ui', 'sans-serif'], |
| display: ['Space Grotesk', 'system-ui', 'sans-serif'], |
| }, |
| colors: { |
| charcoal: '#0a0a0c', |
| ink: '#111114', |
| surface: '#18181d', |
| elevated: '#212128', |
| mist: '#e8e4df', |
| parchment: '#f6f4f1', |
| warm: '#faf9f7', |
| iris: '#6366f1', |
| irisDim: '#4f46e5', |
| lavender: '#c7b8ff', |
| coral: '#f43f5e', |
| amber: '#f59e0b', |
| mint: '#10b981', |
| ocean: '#0ea5e9', |
| } |
| } |
| } |
| } |
| </script> |
|
|
| <style> |
| *, *::before, *::after { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'DM Sans', system-ui, sans-serif; |
| background: #f6f4f1; |
| color: #1a1a1e; |
| overflow-x: hidden; |
| -webkit-font-smoothing: antialiased; |
| } |
| |
| ::-webkit-scrollbar { |
| width: 6px; |
| height: 6px; |
| } |
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #c8c3bc; |
| border-radius: 20px; |
| } |
| |
| |
| .hero-blob { |
| position: absolute; |
| filter: blur(60px); |
| opacity: 0.7; |
| animation: blobMorph 8s ease-in-out infinite alternate; |
| } |
| .blob-1 { |
| width: 500px; |
| height: 500px; |
| top: -100px; |
| right: -80px; |
| background: linear-gradient(135deg, #6366f1 0%, #a78bfa 50%, #f43f5e 100%); |
| border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; |
| animation-delay: 0s; |
| } |
| .blob-2 { |
| width: 400px; |
| height: 400px; |
| bottom: -50px; |
| left: -60px; |
| background: linear-gradient(225deg, #0ea5e9 0%, #6366f1 100%); |
| border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; |
| animation-delay: -4s; |
| } |
| .blob-3 { |
| width: 350px; |
| height: 350px; |
| top: 40%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| background: linear-gradient(135deg, #f59e0b 0%, #f43f5e 40%, #6366f1 100%); |
| border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
| opacity: 0.3; |
| animation-delay: -2s; |
| } |
| |
| @keyframes blobMorph { |
| 0% { |
| border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; |
| transform: translate(0,0) scale(1); |
| } |
| 25% { |
| border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; |
| transform: translate(15px, -20px) scale(1.03); |
| } |
| 50% { |
| border-radius: 50% 50% 30% 70% / 60% 40% 30% 60%; |
| transform: translate(-10px, 15px) scale(0.98); |
| } |
| 75% { |
| border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%; |
| transform: translate(5px, -10px) scale(1.01); |
| } |
| 100% { |
| border-radius: 60% 40% 30% 70% / 40% 30% 60% 50%; |
| transform: translate(-5px, 5px) scale(1.02); |
| } |
| } |
| |
| |
| .glass { |
| background: rgba(255,255,255,0.55); |
| backdrop-filter: blur(24px) saturate(180%); |
| -webkit-backdrop-filter: blur(24px) saturate(180%); |
| border: 1px solid rgba(255,255,255,0.2); |
| } |
| .glass-dark { |
| background: rgba(16,16,20,0.75); |
| backdrop-filter: blur(24px) saturate(180%); |
| -webkit-backdrop-filter: blur(24px) saturate(180%); |
| border: 1px solid rgba(255,255,255,0.06); |
| } |
| .glass-card { |
| background: rgba(255,255,255,0.7); |
| backdrop-filter: blur(16px); |
| border: 1px solid rgba(255,255,255,0.3); |
| } |
| |
| |
| @keyframes fadeUp { |
| from { |
| opacity: 0; |
| transform: translateY(30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| @keyframes scaleIn { |
| from { |
| opacity: 0; |
| transform: scale(0.92); |
| } |
| to { |
| opacity: 1; |
| transform: scale(1); |
| } |
| } |
| @keyframes slideRight { |
| from { |
| opacity: 0; |
| transform: translateX(-30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateX(0); |
| } |
| } |
| @keyframes shimmer { |
| 0% { background-position: -200% center; } |
| 100% { background-position: 200% center; } |
| } |
| @keyframes float { |
| 0%, 100% { transform: translateY(0px); } |
| 50% { transform: translateY(-8px); } |
| } |
| @keyframes pulseRing { |
| 0% { |
| box-shadow: 0 0 0 0 rgba(99,102,241,0.4); |
| } |
| 70% { |
| box-shadow: 0 0 0 12px rgba(99,102,241,0); |
| } |
| 100% { |
| box-shadow: 0 0 0 0 rgba(99,102,241,0); |
| } |
| } |
| |
| .anim-fade-up { |
| animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) forwards; |
| opacity: 0; |
| } |
| .anim-fade-in { |
| animation: fadeIn 0.5s ease forwards; |
| } |
| .anim-scale { |
| animation: scaleIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards; |
| } |
| .delay-1 { animation-delay: 0.08s; } |
| .delay-2 { animation-delay: 0.16s; } |
| .delay-3 { animation-delay: 0.24s; } |
| .delay-4 { animation-delay: 0.32s; } |
| .delay-5 { animation-delay: 0.4s; } |
| |
| |
| .product-card { |
| transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease; |
| } |
| .product-card:hover { |
| transform: translateY(-6px) scale(1.01); |
| box-shadow: 0 24px 48px -12px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,255,255,0.5); |
| } |
| .product-card .card-img { |
| transition: transform 0.8s cubic-bezier(0.16,1,0.3,1); |
| } |
| .product-card:hover .card-img { |
| transform: scale(1.06); |
| } |
| .product-card .quick-view { |
| opacity: 0; |
| transform: translateY(12px); |
| transition: all 0.4s cubic-bezier(0.16,1,0.3,1); |
| } |
| .product-card:hover .quick-view { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| .product-card .like-btn { |
| transition: all 0.3s ease; |
| } |
| .product-card .like-btn:hover { |
| transform: scale(1.15); |
| } |
| .product-card .like-btn.liked i { |
| color: #f43f5e; |
| transform: scale(1.15); |
| } |
| |
| |
| .sidebar-nav-item { |
| position: relative; |
| transition: all 0.3s cubic-bezier(0.16,1,0.3,1); |
| } |
| .sidebar-nav-item::before { |
| content: ''; |
| position: absolute; |
| left: 0; |
| top: 0; |
| bottom: 0; |
| width: 3px; |
| border-radius: 0 4px 4px 0; |
| background: linear-gradient(to bottom, #6366f1, #a78bfa); |
| transform: scaleY(0); |
| transition: transform 0.3s ease; |
| } |
| .sidebar-nav-item.active::before { |
| transform: scaleY(1); |
| } |
| .sidebar-nav-item.active { |
| background: rgba(99,102,241,0.1); |
| color: #6366f1; |
| } |
| |
| |
| .modal-backdrop { |
| backdrop-filter: blur(12px); |
| background: rgba(10,10,12,0.4); |
| } |
| .modal-panel { |
| animation: scaleIn 0.35s cubic-bezier(0.16,1,0.3,1) forwards; |
| } |
| |
| |
| .toast { |
| animation: slideRight 0.4s cubic-bezier(0.16,1,0.3,1) forwards; |
| } |
| .toast-exit { |
| animation: fadeUp 0.3s ease forwards reverse; |
| } |
| |
| |
| .shimmer-text { |
| background: linear-gradient(90deg, #1a1a1e 0%, #6366f1 50%, #1a1a1e 100%); |
| background-size: 200% auto; |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| animation: shimmer 3s linear infinite; |
| } |
| |
| |
| .nav-link { |
| position: relative; |
| } |
| .nav-link::after { |
| content: ''; |
| position: absolute; |
| bottom: -4px; |
| left: 0; |
| width: 0; |
| height: 2px; |
| background: linear-gradient(90deg, #6366f1, #a78bfa); |
| border-radius: 2px; |
| transition: width 0.3s cubic-bezier(0.16,1,0.3,1); |
| } |
| .nav-link:hover::after, .nav-link.active::after { |
| width: 100%; |
| } |
| |
| |
| .cart-panel { |
| transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); |
| } |
| .cart-open { |
| transform: translateX(0); |
| } |
| .cart-closed { |
| transform: translateX(100%); |
| } |
| |
| |
| .cat-tab { |
| transition: all 0.3s ease; |
| position: relative; |
| } |
| .cat-tab::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 0; |
| height: 2px; |
| background: #6366f1; |
| border-radius: 2px; |
| transition: width 0.3s ease; |
| } |
| .cat-tab:hover::after, .cat-tab.active::after { |
| width: 60%; |
| } |
| .cat-tab.active { |
| color: #6366f1; |
| background: rgba(99,102,241,0.06); |
| } |
| |
| |
| .particle { |
| position: absolute; |
| border-radius: 50%; |
| pointer-events: none; |
| animation: floatParticle 6s ease-in-out infinite; |
| } |
| @keyframes floatParticle { |
| 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; } |
| 50% { transform: translateY(-20px) rotate(180deg); opacity: 1; } |
| } |
| |
| |
| .badge-pulse { |
| animation: pulseRing 2s ease-in-out infinite; |
| } |
| |
| |
| .ribbon { |
| position: absolute; |
| top: 0; |
| right: 0; |
| padding: 4px 28px; |
| font-size: 0.65rem; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| transform: translate(15px, 8px) rotate(45deg); |
| transform-origin: top right; |
| z-index: 10; |
| } |
| |
| |
| .magnify-wrap { |
| overflow: hidden; |
| cursor: zoom-in; |
| } |
| .magnify-img { |
| transition: transform 0.3s ease; |
| } |
| |
| |
| .input-modern { |
| background: rgba(255,255,255,0.6); |
| border: 1px solid rgba(0,0,0,0.08); |
| border-radius: 14px; |
| padding: 14px 18px; |
| font-size: 0.95rem; |
| transition: all 0.3s ease; |
| outline: none; |
| } |
| .input-modern:focus { |
| border-color: #6366f1; |
| box-shadow: 0 0 0 4px rgba(99,102,241,0.1); |
| background: #fff; |
| } |
| .input-modern::placeholder { |
| color: #9ca3af; |
| } |
| |
| .textarea-modern { |
| background: rgba(255,255,255,0.6); |
| border: 1px solid rgba(0,0,0,0.08); |
| border-radius: 14px; |
| padding: 14px 18px; |
| font-size: 0.95rem; |
| transition: all 0.3s ease; |
| outline: none; |
| resize: vertical; |
| } |
| .textarea-modern:focus { |
| border-color: #6366f1; |
| box-shadow: 0 0 0 4px rgba(99,102,241,0.1); |
| background: #fff; |
| } |
| |
| |
| .tab-btn { |
| transition: all 0.3s ease; |
| } |
| .tab-btn.active { |
| background: #1a1a1e; |
| color: #fff; |
| } |
| |
| |
| .reveal { |
| opacity: 0; |
| transform: translateY(40px); |
| transition: all 0.8s cubic-bezier(0.16,1,0.3,1); |
| } |
| .reveal.visible { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| |
| .stagger-card:nth-child(1) { transition-delay: 0ms; } |
| .stagger-card:nth-child(2) { transition-delay: 80ms; } |
| .stagger-card:nth-child(3) { transition-delay: 160ms; } |
| .stagger-card:nth-child(4) { transition-delay: 240ms; } |
| .stagger-card:nth-child(5) { transition-delay: 320ms; } |
| .stagger-card:nth-child(6) { transition-delay: 400ms; } |
| .stagger-card:nth-child(7) { transition-delay: 480ms; } |
| .stagger-card:nth-child(8) { transition-delay: 560ms; } |
| |
| |
| .admin-scroll::-webkit-scrollbar { width: 4px; } |
| .admin-scroll::-webkit-scrollbar-thumb { background: #333; border-radius: 20px; } |
| |
| |
| .status-dot { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| display: inline-block; |
| } |
| |
| |
| a, button { |
| transition: all 0.25s ease; |
| } |
| |
| |
| @keyframes marquee { |
| 0% { transform: translateX(0); } |
| 100% { transform: translateX(-50%); } |
| } |
| .marquee-track { |
| animation: marquee 25s linear infinite; |
| } |
| .marquee-track:hover { |
| animation-play-state: paused; |
| } |
| </style> |
| </head> |
| <body> |
|
|
| |
| |
| |
| <div id="store-page"> |
| |
| <div id="announcement-bar" class="bg-charcoal text-white text-center py-2.5 px-4 text-sm font-medium tracking-wide" style="display:none"> |
| <span id="announcement-text">Free shipping on orders over $75 | Use code LUMINA15 for 15% off</span> |
| </div> |
|
|
| |
| <nav class="sticky top-0 z-40 glass transition-all duration-300" id="main-nav"> |
| <div class="max-w-7xl mx-auto px-5 sm:px-8"> |
| <div class="flex items-center justify-between h-16 sm:h-20"> |
| |
| <a href="#" onclick="renderStore()" class="flex items-center gap-2.5 group"> |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-iris to-irisDim flex items-center justify-center shadow-lg shadow-iris/25 group-hover:shadow-iris/40 transition-shadow"> |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> |
| <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon> |
| </svg> |
| </div> |
| <span class="font-display font-bold text-xl tracking-tight text-charcoal">Lumina</span> |
| </a> |
|
|
| |
| <div class="hidden md:flex items-center gap-8"> |
| <a href="#" onclick="renderStore()" class="nav-link active text-sm font-medium text-charcoal">Home</a> |
| <a href="#" onclick="filterByCategory('')" class="nav-link text-sm font-medium text-gray-500 hover:text-charcoal">All Products</a> |
| <a href="#" onclick="scrollToProducts()" class="nav-link text-sm font-medium text-gray-500 hover:text-charcoal">New Arrivals</a> |
| <a href="#" onclick="renderAdmin()" class="nav-link text-sm font-medium text-gray-500 hover:text-charcoal">Admin Panel</a> |
| </div> |
|
|
| |
| <div class="flex items-center gap-2 sm:gap-3"> |
| <div class="hidden sm:flex items-center bg-white/60 rounded-full pl-4 pr-1.5 py-1.5 border border-black/5 focus-within:border-iris/30 focus-within:bg-white transition-all"> |
| <i class="fa-solid fa-magnifying-glass text-gray-400 text-xs mr-2.5"></i> |
| <input type="text" id="search-bar" placeholder="Search..." class="bg-transparent text-sm outline-none w-36 lg:w-44 placeholder-gray-400" oninput="handleSearch(this.value)"> |
| </div> |
| <button onclick="toggleCart()" class="relative w-10 h-10 rounded-full flex items-center justify-center hover:bg-black/5 transition-colors group"> |
| <i class="fa-solid fa-bag-shopping text-charcoal text-sm group-hover:text-iris transition-colors"></i> |
| <span id="cart-count" class="absolute -top-0.5 -right-0.5 w-5 h-5 bg-coral text-white text-[10px] font-bold rounded-full flex items-center justify-center scale-0 transition-transform">0</span> |
| </button> |
| <button onclick="renderAdmin()" class="w-10 h-10 rounded-full bg-charcoal text-white flex items-center justify-center hover:bg-ink transition-colors"> |
| <i class="fa-solid fa-sliders text-xs"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section id="hero-section" class="relative overflow-hidden min-h-[92vh] flex items-center"> |
| <div class="hero-blob blob-1"></div> |
| <div class="hero-blob blob-2"></div> |
| <div class="hero-blob blob-3"></div> |
|
|
| |
| <div class="particle w-3 h-3 bg-iris/40 top-[20%] left-[15%]" style="animation-delay:0s"></div> |
| <div class="particle w-2 h-2 bg-coral/40 top-[60%] left-[8%]" style="animation-delay:-2s"></div> |
| <div class="particle w-4 h-4 bg-ocean/30 top-[30%] right-[12%]" style="animation-delay:-4s"></div> |
| <div class="particle w-2 h-2 bg-amber/40 top-[75%] right-[25%]" style="animation-delay:-1s"></div> |
| <div class="particle w-3 h-3 bg-mint/30 top-[15%] left-[45%]" style="animation-delay:-3s"></div> |
|
|
| <div class="max-w-7xl mx-auto px-5 sm:px-8 relative z-10 w-full"> |
| <div class="grid lg:grid-cols-2 gap-12 lg:gap-8 items-center"> |
| <div class="max-w-2xl"> |
| <div class="inline-flex items-center gap-2 bg-white/60 backdrop-blur-sm rounded-full px-4 py-1.5 mb-8 anim-fade-up border border-white/40 shadow-sm"> |
| <span class="w-2 h-2 rounded-full bg-mint badge-pulse"></span> |
| <span class="text-xs font-semibold text-charcoal tracking-wide uppercase" id="hero-badge">New Collection 2025</span> |
| </div> |
| <h1 class="font-display font-bold text-5xl sm:text-6xl lg:text-[4.5rem] leading-[1.05] text-charcoal mb-6 anim-fade-up delay-1" id="hero-title"> |
| Curated for the<br> |
| <span class="shimmer-text">modern minimalist</span> |
| </h1> |
| <p class="text-lg sm:text-xl text-gray-500 leading-relaxed mb-10 max-w-lg anim-fade-up delay-2" id="hero-desc"> |
| Discover thoughtfully designed essentials that elevate your everyday. Crafted with purpose, built to last. |
| </p> |
| <div class="flex flex-wrap gap-4 anim-fade-up delay-3"> |
| <button onclick="scrollToProducts()" class="group relative px-8 py-4 bg-charcoal text-white font-semibold rounded-2xl hover:bg-ink transition-all overflow-hidden"> |
| <span class="relative z-10 flex items-center gap-2"> |
| Explore Collection |
| <i class="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i> |
| </span> |
| </button> |
| <button onclick="renderAdmin()" class="px-8 py-4 bg-white/60 backdrop-blur-sm text-charcoal font-semibold rounded-2xl border border-black/8 hover:bg-white transition-all"> |
| Customize Store |
| </button> |
| </div> |
| </div> |
| <div class="relative hidden lg:block anim-fade-up delay-4"> |
| <div class="relative w-full aspect-square max-w-md mx-auto"> |
| <div class="absolute inset-0 rounded-[40px] bg-gradient-to-br from-iris/10 to-coral/10 blur-2xl"></div> |
| <div class="relative w-full h-full rounded-[40px] overflow-hidden shadow-2xl shadow-black/10 group"> |
| <img id="hero-img" src="https://images.unsplash.com/photo-1558618666-fcd25c85f82e?w=800&q=85" alt="Hero" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"> |
| |
| <div class="absolute bottom-6 left-6 right-6 glass-card rounded-2xl p-4 flex items-center gap-4"> |
| <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-iris to-irisDim flex items-center justify-center text-white font-bold text-sm"> |
| $149 |
| </div> |
| <div> |
| <div class="font-semibold text-charcoal text-sm">Wireless Speaker Pro</div> |
| <div class="text-xs text-gray-500 mt-0.5">Premium audio, 24h battery</div> |
| </div> |
| <button class="ml-auto w-9 h-9 rounded-full bg-charcoal text-white flex items-center justify-center hover:bg-iris transition-colors"> |
| <i class="fa-solid fa-plus text-xs"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div class="border-y border-black/5 bg-warm/50 overflow-hidden py-5"> |
| <div class="marquee-track flex items-center gap-16 whitespace-nowrap"> |
| <span class="text-gray-400 font-display text-sm font-semibold tracking-widest uppercase">Trusted by industry leaders</span> |
| <span class="text-gray-300 font-display font-bold text-lg">Nike</span> |
| <span class="text-gray-300 font-display font-bold text-lg">Apple</span> |
| <span class="text-gray-300 font-display font-bold text-lg">Sonos</span> |
| <span class="text-gray-300 font-display font-bold text-lg">Bose</span> |
| <span class="text-gray-300 font-display font-bold text-lg">Muji</span> |
| <span class="text-gray-300 font-display font-bold text-lg">Herman Miller</span> |
| <span class="text-gray-300 font-display font-bold text-lg">Aesop</span> |
| <span class="text-gray-400 font-display text-sm font-semibold tracking-widest uppercase">Trusted by industry leaders</span> |
| <span class="text-gray-300 font-display font-bold text-lg">Nike</span> |
| <span class="text-gray-300 font-display font-bold text-lg">Apple</span> |
| <span class="text-gray-300 font-display font-bold text-lg">Sonos</span> |
| <span class="text-gray-300 font-display font-bold text-lg">Bose</span> |
| <span class="text-gray-300 font-display font-bold text-lg">Muji</span> |
| <span class="text-gray-300 font-display font-bold text-lg">Herman Miller</span> |
| <span class="text-gray-300 font-display font-bold text-lg">Aesop</span> |
| </div> |
| </div> |
|
|
| |
| <section id="featured-section" class="py-20 px-5 sm:px-8 max-w-7xl mx-auto"> |
| <div class="flex items-end justify-between mb-12 reveal"> |
| <div> |
| <span class="text-iris text-xs font-bold tracking-widest uppercase mb-2 block">Handpicked</span> |
| <h2 class="font-display font-bold text-3xl sm:text-4xl text-charcoal" id="featured-title">Featured Products</h2> |
| </div> |
| <a href="#" onclick="filterByCategory('')" class="hidden sm:flex items-center gap-2 text-sm font-semibold text-charcoal hover:text-iris transition-colors"> |
| View all <i class="fa-solid fa-arrow-right text-xs"></i> |
| </a> |
| </div> |
| <div id="featured-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"></div> |
| </section> |
|
|
| |
| <section id="products-section" class="py-12 px-5 sm:px-8 max-w-7xl mx-auto"> |
| <div class="flex items-end justify-between mb-10 reveal"> |
| <div> |
| <span class="text-iris text-xs font-bold tracking-widest uppercase mb-2 block">Browse</span> |
| <h2 class="font-display font-bold text-3xl sm:text-4xl text-charcoal" id="products-title">Our Collection</h2> |
| </div> |
| <div class="hidden sm:flex items-center gap-2"> |
| <button onclick="setSort('newest')" class="sort-btn text-xs font-semibold px-3 py-1.5 rounded-lg text-gray-400 hover:text-charcoal hover:bg-black/5 transition-all" data-sort="newest">Newest</button> |
| <button onclick="setSort('price-low')" class="sort-btn text-xs font-semibold px-3 py-1.5 rounded-lg text-gray-400 hover:text-charcoal hover:bg-black/5 transition-all" data-sort="price-low">Price</button> |
| <button onclick="setSort('name')" class="sort-btn text-xs font-semibold px-3 py-1.5 rounded-lg text-gray-400 hover:text-charcoal hover:bg-black/5 transition-all" data-sort="name">Name</button> |
| </div> |
| </div> |
|
|
| |
| <div id="category-tabs" class="flex gap-1.5 mb-10 overflow-x-auto pb-2 reveal"> |
| <button onclick="filterByCategory('')" class="cat-tab active shrink-0 px-5 py-2.5 rounded-xl text-sm font-semibold whitespace-nowrap"> |
| All <span class="text-gray-400 ml-1 text-xs font-normal" id="cat-all-count"></span> |
| </button> |
| <button onclick="filterByCategory('electronics')" class="cat-tab shrink-0 px-5 py-2.5 rounded-xl text-sm font-semibold text-gray-500 whitespace-nowrap"> |
| Electronics <span class="text-gray-400 ml-1 text-xs font-normal" id="cat-electronics-count"></span> |
| </button> |
| <button onclick="filterByCategory('fashion')" class="cat-tab shrink-0 px-5 py-2.5 rounded-xl text-sm font-semibold text-gray-500 whitespace-nowrap"> |
| Fashion <span class="text-gray-400 ml-1 text-xs font-normal" id="cat-fashion-count"></span> |
| </button> |
| <button onclick="filterByCategory('home')" class="cat-tab shrink-0 px-5 py-2.5 rounded-xl text-sm font-semibold text-gray-500 whitespace-nowrap"> |
| Home & Living <span class="text-gray-400 ml-1 text-xs font-normal" id="cat-home-count"></span> |
| </button> |
| <button onclick="filterByCategory('sports')" class="cat-tab shrink-0 px-5 py-2.5 rounded-xl text-sm font-semibold text-gray-500 whitespace-nowrap"> |
| Sports <span class="text-gray-400 ml-1 text-xs font-normal" id="cat-sports-count"></span> |
| </button> |
| <button onclick="filterByCategory('accessories')" class="cat-tab shrink-0 px-5 py-2.5 rounded-xl text-sm font-semibold text-gray-500 whitespace-nowrap"> |
| Accessories <span class="text-gray-400 ml-1 text-xs font-normal" id="cat-accessories-count"></span> |
| </button> |
| </div> |
|
|
| |
| <div id="product-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"></div> |
|
|
| |
| <div id="empty-state" class="hidden text-center py-24 reveal"> |
| <div class="w-20 h-20 rounded-2xl bg-gray-100 flex items-center justify-center mx-auto mb-6"> |
| <i class="fa-solid fa-box-open text-2xl text-gray-300"></i> |
| </div> |
| <h3 class="font-display font-semibold text-xl text-charcoal mb-2">No products found</h3> |
| <p class="text-gray-400 text-sm">Try adjusting your search or category filter.</p> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-5 sm:px-8 max-w-7xl mx-auto"> |
| <div class="text-center mb-14 reveal"> |
| <span class="text-iris text-xs font-bold tracking-widest uppercase mb-3 block">Why Lumina</span> |
| <h2 class="font-display font-bold text-3xl sm:text-4xl text-charcoal">The experience you deserve</h2> |
| </div> |
| <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6"> |
| <div class="group p-8 rounded-3xl bg-white border border-black/5 hover:border-iris/20 hover:shadow-xl hover:shadow-iris/5 transition-all duration-500 reveal stagger-card"> |
| <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-iris/10 to-iris/5 flex items-center justify-center mb-5 group-hover:scale-110 transition-transform duration-300"> |
| <i class="fa-solid fa-truck-fast text-iris text-lg"></i> |
| </div> |
| <h3 class="font-display font-semibold text-lg text-charcoal mb-2">Free Shipping</h3> |
| <p class="text-gray-400 text-sm leading-relaxed">Complimentary delivery on all orders over $75. No hidden fees, ever.</p> |
| </div> |
| <div class="group p-8 rounded-3xl bg-white border border-black/5 hover:border-iris/20 hover:shadow-xl hover:shadow-iris/5 transition-all duration-500 reveal stagger-card"> |
| <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-coral/10 to-coral/5 flex items-center justify-center mb-5 group-hover:scale-110 transition-transform duration-300"> |
| <i class="fa-solid fa-shield-halved text-coral text-lg"></i> |
| </div> |
| <h3 class="font-display font-semibold text-lg text-charcoal mb-2">2-Year Warranty</h3> |
| <p class="text-gray-400 text-sm leading-relaxed">Every product is backed by our hassle-free two-year warranty program.</p> |
| </div> |
| <div class="group p-8 rounded-3xl bg-white border border-black/5 hover:border-iris/20 hover:shadow-xl hover:shadow-iris/5 transition-all duration-500 reveal stagger-card"> |
| <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-mint/10 to-mint/5 flex items-center justify-center mb-5 group-hover:scale-110 transition-transform duration-300"> |
| <i class="fa-solid fa-rotate-left text-mint text-lg"></i> |
| </div> |
| <h3 class="font-display font-semibold text-lg text-charcoal mb-2">Easy Returns</h3> |
| <p class="text-gray-400 text-sm leading-relaxed">Not satisfied? Return within 30 days for a full refund. Zero questions asked.</p> |
| </div> |
| <div class="group p-8 rounded-3xl bg-white border border-black/5 hover:border-iris/20 hover:shadow-xl hover:shadow-iris/5 transition-all duration-500 reveal stagger-card"> |
| <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-amber/10 to-amber/5 flex items-center justify-center mb-5 group-hover:scale-110 transition-transform duration-300"> |
| <i class="fa-solid fa-headset text-amber text-lg"></i> |
| </div> |
| <h3 class="font-display font-semibold text-lg text-charcoal mb-2">24/7 Support</h3> |
| <p class="text-gray-400 text-sm leading-relaxed">Our dedicated team is here around the clock to help you with anything.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-5 sm:px-8 max-w-7xl mx-auto"> |
| <div class="relative rounded-[40px] bg-charcoal overflow-hidden reveal"> |
| <div class="absolute inset-0 opacity-30"> |
| <div class="hero-blob blob-1" style="width:400px;height:400px;top:-100px;right:-50px;filter:blur(80px);opacity:0.5"></div> |
| <div class="hero-blob blob-2" style="width:300px;height:300px;bottom:-50px;left:-50px;filter:blur(60px);opacity:0.4"></div> |
| </div> |
| <div class="relative z-10 px-8 sm:px-16 py-16 sm:py-20 text-center max-w-2xl mx-auto"> |
| <span class="inline-block px-4 py-1.5 rounded-full bg-white/10 text-lavender text-xs font-semibold tracking-widest uppercase mb-6">Newsletter</span> |
| <h2 class="font-display font-bold text-3xl sm:text-4xl text-white mb-4">Join the inner circle</h2> |
| <p class="text-gray-400 mb-10 text-sm sm:text-base">Get early access to new drops, exclusive discounts, and stories from the makers.</p> |
| <div class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto"> |
| <input type="email" placeholder="Enter your email" class="flex-1 px-6 py-4 rounded-2xl bg-white/10 text-white text-sm placeholder-gray-400 border border-white/10 focus:border-iris/50 focus:outline-none transition-all"> |
| <button class="px-8 py-4 bg-white text-charcoal font-semibold rounded-2xl hover:bg-lavender transition-colors text-sm whitespace-nowrap">Subscribe</button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="border-t border-black/5 bg-warm"> |
| <div class="max-w-7xl mx-auto px-5 sm:px-8 py-16"> |
