Added new icons, improved the blog

components/blocks/Options.vue

@@ -18,10 +18,10 @@ const mailTemplate = `I've just found a bug on ${config.url} and would like to r
     <template #activator="{ props }">
       <div v-bind="props" class="options clickable">
         <img
-          class="logo user-select-none"
           draggable="false"
           :src="cogIcon"
           alt="Options"
+          class="logo user-select-none"
         />
       </div>
     </template>
@@ -33,10 +33,10 @@ const mailTemplate = `I've just found a bug on ${config.url} and would like to r
         <div class="overlay background"></div>
         <VCardText class="overlay content">
           <img
-            class="icon-badge user-select-none"
             draggable="false"
             :src="pearlIcon"
             alt="Pearl"
+            class="icon-badge user-select-none"
           />
           <div>
             <div class="row">

components/content/Card.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+import warningIcon from '~/assets/images/icons/accent/warning.png'
+import errorIcon from '~/assets/images/icons/accent/error.png'
+import infoIcon from '~/assets/images/icons/accent/info.png'
+import helpIcon from '~/assets/images/icons/accent/help.png'
+import checkIcon from '~/assets/images/icons/accent/checkmark.png'
+import ideaIcon from '~/assets/images/icons/accent/idea.png'
+
+type IconOptions = 'warning' | 'error' | 'info' | 'help' | 'checkmark' | 'idea'
+
+const props = defineProps({
+  icon: {
+    type: String as PropType<IconOptions>,
+    default: 'warning',
+  },
+  title: {
+    type: String,
+    default: 'Important',
+  },
+})
+
+let cardIcon = warningIcon
+let color = 'rgba(255 246 147 / 60%)'
+
+switch (props.icon) {
+  case 'error':
+    cardIcon = errorIcon
+    color = 'rgb(255 113 113 / 60%)'
+    break
+
+  case 'info':
+    cardIcon = infoIcon
+    color = 'rgb(94 162 255 / 60%)'
+
+    break
+
+  case 'help':
+    cardIcon = helpIcon
+    color = 'rgb(178 104 255 / 60%)'
+
+    break
+
+  case 'checkmark':
+    cardIcon = checkIcon
+    color = 'rgba(69 255 255 / 60%)'
+
+    break
+
+  case 'idea':
+    cardIcon = ideaIcon
+    color = 'rgba(255 255 255 / 60%)'
+
+    break
+
+  case 'warning':
+  default:
+    break
+}
+</script>
+
+<template>
+  <div
+    class="tilt d-flex flex-row align-items-center gap-2 mb-0 mb-sm-2 mb-md-4"
+  >
+    <img
+      draggable="false"
+      :src="cardIcon"
+      :alt="`Download`"
+      class="icon-image"
+    />
+    <h3 class="mb-0 nobr">{{ props.title }}</h3>
+  </div>
+  <div class="box p-4 rounded-4 mb-4">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss">
+.tilt {
+  transform: rotate(-2deg);
+}
+
+.box {
+  > p {
+    margin-bottom: 0;
+  }
+
+  margin-bottom: 1rem;
+  border-bottom: 1px ridge;
+  border-right: 1px ridge;
+  border-color: v-bind(color);
+}
+
+.icon {
+  &-image {
+    width: 48px;
+    height: 48px;
+  }
+}
+</style>