Ronni Baslund
0a35d9deb6
Wire every footer link to a real route. Adds a shared `page` layout (Nav +
content + Footer), reusable PageHeader/ComingSoon components, six content pages
(about, contact, brand, roadmap, changelog, migration), and a dynamic [slug]
catch-all for the not-yet-built pages — unknown slugs 404, legal slugs get a
distinct "contact us" body.
Footer links repointed from dead "#" to real paths; section anchors ("/#suite")
smooth-scroll on the homepage and route home + scroll from a sub-page; logo
links home. Page copy (da + en) added under COPY.pages.
65 lines
3.2 KiB
Vue
65 lines
3.2 KiB
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, scrollToAnchor } from '~/composables/useLanding'
|
|
const t = useTheme()
|
|
const copy = useCopy()
|
|
const route = useRoute()
|
|
|
|
function onLink(e: MouseEvent, href: string) {
|
|
// In-page section link ("/#suite"): smooth-scroll in place when already on
|
|
// the homepage. Off-page, let NuxtLink route to "/#suite" — index.vue scrolls
|
|
// to the hash on mount.
|
|
if (href.includes('#') && route.path === '/') {
|
|
e.preventDefault()
|
|
scrollToAnchor(href.slice(href.indexOf('#')))
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<footer :style="{ background: C.bone, color: C.carbon, borderTop: `1px solid ${t.border}` }">
|
|
<LandingContainer pad="80px 64px 40px">
|
|
<div :style="{ display: 'grid', gridTemplateColumns: '1.4fr repeat(4, 1fr)', gap: '48px' }">
|
|
<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>
|
|
<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="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 :style="{
|
|
marginTop: '64px', paddingTop: '28px', borderTop: `1px solid ${t.border}`,
|
|
display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '24px',
|
|
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>
|