feat: Components to render articles in widget home (#7596)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/widget/components/ArticleHero.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h2 class="text-base font-bold leading-6 text-slate-800 mb-0">
+      {{ $t('PORTAL.POPULAR_ARTICLES') }}
+    </h2>
+    <category-card
+      :articles="articles.slice(0, 4)"
+      @view-all-articles="$emit('view-all-articles')"
+    />
+  </div>
+</template>
+
+<script>
+import CategoryCard from './ArticleCategoryCard.vue';
+export default {
+  components: { CategoryCard },
+  props: {
+    articles: {
+      type: Array,
+      default: () => [],
+    },
+    categoryPath: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<style></style>