cards & Footer

web/site/app/app.vue

@@ -86,6 +86,6 @@ provide('footerHeight', footerHeight)
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
-    <SbcFooter ref="footerRef" class="z-50" />
+    <SbcFooter ref="footerRef" class="z-50 mt-auto" />
   </div>
 </template>

web/site/app/components/Sbc/Footer.vue

@@ -9,11 +9,21 @@ const links = [
     to: 'https://www2.gov.bc.ca/gov/content/home/disclaimer',
     target: '_blank'
   },
+  {
+    label: 'SbcFooter.releaseNotes',
+    to: 'https://www.release-notes.bcregistry.gov.bc.ca',
+    target: '_blank'
+  },
   {
     label: 'SbcFooter.privacy',
     to: 'https://www2.gov.bc.ca/gov/content/home/privacy',
     target: '_blank'
   },
+  {
+    label: 'Hours of Availability',
+    to: 'https://www2.gov.bc.ca/gov/content?id=C41D8179671441B2BAA3BDDD3D89C9A9',
+    target: '_blank'
+  },
   {
     label: 'SbcFooter.ally',
     to: 'https://www2.gov.bc.ca/gov/content/home/accessibility',
@@ -30,21 +40,32 @@ const links = [
 <template>
   <footer
     id="sbc-main-footer"
-    class="border-t-2 border-bcGovColor-navDivider bg-bcGovColor-footer p-2 dark:border-t dark:bg-bcGovColor-darkGray"
+    class="inset-x-0 bottom-0 border-t-4 border-bcGovColor-navDivider bg-bcGovColor-footer p-2 dark:border-t dark:bg-bcGovColor-darkGray"
   >
-    <div class="mx-auto flex max-w-[1360px] items-center justify-between">
-      <nav :aria-label="$t('SbcFooter.navLabel')" class="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-4">
+    <div class="mx-auto max-w-[1360px] items-center">
+      <nav
+        :aria-label="$t('SbcFooter.navLabel')"
+        class="flex flex-wrap gap-1 sm:flex-row sm:items-center sm:gap-4"
+      >
         <NuxtLink
           v-for="link in links"
           :key="link.to"
           :to="link.to === '/' ? `/${$i18n.locale}` : link.to"
           :target="link.target"
-          class="rounded p-1 text-sm text-white hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
+          class="rounded-none border-r-[0.25px] border-bcGovBlue-100 p-1 pr-2 text-sm text-white hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
         >
           {{ $t(link.label) }}
         </NuxtLink>
+        <span
+          class="ml-auto flex justify-center whitespace-nowrap italic text-bcGovColor-navDivider lg:pl-12"
+        >
+          {{ $t("SbcFooter.bcApp") }}
+          <span class="flex h-6 justify-center"><UButton
+            icon="i-heroicons-information-circle"
+            variant="link"
+          /></span>
+        </span>
       </nav>
-      <span class="whitespace-nowrap italic text-bcGovColor-navDivider">{{ $t('SbcFooter.bcApp') }}</span>
     </div>
   </footer>
 </template>

web/site/app/locales/en-CA.ts

@@ -4,7 +4,7 @@ export default {
     goHome: 'Go Home',
     goBack: 'Go Back',
     downloadSpec: 'Download the specification',
-    allProducts: 'View all products',
+    allProducts: 'View Products',
     products: 'Products',
     dashboard: 'Dashboard',
     sbcConnect: 'Service BC Connect',
@@ -26,8 +26,8 @@ export default {
     },
     home: {
       title: 'Home',
-      h1: 'BC Registries API Gateway',
-      intro: 'Welcome to the BC Registries API Gateway! Access API information for all BC Registries services here.'
+      h1: 'Service BC Connect Developer Site',
+      intro: 'Welcome to the Service BC Connect Developer Site! Access API information for all BC Registries services here.'
     },
     products: {
       title: 'All Products',
@@ -56,8 +56,10 @@ export default {
   SbcFooter: {
     navLabel: 'Useful Links', // <nav> aria-label
     home: 'Home',
+    releaseNotes: 'Release Notes',
     disclaimer: 'Disclaimer',
     privacy: 'Privacy',
+    hours: 'Hours of Availability',
     ally: 'Accessibility',
     copyright: 'Copyright',
     bcApp: 'A BC Online Application'
@@ -74,6 +76,9 @@ export default {
     // aria-label
     label: 'Select a Language, current language: English'
   },
+  SbcMainCard: {
+    learnMore: 'Learn More'
+  },
   SbcProductCard: {
     goTo: 'Go to'
   },

web/site/app/pages/index.vue

@@ -1,27 +1,97 @@
 <script setup lang="ts">
-const localePath = useLocalePath()
 const { t } = useI18n()
 useHead({
   title: t('page.home.title')
 })
+const localePath = useLocalePath()
+
 </script>
 <template>
-  <div class="mx-auto flex flex-col items-center space-y-2 text-center">
+  <div class="mx-auto flex flex-col items-center space-y-7 px-6 py-12 text-center sm:px-8 md:px-12 lg:px-16">
     <h1 class="text-3xl font-semibold text-bcGovColor-darkGray dark:text-white">
       {{ $t('page.home.h1') }}
     </h1>
     <p class="text-lg text-bcGovColor-midGray dark:text-white">
       {{ $t('page.home.intro') }}
     </p>
     <div class="flex items-center justify-center gap-4">
-      <UButton
+      <!-- <UButton
         :label="$t('btn.getStarted')"
         :to="localePath('/products/get-started/account-setup')"
       />
       <UButton
         :label="$t('btn.allProducts')"
         :to="localePath('/products')"
-      />
+      /> -->
+      <UContainer class="flex h-full flex-col items-center justify-center gap-10 overflow-y-auto lg:flex-row">
+        <UCard
+          class="flex max-h-[300px] min-h-[350px] w-[325px] flex-col items-center justify-center  rounded-none shadow"
+          :ui="{
+            background: 'bg-gray-50 dark:bg-gray-800/50',
+            header: { base: 'font-bold text-lg text-center border-none' },
+          }"
+        >
+          <div class="mb-4 text-center">
+            <h2 class=" text-xl font-semibold uppercase text-gray-800 dark:text-white">
+              {{ $t('btn.getStarted') }}
+            </h2>
+          </div>
+          <div class="flex h-16 items-center justify-center">
+            <div class="mt-4 flex size-16 items-center justify-center rounded-full bg-bcGovColor-nonClickable">
+              <div class="flex items-center justify-center">
+                <UIcon name="i-mdi-cursor-default-click" class="ms-auto size-8 shrink-0 text-white " />
+              </div>
+            </div>
+          </div>
+          <div class="mx-auto mt-4 max-w-5xl text-center">
+            <p class="text-bcGovColor-midGray dark:text-gray-400">
+              Start to set up Service BC Connect APIs in your applications.
+            </p>
+          </div>
+          <div class="flex grow items-center justify-center px-4 pb-3.5 text-center sm:p-7">
+            <NuxtLink
+              :to="localePath('/products/get-started/account-setup')"
+              class="flex cursor-pointer flex-wrap items-center font-semibold tracking-wide text-[#1a5a96] underline dark:text-white"
+            >
+              {{ $t('SbcMainCard.learnMore') }}
+            </NuxtLink>
+          </div>
+        </UCard>
+
+        <UCard
+          class="flex max-h-[300px] min-h-[350px] w-[325px] flex-col items-center justify-center  rounded-none shadow"
+          :ui="{
+            background: 'bg-gray-50 dark:bg-gray-800/50',
+            header: { base: 'font-bold text-lg text-center border-none' },
+          }"
+        >
+          <div class="mb-4 text-center">
+            <h2 class="text-xl font-semibold uppercase text-gray-800 dark:text-white">
+              {{ $t('btn.allProducts') }}
+            </h2>
+          </div>
+          <div class="flex h-16 items-center justify-center">
+            <div class="mt-4 flex size-16 items-center justify-center rounded-full bg-bcGovColor-nonClickable">
+              <div class="flex items-center justify-center">
+                <UIcon name="i-mdi-text-box-search" class="ms-auto size-8 shrink-0 text-white " />
+              </div>
+            </div>
+          </div>
+          <div class="mt-4 text-center">
+            <p class="text-bcGovColor-midGray dark:text-gray-400">
+              Learn about and try Service BC Connect products
+            </p>
+          </div>
+          <div class="flex grow items-center justify-center px-4 pb-3.5 text-center sm:p-7">
+            <NuxtLink
+              :to="localePath('/products')"
+              class="flex cursor-pointer flex-wrap items-center font-semibold tracking-wide text-[#1a5a96] underline dark:text-white"
+            >
+              {{ $t('SbcMainCard.learnMore') }}
+            </NuxtLink>
+          </div>
+        </UCard>
+      </UContainer>
     </div>
   </div>
 </template>

web/site/app/tests/unit/components/SbcFooter.test.ts

@@ -11,11 +11,13 @@ describe('<SbcFooter/>', () => {
       }
     })
 
-    const linkTexts = ['Home', 'Disclaimer', 'Privacy', 'Accessibility', 'Copyright']
+    const linkTexts = ['Home', 'Disclaimer', 'Release Notes', 'Privacy', 'Hours of Availability', 'Accessibility', 'Copyright']
     const linkHrefs = [
       '/en-CA',
       'https://www2.gov.bc.ca/gov/content/home/disclaimer',
+      'https://www.release-notes.bcregistry.gov.bc.ca',
       'https://www2.gov.bc.ca/gov/content/home/privacy',
+      'https://www2.gov.bc.ca/gov/content?id=C41D8179671441B2BAA3BDDD3D89C9A9',
       'https://www2.gov.bc.ca/gov/content/home/accessibility',
       'https://www2.gov.bc.ca/gov/content/home/copyright'
     ]