feat(website): localize whitelabel partner cards (da/en)

Partner demo cards in section 06 were hardcoded Danish strings, so they
stayed Danish in EN mode. Move name + subtitle into COPY.whitelabel.partners
for both languages and render them via a mapped computed; per-card accent and
the placeholder style remain presentational config in the component.

Also harden PartnerCard's avatar-initial against an empty name to satisfy
noUncheckedIndexedAccess.
This commit is contained in:
Ronni Baslund
2026-06-05 12:08:57 +02:00
parent c9911cc262
commit 4c3c47cc87
3 changed files with 38 additions and 4 deletions
@@ -12,7 +12,7 @@ const props = withDefaults(defineProps<{
placeholder?: boolean placeholder?: boolean
}>(), { placeholder: false }) }>(), { placeholder: false })
const initial = computed(() => props.name[0].toUpperCase()) const initial = computed(() => (props.name[0] ?? '').toUpperCase())
</script> </script>
<template> <template>
+27 -3
View File
@@ -10,6 +10,22 @@ const dark = useDark()
const sectionBg = computed(() => (dark.value ? '#1A1A17' : '#EFEDE3')) const sectionBg = computed(() => (dark.value ? '#1A1A17' : '#EFEDE3'))
const cardBg = computed(() => (dark.value ? '#0F0F0D' : '#FFFFFF')) const cardBg = computed(() => (dark.value ? '#0F0F0D' : '#FFFFFF'))
// Per-card presentation (accent / placeholder). Name + subtitle come from copy
// so the demo tenants translate with the rest of the page; the visual style is
// matched to each card by position.
const cardStyles = [
{ accent: '#D6502A', placeholder: false },
{ accent: '#3956C8', placeholder: false },
] as const
const partnerCards = computed(() =>
copy.value.whitelabel.partners.map((p, i) => ({
...p,
accent: cardStyles[i]?.accent ?? t.value.signal,
placeholder: cardStyles[i]?.placeholder ?? true,
})),
)
</script> </script>
<template> <template>
@@ -33,9 +49,17 @@ const cardBg = computed(() => (dark.value ? '#0F0F0D' : '#FFFFFF'))
</div> </div>
</div> </div>
<div :style="{ display: 'flex', flexDirection: 'column', gap: '16px' }"> <div :style="{ display: 'flex', flexDirection: 'column', gap: '16px' }">
<LandingPartnerCard :fg="t.fg" :bg="cardBg" :border="t.border" accent="#D6502A" name="moltke it" subtitle="aalborg · 24 brugere" /> <LandingPartnerCard
<LandingPartnerCard :fg="t.fg" :bg="cardBg" :border="t.border" accent="#3956C8" name="kraft & partners" subtitle="københavn · 112 brugere" /> v-for="(p, i) in partnerCards"
<LandingPartnerCard :fg="t.fg" :bg="cardBg" :border="t.border" :accent="t.signal" name="dit firma her" subtitle="—" placeholder /> :key="i"
:fg="t.fg"
:bg="cardBg"
:border="t.border"
:accent="p.accent"
:name="p.name"
:subtitle="p.subtitle"
:placeholder="p.placeholder"
/>
</div> </div>
</div> </div>
</LandingContainer> </LandingContainer>
+10
View File
@@ -81,6 +81,11 @@ export const COPY = {
'Co-marketing og kundeleads via partnernetværk', 'Co-marketing og kundeleads via partnernetværk',
], ],
cta: 'Se partnerprogrammet', cta: 'Se partnerprogrammet',
partners: [
{ name: 'moltke it', subtitle: 'aalborg · 24 brugere' },
{ name: 'kraft & partners', subtitle: 'københavn · 112 brugere' },
{ name: 'dit firma her', subtitle: '—' },
],
}, },
stack: { stack: {
label: '07 — under motorhjelmen', label: '07 — under motorhjelmen',
@@ -210,6 +215,11 @@ export const COPY = {
'Co-marketing and leads via partner network', 'Co-marketing and leads via partner network',
], ],
cta: 'See the partner program', cta: 'See the partner program',
partners: [
{ name: 'moltke it', subtitle: 'aalborg · 24 users' },
{ name: 'kraft & partners', subtitle: 'copenhagen · 112 users' },
{ name: 'your company here', subtitle: '—' },
],
}, },
stack: { stack: {
label: '07 — under the hood', label: '07 — under the hood',