Initial commit

src/components/ArticleCard.tsx

@@ -0,0 +1,27 @@
+import { ArrowLeft, Clock3 } from "lucide-react";
+import { Link } from "react-router";
+import type { Article } from "@/api/mockData";
+import SafeImage from "./SafeImage";
+
+export default function ArticleCard({ article, featured = false }: { article: Article; featured?: boolean }) {
+  return (
+    <article className={`group flex h-full overflow-hidden rounded-[24px] border border-slate-200 bg-white transition duration-300 hover:-translate-y-1 hover:shadow-[0_18px_50px_rgba(42,36,91,.10)] ${featured ? "sm:grid sm:grid-cols-[1.05fr_.95fr]" : "flex-col"}`}>
+      <Link to={`/magazine/articles/${article.slug}`} className={`relative block shrink-0 overflow-hidden bg-[#eeecff] ${featured ? "min-h-[280px]" : "aspect-[16/10] w-full"}`}>
+        <SafeImage src={article.image} alt={article.imageAlt} className="h-full w-full object-cover transition duration-500 group-hover:scale-105" />
+        <span className={`absolute right-4 top-4 rounded-full px-3 py-1.5 text-xs font-black ${article.color}`}>{article.category}</span>
+      </Link>
+      <div className={`flex min-w-0 flex-1 flex-col ${featured ? "justify-center p-6 sm:p-8" : "p-5"}`}>
+        <div className="mb-3 flex flex-wrap items-center gap-2.5 text-xs font-bold text-slate-400">
+          <span>{article.grade}</span><span className="size-1 rounded-full bg-slate-300" /><span className="inline-flex items-center gap-1"><Clock3 size={13} /> {article.readTime}</span>
+        </div>
+        <h3 className={`${featured ? "text-2xl" : "line-clamp-2 min-h-[3.7rem] text-lg"} font-black leading-[1.65] text-slate-900 transition group-hover:text-[#5146c7]`}>
+          <Link to={`/magazine/articles/${article.slug}`}>{article.title}</Link>
+        </h3>
+        <p className={`mt-2 line-clamp-2 text-sm leading-7 text-slate-500 ${featured ? "" : "min-h-14"}`}>{article.excerpt}</p>
+        <Link to={`/magazine/articles/${article.slug}`} className="mt-auto inline-flex items-center gap-1.5 pt-5 text-sm font-black text-[#5b50d6]">
+          ادامه مطلب <ArrowLeft size={16} className="transition group-hover:-translate-x-1" />
+        </Link>
+      </div>
+    </article>
+  );
+}