MultiPass block for dynamic nft

- icon to indicate part of collection
- translations

apps/verification-portal/src/lib/components/icons/HexagonGridIcon.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  export let className: string = '';
+</script>
+
+<svg
+  width="65"
+  height="65"
+  viewBox="0 0 65 65"
+  fill="none"
+  class={className}
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    class="fill-[#e3e3e3] dark:fill-[#bbb8b8]"
+    d="M27.9893 2.60428C30.7805 0.992745 34.2195 0.992744 37.0107 2.60428L56.1351 13.6457C58.9263 15.2573 60.6458 18.2355 60.6458 21.4586V43.5414C60.6458 46.7645 58.9263 49.7427 56.1351 51.3543L37.0107 62.3957C34.2195 64.0073 30.7805 64.0073 27.9893 62.3957L8.86491 51.3543C6.07366 49.7427 4.35417 46.7645 4.35417 43.5414V21.4586C4.35417 18.2355 6.07366 15.2573 8.86491 13.6457L27.9893 2.60428Z"
+  />
+  <path
+    d="M17.1473 35.2395L21.9403 37.9241C22.5018 38.2387 22.8399 38.8145 22.8399 39.4292V44.7985C22.8399 45.4133 22.5018 45.9891 21.9403 46.3036L17.1473 48.9883C16.5842 49.3037 15.8885 49.3037 15.3254 48.9883L10.5324 46.3036C9.97088 45.9891 9.63281 45.4133 9.63281 44.7985V39.4292C9.63281 38.8145 9.97088 38.2387 10.5324 37.9241L15.3254 35.2395C15.8885 34.9241 16.5842 34.9241 17.1473 35.2395Z"
+    fill="currentFill"
+  />
+  <path
+    d="M48.8506 34.8032C48.1357 34.4028 47.2549 34.4028 46.54 34.8032L41.747 37.4879C41.0321 37.8883 40.5917 38.6284 40.5917 39.4292V44.7985C40.5917 45.5994 41.0321 46.3394 41.747 46.7398L46.54 49.4245C47.2549 49.8249 48.1357 49.8249 48.8506 49.4245L53.6436 46.7398C54.3584 46.3394 54.7988 45.5994 54.7988 44.7985V39.4292C54.7988 38.6284 54.3584 37.8883 53.6436 37.4879L48.8506 34.8032Z"
+    fill="currentColor"
+  />
+  <path
+    d="M31.3184 25.6702C32.0333 25.2698 32.9141 25.2698 33.6289 25.6702L38.4219 28.3549C39.1368 28.7553 39.5772 29.4953 39.5772 30.2962V35.6655C39.5772 36.4663 39.1368 37.2064 38.4219 37.6068L33.6289 40.2914C32.9141 40.6919 32.0333 40.6919 31.3184 40.2914L26.5254 37.6068C25.8105 37.2064 25.3701 36.4663 25.3701 35.6655V30.2962C25.3701 29.4953 25.8105 28.7553 26.5254 28.3549L31.3184 25.6702Z"
+    fill="currentColor"
+  />
+  <path
+    d="M31.3184 43.9364C32.0333 43.536 32.9141 43.536 33.6289 43.9364L38.4219 46.6211C39.1368 47.0215 39.5772 47.7615 39.5772 48.5624V53.9317C39.5772 54.7326 39.1368 55.4726 38.4219 55.873L33.6289 58.5577C32.9141 58.9581 32.0333 58.9581 31.3184 58.5577L26.5254 55.873C25.8105 55.4726 25.3701 54.7326 25.3701 53.9317V48.5624C25.3701 47.7615 25.8105 47.0215 26.5254 46.6211L31.3184 43.9364Z"
+    fill="currentColor"
+  />
+  <path
+    d="M15.0811 16.537C15.796 16.1366 16.6768 16.1366 17.3916 16.537L22.1846 19.2217C22.8995 19.6221 23.3399 20.3621 23.3399 21.163V26.5323C23.3399 27.3332 22.8995 28.0732 22.1846 28.4736L17.3916 31.1583C16.6768 31.5587 15.796 31.5587 15.0811 31.1583L10.2881 28.4736C9.5732 28.0732 9.13281 27.3332 9.13281 26.5323V21.163C9.13281 20.3621 9.5732 19.6221 10.2881 19.2217L15.0811 16.537Z"
+    fill="currentColor"
+  />
+  <path
+    d="M48.8506 16.537C48.1357 16.1366 47.2549 16.1366 46.54 16.537L41.747 19.2217C41.0321 19.6221 40.5917 20.3621 40.5917 21.163V26.5323C40.5917 27.3332 41.0321 28.0732 41.747 28.4736L46.54 31.1583C47.2549 31.5587 48.1357 31.5587 48.8506 31.1583L53.6436 28.4736C54.3584 28.0732 54.7988 27.3332 54.7988 26.5323V21.163C54.7988 20.3621 54.3584 19.6221 53.6436 19.2217L48.8506 16.537Z"
+    fill="currentColor"
+  />
+  <path
+    d="M31.3184 7.40383C32.0333 7.00341 32.9141 7.00341 33.6289 7.40383L38.4219 10.0885C39.1368 10.4889 39.5772 11.2289 39.5772 12.0298V17.3991C39.5772 18.2 39.1368 18.94 38.4219 19.3404L33.6289 22.0251C32.9141 22.4255 32.0333 22.4255 31.3184 22.0251L26.5254 19.3404C25.8105 18.94 25.3701 18.2 25.3701 17.3991V12.0298C25.3701 11.2289 25.8105 10.4889 26.5254 10.0885L31.3184 7.40383Z"
+    fill="currentColor"
+  />
+</svg>

apps/verification-portal/src/lib/shared/i18n/en/index.ts

@@ -128,6 +128,12 @@ const en: BaseTranslation = {
         'Ecological Entity: an identified piece of ecology the Ecological Steward (ES) focuses on, that being a specific species population (predators of the Maasai Mara) or an ecosystem (the Upemba National Park)',
       traces: 'Traces Recorded',
     },
+    multiPass: {
+      cardTitle: 'Part of multi-pass collection:',
+      comingSoon: 'Coming soon:',
+      CTA: 'Begin the adventure',
+      aboutLink: 'About {multiPassName: string}',
+    },
   },
   social: {
     shareCard: {

apps/verification-portal/src/lib/shared/i18n/i18n-types.ts

@@ -368,6 +368,25 @@ type RootTranslation = {
 			 */
 			traces: string
 		}
+		multiPass: {
+			/**
+			 * P​a​r​t​ ​o​f​ ​m​u​l​t​i​-​p​a​s​s​ ​c​o​l​l​e​c​t​i​o​n​:
+			 */
+			cardTitle: string
+			/**
+			 * C​o​m​i​n​g​ ​s​o​o​n​:
+			 */
+			comingSoon: string
+			/**
+			 * B​e​g​i​n​ ​t​h​e​ ​a​d​v​e​n​t​u​r​e
+			 */
+			CTA: string
+			/**
+			 * A​b​o​u​t​ ​{​m​u​l​t​i​P​a​s​s​N​a​m​e​}
+			 * @param {string} multiPassName
+			 */
+			aboutLink: RequiredParams<'multiPassName'>
+		}
 	}
 	social: {
 		shareCard: {
@@ -837,6 +856,24 @@ export type TranslationFunctions = {
 			 */
 			traces: () => LocalizedString
 		}
+		multiPass: {
+			/**
+			 * Part of multi-pass collection:
+			 */
+			cardTitle: () => LocalizedString
+			/**
+			 * Coming soon:
+			 */
+			comingSoon: () => LocalizedString
+			/**
+			 * Begin the adventure
+			 */
+			CTA: () => LocalizedString
+			/**
+			 * About {multiPassName}
+			 */
+			aboutLink: (arg: { multiPassName: string }) => LocalizedString
+		}
 	}
 	social: {
 		shareCard: {

apps/verification-portal/src/lib/widgets/MultipassCTA/MultipassCTA.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import HexagonGridIcon from '$lib/components/icons/HexagonGridIcon.svelte';
+  import Subheader from '$lib/shared/typography/Subheader.svelte';
+  import { Button } from 'flowbite-svelte';
+  import LL from '$lib/shared/i18n/i18n-svelte';
+  export let passTitle = 'DOTphin';
+  export let aboutLink = '/dotphin';
+</script>
+
+<div
+  class="mx-0 sm:mx-4 lg:mx-8 xl:mx-4 dark:bg-gray-200 bg-gray-100 sm:rounded-lg mb-5 xl:rounded-lg text-deep-green overflow-hidden"
+>
+  <div class="grid lg:grid-cols-6 grid-flow-row lg:grid-flow-col">
+    <div
+      class="px-12 sm:px-8 md:px-11 py-8 pb-4 md:pb-8 xl:pt-11 col-span-3 grid grid-flow-row-dense grid-cols-5 items-center"
+    >
+      <div
+        class="col-span-1 col-start-5 sm:col-start-1 text-center self-center sm:self-start md:self-center"
+      >
+        <HexagonGridIcon
+          className=" fill-primary-500 text-deep-green-500 h-12 sm:h-[85px]"
+        />
+      </div>
+
+      <div class="col-span-4 col-start-1 sm:col-start-2">
+        <Subheader
+          id="multipass"
+          title={$LL.assets.multiPass.cardTitle()}
+          className="md:!text-base font-normal text-black dark:text-deep-green"
+          >{$LL.assets.multiPass.cardTitle()}</Subheader
+        >
+        <h3 class="text-6xl">{passTitle}</h3>
+      </div>
+    </div>
+    <div
+      class="bg-multipass px-12 sm:px-8 md:px-11 py-8 xl:pt-11 col-span-3 flex flex-col sm:flex-row justify-start sm:items-end gap-5"
+    >
+      <div class="flex gap-1 flex-col">
+        <span class="text-sm font-aeonik font-bold text-gray-200">
+          {$LL.assets.multiPass.comingSoon()}</span
+        >
+        <Button
+          color="none"
+          class="z-50  bg-deep-blue-700 text-gray-200 rounded-sm  border-none opacity-80 !py-2.5 !px-4 text-lg  uppercase"
+          type="button"
+          tabindex="1"
+          disabled={true}
+        >
+          {$LL.assets.multiPass.CTA()}
+        </Button>
+      </div>
+      <Button
+        color="none"
+        class="z-50 hover:bg-primary-300 bg-primary-400 text-white rounded-sm  border-none !py-2.5 !px-4 text-lg uppercase"
+        type="button"
+        tabindex="1"
+        href={aboutLink}
+      >
+        {$LL.assets.multiPass.aboutLink({ multiPassName: passTitle })}
+      </Button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .bg-multipass {
+    background-image: url('');
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+</style>