OpenCode
68a9071cf1
Local branch had diverged from origin/master (sibling commits on the same base). Rewrote local history linearly on top of origin/master, folding in all local content: exa/hot-platform discovery hunters, leaks ledger, nightly sweep orchestrator, updated .gitignore and skill docs, plus the latest hunt output and vault state. Remote-only files (vault keys, channel scripts) were restored rather than dropped, so the resulting tree is a full union of both sides.
1 line
29 KiB
JSON
1 line
29 KiB
JSON
{"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"}}}} |