Skip to content

docs: implement landing page design #9266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jdx merged 1 commit into from
Apr 20, 2026
Merged

docs: implement landing page design #9266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
257 changes: 75 additions & 182 deletions docs/.vitepress/theme/Layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,45 +10,63 @@
</div>
</template>

<!-- Chef logo as the commanding centerpiece -->
<!-- Landing hero content from the design handoff -->
<template #home-hero-info-before>
<div class="hero-chef-logo">
<img
class="chef-logo chef-logo-light"
src="/logo-full-light.svg"
alt="mise-en-place"
/>
<img
class="chef-logo chef-logo-dark"
src="/logo-full-dark.svg"
alt="mise-en-place"
/>
<div class="hero-copy">
<div class="hero-eyebrow">mise · pronounced "meez"</div>
<div class="hero-lockup">
<img
class="chef-logo chef-logo-light"
src="/logo-full-light.svg"
alt="mise-en-place"
/>
<img
class="chef-logo chef-logo-dark"
src="/logo-full-dark.svg"
alt="mise-en-place"
/>
</div>
<h1>Your dev env,<br /><em>already prepped.</em></h1>
<p>
One tool to manage languages, env vars, and tasks per project,
reproducibly.
</p>
<div class="hero-actions">
<a class="action-btn action-btn-brand" href="/getting-started">Getting Started</a>
<a class="action-btn action-btn-alt" href="/demo">Demo</a>
</div>
</div>
</template>

<!-- Right column: install + action buttons -->
<!-- Right column: terminal-forward proof of the workflow -->
<template #home-hero-info-after>
<div class="hero-right">
<a class="hero-aube-banner" href="https://aube.en.dev/">
<span class="aube-kicker">New from en.dev by @jdx</span>
<span class="aube-message">Try aube, a fast Node.js package manager that uses your existing lockfile. Now in beta.</span>
</a>
<div class="hero-install">
<div class="install-label">Install</div>
<div class="install-command" @click="copyInstall">
<code>curl https://mise.run | sh</code>
<span class="install-copy" :class="{ copied }">
{{ copied ? '✓' : '⎘' }}
</span>
<div class="hero-terminal" aria-label="mise terminal example">
<div class="terminal-bar">
<span></span>
<span></span>
<span></span>
<strong>~/projects/orders · zsh</strong>
</div>
<div class="install-alt">
<a href="/installing-mise.html">More install methods →</a>
<div class="terminal-body">
<div><span class="prompt">$</span> cd ~/projects/orders</div>
<div><span class="dim"># mise picks up mise.toml and updates the shell</span></div>
<div><span class="ok">✓</span> node@24 active</div>
<div><span class="ok">✓</span> python@3.13 active</div>
<div><span class="ok">✓</span> terraform@1 active</div>
<div><span class="ok">✓</span> DATABASE_URL loaded from .env.local</div>
<div><span class="prompt">$</span> mise run deploy</div>
<div><span class="key">→</span> running task "deploy" (4 steps)</div>
<div><span class="dim"> build · test · migrate · ship ...</span></div>
<div><span class="ok">✓</span> done in 42.1s</div>
</div>
</div>
<div class="hero-actions">
<a class="action-btn action-btn-brand" href="/getting-started.html">Getting Started</a>
<a class="action-btn action-btn-alt" href="/demo.html">Demo</a>
<a class="action-btn action-btn-alt" href="/about.html">About</a>
<div class="hero-install">
<button class="install-command" type="button" @click="copyInstall">
<code>curl https://mise.run | sh</code>
<span class="install-copy" :class="{ copied }">{{ copied ? "copied" : "copy" }}</span>
</button>
<a class="install-alt" href="/installing-mise">More install methods</a>
</div>
</div>
</template>
Expand All @@ -65,11 +83,33 @@ import { ref } from "vue";
import EndevFooter from "./EndevFooter.vue";

const copied = ref(false);
const installCommand = "curl https://mise.run | sh";

async function copyInstall() {
if (await copyText(installCommand)) {
copied.value = true;
setTimeout(() => (copied.value = false), 2000);
}
}

async function copyText(text: string) {
try {
await navigator.clipboard?.writeText(text);
if (navigator.clipboard) return true;
} catch {
// Fall back to the temporary textarea path below.
}

function copyInstall() {
navigator.clipboard.writeText("curl https://mise.run | sh");
copied.value = true;
setTimeout(() => (copied.value = false), 2000);
const textarea = document.createElement("textarea");
textarea.value = text;
textarea.setAttribute("readonly", "");
textarea.style.position = "fixed";
textarea.style.opacity = "0";
document.body.appendChild(textarea);
textarea.select();
const copiedText = document.execCommand("copy");
document.body.removeChild(textarea);
return copiedText;
}
</script>

Expand Down Expand Up @@ -166,122 +206,6 @@ function copyInstall() {
50% { transform: translate(20px, -30px) scale(1.05); }
}

/* ═══════════════════════════════════════════
CHEF LOGO — commanding centerpiece
═══════════════════════════════════════════ */
.hero-chef-logo {
display: flex;
justify-content: flex-start;
margin-bottom: 12px;
}

.hero-chef-logo .chef-logo {
width: 420px;
max-width: 90vw;
height: auto;
filter: drop-shadow(0 4px 20px rgba(139, 34, 82, 0.15));
transition: filter 0.4s ease;
}

.hero-chef-logo .chef-logo:hover {
filter: drop-shadow(0 8px 32px rgba(139, 34, 82, 0.25));
}

/* Light mode: show light (black) logo, hide dark */
.hero-chef-logo .chef-logo-dark {
display: none;
}

/* Dark mode: swap logos */
.dark .hero-chef-logo .chef-logo-light {
display: none;
}

.dark .hero-chef-logo .chef-logo-dark {
display: inline;
}

.dark .hero-chef-logo .chef-logo {
filter: drop-shadow(0 4px 24px rgba(199, 91, 122, 0.2));
}

.dark .hero-chef-logo .chef-logo:hover {
filter: drop-shadow(0 8px 40px rgba(199, 91, 122, 0.35));
}

@keyframes heroLogoIn {
from {
opacity: 0;
transform: translateY(-30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

/* ═══════════════════════════════════════════
AUBE PROMO — compact cross-project banner
═══════════════════════════════════════════ */
.hero-aube-banner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
width: 100%;
padding: 8px 12px;
color: var(--vp-c-text-1);
background:
linear-gradient(90deg, rgba(107, 127, 78, 0.12), rgba(139, 34, 82, 0.08)),
var(--vp-c-bg-soft);
border: 1px solid rgba(107, 127, 78, 0.35);
border-radius: 8px;
text-decoration: none;
box-shadow: 0 8px 24px rgba(26, 18, 16, 0.06);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}

.hero-aube-banner:hover {
border-color: var(--vp-c-brand-1);
box-shadow: 0 12px 32px rgba(139, 34, 82, 0.12);
transform: translateY(-1px);
}

.dark .hero-aube-banner {
background:
linear-gradient(90deg, rgba(143, 168, 110, 0.14), rgba(199, 91, 122, 0.1)),
var(--vp-c-bg-soft);
border-color: rgba(143, 168, 110, 0.35);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.aube-kicker {
font-family: "Roc Grotesk", sans-serif;
font-size: 0.72rem;
line-height: 1;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}

.aube-kicker {
color: #6B7F4E;
}

.dark .aube-kicker {
color: #8FA86E;
}

.aube-message {
min-width: 0;
font-size: 0.78rem;
line-height: 1.25;
color: var(--vp-c-text-2);
}

/* ═══════════════════════════════════════════
INSTALL COMMAND — signature dish
═══════════════════════════════════════════ */
Expand All @@ -292,16 +216,6 @@ function copyInstall() {
margin-top: 0;
}

.install-label {
font-family: "Roc Grotesk", sans-serif;
font-weight: 400;
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--vp-c-text-3);
margin-bottom: 8px;
}

.install-command {
display: flex;
align-items: center;
Expand Down Expand Up @@ -355,15 +269,12 @@ function copyInstall() {
margin-top: 10px;
font-size: 0.85rem;
font-family: "Roc Grotesk", sans-serif;
}

.install-alt a {
color: var(--vp-c-text-3);
text-decoration: none;
transition: color 0.2s ease;
}

.install-alt a:hover {
.install-alt:hover {
color: var(--vp-c-brand-1);
}

Expand All @@ -382,19 +293,6 @@ function copyInstall() {
RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 768px) {
.hero-chef-logo .chef-logo {
max-width: 280px;
}

.hero-aube-banner {
align-items: center;
text-align: center;
}

.aube-message {
font-size: 0.85rem;
}

.hero-glow-1 { width: 350px; height: 350px; }
.hero-glow-2 { width: 300px; height: 300px; }
.hero-glow-3 { width: 250px; height: 250px; }
Expand All @@ -404,9 +302,4 @@ function copyInstall() {
}
}

@media (max-width: 480px) {
.hero-chef-logo .chef-logo {
max-width: 220px;
}
}
</style>
Loading
Loading