create post completed

components/BlogPostCard.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { FiCalendar, FiUser, FiArrowRight } from "react-icons/fi";
+
+type BlogPostCardProps = {
+  slug: string;
+  title: string;
+  excerpt: string;
+  imageUrl: string;
+  author: string;
+  date: string;
+};
+
+const BlogPostCard: React.FC<BlogPostCardProps> = ({
+  slug,
+  title,
+  excerpt,
+  imageUrl,
+  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>
+
+        {/* Content Area */}
+        <div className="p-5 flex flex-col flex-grow">
+          <h3 className="text-xl font-semibold mb-2 text-foreground group-hover:text-primary transition-colors duration-200 line-clamp-2">
+            {title}
+          </h3>
+          <p className="text-muted-foreground text-sm mb-4 flex-grow line-clamp-3">
+            {excerpt}
+          </p>
+
+          {/* Meta Info */}
+          <div className="text-xs text-muted-foreground/80 flex flex-wrap items-center gap-x-4 gap-y-1 mb-4">
+            <span className="flex items-center">
+              <FiUser className="w-3 h-3 mr-1.5" />
+              {author}
+            </span>
+            <span className="flex items-center">
+              <FiCalendar className="w-3 h-3 mr-1.5" />
+              {date}
+            </span>
+          </div>
+
+          {/* Read More Link */}
+          <div className="mt-auto pt-2 border-t border-border/50">
+            <span className="inline-flex items-center text-sm font-medium text-primary group-hover:underline">
+              Read More
+              <FiArrowRight className="ml-1.5 w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
+            </span>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default BlogPostCard;