johanleroy/arboretum
1
1
Fork 0
Code Issues Pull Requests Actions Packages Releases 5 Activity

feat(site,docs): aligne le site vitrine et la doc sur l'app « Emerald »

Browse Source 
Site (packages/site) : adopte le design system Emerald (polices Inter +
JetBrains Mono variables, tokens sémantiques, thème clair/sombre + bascule)
et met les mockups à jour sur l'app réelle.

- style.css : tokens Emerald (@theme sombre + override html[data-theme=light]) ;
  lib/theme.ts + ThemeToggle.vue + anti-FOUC index.html ; sweep des couleurs
  brutes vers les tokens dans toutes les sections.
- Mockups fidèles à l'IDE multi-projet : HeroMockup (rail ActivityBar au lieu
  de la sidebar large + v obsolète retirée), ShowcaseSection (supervision au
  lieu du dashboard worktree-first, onglets mobiles réels), WorkspaceShowcase
  (diff-add/del, bouton commit accent-solid) ; framing « worktree-first »
  résiduel levé (i18n).
- og-cover.png rafraîchi (carte Emerald).

Docs : README.md + README.fr.md (retrait « Status: MVP », ajout du langage
Emerald + thème clair/sombre/système, VSIX 0.2.0 -> 0.3.0, section Screenshots),
vscode README (VSIX 0.3.0), brand README (thème clair), CHANGELOG daemon 3.2.0.
Captures IDE sombre + clair (brand/screenshot-ide-*.png).
This commit is contained in:
Johan Leroy
2026-07-20 22:48:59 +02:00
parent 063f5e928b
commit adc53b413e
37 changed files with 887 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
packages/site/src/components/HowItWorksSection.vue
View File

@@ -11,41 +11,41 @@ const LOCAL_URL = 'http://localhost:7317';
<template>
<section id="how" class="mx-auto max-w-[1200px] scroll-mt-[84px] px-6 pb-[100px]">
<div v-reveal class="mb-[46px] text-center">
<div class="mb-3.5 font-mono text-xs uppercase tracking-[0.14em] text-emerald-400">{{ t('howKicker') }}</div>
<h2 class="m-0 text-[clamp(28px,3.4vw,40px)] font-semibold tracking-[-0.025em] text-zinc-50">{{ t('howTitle') }}</h2>
<div class="mb-3.5 font-mono text-xs uppercase tracking-[0.14em] text-accent">{{ t('howKicker') }}</div>
<h2 class="m-0 text-[clamp(28px,3.4vw,40px)] font-semibold tracking-[-0.025em] text-fg">{{ t('howTitle') }}</h2>
</div>
<div v-reveal class="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-4">
<div class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-[26px]">
<div class="mb-[18px] font-mono text-[13px] text-emerald-400">01</div>
<h3 class="m-0 mb-2.5 text-lg font-semibold text-zinc-50">{{ t('step1Title') }}</h3>
<p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-zinc-400">{{ t('step1Desc') }}</p>
<div class="flex items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-950 p-[11px]">
<code class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-[12.5px] text-zinc-200">
<span class="text-emerald-400">$ </span>{{ INSTALL_COMMAND }}
<div class="rounded-xl border border-border bg-surface-1/50 p-[26px]">
<div class="mb-[18px] font-mono text-[13px] text-accent">01</div>
<h3 class="m-0 mb-2.5 text-lg font-semibold text-fg">{{ t('step1Title') }}</h3>
<p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-fg-muted">{{ t('step1Desc') }}</p>
<div class="flex items-center gap-2 rounded-lg border border-border bg-surface-0 p-[11px]">
<code class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-[12.5px] text-fg">
<span class="text-accent">$ </span>{{ INSTALL_COMMAND }}
</code>
<CopyButton variant="icon" :text="INSTALL_COMMAND" :label="t('copyCommand')" />
</div>
</div>
<div class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-[26px]">
<div class="mb-[18px] font-mono text-[13px] text-emerald-400">02</div>
<h3 class="m-0 mb-2.5 text-lg font-semibold text-zinc-50">{{ t('step2Title') }}</h3>
<p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-zinc-400">{{ t('step2Desc') }}</p>
<div class="flex items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-950 p-[11px]">
<code class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-[12.5px] text-sky-300">
<div class="rounded-xl border border-border bg-surface-1/50 p-[26px]">
<div class="mb-[18px] font-mono text-[13px] text-accent">02</div>
<h3 class="m-0 mb-2.5 text-lg font-semibold text-fg">{{ t('step2Title') }}</h3>
<p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-fg-muted">{{ t('step2Desc') }}</p>
<div class="flex items-center gap-2 rounded-lg border border-border bg-surface-0 p-[11px]">
<code class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-[12.5px] text-info">
→ {{ LOCAL_URL }}
</code>
<CopyButton variant="icon" :text="LOCAL_URL" :label="t('copyUrl')" />
</div>
</div>
<div class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-[26px]">
<div class="mb-[18px] font-mono text-[13px] text-emerald-400">03</div>
<h3 class="m-0 mb-2.5 text-lg font-semibold text-zinc-50">{{ t('step3Title') }}</h3>
<p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-zinc-400">{{ t('step3Desc') }}</p>
<div class="rounded-xl border border-border bg-surface-1/50 p-[26px]">
<div class="mb-[18px] font-mono text-[13px] text-accent">03</div>
<h3 class="m-0 mb-2.5 text-lg font-semibold text-fg">{{ t('step3Title') }}</h3>
<p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-fg-muted">{{ t('step3Desc') }}</p>
<div class="flex flex-wrap gap-1.5">
<span class="rounded-md bg-emerald-500/10 px-[9px] py-1 font-mono text-[11px] text-emerald-400">{{ t('idle') }}</span>
<span class="rounded-md bg-[rgba(8,47,73,0.7)] px-[9px] py-1 font-mono text-[11px] text-sky-300">{{ t('busy') }}</span>
<span class="rounded-md bg-[rgba(69,26,3,0.6)] px-[9px] py-1 font-mono text-[11px] text-amber-300">{{ t('waiting') }}</span>
<span class="rounded-md bg-accent/10 px-[9px] py-1 font-mono text-[11px] text-accent">{{ t('idle') }}</span>
<span class="rounded-md bg-info/15 px-[9px] py-1 font-mono text-[11px] text-info">{{ t('busy') }}</span>
<span class="rounded-md bg-warn/15 px-[9px] py-1 font-mono text-[11px] text-warn">{{ t('waiting') }}</span>
</div>
</div>
</div>