feat(website): partner application form on /partners

Replace the bare partner CTA with a "Become a partner" section: a pitch
column (with a secondary "book a partner call" link to /demo) plus an
application form — name, company, work email, website, partnership type
(reseller / white-label / not sure) and message. On submit it composes a
prefilled email to info@dezky.eu (interim, no backend), to be swapped for
a real intake/CRM later. Bilingual and responsive.
This commit is contained in:
Ronni Baslund
2026-06-06 19:28:35 +02:00
parent 1ace447f47
commit bd96ef0a33
2 changed files with 135 additions and 2 deletions
+107 -2
View File
@@ -13,6 +13,48 @@ function toggleFaq(i: number) {
openFaq.value = openFaq.value === i ? null : i openFaq.value = openFaq.value === i ? null : i
} }
// Partner application form — interim: composes a prefilled email to
// info@dezky.eu (no backend). Swap for a real intake/CRM later.
const pName = ref('')
const pCompany = ref('')
const pEmail = ref('')
const pWebsite = ref('')
const pType = ref('')
const pMessage = ref('')
function submitPartner() {
const f = c.value.form
const subject = `Partner application — ${(pCompany.value || pName.value).trim()}`
const body = [
`${f.nameLabel}: ${pName.value}`,
`${f.companyLabel}: ${pCompany.value}`,
`${f.emailLabel}: ${pEmail.value}`,
`${f.websiteLabel}: ${pWebsite.value}`,
`${f.typeLabel}: ${pType.value}`,
'',
pMessage.value,
].join('\n')
window.location.href = `mailto:info@dezky.eu?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`
}
const formEyebrow = computed(() => ({
fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.value.fgDim,
letterSpacing: '0.12em', textTransform: 'uppercase' as const,
}))
const formH2 = computed(() => ({
fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(28px, 3.6vw, 44px)',
letterSpacing: '-0.03em', lineHeight: 1.05, margin: '14px 0 0', color: t.value.fg, textWrap: 'balance' as const,
}))
const fieldLabel = computed(() => ({
display: 'block', marginBottom: '8px', fontFamily: '\'JetBrains Mono\', monospace',
fontSize: '11px', color: t.value.fgMuted, letterSpacing: '0.06em', textTransform: 'uppercase' as const,
}))
const inputStyle = computed(() => ({
width: '100%', padding: '12px 14px', border: `1px solid ${t.value.border}`, borderRadius: '4px',
background: t.value.bg, color: t.value.fg, fontFamily: '\'Inter\', sans-serif', fontSize: '15px',
boxSizing: 'border-box' as const,
}))
useHead({ title: () => `${copy.value.pages.partners.label} · dezky` }) useHead({ title: () => `${copy.value.pages.partners.label} · dezky` })
</script> </script>
@@ -143,9 +185,63 @@ useHead({ title: () => `${copy.value.pages.partners.label} · dezky` })
</div> </div>
</LandingContainer> </LandingContainer>
<!-- CTA --> <!-- Become a partner -->
<LandingContainer pad="clamp(48px, 7vw, 72px) clamp(20px, 5vw, 64px) clamp(80px, 12vw, 160px)"> <LandingContainer pad="clamp(48px, 7vw, 72px) clamp(20px, 5vw, 64px) clamp(80px, 12vw, 160px)">
<LandingBtn variant="primary" size="lg" @click="navigateTo('/demo')">{{ c.cta }} </LandingBtn> <div :style="{ borderTop: `1px solid ${t.borderStrong}`, paddingTop: 'clamp(40px, 5vw, 56px)' }">
<div class="partner-form-grid" :style="{ display: 'grid', gap: '48px', alignItems: 'start' }">
<!-- Pitch -->
<div>
<div :style="formEyebrow">{{ c.form.label }}</div>
<h2 :style="formH2">{{ c.form.heading }}</h2>
<p :style="{ marginTop: '20px', fontFamily: '\'Inter\', sans-serif', fontSize: '18px', lineHeight: 1.6, color: t.fgMuted, maxWidth: '420px', textWrap: 'pretty' }">{{ c.form.lede }}</p>
<button
:style="{ marginTop: '28px', background: 'transparent', border: 'none', padding: 0, cursor: 'pointer', fontFamily: '\'Inter\', sans-serif', fontSize: '15px', color: t.fgMuted, textDecoration: 'underline', textUnderlineOffset: '3px' }"
@click="navigateTo('/demo')"
>{{ c.cta }} </button>
</div>
<!-- Application form -->
<form
@submit.prevent="submitPartner"
:style="{ padding: 'clamp(24px, 4vw, 36px)', border: `1px solid ${t.border}`, borderRadius: '4px', background: t.surface, display: 'flex', flexDirection: 'column', gap: '18px' }"
>
<div>
<label :style="fieldLabel">{{ c.form.nameLabel }}</label>
<input v-model="pName" type="text" required :placeholder="c.form.namePh" :style="inputStyle">
</div>
<div>
<label :style="fieldLabel">{{ c.form.companyLabel }}</label>
<input v-model="pCompany" type="text" required :placeholder="c.form.companyPh" :style="inputStyle">
</div>
<div>
<label :style="fieldLabel">{{ c.form.emailLabel }}</label>
<input v-model="pEmail" type="email" required :placeholder="c.form.emailPh" :style="inputStyle">
</div>
<div>
<label :style="fieldLabel">{{ c.form.websiteLabel }}</label>
<input v-model="pWebsite" type="text" :placeholder="c.form.websitePh" :style="inputStyle">
</div>
<div>
<label :style="fieldLabel">{{ c.form.typeLabel }}</label>
<select v-model="pType" :style="{ ...inputStyle, appearance: 'none', cursor: 'pointer' }">
<option value="" disabled>{{ c.form.typePh }}</option>
<option v-for="ty in c.form.types" :key="ty" :value="ty">{{ ty }}</option>
</select>
</div>
<div>
<label :style="fieldLabel">{{ c.form.messageLabel }}</label>
<textarea v-model="pMessage" rows="3" :placeholder="c.form.messagePh" :style="{ ...inputStyle, resize: 'vertical' }" />
</div>
<button
type="submit"
:style="{ marginTop: '4px', background: t.signal, color: t.fg, border: 'none', padding: '16px 24px', fontFamily: '\'Inter\', sans-serif', fontSize: '15px', fontWeight: 600, borderRadius: '4px', cursor: 'pointer', letterSpacing: '-0.005em' }"
>{{ c.form.submit }} </button>
<p :style="{ margin: 0, fontFamily: '\'Inter\', sans-serif', fontSize: '13px', lineHeight: 1.5, color: t.fgDim }">{{ c.form.note }}</p>
</form>
</div>
</div>
</LandingContainer> </LandingContainer>
</template> </template>
@@ -165,6 +261,11 @@ useHead({ title: () => `${copy.value.pages.partners.label} · dezky` })
grid-template-columns: 1.3fr 1fr 1fr; grid-template-columns: 1.3fr 1fr 1fr;
} }
/* Become-a-partner: pitch + form side-by-side, stacked on mobile */
.partner-form-grid {
grid-template-columns: 0.85fr 1.15fr;
}
/* Per-cell column label only appears once the table stacks on mobile. */ /* Per-cell column label only appears once the table stacks on mobile. */
.pc-key { .pc-key {
display: none; display: none;
@@ -179,6 +280,10 @@ useHead({ title: () => `${copy.value.pages.partners.label} · dezky` })
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.partner-form-grid {
grid-template-columns: 1fr;
}
/* Header row redundant once each value is labelled inline. */ /* Header row redundant once each value is labelled inline. */
.partners-compare-header { .partners-compare-header {
display: none; display: none;
+28
View File
@@ -261,6 +261,20 @@ export const COPY = {
['03', 'Lancér', 'Sælg under dit eget brand med os som motoren bagved.'], ['03', 'Lancér', 'Sælg under dit eget brand med os som motoren bagved.'],
], ],
cta: 'Book en partnersamtale', cta: 'Book en partnersamtale',
form: {
label: 'bliv partner',
heading: 'Bliv partner.',
lede: 'Fortæl os lidt om jer, så vender vi tilbage med et oplæg til, hvordan et partnerskab kan se ud.',
nameLabel: 'Navn', namePh: 'Dit navn',
companyLabel: 'Virksomhed', companyPh: 'Virksomhedens navn',
emailLabel: 'Arbejds-e-mail', emailPh: 'dig@virksomhed.dk',
websiteLabel: 'Website (valgfrit)', websitePh: 'virksomhed.dk',
typeLabel: 'Type partnerskab', typePh: 'Vælg…',
types: ['Forhandler', 'Whitelabel', 'Ved ikke endnu'] as string[],
messageLabel: 'Besked (valgfrit)', messagePh: 'Fortæl os om jeres kunder og mål.',
submit: 'Send ansøgning',
note: 'Din henvendelse sendes til info@dezky.eu. Vi vender tilbage inden for én arbejdsdag.',
},
calc: { calc: {
label: 'Regn din margin ud', label: 'Regn din margin ud',
heading: 'Se hvad partnerskabet er værd.', heading: 'Se hvad partnerskabet er værd.',
@@ -749,6 +763,20 @@ export const COPY = {
['03', 'Launch', 'Sell under your own brand with us as the engine behind it.'], ['03', 'Launch', 'Sell under your own brand with us as the engine behind it.'],
], ],
cta: 'Book a partner call', cta: 'Book a partner call',
form: {
label: 'become a partner',
heading: 'Become a partner.',
lede: 'Tell us a bit about you and we\'ll come back with how a partnership could look.',
nameLabel: 'Name', namePh: 'Your name',
companyLabel: 'Company', companyPh: 'Company name',
emailLabel: 'Work email', emailPh: 'you@company.com',
websiteLabel: 'Website (optional)', websitePh: 'company.com',
typeLabel: 'Partnership type', typePh: 'Select…',
types: ['Reseller', 'White-label', 'Not sure yet'] as string[],
messageLabel: 'Message (optional)', messagePh: 'Tell us about your customers and goals.',
submit: 'Send application',
note: 'Your request is sent to info@dezky.eu. We\'ll get back within one business day.',
},
calc: { calc: {
label: 'Calculate your margin', label: 'Calculate your margin',
heading: 'See what the partnership is worth.', heading: 'See what the partnership is worth.',