Ronni Baslund
554cb99f2c
Add the Umami tracker (cookieless, no consent banner) in the document head, limited to the production hostnames via data-domains so dev traffic doesn't pollute the stats. Pageviews are auto-tracked per page and locale. Custom events on the key funnel: - demo-request (demo form submit, with teamSize) - partner-application (partner form submit, with type) - book-demo (every "Book a demo" CTA click) via data-umami-event - login (clicks through to the app) Also fix the mobile nav menu links, which weren't localized (would drop Danish visitors back to English).
77 lines
3.4 KiB
Vue
77 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { useTheme, useCopy } from '~/composables/useLanding'
|
|
|
|
definePageMeta({ layout: 'page' })
|
|
|
|
const t = useTheme()
|
|
const copy = useCopy()
|
|
const localePath = useLocalePath()
|
|
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" />
|
|
|
|
<!-- 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
|
|
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="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>
|
|
|
|
<!-- 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" data-umami-event="book-demo" @click="navigateTo(localePath('/demo'))">{{ copy.pages.ctaDemo }} →</LandingBtn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</LandingContainer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.contact-foot {
|
|
grid-template-columns: 1fr 1.1fr;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.contact-foot {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|