adding some cards and a composable

src/components/cards/MkTransparentBlogCard.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { computed } from 'vue'
+
+defineProps({
+  image:       { type: String, required: true },
+  title:       { type: String, required: true },
+  description: { type: String, required: true },
+  action: {
+    type: Object,
+    default: () => ({ route: '#', color: 'success', label: 'Read more' }),
+  },
+})
+
+const linkColors = {
+  primary:   'text-primary',
+  secondary: 'text-secondary',
+  success:   'text-success',
+  warning:   'text-warning',
+  danger:    'text-danger',
+  info:      'text-info',
+  dark:      'text-dark',
+  white:     'text-white',
+}
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <!-- Image — no card wrapper, just soft shadow and rounded corners -->
+    <div class="overflow-hidden rounded-xl shadow-soft-md">
+      <a :href="action.route" class="block">
+        <img
+          :src="image"
+          :alt="title"
+          loading="lazy"
+          class="h-48 w-full object-cover transition-transform duration-500 hover:scale-105"
+        />
+      </a>
+    </div>
+
+    <!-- Body — no background, plain text -->
+    <div class="mt-4">
+      <h5 class="font-bold text-dark">
+        <a :href="action.route" class="hover:text-primary transition-colors">{{ title }}</a>
+      </h5>
+      <p class="mt-2 text-sm text-secondary leading-relaxed">{{ description }}</p>
+      <a
+        :href="action.route"
+        class="mt-3 inline-flex items-center gap-1 text-sm font-medium transition-opacity hover:opacity-80"
+        :class="linkColors[action.color] ?? linkColors.success"
+      >
+        {{ action.label }}
+        <span class="material-icons text-base leading-none">arrow_forward</span>
+      </a>
+    </div>
+  </div>
+</template>