Files
zeekay 8a00b2d311 feat: redesign to modern Vercel aesthetic
- 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
2026-01-26 20:54:57 -08:00

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">&#128737;</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">&#128273;</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">&#128085;</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">&#128084;</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">&#129506;</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">&#128421;</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">&copy; 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>