feat: Add packages/site — landing vitrine (Vue 3 + Tailwind 4)
- 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) ✓
This commit is contained in:
61
packages/site/src/components/FinalCta.vue
Normal file
61
packages/site/src/components/FinalCta.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useCopy, INSTALL_COMMAND } from '../composables/useCopy';
|
||||
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 max-w-[1200px] px-6 pb-[100px]">
|
||||
<div
|
||||
v-reveal
|
||||
class="rounded-[20px] border border-zinc-800 px-6 py-[clamp(36px,5vw,64px)] text-center"
|
||||
style="background: radial-gradient(120% 140% at 50% 0%, rgba(16, 185, 129, 0.1), transparent 60%), #0c0c0e"
|
||||
>
|
||||
<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-zinc-50">
|
||||
{{ t('ctaTitle') }}
|
||||
</h2>
|
||||
<p class="mx-auto mb-7 max-w-[480px] text-[17px] text-zinc-400">{{ t('ctaBody') }}</p>
|
||||
|
||||
<div
|
||||
class="mx-auto flex max-w-[460px] items-stretch overflow-hidden rounded-[10px] border border-zinc-800 bg-zinc-950"
|
||||
>
|
||||
<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-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-4 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-[18px]">
|
||||
<a
|
||||
:href="REPO"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="inline-flex items-center gap-2 text-[14.5px] text-zinc-400 no-underline transition-colors hover:text-emerald-400"
|
||||
>
|
||||
<IconGitea :size="16" />
|
||||
{{ t('ctaSource') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
Reference in New Issue
Block a user