feat(website): partner program page + reseller conversion sections

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%.
2026-06-05 14:46:22 +02:00
parent 0a35d9deb6
commit 2e400d86c5
4 changed files with 204 additions and 3 deletions
@@ -0,0 +1,54 @@
+<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>
@@ -45,7 +45,7 @@ const partnerCards = computed(() =>
            </div>
          </div>
          <div :style="{ marginTop: '40px' }">
-            <LandingBtn variant="secondary" size="lg">{{ copy.whitelabel.cta }} →</LandingBtn>
+            <LandingBtn variant="secondary" size="lg" @click="navigateTo('/partners')">{{ copy.whitelabel.cta }} →</LandingBtn>
          </div>
        </div>
        <div :style="{ display: 'flex', flexDirection: 'column', gap: '16px' }">
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { useTheme, useCopy, goToSection } from '~/composables/useLanding'
+
+definePageMeta({ layout: 'page' })
+
+const t = useTheme()
+const copy = useCopy()
+const route = useRoute()
+const c = computed(() => copy.value.pages.partners)
+
+const openFaq = ref<number | null>(0)
+function toggleFaq(i: number) {
+  openFaq.value = openFaq.value === i ? null : i
+}
+
+useHead({ title: () => `${copy.value.pages.partners.label} · dezky` })
+</script>
+
+<template>
+  <LandingPageHeader :label="c.label" :title="c.title" :intro="c.intro" />
+
+  <!-- What you get -->
+  <LandingContainer pad="56px 64px 0">
+    <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgDim, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: '20px' }">{{ c.benefitsLabel }}</div>
+    <div :style="{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '0', border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden' }">
+      <div
+        v-for="(b, i) in c.benefits" :key="i"
+        :style="{
+          padding: '28px', background: t.surface,
+          borderTop: i > 1 ? `1px solid ${t.border}` : 'none',
+          borderLeft: i % 2 === 1 ? `1px solid ${t.border}` : 'none',
+        }"
+      >
+        <div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '20px', color: t.fg, letterSpacing: '-0.015em' }">{{ b[0] }}</div>
+        <p :style="{ marginTop: '10px', fontFamily: '\'Inter\', sans-serif', fontSize: '15px', lineHeight: 1.6, color: t.fgMuted, margin: '10px 0 0', textWrap: 'pretty' }">{{ b[1] }}</p>
+      </div>
+    </div>
+  </LandingContainer>
+
+  <!-- Margin calculator -->
+  <LandingContainer pad="72px 64px 0">
+    <div :style="{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: '40px', alignItems: 'end', marginBottom: '32px' }">
+      <h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(30px, 3.6vw, 48px)', letterSpacing: '-0.03em', lineHeight: 1.0, margin: 0, color: t.fg }">{{ c.calc.heading }}</h2>
+      <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgDim, letterSpacing: '0.08em', textTransform: 'uppercase' }">{{ c.calc.label }}</div>
+    </div>
+    <LandingPartnerCalculator />
+    <p :style="{ marginTop: '16px', fontFamily: '\'Inter\', sans-serif', fontSize: '13px', color: t.fgDim }">{{ c.calc.note }}</p>
+  </LandingContainer>
+
+  <!-- CSP vs Dezky comparison -->
+  <LandingContainer pad="72px 64px 0">
+    <div :style="{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: '40px', alignItems: 'end', marginBottom: '32px' }">
+      <h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(30px, 3.6vw, 48px)', letterSpacing: '-0.03em', lineHeight: 1.0, margin: 0, color: t.fg }">{{ c.compare.heading }}</h2>
+      <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgDim, letterSpacing: '0.08em', textTransform: 'uppercase' }">{{ c.compare.label }}</div>
+    </div>
+    <div :style="{ border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden' }">
+      <div :style="{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr', background: t.surface, borderBottom: `1px solid ${t.borderStrong}` }">
+        <div :style="{ padding: '18px 24px' }" />
+        <div :style="{ padding: '18px 24px', fontFamily: '\'JetBrains Mono\', monospace', fontSize: '13px', color: t.fgMuted }">{{ c.compare.cols[0] }}</div>
+        <div :style="{ padding: '18px 24px', fontFamily: '\'JetBrains Mono\', monospace', fontSize: '13px', fontWeight: 600, color: t.fg, background: `${t.signal}22` }">{{ c.compare.cols[1] }}</div>
+      </div>
+      <div
+        v-for="(row, i) in c.compare.rows" :key="i"
+        :style="{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr', borderTop: i === 0 ? 'none' : `1px solid ${t.border}`, fontFamily: '\'Inter\', sans-serif', fontSize: '15px' }"
+      >
+        <div :style="{ padding: '18px 24px', color: t.fgMuted, fontFamily: '\'JetBrains Mono\', monospace', fontSize: '12px', letterSpacing: '0.04em', textTransform: 'uppercase', alignSelf: 'center' }">{{ row[0] }}</div>
+        <div :style="{ padding: '18px 24px', color: t.fgMuted }">{{ row[1] }}</div>
+        <div :style="{ padding: '18px 24px', color: t.fg, fontWeight: 600, background: `${t.signal}11` }">{{ row[2] }}</div>
+      </div>
+    </div>
+  </LandingContainer>
+
+  <!-- Partner tiers -->
+  <LandingContainer pad="72px 64px 0">
+    <div :style="{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: '40px', alignItems: 'end', marginBottom: '32px' }">
+      <h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(30px, 3.6vw, 48px)', letterSpacing: '-0.03em', lineHeight: 1.0, margin: 0, color: t.fg }">{{ c.tiers.heading }}</h2>
+      <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgDim, letterSpacing: '0.08em', textTransform: 'uppercase' }">{{ c.tiers.label }}</div>
+    </div>
+    <div :style="{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '0', border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden' }">
+      <div
+        v-for="(tier, i) in c.tiers.items" :key="i"
+        :style="{ padding: '32px 28px', background: t.surface, borderLeft: i === 0 ? 'none' : `1px solid ${t.border}`, display: 'flex', flexDirection: 'column', gap: '20px' }"
+      >
+        <div>
+          <div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '20px', color: t.fg, letterSpacing: '-0.015em' }">{{ tier[0] }}</div>
+          <div :style="{ marginTop: '4px', fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgDim, letterSpacing: '0.04em' }">{{ tier[1] }}</div>
+        </div>
+        <div :style="{ display: 'flex', alignItems: 'baseline', gap: '8px' }">
+          <span :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '40px', letterSpacing: '-0.03em', color: t.fg }">{{ tier[2] }}</span>
+          <span :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgMuted }">margin</span>
+        </div>
+        <div :style="{ display: 'flex', flexDirection: 'column', gap: '10px' }">
+          <div
+            v-for="(perk, j) in tier[3]" :key="j"
+            :style="{ display: 'flex', gap: '10px', fontFamily: '\'Inter\', sans-serif', fontSize: '14px', lineHeight: 1.45, color: t.fg }"
+          >
+            <span :style="{ color: t.signal, flexShrink: 0, fontWeight: 700 }">✓</span>
+            <span>{{ perk }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <p :style="{ marginTop: '16px', fontFamily: '\'Inter\', sans-serif', fontSize: '13px', color: t.fgDim }">{{ c.tiers.note }}</p>
+  </LandingContainer>
+
+  <!-- How to get started -->
+  <LandingContainer pad="72px 64px 0">
+    <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgDim, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: '32px' }">{{ c.stepsLabel }}</div>
+    <div :style="{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '40px' }">
+      <div v-for="(step, i) in c.steps" :key="i" :style="{ paddingTop: '20px', borderTop: `1px solid ${t.borderStrong}` }">
+        <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '12px', color: t.fgDim, letterSpacing: '0.06em' }">step {{ step[0] }}</div>
+        <div :style="{ marginTop: '20px', fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '24px', color: t.fg, letterSpacing: '-0.02em' }">{{ step[1] }}</div>
+        <p :style="{ marginTop: '12px', fontFamily: '\'Inter\', sans-serif', fontSize: '15px', lineHeight: 1.6, color: t.fgMuted, textWrap: 'pretty' }">{{ step[2] }}</p>
+      </div>
+    </div>
+  </LandingContainer>
+
+  <!-- Partner FAQ -->
+  <LandingContainer pad="72px 64px 0">
+    <div :style="{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: '40px', alignItems: 'end', marginBottom: '32px' }">
+      <h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(30px, 3.6vw, 48px)', letterSpacing: '-0.03em', lineHeight: 1.0, margin: 0, color: t.fg }">{{ c.faq.heading }}</h2>
+      <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgDim, letterSpacing: '0.08em', textTransform: 'uppercase' }">{{ c.faq.label }}</div>
+    </div>
+    <div>
+      <div
+        v-for="(item, i) in c.faq.items" :key="i"
+        :style="{ borderTop: `1px solid ${t.border}`, borderBottom: i === c.faq.items.length - 1 ? `1px solid ${t.border}` : 'none' }"
+      >
+        <button
+          :style="{ width: '100%', background: 'transparent', border: 'none', padding: '24px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '24px', cursor: 'pointer', textAlign: 'left' }"
+          @click="toggleFaq(i)"
+        >
+          <span :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '18px', color: t.fg, letterSpacing: '-0.015em' }">{{ item[0] }}</span>
+          <span :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '20px', color: t.fgMuted, flexShrink: 0 }">{{ openFaq === i ? '−' : '+' }}</span>
+        </button>
+        <p v-if="openFaq === i" :style="{ margin: '0', padding: '0 0 24px', maxWidth: '720px', fontFamily: '\'Inter\', sans-serif', fontSize: '15px', lineHeight: 1.6, color: t.fgMuted, textWrap: 'pretty' }">{{ item[1] }}</p>
+      </div>
+    </div>
+  </LandingContainer>
+
+  <!-- CTA -->
+  <LandingContainer pad="72px 64px 160px">
+    <LandingBtn variant="primary" size="lg" @click="goToSection('#final-cta', route.path)">{{ c.cta }} →</LandingBtn>
+  </LandingContainer>
+</template>
@@ -77,7 +77,7 @@ export const COPY = {
      bullets: [
        'Fuldt whitelabel-tema · CSS og logo',
        'Multi-tenant administration',
-        'Marginer på 30–45 % afhængigt af volumen',
+        'Marginer på 15–40 % afhængigt af volumen',
        'Co-marketing og kundeleads via partnernetværk',
      ],
      cta: 'Se partnerprogrammet',
@@ -363,7 +363,7 @@ export const COPY = {
      bullets: [
        'Full whitelabel theme · CSS and logo',
        'Multi-tenant administration',
-        'Margins of 30–45% by volume',
+        'Margins of 15–40% by volume',
        'Co-marketing and leads via partner network',
      ],
      cta: 'See the partner program',