feat: Add packages/site — landing vitrine (Vue 3 + Tailwind 4)
All checks were successful
Deploy site (production) / build-and-deploy (push) Successful in 48s
All checks were successful
Deploy site (production) / build-and-deploy (push) Successful in 48s
- 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:
59
packages/site/src/components/AppHeader.vue
Normal file
59
packages/site/src/components/AppHeader.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import LangToggle from './LangToggle.vue';
|
||||
import IconGitea from './icons/IconGitea.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const REPO = 'https://git.lidge.fr/johanleroy/git-arboretum';
|
||||
|
||||
const navLinks = [
|
||||
{ href: '#features', key: 'navFeatures' },
|
||||
{ href: '#how', key: 'navHow' },
|
||||
{ href: '#security', key: 'navSecurity' },
|
||||
{ href: '#faq', key: 'navFaq' },
|
||||
] as const;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header
|
||||
class="sticky top-0 z-50 border-b border-[#1c1c1f] bg-[rgba(9,9,11,0.72)] backdrop-blur-[14px]"
|
||||
>
|
||||
<div class="mx-auto flex h-16 max-w-[1200px] items-center justify-between gap-6 px-6">
|
||||
<a href="#top" class="flex items-center gap-2.5 text-zinc-100 no-underline">
|
||||
<img
|
||||
src="/assets/arboretum-mark.png"
|
||||
alt="Arboretum"
|
||||
width="28"
|
||||
height="28"
|
||||
class="block h-7 w-7 object-contain"
|
||||
/>
|
||||
<span class="font-mono text-[17px] font-semibold tracking-[-0.01em]">Arboretum</span>
|
||||
</a>
|
||||
|
||||
<nav class="hidden items-center gap-[30px] min-[900px]:flex">
|
||||
<a
|
||||
v-for="link in navLinks"
|
||||
:key="link.href"
|
||||
:href="link.href"
|
||||
class="text-[14.5px] text-zinc-400 no-underline transition-colors hover:text-zinc-100"
|
||||
>
|
||||
{{ t(link.key) }}
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="flex items-center gap-3.5">
|
||||
<LangToggle />
|
||||
<a
|
||||
:href="REPO"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
aria-label="Gitea"
|
||||
class="inline-flex items-center gap-[7px] rounded-lg border border-zinc-800 px-[13px] py-[7px] text-[13.5px] font-medium text-zinc-300 no-underline transition-colors hover:border-emerald-500/50 hover:text-emerald-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500/70"
|
||||
>
|
||||
<IconGitea :size="16" />
|
||||
Gitea
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
Reference in New Issue
Block a user