Added Footer, Team, About Us and small additions in SampleMCPs

src/components/ChatInterface.tsx

@@ -19,7 +19,9 @@ const prompts = [
   "Who is this for?",
   "Show me how I can earn",
   "Developers",
-  "Sample MCPs"
+  "Sample MCPs",
+  "About Us",
+  "Our Team"
 ];
 
 const ChatInterface: React.FC<ChatInterfaceProps> = ({ onPromptSelect, isExpanded }) => {
@@ -28,6 +30,8 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onPromptSelect, isExpande
   const [isThinking, setIsThinking] = useState(false);
   const [chatKey, setChatKey] = useState(0);
   const [thinkingStage, setThinkingStage] = useState<"thinking" | "memory" | null>(null);
+  const [geminiSearchCount, setGeminiSearchCount] = useState(0);
+  const [showLoginBar, setShowLoginBar] = useState(false);
   const scrollAnchorRef = useRef<HTMLDivElement | null>(null);
 
   const promptPatterns = [
@@ -55,6 +59,14 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onPromptSelect, isExpande
       pattern: /\b(sample|example|show|some)\b.*\b(mcp|mcp server|mcp servers|mcps)\b|\b(mcp|mcp server|mcp servers|mcps)\b.*\b(sample|example|show|some)\b/i,
       prompt: "Sample MCPs",
     },
+    {
+      pattern: /(about|who\s+are\s+you|tell\s+me\s+about.*(company|us|fastcode))/i,
+      prompt: "About Us",
+    },
+    {
+      pattern: /(team|who\s+works\s+here|meet\s+the\s+team|who\s+built\s+this)/i,
+      prompt: "Our Team",
+    },
   ];
 
 
@@ -64,11 +76,48 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onPromptSelect, isExpande
     "Who is this for?": "MCP is for developers, creators, and businesses who want to build, deploy, and monetize AI-powered code packages easily. Here's a detailed view.",
     "Show me how I can earn": "You can earn by creating MCPs, deploying them, and setting your pricing. Track usage and get paid automatically as others use your MCPs. I have generated a detailed view on the right.",
     "Developers": "A lot of people have put there thoughts and ideas to bring this amazing idea to life. Here on the right I have displayed all the developers who are behind Fastcode.",
-    "Sample MCPs": "People all over the world are building MCP servers and earning passively. It's time you start you own as well. Here are some samples for your inspiration."
+    "Sample MCPs": "People all over the world are building MCP servers and earning passively. It's time you start you own as well. Here are some samples for your inspiration.",
+    "About Us": "Fastcode is at the forefront of AI innovation, providing cutting-edge solutions for developers and businesses. We're passionate about making AI accessible and monetizable for everyone. Let me show you more about us in the detailed view.",
+    "Our Team": "Our team is a diverse group of passionate individuals dedicated to building the future of AI development. We've brought together top talent from around the world to create something truly special. Check out the team section for more details!"
   };
 
   const handlePromptClick = (prompt: string, userInput?: string) => {
     setMessages(prev => [...prev, { text: userInput || prompt, isUser: true }]);
+    
+    // Handle navigation for specific sections
+    if (prompt === 'About Us') {
+      const aboutSection = document.getElementById('about');
+      if (aboutSection) {
+        aboutSection.scrollIntoView({ behavior: 'smooth' });
+      }
+      setMessages(prev => [
+        ...prev,
+        {
+          text: promptResponses[prompt],
+          isUser: false,
+          isTyping: false,
+        },
+      ]);
+      return;
+    }
+
+    if (prompt === 'Our Team') {
+      const teamSection = document.getElementById('team');
+      if (teamSection) {
+        teamSection.scrollIntoView({ behavior: 'smooth' });
+      }
+      setMessages(prev => [
+        ...prev,
+        {
+          text: promptResponses[prompt],
+          isUser: false,
+          isTyping: false,
+        },
+      ]);
+      return;
+    }
+
+    // Handle other prompts with the original animation flow
     setThinkingStage("thinking");
     setIsThinking(true);
 
@@ -113,8 +162,16 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onPromptSelect, isExpande
 
       // 🔁 Fallback to Gemini if no predefined response
       if (!responseText) {
+        // Block if limit reached
+        if (geminiSearchCount >= 5) {
+          setShowLoginBar(true);
+          setIsThinking(false);
+          setThinkingStage(null);
+          return;
+        }
         try {
           responseText = await generateResponse(promptToUse);
+          setGeminiSearchCount(count => count + 1);
         } catch (err) {
           responseText = "Sorry, something went wrong while generating a response.";
           console.error(err);
@@ -140,7 +197,6 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onPromptSelect, isExpande
   };
 
 
-
   const handleKeyPress = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter') handleSendMessage();
   };
@@ -250,6 +306,14 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onPromptSelect, isExpande
         </div>
       )}
 
+      {showLoginBar && (
+        <div className="w-full md:w-1/2 mx-auto mb-4 p-4 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded-xl text-center font-semibold">
+          You’ve reached the limit of 5 Gemini searches. Please log in to continue.
+          {/* Add your login button here */}
+          <Button className="ml-4" onClick={() => {/* trigger login flow */}}>Login</Button>
+        </div>
+      )}
+
       {/* Input Area */}
       <div className="w-full md:w-1/2 mx-auto border border-gray-200 dark:border-gray-700 backdrop-blur-xl bg-white/10 dark:bg-black/10 rounded-2xl px-4 py-3 space-y-3 pointer-events-auto">
         {/* First Line: Text Input */}

src/components/Footer.tsx

@@ -0,0 +1,166 @@
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Mail, Send, Twitter, Github, Linkedin } from 'lucide-react';
+
+const Footer = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    message: ''
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    
+    // Simulate form submission
+    setTimeout(() => {
+      console.log('Form submitted:', formData);
+      setIsSubmitting(false);
+      setIsSubmitted(true);
+      setFormData({ name: '', email: '', message: '' });
+      
+      // Reset submission status after 3 seconds
+      setTimeout(() => setIsSubmitted(false), 3000);
+    }, 1000);
+  };
+
+  return (
+    <footer className="bg-background border-t border-border/40">
+      <div className="container mx-auto px-4 py-16">
+        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12">
+          {/* Contact Form */}
+          <div className="lg:col-span-7">
+            <h2 className="text-2xl font-medium mb-6">Get in Touch</h2>
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <Input
+                    type="text"
+                    name="name"
+                    placeholder="Your Name"
+                    value={formData.name}
+                    onChange={handleChange}
+                    className="bg-background border-border/50 focus:border-yellow-500 focus-visible:ring-yellow-500/20"
+                    required
+                  />
+                </div>
+                <div>
+                  <Input
+                    type="email"
+                    name="email"
+                    placeholder="Your Email"
+                    value={formData.email}
+                    onChange={handleChange}
+                    className="bg-background border-border/50 focus:border-yellow-500 focus-visible:ring-yellow-500/20"
+                    required
+                  />
+                </div>
+              </div>
+              <div>
+                <Textarea
+                  name="message"
+                  placeholder="Your Message"
+                  rows={4}
+                  value={formData.message}
+                  onChange={handleChange}
+                  className="bg-background border-border/50 focus:border-yellow-500 focus-visible:ring-yellow-500/20"
+                  required
+                />
+              </div>
+              <div className="flex items-center">
+                <Button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className="bg-yellow-500 hover:bg-yellow-600 text-foreground transition-colors duration-200 flex items-center gap-2 group"
+                >
+                  {isSubmitting ? (
+                    'Sending...'
+                  ) : isSubmitted ? (
+                    <>
+                      <Send className="w-4 h-4" />
+                      Message Sent!
+                    </>
+                  ) : (
+                    <>
+                      <Send className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+                      Send Message
+                    </>
+                  )}
+                </Button>
+              </div>
+            </form>
+          </div>
+
+          {/* Contact Info */}
+          <div className="lg:col-span-5">
+            <h2 className="text-2xl font-medium mb-6">Contact Info</h2>
+            <div className="space-y-6">
+              <div className="flex items-start gap-4">
+                <div className="p-2 rounded-full bg-yellow-500/10 text-yellow-500 mt-1">
+                  <Mail className="w-5 h-5" />
+                </div>
+                <div>
+                  <h3 className="font-medium">Email Us</h3>
+                  <p className="text-muted-foreground">contact@fastcode.ai</p>
+                </div>
+              </div>
+              
+              <div className="pt-6 mt-6 border-t border-border/20">
+                <h3 className="font-medium mb-4">Follow Us</h3>
+                <div className="flex items-center gap-4">
+                  <a 
+                    href="https://twitter.com/fastcodeai" 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="p-2 rounded-full hover:bg-yellow-500/10 text-foreground/70 hover:text-yellow-500 transition-colors"
+                    aria-label="Twitter"
+                  >
+                    <Twitter className="w-5 h-5" />
+                  </a>
+                  <a 
+                    href="https://github.com/fastcodeai" 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="p-2 rounded-full hover:bg-yellow-500/10 text-foreground/70 hover:text-yellow-500 transition-colors"
+                    aria-label="GitHub"
+                  >
+                    <Github className="w-5 h-5" />
+                  </a>
+                  <a 
+                    href="https://linkedin.com/company/fastcodeai" 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="p-2 rounded-full hover:bg-yellow-500/10 text-foreground/70 hover:text-yellow-500 transition-colors"
+                    aria-label="LinkedIn"
+                  >
+                    <Linkedin className="w-5 h-5" />
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Copyright */}
+        <div className="border-t border-border/20 mt-16 pt-8 text-center text-sm text-muted-foreground">
+          <p>© {new Date().getFullYear()} FastCode. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/LeftSidebar.tsx

@@ -1,14 +1,14 @@
 import React, { useRef, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { useTheme } from '../contexts/ThemeContext';
-import { FiMenu, FiX, FiHelpCircle, FiUsers, FiDollarSign, FiZap, FiExternalLink, FiMoon, FiSun } from 'react-icons/fi';
+import { FiMenu, FiX, FiHelpCircle, FiUsers, FiDollarSign, FiZap, FiExternalLink, FiMoon, FiSun, FiInfo } from 'react-icons/fi';
 import { TbMessageChatbot } from "react-icons/tb";
 import { LucideCodeXml } from 'lucide-react';
-import { useNavigate } from "react-router-dom";
+import { Link } from 'react-router-dom';
 
 interface LeftSidebarProps {
   onPromptSelect: (prompt: string, content: any) => void;
-  onStartNewChat?: () => void; // Add this prop
+  onStartNewChat?: () => void;
 }
 
 const suggestedQuestions = [
@@ -16,45 +16,41 @@ const suggestedQuestions = [
   { text: "Who is this for?", icon: FiUsers },
   { text: "Show me how I can earn", icon: FiDollarSign },
   { text: "What can you help me with?", icon: FiZap },
+  // { text: "About Us", icon: FiInfo },
+  // { text: "Our Team", icon: FiUsers }
 ];
 
 const navLinks = [
-  { text: "Chat", icon: TbMessageChatbot , to: "#" },
+  { text: "Chat", icon: TbMessageChatbot, to: "#" },
-  { text: "Home", icon: FiHelpCircle, to: "#home" },
+  { text: "Home", icon: FiZap, to: "#home" },
-  { text: "MCPs", icon: FiUsers, to: "#mcps" },
+  { text: "MCPs", icon: LucideCodeXml, to: "#mcps" },
   { text: "Monetize", icon: FiDollarSign, to: "#monetize" },
+  { text: "Team", icon: FiUsers, to: "#team" },
+  { text: "About Us", icon: FiInfo, to: "#about" },
 ];
 
 const LeftSidebar: React.FC<LeftSidebarProps> = ({ onPromptSelect, onStartNewChat }) => {
   const { sidebarOpen, setSidebarOpen } = useTheme();
   const { isDark, toggleTheme } = useTheme();
   const sidebarRef = useRef<HTMLDivElement>(null);
-  const navigate = useNavigate();
 
   // Close sidebar on outside click
   useEffect(() => {
     if (!sidebarOpen) return;
     const handleClickOutside = (event: MouseEvent) => {
-      if (
+      if (sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) {
-        sidebarRef.current &&
-        !sidebarRef.current.contains(event.target as Node)
-      ) {
         setSidebarOpen(false);
       }
     };
     document.addEventListener('mousedown', handleClickOutside);
-    return () => {
+    return () => document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
   }, [sidebarOpen, setSidebarOpen]);
 
   const handlePromptClick = (prompt: string) => {
-    // Dispatch a custom event to notify ChatInterface
     const event = new CustomEvent('leftSidebarPrompt', { detail: { prompt } });
     window.dispatchEvent(event);
-
-    // Trigger the same logic as in ChatInterface
     onPromptSelect(prompt, null);
+    setSidebarOpen(false);
   };
 
   return (
@@ -73,20 +69,17 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ onPromptSelect, onStartNewCha
       {/* Sidebar */}
       <div
         ref={sidebarRef}
-        className={`fixed left-0 top-0 bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10 border border-gray-200/20 dark:border-gray-700/20 h-screen w-72 transform transition-transform duration-500 ease-in-out z-40 ${
+        className={`fixed left-0 top-0 bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10 border-r border-gray-200/20 dark:border-gray-700/20 h-screen 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 bg-clip-padding backdrop-filter backdrop-blur-sm bg-white/20 dark:bg-black/20 bg-opacity-40 flex flex-col">
+        <div className="h-full flex flex-col bg-white/80 dark:bg-black/80">
-          {/* Top Section: Logo, Navigation, Theme Toggle */}
+          {/* Top Section */}
-          <div className="p-6 pb-2 flex items-cneter justify-between">
+          <div className="p-6 pb-2 flex items-center justify-between border-b border-gray-200/20 dark:border-gray-700/20">
-            {/* Logo */}
             <div className="flex items-center gap-2">
-              {/* <img src="/logo.svg" alt="Logo" className="w-8 h-8" /> */}
+              <LucideCodeXml className="w-6 h-6 text-primary" />
-              <LucideCodeXml />
+              <span className="text-lg font-semibold bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent">FastCode</span>
-              <span className="text-lg text-gray-900 dark:text-white">FastCode</span>
             </div>
-            {/* Theme Toggle */}
             <Button
               variant="ghost"
               size="sm"
@@ -98,9 +91,9 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ onPromptSelect, onStartNewCha
             </Button>
           </div>
 
-          {/* Questions */}
+          {/* Quick Start Section */}
-          <div className="px-6 mb-6">
+          <div className="p-6 border-b 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 mt-4">
+            <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-4">
               Quick Start
             </h3>
             <div className="space-y-2">
@@ -108,64 +101,62 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ onPromptSelect, onStartNewCha
                 <button
                   key={index}
                   onClick={() => handlePromptClick(question.text)}
-                  className="w-full flex justify-start p-4 h-auto text-left border-0 bg-transparent text-gray-500 hover:text-black transition-colors duration-200 group"
+                  className="w-full flex items-center p-3 rounded-lg text-left hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 group"
                 >
-                  <question.icon className="w-4 h-4 mr-3 text-gray-400 group-hover:text-black dark:group-hover:text-white transition-colors" />
+                  <question.icon className="w-4 h-4 mr-3 text-muted-foreground group-hover:text-primary transition-colors" />
-                  <span className="text-sm text-gray-500 dark:text-gray-400 group-hover:text-black dark:group-hover:text-white transition-colors">
+                  <span className="text-sm font-medium text-foreground">
                     {question.text}
                   </span>
                 </button>
               ))}
             </div>
-            {/* Start New Chat Button */}
             <Button
               variant="outline"
-              className="w-full"
+              className="w-full mt-4"
               onClick={onStartNewChat}
             >
               Start New Chat
             </Button>
           </div>
 
-          {/* Nav Section */}
+          {/* Navigation Section */}
-          <div className="flex-1 flex flex-col justify-between">
+          <div className="flex-1 overflow-y-auto p-6">
-            {/* Nav menu */}
+            <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-4">
-            <div className="px-6">
+              Navigation
-              <h3 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4 mt-4">
+            </h3>
-                Navigation
+            <nav className="space-y-1">
-              </h3>
+              {navLinks.map((link, index) => (
-              {navLinks.map((nav, index) => (
                 <a
-                  href={nav.to}
                   key={index}
-                  className="w-full flex justify-start p-4 h-auto text-left border-0 bg-transparent text-gray-500 hover:text-black transition-colors duration-200 group"
+                  href={link.to}
+                  className="flex items-center p-3 rounded-lg text-left hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 group"
+                  onClick={() => setSidebarOpen(false)}
                 >
-                  <nav.icon className="w-4 h-4 mr-3 text-gray-400 group-hover:text-black dark:group-hover:text-white transition-colors" />
+                  <link.icon className="w-4 h-4 mr-3 text-muted-foreground group-hover:text-primary transition-colors" />
-                  <span className="text-sm text-gray-500 dark:text-gray-400 group-hover:text-black dark:group-hover:text-white transition-colors">
+                  <span className="text-sm font-medium text-foreground">
-                    {nav.text}
+                    {link.text}
                   </span>
                 </a>
               ))}
-            </div>
+            </nav>
+          </div>
 
-            {/* Visit Website */}
+          {/* Bottom Section */}
-            <div className="p-6 mt-auto">
+          <div className="p-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">
+            <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-4">
-                Resources
+              Resources
-              </h3>
+            </h3>
-              <Button
+            <a
-                variant="ghost"
+              href="https://fastcode.ai"
-                asChild
+              target="_blank"
-                className="w-full justify-start p-4 h-auto text-left border-0 bg-transparent text-gray-500 hover:text-black dark:text-gray-400 dark:hover:text-white transition-colors duration-200 group"
+              rel="noopener noreferrer"
-              >
+              className="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors 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-black dark:group-hover:text-white transition-colors" />
+              <FiExternalLink className="w-4 h-4 mr-3 text-muted-foreground group-hover:text-primary transition-colors" />
-                  <span className="text-sm text-gray-500 dark:text-gray-400 group-hover:text-black dark:group-hover:text-white transition-colors">
+              <span className="text-sm font-medium text-foreground">
-                    Visit Website
+                Visit Website
-                  </span>
+              </span>
-                </a>
+            </a>
-              </Button>
-            </div>
           </div>
         </div>
       </div>

src/components/MCPSection.tsx

@@ -3,7 +3,7 @@ import { Code, Cpu, DollarSign, Zap, ArrowRight, Box } from "lucide-react"
 
 const MCPSection = () => {
   return (
-    <section id="mcps" className="relative h-full pt-20 flex mt-10 items-center justify-center overflow-hidden hero-gradient bg-transparent grain">
+    <section id="mcps" className="relative h-full pt-20 flex mt-10 items-center justify-center overflow-hidden hero-gradient grain">
       
       <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="text-center mb-16">

src/components/content/AboutUsSection.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Rocket, Code, Shield, Globe, Cpu, Database, Lock, CpuIcon, Brain, Server, Smartphone } from 'lucide-react';
+
+interface AboutUsSectionProps {
+  id?: string;
+  className?: string;
+}
+
+const AboutUsSection: React.FC<AboutUsSectionProps> = ({ id, className = '' }) => {
+  const features = [
+    {
+      icon: <Rocket className="h-8 w-8" />,
+      title: 'Our Mission',
+      description: 'To revolutionize the way people interact with technology by making it accessible, secure, and user-friendly for everyone.'
+    },
+    {
+      icon: <Code className="h-8 w-8" />,
+      title: 'Our Vision',
+      description: 'Creating a future where technology empowers individuals and communities to achieve their full potential.'
+    },
+    {
+      icon: <Shield className="h-8 w-8" />,
+      title: 'Our Values',
+      description: 'Transparency, security, and innovation are at the core of everything we do. We believe in building trust through open communication.'
+    },
+    {
+      icon: <Globe className="h-8 w-8" />,
+      title: 'Global Impact',
+      description: 'We\'re committed to creating solutions that have a positive impact on communities worldwide.'
+    }
+  ];
+
+  const technologies = [
+    {
+      icon: <Cpu className="h-6 w-6" />,
+      name: 'AI & Machine Learning',
+      description: 'Advanced algorithms powering intelligent solutions.'
+    },
+    {
+      icon: <Database className="h-6 w-6" />,
+      name: 'Blockchain',
+      description: 'Secure and transparent decentralized technology.'
+    },
+    {
+      icon: <Brain className="h-6 w-6" />,
+      name: 'Neural Networks',
+      description: 'Deep learning models for complex problem-solving.'
+    },
+    {
+      icon: <Server className="h-6 w-6" />,
+      name: 'Cloud Computing',
+      description: 'Scalable infrastructure for global reach.'
+    },
+    {
+      icon: <Lock className="h-6 w-6" />,
+      name: 'Cybersecurity',
+      description: 'Enterprise-grade security measures.'
+    },
+    {
+      icon: <Smartphone className="h-6 w-6" />,
+      name: 'Cross-Platform',
+      description: 'Seamless experience across all devices.'
+    }
+  ];
+
+  return (
+    <div id={id} className={`bg-background ${className}`}>
+      {/* Hero Section */}
+      <section className="py-20">
+        <div className="container mx-auto px-4">
+          <div className="max-w-4xl mx-auto text-center">
+            <h1 className="text-4xl md:text-5xl mb-6">About Us</h1>
+            <p className="text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
+              We are a passionate team of innovators, developers, and visionaries dedicated to building the future of technology.
+            </p>
+            <div className="flex flex-wrap justify-center gap-4">
+              <Button size="lg">Learn More</Button>
+              <Button variant="outline" size="lg">Contact Us</Button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-16 bg-muted/50 dark:bg-muted/20">
+        <div className="container mx-auto px-4">
+          <h2 className="text-3xl text-center mb-12">Our Core Principles</h2>
+          <div className="grid md:grid-cols-2 mx-auto max-w-7xl gap-8 mb-10">
+            {features.map((feature, index) => (
+              <Card
+                key={index}
+                className="group relative overflow-hidden rounded-2xl border border-muted bg-background p-6 shadow-sm transition-transform duration-300 hover:scale-[1.02] hover:shadow-lg"
+              >
+                <CardHeader className="p-0">
+                  <div className="flex items-start gap-4">
+                    <div className="flex h-12 w-12 items-center justify-center text-primary text-xl">
+                      {feature.icon}
+                    </div>
+                    <div>
+                      <CardTitle className="text-lg font-semibold">
+                        {feature.title}
+                      </CardTitle>
+                      <p className="mt-2 text-sm text-muted-foreground">
+                        {feature.description}
+                      </p>
+                    </div>
+                  </div>
+                </CardHeader>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Technology Stack Section */}
+      <section className="py-20">
+        <div className="container mx-auto px-4">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl  mb-4">Our Technology Stack</h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+              We leverage cutting-edge technologies to build powerful and scalable solutions
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
+            {technologies.map((tech, index) => (
+              <Card key={index} className="hover:shadow-md transition-shadow">
+                <CardHeader className="flex flex-row items-center space-x-4 pb-2">
+                  <div className="p-2 rounded-md bg-primary/10">
+                    {tech.icon}
+                  </div>
+                  <CardTitle className="text-lg">{tech.name}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-sm text-muted-foreground">{tech.description}</p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default AboutUsSection;

src/components/content/SampleMCPs.tsx

@@ -1,34 +1,66 @@
 import React from 'react';
-import { FiServer, FiZap, FiDollarSign, FiUsers } from 'react-icons/fi';
+import { FiServer, FiZap, FiDollarSign, FiUsers, FiCheck } from 'react-icons/fi';
 
 const mcps = [
   {
     name: "Image Captioning MCP",
     description: "Generate accurate captions for images using state-of-the-art AI models.",
-    features: ["Accepts image uploads", "Returns natural language captions", "Supports multiple languages"],
+    features: [
+      "Accepts image uploads",
+      "Returns natural language captions",
+      "Supports multiple languages"
+    ],
     icon: <FiServer className="w-6 h-6 text-blue-500" />,
-    author: "Ben Johnson"
+    author: "Ben Johnson",
+    price: "$0.01 / image",
+    data: "Isolated - Verified",
+    dataStoring: true,
+    credentialsStoring: false,
   },
   {
     name: "Sentiment Analysis MCP",
     description: "Analyze the sentiment of any text and get instant feedback.",
-    features: ["Real-time analysis", "Positive/Negative/Neutral output", "API & UI integration"],
+    features: [
+      "Real-time analysis",
+      "Positive/Negative/Neutral output",
+      "API & UI integration"
+    ],
     icon: <FiZap className="w-6 h-6 text-yellow-500" />,
-    author: "Cayla Hawkins"
+    author: "Cayla Hawkins",
+    price: "$0.005 / request",
+    data: "Shared - Verified",
+    dataStoring: true,
+    credentialsStoring: true,
   },
   {
     name: "Text-to-Speech MCP",
     description: "Convert written text into realistic speech audio.",
-    features: ["Multiple voices", "Fast response", "Downloadable MP3"],
+    features: [
+      "Multiple voices",
+      "Fast response",
+      "Downloadable MP3"
+    ],
     icon: <FiUsers className="w-6 h-6 text-purple-500" />,
-    author: "Toby Shmidt"
+    author: "Toby Shmidt",
+    price: "$0.02 / 1000 chars",
+    data: "Isolated - Verified",
+    dataStoring: false,
+    credentialsStoring: false,
   },
   {
     name: "Paywall API MCP",
     description: "Easily monetize your APIs with built-in paywall and analytics.",
-    features: ["Stripe integration", "Usage analytics", "Custom pricing"],
+    features: [
+      "Stripe integration",
+      "Usage analytics",
+      "Custom pricing"
+    ],
     icon: <FiDollarSign className="w-6 h-6 text-green-500" />,
-    author: "Sara Lee"
+    author: "Sara Lee",
+    price: "$0.10 / 100 calls",
+    data: "Shared - Verified",
+    dataStoring: true,
+    credentialsStoring: true,
   }
 ];
 
@@ -53,6 +85,7 @@ const SampleMCPs = () => {
             <div className="flex items-center gap-3">
               {mcp.icon}
               <h4 className="font-medium text-gray-900 dark:text-white">{mcp.name}</h4>
+              <span className="ml-auto text-xs px-2 py-1 rounded truncate text-green-700 dark:text-green-200">{mcp.price}</span>
             </div>
             <div className="text-sm text-gray-600 dark:text-gray-300">{mcp.description}</div>
             <ul className="list-disc list-inside text-xs text-gray-500 dark:text-gray-400 pl-2">
@@ -60,6 +93,17 @@ const SampleMCPs = () => {
                 <li key={i}>{feature}</li>
               ))}
             </ul>
+            <div className="flex flex-wrap gap-2 mt-2 text-xs">
+              <span className="flex items-center gap-1 px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200">
+                {mcp.data} <FiCheck className="inline w-4 h-4 text-green-500" />
+              </span>
+              <span className="flex items-center gap-1 px-2 py-1 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
+                Data storing {mcp.dataStoring && <FiCheck className="inline w-4 h-4 text-green-500" />}
+              </span>
+              <span className="flex items-center gap-1 px-2 py-1 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
+                Credentials storing {mcp.credentialsStoring && <FiCheck className="inline w-4 h-4 text-green-500" />}
+              </span>
+            </div>
             <div className="text-xs text-gray-400 dark:text-gray-500 mt-2">By {mcp.author}</div>
           </div>
         ))}

src/components/content/TeamSection.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+
+interface TeamMember {
+  name: string;
+  role: string;
+  avatar?: string;
+  description: string;
+  socials?: {
+    twitter?: string;
+    linkedin?: string;
+    github?: string;
+  };
+  tags?: string[];
+}
+
+interface TeamSectionProps {
+  id?: string;
+  className?: string;
+}
+
+const TeamSection: React.FC<TeamSectionProps> = ({ id, className = '' }) => {
+  const leadership: TeamMember[] = [
+    {
+      name: 'John Doe',
+      role: 'Founder & CEO',
+      description: 'Visionary leader with 10+ years of experience in tech startups.',
+      tags: ['Leadership', 'Strategy', 'Blockchain'],
+      socials: {
+        twitter: '#',
+        linkedin: '#',
+        github: '#'
+      }
+    },
+    {
+      name: 'Jane Smith',
+      role: 'CTO',
+      description: 'Technology expert with a passion for building scalable systems.',
+      tags: ['Engineering', 'Architecture', 'AI/ML']
+    },
+    {
+      name: 'Austin Wales',
+      role: 'CFO',
+      description: 'Finance officer responsible for all the finance related decisions.',
+      tags: ['Business', 'Management', 'Finance']
+    },
+  ];
+
+  const advisors: TeamMember[] = [
+    {
+      name: 'Dr. Robert Johnson',
+      role: 'Blockchain Advisor',
+      description: 'Industry veteran with deep expertise in blockchain technology.',
+      tags: ['Blockchain', 'Advisor']
+    },
+    {
+      name: 'Sarah Williams',
+      role: 'AI Research Advisor',
+      description: 'Leading researcher in artificial intelligence and machine learning.',
+      tags: ['AI/ML', 'Research']
+    },
+  ];
+
+  const interns: TeamMember[] = [
+    {
+      name: 'Alex Chen',
+      role: 'Software Engineering Intern',
+      description: 'Computer Science student passionate about decentralized technologies.',
+      tags: ['Intern', 'Developer']
+    },
+    {
+      name: 'Maria Garcia',
+      role: 'UI/UX Design Intern',
+      description: 'Design student focused on creating intuitive user experiences.',
+      tags: ['Intern', 'Design']
+    },
+  ];
+
+  const renderTeamMember = (member: TeamMember, index: number) => (
+    <Card key={index} className="h-full flex flex-col hover:shadow-lg transition-shadow">
+      <CardHeader className="flex flex-col items-center text-center pb-2">
+        <Avatar className="h-24 w-24 mb-4 border-2 border-primary/20">
+          <AvatarImage src={member.avatar} alt={member.name} />
+          <AvatarFallback className="bg-primary/10 text-primary">
+            {member.name.split(' ').map(n => n[0]).join('')}
+          </AvatarFallback>
+        </Avatar>
+        <CardTitle className="text-xl">{member.name}</CardTitle>
+        <p className="text-primary font-medium">{member.role}</p>
+      </CardHeader>
+      <CardContent className="flex-1 flex flex-col items-center text-center px-4 pb-4">
+        <p className="text-sm text-muted-foreground mb-4">{member.description}</p>
+        <div className="flex flex-wrap justify-center gap-2 mt-auto">
+          {member.tags?.map((tag, i) => (
+            <Badge key={i} variant="outline" className="text-xs">
+              {tag}
+            </Badge>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+
+  const renderTeamSection = (title: string, members: TeamMember[]) => (
+    <div className="mb-12">
+      <h3 className="text-2xl mb-6 text-center">{title}</h3>
+      <div className="grid gap-6 mx-auto px-auto max-w-7xl grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 justify-center">
+        {members.map((member, index) => renderTeamMember(member, index))}
+      </div>
+    </div>
+  );
+
+  return (
+    <section id={id} className={`py-16 md:py-24 ${className}`}>
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl md:text-4xl mb-4">Our Team</h2>
+          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+            Meet the talented individuals behind our success
+          </p>
+        </div>
+
+        {renderTeamSection('Leadership', leadership)}
+        {advisors.length > 0 && renderTeamSection('Advisors', advisors)}
+        {interns.length > 0 && renderTeamSection('Interns', interns)}
+      </div>
+    </section>
+  );
+};
+
+export default TeamSection;

src/pages/Index.tsx

@@ -9,6 +9,9 @@ import { FiInfo } from 'react-icons/fi';
 import HeroSection from '@/components/HeroSection';
 import MCPSection from '@/components/MCPSection';
 import MonetizeSection from '@/components/MonetizeSection';
+import TeamSection from '@/components/content/TeamSection';
+import AboutUsSection from '@/components/content/AboutUsSection';
+import Footer from '@/components/Footer';
 
 const Index = () => {
   const [selectedPrompt, setSelectedPrompt] = useState<string | null>(null);
@@ -83,6 +86,16 @@ const Index = () => {
           <MCPSection />
           <MonetizeSection />
           
+          {/* Team Section */}
+          <TeamSection id="team" className="bg-background" />
+          
+          {/* About Us Section */}
+          <AboutUsSection id="about" className="bg-background" />
+
+          
+          {/* Footer */}
+          <Footer />
+
           {/* Realistic Film Camera Light Leaks */}
           <div className="fixed inset-0 pointer-events-none overflow-hidden z-0">
             {/* Horizontal streak from left */}
@@ -96,17 +109,8 @@ const Index = () => {
           </div>
 
           {/* Realistic Film Camera Light Leaks */}
-          <div className="fixed inset-0 pointer-events-none overflow-hidden z-0">
-            {/* Horizontal streak from left */}
-            <div className="absolute left-0 top-1/4 w-[600px] h-[200px] bg-gradient-to-r from-red-400/30 via-orange-300/20 to-transparent blur-3xl rotate-[-5deg] skew-y-6 mix-blend-screen" />
-            {/* Vertical burn from bottom */}
-            <div className="absolute bottom-0 left-1/3 w-[300px] h-[580px] bg-gradient-to-t from-yellow-300/20 via-pink-400/10 to-transparent blur-3xl rotate-12 mix-blend-screen" />
-            {/* Angled streak from top right */}
-            <div className="absolute top-0 right-0 w-[400px] h-[300px] bg-gradient-to-bl from-red-500/20 via-orange-300/10 to-transparent blur-2xl -rotate-12 mix-blend-screen" />
-            {/* Blobby irregular light spot */}
-            <div className="absolute bottom-[10%] right-[20%] w-[350px] h-[250px] bg-pink-300/15 rounded-3xl blur-[100px] rotate-[18deg] mix-blend-screen" />
-          </div>
         </div>
+
       </div>
     </ThemeProvider>
   );

src/utils/promptContent.tsx

@@ -7,6 +7,8 @@ import WhatCanHelpContent from '../components/content/WhatCanHelpContent';
 import Developers from '@/components/content/Developers';
 import SampleMCPs from '@/components/content/SampleMCPs';
 import DynamicContent from '@/components/content/DynamicContent';
+import TeamSection from '@/components/content/TeamSection';
+import AboutUsSection from '@/components/content/AboutUsSection';
 
 export const getPromptContent = (prompt: string) => {
   switch (prompt) {
@@ -40,6 +42,16 @@ export const getPromptContent = (prompt: string) => {
         title: "Sample MCP Servers",
         component: <SampleMCPs />
       };
+    case "Our Team":
+      return {
+        title: "Our Team",
+        component: <TeamSection />
+      }
+    case "About Us":
+      return {
+        title: "About Us",
+        component: <AboutUsSection />
+      }
     // case "Ask Gemini":
     //   return {
     //     title: "Gemini Answer",