From d2096eb847fce5ed7b8754ac732290d28972e803 Mon Sep 17 00:00:00 2001
From: Ronni Baslund <rhb@vdoc.dk>
Date: Sat, 6 Jun 2026 19:19:19 +0200
Subject: [PATCH] feat(website): book-a-demo & status pages, expand
 roadmap/contact

- /demo: book-a-demo page with a what-to-expect column + a form that
  composes a prefilled email to info@dezky.eu (interim, no backend); built
  to swap for a self-hosted scheduler later. Wire every "Book a demo" CTA
  (nav, hero, pricing, the previously-dead final-CTA button, and the
  contact/partners/migration/coming-soon CTAs) to /demo.
- /status: manually-maintained system-status page (overall banner,
  per-service rows, incident history). Live modules operational; Video/Chat
  marked coming soon.
- Roadmap: expand the board (5 items/column) + a "the bigger picture"
  themes grid + a "suggest a feature" CTA + a directional-timelines note.
- Contact: purpose-specific channels (info@ / legal@ / privacy@), a
  response-time note, and a company + "see it live" demo block.
- Drop /status from the [slug].vue stub map; tidy now-unused imports.
---
 .../website/components/landing/ComingSoon.vue |   6 +-
 apps/website/components/landing/FinalCta.vue  |   4 +-
 apps/website/components/landing/Hero.vue      |   2 +-
 apps/website/components/landing/Nav.vue       |   6 +-
 apps/website/components/landing/Pricing.vue   |   2 +-
 apps/website/pages/[slug].vue                 |   1 -
 apps/website/pages/contact.vue                |  71 ++++++---
 apps/website/pages/demo.vue                   | 121 +++++++++++++++
 apps/website/pages/migration.vue              |   6 +-
 apps/website/pages/partners.vue               |   6 +-
 apps/website/pages/roadmap.vue                |  47 +++++-
 apps/website/pages/status.vue                 |  65 +++++++++
 apps/website/utils/landingCopy.ts             | 138 +++++++++++++++++-
 13 files changed, 427 insertions(+), 48 deletions(-)
 create mode 100644 apps/website/pages/demo.vue
 create mode 100644 apps/website/pages/status.vue

diff --git a/apps/website/components/landing/ComingSoon.vue b/apps/website/components/landing/ComingSoon.vue
index 40c7885..5931e35 100644
--- a/apps/website/components/landing/ComingSoon.vue
+++ b/apps/website/components/landing/ComingSoon.vue
@@ -2,18 +2,16 @@
 // 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'
+import { useCopy } 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="clamp(32px, 5vw, 48px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 160px)">
-    <LandingBtn variant="primary" size="lg" @click="goToSection('#final-cta', route.path)">{{ copy.pages.ctaDemo }} →</LandingBtn>
+    <LandingBtn variant="primary" size="lg" @click="navigateTo('/demo')">{{ copy.pages.ctaDemo }} →</LandingBtn>
   </LandingContainer>
 </template>
diff --git a/apps/website/components/landing/FinalCta.vue b/apps/website/components/landing/FinalCta.vue
index 6a28dca..6800851 100644
--- a/apps/website/components/landing/FinalCta.vue
+++ b/apps/website/components/landing/FinalCta.vue
@@ -14,13 +14,13 @@ const copy = useCopy()
     <LandingContainer pad="clamp(56px, 8vw, 140px) clamp(20px, 5vw, 64px)">
       <h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(32px, 6vw, 96px)', letterSpacing: '-0.04em', lineHeight: 0.98, margin: 0, color: C.bone, textWrap: 'balance', maxWidth: '900px' }">
         <template v-for="(part, i) in copy.finalCta.heading" :key="i">
-          <template v-if="typeof part === 'string'">{{ part }} </template>
+          <template v-if="typeof part === 'string'">{{ part }}  </template>
           <span v-else :style="{ color: C.signal }">{{ part.hl }}</span>
         </template>
       </h2>
       <div :style="{ marginTop: '28px', maxWidth: 'min(100%, 520px)', fontFamily: '\'Inter\', sans-serif', fontSize: '19px', color: 'rgba(244,243,238,0.7)' }">{{ copy.finalCta.sub }}</div>
       <div :style="{ marginTop: '40px' }">
-        <button :style="{
+        <button @click="navigateTo('/demo')" :style="{
           background: C.signal, color: C.carbon, border: 'none',
           padding: '20px 32px', fontFamily: '\'Inter\', sans-serif',
           fontSize: '16px', fontWeight: 600, borderRadius: '4px', cursor: 'pointer',
diff --git a/apps/website/components/landing/Hero.vue b/apps/website/components/landing/Hero.vue
index 4918f37..11680c8 100644
--- a/apps/website/components/landing/Hero.vue
+++ b/apps/website/components/landing/Hero.vue
@@ -46,7 +46,7 @@ const brush = {
       </div>
 
       <div :style="{ display: 'flex', gap: '12px', marginTop: '40px', flexWrap: 'wrap' }">
-        <LandingBtn variant="primary" size="lg">{{ copy.hero.cta }} →</LandingBtn>
+        <LandingBtn variant="primary" size="lg" @click="navigateTo('/demo')">{{ copy.hero.cta }} →</LandingBtn>
         <LandingBtn variant="secondary" size="lg">{{ copy.hero.sub_cta }}</LandingBtn>
       </div>
 
diff --git a/apps/website/components/landing/Nav.vue b/apps/website/components/landing/Nav.vue
index e948bdf..bc69f68 100644
--- a/apps/website/components/landing/Nav.vue
+++ b/apps/website/components/landing/Nav.vue
@@ -4,7 +4,7 @@
 import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { APP_URL } from '~/utils/landingTokens'
-import { useTheme, useCopy, useLang, toggleLang, scrollToAnchor, goToSection } from '~/composables/useLanding'
+import { useTheme, useCopy, useLang, toggleLang, scrollToAnchor } from '~/composables/useLanding'
 
 const t = useTheme()
 const copy = useCopy()
@@ -81,7 +81,7 @@ function onMobileLink(e: MouseEvent, href: string) {
           @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="goToSection('#final-cta', route.path)">{{ copy.nav.cta }} →</LandingBtn>
+        <LandingBtn variant="primary" @click="navigateTo('/demo')">{{ copy.nav.cta }} →</LandingBtn>
       </div>
 
       <!-- Hamburger — visible only on mobile via scoped CSS -->
@@ -155,7 +155,7 @@ function onMobileLink(e: MouseEvent, href: string) {
           :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted }"
           @click="mobileOpen = false"
         >{{ copy.nav.login }}</a>
-        <LandingBtn variant="primary" @click="() => { goToSection('#final-cta', route.path); mobileOpen = false }">{{ copy.nav.cta }} →</LandingBtn>
+        <LandingBtn variant="primary" @click="() => { navigateTo('/demo'); mobileOpen = false }">{{ copy.nav.cta }} →</LandingBtn>
       </div>
     </div>
   </header>
diff --git a/apps/website/components/landing/Pricing.vue b/apps/website/components/landing/Pricing.vue
index 70c5e23..529c597 100644
--- a/apps/website/components/landing/Pricing.vue
+++ b/apps/website/components/landing/Pricing.vue
@@ -17,7 +17,7 @@ const copy = useCopy()
             <p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '20px', lineHeight: 1.5, maxWidth: '640px', color: t.fgMuted, margin: 0, textWrap: 'pretty' }">{{ copy.pricing.lede }}</p>
           </div>
           <div :style="{ marginTop: '36px', display: 'flex', alignItems: 'center', gap: '16px' }">
-            <LandingBtn variant="primary" size="lg">{{ copy.pricing.cta }} →</LandingBtn>
+            <LandingBtn variant="primary" size="lg" @click="navigateTo('/demo')">{{ copy.pricing.cta }} →</LandingBtn>
           </div>
         </div>
         <div :style="{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: '6px', padding: '36px 36px' }">
diff --git a/apps/website/pages/[slug].vue b/apps/website/pages/[slug].vue
index 2a1ad10..72265c9 100644
--- a/apps/website/pages/[slug].vue
+++ b/apps/website/pages/[slug].vue
@@ -14,7 +14,6 @@ const STUBS: Record<string, { legal: boolean }> = {
   customers: { legal: false },
   careers: { legal: false },
   press: { legal: false },
-  status: { legal: false },
   docs: { legal: false },
   blog: { legal: false },
 }
diff --git a/apps/website/pages/contact.vue b/apps/website/pages/contact.vue
index f494a07..0558090 100644
--- a/apps/website/pages/contact.vue
+++ b/apps/website/pages/contact.vue
@@ -1,42 +1,75 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
-import { useTheme, useCopy, goToSection } from '~/composables/useLanding'
+import { useTheme, useCopy } from '~/composables/useLanding'
 
 definePageMeta({ layout: 'page' })
 
 const t = useTheme()
 const copy = useCopy()
-const route = useRoute()
 const c = computed(() => copy.value.pages.contact)
 
+const h2 = computed(() => ({
+  fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(28px, 3.6vw, 44px)',
+  letterSpacing: '-0.03em', lineHeight: 1.05, margin: 0, color: t.value.fg, textWrap: 'balance' as const,
+}))
+const cardLabel = computed(() => ({
+  fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.value.fgDim,
+  letterSpacing: '0.08em', textTransform: 'uppercase' as const,
+}))
+
 useHead({ title: () => `${copy.value.pages.contact.label} · dezky` })
 </script>
 
 <template>
   <LandingPageHeader :label="c.label" :title="c.title" :intro="c.intro" />
 
-  <LandingContainer pad="clamp(56px, 8vw, 56px) clamp(20px, 5vw, 64px) clamp(80px, 12vw, 160px)">
-    <div :style="{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))', gap: '24px', maxWidth: '760px' }">
+  <!-- Contact channels -->
+  <LandingContainer pad="clamp(56px, 8vw, 56px) clamp(20px, 5vw, 64px) clamp(40px, 6vw, 64px)">
+    <div :style="{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 260px), 1fr))', gap: '20px' }">
       <a
-        :href="`mailto:${c.email}`"
-        :style="{ display: 'block', padding: '28px', border: `1px solid ${t.border}`, borderRadius: '4px', background: t.surface }"
+        v-for="(ch, i) in c.channels" :key="i"
+        :href="`mailto:${ch[1]}`"
+        :style="{ display: 'flex', flexDirection: 'column', gap: '10px', 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>
+        <div :style="cardLabel">{{ ch[0] }}</div>
+        <div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '18px', color: t.fg, letterSpacing: '-0.015em', wordBreak: 'break-word' }">{{ ch[1] }}</div>
+        <p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', lineHeight: 1.55, color: t.fgMuted, margin: 0, textWrap: 'pretty' }">{{ ch[2] }}</p>
       </a>
+    </div>
+    <p :style="{ marginTop: '20px', fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgDim }">{{ c.responseNote }}</p>
+  </LandingContainer>
 
-      <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>
+  <!-- Company + demo -->
+  <LandingContainer pad="0 clamp(20px, 5vw, 64px) clamp(80px, 12vw, 160px)">
+    <div :style="{ borderTop: `1px solid ${t.borderStrong}`, paddingTop: 'clamp(40px, 5vw, 56px)' }">
+      <div class="contact-foot" :style="{ display: 'grid', gap: '32px', alignItems: 'start' }">
+        <!-- Company -->
+        <div :style="{ padding: '28px', border: `1px solid ${t.border}`, borderRadius: '4px', background: t.surface }">
+          <div :style="cardLabel">{{ c.addressLabel }}</div>
+          <div :style="{ marginTop: '12px', 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>
+
+        <!-- Demo CTA -->
+        <div>
+          <h2 :style="h2">{{ c.demoHeading }}</h2>
+          <p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '18px', lineHeight: 1.6, color: t.fgMuted, margin: '18px 0 28px', textWrap: 'pretty' }">{{ c.demoBody }}</p>
+          <LandingBtn variant="primary" size="lg" @click="navigateTo('/demo')">{{ copy.pages.ctaDemo }} →</LandingBtn>
         </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>
+
+<style scoped>
+.contact-foot {
+  grid-template-columns: 1fr 1.1fr;
+}
+@media (max-width: 768px) {
+  .contact-foot {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/apps/website/pages/demo.vue b/apps/website/pages/demo.vue
new file mode 100644
index 0000000..d973f3a
--- /dev/null
+++ b/apps/website/pages/demo.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+// Book-a-demo page. Interim: the form composes a prefilled email to
+// info@dezky.eu (zero backend, no US tools). Swap this for the self-built
+// embedded scheduler later — the copy + layout can stay.
+import { ref, computed } from 'vue'
+import { useTheme, useCopy } from '~/composables/useLanding'
+
+definePageMeta({ layout: 'page' })
+
+const t = useTheme()
+const copy = useCopy()
+const c = computed(() => copy.value.pages.demo)
+
+const name = ref('')
+const email = ref('')
+const company = ref('')
+const team = ref('')
+const message = ref('')
+
+function submit() {
+  const d = c.value
+  const subject = `Demo request — ${(company.value || name.value).trim()}`
+  const body = [
+    `${d.nameLabel}: ${name.value}`,
+    `${d.emailLabel}: ${email.value}`,
+    `${d.companyLabel}: ${company.value}`,
+    `${d.teamLabel}: ${team.value}`,
+    '',
+    message.value,
+  ].join('\n')
+  window.location.href = `mailto:info@dezky.eu?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`
+}
+
+const eyebrow = computed(() => ({
+  fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.value.fgDim,
+  letterSpacing: '0.12em', textTransform: 'uppercase' as const,
+}))
+const fieldLabel = computed(() => ({
+  display: 'block', marginBottom: '8px', fontFamily: '\'JetBrains Mono\', monospace',
+  fontSize: '11px', color: t.value.fgMuted, letterSpacing: '0.06em', textTransform: 'uppercase' as const,
+}))
+const inputStyle = computed(() => ({
+  width: '100%', padding: '12px 14px', border: `1px solid ${t.value.border}`, borderRadius: '4px',
+  background: t.value.bg, color: t.value.fg, fontFamily: '\'Inter\', sans-serif', fontSize: '15px',
+  boxSizing: 'border-box' as const,
+}))
+
+useHead({ title: () => `${copy.value.pages.demo.label} · dezky` })
+</script>
+
+<template>
+  <LandingPageHeader :label="c.label" :title="c.title" :intro="c.intro" />
+
+  <LandingContainer pad="clamp(56px, 8vw, 56px) clamp(20px, 5vw, 64px) clamp(80px, 12vw, 160px)">
+    <div class="demo-grid" :style="{ display: 'grid', gap: '48px', alignItems: 'start' }">
+      <!-- What to expect -->
+      <div>
+        <div :style="eyebrow">{{ c.expectHeading }}</div>
+        <ul :style="{ listStyle: 'none', margin: '24px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '16px' }">
+          <li
+            v-for="(e, i) in c.expect" :key="i"
+            :style="{ display: 'flex', gap: '12px', fontFamily: '\'Inter\', sans-serif', fontSize: '16px', lineHeight: 1.5, color: t.fg }"
+          >
+            <span :style="{ color: t.signal, fontWeight: 700, flexShrink: 0 }">✓</span>
+            <span>{{ e }}</span>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Form -->
+      <form
+        @submit.prevent="submit"
+        :style="{ padding: 'clamp(24px, 4vw, 36px)', border: `1px solid ${t.border}`, borderRadius: '4px', background: t.surface, display: 'flex', flexDirection: 'column', gap: '18px' }"
+      >
+        <div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '20px', color: t.fg, letterSpacing: '-0.015em' }">{{ c.formHeading }}</div>
+
+        <div>
+          <label :style="fieldLabel">{{ c.nameLabel }}</label>
+          <input v-model="name" type="text" required :placeholder="c.namePh" :style="inputStyle">
+        </div>
+        <div>
+          <label :style="fieldLabel">{{ c.emailLabel }}</label>
+          <input v-model="email" type="email" required :placeholder="c.emailPh" :style="inputStyle">
+        </div>
+        <div>
+          <label :style="fieldLabel">{{ c.companyLabel }}</label>
+          <input v-model="company" type="text" required :placeholder="c.companyPh" :style="inputStyle">
+        </div>
+        <div>
+          <label :style="fieldLabel">{{ c.teamLabel }}</label>
+          <select v-model="team" :style="{ ...inputStyle, appearance: 'none', cursor: 'pointer' }">
+            <option value="" disabled>{{ c.teamPh }}</option>
+            <option v-for="s in c.teamSizes" :key="s" :value="s">{{ s }}</option>
+          </select>
+        </div>
+        <div>
+          <label :style="fieldLabel">{{ c.messageLabel }}</label>
+          <textarea v-model="message" rows="3" :placeholder="c.messagePh" :style="{ ...inputStyle, resize: 'vertical' }" />
+        </div>
+
+        <button
+          type="submit"
+          :style="{ marginTop: '4px', background: t.signal, color: t.fg, border: 'none', padding: '16px 24px', fontFamily: '\'Inter\', sans-serif', fontSize: '15px', fontWeight: 600, borderRadius: '4px', cursor: 'pointer', letterSpacing: '-0.005em' }"
+        >{{ c.submit }} →</button>
+
+        <p :style="{ margin: 0, fontFamily: '\'Inter\', sans-serif', fontSize: '13px', lineHeight: 1.5, color: t.fgDim }">{{ c.note }}</p>
+      </form>
+    </div>
+  </LandingContainer>
+</template>
+
+<style scoped>
+.demo-grid {
+  grid-template-columns: 0.85fr 1.15fr;
+}
+@media (max-width: 768px) {
+  .demo-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/apps/website/pages/migration.vue b/apps/website/pages/migration.vue
index 865d206..60ae238 100644
--- a/apps/website/pages/migration.vue
+++ b/apps/website/pages/migration.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
-import { useTheme, useCopy, goToSection } from '~/composables/useLanding'
+import { useTheme, useCopy } 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` })
@@ -28,7 +26,7 @@ useHead({ title: () => `${copy.value.pages.migration.label} · dezky` })
 
     <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>
+      <LandingBtn variant="primary" size="lg" @click="navigateTo('/demo')">{{ copy.pages.ctaDemo }} →</LandingBtn>
     </div>
   </LandingContainer>
 </template>
diff --git a/apps/website/pages/partners.vue b/apps/website/pages/partners.vue
index f67a2cb..ec9cca4 100644
--- a/apps/website/pages/partners.vue
+++ b/apps/website/pages/partners.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useRoute } from 'vue-router'
-import { useTheme, useCopy, goToSection } from '~/composables/useLanding'
+import { useTheme, useCopy } from '~/composables/useLanding'
 
 definePageMeta({ layout: 'page' })
 
 const t = useTheme()
 const copy = useCopy()
-const route = useRoute()
 const c = computed(() => copy.value.pages.partners)
 
 const openFaq = ref<number | null>(0)
@@ -147,7 +145,7 @@ useHead({ title: () => `${copy.value.pages.partners.label} · dezky` })
 
   <!-- CTA -->
   <LandingContainer pad="clamp(48px, 7vw, 72px) clamp(20px, 5vw, 64px) clamp(80px, 12vw, 160px)">
-    <LandingBtn variant="primary" size="lg" @click="goToSection('#final-cta', route.path)">{{ c.cta }} →</LandingBtn>
+    <LandingBtn variant="primary" size="lg" @click="navigateTo('/demo')">{{ c.cta }} →</LandingBtn>
   </LandingContainer>
 </template>
 
diff --git a/apps/website/pages/roadmap.vue b/apps/website/pages/roadmap.vue
index 82d32c0..0ac4b51 100644
--- a/apps/website/pages/roadmap.vue
+++ b/apps/website/pages/roadmap.vue
@@ -7,13 +7,23 @@ const t = useTheme()
 const copy = useCopy()
 const c = computed(() => copy.value.pages.roadmap)
 
+const eyebrow = computed(() => ({
+  fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.value.fgDim,
+  letterSpacing: '0.12em', textTransform: 'uppercase' as const,
+}))
+const h2 = computed(() => ({
+  fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(28px, 3.6vw, 44px)',
+  letterSpacing: '-0.03em', lineHeight: 1.05, margin: '14px 0 0', color: t.value.fg, textWrap: 'balance' as const,
+}))
+
 useHead({ title: () => `${copy.value.pages.roadmap.label} · dezky` })
 </script>
 
 <template>
   <LandingPageHeader :label="c.label" :title="c.title" :intro="c.intro" />
 
-  <LandingContainer pad="clamp(56px, 8vw, 56px) clamp(20px, 5vw, 64px) clamp(80px, 12vw, 160px)">
+  <!-- Board -->
+  <LandingContainer pad="clamp(56px, 8vw, 56px) clamp(20px, 5vw, 64px) clamp(40px, 6vw, 64px)">
     <div :style="{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 240px), 1fr))', gap: '0', border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden' }">
       <div
         v-for="(col, i) in c.columns" :key="i"
@@ -33,6 +43,35 @@ useHead({ title: () => `${copy.value.pages.roadmap.label} · dezky` })
         </div>
       </div>
     </div>
+    <p :style="{ marginTop: '20px', fontFamily: '\'Inter\', sans-serif', fontSize: '13px', lineHeight: 1.55, color: t.fgDim, maxWidth: '620px' }">{{ c.note }}</p>
+  </LandingContainer>
+
+  <!-- Themes -->
+  <LandingContainer pad="0 clamp(20px, 5vw, 64px) clamp(40px, 6vw, 64px)">
+    <div :style="{ borderTop: `1px solid ${t.borderStrong}`, paddingTop: 'clamp(40px, 5vw, 56px)' }">
+      <div :style="eyebrow">{{ c.themesLabel }}</div>
+      <h2 :style="h2">{{ c.themesHeading }}</h2>
+      <p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '18px', lineHeight: 1.6, color: t.fgMuted, margin: '20px 0 48px', maxWidth: '640px', textWrap: 'pretty' }">{{ c.themesLede }}</p>
+
+      <div class="roadmap-themes" :style="{ display: 'grid', gap: '1px', background: t.border, border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden' }">
+        <div
+          v-for="(th, i) in c.themes" :key="i"
+          :style="{ padding: '28px', background: t.surface, display: 'flex', flexDirection: 'column', gap: '10px' }"
+        >
+          <div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '19px', color: t.fg, letterSpacing: '-0.015em' }">{{ th[0] }}</div>
+          <p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '15px', lineHeight: 1.6, color: t.fgMuted, margin: 0, textWrap: 'pretty' }">{{ th[1] }}</p>
+        </div>
+      </div>
+    </div>
+  </LandingContainer>
+
+  <!-- CTA -->
+  <LandingContainer pad="0 clamp(20px, 5vw, 64px) clamp(80px, 12vw, 160px)">
+    <div :style="{ borderTop: `1px solid ${t.borderStrong}`, paddingTop: 'clamp(40px, 5vw, 56px)' }">
+      <h2 :style="h2">{{ c.ctaHeading }}</h2>
+      <p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '18px', lineHeight: 1.6, color: t.fgMuted, margin: '20px 0 28px', maxWidth: '620px', textWrap: 'pretty' }">{{ c.ctaBody }}</p>
+      <LandingBtn variant="primary" size="lg" @click="navigateTo('/contact')">{{ c.ctaButton }} →</LandingBtn>
+    </div>
   </LandingContainer>
 </template>
 
@@ -44,6 +83,9 @@ useHead({ title: () => `${copy.value.pages.roadmap.label} · dezky` })
 .roadmap-col--first {
   border-left: none;
 }
+.roadmap-themes {
+  grid-template-columns: 1fr 1fr;
+}
 @media (max-width: 768px) {
   .roadmap-col {
     border-left: none;
@@ -52,5 +94,8 @@ useHead({ title: () => `${copy.value.pages.roadmap.label} · dezky` })
   .roadmap-col--first {
     border-top: none;
   }
+  .roadmap-themes {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/apps/website/pages/status.vue b/apps/website/pages/status.vue
new file mode 100644
index 0000000..783b923
--- /dev/null
+++ b/apps/website/pages/status.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { useTheme, useCopy } from '~/composables/useLanding'
+import { C } from '~/utils/landingTokens'
+
+definePageMeta({ layout: 'page' })
+
+const t = useTheme()
+const copy = useCopy()
+const c = computed(() => copy.value.pages.status)
+
+// Status keys → colours. Operational green, planned/coming-soon muted, plus
+// degraded/down for when an incident is logged in the copy.
+const COLORS: Record<string, string> = {
+  operational: C.ok,
+  planned: C.slate,
+  degraded: C.warn,
+  down: C.bad,
+}
+const dotColor = (key: string) => COLORS[key] ?? C.slate
+const labelColor = (key: string) => (key === 'degraded' || key === 'down' ? COLORS[key]! : t.value.fgMuted)
+
+// Overall banner is "all good" unless something is actively degraded/down.
+const allOk = computed(() => c.value.services.every(s => s[1] !== 'degraded' && s[1] !== 'down'))
+const bannerColor = computed(() => (allOk.value ? C.ok : C.warn))
+
+const headingStyle = computed(() => ({
+  fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '22px',
+  letterSpacing: '-0.015em', color: t.value.fg, margin: '0 0 16px',
+}))
+
+useHead({ title: () => `${copy.value.pages.status.title} · dezky` })
+</script>
+
+<template>
+  <LandingPageHeader :label="c.label" :title="c.title" :intro="c.intro" />
+
+  <LandingContainer pad="clamp(32px, 5vw, 48px) clamp(20px, 5vw, 64px) clamp(80px, 12vw, 160px)">
+    <div :style="{ maxWidth: '760px' }">
+      <!-- Overall status banner -->
+      <div :style="{ display: 'flex', alignItems: 'center', gap: '14px', padding: '20px 24px', borderRadius: '4px', border: `1px solid ${bannerColor}44`, background: `${bannerColor}12`, marginBottom: '48px' }">
+        <span :style="{ width: '12px', height: '12px', borderRadius: '999px', background: bannerColor, boxShadow: `0 0 0 4px ${bannerColor}22`, flexShrink: 0 }" />
+        <span :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '20px', letterSpacing: '-0.015em', color: t.fg }">{{ c.overallOk }}</span>
+      </div>
+
+      <!-- Per-service status -->
+      <h2 :style="headingStyle">{{ c.servicesHeading }}</h2>
+      <div :style="{ border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden', margin: '0 0 48px' }">
+        <div
+          v-for="(s, i) in c.services" :key="i"
+          :style="{ display: 'grid', gridTemplateColumns: '1fr auto', gap: '16px', alignItems: 'center', padding: '16px 20px', borderTop: i === 0 ? 'none' : `1px solid ${t.border}`, background: t.surface }"
+        >
+          <span :style="{ display: 'flex', alignItems: 'center', gap: '12px', fontFamily: '\'Inter\', sans-serif', fontSize: '15px', color: t.fg }">
+            <span :style="{ width: '8px', height: '8px', borderRadius: '999px', background: dotColor(s[1]), flexShrink: 0 }" />
+            {{ s[0] }}
+          </span>
+          <span :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '12px', letterSpacing: '0.04em', color: labelColor(s[1]), whiteSpace: 'nowrap' }">{{ c.statusLabels[s[1]] ?? s[1] }}</span>
+        </div>
+      </div>
+
+      <!-- Incident history -->
+      <h2 :style="headingStyle">{{ c.incidentsHeading }}</h2>
+      <p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '15px', lineHeight: 1.6, color: t.fgMuted, margin: 0 }">{{ c.noIncidents }}</p>
+    </div>
+  </LandingContainer>
+</template>
diff --git a/apps/website/utils/landingCopy.ts b/apps/website/utils/landingCopy.ts
index 29558f5..942b7a4 100644
--- a/apps/website/utils/landingCopy.ts
+++ b/apps/website/utils/landingCopy.ts
@@ -167,19 +167,61 @@ export const COPY = {
         title: 'Lad os tale sammen.',
         intro: 'Spørgsmål om migration, priser eller whitelabel? Skriv til os — vi svarer på dansk og engelsk.',
         emailLabel: 'E-mail',
-        email: 'kontakt@dezky.eu',
+        email: 'info@dezky.eu',
         addressLabel: 'Adresse',
         cvrLabel: 'CVR',
+        responseNote: 'Vi svarer typisk inden for én arbejdsdag — på dansk eller engelsk.',
+        channels: [
+          ['Generelt & salg', 'info@dezky.eu', 'Spørgsmål, demoer, priser og migration.'],
+          ['Juridisk', 'legal@dezky.eu', 'Servicevilkår, SLA og Enterprise-aftaler.'],
+          ['Databeskyttelse', 'privacy@dezky.eu', 'Privatliv, databehandleraftale og dataanmodninger.'],
+        ] as [string, string, string][],
+        demoHeading: 'Se dezky live.',
+        demoBody: 'Book en kort gennemgang, så viser vi suiten og svarer på dine spørgsmål — helt uforpligtende.',
+      },
+      demo: {
+        label: 'book en demo',
+        title: 'Se dezky i aktion.',
+        intro: 'En kort, konkret gennemgang af suiten — på dansk eller engelsk. Udfyld formularen, så vender vi tilbage med et par tider.',
+        expectHeading: 'Hvad du kan forvente',
+        expect: [
+          '30 minutter — ingen slides, intet salgspres.',
+          'Vi viser modulerne live på rigtige data.',
+          'Et reelt pristilbud til jeres størrelse.',
+          'Svar på migration, sikkerhed og whitelabel.',
+        ] as string[],
+        formHeading: 'Book din demo',
+        nameLabel: 'Navn', namePh: 'Dit navn',
+        emailLabel: 'Arbejds-e-mail', emailPh: 'dig@virksomhed.dk',
+        companyLabel: 'Virksomhed', companyPh: 'Virksomhedens navn',
+        teamLabel: 'Antal brugere', teamPh: 'Vælg…',
+        teamSizes: ['1–10', '11–50', '51–200', '200+'] as string[],
+        messageLabel: 'Besked (valgfrit)', messagePh: 'Hvad vil I gerne se?',
+        submit: 'Book en demo',
+        note: 'Vi vender tilbage inden for én arbejdsdag for at aftale et tidspunkt. Din henvendelse sendes til info@dezky.eu.',
       },
       roadmap: {
         label: 'roadmap',
         title: 'Hvor vi er på vej hen.',
         intro: 'Vi udvikler i det åbne. Her er, hvad der er live, hvad der er på vej, og hvad vi planlægger.',
         columns: [
-          ['Live nu', ['Mail, kalender & kontakter', 'Filer & drev', 'Single sign-on & brugerstyring']],
-          ['Næste', ['Videomøder i browseren', 'Team chat med tråde', 'Mobil-apps til iOS & Android']],
-          ['Senere', ['Kundekontrollerede nøgler (BYOK)', 'Avanceret compliance-rapportering', 'Flere EU-regioner']],
+          ['Live nu', ['Mail, kalender & kontakter', 'Filer & drev', 'Single sign-on & brugerstyring', 'Office-redigering i browseren', 'Admin-konsol & domæneopsætning']],
+          ['Næste', ['Videomøder i browseren', 'Team chat med tråde', 'Mobil-apps til iOS & Android', 'Delte teamdrev & rettigheder', 'Migrationsværktøj fra Microsoft 365']],
+          ['Senere', ['Kundekontrollerede nøgler (BYOK)', 'Avanceret compliance-rapportering', 'Flere EU-regioner', 'Whitelabel-portal til partnere', 'Offentlige status- & hændelses-API\'er']],
         ],
+        note: 'Tidslinjer er retningsgivende — ikke løfter. Vi prioriterer ud fra sikkerhed, kundebehov og hvad der gør suiten mere sammenhængende.',
+        themesLabel: 'temaer',
+        themesHeading: 'De store linjer.',
+        themesLede: 'Uanset rækkefølgen i kolonnerne er det her, vi satser på.',
+        themes: [
+          ['Suverænitet som standard', 'Alt hostet i EU, ingen amerikansk afhængighed. Vi udvider med flere EU-regioner og endnu skarpere datakontrol.'],
+          ['Ét login, alle værktøjer', 'Vi syr modulerne tættere sammen, så det føles som én arbejdsplads — ikke fem apps med samme farve.'],
+          ['Åben og portabel', 'Åbne standarder, fuld eksport og flere migrationsværktøjer. Det skal være lige så let at forlade os som at komme til.'],
+          ['Bygget til partnere', 'Dybere whitelabel og selvbetjente værktøjer til forhandlere, så partnere kan drive deres eget brand på dezky.'],
+        ] as [string, string][],
+        ctaHeading: 'Mangler du noget på listen?',
+        ctaBody: 'Vores roadmap formes af de virksomheder, der bruger dezky. Fortæl os, hvad der ville gøre størst forskel for jer.',
+        ctaButton: 'Foreslå en funktion',
       },
       changelog: {
         label: 'changelog',
@@ -407,6 +449,25 @@ export const COPY = {
         contactHeading: 'Kontakt',
         contactBody: 'Spørgsmål om cookies eller databeskyttelse: privacy@dezky.eu.',
       },
+      status: {
+        label: 'status',
+        title: 'Systemstatus',
+        intro: 'Aktuel status for dezkys tjenester. Vi opdaterer siden ved planlagt vedligehold og under hændelser.',
+        overallOk: 'Alle systemer kører',
+        servicesHeading: 'Tjenester',
+        statusLabels: { operational: 'Operationel', planned: 'På vej', degraded: 'Forringet ydelse', down: 'Nede' } as Record<string, string>,
+        services: [
+          ['E-mail', 'operational'],
+          ['Drev', 'operational'],
+          ['Kalender', 'operational'],
+          ['Login / SSO', 'operational'],
+          ['Platform & API', 'operational'],
+          ['Videomøder', 'planned'],
+          ['Chat', 'planned'],
+        ] as [string, string][],
+        incidentsHeading: 'Hændelseshistorik',
+        noIncidents: 'Ingen hændelser registreret de seneste 90 dage.',
+      },
       stubs: {
         customers: 'Kunder',
         careers: 'Karriere',
@@ -594,19 +655,61 @@ export const COPY = {
         title: 'Let\'s talk.',
         intro: 'Questions about migration, pricing or whitelabel? Drop us a line — we reply in Danish and English.',
         emailLabel: 'Email',
-        email: 'kontakt@dezky.eu',
+        email: 'info@dezky.eu',
         addressLabel: 'Address',
         cvrLabel: 'Company reg.',
+        responseNote: 'We usually reply within one business day — in Danish or English.',
+        channels: [
+          ['General & sales', 'info@dezky.eu', 'Questions, demos, pricing and migration.'],
+          ['Legal', 'legal@dezky.eu', 'Terms of service, SLA and Enterprise agreements.'],
+          ['Data protection', 'privacy@dezky.eu', 'Privacy, the DPA and data requests.'],
+        ] as [string, string, string][],
+        demoHeading: 'See dezky live.',
+        demoBody: 'Book a short walkthrough — we\'ll show you the suite and answer your questions, no commitment.',
+      },
+      demo: {
+        label: 'book a demo',
+        title: 'See dezky in action.',
+        intro: 'A short, concrete walkthrough of the suite — in Danish or English. Fill in the form and we\'ll come back with a few times.',
+        expectHeading: 'What to expect',
+        expect: [
+          '30 minutes — no slides, no sales pressure.',
+          'We show the modules live on real data.',
+          'A real price quote for your size.',
+          'Answers on migration, security and whitelabel.',
+        ] as string[],
+        formHeading: 'Book your demo',
+        nameLabel: 'Name', namePh: 'Your name',
+        emailLabel: 'Work email', emailPh: 'you@company.com',
+        companyLabel: 'Company', companyPh: 'Company name',
+        teamLabel: 'Number of users', teamPh: 'Select…',
+        teamSizes: ['1–10', '11–50', '51–200', '200+'] as string[],
+        messageLabel: 'Message (optional)', messagePh: 'What would you like to see?',
+        submit: 'Book a demo',
+        note: 'We\'ll get back within one business day to arrange a time. Your request is sent to info@dezky.eu.',
       },
       roadmap: {
         label: 'roadmap',
         title: 'Where we\'re headed.',
         intro: 'We build in the open. Here\'s what\'s live, what\'s next, and what we\'re planning.',
         columns: [
-          ['Live now', ['Mail, calendar & contacts', 'Files & drive', 'Single sign-on & user management']],
-          ['Next', ['Video meetings in the browser', 'Team chat with threads', 'Mobile apps for iOS & Android']],
-          ['Later', ['Customer-held keys (BYOK)', 'Advanced compliance reporting', 'More EU regions']],
+          ['Live now', ['Mail, calendar & contacts', 'Files & drive', 'Single sign-on & user management', 'Office editing in the browser', 'Admin console & domain setup']],
+          ['Next', ['Video meetings in the browser', 'Team chat with threads', 'Mobile apps for iOS & Android', 'Shared team drives & permissions', 'Microsoft 365 migration tooling']],
+          ['Later', ['Customer-held keys (BYOK)', 'Advanced compliance reporting', 'More EU regions', 'White-label partner portal', 'Public status & incident APIs']],
         ],
+        note: 'Timelines are directional — not promises. We prioritise by security, customer needs, and what makes the suite more cohesive.',
+        themesLabel: 'themes',
+        themesHeading: 'The bigger picture.',
+        themesLede: 'Whatever the column order, these are the bets we\'re making.',
+        themes: [
+          ['Sovereignty by default', 'Everything EU-hosted, no American dependency. We\'re expanding to more EU regions and even tighter data control.'],
+          ['One login, every tool', 'We\'re stitching the modules closer together so it feels like one workplace — not five apps in the same colour.'],
+          ['Open and portable', 'Open standards, full export and more migration tooling. Leaving us should be as easy as joining.'],
+          ['Built for partners', 'Deeper white-label and self-serve reseller tooling, so partners can run their own brand on dezky.'],
+        ] as [string, string][],
+        ctaHeading: 'Missing something from the list?',
+        ctaBody: 'Our roadmap is shaped by the businesses using dezky. Tell us what would make the biggest difference for you.',
+        ctaButton: 'Suggest a feature',
       },
       changelog: {
         label: 'changelog',
@@ -834,6 +937,25 @@ export const COPY = {
         contactHeading: 'Contact',
         contactBody: 'Questions about cookies or data protection: privacy@dezky.eu.',
       },
+      status: {
+        label: 'status',
+        title: 'System status',
+        intro: 'Current status of dezky\'s services. We update this page during planned maintenance and incidents.',
+        overallOk: 'All systems operational',
+        servicesHeading: 'Services',
+        statusLabels: { operational: 'Operational', planned: 'Coming soon', degraded: 'Degraded', down: 'Down' } as Record<string, string>,
+        services: [
+          ['Email', 'operational'],
+          ['Drive', 'operational'],
+          ['Calendar', 'operational'],
+          ['Login / SSO', 'operational'],
+          ['Platform & API', 'operational'],
+          ['Video meetings', 'planned'],
+          ['Chat', 'planned'],
+        ] as [string, string][],
+        incidentsHeading: 'Incident history',
+        noIncidents: 'No incidents reported in the last 90 days.',
+      },
       stubs: {
         customers: 'Customers',
         careers: 'Careers',