feat: add AI Prompts section, database model, public pages, and admin CRUD

app/[locale]/admin/page.tsx

@@ -24,6 +24,12 @@ import {
   updateCheatsheet,
   deleteCheatsheet
 } from '@/lib/actions/cheatsheetActions';
+import {
+  getPrompts,
+  createPrompt,
+  updatePrompt,
+  deletePrompt
+} from '@/lib/actions/promptActions';
 import {
   ShieldAlert,
   Plus,
@@ -48,7 +54,8 @@ import {
   Link as LinkIcon,
   FolderTree,
   Tag,
-  Terminal
+  Terminal,
+  Sparkles
 } from 'lucide-react';
 import { YoutubeIcon as Youtube } from '@/components/icons/YoutubeIcon';
 
@@ -89,7 +96,7 @@ function parseNotesText(text: string) {
 
 export default function AdminPage() {
   const t = useTranslations('admin');
-  const [activeTab, setActiveTab] = useState<'dashboard' | 'lessons' | 'cheatsheets' | 'categories' | 'users' | 'settings' | 'messages'>('dashboard');
+  const [activeTab, setActiveTab] = useState<'dashboard' | 'lessons' | 'cheatsheets' | 'prompts' | 'categories' | 'users' | 'settings' | 'messages'>('dashboard');
 
   // Stats
   const [stats, setStats] = useState({ totalLessons: 0, totalViews: 0, totalDownloads: 0, totalMessages: 0 });
@@ -117,6 +124,17 @@ export default function AdminPage() {
   ]);
   const [savingCheat, setSavingCheat] = useState(false);
 
+  // Prompts State
+  const [promptsList, setPromptsList] = useState<any[]>([]);
+  const [isPromptFormOpen, setIsPromptFormOpen] = useState(false);
+  const [editingPromptId, setEditingPromptId] = useState<string | null>(null);
+  const [promptTitle, setPromptTitle] = useState('');
+  const [promptCategory, setPromptCategory] = useState('System Architecture');
+  const [promptDesc, setPromptDesc] = useState('');
+  const [promptContent, setPromptContent] = useState('');
+  const [promptTagsText, setPromptTagsText] = useState('Next.js, System Prompt');
+  const [savingPrompt, setSavingPrompt] = useState(false);
+
   // Lesson Form Modal State (Create or Edit)
   const [isFormOpen, setIsFormOpen] = useState(false);
   const [editingLessonId, setEditingLessonId] = useState<string | null>(null);
@@ -186,6 +204,9 @@ export default function AdminPage() {
     } else if (activeTab === 'cheatsheets') {
       const sheets = await getCheatsheets();
       setCheatsheetsList(sheets);
+    } else if (activeTab === 'prompts') {
+      const prs = await getPrompts();
+      setPromptsList(prs);
     } else if (activeTab === 'categories') {
       const cats = await getCategories();
       setCategoriesList(cats);
@@ -330,6 +351,74 @@ export default function AdminPage() {
     }
   };
 
+  // Prompt Handlers
+  const handleOpenPromptCreate = () => {
+    setEditingPromptId(null);
+    setPromptTitle('');
+    setPromptCategory('System Architecture');
+    setPromptDesc('');
+    setPromptContent('');
+    setPromptTagsText('Next.js, System Prompt');
+    setIsPromptFormOpen(true);
+  };
+
+  const handleOpenPromptEdit = (prompt: any) => {
+    setEditingPromptId(prompt.id);
+    setPromptTitle(prompt.title);
+    setPromptCategory(prompt.category);
+    setPromptDesc(prompt.description);
+    setPromptContent(prompt.content);
+    setPromptTagsText(prompt.tags ? prompt.tags.join(', ') : '');
+    setIsPromptFormOpen(true);
+  };
+
+  const handleSavePrompt = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSavingPrompt(true);
+
+    const tags = promptTagsText.split(',').map((t) => t.trim()).filter((t) => t.length > 0);
+
+    let res;
+    if (editingPromptId) {
+      res = await updatePrompt(editingPromptId, {
+        title: promptTitle,
+        category: promptCategory,
+        description: promptDesc,
+        content: promptContent,
+        tags,
+      });
+    } else {
+      res = await createPrompt({
+        title: promptTitle,
+        category: promptCategory,
+        description: promptDesc,
+        content: promptContent,
+        tags,
+      });
+    }
+
+    setSavingPrompt(false);
+
+    if (res.success) {
+      showAlert('success', editingPromptId ? 'Prompt updated successfully!' : 'New prompt created successfully!');
+      setIsPromptFormOpen(false);
+      getPrompts().then(setPromptsList);
+    } else {
+      showAlert('error', res.error || 'Failed to save prompt');
+    }
+  };
+
+  const handleDeletePrompt = async (id: string, title: string) => {
+    if (!confirm(`Are you sure you want to delete prompt "${title}"?`)) return;
+    const res = await deletePrompt(id);
+    if (res.success) {
+      showAlert('success', `Prompt "${title}" deleted`);
+      getPrompts().then(setPromptsList);
+    } else {
+      showAlert('error', res.error || 'Failed to delete prompt');
+    }
+  };
+
   // Cheatsheet Handlers
   const handleOpenCheatCreate = () => {
     setEditingCheatId(null);
@@ -526,6 +615,18 @@ export default function AdminPage() {
             <span>Cheatsheets</span>
           </button>
 
+          <button
+            onClick={() => setActiveTab('prompts')}
+            className={`flex items-center gap-3 px-4 py-3 rounded-xl text-xs font-bold transition-all text-left ${
+              activeTab === 'prompts'
+                ? 'bg-red-600 text-white shadow-lg shadow-red-600/30'
+                : 'text-slate-400 hover:text-white hover:bg-slate-800/50'
+            }`}
+          >
+            <Sparkles className="w-4 h-4" />
+            <span>AI Prompts</span>
+          </button>
+
           <button
             onClick={() => setActiveTab('categories')}
             className={`flex items-center gap-3 px-4 py-3 rounded-xl text-xs font-bold transition-all text-left ${
@@ -806,7 +907,62 @@ export default function AdminPage() {
           </div>
         )}
 
-        {/* TAB 4: CATEGORIES CRUD */}
+        {/* TAB 4: PROMPTS CRUD */}
+        {activeTab === 'prompts' && (
+          <div className="space-y-6">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-extrabold text-white">AI Prompts & Templates ({promptsList.length})</h2>
+
+              <button
+                onClick={handleOpenPromptCreate}
+                className="px-5 py-2.5 rounded-xl bg-red-600 hover:bg-red-500 text-white text-xs font-bold flex items-center gap-2 shadow-lg shadow-red-600/30 transition-all"
+              >
+                <Plus className="w-4 h-4" />
+                <span>Create New AI Prompt</span>
+              </button>
+            </div>
+
+            <div className="space-y-4">
+              {promptsList.map((prompt) => (
+                <div key={prompt.id} className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-3">
+                  <div className="flex items-center justify-between gap-4">
+                    <div>
+                      <span className="text-[10px] font-bold text-red-400 bg-red-500/10 px-2 py-0.5 rounded border border-red-500/20">
+                        {prompt.category}
+                      </span>
+                      <h3 className="font-bold text-white text-base mt-1">{prompt.title}</h3>
+                      <p className="text-xs text-slate-400">{prompt.description}</p>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                      <button
+                        onClick={() => handleOpenPromptEdit(prompt)}
+                        className="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-xs font-bold text-sky-400 flex items-center gap-1"
+                      >
+                        <Edit className="w-3.5 h-3.5" />
+                        <span>Edit</span>
+                      </button>
+
+                      <button
+                        onClick={() => handleDeletePrompt(prompt.id, prompt.title)}
+                        className="p-1.5 rounded-xl bg-slate-800 hover:bg-red-600 text-slate-400 hover:text-white transition-colors"
+                        title="Delete Prompt"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+
+                  <div className="p-3 rounded-xl bg-slate-950 border border-slate-800 text-xs font-mono text-slate-300 line-clamp-2">
+                    {prompt.content}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* TAB 5: CATEGORIES CRUD */}
         {activeTab === 'categories' && (
           <div className="space-y-6">
             
@@ -899,7 +1055,7 @@ export default function AdminPage() {
           </div>
         )}
 
-        {/* TAB 5: USERS / ADMINS */}
+        {/* TAB 6: USERS / ADMINS */}
         {activeTab === 'users' && (
           <div className="space-y-6">
             {/* Create User Form */}
@@ -971,7 +1127,7 @@ export default function AdminPage() {
           </div>
         )}
 
-        {/* TAB 6: SETTINGS */}
+        {/* TAB 7: SETTINGS */}
         {activeTab === 'settings' && (
           <form onSubmit={handleSaveSettings} className="p-6 sm:p-8 rounded-3xl bg-slate-900/60 border border-slate-800 space-y-6">
             <h2 className="text-lg font-extrabold text-white flex items-center gap-2 border-b border-slate-800 pb-4">
@@ -1033,7 +1189,7 @@ export default function AdminPage() {
           </form>
         )}
 
-        {/* TAB 7: MESSAGES */}
+        {/* TAB 8: MESSAGES */}
         {activeTab === 'messages' && (
           <div className="space-y-4">
             <h2 className="text-lg font-bold text-white">Viewer Contact Messages ({messages.length})</h2>
@@ -1063,6 +1219,103 @@ export default function AdminPage() {
 
       </main>
 
+      {/* CREATE / EDIT PROMPT FORM MODAL */}
+      {isPromptFormOpen && (
+        <div className="fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-md flex items-center justify-center p-4 overflow-y-auto">
+          <div className="w-full max-w-2xl bg-slate-900 border border-slate-800 rounded-3xl p-6 sm:p-8 space-y-6 shadow-2xl my-8">
+            <div className="flex items-center justify-between border-b border-slate-800 pb-4">
+              <h2 className="text-xl font-bold text-white flex items-center gap-2">
+                <Sparkles className="w-5 h-5 text-red-500" />
+                <span>{editingPromptId ? 'Edit AI Prompt' : 'Create New AI Prompt'}</span>
+              </h2>
+              <button onClick={() => setIsPromptFormOpen(false)} className="p-1.5 rounded-lg bg-slate-800 text-slate-400 hover:text-white">
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            <form onSubmit={handleSavePrompt} className="space-y-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs font-bold text-slate-300 mb-1">Title</label>
+                  <input
+                    type="text"
+                    required
+                    value={promptTitle}
+                    onChange={(e) => setPromptTitle(e.target.value)}
+                    placeholder="Full-Stack Next.js Architect"
+                    className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-xs text-white focus:outline-none"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-bold text-slate-300 mb-1">Category</label>
+                  <input
+                    type="text"
+                    required
+                    value={promptCategory}
+                    onChange={(e) => setPromptCategory(e.target.value)}
+                    placeholder="System Architecture / UI Design"
+                    className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-xs text-white focus:outline-none"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-xs font-bold text-slate-300 mb-1">Short Description</label>
+                <textarea
+                  rows={2}
+                  required
+                  value={promptDesc}
+                  onChange={(e) => setPromptDesc(e.target.value)}
+                  placeholder="Overview of what this system prompt does..."
+                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-xs text-white focus:outline-none"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-bold text-slate-300 mb-1">System Prompt Content</label>
+                <textarea
+                  rows={6}
+                  required
+                  value={promptContent}
+                  onChange={(e) => setPromptContent(e.target.value)}
+                  placeholder="You are a Senior Next.js 16 Architect..."
+                  className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs font-mono text-slate-200 focus:outline-none"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-bold text-slate-300 mb-1">Tags (Comma separated)</label>
+                <input
+                  type="text"
+                  value={promptTagsText}
+                  onChange={(e) => setPromptTagsText(e.target.value)}
+                  placeholder="Next.js, System Prompt, AI"
+                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-xs text-white focus:outline-none"
+                />
+              </div>
+
+              <div className="flex justify-end gap-3 pt-4 border-t border-slate-800">
+                <button
+                  type="button"
+                  onClick={() => setIsPromptFormOpen(false)}
+                  className="px-4 py-2 rounded-xl bg-slate-800 text-xs font-bold text-slate-300"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={savingPrompt}
+                  className="px-5 py-2 bg-red-600 hover:bg-red-500 text-white text-xs font-bold rounded-xl flex items-center gap-2"
+                >
+                  {savingPrompt ? 'Saving...' : 'Save Prompt'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
       {/* CREATE / EDIT CHEATSHEET FORM MODAL */}
       {isCheatFormOpen && (
         <div className="fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-md flex items-center justify-center p-4 overflow-y-auto">

app/[locale]/prompts/[slug]/page.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { useState, useEffect, use } from 'react';
+import Link from 'next/link';
+import { getPromptBySlug } from '@/lib/actions/promptActions';
+import { ArrowLeft, Copy, Check, Sparkles, Tag, Share2 } from 'lucide-react';
+
+export default function PromptDetailPage({ params }: { params: Promise<{ locale: string; slug: string }> }) {
+  const { locale, slug } = use(params);
+  const [prompt, setPrompt] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [copied, setCopied] = useState(false);
+  const [copiedLink, setCopiedLink] = useState(false);
+
+  useEffect(() => {
+    async function loadData() {
+      setLoading(true);
+      const res = await getPromptBySlug(slug);
+      setPrompt(res);
+      setLoading(false);
+    }
+    loadData();
+  }, [slug]);
+
+  const handleCopyPrompt = async () => {
+    if (!prompt) return;
+    try {
+      await navigator.clipboard.writeText(prompt.content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Copy error:', err);
+    }
+  };
+
+  const handleShare = async () => {
+    try {
+      await navigator.clipboard.writeText(window.location.href);
+      setCopiedLink(true);
+      setTimeout(() => setCopiedLink(false), 2000);
+    } catch (err) {
+      console.error('Share error:', err);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 py-24 text-center text-slate-400 flex flex-col items-center justify-center gap-3">
+        <p className="text-sm font-semibold">Loading prompt...</p>
+      </div>
+    );
+  }
+
+  if (!prompt) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 py-24 text-center space-y-4">
+        <h1 className="text-2xl font-bold text-white">Prompt Not Found</h1>
+        <Link href={`/${locale}/prompts`} className="text-xs font-bold text-red-400 hover:underline">
+          ← Back to Prompts Library
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-8 flex-1 w-full">
+      
+      {/* Navigation & Share Bar */}
+      <div className="flex items-center justify-between gap-4">
+        <Link
+          href={`/${locale}/prompts`}
+          className="flex items-center gap-1.5 px-3.5 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-slate-300 text-xs font-bold border border-slate-800 transition-colors"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          <span>Back to Prompts</span>
+        </Link>
+
+        <button
+          onClick={handleShare}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-900 hover:bg-slate-800 text-slate-300 text-xs font-semibold border border-slate-800 transition-colors"
+        >
+          {copiedLink ? (
+            <>
+              <Check className="w-3.5 h-3.5 text-emerald-400" />
+              <span className="text-emerald-400">Link Copied</span>
+            </>
+          ) : (
+            <>
+              <Share2 className="w-3.5 h-3.5 text-slate-400" />
+              <span>Share Prompt</span>
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Header Banner */}
+      <div className="p-8 rounded-3xl bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900 border border-slate-800 space-y-4 shadow-2xl">
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-xs font-bold text-red-400 bg-red-500/10 px-3 py-1 rounded-full border border-red-500/20">
+            {prompt.category}
+          </span>
+
+          {prompt.tags?.map((t: string) => (
+            <span key={t} className="text-[11px] text-slate-400 px-2.5 py-0.5 rounded-full bg-slate-800 border border-slate-700">
+              #{t}
+            </span>
+          ))}
+        </div>
+
+        <h1 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight leading-snug">
+          {prompt.title}
+        </h1>
+
+        <p className="text-sm text-slate-400 max-w-3xl leading-relaxed">
+          {prompt.description}
+        </p>
+      </div>
+
+      {/* Full Prompt Container */}
+      <div className="p-6 sm:p-8 rounded-3xl bg-slate-900/60 border border-slate-800 space-y-4 shadow-2xl">
+        <div className="flex items-center justify-between">
+          <h2 className="text-base font-bold text-white flex items-center gap-2">
+            <Sparkles className="w-4 h-4 text-red-400" />
+            <span>AI System Prompt Content</span>
+          </h2>
+
+          <button
+            onClick={handleCopyPrompt}
+            className="px-4 py-2 bg-red-600 hover:bg-red-500 text-white text-xs font-bold rounded-xl flex items-center gap-2 shadow-lg shadow-red-600/30 transition-all"
+          >
+            {copied ? (
+              <>
+                <Check className="w-4 h-4 text-emerald-300" />
+                <span>Copied to Clipboard!</span>
+              </>
+            ) : (
+              <>
+                <Copy className="w-4 h-4" />
+                <span>Copy Full Prompt</span>
+              </>
+            )}
+          </button>
+        </div>
+
+        <div className="p-6 bg-slate-950 rounded-2xl border border-slate-800 font-mono text-xs text-slate-200 leading-relaxed overflow-x-auto">
+          <pre className="whitespace-pre-wrap">{prompt.content}</pre>
+        </div>
+      </div>
+
+    </div>
+  );
+}

app/[locale]/prompts/page.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import { useState, useEffect, use } from 'react';
+import Link from 'next/link';
+import { getPrompts } from '@/lib/actions/promptActions';
+import { Search, Sparkles, Copy, Check, Terminal, ArrowRight, Tag, BookOpen } from 'lucide-react';
+
+export default function PromptsPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = use(params);
+  const [search, setSearch] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [prompts, setPrompts] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function loadData() {
+      setLoading(true);
+      const res = await getPrompts({ query: search, category: selectedCategory || undefined });
+      setPrompts(res);
+      setLoading(false);
+    }
+    loadData();
+  }, [search, selectedCategory]);
+
+  const handleCopy = async (id: string, content: string) => {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopiedId(id);
+      setTimeout(() => setCopiedId(null), 2000);
+    } catch (err) {
+      console.error('Failed to copy prompt:', err);
+    }
+  };
+
+  const categories = Array.from(new Set(prompts.map((p) => p.category)));
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-10 flex-1 w-full">
+      
+      {/* Page Header */}
+      <div className="space-y-3">
+        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/10 text-red-400 text-xs font-bold border border-red-500/20">
+          <Sparkles className="w-4 h-4" />
+          <span>Curated AI System Prompts & Templates</span>
+        </div>
+        <h1 className="text-3xl sm:text-5xl font-black text-white tracking-tight">
+          AI Prompts & Agent Templates Library
+        </h1>
+        <p className="text-sm text-slate-400 max-w-2xl">
+          Battle-tested system prompts, coding instructions, and LLM templates for ChatGPT, Claude, and Antigravity agents.
+        </p>
+      </div>
+
+      {/* Search & Filter Bar */}
+      <div className="flex flex-col md:flex-row items-center justify-between gap-4 bg-slate-900/80 p-4 rounded-2xl border border-slate-800">
+        
+        {/* Search Input */}
+        <div className="relative w-full md:w-96">
+          <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
+          <input
+            type="text"
+            placeholder="Search AI prompts, keywords, or system roles..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full bg-slate-950 border border-slate-800 rounded-xl pl-10 pr-4 py-2 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-red-500/50"
+          />
+        </div>
+
+        {/* Category Filter Pills */}
+        <div className="flex items-center gap-2 overflow-x-auto w-full md:w-auto py-1 scrollbar-none">
+          <button
+            onClick={() => setSelectedCategory(null)}
+            className={`px-3 py-1.5 rounded-xl text-xs font-bold whitespace-nowrap transition-all ${
+              selectedCategory === null
+                ? 'bg-red-600 text-white shadow-md shadow-red-600/30'
+                : 'bg-slate-950 text-slate-400 hover:text-white border border-slate-800'
+            }`}
+          >
+            All Prompts
+          </button>
+          {categories.map((cat) => (
+            <button
+              key={cat}
+              onClick={() => setSelectedCategory(selectedCategory === cat ? null : cat)}
+              className={`px-3 py-1.5 rounded-xl text-xs font-bold whitespace-nowrap transition-all ${
+                selectedCategory === cat
+                  ? 'bg-red-600 text-white shadow-md shadow-red-600/30'
+                  : 'bg-slate-950 text-slate-400 hover:text-white border border-slate-800'
+              }`}
+            >
+              {cat}
+            </button>
+          ))}
+        </div>
+
+      </div>
+
+      {/* Prompts Grid */}
+      {loading ? (
+        <div className="p-12 text-center text-slate-400 flex items-center justify-center gap-2">
+          <span>Loading prompts...</span>
+        </div>
+      ) : prompts.length > 0 ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {prompts.map((item) => (
+            <div
+              key={item.id}
+              className="p-6 rounded-3xl bg-slate-900/60 border border-slate-800 hover:border-slate-700 transition-all flex flex-col justify-between space-y-4 shadow-xl group"
+            >
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px] font-bold text-red-400 bg-red-500/10 px-2.5 py-0.5 rounded-full border border-red-500/20">
+                    {item.category}
+                  </span>
+                  <div className="flex items-center gap-1.5 text-[10px] text-slate-500 font-mono">
+                    <Tag className="w-3 h-3 text-slate-400" />
+                    <span>{item.tags?.join(', ')}</span>
+                  </div>
+                </div>
+
+                <h3 className="font-bold text-lg text-white group-hover:text-red-400 transition-colors">
+                  <Link href={`/${locale}/prompts/${item.slug}`}>
+                    {item.title}
+                  </Link>
+                </h3>
+
+                <p className="text-xs text-slate-400 line-clamp-2 leading-relaxed">
+                  {item.description}
+                </p>
+
+                {/* Prompt Code Preview Box */}
+                <div className="p-4 bg-slate-950 rounded-2xl border border-slate-800 text-xs font-mono text-slate-300 relative group/code overflow-hidden">
+                  <pre className="whitespace-pre-wrap line-clamp-3 leading-relaxed">
+                    {item.content}
+                  </pre>
+
+                  <button
+                    onClick={() => handleCopy(item.id, item.content)}
+                    className="absolute top-2 right-2 px-2.5 py-1 rounded-lg bg-slate-900 border border-slate-800 text-[11px] font-bold text-slate-300 hover:text-white flex items-center gap-1 shadow-md transition-colors"
+                  >
+                    {copiedId === item.id ? (
+                      <>
+                        <Check className="w-3.5 h-3.5 text-emerald-400" />
+                        <span className="text-emerald-400">Copied!</span>
+                      </>
+                    ) : (
+                      <>
+                        <Copy className="w-3.5 h-3.5 text-slate-400" />
+                        <span>Copy</span>
+                      </>
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              <div className="pt-2 flex items-center justify-between">
+                <Link
+                  href={`/${locale}/prompts/${item.slug}`}
+                  className="inline-flex items-center gap-1.5 text-xs font-bold text-red-400 hover:text-red-300 transition-colors"
+                >
+                  <span>View Full Prompt & Usage</span>
+                  <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="p-12 text-center bg-slate-900/40 rounded-2xl border border-slate-800 text-slate-400 text-xs">
+          No prompts found matching your search.
+        </div>
+      )}
+
+    </div>
+  );
+}