dezky/apps/website/pages/roadmap.vue

<script setup lang="ts">
import { useTheme, useCopy } from '~/composables/useLanding'

definePageMeta({ layout: 'page' })

const t = useTheme()
const copy = useCopy()
const localePath = useLocalePath()
const c = computed(() => copy.value.pages.roadmap)

const eyebrow = computed(() => ({
  fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.value.fgDim,
  letterSpacing: '0.12em', textTransform: 'uppercase' as const,
}))
const h2 = 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,
}))

useHead({ title: () => `${copy.value.pages.roadmap.label} · dezky` })
</script>

<template>
  <LandingPageHeader :label="c.label" :title="c.title" :intro="c.intro" />

  <!-- Board -->
  <LandingContainer pad="clamp(56px, 8vw, 56px) clamp(20px, 5vw, 64px) clamp(40px, 6vw, 64px)">
    <div :style="{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 240px), 1fr))', gap: '0', border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden' }">
      <div
        v-for="(col, i) in c.columns" :key="i"
        class="roadmap-col"
        :class="{ 'roadmap-col--first': i === 0 }"
        :style="{ padding: '32px 28px', background: t.surface, minHeight: '260px', '--roadmap-border': t.border }"
      >
        <div :style="{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '24px' }">
          <span :style="{ width: '6px', height: '6px', borderRadius: '999px', background: i === 0 ? t.signal : t.fgDim }" />
          <span :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgMuted, letterSpacing: '0.08em', textTransform: 'uppercase' }">{{ col[0] }}</span>
        </div>
        <div :style="{ display: 'flex', flexDirection: 'column', gap: '14px' }">
          <div
            v-for="(item, j) in col[1]" :key="j"
            :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '15px', lineHeight: 1.5, color: t.fg }"
          >{{ item }}</div>
        </div>
      </div>
    </div>
    <p :style="{ marginTop: '20px', fontFamily: '\'Inter\', sans-serif', fontSize: '13px', lineHeight: 1.55, color: t.fgDim, maxWidth: '620px' }">{{ c.note }}</p>
  </LandingContainer>

  <!-- Themes -->
  <LandingContainer pad="0 clamp(20px, 5vw, 64px) clamp(40px, 6vw, 64px)">
    <div :style="{ borderTop: `1px solid ${t.borderStrong}`, paddingTop: 'clamp(40px, 5vw, 56px)' }">
      <div :style="eyebrow">{{ c.themesLabel }}</div>
      <h2 :style="h2">{{ c.themesHeading }}</h2>
      <p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '18px', lineHeight: 1.6, color: t.fgMuted, margin: '20px 0 48px', maxWidth: '640px', textWrap: 'pretty' }">{{ c.themesLede }}</p>

      <div class="roadmap-themes" :style="{ display: 'grid', gap: '1px', background: t.border, border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden' }">
        <div
          v-for="(th, i) in c.themes" :key="i"
          :style="{ padding: '28px', background: t.surface, display: 'flex', flexDirection: 'column', gap: '10px' }"
        >
          <div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '19px', color: t.fg, letterSpacing: '-0.015em' }">{{ th[0] }}</div>
          <p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '15px', lineHeight: 1.6, color: t.fgMuted, margin: 0, textWrap: 'pretty' }">{{ th[1] }}</p>
        </div>
      </div>
    </div>
  </LandingContainer>

  <!-- CTA -->
  <LandingContainer pad="0 clamp(20px, 5vw, 64px) clamp(80px, 12vw, 160px)">
    <div :style="{ borderTop: `1px solid ${t.borderStrong}`, paddingTop: 'clamp(40px, 5vw, 56px)' }">
      <h2 :style="h2">{{ c.ctaHeading }}</h2>
      <p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '18px', lineHeight: 1.6, color: t.fgMuted, margin: '20px 0 28px', maxWidth: '620px', textWrap: 'pretty' }">{{ c.ctaBody }}</p>
      <LandingBtn variant="primary" size="lg" @click="navigateTo(localePath('/contact'))">{{ c.ctaButton }} →</LandingBtn>
    </div>
  </LandingContainer>
</template>

<style scoped>
.roadmap-col {
  border-left: 1px solid var(--roadmap-border);
  border-top: none;
}
.roadmap-col--first {
  border-left: none;
}
.roadmap-themes {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
  .roadmap-col {
    border-left: none;
    border-top: 1px solid var(--roadmap-border);
  }
  .roadmap-col--first {
    border-top: none;
  }
  .roadmap-themes {
    grid-template-columns: 1fr;
  }
}
</style>