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
4.1 KiB
Vue
53 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n';
|
|
const { t } = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<section id="security" class="mx-auto max-w-[1200px] scroll-mt-[84px] px-6 pb-[100px]">
|
|
<div
|
|
v-reveal
|
|
class="rounded-[18px] border border-accent/[0.18] p-[clamp(28px,4vw,48px)]"
|
|
style="background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent)"
|
|
>
|
|
<div class="mb-[30px] flex flex-wrap items-end justify-between gap-3.5">
|
|
<div>
|
|
<div class="mb-3 font-mono text-xs uppercase tracking-[0.14em] text-accent">{{ t('secKicker') }}</div>
|
|
<h2 class="m-0 text-[clamp(26px,3.2vw,38px)] font-semibold leading-[1.12] tracking-[-0.025em] text-fg">
|
|
{{ t('secTitle') }}
|
|
</h2>
|
|
</div>
|
|
<p class="m-0 max-w-[380px] text-[15.5px] leading-[1.55] text-fg-muted">{{ t('secIntro') }}</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-3.5">
|
|
<div class="flex flex-col gap-2.5 rounded-[11px] border border-border bg-surface-0 p-[18px]">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>
|
|
<div class="text-[15px] font-semibold text-fg">{{ t('sec1Title') }}</div>
|
|
<div class="text-[13.5px] leading-[1.5] text-fg-muted">{{ t('sec1Desc') }}</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2.5 rounded-[11px] border border-border bg-surface-0 p-[18px]">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4" /><path d="m21 2-9.6 9.6" /><circle cx="7.5" cy="15.5" r="5.5" /></svg>
|
|
<div class="text-[15px] font-semibold text-fg">{{ t('sec2Title') }}</div>
|
|
<div class="text-[13.5px] leading-[1.5] text-fg-muted">{{ t('sec2Desc') }}</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2.5 rounded-[11px] border border-border bg-surface-0 p-[18px]">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /><path d="m9 12 2 2 4-4" /></svg>
|
|
<div class="text-[15px] font-semibold text-fg">{{ t('sec3Title') }}</div>
|
|
<div class="text-[13.5px] leading-[1.5] text-fg-muted">{{ t('sec3Desc') }}</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2.5 rounded-[11px] border border-border bg-surface-0 p-[18px]">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.55a11 11 0 0 1 14.08 0" /><path d="M1.42 9a16 16 0 0 1 21.16 0" /><path d="M8.53 16.11a6 6 0 0 1 6.95 0" /><path d="M12 20h.01" /></svg>
|
|
<div class="text-[15px] font-semibold text-fg">{{ t('sec4Title') }}</div>
|
|
<div class="text-[13.5px] leading-[1.5] text-fg-muted">{{ t('sec4Desc') }}</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2.5 rounded-[11px] border border-border bg-surface-0 p-[18px]">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /><path d="M12 16v-2" /></svg>
|
|
<div class="text-[15px] font-semibold text-fg">{{ t('sec5Title') }}</div>
|
|
<div class="text-[13.5px] leading-[1.5] text-fg-muted">{{ t('sec5Desc') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|