add(public): new funnel article

apps/public/app/(content)/articles/page.tsx

@@ -1,4 +1,5 @@
 import { url } from '@/app/layout.config';
+import { ArticleCard } from '@/components/article-card';
 import { articleSource } from '@/lib/source';
 import type { Metadata } from 'next';
 import Image from 'next/image';
@@ -37,34 +38,15 @@ export default async function Page() {
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
           {articles.map((item) => (
-            <Link
-              href={item.url}
+            <ArticleCard
               key={item.url}
-              className="border rounded-lg overflow-hidden bg-background-light col hover:scale-105 transition-all duration-300 hover:shadow-lg hover:shadow-background-dark"
-            >
-              <Image
-                src={item.data.cover}
-                alt={item.data.title}
-                width={323}
-                height={181}
-                className="w-full"
-              />
-              <span className="p-4 col flex-1">
-                {item.data.tag && (
-                  <span className="font-mono text-xs mb-2">
-                    {item.data.tag}
-                  </span>
-                )}
-                <span className="flex-1 mb-6">
-                  <h2 className="text-xl font-semibold">{item.data.title}</h2>
-                </span>
-                <p className="text-sm text-muted-foreground">
-                  {[item.data.team, item.data.date.toLocaleDateString()]
-                    .filter(Boolean)
-                    .join(' · ')}
-                </p>
-              </span>
-            </Link>
+              url={item.url}
+              title={item.data.title}
+              tag={item.data.tag}
+              cover={item.data.cover}
+              team={item.data.team}
+              date={item.data.date}
+            />
           ))}
         </div>
       </div>