Ronni Baslund
c9911cc262
New standalone apps/website (Nuxt 4) serving the public marketing site at dezky.local / www.dezky.local. The customer portal moves off the root domain to app.dezky.local only. Landing page ported from the Dezky design handoff: light theme, Danish default, hero variant A, with a working da/en toggle. Self-contained colour system threaded through components (utils/landingTokens.ts), full bilingual copy (utils/landingCopy.ts), and shared state (composables/useLanding.ts). Sections live under components/landing/* with the Node logo under components/brand/*. Wired into docker-compose (website service, volume, Traefik labels, network aliases) and bootstrap.sh (hosts list + service URLs).
49 lines
1.5 KiB
Vue
49 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
// Landing button. Variants: primary (signal fill), secondary (outline), ghost.
|
|
// Ported from landing-sections.jsx Button. Named Btn.vue to avoid colliding
|
|
// with any shared <Button> in @dezky/ui.
|
|
import { computed } from 'vue'
|
|
import { C } from '~/utils/landingTokens'
|
|
import { useTheme } from '~/composables/useLanding'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
variant?: 'primary' | 'secondary' | 'ghost'
|
|
size?: 'md' | 'lg'
|
|
full?: boolean
|
|
}>(), {
|
|
variant: 'primary',
|
|
size: 'md',
|
|
full: false,
|
|
})
|
|
|
|
const t = useTheme()
|
|
|
|
const style = computed(() => {
|
|
const base = {
|
|
primary: { background: C.signal, color: C.carbon, border: `1px solid ${C.signal}` },
|
|
secondary: { background: 'transparent', color: t.value.fg, border: `1px solid ${t.value.borderStrong}` },
|
|
ghost: { background: 'transparent', color: t.value.fg, border: '1px solid transparent' },
|
|
}[props.variant]
|
|
return {
|
|
...base,
|
|
padding: props.size === 'lg' ? '18px 28px' : '14px 22px',
|
|
fontSize: props.size === 'lg' ? '15px' : '14px',
|
|
fontWeight: 600,
|
|
fontFamily: '\'Inter\', sans-serif',
|
|
borderRadius: '4px',
|
|
letterSpacing: '-0.005em',
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: '10px',
|
|
width: props.full ? '100%' : 'auto',
|
|
whiteSpace: 'nowrap',
|
|
transition: 'transform 0.1s ease, box-shadow 0.15s ease',
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<button :style="style"><slot /></button>
|
|
</template>
|