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

<script setup lang="ts">
// Footer — lockup + tagline + legal, four link columns, status row.
// Ported from landing-sections.jsx Footer (light mode). Links are real routes
// now; "/#suite"-style section links smooth-scroll on the homepage and route
// home + scroll from a sub-page.
import { useRoute } from 'vue-router'
import { C } from '~/utils/landingTokens'
import { useTheme, useCopy, useLocalizeHref, scrollToAnchor } from '~/composables/useLanding'
const t = useTheme()
const copy = useCopy()
const route = useRoute()
const loc = useLocalizeHref()
const localePath = useLocalePath()

function onLink(e: MouseEvent, href: string) {
  // In-page section link ("/#suite"): smooth-scroll in place when already on
  // the current locale's homepage. Off-page, let NuxtLink route to the
  // localized home + hash — index.vue scrolls to the hash on mount.
  if (href.includes('#') && route.path === localePath('/')) {
    e.preventDefault()
    scrollToAnchor(href.slice(href.indexOf('#')))
  }
}
</script>

<template>
  <footer :style="{ background: C.bone, color: C.carbon, borderTop: `1px solid ${t.border}` }">
    <LandingContainer pad="clamp(56px, 8vw, 80px) clamp(20px, 5vw, 64px) clamp(28px, 4vw, 40px)">
      <!-- Lockup + 4 link columns: desktop 1.4fr repeat(4,1fr), mobile stack -->
      <div class="footer-main-grid">
        <div>
          <BrandNodeLockup :scale="0.75" :fg="C.carbon" :accent="C.signal" />
          <div :style="{ marginTop: '20px', fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: 'rgba(10,10,10,0.6)', maxWidth: '280px', lineHeight: 1.5 }">{{ copy.footer.tagline }}</div>
          <div :style="{ marginTop: '28px', fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: 'rgba(10,10,10,0.45)', lineHeight: 1.7 }">
            <div>{{ copy.footer.legal.name }}</div>
            <div>{{ copy.footer.legal.cvr }}</div>
            <div>{{ copy.footer.legal.addr }}</div>
          </div>
        </div>
        <!-- Four link columns reflow: 2 per row on tablet, 1 on small mobile -->
        <div class="footer-link-columns">
          <div v-for="(col, i) in copy.footer.cols" :key="i">
            <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: 'rgba(10,10,10,0.45)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: '18px' }">{{ col[0] }}</div>
            <div :style="{ display: 'flex', flexDirection: 'column', gap: '12px' }">
              <NuxtLink
                v-for="(link, j) in col[1]" :key="j" :to="loc(link[1])"
                :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: 'rgba(10,10,10,0.78)' }"
                @click="onLink($event, link[1])"
              >{{ link[0] }}</NuxtLink>
            </div>
          </div>
        </div>
      </div>
      <div :style="{
        marginTop: '64px', paddingTop: '28px', borderTop: `1px solid ${t.border}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '24px',
        flexWrap: 'wrap',
        fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: 'rgba(10,10,10,0.45)',
      }">
        <div>{{ copy.footer.copyright }}</div>
        <div :style="{ display: 'flex', alignItems: 'center', gap: '24px' }">
          <span :style="{ display: 'flex', alignItems: 'center', gap: '8px' }">
            <span :style="{ width: '6px', height: '6px', background: C.ok, borderRadius: '999px', boxShadow: `0 0 0 3px ${C.ok}33` }" />
            {{ copy.footer.status }}
          </span>
          <span>v1.0.4</span>
        </div>
      </div>
    </LandingContainer>
  </footer>
</template>

<style scoped>
/* Desktop: lockup column (1.4fr) + one cell that spans the four link columns (4fr) */
.footer-main-grid {
  display: grid;
  grid-template-columns: 1.4fr 4fr;
  gap: 48px;
}

/* The four link columns always live in their own sub-grid so they can reflow
   independently: 4 across on desktop, 2 on tablet, 1 on small mobile. */
.footer-link-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

@media (max-width: 768px) {
  /* Stack lockup on top, link columns below */
  .footer-main-grid {
    grid-template-columns: 1fr;
  }

  /* Two columns on tablet/large mobile, collapses to 1 on narrow phones */
  .footer-link-columns {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: 32px;
  }
}

@media (max-width: 400px) {
  .footer-link-columns {
    grid-template-columns: 1fr;
  }
}
</style>