mirror of
https://github.com/luxfi/store.git
synced 2026-10-30 15:15:58 +00:00
- Pure #000 background with #ededed text - Inter font with reduced weight variants (400/500/600) - Cleaner category cards with 1px gap grid layout - Product cards with subtle borders and hover lift - Minimal hero with gradient text and clean CTAs - Subtle coming soon badges with backdrop blur - Sleek newsletter input design - Simplified features bar - Consistent 0.15s transitions
955 lines
32 KiB
HTML
955 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lux Store - Official Merchandise</title>
|
|
<meta name="description" content="Official Lux Network merchandise. Hardware wallets, apparel, and accessories for the Lux community.">
|
|
<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=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--bg: #000;
|
|
--bg-subtle: #0a0a0a;
|
|
--bg-card: #111;
|
|
--border: #222;
|
|
--border-hover: #333;
|
|
--text: #ededed;
|
|
--text-secondary: #888;
|
|
--text-muted: #666;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Header */
|
|
header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
backdrop-filter: saturate(180%) blur(20px);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
nav {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
height: 64px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
text-decoration: none;
|
|
color: var(--text);
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: var(--text);
|
|
color: var(--bg);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.logo-text span {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 32px;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.cart-btn {
|
|
background: transparent;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 8px 12px;
|
|
color: var(--text);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.cart-btn:hover {
|
|
background: var(--bg-card);
|
|
border-color: var(--border-hover);
|
|
}
|
|
|
|
/* Hero */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 120px 24px 80px;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 9999px;
|
|
padding: 6px 16px;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.hero-badge-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: #0070f3;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(48px, 10vw, 80px);
|
|
font-weight: 600;
|
|
letter-spacing: -0.04em;
|
|
line-height: 1;
|
|
margin-bottom: 24px;
|
|
background: linear-gradient(180deg, #fff 0%, #888 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 18px;
|
|
color: var(--text-secondary);
|
|
max-width: 560px;
|
|
margin: 0 auto 48px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.hero-cta {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 20px;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
transition: all 0.15s;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--text);
|
|
color: var(--bg);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #ccc;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--bg-card);
|
|
border-color: var(--border-hover);
|
|
}
|
|
|
|
/* Categories */
|
|
.categories {
|
|
padding: 120px 24px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 36px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.section-subtitle {
|
|
color: var(--text-secondary);
|
|
font-size: 16px;
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.categories-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1px;
|
|
background: var(--border);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.category-card {
|
|
background: var(--bg);
|
|
padding: 48px 32px;
|
|
text-align: center;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.category-card:hover {
|
|
background: var(--bg-subtle);
|
|
}
|
|
|
|
.category-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin: 0 auto 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.category-card h3 {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.category-card p {
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
margin-bottom: 16px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.category-count {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Featured Products */
|
|
.featured {
|
|
padding: 120px 24px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.featured-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.products-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
gap: 24px;
|
|
}
|
|
|
|
.product-card {
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.product-card:hover {
|
|
transform: translateY(-4px);
|
|
border-color: var(--border-hover);
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.product-image {
|
|
aspect-ratio: 4/3;
|
|
background: var(--bg-subtle);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.product-placeholder {
|
|
font-size: 48px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.product-badge {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 16px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid var(--border);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
padding: 6px 10px;
|
|
border-radius: 9999px;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.product-info {
|
|
padding: 20px;
|
|
}
|
|
|
|
.product-name {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.product-description {
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
margin-bottom: 20px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.product-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.product-price {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.product-price.tbd {
|
|
color: var(--text-muted);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.notify-btn {
|
|
background: transparent;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 8px 14px;
|
|
color: var(--text);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.notify-btn:hover {
|
|
background: var(--text);
|
|
color: var(--bg);
|
|
border-color: var(--text);
|
|
}
|
|
|
|
/* Features */
|
|
.features {
|
|
padding: 80px 24px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.features-grid {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 48px;
|
|
}
|
|
|
|
.feature-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: 0 auto 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.feature-item h4 {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.feature-item p {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Newsletter */
|
|
.newsletter {
|
|
padding: 120px 24px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.newsletter-content {
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.newsletter h2 {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.newsletter p {
|
|
color: var(--text-secondary);
|
|
font-size: 15px;
|
|
margin-bottom: 32px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.newsletter-form {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.newsletter-input {
|
|
flex: 1;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 12px 16px;
|
|
font-size: 14px;
|
|
color: var(--text);
|
|
outline: none;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.newsletter-input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.newsletter-input:focus {
|
|
border-color: var(--border-hover);
|
|
}
|
|
|
|
.newsletter-note {
|
|
margin-top: 16px;
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
padding: 48px 24px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.footer-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.footer-brand-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
background: var(--text);
|
|
color: var(--bg);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.footer-brand-text {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 24px;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.footer-social {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
|
|
.footer-social a {
|
|
color: var(--text-muted);
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.footer-social a:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.footer-bottom {
|
|
max-width: 1200px;
|
|
margin: 32px auto 0;
|
|
padding-top: 32px;
|
|
border-top: 1px solid var(--border);
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-copyright {
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 900px) {
|
|
.categories-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.features-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 32px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.hero-cta {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.btn {
|
|
justify-content: center;
|
|
}
|
|
|
|
.products-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.features-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.newsletter-form {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.footer-content {
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-links {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<a href="/" class="logo">
|
|
<div class="logo-icon">L</div>
|
|
<div class="logo-text">lux<span>.store</span></div>
|
|
</a>
|
|
<div class="nav-links">
|
|
<a href="#categories">Categories</a>
|
|
<a href="#products">Products</a>
|
|
<a href="https://lux.network" target="_blank">Network</a>
|
|
<a href="https://docs.lux.network" target="_blank">Docs</a>
|
|
</div>
|
|
<button class="cart-btn">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="9" cy="21" r="1"></circle>
|
|
<circle cx="20" cy="21" r="1"></circle>
|
|
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
|
</svg>
|
|
Cart
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<div class="hero-badge">
|
|
<span class="hero-badge-dot"></span>
|
|
Store Launch Coming Soon
|
|
</div>
|
|
<h1>Official Lux<br>Merchandise</h1>
|
|
<p class="hero-subtitle">
|
|
Premium hardware wallets, exclusive apparel, and accessories for the Lux Network community.
|
|
</p>
|
|
<div class="hero-cta">
|
|
<a href="#newsletter" class="btn btn-primary">
|
|
Get Early Access
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="#products" class="btn btn-secondary">
|
|
Preview Products
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="categories" id="categories">
|
|
<div class="section-header">
|
|
<p class="section-label">Categories</p>
|
|
<h2 class="section-title">Shop by Category</h2>
|
|
<p class="section-subtitle">
|
|
From secure hardware wallets to exclusive community apparel.
|
|
</p>
|
|
</div>
|
|
<div class="categories-grid">
|
|
<div class="category-card">
|
|
<div class="category-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<rect x="2" y="6" width="20" height="12" rx="2"></rect>
|
|
<path d="M6 10h.01M6 14h.01M10 10h8M10 14h4"></path>
|
|
</svg>
|
|
</div>
|
|
<h3>Hardware Wallets</h3>
|
|
<p>Secure your assets with cold storage designed for Lux.</p>
|
|
<p class="category-count">3 products coming soon</p>
|
|
</div>
|
|
<div class="category-card">
|
|
<div class="category-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M20.38 3.46L16 2a4 4 0 01-8 0L3.62 3.46a2 2 0 00-1.34 2.23l.58 3.47a1 1 0 00.99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 002-2V10h2.15a1 1 0 00.99-.84l.58-3.47a2 2 0 00-1.34-2.23z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3>Apparel</h3>
|
|
<p>Premium t-shirts, hoodies, and caps with Lux designs.</p>
|
|
<p class="category-count">8 products coming soon</p>
|
|
</div>
|
|
<div class="category-card">
|
|
<div class="category-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon>
|
|
</svg>
|
|
</div>
|
|
<h3>Accessories</h3>
|
|
<p>Stickers, keychains, desk mats, and more.</p>
|
|
<p class="category-count">12 products coming soon</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="featured" id="products">
|
|
<div class="featured-container">
|
|
<div class="section-header">
|
|
<p class="section-label">Preview</p>
|
|
<h2 class="section-title">Featured Products</h2>
|
|
<p class="section-subtitle">
|
|
Be the first to know when these items become available.
|
|
</p>
|
|
</div>
|
|
<div class="products-grid">
|
|
<div class="product-card">
|
|
<div class="product-image">
|
|
<span class="product-badge">Coming Soon</span>
|
|
<span class="product-placeholder">🛡</span>
|
|
</div>
|
|
<div class="product-info">
|
|
<h3 class="product-name">Lux Wallet Pro</h3>
|
|
<p class="product-description">Air-gapped hardware wallet with secure element. Multi-chain support for Lux, EVM, and Bitcoin.</p>
|
|
<div class="product-footer">
|
|
<span class="product-price tbd">Price TBD</span>
|
|
<button class="notify-btn">Notify Me</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<div class="product-image">
|
|
<span class="product-badge">Coming Soon</span>
|
|
<span class="product-placeholder">🔑</span>
|
|
</div>
|
|
<div class="product-info">
|
|
<h3 class="product-name">Lux Wallet Lite</h3>
|
|
<p class="product-description">Compact hardware wallet with USB-C. Perfect for everyday transactions and staking.</p>
|
|
<div class="product-footer">
|
|
<span class="product-price tbd">Price TBD</span>
|
|
<button class="notify-btn">Notify Me</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<div class="product-image">
|
|
<span class="product-badge">Coming Soon</span>
|
|
<span class="product-placeholder">👕</span>
|
|
</div>
|
|
<div class="product-info">
|
|
<h3 class="product-name">Genesis Hoodie</h3>
|
|
<p class="product-description">Premium heavyweight hoodie with embroidered Lux logo. Limited edition genesis collection.</p>
|
|
<div class="product-footer">
|
|
<span class="product-price tbd">Price TBD</span>
|
|
<button class="notify-btn">Notify Me</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<div class="product-image">
|
|
<span class="product-badge">Coming Soon</span>
|
|
<span class="product-placeholder">👔</span>
|
|
</div>
|
|
<div class="product-info">
|
|
<h3 class="product-name">Builder T-Shirt</h3>
|
|
<p class="product-description">Soft organic cotton tee with minimalist Lux branding. Available in black and white.</p>
|
|
<div class="product-footer">
|
|
<span class="product-price tbd">Price TBD</span>
|
|
<button class="notify-btn">Notify Me</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<div class="product-image">
|
|
<span class="product-badge">Coming Soon</span>
|
|
<span class="product-placeholder">🧢</span>
|
|
</div>
|
|
<div class="product-info">
|
|
<h3 class="product-name">Validator Cap</h3>
|
|
<p class="product-description">Structured snapback cap with embroidered validator badge. One size fits most.</p>
|
|
<div class="product-footer">
|
|
<span class="product-price tbd">Price TBD</span>
|
|
<button class="notify-btn">Notify Me</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<div class="product-image">
|
|
<span class="product-badge">Coming Soon</span>
|
|
<span class="product-placeholder">🖥</span>
|
|
</div>
|
|
<div class="product-info">
|
|
<h3 class="product-name">Lux Desk Mat</h3>
|
|
<p class="product-description">Extended desk mat with network topology design. Anti-slip base, stitched edges.</p>
|
|
<div class="product-footer">
|
|
<span class="product-price tbd">Price TBD</span>
|
|
<button class="notify-btn">Notify Me</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="features">
|
|
<div class="features-grid">
|
|
<div class="feature-item">
|
|
<div class="feature-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<rect x="1" y="3" width="15" height="13"></rect>
|
|
<polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
|
|
<circle cx="5.5" cy="18.5" r="2.5"></circle>
|
|
<circle cx="18.5" cy="18.5" r="2.5"></circle>
|
|
</svg>
|
|
</div>
|
|
<h4>Global Shipping</h4>
|
|
<p>Worldwide delivery</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
|
</svg>
|
|
</div>
|
|
<h4>Secure Checkout</h4>
|
|
<p>Crypto & card payments</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
|
|
</svg>
|
|
</div>
|
|
<h4>24/7 Support</h4>
|
|
<p>Community-powered</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<div class="feature-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<polyline points="20 12 20 22 4 22 4 12"></polyline>
|
|
<rect x="2" y="7" width="20" height="5"></rect>
|
|
<line x1="12" y1="22" x2="12" y2="7"></line>
|
|
<path d="M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7z"></path>
|
|
<path d="M12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z"></path>
|
|
</svg>
|
|
</div>
|
|
<h4>Limited Editions</h4>
|
|
<p>Exclusive drops</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="newsletter" id="newsletter">
|
|
<div class="newsletter-content">
|
|
<h2>Get Early Access</h2>
|
|
<p>Be the first to know when our store launches. Subscribers get exclusive discounts and early access to limited edition drops.</p>
|
|
<form class="newsletter-form" onsubmit="return handleSubmit(event)">
|
|
<input type="email" class="newsletter-input" placeholder="[email protected]" required>
|
|
<button type="submit" class="btn btn-primary">Subscribe</button>
|
|
</form>
|
|
<p class="newsletter-note">No spam, ever. Unsubscribe anytime.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="footer-content">
|
|
<div class="footer-brand">
|
|
<div class="footer-brand-icon">L</div>
|
|
<div class="footer-brand-text">lux.store</div>
|
|
</div>
|
|
<div class="footer-links">
|
|
<a href="https://lux.network">Network</a>
|
|
<a href="https://docs.lux.network">Docs</a>
|
|
<a href="https://github.com/luxfi">GitHub</a>
|
|
<a href="#">Terms</a>
|
|
<a href="#">Privacy</a>
|
|
</div>
|
|
<div class="footer-social">
|
|
<a href="https://twitter.com/luxnetwork" target="_blank" aria-label="Twitter">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
|
</svg>
|
|
</a>
|
|
<a href="https://discord.gg/luxnetwork" target="_blank" aria-label="Discord">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
|
|
</svg>
|
|
</a>
|
|
<a href="https://github.com/luxfi" target="_blank" aria-label="GitHub">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p class="footer-copyright">© 2026 Lux Partners. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
function handleSubmit(event) {
|
|
event.preventDefault();
|
|
const btn = event.target.querySelector('button');
|
|
btn.textContent = 'Subscribed!';
|
|
setTimeout(() => {
|
|
btn.textContent = 'Subscribe';
|
|
event.target.reset();
|
|
}, 2000);
|
|
return false;
|
|
}
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
document.querySelector(this.getAttribute('href'))?.scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|