Dev designs - partial

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/components/Sbc/Header/Main.vue

@@ -18,36 +18,38 @@ defineExpose({
   <header
     id="sbc-main-header"
     ref="headerRef"
-    class="border-b-2 border-bcGovColor-navDivider bg-bcGovColor-header p-2 sm:px-4 dark:border-b dark:bg-bcGovColor-darkGray"
+    class="2xl: left-1 h-16 border-b-4 border-bcGovColor-navDivider bg-bcGovColor-header p-2 sm:px-4 dark:border-b dark:bg-bcGovColor-darkGray"
   >
     <nav
-      class="m-auto flex w-full max-w-[1360px] items-center justify-between"
+      class="m-auto flex w-full max-w-[1312px] items-center justify-between"
       :aria-label="$t('SbcHeader.navLabel')"
     >
-      <div class="flex items-center gap-1">
-        <NuxtLinkLocale
-          to="/"
-          tabindex="-1"
-          aria-hidden="true"
-          class="mr-2"
-        >
-          <SbcLogo />
-        </NuxtLinkLocale>
-        <UButton
+      <div
+        class="flex h-12 min-h-12 items-center gap-3 py-2.5 sm:gap-5 md:gap-5 lg:gap-7"
+      >
+        <div class="h-12">
+          <NuxtLinkLocale to="/" tabindex="-1" aria-hidden="true" class="mr-2">
+            <SbcLogo />
+          </NuxtLinkLocale>
+        </div>
+        <div
           v-for="link in mainLinks"
           :key="link.to"
-          class="hidden lg:block"
-          :label="link.label"
-          :to="link.to"
-          color="white"
-          variant="link"
-          size="lg"
-          active-class="underline"
-        />
+          class="flex h-11 w-24 cursor-pointer text-left font-sans text-sm font-semibold leading-5 lg:h-7 lg:w-60 lg:text-lg lg:font-bold lg:leading-7"
+        >
+          <NuxtLinkLocale :to="link.to">
+            <span v-if="link.label === 'Service BC Connect'">
+              <span class="text-white">Service</span><span class="text-bcGovColor-navDivider">BC</span> <span class="text-white">Connect</span>
+            </span>
+            <!-- <span v-else class="text-white">
+              {{ link.label }}
+            </span> -->
+          </NuxtLinkLocale>
+        </div>
       </div>
       <div class="flex gap-1">
-        <ColorModeSelect />
-        <LocaleSelect />
+        <!-- <ColorModeSelect /> -->
+        <!-- <LocaleSelect /> -->
         <!-- leaving out auth options for now -->
         <!-- <UDropdown
           v-if="!user"

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

@@ -16,12 +16,12 @@
   </div>
   <div v-else>
     <img
-      class="hidden h-[60px] scale-125 sm:block"
+      class="hidden h-11 max-w-48 scale-125 sm:block"
       src="BCGovLogoLgEn"
       :alt="$t('SbcLogo.alt')"
     >
     <img
-      class="block h-[64px] scale-150 sm:hidden"
+      class="block h-11 w-14 scale-150 sm:hidden"
       src="BCGovLogoSmEn"
       :alt="$t('SbcLogo.alt')"
     >

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineProps<{
-  accordianNavItems?: AccordianNavItem[] | undefined
+  accordianNavItems?: AccordianNavItem[] | undefined;
 }>()
 // const user = useCurrentUser()
 const { currentDir, tocLinks } = useDocPageData()
@@ -33,27 +33,45 @@ const {
           padding: 'p-2'
         },
         header: {
-          base: 'border-b-2 border-bcGovColor-navDivider dark:border-b-[1px] dark:bg-bcGovColor-darkGray',
+          base: 'border-b-4 border-bcGovColor-navDivider dark:border-b-[1px] dark:bg-bcGovColor-darkGray',
           background: 'bg-bcGovColor-header dark:bg-bcGovColor-darkGray',
           padding: 'p-2'
-        }
+        },
       }"
     >
       <template #header>
         <div class="m-auto flex w-full items-center justify-between">
-          <div class="flex items-center gap-1">
-            <NuxtLinkLocale
-              to="/"
-              tabindex="-1"
-              aria-hidden="true"
-              class="mr-2"
+          <div
+            class="flex h-12 min-h-12 items-center gap-3 py-2.5 sm:gap-5 md:gap-5 lg:gap-7"
+          >
+            <div class="flex">
+              <NuxtLinkLocale
+                to="/"
+                tabindex="-1"
+                aria-hidden="true"
+                class="mr-2"
+              >
+                <SbcLogo />
+              </NuxtLinkLocale>
+            </div>
+            <div
+              v-for="link in mainLinks"
+              :key="link.to"
+              class="flex h-11 w-24 cursor-pointer text-left font-sans text-sm font-semibold leading-5 lg:h-7 lg:w-60 lg:text-lg lg:font-bold lg:leading-7"
             >
-              <SbcLogo />
-            </NuxtLinkLocale>
+              <NuxtLinkLocale :to="link.to">
+                <span v-if="link.label === 'Service BC Connect'">
+                  <span class="text-white">Service</span><span class="text-bcGovColor-navDivider">BC</span> <span class="text-white">Connect</span>
+                </span>
+                <!-- <span v-else class="text-white">
+                    {{ link.label }}
+                  </span> -->
+              </NuxtLinkLocale>
+            </div>
           </div>
           <div class="flex gap-1">
-            <ColorModeSelect />
-            <LocaleSelect />
+            <!-- <ColorModeSelect />
+            <LocaleSelect /> -->
             <!-- leave out auth options for now -->
             <!-- <UDropdown
               v-if="!user"
@@ -109,13 +127,17 @@ const {
         </div>
       </template>
       <UVerticalNavigation :links="mainLinks" />
-      <UDivider v-show="tocLinks.length && $route.path.includes('products')" class="my-4" />
-      <UAccordion v-show="tocLinks.length && $route.path.includes('products')" :items="[{label: 'Table of Contents', defaultOpen: true}]">
+      <UDivider
+        v-show="tocLinks.length && $route.path.includes('products')"
+        class="my-4"
+      />
+      <UAccordion
+        v-show="tocLinks.length && $route.path.includes('products')"
+        :items="[{ label: 'Table of Contents', defaultOpen: true }]"
+      >
         <!-- default slot is the accordian button itself, so we use a custom button variant here to match theme -->
         <template #default="{ open }">
-          <UButton
-            variant="accordian_trigger"
-          >
+          <UButton variant="accordian_trigger">
             <span class="truncate">Table of Contents</span>
 
             <template #trailing>

web/site/app/composables/sbcNav.ts

@@ -31,7 +31,7 @@ export function useSbcNav () {
       //   icon: 'i-mdi-account',
       //   label: t('btn.dashboard'),
       //   to: localePath('/sbc/dashboard')
-      // },
+      // }
       {
         icon: 'i-mdi-book-open-variant',
         label: 'Docs',

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

@@ -4,10 +4,10 @@ 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',
+    sbcConnect: 'ServiceBC Connect',
     apiDoc: 'API documentation',
     createKey: 'Create Key',
     revoke: 'Revoke',
@@ -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>