Files
zeekay adb69e80a5 feat: modernize to Vercel-style design
- Pure black #000 background
- Inter font with tight letter-spacing
- Large 72px stat numbers with animated counters
- Minimal borders with subtle hover effects
- Scroll-triggered fade-in animations
- Grayscale partner logos
- Clean team avatar circles
- Refined whitespace and typography
- Mobile-responsive design
2026-01-26 20:55:16 -08:00

1357 lines
42 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 Foundation - Advancing Decentralized Technology</title>
<meta name="description" content="The Lux Foundation supports research, grants, education, and open source development for decentralized technology.">
<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;700;800;900&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background-color: #000;
color: #fff;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Utilities */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.text-gray {
color: #888;
}
.text-gray-dark {
color: #666;
}
/* Fade in animation */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Navigation */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.logo-icon {
width: 32px;
height: 32px;
background: #fff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 16px;
color: #000;
}
.logo-text {
font-size: 16px;
font-weight: 600;
color: #fff;
}
.logo-text span {
color: #666;
font-weight: 400;
}
.nav-links {
display: flex;
align-items: center;
gap: 32px;
}
.nav-links a {
color: #888;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover {
color: #fff;
}
.nav-cta {
display: flex;
align-items: center;
gap: 12px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: all 0.15s ease;
cursor: pointer;
border: none;
}
.btn-primary {
background: #fff;
color: #000;
}
.btn-primary:hover {
background: #e5e5e5;
}
.btn-secondary {
background: transparent;
color: #888;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.btn-secondary:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.3);
}
.btn-large {
padding: 14px 28px;
font-size: 16px;
border-radius: 8px;
}
.mobile-menu-btn {
display: none;
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 160px 0 120px;
position: relative;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 100px;
font-size: 13px;
font-weight: 500;
color: #888;
margin-bottom: 32px;
width: fit-content;
}
.hero-badge::before {
content: '';
width: 6px;
height: 6px;
background: #22c55e;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.hero h1 {
font-size: clamp(48px, 8vw, 80px);
font-weight: 700;
line-height: 1.05;
margin-bottom: 24px;
letter-spacing: -0.03em;
max-width: 900px;
}
.hero p {
font-size: 20px;
color: #888;
margin-bottom: 48px;
max-width: 600px;
line-height: 1.7;
}
.hero-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
/* Stats Section */
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
padding: 80px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.stat {
text-align: center;
}
.stat-value {
font-size: 72px;
font-weight: 700;
color: #fff;
line-height: 1;
margin-bottom: 12px;
letter-spacing: -0.03em;
}
.stat-label {
font-size: 14px;
color: #666;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Section Styles */
section {
padding: 120px 0;
}
.section-header {
text-align: center;
max-width: 700px;
margin: 0 auto 80px;
}
.section-tag {
display: inline-block;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #666;
margin-bottom: 16px;
}
.section-title {
font-size: clamp(36px, 5vw, 56px);
font-weight: 700;
margin-bottom: 20px;
letter-spacing: -0.03em;
}
.section-desc {
font-size: 18px;
color: #888;
line-height: 1.7;
}
/* Mission Section */
.mission {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mission-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.mission-content h2 {
font-size: 48px;
font-weight: 700;
margin-bottom: 32px;
line-height: 1.15;
letter-spacing: -0.02em;
}
.mission-content p {
font-size: 17px;
color: #888;
margin-bottom: 20px;
line-height: 1.8;
}
.mission-visual {
position: relative;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
}
.mission-rings {
position: relative;
width: 320px;
height: 320px;
}
.mission-ring {
position: absolute;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: rotate 30s linear infinite;
}
.mission-ring:nth-child(1) {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.mission-ring:nth-child(2) {
width: 75%;
height: 75%;
top: 12.5%;
left: 12.5%;
animation-direction: reverse;
animation-duration: 20s;
}
.mission-ring:nth-child(3) {
width: 50%;
height: 50%;
top: 25%;
left: 25%;
animation-duration: 15s;
}
.mission-ring::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: #fff;
border-radius: 50%;
top: -4px;
left: 50%;
transform: translateX(-50%);
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Focus Areas */
.focus-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.focus-card {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 48px;
transition: all 0.3s ease;
}
.focus-card:hover {
border-color: rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.02);
}
.focus-icon {
width: 48px;
height: 48px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
font-size: 24px;
background: rgba(255, 255, 255, 0.05);
}
.focus-card h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 12px;
}
.focus-card > p {
color: #888;
font-size: 15px;
margin-bottom: 28px;
line-height: 1.7;
}
.focus-card ul {
list-style: none;
}
.focus-card li {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
font-size: 14px;
color: #666;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.focus-card li:first-child {
border-top: none;
}
.focus-card li::before {
content: '';
width: 4px;
height: 4px;
background: #444;
border-radius: 50%;
}
/* Team Section */
.team {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 80px;
}
.team-card {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 32px 24px;
text-align: center;
transition: all 0.3s ease;
}
.team-card:hover {
border-color: rgba(255, 255, 255, 0.25);
}
.team-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, #333 0%, #1a1a1a 100%);
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 600;
color: #888;
}
.team-card h4 {
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
}
.team-card .role {
font-size: 13px;
color: #666;
margin-bottom: 12px;
}
.team-card .bio {
font-size: 13px;
color: #555;
line-height: 1.6;
}
.advisors-section {
padding-top: 48px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.advisors-title {
text-align: center;
font-size: 14px;
font-weight: 600;
color: #666;
margin-bottom: 40px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.advisors-grid {
display: flex;
justify-content: center;
gap: 64px;
flex-wrap: wrap;
}
.advisor {
text-align: center;
}
.advisor-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #222 0%, #111 100%);
margin: 0 auto 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 600;
color: #666;
}
.advisor h5 {
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
}
.advisor .org {
font-size: 12px;
color: #555;
}
/* Partners Section */
.partners-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
margin-bottom: 64px;
}
.partner-logo {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 24px 16px;
display: flex;
align-items: center;
justify-content: center;
height: 72px;
transition: all 0.2s ease;
}
.partner-logo:hover {
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.02);
}
.partner-logo span {
font-size: 14px;
font-weight: 500;
color: #555;
filter: grayscale(100%);
transition: all 0.2s ease;
}
.partner-logo:hover span {
color: #888;
}
.partners-cta {
text-align: center;
}
.partners-cta p {
color: #666;
margin-bottom: 20px;
font-size: 15px;
}
/* Get Involved Section */
.involved {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.involved-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.involved-card {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 48px 36px;
text-align: center;
transition: all 0.3s ease;
}
.involved-card:hover {
border-color: rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.02);
}
.involved-icon {
width: 56px;
height: 56px;
margin: 0 auto 24px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
background: rgba(255, 255, 255, 0.05);
}
.involved-card h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
}
.involved-card p {
color: #666;
font-size: 14px;
margin-bottom: 28px;
line-height: 1.7;
}
/* Newsletter Section */
.newsletter {
padding: 100px 0;
}
.newsletter-box {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 80px 48px;
text-align: center;
}
.newsletter-content {
max-width: 480px;
margin: 0 auto;
}
.newsletter h2 {
font-size: 40px;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.newsletter p {
color: #666;
font-size: 16px;
margin-bottom: 36px;
}
.newsletter-form {
display: flex;
gap: 12px;
max-width: 420px;
margin: 0 auto;
}
.newsletter-form input {
flex: 1;
padding: 14px 18px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #fff;
font-size: 15px;
outline: none;
transition: all 0.2s;
}
.newsletter-form input::placeholder {
color: #555;
}
.newsletter-form input:focus {
border-color: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.08);
}
/* Footer */
footer {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 64px 0 32px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 64px;
}
.footer-brand p {
color: #555;
font-size: 14px;
margin-top: 16px;
max-width: 280px;
line-height: 1.7;
}
.footer-col h4 {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #555;
margin-bottom: 20px;
}
.footer-col ul {
list-style: none;
}
.footer-col li {
margin-bottom: 12px;
}
.footer-col a {
color: #666;
text-decoration: none;
font-size: 14px;
transition: color 0.2s;
}
.footer-col a:hover {
color: #fff;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-bottom p {
color: #444;
font-size: 13px;
}
.footer-social {
display: flex;
gap: 8px;
}
.footer-social a {
width: 36px;
height: 36px;
border-radius: 8px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #555;
text-decoration: none;
transition: all 0.2s;
font-size: 13px;
font-weight: 500;
}
.footer-social a:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
/* Responsive */
@media (max-width: 1024px) {
.stats {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.stat-value {
font-size: 56px;
}
.mission-grid {
grid-template-columns: 1fr;
gap: 64px;
}
.mission-visual {
order: -1;
}
.focus-grid {
grid-template-columns: 1fr;
}
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
.partners-grid {
grid-template-columns: repeat(3, 1fr);
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.nav-links, .nav-cta {
display: none;
}
.mobile-menu-btn {
display: block;
}
.hero {
padding: 120px 0 80px;
}
.hero h1 {
font-size: 40px;
}
.hero p {
font-size: 17px;
}
.hero-buttons {
flex-direction: column;
}
.stats {
grid-template-columns: 1fr;
gap: 40px;
}
.stat-value {
font-size: 64px;
}
section {
padding: 80px 0;
}
.section-header {
margin-bottom: 48px;
}
.team-grid {
grid-template-columns: 1fr;
}
.involved-grid {
grid-template-columns: 1fr;
}
.partners-grid {
grid-template-columns: repeat(2, 1fr);
}
.advisors-grid {
gap: 32px;
}
.newsletter-box {
padding: 48px 24px;
}
.newsletter-form {
flex-direction: column;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.footer-bottom {
flex-direction: column;
gap: 20px;
text-align: center;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav>
<div class="nav-container">
<a href="/" class="logo">
<div class="logo-icon">L</div>
<div class="logo-text">Lux <span>Foundation</span></div>
</a>
<div class="nav-links">
<a href="#mission">Mission</a>
<a href="#focus">Focus Areas</a>
<a href="#team">Team</a>
<a href="#partners">Partners</a>
</div>
<div class="nav-cta">
<a href="https://docs.lux.network" class="btn btn-secondary">Docs</a>
<a href="#involved" class="btn btn-primary">Apply for Grant</a>
</div>
<button class="mobile-menu-btn">&#9776;</button>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-badge fade-in">Non-Profit Foundation</div>
<h1 class="fade-in">Advancing Decentralized Technology for Everyone</h1>
<p class="fade-in">The Lux Foundation supports groundbreaking research, funds innovative projects, and builds educational resources to accelerate adoption worldwide.</p>
<div class="hero-buttons fade-in">
<a href="#involved" class="btn btn-primary btn-large">Apply for a Grant</a>
<a href="https://lux.network" class="btn btn-secondary btn-large">Explore Lux Network</a>
</div>
</div>
</section>
<!-- Stats Section -->
<section style="padding-top: 0;">
<div class="container">
<div class="stats fade-in">
<div class="stat">
<div class="stat-value" data-value="50" data-prefix="$" data-suffix="M+">$0M+</div>
<div class="stat-label">Total Funded</div>
</div>
<div class="stat">
<div class="stat-value" data-value="100" data-prefix="" data-suffix="+">0+</div>
<div class="stat-label">Grants Awarded</div>
</div>
<div class="stat">
<div class="stat-value" data-value="500" data-prefix="" data-suffix="+">0+</div>
<div class="stat-label">Developers Supported</div>
</div>
</div>
</div>
</section>
<!-- Mission Section -->
<section class="mission" id="mission">
<div class="container">
<div class="mission-grid">
<div class="mission-content fade-in">
<span class="section-tag">Our Mission</span>
<h2>Building the Infrastructure for a Decentralized Future</h2>
<p>The Lux Foundation is a non-profit organization dedicated to fostering the growth and adoption of decentralized technologies. We believe in a future where individuals have greater control over their data, assets, and digital interactions.</p>
<p>Through strategic grants, cutting-edge research, comprehensive education, and open-source development, we're building the foundation for Web3 and beyond.</p>
<p>Our work spans consensus mechanisms, post-quantum cryptography, cross-chain interoperability, and developer tooling - all designed to make decentralized technology more accessible, secure, and scalable.</p>
</div>
<div class="mission-visual fade-in">
<div class="mission-rings">
<div class="mission-ring"></div>
<div class="mission-ring"></div>
<div class="mission-ring"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Focus Areas Section -->
<section id="focus">
<div class="container">
<div class="section-header fade-in">
<span class="section-tag">Focus Areas</span>
<h2 class="section-title">Where We Make Impact</h2>
<p class="section-desc">Our four pillars of support drive innovation across the decentralized ecosystem.</p>
</div>
<div class="focus-grid">
<div class="focus-card fade-in">
<div class="focus-icon">&#128300;</div>
<h3>Research</h3>
<p>Advancing the theoretical and practical foundations of blockchain technology through academic partnerships and internal research initiatives.</p>
<ul>
<li>Consensus mechanism optimization</li>
<li>Post-quantum cryptography</li>
<li>Scalability solutions</li>
<li>Privacy-preserving technologies</li>
</ul>
</div>
<div class="focus-card fade-in">
<div class="focus-icon">&#128176;</div>
<h3>Grants</h3>
<p>Funding innovative projects that push the boundaries of what's possible with decentralized technology.</p>
<ul>
<li>Infrastructure development</li>
<li>DeFi protocols</li>
<li>Developer tooling</li>
<li>Community initiatives</li>
</ul>
</div>
<div class="focus-card fade-in">
<div class="focus-icon">&#127891;</div>
<h3>Education</h3>
<p>Creating comprehensive learning resources and programs to onboard the next generation of Web3 builders.</p>
<ul>
<li>Developer bootcamps</li>
<li>University partnerships</li>
<li>Documentation & tutorials</li>
<li>Workshops & conferences</li>
</ul>
</div>
<div class="focus-card fade-in">
<div class="focus-icon">&#128187;</div>
<h3>Open Source</h3>
<p>Building and maintaining critical open-source infrastructure that benefits the entire ecosystem.</p>
<ul>
<li>Core protocol development</li>
<li>SDK & libraries</li>
<li>Security auditing tools</li>
<li>Testing frameworks</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section class="team" id="team">
<div class="container">
<div class="section-header fade-in">
<span class="section-tag">Our Team</span>
<h2 class="section-title">Leadership & Advisors</h2>
<p class="section-desc">Experienced leaders from blockchain, academia, and technology driving our mission forward.</p>
</div>
<div class="team-grid">
<div class="team-card fade-in">
<div class="team-avatar">ZS</div>
<h4>Zach Sarette</h4>
<div class="role">Executive Director</div>
<div class="bio">Former CTO at Hanzo AI. 15+ years in distributed systems.</div>
</div>
<div class="team-card fade-in">
<div class="team-avatar">AK</div>
<h4>Dr. Amir Kazemi</h4>
<div class="role">Research Director</div>
<div class="bio">PhD Cryptography, Stanford. Post-quantum security expert.</div>
</div>
<div class="team-card fade-in">
<div class="team-avatar">ML</div>
<h4>Maya Lin</h4>
<div class="role">Grants Director</div>
<div class="bio">Former Ethereum Foundation. 100+ projects funded.</div>
</div>
<div class="team-card fade-in">
<div class="team-avatar">JR</div>
<h4>James Rodriguez</h4>
<div class="role">Education Lead</div>
<div class="bio">Built Web3 curriculum for 50+ universities worldwide.</div>
</div>
</div>
<div class="advisors-section fade-in">
<h3 class="advisors-title">Advisory Board</h3>
<div class="advisors-grid">
<div class="advisor">
<div class="advisor-avatar">VB</div>
<h5>Dr. Victor Bell</h5>
<div class="org">MIT CSAIL</div>
</div>
<div class="advisor">
<div class="advisor-avatar">SC</div>
<h5>Sarah Chen</h5>
<div class="org">a16z crypto</div>
</div>
<div class="advisor">
<div class="advisor-avatar">MK</div>
<h5>Prof. Michael Kim</h5>
<div class="org">Berkeley Blockchain</div>
</div>
<div class="advisor">
<div class="advisor-avatar">EP</div>
<h5>Elena Petrov</h5>
<div class="org">Protocol Labs</div>
</div>
<div class="advisor">
<div class="advisor-avatar">DW</div>
<h5>David Wong</h5>
<div class="org">NCC Group</div>
</div>
</div>
</div>
</div>
</section>
<!-- Partners Section -->
<section id="partners">
<div class="container">
<div class="section-header fade-in">
<span class="section-tag">Partners</span>
<h2 class="section-title">Trusted by Industry Leaders</h2>
<p class="section-desc">Collaborating with world-class organizations to advance decentralized technology.</p>
</div>
<div class="partners-grid fade-in">
<div class="partner-logo"><span>MIT</span></div>
<div class="partner-logo"><span>Stanford</span></div>
<div class="partner-logo"><span>Berkeley</span></div>
<div class="partner-logo"><span>Chainlink</span></div>
<div class="partner-logo"><span>Circle</span></div>
<div class="partner-logo"><span>Fireblocks</span></div>
<div class="partner-logo"><span>Ledger</span></div>
<div class="partner-logo"><span>OpenZeppelin</span></div>
<div class="partner-logo"><span>Trail of Bits</span></div>
<div class="partner-logo"><span>Electric Capital</span></div>
<div class="partner-logo"><span>Paradigm</span></div>
<div class="partner-logo"><span>Coinbase</span></div>
</div>
<div class="partners-cta fade-in">
<p>Interested in partnering with the Lux Foundation?</p>
<a href="mailto:[email protected]" class="btn btn-secondary">Become a Partner</a>
</div>
</div>
</section>
<!-- Get Involved Section -->
<section class="involved" id="involved">
<div class="container">
<div class="section-header fade-in">
<span class="section-tag">Get Involved</span>
<h2 class="section-title">Join Our Mission</h2>
<p class="section-desc">There are many ways to contribute to the decentralized future we're building together.</p>
</div>
<div class="involved-grid">
<div class="involved-card fade-in">
<div class="involved-icon">&#128640;</div>
<h3>Apply for a Grant</h3>
<p>Building something innovative? Apply for funding ranging from $10K to $1M+ for projects that advance decentralized technology.</p>
<a href="https://grants.lux.foundation" class="btn btn-primary">Apply Now</a>
</div>
<div class="involved-card fade-in">
<div class="involved-icon">&#128104;&#8205;&#128187;</div>
<h3>Contribute Code</h3>
<p>Join our open-source community and help build the infrastructure that powers the decentralized web.</p>
<a href="https://github.com/luxfi" class="btn btn-secondary">View GitHub</a>
</div>
<div class="involved-card fade-in">
<div class="involved-icon">&#127793;</div>
<h3>Become a Fellow</h3>
<p>Our fellowship program supports researchers and builders working on breakthrough decentralized technologies.</p>
<a href="https://fellowship.lux.foundation" class="btn btn-secondary">Learn More</a>
</div>
</div>
</div>
</section>
<!-- Newsletter Section -->
<section class="newsletter">
<div class="container">
<div class="newsletter-box fade-in">
<div class="newsletter-content">
<h2>Stay in the Loop</h2>
<p>Get the latest updates on grants, research, and events from the Lux Foundation.</p>
<form class="newsletter-form">
<input type="email" placeholder="Enter your email" required>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a href="/" class="logo">
<div class="logo-icon">L</div>
<div class="logo-text">Lux <span>Foundation</span></div>
</a>
<p>A non-profit organization dedicated to advancing decentralized technology for the benefit of humanity.</p>
</div>
<div class="footer-col">
<h4>Foundation</h4>
<ul>
<li><a href="#mission">Mission</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#partners">Partners</a></li>
<li><a href="/careers">Careers</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Programs</h4>
<ul>
<li><a href="https://grants.lux.foundation">Grants</a></li>
<li><a href="https://fellowship.lux.foundation">Fellowship</a></li>
<li><a href="/research">Research</a></li>
<li><a href="/education">Education</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Resources</h4>
<ul>
<li><a href="https://docs.lux.network">Documentation</a></li>
<li><a href="https://github.com/luxfi">GitHub</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/press">Press Kit</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Network</h4>
<ul>
<li><a href="https://lux.network">Lux Network</a></li>
<li><a href="https://explorer.lux.network">Explorer</a></li>
<li><a href="https://bridge.lux.network">Bridge</a></li>
<li><a href="https://wallet.lux.network">Wallet</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2026 Lux Foundation. All rights reserved.</p>
<div class="footer-social">
<a href="https://twitter.com/luxfi" title="Twitter">X</a>
<a href="https://github.com/luxfi" title="GitHub">GH</a>
<a href="https://discord.gg/luxfi" title="Discord">DC</a>
<a href="https://t.me/luxfi" title="Telegram">TG</a>
</div>
</div>
</div>
</footer>
<script>
// Intersection Observer for fade-in animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
document.querySelectorAll('.fade-in').forEach(el => {
observer.observe(el);
});
// Animate stat numbers
const animateValue = (element, start, end, duration, prefix, suffix) => {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
const value = Math.floor(easeOutQuart * (end - start) + start);
element.textContent = prefix + value + suffix;
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
};
const statsObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const statValues = entry.target.querySelectorAll('.stat-value');
statValues.forEach(stat => {
const value = parseInt(stat.dataset.value);
const prefix = stat.dataset.prefix || '';
const suffix = stat.dataset.suffix || '';
animateValue(stat, 0, value, 2000, prefix, suffix);
});
statsObserver.unobserve(entry.target);
}
});
}, { threshold: 0.5 });
const statsSection = document.querySelector('.stats');
if (statsSection) {
statsObserver.observe(statsSection);
}
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Newsletter form handling
document.querySelector('.newsletter-form').addEventListener('submit', function(e) {
e.preventDefault();
const email = this.querySelector('input').value;
alert('Thank you for subscribing! We\'ll keep you updated.');
this.reset();
});
</script>
</body>
</html>