initial: prepare folder structure

src/components/product/ProductCard.vue

@@ -0,0 +1,29 @@
+<template>
+  <ion-card
+    button
+    @click="$router.push('/products')"
+    class="rounded-2xl shadow-md p-3 text-center"
+  >
+    <div class="h-20 bg-gray-100 rounded-lg mb-3 flex items-center justify-center">
+      <span class="text-gray-400 text-sm">PHOTO</span>
+    </div>
+
+    <h3 class="font-semibold text-sm mb-2">
+      {{ product.name }}
+    </h3>
+
+    <div
+      class="text-xs font-medium px-3 py-1 rounded-full inline-block"
+      :class="product.stock > 0 ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'"
+    >
+      {{ product.stock > 0 ? `Ready ${product.stock} Unit` : 'No Stock' }}
+    </div>
+  </ion-card>
+</template>
+
+<script setup>
+import { IonCard } from '@ionic/vue'
+defineProps({
+  product: Object
+})
+</script>