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).
48 lines
2.8 KiB
Vue
48 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
// Section 08 — pricing. Pitch column + a single price card.
|
|
// Ported from landing-sections.jsx Pricing.
|
|
import { useTheme, useCopy } from '~/composables/useLanding'
|
|
const t = useTheme()
|
|
const copy = useCopy()
|
|
const localePath = useLocalePath()
|
|
</script>
|
|
|
|
<template>
|
|
<section id="pricing" :style="{ background: t.bgAlt, color: t.fg, borderTop: `1px solid ${t.border}`, borderBottom: `1px solid ${t.border}`, scrollMarginTop: '72px' }">
|
|
<LandingContainer pad="clamp(56px, 8vw, 120px) clamp(20px, 5vw, 64px)">
|
|
<LandingSectionLabel :label="copy.pricing.label" />
|
|
<div class="pricing-grid" :style="{ display: 'grid', gap: '80px', alignItems: 'center' }">
|
|
<div>
|
|
<h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(36px, 4.4vw, 64px)', letterSpacing: '-0.032em', lineHeight: 1.0, margin: 0, textWrap: 'balance', color: t.fg }">{{ copy.pricing.heading }}</h2>
|
|
<div :style="{ marginTop: '28px', maxWidth: '520px' }">
|
|
<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" data-umami-event="book-demo" @click="navigateTo(localePath('/demo'))">{{ copy.pricing.cta }} →</LandingBtn>
|
|
</div>
|
|
</div>
|
|
<div :style="{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: '6px', padding: '36px 36px' }">
|
|
<div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgDim, letterSpacing: '0.1em', textTransform: 'uppercase' }">{{ copy.pricing.teaser }}</div>
|
|
<div :style="{ display: 'flex', alignItems: 'baseline', gap: '12px', marginTop: '12px' }">
|
|
<span :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontSize: 'clamp(56px, 10vw, 96px)', fontWeight: 600, letterSpacing: '-0.045em', lineHeight: 1, color: t.fg }">{{ copy.pricing.price }}</span>
|
|
<span :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '13px', color: t.fgMuted }">{{ copy.pricing.unit }}</span>
|
|
</div>
|
|
<div :style="{ height: '1px', background: t.border, margin: '28px 0' }" />
|
|
<p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '13px', lineHeight: 1.6, maxWidth: '640px', color: t.fgMuted, margin: 0, textWrap: 'pretty' }">{{ copy.pricing.note }}</p>
|
|
</div>
|
|
</div>
|
|
</LandingContainer>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.pricing-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.pricing-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|