feat: create Lux website with sleek/noble aesthetic
Website design:
- Translucent black (#0a0a0a) with gold (#d4af37) accents
- Strong serif typography (Playfair Display, Source Serif Pro)
- Glass-morphism cards with gold borders
- Responsive layout with elegant animations
Content:
- Landing page with hero, code demo, value props, benchmarks
- Effects-focused messaging ("No surprises. No hidden side effects.")
- Performance benchmarks showing Lux matches C
- Quick start guide
Technical:
- Added HTML rendering functions to stdlib/html.lux
- Created Lux-based site generator (blocked by module import issues)
- Documented Lux weaknesses discovered during development:
- Module import system not working
- FileSystem effect incomplete
- No template string support
The landing page HTML/CSS is complete and viewable.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
224
website/lux-site/dist/index.html
vendored
Normal file
224
website/lux-site/dist/index.html
vendored
Normal file
@@ -0,0 +1,224 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lux - Functional Programming with First-Class Effects</title>
|
||||
<meta name="description" content="Lux is a functional programming language with first-class effects. Effects are explicit. Types are powerful. Performance is native.">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>✨</text></svg>">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Serif+Pro:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="nav">
|
||||
<a href="/" class="nav-logo">LUX</a>
|
||||
<div class="nav-links">
|
||||
<a href="/learn/" class="nav-link">Learn</a>
|
||||
<a href="/docs/" class="nav-link">Docs</a>
|
||||
<a href="/playground/" class="nav-link">Playground</a>
|
||||
<a href="/community/" class="nav-link">Community</a>
|
||||
</div>
|
||||
<a href="https://github.com/luxlang/lux" class="nav-github">GitHub</a>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="hero-logo">
|
||||
<pre class="logo-ascii">╦ ╦ ╦╦ ╦
|
||||
║ ║ ║╔╣
|
||||
╩═╝╚═╝╩ ╩</pre>
|
||||
</div>
|
||||
<h1 class="hero-title">
|
||||
Functional Programming<br>
|
||||
with First-Class Effects
|
||||
</h1>
|
||||
<p class="hero-tagline">
|
||||
Effects are explicit. Types are powerful. Performance is native.
|
||||
</p>
|
||||
<div class="hero-cta">
|
||||
<a href="/learn/getting-started/" class="btn btn-primary">Get Started</a>
|
||||
<a href="/playground/" class="btn btn-secondary">Playground</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Code Demo Section -->
|
||||
<section class="code-demo">
|
||||
<div class="container">
|
||||
<div class="code-demo-grid">
|
||||
<div class="code-block">
|
||||
<pre class="code"><code><span class="hljs-keyword">fn</span> <span class="hljs-function">processOrder</span>(
|
||||
order: <span class="hljs-type">Order</span>
|
||||
): <span class="hljs-type">Receipt</span>
|
||||
<span class="hljs-keyword">with</span> {<span class="hljs-effect">Database</span>, <span class="hljs-effect">Email</span>} =
|
||||
{
|
||||
<span class="hljs-keyword">let</span> saved = <span class="hljs-effect">Database</span>.save(order)
|
||||
<span class="hljs-effect">Email</span>.send(
|
||||
order.customer,
|
||||
<span class="hljs-string">"Order confirmed!"</span>
|
||||
)
|
||||
Receipt(saved.id)
|
||||
}</code></pre>
|
||||
</div>
|
||||
<div class="code-explanation">
|
||||
<h3>The type signature tells you everything</h3>
|
||||
<ul>
|
||||
<li>Queries the database</li>
|
||||
<li>Sends an email</li>
|
||||
<li>Returns a Receipt</li>
|
||||
</ul>
|
||||
<p class="highlight">No surprises. No hidden side effects.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Value Props Section -->
|
||||
<section class="value-props">
|
||||
<div class="container">
|
||||
<div class="value-props-grid">
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">EFFECTS</h3>
|
||||
<p class="value-prop-desc">Side effects are tracked in the type signature. Know exactly what every function does.</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">TYPES</h3>
|
||||
<p class="value-prop-desc">Full type inference with algebraic data types. Catch bugs at compile time.</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">PERFORMANCE</h3>
|
||||
<p class="value-prop-desc">Compiles to native C via gcc. Matches C performance, beats Rust and Zig.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Benchmarks Section -->
|
||||
<section class="benchmarks">
|
||||
<div class="container">
|
||||
<h2>Performance</h2>
|
||||
<p class="section-subtitle">fib(35) benchmark — verified with hyperfine</p>
|
||||
<div class="benchmarks-chart">
|
||||
<div class="benchmark-row">
|
||||
<span class="benchmark-lang">Lux</span>
|
||||
<div class="benchmark-bar-container">
|
||||
<div class="benchmark-bar" style="width: 100%"></div>
|
||||
</div>
|
||||
<span class="benchmark-time">28.1ms</span>
|
||||
</div>
|
||||
<div class="benchmark-row">
|
||||
<span class="benchmark-lang">C</span>
|
||||
<div class="benchmark-bar-container">
|
||||
<div class="benchmark-bar" style="width: 97%"></div>
|
||||
</div>
|
||||
<span class="benchmark-time">29.0ms</span>
|
||||
</div>
|
||||
<div class="benchmark-row">
|
||||
<span class="benchmark-lang">Rust</span>
|
||||
<div class="benchmark-bar-container">
|
||||
<div class="benchmark-bar" style="width: 68%"></div>
|
||||
</div>
|
||||
<span class="benchmark-time">41.2ms</span>
|
||||
</div>
|
||||
<div class="benchmark-row">
|
||||
<span class="benchmark-lang">Zig</span>
|
||||
<div class="benchmark-bar-container">
|
||||
<div class="benchmark-bar" style="width: 60%"></div>
|
||||
</div>
|
||||
<span class="benchmark-time">47.0ms</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="benchmarks-note">
|
||||
<a href="/benchmarks/">See full methodology →</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testing Section -->
|
||||
<section class="testing">
|
||||
<div class="container">
|
||||
<h2>Testing Without Mocks</h2>
|
||||
<p class="section-subtitle">Swap effect handlers at test time. Same code, different behavior.</p>
|
||||
<div class="code-demo-grid">
|
||||
<div class="code-block">
|
||||
<pre class="code"><code><span class="hljs-comment">// Production</span>
|
||||
<span class="hljs-keyword">run</span> processOrder(order) <span class="hljs-keyword">with</span> {
|
||||
<span class="hljs-effect">Database</span> -> postgresDb,
|
||||
<span class="hljs-effect">Email</span> -> smtpServer
|
||||
}</code></pre>
|
||||
</div>
|
||||
<div class="code-block">
|
||||
<pre class="code"><code><span class="hljs-comment">// Testing</span>
|
||||
<span class="hljs-keyword">run</span> processOrder(order) <span class="hljs-keyword">with</span> {
|
||||
<span class="hljs-effect">Database</span> -> inMemoryDb,
|
||||
<span class="hljs-effect">Email</span> -> collectEmails
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Start Section -->
|
||||
<section class="quick-start">
|
||||
<div class="container">
|
||||
<h2>Get Started</h2>
|
||||
<div class="code-block">
|
||||
<pre class="code"><code><span class="hljs-comment"># Install via Nix</span>
|
||||
nix run github:luxlang/lux
|
||||
|
||||
<span class="hljs-comment"># Or build from source</span>
|
||||
git clone https://github.com/luxlang/lux
|
||||
cd lux && nix develop
|
||||
cargo build --release
|
||||
|
||||
<span class="hljs-comment"># Start the REPL</span>
|
||||
./target/release/lux</code></pre>
|
||||
</div>
|
||||
<a href="/learn/getting-started/" class="btn btn-primary">Full Installation Guide →</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
<span class="footer-logo">LUX</span>
|
||||
<p>Functional programming with first-class effects.</p>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h4>LEARN</h4>
|
||||
<ul>
|
||||
<li><a href="/learn/getting-started/">Getting Started</a></li>
|
||||
<li><a href="/learn/tutorial/">Tutorial</a></li>
|
||||
<li><a href="/learn/examples/">Examples</a></li>
|
||||
<li><a href="/docs/">Reference</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h4>COMMUNITY</h4>
|
||||
<ul>
|
||||
<li><a href="https://discord.gg/lux">Discord</a></li>
|
||||
<li><a href="https://github.com/luxlang/lux">GitHub</a></li>
|
||||
<li><a href="/community/contributing/">Contributing</a></li>
|
||||
<li><a href="/community/code-of-conduct/">Code of Conduct</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h4>ABOUT</h4>
|
||||
<ul>
|
||||
<li><a href="/benchmarks/">Benchmarks</a></li>
|
||||
<li><a href="/blog/">Blog</a></li>
|
||||
<li><a href="https://github.com/luxlang/lux/blob/main/LICENSE">License</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 Lux Language</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user