From 3f403a650315d430472fa9c2a57551a3f162b588 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Sat, 5 Sep 2026 23:11:25 +0600
Subject: [PATCH 1/2] feat(blog): update mobile blog card layout to compact row

---
 resources/js/components/BlogCard.vue | 106 +++++++++++++++++++--------
 1 file changed, 77 insertions(+), 29 deletions(-)

diff --git a/resources/js/components/BlogCard.vue b/resources/js/components/BlogCard.vue
index 89499bf4..e382dda3 100644
--- a/resources/js/components/BlogCard.vue
+++ b/resources/js/components/BlogCard.vue
@@ -1,27 +1,66 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import { ArrowRight, Heart, MessageSquare } from 'lucide-vue-next';
+import {
+    ArrowRight,
+    BookOpen,
+    Eye,
+    Heart,
+    MessageSquare,
+} from 'lucide-vue-next';
+import { formatTimeAgo } from '@/lib/useDate';
 
-defineProps({
-    blog: Object,
-});
+interface User {
+    id?: number;
+    name?: string;
+    username?: string;
+    image_url?: string | null;
+}
+
+interface Blog {
+    id: number;
+    title: string;
+    slug: string;
+    excerpt?: string | null;
+    category?: string | null;
+    featured_image?: string | null;
+    featured_image_path?: string | null;
+    is_featured?: boolean;
+    views?: number;
+    reactions_count?: number;
+    comments_count?: number;
+    created_at?: string;
+    user?: User;
+}
+
+defineProps<{
+    blog: Blog;
+}>();
 </script>
 
 <template>
     <Link
         :href="'/blogs/' + blog.slug"
-        class="group relative flex flex-row items-center overflow-hidden rounded-xl border border-slate-200 bg-white p-3 shadow-xs transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md sm:flex-col sm:p-0 dark:border-gray-700 dark:bg-gray-900 dark:hover:shadow-gray-900/50"
+        class="group relative flex touch-manipulation flex-row items-center overflow-hidden rounded-2xl border border-slate-200/80 bg-white p-3 shadow-xs transition-all duration-200 hover:border-indigo-300/80 hover:shadow-sm active:scale-[0.99] sm:flex-col sm:items-stretch sm:p-0 sm:active:scale-100 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-indigo-500/40 dark:hover:shadow-indigo-500/5"
     >
         <!-- Featured Image Container -->
         <div
-            class="relative block h-20 w-20 shrink-0 overflow-hidden rounded-lg bg-slate-100 sm:aspect-[16/9] sm:h-auto sm:w-full sm:rounded-none dark:bg-gray-800"
+            class="relative h-20 w-24 shrink-0 overflow-hidden rounded-xl bg-slate-100 sm:aspect-[16/9] sm:h-auto sm:w-full sm:rounded-none dark:bg-gray-800"
         >
             <img
-                :src="blog.featured_image || 'https://placehold.co/600x400'"
+                v-if="blog.featured_image"
+                :src="blog.featured_image"
                 :alt="blog.title"
                 class="h-full w-full object-cover transition-transform duration-300 ease-out group-hover:scale-105"
                 loading="lazy"
             />
+            <div
+                v-else
+                class="flex h-full w-full items-center justify-center bg-slate-100 text-slate-400 dark:bg-gray-800 dark:text-gray-500"
+            >
+                <BookOpen class="h-6 w-6 stroke-[1.8] opacity-60" />
+            </div>
+
+            <!-- Desktop Category Badge (on image) -->
             <div
                 v-if="blog.category"
                 class="absolute top-2.5 left-2.5 hidden rounded-md bg-indigo-600 px-2 py-0.5 text-[10px] font-bold tracking-wider text-white uppercase shadow-xs sm:block"
@@ -31,45 +70,46 @@ defineProps({
         </div>
 
         <!-- Card Body -->
-        <div class="flex min-w-0 flex-1 flex-col justify-between pl-3 sm:p-4">
+        <div class="flex min-w-0 flex-1 flex-col justify-between pl-3 sm:p-4.5">
             <div>
-                <!-- Top Row: Category / Author -->
+                <!-- Top Row: Category / Author / Date -->
                 <div
                     class="mb-1 flex items-center gap-1.5 text-[11px] sm:mb-1.5 sm:text-xs"
                 >
                     <span
                         v-if="blog.category"
-                        class="rounded bg-indigo-50 px-1.5 py-0.5 text-[9px] font-bold text-indigo-600 sm:hidden dark:bg-indigo-950/60 dark:text-indigo-400"
+                        class="rounded-md bg-indigo-50 px-1.5 py-0.5 text-[10px] font-bold text-indigo-600 sm:hidden dark:bg-indigo-950/60 dark:text-indigo-400"
                     >
                         {{ blog.category }}
                     </span>
 
-                    <span class="text-slate-400 dark:text-gray-500">By</span>
-                    <Link
-                        v-if="blog.user?.username"
-                        :href="`/u/${blog.user.username}`"
-                        @click.stop
-                        class="relative z-10 truncate font-semibold text-slate-700 transition-colors hover:text-indigo-600 hover:underline dark:text-gray-300 dark:hover:text-indigo-400"
-                    >
-                        {{ blog.user?.name }}
-                    </Link>
                     <span
-                        v-else
+                        v-if="blog.user?.name"
                         class="truncate font-semibold text-slate-700 dark:text-gray-300"
                     >
-                        {{ blog.user?.name }}
+                        {{ blog.user.name }}
                     </span>
+
+                    <template v-if="blog.created_at">
+                        <span class="text-slate-300 dark:text-gray-600">•</span>
+                        <span
+                            class="shrink-0 text-slate-400 dark:text-gray-500"
+                        >
+                            {{ formatTimeAgo(blog.created_at) }}
+                        </span>
+                    </template>
                 </div>
 
                 <!-- Title -->
                 <h3
-                    class="line-clamp-2 text-xs leading-snug font-bold text-slate-900 transition duration-150 group-hover:text-indigo-600 sm:text-base dark:text-gray-100 dark:group-hover:text-indigo-400"
+                    class="line-clamp-2 text-sm leading-snug font-bold text-slate-900 transition-colors duration-150 group-hover:text-indigo-600 sm:text-base dark:text-gray-100 dark:group-hover:text-indigo-400"
                 >
                     {{ blog.title }}
                 </h3>
 
-                <!-- Excerpt (hidden on mobile to save vertical space) -->
+                <!-- Excerpt (hidden on mobile to maintain compact height) -->
                 <p
+                    v-if="blog.excerpt"
                     class="mt-1.5 mb-3 line-clamp-2 hidden text-xs leading-relaxed text-slate-600 sm:block dark:text-gray-400"
                 >
                     {{ blog.excerpt }}
@@ -78,27 +118,35 @@ defineProps({
 
             <!-- Footer Action & Interaction Stats -->
             <div
-                class="mt-1 flex items-center justify-between pt-1 sm:mt-auto sm:border-t sm:border-slate-100 sm:pt-3 dark:sm:border-gray-800"
+                class="mt-1.5 flex items-center justify-between pt-0.5 sm:mt-auto sm:border-t sm:border-slate-100 sm:pt-3 dark:sm:border-gray-800/80"
             >
                 <div
                     class="flex items-center gap-3 text-[11px] text-slate-400 sm:text-xs dark:text-gray-500"
                 >
                     <span class="inline-flex items-center gap-1">
-                        <Heart class="h-3.5 w-3.5" />
+                        <Heart class="h-3.5 w-3.5 stroke-[2]" />
                         <span>{{ blog.reactions_count || 0 }}</span>
                     </span>
 
                     <span class="inline-flex items-center gap-1">
-                        <MessageSquare class="h-3.5 w-3.5" />
+                        <MessageSquare class="h-3.5 w-3.5 stroke-[2]" />
                         <span>{{ blog.comments_count || 0 }}</span>
                     </span>
+
+                    <span
+                        v-if="blog.views"
+                        class="inline-flex items-center gap-1"
+                    >
+                        <Eye class="h-3.5 w-3.5 stroke-[2]" />
+                        <span>{{ blog.views }}</span>
+                    </span>
                 </div>
 
-                <!-- Bottom-Right Arrow Indicator -->
+                <!-- Arrow Indicator matching platform style -->
                 <div
-                    class="flex h-5 w-5 shrink-0 items-center justify-center text-slate-400 transition-transform duration-200 group-hover:translate-x-1 group-hover:text-indigo-600 dark:text-gray-500 dark:group-hover:text-indigo-400"
+                    class="flex h-5 w-5 shrink-0 items-center justify-center text-slate-300 transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-indigo-600 dark:text-gray-600 dark:group-hover:text-indigo-400"
                 >
-                    <ArrowRight class="h-3.5 w-3.5" />
+                    <ArrowRight class="h-3.5 w-3.5 stroke-[2]" />
                 </div>
             </div>
         </div>

From 5c434757a932ab2a1d00f20e1acb2b0f06ffef6b Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Sat, 5 Sep 2026 23:11:26 +0600
Subject: [PATCH 2/2] feat(home): add trending forum discussions section in
 2-column grid and extract ForumPostCard

---
 app/Helpers/CacheHelper.php                   |   1 +
 app/Http/Controllers/SubjectController.php    |  17 ++
 .../js/components/forum/ForumPostCard.vue     | 231 ++++++++++++++++++
 resources/js/pages/Forum/Index.vue            | 186 +-------------
 resources/js/pages/Home.vue                   |  55 +++++
 5 files changed, 309 insertions(+), 181 deletions(-)
 create mode 100644 resources/js/components/forum/ForumPostCard.vue

diff --git a/app/Helpers/CacheHelper.php b/app/Helpers/CacheHelper.php
index f8ff8c89..3a305c3b 100644
--- a/app/Helpers/CacheHelper.php
+++ b/app/Helpers/CacheHelper.php
@@ -17,6 +17,7 @@ public static function clearHomePage(?string $course = null): void
         Cache::forget('home_page_subjects_hsc');
         Cache::forget('home_page_subjects_ssc');
         Cache::forget('home_page_featured_blogs');
+        Cache::forget('home_page_trending_posts');
         Cache::forget('home_page_notice');
         Cache::forget('forum_filter_subjects');
     }
diff --git a/app/Http/Controllers/SubjectController.php b/app/Http/Controllers/SubjectController.php
index e23715bc..bac72b08 100644
--- a/app/Http/Controllers/SubjectController.php
+++ b/app/Http/Controllers/SubjectController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\Models\Blog;
+use App\Models\ForumPost;
 use App\Models\Node;
 use App\Models\Notice;
 use App\Models\Subject;
@@ -41,6 +42,21 @@ public function index(Request $request, $course)
                 ->toArray();
         });
 
+        $trendingPosts = Cache::remember('home_page_trending_posts', now()->addHours(2), function () {
+            return ForumPost::query()
+                ->approved()
+                ->with([
+                    'user:id,name,username,image_path,institution,is_verified',
+                    'subject:id,name,course,slug',
+                    'node:id,name,slug',
+                ])
+                ->orderByDesc('vote_score')
+                ->latest()
+                ->limit(4)
+                ->get()
+                ->toArray();
+        });
+
         $notice = Cache::rememberForever('home_page_notice', function () {
             return Notice::activeForDisplay()?->toArray();
         });
@@ -48,6 +64,7 @@ public function index(Request $request, $course)
         return Inertia::render('Home', [
             'subjects' => $subjects,
             'featured_blogs' => $featuredBlogs,
+            'trending_posts' => $trendingPosts,
             'notice' => $notice,
         ]);
     }
diff --git a/resources/js/components/forum/ForumPostCard.vue b/resources/js/components/forum/ForumPostCard.vue
new file mode 100644
index 00000000..feebee71
--- /dev/null
+++ b/resources/js/components/forum/ForumPostCard.vue
@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import { Link, router } from '@inertiajs/vue3';
+import { CheckCircle2, ImageIcon, MessageSquare } from 'lucide-vue-next';
+import ForumVoteButtons from '@/components/forum/ForumVoteButtons.vue';
+import VerifiedBadge from '@/components/VerifiedBadge.vue';
+import { formatTimeAgo } from '@/lib/useDate';
+
+interface User {
+    id: number;
+    name: string;
+    username: string;
+    image_path?: string | null;
+    image_url?: string | null;
+    institution?: string | null;
+    is_verified?: boolean;
+}
+
+interface NodeItem {
+    id: number;
+    subject_id?: number;
+    name: string;
+    slug: string;
+}
+
+interface Subject {
+    id: number;
+    name: string;
+    course: 'hsc' | 'ssc';
+    slug: string;
+}
+
+interface ForumPost {
+    id: number;
+    user_id?: number;
+    subject_id?: number | null;
+    node_id?: number | null;
+    curriculum: 'hsc' | 'ssc';
+    title: string;
+    slug: string;
+    body?: string | null;
+    image_path?: string | null;
+    image_url?: string | null;
+    is_answered?: boolean;
+    vote_score: number;
+    upvotes_count?: number;
+    downvotes_count?: number;
+    answers_count: number;
+    created_at: string;
+    user?: User;
+    subject?: Subject | null;
+    node?: NodeItem | null;
+    user_vote?: number | null;
+}
+
+defineProps<{
+    post: ForumPost;
+}>();
+</script>
+
+<template>
+    <article
+        class="group cursor-pointer rounded-2xl border border-slate-200/80 bg-white p-4 shadow-xs transition duration-150 hover:border-slate-300 hover:shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700"
+        @click="router.visit('/forum/questions/' + post.slug)"
+    >
+        <div class="flex items-start gap-3 sm:gap-4">
+            <!-- Left: Vote Controls (Vertical on all screens) -->
+            <div class="shrink-0 pt-0.5" @click.stop>
+                <ForumVoteButtons
+                    votableType="post"
+                    :votableId="post.id"
+                    :initialUpvotes="post.upvotes_count || 0"
+                    :initialDownvotes="post.downvotes_count || 0"
+                    :initialUserVote="post.user_vote"
+                    direction="vertical"
+                    size="sm"
+                />
+            </div>
+
+            <!-- Right: Content Body -->
+            <div class="min-w-0 flex-1">
+                <!-- Badges Row -->
+                <div
+                    class="mb-1.5 flex flex-wrap items-center gap-1.5 text-[11px]"
+                >
+                    <!-- Curriculum Badge -->
+                    <span
+                        class="rounded-md px-1.5 py-0.5 font-bold uppercase"
+                        :class="[
+                            post.curriculum === 'ssc'
+                                ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-400'
+                                : 'bg-indigo-50 text-indigo-700 dark:bg-indigo-950/60 dark:text-indigo-400',
+                        ]"
+                    >
+                        {{ post.curriculum }}
+                    </span>
+
+                    <!-- Subject Badge -->
+                    <span
+                        v-if="post.subject"
+                        class="rounded-md bg-slate-100 px-1.5 py-0.5 font-medium text-slate-700 dark:bg-gray-800 dark:text-gray-300"
+                    >
+                        {{ post.subject.name }}
+                    </span>
+                    <span
+                        v-else
+                        class="rounded-md bg-slate-100 px-1.5 py-0.5 font-medium text-slate-500 dark:bg-gray-800 dark:text-gray-400"
+                    >
+                        Other / General
+                    </span>
+
+                    <!-- Chapter Badge -->
+                    <span
+                        v-if="post.node"
+                        class="rounded-md bg-slate-100 px-1.5 py-0.5 font-medium text-slate-600 dark:bg-gray-800 dark:text-gray-400"
+                    >
+                        # {{ post.node.name }}
+                    </span>
+
+                    <!-- Answered Badge -->
+                    <span
+                        v-if="post.is_answered"
+                        class="inline-flex items-center gap-1 rounded-md bg-emerald-100/70 px-1.5 py-0.5 font-bold text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300"
+                    >
+                        <CheckCircle2
+                            class="h-3 w-3 text-emerald-600 dark:text-emerald-400"
+                        />
+                        <span>Answered</span>
+                    </span>
+                </div>
+
+                <!-- Question Title -->
+                <h2
+                    class="text-base font-bold text-slate-900 transition sm:text-lg dark:text-gray-100"
+                >
+                    <Link
+                        :href="`/forum/questions/${post.slug}`"
+                        class="hover:text-indigo-600 dark:hover:text-indigo-400"
+                    >
+                        {{ post.title }}
+                    </Link>
+                </h2>
+
+                <!-- Preview snippet -->
+                <p
+                    v-if="post.body"
+                    class="mt-1 line-clamp-2 text-xs leading-relaxed text-slate-600 sm:text-sm dark:text-gray-300"
+                >
+                    {{ post.body }}
+                </p>
+
+                <!-- Attached Image Indicator (if any) -->
+                <div
+                    v-if="post.image_url"
+                    class="mt-2 inline-flex items-center gap-1 text-xs text-slate-400 dark:text-gray-500"
+                >
+                    <ImageIcon class="h-3.5 w-3.5" />
+                    <span>Image attached</span>
+                </div>
+
+                <!-- Footer Author & Stats Metadata -->
+                <div
+                    class="mt-3 flex flex-wrap items-center justify-between gap-2 border-t border-slate-100 pt-2.5 text-xs text-slate-400 dark:border-gray-800/80 dark:text-gray-500"
+                >
+                    <!-- Author info -->
+                    <div class="flex items-center gap-1.5">
+                        <Link
+                            v-if="post.user?.username"
+                            :href="`/u/${post.user.username}`"
+                            @click.stop
+                            class="inline-flex items-center gap-1.5 font-medium text-slate-700 hover:text-indigo-600 hover:underline dark:text-gray-300 dark:hover:text-indigo-400"
+                        >
+                            <div
+                                class="flex h-5 w-5 items-center justify-center overflow-hidden rounded-full bg-slate-200 text-[10px] font-bold text-slate-700 dark:bg-gray-700 dark:text-gray-300"
+                            >
+                                <img
+                                    v-if="post.user.image_url"
+                                    :src="post.user.image_url"
+                                    :alt="post.user.name"
+                                    class="h-full w-full object-cover"
+                                />
+                                <span v-else>{{
+                                    post.user.name.charAt(0)
+                                }}</span>
+                            </div>
+                            <span>{{ post.user.name }}</span>
+                            <VerifiedBadge v-if="post.user.is_verified" />
+                        </Link>
+                        <span
+                            v-else
+                            class="font-medium text-slate-700 dark:text-gray-300"
+                        >
+                            {{ post.user?.name || 'Anonymous' }}
+                        </span>
+
+                        <span
+                            v-if="post.user?.institution"
+                            class="hidden text-slate-400 sm:inline dark:text-gray-500"
+                        >
+                            ({{ post.user.institution }})
+                        </span>
+
+                        <span>•</span>
+                        <span>{{ formatTimeAgo(post.created_at) }}</span>
+                    </div>
+
+                    <!-- Answer count badge -->
+                    <div class="flex items-center gap-3">
+                        <span
+                            class="inline-flex items-center gap-1 font-medium"
+                            :class="
+                                post.answers_count > 0
+                                    ? 'text-indigo-600 dark:text-indigo-400'
+                                    : 'text-slate-400 dark:text-gray-500'
+                            "
+                        >
+                            <MessageSquare class="h-3.5 w-3.5" />
+                            <span
+                                >{{ post.answers_count }}
+                                {{
+                                    post.answers_count === 1
+                                        ? 'answer'
+                                        : 'answers'
+                                }}</span
+                            >
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </article>
+</template>
diff --git a/resources/js/pages/Forum/Index.vue b/resources/js/pages/Forum/Index.vue
index 711a3584..c189770b 100644
--- a/resources/js/pages/Forum/Index.vue
+++ b/resources/js/pages/Forum/Index.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import { Head, Link, router } from '@inertiajs/vue3';
+import { Head, router } from '@inertiajs/vue3';
 import {
     Search,
     X,
     Plus,
-    MessageSquare,
-    CheckCircle2,
-    ImageIcon,
     SlidersHorizontal,
     RotateCcw,
     Check,
@@ -16,12 +13,10 @@ import { computed, ref, watch } from 'vue';
 import AuthModal from '@/components/AuthModal.vue';
 import BaseModal from '@/components/BaseModal.vue';
 import EmptyState from '@/components/EmptyState.vue';
-import ForumVoteButtons from '@/components/forum/ForumVoteButtons.vue';
+import ForumPostCard from '@/components/forum/ForumPostCard.vue';
 import Pagination from '@/components/Pagination.vue';
 import PwaInstallPrompt from '@/components/PwaInstallPrompt.vue';
-import VerifiedBadge from '@/components/VerifiedBadge.vue';
 import { useAuth } from '@/lib/useAuth';
-import { formatTimeAgo } from '@/lib/useDate';
 
 interface User {
     id: number;
@@ -360,8 +355,6 @@ const handleAskQuestion = () => {
         router.visit('/forum/ask');
     }
 };
-
-const timeAgo = formatTimeAgo;
 </script>
 
 <template>
@@ -634,180 +627,11 @@ const timeAgo = formatTimeAgo;
 
         <!-- Post List Feed -->
         <div v-if="posts.data.length > 0" class="space-y-3">
-            <article
+            <ForumPostCard
                 v-for="post in posts.data"
                 :key="post.id"
-                class="group cursor-pointer rounded-2xl border border-slate-200/80 bg-white p-4 shadow-xs transition duration-150 hover:border-slate-300 hover:shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700"
-                @click="router.visit('/forum/questions/' + post.slug)"
-            >
-                <div class="flex items-start gap-3 sm:gap-4">
-                    <!-- Left: Vote Controls (Vertical on all screens) -->
-                    <div class="shrink-0 pt-0.5" @click.stop>
-                        <ForumVoteButtons
-                            votableType="post"
-                            :votableId="post.id"
-                            :initialUpvotes="post.upvotes_count"
-                            :initialDownvotes="post.downvotes_count"
-                            :initialUserVote="post.user_vote"
-                            direction="vertical"
-                            size="sm"
-                        />
-                    </div>
-
-                    <!-- Right: Content Body -->
-                    <div class="min-w-0 flex-1">
-                        <!-- Badges Row -->
-                        <div
-                            class="mb-1.5 flex flex-wrap items-center gap-1.5 text-[11px]"
-                        >
-                            <!-- Curriculum Badge -->
-                            <span
-                                class="rounded-md px-1.5 py-0.5 font-bold uppercase"
-                                :class="[
-                                    post.curriculum === 'ssc'
-                                        ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-400'
-                                        : 'bg-indigo-50 text-indigo-700 dark:bg-indigo-950/60 dark:text-indigo-400',
-                                ]"
-                            >
-                                {{ post.curriculum }}
-                            </span>
-
-                            <!-- Subject Badge -->
-                            <span
-                                v-if="post.subject"
-                                class="rounded-md bg-slate-100 px-1.5 py-0.5 font-medium text-slate-700 dark:bg-gray-800 dark:text-gray-300"
-                            >
-                                {{ post.subject.name }}
-                            </span>
-                            <span
-                                v-else
-                                class="rounded-md bg-slate-100 px-1.5 py-0.5 font-medium text-slate-500 dark:bg-gray-800 dark:text-gray-400"
-                            >
-                                Other / General
-                            </span>
-
-                            <!-- Chapter Badge -->
-                            <span
-                                v-if="post.node"
-                                class="rounded-md bg-slate-100 px-1.5 py-0.5 font-medium text-slate-600 dark:bg-gray-800 dark:text-gray-400"
-                            >
-                                # {{ post.node.name }}
-                            </span>
-
-                            <!-- Answered Badge -->
-                            <span
-                                v-if="post.is_answered"
-                                class="inline-flex items-center gap-1 rounded-md bg-emerald-100/70 px-1.5 py-0.5 font-bold text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300"
-                            >
-                                <CheckCircle2
-                                    class="h-3 w-3 text-emerald-600 dark:text-emerald-400"
-                                />
-                                <span>Answered</span>
-                            </span>
-                        </div>
-
-                        <!-- Question Title -->
-                        <h2
-                            class="text-base font-bold text-slate-900 transition sm:text-lg dark:text-gray-100"
-                        >
-                            <Link
-                                :href="`/forum/questions/${post.slug}`"
-                                class="hover:text-indigo-600 dark:hover:text-indigo-400"
-                            >
-                                {{ post.title }}
-                            </Link>
-                        </h2>
-
-                        <!-- Preview snippet -->
-                        <p
-                            v-if="post.body"
-                            class="mt-1 line-clamp-2 text-xs leading-relaxed text-slate-600 sm:text-sm dark:text-gray-300"
-                        >
-                            {{ post.body }}
-                        </p>
-
-                        <!-- Attached Image Indicator (if any) -->
-                        <div
-                            v-if="post.image_url"
-                            class="mt-2 inline-flex items-center gap-1 text-xs text-slate-400 dark:text-gray-500"
-                        >
-                            <ImageIcon class="h-3.5 w-3.5" />
-                            <span>Image attached</span>
-                        </div>
-
-                        <!-- Footer Author & Stats Metadata -->
-                        <div
-                            class="mt-3 flex flex-wrap items-center justify-between gap-2 border-t border-slate-100 pt-2.5 text-xs text-slate-400 dark:border-gray-800/80 dark:text-gray-500"
-                        >
-                            <!-- Author info -->
-                            <div class="flex items-center gap-1.5">
-                                <Link
-                                    v-if="post.user?.username"
-                                    :href="`/u/${post.user.username}`"
-                                    @click.stop
-                                    class="inline-flex items-center gap-1.5 font-medium text-slate-700 hover:text-indigo-600 hover:underline dark:text-gray-300 dark:hover:text-indigo-400"
-                                >
-                                    <div
-                                        class="flex h-5 w-5 items-center justify-center overflow-hidden rounded-full bg-slate-200 text-[10px] font-bold text-slate-700 dark:bg-gray-700 dark:text-gray-300"
-                                    >
-                                        <img
-                                            v-if="post.user.image_url"
-                                            :src="post.user.image_url"
-                                            :alt="post.user.name"
-                                            class="h-full w-full object-cover"
-                                        />
-                                        <span v-else>{{
-                                            post.user.name.charAt(0)
-                                        }}</span>
-                                    </div>
-                                    <span>{{ post.user.name }}</span>
-                                    <VerifiedBadge
-                                        v-if="post.user.is_verified"
-                                    />
-                                </Link>
-                                <span
-                                    v-else
-                                    class="font-medium text-slate-700 dark:text-gray-300"
-                                >
-                                    {{ post.user?.name || 'Anonymous' }}
-                                </span>
-
-                                <span
-                                    v-if="post.user?.institution"
-                                    class="hidden text-slate-400 sm:inline dark:text-gray-500"
-                                >
-                                    ({{ post.user.institution }})
-                                </span>
-
-                                <span>•</span>
-                                <span>{{ timeAgo(post.created_at) }}</span>
-                            </div>
-
-                            <!-- Answer count badge -->
-                            <div class="flex items-center gap-3">
-                                <span
-                                    class="inline-flex items-center gap-1 font-medium"
-                                    :class="
-                                        post.answers_count > 0
-                                            ? 'text-indigo-600 dark:text-indigo-400'
-                                            : 'text-slate-400 dark:text-gray-500'
-                                    "
-                                >
-                                    <MessageSquare class="h-3.5 w-3.5" />
-                                    <span
-                                        >{{ post.answers_count }}
-                                        {{
-                                            post.answers_count === 1
-                                                ? 'answer'
-                                                : 'answers'
-                                        }}</span
-                                    >
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </article>
+                :post="post"
+            />
         </div>
 
         <!-- Empty State -->
diff --git a/resources/js/pages/Home.vue b/resources/js/pages/Home.vue
index b7c89410..6416f7e3 100644
--- a/resources/js/pages/Home.vue
+++ b/resources/js/pages/Home.vue
@@ -5,6 +5,7 @@ import { computed } from 'vue';
 import BlogCard from '@/components/BlogCard.vue';
 import CourseSwitcher from '@/components/CourseSwitcher.vue';
 import EmptyState from '@/components/EmptyState.vue';
+import ForumPostCard from '@/components/forum/ForumPostCard.vue';
 import HomeHeader from '@/components/HomeHeader.vue';
 import NoticeDialog from '@/components/NoticeDialog.vue';
 import PwaInstallPrompt from '@/components/PwaInstallPrompt.vue';
@@ -16,6 +17,7 @@ const props = defineProps({
     subjects: Array,
     notice: Object,
     featured_blogs: Array,
+    trending_posts: Array,
 });
 
 const subjects = props.subjects as Array<{
@@ -93,6 +95,59 @@ const filteredSubjects = computed(() => {
             </button>
         </EmptyState>
 
+        <div
+            v-if="trending_posts?.length"
+            class="mt-10 border-t border-slate-100 pt-8 sm:mt-12 sm:pt-10 dark:border-gray-800"
+        >
+            <div class="mb-6 flex items-center justify-between">
+                <div>
+                    <h2
+                        class="text-2xl font-bold tracking-tight text-slate-900 dark:text-gray-100"
+                    >
+                        Trending Discussions
+                    </h2>
+                    <p class="text-sm text-slate-500 dark:text-gray-400">
+                        ফোরামের সাম্প্রতিক প্রশ্ন ও উত্তরগুলো দেখুন
+                    </p>
+                </div>
+                <!-- Desktop Link -->
+                <Link
+                    href="/forum"
+                    class="group hidden items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-700 sm:inline-flex dark:text-indigo-400 dark:hover:text-indigo-300"
+                >
+                    <span>Visit Forum</span>
+                    <span
+                        class="transition-transform duration-200 group-hover:translate-x-1"
+                    >
+                        →
+                    </span>
+                </Link>
+            </div>
+
+            <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
+                <ForumPostCard
+                    v-for="post in trending_posts"
+                    :key="post.id"
+                    :post="post"
+                />
+            </div>
+
+            <!-- Mobile Bottom Link -->
+            <div class="mt-4 text-center sm:hidden">
+                <Link
+                    href="/forum"
+                    class="group inline-flex items-center gap-1.5 py-1 text-xs font-bold text-indigo-600 transition hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300"
+                >
+                    <span>Visit Forum</span>
+                    <span
+                        class="transition-transform duration-200 group-hover:translate-x-1"
+                    >
+                        →
+                    </span>
+                </Link>
+            </div>
+        </div>
+
         <div
             v-if="featured_blogs?.length"
             class="mt-10 border-t border-slate-100 pt-8 sm:mt-12 sm:pt-10 dark:border-gray-800"