From f760a1452b9dc6b316185b932c42ba0b441ec7bf Mon Sep 17 00:00:00 2001
From: Kuldeep Singh <Kuldeeprathore1428@gmail.com>
Date: Sat, 13 Dec 2025 15:59:39 +0530
Subject: [PATCH] Refactor BlogCard component for improved styling

Gradient text + dark mode = dangerous

Never rely on text-transparent in dark mode

Always override hover styles for dark mode explicitly
---
 components/blog-card.tsx | 42 ++++++++++++++++++++++++++--------------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/components/blog-card.tsx b/components/blog-card.tsx
index 47d6438..5a439e4 100644
--- a/components/blog-card.tsx
+++ b/components/blog-card.tsx
@@ -19,40 +19,52 @@ 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 border-border bg-card shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl">
 
         {post.featured && (
           <div className="absolute top-3 right-3 z-20">
-            <Star className="w-5 h-5 fill-[#FFBF00] text-[#FFBF00] drop-shadow-sm" />
+            <Star className="h-5 w-5 fill-[#FFBF00] text-[#FFBF00] drop-shadow-sm" />
           </div>
         )}
 
         <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 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 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">
+        <div className="flex flex-grow flex-col p-6">
+          {/* ✅ FIXED TITLE */}
+          <h2
+            className="
+              mb-3 line-clamp-2 text-xl font-bold
+              text-foreground
+              transition-all duration-300
+              group-hover:bg-gradient-to-r
+              group-hover:from-[#228B22]
+              group-hover:to-[#91A511]
+              group-hover:bg-clip-text
+              group-hover:text-transparent
+              dark:group-hover:bg-none
+              dark:group-hover:text-foreground
+            "
+          >
             {post.title}
           </h2>
 
-          <p className="text-gray-600 mb-4 line-clamp-3">{post.excerpt}</p>
+          <p className="mb-4 line-clamp-3 text-muted-foreground">
+            {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" />
+          <div className="mt-auto flex items-center justify-between text-sm text-muted-foreground">
+            <div className="flex items-center gap-1 transition-colors group-hover:text-[#228B22]">
+              <User className="h-4 w-4" />
               <span>{post.author}</span>
             </div>
           </div>