Johan LEROY
adc53b413e
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).
54 lines
3.0 KiB
Vue
54 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n';
|
|
import { INSTALL_COMMAND } from '../composables/useCopy';
|
|
import CopyButton from './CopyButton.vue';
|
|
|
|
const { t } = useI18n();
|
|
// Port par défaut réel du daemon (cf. packages/server/src/config.ts).
|
|
const LOCAL_URL = 'http://localhost:7317';
|
|
</script>
|
|
|
|
<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-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-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-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-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-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>
|
|
</section>
|
|
</template>
|