feature: intergrated directus for posts

components/BlogPostCard.tsx

@@ -20,22 +20,25 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({
   author,
   date,
 }) => {
-  console.log("BlogPostCard Props:", { imageUrl });
-
   return (
     <Link href={`/tech-talk/${slug}`} passHref>
       <div className="group bg-card border border-border rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 ease-in-out flex flex-col h-full transform hover:-translate-y-1">
         {/* Image Container */}
-        <div className="relative w-full h-48 overflow-hidden">
-          <Image
-            src={imageUrl}
-            alt={title}
-            layout="fill"
-            objectFit="cover"
-            className="transition-transform duration-500 group-hover:scale-105"
-          />
-          {/* Optional: Subtle overlay on hover */}
-          <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+        <div className="relative w-full aspect-video overflow-hidden">
+          {imageUrl ? (
+            <Image
+              src={imageUrl}
+              alt={title}
+              fill // Use fill instead of layout
+              className="object-cover transition-transform duration-500 group-hover:scale-105" // Use object-cover class
+              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+            />
+          ) : (
+            // Optional: Placeholder if no image
+            <div className="w-full h-full bg-muted flex items-center justify-center">
+              <span className="text-muted-foreground text-sm">No Image</span>
+            </div>
+          )}
         </div>
 
         {/* Content Area */}