Hugging Face's logo

Spaces:
Itsjustamit
/
sample-site
Running

App Files Community
Itsjustamit commited on
Commit
71d3d16
·
verified ·
1 Parent(s): 96a4484

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1117 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sample Site
3
- emoji: ⚡
4
- colorFrom: blue
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: sample-site
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1117 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AgentFlow | AI Agent Orchestration Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #0a0b0d;
15
+ color: #f0f0f0;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ .gradient-text {
20
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
21
+ -webkit-background-clip: text;
22
+ background-clip: text;
23
+ color: transparent;
24
+ }
25
+
26
+ .glow {
27
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
28
+ }
29
+
30
+ .agent-card {
31
+ transition: all 0.3s ease;
32
+ background: rgba(255, 255, 255, 0.03);
33
+ backdrop-filter: blur(10px);
34
+ border: 1px solid rgba(255, 255, 255, 0.1);
35
+ }
36
+
37
+ .agent-card:hover {
38
+ transform: translateY(-5px);
39
+ background: rgba(255, 255, 255, 0.07);
40
+ }
41
+
42
+ .hero-gradient {
43
+ background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.15) 0%, rgba(0, 0, 0, 0) 60%);
44
+ }
45
+
46
+ .feature-card {
47
+ background: linear-gradient(145deg, rgba(30, 30, 40, 0.8), rgba(20, 20, 30, 0.8));
48
+ border: 1px solid rgba(255, 255, 255, 0.05);
49
+ }
50
+
51
+ .nav-link {
52
+ position: relative;
53
+ }
54
+
55
+ .nav-link::after {
56
+ content: '';
57
+ position: absolute;
58
+ width: 0;
59
+ height: 2px;
60
+ bottom: -2px;
61
+ left: 0;
62
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
63
+ transition: width 0.3s ease;
64
+ }
65
+
66
+ .nav-link:hover::after {
67
+ width: 100%;
68
+ }
69
+
70
+ .animated-bg {
71
+ animation: gradient 8s ease infinite;
72
+ background-size: 200% 200%;
73
+ background-image: linear-gradient(45deg, #0f172a, #1e293b, #0f172a);
74
+ }
75
+
76
+ @keyframes gradient {
77
+ 0% { background-position: 0% 50%; }
78
+ 50% { background-position: 100% 50%; }
79
+ 100% { background-position: 0% 50%; }
80
+ }
81
+
82
+ /* Modal styles */
83
+ .modal {
84
+ display: none;
85
+ position: fixed;
86
+ top: 0;
87
+ left: 0;
88
+ width: 100%;
89
+ height: 100%;
90
+ background-color: rgba(0, 0, 0, 0.8);
91
+ z-index: 1000;
92
+ justify-content: center;
93
+ align-items: center;
94
+ }
95
+
96
+ .modal-content {
97
+ background-color: #1e293b;
98
+ padding: 2rem;
99
+ border-radius: 0.5rem;
100
+ max-width: 500px;
101
+ width: 90%;
102
+ max-height: 90vh;
103
+ overflow-y: auto;
104
+ }
105
+
106
+ .close-modal {
107
+ position: absolute;
108
+ top: 1rem;
109
+ right: 1rem;
110
+ font-size: 1.5rem;
111
+ cursor: pointer;
112
+ }
113
+
114
+ /* Animation for agent cards */
115
+ @keyframes float {
116
+ 0% { transform: translateY(0px); }
117
+ 50% { transform: translateY(-10px); }
118
+ 100% { transform: translateY(0px); }
119
+ }
120
+
121
+ .floating {
122
+ animation: float 6s ease-in-out infinite;
123
+ }
124
+
125
+ /* Notification styles */
126
+ .notification {
127
+ position: fixed;
128
+ bottom: 20px;
129
+ right: 20px;
130
+ background-color: #10b981;
131
+ color: white;
132
+ padding: 15px 25px;
133
+ border-radius: 8px;
134
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
135
+ display: none;
136
+ z-index: 1001;
137
+ }
138
+
139
+ /* Agent detail modal */
140
+ .agent-detail-modal {
141
+ max-width: 800px;
142
+ }
143
+
144
+ .agent-detail-content {
145
+ display: flex;
146
+ flex-direction: column;
147
+ gap: 20px;
148
+ }
149
+
150
+ .agent-detail-header {
151
+ display: flex;
152
+ align-items: center;
153
+ gap: 20px;
154
+ }
155
+
156
+ .agent-detail-icon {
157
+ width: 80px;
158
+ height: 80px;
159
+ border-radius: 50%;
160
+ display: flex;
161
+ align-items: center;
162
+ justify-content: center;
163
+ font-size: 32px;
164
+ }
165
+
166
+ .agent-detail-body {
167
+ display: grid;
168
+ grid-template-columns: 1fr 1fr;
169
+ gap: 20px;
170
+ }
171
+
172
+ .agent-detail-features, .agent-detail-stats {
173
+ background: rgba(255, 255, 255, 0.05);
174
+ padding: 20px;
175
+ border-radius: 8px;
176
+ }
177
+
178
+ .agent-detail-features h3, .agent-detail-stats h3 {
179
+ margin-bottom: 15px;
180
+ font-size: 18px;
181
+ color: #3b82f6;
182
+ }
183
+
184
+ .agent-detail-features ul {
185
+ list-style-type: none;
186
+ padding-left: 0;
187
+ }
188
+
189
+ .agent-detail-features li {
190
+ margin-bottom: 10px;
191
+ display: flex;
192
+ align-items: center;
193
+ }
194
+
195
+ .agent-detail-features li::before {
196
+ content: "•";
197
+ color: #8b5cf6;
198
+ font-size: 20px;
199
+ margin-right: 10px;
200
+ }
201
+
202
+ .agent-detail-stats div {
203
+ margin-bottom: 15px;
204
+ }
205
+
206
+ .stat-label {
207
+ font-size: 14px;
208
+ color: #94a3b8;
209
+ margin-bottom: 5px;
210
+ }
211
+
212
+ .stat-value {
213
+ font-size: 16px;
214
+ font-weight: 600;
215
+ }
216
+
217
+ .stat-bar {
218
+ height: 8px;
219
+ background: rgba(255, 255, 255, 0.1);
220
+ border-radius: 4px;
221
+ margin-top: 5px;
222
+ overflow: hidden;
223
+ }
224
+
225
+ .stat-bar-fill {
226
+ height: 100%;
227
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
228
+ border-radius: 4px;
229
+ }
230
+ </style>
231
+ </head>
232
+ <body class="min-h-screen">
233
+ <!-- Notification -->
234
+ <div id="notification" class="notification">
235
+ Action completed successfully!
236
+ </div>
237
+
238
+ <!-- Navigation -->
239
+ <nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-800">
240
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
241
+ <div class="flex items-center justify-between h-16">
242
+ <div class="flex items-center">
243
+ <div class="flex-shrink-0 flex items-center">
244
+ <i class="fas fa-robot text-blue-500 text-2xl mr-2"></i>
245
+ <span class="text-xl font-bold text-white">Agent<span class="gradient-text">Flow</span></span>
246
+ </div>
247
+ </div>
248
+ <div class="hidden md:block">
249
+ <div class="ml-10 flex items-baseline space-x-8">
250
+ <a href="#features" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Features</a>
251
+ <a href="#agents" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Agents</a>
252
+ <a href="#pricing" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Pricing</a>
253
+ <a href="#contact" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Contact</a>
254
+ </div>
255
+ </div>
256
+ <div class="hidden md:block">
257
+ <div class="ml-4 flex items-center md:ml-6">
258
+ <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">
259
+ Get Started
260
+ </button>
261
+ </div>
262
+ </div>
263
+ <div class="-mr-2 flex md:hidden">
264
+ <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">
265
+ <span class="sr-only">Open main menu</span>
266
+ <i class="fas fa-bars"></i>
267
+ </button>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Mobile menu -->
273
+ <div id="mobile-menu" class="hidden md:hidden bg-gray-900">
274
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
275
+ <a href="#features" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-white">Features</a>
276
+ <a href="#agents" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-white">Agents</a>
277
+ <a href="#pricing" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-white">Pricing</a>
278
+ <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-white">Contact</a>
279
+ <button onclick="showSignupModal()" class="w-full text-left px-3 py-2 text-base font-medium text-white bg-blue-600 rounded-md">
280
+ Get Started
281
+ </button>
282
+ </div>
283
+ </div>
284
+ </nav>
285
+
286
+ <!-- Hero Section -->
287
+ <section class="hero-gradient pt-32 pb-20 px-4 sm:px-6 lg:px-8">
288
+ <div class="max-w-7xl mx-auto">
289
+ <div class="md:flex md:items-center md:justify-between">
290
+ <div class="md:w-1/2 mb-12 md:mb-0">
291
+ <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6">
292
+ <span class="gradient-text">Orchestrate</span> Your AI Workforce
293
+ </h1>
294
+ <p class="text-xl text-gray-300 mb-8 max-w-lg">
295
+ AgentFlow provides the platform and pre-built AI agents to automate and optimize your business processes at scale.
296
+ </p>
297
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
298
+ <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">
299
+ Start Free Trial
300
+ </button>
301
+ <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">
302
+ Book Demo
303
+ </button>
304
+ </div>
305
+ <div class="mt-8 flex items-center space-x-4">
306
+ <div class="flex -space-x-2">
307
+ <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="">
308
+ <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="">
309
+ <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="">
310
+ </div>
311
+ <p class="text-gray-400 text-sm">
312
+ Trusted by 500+ enterprises worldwide
313
+ </p>
314
+ </div>
315
+ </div>
316
+ <div class="md:w-1/2 relative">
317
+ <div class="relative">
318
+ <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>
319
+ <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>
320
+ <div class="relative bg-gray-900 bg-opacity-50 border border-gray-800 rounded-2xl p-6 glow">
321
+ <div class="flex justify-between items-center mb-6">
322
+ <div class="flex space-x-2">
323
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
324
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
325
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
326
+ </div>
327
+ <div class="text-sm text-gray-400">AgentFlow Orchestrator</div>
328
+ </div>
329
+ <div class="bg-gray-800 rounded-lg p-4 mb-4">
330
+ <div class="flex items-start">
331
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center">
332
+ <i class="fas fa-robot text-white"></i>
333
+ </div>
334
+ <div class="ml-3">
335
+ <div class="text-sm font-medium text-white">SalesBot</div>
336
+ <div class="mt-1 text-sm text-gray-300">Analyzing CRM data and preparing personalized outreach for 32 high-value leads...</div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ <div class="bg-gray-800 rounded-lg p-4 mb-4">
341
+ <div class="flex items-start">
342
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-500 flex items-center justify-center">
343
+ <i class="fas fa-chart-line text-white"></i>
344
+ </div>
345
+ <div class="ml-3">
346
+ <div class="text-sm font-medium text-white">AnalyticsBot</div>
347
+ <div class="mt-1 text-sm text-gray-300">Generated Q3 performance report with 12 actionable insights. Ready for review.</div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ <div class="bg-gray-800 rounded-lg p-4">
352
+ <div class="flex items-start">
353
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-500 flex items-center justify-center">
354
+ <i class="fas fa-headset text-white"></i>
355
+ </div>
356
+ <div class="ml-3">
357
+ <div class="text-sm font-medium text-white">SupportBot</div>
358
+ <div class="mt-1 text-sm text-gray-300">Resolved 87% of tier-1 support tickets autonomously. 5 escalated to human agents.</div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </section>
368
+
369
+ <!-- Trusted By Section -->
370
+ <section class="py-12 bg-gray-900">
371
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
372
+ <p class="text-center text-gray-400 mb-8">TRUSTED BY INNOVATIVE TEAMS WORLDWIDE</p>
373
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center justify-center">
374
+ <div class="flex justify-center">
375
+ <img src="https://via.placeholder.com/150x50/1e293b/ffffff?text=TechCorp" alt="TechCorp" class="h-8 opacity-70 hover:opacity-100 transition-opacity">
376
+ </div>
377
+ <div class="flex justify-center">
378
+ <img src="https://via.placeholder.com/150x50/1e293b/ffffff?text=GlobalBank" alt="GlobalBank" class="h-8 opacity-70 hover:opacity-100 transition-opacity">
379
+ </div>
380
+ <div class="flex justify-center">
381
+ <img src="https://via.placeholder.com/150x50/1e293b/ffffff?text=InnovateCo" alt="InnovateCo" class="h-8 opacity-70 hover:opacity-100 transition-opacity">
382
+ </div>
383
+ <div class="flex justify-center">
384
+ <img src="https://via.placeholder.com/150x50/1e293b/ffffff?text=DataSystems" alt="DataSystems" class="h-8 opacity-70 hover:opacity-100 transition-opacity">
385
+ </div>
386
+ <div class="flex justify-center">
387
+ <img src="https://via.placeholder.com/150x50/1e293b/ffffff?text=FutureLabs" alt="FutureLabs" class="h-8 opacity-70 hover:opacity-100 transition-opacity">
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </section>
392
+
393
+ <!-- Features Section -->
394
+ <section id="features" class="py-20 px-4 sm:px-6 lg:px-8">
395
+ <div class="max-w-7xl mx-auto">
396
+ <div class="text-center mb-16">
397
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful <span class="gradient-text">Features</span></h2>
398
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
399
+ Designed to streamline your AI operations and maximize efficiency
400
+ </p>
401
+ </div>
402
+
403
+ <div class="grid md:grid-cols-3 gap-8">
404
+ <div class="feature-card rounded-xl p-8 transition-all duration-300 hover:shadow-xl">
405
+ <div class="w-14 h-14 rounded-lg bg-blue-900 bg-opacity-50 flex items-center justify-center mb-6">
406
+ <i class="fas fa-project-diagram text-blue-400 text-2xl"></i>
407
+ </div>
408
+ <h3 class="text-xl font-bold mb-3">Agent Orchestration</h3>
409
+ <p class="text-gray-400">
410
+ Seamlessly coordinate multiple AI agents to work together on complex workflows with our visual pipeline builder.
411
+ </p>
412
+ </div>
413
+
414
+ <div class="feature-card rounded-xl p-8 transition-all duration-300 hover:shadow-xl">
415
+ <div class="w-14 h-14 rounded-lg bg-purple-900 bg-opacity-50 flex items-center justify-center mb-6">
416
+ <i class="fas fa-brain text-purple-400 text-2xl"></i>
417
+ </div>
418
+ <h3 class="text-xl font-bold mb-3">Pre-built Agents</h3>
419
+ <p class="text-gray-400">
420
+ Access our library of specialized agents for sales, support, analytics, and more - ready to deploy in minutes.
421
+ </p>
422
+ </div>
423
+
424
+ <div class="feature-card rounded-xl p-8 transition-all duration-300 hover:shadow-xl">
425
+ <div class="w-14 h-14 rounded-lg bg-green-900 bg-opacity-50 flex items-center justify-center mb-6">
426
+ <i class="fas fa-sliders-h text-green-400 text-2xl"></i>
427
+ </div>
428
+ <h3 class="text-xl font-bold mb-3">Custom Agent Creation</h3>
429
+ <p class="text-gray-400">
430
+ Build your own AI agents with our no-code builder or bring your own models with our flexible API.
431
+ </p>
432
+ </div>
433
+
434
+ <div class="feature-card rounded-xl p-8 transition-all duration-300 hover:shadow-xl">
435
+ <div class="w-14 h-14 rounded-lg bg-yellow-900 bg-opacity-50 flex items-center justify-center mb-6">
436
+ <i class="fas fa-shield-alt text-yellow-400 text-2xl"></i>
437
+ </div>
438
+ <h3 class="text-xl font-bold mb-3">Enterprise Security</h3>
439
+ <p class="text-gray-400">
440
+ SOC2 compliant infrastructure with role-based access control, audit logs, and data encryption.
441
+ </p>
442
+ </div>
443
+
444
+ <div class="feature-card rounded-xl p-8 transition-all duration-300 hover:shadow-xl">
445
+ <div class="w-14 h-14 rounded-lg bg-red-900 bg-opacity-50 flex items-center justify-center mb-6">
446
+ <i class="fas fa-chart-bar text-red-400 text-2xl"></i>
447
+ </div>
448
+ <h3 class="text-xl font-bold mb-3">Performance Analytics</h3>
449
+ <p class="text-gray-400">
450
+ Monitor agent performance, cost optimization, and ROI with detailed analytics dashboards.
451
+ </p>
452
+ </div>
453
+
454
+ <div class="feature-card rounded-xl p-8 transition-all duration-300 hover:shadow-xl">
455
+ <div class="w-14 h-14 rounded-lg bg-indigo-900 bg-opacity-50 flex items-center justify-center mb-6">
456
+ <i class="fas fa-plug text-indigo-400 text-2xl"></i>
457
+ </div>
458
+ <h3 class="text-xl font-bold mb-3">API Integrations</h3>
459
+ <p class="text-gray-400">
460
+ Connect with 100+ business tools including Salesforce, Slack, HubSpot, and your custom APIs.
461
+ </p>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </section>
466
+
467
+ <!-- Agents Section -->
468
+ <section id="agents" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
469
+ <div class="max-w-7xl mx-auto">
470
+ <div class="text-center mb-16">
471
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="gradient-text">AI Agents</span></h2>
472
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
473
+ Specialized digital workers ready to transform your business operations
474
+ </p>
475
+ </div>
476
+
477
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
478
+ <div class="agent-card rounded-xl p-6 hover:shadow-lg">
479
+ <div class="flex items-center mb-4">
480
+ <div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center mr-4">
481
+ <i class="fas fa-shopping-cart text-white text-xl"></i>
482
+ </div>
483
+ <h3 class="text-xl font-bold">SalesBot Pro</h3>
484
+ </div>
485
+ <p class="text-gray-400 mb-4">
486
+ Automates lead qualification, outreach, and follow-ups while integrating with your CRM.
487
+ </p>
488
+ <div class="flex flex-wrap gap-2 mb-4">
489
+ <span class="px-3 py-1 bg-blue-900 bg-opacity-50 text-blue-300 rounded-full text-xs">CRM Integration</span>
490
+ <span class="px-3 py-1 bg-purple-900 bg-opacity-50 text-purple-300 rounded-full text-xs">Personalization</span>
491
+ <span class="px-3 py-1 bg-green-900 bg-opacity-50 text-green-300 rounded-full text-xs">Analytics</span>
492
+ </div>
493
+ <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">
494
+ Learn More
495
+ </button>
496
+ </div>
497
+
498
+ <div class="agent-card rounded-xl p-6 hover:shadow-lg">
499
+ <div class="flex items-center mb-4">
500
+ <div class="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center mr-4">
501
+ <i class="fas fa-headset text-white text-xl"></i>
502
+ </div>
503
+ <h3 class="text-xl font-bold">SupportBot 360</h3>
504
+ </div>
505
+ <p class="text-gray-400 mb-4">
506
+ Handles tier-1 customer inquiries 24/7 with natural language understanding and sentiment analysis.
507
+ </p>
508
+ <div class="flex flex-wrap gap-2 mb-4">
509
+ <span class="px-3 py-1 bg-purple-900 bg-opacity-50 text-purple-300 rounded-full text-xs">Multilingual</span>
510
+ <span class="px-3 py-1 bg-pink-900 bg-opacity-50 text-pink-300 rounded-full text-xs">Sentiment Analysis</span>
511
+ <span class="px-3 py-1 bg-yellow-900 bg-opacity-50 text-yellow-300 rounded-full text-xs">Knowledge Base</span>
512
+ </div>
513
+ <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">
514
+ Learn More
515
+ </button>
516
+ </div>
517
+
518
+ <div class="agent-card rounded-xl p-6 hover:shadow-lg">
519
+ <div class="flex items-center mb-4">
520
+ <div class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center mr-4">
521
+ <i class="fas fa-chart-pie text-white text-xl"></i>
522
+ </div>
523
+ <h3 class="text-xl font-bold">DataSense AI</h3>
524
+ </div>
525
+ <p class="text-gray-400 mb-4">
526
+ Analyzes complex datasets, identifies trends, and generates actionable business insights.
527
+ </p>
528
+ <div class="flex flex-wrap gap-2 mb-4">
529
+ <span class="px-3 py-1 bg-green-900 bg-opacity-50 text-green-300 rounded-full text-xs">Predictive Analytics</span>
530
+ <span class="px-3 py-1 bg-blue-900 bg-opacity-50 text-blue-300 rounded-full text-xs">Data Visualization</span>
531
+ <span class="px-3 py-1 bg-red-900 bg-opacity-50 text-red-300 rounded-full text-xs">Anomaly Detection</span>
532
+ </div>
533
+ <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">
534
+ Learn More
535
+ </button>
536
+ </div>
537
+
538
+ <div class="agent-card rounded-xl p-6 hover:shadow-lg">
539
+ <div class="flex items-center mb-4">
540
+ <div class="w-12 h-12 rounded-full bg-yellow-500 flex items-center justify-center mr-4">
541
+ <i class="fas fa-file-invoice-dollar text-white text-xl"></i>
542
+ </div>
543
+ <h3 class="text-xl font-bold">FinanceBot</h3>
544
+ </div>
545
+ <p class="text-gray-400 mb-4">
546
+ Automates invoice processing, expense categorization, and financial reporting with audit trails.
547
+ </p>
548
+ <div class="flex flex-wrap gap-2 mb-4">
549
+ <span class="px-3 py-1 bg-yellow-900 bg-opacity-50 text-yellow-300 rounded-full text-xs">Invoice Processing</span>
550
+ <span class="px-3 py-1 bg-indigo-900 bg-opacity-50 text-indigo-300 rounded-full text-xs">Compliance</span>
551
+ <span class="px-3 py-1 bg-teal-900 bg-opacity-50 text-teal-300 rounded-full text-xs">Forecasting</span>
552
+ </div>
553
+ <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">
554
+ Learn More
555
+ </button>
556
+ </div>
557
+
558
+ <div class="agent-card rounded-xl p-6 hover:shadow-lg">
559
+ <div class="flex items-center mb-4">
560
+ <div class="w-12 h-12 rounded-full bg-red-500 flex items-center justify-center mr-4">
561
+ <i class="fas fa-bollhorn text-white text-xl"></i>
562
+ </div>
563
+ <h3 class="text-xl font-bold">MarketingGenius</h3>
564
+ </div>
565
+ <p class="text-gray-400 mb-4">
566
+ Creates and optimizes marketing campaigns across channels with A/B testing and performance tracking.
567
+ </p>
568
+ <div class="flex flex-wrap gap-2 mb-4">
569
+ <span class="px-3 py-1 bg-red-900 bg-opacity-50 text-red-300 rounded-full text-xs">Campaign Automation</span>
570
+ <span class="px-3 py-1 bg-pink-900 bg-opacity-50 text-pink-300 rounded-full text-xs">Content Creation</span>
571
+ <span class="px-3 py-1 bg-purple-900 bg-opacity-50 text-purple-300 rounded-full text-xs">ROI Tracking</span>
572
+ </div>
573
+ <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">
574
+ Learn More
575
+ </button>
576
+ </div>
577
+
578
+ <div class="agent-card rounded-xl p-6 hover:shadow-lg">
579
+ <div class="flex items-center mb-4">
580
+ <div class="w-12 h-12 rounded-full bg-indigo-500 flex items-center justify-center mr-4">
581
+ <i class="fas fa-users text-white text-xl"></i>
582
+ </div>
583
+ <h3 class="text-xl font-bold">HR Assistant</h3>
584
+ </div>
585
+ <p class="text-gray-400 mb-4">
586
+ Streamlines recruitment, onboarding, and employee engagement with personalized interactions.
587
+ </p>
588
+ <div class="flex flex-wrap gap-2 mb-4">
589
+ <span class="px-3 py-1 bg-indigo-900 bg-opacity-50 text-indigo-300 rounded-full text-xs">Candidate Screening</span>
590
+ <span class="px-3 py-1 bg-blue-900 bg-opacity-50 text-blue-300 rounded-full text-xs">Onboarding</span>
591
+ <span class="px-3 py-1 bg-green-900 bg-opacity-50 text-green-300 rounded-full text-xs">Employee Surveys</span>
592
+ </div>
593
+ <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">
594
+ Learn More
595
+ </button>
596
+ </div>
597
+ </div>
598
+
599
+ <div class="text-center mt-12">
600
+ <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">
601
+ Explore All Agents
602
+ </button>
603
+ </div>
604
+ </div>
605
+ </section>
606
+
607
+ <!-- Pricing Section -->
608
+ <section id="pricing" class="py-20 px-4 sm:px-6 lg:px-8">
609
+ <div class="max-w-7xl mx-auto">
610
+ <div class="text-center mb-16">
611
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Simple, Transparent <span class="gradient-text">Pricing</span></h2>
612
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
613
+ Pay only for what you need with flexible pricing that scales with your business
614
+ </p>
615
+ </div>
616
+
617
+ <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
618
+ <div class="bg-gray-900 rounded-xl p-8 border border-gray-800 hover:border-blue-500 transition-all">
619
+ <div class="text-center mb-6">
620
+ <h3 class="text-2xl font-bold mb-2">Starter</h3>
621
+ <p class="text-gray-400 mb-4">Ideal for small teams and startups</p>
622
+ <div class="flex justify-center items-baseline">
623
+ <span class="text-4xl font-bold">$99</span>
624
+ <span class="text-gray-400 ml-1">/month</span>
625
+ </div>
626
+ </div>
627
+ <ul class="space-y-3 mb-8">
628
+ <li class="flex items-center">
629
+ <i class="fas fa-check text-green-500 mr-2"></i>
630
+ <span>5 Active Agents</span>
631
+ </li>
632
+ <li class="flex items-center">
633
+ <i class="fas fa-check text-green-500 mr-2"></i>
634
+ <span>10,000 Monthly Actions</span>
635
+ </li>
636
+ <li class="flex items-center">
637
+ <i class="fas fa-check text-green-500 mr-2"></i>
638
+ <span>Basic Analytics</span>
639
+ </li>
640
+ <li class="flex items-center text-gray-500">
641
+ <i class="fas fa-times text-gray-600 mr-2"></i>
642
+ <span>No Custom Agents</span>
643
+ </li>
644
+ <li class="flex items-center text-gray-500">
645
+ <i class="fas fa-times text-gray-600 mr-2"></i>
646
+ <span>No Priority Support</span>
647
+ </li>
648
+ </ul>
649
+ <button onclick="selectPlan('Starter')" class="w-full py-3 bg-gray-800 hover:bg-gray-700 text-white rounded-lg font-medium transition-all">
650
+ Get Started
651
+ </button>
652
+ </div>
653
+
654
+ <div class="bg-gray-900 rounded-xl p-8 border-2 border-blue-500 transform scale-105 relative glow">
655
+ <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">
656
+ POPULAR
657
+ </div>
658
+ <div class="text-center mb-6">
659
+ <h3 class="text-2xl font-bold mb-2">Professional</h3>
660
+ <p class="text-gray-400 mb-4">For growing businesses with automation needs</p>
661
+ <div class="flex justify-center items-baseline">
662
+ <span class="text-4xl font-bold">$499</span>
663
+ <span class="text-gray-400 ml-1">/month</span>
664
+ </div>
665
+ </div>
666
+ <ul class="space-y-3 mb-8">
667
+ <li class="flex items-center">
668
+ <i class="fas fa-check text-green-500 mr-2"></i>
669
+ <span>20 Active Agents</span>
670
+ </li>
671
+ <li class="flex items-center">
672
+ <i class="fas fa-check text-green-500 mr-2"></i>
673
+ <span>100,000 Monthly Actions</span>
674
+ </li>
675
+ <li class="flex items-center">
676
+ <i class="fas fa-check text-green-500 mr-2"></i>
677
+ <span>Advanced Analytics</span>
678
+ </li>
679
+ <li class="flex items-center">
680
+ <i class="fas fa-check text-green-500 mr-2"></i>
681
+ <span>Custom Agent Builder</span>
682
+ </li>
683
+ <li class="flex items-center text-gray-500">
684
+ <i class="fas fa-times text-gray-600 mr-2"></i>
685
+ <span>Standard Support</span>
686
+ </li>
687
+ </ul>
688
+ <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">
689
+ Get Started
690
+ </button>
691
+ </div>
692
+
693
+ <div class="bg-gray-900 rounded-xl p-8 border border-gray-800 hover:border-purple-500 transition-all">
694
+ <div class="text-center mb-6">
695
+ <h3 class="text-2xl font-bold mb-2">Enterprise</h3>
696
+ <p class="text-gray-400 mb-4">For large organizations with complex needs</p>
697
+ <div class="flex justify-center items-baseline">
698
+ <span class="text-4xl font-bold">Custom</span>
699
+ </div>
700
+ </div>
701
+ <ul class="space-y-3 mb-8">
702
+ <li class="flex items-center">
703
+ <i class="fas fa-check text-green-500 mr-2"></i>
704
+ <span>Unlimited Agents</span>
705
+ </li>
706
+ <li class="flex items-center">
707
+ <i class="fas fa-check text-green-500 mr-2"></i>
708
+ <span>Unlimited Actions</span>
709
+ </li>
710
+ <li class="flex items-center">
711
+ <i class="fas fa-check text-green-500 mr-2"></i>
712
+ <span>Enterprise Analytics</span>
713
+ </li>
714
+ <li class="flex items-center">
715
+ <i class="fas fa-check text-green-500 mr-2"></i>
716
+ <span>Custom Agent Builder</span>
717
+ </li>
718
+ <li class="flex items-center">
719
+ <i class="fas fa-check text-green-500 mr-2"></i>
720
+ <span>24/7 Priority Support</span>
721
+ </li>
722
+ </ul>
723
+ <button onclick="selectPlan('Enterprise')" class="w-full py-3 bg-gray-800 hover:bg-gray-700 text-white rounded-lg font-medium transition-all">
724
+ Contact Sales
725
+ </button>
726
+ </div>
727
+ </div>
728
+
729
+ <div class="mt-12 bg-gray-900 rounded-xl p-8 border border-gray-800 max-w-5xl mx-auto">
730
+ <h3 class="text-xl font-bold mb-4 text-center">Need something different?</h3>
731
+ <p class="text-gray-400 text-center mb-6 max-w-3xl mx-auto">
732
+ We offer custom plans for organizations with unique requirements. Contact us to discuss your needs.
733
+ </p>
734
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
735
+ <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">
736
+ Schedule a Demo
737
+ </button>
738
+ <button onclick="showContactModal()" class="px-6 py-3 bg-gray-800 hover:bg-gray-700 text-white rounded-lg font-medium transition-all">
739
+ Contact Our Team
740
+ </button>
741
+ </div>
742
+ </div>
743
+ </div>
744
+ </section>
745
+
746
+ <!-- Testimonials Section -->
747
+ <section class="py-20 bg-gray-900 px-4 sm:px-6 lg:px-8">
748
+ <div class="max-w-7xl mx-auto">
749
+ <div class="text-center mb-16">
750
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our <span class="gradient-text">Clients Say</span></h2>
751
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
752
+ Don't just take our word for it - hear from our customers
753
+ </p>
754
+ </div>
755
+
756
+ <div class="grid md:grid-cols-3 gap-8">
757
+ <div class="bg-gray-800 rounded-xl p-8">
758
+ <div class="flex items-center mb-6">
759
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4">
760
+ <div>
761
+ <h4 class="font-bold">Sarah Johnson</h4>
762
+ <p class="text-gray-400 text-sm">CTO, TechCorp</p>
763
+ </div>
764
+ </div>
765
+ <p class="text-gray-300 mb-6">
766
+ "AgentFlow transformed our customer support operations. We reduced response times by 80% while maintaining 95% customer satisfaction."
767
+ </p>
768
+ <div class="flex text-yellow-400">
769
+ <i class="fas fa-star"></i>
770
+ <i class="fas fa-star"></i>
771
+ <i class="fas fa-star"></i>
772
+ <i class="fas fa-star"></i>
773
+ <i class="fas fa-star"></i>
774
+ </div>
775
+ </div>
776
+
777
+ <div class="bg-gray-800 rounded-xl p-8">
778
+ <div class="flex items-center mb-6">
779
+ <img src="https://randomuser.me/api/portraits/men/65.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full mr-4">
780
+ <div>
781
+ <h4 class="font-bold">Michael Chen</h4>
782
+ <p class="text-gray-400 text-sm">VP Sales, GlobalBank</p>
783
+ </div>
784
+ </div>
785
+ <p class="text-gray-300 mb-6">
786
+ "Our sales team's productivity increased 3x after implementing SalesBot Pro. The personalized outreach automation is game-changing."
787
+ </p>
788
+ <div class="flex text-yellow-400">
789
+ <i class="fas fa-star"></i>
790
+ <i class="fas fa-star"></i>
791
+ <i class="fas fa-star"></i>
792
+ <i class="fas fa-star"></i>
793
+ <i class="fas fa-star"></i>
794
+ </div>
795
+ </div>
796
+
797
+ <div class="bg-gray-800 rounded-xl p-8">
798
+ <div class="flex items-center mb-6">
799
+ <img src="https://randomuser.me/api/portraits/women/28.jpg" alt="Emma Rodriguez" class="w-12 h-12 rounded-full mr-4">
800
+ <div>
801
+ <h4 class="font-bold">Emma Rodriguez</h4>
802
+ <p class="text-gray-400 text-sm">Marketing Director, InnovateCo</p>
803
+ </div>
804
+ </div>
805
+ <p class="text-gray-300 mb-6">
806
+ "MarketingGenius helped us optimize our ad spend while increasing conversions. The AI-generated insights saved us thousands in wasted budget."
807
+ </p>
808
+ <div class="flex text-yellow-400">
809
+ <i class="fas fa-star"></i>
810
+ <i class="fas fa-star"></i>
811
+ <i class="fas fa-star"></i>
812
+ <i class="fas fa-star"></i>
813
+ <i class="fas fa-star-half-alt"></i>
814
+ </div>
815
+ </div>
816
+ </div>
817
+
818
+ <div class="mt-12 text-center">
819
+ <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">
820
+ Read More Testimonials
821
+ </button>
822
+ </div>
823
+ </div>
824
+ </section>
825
+
826
+ <!-- CTA Section -->
827
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-blue-900 to-purple-900">
828
+ <div class="max-w-4xl mx-auto text-center">
829
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Business with AI?</h2>
830
+ <p class="text-xl text-blue-200 mb-8 max-w-3xl mx-auto">
831
+ Join thousands of companies automating their workflows with AgentFlow's powerful AI agents.
832
+ </p>
833
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
834
+ <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">
835
+ Start Free 14-Day Trial
836
+ </button>
837
+ <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">
838
+ Schedule a Demo
839
+ </button>
840
+ </div>
841
+ </div>
842
+ </section>
843
+
844
+ <!-- Contact Section -->
845
+ <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8">
846
+ <div class="max-w-7xl mx-auto">
847
+ <div class="grid md:grid-cols-2 gap-12 items-center">
848
+ <div>
849
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Get in <span class="gradient-text">Touch</span></h2>
850
+ <p class="text-xl text-gray-400 mb-8">
851
+ Have questions about AgentFlow or want to discuss how AI agents can help your business? Our team is here to help.
852
+ </p>
853
+
854
+ <div class="space-y-6">
855
+ <div class="flex items-start">
856
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center mr-4">
857
+ <i class="fas fa-map-marker-alt text-blue-400"></i>
858
+ </div>
859
+ <div>
860
+ <h4 class="font-bold mb-1">Our Office</h4>
861
+ <p class="text-gray-400">123 AI Avenue, San Francisco, CA 94107</p>
862
+ </div>
863
+ </div>
864
+
865
+ <div class="flex items-start">
866
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center mr-4">
867
+ <i class="fas fa-envelope text-purple-400"></i>
868
+ </div>
869
+ <div>
870
+ <h4 class="font-bold mb-1">Email Us</h4>
871
+ <p class="text-gray-400">[email protected]</p>
872
+ </div>
873
+ </div>
874
+
875
+ <div class="flex items-start">
876
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mr-4">
877
+ <i class="fas fa-phone-alt text-green-400"></i>
878
+ </div>
879
+ <div>
880
+ <h4 class="font-bold mb-1">Call Us</h4>
881
+ <p class="text-gray-400">+1 (555) 123-4567</p>
882
+ </div>
883
+ </div>
884
+ </div>
885
+
886
+ <div class="mt-8 flex space-x-4">
887
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-blue-600 flex items-center justify-center transition-all">
888
+ <i class="fab fa-twitter text-white"></i>
889
+ </a>
890
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-blue-700 flex items-center justify-center transition-all">
891
+ <i class="fab fa-linkedin-in text-white"></i>
892
+ </a>
893
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center transition-all">
894
+ <i class="fab fa-github text-white"></i>
895
+ </a>
896
+ </div>
897
+ </div>
898
+
899
+ <div class="bg-gray-900 rounded-xl p-8 border border-gray-800">
900
+ <h3 class="text-2xl font-bold mb-6">Send Us a Message</h3>
901
+ <form id="contact-form" onsubmit="submitContactForm(event)">
902
+ <div class="mb-6">
903
+ <label for="name" class="block text-sm font-medium text-gray-400 mb-2">Your Name</label>
904
+ <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>
905
+ </div>
906
+ <div class="mb-6">
907
+ <label for="email" class="block text-sm font-medium text-gray-400 mb-2">Email Address</label>
908
+ <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="[email protected]" required>
909
+ </div>
910
+ <div class="mb-6">
911
+ <label for="subject" class="block text-sm font-medium text-gray-400 mb-2">Subject</label>
912
+ <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>
913
+ </div>
914
+ <div class="mb-6">
915
+ <label for="message" class="block text-sm font-medium text-gray-400 mb-2">Message</label>
916
+ <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>
917
+ </div>
918
+ <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">
919
+ Send Message
920
+ </button>
921
+ </form>
922
+ </div>
923
+ </div>
924
+ </div>
925
+ </section>
926
+
927
+ <!-- Footer -->
928
+ <footer class="bg-black py-12 px-4 sm:px-6 lg:px-8 border-t border-gray-900">
929
+ <div class="max-w-7xl mx-auto">
930
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
931
+ <div>
932
+ <h4 class="text-lg font-bold mb-4">Product</h4>
933
+ <ul class="space-y-2">
934
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Features</a></li>
935
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Pricing</a></li>
936
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Agents</a></li>
937
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Integrations</a></li>
938
+ </ul>
939
+ </div>
940
+ <div>
941
+ <h4 class="text-lg font-bold mb-4">Resources</h4>
942
+ <ul class="space-y-2">
943
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Documentation</a></li>
944
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">API Reference</a></li>
945
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Blog</a></li>
946
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Community</a></li>
947
+ </ul>
948
+ </div>
949
+ <div>
950
+ <h4 class="text-lg font-bold mb-4">Company</h4>
951
+ <ul class="space-y-2">
952
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">About Us</a></li>
953
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Careers</a></li>
954
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Press</a></li>
955
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Contact</a></li>
956
+ </ul>
957
+ </div>
958
+ <div>
959
+ <h4 class="text-lg font-bold mb-4">Legal</h4>
960
+ <ul class="space-y-2">
961
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Privacy Policy</a></li>
962
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Terms of Service</a></li>
963
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Security</a></li>
964
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">GDPR</a></li>
965
+ </ul>
966
+ </div>
967
+ </div>
968
+
969
+ <div class="pt-8 border-t border-gray-900 flex flex-col md:flex-row justify-between items-center">
970
+ <div class="flex items-center mb-4 md:mb-0">
971
+ <i class="fas fa-robot text-blue-500 text-2xl mr-2"></i>
972
+ <span class="text-xl font-bold text-white">Agent<span class="gradient-text">Flow</span></span>
973
+ </div>
974
+ <p class="text-gray-500 text-sm">
975
+ © 2023 AgentFlow, Inc. All rights reserved.
976
+ </p>
977
+ </div>
978
+ </div>
979
+ </footer>
980
+
981
+ <!-- Modals -->
982
+ <div id="signup-modal" class="modal">
983
+ <div class="modal-content relative">
984
+ <span class="close-modal text-gray-400 hover:text-white" onclick="hideSignupModal()">&times;</span>
985
+ <h2 class="text-2xl font-bold mb-6">Create Your Account</h2>
986
+ <form id="signup-form" onsubmit="submitSignupForm(event)">
987
+ <div class="mb-4">
988
+ <label for="signup-email" class="block text-sm font-medium text-gray-400 mb-2">Email Address</label>
989
+ <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="[email protected]" required>
990
+ </div>
991
+ <div class="mb-4">
992
+ <label for="signup-password" class="block text-sm font-medium text-gray-400 mb-2">Password</label>
993
+ <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>
994
+ </div>
995
+ <div class="mb-6">
996
+ <label for="signup-company" class="block text-sm font-medium text-gray-400 mb-2">Company Name</label>
997
+ <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>
998
+ </div>
999
+ <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">
1000
+ Start Free Trial
1001
+ </button>
1002
+ <p class="text-center text-gray-400 text-sm">
1003
+ Already have an account? <a href="#" class="text-blue-400 hover:text-blue-300">Log in</a>
1004
+ </p>
1005
+ </form>
1006
+ </div>
1007
+ </div>
1008
+
1009
+ <div id="demo-modal" class="modal">
1010
+ <div class="modal-content relative">
1011
+ <span class="close-modal text-gray-400 hover:text-white" onclick="hideDemoModal()">&times;</span>
1012
+ <h2 class="text-2xl font-bold mb-6">Schedule a Demo</h2>
1013
+ <form id="demo-form" onsubmit="submitDemoForm(event)">
1014
+ <div class="mb-4">
1015
+ <label for="demo-name" class="block text-sm font-medium text-gray-400 mb-2">Your Name</label>
1016
+ <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>
1017
+ </div>
1018
+ <div class="mb-4">
1019
+ <label for="demo-email" class="block text-sm font-medium text-gray-400 mb-2">Email Address</label>
1020
+ <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="[email protected]" required>
1021
+ </div>
1022
+ <div class="mb-4">
1023
+ <label for="demo-company" class="block text-sm font-medium text-gray-400 mb-2">Company Name</label>
1024
+ <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>
1025
+ </div>
1026
+ <div class="mb-6">
1027
+ <label for="demo-date" class="block text-sm font-medium text-gray-400 mb-2">Preferred Date & Time</label>
1028
+ <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>
1029
+ </div>
1030
+ <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">
1031
+ Schedule Demo
1032
+ </button>
1033
+ </form>
1034
+ </div>
1035
+ </div>
1036
+
1037
+ <div id="contact-modal" class="modal">
1038
+ <div class="modal-content relative">
1039
+ <span class="close-modal text-gray-400 hover:text-white" onclick="hideContactModal()">&times;</span>
1040
+ <h2 class="text-2xl font-bold mb-6">Contact Our Team</h2>
1041
+ <form id="contact-team-form" onsubmit="submitContactTeamForm(event)">
1042
+ <div class="mb-4">
1043
+ <label for="contact-name" class="block text-sm font-medium text-gray-400 mb-2">Your Name</label>
1044
+ <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>
1045
+ </div>
1046
+ <div class="mb-4">
1047
+ <label for="contact-email" class="block text-sm font-medium text-gray-400 mb-2">Email Address</label>
1048
+ <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="[email protected]" required>
1049
+ </div>
1050
+ <div class="mb-4">
1051
+ <label for="contact-subject" class="block text-sm font-medium text-gray-400 mb-2">Subject</label>
1052
+ <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>
1053
+ </div>
1054
+ <div class="mb-6">
1055
+ <label for="contact-message" class="block text-sm font-medium text-gray-400 mb-2">Message</label>
1056
+ <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>
1057
+ </div>
1058
+ <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">
1059
+ Send Message
1060
+ </button>
1061
+ </form>
1062
+ </div>
1063
+ </div>
1064
+
1065
+ <div id="testimonials-modal" class="modal">
1066
+ <div class="modal-content relative">
1067
+ <span class="close-modal text-gray-400 hover:text-white" onclick="hideTestimonialsModal()">&times;</span>
1068
+ <h2 class="text-2xl font-bold mb-6">Customer Testimonials</h2>
1069
+ <div class="space-y-6 max-h-[70vh] overflow-y-auto pr-4">
1070
+ <div class="bg-gray-800 rounded-xl p-6">
1071
+ <div class="flex items-center mb-4">
1072
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="David Kim" class="w-12 h-12 rounded-full mr-4">
1073
+ <div>
1074
+ <h4 class="font-bold">David Kim</h4>
1075
+ <p class="text-gray-400 text-sm">Director of Operations, RetailChain</p>
1076
+ </div>
1077
+ </div>
1078
+ <p class="text-gray-300 mb-4">
1079
+ "Implementing AgentFlow's inventory management agents reduced our stockouts by 92% while decreasing overstock by 65%. The AI's predictive capabilities are incredibly accurate."
1080
+ </p>
1081
+ <div class="flex text-yellow-400">
1082
+ <i class="fas fa-star"></i>
1083
+ <i class="fas fa-star"></i>
1084
+ <i class="fas fa-star"></i>
1085
+ <i class="fas fa-star"></i>
1086
+ <i class="fas fa-star"></i>
1087
+ </div>
1088
+ </div>
1089
+
1090
+ <div class="bg-gray-800 rounded-xl p-6">
1091
+ <div class="flex items-center mb-4">
1092
+ <img src="https://randomuser.me/api/portraits/women/54.jpg" alt="Lisa Wong" class="w-12 h-12 rounded-full mr-4">
1093
+ <div>
1094
+ <h4 class="font-bold">Lisa Wong</h4>
1095
+ <p class="text-gray-400 text-sm">CEO, HealthTech Solutions</p>
1096
+ </div>
1097
+ </div>
1098
+ <p class="text-gray-300 mb-4">
1099
+ "The HR Assistant transformed our recruitment process. We now fill positions 40% faster while finding higher quality candidates. The automated screening is remarkably sophisticated."
1100
+ </p>
1101
+ <div class="flex text-yellow-400">
1102
+ <i class="fas fa-star"></i>
1103
+ <i class="fas fa-star"></i>
1104
+ <i class="fas fa-star"></i>
1105
+ <i class="fas fa-star"></i>
1106
+ <i class="fas fa-star-half-alt"></i>
1107
+ </div>
1108
+ </div>
1109
+
1110
+ <div class="bg-gray-800 rounded-xl p-6">
1111
+ <div class="flex items-center mb-4">
1112
+ <img src="https://randomuser.me/api/portraits/men/76.jpg" alt="Robert Taylor" class="w-12 h-12 rounded-full mr-4">
1113
+ <div>
1114
+ <h4 class="font-bold">Robert Taylor</h4>
1115
+ <p class="text-gray-400 text-sm">CFO, FinancialEdge</p>
1116
+ </
1117
+ </html>