Refactor: Replace emojis, redesign sidebars, and add chat messages
- Replaced all emojis with React icons. - Redesigned the sidebars with a more minimal and modern approach. - Added left navbar questions as messages in the chat interface.
This commit is contained in:
gpt-engineer-app[bot]
parent
ecc8826994
commit
c9e0114586
@ -23,6 +23,7 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onPromptSelect, isExpande
|
||||
const [isThinking, setIsThinking] = useState(false);
|
||||
|
||||
const handlePromptClick = (prompt: string) => {
|
||||
// Add user message
|
||||
setMessages(prev => [...prev, { text: prompt, isUser: true }]);
|
||||
setIsThinking(true);
|
||||
|
||||
@ -51,6 +52,19 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onPromptSelect, isExpande
|
||||
}
|
||||
};
|
||||
|
||||
// Listen for messages from left sidebar
|
||||
useEffect(() => {
|
||||
const handleLeftSidebarPrompt = (event: CustomEvent) => {
|
||||
handlePromptClick(event.detail.prompt);
|
||||
};
|
||||
|
||||
window.addEventListener('leftSidebarPrompt' as any, handleLeftSidebarPrompt);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('leftSidebarPrompt' as any, handleLeftSidebarPrompt);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full p-6">
|
||||
{/* Hero Section */}
|
||||
@ -59,7 +73,7 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onPromptSelect, isExpande
|
||||
isExpanded ? 'max-w-4xl mx-auto' : 'max-w-2xl mx-auto'
|
||||
}`}>
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
|
||||
<h1 className="text-4xl md:text-6xl font-medium text-gray-900 dark:text-white mb-6 leading-tight">
|
||||
Build an MCP server and become part of the new world
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8">
|
||||
@ -68,19 +82,19 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onPromptSelect, isExpande
|
||||
</div>
|
||||
|
||||
{/* Glassmorphism card with prompts */}
|
||||
<div className="w-full max-w-2xl p-8 rounded-3xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-white/10 dark:bg-black/10 shadow-2xl">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-6">
|
||||
<div className="w-full max-w-2xl p-8 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-white/10 dark:bg-black/10">
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-6">
|
||||
How can I help you today?
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{prompts.map((prompt, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant="ghost"
|
||||
onClick={() => handlePromptClick(prompt)}
|
||||
className="p-4 h-auto text-left justify-start border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5 hover:bg-white/10 dark:hover:bg-black/10 rounded-xl transition-all duration-300 hover:scale-105"
|
||||
className="p-4 h-auto text-left justify-start border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5 hover:bg-white/10 dark:hover:bg-black/10 rounded-xl transition-all duration-300 hover:scale-[1.02]"
|
||||
>
|
||||
<span className="text-gray-700 dark:text-gray-300">{prompt}</span>
|
||||
<span className="text-gray-700 dark:text-gray-300 text-sm">{prompt}</span>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useTheme } from '../contexts/ThemeContext';
|
||||
import { FiMenu, FiMessageSquare, FiExternalLink, FiHelpCircle, FiUsers, FiDollarSign, FiZap } from 'react-icons/fi';
|
||||
import { FiMenu, FiX, FiHelpCircle, FiUsers, FiDollarSign, FiZap, FiExternalLink } from 'react-icons/fi';
|
||||
|
||||
interface LeftSidebarProps {
|
||||
onPromptSelect: (prompt: string, content: any) => void;
|
||||
@ -30,7 +30,7 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ onPromptSelect }) => {
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
className="fixed top-24 left-4 z-50 w-10 h-10 rounded-full border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/10 dark:bg-black/10 hover:bg-white/20 dark:hover:bg-black/20 transition-all duration-300"
|
||||
className="fixed top-24 left-4 z-50 w-10 h-10 rounded-xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-md bg-white/80 dark:bg-black/80 hover:bg-white/90 dark:hover:bg-black/90 transition-all duration-300 shadow-lg"
|
||||
>
|
||||
<FiMenu className="w-4 h-4" />
|
||||
</Button>
|
||||
@ -38,62 +38,67 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ onPromptSelect }) => {
|
||||
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
className={`fixed left-0 top-20 h-[calc(100vh-80px)] w-64 transform transition-transform duration-500 ease-in-out z-40 ${
|
||||
className={`fixed left-0 top-20 h-[calc(100vh-80px)] w-72 transform transition-transform duration-500 ease-in-out z-40 ${
|
||||
sidebarOpen ? 'translate-x-0' : '-translate-x-full'
|
||||
}`}
|
||||
>
|
||||
<div className="h-full border-r border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-white/95 dark:bg-black/95">
|
||||
<div className="p-6 h-full">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Quick Actions
|
||||
<div className="h-full border-r border-gray-200/10 dark:border-gray-700/10 backdrop-blur-xl bg-white/90 dark:bg-black/90">
|
||||
<div className="p-6 h-full flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h2 className="text-lg font-medium text-gray-900 dark:text-white">
|
||||
Quick Start
|
||||
</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
className="w-8 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
className="w-8 h-8 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
<FiX className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Suggested Questions */}
|
||||
<div className="space-y-4 mb-8">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 uppercase tracking-wide">
|
||||
Suggested Questions
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{suggestedQuestions.map((question, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant="ghost"
|
||||
onClick={() => handlePromptClick(question.text)}
|
||||
className="w-full justify-start p-3 h-auto text-left border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5 hover:bg-white/10 dark:hover:bg-black/10 rounded-xl transition-all duration-300"
|
||||
>
|
||||
<question.icon className="w-4 h-4 mr-3 text-gray-500 dark:text-gray-400" />
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">{question.text}</span>
|
||||
</Button>
|
||||
))}
|
||||
<div className="flex-1 space-y-6">
|
||||
<div>
|
||||
<h3 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">
|
||||
Explore Features
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{suggestedQuestions.map((question, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant="ghost"
|
||||
onClick={() => handlePromptClick(question.text)}
|
||||
className="w-full justify-start p-4 h-auto text-left rounded-xl border-0 bg-transparent hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all duration-200 group"
|
||||
>
|
||||
<question.icon className="w-4 h-4 mr-3 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors" />
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white transition-colors">
|
||||
{question.text}
|
||||
</span>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Website Link */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 uppercase tracking-wide">
|
||||
Resources
|
||||
</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
asChild
|
||||
className="w-full justify-start p-3 h-auto text-left border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5 hover:bg-white/10 dark:hover:bg-black/10 rounded-xl transition-all duration-300"
|
||||
>
|
||||
<a href="https://yourdomain.com" target="_blank" rel="noopener noreferrer">
|
||||
<FiExternalLink className="w-4 h-4 mr-3 text-gray-500 dark:text-gray-400" />
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">Visit Our Website</span>
|
||||
</a>
|
||||
</Button>
|
||||
{/* Website Link */}
|
||||
<div className="pt-6 border-t border-gray-200/20 dark:border-gray-700/20">
|
||||
<h3 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">
|
||||
Resources
|
||||
</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
asChild
|
||||
className="w-full justify-start p-4 h-auto text-left rounded-xl border-0 bg-transparent hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all duration-200 group"
|
||||
>
|
||||
<a href="https://yourdomain.com" target="_blank" rel="noopener noreferrer">
|
||||
<FiExternalLink className="w-4 h-4 mr-3 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors" />
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white transition-colors">
|
||||
Visit Website
|
||||
</span>
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16,16 +16,16 @@ const SidebarPanel: React.FC<SidebarPanelProps> = ({ isOpen, content, onClose })
|
||||
isOpen ? 'translate-x-0' : 'translate-x-full'
|
||||
}`}
|
||||
>
|
||||
<div className="h-full border-l border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-white/95 dark:bg-black/95">
|
||||
<div className="p-6 h-full overflow-y-auto">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
<div className="h-full border-l border-gray-200/10 dark:border-gray-700/10 backdrop-blur-xl bg-white/90 dark:bg-black/90">
|
||||
<div className="p-8 h-full overflow-y-auto">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h2 className="text-2xl font-medium text-gray-900 dark:text-white">
|
||||
{content?.title || 'Details'}
|
||||
</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={onClose}
|
||||
className="w-10 h-10 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
className="w-10 h-10 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<FiX className="w-5 h-5" />
|
||||
</Button>
|
||||
|
||||
@ -1,110 +1,71 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { FiDollarSign, FiShare2, FiCloud, FiTrendingUp } from 'react-icons/fi';
|
||||
|
||||
const HowToEarnContent = () => {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="text-center">
|
||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Monetize Your AI Creations
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-300">
|
||||
Turn your MCP servers into revenue-generating assets
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Monetization Opportunities
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
Turn your MCP servers and AI tools into revenue streams through our comprehensive monetization platform.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card className="p-6 border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-white/10 dark:bg-black/10">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-lg flex items-center justify-center mr-4">
|
||||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Token-Based Revenue
|
||||
</h3>
|
||||
<div className="grid gap-6">
|
||||
<div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<FiDollarSign className="w-5 h-5 text-green-500" />
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Token-Based Revenue</h4>
|
||||
</div>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
Earn tokens every time users interact with your MCP servers. Set your own pricing and watch your revenue grow.
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
|
||||
Earn tokens every time users interact with your MCP servers. Set your own pricing and revenue models.
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500">Per interaction</span>
|
||||
<span className="text-sm font-semibold text-green-600">0.01-0.50 tokens</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500">Monthly potential</span>
|
||||
<span className="text-sm font-semibold text-green-600">$100-$10,000+</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-white/10 dark:bg-black/10">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mr-4">
|
||||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Series Subscriptions
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
Create premium series with exclusive content. Users subscribe for ongoing access to your specialized AI tools.
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500">Monthly subscription</span>
|
||||
<span className="text-sm font-semibold text-blue-600">$5-$50/user</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-500">Revenue share</span>
|
||||
<span className="text-sm font-semibold text-blue-600">70% creator</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="p-8 border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-gradient-to-br from-purple-50/50 to-pink-50/50 dark:from-purple-900/20 dark:to-pink-900/20">
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
Revenue Streams
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-2xl">💰</span>
|
||||
</div>
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Pay-per-Use</h4>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">Users pay tokens for each interaction</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-2xl">📱</span>
|
||||
</div>
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">App Licensing</h4>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">License your MCPs to other developers</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-orange-500 to-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-2xl">🎯</span>
|
||||
</div>
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Premium Features</h4>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">Offer advanced capabilities for higher fees</p>
|
||||
<div className="text-xs text-green-600 dark:text-green-400 font-medium">
|
||||
$0.01 - $1.00 per API call
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="text-center">
|
||||
<Button className="bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white px-8 py-3 rounded-xl text-lg font-semibold shadow-lg">
|
||||
Start Earning Today
|
||||
</Button>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
|
||||
No upfront costs • 70% revenue share • Instant payments
|
||||
</p>
|
||||
<div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<FiShare2 className="w-5 h-5 text-blue-500" />
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Revenue Sharing</h4>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
|
||||
Get a percentage of revenue from users who discover and use your tools through the platform.
|
||||
</p>
|
||||
<div className="text-xs text-blue-600 dark:text-blue-400 font-medium">
|
||||
Up to 70% revenue share
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<FiCloud className="w-5 h-5 text-purple-500" />
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Cloud Hosting</h4>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
|
||||
Host your MCP servers on our infrastructure and earn from usage-based pricing models.
|
||||
</p>
|
||||
<div className="text-xs text-purple-600 dark:text-purple-400 font-medium">
|
||||
Scale automatically with demand
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<FiTrendingUp className="w-5 h-5 text-orange-500" />
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Premium Features</h4>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
|
||||
Offer premium versions of your tools with advanced features and priority support.
|
||||
</p>
|
||||
<div className="text-xs text-orange-600 dark:text-orange-400 font-medium">
|
||||
Subscription tiers available
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,108 +1,60 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { FiCpu, FiDatabase, FiGlobe, FiSettings } from 'react-icons/fi';
|
||||
|
||||
const WhatCanHelpContent = () => {
|
||||
const features = [
|
||||
{
|
||||
title: "Your MCPs",
|
||||
description: "Manage and deploy your MCP servers",
|
||||
icon: "🚀",
|
||||
items: ["Create new servers", "Monitor performance", "Update configurations", "View analytics"],
|
||||
gradient: "from-blue-500 to-cyan-600"
|
||||
},
|
||||
{
|
||||
title: "Earn by Sharing",
|
||||
description: "Monetize your AI creations",
|
||||
icon: "💰",
|
||||
items: ["Set pricing models", "Track earnings", "Revenue optimization", "Payment processing"],
|
||||
gradient: "from-green-500 to-emerald-600"
|
||||
},
|
||||
{
|
||||
title: "Get on the Cloud",
|
||||
description: "Scale your MCPs globally",
|
||||
icon: "☁️",
|
||||
items: ["Auto-scaling", "Global CDN", "99.9% uptime", "Load balancing"],
|
||||
gradient: "from-purple-500 to-pink-600"
|
||||
},
|
||||
{
|
||||
title: "Build without Coding",
|
||||
description: "Visual MCP builder for everyone",
|
||||
icon: "🎨",
|
||||
items: ["Drag & drop interface", "Pre-built templates", "AI assistance", "One-click deploy"],
|
||||
gradient: "from-orange-500 to-red-600"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="text-center">
|
||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Platform Features
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-300">
|
||||
Everything you need to build, deploy, and monetize AI-first applications
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Platform Capabilities
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
Comprehensive tools and services to build, deploy, and monetize your AI-powered applications.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{features.map((feature, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className="p-6 border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-white/10 dark:bg-black/10 hover:bg-white/20 dark:hover:bg-black/20 transition-all duration-300 hover:scale-105"
|
||||
>
|
||||
<div className="flex items-center mb-4">
|
||||
<div className={`w-12 h-12 bg-gradient-to-br ${feature.gradient} rounded-lg flex items-center justify-center mr-4 text-xl`}>
|
||||
{feature.icon}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{feature.items.map((item, itemIndex) => (
|
||||
<div key={itemIndex} className="flex items-center space-x-2">
|
||||
<div className="w-1.5 h-1.5 bg-blue-500 rounded-full"></div>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-300">{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Card className="p-8 border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-gradient-to-br from-indigo-50/50 to-blue-50/50 dark:from-indigo-900/20 dark:to-blue-900/20">
|
||||
<div className="text-center">
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
AI-First Development
|
||||
</h3>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-300 mb-6">
|
||||
Experience the future of application development where AI chatbots are the primary interface
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="text-center">
|
||||
<div className="text-3xl mb-2">⚡</div>
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white">Lightning Fast</h4>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">Deploy in seconds, not hours</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl mb-2">🔒</div>
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white">Secure by Default</h4>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">Enterprise-grade security</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl mb-2">📈</div>
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white">Auto-Scale</h4>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">Handles millions of requests</p>
|
||||
</div>
|
||||
<div className="grid gap-6">
|
||||
<div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<FiCpu className="w-5 h-5 text-blue-500" />
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">AI Model Integration</h4>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">
|
||||
Connect to any LLM provider including OpenAI, Anthropic, Google, and open-source models.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<FiDatabase className="w-5 h-5 text-green-500" />
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Data Source Integration</h4>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">
|
||||
Connect databases, APIs, files, and real-time data streams to your AI applications.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<FiGlobe className="w-5 h-5 text-purple-500" />
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Global Deployment</h4>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">
|
||||
Deploy your MCP servers globally with automatic scaling and load balancing.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<FiSettings className="w-5 h-5 text-orange-500" />
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Development Tools</h4>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">
|
||||
Built-in IDE, debugging tools, monitoring, and analytics to streamline your development workflow.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,86 +1,50 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { FiCode, FiZap, FiLink, FiServer } from 'react-icons/fi';
|
||||
|
||||
const WhatIsMCPContent = () => {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="prose prose-lg dark:prose-invert max-w-none">
|
||||
<p className="text-lg text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
MCP (Model Context Protocol) is a revolutionary wrapper around LLM APIs that creates
|
||||
a standardized interface for AI interactions. Think of it as the bridge between
|
||||
traditional applications and the AI-first future.
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Model Context Protocol (MCP)
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
MCP is a standardized protocol that enables seamless communication between AI language models and external data sources, tools, and services.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card className="p-6 border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-white/10 dark:bg-black/10">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mr-4">
|
||||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Standardized Protocol
|
||||
</h3>
|
||||
<div className="grid gap-6">
|
||||
<div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<FiServer className="w-5 h-5 text-blue-500" />
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Server Architecture</h4>
|
||||
</div>
|
||||
<p className="text-gray-600 dark:text-gray-300">
|
||||
Creates a universal language for AI agents to communicate with any application or service.
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">
|
||||
Build robust MCP servers that act as bridges between AI models and your data sources, APIs, and tools.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-white/10 dark:bg-black/10">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-green-500 to-teal-600 rounded-lg flex items-center justify-center mr-4">
|
||||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Lightning Fast
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-gray-600 dark:text-gray-300">
|
||||
Optimized for real-time interactions with minimal latency and maximum efficiency.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="p-8 border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-gradient-to-br from-blue-50/50 to-purple-50/50 dark:from-blue-900/20 dark:to-purple-900/20">
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
How MCP Works
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-sm">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white">Connect</h4>
|
||||
<p className="text-gray-600 dark:text-gray-300">Your application connects to MCP servers</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white">Process</h4>
|
||||
<p className="text-gray-600 dark:text-gray-300">MCP handles the communication and context</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-white font-bold text-sm">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white">Deliver</h4>
|
||||
<p className="text-gray-600 dark:text-gray-300">Receive intelligent, contextual responses</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<FiLink className="w-5 h-5 text-green-500" />
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Universal Integration</h4>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">
|
||||
Connect any AI chatbot to your custom tools, databases, and services through standardized protocols.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<FiZap className="w-5 h-5 text-purple-500" />
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Real-time Capabilities</h4>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">
|
||||
Enable AI models to access live data, execute functions, and interact with external systems in real-time.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,98 +1,60 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { FiCode, FiUsers, FiTrendingUp, FiStar } from 'react-icons/fi';
|
||||
|
||||
const WhoIsThisForContent = () => {
|
||||
const audiences = [
|
||||
{
|
||||
title: "Developers",
|
||||
description: "Build powerful MCP servers with full code control",
|
||||
icon: "💻",
|
||||
features: ["Full API access", "Custom integrations", "Advanced features", "Revenue sharing"],
|
||||
gradient: "from-blue-500 to-cyan-600"
|
||||
},
|
||||
{
|
||||
title: "Non-Coders",
|
||||
description: "Create amazing AI experiences without writing code",
|
||||
icon: "🎨",
|
||||
features: ["Visual builder", "Pre-built templates", "Drag & drop", "Instant deployment"],
|
||||
gradient: "from-purple-500 to-pink-600"
|
||||
},
|
||||
{
|
||||
title: "Creators",
|
||||
description: "Monetize your AI creations and build an audience",
|
||||
icon: "✨",
|
||||
features: ["Token economy", "Series monetization", "Community tools", "Analytics"],
|
||||
gradient: "from-green-500 to-emerald-600"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="text-center">
|
||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Built for Everyone
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-300">
|
||||
Whether you code or not, MCP Platform empowers you to create AI-first applications
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Who Can Benefit from MCP?
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
Our platform is designed for anyone looking to leverage AI in their workflow, regardless of technical background.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-8">
|
||||
{audiences.map((audience, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className="p-8 border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-white/10 dark:bg-black/10 hover:bg-white/20 dark:hover:bg-black/20 transition-all duration-300 hover:scale-105"
|
||||
>
|
||||
<div className="flex items-start space-x-6">
|
||||
<div className={`w-16 h-16 bg-gradient-to-br ${audience.gradient} rounded-2xl flex items-center justify-center text-2xl`}>
|
||||
{audience.icon}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
{audience.title}
|
||||
</h3>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-300 mb-4">
|
||||
{audience.description}
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{audience.features.map((feature, featureIndex) => (
|
||||
<div key={featureIndex} className="flex items-center space-x-2">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-300">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Card className="p-8 border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-gradient-to-br from-yellow-50/50 to-orange-50/50 dark:from-yellow-900/20 dark:to-orange-900/20">
|
||||
<div className="text-center">
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
The AI-First Future
|
||||
</h3>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-300 mb-6">
|
||||
Join thousands of creators building the next generation of AI-powered applications
|
||||
</p>
|
||||
<div className="flex justify-center space-x-8 text-center">
|
||||
<div>
|
||||
<div className="text-3xl font-bold text-blue-600 dark:text-blue-400">10K+</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-300">Active Creators</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-3xl font-bold text-purple-600 dark:text-purple-400">50K+</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-300">MCP Servers</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-3xl font-bold text-green-600 dark:text-green-400">$1M+</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-300">Creator Earnings</div>
|
||||
</div>
|
||||
<div className="grid gap-6">
|
||||
<div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<FiCode className="w-5 h-5 text-blue-500" />
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Developers</h4>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">
|
||||
Build sophisticated MCP servers with full control over functionality, data access, and integration patterns.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<FiUsers className="w-5 h-5 text-green-500" />
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Non-Technical Users</h4>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">
|
||||
Create powerful AI-driven applications using our no-code tools and pre-built templates.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<FiTrendingUp className="w-5 h-5 text-purple-500" />
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Entrepreneurs</h4>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">
|
||||
Monetize your MCP servers and AI tools through our token-based marketplace and revenue sharing.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-sm bg-white/5 dark:bg-black/5">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<FiStar className="w-5 h-5 text-yellow-500" />
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Content Creators</h4>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">
|
||||
Build interactive AI experiences for your audience with custom chatbots and automated workflows.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user