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/pages/[slug].vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+// Catch-all for the footer's not-yet-built pages. Each known slug renders a
+// shared "coming soon" body with its localized title; legal slugs get the
+// legal-specific body. Unknown slugs 404 (explicit pages like /about win over
+// this dynamic route in Nuxt's resolver).
+import { computed } from 'vue'
+import { useRoute, useCopy } from '#imports'
+
+definePageMeta({ layout: 'page' })
+
+// Known stub slugs and whether they're legal pages. Keys must match the
+// `pages.stubs` keys in landingCopy.ts.
+const STUBS: Record<string, { legal: boolean }> = {
+  customers: { legal: false },
+  careers: { legal: false },
+  press: { legal: false },
+  status: { legal: false },
+  docs: { legal: false },
+  blog: { legal: false },
+  privacy: { legal: true },
+  dpa: { legal: true },
+  terms: { legal: true },
+  sla: { legal: true },
+  cookies: { legal: true },
+}
+
+const route = useRoute()
+const copy = useCopy()
+
+const slug = computed(() => String(route.params.slug))
+
+const stub = computed(() => STUBS[slug.value])
+if (!stub.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+type StubKey = keyof typeof copy.value.pages.stubs
+const title = computed(() => copy.value.pages.stubs[slug.value as StubKey])
+const body = computed(() => (stub.value!.legal ? copy.value.pages.legalBody : copy.value.pages.comingSoonBody))
+
+useHead({ title: () => `${title.value} · dezky` })
+</script>
+
+<template>
+  <LandingComingSoon :title="title" :body="body" />
+</template>

apps/website/pages/about.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useTheme, useCopy } from '~/composables/useLanding'
+
+definePageMeta({ layout: 'page' })
+
+const t = useTheme()
+const copy = useCopy()
+const c = computed(() => copy.value.pages.about)
+
+useHead({ title: () => `${copy.value.pages.about.label} · dezky` })
+</script>
+
+<template>
+  <LandingPageHeader :label="c.label" :title="c.title" :intro="c.intro" />
+
+  <LandingContainer pad="64px 64px 160px">
+    <div :style="{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: '80px', alignItems: 'start' }">
+      <div :style="{ display: 'flex', flexDirection: 'column', gap: '24px' }">
+        <p
+          v-for="(para, i) in c.body" :key="i"
+          :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '18px', lineHeight: 1.6, color: t.fg, margin: 0, textWrap: 'pretty' }"
+        >{{ para }}</p>
+      </div>
+
+      <div :style="{ display: 'flex', flexDirection: 'column', gap: '0', border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden' }">
+        <div
+          v-for="(p, i) in c.principles" :key="i"
+          :style="{ padding: '24px 28px', borderTop: i === 0 ? 'none' : `1px solid ${t.border}`, background: t.surface }"
+        >
+          <div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '18px', color: t.fg, letterSpacing: '-0.015em' }">{{ p[0] }}</div>
+          <div :style="{ marginTop: '8px', fontFamily: '\'Inter\', sans-serif', fontSize: '14px', lineHeight: 1.55, color: t.fgMuted }">{{ p[1] }}</div>
+        </div>
+      </div>
+    </div>
+  </LandingContainer>
+</template>

apps/website/pages/brand.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useTheme, useCopy } from '~/composables/useLanding'
+
+definePageMeta({ layout: 'page' })
+
+const t = useTheme()
+const copy = useCopy()
+const c = computed(() => copy.value.pages.brand)
+
+useHead({ title: () => `${copy.value.pages.brand.label} · dezky` })
+</script>
+
+<template>
+  <LandingPageHeader :label="c.label" :title="c.title" :intro="c.intro" />
+
+  <LandingContainer pad="56px 64px 160px">
+    <div :style="{ display: 'flex', flexDirection: 'column', gap: '0', border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden', maxWidth: '820px' }">
+      <div
+        v-for="(rule, i) in c.rules" :key="i"
+        :style="{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: '24px', padding: '24px 28px', borderTop: i === 0 ? 'none' : `1px solid ${t.border}`, background: t.surface, alignItems: 'baseline' }"
+      >
+        <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgDim, letterSpacing: '0.08em', textTransform: 'uppercase' }">{{ rule[0] }}</div>
+        <div :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '15px', lineHeight: 1.6, color: t.fg }">{{ rule[1] }}</div>
+      </div>
+    </div>
+
+    <div :style="{ marginTop: '48px' }">
+      <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgDim, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: '20px' }">{{ c.colorsLabel }}</div>
+      <div :style="{ display: 'flex', gap: '20px', flexWrap: 'wrap' }">
+        <div v-for="(col, i) in c.colors" :key="i" :style="{ width: '180px' }">
+          <div :style="{ height: '120px', borderRadius: '4px', background: col[1], border: `1px solid ${t.border}` }" />
+          <div :style="{ marginTop: '12px', fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '15px', color: t.fg }">{{ col[0] }}</div>
+          <div :style="{ marginTop: '2px', fontFamily: '\'JetBrains Mono\', monospace', fontSize: '12px', color: t.fgMuted }">{{ col[1] }}</div>
+        </div>
+      </div>
+    </div>
+  </LandingContainer>
+</template>

apps/website/pages/changelog.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useTheme, useCopy } from '~/composables/useLanding'
+
+definePageMeta({ layout: 'page' })
+
+const t = useTheme()
+const copy = useCopy()
+const c = computed(() => copy.value.pages.changelog)
+
+useHead({ title: () => `${copy.value.pages.changelog.label} · dezky` })
+</script>
+
+<template>
+  <LandingPageHeader :label="c.label" :title="c.title" :intro="c.intro" />
+
+  <LandingContainer pad="56px 64px 160px">
+    <div :style="{ maxWidth: '760px' }">
+      <div
+        v-for="(entry, i) in c.entries" :key="i"
+        :style="{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: '32px', padding: '32px 0', borderTop: `1px solid ${t.border}`, alignItems: 'start' }"
+      >
+        <div>
+          <div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '20px', color: t.fg, letterSpacing: '-0.015em' }">{{ entry[0] }}</div>
+          <div :style="{ marginTop: '4px', fontFamily: '\'JetBrains Mono\', monospace', fontSize: '12px', color: t.fgDim }">{{ entry[1] }}</div>
+        </div>
+        <ul :style="{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '12px' }">
+          <li
+            v-for="(item, j) in entry[2]" :key="j"
+            :style="{ display: 'flex', gap: '12px', fontFamily: '\'Inter\', sans-serif', fontSize: '15px', lineHeight: 1.5, color: t.fg }"
+          >
+            <span :style="{ color: t.fgDim, flexShrink: 0 }">—</span>
+            <span>{{ item }}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </LandingContainer>
+</template>

apps/website/pages/contact.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { useTheme, useCopy, goToSection } from '~/composables/useLanding'
+
+definePageMeta({ layout: 'page' })
+
+const t = useTheme()
+const copy = useCopy()
+const route = useRoute()
+const c = computed(() => copy.value.pages.contact)
+
+useHead({ title: () => `${copy.value.pages.contact.label} · dezky` })
+</script>
+
+<template>
+  <LandingPageHeader :label="c.label" :title="c.title" :intro="c.intro" />
+
+  <LandingContainer pad="56px 64px 160px">
+    <div :style="{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '24px', maxWidth: '760px' }">
+      <a
+        :href="`mailto:${c.email}`"
+        :style="{ display: 'block', padding: '28px', border: `1px solid ${t.border}`, borderRadius: '4px', background: t.surface }"
+      >
+        <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgDim, letterSpacing: '0.08em', textTransform: 'uppercase' }">{{ c.emailLabel }}</div>
+        <div :style="{ marginTop: '10px', fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '20px', color: t.fg }">{{ c.email }}</div>
+      </a>
+
+      <div :style="{ padding: '28px', border: `1px solid ${t.border}`, borderRadius: '4px', background: t.surface }">
+        <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgDim, letterSpacing: '0.08em', textTransform: 'uppercase' }">{{ c.addressLabel }}</div>
+        <div :style="{ marginTop: '10px', fontFamily: '\'Inter\', sans-serif', fontSize: '15px', lineHeight: 1.6, color: t.fg }">
+          <div>{{ copy.footer.legal.name }}</div>
+          <div>{{ copy.footer.legal.addr }}</div>
+          <div :style="{ marginTop: '6px', color: t.fgMuted }">{{ c.cvrLabel }}: {{ copy.footer.legal.cvr.replace('CVR ', '') }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div :style="{ marginTop: '48px' }">
+      <LandingBtn variant="primary" size="lg" @click="goToSection('#final-cta', route.path)">{{ copy.pages.ctaDemo }} →</LandingBtn>
+    </div>
+  </LandingContainer>
+</template>

apps/website/pages/index.vue

@@ -3,14 +3,23 @@
 // (Landing Page.html → landing-app.jsx + landing-sections.jsx). Light theme,
 // Danish default, hero variant A — the production defaults the user landed on.
 // Section order matches the design exactly.
-import { useTheme, useCopy, useLang } from '~/composables/useLanding'
+import { onMounted, nextTick } from 'vue'
+import { useRoute } from 'vue-router'
+import { useTheme, useCopy, useLang, scrollToAnchor } from '~/composables/useLanding'
 
 const t = useTheme()
 const copy = useCopy()
 const lang = useLang()
+const route = useRoute()
 
 const description = computed(() => copy.value.hero.sub)
 
+// Arriving via a section link from a sub-page (e.g. "/#suite") lands here with
+// a hash — scroll to it once the page has painted.
+onMounted(() => {
+  if (route.hash) nextTick(() => setTimeout(() => scrollToAnchor(route.hash), 60))
+})
+
 useHead({
   title: 'dezky · suveræn produktivitet',
   htmlAttrs: { lang },

apps/website/pages/migration.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { useTheme, useCopy, goToSection } from '~/composables/useLanding'
+
+definePageMeta({ layout: 'page' })
+
+const t = useTheme()
+const copy = useCopy()
+const route = useRoute()
+const c = computed(() => copy.value.pages.migration)
+
+useHead({ title: () => `${copy.value.pages.migration.label} · dezky` })
+</script>
+
+<template>
+  <LandingPageHeader :label="c.label" :title="c.title" :intro="c.intro" />
+
+  <LandingContainer pad="56px 64px 80px">
+    <div :style="{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '40px' }">
+      <div v-for="(step, i) in c.steps" :key="i">
+        <div :style="{ paddingTop: '20px', borderTop: `1px solid ${t.borderStrong}` }">
+          <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '12px', color: t.fgDim, letterSpacing: '0.06em' }">step {{ step[0] }}</div>
+          <div :style="{ marginTop: '20px', fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '24px', color: t.fg, letterSpacing: '-0.02em' }">{{ step[1] }}</div>
+          <p :style="{ marginTop: '12px', fontFamily: '\'Inter\', sans-serif', fontSize: '15px', lineHeight: 1.6, color: t.fgMuted, textWrap: 'pretty' }">{{ step[2] }}</p>
+        </div>
+      </div>
+    </div>
+
+    <p :style="{ marginTop: '64px', fontFamily: '\'Inter\', sans-serif', fontSize: '16px', color: t.fg }">{{ c.note }}</p>
+    <div :style="{ marginTop: '32px' }">
+      <LandingBtn variant="primary" size="lg" @click="goToSection('#final-cta', route.path)">{{ copy.pages.ctaDemo }} →</LandingBtn>
+    </div>
+  </LandingContainer>
+</template>

apps/website/pages/roadmap.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useTheme, useCopy } from '~/composables/useLanding'
+
+definePageMeta({ layout: 'page' })
+
+const t = useTheme()
+const copy = useCopy()
+const c = computed(() => copy.value.pages.roadmap)
+
+useHead({ title: () => `${copy.value.pages.roadmap.label} · dezky` })
+</script>
+
+<template>
+  <LandingPageHeader :label="c.label" :title="c.title" :intro="c.intro" />
+
+  <LandingContainer pad="56px 64px 160px">
+    <div :style="{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '0', border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden' }">
+      <div
+        v-for="(col, i) in c.columns" :key="i"
+        :style="{ padding: '32px 28px', borderLeft: i === 0 ? 'none' : `1px solid ${t.border}`, background: t.surface, minHeight: '260px' }"
+      >
+        <div :style="{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '24px' }">
+          <span :style="{ width: '6px', height: '6px', borderRadius: '999px', background: i === 0 ? t.signal : t.fgDim }" />
+          <span :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgMuted, letterSpacing: '0.08em', textTransform: 'uppercase' }">{{ col[0] }}</span>
+        </div>
+        <div :style="{ display: 'flex', flexDirection: 'column', gap: '14px' }">
+          <div
+            v-for="(item, j) in col[1]" :key="j"
+            :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '15px', lineHeight: 1.5, color: t.fg }"
+          >{{ item }}</div>
+        </div>
+      </div>
+    </div>
+  </LandingContainer>
+</template>