{"repo": "bilo-io/clawsome", "files": {"apps/website/app/marketplace/page.tsx": {"d0e908eb5d03d0289fb37565fc50bdbc1f0fd3bf": {"t": 1786068559.300993, "n": 28531, "h": "cd41a4765589b238", "c": "'use client';\n\nimport React, { useState, useMemo, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { \n  Search, \n  Puzzle, \n  Cpu, \n  Zap, \n  Github, \n  MessageSquare, \n  Cloud, \n  Database, \n  Shield, \n  Layers, \n  Code,\n  Layout,\n  Terminal,\n  Activity,\n  HardDrive,\n  Globe,\n  Lock,\n  ExternalLink,\n  ChevronRight,\n  Filter,\n  Sparkles,\n  Command,\n  Settings,\n  Container,\n  GitPullRequest,\n  Coffee,\n  Package,\n  Layers2,\n  Box,\n  CreditCard,\n  Target,\n  FileCode,\n  Smartphone,\n  Server,\n  Monitor,\n  Key,\n  DatabaseZap,\n  Network,\n  Wand2,\n  BrainCircuit,\n  MessageCircle,\n  Eye,\n  Wind,\n  MousePointer2,\n  PenTool,\n  Workflow,\n  ShieldCheck,\n  Chrome,\n  Mic,\n  Mail,\n  Clock,\n  Webhook,\n  CloudSun,\n  Music,\n  Volume2,\n  Lightbulb,\n  Moon,\n  Home,\n  Bot,\n  Smile,\n  Apple\n} from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport BackgroundVideo from '@/components/BackgroundVideo';\nimport BackgroundAnimated from '@/components/BackgroundAnimated';\n\ntype Category = 'All' | 'Skills' | 'Integrations' | 'Plugins' | 'MCP' | 'Automation' | 'Models' | 'Platforms';\n\ninterface MarketplaceItem {\n  id: string;\n  name: string;\n  category: Category;\n  description: string;\n  icon: React.ReactNode;\n  isNew?: boolean;\n  isPopular?: boolean;\n}\n\nconst ITEMS: MarketplaceItem[] = [\n  // SKILLS (20)\n  { id: '1', name: 'Neural Reasoning Engine', category: 'Skills', description: 'Deep logical analysis capability for complex problem-solving.', icon: <BrainCircuit className=\"w-6 h-6\" />, isPopular: true },\n  { id: '2', name: 'Contextual Memory Matrix', category: 'Skills', description: 'Enhanced long-term context retention for lengthy coding sessions.', icon: <HardDrive className=\"w-6 h-6\" /> },\n  { id: '3', name: 'Recursive Debugger', category: 'Skills', description: 'Self-correcting code analysis and bug fixing in real-time.', icon: <Target className=\"w-6 h-6\" />, isNew: true },\n  { id: '4', name: 'Multi-Agent Orchestrator', category: 'Skills', description: 'Coordinate complex swarms of AI agents with precision.', icon: <Workflow className=\"w-6 h-6\" />, isPopular: true },\n  { id: '5', name: 'Semantic Code Search', category: 'Skills', description: 'Find logic patterns across your codebase, not just strings.', icon: <Search className=\"w-6 h-6\" /> },\n  { id: '6', name: 'Automated Refactoring', category: 'Skills', description: 'Instant code architectural improvements and cleanup.', icon: <Code className=\"w-6 h-6\" /> },\n  { id: '7', name: 'Doc-Gen Specialist', category: 'Skills', description: 'Lightning-fast technical documentation from your source code.', icon: <FileCode className=\"w-6 h-6\" /> },\n  { id: '8', name: 'Security Vulnerability Scanner', category: 'Skills', description: 'Proactive threat detection and security auditing.', icon: <Shield className=\"w-6 h-6\" />, isPopular: true },\n  { id: '9', name: 'Performance Profiling', category: 'Skills', description: 'Deep-dive system bottleneck analysis and optimization.', icon: <Activity className=\"w-6 h-6\" /> },\n  { id: '10', name: 'Unit Test Generator', category: 'Skills', description: 'Comprehensive test coverage generation for all functions.', icon: <Settings className=\"w-6 h-6\" /> },\n  { id: '11', name: 'Dependency Map Visualizer', category: 'Skills', description: 'Visualize and manage complex project dependency graphs.', icon: <Layers className=\"w-6 h-6\" /> },\n  { id: '12', name: 'Language Translator', category: 'Skills', description: 'Polyglot assistant fluent in 100+ programming languages.', icon: <Globe className=\"w-6 h-6\" /> },\n  { id: '13', name: 'Regex Wizard', category: 'Skills', description: 'Master complex string manipulations with neural assistance.', icon: <Wand2 className=\"w-6 h-6\" /> },\n  { id: '14', name: 'Database Schema Designer', category: 'Skills', description: 'Optimized data architecture design and migration tools.', icon: <DatabaseZap className=\"w-6 h-6\" /> },\n  { id: '15', name: 'API Request Optimizer', category: 'Skills', description: 'Minimize latency and maximize throughput for your endpoints.', icon: <Zap className=\"w-6 h-6\" /> },\n  { id: '16', name: 'Cloud Infra Architect', category: 'Skills', description: 'Design serverless and K8s setups with AI-driven best practices.', icon: <Cloud className=\"w-6 h-6\" /> },\n  { id: '17', name: 'Framework Porter', category: 'Skills', description: 'Seamlessly port code between React, Vue, and Svelte.', icon: <Layout className=\"w-6 h-6\" />, isNew: true },\n  { id: '18', name: 'TypeScript Migration', category: 'Skills', description: 'Elevate legacy JavaScript to strict, safe TypeScript.', icon: <FileCode className=\"w-6 h-6\" /> },\n  { id: '19', name: 'Legacy Modernizer', category: 'Skills', description: 'Breathe life into outdated repositories and technical debt.', icon: <Cpu className=\"w-6 h-6\" /> },\n  { id: '20', name: 'Personality Tuner', category: 'Skills', description: 'Customize your AI agent\\'s voice, tone, and behavior.', icon: <MessageSquare className=\"w-6 h-6\" /> },\n\n  // INTEGRATIONS (20)\n  { id: '21', name: 'GitHub Synapse', category: 'Integrations', description: 'Deep integration with Pull Requests, Issues, and Actions.', icon: <Github className=\"w-6 h-6\" />, isPopular: true },\n  { id: '22', name: 'Discord Hive', category: 'Integrations', description: 'Real-time agent communication within your community server.', icon: <MessageCircle className=\"w-6 h-6\" /> },\n  { id: '23', name: 'Slack Nerve Center', category: 'Integrations', description: 'Execute commands and receive updates directly in Slack.', icon: <Zap className=\"w-6 h-6\" /> },\n  { id: '24', name: 'Linear Sync Flow', category: 'Integrations', description: 'Automated task tracking and progress synchronization.', icon: <Target className=\"w-6 h-6\" /> },\n  { id: '25', name: 'MCP Cyber-Link', category: 'Integrations', description: 'Universal Model Context Protocol bridge for all agents.', icon: <Network className=\"w-6 h-6\" />, isPopular: true },\n  { id: '26', name: 'Notion Knowledge Base', category: 'Integrations', description: 'Bi-directional sync between docs and codebases.', icon: <Layers2 className=\"w-6 h-6\" /> },\n  { id: '27', name: 'PostgreSQL Bridge', category: 'Integrations', description: 'Direct neural SQL querying and schema administration.', icon: <Database className=\"w-6 h-6\" /> },\n  { id: '28', name: 'AWS Cloud Hub', category: 'Integrations', description: 'Zero-config management of EC2, S3, and Lambda.', icon: <Cloud className=\"w-6 h-6\" /> },\n  { id: '29', name: 'GCP Connector', category: 'Integrations', description: 'Seamlessly manage Google Cloud resources and IAM.', icon: <Cloud className=\"w-6 h-6\" /> },\n  { id: '30', name: 'Azure Enterprise', category: 'Integrations', description: 'Enterprise-grade Microsoft Azure infrastructure tools.', icon: <Cloud className=\"w-6 h-6\" /> },\n  { id: '31', name: 'Stripe Gateway', category: 'Integrations', description: 'Neural-powered billing and payment logic integration.', icon: <CreditCard className=\"w-6 h-6\" /> },\n  { id: '32', name: 'Sentry Watchtower', category: 'Integrations', description: 'Automated error triaging and self-healing bug fixes.', icon: <Eye className=\"w-6 h-6\" />, isNew: true },\n  { id: '33', name: 'Datadog Metrics', category: 'Integrations', description: 'Visual observability and real-time dashboard sync.', icon: <Activity className=\"w-6 h-6\" /> },\n  { id: '34', name: 'Firebase Realtime', category: 'Integrations', description: 'Fast, synchronized data for web and mobile apps.', icon: <Zap className=\"w-6 h-6\" /> },\n  { id: '35', name: 'Supabase Edge', category: 'Integrations', description: 'Native support for Supabase Auth and Edge functions.', icon: <DatabaseZap className=\"w-6 h-6\" /> },\n  { id: '36', name: 'Twilio Cell-Link', category: 'Integrations', description: 'SMS, Voice, and WhatsApp neural automation.', icon: <Smartphone className=\"w-6 h-6\" /> },\n  { id: '37', name: 'Netlify Deployer', category: 'Integrations', description: 'Continuous delivery automation for modern web apps.', icon: <UploadCloud className=\"w-6 h-6\" /> },\n  { id: '38', name: 'Vercel Edge Hub', category: 'Integrations', description: 'Optimize and deploy Next.js apps with one command.', icon: <Zap className=\"w-6 h-6\" />, isPopular: true },\n  { id: '39', name: 'K8s Cluster Master', category: 'Integrations', description: 'Visual orchestration and scaling of Kubernetes clusters.', icon: <Container className=\"w-6 h-6\" /> },\n  { id: '40', name: 'Docker Forge', category: 'Integrations', description: 'Automated containerization and image management.', icon: <Box className=\"w-6 h-6\" /> },\n\n  // PLUGINS (10)\n  { id: '41', name: 'Omni-Workflow Max', category: 'Plugins', description: 'One-click full-stack project scaffolding and setup.', icon: <Workflow className=\"w-6 h-6\" />, isPopular: true },\n  { id: '42', name: 'Quantum Speed-Code', category: 'Plugins', description: 'Predictive neural code generation at 10x speeds.', icon: <Zap className=\"w-6 h-6\" />, isNew: true },\n  { id: '43', name: 'Ethereal Live-Docs', category: 'Plugins', description: 'Floating live documentation that follows your cursor.', icon: <FileCode className=\"w-6 h-6\" /> },\n  { id: '44', name: 'Cyber-Security Shield', category: 'Plugins', description: 'Real-time intrusion detection and behavioral blocking.', icon: <Shield className=\"w-6 h-6\" />, isPopular: true },\n  { id: '45', name: 'Data-Vault Secret', category: 'Plugins', description: 'End-to-end encrypted secrets and environment variables.', icon: <Lock className=\"w-6 h-6\" /> },\n  { id: '46', name: 'Auto-Scale Prophet', category: 'Plugins', description: 'Predictive infrastructure scaling based on traffic.', icon: <Wind className=\"w-6 h-6\" /> },\n  { id: '47', name: 'Stitch Loop UI', category: 'Plugins', description: 'Real-time frontend component prototyping and testing.', icon: <Layout className=\"w-6 h-6\" />, isPopular: true },\n  { id: '48', name: 'Aesthetic Refiner', category: 'Plugins', description: 'Automated UI polish, spacing, and design consistency.', icon: <PenTool className=\"w-6 h-6\" /> },\n  { id: '49', name: 'Ghost-Writer AI', category: 'Plugins', description: 'Generative technical writing for blogs and changelogs.', icon: <MessageSquare className=\"w-6 h-6\" /> },\n  { id: '50', name: 'Nightshade Terminal', category: 'Plugins', description: 'A custom, neural-enhanced CLI theme for pro developers.', icon: <Terminal className=\"w-6 h-6\" />, isNew: true },\n  \n  // MCP (5)\n  { id: '51', name: 'MCP Slack Bridge', category: 'MCP', description: 'Expose Slack channels as MCP resources for your agents.', icon: <MessageSquare className=\"w-6 h-6\" />, isPopular: true },\n  { id: '52', name: 'MCP GitHub Context', category: 'MCP', description: 'Seamlessly link GitHub repositories as agent context.', icon: <Github className=\"w-6 h-6\" />, isPopular: true },\n  { id: '53', name: 'MCP Google Maps', category: 'MCP', description: 'Enable agents to \\'see\\' and \\'navigate\\' through geographical data.', icon: <Globe className=\"w-6 h-6\" />, isNew: true },\n  { id: '54', name: 'MCP Notion Knowledge', category: 'MCP', description: 'Access Notion databases and pages as MCP tools.', icon: <Layers2 className=\"w-6 h-6\" /> },\n  { id: '55', name: 'MCP SQL Explorer', category: 'MCP', description: 'Turn your SQL databases into agent-ready MCP resources.', icon: <Database className=\"w-6 h-6\" /> },\n\n  // COMMUNICATIONS & SECURE (NEW)\n  { id: '56', name: 'Signal', category: 'Integrations', description: 'Secure, end-to-end encrypted communications for your agents.', icon: <ShieldCheck className=\"w-6 h-6 text-blue-500\" />, isPopular: true },\n  { id: '57', name: 'iMessage', category: 'Integrations', description: 'Native Apple messaging integration for seamless notification swarms.', icon: <MessageCircle className=\"w-6 h-6 text-blue-400\" /> },\n\n  // TOOLS & AUTOMATION\n  { id: '58', name: 'Browser', category: 'Automation', description: 'Full Chrome/Chromium control and web navigation.', icon: <Chrome className=\"w-6 h-6 text-blue-500\" />, isPopular: true },\n  { id: '59', name: 'Canvas', category: 'Automation', description: 'Visual workspace + A2UI for interactive agent collaboration.', icon: <Layout className=\"w-6 h-6 text-orange-500\" /> },\n  { id: '60', name: 'Voice', category: 'Automation', description: 'Voice Wake + Talk Mode for hands-free agent interaction.', icon: <Mic className=\"w-6 h-6 text-purple-500\" /> },\n  { id: '61', name: 'Gmail', category: 'Automation', description: 'Pub/Sub email triggers and automated inbox management.', icon: <Mail className=\"w-6 h-6 text-red-500\" /> },\n  { id: '62', name: 'Cron', category: 'Automation', description: 'Powerful scheduled tasks and recurring agent workflows.', icon: <Clock className=\"w-6 h-6 text-amber-500\" /> },\n  { id: '63', name: 'Webhooks', category: 'Automation', description: 'External triggers to initiate agent actions from any service.', icon: <Webhook className=\"w-6 h-6 text-emerald-500\" /> },\n  { id: '64', name: '1Password', category: 'Automation', description: 'Secure credentials and vault management for agent identities.', icon: <Key className=\"w-6 h-6 text-blue-400\" /> },\n  { id: '65', name: 'Weather', category: 'Automation', description: 'Real-time forecasts and conditions for location-aware tasks.', icon: <CloudSun className=\"w-6 h-6 text-yellow-500\" /> },\n\n  // MUSIC & AUDIO & SMART HOME\n  { id: '66', name: 'Spotify', category: 'Integrations', description: 'Music playback control and playlist management.', icon: <Music className=\"w-6 h-6 text-emerald-500\" /> },\n  { id: '67', name: 'Sonos', category: 'Integrations', description: 'Multi-room audio control for smart environment orchestration.', icon: <Volume2 className=\"w-6 h-6 text-slate-400\" /> },\n  { id: '68', name: 'Shazam', category: 'Integrations', description: 'Neural song recognition and audio fingerprinting.', icon: <Zap className=\"w-6 h-6 text-blue-500\" /> },\n  { id: '69', name: 'Philips Hue', category: 'Integrations', description: 'Smart lighting automation and scene management.', icon: <Lightbulb className=\"w-6 h-6 text-yellow-400\" /> },\n  { id: '70', name: '8Sleep', category: 'Integrations', description: 'Biometric-driven environment tuning and sleep optimization.', icon: <Moon className=\"w-6 h-6 text-indigo-400\" /> },\n  { id: '71', name: 'Home Assistant', category: 'Integrations', description: 'Unified home automation hub for all IoT devices.', icon: <Home className=\"w-6 h-6 text-blue-500\" /> },\n\n  // AI MODELS\n  { id: '72', name: 'Anthropic', category: 'Models', description: 'Next-gen reasoning with Claude Pro, Max, and Opus 4.5.', icon: <Bot className=\"w-6 h-6 text-orange-400\" />, isPopular: true },\n  { id: '73', name: 'OpenAI', category: 'Models', description: 'Industry-leading intelligence with GPT-4, GPT-5, and o1.', icon: <Cpu className=\"w-6 h-6 text-emerald-500\" />, isPopular: true },\n  { id: '74', name: 'Google Gemini', category: 'Models', description: 'Multimodal power with Gemini 2.5 Pro and Flash.', icon: <Search className=\"w-6 h-6 text-blue-500\" /> },\n  { id: '75', name: 'MiniMax', category: 'Models', description: 'Advanced MiniMax-M2.5 models for efficient reasoning.', icon: <Zap className=\"w-6 h-6 text-pink-500\" /> },\n  { id: '76', name: 'xAI Grok', category: 'Models', description: 'Real-time knowledge and reasoning with Grok 3 & 4.', icon: <Sparkles className=\"w-6 h-6 text-slate-900 dark:text-white\" /> },\n  { id: '77', name: 'Vercel AI Gateway', category: 'Models', description: 'Access hundreds of models with a single unified API key.', icon: <Network className=\"w-6 h-6 text-slate-900 dark:text-white\" /> },\n  { id: '78', name: 'OpenRouter', category: 'Models', description: 'The ultimate unified API gateway for all LLMs.', icon: <Layers className=\"w-6 h-6 text-indigo-500\" /> },\n  { id: '79', name: 'Mistral', category: 'Models', description: 'Mistral Large and Codestral for high-performance tasks.', icon: <Code className=\"w-6 h-6 text-orange-600\" /> },\n  { id: '80', name: 'DeepSeek', category: 'Models', description: 'DeepSeek V3 & R1 for specialized analytical workloads.', icon: <Target className=\"w-6 h-6 text-blue-600\" /> },\n  { id: '81', name: 'GLM', category: 'Models', description: 'ChatGLM models for multilingual and diverse interactions.', icon: <MessageSquare className=\"w-6 h-6 text-emerald-600\" /> },\n  { id: '82', name: 'Perplexity', category: 'Models', description: 'Search-augmented AI for real-time web-grounded truth.', icon: <Globe className=\"w-6 h-6 text-cyan-500\" /> },\n  { id: '83', name: 'Hugging Face', category: 'Models', description: 'Access to 100k+ open-source models and datasets.', icon: <Smile className=\"w-6 h-6 text-yellow-500\" /> },\n  { id: '84', name: 'Local Models', category: 'Models', description: 'Private, on-device intelligence with Ollama and LM Studio.', icon: <HardDrive className=\"w-6 h-6 text-slate-400\" /> },\n\n  // PLATFORMS\n  { id: '85', name: 'macOS', category: 'Platforms', description: 'Native menu bar app + Voice Wake for desktop operators.', icon: <Apple className=\"w-6 h-6\" />, isPopular: true },\n  { id: '86', name: 'iOS', category: 'Platforms', description: 'Mobile Canvas, camera integration, and Voice Wake.', icon: <Smartphone className=\"w-6 h-6 text-blue-500\" /> },\n  { id: '87', name: 'Android', category: 'Platforms', description: 'Full screen mirror, Canvas, and camera automation.', icon: <Smartphone className=\"w-6 h-6 text-emerald-500\" /> },\n  { id: '88', name: 'Windows', category: 'Platforms', description: 'Deep WSL2 integration for high-performance agent runs.', icon: <Monitor className=\"w-6 h-6 text-blue-400\" /> },\n  { id: '89', name: 'Linux', category: 'Platforms', description: 'Native kernel-level support for server-side swarms.', icon: <Terminal className=\"w-6 h-6 text-yellow-600\" /> },\n];\n\nfunction UploadCloud({ className }: { className?: string }) {\n  return (\n    <svg \n      className={className} \n      viewBox=\"0 0 24 24\" \n      fill=\"none\" \n      stroke=\"currentColor\" \n      strokeWidth=\"2\" \n      strokeLinecap=\"round\" \n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242\" />\n      <path d=\"M12 12v9\" />\n      <path d=\"m16 16-4-4-4 4\" />\n    </svg>\n  );\n}\n\nexport default function MarketplacePage() {\n  const [activeCategory, setActiveCategory] = useState<Category>('All');\n  const [searchQuery, setSearchQuery] = useState('');\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const filteredItems = useMemo(() => {\n    return ITEMS.filter(item => {\n      const matchesCategory = activeCategory === 'All' || item.category === activeCategory;\n      const matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase()) || \n                           item.description.toLowerCase().includes(searchQuery.toLowerCase());\n      return matchesCategory && matchesSearch;\n    });\n  }, [activeCategory, searchQuery]);\n\n  const categories: Category[] = ['All', 'Skills', 'Integrations', 'Plugins', 'MCP', 'Automation', 'Models', 'Platforms'];\n\n  return (\n    <main className=\"min-h-screen relative transition-colors duration-500 overflow-hidden\">\n\n      {/* Decorative Background */}\n      {/* <div className=\"absolute inset-0 pointer-events-none\">\n        <div className=\"absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]\" />\n      </div> */}\n\n\n      {/* Hero Animated Background */}\n      <BackgroundAnimated />\n      <BackgroundVideo mounted={mounted} src={\"/videos/vid-space-river.mp4\"} />\n\n      <div className=\"relative z-10 pt-32 pb-20 px-6 max-w-7xl mx-auto\">\n        {/* Flashy Top Panel */}\n        <section className=\"text-center mb-16\">\n          <motion.div\n            initial={{ opacity: 0, y: 30 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}\n          >\n            <motion.div \n              initial={{ scale: 0.8, opacity: 0 }}\n              animate={{ scale: 1, opacity: 1 }}\n              transition={{ delay: 0.2, duration: 0.5 }}\n              className=\"inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-indigo-500/10 border border-indigo-500/20 mb-6 backdrop-blur-md\"\n            >\n              <Sparkles className=\"w-4 h-4 text-indigo-500 animate-pulse\" />\n              <span className=\"text-xs font-black text-indigo-600 dark:text-indigo-400 uppercase tracking-[0.2em]\">The Neural Marketplace</span>\n            </motion.div>\n            <h1 className=\"text-6xl md:text-8xl font-black tracking-tight mb-8 leading-[0.9] text-slate-900 dark:text-white\">\n              Infinite <br />\n              <span className=\"gradient-text italic\">Capabilities.</span>\n            </h1>\n            <p className=\"text-slate-700 dark:text-slate-400 text-lg md:text-2xl max-w-3xl mx-auto font-medium leading-relaxed\">\n              Unlock the full potential of your autonomous agents with our curated library of 50+ elite skills, integrations, and plugins.\n            </p>\n          </motion.div>\n\n          <motion.div \n            initial={{ opacity: 0, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            transition={{ delay: 0.2, duration: 0.5 }}\n            className=\"mt-12 max-w-2xl mx-auto w-full px-4\"\n          >\n            <div className=\"relative group w-full\">\n              {/* High-intensity outer glow */}\n              <div className=\"absolute -inset-4 bg-gradient-to-r from-[#8C00FF] to-[#008FD6] rounded-[40px] blur-3xl opacity-0 group-focus-within:opacity-20 dark:group-focus-within:opacity-30 transition duration-700\" />\n              \n              {/* Border Gradient Container */}\n              <div className=\"relative p-[1px] rounded-[26px] bg-gradient-to-r from-[#8C00FF] to-[#008FD6] transition-all duration-500 group-focus-within:shadow-2xl shadow-purple-600/10\">\n                <div className=\"relative glass-panel rounded-[25px] flex items-center px-6 py-4 transition-all duration-300 bg-white/95 dark:bg-slate-900/95 group-focus-within:bg-white dark:group-focus-within:bg-slate-950 group-focus-within:scale-[1.005]\">\n                  <Search className=\"w-6 h-6 text-slate-400 group-focus-within:text-[#008FD6] transition-colors mr-4\" />\n                  <input \n                    type=\"text\"\n                    placeholder=\"Search for skills, plugins, or tools...\"\n                    className=\"bg-transparent border-none focus:ring-0 focus-visible:ring-0 w-full text-slate-900 dark:text-white font-bold text-lg placeholder:text-slate-400 block outline-none focus:outline-none\"\n                    value={searchQuery}\n                    onChange={(e) => setSearchQuery(e.target.value)}\n                  />\n                  <kbd className=\"hidden sm:inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-100 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700/50 text-xs text-slate-400 font-mono group-focus-within:border-indigo-500/30 group-focus-within:text-indigo-400 transition-colors\">\n                    <span className=\"text-xs\">⌘</span>\n                    <span>K</span>\n                  </kbd>\n                </div>\n              </div>\n            </div>\n          </motion.div>\n        </section>\n\n        {/* Filters */}\n        <section className=\"flex flex-wrap justify-center gap-4 mb-12\">\n          {categories.map((category, index) => (\n            <motion.button\n              key={category}\n              initial={{ opacity: 0, y: 10 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: index * 0.1 + 0.3 }}\n              onClick={() => setActiveCategory(category)}\n              className={cn(\n                \"px-6 py-2.5 rounded-full text-sm font-bold transition-all duration-300\",\n                activeCategory === category \n                  ? \"bg-indigo-600 text-white shadow-lg shadow-indigo-600/30 scale-105\" \n                  : \"bg-white dark:bg-slate-800/50 text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 shadow-sm\"\n              )}\n            >\n              {category}\n            </motion.button>\n          ))}\n        </section>\n\n        {/* Grid */}\n        <section>\n          <motion.div \n            layout\n            className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\"\n          >\n            <AnimatePresence mode=\"popLayout\">\n              {filteredItems.map((item, index) => (\n                <motion.div\n                  key={item.id}\n                  layout\n                  initial={{ opacity: 0, scale: 0.9, y: 20 }}\n                  animate={{ opacity: 1, scale: 1, y: 0 }}\n                  exit={{ opacity: 0, scale: 0.9, y: 20 }}\n                  transition={{ \n                    duration: 0.4, \n                    delay: (index % 12) * 0.05,\n                    layout: { duration: 0.3 }\n                  }}\n                  whileHover={{ y: -5, scale: 1.02 }}\n                  className=\"group relative h-full\"\n                >\n                  <div className=\"absolute -inset-px bg-gradient-to-b from-indigo-500/20 to-purple-500/20 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500\" />\n                  <div className=\"relative h-full glass-panel rounded-2xl p-6 flex flex-col items-start gap-4 transition-all duration-300 group-hover:shadow-2xl group-hover:border-indigo-500/30 bg-white/80 dark:bg-slate-900/50 shadow-sm shadow-slate-200/50 dark:shadow-none\">\n                    <div className=\"flex items-center justify-between w-full\">\n                      <div className=\"p-3 bg-slate-100 dark:bg-slate-800 rounded-xl group-hover:bg-indigo-500 group-hover:text-white transition-colors duration-300\">\n                        {item.icon}\n                      </div>\n                      <div className=\"flex gap-2\">\n                        {item.isPopular && (\n                          <span className=\"px-2 py-0.5 rounded-md bg-amber-500/10 text-amber-600 dark:text-amber-400 text-[10px] font-black uppercase tracking-tighter border border-amber-500/20\">\n                            Popular\n                          </span>\n                        )}\n                        {item.isNew && (\n                          <span className=\"px-2 py-0.5 rounded-md bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 text-[10px] font-black uppercase tracking-tighter border border-emerald-500/20\">\n                            New\n                          </span>\n                        )}\n                      </div>\n                    </div>\n\n                    <div>\n                      <h3 className=\"text-lg font-black text-slate-900 dark:text-white mb-2 group-hover:text-indigo-500 transition-colors\">\n                        {item.name}\n                      </h3>\n                      <p className=\"text-sm text-slate-700 dark:text-slate-400 line-clamp-2 font-medium\">\n                        {item.description}\n                      </p>\n                    </div>\n\n                    <div className=\"mt-auto pt-4 flex items-center justify-between w-full border-t border-slate-200 dark:border-slate-800/50\">\n                      <span className=\"text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest\">\n                        {item.category}\n                      </span>\n                      <button className=\"p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-slate-100 dark:hover:bg-slate-800\">\n                        <ChevronRight className=\"w-4 h-4 text-indigo-500\" />\n                      </button>\n                    </div>\n                  </div>\n                </motion.div>\n              ))}\n            </AnimatePresence>\n          </motion.div>\n\n          {filteredItems.length === 0 && (\n            <motion.div \n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              className=\"text-center py-40\"\n            >\n              <div className=\"inline-flex p-6 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-400 mb-6\">\n                <Search className=\"w-12 h-12\" />\n              </div>\n              <h2 className=\"text-2xl font-bold text-slate-900 dark:text-white mb-2\">No items found</h2>\n              <p className=\"text-slate-500\">Try adjusting your search or category filters.</p>\n            </motion.div>\n          )}\n        </section>\n      </div>\n    </main>\n  );\n}\n"}}}}