feat: design update, show avatar in navbar

frontend/spa/src/components/ProductItem/Price.vue

@@ -0,0 +1,24 @@
+<template>
+  <div v-if="special">
+    <span class="old-price text-stone-500 line-through mr-1">{{ price }}</span>
+    <span class="curr-price font-medium">{{ special }}</span>
+  </div>
+  <div v-else class="font-medium">{{ price }}</div>
+</template>
+
+<script setup>
+const props = defineProps({
+  price: String,
+  special: [String, Boolean],
+});
+</script>
+
+<style scoped>
+.old-price {
+  font-size: 0.65rem;
+}
+
+.curr-price {
+  font-size: .9rem;
+}
+</style>

frontend/spa/src/components/ProductItem/PriceTitle.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="mt-2 text-center space-y-0.5">
+    <Price :price="product.price" :special="product.special"/>
+    <ProductTitle :title="product.name"/>
+  </div>
+</template>
+
+<script setup>
+import ProductTitle from "@/components/ProductItem/ProductTitle.vue";
+import Price from "@/components/ProductItem/Price.vue";
+
+const props = defineProps({
+  product: Object,
+});
+</script>

frontend/spa/src/components/ProductItem/ProductTitle.vue

@@ -1,5 +1,5 @@
 <template>
-  <h3 class="product-title mt-4 text-sm">{{ title }}</h3>
+  <h3 class="product-title text-sm/4">{{ title }}</h3>
 </template>
 
 <script setup>