From ade2d07bd84717c12c05c0b45f97e1a8be72a862 Mon Sep 17 00:00:00 2001
From: sameer dhir <93440679+sameezy667@users.noreply.github.com>
Date: Sun, 14 Dec 2025 00:17:38 +0530
Subject: [PATCH] Fix: Article title disappears on hover in dark mode

- Added dark:text-white to article title for visibility in dark mode
- Added dark mode gradient colors (dark:group-hover:from-[#32CD32] dark:group-hover:to-[#FFD700]) for hover effect
- Added dark:bg-gray-800 to article card background
- Added dark mode text colors to excerpt (dark:text-gray-300) and author info (dark:text-gray-400)
- Added dark:group-hover:text-[#32CD32] for author name hover effect in dark mode

Fixes the issue where hovering over article cards in dark mode made the title invisible due to the gradient text effect lacking dark mode overrides.
---
 components/blog-card.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/blog-card.tsx b/components/blog-card.tsx
index 47d6438..a7dfb0d 100644
--- a/components/blog-card.tsx
+++ b/components/blog-card.tsx
@@ -19,7 +19,7 @@ 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="flex flex-col h-full bg-white dark:bg-gray-800 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">
 
         {post.featured && (
           <div className="absolute top-3 right-3 z-20">
@@ -44,14 +44,14 @@ export default function BlogCard({ post }: BlogCardProps) {
         </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">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-3 line-clamp-2 group-hover:bg-gradient-to-r group-hover:from-[#228B22] group-hover:to-[#91A511] dark:group-hover:from-[#32CD32] dark:group-hover:to-[#FFD700] group-hover:bg-clip-text group-hover:text-transparent transition-all duration-300">
             {post.title}
           </h2>
 
-          <p className="text-gray-600 mb-4 line-clamp-3">{post.excerpt}</p>
+          <p className="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">{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">
+          <div className="mt-auto flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
+            <div className="flex items-center gap-1 group-hover:text-[#228B22] dark:group-hover:text-[#32CD32] transition-colors">
               <User className="w-4 h-4" />
               <span>{post.author}</span>
             </div>