Ronni Baslund
2e400d86c5
Add the /partners page rendering the partner pitch: benefits, an interactive margin calculator (seats × margin → monthly/annual, off the 49 kr list price), a reseller-facing "CSP vs Dezky" comparison, partner tiers, a 3-step "get started", and a partner FAQ. Wire the section-06 "see the partner program" button to it, and align the whitelabel margin bullet to 15–40%.
55 lines
3.4 KiB
Vue
55 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
// Interactive reseller margin calculator. Uses the public 49 kr/user/mo list
|
|
// price and the partner margin band; outputs monthly + annual margin. Numbers
|
|
// are illustrative — final wholesale terms are set in the partner agreement.
|
|
import { ref, computed } from 'vue'
|
|
import { useTheme, useCopy } from '~/composables/useLanding'
|
|
|
|
const t = useTheme()
|
|
const copy = useCopy()
|
|
const c = computed(() => copy.value.pages.partners.calc)
|
|
|
|
const LIST_PRICE = 49 // DKK per user per month
|
|
|
|
const seats = ref(100)
|
|
const marginPct = ref(30)
|
|
|
|
const monthly = computed(() => Math.round(seats.value * LIST_PRICE * (marginPct.value / 100)))
|
|
const annual = computed(() => monthly.value * 12)
|
|
|
|
const dkk = new Intl.NumberFormat('da-DK', { style: 'currency', currency: 'DKK', maximumFractionDigits: 0 })
|
|
const fmtMonthly = computed(() => dkk.format(monthly.value))
|
|
const fmtAnnual = computed(() => dkk.format(annual.value))
|
|
</script>
|
|
|
|
<template>
|
|
<div :style="{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0', border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden' }">
|
|
<!-- Controls -->
|
|
<div :style="{ padding: '36px', background: t.surface, display: 'flex', flexDirection: 'column', gap: '36px', justifyContent: 'center' }">
|
|
<div>
|
|
<div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '12px' }">
|
|
<span :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgMuted, letterSpacing: '0.06em', textTransform: 'uppercase' }">{{ c.seatsLabel }}</span>
|
|
<span :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '20px', color: t.fg }">{{ seats }}</span>
|
|
</div>
|
|
<input v-model.number="seats" type="range" min="10" max="1000" step="10" :style="{ width: '100%', accentColor: t.signal, cursor: 'pointer' }" >
|
|
</div>
|
|
<div>
|
|
<div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '12px' }">
|
|
<span :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgMuted, letterSpacing: '0.06em', textTransform: 'uppercase' }">{{ c.marginLabel }}</span>
|
|
<span :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '20px', color: t.fg }">{{ marginPct }} %</span>
|
|
</div>
|
|
<input v-model.number="marginPct" type="range" min="15" max="40" step="1" :style="{ width: '100%', accentColor: t.signal, cursor: 'pointer' }" >
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Output -->
|
|
<div :style="{ padding: '36px', background: t.bgAlt, borderLeft: `1px solid ${t.border}`, display: 'flex', flexDirection: 'column', justifyContent: 'center' }">
|
|
<div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgMuted, letterSpacing: '0.08em', textTransform: 'uppercase' }">{{ c.monthlyLabel }}</div>
|
|
<div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(40px, 5vw, 60px)', letterSpacing: '-0.03em', lineHeight: 1.0, color: t.fg, marginTop: '8px' }">{{ fmtMonthly }}</div>
|
|
<div :style="{ marginTop: '20px', paddingTop: '20px', borderTop: `1px solid ${t.border}`, fontFamily: '\'Inter\', sans-serif', fontSize: '15px', color: t.fgMuted }">
|
|
{{ c.annualLabel }} <span :style="{ color: t.fg, fontWeight: 600 }">{{ fmtAnnual }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|