fix image zoom stuff

src/index.md

@@ -241,7 +241,7 @@ layout: home
       layout="rtl"
       :panels="[
           {
-              title: 'GenerativeAI e-Discovery',
+              title: 'GenerativeAI powered e-Discovery',
               text: `
                Interrogate sets of files / folders to extract the themes and narratives that you
               might want to describe. Easily comprehend large swathes of data to find the insights

src/vue-components/Image.vue

@@ -1,28 +1,26 @@
 <template>
     <div class="flex flex-col items-center drop-shadow-2xl">
-        <!-- <div v-if="enableZoom">
-            <img :src="src" data-zoomable />
+        <div v-if="enableZoom">
+            <ImageZoom :src="props.src" />
             <TipComponent>Click the image for a closer look!</TipComponent>
         </div>
         <div v-else>
-            <img :src="src" />
-        </div> -->
-        <ImageZoom :src="props.src" alt="Zoom 1" />
-        <TipComponent>Click the image for a closer look!</TipComponent>
+            <img :src="props.src" />
+        </div>
     </div>
 </template>
 
 <script setup>
 import ImageZoom from "./ImageZoom.vue";
-import { onMounted, ref } from "vue";
+import { onBeforeMount, ref } from "vue";
 const props = defineProps({
     src: { type: String, required: true },
 });
 const enableZoom = ref(true);
 
 // if we're on a touch device and window small - disable zoom
 //   this way we can pinch to zoom
-onMounted(() => {
+onBeforeMount(() => {
     if ("ontouchstart" in window && window.innerWidth <= 1200) {
         enableZoom.value = false;
     }