feat: 优化项目网站 UI/UX 并新增项目详情组件

- 重构首页和项目列表页布局,优化视觉层次
- 新增 ProjectDetail、ProjectSidebar、RelatedProjects 组件
- 改进项目卡片样式,增加悬停效果
- 优化标签云和搜索栏交互体验
- 更新全局样式和 Tailwind 配置

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/project/ProjectSidebar.tsx

@@ -0,0 +1,156 @@
+import Link from 'next/link'
+
+interface ProjectSidebarProps {
+  project: {
+    id: string
+    name: string
+    nameEn?: string | null
+    slug: string
+    links: Array<{
+      id: string
+      type: string
+      url: string
+      title?: string | null
+    }>
+  }
+  locale: string
+}
+
+// Helper function to get icon and label for link type
+function getLinkInfo(type: string): { icon: string; label: string } {
+  switch (type.toUpperCase()) {
+    case 'WEBSITE':
+      return { icon: 'language', label: 'Official Website' }
+    case 'GITHUB':
+      return { icon: 'code', label: 'GitHub Repo' }
+    case 'HUGGINGFACE':
+      return { icon: 'model_training', label: 'Hugging Face' }
+    case 'PAPER':
+      return { icon: 'description', label: 'Paper' }
+    default:
+      return { icon: 'link', label: 'External Link' }
+  }
+}
+
+export function ProjectSidebar({ project, locale }: ProjectSidebarProps) {
+  const displayName = locale === 'en' && project.nameEn ? project.nameEn : project.name
+
+  return (
+    <aside className="space-y-8">
+      {/* Project Links Card */}
+      {project.links.length > 0 && (
+        <div className="bg-white dark:bg-surface-dark border-2 border-black dark:border-gray-600 p-6 shadow-brutal dark:shadow-brutal-dark">
+          <h3 className="font-display font-bold text-lg mb-6 uppercase border-b-2 border-primary pb-2 inline-block">
+            Project Links
+          </h3>
+          <div className="space-y-4">
+            {project.links.map((link) => {
+              const { icon, label } = getLinkInfo(link.type)
+              return (
+                <a
+                  key={link.id}
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center justify-between group p-3 border border-gray-200 dark:border-gray-700 hover:border-black dark:hover:border-white transition-colors bg-gray-50 dark:bg-gray-800"
+                >
+                  <div className="flex items-center gap-3">
+                    <span className="material-icons">{icon}</span>
+                    <span className="font-bold text-sm">{link.title || label}</span>
+                  </div>
+                  <span className="material-icons text-sm group-hover:translate-x-1 transition-transform">
+                    arrow_forward
+                  </span>
+                </a>
+              )
+            })}
+          </div>
+
+          {/* Stats Section */}
+          <div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <span className="text-xs text-gray-500 uppercase font-mono block mb-1">License</span>
+                <span className="font-bold text-sm">MIT</span>
+              </div>
+              <div>
+                <span className="text-xs text-gray-500 uppercase font-mono block mb-1">Pricing</span>
+                <span className="font-bold text-sm">Free</span>
+              </div>
+              <div>
+                <span className="text-xs text-gray-500 uppercase font-mono block mb-1">Status</span>
+                <span className="font-bold text-sm">Active</span>
+              </div>
+              <div>
+                <span className="text-xs text-gray-500 uppercase font-mono block mb-1">Type</span>
+                <span className="font-bold text-sm">Open Source</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* CTA Card */}
+      <div className="bg-primary border-2 border-black p-6 relative overflow-hidden shadow-brutal dark:shadow-none group cursor-pointer hover:bg-yellow-400 transition-colors">
+        <div className="absolute top-0 right-0 w-20 h-20 bg-white opacity-20 transform rotate-45 translate-x-10 -translate-y-10"></div>
+        <div className="absolute bottom-0 left-0 w-16 h-16 bg-black opacity-10 rounded-full transform -translate-x-8 translate-y-8"></div>
+        <div className="relative z-10 text-center">
+          <div className="w-12 h-12 bg-white rounded-full border-2 border-black flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
+            <span className="material-icons text-2xl">rocket_launch</span>
+          </div>
+          <h3 className="font-display font-bold text-xl mb-2">Build Your Own Agent?</h3>
+          <p className="text-sm font-medium mb-6">Start using our API to build custom agents in minutes.</p>
+          <Link
+            href={`/${locale}/projects`}
+            className="block w-full bg-black text-white font-display font-bold py-3 text-sm uppercase hover:bg-gray-800 transition-colors shadow-none text-center"
+          >
+            Get Started Now
+          </Link>
+        </div>
+      </div>
+
+      {/* Table of Contents */}
+      {locale === 'en' && (
+        <div className="sticky top-24 bg-background-light dark:bg-background-dark border border-gray-300 dark:border-gray-700 p-6 hidden lg:block">
+          <h3 className="font-display font-bold text-sm uppercase tracking-widest mb-4 text-gray-500 dark:text-gray-400">
+            On this page
+          </h3>
+          <ul className="space-y-3 text-sm border-l-2 border-gray-200 dark:border-gray-700 pl-4">
+            <li>
+              <a
+                href="#overview"
+                className="text-black dark:text-white font-bold border-l-2 border-black dark:border-white -ml-[18px] pl-4 block"
+              >
+                Overview
+              </a>
+            </li>
+            <li>
+              <a
+                href="#features"
+                className="text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors block"
+              >
+                Key Features
+              </a>
+            </li>
+            <li>
+              <a
+                href="#getting-started"
+                className="text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors block"
+              >
+                Getting Started
+              </a>
+            </li>
+            <li>
+              <a
+                href="#use-cases"
+                className="text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors block"
+              >
+                Use Cases
+              </a>
+            </li>
+          </ul>
+        </div>
+      )}
+    </aside>
+  )
+}