feat: Implement landing page and chatbot interface
Create a minimal, high-end landing page with a chatbot-like interface, including dark/light mode, prewritten prompts, and animated sidebar. Design should be black and white with glassmorphism and subtle gradients.
This commit is contained in:
gpt-engineer-app[bot]
parent
a5186e747e
commit
069ca8f7f7
20
index.html
20
index.html
@ -1,23 +1,29 @@
|
|||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>mcp-verse-spark</title>
|
<title>MCP Platform - AI-First Development</title>
|
||||||
<meta name="description" content="Lovable Generated Project" />
|
<meta name="description" content="Build MCP servers and become part of the new world where AI chatbots are the modern interface" />
|
||||||
<meta name="author" content="Lovable" />
|
<meta name="author" content="MCP Platform" />
|
||||||
|
|
||||||
<meta property="og:title" content="mcp-verse-spark" />
|
<meta property="og:title" content="MCP Platform - AI-First Development" />
|
||||||
<meta property="og:description" content="Lovable Generated Project" />
|
<meta property="og:description" content="Build MCP servers and become part of the new world where AI chatbots are the modern interface" />
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
||||||
|
|
||||||
<meta name="twitter:card" content="summary_large_image" />
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
<meta name="twitter:site" content="@lovable_dev" />
|
<meta name="twitter:site" content="@mcp_platform" />
|
||||||
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
||||||
|
|
||||||
|
<!-- Google Fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body style="font-family: 'Inter', sans-serif;">
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
155
src/components/ChatInterface.tsx
Normal file
155
src/components/ChatInterface.tsx
Normal file
@ -0,0 +1,155 @@
|
|||||||
|
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import TypingAnimation from './TypingAnimation';
|
||||||
|
import { getPromptContent } from '../utils/promptContent';
|
||||||
|
|
||||||
|
interface ChatInterfaceProps {
|
||||||
|
onPromptSelect: (prompt: string, content: any) => void;
|
||||||
|
isExpanded: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const prompts = [
|
||||||
|
"What can you help me with?",
|
||||||
|
"What is MCP?",
|
||||||
|
"Who is this for?",
|
||||||
|
"Show me how I can earn"
|
||||||
|
];
|
||||||
|
|
||||||
|
const ChatInterface: React.FC<ChatInterfaceProps> = ({ onPromptSelect, isExpanded }) => {
|
||||||
|
const [messages, setMessages] = useState<Array<{ text: string; isUser: boolean; isTyping?: boolean }>>([]);
|
||||||
|
const [inputValue, setInputValue] = useState('');
|
||||||
|
const [isThinking, setIsThinking] = useState(false);
|
||||||
|
|
||||||
|
const handlePromptClick = (prompt: string) => {
|
||||||
|
setMessages(prev => [...prev, { text: prompt, isUser: true }]);
|
||||||
|
setIsThinking(true);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setIsThinking(false);
|
||||||
|
setMessages(prev => [...prev, { text: `Let me show you detailed information about "${prompt}"`, isUser: false, isTyping: true }]);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
const content = getPromptContent(prompt);
|
||||||
|
onPromptSelect(prompt, content);
|
||||||
|
}, 1500);
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSendMessage = () => {
|
||||||
|
if (!inputValue.trim()) return;
|
||||||
|
|
||||||
|
const prompt = inputValue;
|
||||||
|
setInputValue('');
|
||||||
|
handlePromptClick(prompt);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
handleSendMessage();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col h-full p-6">
|
||||||
|
{/* Hero Section */}
|
||||||
|
{messages.length === 0 && (
|
||||||
|
<div className={`flex-1 flex flex-col justify-center items-center text-center transition-all duration-500 ${
|
||||||
|
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">
|
||||||
|
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">
|
||||||
|
Where AI chatbots are the modern interface
|
||||||
|
</p>
|
||||||
|
</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">
|
||||||
|
How can I help you today?
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
{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"
|
||||||
|
>
|
||||||
|
<span className="text-gray-700 dark:text-gray-300">{prompt}</span>
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Chat Messages */}
|
||||||
|
{messages.length > 0 && (
|
||||||
|
<div className="flex-1 overflow-y-auto space-y-4 mb-6">
|
||||||
|
{messages.map((message, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={`flex ${message.isUser ? 'justify-end' : 'justify-start'}`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`max-w-xs lg:max-w-md px-4 py-3 rounded-2xl ${
|
||||||
|
message.isUser
|
||||||
|
? 'bg-blue-500 text-white'
|
||||||
|
: 'border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-white/10 dark:bg-black/10 text-gray-900 dark:text-white'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{message.isTyping ? (
|
||||||
|
<TypingAnimation text={message.text} />
|
||||||
|
) : (
|
||||||
|
message.text
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{isThinking && (
|
||||||
|
<div className="flex justify-start">
|
||||||
|
<div className="max-w-xs lg:max-w-md px-4 py-3 rounded-2xl border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-white/10 dark:bg-black/10 text-gray-900 dark:text-white">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div className="flex space-x-1">
|
||||||
|
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
|
||||||
|
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
|
||||||
|
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm">AI is thinking...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Input Area */}
|
||||||
|
<div className="border border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-white/10 dark:bg-black/10 rounded-2xl p-4">
|
||||||
|
<div className="flex space-x-4">
|
||||||
|
<Input
|
||||||
|
value={inputValue}
|
||||||
|
onChange={(e) => setInputValue(e.target.value)}
|
||||||
|
onKeyPress={handleKeyPress}
|
||||||
|
placeholder="Ask me anything about MCP..."
|
||||||
|
className="flex-1 border-0 bg-transparent focus:ring-0 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onClick={handleSendMessage}
|
||||||
|
disabled={!inputValue.trim()}
|
||||||
|
className="bg-blue-500 hover:bg-blue-600 text-white rounded-xl px-6"
|
||||||
|
>
|
||||||
|
Send
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ChatInterface;
|
||||||
44
src/components/Header.tsx
Normal file
44
src/components/Header.tsx
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { useTheme } from '../contexts/ThemeContext';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
const { isDark, toggleTheme } = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="h-20 border-b border-gray-200/20 dark:border-gray-700/20 backdrop-blur-xl bg-white/10 dark:bg-black/10">
|
||||||
|
<div className="max-w-7xl mx-auto px-6 h-full flex items-center justify-between">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
|
||||||
|
<span className="text-white font-bold text-sm">M</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||||
|
MCP Platform
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={toggleTheme}
|
||||||
|
className="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"
|
||||||
|
>
|
||||||
|
{isDark ? (
|
||||||
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
) : (
|
||||||
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
||||||
46
src/components/SidebarPanel.tsx
Normal file
46
src/components/SidebarPanel.tsx
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
|
interface SidebarPanelProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
content: any;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SidebarPanel: React.FC<SidebarPanelProps> = ({ isOpen, content, onClose }) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`fixed right-0 top-20 h-[calc(100vh-80px)] w-1/2 transform transition-transform duration-500 ease-in-out z-40 ${
|
||||||
|
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">
|
||||||
|
{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"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{content && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{content.component}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SidebarPanel;
|
||||||
34
src/components/TypingAnimation.tsx
Normal file
34
src/components/TypingAnimation.tsx
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
interface TypingAnimationProps {
|
||||||
|
text: string;
|
||||||
|
speed?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TypingAnimation: React.FC<TypingAnimationProps> = ({ text, speed = 50 }) => {
|
||||||
|
const [displayedText, setDisplayedText] = useState('');
|
||||||
|
const [currentIndex, setCurrentIndex] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (currentIndex < text.length) {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setDisplayedText(prev => prev + text[currentIndex]);
|
||||||
|
setCurrentIndex(prev => prev + 1);
|
||||||
|
}, speed);
|
||||||
|
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [currentIndex, text, speed]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
{displayedText}
|
||||||
|
{currentIndex < text.length && (
|
||||||
|
<span className="animate-pulse">|</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TypingAnimation;
|
||||||
113
src/components/content/HowToEarnContent.tsx
Normal file
113
src/components/content/HowToEarnContent.tsx
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { Card } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
|
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
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HowToEarnContent;
|
||||||
110
src/components/content/WhatCanHelpContent.tsx
Normal file
110
src/components/content/WhatCanHelpContent.tsx
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { Card } from '@/components/ui/card';
|
||||||
|
|
||||||
|
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
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WhatCanHelpContent;
|
||||||
88
src/components/content/WhatIsMCPContent.tsx
Normal file
88
src/components/content/WhatIsMCPContent.tsx
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { Card } from '@/components/ui/card';
|
||||||
|
|
||||||
|
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.
|
||||||
|
</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>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300">
|
||||||
|
Creates a universal language for AI agents to communicate with any application or service.
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WhatIsMCPContent;
|
||||||
100
src/components/content/WhoIsThisForContent.tsx
Normal file
100
src/components/content/WhoIsThisForContent.tsx
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { Card } from '@/components/ui/card';
|
||||||
|
|
||||||
|
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
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WhoIsThisForContent;
|
||||||
39
src/contexts/ThemeContext.tsx
Normal file
39
src/contexts/ThemeContext.tsx
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
|
||||||
|
import React, { createContext, useContext, useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
interface ThemeContextType {
|
||||||
|
isDark: boolean;
|
||||||
|
toggleTheme: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
||||||
|
|
||||||
|
export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||||
|
const [isDark, setIsDark] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isDark) {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark');
|
||||||
|
}
|
||||||
|
}, [isDark]);
|
||||||
|
|
||||||
|
const toggleTheme = () => {
|
||||||
|
setIsDark(!isDark);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeContext.Provider value={{ isDark, toggleTheme }}>
|
||||||
|
{children}
|
||||||
|
</ThemeContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useTheme = () => {
|
||||||
|
const context = useContext(ThemeContext);
|
||||||
|
if (context === undefined) {
|
||||||
|
throw new Error('useTheme must be used within a ThemeProvider');
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
};
|
||||||
@ -1,13 +1,55 @@
|
|||||||
// Update this page (the content is just a fallback if you fail to update the page)
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import Header from '../components/Header';
|
||||||
|
import ChatInterface from '../components/ChatInterface';
|
||||||
|
import SidebarPanel from '../components/SidebarPanel';
|
||||||
|
import { ThemeProvider } from '../contexts/ThemeContext';
|
||||||
|
|
||||||
const Index = () => {
|
const Index = () => {
|
||||||
|
const [selectedPrompt, setSelectedPrompt] = useState<string | null>(null);
|
||||||
|
const [sidebarContent, setSidebarContent] = useState<any>(null);
|
||||||
|
|
||||||
|
const handlePromptSelect = (prompt: string, content: any) => {
|
||||||
|
setSelectedPrompt(prompt);
|
||||||
|
setSidebarContent(content);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCloseSidebar = () => {
|
||||||
|
setSelectedPrompt(null);
|
||||||
|
setSidebarContent(null);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center bg-background">
|
<ThemeProvider>
|
||||||
<div className="text-center">
|
<div className="min-h-screen bg-gradient-to-br from-white via-gray-50 to-gray-100 dark:from-black dark:via-gray-900 dark:to-gray-800 transition-all duration-500">
|
||||||
<h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
|
<Header />
|
||||||
<p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
|
|
||||||
|
<div className="flex h-[calc(100vh-80px)] relative">
|
||||||
|
{/* Main Chat Interface */}
|
||||||
|
<div className={`transition-all duration-500 ease-in-out ${
|
||||||
|
selectedPrompt ? 'w-1/2' : 'w-full'
|
||||||
|
}`}>
|
||||||
|
<ChatInterface
|
||||||
|
onPromptSelect={handlePromptSelect}
|
||||||
|
isExpanded={!selectedPrompt}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sliding Sidebar Panel */}
|
||||||
|
<SidebarPanel
|
||||||
|
isOpen={!!selectedPrompt}
|
||||||
|
content={sidebarContent}
|
||||||
|
onClose={handleCloseSidebar}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Subtle light leaks */}
|
||||||
|
<div className="fixed inset-0 pointer-events-none overflow-hidden">
|
||||||
|
<div className="absolute -top-1/2 -right-1/2 w-full h-full bg-gradient-radial from-blue-500/5 via-transparent to-transparent dark:from-blue-400/10"></div>
|
||||||
|
<div className="absolute -bottom-1/2 -left-1/2 w-full h-full bg-gradient-radial from-purple-500/5 via-transparent to-transparent dark:from-purple-400/10"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
36
src/utils/promptContent.tsx
Normal file
36
src/utils/promptContent.tsx
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import WhatIsMCPContent from '../components/content/WhatIsMCPContent';
|
||||||
|
import WhoIsThisForContent from '../components/content/WhoIsThisForContent';
|
||||||
|
import HowToEarnContent from '../components/content/HowToEarnContent';
|
||||||
|
import WhatCanHelpContent from '../components/content/WhatCanHelpContent';
|
||||||
|
|
||||||
|
export const getPromptContent = (prompt: string) => {
|
||||||
|
switch (prompt) {
|
||||||
|
case "What is MCP?":
|
||||||
|
return {
|
||||||
|
title: "What is MCP?",
|
||||||
|
component: <WhatIsMCPContent />
|
||||||
|
};
|
||||||
|
case "Who is this for?":
|
||||||
|
return {
|
||||||
|
title: "Who is this for?",
|
||||||
|
component: <WhoIsThisForContent />
|
||||||
|
};
|
||||||
|
case "Show me how I can earn":
|
||||||
|
return {
|
||||||
|
title: "How to Earn",
|
||||||
|
component: <HowToEarnContent />
|
||||||
|
};
|
||||||
|
case "What can you help me with?":
|
||||||
|
return {
|
||||||
|
title: "Platform Features",
|
||||||
|
component: <WhatCanHelpContent />
|
||||||
|
};
|
||||||
|
default:
|
||||||
|
return {
|
||||||
|
title: "Information",
|
||||||
|
component: <div className="text-gray-600 dark:text-gray-300">Content for "{prompt}" coming soon...</div>
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -1,3 +1,4 @@
|
|||||||
|
|
||||||
import type { Config } from "tailwindcss";
|
import type { Config } from "tailwindcss";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -68,6 +69,9 @@ export default {
|
|||||||
md: 'calc(var(--radius) - 2px)',
|
md: 'calc(var(--radius) - 2px)',
|
||||||
sm: 'calc(var(--radius) - 4px)'
|
sm: 'calc(var(--radius) - 4px)'
|
||||||
},
|
},
|
||||||
|
backgroundImage: {
|
||||||
|
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||||
|
},
|
||||||
keyframes: {
|
keyframes: {
|
||||||
'accordion-down': {
|
'accordion-down': {
|
||||||
from: {
|
from: {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user