26 lines
972 B
Vue
26 lines
972 B
Vue
<script setup>
|
|
import { RouterLink } from 'vue-router'
|
|
</script>
|
|
|
|
<template>
|
|
<section class="section nf">
|
|
<div class="container nf__inner">
|
|
<span class="mono dim">ERR · 404</span>
|
|
<h1>Lost in orbit.</h1>
|
|
<p class="muted">The page you're looking for has drifted. Let's get you back.</p>
|
|
<div class="nf__cta">
|
|
<RouterLink to="/" class="btn btn--primary">Home</RouterLink>
|
|
<RouterLink to="/products" class="btn btn--ghost">Products</RouterLink>
|
|
<RouterLink to="/contact" class="btn btn--ghost">Talk to us</RouterLink>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.nf { min-height: 60vh; display: flex; align-items: center; }
|
|
.nf__inner { text-align: center; max-width: 560px; margin: 0 auto; }
|
|
.nf h1 { margin-top: var(--space-3); font-size: clamp(2.5rem, 7vw, 4.5rem); }
|
|
.nf__cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-5); }
|
|
</style>
|