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).
70 lines
3.4 KiB
Vue
70 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
// Hero — eyebrow, big headline with signal-yellow highlighter brush, sub,
|
|
// dual CTAs, trust strip, and the product viewport mockup below.
|
|
// Ported from landing-sections.jsx Hero (variant A, light mode).
|
|
import { computed } from 'vue'
|
|
import { C } from '~/utils/landingTokens'
|
|
import { useTheme, useCopy } from '~/composables/useLanding'
|
|
|
|
const t = useTheme()
|
|
const copy = useCopy()
|
|
const localePath = useLocalePath()
|
|
|
|
// Variant A is the production default the user landed on.
|
|
const headline = computed(() => copy.value.hero.headlineA)
|
|
|
|
// Light-mode highlight: a yellow marker swipe sitting low behind the phrase
|
|
// (signal-yellow text on bone fails contrast, so we brush instead).
|
|
const brush = {
|
|
backgroundImage: `linear-gradient(180deg, transparent 0%, transparent 56%, ${C.signal} 56%, ${C.signal} 96%, transparent 96%)`,
|
|
padding: '0 0.06em',
|
|
boxDecorationBreak: 'clone',
|
|
WebkitBoxDecorationBreak: 'clone',
|
|
} as const
|
|
</script>
|
|
|
|
<template>
|
|
<section :style="{ background: t.bg, color: t.fg, paddingTop: 'clamp(40px, 6vw, 80px)' }">
|
|
<LandingContainer pad="clamp(40px, 5vw, 60px) clamp(20px, 5vw, 64px) 0">
|
|
<div :style="{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '56px' }">
|
|
<span :style="{ width: '6px', height: '6px', borderRadius: '999px', background: t.signal, boxShadow: `0 0 0 4px ${t.signal}33` }" />
|
|
<span :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '12px', color: t.fgMuted, letterSpacing: '0.04em', whiteSpace: 'nowrap' }">{{ copy.hero.eyebrow }}</span>
|
|
</div>
|
|
|
|
<h1 :style="{
|
|
fontFamily: '\'Inter Tight\', \'Inter\', sans-serif',
|
|
fontWeight: 600, fontSize: 'clamp(38px, 7.2vw, 112px)', letterSpacing: '-0.04em',
|
|
lineHeight: 0.96, margin: 0, textWrap: 'balance', color: t.fg,
|
|
}">
|
|
<template v-for="(part, i) in headline" :key="i">
|
|
<template v-if="typeof part === 'string'">{{ part }} </template>
|
|
<span v-else :style="brush">{{ part.hl }} </span>
|
|
</template>
|
|
</h1>
|
|
|
|
<div :style="{ marginTop: '40px', maxWidth: '620px' }">
|
|
<p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '20px', lineHeight: 1.5, maxWidth: '620px', color: t.fgMuted, margin: 0, textWrap: 'pretty' }">{{ copy.hero.sub }}</p>
|
|
</div>
|
|
|
|
<div :style="{ display: 'flex', gap: '12px', marginTop: '40px', flexWrap: 'wrap' }">
|
|
<LandingBtn variant="primary" size="lg" data-umami-event="book-demo" @click="navigateTo(localePath('/demo'))">{{ copy.hero.cta }} →</LandingBtn>
|
|
<LandingBtn variant="secondary" size="lg">{{ copy.hero.sub_cta }}</LandingBtn>
|
|
</div>
|
|
|
|
<div :style="{
|
|
marginTop: '64px', paddingTop: '28px', borderTop: `1px solid ${t.border}`,
|
|
display: 'flex', gap: '56px', flexWrap: 'wrap',
|
|
}">
|
|
<div v-for="(s, i) in copy.hero.trust" :key="i" :style="{ display: 'flex', alignItems: 'center', gap: '10px' }">
|
|
<span :style="{ width: '4px', height: '4px', background: t.signal, borderRadius: '999px' }" />
|
|
<span :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '12px', color: t.fgMuted, letterSpacing: '0.04em' }">{{ s }}</span>
|
|
</div>
|
|
</div>
|
|
</LandingContainer>
|
|
|
|
<LandingContainer pad="clamp(40px, 6vw, 80px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 120px)">
|
|
<LandingProductMockup />
|
|
</LandingContainer>
|
|
</section>
|
|
</template>
|