Skip to content

Commit 708fe36

Browse files
ttraenklerclaude
ttraenkler
and
claude
committed
Redesign landing page: transparent nav, runtimes section, refined layout
- Transparent nav with scroll transition, solid in light mode - Gray text replaced with white at lower opacity for gradient tinting - Languages section: side-by-side layout with 60/40 grid, larger icons - New "Run anywhere" runtimes section with browser/server/standalone icons - Stats distributed across relevant sections (languages, runtimes, engines) - Features intro text separated from pillars grid with transparent white styling - CTA section replaced with runtimes grid - Mobile gradient adjusted for narrow viewports Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 3884e01 commit 708fe36

File tree

5 files changed

+243
-188
lines changed

5 files changed

+243
-188
lines changed

‎_includes_v2/runtime-grid.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="lang-grid">
2+
<div class="lang-chip"><img class="lang-icon" src="https://cdn.simpleicons.org/googlechrome/ffffff" alt="" />Chrome</div>
3+
<div class="lang-chip"><img class="lang-icon" src="https://cdn.simpleicons.org/firefox/ffffff" alt="" />Firefox</div>
4+
<div class="lang-chip"><img class="lang-icon" src="https://cdn.simpleicons.org/safari/ffffff" alt="" />Safari</div>
5+
<div class="lang-chip"><img class="lang-icon" src="https://cdn.simpleicons.org/nodedotjs/ffffff" alt="" />Node.js</div>
6+
<div class="lang-chip"><img class="lang-icon" src="https://cdn.simpleicons.org/deno/ffffff" alt="" />Deno</div>
7+
<div class="lang-chip"><img class="lang-icon" src="https://cdn.simpleicons.org/cloudflare/ffffff" alt="" />Cloudflare</div>
8+
<div class="lang-chip"><svg class="lang-icon" viewBox="0 0 20 20"><text x="10" y="14" text-anchor="middle" fill="white" font-size="6" font-weight="600" font-family="Inter,sans-serif">wasm</text></svg>Wasmtime</div>
9+
<div class="lang-chip"><svg class="lang-icon" viewBox="0 0 20 20"><text x="10" y="14" text-anchor="middle" fill="white" font-size="7" font-weight="600" font-family="Inter,sans-serif">WR</text></svg>Wasmer</div>
10+
<div class="lang-chip"><svg class="lang-icon" viewBox="0 0 20 20"><text x="10" y="14" text-anchor="middle" fill="white" font-size="7" font-weight="600" font-family="Inter,sans-serif">WE</text></svg>WasmEdge</div>
11+
<div class="lang-chip"><img class="lang-icon" src="https://cdn.simpleicons.org/fastly/ffffff" alt="" />Fastly</div>
12+
<div class="lang-chip"><img class="lang-icon" src="https://cdn.simpleicons.org/bun/ffffff" alt="" />Bun</div>
13+
</div>

‎_includes_v2/scripts.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,16 @@
11
<script>
2+
// Nav: fade in background on scroll past fold
3+
(function () {
4+
const nav = document.querySelector('.site-nav');
5+
if (!nav) return;
6+
const threshold = window.innerHeight * 0.5;
7+
function onScroll() {
8+
nav.classList.toggle('scrolled', window.scrollY > threshold);
9+
}
10+
window.addEventListener('scroll', onScroll, { passive: true });
11+
onScroll();
12+
})();
13+
214
// Responsive nav: measure content width, toggle compact/burger mode
315
(function () {
416
const nav = document.querySelector('.site-nav');

‎_layouts_v2/home.html‎

Lines changed: 57 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,9 @@
7373
</g>
7474
</svg>
7575
</div>
76-
<h1 class="reveal">Runs code in any language fast, secure, anywhere.</h1>
76+
<h1 class="reveal">
77+
Run code in any language<br />fast, secure, and portable.
78+
</h1>
7779
<div class="hero-lead">{{ lead }}</div>
7880
<div class="hero-actions reveal rd2">
7981
<a href="#start" class="btn-solid">Get Started &rarr;</a>
@@ -87,10 +89,17 @@ <h1 class="reveal">Runs code in any language fast, secure, anywhere.</h1>
8789
<!-- ━━ Features ━━ -->
8890
<section class="section-pad" id="features">
8991
<div class="features-intro reveal">
90-
<h2>Efficient, fast, safe, and open source.</h2>
92+
<h2>An open web standard.</h2>
9193
<p>
92-
Four pillars that make WebAssembly the universal compilation target for
93-
performance-critical applications.
94+
Developer reference documentation for Wasm can be found on
95+
<a href="https://developer.mozilla.org/en-US/docs/WebAssembly"
96+
>MDN's WebAssembly pages</a
97+
>. The open standards for WebAssembly are developed in a
98+
<a href="https://www.w3.org/community/webassembly/"
99+
>W3C Community Group</a
100+
>
101+
(that includes representatives from all major browsers) as well as a
102+
<a href="https://www.w3.org/wasm/">W3C Working Group</a>.
94103
</p>
95104
</div>
96105
<div class="pillars-content reveal rd1">{{ content }}</div>
@@ -100,14 +109,31 @@ <h2>Efficient, fast, safe, and open source.</h2>
100109

101110
<!-- ━━ Languages ━━ -->
102111
<section class="section-pad" id="languages">
103-
<div class="languages-intro reveal">
104-
<h2>Code in your language.</h2>
105-
<p>
106-
From systems programming to scripting &mdash; compile from the language
107-
you already know.
108-
</p>
112+
<div class="languages-section">
113+
<div class="languages-intro reveal">
114+
<h2>Code in your language.</h2>
115+
<p>
116+
Choose your language, pick a toolchain, and ship production-grade Wasm
117+
in minutes.
118+
</p>
119+
<div class="stats-inline">
120+
<div class="stat-inline">
121+
<span class="stat-number">30+</span> languages
122+
</div>
123+
</div>
124+
<div class="languages-actions">
125+
<a href="/getting-started/developers-guide/" class="btn-solid"
126+
>Developer Guide &rarr;</a
127+
>
128+
<a
129+
href="https://developer.mozilla.org/en-US/docs/WebAssembly"
130+
class="btn-outline"
131+
>MDN Docs</a
132+
>
133+
</div>
134+
</div>
135+
<div class="reveal rd1">{% include lang-grid.html %}</div>
109136
</div>
110-
<div class="reveal rd1">{% include lang-grid.html %}</div>
111137
</section>
112138

113139
<hr class="divider" />
@@ -116,11 +142,12 @@ <h2>Code in your language.</h2>
116142
<section class="section-pad">
117143
<div class="code-section">
118144
<div class="code-text reveal">
119-
<h2>Compile to virtual CPU instructions.</h2>
145+
<h2>Compile to WebAssembly.</h2>
120146
<p>
121-
WebAssembly's text format (WAT) is designed for viewing in dev tools,
122-
hand-writing modules, debugging, and learning. It maps directly to the
123-
binary format.
147+
WebAssembly is a low-level, portable, size- and load-time-efficient
148+
binary format suitable for compilation to the web. It runs your code at
149+
near-native speed in a sandboxed environment and isolates code, data,
150+
and host resources.
124151
</p>
125152
</div>
126153
<div class="reveal rd2">
@@ -137,136 +164,25 @@ <h2>Compile to virtual CPU instructions.</h2>
137164

138165
<hr class="divider" />
139166

140-
<!-- ━━ Stats ━━ -->
141-
<section class="section-pad">
142-
<div class="stats-grid reveal">
143-
<div class="stat-item">
144-
<div class="stat-number">20&times;</div>
145-
<div class="stat-label">Faster decode than JS parse</div>
146-
</div>
147-
<div class="stat-item">
148-
<div class="stat-number">30+</div>
149-
<div class="stat-label">Source languages supported</div>
150-
</div>
151-
<div class="stat-item">
152-
<div class="stat-number">4</div>
153-
<div class="stat-label">Major browser engines</div>
154-
</div>
155-
<div class="stat-item">
156-
<div class="stat-number">95%+</div>
157-
<div class="stat-label">Global browser coverage</div>
158-
</div>
159-
</div>
160-
</section>
161-
162-
<hr class="divider" />
163-
164-
<!-- ━━ FAQ ━━ -->
165-
<section class="section-pad" id="faq">
166-
<div class="faq-intro reveal">
167-
<h2>FAQ.</h2>
168-
</div>
169-
<div class="faq-list">
170-
<div class="faq-item reveal">
171-
<button class="faq-q">
172-
Is WebAssembly trying to replace JavaScript?
173-
</button>
174-
<div class="faq-a">
175-
<div class="faq-a-inner">
176-
No. WebAssembly is designed as a complement to JavaScript, not a
177-
replacement. JavaScript has incredible momentum and will remain the
178-
primary dynamic language of the web. Common patterns include compiled
179-
C++ apps using JS for glue code, HTML/CSS/JS apps with Wasm-powered
180-
canvas rendering, and mostly-web apps using Wasm modules for
181-
performance-critical paths.
182-
</div>
183-
</div>
184-
</div>
185-
<div class="faq-item reveal rd1">
186-
<button class="faq-q">Is WebAssembly only for C/C++ programmers?</button>
187-
<div class="faq-a">
188-
<div class="faq-a-inner">
189-
Not at all. While initial efforts focused on C/C++, today over 30
190-
languages can compile to WebAssembly &mdash; including Rust, Go,
191-
Python, C#, Kotlin, and many more. The ecosystem grows steadily as
192-
more compilers add Wasm backends.
193-
</div>
194-
</div>
195-
</div>
196-
<div class="faq-item reveal rd2">
197-
<button class="faq-q">Can I view WebAssembly source code?</button>
198-
<div class="faq-a">
199-
<div class="faq-a-inner">
200-
Yes. WebAssembly defines a human-readable text format (WAT)
201-
specifically designed for debugging, testing, experimenting,
202-
optimizing, learning, and teaching. Developer tools in all major
203-
browsers can display Wasm in this textual format, and source maps
204-
provide a direct link back to original source code.
205-
</div>
206-
</div>
207-
</div>
208-
<div class="faq-item reveal rd3">
209-
<button class="faq-q">
210-
Why not just use LLVM bitcode as a binary format?
211-
</button>
212-
<div class="faq-a">
213-
<div class="faq-a-inner">
214-
WebAssembly prioritizes portability, stability, small encoding, fast
215-
decoding, and minimal nondeterminism. LLVM IR targets compiler
216-
optimization across diverse architectures and contains undefined
217-
behavior, making it non-portable and unstable. WebAssembly's
218-
purpose-built design achieves superior results for these goals, while
219-
still leveraging LLVM's clang frontend and optimizers to generate Wasm
220-
output.
221-
</div>
222-
</div>
223-
</div>
224-
<div class="faq-item reveal">
225-
<button class="faq-q">Can WebAssembly be polyfilled?</button>
226-
<div class="faq-a">
227-
<div class="faq-a-inner">
228-
Technically yes &mdash; early prototypes demonstrated efficient
229-
WebAssembly-to-asm.js conversion. In practice, polyfilling has become
230-
unnecessary thanks to near-universal browser support (95%+ global
231-
coverage). Tools like Emscripten also allow dual builds targeting both
232-
Wasm and asm.js with a simple flag.
167+
<!-- ━━ Runtimes ━━ -->
168+
<section class="section-pad" id="runtimes">
169+
<div class="languages-section">
170+
<div class="languages-intro reveal">
171+
<h2>Run anywhere.</h2>
172+
<p>
173+
Execute Wasm modules in browsers, on the server, at the edge, or
174+
embedded in any application.
175+
</p>
176+
<div class="stats-inline">
177+
<div class="stat-inline">
178+
<span class="stat-number">20+</span> runtimes
233179
</div>
234-
</div>
235-
</div>
236-
<div class="faq-item reveal rd1">
237-
<button class="faq-q">
238-
Can I access platform APIs from WebAssembly?
239-
</button>
240-
<div class="faq-a">
241-
<div class="faq-a-inner">
242-
In a browser, you have full access to Web APIs through JavaScript
243-
interop. Outside the browser, access depends on the embedder &mdash;
244-
standalone runtimes like Wasmtime and Wasmer provide WASI (WebAssembly
245-
System Interface) for filesystem, networking, and more.
180+
<div class="stat-inline">
181+
<span class="stat-number">3</span> browser engines
246182
</div>
247183
</div>
248184
</div>
249-
</div>
250-
</section>
251-
252-
<hr class="divider" />
253-
254-
<!-- ━━ CTA ━━ -->
255-
<section class="section-pad cta" id="start">
256-
<h2 class="reveal">Start Building.</h2>
257-
<p class="reveal rd1">
258-
Choose your language, pick a toolchain, and ship production-grade Wasm in
259-
minutes.
260-
</p>
261-
<div class="cta-actions reveal rd2">
262-
<a href="/getting-started/developers-guide/" class="btn-solid"
263-
>Developer Guide &rarr;</a
264-
>
265-
<a
266-
href="https://developer.mozilla.org/en-US/docs/WebAssembly"
267-
class="btn-outline"
268-
>MDN Docs</a
269-
>
185+
<div class="reveal rd1">{% include runtime-grid.html %}</div>
270186
</div>
271187
</section>
272188

0 commit comments

Comments
 (0)