Merge pull request #9 from 0xunLin/feature/my-contribution

Card ui changes

Author: Zahnentferner

components/blog-card.tsx

@@ -16,23 +16,19 @@ interface BlogCardProps {
   post: BlogPost
 }
 
-// Conditionally set BASE_PATH depending on environment
 const BASE_PATH = process.env.NODE_ENV === "production" ? "/StableViewpoints" : ""
 
 export default function BlogCard({ post }: BlogCardProps) {
-
-
   return (
-    <Link href={`/a/${post.slug}`} className="group">
-      <article className="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">
-        {/* Featured Star - Discrete yellow star in top right */}
+    <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">
+
         {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>
         )}
 
-        {/* Image - Golden ratio aspect ratio (φ:1 ≈ 1.618:1) */}
         <div className="relative w-full">
           <Image
             src={
@@ -41,24 +37,22 @@ export default function BlogCard({ post }: BlogCardProps) {
                 : post.image
             }
             alt={post.title}
-            width={1200}       // pick a large enough base width
-            height={630}       // aspect ratio will be preserved, height auto-scales
+            width={1200}
+            height={630}
             className="w-full h-auto 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>
 
-        {/* Content */}
-        <div className="p-6">
+        <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">
             {post.title}
           </h2>
 
           <p className="text-gray-600 mb-4 line-clamp-3">{post.excerpt}</p>
 
-          {/* Meta */}
-          <div className="flex items-center justify-between text-sm text-gray-500">
+          <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>