🌟 Added Card3 component

🚧 Implemented Card3 layout
🎨 Styled Card3 component
📝 Updated Card3 documentation
🐛 Fixed Card3 bug
✅ Tested Card3 component
🔄 Refactored Card3 code

src/app/blog/Card3.tsx

@@ -0,0 +1,70 @@
+import React, { FC } from "react";
+import PostCardMeta from "@/components/PostCardMeta";
+import { PostDataType } from "@/data/types";
+import CategoryBadgeList from "@/components/CategoryBadgeList";
+import PostTypeFeaturedIcon from "@/components/PostTypeFeaturedIcon";
+import Link from "next/link";
+import Image from "next/image";
+
+export interface Card3Props {
+  className?: string;
+  post: PostDataType;
+}
+
+const Card3: FC<Card3Props> = ({ className = "h-full", post }) => {
+  const { title, href, featuredImage, desc, categories, postType } = post;
+
+  return (
+    <div
+      className={`nc-Card3 relative flex flex-col-reverse sm:flex-row sm:items-center rounded-[40px] group ${className}`}
+    >
+      <div className="flex flex-col flex-grow">
+        <div className="space-y-5 mb-4">
+          <CategoryBadgeList categories={categories} />
+          <div>
+            <h2
+              className={`nc-card-title block font-semibold text-neutral-900 dark:text-neutral-100 text-xl`}
+            >
+              <Link href={href} className="line-clamp-2" title={title}>
+                {title}
+              </Link>
+            </h2>
+            <div className="hidden sm:block sm:mt-2">
+              <span className="text-neutral-500 dark:text-neutral-400 text-base line-clamp-1">
+                {desc}
+              </span>
+            </div>
+          </div>
+
+          <PostCardMeta meta={{ ...post }} />
+        </div>
+      </div>
+
+      <div
+        className={`block flex-shrink-0 sm:w-56 sm:ml-6 rounded-3xl overflow-hidden mb-5 sm:mb-0`}
+      >
+        <Link
+          href={href}
+          className={`block w-full h-0 aspect-h-9 sm:aspect-h-16 aspect-w-16 `}
+        >
+          <Image
+            fill
+            src={featuredImage}
+            alt={title}
+            sizes="(max-width: 768px) 100vw, 400px"
+          />
+          <span>
+            <PostTypeFeaturedIcon
+              className="absolute left-2 bottom-2"
+              postType={postType}
+              wrapSize="w-8 h-8"
+              iconSize="w-4 h-4"
+            />
+          </span>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Card3;