Johan LEROY
3b251c8174
- Scaffold packages/site with 11 Vue components: hero (animated terminal), features, showcase, work groups, how-it-works, security, FAQ accordion, footer - i18n EN/FR via vue-i18n with 82+ keys, autodetect navigator.language, toggle without reload - Animated timeline (terminal, dialog, toast) ported from design, scroll-reveal, copy buttons (2 instances) - Self-hosted JetBrains Mono fonts (@fontsource), optimized assets (mark 28KB, og-cover 1200×630) - SEO: canonical, og:image, theme-color, robots.txt, sitemap.xml for git-arboretum.com - Monorepo integration (decoupled from npm release): build:site / dev:site / preview:site scripts - CI: add build:site step to ci.yml for early detection; create .gitea/workflows/prod.yml for FTPS deploy (lftp mirror) to git-arboretum.com - Validated builds ✓ and UI rendering (EN/FR headless test) ✓
81 lines
3.7 KiB
Vue
81 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useCopy, INSTALL_COMMAND } from '../composables/useCopy';
|
|
import HeroMockup from './HeroMockup.vue';
|
|
import IconGitea from './icons/IconGitea.vue';
|
|
import IconCopy from './icons/IconCopy.vue';
|
|
|
|
const { t } = useI18n();
|
|
const { copied, copy } = useCopy();
|
|
const REPO = 'https://git.lidge.fr/johanleroy/git-arboretum';
|
|
</script>
|
|
|
|
<template>
|
|
<section class="mx-auto flex max-w-[1200px] flex-wrap items-center gap-12 px-6 pb-16 pt-[72px]">
|
|
<div class="min-w-[300px] flex-[1_1_430px]">
|
|
<div class="mb-[22px] flex items-center gap-[13px]">
|
|
<img
|
|
src="/assets/arboretum-mark.png"
|
|
alt=""
|
|
width="46"
|
|
height="46"
|
|
class="block h-[46px] w-[46px] object-contain"
|
|
/>
|
|
<span
|
|
class="inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/[0.07] px-[11px] py-[5px] font-mono text-[11.5px] uppercase tracking-[0.1em] text-emerald-400"
|
|
>
|
|
<span class="h-1.5 w-1.5 rounded-full bg-emerald-400 shadow-[0_0_8px_#34d399]"></span>
|
|
{{ t('heroBadge') }}
|
|
</span>
|
|
</div>
|
|
|
|
<h1 class="m-0 text-[clamp(40px,5.6vw,64px)] font-bold leading-[1.04] tracking-[-0.035em] text-zinc-50">
|
|
{{ t('heroTitle') }}
|
|
</h1>
|
|
<p class="mt-[22px] max-w-[520px] text-[clamp(17px,1.7vw,20px)] leading-[1.55] text-zinc-400">
|
|
{{ t('heroSub') }}
|
|
</p>
|
|
|
|
<div
|
|
class="mt-[30px] flex max-w-[480px] items-stretch overflow-hidden rounded-[10px] border border-zinc-800 bg-zinc-950/60"
|
|
>
|
|
<div
|
|
class="flex min-w-0 flex-1 items-center gap-2.5 overflow-x-auto whitespace-nowrap px-[15px] font-mono text-sm"
|
|
>
|
|
<span class="text-emerald-400">$</span><span class="text-zinc-200">{{ INSTALL_COMMAND }}</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
aria-label="Copy install command"
|
|
class="inline-flex flex-none items-center gap-[7px] border-l border-zinc-800 bg-zinc-900 px-[15px] font-mono text-[13px] font-semibold text-zinc-300 transition-colors hover:bg-zinc-800 hover:text-emerald-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-emerald-500/70"
|
|
@click="copy()"
|
|
>
|
|
<IconCopy :size="15" />
|
|
<span aria-live="polite">{{ copied ? t('copied') : t('copy') }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-6 flex flex-wrap gap-[13px]">
|
|
<a
|
|
href="#how"
|
|
class="inline-flex items-center gap-[9px] rounded-[9px] bg-emerald-600 px-6 py-[13px] text-[15.5px] font-semibold text-white no-underline transition-[background,transform] duration-150 ease-in-out hover:-translate-y-px hover:bg-emerald-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500/70"
|
|
>
|
|
{{ t('getStarted') }}
|
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
|
|
</a>
|
|
<a
|
|
:href="REPO"
|
|
target="_blank"
|
|
rel="noopener"
|
|
class="inline-flex items-center gap-[9px] rounded-[9px] border border-zinc-800 px-[22px] py-[13px] text-[15.5px] font-medium text-zinc-100 no-underline transition-colors hover:border-emerald-500/45 hover:text-emerald-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500/70"
|
|
>
|
|
<IconGitea :size="17" />
|
|
{{ t('gitea') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<HeroMockup />
|
|
</section>
|
|
</template>
|