From a78e29608299acd92df289decf1445c83eaf8e41 Mon Sep 17 00:00:00 2001
From: v0 <v0[bot]@users.noreply.github.com>
Date: Tue, 31 Mar 2026 05:10:28 +0000
Subject: [PATCH] refactor: optimize various features with internationalization
 and UX improvements

Improved community stats card, leaderboard, playground preview, SEO style guides, recipe system, and guides page with internationalization, UX enhancements, and structural fixes.

Co-authored-by: Anx <130662349+AnxForever@users.noreply.github.com>
---
 app/community/_content.tsx                    |  49 +++--
 app/guides/page.tsx                           | 117 +++++++-----
 app/recipes/page.tsx                          |  31 +++-
 components/community/community-stats-card.tsx | 109 ++++++++----
 components/playground/playground-preview.tsx  |  34 ++--
 components/recipes/recipe-card.tsx            | 168 +++++++++++-------
 lib/community/leaderboard.ts                  |  85 +++++----
 lib/seo/style-guides.ts                       | 164 +++++++++++++++++
 lib/styles/recipes.ts                         |  33 ++++
 9 files changed, 573 insertions(+), 217 deletions(-)

diff --git a/app/community/_content.tsx b/app/community/_content.tsx
index c328a225..81640056 100644
--- a/app/community/_content.tsx
+++ b/app/community/_content.tsx
@@ -3,14 +3,22 @@
 import Image from "next/image";
 import { useEffect, useMemo, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
-import { Loader2, LogIn, RefreshCw, Send, TrendingUp } from "lucide-react";
+import { Loader2, LogIn, RefreshCw, Send, TrendingUp, Clock, Heart, Zap } from "lucide-react";
 import { LocalizedLink } from "@/components/i18n/localized-link";
 import { useCommunityFeed } from "@/lib/swr";
 import { useUser } from "@/lib/auth/use-user";
 import { useI18n } from "@/lib/i18n/context";
-import { SORT_OPTIONS, type SortMethod } from "@/lib/community/leaderboard";
+import { SORT_OPTIONS_DEF, type SortMethod, type SortOptionDef } from "@/lib/community/leaderboard";
 import { CommunityStatsCard } from "@/components/community/community-stats-card";
 
+// Icon mapping for sort options
+const SORT_ICONS = {
+  TrendingUp: TrendingUp,
+  Clock: Clock,
+  Heart: Heart,
+  Zap: Zap,
+} as const;
+
 const PAGE_SIZE = 12;
 
 function formatDate(iso: string, locale: "zh" | "en"): string {
@@ -163,21 +171,27 @@ export function CommunityContent({
 
         {/* Sort Controls */}
         <div className="mb-6 flex flex-wrap gap-2">
-          {SORT_OPTIONS.map((option) => (
-            <button
-              key={option.value}
-              onClick={() => setSortMethod(option.value)}
-              className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm transition-colors ${
-                sortMethod === option.value
-                  ? "bg-foreground text-background"
-                  : "border border-border hover:border-foreground"
-              }`}
-              title={option.description}
-            >
-              {option.icon}
-              {option.label}
-            </button>
-          ))}
+          {SORT_OPTIONS_DEF.map((option) => {
+            const Icon = SORT_ICONS[option.iconName];
+            const label = locale === "zh" ? option.labelZh : option.labelEn;
+            const description = locale === "zh" ? option.descriptionZh : option.descriptionEn;
+            
+            return (
+              <button
+                key={option.value}
+                onClick={() => setSortMethod(option.value)}
+                className={`flex items-center gap-2 px-3 py-1.5 text-sm transition-colors ${
+                  sortMethod === option.value
+                    ? "bg-foreground text-background"
+                    : "border border-border hover:border-foreground"
+                }`}
+                title={description}
+              >
+                <Icon className="w-4 h-4" />
+                {label}
+              </button>
+            );
+          })}
         </div>
 
         {error && (
@@ -358,6 +372,7 @@ export function CommunityContent({
             </div>
           </div>
         )}
+        </div>
       </div>
     </section>
   );
diff --git a/app/guides/page.tsx b/app/guides/page.tsx
index 93189ebc..114aaef6 100644
--- a/app/guides/page.tsx
+++ b/app/guides/page.tsx
@@ -3,7 +3,17 @@ import { Header } from "@/components/layout/header";
 import { Footer } from "@/components/layout/footer";
 import { LocalizedLink } from "@/components/i18n/localized-link";
 import { styleGuides } from "@/lib/seo/style-guides";
-import { BookOpen, ArrowRight } from "lucide-react";
+import { BookOpen, ArrowRight, Sparkles, History } from "lucide-react";
+
+// Color scheme for each guide
+const guideColors: Record<string, string> = {
+  neumorphism: "from-rose-500/20 to-orange-500/20",
+  "minimalist-flat": "from-zinc-400/20 to-slate-500/20",
+  glassmorphism: "from-blue-500/20 to-purple-500/20",
+  "neo-brutalism": "from-yellow-400/20 to-pink-500/20",
+  editorial: "from-stone-400/20 to-amber-500/20",
+  "cyber-wafuu": "from-red-500/20 to-cyan-500/20",
+};
 
 export const metadata: Metadata = {
   title: "Design Style Guides - StyleKit",
@@ -55,54 +65,71 @@ export default function GuidesPage() {
         <section className="border-b border-border">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-12 py-12 md:py-16">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              {guides.map((guide) => (
-                <LocalizedLink
-                  key={guide.slug}
-                  href={`/guides/${guide.slug}`}
-                  className="group border border-border rounded-lg p-6 hover:border-foreground hover:shadow-sm hover:bg-muted/2 transition-all"
-                >
-                  <div className="flex items-start justify-between mb-3">
-                    <div>
-                      <h3 className="text-xl font-bold mb-1 group-hover:underline">
-                        {guide.nameEn}
-                      </h3>
-                      {guide.name !== guide.nameEn && (
-                        <p className="text-sm text-muted">{guide.name}</p>
-                      )}
+              {guides.map((guide) => {
+                const colorScheme = guideColors[guide.slug] || "from-gray-400/20 to-gray-500/20";
+                
+                return (
+                  <LocalizedLink
+                    key={guide.slug}
+                    href={`/guides/${guide.slug}`}
+                    className="group relative border border-border rounded-xl overflow-hidden hover:border-foreground hover:shadow-lg transition-all"
+                  >
+                    {/* Gradient header */}
+                    <div className={`h-24 bg-gradient-to-br ${colorScheme} relative`}>
+                      <div className="absolute inset-0 bg-gradient-to-t from-background via-background/50 to-transparent" />
+                      <div className="absolute bottom-3 left-5 right-5 flex items-end justify-between">
+                        <div>
+                          <h3 className="text-xl font-bold mb-0.5 group-hover:text-accent transition-colors">
+                            {guide.nameEn}
+                          </h3>
+                          {guide.name !== guide.nameEn && (
+                            <p className="text-sm text-muted">{guide.name}</p>
+                          )}
+                        </div>
+                        <div className="p-2 bg-background/80 backdrop-blur-sm rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
+                          <ArrowRight className="w-4 h-4" />
+                        </div>
+                      </div>
                     </div>
-                    <ArrowRight className="w-5 h-5 text-muted group-hover:translate-x-1 transition-transform" />
-                  </div>
+                    
+                    <div className="p-5">
+                      <p className="text-sm text-muted leading-relaxed mb-4 line-clamp-2">
+                        {guide.descriptionEn}
+                      </p>
 
-                  <p className="text-sm text-muted leading-relaxed mb-4 line-clamp-2">
-                    {guide.descriptionEn}
-                  </p>
+                      {/* Influenced by tags */}
+                      {guide.influencedBy && guide.influencedBy.length > 0 && (
+                        <div className="flex items-center gap-2 mb-4">
+                          <History className="w-3.5 h-3.5 text-muted shrink-0" />
+                          <div className="flex flex-wrap gap-1.5">
+                            {guide.influencedBy.map((style) => (
+                              <span
+                                key={style}
+                                className="text-[10px] px-2 py-0.5 bg-zinc-100 dark:bg-zinc-800 text-muted rounded-full"
+                              >
+                                {style}
+                              </span>
+                            ))}
+                          </div>
+                        </div>
+                      )}
 
-                  {guide.influencedBy && guide.influencedBy.length > 0 && (
-                    <div className="flex flex-wrap gap-1 mb-3">
-                      {guide.influencedBy.map((style) => (
-                        <span
-                          key={style}
-                          className="text-xs px-2 py-0.5 bg-muted/20 text-muted rounded"
-                        >
-                          {style}
-                        </span>
-                      ))}
+                      <div className="flex items-center justify-between pt-3 border-t border-border/50">
+                        <div className="flex items-center gap-3 text-xs text-muted">
+                          <span className="inline-flex items-center gap-1">
+                            <Sparkles className="w-3 h-3" />
+                            {guide.useCases.length} use case{guide.useCases.length !== 1 ? "s" : ""}
+                          </span>
+                          <span>•</span>
+                          <span>
+                            {guide.references.length} reference{guide.references.length !== 1 ? "s" : ""}
+                          </span>
+                        </div>
+                      </div>
                     </div>
-                  )}
-
-                  <div className="flex items-center gap-2 text-xs text-muted">
-                    <span>
-                      {guide.useCases.length} use case
-                      {guide.useCases.length !== 1 ? "s" : ""}
-                    </span>
-                    <span>•</span>
-                    <span>
-                      {guide.references.length} reference
-                      {guide.references.length !== 1 ? "s" : ""}
-                    </span>
-                  </div>
-                </LocalizedLink>
-              ))}
+                  </LocalizedLink>
+                );
+              })}
             </div>
           </div>
         </section>
diff --git a/app/recipes/page.tsx b/app/recipes/page.tsx
index 7ce98eb0..6d310745 100644
--- a/app/recipes/page.tsx
+++ b/app/recipes/page.tsx
@@ -37,22 +37,35 @@ export default function RecipesPage() {
         </div>
 
         {/* Hero */}
-        <section className="py-12 md:py-20 border-b border-border">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-12">
-            <h1 className="text-4xl md:text-5xl lg:text-6xl font-medium mb-4">
+        <section className="relative py-16 md:py-24 border-b border-border overflow-hidden">
+          {/* Decorative gradient */}
+          <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-transparent to-blue-500/5 pointer-events-none" />
+          
+          <div className="relative max-w-7xl mx-auto px-4 sm:px-6 md:px-12">
+            <div className="inline-flex items-center gap-2 px-3 py-1 mb-6 text-xs font-medium uppercase tracking-wider border border-border rounded-full bg-background/80">
+              <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+              Style + Layout + Animation
+            </div>
+            
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold tracking-tight mb-5">
               Design Recipes
             </h1>
-            <p className="text-xl text-muted max-w-2xl mb-8">
+            <p className="text-lg md:text-xl text-muted max-w-2xl mb-8 leading-relaxed">
               Curated combinations of visual styles, layouts, and animations.
               Each recipe is optimized for a specific use case and includes
               reasoning for why it works.
             </p>
-            <div className="flex items-center gap-4 text-sm text-muted">
-              <span className="px-3 py-1 border border-border">
-                {allRecipes.length} Recipes
+            
+            <div className="flex flex-wrap items-center gap-3 text-sm">
+              <span className="inline-flex items-center gap-2 px-4 py-2 border border-border bg-background/80 rounded-lg">
+                <span className="w-5 h-5 rounded bg-gradient-to-br from-purple-500 to-pink-500" />
+                <span className="font-medium">{allRecipes.length}</span>
+                <span className="text-muted">Recipes</span>
               </span>
-              <span className="px-3 py-1 border border-border">
-                {allRecipes.filter((r) => r.featured).length} Featured
+              <span className="inline-flex items-center gap-2 px-4 py-2 border border-amber-500/30 bg-amber-500/5 rounded-lg">
+                <span className="w-5 h-5 rounded bg-gradient-to-br from-amber-400 to-orange-500" />
+                <span className="font-medium">{allRecipes.filter((r) => r.featured).length}</span>
+                <span className="text-muted">Featured</span>
               </span>
             </div>
           </div>
diff --git a/components/community/community-stats-card.tsx b/components/community/community-stats-card.tsx
index 891b99cd..9595a5f0 100644
--- a/components/community/community-stats-card.tsx
+++ b/components/community/community-stats-card.tsx
@@ -1,4 +1,7 @@
-import { Heart, Eye, Share2, TrendingUp, Clock, Award } from "lucide-react";
+"use client";
+
+import { Heart, Eye, TrendingUp, Clock, Award, Users } from "lucide-react";
+import { useI18n } from "@/lib/i18n/context";
 
 export interface CommunityStats {
   totalSubmissions: number;
@@ -17,62 +20,92 @@ interface CommunityStatsCardProps {
 }
 
 export function CommunityStatsCard({ stats }: CommunityStatsCardProps) {
+  const { locale } = useI18n();
+  const isZh = locale === "zh";
+
   const statItems = [
     {
-      icon: <Award className="w-5 h-5" />,
-      label: "Total Styles",
+      icon: Award,
+      label: isZh ? "社区风格" : "Community Styles",
       value: stats.totalSubmissions.toLocaleString(),
-      color: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+      gradient: "from-blue-500/20 to-indigo-500/20",
+      iconColor: "text-blue-500",
     },
     {
-      icon: <TrendingUp className="w-5 h-5" />,
-      label: "Contributors",
+      icon: Users,
+      label: isZh ? "贡献者" : "Contributors",
       value: stats.totalCollaborators.toLocaleString(),
-      color: "bg-purple-500/10 text-purple-600 dark:text-purple-400",
+      gradient: "from-purple-500/20 to-pink-500/20",
+      iconColor: "text-purple-500",
     },
     {
-      icon: <Clock className="w-5 h-5" />,
-      label: "This Month",
+      icon: Clock,
+      label: isZh ? "本月新增" : "This Month",
       value: stats.recentSubmissions.toLocaleString(),
-      color: "bg-green-500/10 text-green-600 dark:text-green-400",
+      gradient: "from-emerald-500/20 to-teal-500/20",
+      iconColor: "text-emerald-500",
     },
   ];
 
   return (
-    <div className="border-b border-border">
+    <div className="border-b border-border bg-gradient-to-b from-zinc-50/50 to-transparent dark:from-zinc-900/50">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-12 py-8">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-          {statItems.map((item, idx) => (
-            <div
-              key={idx}
-              className={`${item.color} border border-current/20 rounded-lg p-4 flex items-center gap-3`}
-            >
-              {item.icon}
-              <div>
-                <div className="text-xs font-semibold opacity-70">{item.label}</div>
-                <div className="text-2xl font-bold">{item.value}</div>
+        {/* Stats Grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
+          {statItems.map((item, idx) => {
+            const Icon = item.icon;
+            return (
+              <div
+                key={idx}
+                className={`relative overflow-hidden rounded-xl bg-gradient-to-br ${item.gradient} 
+                  border border-border/50 p-5 transition-all hover:scale-[1.02] hover:shadow-lg`}
+              >
+                <div className="flex items-center gap-4">
+                  <div className={`p-2.5 rounded-lg bg-background/80 ${item.iconColor}`}>
+                    <Icon className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <div className="text-xs font-medium text-muted uppercase tracking-wider">
+                      {item.label}
+                    </div>
+                    <div className="text-2xl font-bold tracking-tight mt-0.5">
+                      {item.value}
+                    </div>
+                  </div>
+                </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
 
+        {/* Featured Style */}
         {stats.topStyle && (
-          <div className="border border-border rounded-lg p-4 bg-background/50 backdrop-blur-sm">
-            <div className="flex items-center gap-2 mb-2 text-xs font-semibold uppercase tracking-wider text-muted">
-              <TrendingUp className="w-4 h-4" />
-              Featured This Month
-            </div>
-            <h3 className="text-lg font-semibold mb-3">{stats.topStyle.title}</h3>
-            <div className="flex items-center justify-between">
-              <div className="text-sm text-muted">by {stats.topStyle.author}</div>
-              <div className="flex items-center gap-4 text-sm text-muted">
-                <div className="flex items-center gap-1">
-                  <Heart className="w-4 h-4" />
-                  {stats.topStyle.likes}
+          <div className="relative overflow-hidden rounded-xl border border-border bg-background/80 backdrop-blur-sm p-5">
+            <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-amber-500/10 to-transparent rounded-bl-full" />
+            
+            <div className="relative">
+              <div className="flex items-center gap-2 mb-3">
+                <TrendingUp className="w-4 h-4 text-amber-500" />
+                <span className="text-xs font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400">
+                  {isZh ? "本月精选" : "Featured This Month"}
+                </span>
+              </div>
+              
+              <h3 className="text-lg font-semibold mb-3">{stats.topStyle.title}</h3>
+              
+              <div className="flex items-center justify-between">
+                <div className="text-sm text-muted">
+                  {isZh ? "作者：" : "by "}{stats.topStyle.author}
                 </div>
-                <div className="flex items-center gap-1">
-                  <Eye className="w-4 h-4" />
-                  {stats.topStyle.views}
+                <div className="flex items-center gap-4 text-sm">
+                  <div className="flex items-center gap-1.5 text-rose-500">
+                    <Heart className="w-4 h-4" />
+                    <span className="font-medium">{stats.topStyle.likes}</span>
+                  </div>
+                  <div className="flex items-center gap-1.5 text-muted">
+                    <Eye className="w-4 h-4" />
+                    <span>{stats.topStyle.views}</span>
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/components/playground/playground-preview.tsx b/components/playground/playground-preview.tsx
index e2b2a70b..806c982c 100644
--- a/components/playground/playground-preview.tsx
+++ b/components/playground/playground-preview.tsx
@@ -5,14 +5,13 @@ import {
   Loader2, 
   ZoomIn, 
   ZoomOut, 
-  RotateCcw, 
   Maximize2, 
   Minimize2,
   MousePointer,
   Eye,
-  EyeOff,
   X
 } from "lucide-react";
+import { useI18n } from "@/lib/i18n/context";
 
 interface PlaygroundPreviewProps {
   code: string;
@@ -175,6 +174,9 @@ export function PlaygroundPreview({
   deviceWidth,
   onElementSelect,
 }: PlaygroundPreviewProps) {
+  const { locale } = useI18n();
+  const isZh = locale === "zh";
+  
   const [debouncedCode, setDebouncedCode] = useState(code);
   const [debouncedTokenCss, setDebouncedTokenCss] = useState(tokenCss);
   const [zoom, setZoom] = useState(1);
@@ -278,12 +280,12 @@ export function PlaygroundPreview({
       {/* 预览控制栏 */}
       <div className="flex items-center justify-between px-2 py-1 border-b border-border bg-zinc-50 dark:bg-zinc-900 shrink-0">
         <div className="flex items-center gap-1">
-          {/* 缩放控制 */}
+          {/* Zoom Controls */}
           <button
             onClick={handleZoomOut}
             disabled={zoom <= ZOOM_LEVELS[0]}
             className="p-1 text-muted hover:text-foreground disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-            title="缩小"
+            title={isZh ? "缩小" : "Zoom Out"}
           >
             <ZoomOut className="w-3.5 h-3.5" />
           </button>
@@ -291,7 +293,7 @@ export function PlaygroundPreview({
           <button
             onClick={handleZoomReset}
             className="px-1.5 py-0.5 text-[10px] font-mono text-muted hover:text-foreground hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded transition-colors min-w-[40px] text-center"
-            title="重置缩放"
+            title={isZh ? "重置缩放" : "Reset Zoom"}
           >
             {Math.round(zoom * 100)}%
           </button>
@@ -300,14 +302,14 @@ export function PlaygroundPreview({
             onClick={handleZoomIn}
             disabled={zoom >= ZOOM_LEVELS[ZOOM_LEVELS.length - 1]}
             className="p-1 text-muted hover:text-foreground disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-            title="放大"
+            title={isZh ? "放大" : "Zoom In"}
           >
             <ZoomIn className="w-3.5 h-3.5" />
           </button>
 
           <div className="w-px h-3 bg-border mx-1" />
 
-          {/* 元素检查器 */}
+          {/* Element Inspector */}
           <button
             onClick={() => setInspectorEnabled(!inspectorEnabled)}
             className={`p-1 transition-colors ${
@@ -315,18 +317,22 @@ export function PlaygroundPreview({
                 ? 'text-blue-500 bg-blue-500/10' 
                 : 'text-muted hover:text-foreground'
             }`}
-            title={inspectorEnabled ? '关闭元素检查' : '开启元素检查'}
+            title={inspectorEnabled 
+              ? (isZh ? "关闭元素检查" : "Disable Inspector") 
+              : (isZh ? "开启元素检查" : "Enable Inspector")}
           >
             <MousePointer className="w-3.5 h-3.5" />
           </button>
         </div>
 
         <div className="flex items-center gap-1">
-          {/* 全屏切换 */}
+          {/* Fullscreen Toggle */}
           <button
             onClick={toggleFullscreen}
             className="p-1 text-muted hover:text-foreground transition-colors"
-            title={isFullscreen ? '退出全屏' : '全屏预览'}
+            title={isFullscreen 
+              ? (isZh ? "退出全屏" : "Exit Fullscreen") 
+              : (isZh ? "全屏预览" : "Enter Fullscreen")}
           >
             {isFullscreen ? (
               <Minimize2 className="w-3.5 h-3.5" />
@@ -337,11 +343,11 @@ export function PlaygroundPreview({
         </div>
       </div>
 
-      {/* 加载指示器 */}
+      {/* Loading Indicator */}
       {loading && (
         <div className="absolute top-10 right-2 z-10 flex items-center gap-1.5 px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded text-xs text-muted">
           <Loader2 className="w-3 h-3 animate-spin" />
-          <span>更新中...</span>
+          <span>{isZh ? "更新中..." : "Updating..."}</span>
         </div>
       )}
 
@@ -408,11 +414,11 @@ export function PlaygroundPreview({
         </div>
       </div>
 
-      {/* 检查器模式提示 */}
+      {/* Inspector Mode Hint */}
       {inspectorEnabled && (
         <div className="absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1.5 px-3 py-1.5 bg-blue-500 text-white rounded-full text-xs shadow-lg">
           <Eye className="w-3 h-3" />
-          <span>点击元素查看类名</span>
+          <span>{isZh ? "点击元素查看类名" : "Click elements to inspect"}</span>
         </div>
       )}
     </div>
diff --git a/components/recipes/recipe-card.tsx b/components/recipes/recipe-card.tsx
index 57360a37..767fac82 100644
--- a/components/recipes/recipe-card.tsx
+++ b/components/recipes/recipe-card.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowRight, Layers, Layout, Sparkles } from "lucide-react";
+import { ArrowRight, Layers, Layout, Sparkles, Check } from "lucide-react";
 import { LocalizedLink } from "@/components/i18n/localized-link";
 import { useI18n } from "@/lib/i18n/context";
 import type { StyleRecipe } from "@/lib/styles/recipes";
@@ -12,36 +12,49 @@ interface RecipeCardProps {
 
 export function RecipeCard({ recipe, variant = "default" }: RecipeCardProps) {
   const { locale } = useI18n();
+  const isZh = locale === "zh";
   
-  const name = locale === "zh" ? recipe.nameZh : recipe.name;
-  const description = locale === "zh" ? recipe.descriptionZh : recipe.description;
-  const reasoning = locale === "zh" ? recipe.reasoningZh : recipe.reasoning;
+  const name = isZh ? recipe.nameZh : recipe.name;
+  const description = isZh ? recipe.descriptionZh : recipe.description;
+  const reasoning = isZh ? recipe.reasoningZh : recipe.reasoning;
 
   if (variant === "compact") {
     return (
-      <div className="group border border-border hover:border-foreground transition-colors p-4">
-        <div className="flex items-start justify-between gap-4">
+      <LocalizedLink
+        href={`/recipes/${recipe.id}`}
+        className="group relative block border border-border hover:border-foreground transition-all p-4 overflow-hidden"
+      >
+        {/* Subtle gradient overlay on hover */}
+        <div 
+          className={`absolute inset-0 bg-gradient-to-br ${recipe.previewGradient || "from-gray-400 to-gray-600"} opacity-0 group-hover:opacity-5 transition-opacity`}
+          aria-hidden="true"
+        />
+        
+        <div className="relative flex items-start justify-between gap-4">
           <div className="flex-1 min-w-0">
-            <h4 className="font-medium text-sm mb-1 truncate">{name}</h4>
-            <p className="text-xs text-muted line-clamp-2">{description}</p>
+            <h4 className="font-medium text-sm mb-1.5 truncate group-hover:text-foreground transition-colors">
+              {name}
+            </h4>
+            <p className="text-xs text-muted line-clamp-2 leading-relaxed">{description}</p>
           </div>
           <div 
-            className={`w-8 h-8 rounded-full bg-gradient-to-br ${recipe.previewGradient || "from-gray-400 to-gray-600"} shrink-0`}
+            className={`w-10 h-10 rounded-lg bg-gradient-to-br ${recipe.previewGradient || "from-gray-400 to-gray-600"} shrink-0 shadow-sm`}
             aria-hidden="true"
           />
         </div>
-        <div className="flex items-center gap-2 mt-3 text-xs text-muted">
-          <span className="flex items-center gap-1">
-            <Sparkles className="w-3 h-3" />
+        
+        <div className="relative flex items-center gap-2 mt-3 pt-3 border-t border-border/50">
+          <span className="inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-800 rounded">
+            <Sparkles className="w-2.5 h-2.5" />
             {recipe.visualStyle}
           </span>
-          <span>+</span>
-          <span className="flex items-center gap-1">
-            <Layout className="w-3 h-3" />
+          <span className="text-muted text-[10px]">+</span>
+          <span className="inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-800 rounded">
+            <Layout className="w-2.5 h-2.5" />
             {recipe.layout}
           </span>
         </div>
-      </div>
+      </LocalizedLink>
     );
   }
 
@@ -49,43 +62,59 @@ export function RecipeCard({ recipe, variant = "default" }: RecipeCardProps) {
     return (
       <LocalizedLink
         href={`/recipes/${recipe.id}`}
-        className="group relative block border border-border hover:border-foreground transition-all overflow-hidden"
+        className="group relative block border border-border hover:border-foreground transition-all overflow-hidden rounded-xl"
       >
-        {/* Gradient preview */}
-        <div 
-          className={`h-32 bg-gradient-to-br ${recipe.previewGradient || "from-gray-400 to-gray-600"}`}
-          aria-hidden="true"
-        />
-        
-        <div className="p-6">
-          <div className="flex items-start justify-between gap-4 mb-4">
-            <div>
-              <h3 className="text-xl font-medium mb-1 group-hover:text-accent transition-colors">
-                {name}
-              </h3>
-              <p className="text-sm text-muted">{description}</p>
+        {/* Gradient preview with overlay */}
+        <div className="relative h-36">
+          <div 
+            className={`absolute inset-0 bg-gradient-to-br ${recipe.previewGradient || "from-gray-400 to-gray-600"}`}
+            aria-hidden="true"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-background/90 via-background/20 to-transparent" />
+          
+          {/* Featured badge */}
+          {recipe.featured && (
+            <div className="absolute top-3 right-3">
+              <span className="inline-flex items-center gap-1 text-[10px] uppercase tracking-widest px-2 py-1 bg-amber-500/90 text-white rounded-full shadow-sm">
+                <Sparkles className="w-2.5 h-2.5" />
+                {isZh ? "精选" : "Featured"}
+              </span>
             </div>
-            {recipe.featured && (
-              <span className="shrink-0 text-[10px] uppercase tracking-widest px-2 py-1 bg-accent text-accent-foreground">
-                {locale === "zh" ? "精选" : "Featured"}
+          )}
+          
+          {/* Popularity indicator */}
+          {recipe.popularity && recipe.popularity > 85 && (
+            <div className="absolute bottom-3 left-3">
+              <span className="inline-flex items-center gap-1 text-[10px] px-2 py-1 bg-background/90 backdrop-blur-sm rounded-full">
+                <Check className="w-2.5 h-2.5 text-emerald-500" />
+                <span className="text-muted">{recipe.popularity}%</span>
               </span>
-            )}
+            </div>
+          )}
+        </div>
+        
+        <div className="p-5">
+          <div className="mb-4">
+            <h3 className="text-lg font-semibold mb-1.5 group-hover:text-accent transition-colors">
+              {name}
+            </h3>
+            <p className="text-sm text-muted leading-relaxed">{description}</p>
           </div>
           
           {/* Recipe components */}
           <div className="flex flex-wrap gap-2 mb-4">
-            <span className="inline-flex items-center gap-1.5 text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800">
-              <Sparkles className="w-3 h-3" />
+            <span className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-md">
+              <Sparkles className="w-3 h-3 text-purple-500" />
               {recipe.visualStyle}
             </span>
-            <span className="inline-flex items-center gap-1.5 text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800">
-              <Layout className="w-3 h-3" />
+            <span className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-md">
+              <Layout className="w-3 h-3 text-blue-500" />
               {recipe.layout}
             </span>
             {recipe.animations && recipe.animations.length > 0 && (
-              <span className="inline-flex items-center gap-1.5 text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800">
-                <Layers className="w-3 h-3" />
-                {recipe.animations.length} {locale === "zh" ? "动画" : "animations"}
+              <span className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1 bg-zinc-100 dark:bg-zinc-800 rounded-md">
+                <Layers className="w-3 h-3 text-emerald-500" />
+                {recipe.animations.length} {isZh ? "动画" : "animations"}
               </span>
             )}
           </div>
@@ -95,7 +124,7 @@ export function RecipeCard({ recipe, variant = "default" }: RecipeCardProps) {
             {recipe.tags.slice(0, 4).map((tag) => (
               <span
                 key={tag}
-                className="text-[10px] uppercase tracking-wider px-2 py-0.5 border border-border text-muted"
+                className="text-[10px] uppercase tracking-wider px-2 py-0.5 border border-border text-muted rounded"
               >
                 {tag}
               </span>
@@ -103,18 +132,18 @@ export function RecipeCard({ recipe, variant = "default" }: RecipeCardProps) {
           </div>
           
           {/* Reasoning */}
-          <p className="text-xs text-muted leading-relaxed line-clamp-2 mb-4">
-            {reasoning}
+          <p className="text-xs text-muted leading-relaxed line-clamp-2 mb-4 italic">
+            &ldquo;{reasoning}&rdquo;
           </p>
           
-          <div className="flex items-center justify-between">
+          <div className="flex items-center justify-between pt-3 border-t border-border/50">
             <span className="text-xs text-muted">
-              {locale === "zh" ? "适用场景：" : "Use case: "}
-              <span className="text-foreground">{recipe.useCase}</span>
+              {isZh ? "适用场景：" : "Use case: "}
+              <span className="text-foreground font-medium">{recipe.useCase}</span>
             </span>
             <span className="inline-flex items-center gap-1 text-xs text-muted group-hover:text-foreground transition-colors">
-              {locale === "zh" ? "查看详情" : "View Details"}
-              <ArrowRight className="w-3 h-3" />
+              {isZh ? "查看详情" : "View Details"}
+              <ArrowRight className="w-3 h-3 group-hover:translate-x-0.5 transition-transform" />
             </span>
           </div>
         </div>
@@ -126,44 +155,61 @@ export function RecipeCard({ recipe, variant = "default" }: RecipeCardProps) {
   return (
     <LocalizedLink
       href={`/recipes/${recipe.id}`}
-      className="group block border border-border hover:border-foreground transition-all p-5"
+      className="group relative block border border-border hover:border-foreground transition-all p-5 overflow-hidden"
     >
-      <div className="flex items-start gap-4 mb-4">
+      {/* Hover gradient effect */}
+      <div 
+        className={`absolute inset-0 bg-gradient-to-br ${recipe.previewGradient || "from-gray-400 to-gray-600"} opacity-0 group-hover:opacity-[0.03] transition-opacity`}
+        aria-hidden="true"
+      />
+      
+      <div className="relative flex items-start gap-4 mb-4">
         <div 
-          className={`w-12 h-12 rounded-lg bg-gradient-to-br ${recipe.previewGradient || "from-gray-400 to-gray-600"} shrink-0`}
+          className={`w-14 h-14 rounded-xl bg-gradient-to-br ${recipe.previewGradient || "from-gray-400 to-gray-600"} shrink-0 shadow-sm group-hover:shadow-md transition-shadow`}
           aria-hidden="true"
         />
         <div className="flex-1 min-w-0">
-          <h3 className="font-medium mb-1 group-hover:text-accent transition-colors">
+          <h3 className="font-semibold mb-1 group-hover:text-accent transition-colors">
             {name}
           </h3>
-          <p className="text-sm text-muted line-clamp-2">{description}</p>
+          <p className="text-sm text-muted line-clamp-2 leading-relaxed">{description}</p>
         </div>
       </div>
       
       {/* Recipe components */}
-      <div className="flex flex-wrap gap-2 mb-3">
-        <span className="inline-flex items-center gap-1 text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800">
-          <Sparkles className="w-3 h-3" />
+      <div className="relative flex flex-wrap gap-2 mb-3">
+        <span className="inline-flex items-center gap-1 text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded">
+          <Sparkles className="w-3 h-3 text-purple-500" />
           {recipe.visualStyle}
         </span>
-        <span className="inline-flex items-center gap-1 text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800">
-          <Layout className="w-3 h-3" />
+        <span className="inline-flex items-center gap-1 text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded">
+          <Layout className="w-3 h-3 text-blue-500" />
           {recipe.layout}
         </span>
+        {recipe.animations && recipe.animations.length > 0 && (
+          <span className="inline-flex items-center gap-1 text-xs px-2 py-1 bg-zinc-100 dark:bg-zinc-800 rounded">
+            <Layers className="w-3 h-3 text-emerald-500" />
+            +{recipe.animations.length}
+          </span>
+        )}
       </div>
       
       {/* Tags */}
-      <div className="flex flex-wrap gap-1">
+      <div className="relative flex flex-wrap gap-1">
         {recipe.tags.slice(0, 3).map((tag) => (
           <span
             key={tag}
-            className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 border border-border text-muted"
+            className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 border border-border text-muted rounded"
           >
             {tag}
           </span>
         ))}
       </div>
+      
+      {/* Arrow indicator */}
+      <div className="absolute bottom-5 right-5 opacity-0 group-hover:opacity-100 transition-opacity">
+        <ArrowRight className="w-4 h-4 text-muted" />
+      </div>
     </LocalizedLink>
   );
 }
diff --git a/lib/community/leaderboard.ts b/lib/community/leaderboard.ts
index f2c159f3..e62acfa1 100644
--- a/lib/community/leaderboard.ts
+++ b/lib/community/leaderboard.ts
@@ -1,45 +1,47 @@
-import {
-  TrendingUp,
-  Clock,
-  Heart,
-  Zap,
-  Sparkles,
-  BarChart3,
-} from "lucide-react";
-
 export type SortMethod = "trending" | "recent" | "popular" | "hot";
 
-export interface SortOption {
+export interface SortOptionDef {
   value: SortMethod;
-  label: string;
-  icon: React.ReactNode;
-  description: string;
+  labelEn: string;
+  labelZh: string;
+  iconName: "TrendingUp" | "Clock" | "Heart" | "Zap";
+  descriptionEn: string;
+  descriptionZh: string;
 }
 
-export const SORT_OPTIONS: SortOption[] = [
+// 纯数据定义，不包含 React 组件，适合 Server Component
+export const SORT_OPTIONS_DEF: SortOptionDef[] = [
   {
     value: "trending",
-    label: "Trending",
-    icon: <TrendingUp className="w-4 h-4" />,
-    description: "Most engagement this week",
+    labelEn: "Trending",
+    labelZh: "热门趋势",
+    iconName: "TrendingUp",
+    descriptionEn: "Most engagement this week",
+    descriptionZh: "本周互动最多",
   },
   {
     value: "recent",
-    label: "Recent",
-    icon: <Clock className="w-4 h-4" />,
-    description: "Newest submissions first",
+    labelEn: "Recent",
+    labelZh: "最新发布",
+    iconName: "Clock",
+    descriptionEn: "Newest submissions first",
+    descriptionZh: "按时间倒序",
   },
   {
     value: "popular",
-    label: "Popular",
-    icon: <Heart className="w-4 h-4" />,
-    description: "Most liked all-time",
+    labelEn: "Popular",
+    labelZh: "最受欢迎",
+    iconName: "Heart",
+    descriptionEn: "Most liked all-time",
+    descriptionZh: "累计点赞最多",
   },
   {
     value: "hot",
-    label: "Hot",
-    icon: <Zap className="w-4 h-4" />,
-    description: "Rapid growth momentum",
+    labelEn: "Hot",
+    labelZh: "火速增长",
+    iconName: "Zap",
+    descriptionEn: "Rapid growth momentum",
+    descriptionZh: "增长势头最猛",
   },
 ];
 
@@ -128,36 +130,53 @@ export function sortCommunityStyles(
   }
 }
 
+export type BadgeType = "hot" | "rising" | "viral" | null;
+
+export interface EngagementBadge {
+  type: BadgeType;
+  labelEn: string;
+  labelZh: string;
+  color: string;
+  iconName: "Zap" | "TrendingUp" | "Sparkles";
+}
+
 /**
  * Calculate engagement metrics for display
+ * Returns pure data without React components for Server Component compatibility
  */
 export function calculateEngagementBadge(
   style: CommunityStyleWithStats
-): { label: string; color: string; icon: React.ReactNode } | null {
+): EngagementBadge | null {
   const totalEngagement = style.likes + style.shares * 2;
   const engagementRate = totalEngagement / Math.max(style.views, 1);
 
   if (style.trend > 50) {
     return {
-      label: "🔥 Hot",
+      type: "hot",
+      labelEn: "Hot",
+      labelZh: "火热",
       color: "bg-red-500/20 text-red-600 dark:text-red-400",
-      icon: <Zap className="w-3 h-3" />,
+      iconName: "Zap",
     };
   }
 
   if (style.trend > 25) {
     return {
-      label: "📈 Rising",
+      type: "rising",
+      labelEn: "Rising",
+      labelZh: "上升中",
       color: "bg-orange-500/20 text-orange-600 dark:text-orange-400",
-      icon: <TrendingUp className="w-3 h-3" />,
+      iconName: "TrendingUp",
     };
   }
 
   if (engagementRate > 0.05 && style.likes > 10) {
     return {
-      label: "⭐ Viral",
+      type: "viral",
+      labelEn: "Viral",
+      labelZh: "爆款",
       color: "bg-yellow-500/20 text-yellow-600 dark:text-yellow-400",
-      icon: <Sparkles className="w-3 h-3" />,
+      iconName: "Sparkles",
     };
   }
 
diff --git a/lib/seo/style-guides.ts b/lib/seo/style-guides.ts
index f205ad5e..3ea32fc5 100644
--- a/lib/seo/style-guides.ts
+++ b/lib/seo/style-guides.ts
@@ -118,6 +118,170 @@ export const styleGuides: Record<string, StyleGuide> = {
     influencedBy: ["Swiss Style", "Bauhaus"],
     influenced: ["Neo-Brutalism", "Glassmorphism"],
   },
+  glassmorphism: {
+    name: "玻璃拟态设计",
+    nameEn: "Glassmorphism",
+    slug: "glassmorphism",
+    description: "通过模糊透明效果和多层次叠加创造现代感的界面设计风格",
+    descriptionEn: "A modern UI style that creates depth through frosted glass effects, transparency, and layered elements.",
+    history: "玻璃拟态在 2020-2021 年随着 macOS Big Sur 的发布而流行。它源于 Windows Vista 的 Aero Glass 和 iOS 7 的设计，并发展成为独立的设计趋势。",
+    historyEn: "Glassmorphism became popular in 2020-2021 with the release of macOS Big Sur. It evolved from Windows Vista's Aero Glass and iOS 7's design, developing into an independent design trend.",
+    philosophy: "通过透明度和模糊效果创造深度和层次感，同时保持界面的现代感和轻盈感。强调背景内容与前景元素的视觉关系。",
+    philosophyEn: "Create depth and hierarchy through transparency and blur effects while maintaining a modern, lightweight feel. Emphasizes the visual relationship between background content and foreground elements.",
+    useCases: [
+      {
+        title: "SaaS 产品界面",
+        titleEn: "SaaS Product Interfaces",
+        description: "创造高端、现代感的产品体验",
+        descriptionEn: "Creating premium, modern product experiences",
+        industry: "SaaS",
+      },
+      {
+        title: "AI 和科技产品",
+        titleEn: "AI & Tech Products",
+        description: "传达创新和前沿技术的感觉",
+        descriptionEn: "Conveying innovation and cutting-edge technology",
+        industry: "Technology",
+      },
+    ],
+    references: [
+      {
+        title: "Apple Human Interface Guidelines",
+        url: "https://developer.apple.com/design/human-interface-guidelines/",
+        type: "website",
+      },
+      {
+        title: "Glassmorphism CSS Generator",
+        url: "https://css.glass",
+        type: "website",
+      },
+    ],
+    influencedBy: ["Neumorphism", "Material Design"],
+    influenced: ["Liquid Glass"],
+  },
+  "neo-brutalism": {
+    name: "新野兽派设计",
+    nameEn: "Neo-Brutalism",
+    slug: "neo-brutalism",
+    description: "大胆的颜色、粗犷的边框和不对称布局，挑战传统设计规范",
+    descriptionEn: "Bold colors, raw borders, and asymmetric layouts that challenge traditional design conventions.",
+    history: "新野兽派设计于 2020 年代初兴起，受建筑野兽派运动启发。它是对过度精致的 UI 设计的一种反叛，强调原始、大胆和诚实的视觉表达。",
+    historyEn: "Neo-brutalism emerged in the early 2020s, inspired by the architectural Brutalist movement. It's a rebellion against over-polished UI design, emphasizing raw, bold, and honest visual expression.",
+    philosophy: "设计应该是诚实和大胆的，不需要隐藏或美化。通过打破常规的视觉元素创造独特的品牌识别和用户记忆点。",
+    philosophyEn: "Design should be honest and bold without hiding or beautifying. Create unique brand identity and memorable user experiences through unconventional visual elements.",
+    useCases: [
+      {
+        title: "创意工作室和代理商",
+        titleEn: "Creative Studios & Agencies",
+        description: "展示大胆的创意能力和独特视角",
+        descriptionEn: "Showcasing bold creative capabilities and unique perspectives",
+        industry: "Creative",
+      },
+      {
+        title: "独立产品和初创公司",
+        titleEn: "Indie Products & Startups",
+        description: "在拥挤的市场中脱颖而出",
+        descriptionEn: "Standing out in crowded markets",
+        industry: "Startup",
+      },
+    ],
+    references: [
+      {
+        title: "Brutalist Websites",
+        url: "https://brutalistwebsites.com",
+        type: "website",
+      },
+      {
+        title: "Why Brutalism is Making a Comeback",
+        url: "https://www.designweek.co.uk",
+        type: "article",
+      },
+    ],
+    influencedBy: ["Brutalist Architecture", "Punk Design"],
+    influenced: ["Anti-Design Movement"],
+  },
+  editorial: {
+    name: "编辑风格设计",
+    nameEn: "Editorial Design",
+    slug: "editorial",
+    description: "受杂志和出版物启发的排版和布局，强调可读性和内容层次",
+    descriptionEn: "Typography and layout inspired by magazines and publications, emphasizing readability and content hierarchy.",
+    history: "编辑风格设计源于印刷媒体的悠久传统，特别是 20 世纪的杂志设计。数字时代使这种风格适应了网页，保留了其对排版和留白的重视。",
+    historyEn: "Editorial design originates from the long tradition of print media, particularly 20th-century magazine design. The digital age adapted this style for the web while retaining its emphasis on typography and whitespace.",
+    philosophy: "内容为王，设计服务于阅读。通过精心的排版、适当的留白和清晰的视觉层次引导读者注意力。",
+    philosophyEn: "Content is king, design serves reading. Guide reader attention through careful typography, appropriate whitespace, and clear visual hierarchy.",
+    useCases: [
+      {
+        title: "博客和在线杂志",
+        titleEn: "Blogs & Online Magazines",
+        description: "提供优质的长篇阅读体验",
+        descriptionEn: "Providing premium long-form reading experiences",
+        industry: "Media",
+      },
+      {
+        title: "品牌故事和案例研究",
+        titleEn: "Brand Stories & Case Studies",
+        description: "通过叙事设计建立品牌连接",
+        descriptionEn: "Building brand connection through narrative design",
+        industry: "Marketing",
+      },
+    ],
+    references: [
+      {
+        title: "Typewolf - Typography Inspiration",
+        url: "https://www.typewolf.com",
+        type: "website",
+      },
+      {
+        title: "The Elements of Typographic Style",
+        url: "https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style",
+        type: "book",
+      },
+    ],
+    influencedBy: ["Swiss Typography", "Magazine Design"],
+    influenced: ["Content-First Design"],
+  },
+  "cyber-wafuu": {
+    name: "赛博和风设计",
+    nameEn: "Cyber Wafuu",
+    slug: "cyber-wafuu",
+    description: "融合日本传统美学与赛博朋克元素的独特视觉风格",
+    descriptionEn: "A unique visual style blending Japanese traditional aesthetics with cyberpunk elements.",
+    history: "赛博和风是 21 世纪互联网文化的产物，融合了日本传统文化元素与科幻未来主义视觉。它反映了全球化时代中东西方文化的碰撞与融合。",
+    historyEn: "Cyber Wafuu is a product of 21st-century internet culture, blending Japanese traditional cultural elements with sci-fi futuristic visuals. It reflects the collision and fusion of Eastern and Western cultures in the era of globalization.",
+    philosophy: "在传统与未来之间寻找平衡。通过将古老的美学元素（如樱花、灯笼、书法）与霓虹灯、故障效果、赛博格元素结合，创造出独特的文化身份。",
+    philosophyEn: "Finding balance between tradition and future. By combining ancient aesthetic elements (like cherry blossoms, lanterns, calligraphy) with neon lights, glitch effects, and cyborg elements, create a unique cultural identity.",
+    useCases: [
+      {
+        title: "游戏和娱乐",
+        titleEn: "Gaming & Entertainment",
+        description: "创造独特的世界观和视觉识别",
+        descriptionEn: "Creating unique worldviews and visual identity",
+        industry: "Gaming",
+      },
+      {
+        title: "潮牌和街头文化",
+        titleEn: "Streetwear & Urban Culture",
+        description: "吸引年轻、前卫的目标受众",
+        descriptionEn: "Attracting young, avant-garde target audiences",
+        industry: "Fashion",
+      },
+    ],
+    references: [
+      {
+        title: "Ghost in the Shell Aesthetics",
+        url: "https://www.imdb.com/title/tt0113568/",
+        type: "website",
+      },
+      {
+        title: "Japanese Cyberpunk Art Movement",
+        url: "https://www.artstation.com",
+        type: "website",
+      },
+    ],
+    influencedBy: ["Cyberpunk", "Japanese Traditional Art"],
+    influenced: ["Modern Anime Aesthetics"],
+  },
 };
 
 /**
diff --git a/lib/styles/recipes.ts b/lib/styles/recipes.ts
index cfc3bec5..68e86573 100644
--- a/lib/styles/recipes.ts
+++ b/lib/styles/recipes.ts
@@ -453,6 +453,39 @@ export function resolveRecipeStyles(recipe: StyleRecipe): {
   };
 }
 
+/**
+ * Validate that a recipe's referenced styles exist
+ */
+export function validateRecipe(recipe: StyleRecipe): {
+  valid: boolean;
+  missingVisual: boolean;
+  missingLayout: boolean;
+  missingAnimations: string[];
+} {
+  const visualExists = styles.some((s) => s.slug === recipe.visualStyle);
+  const layoutExists = styles.some((s) => s.slug === recipe.layout);
+  const missingAnimations = (recipe.animations || []).filter(
+    (anim) => !styles.some((s) => s.slug === anim)
+  );
+
+  return {
+    valid: visualExists && layoutExists && missingAnimations.length === 0,
+    missingVisual: !visualExists,
+    missingLayout: !layoutExists,
+    missingAnimations,
+  };
+}
+
+/**
+ * Get only valid recipes (with existing style references)
+ */
+export function getValidRecipes(): StyleRecipe[] {
+  return styleRecipes.filter((recipe) => {
+    const validation = validateRecipe(recipe);
+    return validation.valid || (!validation.missingVisual && !validation.missingLayout);
+  });
+}
+
 /**
  * Search recipes by query
  */