chore: show button for crypto map if the iframe cannot be loaded

app/slices/CryptoMapContinentSelector/index.vue

@@ -64,10 +64,12 @@ watch([activeItemIndex, iframe], () => {
 }, { immediate: true })
 
 const allowMapInteraction = ref(false)
+
+const iframeIsLoaded = ref(true)
 </script>
 
 <template>
-  <section flex="col lg:row gap-x-24 gap-y-64 lg:gap-y-32" px="0 lg:64 xl:0" max-w="$nq-max-width" nq-wide bg-neutral-100>
+  <section v-if="iframeIsLoaded" flex="col lg:row gap-x-24 gap-y-64 lg:gap-y-32" px="0 lg:64 xl:0" max-w="$nq-max-width" nq-wide bg-neutral-100>
     <div max-lg:w-full>
       <ul flex="~ lg:col gap-16" max-lg="snap-x snap-mandatory scroll-pl-32 md:scroll-pl-64 of-x-auto nq-scrollbar-hide py-20 lg:py-40">
         <li
@@ -118,11 +120,17 @@ const allowMapInteraction = ref(false)
       <iframe
         ref="iframe"
         loading="lazy"
-        w-full aspect="9/16 lg:initial" rounded-8 lg:h-full max-lg:max-h-80dvh ring="1.5 neutral-200" title="Crypto Map"
-        :src="cryptoMapUrl"
+        w-full
+        aspect="9/16 lg:initial" rounded-8 lg:h-full max-lg:max-h-80dvh ring="1.5 neutral-200" title="Crypto Map" :src="cryptoMapUrl"
         sandbox="allow-scripts allow-same-origin allow-popups"
         frameborder="0"
+        @onerror="() => iframeIsLoaded = false"
       />
     </div>
   </section>
+  <section v-else bg-neutral-100 pt-0>
+    <NuxtLink to="https://map.nimiq.com" target="_blank" mx-auto w-max nq-arrow nq-pill-lg nq-pill-blue>
+      Explore the Crypto Map
+    </NuxtLink>
+  </section>
 </template>