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.

src/components/ChatInterface.tsx

@@ -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">
+          <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-semibold text-gray-900 dark:text-white mb-6">
+            <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>

src/components/LeftSidebar.tsx

@@ -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="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">
+          <div className="p-6 h-full flex flex-col">
-            <div className="flex items-center justify-between mb-6">
+            {/* Header */}
-              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+            <div className="flex items-center justify-between mb-8">
-                Quick Actions
+              <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">
+                <FiX className="w-4 h-4" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
               </Button>
             </div>
 
             {/* Suggested Questions */}
-            <div className="space-y-4 mb-8">
+            <div className="flex-1 space-y-6">
-              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 uppercase tracking-wide">
+              <div>
-                Suggested Questions
+                <h3 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">
-              </h3>
+                  Explore Features
-              <div className="space-y-2">
+                </h3>
-                {suggestedQuestions.map((question, index) => (
+                <div className="space-y-2">
-                  <Button
+                  {suggestedQuestions.map((question, index) => (
-                    key={index}
+                    <Button
-                    variant="ghost"
+                      key={index}
-                    onClick={() => handlePromptClick(question.text)}
+                      variant="ghost"
-                    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"
+                      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-500 dark:text-gray-400" />
+                    >
-                    <span className="text-sm text-gray-700 dark:text-gray-300">{question.text}</span>
+                      <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" />
-                  </Button>
+                      <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 */}
+              {/* Website Link */}
-            <div className="space-y-4">
+              <div className="pt-6 border-t border-gray-200/20 dark:border-gray-700/20">
-              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 uppercase tracking-wide">
+                <h3 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">
-                Resources
+                  Resources
-              </h3>
+                </h3>
-              <Button
+                <Button
-                variant="ghost"
+                  variant="ghost"
-                asChild
+                  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"
+                  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">
+                  <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" />
+                    <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">Visit Our Website</span>
+                    <span className="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white transition-colors">
-                </a>
+                      Visit Website
-              </Button>
+                    </span>
+                  </a>
+                </Button>
+              </div>
             </div>
           </div>
         </div>

src/components/SidebarPanel.tsx

@@ -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="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-6 h-full overflow-y-auto">
+        <div className="p-8 h-full overflow-y-auto">
-          <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center justify-between mb-8">
-            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
+            <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>

src/components/content/HowToEarnContent.tsx

@@ -1,110 +1,71 @@
 
 import React from 'react';
-import { Card } from '@/components/ui/card';
+import { FiDollarSign, FiShare2, FiCloud, FiTrendingUp } from 'react-icons/fi';
-import { Button } from '@/components/ui/button';
 
 const HowToEarnContent = () => {
   return (
     <div className="space-y-8">
-      <div className="text-center">
+      <div className="space-y-4">
-        <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+        <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
-          Monetize Your AI Creations
+          Monetization Opportunities
-        </h2>
+        </h3>
-        <p className="text-xl text-gray-600 dark:text-gray-300">
+        <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
-          Turn your MCP servers into revenue-generating assets
+          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">
+      <div className="grid 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="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 mb-4">
+          <div className="flex items-center gap-3 mb-3">
-            <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">
+            <FiDollarSign className="w-5 h-5 text-green-500" />
-              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <h4 className="font-medium text-gray-900 dark:text-white">Token-Based Revenue</h4>
-                <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">
+          <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 watch your revenue grow.
+            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="text-xs text-green-600 dark:text-green-400 font-medium">
-            <div className="flex justify-between">
+            $0.01 - $1.00 per API call
-              <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">
+        <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">
-        <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">
+          <div className="flex items-center gap-3 mb-3">
-          Start Earning Today
+            <FiShare2 className="w-5 h-5 text-blue-500" />
-        </Button>
+            <h4 className="font-medium text-gray-900 dark:text-white">Revenue Sharing</h4>
-        <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
+          </div>
-          No upfront costs • 70% revenue share • Instant payments
+          <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
-        </p>
+            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>
   );

src/components/content/WhatCanHelpContent.tsx

@@ -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">
+      <div className="space-y-4">
-        <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+        <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
-          Platform Features
+          Platform Capabilities
-        </h2>
+        </h3>
-        <p className="text-xl text-gray-600 dark:text-gray-300">
+        <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
-          Everything you need to build, deploy, and monetize AI-first applications
+          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">
+      <div className="grid gap-6">
-        {features.map((feature, index) => (
+        <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">
-          <Card 
+          <div className="flex items-center gap-3 mb-3">
-            key={index}
+            <FiCpu className="w-5 h-5 text-blue-500" />
-            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"
+            <h4 className="font-medium text-gray-900 dark:text-white">AI Model Integration</h4>
-          >
-            <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>
+          <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>
   );
 };

src/components/content/WhatIsMCPContent.tsx

@@ -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="space-y-8">
-      <div className="prose prose-lg dark:prose-invert max-w-none">
+      <div className="space-y-4">
-        <p className="text-lg text-gray-600 dark:text-gray-300 leading-relaxed">
+        <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
-          MCP (Model Context Protocol) is a revolutionary wrapper around LLM APIs that creates 
+          Model Context Protocol (MCP)
-          a standardized interface for AI interactions. Think of it as the bridge between 
+        </h3>
-          traditional applications and the AI-first future.
+        <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">
+      <div className="grid 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="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 mb-4">
+          <div className="flex items-center gap-3 mb-3">
-            <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">
+            <FiServer className="w-5 h-5 text-blue-500" />
-              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <h4 className="font-medium text-gray-900 dark:text-white">Server Architecture</h4>
-                <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">
+          <p className="text-sm text-gray-600 dark:text-gray-300">
-            Creates a universal language for AI agents to communicate with any application or service.
+            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>
   );
 };

src/components/content/WhoIsThisForContent.tsx

@@ -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">
+      <div className="space-y-4">
-        <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+        <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
-          Built for Everyone
+          Who Can Benefit from MCP?
-        </h2>
+        </h3>
-        <p className="text-xl text-gray-600 dark:text-gray-300">
+        <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
-          Whether you code or not, MCP Platform empowers you to create AI-first applications
+          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">
+      <div className="grid gap-6">
-        {audiences.map((audience, index) => (
+        <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">
-          <Card 
+          <div className="flex items-center gap-3 mb-3">
-            key={index}
+            <FiCode className="w-5 h-5 text-blue-500" />
-            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"
+            <h4 className="font-medium text-gray-900 dark:text-white">Developers</h4>
-          >
-            <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>
+          <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>
   );
 };