feat: complete visual catalog development workflow

apps/web/src/components/molecules/ListingCard.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { RouterLink } from 'vue-router';
+import PriceDisplay from '@/components/atoms/PriceDisplay.vue';
+import StatusBadge from '@/components/atoms/StatusBadge.vue';
 
 defineProps({
   listing: {
@@ -10,14 +11,14 @@ defineProps({
 </script>
 
 <template>
-  <RouterLink class="listing-card" :to="{ name: 'listing-detail', params: { id: listing.id } }">
+  <a class="listing-card" :href="`/listings/${encodeURIComponent(listing.id)}`">
     <span class="listing-card__mark" aria-hidden="true">PK</span>
     <span>
-      <span class="listing-card__status">{{ listing.status }}</span>
+      <StatusBadge :status="listing.status" />
       <span class="listing-card__name">{{ listing.productName }}</span>
-      <span class="listing-card__price">${{ (listing.askingPriceMinor / 100).toFixed(2) }}</span>
+      <PriceDisplay :amount-minor="listing.askingPriceMinor" />
     </span>
-  </RouterLink>
+  </a>
 </template>
 
 <style scoped lang="scss">