Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AgentFlow | AI Agent Orchestration Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0a0b0d; | |
| color: #f0f0f0; | |
| overflow-x: hidden; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); | |
| } | |
| .agent-card { | |
| transition: all 0.3s ease; | |
| background: rgba(255, 255, 255, 0.03); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .agent-card:hover { | |
| transform: translateY(-5px); | |
| background: rgba(255, 255, 255, 0.07); | |
| } | |
| .hero-gradient { | |
| background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.15) 0%, rgba(0, 0, 0, 0) 60%); | |
| } | |
| .feature-card { | |
| background: linear-gradient(145deg, rgba(30, 30, 40, 0.8), rgba(20, 20, 30, 0.8)); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .animated-bg { | |
| animation: gradient 8s ease infinite; | |
| background-size: 200% 200%; | |
| background-image: linear-gradient(45deg, #0f172a, #1e293b, #0f172a); | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| /* Modal styles */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.8); | |
| z-index: 1000; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .modal-content { | |
| background-color: #1e293b; | |
| padding: 2rem; | |
| border-radius: 0.5rem; | |
| max-width: 500px; | |
| width: 90%; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| } | |
| .close-modal { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| /* Animation for agent cards */ | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| /* Notification styles */ | |
| .notification { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background-color: #10b981; | |
| color: white; | |
| padding: 15px 25px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| display: none; | |
| z-index: 1001; | |
| } | |
| /* Agent detail modal */ | |
| .agent-detail-modal { | |
| max-width: 800px; | |
| } | |
| .agent-detail-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .agent-detail-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| .agent-detail-icon { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 32px; | |
| } | |
| .agent-detail-body { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| } | |
| .agent-detail-features, .agent-detail-stats { | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 20px; | |
| border-radius: 8px; | |
| } | |
| .agent-detail-features h3, .agent-detail-stats h3 { | |
| margin-bottom: 15px; | |
| font-size: 18px; | |
| color: #3b82f6; | |
| } | |
| .agent-detail-features ul { | |
| list-style-type: none; | |
| padding-left: 0; | |
| } | |
| .agent-detail-features li { | |
| margin-bottom: 10px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .agent-detail-features li::before { | |
| content: "•"; | |
| color: #8b5cf6; | |
| font-size: 20px; | |
| margin-right: 10px; | |
| } | |
| .agent-detail-stats div { | |
| margin-bottom: 15px; | |
| } | |
| .stat-label { | |
| font-size: 14px; | |
| color: #94a3b8; | |
| margin-bottom: 5px; | |
| } | |
| .stat-value { | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .stat-bar { | |
| height: 8px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 4px; | |
| margin-top: 5px; | |
| overflow: hidden; | |
| } | |
| .stat-bar-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| border-radius: 4px; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Notification --> | |
| <div id="notification" class="notification"> | |
| Action completed successfully! | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-robot text-blue-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-white">Agent<span class="gradient-text">Flow</span></span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-8"> | |
| <a href="#features" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Features</a> | |
| <a href="#agents" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Agents</a> | |
| <a href="#pricing" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Pricing</a> | |
| <a href="#contact" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Contact</a> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button onclick="showSignupModal()" class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-2 rounded-md text-sm font-medium transition-all duration-300 transform hover:scale-105"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" onclick="toggleMobileMenu()" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-gray-900"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#features" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-white">Features</a> | |
| <a href="#agents" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-white">Agents</a> | |
| <a href="#pricing" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-white">Pricing</a> | |
| <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-white">Contact</a> | |
| <button onclick="showSignupModal()" class="w-full text-left px-3 py-2 text-base font-medium text-white bg-blue-600 rounded-md"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient pt-32 pb-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6"> | |
| <span class="gradient-text">Orchestrate</span> Your AI Workforce | |
| </h1> | |
| <p class="text-xl text-gray-300 mb-8 max-w-lg"> | |
| AgentFlow provides the platform and pre-built AI agents to automate and optimize your business processes at scale. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button onclick="showSignupModal()" class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-3 rounded-md text-lg font-medium transition-all duration-300 transform hover:scale-105 glow"> | |
| Start Free Trial | |
| </button> | |
| <button onclick="showDemoModal()" class="border border-gray-600 hover:border-blue-500 text-white px-8 py-3 rounded-md text-lg font-medium transition-all duration-300"> | |
| Book Demo | |
| </button> | |
| </div> | |
| <div class="mt-8 flex items-center space-x-4"> | |
| <div class="flex -space-x-2"> | |
| <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-800" src="https://randomuser.me/api/portraits/women/12.jpg" alt=""> | |
| <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-800" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-800" src="https://randomuser.me/api/portraits/women/45.jpg" alt=""> | |
| </div> | |
| <p class="text-gray-400 text-sm"> | |
| Trusted by 500+ enterprises worldwide | |
| </p> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="relative"> | |
| <div class="absolute -top-10 -left-10 w-64 h-64 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20"></div> | |
| <div class="absolute -bottom-20 -right-10 w-64 h-64 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20"></div> | |
| <div class="relative bg-gray-900 bg-opacity-50 border border-gray-800 rounded-2xl p-6 glow"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-sm text-gray-400">AgentFlow Orchestrator</div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 mb-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-sm font-medium text-white">SalesBot</div> | |
| <div class="mt-1 text-sm text-gray-300">Analyzing CRM data and preparing personalized outreach for 32 high-value leads...</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 mb-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-500 flex items-center justify-center"> | |
| <i class="fas fa-chart-line text-white"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-sm font-medium text-white">AnalyticsBot</div> | |
| <div class="mt-1 text-sm text-gray-300">Generated Q3 performance report with 12 actionable insights. Ready for review.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-500 flex items-center justify-center"> | |
| <i class="fas fa-headset text-white"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-sm font-medium text-white">SupportBot</div> | |
| <div class="mt-1 text-sm text-gray-300">Resolved 87% of tier-1 support tickets autonomously. 5 escalated to human agents.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trusted By Section --> | |
| <section class="py-12 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <p class="text-center text-gray-400 mb-8">TRUSTED BY INNOVATIVE TEAMS WORLDWIDE</p> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center justify-center"> | |
| <div class="flex justify-center"> | |
| <img src="https://via.placeholder.com/150x50/1e293b/ffffff?text=TechCorp" alt="TechCorp" class="h-8 opacity-70 hover:opacity-100 transition-opacity"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://via.placeholder.com/150x50/1e293b/ffffff?text=GlobalBank" alt="GlobalBank" class="h-8 opacity-70 hover:opacity-100 transition-opacity"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://via.placeholder.com/150x50/1e293b/ffffff?text=InnovateCo" alt="InnovateCo" class="h-8 opacity-70 hover:opacity-100 transition-opacity"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://via.placeholder.com/150x50/1e293b/ffffff?text=DataSystems" alt="DataSystems" class="h-8 opacity-70 hover:opacity-100 transition-opacity"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://via.placeholder.com/150x50/1e293b/ffffff?text=FutureLabs" alt="FutureLabs" class="h-8 opacity-70 hover:opacity-100 transition-opacity"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful <span class="gradient-text">Features</span></h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Designed to streamline your AI operations and maximize efficiency | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="feature-card rounded-xl p-8 transition-all duration-300 hover:shadow-xl"> | |
| <div class="w-14 h-14 rounded-lg bg-blue-900 bg-opacity-50 flex items-center justify-center mb-6"> | |
| <i class="fas fa-project-diagram text-blue-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Agent Orchestration</h3> | |
| <p class="text-gray-400"> | |
| Seamlessly coordinate multiple AI agents to work together on complex workflows with our visual pipeline builder. | |
| </p> | |
| </div> | |
| <div class="feature-card rounded-xl p-8 transition-all duration-300 hover:shadow-xl"> | |
| <div class="w-14 h-14 rounded-lg bg-purple-900 bg-opacity-50 flex items-center justify-center mb-6"> | |
| <i class="fas fa-brain text-purple-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Pre-built Agents</h3> | |
| <p class="text-gray-400"> | |
| Access our library of specialized agents for sales, support, analytics, and more - ready to deploy in minutes. | |
| </p> | |
| </div> | |
| <div class="feature-card rounded-xl p-8 transition-all duration-300 hover:shadow-xl"> | |
| <div class="w-14 h-14 rounded-lg bg-green-900 bg-opacity-50 flex items-center justify-center mb-6"> | |
| <i class="fas fa-sliders-h text-green-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Custom Agent Creation</h3> | |
| <p class="text-gray-400"> | |
| Build your own AI agents with our no-code builder or bring your own models with our flexible API. | |
| </p> | |
| </div> | |
| <div class="feature-card rounded-xl p-8 transition-all duration-300 hover:shadow-xl"> | |
| <div class="w-14 h-14 rounded-lg bg-yellow-900 bg-opacity-50 flex items-center justify-center mb-6"> | |
| <i class="fas fa-shield-alt text-yellow-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Enterprise Security</h3> | |
| <p class="text-gray-400"> | |
| SOC2 compliant infrastructure with role-based access control, audit logs, and data encryption. | |
| </p> | |
| </div> | |
| <div class="feature-card rounded-xl p-8 transition-all duration-300 hover:shadow-xl"> | |
| <div class="w-14 h-14 rounded-lg bg-red-900 bg-opacity-50 flex items-center justify-center mb-6"> | |
| <i class="fas fa-chart-bar text-red-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Performance Analytics</h3> | |
| <p class="text-gray-400"> | |
| Monitor agent performance, cost optimization, and ROI with detailed analytics dashboards. | |
| </p> | |
| </div> | |
| <div class="feature-card rounded-xl p-8 transition-all duration-300 hover:shadow-xl"> | |
| <div class="w-14 h-14 rounded-lg bg-indigo-900 bg-opacity-50 flex items-center justify-center mb-6"> | |
| <i class="fas fa-plug text-indigo-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">API Integrations</h3> | |
| <p class="text-gray-400"> | |
| Connect with 100+ business tools including Salesforce, Slack, HubSpot, and your custom APIs. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Agents Section --> | |
| <section id="agents" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="gradient-text">AI Agents</span></h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Specialized digital workers ready to transform your business operations | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="agent-card rounded-xl p-6 hover:shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-shopping-cart text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">SalesBot Pro</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Automates lead qualification, outreach, and follow-ups while integrating with your CRM. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-blue-900 bg-opacity-50 text-blue-300 rounded-full text-xs">CRM Integration</span> | |
| <span class="px-3 py-1 bg-purple-900 bg-opacity-50 text-purple-300 rounded-full text-xs">Personalization</span> | |
| <span class="px-3 py-1 bg-green-900 bg-opacity-50 text-green-300 rounded-full text-xs">Analytics</span> | |
| </div> | |
| <button onclick="showAgentDetail('SalesBot Pro', 'blue')" class="w-full mt-4 py-2 text-sm font-medium text-blue-400 hover:text-blue-300 border border-blue-500 rounded-lg transition-all"> | |
| Learn More | |
| </button> | |
| </div> | |
| <div class="agent-card rounded-xl p-6 hover:shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-headset text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">SupportBot 360</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Handles tier-1 customer inquiries 24/7 with natural language understanding and sentiment analysis. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-purple-900 bg-opacity-50 text-purple-300 rounded-full text-xs">Multilingual</span> | |
| <span class="px-3 py-1 bg-pink-900 bg-opacity-50 text-pink-300 rounded-full text-xs">Sentiment Analysis</span> | |
| <span class="px-3 py-1 bg-yellow-900 bg-opacity-50 text-yellow-300 rounded-full text-xs">Knowledge Base</span> | |
| </div> | |
| <button onclick="showAgentDetail('SupportBot 360', 'purple')" class="w-full mt-4 py-2 text-sm font-medium text-purple-400 hover:text-purple-300 border border-purple-500 rounded-lg transition-all"> | |
| Learn More | |
| </button> | |
| </div> | |
| <div class="agent-card rounded-xl p-6 hover:shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-chart-pie text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">DataSense AI</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Analyzes complex datasets, identifies trends, and generates actionable business insights. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-green-900 bg-opacity-50 text-green-300 rounded-full text-xs">Predictive Analytics</span> | |
| <span class="px-3 py-1 bg-blue-900 bg-opacity-50 text-blue-300 rounded-full text-xs">Data Visualization</span> | |
| <span class="px-3 py-1 bg-red-900 bg-opacity-50 text-red-300 rounded-full text-xs">Anomaly Detection</span> | |
| </div> | |
| <button onclick="showAgentDetail('DataSense AI', 'green')" class="w-full mt-4 py-2 text-sm font-medium text-green-400 hover:text-green-300 border border-green-500 rounded-lg transition-all"> | |
| Learn More | |
| </button> | |
| </div> | |
| <div class="agent-card rounded-xl p-6 hover:shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-yellow-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-file-invoice-dollar text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">FinanceBot</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Automates invoice processing, expense categorization, and financial reporting with audit trails. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-yellow-900 bg-opacity-50 text-yellow-300 rounded-full text-xs">Invoice Processing</span> | |
| <span class="px-3 py-1 bg-indigo-900 bg-opacity-50 text-indigo-300 rounded-full text-xs">Compliance</span> | |
| <span class="px-3 py-1 bg-teal-900 bg-opacity-50 text-teal-300 rounded-full text-xs">Forecasting</span> | |
| </div> | |
| <button onclick="showAgentDetail('FinanceBot', 'yellow')" class="w-full mt-4 py-2 text-sm font-medium text-yellow-400 hover:text-yellow-300 border border-yellow-500 rounded-lg transition-all"> | |
| Learn More | |
| </button> | |
| </div> | |
| <div class="agent-card rounded-xl p-6 hover:shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-red-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-bollhorn text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">MarketingGenius</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Creates and optimizes marketing campaigns across channels with A/B testing and performance tracking. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-red-900 bg-opacity-50 text-red-300 rounded-full text-xs">Campaign Automation</span> | |
| <span class="px-3 py-1 bg-pink-900 bg-opacity-50 text-pink-300 rounded-full text-xs">Content Creation</span> | |
| <span class="px-3 py-1 bg-purple-900 bg-opacity-50 text-purple-300 rounded-full text-xs">ROI Tracking</span> | |
| </div> | |
| <button onclick="showAgentDetail('MarketingGenius', 'red')" class="w-full mt-4 py-2 text-sm font-medium text-red-400 hover:text-red-300 border border-red-500 rounded-lg transition-all"> | |
| Learn More | |
| </button> | |
| </div> | |
| <div class="agent-card rounded-xl p-6 hover:shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-users text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">HR Assistant</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Streamlines recruitment, onboarding, and employee engagement with personalized interactions. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-3 py-1 bg-indigo-900 bg-opacity-50 text-indigo-300 rounded-full text-xs">Candidate Screening</span> | |
| <span class="px-3 py-1 bg-blue-900 bg-opacity-50 text-blue-300 rounded-full text-xs">Onboarding</span> | |
| <span class="px-3 py-1 bg-green-900 bg-opacity-50 text-green-300 rounded-full text-xs">Employee Surveys</span> | |
| </div> | |
| <button onclick="showAgentDetail('HR Assistant', 'indigo')" class="w-full mt-4 py-2 text-sm font-medium text-indigo-400 hover:text-indigo-300 border border-indigo-500 rounded-lg transition-all"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button onclick="showNotification('All agents loaded successfully')" class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-3 rounded-md text-lg font-medium transition-all duration-300 transform hover:scale-105"> | |
| Explore All Agents | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Simple, Transparent <span class="gradient-text">Pricing</span></h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Pay only for what you need with flexible pricing that scales with your business | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="bg-gray-900 rounded-xl p-8 border border-gray-800 hover:border-blue-500 transition-all"> | |
| <div class="text-center mb-6"> | |
| <h3 class="text-2xl font-bold mb-2">Starter</h3> | |
| <p class="text-gray-400 mb-4">Ideal for small teams and startups</p> | |
| <div class="flex justify-center items-baseline"> | |
| <span class="text-4xl font-bold">$99</span> | |
| <span class="text-gray-400 ml-1">/month</span> | |
| </div> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>5 Active Agents</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>10,000 Monthly Actions</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Basic Analytics</span> | |
| </li> | |
| <li class="flex items-center text-gray-500"> | |
| <i class="fas fa-times text-gray-600 mr-2"></i> | |
| <span>No Custom Agents</span> | |
| </li> | |
| <li class="flex items-center text-gray-500"> | |
| <i class="fas fa-times text-gray-600 mr-2"></i> | |
| <span>No Priority Support</span> | |
| </li> | |
| </ul> | |
| <button onclick="selectPlan('Starter')" class="w-full py-3 bg-gray-800 hover:bg-gray-700 text-white rounded-lg font-medium transition-all"> | |
| Get Started | |
| </button> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl p-8 border-2 border-blue-500 transform scale-105 relative glow"> | |
| <div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg"> | |
| POPULAR | |
| </div> | |
| <div class="text-center mb-6"> | |
| <h3 class="text-2xl font-bold mb-2">Professional</h3> | |
| <p class="text-gray-400 mb-4">For growing businesses with automation needs</p> | |
| <div class="flex justify-center items-baseline"> | |
| <span class="text-4xl font-bold">$499</span> | |
| <span class="text-gray-400 ml-1">/month</span> | |
| </div> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>20 Active Agents</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>100,000 Monthly Actions</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Advanced Analytics</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Custom Agent Builder</span> | |
| </li> | |
| <li class="flex items-center text-gray-500"> | |
| <i class="fas fa-times text-gray-600 mr-2"></i> | |
| <span>Standard Support</span> | |
| </li> | |
| </ul> | |
| <button onclick="selectPlan('Professional')" class="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white rounded-lg font-medium transition-all"> | |
| Get Started | |
| </button> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl p-8 border border-gray-800 hover:border-purple-500 transition-all"> | |
| <div class="text-center mb-6"> | |
| <h3 class="text-2xl font-bold mb-2">Enterprise</h3> | |
| <p class="text-gray-400 mb-4">For large organizations with complex needs</p> | |
| <div class="flex justify-center items-baseline"> | |
| <span class="text-4xl font-bold">Custom</span> | |
| </div> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Unlimited Agents</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Unlimited Actions</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Enterprise Analytics</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Custom Agent Builder</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>24/7 Priority Support</span> | |
| </li> | |
| </ul> | |
| <button onclick="selectPlan('Enterprise')" class="w-full py-3 bg-gray-800 hover:bg-gray-700 text-white rounded-lg font-medium transition-all"> | |
| Contact Sales | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-gray-900 rounded-xl p-8 border border-gray-800 max-w-5xl mx-auto"> | |
| <h3 class="text-xl font-bold mb-4 text-center">Need something different?</h3> | |
| <p class="text-gray-400 text-center mb-6 max-w-3xl mx-auto"> | |
| We offer custom plans for organizations with unique requirements. Contact us to discuss your needs. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button onclick="showDemoModal()" class="px-6 py-3 border border-blue-500 text-blue-400 hover:bg-blue-900 hover:bg-opacity-30 rounded-lg font-medium transition-all"> | |
| Schedule a Demo | |
| </button> | |
| <button onclick="showContactModal()" class="px-6 py-3 bg-gray-800 hover:bg-gray-700 text-white rounded-lg font-medium transition-all"> | |
| Contact Our Team | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-gray-900 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our <span class="gradient-text">Clients Say</span></h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Don't just take our word for it - hear from our customers | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-800 rounded-xl p-8"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Sarah Johnson</h4> | |
| <p class="text-gray-400 text-sm">CTO, TechCorp</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-6"> | |
| "AgentFlow transformed our customer support operations. We reduced response times by 80% while maintaining 95% customer satisfaction." | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-8"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/men/65.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Michael Chen</h4> | |
| <p class="text-gray-400 text-sm">VP Sales, GlobalBank</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-6"> | |
| "Our sales team's productivity increased 3x after implementing SalesBot Pro. The personalized outreach automation is game-changing." | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-8"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/women/28.jpg" alt="Emma Rodriguez" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Emma Rodriguez</h4> | |
| <p class="text-gray-400 text-sm">Marketing Director, InnovateCo</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-6"> | |
| "MarketingGenius helped us optimize our ad spend while increasing conversions. The AI-generated insights saved us thousands in wasted budget." | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button onclick="showTestimonialsModal()" class="px-6 py-3 border border-gray-600 hover:border-blue-500 text-gray-300 hover:text-white rounded-lg font-medium transition-all"> | |
| Read More Testimonials | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-blue-900 to-purple-900"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Business with AI?</h2> | |
| <p class="text-xl text-blue-200 mb-8 max-w-3xl mx-auto"> | |
| Join thousands of companies automating their workflows with AgentFlow's powerful AI agents. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button onclick="showSignupModal()" class="px-8 py-4 bg-white hover:bg-gray-100 text-blue-900 font-bold rounded-lg text-lg transition-all transform hover:scale-105"> | |
| Start Free 14-Day Trial | |
| </button> | |
| <button onclick="showDemoModal()" class="px-8 py-4 border-2 border-white hover:bg-white hover:bg-opacity-10 text-white font-bold rounded-lg text-lg transition-all"> | |
| Schedule a Demo | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Get in <span class="gradient-text">Touch</span></h2> | |
| <p class="text-xl text-gray-400 mb-8"> | |
| Have questions about AgentFlow or want to discuss how AI agents can help your business? Our team is here to help. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center mr-4"> | |
| <i class="fas fa-map-marker-alt text-blue-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Our Office</h4> | |
| <p class="text-gray-400">123 AI Avenue, San Francisco, CA 94107</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center mr-4"> | |
| <i class="fas fa-envelope text-purple-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Email Us</h4> | |
| <p class="text-gray-400">hello@agentflow.ai</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mr-4"> | |
| <i class="fas fa-phone-alt text-green-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Call Us</h4> | |
| <p class="text-gray-400">+1 (555) 123-4567</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-blue-600 flex items-center justify-center transition-all"> | |
| <i class="fab fa-twitter text-white"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-blue-700 flex items-center justify-center transition-all"> | |
| <i class="fab fa-linkedin-in text-white"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center transition-all"> | |
| <i class="fab fa-github text-white"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-xl p-8 border border-gray-800"> | |
| <h3 class="text-2xl font-bold mb-6">Send Us a Message</h3> | |
| <form id="contact-form" onsubmit="submitContactForm(event)"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-sm font-medium text-gray-400 mb-2">Your Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="John Doe" required> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-sm font-medium text-gray-400 mb-2">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="you@company.com" required> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="subject" class="block text-sm font-medium text-gray-400 mb-2">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="How can we help?" required> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-sm font-medium text-gray-400 mb-2">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Your message here..." required></textarea> | |
| </div> | |
| <button type="submit" class="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white rounded-lg font-medium transition-all"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black py-12 px-4 sm:px-6 lg:px-8 border-t border-gray-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12"> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Product</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Agents</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Integrations</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">API Reference</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Press</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Security</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors">GDPR</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-900 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-robot text-blue-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-white">Agent<span class="gradient-text">Flow</span></span> | |
| </div> | |
| <p class="text-gray-500 text-sm"> | |
| © 2023 AgentFlow, Inc. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Modals --> | |
| <div id="signup-modal" class="modal"> | |
| <div class="modal-content relative"> | |
| <span class="close-modal text-gray-400 hover:text-white" onclick="hideSignupModal()">×</span> | |
| <h2 class="text-2xl font-bold mb-6">Create Your Account</h2> | |
| <form id="signup-form" onsubmit="submitSignupForm(event)"> | |
| <div class="mb-4"> | |
| <label for="signup-email" class="block text-sm font-medium text-gray-400 mb-2">Email Address</label> | |
| <input type="email" id="signup-email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="you@company.com" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="signup-password" class="block text-sm font-medium text-gray-400 mb-2">Password</label> | |
| <input type="password" id="signup-password" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="••••••••" required> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="signup-company" class="block text-sm font-medium text-gray-400 mb-2">Company Name</label> | |
| <input type="text" id="signup-company" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Your Company" required> | |
| </div> | |
| <button type="submit" class="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white rounded-lg font-medium transition-all mb-4"> | |
| Start Free Trial | |
| </button> | |
| <p class="text-center text-gray-400 text-sm"> | |
| Already have an account? <a href="#" class="text-blue-400 hover:text-blue-300">Log in</a> | |
| </p> | |
| </form> | |
| </div> | |
| </div> | |
| <div id="demo-modal" class="modal"> | |
| <div class="modal-content relative"> | |
| <span class="close-modal text-gray-400 hover:text-white" onclick="hideDemoModal()">×</span> | |
| <h2 class="text-2xl font-bold mb-6">Schedule a Demo</h2> | |
| <form id="demo-form" onsubmit="submitDemoForm(event)"> | |
| <div class="mb-4"> | |
| <label for="demo-name" class="block text-sm font-medium text-gray-400 mb-2">Your Name</label> | |
| <input type="text" id="demo-name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="John Doe" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="demo-email" class="block text-sm font-medium text-gray-400 mb-2">Email Address</label> | |
| <input type="email" id="demo-email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="you@company.com" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="demo-company" class="block text-sm font-medium text-gray-400 mb-2">Company Name</label> | |
| <input type="text" id="demo-company" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Your Company" required> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="demo-date" class="block text-sm font-medium text-gray-400 mb-2">Preferred Date & Time</label> | |
| <input type="datetime-local" id="demo-date" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required> | |
| </div> | |
| <button type="submit" class="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white rounded-lg font-medium transition-all"> | |
| Schedule Demo | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div id="contact-modal" class="modal"> | |
| <div class="modal-content relative"> | |
| <span class="close-modal text-gray-400 hover:text-white" onclick="hideContactModal()">×</span> | |
| <h2 class="text-2xl font-bold mb-6">Contact Our Team</h2> | |
| <form id="contact-team-form" onsubmit="submitContactTeamForm(event)"> | |
| <div class="mb-4"> | |
| <label for="contact-name" class="block text-sm font-medium text-gray-400 mb-2">Your Name</label> | |
| <input type="text" id="contact-name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="John Doe" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="contact-email" class="block text-sm font-medium text-gray-400 mb-2">Email Address</label> | |
| <input type="email" id="contact-email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="you@company.com" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="contact-subject" class="block text-sm font-medium text-gray-400 mb-2">Subject</label> | |
| <input type="text" id="contact-subject" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="How can we help?" required> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="contact-message" class="block text-sm font-medium text-gray-400 mb-2">Message</label> | |
| <textarea id="contact-message" rows="4" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Your message here..." required></textarea> | |
| </div> | |
| <button type="submit" class="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white rounded-lg font-medium transition-all"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div id="testimonials-modal" class="modal"> | |
| <div class="modal-content relative"> | |
| <span class="close-modal text-gray-400 hover:text-white" onclick="hideTestimonialsModal()">×</span> | |
| <h2 class="text-2xl font-bold mb-6">Customer Testimonials</h2> | |
| <div class="space-y-6 max-h-[70vh] overflow-y-auto pr-4"> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="David Kim" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">David Kim</h4> | |
| <p class="text-gray-400 text-sm">Director of Operations, RetailChain</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4"> | |
| "Implementing AgentFlow's inventory management agents reduced our stockouts by 92% while decreasing overstock by 65%. The AI's predictive capabilities are incredibly accurate." | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/54.jpg" alt="Lisa Wong" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Lisa Wong</h4> | |
| <p class="text-gray-400 text-sm">CEO, HealthTech Solutions</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4"> | |
| "The HR Assistant transformed our recruitment process. We now fill positions 40% faster while finding higher quality candidates. The automated screening is remarkably sophisticated." | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/76.jpg" alt="Robert Taylor" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Robert Taylor</h4> | |
| <p class="text-gray-400 text-sm">CFO, FinancialEdge</p> | |
| </ | |
| </html> |