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.

apps/website/components/landing/ComingSoon.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+// Placeholder body for not-yet-built sub-pages. Shows the page title under a
+// "coming soon" eyebrow, an explanatory line, and a demo CTA. Legal pages pass
+// the legal-specific body instead of the generic one.
+import { useRoute } from 'vue-router'
+import { useCopy, goToSection } from '~/composables/useLanding'
+
+defineProps<{ title: string, body: string }>()
+
+const copy = useCopy()
+const route = useRoute()
+</script>
+
+<template>
+  <LandingPageHeader :label="copy.pages.comingSoonKicker" :title="title" :intro="body" />
+  <LandingContainer pad="48px 64px 160px">
+    <LandingBtn variant="primary" size="lg" @click="goToSection('#final-cta', route.path)">{{ copy.pages.ctaDemo }} →</LandingBtn>
+  </LandingContainer>
+</template>

apps/website/components/landing/Footer.vue

@@ -1,18 +1,22 @@
 <script setup lang="ts">
 // Footer — lockup + tagline + legal, four link columns, status row.
-// Ported from landing-sections.jsx Footer (light mode). Anchor links smooth-
-// scroll; "#" placeholders point at not-yet-built subpages.
+// Ported from landing-sections.jsx Footer (light mode). Links are real routes
+// now; "/#suite"-style section links smooth-scroll on the homepage and route
+// home + scroll from a sub-page.
+import { useRoute } from 'vue-router'
 import { C } from '~/utils/landingTokens'
 import { useTheme, useCopy, scrollToAnchor } from '~/composables/useLanding'
 const t = useTheme()
 const copy = useCopy()
+const route = useRoute()
 
 function onLink(e: MouseEvent, href: string) {
-  if (href.startsWith('#') && href.length > 1) {
-    e.preventDefault()
-    scrollToAnchor(href)
-  } else if (href === '#') {
+  // In-page section link ("/#suite"): smooth-scroll in place when already on
+  // the homepage. Off-page, let NuxtLink route to "/#suite" — index.vue scrolls
+  // to the hash on mount.
+  if (href.includes('#') && route.path === '/') {
     e.preventDefault()
+    scrollToAnchor(href.slice(href.indexOf('#')))
   }
 }
 </script>
@@ -33,11 +37,11 @@ function onLink(e: MouseEvent, href: string) {
         <div v-for="(col, i) in copy.footer.cols" :key="i">
           <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: 'rgba(10,10,10,0.45)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: '18px' }">{{ col[0] }}</div>
           <div :style="{ display: 'flex', flexDirection: 'column', gap: '12px' }">
-            <a
-              v-for="(link, j) in col[1]" :key="j" :href="link[1]"
+            <NuxtLink
+              v-for="(link, j) in col[1]" :key="j" :to="link[1]"
               :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: 'rgba(10,10,10,0.78)' }"
               @click="onLink($event, link[1])"
-            >{{ link[0] }}</a>
+            >{{ link[0] }}</NuxtLink>
           </div>
         </div>
       </div>

apps/website/components/landing/Nav.vue

@@ -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>

apps/website/components/landing/PageHeader.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Shared header for sub-pages: back link, mono eyebrow with signal dot, big
+// title, optional intro. Mirrors the hero/section typography so sub-pages feel
+// like the same site.
+import { useTheme, useCopy } from '~/composables/useLanding'
+
+defineProps<{ label: string, title: string, intro?: string }>()
+
+const t = useTheme()
+const copy = useCopy()
+</script>
+
+<template>
+  <LandingContainer pad="120px 64px 0">
+    <NuxtLink
+      to="/"
+      :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '12px', color: t.fgMuted, letterSpacing: '0.04em', display: 'inline-flex', alignItems: 'center', gap: '8px' }"
+    >← {{ copy.pages.back }}</NuxtLink>
+
+    <div :style="{ display: 'flex', alignItems: 'center', gap: '12px', marginTop: '48px', marginBottom: '24px' }">
+      <span :style="{ width: '6px', height: '6px', borderRadius: '999px', background: t.signal, boxShadow: `0 0 0 4px ${t.signal}33` }" />
+      <span :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '12px', color: t.fgMuted, letterSpacing: '0.08em', textTransform: 'uppercase' }">{{ label }}</span>
+    </div>
+
+    <h1 :style="{
+      fontFamily: '\'Inter Tight\', \'Inter\', sans-serif', fontWeight: 600,
+      fontSize: 'clamp(40px, 5.4vw, 76px)', letterSpacing: '-0.035em', lineHeight: 1.0,
+      margin: 0, textWrap: 'balance', color: t.fg, maxWidth: '900px',
+    }">{{ title }}</h1>
+
+    <p
+      v-if="intro"
+      :style="{ marginTop: '32px', maxWidth: '620px', fontFamily: '\'Inter\', sans-serif', fontSize: '20px', lineHeight: 1.5, color: t.fgMuted, textWrap: 'pretty' }"
+    >{{ intro }}</p>
+  </LandingContainer>
+</template>