feat(v4): Update the help center portal design (#10296)

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.story.vue

@@ -3,30 +3,60 @@ import ArticleCard from './ArticleCard.vue';
 
 const articles = [
   {
+    id: 1,
     title: "How to get an SSL certificate for your Help Center's custom domain",
     status: 'draft',
-    updatedAt: '2 days ago',
-    author: 'Michael',
-    category: '⚡️ Marketing',
+    updatedAt: 1729048936,
+    author: {
+      name: 'John',
+      thumbnail: 'https://i.pravatar.cc/300',
+    },
+    category: {
+      title: 'Marketing',
+      slug: 'marketing',
+      icon: '📈',
+    },
     views: 400,
   },
   {
+    id: 2,
     title: 'Setting up your first Help Center portal',
     status: '',
-    updatedAt: '1 week ago',
-    author: 'John',
-    category: '🛠️ Development',
+    updatedAt: 1729048936,
+    author: {
+      name: 'John',
+      thumbnail: 'https://i.pravatar.cc/300',
+    },
+    category: {
+      title: 'Development',
+      slug: 'development',
+      icon: '🛠️',
+    },
     views: 1400,
   },
   {
+    id: 3,
     title: 'Best practices for organizing your Help Center content',
     status: 'archived',
-    updatedAt: '3 days ago',
-    author: 'Fernando',
-    category: '💰 Finance',
+    updatedAt: 1729048936,
+    author: {
+      name: 'Fernando',
+      thumbnail: 'https://i.pravatar.cc/300',
+    },
+    category: {
+      title: 'Finance',
+      slug: 'finance',
+      icon: '💰',
+    },
     views: 4300,
   },
 ];
+
+const category = {
+  name: 'Marketing',
+  slug: 'marketing',
+  icon: '📈',
+};
 </script>
 
 <!-- eslint-disable vue/no-bare-strings-in-template -->
@@ -43,10 +73,11 @@ const articles = [
         class="px-20 py-4 bg-white dark:bg-slate-900"
       >
         <ArticleCard
+          :id="article.id"
           :title="article.title"
           :status="article.status"
           :author="article.author"
-          :category="article.category"
+          :category="category"
           :views="article.views"
           :updated-at="article.updatedAt"
         />