404 page

app/layouts/default.vue

@@ -2,16 +2,18 @@
  <div
  class="mx-auto flex min-h-screen w-full flex-col bg-bcGovColor-gray1"
  >
- <ConnectHeader />
- <ConnectSystemBanner />
  <ClientOnly>
+ <ConnectHeader />
+ <ConnectSystemBanner />
  <ConnectBreadcrumb />
  </ClientOnly>
- <div
+ <main
  class="mx-auto w-full grow"
  >
  <slot />
- </div>
- <ConnectFooter />
+ </main>
+ <ClientOnly>
+ <ConnectFooter />
+ </ClientOnly>
  </div>
 </template>

app/locales/en-CA.ts

@@ -117,7 +117,9 @@ export default {
  },
  page: {
  notFound: {
- h1: 'Page Not Found'
+ title: 'Page Not Found - BC Registries and Online Services',
+ h1: 'Oops! Page Not Found',
+ text: "Sorry, the page you're looking for doesn't exist or has been moved."
  },
  home: {
  title: 'BC Registries and Online Services',

app/locales/fr-CA.ts

@@ -117,7 +117,9 @@ export default {
  },
  page: {
  notFound: {
- h1: 'Page Non Trouvée'
+ title: 'Page non trouvée - Registres et services en Ligne de la CB',
+ h1: 'Oups! Page non trouvée',
+ text: "Désolé, la page que vous cherchez n'existe pas ou a été déplacée."
  },
  home: {
  title: 'BC Registries et Services en Ligne',
@@ -145,7 +147,7 @@ export default {
  },
  section: {
  features: {
- title: 'Un Registre Moderne des Biens Personnels pour la C.-B.',
+ title: 'Un Registre Moderne des Biens Personnels pour la C.B.',
  description: "Le Registre des Biens Personnels est Désormais l'une des Nouvelles Applications Modernisées des BC Registries et des Services en Ligne.",
  cards: {
  search: {

app/pages/[...404].vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const localePath = useLocalePath()
+const { t } = useI18n()
+
+useHead({
+ title: t('page.notFound.title')
+})
+</script>
+<template>
+ <div class="flex min-h-full flex-col items-center justify-center gap-4 px-4 pt-10">
+ <span class="text-9xl italic text-bcGovColor-midGray">404</span>
+ <h1>{{ $t('page.notFound.h1') }}</h1>
+ <p class="text-center">
+ {{ $t('page.notFound.text') }}
+ </p>
+
+ <UButton
+ :label="$t('btn.goHome')"
+ icon="i-mdi-home"
+ size="bcGov"
+ :to="localePath('/')"
+ />
+ </div>
+</template>

app/pages/dashboard.vue

@@ -25,69 +25,70 @@ onMounted(async () => {
 </script>
 <template>
  <UContainer class="py-6 sm:py-12">
- <h1 class="text-[32px] font-semibold text-bcGovColor-darkGray">
- {{ $t('page.dashboard.h1') }}
- </h1>
- <p class="pt-3 text-bcGovColor-midGray">
- {{ $t('page.dashboard.intro') }}
- </p>
- <h3 class="pb-4 pt-6 text-lg font-normal text-bcGovColor-darkGray sm:pt-12">
- <ConnectI18nBold translation-path="page.dashboard.products.heading" :count="productStore.userProducts.length" />
- </h3>
- <div v-if="!productStore.loading" class="flex flex-col gap-6 lg:flex-row">
- <ul
- :aria-label="$t('page.dashboard.products.heading', { count: productStore.userProducts.length })"
- class="flex flex-col gap-6"
- >
- <DashboardUserProduct
- v-for="product in productStore.userProducts"
- :key="product.link"
- :product
- />
- </ul>
- <div class="space-y-6">
- <UCard class="pointer-events-none shadow-none lg:w-72 xl:w-96 2xl:w-[420px]">
- <div class="space-y-4">
- <h5 class="font-semibold text-bcGovColor-darkGray">
- {{ $t('page.dashboard.help.addProds.title') }}
- </h5>
- <p class="text-sm text-bcGovColor-midGray">
- {{ $t('page.dashboard.help.addProds.p1') }}
- </p>
- </div>
- </UCard>
- <UCard
- class="cursor-pointer border-blue-500 shadow-none focus-within:border-2 lg:w-72 xl:w-96 2xl:w-[420px]"
- @click="() => navigateTo(helpHref, { external: true, open: { target: '_blank' }})"
+ <ClientOnly>
+ <h1 class="text-[32px] font-semibold text-bcGovColor-darkGray">
+ {{ $t('page.dashboard.h1') }}
+ </h1>
+ <p class="pt-3 text-bcGovColor-midGray">
+ {{ $t('page.dashboard.intro') }}
+ </p>
+ <h3 class="pb-4 pt-6 text-lg font-normal text-bcGovColor-darkGray sm:pt-12">
+ <ConnectI18nBold translation-path="page.dashboard.products.heading" :count="productStore.userProducts.length" />
+ </h3>
+ <div v-if="!productStore.loading" class="flex flex-col gap-6 lg:flex-row">
+ <ul
+ :aria-label="$t('page.dashboard.products.heading', { count: productStore.userProducts.length })"
+ class="flex flex-col gap-6"
  >
- <div class="flex flex-col gap-4">
- <h5 class="font-semibold text-bcGovColor-darkGray">
- {{ $t('page.dashboard.help.howToUse.title') }}
- </h5>
- <p class="text-sm text-bcGovColor-midGray">
- {{ $t('page.dashboard.help.howToUse.p1') }}
- </p>
- <span>
- <a
- class="text-sm font-semibold text-blue-500 focus:outline-none"
- :href="helpHref"
- target="_blank"
- >
- {{ $t('page.dashboard.help.howToUse.link') }}
- </a>
- <span class="inline-flex align-middle">
- <UIcon
- name="i-mdi-open-in-new"
- class="ml-1 size-4 text-blue-500"
- />
+ <DashboardUserProduct
+ v-for="product in productStore.userProducts"
+ :key="product.link"
+ :product
+ />
+ </ul>
+ <div class="space-y-6">
+ <UCard class="pointer-events-none shadow-none lg:w-72 xl:w-96 2xl:w-[420px]">
+ <div class="space-y-4">
+ <h5 class="font-semibold text-bcGovColor-darkGray">
+ {{ $t('page.dashboard.help.addProds.title') }}
+ </h5>
+ <p class="text-sm text-bcGovColor-midGray">
+ {{ $t('page.dashboard.help.addProds.p1') }}
+ </p>
+ </div>
+ </UCard>
+ <UCard
+ class="cursor-pointer border-blue-500 shadow-none focus-within:border-2 lg:w-72 xl:w-96 2xl:w-[420px]"
+ @click="() => navigateTo(helpHref, { external: true, open: { target: '_blank' }})"
+ >
+ <div class="flex flex-col gap-4">
+ <h5 class="font-semibold text-bcGovColor-darkGray">
+ {{ $t('page.dashboard.help.howToUse.title') }}
+ </h5>
+ <p class="text-sm text-bcGovColor-midGray">
+ {{ $t('page.dashboard.help.howToUse.p1') }}
+ </p>
+ <span>
+ <a
+ class="text-sm font-semibold text-blue-500 focus:outline-none"
+ :href="helpHref"
+ target="_blank"
+ >
+ {{ $t('page.dashboard.help.howToUse.link') }}
+ </a>
+ <span class="inline-flex align-middle">
+ <UIcon
+ name="i-mdi-open-in-new"
+ class="ml-1 size-4 text-blue-500"
+ />
+ </span>
  </span>
- </span>
- </div>
- </UCard>
+ </div>
+ </UCard>
+ </div>
  </div>
- </div>
- <ClientOnly v-else>
- <ConnectSpinner overlay />
+
+ <ConnectSpinner v-else overlay />
  </ClientOnly>
  </UContainer>
 </template>

nuxt.config.ts

@@ -66,9 +66,15 @@ export default defineNuxtConfig({
  'mdi:file-document-outline',
  'mdi:alert-circle-outline',
  'mdi:refresh',
+ 'mdi:arrow-left',
+ 'mdi:home',
+ 'mdi:chevron-right',
  'heroicons:arrow-path-20-solid',
  'heroicons:circle-stack-20-solid',
- 'heroicons:check-20-solid'
+ 'heroicons:check-20-solid',
+ 'heroicons:currency-dollar-solid',
+ 'heroicons:currency-dollar',
+ 'heroicons:chevron-right-20-solid'
  ]
  }
  },

package.json

@@ -20,6 +20,7 @@
  },
  "devDependencies": {
  "@axe-core/playwright": "^4.9.1",
+ "@iconify-json/heroicons-solid": "^1.2.0",
  "@iconify-json/mdi": "^1.1.68",
  "@nuxt/devtools": "^1.3.9",
  "@nuxt/image": "^1.7.0",