File size: 9,005 Bytes
72e5643 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About - AgentFlow Studio</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-900 text-white min-h-screen">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8 max-w-4xl">
<div class="bg-gray-800 rounded-xl p-8 mb-8 text-center">
<h1 class="text-4xl font-bold mb-4">About AgentFlow Studio</h1>
<p class="text-xl text-gray-300">Democratizing AI agent development through visual programming</p>
</div>
<div class="space-y-8">
<section class="bg-gray-800 rounded-xl p-8">
<h2 class="text-2xl font-semibold mb-4">Our Mission</h2>
<p class="text-gray-300 leading-relaxed">
AgentFlow Studio was born from the recognition that building sophisticated AI agents with Langchain
requires significant programming expertise. We believe that the power of AI should be accessible to
everyone, regardless of their coding background.
</p>
<p class="text-gray-300 leading-relaxed mt-4">
Our mission is to democratize AI agent development by providing an intuitive, visual interface that
allows developers, researchers, and businesses to create complex Langchain agents through simple
drag-and-drop interactions.
</p>
</section>
<section class="bg-gray-800 rounded-xl p-8">
<h2 class="text-2xl font-semibold mb-6">Key Features</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="flex items-start gap-4">
<div class="bg-blue-600 p-3 rounded-lg">
<i data-feather="mouse-pointer" class="w-6 h-6"></i>
</div>
<div>
<h3 class="text-lg font-semibold mb-2">Visual Builder</h3>
<p class="text-gray-300">Drag and drop components to create complex agent workflows without writing code.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="bg-green-600 p-3 rounded-lg">
<i data-feather="download" class="w-6 h-6"></i>
</div>
<div>
<h3 class="text-lg font-semibold mb-2">Python Export</h3>
<p class="text-gray-300">Generate production-ready Python code that integrates seamlessly with your existing projects.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="bg-purple-600 p-3 rounded-lg">
<i data-feather="layers" class="w-6 h-6"></i>
</div>
<div>
<h3 class="text-lg font-semibold mb-2">Component Library</h3>
<p class="text-gray-300">Pre-built components for common patterns and easy customization.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="bg-yellow-600 p-3 rounded-lg">
<i data-feather="users" class="w-6 h-6"></i>
</div>
<div>
<h3 class="text-lg font-semibold mb-2">Community Driven</h3>
<p class="text-gray-300">Built with and for the AI community, with regular updates and new features.</p>
</div>
</div>
</div>
</section>
<section class="bg-gray-800 rounded-xl p-8">
<h2 class="text-2xl font-semibold mb-6">The Team</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="text-center">
<div class="bg-gradient-to-br from-blue-500 to-purple-600 w-24 h-24 rounded-full mx-auto mb-4 flex items-center justify-center">
<i data-feather="user" class="w-12 h-12"></i>
</div>
<h3 class="text-lg font-semibold">Alex Chen</h3>
<p class="text-blue-400">Lead Developer</p>
<p class="text-gray-300 text-sm mt-2">Full-stack developer with passion for AI and UX design</p>
</div>
<div class="text-center">
<div class="bg-gradient-to-br from-green-500 to-blue-600 w-24 h-24 rounded-full mx-auto mb-4 flex items-center justify-center">
<i data-feather="user" class="w-12 h-12"></i>
</div>
<h3 class="text-lg font-semibold">Maria Rodriguez</h3>
<p class="text-green-400">AI Researcher</p>
<p class="text-gray-300 text-sm mt-2">Specializes in language models and agent architectures</p>
</div>
<div class="text-center">
<div class="bg-gradient-to-br from-purple-500 to-pink-600 w-24 h-24 rounded-full mx-auto mb-4 flex items-center justify-center">
<i data-feather="user" class="w-12 h-12"></i>
</div>
<h3 class="text-lg font-semibold">David Kim</h3>
<p class="text-purple-400">Product Designer</p>
<p class="text-gray-300 text-sm mt-2">Creates intuitive interfaces for complex technical tools</p>
</div>
</div>
</section>
<section class="bg-gray-800 rounded-xl p-8">
<h2 class="text-2xl font-semibold mb-4">Technology Stack</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
<div class="bg-gray-700 p-4 rounded-lg">
<i data-feather="code" class="w-8 h-8 mx-auto mb-2 text-blue-400"></i>
<p class="font-semibold">HTML/CSS/JS</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<i data-feather="layers" class="w-8 h-8 mx-auto mb-2 text-green-400"></i>
<p class="font-semibold">TailwindCSS</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<i data-feather="cpu" class="w-8 h-8 mx-auto mb-2 text-purple-400"></i>
<p class="font-semibold">Web Components</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<i data-feather="zap" class="w-8 h-8 mx-auto mb-2 text-yellow-400"></i>
<p class="font-semibold">Vanta.js</p>
</div>
</div>
</section>
<section class="bg-gray-800 rounded-xl p-8 text-center">
<h2 class="text-2xl font-semibold mb-4">Join Our Community</h2>
<p class="text-gray-300 mb-6">We're building the future of visual AI development together</p>
<div class="flex justify-center gap-4">
<a href="#" class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg font-semibold inline-flex items-center gap-2">
<i data-feather="github"></i>GitHub
</a>
<a href="#" class="bg-green-600 hover:bg-green-700 px-6 py-3 rounded-lg font-semibold inline-flex items-center gap-2">
<i data-feather="message-circle"></i>Discord
</a>
<a href="#" class="bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-lg font-semibold inline-flex items-center gap-2">
<i data-feather="mail"></i>Newsletter
</a>
</div>
</section>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
</script>
</body>
</html> |