feat: redesign website to showcase all Lux capabilities
- New tagline: "The Language That Changes Everything" - Highlight 6 key features: algebraic effects, behavioral types, schema evolution, dual compilation, native performance, batteries included - Add sections for behavioral types (is pure, is total, is idempotent) - Add section for schema evolution with migration examples - Add section for dual compilation (C and JavaScript) - Add "Why Lux?" comparisons (vs Haskell, Rust, Go, TypeScript, Elm, Zig) - Add built-in effects showcase (Console, File, Http, Sql, etc.) - Add developer tools section (package manager, LSP, REPL, etc.) - Fix navigation to use anchor links (single-page site) - Update footer to link to GitHub docs/examples - Add README with local testing instructions Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
403
website/lux-site/dist/index.html
vendored
403
website/lux-site/dist/index.html
vendored
@@ -3,8 +3,8 @@
|
||||
<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.">
|
||||
<title>Lux - The Language That Changes Everything</title>
|
||||
<meta name="description" content="Lux: Algebraic effects, behavioral types, schema evolution, and native performance. Compile to C or JavaScript. One language, every platform.">
|
||||
<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">
|
||||
@@ -12,12 +12,12 @@
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="nav">
|
||||
<a href="/" class="nav-logo">LUX</a>
|
||||
<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>
|
||||
<a href="#features" class="nav-link">Features</a>
|
||||
<a href="#effects" class="nav-link">Effects</a>
|
||||
<a href="#types" class="nav-link">Types</a>
|
||||
<a href="#install" class="nav-link">Install</a>
|
||||
</div>
|
||||
<a href="https://github.com/luxlang/lux" class="nav-github">GitHub</a>
|
||||
</nav>
|
||||
@@ -31,64 +31,205 @@
|
||||
╩═╝╚═╝╩ ╩</pre>
|
||||
</div>
|
||||
<h1 class="hero-title">
|
||||
Functional Programming<br>
|
||||
with First-Class Effects
|
||||
The Language That<br>
|
||||
Changes Everything
|
||||
</h1>
|
||||
<p class="hero-tagline">
|
||||
Effects are explicit. Types are powerful. Performance is native.
|
||||
Algebraic effects. Behavioral types. Schema evolution.<br>
|
||||
Compile to native C or JavaScript. One language, every platform.
|
||||
</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>
|
||||
<a href="#install" class="btn btn-primary">Get Started</a>
|
||||
<a href="#features" class="btn btn-secondary">See Features</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Code Demo Section -->
|
||||
<section class="code-demo">
|
||||
<!-- What Makes Lux Different -->
|
||||
<section id="features" class="value-props">
|
||||
<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>
|
||||
<h2>Not Just Another Functional Language</h2>
|
||||
<p class="section-subtitle">Lux solves problems other languages can't even express</p>
|
||||
<div class="value-props-grid">
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">ALGEBRAIC EFFECTS</h3>
|
||||
<p class="value-prop-desc">Side effects in the type signature. Swap handlers for testing. No dependency injection frameworks.</p>
|
||||
</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 class="value-prop card">
|
||||
<h3 class="value-prop-title">BEHAVIORAL TYPES</h3>
|
||||
<p class="value-prop-desc">Prove functions are pure, total, deterministic, or idempotent. The compiler verifies it.</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">SCHEMA EVOLUTION</h3>
|
||||
<p class="value-prop-desc">Built-in type versioning with automatic migrations. Change your data types safely.</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">DUAL COMPILATION</h3>
|
||||
<p class="value-prop-desc">Same code compiles to native C (via GCC) or JavaScript. Server and browser from one source.</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">NATIVE PERFORMANCE</h3>
|
||||
<p class="value-prop-desc">Beats Rust and Zig on recursive benchmarks. Zero-cost effect abstraction via evidence passing.</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">BATTERIES INCLUDED</h3>
|
||||
<p class="value-prop-desc">Package manager, LSP, REPL, debugger, formatter, test runner. All built in.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Value Props Section -->
|
||||
<section class="value-props">
|
||||
<!-- Effects Section -->
|
||||
<section id="effects" class="code-demo">
|
||||
<div class="container">
|
||||
<div class="value-props-grid">
|
||||
<h2>Effects: The Core Innovation</h2>
|
||||
<p class="section-subtitle">Every side effect is tracked in the type signature</p>
|
||||
<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">Sql</span>, <span class="hljs-effect">Http</span>, <span class="hljs-effect">Console</span>} =
|
||||
{
|
||||
<span class="hljs-keyword">let</span> saved = <span class="hljs-effect">Sql</span>.execute(db,
|
||||
<span class="hljs-string">"INSERT INTO orders..."</span>)
|
||||
<span class="hljs-effect">Http</span>.post(webhook, order)
|
||||
<span class="hljs-effect">Console</span>.print(<span class="hljs-string">"Order {order.id} saved"</span>)
|
||||
Receipt(saved.id)
|
||||
}</code></pre>
|
||||
</div>
|
||||
<div class="code-explanation">
|
||||
<h3>The signature tells you everything:</h3>
|
||||
<ul>
|
||||
<li><strong>Sql</strong> — Touches the database</li>
|
||||
<li><strong>Http</strong> — Makes network calls</li>
|
||||
<li><strong>Console</strong> — Prints output</li>
|
||||
</ul>
|
||||
<p class="highlight">No surprises. No hidden side effects. Ever.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testing Section -->
|
||||
<section class="testing">
|
||||
<div class="container">
|
||||
<h2>Testing Without Mocks or DI Frameworks</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: real database, real HTTP</span>
|
||||
<span class="hljs-keyword">run</span> processOrder(order) <span class="hljs-keyword">with</span> {
|
||||
<span class="hljs-effect">Sql</span> -> postgresHandler,
|
||||
<span class="hljs-effect">Http</span> -> realHttpClient,
|
||||
<span class="hljs-effect">Console</span> -> stdoutHandler
|
||||
}</code></pre>
|
||||
</div>
|
||||
<div class="code-block">
|
||||
<pre class="code"><code><span class="hljs-comment">// Test: in-memory DB, captured calls</span>
|
||||
<span class="hljs-keyword">run</span> processOrder(order) <span class="hljs-keyword">with</span> {
|
||||
<span class="hljs-effect">Sql</span> -> inMemoryDb,
|
||||
<span class="hljs-effect">Http</span> -> captureRequests,
|
||||
<span class="hljs-effect">Console</span> -> devNull
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<p class="highlight" style="text-align: center; margin-top: 2rem;">No Mockito. No dependency injection. Just swap the handlers.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Behavioral Types Section -->
|
||||
<section id="types" class="code-demo" style="background: var(--bg-secondary);">
|
||||
<div class="container">
|
||||
<h2>Behavioral Types: Compile-Time Guarantees</h2>
|
||||
<p class="section-subtitle">Prove properties about your functions. The compiler enforces them.</p>
|
||||
<div class="code-block" style="max-width: 700px; margin: 0 auto;">
|
||||
<pre class="code"><code><span class="hljs-comment">// The compiler verifies these properties</span>
|
||||
|
||||
<span class="hljs-keyword">fn</span> <span class="hljs-function">add</span>(a: <span class="hljs-type">Int</span>, b: <span class="hljs-type">Int</span>): <span class="hljs-type">Int</span>
|
||||
<span class="hljs-keyword">is</span> <span class="hljs-property">pure</span> <span class="hljs-keyword">is</span> <span class="hljs-property">commutative</span> = a + b
|
||||
|
||||
<span class="hljs-keyword">fn</span> <span class="hljs-function">factorial</span>(n: <span class="hljs-type">Int</span>): <span class="hljs-type">Int</span>
|
||||
<span class="hljs-keyword">is</span> <span class="hljs-property">total</span> = <span class="hljs-keyword">if</span> n <= <span class="hljs-number">1</span> <span class="hljs-keyword">then</span> <span class="hljs-number">1</span> <span class="hljs-keyword">else</span> n * factorial(n - <span class="hljs-number">1</span>)
|
||||
|
||||
<span class="hljs-keyword">fn</span> <span class="hljs-function">processPayment</span>(p: <span class="hljs-type">Payment</span>): <span class="hljs-type">Result</span>
|
||||
<span class="hljs-keyword">is</span> <span class="hljs-property">idempotent</span> = <span class="hljs-comment">// Safe to retry on failure</span>
|
||||
...
|
||||
|
||||
<span class="hljs-keyword">fn</span> <span class="hljs-function">hash</span>(data: <span class="hljs-type">Bytes</span>): <span class="hljs-type">Hash</span>
|
||||
<span class="hljs-keyword">is</span> <span class="hljs-property">deterministic</span> = <span class="hljs-comment">// Same input = same output</span>
|
||||
...</code></pre>
|
||||
</div>
|
||||
<div class="value-props-grid" style="margin-top: 2rem;">
|
||||
<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>
|
||||
<h3 class="value-prop-title">is pure</h3>
|
||||
<p class="value-prop-desc">No side effects. Safe to memoize.</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>
|
||||
<h3 class="value-prop-title">is total</h3>
|
||||
<p class="value-prop-desc">Always terminates. No infinite loops.</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>
|
||||
<h3 class="value-prop-title">is idempotent</h3>
|
||||
<p class="value-prop-desc">Run twice = run once. Safe for retries.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Schema Evolution Section -->
|
||||
<section class="code-demo">
|
||||
<div class="container">
|
||||
<h2>Schema Evolution: Safe Data Migrations</h2>
|
||||
<p class="section-subtitle">Built-in type versioning. No more migration headaches.</p>
|
||||
<div class="code-block" style="max-width: 700px; margin: 0 auto;">
|
||||
<pre class="code"><code><span class="hljs-keyword">type</span> <span class="hljs-type">User</span> <span class="hljs-keyword">@v1</span> { name: <span class="hljs-type">String</span> }
|
||||
|
||||
<span class="hljs-keyword">type</span> <span class="hljs-type">User</span> <span class="hljs-keyword">@v2</span> {
|
||||
name: <span class="hljs-type">String</span>,
|
||||
email: <span class="hljs-type">String</span>,
|
||||
<span class="hljs-keyword">from</span> <span class="hljs-keyword">@v1</span> = {
|
||||
name: old.name,
|
||||
email: <span class="hljs-string">"unknown@example.com"</span>
|
||||
}
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">type</span> <span class="hljs-type">User</span> <span class="hljs-keyword">@v3</span> {
|
||||
firstName: <span class="hljs-type">String</span>,
|
||||
lastName: <span class="hljs-type">String</span>,
|
||||
email: <span class="hljs-type">String</span>,
|
||||
<span class="hljs-keyword">from</span> <span class="hljs-keyword">@v2</span> = {
|
||||
firstName: String.split(old.name, <span class="hljs-string">" "</span>).head,
|
||||
lastName: String.split(old.name, <span class="hljs-string">" "</span>).tail,
|
||||
email: old.email
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
<p class="highlight" style="text-align: center; margin-top: 2rem;">Load old data with new code. The compiler ensures migration paths exist.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Dual Compilation Section -->
|
||||
<section class="code-demo" style="background: var(--bg-secondary);">
|
||||
<div class="container">
|
||||
<h2>One Language, Every Platform</h2>
|
||||
<p class="section-subtitle">Compile to native C or JavaScript from the same source</p>
|
||||
<div class="code-demo-grid">
|
||||
<div class="code-block">
|
||||
<pre class="code"><code><span class="hljs-comment"># Compile to native binary (via GCC)</span>
|
||||
lux compile server.lux
|
||||
./server <span class="hljs-comment"># Runs natively</span>
|
||||
|
||||
<span class="hljs-comment"># Compile to JavaScript</span>
|
||||
lux compile client.lux --target js
|
||||
node client.js <span class="hljs-comment"># Runs in Node/browser</span></code></pre>
|
||||
</div>
|
||||
<div class="code-explanation">
|
||||
<h3>Same code, different targets:</h3>
|
||||
<ul>
|
||||
<li><strong>Native C</strong> — Maximum performance, deployable anywhere</li>
|
||||
<li><strong>JavaScript</strong> — Browser apps, Node.js servers</li>
|
||||
<li><strong>Shared code</strong> — Validation, types, business logic</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,7 +238,7 @@
|
||||
<!-- Benchmarks Section -->
|
||||
<section class="benchmarks">
|
||||
<div class="container">
|
||||
<h2>Performance</h2>
|
||||
<h2>Native Performance</h2>
|
||||
<p class="section-subtitle">fib(35) benchmark — verified with hyperfine</p>
|
||||
<div class="benchmarks-chart">
|
||||
<div class="benchmark-row">
|
||||
@@ -129,42 +270,96 @@
|
||||
<span class="benchmark-time">47.0ms</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="benchmarks-note">
|
||||
<a href="/benchmarks/">See full methodology →</a>
|
||||
<p style="text-align: center; color: var(--text-muted); margin-top: 1rem;">
|
||||
Zero-cost effects via evidence passing — O(1) handler lookup
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testing Section -->
|
||||
<section class="testing">
|
||||
<!-- Built-in Effects Section -->
|
||||
<section class="code-demo">
|
||||
<div class="container">
|
||||
<h2>Testing Without Mocks</h2>
|
||||
<p class="section-subtitle">Swap effect handlers at test time. Same code, different behavior.</p>
|
||||
<h2>Built-in Effects</h2>
|
||||
<p class="section-subtitle">Everything you need, ready to use</p>
|
||||
<div class="value-props-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">Console</h3>
|
||||
<p class="value-prop-desc">print, readLine, readInt</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">File</h3>
|
||||
<p class="value-prop-desc">read, write, exists, listDir</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">Http</h3>
|
||||
<p class="value-prop-desc">get, post, put, delete</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">HttpServer</h3>
|
||||
<p class="value-prop-desc">listen, respond, routing</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">Sql</h3>
|
||||
<p class="value-prop-desc">query, execute, transactions</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">Process</h3>
|
||||
<p class="value-prop-desc">exec, env, args, exit</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">Random</h3>
|
||||
<p class="value-prop-desc">int, float, bool</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">Time</h3>
|
||||
<p class="value-prop-desc">now, sleep</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Developer Tools Section -->
|
||||
<section class="code-demo" style="background: var(--bg-secondary);">
|
||||
<div class="container">
|
||||
<h2>Developer Experience</h2>
|
||||
<p class="section-subtitle">Modern tooling, built-in</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>
|
||||
<pre class="code"><code><span class="hljs-comment"># Package manager</span>
|
||||
lux pkg init myproject
|
||||
lux pkg add json-parser
|
||||
lux pkg install
|
||||
|
||||
<span class="hljs-comment"># Development tools</span>
|
||||
lux fmt <span class="hljs-comment"># Format code</span>
|
||||
lux check <span class="hljs-comment"># Type check</span>
|
||||
lux test <span class="hljs-comment"># Run tests</span>
|
||||
lux watch app.lux <span class="hljs-comment"># Hot reload</span>
|
||||
|
||||
<span class="hljs-comment"># LSP for your editor</span>
|
||||
lux lsp <span class="hljs-comment"># Start language server</span></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 class="code-explanation">
|
||||
<h3>Everything included:</h3>
|
||||
<ul>
|
||||
<li><strong>Package Manager</strong> — Git repos, local paths, registry</li>
|
||||
<li><strong>LSP</strong> — VS Code, Neovim, Emacs, Helix</li>
|
||||
<li><strong>REPL</strong> — Interactive exploration</li>
|
||||
<li><strong>Debugger</strong> — Step through code</li>
|
||||
<li><strong>Formatter</strong> — Consistent style</li>
|
||||
<li><strong>Test Runner</strong> — Built-in test effect</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Start Section -->
|
||||
<section class="quick-start">
|
||||
<section id="install" 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>
|
||||
<div class="code-block" style="max-width: 600px; margin: 0 auto 2rem auto;">
|
||||
<pre class="code"><code><span class="hljs-comment"># Install via Nix (recommended)</span>
|
||||
nix run github:luxlang/lux
|
||||
|
||||
<span class="hljs-comment"># Or build from source</span>
|
||||
@@ -173,9 +368,55 @@ cd lux && nix develop
|
||||
cargo build --release
|
||||
|
||||
<span class="hljs-comment"># Start the REPL</span>
|
||||
./target/release/lux</code></pre>
|
||||
./target/release/lux
|
||||
|
||||
<span class="hljs-comment"># Run a file</span>
|
||||
./target/release/lux hello.lux
|
||||
|
||||
<span class="hljs-comment"># Compile to native binary</span>
|
||||
./target/release/lux compile app.lux --run</code></pre>
|
||||
</div>
|
||||
<div class="code-block" style="max-width: 600px; margin: 0 auto;">
|
||||
<pre class="code"><code><span class="hljs-comment">// hello.lux</span>
|
||||
<span class="hljs-keyword">fn</span> <span class="hljs-function">main</span>(): <span class="hljs-type">Unit</span> <span class="hljs-keyword">with</span> {<span class="hljs-effect">Console</span>} = {
|
||||
<span class="hljs-effect">Console</span>.print(<span class="hljs-string">"Hello, Lux!"</span>)
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">run</span> main() <span class="hljs-keyword">with</span> {}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Lux Section -->
|
||||
<section class="code-demo" style="background: var(--bg-secondary);">
|
||||
<div class="container">
|
||||
<h2>Why Lux?</h2>
|
||||
<div class="value-props-grid">
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">vs Haskell</h3>
|
||||
<p class="value-prop-desc">Algebraic effects instead of monads. Same power, clearer code. Weeks to learn, not months.</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">vs Rust</h3>
|
||||
<p class="value-prop-desc">No borrow checker to fight. Automatic memory management. Still native performance.</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">vs Go</h3>
|
||||
<p class="value-prop-desc">Real type safety. Pattern matching. No nil panics. Effects track what code does.</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">vs TypeScript</h3>
|
||||
<p class="value-prop-desc">Sound type system. Native compilation. Effects are tracked, not invisible.</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">vs Elm</h3>
|
||||
<p class="value-prop-desc">Compiles to native, not just JS. Server-side, CLI apps, anywhere.</p>
|
||||
</div>
|
||||
<div class="value-prop card">
|
||||
<h3 class="value-prop-title">vs Zig</h3>
|
||||
<p class="value-prop-desc">Higher-level abstractions. Algebraic types. Still fast.</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/learn/getting-started/" class="btn btn-primary">Full Installation Guide →</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
@@ -186,37 +427,35 @@ cargo build --release
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
<span class="footer-logo">LUX</span>
|
||||
<p>Functional programming with first-class effects.</p>
|
||||
<p>The language that changes everything.</p>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h4>LEARN</h4>
|
||||
<h4>RESOURCES</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>
|
||||
<li><a href="https://github.com/luxlang/lux/tree/main/docs">Documentation</a></li>
|
||||
<li><a href="https://github.com/luxlang/lux/tree/main/examples">Examples</a></li>
|
||||
<li><a href="https://github.com/luxlang/lux/tree/main/docs/guide">Language Guide</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>
|
||||
<li><a href="https://github.com/luxlang/lux/issues">Issues</a></li>
|
||||
<li><a href="https://github.com/luxlang/lux/discussions">Discussions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h4>ABOUT</h4>
|
||||
<h4>PROJECT</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>
|
||||
<li><a href="https://github.com/luxlang/lux/blob/main/docs/benchmarks.md">Benchmarks</a></li>
|
||||
<li><a href="https://github.com/luxlang/lux/blob/main/CHANGELOG.md">Changelog</a></li>
|
||||
<li><a href="https://github.com/luxlang/lux/blob/main/LICENSE">License (MIT)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 Lux Language</p>
|
||||
<p>Made with Lux</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user