dezky/apps/website/components/landing/ProductMockup.vue

<script setup lang="ts">
// Stylized customer-portal dashboard shown under the hero. Illustrative only —
// labels are intentionally Danish in both languages. Ported from
// landing-sections.jsx ProductMockup (light mode).
import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
import { C } from '~/utils/landingTokens'
import { useTheme, useDark } from '~/composables/useLanding'

const t = useTheme()
const dark = useDark()

// The mockup is a fixed-layout dashboard. On desktop it runs fluid/full-width;
// when the available width drops below its comfortable design width we scale
// the WHOLE thing down (CSS zoom reflows, so no height hacks) instead of
// reflowing the internal dashboard — keeps it a recognisable mini-dashboard on
// phones. SSR-safe: renders at zoom 1 on the server, recomputes after mount.
const DESIGN_W = 760
const frame = ref<HTMLElement | null>(null)
const zoom = ref(1)
const frameWidth = ref('100%')
let ro: ResizeObserver | null = null

function recompute() {
  const parent = frame.value?.parentElement
  if (!parent) return
  const w = parent.clientWidth
  if (w >= DESIGN_W) {
    zoom.value = 1
    frameWidth.value = '100%'
  } else {
    frameWidth.value = `${DESIGN_W}px`
    zoom.value = Math.max(0.4, w / DESIGN_W)
  }
}

onMounted(() => {
  recompute()
  const parent = frame.value?.parentElement
  if (parent && typeof ResizeObserver !== 'undefined') {
    ro = new ResizeObserver(recompute)
    ro.observe(parent)
  }
})
onBeforeUnmount(() => ro?.disconnect())

const m = computed(() => ({
  bg: dark.value ? '#171715' : '#FFFFFF',
  border: dark.value ? 'rgba(255,255,255,0.08)' : 'rgba(10,10,10,0.08)',
  fg: dark.value ? C.bone : C.carbon,
  muted: dark.value ? 'rgba(244,243,238,0.55)' : 'rgba(10,10,10,0.55)',
  subtle: dark.value ? 'rgba(244,243,238,0.08)' : 'rgba(10,10,10,0.04)',
}))

const apps = [
  { name: 'mail', badge: '12', active: true },
  { name: 'drev' },
  { name: 'møder' },
  { name: 'chat', pill: '3' },
  { name: 'admin' },
]

const stats: [string, string, string][] = [
  ['Ulæste', '12', 'mail'],
  ['Møder i dag', '3', 'møder'],
  ['Delte filer', '47', 'drev'],
]

const recent: [string, string, string][] = [
  ['Lone Frederiksen', 'Tilbud — Q3 retainer', '09:42'],
  ['ops@stalwart.io', 'Sikkerhedsopdatering 1.12 udrullet', '08:30'],
  ['Mads Holm', 'Re: Onboarding for nye seniors', 'i går'],
]
</script>

<template>
  <div ref="frame" :style="{
    background: m.bg, border: `1px solid ${m.border}`, borderRadius: '8px',
    boxShadow: dark ? '0 40px 80px rgba(0,0,0,0.5)' : '0 30px 80px rgba(10,10,10,0.08)',
    overflow: 'hidden',
    width: frameWidth, zoom,
  }">
    <!-- Window chrome -->
    <div :style="{ display: 'flex', alignItems: 'center', gap: '8px', padding: '14px 18px', borderBottom: `1px solid ${m.border}` }">
      <span :style="{ width: '10px', height: '10px', borderRadius: '999px', background: '#E23030' }" />
      <span :style="{ width: '10px', height: '10px', borderRadius: '999px', background: '#E89A1F' }" />
      <span :style="{ width: '10px', height: '10px', borderRadius: '999px', background: '#1F8A5B' }" />
      <div :style="{ marginLeft: '16px', padding: '4px 12px', background: m.subtle, borderRadius: '4px', fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: m.muted }">app.dezky.eu / dashboard</div>
    </div>

    <div class="mockup-body" :style="{ display: 'grid', minHeight: '460px' }">
      <!-- Sidebar -->
      <div :style="{ borderRight: `1px solid ${m.border}`, padding: '20px 0' }">
        <div :style="{ display: 'flex', alignItems: 'center', gap: '8px', padding: '0 20px', marginBottom: '24px' }">
          <BrandNodeMark :size="20" :fg="m.fg" :accent="t.signal" />
          <span :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '12px', fontWeight: 600, color: m.fg }">dezky</span>
        </div>
        <div
          v-for="(a, i) in apps" :key="a.name"
          :style="{
            padding: '9px 20px',
            background: a.active ? m.subtle : 'transparent',
            borderLeft: `2px solid ${a.active ? t.signal : 'transparent'}`,
            fontFamily: '\'Inter\', sans-serif', fontSize: '13px', fontWeight: a.active ? 600 : 500,
            color: a.active ? m.fg : m.muted,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }"
        >
          <span>{{ a.name }}</span>
          <span v-if="a.badge" :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '10px', color: m.muted }">{{ a.badge }}</span>
          <span v-else-if="a.pill" :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '10px', background: t.signal, padding: '1px 6px', borderRadius: '2px', color: C.carbon }">{{ a.pill }}</span>
        </div>
        <div :style="{ margin: '32px 20px 0', padding: '14px', borderRadius: '4px', background: m.subtle, fontFamily: '\'Inter\', sans-serif' }">
          <div :style="{ fontSize: '10px', fontFamily: '\'JetBrains Mono\', monospace', color: m.muted, letterSpacing: '0.1em', textTransform: 'uppercase' }">lagring</div>
          <div :style="{ fontSize: '16px', fontWeight: 600, color: m.fg, marginTop: '6px' }">184 GB / 500</div>
          <div :style="{ height: '4px', background: m.border, borderRadius: '999px', marginTop: '8px', overflow: 'hidden' }">
            <div :style="{ height: '100%', width: '37%', background: t.signal }" />
          </div>
        </div>
      </div>

      <!-- Main -->
      <div :style="{ padding: 'clamp(16px, 4vw, 28px) clamp(16px, 4vw, 32px)' }">
        <div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: '8px' }">
          <div>
            <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: m.muted, letterSpacing: '0.1em', textTransform: 'uppercase' }">indbakke</div>
            <div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '28px', color: m.fg, marginTop: '6px', letterSpacing: '-0.02em' }">god morgen, anne</div>
          </div>
          <div :style="{ display: 'flex', gap: '8px' }">
            <div :style="{ width: '32px', height: '32px', borderRadius: '999px', background: m.subtle, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: m.fg, fontWeight: 600 }">AB</div>
          </div>
        </div>

        <div :style="{ marginTop: '24px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 120px), 1fr))', gap: '12px' }">
          <div v-for="(s, i) in stats" :key="i" :style="{ padding: '16px 18px', background: m.subtle, borderRadius: '4px' }">
            <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '10px', color: m.muted, letterSpacing: '0.1em', textTransform: 'uppercase' }">{{ s[2] }}</div>
            <div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontSize: '28px', fontWeight: 600, color: m.fg, marginTop: '4px' }">{{ s[1] }}</div>
            <div :style="{ fontSize: '12px', color: m.muted, marginTop: '2px' }">{{ s[0] }}</div>
          </div>
        </div>

        <div :style="{ marginTop: '24px' }">
          <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '10px', color: m.muted, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: '12px' }">seneste · indbakke</div>
          <div
            v-for="(r, i) in recent" :key="i"
            class="mockup-mail-row"
            :style="{
              padding: '12px 0', borderTop: i === 0 ? `1px solid ${m.border}` : 'none',
              borderBottom: `1px solid ${m.border}`,
              fontFamily: '\'Inter\', sans-serif', fontSize: '13px', alignItems: 'center',
            }"
          >
            <span :style="{ fontWeight: 600, color: m.fg }">{{ r[0] }}</span>
            <span :style="{ color: m.muted }">{{ r[1] }}</span>
            <span :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: m.muted, textAlign: 'right' }">{{ r[2] }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* Fixed dashboard layout — the whole mockup is scaled to fit on small screens
   (see the zoom logic in <script>), so the internal grid stays desktop-shaped. */
.mockup-body {
  grid-template-columns: 220px 1fr;
}
.mockup-mail-row {
  display: grid;
  grid-template-columns: 200px 1fr 60px;
}
</style>