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.

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 },
 }

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>

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>

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>

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>
 

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>

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>