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:
@@ -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;
|
||||||
|
|||||||
@@ -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.',
|
||||||
|
|||||||
Reference in New Issue
Block a user