feat(website): footer sub-pages + shared page layout

Wire every footer link to a real route. Adds a shared `page` layout (Nav +
content + Footer), reusable PageHeader/ComingSoon components, six content pages
(about, contact, brand, roadmap, changelog, migration), and a dynamic [slug]
catch-all for the not-yet-built pages — unknown slugs 404, legal slugs get a
distinct "contact us" body.

Footer links repointed from dead "#" to real paths; section anchors ("/#suite")
smooth-scroll on the homepage and route home + scroll from a sub-page; logo
links home. Page copy (da + en) added under COPY.pages.
This commit is contained in:
Ronni Baslund
2026-06-05 14:40:36 +02:00
parent 4c57d41350
commit 0a35d9deb6
15 changed files with 723 additions and 33 deletions
+28 -15
View File
@@ -2,23 +2,36 @@
// Sticky top nav with logo, anchor links, language toggle, login + demo CTA.
// Ported from landing-sections.jsx Nav (light mode, production subset).
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { APP_URL } from '~/utils/landingTokens'
import { useTheme, useCopy, useLang, toggleLang, scrollToAnchor } from '~/composables/useLanding'
import { useTheme, useCopy, useLang, toggleLang, scrollToAnchor, goToSection } from '~/composables/useLanding'
const t = useTheme()
const copy = useCopy()
const lang = useLang()
const route = useRoute()
const items = computed(() => [
{ label: copy.value.nav.product, href: '#suite' },
{ label: copy.value.nav.security, href: '#sovereignty' },
{ label: copy.value.nav.whitelabel, href: '#whitelabel' },
{ label: copy.value.nav.pricing, href: '#pricing' },
{ label: copy.value.nav.docs, href: '#' },
{ label: copy.value.nav.product, href: '/#suite' },
{ label: copy.value.nav.security, href: '/#sovereignty' },
{ label: copy.value.nav.whitelabel, href: '/#whitelabel' },
{ label: copy.value.nav.pricing, href: '/#pricing' },
{ label: copy.value.nav.docs, href: '/docs' },
])
function onLogo() {
window.scrollTo({ top: 0, behavior: 'smooth' })
function onLogo(e: MouseEvent) {
// On the homepage, scroll to top in place; from a sub-page let NuxtLink route home.
if (route.path === '/') {
e.preventDefault()
window.scrollTo({ top: 0, behavior: 'smooth' })
}
}
function onNav(e: MouseEvent, href: string) {
if (href.includes('#') && route.path === '/') {
e.preventDefault()
scrollToAnchor(href.slice(href.indexOf('#')))
}
}
</script>
@@ -33,17 +46,17 @@ function onLogo() {
maxWidth: '1280px', margin: '0 auto', padding: '18px 64px',
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
}">
<a href="#" :style="{ display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer' }" @click.prevent="onLogo">
<NuxtLink to="/" :style="{ display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer' }" @click="onLogo">
<BrandNodeMark :size="32" :fg="t.fg" :accent="t.signal" />
<div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontWeight: 600, fontSize: '16px', letterSpacing: '-0.02em', color: t.fg }">dezky</div>
</a>
</NuxtLink>
<nav :style="{ display: 'flex', alignItems: 'center', gap: '36px' }">
<a
v-for="(it, i) in items" :key="i" :href="it.href"
<NuxtLink
v-for="(it, i) in items" :key="i" :to="it.href"
:style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted, letterSpacing: '-0.005em' }"
@click.prevent="scrollToAnchor(it.href)"
>{{ it.label }}</a>
@click="onNav($event, it.href)"
>{{ it.label }}</NuxtLink>
</nav>
<div :style="{ display: 'flex', alignItems: 'center', gap: '14px' }">
@@ -57,7 +70,7 @@ function onLogo() {
@click="toggleLang()"
>{{ lang === 'da' ? 'da · en' : 'en · da' }}</button>
<a :href="APP_URL" :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted }">{{ copy.nav.login }}</a>
<LandingBtn variant="primary" @click="scrollToAnchor('#final-cta')">{{ copy.nav.cta }} </LandingBtn>
<LandingBtn variant="primary" @click="goToSection('#final-cta', route.path)">{{ copy.nav.cta }} </LandingBtn>
</div>
</div>
</header>