phase 1 & 2 first

src/components/HeroView.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useGalleryStore } from "../stores/gallery";
+import { convertFileSrc } from "@tauri-apps/api/core";
+
+const store = useGalleryStore();
+</script>
+
+<template>
+  <div class="w-full h-full flex items-center justify-center bg-black relative">
+    <div v-if="store.selectedImage" class="relative max-w-full max-h-full">
+      <img 
+        :src="convertFileSrc(store.selectedImage.path)" 
+        class="max-w-full max-h-full object-contain"
+        alt="Hero Image"
+      />
+      <!-- Watermark Overlay Placeholder -->
+      <div 
+        v-if="store.selectedImage.zcaSuggestion"
+        class="absolute border-2 border-dashed border-green-400 text-green-400 px-4 py-2 bg-black/50 pointer-events-none transition-all duration-500"
+        :style="{
+            left: (store.selectedImage.zcaSuggestion.x * 100) + '%',
+            top: (store.selectedImage.zcaSuggestion.y * 100) + '%',
+            transform: 'translate(-50%, -50%)'
+        }"
+      >
+        Smart Watermark ({{ store.selectedImage.zcaSuggestion.zone }})
+      </div>
+      <div 
+        v-else
+        class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-2 border-dashed border-white text-white px-4 py-2 bg-black/50 pointer-events-none"
+      >
+        Calculating...
+      </div>
+    </div>
+    <div v-else class="text-gray-500">
+      No image selected
+    </div>
+  </div>
+</template>