Skip to content

Commit f452b1b

Browse files
jdxjdx
committed
docs: implement landing page design
1 parent 0644050 commit f452b1b

3 files changed

Lines changed: 890 additions & 56 deletions

File tree

‎docs/.vitepress/theme/Layout.vue‎

Lines changed: 49 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,45 +10,63 @@
1010
</div>
1111
</template>
1212

13-
<!-- Chef logo as the commanding centerpiece -->
13+
<!-- Landing hero content from the design handoff -->
1414
<template #home-hero-info-before>
15-
<div class="hero-chef-logo">
16-
<img
17-
class="chef-logo chef-logo-light"
18-
src="/logo-full-light.svg"
19-
alt="mise-en-place"
20-
/>
21-
<img
22-
class="chef-logo chef-logo-dark"
23-
src="/logo-full-dark.svg"
24-
alt="mise-en-place"
25-
/>
15+
<div class="hero-copy">
16+
<div class="hero-eyebrow">mise · pronounced "meez"</div>
17+
<div class="hero-lockup">
18+
<img
19+
class="chef-logo chef-logo-light"
20+
src="/logo-full-light.svg"
21+
alt="mise-en-place"
22+
/>
23+
<img
24+
class="chef-logo chef-logo-dark"
25+
src="/logo-full-dark.svg"
26+
alt="mise-en-place"
27+
/>
28+
</div>
29+
<h1>Your dev env,<br /><em>already prepped.</em></h1>
30+
<p>
31+
One tool to manage languages, env vars, and tasks per project,
32+
reproducibly.
33+
</p>
34+
<div class="hero-actions">
35+
<a class="action-btn action-btn-brand" href="/getting-started.html">Getting Started</a>
36+
<a class="action-btn action-btn-alt" href="/demo.html">Demo</a>
37+
</div>
2638
</div>
2739
</template>
2840

29-
<!-- Right column: install + action buttons -->
41+
<!-- Right column: terminal-forward proof of the workflow -->
3042
<template #home-hero-info-after>
3143
<div class="hero-right">
32-
<a class="hero-aube-banner" href="https://aube.en.dev/">
33-
<span class="aube-kicker">New from en.dev by @jdx</span>
34-
<span class="aube-message">Try aube, a fast Node.js package manager that uses your existing lockfile. Now in beta.</span>
35-
</a>
36-
<div class="hero-install">
37-
<div class="install-label">Install</div>
38-
<div class="install-command" @click="copyInstall">
39-
<code>curl https://mise.run | sh</code>
40-
<span class="install-copy" :class="{ copied }">
41-
{{ copied ? '✓' : '⎘' }}
42-
</span>
44+
<div class="hero-terminal" aria-label="mise terminal example">
45+
<div class="terminal-bar">
46+
<span></span>
47+
<span></span>
48+
<span></span>
49+
<strong>~/projects/orders · zsh</strong>
4350
</div>
44-
<div class="install-alt">
45-
<a href="/installing-mise.html">More install methods →</a>
51+
<div class="terminal-body">
52+
<div><span class="prompt">$</span> cd ~/projects/orders</div>
53+
<div><span class="dim"># mise picks up mise.toml and updates the shell</span></div>
54+
<div><span class="ok">✓</span> node@24 active</div>
55+
<div><span class="ok">✓</span> [email protected] active</div>
56+
<div><span class="ok">✓</span> terraform@1 active</div>
57+
<div><span class="ok">✓</span> DATABASE_URL loaded from .env.local</div>
58+
<div><span class="prompt">$</span> mise run deploy</div>
59+
<div><span class="key">→</span> running task "deploy" (4 steps)</div>
60+
<div><span class="dim"> build · test · migrate · ship ...</span></div>
61+
<div><span class="ok">✓</span> done in 42.1s</div>
4662
</div>
4763
</div>
48-
<div class="hero-actions">
49-
<a class="action-btn action-btn-brand" href="/getting-started.html">Getting Started</a>
50-
<a class="action-btn action-btn-alt" href="/demo.html">Demo</a>
51-
<a class="action-btn action-btn-alt" href="/about.html">About</a>
64+
<div class="hero-install">
65+
<button class="install-command" type="button" @click="copyInstall">
66+
<code>curl https://mise.run | sh</code>
67+
<span class="install-copy" :class="{ copied }">{{ copied ? "copied" : "copy" }}</span>
68+
</button>
69+
<a class="install-alt" href="/installing-mise.html">More install methods</a>
5270
</div>
5371
</div>
5472
</template>
@@ -67,7 +85,7 @@ import EndevFooter from "./EndevFooter.vue";
6785
const copied = ref(false);
6886
6987
function copyInstall() {
70-
navigator.clipboard.writeText("curl https://mise.run | sh");
88+
navigator.clipboard?.writeText("curl https://mise.run | sh");
7189
copied.value = true;
7290
setTimeout(() => (copied.value = false), 2000);
7391
}

0 commit comments

Comments
 (0)