ronnibaslund/dezky
1
0
Fork 0
Code Issues 37 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(website): book-a-demo & status pages, expand roadmap/contact

Browse Source 
- /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.
This commit is contained in:
Ronni Baslund
2026-06-06 19:19:19 +02:00
parent 3347fa9265
commit d2096eb847
13 changed files with 427 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/website/pages/contact.vue
+52 -19
View File
@@ -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>