feat: play page && other refactor

src/components/CollectionCard.tsx

@@ -0,0 +1,40 @@
+import { LucideIcon } from 'lucide-react';
+import Link from 'next/link';
+
+interface CollectionCardProps {
+  title: string;
+  icon: LucideIcon;
+  href: string;
+}
+
+export default function CollectionCard({
+  title,
+  icon: Icon,
+  href,
+}: CollectionCardProps) {
+  return (
+    <Link href={href} className='group block'>
+      <div className='relative w-full'>
+        {/* 长方形容器 - 调整宽高比和背景色 */}
+        <div className='relative aspect-[5/3] w-full overflow-hidden rounded-xl bg-gray-200 border border-gray-300/50'>
+          {/* 图标容器 */}
+          <div className='absolute inset-0 flex items-center justify-center'>
+            <Icon className='h-14 w-14 text-gray-600' />
+          </div>
+
+          {/* Hover 蒙版效果 - 参考 DemoCard */}
+          <div className='absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200'></div>
+        </div>
+
+        {/* 标题 - absolute 定位，类似 DemoCard */}
+        <div className='absolute top-[calc(100%+0.5rem)] left-0 right-0'>
+          <div className='flex flex-col items-center justify-center'>
+            <h3 className='text-sm font-medium text-gray-800 truncate w-full text-center'>
+              {title}
+            </h3>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}