From c08eda148640956eb32e45c0a12eb60dea0094e0 Mon Sep 17 00:00:00 2001
From: Kuldeep Singh <Kuldeeprathore1428@gmail.com>
Date: Sat, 13 Dec 2025 18:05:02 +0530
Subject: [PATCH] Refactor BlogCard component for improved styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Your original BlogCard had these issues:

Hover scale & translate on mobile

Causes layout jump / overflow

Title becomes invisible on hover

text-transparent + dark/gradient background

Desktop-only spacing & typography

Too large for small screens

Hover effects applied on mobile

Mobile has no hover → inconsistent behavior
---
 components/blog-card.tsx | 66 ++++++++++++++++++++++++++++------------
 1 file changed, 47 insertions(+), 19 deletions(-)

diff --git a/components/blog-card.tsx b/components/blog-card.tsx
index 47d6438..aed4eba 100644
--- a/components/blog-card.tsx
+++ b/components/blog-card.tsx
@@ -19,42 +19,70 @@ interface BlogCardProps {
 export default function BlogCard({ post }: BlogCardProps) {
   return (
     <Link href={`/a/${post.slug}`} className="group h-full">
-      <article className="flex flex-col h-full bg-white shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 border border-gradient-to-r from-[#228B22]/10 to-[#FFBF00]/10 relative rounded-lg">
-
+      <article
+        className="
+          relative
+          flex
+          h-full
+          flex-col
+          overflow-hidden
+          rounded-lg
+          border
+          bg-white
+          shadow-md
+          transition
+          md:hover:-translate-y-1
+          md:hover:shadow-xl
+        "
+      >
         {post.featured && (
-          <div className="absolute top-3 right-3 z-20">
-            <Star className="w-5 h-5 fill-[#FFBF00] text-[#FFBF00] drop-shadow-sm" />
+          <div className="absolute right-3 top-3 z-20">
+            <Star className="h-5 w-5 fill-[#FFBF00] text-[#FFBF00]" />
           </div>
         )}
 
+        {/* Image */}
         <div className="relative w-full">
           <Image
-            src={
-              post.image.startsWith("/")
-                ? `${post.image}`
-                : post.image
-            }
+            src={post.image.startsWith("/") ? post.image : post.image}
             alt={post.title}
             width={1200}
             height={630}
-            className="w-full h-auto object-contain transition-transform duration-500 group-hover:scale-105"
+            className="h-auto w-full object-contain transition-transform duration-500 md:group-hover:scale-105"
           />
           <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent" />
-          <div className="absolute inset-0 bg-gradient-to-br from-[#228B22]/10 via-transparent to-[#FFBF00]/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+          <div className="absolute inset-0 bg-gradient-to-br from-[#228B22]/10 via-transparent to-[#FFBF00]/10 opacity-0 transition-opacity duration-300 md:group-hover:opacity-100" />
         </div>
 
-        <div className="flex flex-col flex-grow p-6">
-          <h2 className="text-xl font-bold text-gray-900 mb-3 line-clamp-2 group-hover:bg-gradient-to-r group-hover:from-[#228B22] group-hover:to-[#91A511] group-hover:bg-clip-text group-hover:text-transparent transition-all duration-300">
+        {/* Content */}
+        <div className="flex flex-grow flex-col p-4 sm:p-6">
+          <h2
+            className="
+              mb-3
+              line-clamp-2
+              text-lg
+              font-bold
+              text-gray-900
+              transition-all
+              duration-300
+              sm:text-xl
+              md:group-hover:bg-gradient-to-r
+              md:group-hover:from-[#228B22]
+              md:group-hover:to-[#91A511]
+              md:group-hover:bg-clip-text
+              md:group-hover:text-transparent
+            "
+          >
             {post.title}
           </h2>
 
-          <p className="text-gray-600 mb-4 line-clamp-3">{post.excerpt}</p>
+          <p className="mb-4 line-clamp-3 text-sm sm:text-base text-gray-600">
+            {post.excerpt}
+          </p>
 
-          <div className="mt-auto flex items-center justify-between text-sm text-gray-500">
-            <div className="flex items-center gap-1 group-hover:text-[#228B22] transition-colors">
-              <User className="w-4 h-4" />
-              <span>{post.author}</span>
-            </div>
+          <div className="mt-auto flex items-center gap-1 text-sm text-gray-500">
+            <User className="h-4 w-4" />
+            <span>{post.author}</span>
           </div>
         </div>
       </article>