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).
53 lines
1.9 KiB
Vue
53 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n';
|
|
import { INSTALL_COMMAND } from '../composables/useCopy';
|
|
import { REPO } from '../lib/links';
|
|
import IconGitea from './icons/IconGitea.vue';
|
|
import CopyButton from './CopyButton.vue';
|
|
|
|
const { t } = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<section class="mx-auto max-w-[1200px] px-6 pb-[100px]">
|
|
<div
|
|
v-reveal
|
|
class="rounded-[20px] border border-border px-6 py-[clamp(36px,5vw,64px)] text-center"
|
|
style="background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 60%), var(--color-surface-0)"
|
|
>
|
|
<img
|
|
src="/assets/arboretum-mark.png"
|
|
alt=""
|
|
width="52"
|
|
height="52"
|
|
class="mx-auto mb-5 block h-[52px] w-[52px] object-contain"
|
|
/>
|
|
<h2 class="m-0 mb-3.5 text-[clamp(30px,4vw,46px)] font-bold leading-[1.08] tracking-[-0.03em] text-fg">
|
|
{{ t('ctaTitle') }}
|
|
</h2>
|
|
<p class="mx-auto mb-7 max-w-[480px] text-[17px] text-fg-muted">{{ t('ctaBody') }}</p>
|
|
|
|
<div
|
|
class="mx-auto flex max-w-[460px] items-stretch overflow-hidden rounded-[10px] border border-border bg-surface-0"
|
|
>
|
|
<div class="flex min-w-0 flex-1 items-center gap-2.5 overflow-x-auto whitespace-nowrap px-4 font-mono text-sm">
|
|
<span class="text-accent">$</span><span class="text-fg">{{ INSTALL_COMMAND }}</span>
|
|
</div>
|
|
<CopyButton variant="bar" :text="INSTALL_COMMAND" :label="t('copyCommand')" bar-class="px-4" />
|
|
</div>
|
|
|
|
<div class="mt-[18px]">
|
|
<a
|
|
:href="REPO"
|
|
target="_blank"
|
|
rel="noopener"
|
|
class="inline-flex items-center gap-2 text-[14.5px] text-fg-muted no-underline transition-colors hover:text-accent"
|
|
>
|
|
<IconGitea :size="16" />
|
|
{{ t('ctaSource') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|